Исследование. Кнопки
Раньше при создании программ для дексктопа я особенно не парился на счёт кнопок, так как использовал стандартные виндовые. В вебе кнопки могут быть какими угодно, поэтому надо разобраться с ними получше.
Постите всё, что знаете про кнопки. Какие они бывают? Как устроены? Какие где должны быть градиенты тени, рефлексы, бортики и т. д. и почему они должны быть? Как сделать красивую кнопку? Как сделать страшную кнопку? Почему на одни кнопки хочется нажать, а на другие - нет. На что влияет форма углов? Какие кнопки где надо использовать? В чем кнопки рисовать? Что писать на кнопках и как размещать текст?..
Постите примеры хороших и плохих кнопок. Постите свои кнопки и рассказы о них (почему вы сделали их такими и т. д.). Постите исходники, чтобы все могли покопаться и понять как это сделано.
Короче, постите всё.
Я начну.
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/
Постите всё, что знаете про кнопки. Какие они бывают? Как устроены? Какие где должны быть градиенты тени, рефлексы, бортики и т. д. и почему они должны быть? Как сделать красивую кнопку? Как сделать страшную кнопку? Почему на одни кнопки хочется нажать, а на другие - нет. На что влияет форма углов? Какие кнопки где надо использовать? В чем кнопки рисовать? Что писать на кнопках и как размещать текст?..
Постите примеры хороших и плохих кнопок. Постите свои кнопки и рассказы о них (почему вы сделали их такими и т. д.). Постите исходники, чтобы все могли покопаться и понять как это сделано.
Короче, постите всё.
Я начну.
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/