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

Съдържание

• 01. Изберете вашата типография
• 02. Изберете правилната палитра
• 03. Стилни връзки и бутони
• 04. Създайте своите компоненти
• 05. Документирайте и си сътрудничете

Какво представлява дизайнът на потребителския интерфейс? По-добрият въпрос би бил, какво всъщност влиза в дизайна на потребителския интерфейс? Естетика? Използваемост? Достъпност? Всички тях? Как всички тези фактори се обединяват, за да осигурят оптимално потребителско изживяване и кое трябва да е на първо място?

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

01. Изберете вашата типография

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

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

Типографията „Красива“ всъщност е грозна, когато е нечетлива, защото разочарованието винаги надделява над естетиката. Страхотният дизайн е балансиран и хармоничен.

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

Що се отнася до четливостта и четливостта, минималният приемлив размер на шрифта, дефиниран от Указанията за достъпност на уеб съдържание WCAG 2.0, е 18pt (или 14pt получер). Най-добрият размер на шрифта за използване до голяма степен зависи от самия шрифт, но е важно да се има предвид визуалната йерархия и как този основен размер се различава от обобщенията и заглавията (т.е. h1>, h2>, h3>).

С избрания от вас инструмент за проектиране на потребителски интерфейс (ще използваме InVision Studio) създайте серия от текстови слоеве (T) и след това коригирайте всички размери, за да корелирате със следния шаблон:

• h1>: 44px
• h2>: 33px
• h3>: 22px
• p>: 18px

С InVision Studio (и всички други инструменти за проектиране на потребителски интерфейс) това става чрез коригиране на стиловете с помощта на панела Inspector от дясната страна.

След това изберете своя шрифт, но внимавайте, защото това, което може да забележите при някои шрифтове, е 18px p> и 22px h3> не изглежда толкова различно. Имаме два варианта: да променим размера на шрифта или да помислим за различен шрифт за заглавия. Вървете с последното, ако предвиждате, че вашият дизайн ще бъде натоварен с текст.

Имайте предвид, че:

• Визуалният дизайн на потребителския интерфейс често е подход, който усеща червата
• Нищо не е решено; всичко подлежи на промяна

Височина на линията

Оптималната височина на реда гарантира, че редовете на текста имат достатъчно разстояние между тях, за да се постигнат прилични нива на четливост. Това става все по-признато като „стандарт“; Инструментът за одит на Lighthouse на Google дори го предлага като ръчна проверка (или дори като флаг, ако текстът съдържа връзки, които може да са твърде близо една до друга в резултат на неоптимална височина на реда).

За пореден път WCAG ни помага с това, като декларира, че височините на линиите трябва да бъдат 1,5 пъти размера на шрифта. Така че, във вашия инструмент за проектиране на потребителски интерфейс под „Линия“ (или подобен), просто умножете размера на шрифта по - поне - 1,5. Като пример, ако основният текст е 18px, тогава височината на реда ще бъде 27px (18 * 1.5 - можете също да изпълните операцията по математика директно в Инспектора). Отново обаче, имайте предвид - ако 1.6x се чувства по-добре, използвайте 1.6x. Не забравяйте, че различните шрифтове ще дадат различни резултати.

Рано е да мислим за използване на реални данни в нашия дизайн, но поне трябва да използваме донякъде реалистични данни (дори lorem ipsum). InVision Studio има собствено приложение за реални данни, което ни помага да видим как всъщност може да изглежда нашата типография.

Разстояние между абзаците

Разстоянието между абзаците не е стил, който можем да декларираме с помощта на InVision Studio’s Inspector. Вместо това ще трябва да подравним ръчно слоевете с помощта на Smart Guides (⌥). Подобно на височината на реда, магическият множител е 2x (удвоен размер на шрифта). Като пример, ако размерът на шрифта е 18px, тогава трябва да има поне 36px пространство, преди да се премине към следващия текстов блок. Разстоянието между буквите трябва да бъде поне 0,12.

