Створюємо кнопки правильно. Принципи правильного створення кнопок для сайту

42

Від автора: сьогодні існують тисячі способів проектування і створення кнопок для сайту, і вам потрібно витратити зовсім небагато часу на перегляд робіт на dribbble, щоб отримати про них уявлення. Здебільшого вони абсолютно однакові, але випадково зустрічаються окремі приклади, в створення яких, це відчувається, вкладено трохи більше турботи і уваги.

Користуючись перевагами чудових властивостей нового CSS3, можна створювати диво елегантні та стильні кнопки без єдиного ознаки зображень і отримувати ідеально відповідні стилі для старих браузерів. Вам, може бути, подобається створювати кнопки для сайту, прямо в CSS або ви прагнете до свого переважного разметочному інструменту, але важливо ретельно обдумувати відповідність дизайну своїх кнопок і контексту.

Дуже легко і просто взяти наперед задані «інтерфейси PSD», які безкоштовно виклала якась щедра душа (і, безсумнівно, містять кнопки, навіяні духом Apple’а). Але чому не витратити хвилину на роздуми, чи підходить згаданий стиль кнопок до контексту вашого задуму, і вирішити, чи можливо створити щось оригінальне?
Повторювати чиїсь кнопки зручно, так економиться час, але нешкідливо і витратити хвилину на більш детальне розуміння задуму і структури своїх (або чужих) кнопок. Створено їх дизайн? Підходять вони до інтерфейсу/контекстом/торгової марки? Є можливість створити щось унікальне? Достатньо виділяються мої кнопки? Чи потрібні мені основні, другорядні, третьорядні кнопки? Чи достатньо вони відрізняються один від одного? Симпатично виглядають?! (Чому ні, всі ми хочемо створювати класні штучки, правильно?!).

От десять простих і тонких прийомів, про які я завжди пам’ятаю, створюючи кнопки. Я не буду розмірковувати про те, як застосувати ефекти шарів в photoshop’е, а поділюся кількома простими, базовими принципами дизайну, які можуть принести велику користь при оптимізації дизайну ваших кнопок та іншого користувальницького інтерфейсу загалом.

1. Підгонка під бренд

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

Якщо в інтерфейсі переважно використовуються матові кольори, то, можливо, великі блискучі кнопки начебто Apple’івських – не вихід з положення. Якщо можете, скористайтесь нагодою і поекспериментуйте з розширенням бренду через інтерфейс, використавши відповідні форми, ефекти, колірне оформлення і інші прикраси.

2. Підгонка під контекстуальний стиль

В продовження вишенапісанного, зупиніться на хвилину перед тим, як відкрити «елементи користувальницького інтерфейсу PSD». Можна легко взяти градієнти, тіні, фаски і т. д., але приділіть хвилину роздумів над тим, чи вірно не просто зробити підбір до бренду, але і до інтерфейсу, у якому знаходяться кнопки, і слід їм викликати відчуття надмірної «кнопкости».

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

3. Переконайтеся, що кнопки досить контрастні

При такій великій кількості проектів, натхнених стилістикою Apple OS, особливо при безлічі елементів PSD в них, кнопки можуть губитися серед інших елементів, що застосовуються в інтерфейсі, послаблюючи свою потенційну силу. Спробуйте з допомогою кольору, розміру, білого простору або друкарської розмітки тексту гарантувати своїм кнопок візуальний вага, необхідний для виділення їх з іншого інтерфейсу.

4. Розгляньте закруглені або фігурні кнопки

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

5. Приберіть виділення другорядних елементів користувальницького інтерфейсу

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

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

6. Узгоджуються за кольором краю/кордону

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

7. Обережніше з розмитими тінями

Протягом багатьох років я завжди звертався до «закону тіні». «Закон тіні» свідчить, що падаючі тіні краще всього працюють, коли елемент світліше свого фону. Якщо елемент темніше фону, то тіні слід застосовувати дуже обережно. Як у випадку з відповідними за кольором караями і кордонами, я щиро вважаю це основним принципом дизайну, застосовним до всіх елементів користувальницького інтерфейсу.

8. Трохи іконографії внесе свій внесок в юзабіліті

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

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

9. Обміркуйте головні, другорядні і третьорядні стилі

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

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

10. Завжди робіть стану зворотного зв’язку

Насправді це не така вже головоломка, але іноді згадується ближче до закінчення процесу дизайну. Завжди опрацьовуйте ключові стану своїх кнопок, щоб гарантувати, що вони дають користувачеві в його контексті достатню зворотний зв’язок. У користувачів, швидше за все, є уявна модель того, як насправді працює кнопка, поки вони застосовують її в різних станах. Кілька простих прийомів CSS з тінями, кордонами і градієнтами і так далі, можуть забезпечити користувачеві просту зворотний зв’язок і щось приємне для ока!

Висновок статті створення кнопок для сайту

У вас, дизайнерів, стане відбуватися все по-своєму. Б’юся об заклад, що це буде тривалий час, протягом якого ви станете часто відсторонюватися від екрану, злегка схиляючи голову, мружачись і кажучи: «Да-а-а, так майже добре!». Звичайно, це – частина задоволення, одержуваного від процесу створення кнопок для веб-сайтів і талановиті дизайнери схиляються до того, щоб все робити саме так, але я думаю, що добре було б вимовляти невеликий уявний коментар, діалог і роздумувати над прийнятими дизайнерськими рішеннями.

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