Τα 5 καλύτερα παραδείγματα σχεδιασμού πλέγματος Bento από κορυφαίες μάρκες

Τι είναι το πλέγμα bento

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

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

Καλύτερα παραδείγματα πλέγματος bento από πραγματικά brands

• Προώθηση Halcyon Logistics

Το πλέγμα ενώνει διαφορετικά στοιχεία, όπως ένα λογότυπο, δείγματα γραμματοσειρών, ειδοποιήσεις χρηστών και εντυπωσιακά οπτικά παραδείγματα, συμπεριλαμβανομένης μιας οθόνης smartphone.Δείχνει πώς οι UI/UX σχεδιαστές μπορούν να οργανώσουν στοιχεία της επωνυμίας και μέρη διεπαφής σε ένα τακτοποιημένο, ξεκάθαρο μορφότυπο που είναι τόσο χρήσιμο όσο και ελκυστικό.

• Περιεχόμενα μπλοκ του Procreate

Το Procreate χρησιμοποιεί ένα πλέγμα πέντε μπλοκ, όπου κάθε τμήμα έχει το δικό του οπτικό στοιχείο και μήνυμα.Τα δύο επάνω μπλοκ επικεντρώνονται στη δημιουργικότητα: το ένα σας προσκαλεί να ξεκινήσετε, ενώ το άλλο σας ενθαρρύνει να μοιραστείτε τη δουλειά σας.Κάθε μέρος στέκεται μόνο του, αλλά εξακολουθεί να συνδέεται με τη συνολική διάταξη.Η καθαρή δομή δείχνει πώς τα πλέγματα bento μπορούν να οργανώσουν περιεχόμενο με τρόπο εύκολο στην παρακολούθηση και οπτικά έντονο.

• Twitter teasers από τους 10xDesigners

Αυτό το γραφικό τύπου bento από τους 10xDesigners είναι σχεδιασμένο σαν ψηφιακή εισαγωγική κάρτα, διαχωρίζοντας προσωπικές και επαγγελματικές λεπτομέρειες σε καθαρά μπλοκ.Στην επάνω αριστερή πλευρά, η ετικέτα «Εισαγωγή Μέντορα» ορίζει το πλαίσιο.Δίπλα της, μια φωτογραφία προσδίδει μια προσωπική πινελιά.Το μεγάλο κείμενο «Aleks» βρίσκεται στο κέντρο, λειτουργώντας ως κύριο σημείο αναφοράς.

Γύρω του, μικρότερα μπλοκ παρέχουν γρήγορες πληροφορίες: τίτλος εργασίας, μια σύντομη φράση για υπαίθρια χόμπι, μια ετικέτα χώρας, μια αναφορά μουσικής διασκέδασης και ένα βιογραφικό τύπου tweet.Κάθε τμήμα έχει τον δικό του χώρο, ώστε τίποτα να μην είναι υπερφορτωμένο.Αυτή η διάταξη λειτουργεί σαν μια γρήγορη επισκόπηση, που είναι εύκολο να διαβαστεί και να απομνημονευθεί.

• Μελέτη περίπτωσης του Koto Studio για το WhatsApp

Η μελέτη περίπτωσης του Koto Studio για το WhatsApp χρησιμοποιεί ένα παιχνιδιάρικο πλέγμα bento που συνδυάζει αριθμούς, σύμβολα, εικονίδια και εικόνες από τον πραγματικό κόσμο σε μία προβολή.Κάθε μπλοκ φέρνει κάτι νέο.Ένα μπλοκ έχει φωτογραφία, άλλο έχει ηχητικό κύμα, ενώ άλλα περιλαμβάνουν έντονους αριθμούς σε χρώματα ή σύντομες φράσεις κειμένου.Παρά την ποικιλία, όλα φαίνονται συνδεδεμένα μέσω καθαρών αποστάσεων και έντονων πράσινων τόνων.Αυτός ο σχεδιασμός δείχνει πώς μπορείτε να φέρετε διαφορετικούς τύπους περιεχομένου σε μία διάταξη χωρίς να γίνει ακατάστατη.