Не е нужно обаче да се притесняваме за това, докато не започнем да създаваме компоненти.

Споделени стилове

Ако вашият инструмент за проектиране на потребителски интерфейс го поддържа (InVision Studio все още не), помислете за превръщането на тези типографски стилове в „Споделени стилове“, за да ги направите многократно за многократна употреба, като същевременно осигурите визуална последователност. Това обикновено се осъществява чрез инспектора.

02. Изберете правилната палитра

Изборът на перфектните цветове за вашия дизайн надхвърля естетиката: той може да информира цялата йерархия на вашия сайт.

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

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

01. Старк
Приставката Stark е съвместима със Sketch и Adobe XD и ви помага да проверите цветовия контраст и да симулирате цветна слепота директно от платното. Поддръжката за Figma и InVision Studio идва много скоро.
02.Цветове
Цветовете са набор от 90 цветови комбинации, които имат подходящо количество цветен контраст, за да задоволят насоките на WCAG 2.0 - някои от тях дори успяват да отговарят на стандарта AAA.
03. Проект A11y
Проектът A11y е огромен център за всички неща, свързани с достъпността. Той включва ресурси, инструменти, съвети, уроци и е създаден от създателя на приставката Stark и получава финансиране от InVision.

Трите вида цвят

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

• Цвят с призив за действие (също основният цвят на марката)
• Неутрален тъмен цвят (по-добре за елементи на потребителския интерфейс или тъмен режим)
• За всичко по-горе, малко по-светъл и по-тъмен вариант

Това позволява следното:

• Тъмният режим ще бъде лесно постижим
• Нашият CTA цвят никога няма да противоречи на други цветове
• Във всеки сценарий ще можем да подчертаем и премахнем акцента

Настройте палитрата си

С избрания от вас инструмент за проектиране на потребителски интерфейс създайте по един доста голям артборд (докоснете A) за всеки цвят (наречен „Brand“, „Neutral / Light“ и „Neutral / Dark“). След това, във всяко монтажно поле, създайте допълнителни по-малки правоъгълници, показващи по-тъмните и светли вариации на цвета, а също и самите други цветове.

Бихме помислили за малко по-светъл и по-тъмен като съответно 10% допълнително бяло и 10% допълнително черно. Когато приключите, покажете копие на типографските стилове на всеки монтаж. Цветът на тези текстови слоеве трябва да бъде неутрална светлина, с изключение на артборда с неутрална светлина, където те трябва да са неутрално тъмни.

Контраст

След това ще трябва да проверим нашите цветове за оптимален цветови контраст. Съществуват разнообразни инструменти, които могат да направят това, например приставката Stark за Sketch и Adobe XD или Contrast за macOS - но онлайн решение като Contrast Checker или Color Contrast Checker ще се справи добре.

Проверете цветовия контраст за всяка комбинация и коригирайте съответно цветовете. Ако не сте сигурни какви цветове да използвате, опитайте да използвате препоръките на Color Safe.

03. Стилни връзки и бутони

Размер

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

Тестът за визуална достъпност е тест за използваемост, използван за определяне дали целите на докосване изглеждат кликащи. Синхронизирайте дизайна от Studio към Freehand (⌘⇧F), изпратете получения URL адрес на тестери и ги накарайте да заобиколят елементите, за които смятат, че могат да се кликват.

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

Като цяло бихме препоръчали текстът на бутоните да бъде деклариран като 18px (същият като основния текст), но самите бутони да имат три вариации по размер:

• Нормално: 44px във височина (заоблени ъгли: 5px)
• Голям: 54px във височина (заоблени ъгли: 10px)
• Много голям: 64px във височина (заоблени ъгли: 15px)

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

Дълбочина

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

Интерактивност

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

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

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

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

04. Създайте своите компоненти

Компонентите спестяват значително време и всички инструменти за проектиране на потребителски интерфейс предлагат тази функция (напр. В Sketch те се наричат ​​символи). В Studio можем да създаваме компоненти, като избираме всички слоеве, които трябва да съставят компонента, и използваме ⌘К пряк път.

