Dipopularkan oleh Brad Frost pada 2013, untuk menangani kerumitan antara muka yang semakin meningkat dan keperluan untuk sistem reka bentuk yang konsisten, reka bentuk atom ialah cara mereka bentuk antara muka yang diilhamkan oleh kimia untuk mengoptimumkan penciptaan antara muka responsif untuk aplikasi dan tapak web. 

Sama seperti jirim terdiri daripada atom, molekul dan organisma, antara muka boleh dipecahkan kepada blok binaan asasnya. Reka bentuk atom menekankan pembinaan hierarki: bermula dengan unsur terkecil dan bergerak ke arah templat yang lebih kompleks.

 

5 Tahap Reka Bentuk Atom

 

• Atom:
  
  
  Ini adalah elemen asas yang, secara individu, tidak mempunyai tujuan berfungsi tetapi ia membentuk asas. Ini boleh menjadi warna, tipografi, butang, medan borang, ikon, logo, fon, dsb.
  

 

• Molekul
  
   

  Molekul ialah gabungan beberapa atom. Contohnya: medan teks + butang = bar carian. Gabungan mudah ini mula membentuk antara muka. 

• Organisma
  
  
  
  Organisma mengumpulkan beberapa molekul untuk membentuk bahagian autonomi antara muka. Contohnya: pengepala tapak yang terdiri daripada logo, bar carian dan menu navigasi = pengepala
   

• Templat
  
  
  
  Pada peringkat ini, kami mengumpulkan organisma yang berbeza untuk memberikan struktur keseluruhan pada halaman. Templat ialah model halaman, yang menunjukkan susun atur umum tanpa memfokuskan pada kandungan akhir (teks, imej, dsb.)  
• halaman
  
  
  Halaman adalah produk akhir: mereka menggabungkan templat dan menyepadukan kandungan sebenar. Di sinilah konsistensi visual dan fungsi disahkan.
  
  

Kelebihan Reka Bentuk Atom

• konsisten : Elemen boleh guna semula memastikan keseragaman di seluruh produk, sekali gus mengelakkan dua halaman menggunakan butang atau gaya yang berbeza. 

• Berkhasiat : pasukan menjimatkan masa dengan memanfaatkan komponen yang telah ditetapkan: ini membolehkan kami mengurangkan masa reka bentuk, tetapi juga masa pembangunan dan penyelenggaraan. 

• Skalabiliti : modulariti membolehkan sistem berkembang tanpa perlu membina semula segala-galanya (cth. menukar butang dalam perpustakaan mengemas kini keseluruhan tapak). 
• Kerjasama : pereka bentuk dan pembangun bercakap bahasa yang sama terima kasih kepada perpustakaan komponen yang dikongsi.

Reka bentuk atom dan sistem reka bentuk

Reka Bentuk Atom sering menjadi asas kepada sistem reka bentuk kerana ia menyediakan cara berstruktur untuk mengatur perpustakaan ini. Dengan cara ini, pasukan mendapat manfaat daripada ketekalan yang lebih baik merentas semua produk mereka, kecekapan yang lebih tinggi melalui penggunaan semula komponen dan kerjasama yang lebih baik kerana pereka dan pembangun bercakap dalam bahasa yang sama. Selain itu, organisasi ini menjadikan sistem berskala: mengubah suai komponen dalam pustaka secara automatik mengemas kini semua antara muka yang menggunakannya.

secara ringkas

Reka Bentuk Atom bukan sekadar metafora yang elegan: ia merupakan falsafah reka bentuk sebenar yang menggalakkan kejelasan, kebolehgunaan semula dan kebolehskalaan dalam reka bentuk antara muka responsif. Dengan menggunakan pendekatan ini, pasukan membina sistem yang teguh dan fleksibel, sambil menjimatkan masa pada mockup dan memudahkan komunikasi dengan pasukan pembangunan.
Untuk melengkapkan pengetahuan anda dan mempelajari tentang Penyelidikan Atom, jangan teragak-agak untuk melihat artikel kami Penyelidikan Atom: Kaedah untuk Berkongsi Pembelajaran UX Bahagian 1 et bahagian 2

 

 

 

 

Julie Bouvier, pereka produk di UX-Republic