10 чит кодове за проектиране на потребителски интерфейси

Вероятно бих предположил, че повечето от нас са започнали в дизайна на потребителския интерфейс с най-малко познания или изобщо нищо. Но въпреки че шансовете бяха срещу нас в началото, ние успяхме да си проправим път чрез многобройни дизайнерски книги и статии, за да разберем как работят цветовете, типографията, оформлението и т.н. Спомням си как е установено у нас в Make Technology, UX компания, която Design не може да бъде обяснена просто с цветове, форми и текст. Това е процес, който има „Защо“ зад себе си, че всеки път, когато създаваме текст по-голям, добавяме сянка или променяме цвета, трябва да има причина, поради която нещата трябва да бъдат.

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

* Отказ от отговорност: Представените по-долу проби „Dont“ не означава непременно, че грешат. Нашата основа е как можем да се подобрим от добро дизайнерско решение до много по-добро

1. Този текст е важен, направете го по-голям!

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

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

Извинявайте се, ако снимката е във формат с ниска резолюция ️

И така, как да създам по-добър контраст?

  • Не използвайте един вид тегло с различни размери на шрифта, за да създадете контраст и йерархия.
  • Вместо това използвайте по-смел и по-тъмен стил за основно съдържание или по-малък и лек за вторично съдържание (по-малко важен).
  • Създайте три вида текстови цветове, които варират от тъмни до светли (вижте примера по-долу). Обикновено използвам основния си цвят като цвят на текста на тялото.
  • Не се страхувайте да приложите големи пропуски на шрифта към вашите елементи (т.е. 24px заглавие, 16px текст на тялото, 10px мета и т.н.). По-голяма разлика = по-добър контраст.
  • Вижте Modularscale онлайн калкулатор, който можете да използвате за създаване на по-добра йерархия на шрифта.
  • Не забравяйте, че контрастът е = размер + тегло + цвят.
  • И накрая, не забравяйте да проверите нейното съотношение на контраст. Можете да използвате този калкулатор, за да проверите неговата достъпност.
от основния си цвят преминавам от по-тъмен за заглавия към по-светъл за спомагателно съдържание.

2. Не създавайте множество нюанси на черно

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

Всички знаем, че използването на черен цвят на текста (# 000) причинява напрежение на очите за читателите и затова нашето решение е да създадем по-тъмни варианти като алтернатива. Но вместо избор на цвят 3 или повече шестнадесетични цветови стойности, можем да използваме черно с различна непрозрачност като решение:

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

3. Правете математика за разбиране на цветовете

Повечето от нас изсмукват да избират правилните цветови комбинации и винаги, когато видим дизайн с добре организирана цветова палитра, ние се питаме „Как F са го направили?“ (Точно като тази по-долу):

взети от momoandspirits

Докато не научих, че разбирането на цветовете не е само за тези, които имат дарбата на дизайна от началото на времето, че простото събиране и изваждане в Hue, Saturation, Brightness (HSB) ще направи магията (ще използваме HSB за това формула вместо RGB). Можете лесно да се отървете от скучното бяло над цветни фонове и да го превърнете в работа на Пикасо като тази по-долу:

И така, къде идва събирането и изваждането в HSB?

Два подхода за разбиране на цветовете

Всъщност има два подхода, които можем да направим и както виждаме, и двете опции имат един и същи основен цвят # B9F4BC (фон на кръг), но се различават, когато става въпрос за цвят на папка и лента. Като започнем, винаги помнете, че първото число съответства на Hue, последвано от насищане и последно - Brightness.

Вариант А

Вариант А

Във вариант A можем да видим, че запазихме стойността на Hue 123 през всички форми (кръг, папка, лента), докато наситеността и яркостта е мястото, където се случва промяната.

Сега, като се съсредоточим върху насищането на основата, която е 24 и яркостта му, 96, и двете стойности се промениха, когато създадохме по-тъмно зелено за папката. От наситеността на 24 тя стана 40 (прираст от +16), а от яркостта на 96 стана 82 (декремент от -14), което ни показва, че промяната в насищането, независимо дали инкрементална или декрементална, се нуждае от обратно пропорционална настройка на яркостта, за да може за да създадете добър контраст (обратно). И същото нещо се случи в Strip, използвайки насищането и яркостта на папката като базова стойност, преминахме от 40 на 44 (прираст от +04) и намалихме от 82 на 75 (декремент от -07) за яркостта. Това ни води до формулата:

По-тъмна стойност = Повишението на наситеността е декремент в яркостта
По-леката стойност = Понижението в наситеността е увеличение на яркостта

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

Вариант Б

Вариант Б

Във вариант B все още се прилага същия принцип (формулата, която имахме по-горе), но стойностите на Hue се променят. А терминологиите RGB и CMY, които използвахме за преминаване в различни дизайнерски материали, сега ще имат смисъл за нас.

RGB означава червено, зелено и синьо, докато CMY е синьо, пурпурно и жълто. Тези терминологии не са имали никакво значение за мен, когато за първи път започнах, докато не попаднах на това откритие за използване на RGB и CMY за цветови комбинации.

Сега във вариант B, ако искаме да имаме по-тъмна вариация на основния цвят, всичко, което трябва да направим, е да преместим цвета си в посоката, в която се намира най-близкият RGB в нашата цветова палитра, или да го преместим в посоката на CMY за по-лека вариация. Например:

Средство за избиране на цвят

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

* По-често RGB води до по-тъмна вариация, а CMY за по-лека

След като преместихме цветовия подбор към желаната от нас вариация, сега прилагаме формулата във Вариант А, което ни кара да имаме тази цветова комбинация:

Червено, зелено, синьо (RGB) + опция Формула = по-тъмна вариация
Cyan, Magenta, Yellow (CMY) + Вариант A формула = по-лека вариация

4. Използвайте интервал за отделни групи

Бъдете щедър дарител на космически пространства

Освен добавяне на линия между две групи, за да покажете раздяла, използването на щедро пространство между тях е по-добро и по-лесно решение.

Както казва Законът за близост:

Обектите, които са в близост или са в близост един до друг, са склонни да се групират.

От моя пример по-горе, целта ми е да създам раздяла между заглавието ми и неговия писател, като използвам голяма празнина между тях, която е 24px.

5. Използвайте цветове, за да разделите редове

Цветове като разделители

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

6. Умножете вместо да пуснете текст на сянка

Дизайн на хедъра

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

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

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

Спецификации за опции за мултиплициране

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

7. Дължина на линията

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

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

с голямо бяло пространство вдясно

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

центрирано съдържание

8. Не преоткривайте колелото

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

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

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

9. Използвайте цветовете на марката като акценти

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

10. Закачете куршумите

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

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

Тази статия е вдъхновена от 7 практически съвета за изневяра на дизайна и от тонове дизайнерски статии, които прочетох :)

Други истории от мен

За всякакви въпроси, ping me на mhariellmosqueriola@gmail.com

giphy