Pada masa kini, kami mempunyai banyak peranti yang wujud. Telefon pintar, tablet, komputer, televisyen… Senarainya panjang (sangat panjang). Oleh itu, adalah perlu untuk mencipta antara muka yang menyesuaikan diri dengan semua peranti ini. Oleh itu, pereka mesti menghadapi cabaran ini.
Di planet biru kita yang indah, terdapat beberapa orang yang benar-benar hebat, dan Brad Frost adalah salah seorang daripada mereka. Dia tidak memberitahu anda apa-apa? Dia adalah sebahagian besarnya yang mencipta konsep ini, dan kita akan melihat melalui artikel ini, prinsip-prinsip Reka Bentuk Atom yang berbeza.
Permulaan
Selama beberapa tahun sekarang, kami telah mencipta perkara yang berbeza (papan mood, panduan gaya), yang membolehkan kami memudahkan pemahaman reka bentuk kami, setakat pereka berkenaan. Perkara yang sama berlaku untuk pembangun, yang mempunyai alatan seperti Bootstrap, atau Tailwind yang memudahkan kerja mereka dalam pembangunan produk digital. Walau bagaimanapun, masalah timbul apabila pereka bentuk dan pembangun perlu bekerjasama (pereka bentuk menyerahkan model kepada pembangun sebagai contoh). Buat penyatuan antara bahagian reka bentuk dan bahagian teknikal.
Jadi apa yang perlu dilakukan? 🤔
Tuan-tuan dan puan-puan, di sinilah Atomic Design berperanan!
Ilustrasi – Reka Bentuk Atom
Anda masih ingat, sebelum ini, kita bercakap tentang Brad Frost. Sesungguhnya, yang terakhir mencipta konsep molekul ini (dalam reka bentuk), sedikit seperti apa yang boleh kita lihat dalam Kimia. Jadi, tiada definisi yang ditetapkan untuk Reka Bentuk Atom, tetapi jika kita boleh memberikan definisi, ia akan menjadi yang berikut:
Reka bentuk atom merujuk kepada fakta mencipta sistem bahagian yang boleh dipasang antara satu sama lain untuk mencipta model yang boleh kami gunakan semula tanpa henti, untuk projek kami. Terima kasih kepada kaedah ini, kami akan berjaya mencipta apa yang kami panggil sistem reka bentuk, yang oleh itu akan menyatukan semua elemen yang digunakan dalam antara muka kami.
Ia tidak jelas? Baiklah, mari kita ambil contoh dengan Lego. Mereka terdiri daripada bahagian yang berbeza. Mereka semua mempunyai saiz yang berbeza, dan warna yang berbeza. Tetapi apabila anda menggabungkannya, mereka boleh membentuk elemen yang kita semua tahu (saya rasa), seperti rumah, kapal, kereta, atau juga robot.
Contoh lain, anak patung Rusia, yang merupakan siri anak patung yang semakin berkurangan, satu di dalam satu lagi.
Kepintaran Brad yang kami sayangi ialah mengumpulkan unsur-unsur ke dalam 5 kategori utama, dan ia dikelaskan mengikut jenis dan kerumitannya.
5 kategori utama
5 kategori utama Reka Bentuk Atom
atom
Ini adalah elemen yang paling mudah. Atom adalah asas kepada keseluruhan sistem ini. Tipografi, warna atau bahkan ikon... Ia adalah elemen yang tidak boleh dibahagikan (dan ya 1 dibahagikan dengan 1, itu masih 1, dan untungnya untuk perkara itu).
Ilustrasi – Atom
Molekul
Ia mula menjadi menarik. Sesungguhnya, molekul mewakili kumpulan atom, yang akan membolehkan kita memperoleh entiti berfungsi pertama. Butang, medan teks, atau pun pautan dianggap sebagai molekul.
Ilustrasi – Molekul
Organisma
Anda mungkin mula memahami mengapa kami menyebut kimia sebelum ini. Oleh itu, organisma akan diwakili oleh sekumpulan molekul. Pada ketika ini, kita sudah dapat melihat antara muka terbentuk. Kad artikel atau bar carian. Jadi berhati-hati, mungkin terdapat kekhususan dengan organisasi (jelas, ia tidak sangat lucu jika tiada pengecualian). Dalam sesetengah kes, sesebuah organisasi mungkin terdiri daripada organisasi lain.
Dalam beberapa kes, adakah anda akan memberitahu saya?
GIF – Kermit: Apa?
Saya faham jika anda bertindak balas seperti Kermit, jangan panik, saya akan menerangkannya kepada anda. Sebagai contoh, jika kita mengambil aliran artikel, yang terakhir boleh memasukkan kedua-dua artikel dan iklan, yang oleh itu sendiri akan mengumpulkan beberapa molekul. Saya tahu otak anda sedang berlumba-lumba, tetapi jangan risau, ini adalah pengecualian.
Ilustrasi – Organisasi
Templat
Dan jika kita menggabungkan organisma… Ia memberi kita templat. Sesungguhnya, mereka adalah matriks halaman, kerana mereka akan memasukkan satu set organisma. Templat akan menentukan di mana organisma yang berbeza diletakkan, tetapi keadaan mereka akan bergantung pada konteks pengguna, iaitu, di mana dia berada pada antara muka. Oleh itu, templat boleh berbeza-beza bergantung pada konteks.
halaman
Kita dah sampai. Kategori terakhir ialah halaman, dan ia mewakili templat mengikut konteks penggunaan. Brad yang kami sayangi, bercakap tentang "contoh templat". Kita boleh mengatakan bahawa dia unik. Halaman utama Twitter, pada telefon pintar anda, pada aplikasi mudah alih, pada aplikasi mudah alih selepas menerima pemberitahuan. Anda lihat, ia berubah, bergantung pada konteks.
Penggunaan prinsip
Saya akui, saya bercakap tentang pereka dan pemaju. Tetapi mesti dikatakan bahawa hari ini, dalam projek digital, kami mempunyai sejumlah besar pemegang kepentingan: Pereka UX, Pereka UI, Pemilik Produk, Pengurus Produk, Pengurus Projek, Pembangun... Ideanya ialah Reka Bentuk Atom bermanfaat untuk semua projek pihak berkepentingan, kerana merekalah yang akan menggunakan Sistem Reka Bentuk kami.
Oleh itu, dengan menggunakan kaedah Reka Bentuk Atom, kami akan menyeragamkan antara muka kami, dan mempunyai komponen yang konsisten antara satu sama lain, dan pada masa yang sama, mempunyai Sistem Reka Bentuk yang terbina dengan baik.
Simpan 3 langkah ini, yang digambarkan dalam rajah di bawah, ia akan membantu anda.
Ilustrasi – 3 langkah
1 – Ambil inventori: Berkenalan dengan projek adalah satu perkara yang penting. Sesungguhnya, kita akan dapat memerhatikan semua komponen, dan menyusunnya mengikut jenis. Teks, ikon, butang, Input…
Dengan melakukan ini, kita akan melihat 5 kategori utama muncul (Atom, Molekul, Organisma, Templat dan Halaman).
2 – Seragamkan: 6 tahap saiz untuk menjalankan teks? Seragamkan! Butang dengan margin berbeza? Seragamkan! Anda faham, semua atom anda mestilah seragam, untuk mempunyai molekul yang koheren, dan seterusnya.
3 – Dokumen/Berkomunikasi: Jangan teragak-agak untuk mengembangkan perpustakaan ulasan anda, menerangkan pelbagai jenis penggunaan. Lebih banyak anda mendokumentasikan perpustakaan anda, lebih baik pihak berkepentingan projek akan memahami. Juga, maklumkan perubahan (cth. komponen yang berubah), dan maklumkan pihak berkepentingan tentang langkah yang anda ambil dalam Sistem Reka Bentuk.
Kata-kata terakhir saya: reka bentuk atom dan sistem reka bentuk dikaitkan
Pelengkap. Sesungguhnya, kami telah melihatnya melalui artikel tersebut. Reka bentuk atom dan sistem reka bentuk dikaitkan. Dengan mencipta elemen dan model molekul (dan boleh dihasilkan semula, saya tahu, itu banyak "dan"), kami mempercepatkan proses reka bentuk kami. Kami bukan sahaja mempercepatkan proses, tetapi kami menjadikannya cekap dan konsisten.
Seperti yang anda akan fahami, pada pendapat saya (dan terpulang kepada saya sudah tentu), kita mesti mereka bentuk antara muka kita menggunakan komponen, memikirkan "hidup" dan "boleh berskala", dan kaedah Reka Bentuk Atom membantu kita melakukan ini dengan berkesan.
Jadi, adakah anda yakin dengan Atomic Design? Brad Frost telah mengeluarkan buku yang sangat menarik mengenai prinsip ini: Reka Bentuk Atom – Brad Frost. Saya menjemput anda untuk membacanya jika anda ingin mengetahui lebih lanjut mengenainya.
Dari hujung alam semesta, saya tabik kepada anda!
GIF – Selamat tinggal
Housmane KOITA, Pereka UI-UX @UX-Republic
