Съвети за дизайн на бутони: прости, малки и изключително важни
Говорим за подробности много в дизайна. Това е с добра причина. Обръщането на внимание дори на най-малките детайли може да направи или да наруши дизайн.
Днес ще се потопим по-дълбоко в една от тези подробности и ще разгледаме начините за проектиране на бутони, които потребителите искат да кликнат (или докоснат). Въпреки че бутоните може да са един от най-малките елементи във вашия дизайн, те са едни от най-важните. Как иначе бихте комуникирали действия с потребител? Как иначе биха предоставили информация в този цикъл за обратна връзка?
Помислете за момент върху едно от големите оплаквания за плоския дизайн в ранните етапи: Потребителите не знаеха какво е и кое не е интерактивно в дизайна. Следователно, значението на страхотния дизайн на бутони.
Разгледайте дизайнерските ресурси
Трябва да изглежда докосващо
Потребителите трябва да видят бутон в дизайна и да мислят, че трябва да - хм, искат - да протегнат ръка и да го докоснат. Въпреки че почти всеки бутон за размер може да се кликва на екрана, размерът и подплънките около бутон на устройство с докосване са жизненоважни.
Средният потребител има размер на пръста, който е между 8 и 10 милиметра. Имайки това предвид, целта от 10 на 10 милиметра е чудесен начален размер на целта за бутони на устройства с докосване. (Това е малко по-малко от стандартните клавиши на клавиатурата ви.)
Има няколко дизайнерски неща, които можете да направите, за да направите един елемент също да изглежда докоснат.
- Една фина сянка може да "повдигне" елемента от фона, за да се почувства малко по-близо до потребителя.
- Увеличената подплънка около бутоните ги прави по-лесни за щракване и помага да се насочи потребителят към елемента.
- Цветните действия със задържане или превключване могат да покажат на потребителите какво правят в реално време и да означават действие.
Цветни въпроси
Цветът на бутоните трябва да бъде специален в целия дизайн на уебсайта. Това е добро място да използвате определен цвят за акцент и да го използвате само за действия с бутони.
Цветът на бутоните трябва да е ярък и привлекателен. Има причина толкова много дизайни да включват жълти, сини или зелени бутони. Те се виждат лесно и се отличават от останалата част от дизайна. За бутон, който наистина се откроява, изберете цвят, който е допълваща двойка към основния цвят в дизайна (противоположности на цветното колело).
Другата грижа за цветовете е марката. Искате да изберете цвят на бутона, който работи с вашата цветова палитра и идентичност на марката. Колкото и да искате цвят на бутон да изпъква в дизайна, той трябва да работи с - не срещу - вашата основна цветова схема.
Размерът има значение още повече
Направете го голям!
Бутоните се нуждаят от някакъв подем, така че потребителите да бъдат привлечени веднага към екрана. Тенденцията на призрачните бутони - очертава без отчетлив цвят на бутона - фокусирана върху големи бутони по отношение на броя на пикселите, но липсваща визуална тежест. По отношение на размера един бутон трябва да е голям и в двете. (Това е една от причините тенденцията да излезе от мода.)
Има обаче сложно място, когато бутонът преминава от идеално оразмерен до неудобно оразмерен. Точно кога това се случва, зависи от мащаба на другите дизайнерски елементи, но вие ще знаете със сигурност кога се случва. Ако бутонът е всичко, което виждате в дизайна, шансовете са, че е твърде голям.
Разположението е ключово
Къде в дизайна трябва да отиде бутонът? Има ли местоположение, което ще помогне да генерирате кликвания повече от други?
В повечето случаи бутоните трябва да следват съдържанието, което са предназначени да допълват.
- В края на формуляр
- Вдясно от съобщение за повикване до действие
- В долната част на страницата или екрана
- Центрирано под съобщение
Защо тези разположения? Защото следва естествения път на действие и начина, по който потребителите четат и взаимодействат с уебсайтове.
Съсредоточете се върху контраста
При всички дизайнерски елементи контрастът е важно съображение. Това е вярно за техниките, използвани в самия елемент, но и за връзката между елемента и неговото поставяне в дизайна и онова обкръжение.
Не забравяйте да помислите за следните техники в тази двойна среда:
- цвят
- Тип тегло и размер
- Размер на елементите
- Форма, тъй като се отнася до фона
- Прозрачност или анимация
- Сенки или грейдъри
- Бяло пространство и подплънки
Използвайте стандартни форми
Що се отнася до бутоните, има само две форми, които трябва да имате предвид:
- Кръгове. Кръглият бутон стана популярен благодарение на концепциите Material Design и Material Lite. С всяка подобна естетика, кръгъл бутон работи с дизайна и отговаря на модела на потребителя.
- Правоъгълници. Тази форма по подразбиране трябва да бъде вашето преминаване към всички бутони, освен ако не използвате кръг в горния екземпляр. Това е това, което потребителите знаят и са свикнали. Повечето правоъгълници на бутоните обикновено са най-малко два пъти по-големи от високите (понякога три или четири пъти по-широки). Потребителите виждат тази форма и веднага знаят какво да правят. Докато някои могат да аргументират предимствата на заоблените ъгли спрямо ъглите на 90 градуса, всеки от тях е еднакво подходящ въз основа на вашия стил на дизайн.
Кажете на потребителите какво да правят
Всеки бутон трябва да включва текстова инструкция, която казва на потребителите какво точно ще направи. Искате да поддържате езика кратък и прост и той трябва да съответства на тона на останалата част от дизайна на уебсайта.
След това изпълнете това обещание. Следващото нещо, което се появява, трябва да съобщи на потребителя, че са пристигнали до очакваната дестинация. Независимо дали изпраща формуляр, извършва покупка или просто преминава към друга връзка, потребителят трябва да получи желания резултат от взаимодействие с бутона. (Ако не, уверете се, че има грешка, посочена в цикъла за обратна връзка за вас, така че да знаете какви корекции трябва да се случат в дизайна на уебсайта.)
Примерите за съобщения с бутони включват:
- Натисни тук
- Създайте акаунт сега
- Опитайте го безплатно
- Добави в кошницата
- Прочетете още
Придайте на бутоните високо визуално значение
Повечето дизайни са изпълнени с малки UI елементи. Един капан, който се случва, е дизайнът на тези елементи да бъде изтласкан, докато проектът е близо до завършване. И тогава избирате един дизайн за всички елементи на потребителския интерфейс, с няколко малки разлики.
Не се забивайте в тази опасна ситуация.
В дизайна бутоните трябва да изглеждат като само бутони! Нищо друго в дизайна не трябва да има същата форма, цвят и визуално тегло като бутон. Те трябва да са различни. Помислете за създаването на стил за бутони, който е по-голям от всеки друг подобен елемент в дизайна или използвайте акцентен цвят, който е само за бутони. Тези техники могат да помогнат да направите бутон да изглежда специален и да подчертаете неговата употреба.
заключение
Започвате да преосмисляте някои от изборите си за дизайн на бутони? Мислите ли, че можете да създадете нещо, което по-добре да насърчава кликванията?
Опитайте някои от тези съвети, като внимавате за анализа на уебсайта си, за да видите точно какъв дизайн променя вашата потребителска база. Използвайте тази информация, за да ви помогне да създадете още повече бутони за кликване за бъдещи проекти.