• Iconwerk UI

Η διεπαφή χρήστη bento του Iconwerk παρουσιάζει διαφορετικά προσαρμοσμένα εικονίδια με ένα σύντομο μήνυμα σχετικά με τον απλό και χρήσιμο σχεδιασμό.Κάθε εικονίδιο είναι διαφορετικό, δείχνοντας ότι η υπηρεσία είναι ευέλικτη.Η φωτογραφία ενός χαμογελαστού ατόμου προσθέτει μια φιλική νότα.Είναι ένα ξεκάθαρο παράδειγμα για σχεδιαστές UI/UX που θέλουν να μοιραστούν τη δουλειά και το μήνυμά τους με οργανωμένο και τακτοποιημένο τρόπο.

Πώς να δημιουργήσετε μια διάταξη πλέγματος bento με το CapCut Web

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

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

Γρήγορος οδηγός για τη χρήση του CapCut Web

Κάντε κλικ στον σύνδεσμο και εγγραφείτε πρώτα στο CapCut Web.Στη συνέχεια, μπορείτε να δημιουργήσετε έναν σχεδιασμό πλέγματος bento με αυτά τα βήματα:

Βήμα 1
1. Άνοιξε τον επεξεργαστή εικόνας

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

Βήμα 2
1. Δημιουργήστε το bento πλέγμα

Μέσα στον επεξεργαστή, έχετε δύο επιλογές!Μπορείτε να μεταβείτε στην καρτέλα «Πρότυπα», να επιλέξετε ένα πρότυπο σε στυλ bento και να το προσαρμόσετε σύμφωνα με τις ανάγκες σας.Μια άλλη ενέργεια που μπορείτε να κάνετε είναι να μεταβείτε στο «Κολάζ», να επιλέξετε μια διάταξη κολάζ και να προσθέσετε το μέσο σας σε αυτή.Έχετε επίσης την επιλογή να ορίσετε την απόσταση και την ακτίνα των γωνιών του κολάζ.Μπορείτε στη συνέχεια να χρησιμοποιήσετε αυτοκόλλητα, σχήματα και κείμενο για να ολοκληρώσετε το σχέδιο bento σας.

ΒΗΜΑ 3
1. Εξαγωγή στη συσκευή σας

Όταν τελειώσετε, κάντε κλικ στο «Λήψη όλων» (μπλε κουμπί επάνω δεξιά) και επιλέξτε «Λήψη». Επιλέξτε τη μορφή αρχείου, το μέγεθος και την ποιότητα και πατήστε ξανά «Λήψη».Μπορείτε επίσης να στείλετε και να δημοσιεύσετε απευθείας το σχέδιό σας στο Facebook και στο Instagram από το αναπτυσσόμενο μενού Λήψη όλων

Κύρια χαρακτηριστικά της γεννήτριας πλέγματος bento στο CapCut Web

• Προεγκεκριμένα πρότυπα πλέγματος bento

Ο δημιουργός πλέγματος bento του CapCut Web προσφέρει μια βιβλιοθήκη προτύπων όπου μπορείτε εύκολα να βρείτε ένα διάταξη πλέγματος bentoΣτις Προκαθορισμένες (κάτω από την καρτέλα Εικόνα), πληκτρολογήστε «bento grid» στη γραμμή αναζήτησηςΑπλά επιλέξτε ένα και προσθέστε αμέσως το περιεχόμενό σας—ιδανικό για γρήγορες, κομψές οπτικές συνθέσεις

• Βελτιστοποίηση χρώματος με ένα κλικ

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

• Γεννήτρια σχεδίασης από κείμενο

Έχετε μια ιδέα αλλά δεν είστε σίγουροι πώς να τη διαμορφώσετε; Το CapCut Web διαθέτει επίσης μια γεννήτρια "Σχεδίασης από Κείμενο" που κατανοεί πλήρως την προτροπή κειμένου και τη φωτογραφία αναφοράς σας και δημιουργεί μια παρόμοια διάταξη bento χρησιμοποιώντας τεχνητή νοημοσύνη.

