Перш чым будзе напісаны адзіны радок кода, большасць дизайнерскіх каманд праходзяць два вельмі розныя этапы: каркасы і макеты. Іх часта блытаюць адзін з адным, але яны адказваюць на зусім розныя пытанні.
Каркас адказвае на адно пытанне: дзе ўсё размяшчаецца? Звычайна чорныя, белыя і шэрыя блокі, якія прадстаўляюць загаловак, кнопку, поле формы — размешчаныя так, каб паказаць структуру і іерархію.
Макет бярэ зацверджаны каркас і прымяняе рэальны візуальны дизайн — сапраўдныя колеры, тыпаграфіку, адлегласці, іконкі і выявы. Гэта статычнае выява, якое паказвае, як будзе выглядаць гатовы прадукт.
| Аспект | Каркас | Макет |
|---|---|---|
| Дэталізацыя | Нізкая | Высокая |
| Фокус | Макет і структура | Візуальны дизайн |
| Колеры і шрыфты | Няма (градацыі шэрага) | Канчатковы брэндавы стыль |
| Выкарыстоўваецца для | Ранніх структурных рашэнняў | Зацвярджэння зацікаўленымі бакамі |
Прапуск каркасаў і пераход адразу да адшліфаванага макета звычайна не спрацоўвае — рэцэнзенты адцягваюцца колерамі да таго, як макет будзе зацверджаны, і структурныя змены азначаюць пераробку гатовай візуальнай працы.
Каркасы атрымалі сваю назву ад каркасных мадэляў, якія выкарыстоўваліся ў ранняй трохмернай камп'ютарнай графіцы — простыя структуры на аснове ліній, якія паказвалі форму без дэталяў паверхні, тая ж асноўная ідэя, прымененая да макетаў экрана.
Ні каркасы, ні макеты не з'яўляюцца інтэрактыўнымі. Прататып — гэта наступны крок — каркасы або макеты, злучаныя разам, каб хтосьці мог пракліквацца па іх і атрымаць досвед, больш блізкі да рэальнага прадукту.
Функцыі прадукту NOXEL360 праходзяць праз рэальныя каркасы перш, чым пачынаецца якая-небудзь работа над візуальным дизайнам — спачатку структура, потым апрацоўка.
Гэта магчыма для вельмі малых праектаў, але прапуск каркасаў звычайна азначае, што візуальныя рашэнні і рашэнні па макеце пераблытваюцца разам, запавольваючы зваротную сувязь.
Не. Каркас — гэта статычны макет. Прататып — гэта інтэрактыўная версія, часта створаная з каркасаў або макетаў, якая дазваляе каму-небудзь пракліквацца па экранах.
Figma з'яўляецца найбольш выкарыстоўваемым сёння, падтрымліваючы як хуткае стварэнне каркасаў з нізкай дэталізацыяй, так і падрабязныя макеты з высокай дэталізацыяй у адным файле.
Проста дастаткова падрабязным, каб перадаць макет і іерархію — даданне занадта шмат візуальных дэталяў пазбаўляе сэнсу захаванне ранняй зваротнай сувязі засяроджанай на структуры.
Менеджэры па прадуктах, зацікаўленыя бакі і часам карыстальнікі даюць зваротную сувязь па структуры і патоку перш, чым пачынаецца работа над візуальным дизайнам.
Так — многія каманды пачынаюць з хуткіх эскізаў на паперы перш, чым пераходзіць да лічбавых інструментаў для стварэння каркасаў для большай дакладнасці.
Як правіла, так, паколькі макеты прызначаны для дакладнага прадстаўлення канчатковага візуальнага дизайну для перадачы распрацоўшчыкам.
Паглядзіце дизайн, які пачынаецца са структуры, у рэальным працэсе распрацоўкі прадукту.
Даследуйце панэль кіравання NOXEL360 →