x
 
Макс Фостер
1 октября 2012

Расскажите, как вы делаете такие «вкусные» кнопки?



Макс!

На ваш вопрос есть два ответа.

Первый состоит из технических знаний о блике, рефлексе, окантовке и тени, матовости и глянце. О том, что жёлтый всегда светленький, а зелёный обязательно тёмный. Что только главная кнопка бывает цветной, но даже самая минималистичная кнопка чуть-чуть скруглена, объёмна и кликабельна по Фиттсу. Как попасть в пиксели контуром и надписью. Как сделать тонко и сдержанно. Этот ответ включает разбор кнопки по слоям и эффектам в Фотошопе.

И, конечно же, обязательно изучить исходник айфоновских элементов Тихана и Лакса — ребята умудряются сделать любую кнопку в векторе одним слоем.

Второй ответ — о том, как мы на самом деле их делаем. Любым нашим «скином» занимаются двое — ведущий дизайнер и иллюстратор. Мы берём талантливого, но как обычно слегка рассеянного художника, и следим, чтобы он учёл всё, о чём написано в начале.

И я думаю, это всегда будет так: ведь как только дизайнер научится и рисовать, и за всем следить, ему пора перестать рисовать и начать руководить дизайном или учить дизайнеров.

Кстати, не всем бюрошникам удаётся руководить, и это нестрашно. Но учиться учить обязаны все.

Поделиться
Отправить

Комментарии


1 октября 2012

Много классных кнопок можно найти в «Доме кнопок»: http://houseofbuttons.tumblr.com/

Александр Колодько́
1 октября 2012

На хабре есть перевод неплохого поста о кнопках:
http://habrahabr.ru/post/138828

Ростислав Чебыкин
1 октября 2012

Я бы ещё поднял вопрос о том, нужны ли такие кнопки.

Рискую вызвать на себя залп из всех орудий, но выскажу предположение, что в целом — не нужны.

Я полностью согласен с тем, что важные кнопки в веб‑интерфейсе должны быть крупными, заметными и привлекательными. Но мне не очевидно, что они при этом должны быть похожи на физические кнопки в реальном мире — со всеми этими тенями, рефлексами, выпуклостями и впуклостями.

Если посмотреть на историю развития бытовой техники, то на начальном этапе развития большинство новых устройств были похожи на какие‑то другие, хорошо известные предметы. Первые радиоприёмники использовали метафору мебели, первые телефонные аппараты напоминали каминные часы, бра и художественные статуэтки, и так далее. (См. Адриан Форти. Объекты желания: http://www.artlebedev.ru/everything/izdal/objects-of-desire/) Однако со временем радиоприёмники стали похожи на радиоприёмники, телефоны — на телефоны, автомобили — на автомобили.

По моим наблюдениям, экранные интерфейсы постепенно двигаются в ту же сторону. Они всё меньше похожи на реальные физические панели управления и всё больше — собственно, на экранные интерфейсы. Новый интерфейс Windows 8, как мне кажется,— большой и хороший шаг в этом направлении.

Александр Дебкалюк
2 октября 2012

Встречный вопрос — как это всё увязывается с ограничениями ХТМЛ/ЦСС?

Павел Супрунюк
6 октября 2012

Ростислав, вы хоть раз в жизни в приборах встречали кнопку, похожую на одну из показанных выше? Цветную, полупрозрачную, парящую над поверхностью, с круглыми сторонами, с заострённым концом? Я нет.

Кнопки уже не похожи на реальные объекты, а всего лишь используют объём, чтобы было понятно, что это кнопка и её можно утопить — т. е. нажать.

К Метро люди привыкнут со временем. Но я бы не хотел, чтобы все сайты были столь минималистичными. Всё же, элементы, похожие на реальные, делают интерфейс человечнее.

Артём Черепанов
17 октября 2012

Не стоит забывать, что концепция Метро родилась не сама по себе. Она так или иначе впитала в себя особенности окружающего мира. А именно минимализм и чистоту информационного дизайна в общественных местах — аэропортах, вокзалах, улицах, метро (конечно, далеко не во всех местах :-) Табличка, пиктограмма или указатель направления, и главный идентификатор — текст. В свою очередь, такая навигация тоже не просто так появилась, так что здравомысленная преемственность двигает прогресс. Если того требует задача (маркетинговая цель или задачи пользователя), то кнопка может быть малиново-синей с имитацией стекла или пластиковой поверхности, или же прямоугольной плашкой с лейблом, набранным HelveticaNeue Thin, и минималистичной пиктограммой.

Хотя да, есть заметное стремление к своеобразности у экранных интерфейсов не только Виндоус 8, но и нового Андроида, например.


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

Что делать, если верстальщики отдают кривую вёрстку, как дизайнеру тренироваться в эстетике, в каком направлении дизайна развиваться в 16 лет Собирается ли бюро в офлайне? Вписал пункты «Запрещено курить в офисе» и «Запрещено пить спиртное» 3 Хочу организовать свою лабораторию, но не знаю, как найти подходящих людей




Недавно всплыло

Правдивость 4 Экран ожидания в поликлинике 6 Выбранные элементы списка, как не забывать принципы из советов бюро и когда нужен логотип 1 Все уже успели заметить, что вы почти во всех пятничных примерах советуете немного поунижаться 12