Σύστημα σχεδίασης

Η Scoutello πρέπει να αποπνέει ζεστασιά, ικανότητα και εστίαση στο προϊόν. Η προτιμώμενη εμφάνιση είναι φωτεινή, γενναιόδωρη, στρογγυλεμένη και εκδοτική: πρώτα καθαρό περιεχόμενο, μετά διακριτικό χρώμα επωνυμίας, απαλές επιφάνειες και ήρεμη κίνηση που κάνει το προϊόν να φαίνεται ευέλικτο χωρίς να γίνεται διακοσμητικός θόρυβος.

Η σελίδα προορισμού μάρκετινγκ είναι η σαφέστερη δημόσια αναφορά για την τρέχουσα οπτική κατεύθυνση. Οι επιφάνειες του προϊόντος πρέπει να επαναχρησιμοποιούν τα κοινόχρηστα διακριτικά σχεδίασης όπου είναι δυνατόν και να γίνονται πιο εκφραστικές μόνο όταν η επιφάνεια είναι ρητά προσανατολισμένη στην επωνυμία ή στο μάρκετινγκ.

Λογότυπο και Στοιχεία Επωνυμίας

Χρησιμοποιήστε το λογότυπο Scoutello από τη διεύθυνση URL των δημόσιων πόρων τεκμηρίωσης όταν ένας πράκτορας, μια ενσωμάτωση ή μια δημιουργημένη σελίδα χρειάζεται ένα επαναχρησιμοποιήσιμο σήμα επωνυμίας:

• Λογότυπο SVG: https://docs.scoutello.com/img/scoutello-logo.svg
• Λογότυπο PNG: https://docs.scoutello.com/img/scoutello-logo.png

Προτιμήστε την έκδοση SVG για ευκρινή απόδοση σε όλα τα μεγέθη οθόνης. Χρησιμοποιήστε την έκδοση PNG όταν ένα εργαλείο ή προορισμός δεν μπορεί να χειριστεί SVG. Διατηρήστε επαρκή καθαρό χώρο γύρω από το σήμα, αποφύγετε να το τεντώσετε ή να αλλάξετε το χρώμα του και τοποθετήστε το σε λευκές, ζεστές κρεμ ή άλλες ήρεμες επιφάνειες που διατηρούν την αντίθεση.

Χρώματα Επωνυμίας

Κύριο χρώμα: #ff8d49

Χρησιμοποιήστε το κύριο πορτοκαλί ως χρώμα έμφασης της Scoutello: κύριες παροτρύνσεις για δράση, εστιασμένες καταστάσεις, ενεργή πλοήγηση, φόντο μικρών εικονιδίων, επισήμανση κειμένου, απαλές λάμψεις και ζεστές διαβαθμίσεις. Στον κώδικα του προϊόντος αντιστοιχεί σε --primary: 24 100% 64% και κλάσεις Tailwind όπως bg-primary, text-primary, border-primary/15 και shadow-primary/10.

Δευτερεύον χρώμα: #145466

Χρησιμοποιήστε το δευτερεύον βαθύ πετρόλ ως γειωτικό χρώμα. Λειτουργεί καλύτερα σε διαβαθμίσεις με το κύριο πορτοκαλί, σκούρα πάνελ παρότρυνσης για δράση, οπτικό βάθος και περιστασιακές στιγμές υψηλής έμφασης της επωνυμίας. Δεν πρέπει να αντικαθιστά το κύριο πορτοκαλί ως προεπιλεγμένο χρώμα δράσης.

Υποστηρικτικά χρώματα:

• Ζεστά κρεμ φόντα: #fff8f1, #fff4ea, #fcf6f1 και απαλές επιφάνειες orange-50 / amber-50.
• Ουδέτερα προϊόντος: λευκές κάρτες, σκούρο κείμενο προσκηνίου, αχνό κείμενο με περίπου 70-75% αδιαφάνεια και ανοιχτά περιγράμματα.
• Τριτεύον μπλε: hsl(205 100% 51%) είναι διαθέσιμο ως υποστηρικτικό διακριτικό, αλλά πρέπει να χρησιμοποιείται με φειδώ ώστε το πορτοκαλί και το πετρόλ να παραμένουν αναγνωρίσιμα ως το ζεύγος της επωνυμίας.

Οπτικό Στυλ

Προτιμήστε μια καθαρή, premium εμφάνιση SaaS με αρκετή ζεστασιά για να αποφύγετε να φαίνεται γενική. Η σελίδα προορισμού συνδυάζει κρεμ φόντα πλέγματος, λευκές κάρτες, μεγάλες στιγμιότυπα προϊόντων, στρογγυλεμένες γωνίες και περιορισμένες διαβαθμίσεις.

Χρησιμοποιήστε:

