Стильні чисті кнопки плоского дизайну, щоб вони демонстрували привабливість та виглядали «добре розробленими»

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

Ось як вони виглядають зараз, після відгуків UXStackExchange. Я видалив чорну облямівку, додав 3px "тінь" та видалив скошування 1px:

Я збираюсь виглядати плоский дизайн.

У мене є три питання:

• Чи показують ці кнопки достатню доступність? (Схоже, це проблема з плоским дизайном)
• Ви б запропонували додати невеликий градієнт?
• Вони виглядають добре розробленими? (суб'єктивно я знаю, але я не можу придумати кращого способу запитати це)

Я з радістю вітаю (і, можливо, використовую) будь-який відгук про ці кнопки.

Думаю, дуже тонкий градієнт, безумовно, покращить естетику кнопок. Оскільки стиль "Metro" для Windows 8 є великим прихильником цього стилю, я використаю це як приклад:

На перший погляд "плитки" виглядають так, як вони плоского кольору, але якщо придивитися, то дуже незначний градієнт йде ліворуч праворуч. На деяких це помітніше, ніж на інших, але всі вони мають це. Як сказала Ісела, ви хочете, щоб цей градієнт був ледь помітний, майже підсвідомий.

Як ви вже згадували, при проектуванні плоских кнопок потрібно стежити за парою речей. Перша істота, я б сказав: Чи схожа вона на кнопку?

Це не обов'язково щось, що залежить лише від кнопки, але від решти елементів вашого інтерфейсу. Якщо ви використовуєте плоскі кнопки, я пропоную вам уникати подібних форм / стилів скрізь. Вам потрібно підтримувати візуальний словниковий запас, щоб люди могли миттєво розпізнавати ці елементи як кнопки, а не щось інше.

Тіні для цього хороші, адже вони створюють враження об’єму. Тому їх легше бачити. Плюс до цього ми звикли до кнопок із таким ефектом. Однак я б подумав використовувати колір, подібний до кольору кнопки. Наприклад, замість чорної кнопки використовуйте чорну, використовуйте червону з непрозорістю 50%. Ще один варіант зробити кнопочки більш очевидними - додати значок (білий, суцільний).

Буду дуже обережним з градієнтами . Не тому, що вони погані, а тому, що в нинішньому надто простому плоскому тренді вони не так добре підходять. Особливо, якщо кольори або відтінки, які ви використовуєте, сильно відрізняються. Невеликий градієнт може виглядати дуже красиво, але він повинен бути крихітним, ледь помітним.

Словом, мені подобається те, як вони виглядають. Я б лише змінив колір тіні на щось світліше, і, можливо, зробить текст переднього плану світлішим, напевно, білим. Шрифт приємний, і ви використовуєте гарну підкладку, так приємна робота! Я бачу, що ви використовуєте їх на сайті, але під ними у вас є набір повідомлень у пастельних тонах, які насправді виглядають трохи схожими. Я б переглянув їхній стиль, оскільки вони можуть бути дещо заплутаними, і я б спробував використовувати однакові кольори на всьому сайті (всі пастелі чи всі контрасти).

Хоча я можу поважати створення таких мінімальних кнопок, вам дійсно потрібно врахувати, чи / як їх можна застосовувати в Інтернеті на різних веб-сайтах, коли ви створюєте рамки. Якщо ви надаєте кнопки, вам потрібно обов’язково вказати майже все, що хтось може використовувати, як таблиці, форми тощо (на що я впевнений, що ви все ще працюєте).

Погляньте на Bootstrap, якщо ви ще цього не зробили. Bootstrap - це дивовижно проста і чиста CSS-рамка, яку можна легко адаптувати або інтегрувати в інший веб-сайт і може дати вам кілька ідей.

Тепер, що стосується цих фактичних кнопок, я б грав із рамкою, оскільки це допомагає інкапсулювати компонент, а рамка є загальною для багатьох кнопок. Я перевірив веб-сайт, і мені подобається наведення / натискання штатів, і я думаю, що ви добре вчинили з ними.

Якщо ви хочете ввести градієнти, будьте послідовними і обов'язково використовуйте їх і для інших елементів, інакше у вас будуть конкуруючі глибини, які просто будуть відволікати.

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