Введення в атомний дизайн для веб-дизайнерів

Атоми - це не просто елементи HTML, а й також їхніми стилями: шрифти, кольори, розміри та інші правила стилю CSS. З власними словами Бред, атоми “продемонструвати всі свої основні стилі з першого погляду”.

Атоми - приклад

Ось приклад з нашого веб-сайту. Заголовки рекомендованих повідомлень можуть бути враховані один тип атома; вони використовують код HTML і CSS і може бути легко розпізнаються від решти змісту.

Зверніть увагу, що Hongkiat.com не був розроблений з урахуванням атомного дизайну, тут він використовується тільки для демонстраційних цілей.

Суть атомного дизайну полягає в тому, щоб розробити інтерфейс користувача знизу вгору, використовуючи ці п'ять етапів, не ідентифікувати компоненти атомного проектування.

2. Молекули

A молекули формується групою атомів. Молекули є наступним етапом в ієрархії атомного проектування. Подумайте про більш прості елементи інтерфейсу, які вже є зроблені з більш ніж одного HTML-елемента, такі як форма пошуку або рекомендована публікація на бічній панелі.

Будучи організованими в молекулу дає мету до кожного атома. У більшій групі (молекулі) атоми повинні підтримка і доповнення один одному, вони повинні добре працювати разом для створення зручної конструкції.

Наприклад, має бути назва (один атом) отримати більше уваги (більші шрифти, більша вага тощо), ніж ім'я автора (інший атом) у рекомендованому поштовому блоці. Таким чином, ці два атоми є “мається на увазі” до працювати в команді щоб отримати найкращий результат.

Молекули - приклад

Використовуючи наш попередній приклад, можна побачити, що на боковій панелі Hongkiat один блок рекомендованого повідомлення можна розглядати як молекулу. Рекомендована поштова молекула складається з трьох атомів: ескіз, заголовок і атом імені автора.

3. Організми

Організми складаються з a група молекул, атомів (а іноді інші організми). У веб-дизайні є організми більш складні компоненти UI що представляють остаточних розділів сторінки, наприклад заголовок, нижній колонтитул або бічну панель.

Організми можуть бути або складені різних типів молекул, наприклад, бічна панель може складатися з панелі пошуку та різного роду віджетів або таку ж молекулу повторюють кілька разів, наприклад, кілька пов'язаних між собою поштових блоків. І це може бути поєднання цих двох.

Організми - приклад

На веб-сайті Hongkiat бічна панель може бути організмом. Він складається з a панель пошуку (один тип молекули, відображається тільки один раз) і кілька рекомендованих посад (інший тип молекули, що відображається багато разів).

Проте бічна панель організму також може розглядатися як композиція a молекули (панель пошуку) і інший організм (рекомендований поштовий віджет з кількома рекомендованими повідомленнями). Атомна конструкція є гнучка модель, правила не дуже суворі, тому в цьому випадку ми можемо визначити один і той же будівельний блок як молекулу, так і організм.

4. Шаблони

Наступним етапом в ієрархії атомного проектування є шаблонів. Як ви можете бачити, це коли атомний дизайн припиняє використовувати аналогію хімії. Брад утримується від термінології в цей момент, як він думає, що це менш зрозумілий для клієнтів та інших зацікавлених сторін, і це, по суті, два останні етапи (шаблони та сторінки), які дизайнери повинні продати.

Шаблони складаються з організмів. Вони є об'єктів на рівні сторінки але без остаточного змісту. Мета шаблонів полягає в тому, щоб представляють структуру базового вмісту.

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

Шаблони - приклад

Наприклад, подумайте про шаблон домашньої сторінки із зображеннями заповнювача і текстовими блоками lorem ipsum.

Нижче ви можете побачити приклад з книги Atomic Design. Це шаблон домашньої сторінки журналу TimeInc. Атоми, молекули і організми знаходяться на своєму місці, але тільки зі змістом схеми.

5. Сторінки

Сторінки представляють останній етап ієрархії атомного проектування. Сторінки є “конкретні приклади шаблонів”. На етапі сторінки отримують шаблони заповнені реальним змістом (копіювання, мікрокопія, зображення, відео тощо), так само, як вони з'являться в реальному інтерфейсі.

Сторінки дозволяють дизайнерам бачити, як кінцевий досвід користувача буде виглядати, до перевірити дизайн з реальними користувачами і до виміряти, наскільки добре він виконує з точки зору зручності, конверсії, доступності та інших показників.

Варіанти сторінок і шаблонів

Іншою метою етапу сторінки є зробити варіації шаблону можливо. Ми говоримо про варіації шаблонів, коли лежить в основі шаблон є однаковим але населяють зміст (трохи) відрізняється. Наприклад, якщо ви хочете показувати інший вміст різним групам користувачів (наприклад, для відвідувачів у порівнянні з зареєстрованими користувачами), або коли один заголовок набагато довший, ніж інші.

Використання варіацій шаблонів має вирішальне значення, якщо ми хочемо створити послідовний і стійкий інтерфейси користувача. Менші компоненти (атоми, молекули, організми) повинні добре функціонувати в різних сценаріях.

Наприклад, кнопка має виглядати за допомогою кнопки будь-які навколишні елементи навколо. Якщо він не виглядає дієвим у певному варіанті, потрібно переробити атом кнопки до нього підходить для всіх випадків використання.

Сторінки - приклад

Нижче ви можете побачити етап сторінки попереднього шаблону домашньої сторінки TimeInc. Виглядає по-іншому, а? Це справедливо одна варіація шаблону, хоча. Щоб мати ефективний користувальницький інтерфейс, команда дизайнерів повинна добре подумати що може змінитися на реальному сайті. Потім вони також повинні перевірити дизайн для цього варіанта шаблону (сторінки).