Кейси: розробка специфікацій і гайдлайнов (web ui kit)



Сьогодні я поділюся досвідом розробки графічної документації по гайдлайнам. Це виявилося моє друге завдання для Viline. І як Ви не пам'ятаєте з першої частини, я робив редизайн сторінки відео-курсу. У даній статті я опишу процес розробки стилістики всіх елементів і різних станів. Придумаю і сформулюю деякі правила, щоб інтерфейс вийшов збалансованим і доступним з урахуванням аудиторії…

В першій главі я забув згадати, що потрібно було діяти виходячи з затвердженої колірної схеми. Завдання придумати і запропонувати нові кольори не стояла. Для вибору кольору іноді використовую Adobe Color CC (потрібно (!) авторизація) або ColorScheme.ru. Вставляю код основного кольору, а далі підбираю до нього відтінки в різних режимах: аналоговий, монохромний, тріада і т. д. Дуже сильні і гармонійні контрасти можна підібрати, наприклад, в режимі тріади. Це я до того, що мені було звідки почерпнути гаму оптимальніше, але не було таких побажань.

До шрифту Open Sans, який використовувався в поточній версії сайту, у мене теж виникали питання. Здається, він все рідше зустрічається в повсякденному світі. Зараз актуальні: Helvetica, Lato, Source Sans Pro, Roboto тощо… Але це питання, виявляється, був у стадії переосмислення маркетологами.

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

Гайдлайны
Гайдлайны — це звід правил та/або рекомендацій для формування зовнішнього вигляду продукту. Їх формує дизайнер і в зрозумілому вигляді описує для розробників. З одного боку це вирок для першого, т. к. в майбутньому нові розділи продукту можна візуалізувати і без дизайнера, спираючись на графічний документ. З іншого боку, в наші дні додаток роботи дизайнера інтерфейсів такої документації вже — is a must, зараз планка знаходиться досить високо. Отже гайдлайны — це рекомендації по: кольорів, шрифтів, елементів, станів, иконографике, розмірами або вставкам.

Нагадаю, що основна аудиторія web-продукту в моєму випадку — молоді або майбутні мами. Мені потрібно дотримуватися: затверджених клієнтом квітів; шрифту, який він вважає оптимальним для своєї аудиторії; радіуса заокруглень кутів елементів. Останнє потрібно для того, щоб елементи в очах прекрасної статі не виглядали занадто «гострими» або «незграбними».

1/15: Шрифт Circe

Важлива новина від команди маркетологів на старті: йдемо від Open Sans і беремо в якості основного шрифт Circe.

Опис шрифтуCirce — геометричний гротеск з людським обличчям і численними приємними доповненнями. Гарнітура складається з 6 накреслень різної насиченості, від тонкого до сверхжирного. Своїм ім'ям шрифт зобов'язаний як геометричності форм і процесу створення, превращенному в масове розвага, так і своєрідному, кілька небезпечного характеру. У той час як базові форми Circe являють собою досить спокійний геометричний гротеск з деякими гуманістичними рисами, альтернативні форми і знаки з розчерками можуть повністю змінити характер шрифту. З одного боку, дизайнер може насолоджуватися небаченим до цього в кирилиці різноманітністю форм, але, з іншого боку, єдиним обмеженням для всього цього розмаїття служить тільки смак і здоровий глузд користувача, так що в якійсь мірі шрифт стає для нього небезпечним, як чаклунка Кірка для Одіссеєвих матросів. Сверхрасширенный підмножину Circe, що включає в себе як знаки для більшості європейських мов на основі латиниці і кирилиці, так і величезна кількість альтернативних варіантів і варіантів з розчерками, організований стилістичні сети, що дозволяють швидко, зручно і гнучко змінювати характер набору. Шрифт гарний як у досить дрібному текстовому наборі, так і у великих кеглях, наприклад, у журнальних заголовках, плакатах тощо Дизайнер — Олександра Королькова. Шрифт випущений компанією ПараТайп в 2011 році.

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

Окей, новий шрифт затверджено. Побажання по скруглению кутів від маркетологів: використовувати 6px радіус. Домовилися, врахую! (до речі, досить рідкісне у моїй практиці побажання). Можна починати опрацювання всіх елементів.

2/15: Кольори


