Бұл жазба автоматты түрде орыс тілінен аударылған. Russian
Веб-дизайн өнері дамып келе жатқандықтан, біз қарапайым веб-беттер жиынтығын жасаудан гөрі, ойластырылған дизайн жүйелерін жасау қажеттілігін түсінеміз. Атомдық дизайн-бұл дизайн жүйелерін құру әдістемесі.
© Брэд Фрост
Брэд Фрост және Дэйв Олсен, жігіттер тұрған сайт patternlab.io. олар мұны "бет емес, жүйенің құрылысы"деп атайды
"Беттерді емес, жүйелерді құру"нені білдіреді?
Менің ойымша, жүйелерді салу дегеніміз-дизайн жасау немесе интерфейс беттерін толығымен жасау емес. Бұл түйме сияқты кішкентай элемент. Барлық кішкентай компоненттер label, box, table, form сияқты бірыңғай топтарға біріктіріледі. Ақыр соңында, соңғы беттер осы дайын топтардан жиналады. Бұл"жүйелер құрылысы" идеясы
Енді біз атомдық дизайн модульдеріне терең үңіле аламыз.
Әдістеме бес бөлек кезеңнен және интерфейсті жобалау жүйелерін құрудың реттелген иерархиялық әдісінен тұрады. Бұл:
Атомдар
Молекулалар
Организмдер
Үлгілер
Беттер
Атомдық дизайн иерархиясыАтомдар
Міне, сол кішкентай элементтер / молулалар "атом" деп аталады. Атомдар-бұл қосымшаның құрылыс блоктары.Мысалы, олар батырмалар, пішін элементтері және белгілер сияқты әртүрлі UI элементтері болып табылады. Олардың қаріптер, түстер және белгішелер мұраға қалдырылады жылғы атомдар.
Молекулалар
Молекулалар үлкен функционалдылықты қамтамасыз етеді. Молекулалар-бұл бір-бірімен байланысқан атомдар тобы және ең кіші іргелі бірліктер. Мысалы (3-сурет). Мәтін енгізу өрісі мен батырма іздеу формасына біріктірілген және бір нәрсені бірге жасай алады.Атомдар немесе ішкі Модульдер – бұл әр қадам үшін қолданылатын белгішелер, қадамдарды қосу үшін қолданылатын белгішелер( 4-сурет) және белгішелер астында қолданылатын мәтін, белсенді қадамдарды белсенді емес қадамдардан ажырату үшін қолданылатын түстер және қаріптер отбасының өлшемі мен стилін қамтитын типография, бұл атомдардың өздері өте қарапайым, бірақ бір рет топтастырылған, олар қолданушыға қазіргі қадамда не екенін, алда қандай қадамдар бар екенін және табиғатта сияқты осы қадамдарды шарлау әдісін білуге мүмкіндік беретін мағынасы мен функционалдығын қамтамасыз етеді., қашан интерфейстері выорстают кешенді және байланысады да молекулалар.
Организмдер
Дене-бұл интерфейсте салыстырмалы түрде күрделі, бөлек бөлім құру үшін біріктірілген молекулалар тобы. Іздеу молекулалары навигация молекулаларымен бірге денені-тақырыпты құрайды. Мысалы, (5-сурет) сайтты іздеу және тақырып навигация формасына біріктірілген және бір нәрсені бірге жасай алады. Бұл тақырып денесі іздеу формасының молекуласынан, логотип атомынан және бастапқы навигация молекуласынан тұрады. Организмдер бұл кішігірім және қарапайым компоненттерді іс-әрекетте көрсетеді және қайта-қайта қолдануға болатын жеке үлгілер ретінде қызмет етеді. Алдыңғы жағында организмдер HTML-ді бөлімдерге бөлуге жақсы үміткерлер болып табылады.Үлгілер
Үлгі негізінен парақтарға біріктірілген организмдер тобынан тұрады. Мұнда біз дизайнның қалай үйлесетінін және орналасудағы әрекеттерді көре бастаймыз. Осы кезде төмендегі (6-сурет) дизайн үлгісінен ағзаларды және олардың әр парағын қалай құрастыруға болатындығын елестету оңай. Бірақ бұл ғана емес, біз дизайнды осы бөліктерге бөлу бізге дизайнның ең жақсы ережелерін орнатуға және осы ережелерді қашан және неге қайта жазғымыз келетінін жақсы түсінуге қалай көмектесетінін елестете аламыз.dribbble.com
Міне, анықталған модульдерді құжаттау әдісі. Модульдердің қалай салынатынын немесе брендтің түстері мен қаріптер тобы сияқты жоғары деңгейлі анықтамаларды тіркейтін нұсқаулықтарды жазу үшін арнайы құжат құру ғана емес.
Беттер
Соңғы кезең-беттердің атомдық дизайн модулі. Барлық шаблондарда бет деп аталатын нақты өкілдік мазмұн бар. Беттер-дәлдіктің ең жоғары деңгейі. Беттер-бұл дайын материалдар, Бейнелер, фотосуреттер және нақты мазмұн қосылған шаблондар, бұл бізге қажет болған жағдайда дизайнды тексеруге және өзгертуге мүмкіндік береді. Беттер негізгі дизайн жүйесінің тиімділігін тексеру үшін қажет.Төменде Атом дизайнының кезең-кезеңімен мен осы мақалада сипаттаған кезеңдерден тұратындығы көрсетілген. Бұл атомдық дизайн! Бұл бес бөлек кезең UI дизайнының тиімді жүйелерін құру үшін бір уақытта жұмыс істейді. Қысқаша айтқанда, Атом дизайны:
Атомдар-бұл UI элементтері, олар одан әрі бөлінбейді және олар интерфейстің қарапайым құрылыс блоктары ретінде қызмет етеді.
Молекулалар-бұл салыстырмалы түрде қарапайым UI компоненттерін құрайтын атомдар жиынтығы.
Организмдер-интерфейстің жеке бөліктерін құрайтын салыстырмалы түрде күрделі компоненттер.
Үлгілер компоненттерді орналасуда орналастырады және дизайн мазмұнының негізгі құрылымын көрсетеді.
Беттер шаблондарға нақты мазмұнды қолданады және соңғы интерфейсті көрсету және дизайн жүйесінің тұрақтылығын тексеру үшін опцияларды тұжырымдайды.Қорытынды
Осы мақаланың соңында Мен атом дизайны дизайн жүйелерін құрудың нақты әдістемесін ұсынатындығын атап өтемін. Мұндай шеңберлер біздің ойлауымызды шоғырландыруға және не жасайтынымызды нақты көрсетуге мүмкіндік береді. Бұл біздің жобаларымыздың келісімділігі мен басқарылуын қамтамасыз етеді. Атомдық дизайн дизайнерлерге дизайнның әр компонентін біртұтас бөлік ретінде сынауға мүмкіндік береді. Біз бұл тақырыпқа тек үстірт тоқталамыз. Дизайн процесін қалай жүзеге асырасыз?Атомдық дизайн бізге абстрактіден нақтыға ауысуға мүмкіндік береді. Осының арқасында біз заттарды түпкілікті контексте көрсете отырып, үйлесімділік пен масштабталуға ықпал ететін жүйелер жасай аламыз. Жинау, бөлшектеу емес, біз сайлау тәсілінің орнына жүйені бірден жасаймыз.
© Брэд Фрост
Поскольку искусство веб-дизайна продолжает развиваться, мы осознаем необходимость разработки продуманных систем дизайна, а не создания простых коллекций веб-страниц. Атомарный дизайн - это методология создания дизайн-систем.
© Брэд Фрост
Брэд Фрост и Дэйв Олсен, парни, стоящие за сайтом patternlab.io, называют это - «Строй системы, а не страницы»
Что значит «Строить системы, а не страницы»?
По мне, Строительство систем значит не создание дизайна и не разработка страниц интерфейса целиком. Это маленький элемент, вроде кнопки. И все мелкие компоненты объединяются в единые группы, такие как label, box, table, form. В итоге, конечные страницы просто собираются из этих готовых групп. Это и есть идея «Строительства систем»
Теперь можем углубиться в модули атомарного дизайна.
Методология состоит из пяти отдельных этапов и упорядоченного иерархического способа создания систем проектирования интерфейсов. Это:
- Атомы
- Молекулы
- Организмы
- Шаблоны
- Страницы
Иерархия атомарного дизайна (изображение 1)
Атомы
Вот здесь, те маленькие элементы/молули назваются «Атомом». Атомы – это вроде, строительных блоков приложения.
(изображение 2)
Например, (изображение 2) они представляют собой разные элементы пользовательского интерфейса сами по себе, такие как кнопки, элементы форм и метки. Их шрифты, цвета и иконки наследуются от атомов.
Молекулы
Молекулы обеспечивают большую функциональность. Молекулы – это группы атомов, связанных вместе, и являются наименьшими фундаментальными единицами. Например, (изображение 3). Текстовое поле ввода и кнопка объединены в форму поиска и могут что-то делать вместе.
(изображение 3)
Атомы или внутренние модули – это значки, используемые для каждого шага, значки, используемые для соединения шагов (изображение 4), и текст, используемый под значками, а также цвета, используемые для различения активных шагов от неактивных, и используемая типографика, которая включает в себя размер и стиль семейства шрифтов, эти атомы сами по себе являются довольно простыми, но однажды сгруппированные вместе, они обеспечивают смысл и функциональность, позволяя пользователю узнать, на каком текущем этапе он находится, какие шаги впереди, и способ навигации по этим шагам, как в природе, когда интерфейсы выорстают комплексно и связываются в молекулы.
(изображение 4)
Организмы
Организм – это группы молекул, объединенных вместе, чтобы сформировать относительно сложную, отдельную секцию в интерфейса. Молекулы поиска в сочетании с молекулами навигации формируют организм-заголовок. Например, (изображение 5) поиск по сайту и заголовок объединены в форму навигации и могут что-то делать вместе. Этот организм заголовка состоит из молекулы формы поиска, атома логотипа и молекулы первичной навигации. Организмы демонстрируют эти более мелкие и простые компоненты в действии и служат отдельными образцами, которые можно использовать снова и снова. С точки зрения внешнего интерфейса, организмы являются хорошими кандидатами для разделения HTML на секции.
(изображение 5)
Шаблоны
Шаблон состоит в основном из групп организмов, сшитых вместе в страницы. Здесь мы начинаем видеть, как дизайн объединяется и действия в макете. На этом этапе легко визуализировать организмы из приведенного ниже (изображение 6) образца дизайна и то, как они могут составлять каждую из страниц. Но не только это, мы можем представить, как разбиение нашего дизайна на эти части может помочь нам установить лучшие правила дизайна и лучше понять, когда и почему мы хотели бы перезаписать эти правила.
dribbble.com (изображение 6)
Вот способ документировать модули, которые были идентифицированы. Это не только вопрос создания документа спецификации, чтобы зафиксировать, как должны быть построены модули, или написания руководств, которые фиксируют определения высокого уровня, такие как цвета бренда и семейства шрифтов.
Страницы
Заключительный этап – модуль атомарного дизайна страниц. Все шаблоны содержат реальный репрезентативный контент, который называется Страница. Страницы – высший уровень точности. Страницы – это шаблоны с добавленными готовыми материалами, видео, фотографиями и реальным контентом, что позволяет нам при необходимости проверять и дорабатывать дизайн. Страницы необходимы для проверки эффективности базовой дизайн-системы. Например, (изображение 7)
(изображение 7)
Ниже показано, что шаг за шагом атомарный дизайн следует этапам, которые я описываю в этой статье. Это и есть атомарный дизайн! Эти пять отдельных этапов одновременно работают вместе для создания эффективных систем дизайна пользовательского интерфейса. Вкратце подытожим атомарный дизайн:
- Атомы – это элементы пользовательского интерфейса, которые невозможно разбить дальше, и они служат элементарными строительными блоками интерфейса.
- Молекулы – это наборы атомов, которые образуют относительно простые компоненты пользовательского интерфейса.
- Организмы – это относительно сложные компоненты, которые образуют отдельные части интерфейса.
- Шаблоны размещают компоненты в макете и демонстрируют основную структуру содержимого дизайна.
- Страницы применяют реальный контент к шаблонам и формулируют варианты, чтобы продемонстрировать окончательный интерфейс и проверить устойчивость дизайн-системы.
(изображение 8)
Заключение
В конце этой статьи я упомяню, что Атомарный дизайн предоставляет четкую методологию создания систем дизайна. Такие фреймворки позволяют нам сосредоточить наше мышление и четко указать, что мы создаем. Это обеспечивает согласованность и управляемость наших проектов. Атомарный дизайн позволяет дизайнерам критически относиться к каждому компоненту дизайна как к части единого целого. Мы лишь поверхностно касаемся этой темы. А как вы реализуете процесс дизайна?
Атомарный дизайн дает нам возможность переходить от абстрактного к конкретному. Благодаря этому мы можем создавать системы, которые способствуют согласованности и масштабируемости, одновременно показывая вещи в их конечном контексте. Собирая, а не разбирая, мы создаем систему сразу же, вместо избирательного подхода.
© Брэд Фрост
***
Share
