Pengenalan Reka Bentuk Atom untuk Pereka Web / UI / UX

Modulariti, boleh diguna semula, dan berskala bukan hanya konsep pengekodan tetapi anda juga boleh menggunakannya untuk membuat sistem reka bentuk yang lebih baik. Reka bentuk atom adalah kaedah baru untuk membina UI yang berkesan dari bawah ke bawah, menggunakan analogi kimia.

Daripada merancang koleksi halaman web, Reka bentuk atom bermula dengan komponen UI yang paling mudah dipanggil atom (butang, item menu, dan lain-lain), dan membina keseluruhan UI melalui empat peringkat lagi: molekul, organisma, templat, dan halaman.

Buku

Metodologi ini dicipta oleh pereka Brad Frost dengan tujuan “menyusun sistem reka bentuk UI yang berjaya”. Reka bentuk atom ialah dikeluarkan sebagai buku bahawa anda boleh membaca dalam talian secara percuma, atau menempah sebagai paperback ($ 20.00) atau ebook ($ 10.00) juga.

Reka bentuk atom mendekati reka bentuk antara muka pengguna dari perspektif baharu yang diharapkan goncang landskap reka bentuk web sedikit. Artikel ini bercadang untuk berikan intro ke dalam metodologi ini tetapi buku itu masuk ke penjelasan jauh-jauh lagi, jadi bacalah jika anda boleh, it's worth it.

Hierarki reka bentuk atom

Reka bentuk atom pada dasarnya ialah a model mental yang membuat pereka berfikir laman web sebagai hierarki komponen boleh diguna semula. Hierarki reka bentuk atom dibina lima peringkat; setiap peringkat dibuat dari sekumpulan komponen dari peringkat terdahulu. Lima tahap menambah ke dalam yang jelas dan logik sistem reka bentuk antara muka. Mereka adalah seperti berikut:

1. Atom

Sama seperti dalam kimia, atom adalah blok bangunan terkecil yang tidak boleh lagi dibusuk. Oleh itu, atom adalah elemen HTML asas, seperti butang, label, dan medan input, itu menyediakan unit terkecil halaman web.

Sudah tentu, tidak semua elemen HTML adalah atom, contohnya, elemen seksyen (

, dll) tidak (tidak boleh) unit terkecil laman web.

Atom bukan sekadar elemen HTML tetapi juga gaya kepunyaan mereka: fon, warna, dimensi, dan peraturan gaya CSS yang lain. Dengan kata-kata Brad sendiri, atom “tunjukkan semua gaya asas anda dengan pantas”.

Atom - Contoh

Berikut adalah contoh dari laman web kami. Tajuk utama jawatan yang disyorkan mungkin dipertanggungjawabkan satu jenis atom; mereka menggunakan kod HTML dan kod CSS yang sama dan boleh mudah dibezakan dari kandungan yang lain.

Perhatikan bahawa Hongkiat.com tidak direka bentuk dengan reka bentuk atom, di sini ia hanya digunakan untuk tujuan demonstrasi.

Intipati reka bentuk atom adalah untuk reka bentuk UI dari bahagian bawah menggunakan lima peringkat ini, tidak mengenal pasti komponen reka bentuk atom selepas itu.

2. Molekul

A molekul telah terbentuk oleh sekumpulan atom. Molekul membentuk peringkat seterusnya dalam hierarki reka bentuk atom. Fikirkan elemen UI yang lebih mudah yang sudah ada diperbuat daripada lebih daripada satu elemen HTML, seperti borang carian atau pos disyorkan di bar sisi.

Diatur ke dalam molekul memberi maksud kepada setiap atom. Dalam kumpulan yang lebih besar (molekul), atom mestilah sokongan dan pelengkap satu sama lain, mereka mesti bekerja dengan baik bersama-sama untuk mewujudkan reka bentuk yang boleh digunakan.

Contohnya, tajuk (satu atom) mesti dapatkan lebih banyak penekanan (fon yang lebih besar, lebih banyak berat badan, dan sebagainya) daripada nama pengarang (atom lain) di blok pos yang disyorkan. Dengan cara ini, kedua-dua atom itu “bermakna” kepada bekerja sebagai satu pasukan untuk mendapatkan hasil yang terbaik.

Molekul - Contoh

Menggunakan contoh terdahulu kami, anda dapat melihat bahawa di bar sisi Hongkiat, satu blok jawatan yang disyorkan dapat dilihat sebagai molekul. Molekul pos disyorkan adalah dibina daripada tiga atom: lakaran kecil, tajuk, dan atom nama pengarang.

3. Organisma

