7 практически съвета за измама при дизайна

Подобряване на вашите дизайни с тактика вместо талант.

Всеки уеб разработчик неизбежно изпада в ситуации, в които трябва да вземат решения за визуален дизайн, независимо дали им харесва или не.

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

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

Ето седем прости идеи, които можете да използвате, за да подобрите дизайна си днес.

1. Използвайте цвят и тегло, за да създадете йерархия вместо размер

Честа грешка, когато стилизиращият UI текст разчита твърде много на размера на шрифта, за да контролира вашата йерархия.

„Важен ли е този текст? Нека го направим по-голям. “

„Този ​​текст вторичен ли е? Нека го направим по-малък. “

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

„Важен ли е този текст? Нека го направим по-смело. “

„Този ​​текст вторичен ли е? Нека използваме по-светъл цвят. "

Опитайте и се придържайте към два или три цвята:

  • Тъмно (но не черно) цвят за основно съдържание (като заглавието на статия)
  • Сиво за вторично съдържание (като датата на публикуване на статия)
  • По-светло сиво за спомагателно съдържание (може би забележка за авторското право в долния колонтитул)

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

  • Нормално тегло на шрифта (400 или 500 в зависимост от шрифта) за повечето текст
  • По-голямо тегло на шрифта (600 или 700) за текст, който искате да подчертаете

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

2. Не използвайте сив текст върху цветни фонове

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

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

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

Има два начина да намалите контраста при работа с цветни фонове:

1. Намалете непрозрачността на белия текст

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

2. Изберете ръчно цвят, който се основава на цвета на фона

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

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

3. Компенсирайте сенките си

Вместо да използвате големи размазване и стойности на разпространение, за да направите сенките на кутиите по-забележими, добавете вертикално изместване.

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

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

Ако се интересувате да научите повече за дизайна на сенки, Насоките за дизайн на материали са фантастичен грунд.

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

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

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

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

1. Използвайте кутия сянка

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

2. Използвайте два различни цвята на фона

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

3. Добавете допълнително разстояние

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

5. Не духайте икони, които трябва да са малки

Ако проектирате нещо, което би могло да използва някои големи икони (като може би секцията „функции“ на целевата страница), може инстинктивно да вземете безплатен набор от икони като Font Awesome или Zondicons и да натрупате размера, докато не отговарят на вашите нужди.

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

Макар че е вярно, че векторните изображения няма да се влошат в качеството си, когато увеличите размера си, иконите, които са начертани с 16-24px, никога няма да изглеждат много професионални, когато ги надуете до 3x или 4 пъти по предназначение. Липсват им детайли и винаги се чувстват непропорционално „тромави“.

Ако имате малки икони, опитайте да ги затворите в друга форма и да придадете на цвета цвят на фона:

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

Ако имате бюджет, бихте могли да използвате и премиум набор от икони, проектиран да се използва при по-големи размери, като Heroicons или Iconic.

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

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

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

Например, отстрани на предупредителното съобщение:

… Или да подчертаете активните елементи за навигация:

… Или дори в горната част на цялото ви оформление:

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

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

7. Не всеки бутон се нуждае от цвят на фона

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

Рамки като Bootstrap някак окуражават това, като ви дават меню със семантични стилове, от които да избирате всеки път, когато добавяте нов бутон:

„Това положително действие ли е? Направете бутона зелен. "

„Това изтрива ли данните? Направете бутона червен. "

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

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

При проектирането на тези действия е важно да се съобщи тяхното място в йерархията.

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

„Какво става с разрушителните действия, не трябва ли винаги да са червени?“

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

Запишете големия, червения и смел стил, когато това отрицателно действие всъщност е основното действие в интерфейса, като в диалогов прозорец за потвърждение:

Харесва ли ви тази публикация? Току-що издадохме книга!

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

Досега над 6000 души са го взели и отзивите бяха невероятни.

Ако се интересувате, отидете на RefactoringUI.com/book, за да научите повече и изтеглете мостра.