Използване на компоненти

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

Това не означава, че трябва да проектираме много компоненти или да сме готови за всеки възможен сценарий, но означава, че трябва да използваме нагласа „Ами ако?“.

Например, ако нашата рамка изисква компонент 3x1, но знаем, че съдържанието не е поставено в камък, малко съзерцание може да ни накара да се запитаме: „Ами ако тези компоненти в крайна сметка са 4x1?“. Основното правило е: проектирайте само за нуждите на потребителите, които вече съществуват, но се опитайте да направите решенията относително гъвкави. В противен случай ще завършим с много разхвърлян „дълг за дизайн“ по-късно.

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

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

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

Използвайки нашите правила

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

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

Стрес тестване

В идеалния случай най-бързият и най-ефективен начин за осигуряване на стабилност в нашия дизайн е да го подложите на стрес тест. Да подложиш дизайн на тест означава да си жесток. Да кажем, че имаме навигация с X количество навигационни елементи, защото това беше изискването; за да осигурите наистина гъвкавост, опитайте да промените тези изисквания, като добавите повече навигационни елементи или, за да хвърлите наистина гаечен ключ, опитайте също да добавите навигационен елемент с по-висока визуална йерархия от останалите. Дали нашите правила за размер, типография и цвят позволяват нещо подобно? Или за да предложим оптимална използваемост, имаме ли нужда от друго правило?

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

05. Документирайте и си сътрудничете

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

Цветове

Първата стъпка е да запазим всички цветове в мострата „Цветове на документите“, ако още не сме го направили - това ще улесни достъпа им, когато трябва да ги приложим в нашия дизайн.За целта отворете приспособлението за избор на цвят от Инспектора, изберете „Цветове на документите“ от падащото меню и след това щракнете върху иконата +, за да добавите цвета към мострата. Това работи по същия начин в повечето инструменти на потребителския интерфейс.

Споделени библиотеки

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

По същество това означава, че всеки елемент трябва да бъде компонент, дори ако се състои само от един слой. Щракнете върху бутона + ‌ в лявата странична лента на Библиотеките и след това импортирайте точно този документ в нов документ. Точно така: нашият документ вече е библиотека и е готов да се използва за проектиране на потребителски интерфейси с гарантирана последователност.

InVision Studio е донякъде ограничен в смисъла, че все още не се синхронизира с официалния инструмент на System System Manager на InVision, но е достатъчно лесно да поместите библиотеката в Dropbox, за да могат други дизайнери да я използват и актуализират с течение на времето. Когато се направи промяна (локално или отдалечено), всеки файл на Studio, който използва библиотеката (отново, локално или отдалечено), ще попита дали искате да актуализирате цветовете и компонентите. По този начин се поддържат библиотеките за проектиране в екипи.

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

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

Дизайн в мащаб

С разширяването на дизайна управлението му става по-трудно. Има различни корекции, които бихме искали да направим, за да запазим ефективността и поддръжката, особено след като DSM на InVision все още не работи със Studio.

Например, може да искаме да използваме текстови слоеве, за да анотираме нашата библиотека като средство за обяснение на случаите на използване на различни елементи. За типографските стилове можем дори да редактираме текста, за да бъде по-описателен (напр. "H1> / 1.3 / 44px"). Това казва това h1>s трябва да бъде 44px и да има височина на линията 1.3.

Предаване на дизайн

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

Ако се притеснявате за отстраняване на неизправности и управление на уебсайт, уверете се, че имате правилната услуга за уеб хостинг, ще ви помогне, но за вашата система за проектиране, инструментът за предаване на дизайн на InVision, Inspect, е нещо, което трябва да използвате. За да го използваме, щракваме върху бутона / икона „Публикуване в InVision“ в InVision Studio, отваряме получения URL адрес и след това докосваме, за да превключим в режим на проверка. Наистина е удобно.

Това съдържание първоначално се появи в нетно списание.