Organisme terdiri daripada a kumpulan molekul, atom (dan kadangkala organisma lain). Dalam reka bentuk web, organisma adalah komponen UI yang lebih kompleks yang mewakili bahagian pasti halaman, seperti header, footer, atau sidebar.

Organisma boleh terdiri daripada pelbagai jenis molekul, contohnya bar sisi boleh terdiri daripada bar carian dan jenis widget yang berlainan, atau molekul yang sama diulangi beberapa kali, contohnya beberapa blok pos yang berkaitan di bawah satu sama lain. Dan, ia boleh menjadi gabungan kedua-dua mereka.

Organisma - Contoh

Di laman web Hongkiat, bar sisi boleh menjadi organisma. Ia terdiri daripada a bar carian (satu jenis molekul, dipaparkan sekali sahaja) dan beberapa jawatan yang disyorkan (satu lagi molekul, dipaparkan banyak kali).

Walau bagaimanapun, organisma bar sisi juga boleh dilihat sebagai komposisi a molekul (bar carian) dan organisma lain (widget pos disyorkan dengan beberapa catatan yang disyorkan). Reka bentuk atom ialah a model fleksibel, peraturannya tidak begitu ketat, jadi dalam hal ini kita dapat menentukan blok bangunan yang sama baik sebagai molekul dan organisma.

4. Templat

Peringkat seterusnya dalam hierarki reka bentuk atom adalah templat. Seperti yang anda dapat lihat, ini adalah apabila reka bentuk atom berhenti menggunakan analogi kimia. Brad mengelak dari istilah pada ketika ini kerana dia menganggapnya kurang difahami untuk pelanggan dan pihak berkepentingan lain, dan ia pada dasarnya adalah dua peringkat terakhir (templat dan halaman) yang pereka perlu menjual.

Templat dibina daripada organisma. Mereka adalah objek peringkat halaman tetapi tanpa kandungan akhir. Tujuan templat adalah untuk mewakili struktur kandungan asas.

Templat memaparkan bagaimana atom, molekul, organisma berbeza “berfungsi bersama dalam konteks susun atur”. Mereka pada dasarnya mewakili rangka laman.

Templat - Contoh

Sebagai contoh, fikirkan tentang a templat halaman rumah dengan imej pemegang tempat dan blok teks lsem ipsum.

Di bawah ini, anda dapat melihat contoh dari buku Reka Bentuk Atom. Ia adalah templat laman utama majalah TimeInc. Atom, molekul, dan organisma semuanya berada di tempat mereka tetapi hanya dengan kandungan skematik.

5. Halaman

Halaman-halaman mewakili peringkat terakhir hierarki reka bentuk atom. Halaman adalah “contoh tertentu templat”. Di peringkat halaman, templat dapat dihuni dengan kandungan sebenar (salinan, mikrokopi, imej, video, dll), seperti yang akan muncul di UI sebenar.

Halaman membolehkan pereka untuk melihat bagaimana pengalaman pengguna akhir akan kelihatan seperti, kepada menguji reka bentuk dengan pengguna sebenar, dan kepada mengukur sejauh mana ia berfungsi dari segi kebolehgunaan, penukaran, kebolehaksesan, dan metrik lain.

Variasi halaman & template

Matlamat lain pada peringkat halaman adalah untuk membuat variasi templat mungkin. Kami bercakap tentang variasi templat apabila asasnya templat adalah sama tetapi populasi kandungan adalah (sedikit) berbeza. Sebagai contoh, jika anda ingin menunjukkan kandungan yang berbeza kepada kumpulan pengguna yang berlainan (mis. Untuk pengunjung berbanding pengguna yang log masuk), atau apabila tajuk utama lebih panjang daripada yang lain.

Menggunakan variasi templat adalah penting jika kita mahu membuat konsisten dan berdaya tahan antara muka pengguna. Komponen yang lebih kecil (atom, molekul, organisma) mestilah berfungsi dengan baik dalam senario yang berbeza.

Contohnya, butang mesti kelihatan boleh diklik dengan apa sahaja unsur sekitar. Sekiranya ia tidak dapat dilihat dalam variasi tertentu, anda perlu mengubah reka bentuk atom butang sehingga ia sesuai dengan semua kes penggunaan.

Halaman - Contoh

Di bawah ini, anda boleh melihat peringkat laman Templat laman utama TimeInc sebelumnya. Kelihatan berbeza, huh? Ini sahaja satu variasi templat, walaupun. Untuk mempunyai UI yang berkesan, pasukan reka bentuk perlu berfikir dengan teliti apa yang boleh berubah di tapak sebenar. Kemudian, mereka perlu menguji reka bentuk untuk variasi templat (halaman), juga.