Палітра в центрі — це надійшла схема від клієнта. Колірна схема зліва: я трохи освітлив зелений (він знадобиться нам для онховеров) і розмістив його поруч з білим. Так можна приблизно уявити як буде виглядати типова картка в дизайні. Відтінки справа — це приклад візуалізації зеленого поруч з контрастним чорним. Гострої необхідності в такому використанні не передбачалося, це скоріше зроблено для різноманітності. Загальний фон як сайту, так і даного ui kit'a залишається #EFEFEF (світло-сірий), це дозволить уникнути сильної контрастності на мобільних пристроях.

3/15: Типографіка


Це рекомендації по використанню розмірності тексту. Я відмалювати абзац тексту, впровадив у нього цитату. Зробив кілька типів заголовків. І додав звичайний та пронумерований списки. Приклад scroll bar'a теж тут, він був доданий пізніше. Насправді, дані правила тексту не обов'язково повинні бути жорсткими. Якщо потрібно нанести абзац тексту дрібним 14px шрифтом — так будь ласка. Головне — дотримуватися пропорційності тексту. Наприклад абзац тексту дрібним шрифтом виглядав дивно з великим заголовком «Зміст».

4/15: Посилання


Нічого нового і екстраординарного. Взагалі колір посилань досі викликає суперечки. Моя позиція така: якщо в дизайні використовуються сині або блакитні відтінки кольору для посилання, то можна обійтися без підкреслення. Якщо ж використовується собствнный колір, то особисто я завжди використовую підкреслений шрифт underline. Це щось на зразок неофіційного стандарту і користувач швидше розуміє, що цей текст кликабелен. Пізніше, до речі, колір посилань маркетологи замінили на помаранчевий. Я не заперечував, головне, щоб посилання залишилися підкресленими.

5/15: Кнопки


В даному розділі треба врахувати всі можливі стани кнопок і опрацювати їх. Я поділяю типи кнопок на основну «primary» і вторинну «secondary» (або як ще їх називають ghost button). За логікою основна кнопка веде до пріоритетного дії, а вторинна кнопка веде на екшн, який ми найменше хочемо від користувача. Знову дизайн-маніпуляція. Ось приклад такого використання:



Зараз теорії Google Material Design активно використовуються в дизайні, тому в наші дні багато кнопки знову стали виглядати як кнопки. До дизайну інтерфейсів стали застосовувати деяку фізику з реального світу. Кнопка в звичайному стані має невелику тінь; при наведенні миші тінь стає більше і більше розмита — кнопка «піднімається» вище; при кліці ця тінь зникає, імітуючи «нажатость» кнопки. Ось така псевдотрехмерность, яка трохи більше пов'язує дизайн з реальним світом. Наскільки я пам'ятаю, це прийшло з гайдлайнов додатків для smart tv, де користувачі сидять в певному діапазоні віддаленості від телевізора і там життєво важливо використання помітних тіней з великим коефіцієнтом розмиття. Це помітно полегшує сприйняття того, що відбувається.

6/15: Введення тексту
Якщо референсировать знову-таки на GMD, то можна помітити, що тенденція до використання таких инпутов:



Все частіше зустрічається і в web-продуктах. Якщо Ви віддаєте перевагу Android, розбираєтеся або працюєте в сфері IT, то з такими инпутами Ви як «риба у воді». Але для жіночої аудиторії, яка в основному віддає перевагу iPhone, така аскетична стилістика для елементів вводу тексту — швидше біль. Я спробував знайти золоту середину і запропонував дизайн, коли инпут все-таки залишається инпутом, але й має деякі коріння GMD:



Будь-яка форма введення знизу має тінь-підкреслення 1px без розмиття. При наведенні миші вона зеленіє; при кліці вона потовщується і зеленіє, демонструючи стан in action. Іконка олівця праворуч — це експериментальні спроби додати «зайвої зрозумілості». У деяких випадках ця іконка може посилювати зміст: звичайний инпут — олівець; пошуковий инпут — лупа; инпут введення пароля — іконка замку, наприклад, і так далі. Приклад буде ближче до кінця цієї статті.

7/15: Випадаючі списки


Їх принципи відгуку виконуються в тому ж ключі, що і инпуты. При наведенні миші змінюється колір іконки і нижнє підкреслення. При розвороті випадаючого списку з'являється більш об'ємна тінь все так само «піднімаючи» вище елемент в площині. Якщо підходити до справи з належною увагою, то варто подумати і про розгорнутому стані. Іконка перевертається, активна рядок виділяється bold'ом, а при onhover'e підкрашуемо фон світлим відтінком основного зеленого кольору.

8/15: Слайдери


