Оптимізуємо свої трудовитрати при розробці програми в Google Material Design


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

Отже, перед нами стоїть завдання: спираючись на готові рішення у відкритому доступі, максимально оптимізувати витрачений труд на розробку програми в стилі Google Material Design.

Стадія раз: прототипування
Воно потрібно, як мінімум, для подання обсягів програми і складу екранів. Дуже допомагає в продумуванні tap/click шляхів переходи між екранами). Я віддаю перевагу Axure, т. к. багато hot-keys зроблені 1 в 1 як в Adobe Photoshop (про інші схожі продукти читайте в інших статтях (у розділі «Дизайн», кожен третій пост на цю тему).

У нього потрібно встановити три бібліотеки:

Android_MaterialDesignV1.1 (Я. диск)

Досить потужна бібліотека, яка дозволить скласти прототип по всьому гайдлайнам GMD. Особливість: багато елементів вже «наведено в дії». Наприклад pull to refresh працює відразу в скомпільованому html. Я думаю більше підійде тим, хто хоче в прототипі вже «поклікати».


material-design-8 (Я. диск)

Більш легка і проста бібліотека. Мінімум готових компонентів, але все основне є: чорна і світла теми, списки, картки, кнопки, таби, діалоги, слайдери і т. п… Віддаю їй перевагу, так як чим менше вибору, тим швидше знаходиться потрібний елемент і перетягивется в прототип.


google-material-design-icons (Я. диск)

~750 векторних іконок від Google. Звичайно можна використовувати і дефолтний для Axure: Font awersome. Однак, реальні іконки додадуть реальності прототипу.


Стадія два: дизайн
Як я згадав вище, я віддаю перевагу графічним пакетам Adobe. Значить потрібно звернутися до дизайнерського ком'юніті. Варто пошукати энтузиазтов, які вже зібрали GMD UI kit, в якому елементи розставлені і виглядають у відповідності зі специфікацією гугла. Відступи, шрифти, розміри і т. п. З безкоштовних мені сподобалося два:

sepia_ui_kit (Я. диск 142mb)


Є все необхідне, але мало кастомних ідей. Тим не менш, промальовано всі екрани 1 в 1, які сам Гугл використовував у своїй офіційній документації по GMD. Мінус тільки в тому, що довго шукати по теки потрібний елемент у власному окремому исходнике.

Cooking (Я. диск 434mb)


Цей ui kit навпаки надмірно багатий кастомних ідеями. Але автори трохи перегнули планку. Явний педант у цьому исходнике помітить, що як мінімум інтенсивність шрифту подекуди не збігається з документацією. Є трохи графіків, фривольних кнопок. Допоможе «зкреативити» власний елемент, але залишитися в стилі.
Суперская навігація: з первью є посилання в окремий ісходник по кожному екрану. Досить зробити подвійний клік. Просто чудово!

Стадія три: розробка
Ваш безвідповідальний дизайнер не хоче віддавати всі іконки окремими файлами строго по специфікаціях? Я Вас дуже розумію. Ідіть на materialdesignicons.com і спокійно скачивайте або SVG з потрібною іконкою, або повноцінний zip-архів з png під всі дозволи смартфонів. Можна знайти і не тільки сети гугловських рідних іконок. В базі багато кастомних піктограм, виконаних членами дизайнерського співтовариства. Як кажуть «Це Безкоштовно, і це завжди буде Безкоштовно». Безпосередньо для девелоперів вдалося взагалі знайти свято готових рішень (github). Наприклад таких:


Або ось таких:


Повинно вистачити…

Радий, якщо Вам знадобився цей пост! Ну а якщо хочете, почитати як я проецировал GMD на десктопний продукт і які висновки зробив, то почнітьз першої частини (усього їх чотири).


Джерело: Хабрахабр

0 коментарів

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