• Γρήγορη αλλαγή μεγέθους καμβά

Χρειάζεστε το ίδιο σχέδιο για το TikTok, το Instagram και το YouTube;Δεν χρειάζεται να ξεκινήσετε από την αρχή.Απλώς αλλάξτε το μέγεθος του καμβά με ένα κλικ και η διάταξή σας προσαρμόζεται στο νέο φορμάτ.

• Ενσωματωμένο εργαλείο εταιρικής ταυτότητας

Με το Brand Kit του CapCut Web, μπορείτε να αποθηκεύσετε όλα όσα καθορίζουν το στυλ σας.Αυτό περιλαμβάνει τα λογότυπά σας, τους χρωματικούς κωδικούς, τις γραμματοσειρές, τη μουσική, τα αυτοκόλλητα, και ακόμη και προκαθορισμένα κείμενα.Δεν θα χρειαστεί να ανεβάζετε ξανά τα αρχεία σας κάθε φορά.Τα στοιχεία της επωνυμίας σας είναι έτοιμα προς χρήση, ώστε κάθε σχέδιο που δημιουργείτε να παραμένει πιστό στο θέμα σας.

Οφέλη του σχεδιαστικού μοτίβου πλέγματος bento

• Καλύτερη εμπειρία χρήστη: Όταν κάθε στοιχείο βρίσκεται στη δική του ενότητα, είναι ευκολότερο να το περιηγηθείτε.Οι επισκέπτες της ιστοσελίδας σας δεν χρειάζεται να σαρώσουν μέσα από μεγάλες ενότητες κειμένου ή ακατάστατα γραφικά και μπορούν να μετακινηθούν από ένα μπλοκ σε άλλο με τον δικό τους ρυθμό, κάτι που τους προσφέρει καλύτερη εμπειρία.
• Μεγαλύτερη δέσμευση: Ένα πλέγμα bento χρησιμοποιεί γραφικά, σύντομα κείμενα και έξυπνη διάταξη για να τραβήξει γρήγορα την προσοχή.Δεδομένου ότι κάθε μπλοκ επικεντρώνεται σε μία ιδέα, οι χρήστες ξέρουν πού να εστιάσουν και είναι πιο πιθανό να εξερευνήσουν περισσότερο το περιεχόμενό σας.
• Εστίαση σε βασικές ενέργειες: Μπορείτε να τονίσετε σημαντικά βήματα, όπως "Εγγραφή," "Δοκιμάστε τώρα," ή "Μάθετε περισσότερα," σε ξεχωριστά μπλοκ.Αυτή η διάταξη δίνει στις ενέργειες χώρο να ξεχωρίσουν, ώστε να μην χαθούν μέσα σε άλλο περιεχόμενο.
• Σαφής οπτική ιεραρχία: Τα πλέγματα Bento καθοδηγούν το βλέμμα φυσικά, από μεγαλύτερα, έντονα τμήματα προς μικρότερα.Εσείς αποφασίζετε τι πάει πού, και η δομή επιτρέπει στους ανθρώπους να κατανοούν τι έχει μεγαλύτερη σημασία απλώς κοιτάζοντας τη διάταξη.

Συμπέρασμα

Σε αυτό το άρθρο, εξερευνήσατε πώς λειτουργεί η διάταξη πλέγματος bento και γιατί είναι μια έξυπνη επιλογή για καθαρό, μοντέρνο σχεδιασμό.Είδατε πέντε πραγματικά παραδείγματα που έδειξαν πώς οι μάρκες χρησιμοποιούν αυτή τη διάταξη για να οργανώσουν το περιεχόμενο με απλό και ελκυστικό τρόπο.Περάσατε επίσης από βήματα για να δημιουργήσετε το δικό σας σχέδιο χρησιμοποιώντας το CapCut Web.Προσφέρει έτοιμα προς χρήση πρότυπα, εργαλεία αλλαγής μεγέθους και ένα ενσωματωμένο κιτ επωνυμίας για να σας διευκολύνει.Αν σχεδιάζετε να δημιουργήσετε μια διάταξη που είναι σαφής και εύκολη στην παρακολούθηση, δοκιμάστε να χρησιμοποιήσετε το CapCut Web για να τα συνδυάσετε όλα.

