Въведение в атомния дизайн за уеб дизайнери / UI / UX

модулност, повторна употреба, и мащабируемост не са само концепции за кодиране, но можете също да ги използвате, за да създадете по-добре оптимизирани системи за проектиране. Атомна конструкция е нова методология за изграждане на ефективни потребителски интерфейси отдолу нагоре, използвайки аналогия по химия.

Вместо да създават колекции от уеб страници, атомният дизайн започва с най-простите UI компоненти, наречени атома (бутони, елементи от менюто и т.н.) и изгражда целия потребителски интерфейс чрез четири допълнителни етапа: молекули, организми, шаблони, и страници.

Книгата

Методологията е създадена от дизайнера Брад Фрост с цел “изработване на успешни системи за дизайн на потребителския интерфейс”. Атомният дизайн беше издаден като книга че можете да четете онлайн безплатно, или да поръчате като мека корица ($ 20.00) или ebook ($ 10.00), както и.

Атомният дизайн подхожда към дизайна на потребителския интерфейс от нова перспектива, която се надяваме разклати пейзажа на уеб дизайна малко. Тази статия възнамерява да даде интро в тази методология, но книгата отива в обяснението много по-далеч, така че прочетете, ако можете, това си струва.

Йерархия на атомния дизайн

Атомният дизайн е основно a ментален модел което кара дизайнерите да мислят за уеб страници като йерархия на компоненти за многократна употреба. Йерархията на атомния дизайн е изградена от пет етапа; всеки етап се състои от група компоненти от предишния етап. Петте етапа се превръщат в ясно и логично система за дизайн на интерфейса. Те са както следва:

1. Атоми

Точно както в химията, атома са най-малките градивни елементи, които не може да бъде допълнително разложена. Следователно, атомите са основни HTML елементи, като бутони, етикети и полета за въвеждане, това предоставят най-малките единици на уеб страница.

Разбира се, не всички HTML елементи са атоми, например елементи за разделяне (

, и т.н.) не са (не могат да бъдат) най-малките единици на уеб страница.

Атомите не са просто HTML елементи, а също и техните стилове: шрифтове, цветове, размери и други правила за стила на CSS. С думите на Брад, атоми “покажете всичките си основни стилове с един поглед”.

Атоми - Пример

Ето един пример от нашия уебсайт. Заглавията на препоръчаните публикации могат да се отчитат един вид атом; те използват същия HTML и CSS код и може да бъде лесно се различава от останалата част от съдържанието.

Имайте предвид, че Hongkiat.com не е проектиран с атомно проектиране, тук се използва само за демонстрационни цели.

Същността на атомния дизайн е да проектирайте UI отдолу нагоре, като използвате тези пет етапа, след това да не се идентифицират компонентите на атомния дизайн.

2. Молекули

А молекула е формиран от група атоми. Молекулите представляват следващия етап в йерархията на атомния дизайн. Помислете за опростените елементи на потребителския интерфейс, които вече са направени от повече от един HTML елементи, като например формуляр за търсене или препоръчана публикация в страничната лента.

Бидейки организирани в молекула дава цел към всеки атом. В по-голяма група (молекула), атомите трябва подкрепа и допълване взаимно, те трябва работи добре заедно за да се създаде използваем дизайн.

Например, заглавието (един атом) трябва получавате повече акцент (по-големи шрифтове, повече тежест и т.н.), отколкото името на автора (друг атом) в препоръчания пост блок. По този начин двамата атома са “означаваше” да се работи като екип за да получите най-добрия резултат.

Молекули - пример

Използвайки предишния ни пример, можете да видите, че в страничната лента на Hongkiat, един блок от препоръчан пост може да се разглежда като молекула. Препоръчва се след молекулата изградени от три атома: миниатюра, заглавие и атом на автора.

3. Организми

Организмите са съставени от a група от молекули, атоми (и понякога други организми). В уеб дизайна организмите са по-сложни UI компоненти които представляват окончателни раздели на страницата, като заглавка, долна част или странична лента.

Организмите могат да бъдат или съставени от различни видове молекули, например страничната лента може да се състои от лента за търсене и различен вид джаджи или от същата молекула се повтаря няколко пъти, например шепа свързани блокове пост един под друг. И това може да бъде комбинацията от тези две.

Организми - пример

На уебсайта на Hongkiat страничната лента може да бъде организъм. Състои се от a лента за търсене (един вид молекула, показана само веднъж) и няколко препоръчителни поста (друг тип молекула, показвана многократно).

Обаче страничният организъм може също да се разглежда като състав на a молекула (лентата за търсене) и друг организъм (препоръчаната джаджа по пощата с няколко препоръчителни публикации). Атомният дизайн е гъвкав модел, правилата не са много строги, така че в този случай можем да дефинираме същия блок като молекула и организъм.

4. Шаблони

Следващият етап в йерархията на атомния дизайн е шаблони. Както виждате, това е, когато атомният дизайн спира да използва аналогия на химията. Брад се въздържа от терминологията на този етап, тъй като смята, че е по-малко разбираеми за клиентите и другите заинтересовани страни и това са по същество последните два етапа (шаблони и страници), които дизайнерите трябва да продадат.

Templates са изградени от организми. Те са обекти на ниво страница но без крайното съдържание. Целта на шаблоните е да представлява структурата на основното съдържание.

Шаблоните показват как различните атоми, молекули, организми “функционират заедно в контекста на оформлението”. Те основно представляват скелет на страница.

Шаблони - Пример

За пример, помислете за a начална страница с изображения със запазени места и текстови блокове lorem ipsum.

По-долу можете да видите пример от книгата Atomic Design. Това е шаблонът на началната страница на списанието TimeInc. Атоми, молекули и организми са на своето място, но само със схематично съдържание.

5. Страници

Страници представляват последния етап от йерархията на атомния дизайн. Страниците са “специфични случаи на шаблони”. В етапа на страницата се получават шаблони населени с истинско съдържание (копиране, микрокопия, изображения, видеоклипове и т.н.), точно както ще се появят в реалния интерфейс.

Страниците позволяват на дизайнерите да видят как опит на крайния потребител ще изглежда така тествайте дизайна с реални потребители и до измерва колко добре се изпълнява по отношение на използваемост, конверсия, достъпност и други показатели.

Варианти на страници и шаблони

Другата цел на етапа на страницата е да се направи варианти на шаблони възможен. Ние говорим за варианти на шаблони, когато се използва основният шаблонът е същият но населява съдържанието е (малко) различно. Например, ако искате да показвате различно съдържание на различни потребителски групи (напр. За посетители срещу регистрирани потребители) или когато едно заглавие е много по-дълго от останалите.

Използването на варианти на шаблони е от решаващо значение, ако искаме да създадем последователен и устойчив потребителски интерфейси. По-малките компоненти (атоми, молекули, организми) трябва функционират добре в различни сценарии.

Например, бутонът трябва да изглежда с кликване каквито и да са околните елементи. Ако не изглежда действащо в даден вариант, трябва да препроектирате атома на бутона до него отговаря на всички случаи на употреба.

Страници - Пример

По-долу можете да видите етапа на страницата от предишния шаблон на началната страница на TimeInc. Изглежда различно, а? Това е просто един вариант на шаблон, все пак. За да има ефективен потребителски интерфейс, дизайнерският екип трябва да помисли сериозно какво може да се промени в реалния сайт. След това те също трябва да тестват дизайна на този шаблон (страница).