Bento Grid UX Design: Berpikir di luar kotak makan siang – Beragampengetahuan

Bento Grids menarik inspirasi dari kotak dukungan tradisional Jepang. Partisi ini (fungsional dan visual menarik) memiliki rasa ketertiban dalam keanekaragaman.

Berbeda dengan tata letak grid tradisional, struktur jaringan melengkung lebih dinamis. Dunia UX akan selalu menghargai desain mereka yang fleksibel dan terkecil. Saat membuat Desain Pengguna -Centric, penampilan Bento Grid adalah contoh yang baik.

Dalam tutorial ini, saya akan merancang tren grid bento langkah demi langkah.

Mengapa kisi bento begitu populer hari ini?

Dalam desain UX, grid Bento mengubah konsep ini menjadi sistem tata letak. Popularitas mereka berasal dari kemampuan mereka untuk menyingkirkan kekakuan sistem grid tradisional dan memberikan kreativitas dan keseimbangan struktural.

Desainer seperti Bento Grid karena fleksibilitasnya, konspirasi visual, dan kemampuan untuk menyoroti elemen unik dalam desain.

Dari kombinasi investasi ke papan instrumen, grid bento membuat tata letak modern, dinamis dan menarik.

Secara keseluruhan, Bento Grid adalah alternatif baru untuk tata letak grid standar yang terasa monoton.

Cara membuat kisi bento dalam ara

1. Atur kerangka kerja

Lihat kerangka kerja sebagai kotak makan siang Anda, dan semua kompartemen yang tidak rata akan duduk di sana.

1. Buat kerangka kerja baru dalam buah ara
2. Atur lebar ke 1200, tingginya 675
3. Sebutkan kerangka kerja ini untuk “bento” untuk menjaga organisasi tetap baik

2. Tambahkan Grid

Grid menyediakan struktur yang menambahkan kotak yang lebih kecil ke kerangka kerja Bento Grid. Untuk mengaturnya, tambahkan kolom dan garis ke bingkai Bento.

Gunakan pengaturan berikut:

• jenis -TenSM
• Nomor -12
• selokan – Dua Puluh Empat
• laba – Dua Puluh Empat

Kemudian, gunakan pengaturan berikut untuk mengatur baris:

• jenis -TenSM
• Nomor -6
• selokan – Dua Puluh Empat
• laba – Dua Puluh Empat

3. Tambahkan kotak ke bingkai bento

Sekarang, kami akan menambahkan kompartemen (kotak seragam) ke bingkai bento.

1. Gunakan alat persegi panjang untuk menggambar kotak di kisi. Ukuran dan lokasi eksperimental untuk membuat tata letak yang dinamis
2. Renasi setiap persegi panjang menjadi “kotak” untuk mendapatkan organisasi yang lebih baik
3. Miring tepi setiap kotak dengan mengatur jari -jari sudut ke 8px

Untuk memeriksa kemajuan Anda tanpa cakupan kisi, tekan Shift+G pada keyboard:

Tambahkan gambar ke kotak

Mari kita tambahkan gambar untuk membuat bingkai terlihat “estetika”. Untuk tujuan ini:

1. Buka tab Operasi
2. Cari plug Unsplash -in dan mulai
3. Pilih setiap kotak, pilih gambar dari Unsplash, lalu terapkan. Karena diatur untuk mengisi mode, gambar akan secara otomatis mengisi kotak

4. Buat respons kotak bento dengan cepat

Kami telah menyelesaikan pekerjaan merancang kotak Bento. Mengenai kemampuan respons grid Bento ini, masih ada beberapa pekerjaan yang harus dilakukan. Itu menjadi kacau ketika kita mencoba meregangkan atau memeras. Hal -hal seperti itu:

Untuk membuat proses ini cairan, kita perlu mengatur kendala yang disebut.

1. Pilih Kerangka Bento
2. Tekan Enter untuk memilih semua kotak
3. Batas aplikasi dengan mengatur batas ke “kiri dan kanan” dan “atas dan bawah”.