• Στρογγυλεμένες κάρτες και πάνελ, συχνά από rounded-2xl έως rounded-[2rem].
• Απαλά περιγράμματα όπως border-primary/10, border-primary/15, ring-black/5 και ανοιχτά ουδέτερα περιγράμματα.
• Στρωματοποιημένες λευκές ή κρεμ επιφάνειες αντί για βαριά χρωματιστά μπλοκ.
• Διακριτικές σκιές όπως shadow-sm, shadow-lg, shadow-2xl shadow-primary/10 ή προσαρμοσμένες σκιές χαμηλής αδιαφάνειας.
• Μεγάλες στιγμιότυπα προϊόντων ή μακέτες διεπαφής χρήστη ως απόδειξη, ειδικά για μάρκετινγκ και αφήγηση χαρακτηριστικών.
• Μικρές στιγμές επωνυμίας όπως επισήμανση κειμένου με πορτοκαλί, τσιπς εικονιδίων, δακτυλίους, λάμψεις και διαβαθμίσεις CTAs.

Αποφύγετε:

• Δυνατά πορτοκαλί φόντα πλήρους σελίδας.
• Υπερβολική χρήση πετρόλ για συνηθισμένα στοιχεία ελέγχου.
• Πυκνές, στενές διατάξεις.
• Σκληρές σκιές, αιχμηρά ορθογώνια ή ψυχρά μονοχρωματικά ταμπλό.
• Διακοσμητική κίνηση που ανταγωνίζεται την ανάγνωση ή την ολοκλήρωση εργασιών.

Τυπογραφία

Ο ιστότοπος μάρκετινγκ χρησιμοποιεί:

• Space Grotesk για επικεφαλίδες προβολής μέσω της κλάσης landing-display.
• Manrope για κείμενο σώματος μάρκετινγκ.

Οι κοινόχρηστες επιφάνειες εφαρμογών και τεκμηρίωσης χρησιμοποιούν τυπογραφία διεπαφής χρήστη ευθυγραμμισμένη με το σύστημα, η οποία είναι επί του παρόντος πιο κοντά στο Inter. Ο στόχος του στυλ είναι συνεπής σε όλες τις επιφάνειες: σίγουρες επικεφαλίδες, σφιχτή παρακολούθηση επικεφαλίδων, ευανάγνωστο κείμενο σώματος και γενναιόδωρο ύψος γραμμής.

Οδηγίες επικεφαλίδων:

• Χρησιμοποιήστε μεγάλες, ισορροπημένες επικεφαλίδες σε σελίδες μάρκετινγκ.
• Επισημάνετε μόνο τη σημαντική φράση με κύριο πορτοκαλί.
• Διατηρήστε το μήκος γραμμής ελεγχόμενο με max-w-* και text-balance όπου είναι διαθέσιμο.

Οδηγίες κειμένου σώματος:

• Διατηρήστε τις παραγράφους ήρεμες και άμεσες.
• Χρησιμοποιήστε αχνό κείμενο προσκηνίου για περιγραφές, συνήθως text-foreground/70 ή text-foreground/75.
• Προτιμήστε σκαναρίσιμες ενότητες, σύντομες παραγράφους και σαφείς ετικέτες.

Διάταξη και Χώρος

Οι διατάξεις πρέπει να είναι ευρύχωρες και σταθερές. Η σελίδα προορισμού χρησιμοποιεί ένα κοντέινερ max-w-7xl με απόκριση οριζόντια επένδυση και μεγάλες κάθετες ενότητες.

Κοινά μοτίβα:

• Επένδυση ενότητας γύρω από py-16, py-20 ή μεγαλύτερη για κύριες ενότητες μάρκετινγκ.
• Κάρτες διατεταγμένες σε πλέγματα απόκρισης με σταθερά κενά.
• Ενότητες Hero με ισχυρή αριστερή στήλη περιεχομένου και στιγμιότυπα προϊόντων ή συνθέσεις συσκευών στα δεξιά.
• Κεντραρισμένες επικεφαλίδες ενοτήτων για ευρείες υποσχέσεις προϊόντων· επικεφαλίδες ευθυγραμμισμένες αριστερά για ενότητες ιστορίας ή ροής εργασιών.
• Διάταξη πρώτα για κινητά που στοιβάζονται καθαρά πριν γίνουν πολλαπλών στηλών σε μεγαλύτερες οθόνες.

Χρησιμοποιήστε τον λευκό χώρο ως μέρος του σχεδιασμού. Εάν μια ενότητα φαίνεται ασαφής, απλοποιήστε το περιεχόμενο και αυξήστε τον χώρο αναπνοής πριν προσθέσετε περισσότερη διακόσμηση.

Στοιχεία και Επιφάνειες

Οι επιφάνειες Scoutello πρέπει να αισθάνονται απτές αλλά ελαφριές:

