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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Цвят

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Икони

В системата за дизайн има две групи икони: информативни и икони на потребителски интерфейс. Първата група обикновено е част от илюстрационна система и не се използва за никакви компоненти за взаимодействие с потребителския интерфейс (като бутони). Втората група - икони на потребителския интерфейс - придават значение на по-сложни компоненти: бутони, етикети или таблици, като същевременно заемат много малко пространство. Иконите в потребителския интерфейс също могат да се използват като задействащи функции като „редактиране“, „копиране“, „изтегляне“ и „премахване“.

Започнете с прости икони, използвани за взаимодействия с потребителския интерфейс, като стрелки, „добавяне“ (+) или „затваряне“ (x). Добра практика е да ги проектирате в различни размери (12px, 16px, 24px 32px).

Компоненти

Бутони

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

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

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

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

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

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

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

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

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

Раздели

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

Най-добри практики в рамката за проектиране

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• • •

Допълнително четене в блога за дизайн на ApeeScape:

• eCommerce UX - преглед на най-добрите практики (с инфографика)
• Значението на ориентирания към човека дизайн в продуктовия дизайн
• Най-добрите портфейли на UX Designer - вдъхновяващи казуси и примери
• Евристични принципи за мобилни интерфейси
• Предвиден дизайн: Как да създадем магически потребителски опит