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

Нека да опишем основните проблеми, които дизайнерската рамка решава, защо имате нужда от нея и компонентите, които ще трябва да създадете при изграждането на такава. Ще намерите рамка за потребителски интерфейс на Sketch за изтегляне Безплатно по-късно в статията, която ви позволява да създадете своя собствена рамка за дизайн.

Дизайнерска рамка в Sketch

Какво е рамка за дизайн?

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

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

Дизайнерските рамки решават няколко проблема, включително:

• Елиминиране на несъответствия в дизайна на продукта.
• Увеличете сътрудничеството, ефективността и комуникацията между дизайнерските и продуктовите екипи.
• Правете актуализации на дизайна по-късно в процеса на проектиране по-малко разочароващи.

Първият проблем: несъответствие в продукта

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

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

Дизайнерските рамки решават този проблем чрез установяване на последователни стандарти.

Вторият проблем: пропуски в сътрудничеството и комуникацията

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

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

как да създадете erc20 токен

Често срещан проблем: три различни стила на един и същ бутон

Третият проблем: промени в дизайна на последния етап

Колко пъти дизайнерите трябва да направят еднократна промяна на цвета в дизайнерския файл със 120 вече разработени шаблона за настолни компютри? Колко пъти е необходимо да смените икона, която е част от 200 компонента?

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

Как да създадете рамка за дизайн

След като вече знаем какво представлява рамката за проектиране и проблемите, които тя решава, нека поговорим за това как да я създадем (и какво има в изтеглянето на комплекта на Sketch UI, предоставено по-късно в статията).

Рамката за проектиране, използвана за тази статия, е единичен файл на скица, който се представя с помощта на специфична йерархия на компонентите, известна в Sketch като „символи“. Тези символи улесняват внедряването на промени в целия файл с едно щракване. Промяна в компонента 'master' - 'символ' - се отразява незабавно във всички други случаи.

Йерархия на рамката за проектиране

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

Без цвят и пространство: фигури, сенки и типография са просто набор от невидими параметри.

Цвят

Цветът е най-важният елемент в йерархията на рамката UI design - всеки компонент на дизайна използва цвят. Цветът предизвиква силни реакции и емоции у хората и задава цялостния външен вид, усещане и тон на продукта.

Добра практика е да разделите цветовете на групи:

1. Основните цветове са основните цветове на марката, обикновено използвани за създаване на цялостната цветова схема на даден проект и за ключови компоненти като бутони.

2. Вторични цветове те допълват основната палитра - често са различни нюанси, наситеност или оттенъци на основните цветове. Сива скала Обикновено се използва за типография или фонове. Някъде между пет и осем нива на сивото трябва да са достатъчни.

3. Цветове за системни коментари те са важна група, която дизайнерите често забравят. Тези цветове показват системни съобщения, включително предупреждения, предупреждения и известия.

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

Решетка: Пространството за дизайн

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

Има два вида мрежи: вертикален Y. хоризонтална .

Вертикалната решетка е най-често използваната и поддържа всичко хоризонтално подравнено. Има много популярни мрежови системи като Bootstrap или по-старата 960px мрежа. Хоризонталната мрежа не е толкова често срещана. За типография се използва хоризонтална мрежа. Създава вертикален ритъм за абзаци и често се среща във вестниците.

Модификатори: стилистични правила

Освен цвета и решетката, има още един компонент, който е високо в йерархията на рамката на дизайна: модификатори. Те не могат да се използват като самостоятелни компоненти: те се използват за модифициране или стил на други.

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

Третирайте модификаторите като параметри за всички следващи градивни елементи. Създайте символи за скица по три различни начина: правоъгълник, заоблен правоъгълник и кръг. Използвайте тези фигури, за да създадете всеки от компонентите на потребителския интерфейс, включително бутони, входни компоненти, полета за формуляри и т.н. и фонови елементи.

Тази техника позволява на дизайнерите фокусирайте се повече върху UX, отколкото върху външния вид на компонентите на потребителския интерфейс. Също така улеснява връщането към основната форма, промяната на нейния стил (например радиус на ъгъла) и всичко свързано ще се актуализира автоматично.

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

Типография: съдържанието

Типографията е последният основен компонент на рамката за проектиране. Може да се раздели на две групи: статично копие на страница, като заглавия и абзаци; и интерактивно копиране на компоненти, като бутони, навигация или полета за въвеждане.

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

Стилен основен текст на светъл и тъмен фон

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

