Основна рамка за визуален дизайн

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

Имате нужда от добро око за визуален дизайн.

Визуалният дизайн е в комплект с концепцията за вкус - способността да „знаем“ какво е добро или не. Това е черта, която следва повечето дизайнери на семейни партита, когато се очаква да украсят нечия всекидневна или да снимат семейната снимка.

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

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

И така, как да преопределим визуалния дизайн?

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

Можем да обобщим, че визуалният дизайн прави следното:

  1. Комуникира и организира важна и сложна информация.
  2. Насърчава предвиденото поведение и обезценява другите.
  3. Поддържа четливост и познатост.

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

  1. Полезно ли е? Дизайнът предоставя ли стойност или полезност на потребителя?
  2. Чисто ли е? Дизайнът насърчава ли планираното поведение? Следва ли разказ, който има смисъл.
  3. Приятно ли е? Визуалното произведение се чувства родно от продукта, в който работи? Елементите познати ли са? Чувства ли се излъскан?

1. Полезно ли е?

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

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

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

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

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

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

2. Ясно ли е?

Лента на Microsoft Word 2010

Преди 10 години инструменти като Microsoft Word и Adobe Photoshop предоставиха добри възможности за своите продукти. Те имаха очевидни бутони, етикети и иконография. Те помещаваха различни случаи на използване с различни функции. Някои функции обаче почти не се използваха, но други се използваха през цялото време.

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

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

  1. Изявление: Използвайте по-силни визуални процедури, за да накарате компонентите да се чувстват по-важни и по-леки за тези, които са по-малко.
  2. Близост: Поставете съдържание, което е свързано по-близо.
  3. Сходство: Запазете сходства между компоненти, които имат подобно поведение.
  4. Затваряне: Затворете свързани компоненти.
  5. Непрекъснатост: Поставете съдържанието линейно (например в емисия), за да покажете сходство в няколко компонента.
Това е пример за Prominence. Той отнема основния компонент на бутон, но след това използва тежък фон запълване в сравнение с лек контур. И двамата обръща внимание на това, което вероятно би направил потребител и какво продуктът иска от потребителя - да извърши транзакция.

3. Приятно ли е?

Полезни компоненти, групирани по ясен начин, предават функция и мнение за това какво трябва да прави потребителят. Мозъците ни обработват тази информация във всеки случай. Той извлича подобни примери от минали интерфейси и търсим модели и такива, които ги разбиват - всеки причинява на мозъка ни допълнителна енергия. Твърде много от тези моменти се проявяват като неудовлетвореност или объркване. Ние виждаме тези проблеми и в реалния живот - когато има малко недостатъци по лицето ни или когато косата не е на мястото си. В един интерфейс, въпреки че не можем да идентифицираме изрично разликата между шрифт 24pt и 25pt, можем да го усетим. Не можем да го различим точно, но мозъкът ни знае, че нещо се усеща.

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

Как можем да покажем разлика?

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

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

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

Как можем да покажем сходство?

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

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

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

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

Поставянето заедно

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

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

Полезно ли е? Чисто ли е? Приятно ли е?

___

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

Благодаря на Брад Бърдсол за неговите мисли и отзиви!