З ними все гранично прозоро. Нічого нового тут не вигадую, стандартний компонент за аналогією оформляється у відповідності з гайдами: шрифти, кольори і розмірності. Повзунок можна перемістити як drag'ом миші, так і якшо в числове значення, наприклад, коли пропонується вказати вік дитини «від» і «до».

9/15: Таби / вкладки

"- Так все зрозуміло, далі давай!"

10/15: Елементи вибору


Тут я згрупував всі решта елементи: вибір станів (дод. фільтрація), перемикачі, чекбокси і radio buttons. Для двох останніх — це просто нагадування розробникам, що помітність вибірки підсилюємо інтенсивним шрифтом тексту. Ну а з рештою, мені здається все очевидно.

11/15: Таблиця


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

12/15: Іконографіка


Рекомендації та приклади використання іконок. Я вважаю, що інтенсивні і помітні іконки GMD поставили еволюцію иконографики в глухий кут. Коли-то були піксельні, потім опуклі, де-то між ними в тренд увійшли ios-івські обведені (outline), поруч ненадовго з'явився кольоровий flat-стиль (пам'ятаєте, коли нескінченна псевдо-тінь тяглася під кутом від об'єкта?). А потім прийшов Google і заявив як треба робити. І якщо не йти глибоко в лірику, то я використовую тільки іконки GMD останнім часом за свою багатофункціональність і продуктивність. Багато метафор від незалежних дизайнерів іконок можете брати тут (free, віддають всі розміри, png/svg/zip, hint: зручно клікнути правою кнопкою миші і завантажити потрібний розмір). Вважаю, що інтенсивні іконки більш зрозумілі і помітні (і тут повинен бути референс на знаки ПДР).

13/15: Картки


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

Але я завжди нагадую, що переборщувати з ними в дизайні небажано. Краще всього їх зміст зрозумілий в сукупності зі специфікаціями:



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

14/15: Вхід в систему


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

15/15: Специфікації


Вони знаходяться в окремій групі в исходнике. Групу можна зробити видимою і спексы отрисуются. Без них цей user interface kit був би неповноцінним. Дотримання пропорцій розмірності і відступів веде до збалансованого інтерфейсу. Якщо я не дам інструкцій на цей рахунок, то з'являється ризик, що це буде зроблено інакше. І тоді я не зможу гарантувати якісну реалізацію.

Якщо Ви віддаєте перевагу 8px сітку, то варто враховувати, що всі відступи кратні 8; якщо використовуєте 10px сітку, як у моєму випадку, то Ви не знайдете в цьому дизайні відстаней між елементами в 13 або 27px, всі відступи будуть кратні 10-ти.

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

Висновок глави
  • Графічна документація по гайдлайнам — це візуальна мова для розробників, щоб продовжувати розвиток продукту і не залучати дизайнера зайвий раз.
  • Набір гайдлайнов може розроблятися з урахуванням цілей майбутнього продукту. Шрифти, кольори і загальна стилістика можуть враховувати специфіку майбутніх користувачів ресурсу/додатки.
  • Для оптимізації взаємодії гайдлайны повинні містити рекомендації щодо величинами елементів і або вставкам.
  • Бажано, але не обов'язково, щоб набір також включав в себе приклади готових рішень. Це може бути кошик покупця, сторінка товару, френдлента, картки, лендінгем і т. п.
  • Сучасний підхід — це повертати клієнту не sketch/psd файл, а віддавати html/css код. Я деякий час назад повністю перейшов у Axure, і він справляється з цим завданням досить ефективно.
Як доповнення пропоную подивитися, як подібні завдання вирішують інші колеги по цеху. Добре, коли є з кого брати приклади:

  1. Jan Losert дуже крутий, його UI overview для Tapdaq просто ідеальний
  2. Mateusz Dembek хоч і мельчит небагато, але все одно класно оформив Deskmetrics Ui Style Guide
  3. Greg Dlubacz взяв і зробив сильну dark-виворотку елементами dashboard | і оформив в світлій гаммі Retail Banking Service
  4. Cupi Wong не так широко, але стильно оформив гайди AfterShip
  5. Jeremy Sallée все дуже докладно описує про дизайні Nutanix Product Guideline
Вибачаюся, що не вийшло вкластися у дві глави. Якщо зазирнути вперед, то виконаних для Viline тасков раптово виявилося багато. В наступному розділі я «натягну» ці гайдлайны на сторінку курсів з першої частини, а також розповім про редизайн розділу «Консультації» — важливою середовищі взаємодії молодих мам і експертів Viline, оперативно відповідають безкоштовно на їх запитання. ↑ До нових зустрічей…
Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.