Включването на тази група в рамката на дизайна е полезно, докато се мисли глобално за типографията. Първо, създайте нормалния текст на етикета на бутона и второ, създайте неговите вариации; това ще ви помогне да избегнете твърде много размери на шрифта. Когато създавате нови компоненти на потребителския интерфейс в рамката, винаги проверявайте дали има съществуващ стил на шрифт, който се вписва.

какво е node js framework

Цветовете като скицирани символи не могат да се използват с типография; промени обаче могат да бъдат приложени чрез Скица стилове. Добра практика е да използвате вече създадената библиотека с цветове и да актуализирате тези текстови стилове, ако в библиотеката се промени цвят.

Икони

В системата за оформление има две групи икони: информационни и икони на потребителски интерфейс. Първата група обикновено е част от a набор от илюстрации и не се използва за никакви компоненти за взаимодействие с потребителския интерфейс (като бутони). Втората група - икони на потребителския интерфейс - добавя значение към по-сложните компоненти: бутони, етикети или таблици, като същевременно заема много малко пространство. Иконите в потребителския интерфейс могат да се използват и като задействащи функции като „редактиране“, „копиране“, „изтегляне“ и „изтриване“. Започнете с прости икони, използвани за взаимодействия с потребителския интерфейс, като стрелки, „добавяне“ (+) или „затваряне“ (x). Добра практика е да ги проектирате в различни размери (12px, 16px, 24px 32px).

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

Компоненти

Бутони

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

Когато проектирате бутони, не забравяйте да проектирате техните индивидуални 'състояния'. Като правило бутонът има множество състояния и осигурява визуална обратна връзка на потребителите, за да посочи текущото състояние (неактивно, превъртано, натиснато, деактивирано, активно и т.н.). Има два начина да направите това: първият е да проектирате външния вид на бутоните отделно за всяко състояние (редовно, активно, превъртано и натиснато). Това решение може да отнеме много време, но след това осигурява голяма гъвкавост. (Този метод е използван в безплатната рамка на Sketch UI, включена по-долу.)

Вторият начин е да се проектират всички състояния въз основа на първоначалния. Например създайте а Скица символ, който ще промени цвета, наситеността или яркостта на всяко състояние. За да направите това, позиционирайте символа като наслагване на бутон с един от режимите на смесване на скицата: нюанс, наситеност или наслагване. Използвайте черен правоъгълник с режим на смесване на нюанси на обикновения бутон, за да промените наситеността му. Промяната на непрозрачността на наслагването по-късно го прави повече или по-малко наситен бутон.

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

Входни компоненти

Входовете позволяват на потребителя да комуникира с приложението и да качва данни. Използването на компоненти като полета за въвеждане заедно с бутони позволява създаването на просто уеб приложение. Както при бутоните, най-добре е да създавате входни компоненти с различни състояния. Зависи от рамката за проектиране, но поне помислете за създаване на празни, запълнени и състояния на грешки.

Сложни компоненти

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

Раздели

На този етап рамката за проектиране може да бъде допълнително разработена чрез създаване на най-често срещаните раздели на приложения или уебсайтове. Чрез проектиране на неща като навигация, заглавия, раздел „за нас“ и галерии, дизайнерът може да спести време в по-късните фази на проекта. Създаването на множество варианти на различни раздели на продукта ще улесни приспособяването на различни проекти.

Добри практики на рамката за проектиране

Постоянно тествайте рамката за проектиране

Тестването трябва да бъде включено във всеки процес на проектиране или разработване. Избягвайте грешки и липсващи компоненти, когато създавате малки парчета дизайн и тестове за стрес. Например, той проверява дали промяната на компонент, създаден в началото, също променя наскоро добавен компонент.

Създайте прости компоненти на потребителския интерфейс

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

Не се фокусирайте само върху един стил

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

Създайте своя собствена рамка за дизайн

В следващия си проект отделете време в началото, за да изградите внимателно рамка за дизайн. Ще откриете, че подобрява цялостния процес на проектиране, увеличава ефективността и подобрява последователността на дизайна на продукта, подобрявайки лекотата на използване. Ще спестите време, ще комуникирате идеите за дизайн по-ефективно и ще зарадвате клиентите и заинтересованите страни, когато тези идеи оживеят само за секунди на 120 монтажни плочи на Sketch.

Готови ли сте да започнете свой собствен дизайн?

Изтеглете файла Sketch тук . Включени са инструкции как да го използвате.

Вдъхновяващи системи за дизайн и рамки на потребителския интерфейс

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

Езикът на дизайна на IBM - IBM споделя целия им процес на проектиране, включително подробно обяснение на всеки детайл.

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

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