Дизайн програмних значків

Уся система та програми дотримуються принципів дизайну Suru заснованого Canonical та Samuel Hewitt.

Філософія дизайну та значення Suru

  • Suru натякає на японську культуру.

  • Дизайн Suru натхненний оригамі.

  • Папір завдяки гнучкості та різноманіттю можна використовувати у двох- та тривимірних формах.

Suru надає точну та органічну структуру для інтерфейсу Ubuntu Touch. Чіткі лінії та різний рівень прозорості нагадують краї та текстуру паперу.

Дизайнерські поради для програмних значків

Зрозумілий дизайн

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

../../_images/03.png

Характерні форми

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

../../_images/041.png

Деталі

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

../../_images/051.png

Кольори

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

../../_images/06.png

Градієнти

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

../../_images/07.png

Композиція

Значки Suru складаються з простих геометричних фігур. Тло зазвичай виглядає, як кольорова поверхня з піктограмою з пласких фігур, яка «плаває» над поверхнею.

../../_images/081.png

Ефект згинання

Зберігаючи мотив оригамі, деякі значки Suru мають вигляд згину. У багатьох значків є одна горизонтальна або вертикальна лінія, але іноді лінія/лінії згину відповідає елементам піктограми.

Згин створюється накладанням фігури білого або чорного кольору з низькою щільністю (зазвичай між 1%~10%).

../../_images/09.png
../../_images/10.png

Сітки

Сітки/напрямні у макетах значків допоможуть Вам правильно розподілити тло значків та рівномірно використати місце навколо піктограми.

../../_images/11.png

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

Розмір сітки

Створення дизайну з сіткою напрямних має вирішальне значення для отримання чітких та чистих значків. Оскільки більшість значків мають кратний чотирьом розмір (16x16, 24x24, 32x32, 48x48, 256x256), використання у дизайні піксельної сітки кожні 4 пікселі — це кращий досвід (best practice).

Тіні

Часто значок Suru малюється з двома різними наборами тіней: один для створення ефекту тіні у піктограмі, а другий — під загальною формою значка.

Ефект тіні на центральній піктограмі є комбінацією двох тіней однакової з піктограмою форми:

  • форма rgba(0,0,0,0.1) з вертикальним зсувом у 2 пікселі та розмиттям на 1%

  • форма rgba(0,0,0,0.4) з вертикальним зсувом у 4 пікселі та розмиттям на 10%

../../_images/12.png

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

Підсвічування

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

../../_images/13.png

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

Сітки та інші ресурси можна знайти у цьому репозиторії gitlab.