• Κουμπιά: στρογγυλεμένα χάπια για εμφανείς παροτρύνσεις για δράση μάρκετινγκ· τυπικά κουμπιά προϊόντος αλλού.
• Κάρτες: λευκές ή κρεμ, στρογγυλεμένες, με περίγραμμα και ελαφρώς ανυψωμένες.
• Εικονίδια: μικρά, απλά εικονίδια γραμμής σε τσιπς με πορτοκαλί απόχρωση.
• Στατιστικά στοιχεία και στοιχεία εμπιστοσύνης: περιορισμένες κάρτες με περιγράμματα με πορτοκαλί απόχρωση ή διαβαθμίσεις.
• Φόρμες: σαφείς ετικέτες, άμεση βοήθεια κειμένου και επαρκής χώρος για χρήση σε κινητά.
• Στιγμιότυπα: μεγάλα, ευκρινή και ελαφρώς ανυψωμένα. Χρησιμοποιήστε τα ως συγκεκριμένη απόδειξη του προϊόντος.

Κατά τη δημιουργία διεπαφής χρήστη προϊόντος, ξεκινήστε από υπάρχοντα κοινόχρηστα στοιχεία διεπαφής χρήστη και διακριτικά αντί για προσαρμοσμένη στυλιστική μοναδική διαμόρφωση. Κατά τη δημιουργία διεπαφής χρήστη μάρκετινγκ, χρησιμοποιήστε τα πρωταρχικά στοιχεία σελίδας προορισμού και τις κλάσεις σελίδας προορισμού όπου ταιριάζουν.

Κίνηση

Η κίνηση πρέπει να κάνει τη διεπαφή να φαίνεται προσεγμένη, όχι πολυάσχολη. Η σελίδα προορισμού χρησιμοποιεί σύντομες κινούμενες εικόνες εμφάνισης, εφέ ανύψωσης συσκευής, εφέ άνθισης λάμψης και μικρές ανυψώσεις κατά την αιώρηση.

Προτιμώμενη κίνηση:

• Εμφάνιση προς τα πάνω από 12-24px με απαλή αδιαφάνεια.
• Κάρτες κατά την αιώρηση που ανυψώνονται μόνο λίγα pixel.
• Καταστάσεις αιώρησης CTAs που ανυψώνουν ελαφρώς και βαθαίνουν τη σκιά.
• Σταδιακές εισόδους ενοτήτων όπου υποστηρίζουν τη σάρωση αφήγησης.

Πάντα να σέβεστε τις προτιμήσεις μειωμένης κίνησης. Αποφύγετε κινούμενες εικόνες που μπορούν να κρύψουν περιεχόμενο, να μπλοκάρουν την αλληλεπίδραση ή να αισθάνονται απαραίτητες για την κατανόηση της σελίδας.

Φωνή και Σχεδίαση Περιεχομένου

Το οπτικό σύστημα λειτουργεί καλύτερα με άμεσο, συγκεκριμένο κείμενο. Προτιμήστε γλώσσα που εξηγεί τι μπορεί να δημοσιεύσει, να διαχειριστεί ή να αυτοματοποιήσει ένας οργανισμός στο Scoutello.

Χρησιμοποιήστε:

• Ουσιαστικά συγκεκριμένα για το προϊόν: σελίδες προορισμού, πλακίδια, περιηγήσεις, συμβάντα, οργανισμοί, ταμπλό, επισκέπτες, κωδικοί QR, μεταφράσεις.
• Περιγραφές προσανατολισμένες στα αποτελέσματα που συνδέουν τις εμπειρίες επισκεπτών με τις ροές εργασιών των χειριστών.
• Ουδέτερη ως προς το φύλο γλώσσα στα Γερμανικά και σε άλλα τοπικοποιημένα κείμενα.

Αποφύγετε:

• Ασαφή γλώσσα πλατφόρμας χωρίς παραδείγματα.
• Υπερβολικά επίσημη ορολογία επιχειρήσεων.
• Μεγάλες παραγράφους όπου μια σκαναρίσιμη ενότητα θα λειτουργούσε καλύτερα.

Πρακτικοί Κανόνες

• Χρησιμοποιήστε το #ff8d49 ως κύριο χρώμα έμφασης της επωνυμίας και το #145466 ως δευτερεύον γειωτικό χρώμα.
• Προτιμήστε κλάσεις με διακριτικά (primary, secondary, foreground, muted, border) έναντι σκληρά κωδικοποιημένων χρωμάτων στις επιφάνειες προϊόντων.
• Διατηρήστε τις σελίδες μάρκετινγκ ζεστές, ευρύχωρες, στρογγυλεμένες, με επικεφαλής στιγμιότυπα και ελαφρώς κινούμενες.
• Διατηρήστε τα ταμπλό και τις λειτουργικές επιφάνειες πιο ήρεμες, πυκνές μόνο όπου είναι απαραίτητο και πιο εστιασμένες στην εργασία.
• Επιτρέψτε στις εμπειρίες επισκεπτών που ανήκουν στον πελάτη να υποστηρίζουν την επωνυμία του οργανισμού όπου το προϊόν ήδη εκθέτει ελέγχους επωνυμίας, αλλά διατηρήστε τις επιφάνειες που ανήκουν στην Scoutello ευθυγραμμισμένες με αυτό το σύστημα.

Σχετικές έννοιες: Διαδρομές και επιφάνειες, Σελίδες προορισμού και πλακίδια, Εμπειρίες επισκεπτών πρώτα στον περιηγητή.