Συχνές ερωτήσεις

1
1. Πώς να φτιάξετε έναπλέγμα Bento σε έναFramer;

Στο Framer, μπορείτε να δημιουργήσετε ένα πλέγμα Bento χρησιμοποιώντας τα ενσωματωμένα εργαλεία διάταξης και ρυθμίσεις πλέγματος και στη συνέχεια να προσθέσετε το κείμενο, τις εικόνες, τα βίντεο ή τις εικονογραφήσεις σας.Το Framer λειτουργεί εξαιρετικά αν δημιουργείτε συναρπαστικές ιστοσελίδες.Αλλά αν δημιουργείτε οπτικό περιεχόμενο για αναρτήσεις στα κοινωνικά δίκτυα, βίντεο ή ψηφιακό υλικό, το CapCut Web προσφέρει έναν πιο απλό τρόπο να σχεδιάσετε αυτά τα πλέγματα, χρησιμοποιώντας έτοιμες προτυποποιήσεις, επεξεργασία με drag-and-drop και άμεση αλλαγή μεγέθους του καμβά.

2
1. Πώς να δημιουργήσετε ένα σχέδιο πλέγματος Bento;

Για να σχεδιάσετε πλέγματα τύπου Bento Box, χρειάζεστε ένα εργαλείο που υποστηρίζει επεξεργασία σε επίπεδα, έλεγχο διάταξης και οπτική ευθυγράμμιση.Ένας αξιόπιστος επεξεργαστής πρέπει να σας επιτρέπει να συνδυάζετε κείμενο, εικόνες, εικονίδια και χρώματα σε μια καθαρή μορφή μπλοκ ανά μπλοκ.Εδώ έρχεται το CapCut Web.Σας παρέχει έτοιμα πρότυπα, αυτοκόλλητα, σχήματα, πλαίσια, κολάζ και άλλα εργαλεία που έχουν δημιουργηθεί για αυτό το στυλ.Απλώς ανοίξτε τον επεξεργαστή εικόνας, επιλέξτε ένα προκαθορισμένο ή διάταξη κολάζ και ξεκινήστε να προσθέτετε το περιεχόμενό σας.Μπορείτε να ρυθμίσετε τα διαστήματα, τις γωνίες και τα στοιχεία σχεδίασης όσο προχωράτε.Μόλις τελειώσετε, εξαγάγετε το σχέδιό σας ή μοιραστείτε το απευθείας στα κοινωνικά σας δίκτυα.

3
1. Μπορώ να σχεδιάσω ένα Bento grid δωρεάν;

Ναι, μπορείτε να σχεδιάσετε μια διάταξη bento grid δωρεάν χρησιμοποιώντας online εργαλεία που προσφέρουν τις κατάλληλες δυνατότητες.Το κλειδί είναι να επιλέξετε μια πλατφόρμα που δεν τοποθετεί τις βασικές επιλογές σχεδίασης πίσω από paywall.Θα χρειαστείτε πρόσβαση σε πρότυπα, εργαλεία επεξεργασίας και επιλογές εξαγωγής.Το CapCut Web σας προσφέρει όλα αυτά χωρίς κόστος.Μπορείτε να ξεκινήσετε με δωρεάν πρότυπα τύπου bento, να οργανώσετε το περιεχόμενό σας χρησιμοποιώντας εργαλεία drag-and-drop και να έχετε πρόσβαση σε λειτουργίες όπως η αυτόματη αλλαγή μεγέθους και οι ρυθμίσεις χρώματος.Περιλαμβάνει επίσης δωρεάν αυτοκόλλητα, γραμματοσειρές και σχήματα, ώστε να ολοκληρώσετε το σχέδιό σας χωρίς περιορισμούς.