ksoftware (ksoftware) wrote,
ksoftware
ksoftware

Исследование. Кнопки

Раньше при создании программ для дексктопа я особенно не парился на счёт кнопок, так как использовал стандартные виндовые. В вебе кнопки могут быть какими угодно, поэтому надо разобраться с ними получше.

Постите всё, что знаете про кнопки. Какие они бывают? Как устроены? Какие где должны быть градиенты тени, рефлексы, бортики и т. д. и почему они должны быть? Как сделать красивую кнопку? Как сделать страшную кнопку? Почему на одни кнопки хочется нажать, а на другие — нет. На что влияет форма углов?  Какие кнопки где надо использовать? В чем кнопки рисовать? Что писать на кнопках и как размещать текст?..

Постите примеры хороших и плохих кнопок. Постите свои кнопки и рассказы о них (почему вы сделали их такими и т. д.). Постите исходники, чтобы все могли покопаться и понять как это сделано.

Короче, постите всё.


Я начну.
1. В Бюро я получил такое тайное знание про кнопки: слишком большие скругления создают ощущение плюшевости, а дизайн по умолчанию должен быть строгим, если не требуется обратного.

Поэтому-то, это уже мой личный вывод, кнопки из совета про редизайн автомата выглядят стрёмно:


2. Вот тут можно скачать исходники эппловских интерфейсов, которые содержат просто замечательные кнопки http://www.gavickmagazine.com/blog/item/103-free-high-quality-gui-psd-common-elements-for-designers.html

3. Еще на Курсе нам рассказали, что кнопки бывают трех видов.
Коммандные — про эти я всегда знал. Они выполняют какое-то действие, поэтому надпись на них обязательно должна отвечать на вопрос «Что сделать?». Поэтому правильно, «Найти», а не «Искать» или «Поиск».

Кнопки изменения статуса или отношения к объекту. Надпись должна отвечать на вопрос «Что это?». Примеры: «Это спам», «В работе», «Использовано».

Навигационные кнопки. Надпись отвечает на вопрос «Что?». Примеры:  «Настройка», «Шрифты», «Цвета»...

UPD:
Комментаторы добавляют:

---
Статья где подробно объясняется какими и почему должны быть кнопки. Есть примеры и исходники.


http://flyosity.com/tutorial/crafting-subtle-realistic-user-interfaces.php


---
В вебе системные кнопки бывают в пяти состояниях:
1. По умолчанию
2. При наведении
3. При нажатии
4. В фокусе
5. Выключенное

Когда вместо системной кнопки рисуют свою красивенькую, часто забывают о состоянии «В фокусе». Оно важно для тех, кто активно пользуется клавиатурой для навигации.

---
Про размеры кнопки — к Фиттсу: http://habrahabr.ru/blogs/ui_design_and_usability/31519/

---
Еще одно замечание от себя. Недавно мне показали, что на Амазоне появился новый гибрид кнопки и поля ввода.

http://www.amazon.com/Button-Uncanny-Stories-Richard-Matheson/dp/0765312573


А сегодня и на Эппле нашел такую:

http://store.apple.com/us

---
Кнопка-чекбокс с гугловской почты.

http://www.flickr.com/…/azaraskin/4886664008

http://habrahabr.ru/blogs/ui/102043/
Tags: Дизайн, Интерфейс, Исследование, Кнопки
Subscribe
  • Post a new comment

    Error

    Anonymous comments are disabled in this journal

    default userpic

    Your reply will be screened

    Your IP address will be recorded 

  • 36 comments