Itu saja! Kotak makan siang Anda sekarang merespons sepenuhnya:

Keuntungan:

Anda tahu bahwa breakpoint sangat penting untuk desain respons. Di sini, mereka akan memastikan bahwa kisi bento Anda disesuaikan dengan ukuran layar yang berbeda.

Pada perangkat seluler, itu dapat menuangkan kolom, dan tablet dapat menampilkan dua atau tiga kolom. Di desktop, grid menggunakan ruang layar yang lebih besar untuk memaksimalkan dampaknya.

Menguasai breakpoint dapat memastikan bahwa peralatan rentang desain Anda ramah kepada pengguna. Untuk membuat desain respons dalam ara, periksa panduan ini.

Contoh jaringan tekukan di dunia nyata

Tidak ada jaring lentur desain langsung tunggal, ini adalah keindahannya. Bento Grids memberikan kemungkinan yang tak ada habisnya untuk kreativitas-dari menambahkan sejumlah lentur ke tata letak yang ada ke kompartemen yang ada dan bentuk non-persegi panjang.

Mari kita jelajahi beberapa metode inovatif:

Gabungkan kisi bento dengan jenis kisi lainnya

Desainer dapat mencampur kisi bento dengan jenis kisi lainnya untuk membuat tata letak yang lebih umum. Metode pencampuran ini seimbang antara keseragaman dan fleksibilitas, sehingga jaringan dapat mempertahankan integritas strukturnya dan memberikan kebebasan kreatif.

Misalnya, portofolio investasi dapat menggunakan 3 -Column Module mesh sebagai fondasi, tetapi perancang memperkenalkan elemen grid bento (partisi kecil, tidak teratur), menambahkan titik balik kreatif ke tata letak:

Metode kreatif lainnya adalah:

• Kompartemen tumpang tindih
• Gunakan bentuk non -rectangular

Untuk contoh visual dan metode yang lebih kreatif, silakan periksa situs web ini untuk menemukan lebih banyak inspirasi grid bento.

Jenis kisi lainnya

Dalam satu atau dua tahun terakhir, Grid Bento telah tren, memberikan para desainer cara tata letak organisasi baru. Tetapi ada sistem grid lain, masing -masing sistem memiliki tujuan dan gayanya sendiri:

sebagai kesimpulan

Ini adalah panen utama dari kisi bento yang menakjubkan pada ara:

1. Mulailah dengan kerangka kerja terstruktur yang jelas-digunakan oleh kerangka kerja sebagai dasar kisi
2. Gunakan kolom kombin kandungan dan kisi-kisi secara efektif untuk menjaga keseimbangan dan fleksibilitas
3. Desain Partisi Dinamis-Ukuran Kotak Dengan Eksperimen Tidak Merata Untuk Mencapai Konspirasi Visual
4. Tepi estetika yang halus dan gambar berkualitas tinggi untuk membuat penampilan bersih.
5. Pastikan kemampuan respons-Konstruk dan breakpoint untuk aplikasi adaptasi yang mulus
6. Jenis kisi-kisi hibrida kombin bento grid dengan sistem kisi lain untuk menggunakannya untuk tata letak yang unik

Oh, ini adalah pengingat profesional.

Tambahkan mikro -tintik untuk meningkatkan desain Anda. Termasuk status suspensi (seperti perubahan warna atau proporsi), animasi (seperti efek paralel atau efek zoom), dan transisi halus ketika ukuran disesuaikan atau mengganti tata letak. Sentuhan kecil ini dapat meningkatkan ketersediaan dan membuat jaringan Anda terasa hidup.

Ini adalah file yang telah Anda selesaikan saat Anda mengikuti.

Dengan mengikuti langkah -langkah ini dan menggabungkan interaksi mikro, jaringan etnis Anda akan menonjol dalam hal kreativitas dan fungsinya. Mulailah eksperimen segera dan angkat desain Anda ke tingkat yang baru!