Стилизуйте чистые плоские кнопки, чтобы они выглядели экономно и выглядели «хорошо продуманными»

Недавно я запустил крошечный CSS-фреймворк. ( http://mincss.com, если кому-то интересно) Я быстро разработал первоначальный дизайн для некоторых кнопок. После запроса отзывов о UX StackExchange (и получения множества хороших отзывов) мне было рекомендовано прийти сюда за дополнительными советами по их улучшению.

Вот как они выглядят прямо сейчас, после отзывов UXStackExchange. Я удалил черную рамку, добавил «тень» на 3 пикселя и удалил скос на 1 пиксель:

Я собираюсь выглядеть плоско.

У меня есть 3 оставшихся вопроса:

• Эти кнопки показывают достаточную стоимость? (Это похоже на проблему с плоским дизайном)
• Вы бы предложили добавить небольшой градиент?
• Они выглядят хорошо продуманными? (субъективно я знаю, но я не могу придумать лучшего способа спросить это)

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

Я думаю, что очень тонкий градиент определенно улучшит эстетику кнопок. Поскольку стиль Windows 8 "Metro" является большим сторонником этого стиля, я буду использовать его в качестве примера:

На первый взгляд «плитки» выглядят так, как будто они плоского цвета, но если вы присмотритесь, то слева направо будет очень слабый градиент. На некоторых это заметнее, чем на других, но у всех это есть. Как сказала Йисела, вы хотите, чтобы этот градиент был едва заметным, почти подсознательным.

Как вы уже упоминали, при разработке плоских кнопок вам нужно следить за несколькими вещами. Во-первых, я бы сказал: это похоже на кнопку?

Это не обязательно то, что зависит только от кнопки, но от остальных элементов вашего пользовательского интерфейса. Если вы используете плоские кнопки, я бы посоветовал вам избегать подобных форм / стилей повсюду. Вам необходимо поддерживать визуальный словарь, чтобы люди могли мгновенно распознавать эти элементы как кнопки, а не что-то еще.

Тени хороши для этого, потому что они создают впечатление объема. Поэтому их легче увидеть. Кроме того, мы привыкли к кнопкам с таким эффектом. Однако я хотел бы рассмотреть возможность использования цвета, который похож на цвет кнопки. Например, вместо того, чтобы использовать черный для красной кнопки, используйте красный с непрозрачностью 50%. Другой вариант сделать кнопки более наглядными - добавить значок (белый, сплошной).

Я был бы очень осторожен с градиентами . Не потому, что они плохие, а потому, что в нынешнем суперпростом плоском тренде они не очень хорошо подходят. Особенно, если цвета или оттенки, которые вы используете, очень разные. Маленький градиент может выглядеть очень красиво, но он должен быть крошечным, едва заметным.

Короче, мне нравится, как они выглядят. Я бы только изменил цвет тени на что-то более светлое и, возможно, сделал бы текст на переднем плане более светлым, возможно, белым. Хороший шрифт, и вы используете хороший отступ, так что хорошая работа! Я вижу, вы используете их на сайте, но под ними у вас есть набор уведомлений в пастельных тонах, которые на самом деле выглядят немного похожими. Я бы пересмотрел их стиль, поскольку они могут быть немного запутанными, и я бы попытался использовать одни и те же цвета по всему сайту (все пастельные или все контрастные).

Хотя я могу уважать создание таких минимальных кнопок, вам действительно нужно подумать, можно ли / как их применять в Интернете на разных веб-сайтах, поскольку вы создаете фреймворк. Если вы предоставляете кнопки, вы должны быть уверены, что предоставили почти все остальное, что кто-то может использовать, например, таблицы, формы и т. Д. (Я уверен, что вы все еще работаете).

Взгляните на Bootstrap, если вы еще этого не сделали. Bootstrap - это удивительно простой и чистый CSS-фреймворк, который может быть легко адаптирован или интегрирован в другой веб-сайт и может дать вам некоторые идеи.

Теперь, когда речь идет об этих реальных кнопках, я бы поиграл с границей, так как это помогает инкапсулировать компонент, и граница довольно распространена для многих кнопок. Я проверил сайт, и мне нравятся состояния наведения / нажатия, и я думаю, что вы справились с ними.

Если вы хотите ввести градиенты, будьте последовательны и убедитесь, что вы используете их и для других элементов, иначе у вас будут конкурирующие глубины, которые будут просто отвлекать.

Кнопки выглядят хорошо, однако вид кнопок, которые показывают доступность и ощущение в общем плоском стиле, - это то место, где теневая часть помещается в виде небольшой полосы в нижней части основного элемента (кнопки) и в основном более темного оттенка. цвет кнопки.