Поддържане на последователност във вашия потребителски интерфейс дизайн

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

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

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

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

• 1. Бъдете в съответствие с указанията и поведението на потребителския интерфейс на устройството
• 2. Бъдете в съответствие с други подобни сайтове или приложения
• 3. Останете в съответствие със собствения си дизайн

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

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

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

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

• 1. Помислете как последователно да поставяте елементи в целия си сайт или приложение.
• 2. Помислете какви модели на потребителски интерфейс ще използвате.
• 3. Планирайте какви входни елементи ще ви трябват.
• 4. Разберете какви икони ще ви трябват и изберете или проектирайте добър набор от икони, който покрива всички тях.

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

„Нищо не дразни потребителя по-бързо от преместването или изчезването на навигационни елементи“

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

Разгледайте моделите на потребителския интерфейс

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

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

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

„Ако можете да премахнете или замените някои входове, които може да са спънки, направете го.“

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

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

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

Постоянен стил

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

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

• 1. Цветова схема
• 2. Стил
• 3. Граници
• 4. Тип и шрифтове
• 5. Размер
• 6. Фонови изображения
• 7. Ефекти

Цветове

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

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

Граници

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

Тип и шрифтове

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

размер

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

Фонови изображения

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

вещи

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

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

Не бъди скучен

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

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