Веб-дизайн өнері дамып келе жатқандықтан, біз қарапайым веб-беттер жиынтығын жасаудан гөрі, ойластырылған дизайн жүйелерін жасау қажеттілігін түсінеміз. Атомдық дизайн-бұл дизайн жүйелерін құру әдістемесі.

© Брэд Фрост

Брэд Фрост және Дэйв Олсен, жігіттер тұрған сайт patternlab.io. олар мұны "бет емес, жүйенің құрылысы"деп атайды

"Беттерді емес, жүйелерді құру"нені білдіреді?

Менің ойымша, жүйелерді салу дегеніміз-дизайн жасау немесе интерфейс беттерін толығымен жасау емес. Бұл түйме сияқты кішкентай элемент. Барлық кішкентай компоненттер label, box, table, form сияқты бірыңғай топтарға біріктіріледі. Ақыр соңында, соңғы беттер осы дайын топтардан жиналады. Бұл"жүйелер құрылысы" идеясы

Енді біз атомдық дизайн модульдеріне терең үңіле аламыз.

Әдістеме бес бөлек кезеңнен және интерфейсті жобалау жүйелерін құрудың реттелген иерархиялық әдісінен тұрады. Бұл:

Атомдар
Молекулалар
Организмдер
Үлгілер
Беттер
Атомдық дизайн иерархиясы

Атомдар
Міне, сол кішкентай элементтер / молулалар "атом" деп аталады. Атомдар-бұл қосымшаның құрылыс блоктары.

Мысалы,  олар батырмалар, пішін элементтері және белгілер сияқты әртүрлі UI элементтері болып табылады. Олардың қаріптер, түстер және белгішелер мұраға қалдырылады жылғы атомдар.

Молекулалар
Молекулалар үлкен функционалдылықты қамтамасыз етеді. Молекулалар-бұл бір-бірімен байланысқан атомдар тобы және ең кіші іргелі бірліктер. Мысалы (3-сурет). Мәтін енгізу өрісі мен батырма іздеу формасына біріктірілген және бір нәрсені бірге жасай алады.

Атомдар немесе ішкі Модульдер – бұл әр қадам үшін қолданылатын белгішелер, қадамдарды қосу үшін қолданылатын белгішелер( 4-сурет) және белгішелер астында қолданылатын мәтін, белсенді қадамдарды белсенді емес қадамдардан ажырату үшін қолданылатын түстер және қаріптер отбасының өлшемі мен стилін қамтитын типография, бұл атомдардың өздері өте қарапайым, бірақ бір рет топтастырылған, олар қолданушыға қазіргі қадамда не екенін, алда қандай қадамдар бар екенін және табиғатта сияқты осы қадамдарды шарлау әдісін білуге мүмкіндік беретін мағынасы мен функционалдығын қамтамасыз етеді., қашан интерфейстері выорстают кешенді және байланысады да молекулалар.

Организмдер
Дене-бұл интерфейсте салыстырмалы түрде күрделі, бөлек бөлім құру үшін біріктірілген молекулалар тобы. Іздеу молекулалары навигация молекулаларымен бірге денені-тақырыпты құрайды. Мысалы, (5-сурет) сайтты іздеу және тақырып навигация формасына біріктірілген және бір нәрсені бірге жасай алады. Бұл тақырып денесі іздеу формасының молекуласынан, логотип атомынан және бастапқы навигация молекуласынан тұрады. Организмдер бұл кішігірім және қарапайым компоненттерді іс-әрекетте көрсетеді және қайта-қайта қолдануға болатын жеке үлгілер ретінде қызмет етеді. Алдыңғы жағында организмдер HTML-ді бөлімдерге бөлуге жақсы үміткерлер болып табылады.

Үлгілер
Үлгі негізінен парақтарға біріктірілген организмдер тобынан тұрады. Мұнда біз дизайнның қалай үйлесетінін және орналасудағы әрекеттерді көре бастаймыз. Осы кезде төмендегі (6-сурет) дизайн үлгісінен ағзаларды және олардың әр парағын қалай құрастыруға болатындығын елестету оңай. Бірақ бұл ғана емес, біз дизайнды осы бөліктерге бөлу бізге дизайнның ең жақсы ережелерін орнатуға және осы ережелерді қашан және неге қайта жазғымыз келетінін жақсы түсінуге қалай көмектесетінін елестете аламыз.

dribbble.com

Міне, анықталған модульдерді құжаттау әдісі. Модульдердің қалай салынатынын немесе брендтің түстері мен қаріптер тобы сияқты жоғары деңгейлі анықтамаларды тіркейтін нұсқаулықтарды жазу үшін арнайы құжат құру ғана емес.

Беттер
Соңғы кезең-беттердің атомдық дизайн модулі. Барлық шаблондарда бет деп аталатын нақты өкілдік мазмұн бар. Беттер-дәлдіктің ең жоғары деңгейі. Беттер-бұл дайын материалдар, Бейнелер, фотосуреттер және нақты мазмұн қосылған шаблондар, бұл бізге қажет болған жағдайда дизайнды тексеруге және өзгертуге мүмкіндік береді. Беттер негізгі дизайн жүйесінің тиімділігін тексеру үшін қажет.

Төменде Атом дизайнының кезең-кезеңімен мен осы мақалада сипаттаған кезеңдерден тұратындығы көрсетілген. Бұл атомдық дизайн! Бұл бес бөлек кезең UI дизайнының тиімді жүйелерін құру үшін бір уақытта жұмыс істейді. Қысқаша айтқанда, Атом дизайны:

Атомдар-бұл UI элементтері, олар одан әрі бөлінбейді және олар интерфейстің қарапайым құрылыс блоктары ретінде қызмет етеді.
Молекулалар-бұл салыстырмалы түрде қарапайым UI компоненттерін құрайтын атомдар жиынтығы.
Организмдер-интерфейстің жеке бөліктерін құрайтын салыстырмалы түрде күрделі компоненттер.
Үлгілер компоненттерді орналасуда орналастырады және дизайн мазмұнының негізгі құрылымын көрсетеді.
Беттер шаблондарға нақты мазмұнды қолданады және соңғы интерфейсті көрсету және дизайн жүйесінің тұрақтылығын тексеру үшін опцияларды тұжырымдайды.

Қорытынды
Осы мақаланың соңында Мен атом дизайны дизайн жүйелерін құрудың нақты әдістемесін ұсынатындығын атап өтемін. Мұндай шеңберлер біздің ойлауымызды шоғырландыруға және не жасайтынымызды нақты көрсетуге мүмкіндік береді. Бұл біздің жобаларымыздың келісімділігі мен басқарылуын қамтамасыз етеді. Атомдық дизайн дизайнерлерге дизайнның әр компонентін біртұтас бөлік ретінде сынауға мүмкіндік береді. Біз бұл тақырыпқа тек үстірт тоқталамыз. Дизайн процесін қалай жүзеге асырасыз?

Атомдық дизайн бізге абстрактіден нақтыға ауысуға мүмкіндік береді. Осының арқасында біз заттарды түпкілікті контексте көрсете отырып, үйлесімділік пен масштабталуға ықпал ететін жүйелер жасай аламыз. Жинау, бөлшектеу емес, біз сайлау тәсілінің орнына жүйені бірден жасаймыз.

© Брэд Фрост