Web Tasarımcıları İçin Atom Tasarımına Giriş

Atomlar sadece HTML öğeleri değil, ayrıca ait oldukları stiller: yazı tipleri, renkler, boyutlar ve diğer CSS stil kuralları. Brad'in kendi sözleriyle atomlar “tüm temel stillerinizi bir bakışta gösterin”.

Atomlar - Örnek

İşte web sitemizden bir örnek. Tavsiye edilen yayınların başlıkları bir tür atom; kullanırlar aynı HTML ve CSS kodu ve olabilir kolayca ayırt içeriğin geri kalanından.

Hongkiat.com'un atom tasarımı düşünülerek tasarlanmadığını unutmayın, burada sadece kullanılır gösteri amaçlı.

Atom tasarımının özü bu beş aşamayı kullanarak kullanıcı arayüzünü aşağıdan yukarıya doğru tasarlayın, atom tasarım bileşenlerini daha sonra tanımlamamak.

2. Moleküller

bir molekül oluşturulmuş bir atom grubu tarafından. Moleküller, atomik tasarım hiyerarşisinde bir sonraki aşamayı oluşturur. Zaten olan basit UI öğelerini düşünün birden fazla HTML öğesinden yapılmıştır, kenar çubuğunda arama formu veya önerilen bir gönderi gibi.

Bir moleküle dönüşmek bir amaç verir Her atom için. Daha büyük bir grupta (molekül), atomların destek ve tamamlayıcı birbirlerine, gerekir birlikte iyi çalış kullanılabilir bir tasarım oluşturmak için.

Örneğin, başlık (bir atom) daha fazla vurgu almak (daha büyük fontlar, daha fazla ağırlık vb.) önerilen yazı bloğundaki yazarın adından (başka bir atom). Bu şekilde, iki atom “demek” için takım halinde çalışmak en iyi sonucu almak için.

Moleküller - Örnek

Önceki örneğimizi kullanarak, Hongkiat'ın kenar çubuğunda, önerilen postanın bir bloğunun bir molekül olarak görülebileceğini görebilirsiniz. Önerilen bir post molekül üç atomdan oluşan: küçük resim, başlık ve yazarın isim atomu.

3. Organizmalar

Organizmalar bir oluşur molekül grubu, atom (ve bazen diğer organizmalar). Web tasarımında organizmalar daha karmaşık UI bileşenleri temsil eden kesin bölümler üstbilgi, altbilgi veya kenar çubuğu gibi sayfanın.

Organizmalar ya oluşabilir farklı molekül tipleri, örneğin, bir kenar çubuğu bir arama çubuğundan ve farklı türdeki gereçlerden veya aynı molekül birkaç kez tekrarlandı, örneğin, birbirlerinin altındaki ilgili posta bloklarından bir avuç. Ve bu ikisinin birleşimi olabilir.

Organizmalar - Örnek

Hongkiat'ın web sitesinde, kenar çubuğu bir organizma olabilir. Bir oluşur arama çubuğu (sadece bir kez görüntülenen bir molekül tipi) ve birkaç önerilen yayın (birçok kez görüntülenen başka bir molekül tipi).

Bununla birlikte, kenar çubuğu organizması, aynı zamanda bir molekül (arama çubuğu) ve başka bir organizma (önerilen birkaç gönderi ile birlikte önerilen gönderi widget'ı). Atom tasarımı bir esnek model, Kurallar çok katı değil, bu durumda aynı yapı taşını hem molekül hem de organizma olarak tanımlayabiliriz..

4. Şablonlar

Atom tasarım hiyerarşisindeki bir sonraki aşama şablonları. Gördüğünüz gibi, bu atom tasarımı kimya benzetmesini kullanmayı durdurur. Brad bu noktada terminolojiden kaçınıyor. daha az anlaşılabilir Müşteriler ve diğer paydaşlar için ve esasen tasarımcıların satması gereken son iki aşama (şablonlar ve sayfalar)..

Şablonlar organizmalardan oluşur. Onlar sayfa düzeyinde nesneler fakat son içerik olmadan. Şablonların amacı yapıyı temsil altta yatan içerik.

Şablonlar, farklı atomların, moleküllerin, organizmaların nasıl değiştiğini gösterir “Bir düzen bağlamında birlikte işlev”. Temel olarak bir sayfanın iskeleti.

Şablonlar - Örnek

Örneğin, bir düşün ana sayfa şablonu yer tutucu görüntüleri ve lorem ipsum metin blokları ile.

Aşağıda, Atom Tasarım kitabından bir örnek görebilirsiniz. TimeInc dergisinin giriş sayfası şablonu. Atomlar, moleküller ve organizmalar hepsi yerindedir. sadece şematik içeriğe sahip.

5. Sayfalar

Sayfalar atomik tasarım hiyerarşisinin son aşamasını temsil eder. Sayfalar “belirli şablon örnekleri”. Sayfa aşamasında şablonlar olsun gerçek içeriğe sahip olanlar (kopya, mikroskop, resim, video vb.), gerçek kullanıcı arayüzünde görünecekleri gibi.

Sayfalar tasarımcıların tasarımın nasıl yapıldığını görmesini sağlar. son kullanıcı deneyimi gibi görünecek tasarımını test et gerçek kullanıcılarla ve ne kadar iyi performans gösterdiğini ölçün kullanılabilirlik, dönüşüm, erişilebilirlik ve diğer ölçümler açısından.

Sayfalar ve şablon varyasyonları

Sayfa aşamasının diğer amacı ise; şablon varyasyonları mümkün. Alttaki şablon varyasyonları hakkında konuşuyoruz şablon aynı ama kalabalık içerik (biraz) farklı. Örneğin, farklı kullanıcı gruplarına farklı içerik göstermek istiyorsanız (örneğin, kullanıcılara giriş yapmış ziyaretçiler için) veya bir başlık diğerlerinden çok daha uzunsa.

Oluşturmak istiyorsak, şablon varyasyonlarını kullanmak çok önemlidir. tutarlı ve esnek Kullanıcı arayüzleri. Küçük bileşenler (atomlar, moleküller, organizmalar) gerekir farklı senaryolarda iyi çalışır.

Örneğin, bir düğme ile tıklanabilir görünmelidir etrafındaki çevre unsurları ne olursa olsun. Belirli bir varyasyonda işlem yapılabilir görünmüyorsa, düğme atomunu yeniden seçene kadar yeniden tasarlamanız gerekir. tüm kullanım durumlarına uyar.

Sayfalar - Örnek

Aşağıda, önceki TimeInc ana sayfa şablonunun sayfa aşamasını görebilirsiniz. Farklı gözüküyor, huh? Bu yalnızca bir şablon varyasyonu, gerçi. Etkili bir kullanıcı arayüzüne sahip olmak için tasarım ekibi hakkında düşünmek zorundadır. ne değişebilir gerçek sitede. Ardından, bu şablon varyasyonunun tasarımını da test etmeleri gerekir (sayfa)..