сетка для иконки приложения
Сетки и тимплейты для облегчения работы в Sketch
Сетки для создания иконок
Material Design icon grid template
Типлейт для создания иконки мобильного приложения Android на основе Material Design.
OS X Icon Grid
Это очень удобная и простая в использовании сетка для создания ios иконок мобильных приложений. Это версия для Sketch всем известной сетки от Nick Keppol’s, которая была только для Photoshop.
Автор версии для Sketch – Andy L.
iOS and WatchOS App Icon Template
Это Sketch шаблон IOS иконки приложения, которы я создавал сначала для себя. С тех пор я поделился тимплейтом с некоторыми людьми, чтобы получить обратную связь перед выпуском. Я хотел создать шаблон, который включает в себя все размеры иконок приложения, поддерживающего Apple Watch.
Favicon Template для Sketch
Скачать и открыть с помощью Sketch, а затем сохраните как шаблон.
Сетки для Bootstrap
Bootstrap Grid Template от Jay Holtslander
Я не нашел ничего интересного из уже имеющихся сеток для разработки сайта на основе Bootstrap 3, поэтому я создал свой велосипед. Используйте этот тимплейт как основу для проекта на Bootstrap.
Bootstrap Grid Template от Bruno Müller
Шаблон макета для Sketch на основе сетки Bootstrap системы. Для получения более подробной информации о системе сетки, посетите официальный сайт: http://getbootstrap.com/css/#grid. Автор сетки – Bruno Müller
Размеры экранов: 320px, 750px, 970px, 1170px.
Bootstrap 3 Responsive Grid Template
Есть много полезных ресурсов для Sketch, но там я не нашел хорошей стандартной сетки Bootstrap, так что я создал свою, которая действительно хорошо работает.
Это всего лишь простой скетч файл, содержащий 4 различных артборда. Нет слоев. Сетки были сделаны с помощью родного инструмента для создания сеток (View> Show Layout) и некоторые дополнительные направляющие.
Как я думаю, сетка на 12 колонок для небольших устройств – это неудобно, я сделал для них 4 колонки. Это не 100% идеально … но это работает 🙂
Если у вас есть свое решение или вы знаете другие сетки или тимплейты, оставляйте в комментариях и я добавлю их в статью.
Полное (я надеюсь) руководство по созданию набора плоских иконок
Для ботанов, которые прочли мою статью по визуальному весу и оптическому выравниванию. Минимум слов, максимум картинок.
(Мы продолжаем переводить цикл статей по визуальному дизайну. Полную подборку советов можно найти в коллекции « Основы дизайна»)
1. Пользуйтесь оптической сеткой
Все иконки в интерфейсе, как правило, сводятся к шести базовым формам: вертикальный прямоугольник, диагональный прямоугольник, горизонтальный прямоугольник, квадрат, круг, треугольник. Если размыть картинку, получатся примерно одинаковые кляксы — значит, у всех фигур один и тот же визуальный вес.
Интересуетесь свежими статьями по дизайну? Вступайте в группу на Facebook.
Ищите системное погружение в тему? Загляните в блог для дизайнеров.
В зависимости от формы иконки, впишите ее в соответствующую рамку оптической сетки. К примеру, квадратные иконки более компактные, чем треугольные или вытянутые.
Чем компактнее иконка, тем меньше ей нужно места. А вот иконки с множеством острых углов и мелких деталей занимают больше места на артборде.
Не становитесь рабом собственной сетки. Она должна помогать, а не ограничивать. Если какие-то элементы торчат и иконка при этом выглядит круто — то пусть себе торчат!
2. Помните о пиксельной сетке
Чтобы иконки выглядели четко на экранах без ретины, пользуйтесь пиксельной сеткой. Для контурных иконок лучше использовать границы шириной в 2 пикселя. Если отцентровать такую границу относительно контура, силуэт получится достаточно толстым и четким.
Если использовать границу шириной в 1 пиксель, ее нужно выровнять либо по внутренней стороне, либо по внешней — но не по центру.
Если выровнять границу в 1 пиксель по центру контура, то иконка в 100% масштабе будет выглядеть размытой, хотя в приближении все выглядит достаточно четко.
Устанавливайте начальные и конечные точки диагоналей в соответствии с сеткой. Диагонали с углами 45°, 30° и 60° выглядят четче, чем диагонали в нестандартными углами (к примеру, 13.7° или 81°).
3. Придерживайтесь определенной детализации
При работе над набором иконок, лучше начинать с самой сложной. Она определит уровень детализации, от которого вы будете отталкиваться при создании остальных иконок — важно, чтобы у всех иконок в наборе был одинаковый визуальный вес.
Если не придерживаться этого правила, то более детальные иконки будут выглядеть тяжелее и перетягивать на себя внимание пользователей.
4. Следите за размерами промежутков
Расстояние между соседними элементами иконки не должно быть слишком маленьким либо “гулять”. Определите минимальный размер промежутков и придерживайтесь его, чтобы контуры не “слипались”.
Для контурных иконок, минимальный размер промежутка должен равняться толщине линии. Линии нужно либо явно отделить, либо аккуратно соединить — почти соединенных линий быть не должно.
5. Уберите повторяющиеся детали
В наборах иконок часто бывают повторяющиеся детали. Лучше их убрать, чтобы сделать упор не на сходства, а на различия иконок. Это как сокращение дробей. Чем меньше графического шума — тем проще понять суть.
Если целевой пользователь понимает, с чем он или она имеет дело, не нужно повторять это снова и снова. К примеру, в почтовом приложении не нужно постоянно использовать иконку письма.
То же касается и разных украшений — рамок, фонов и т.п.— вокруг иконки. Если они не помогают понять смысл иконки, то, считайте, мешают.
6. Выберите единый стиль и придерживайтесь его
Не нужно комбинировать фронтальные иконки и иконки с перспективой. Когда стиль согласован, пользователям проще распознавать иконки и судить об их значимости интерфейсе.
Тот же принцип применим, когда мы говорим о контурных иконках и иконках с заливкой. Если использовать и те, и другие в рамках одного набора, люди могут подумать, что они отличаются по важности или статусу. Хотя, возможно, вы специально так задумали? Тогда да, иконка с заливкой может обозначать, например, основное действие, а контурные иконки — все прочие действия.
Или еще вариант: иконки с заливкой можно использовать для наведенного состояния, а в обычном состоянии иконки пусть будут контурными. В этом случае нужно отрисовать каждую иконку в двух вариантах.
7. Используйте размеры, кратные двум
В большинстве интерфейсов используется 8-пиксельная сетка и 12-колоночный лейаут, поскольку они более гибкие, чем те, что построены на десятичных размерах. 12 можно разделить на 2,3,4 и 6. Поэтому 24-х и 48-пиксельные размеры иконок уже стали стандартом. Такие иконки при необходимости легко можно масштабировать.
8. Следите за точностью и чистотой силуэтов
Перфекционизм — не самоцель. Идеальные линии нужны не ради идеальных линий. Они нужны, чтобы финальная иконка выглядела профессионально и без искажений. Следите, чтобы не было лишних опорных точек и пробелов между смежными элементами.
Та же история с бесящими размерами: “8.999 px” или “100.001 px”. Если расставить опорные точки правильно, края иконки будут четкими. Если впоследствии вам придется объединять фигуры, у вас не будет лишних опорных точек и пробелов.
9. Очищайте SVG-файлы от мусора
Многие редакторы (например, Sketch) сохраняют SVG-файлы с артефактами — ненужными группами, цветовыми слоями и масками. Давайте посмотрим. В Sketch все выглядит хорошо:
Открываем SVG в другом редакторе (например, в Adobe Illustrator) и видим пустые слои, ненужные группы и даже маски. Из-за этих лишних штук может быть куча проблем — например, при создании шрифтовых иконок или при добавлении SVG на веб-страницу.
Весь этот мусор нужно удалить.
Вы увидите, что у SVG из Sketch ( picture.svg) и SVG, отредактированной в иллюстраторе ( picture_new.svg), будут разные превьюшки в файловом менеджере.
Если у вас есть идеи, о чем еще можно рассказать в этом руководстве, напишите мне. Давайте сделаем этот материал полнее. Если какое-то правило сломало у вас в дизайне что-то важное, его можно пропустить.
Если вам понравилась статья и перевод, дайте нам знать — нажмите 👏 (можно “хлопать” несколько раз!)
А если у вас есть на примете какая-нибудь классная статья по UX и не только — скиньте нам ссылку, и мы будем рады над ней поработать.
Мобильное приложение «Заметки о психике» | Mental Notes
Подкидывает идеи, как привлечь, удержать и направить внимание пользователя.
Mental notes — это колода из 53 карточек с описанием психофизиологических моделей поведения людей, которые лежат в основе принципов веб-дизайна. Они помогают дизайнерам, проектировщикам лучше понять поведение пользователей и найти эффективные решения при создании дизайна интерфейсов.
Видеокурсы и практика по дизайну интерактивных систем: ux/ui, веб-дизайн и бренд-дизайн
Вас ждет плотная проектная практика по анимации интерфейсов, дизайну сайтов, а также мобильных и веб-приложений. Под руководством наставников в стиле «смотри и повторяй»!
Breezzly — это среда для тренировки digital-навыков. Здесь вы встретите комплекты видеокурсов в актуальных инструментах интерактивного дизайна, среди них Figma, Principle и Invision Studio. А каждый проект — это живой кейс с историей, собранной по горячим следам!
Полное руководство по созданию набора плоских иконок
Слава Шестопалов написал беспрецедентно детальное руководство по созданию иконок — с минимумом слов и максимумом картинок.
1. Используйте оптическую сетку
Иконку обычно можно привести к одному из базовых форматов: горизонтальный прямоугольник, вертикальный прямоугольник, диагональный прямоугольник, круг, треугольник, квадрат. Размытие показывает, что у этих фигур одинаковый визуальный вес, потому что они превращаются в похожие по размеру пятна.
В зависимости от формы иконки, впишите её в соответствующую рамку сетки. Например, квадратные иконки более компактны, чем треугольные или вытянутые.
Чем компактнее иконка, тем меньше ей нужно пространства. Чем больше у неё острых углов или мелких деталей, тем больше ей нужно места.
Не становитесь рабом сетки. Она должна помогать, а не ограничивать. Если иконка выглядит лучше с выделяющимися элементами, сделайте так.
2. Помните о пиксельной сетке
Чтобы иконки выглядели отчетливо на всех экранах, придерживайтесь пиксельной сетки и отдавайте предпочтение границе в два пикселя, которая обеспечивает достаточно плотный и четкий силуэт.
Если вы выберете границы толщиной в один пиксель, они могут быть внутренними или внешними, но они не должны быть центрированными.
Центрированные границы толщиной в один пиксель делают иконку размытой в масштабе в 100%, хотя она и кажется четкой при приближении.
Устанавливайте начальные и конечные точки диагоналей в соответствии с пиксельной сеткой. Диагонали с углами в 45°, 30° и 60° выглядят четче, чем диагонали с углами вроде 13,7° и 81°.
3. Придерживайтесь определенного уровня детализации
Лучше начинать создавать набор иконок с самой сложной из них. Это определит уровень детализации и поможет добиться одинакового визуального веса.
Когда у иконок разный уровень детализации, самые детальные из них привлекут больше внимания пользователя и будут казаться визуально тяжелее.
4. Контролируйте минимальный размер промежутков
Расстояние между соседними элементами иконки не должно быть слишком маленьким или непостоянным. Определите минимальный промежуток и сохраняйте его везде, чтобы избежать “слипания” контуров.
Для линейных иконок минимальное расстояние лучше сохранять равным толщине линии. Линии должны быть либо разделены, либо соединены, но никогда не почти соединены.
5. Уберите повторяющиеся части
В наборе иконок у вас могут быть повторяющиеся детали. Избавьтесь от них, чтобы привлечь внимание пользователя к тому, что выделяется. Это как сокращение дроби в математике. Чем меньше шума, тем больше понимания.
Если пользователь уже понимает, с чем работает, не нужно повторять это снова и снова. Например, отсутствие иконок с конвертами не заставит людей думать, что это не почтовое приложение.
Это правило также относится к разным украшениям вокруг иконки. Если они не помогают читать иконку, они мешают.
6. Выберите определенный стиль и придерживайтесь его
Не нужно смешивать объемные изображения с фронтальными проекциями в одном наборе. Постоянство стиля поможет пользователям узнавать иконки и понимать, что они обладают одинаковой важностью.
Этот же принцип относится к линейным иконкам или иконкам с заливкой. Если вы будете их смешивать, люди могут подумать, что они обладают разной степенью важности или статусом. Если, конечно, вы этого не добиваетесь специально. Например, иконка с заливкой может обозначать основную команду, а линейные иконки — остальные команды.
Хорошо будет иметь два варианта каждой иконки в интерфейсах. Линейная иконка — для выключенного или обычного состояния, а иконка с заливкой — для состояния после нажатия.
7. Используйте двойную систему размеров
Восьмипиксельная сетка и сетка в 12 колонок используются во многих интерфейсах, так как они более гибкие по сравнению с размерами на основе десятых долей. 12 можно разделить на 2, 3, 4 и 6. Поэтому 24 или 48-пиксельные размеры иконок стали стандартом. Эти иконки можно масштабировать на больший размер при необходимости.
8. Сохраняйте силуэты чистыми и аккуратными
Перфекционизм — это не цель. Никому не нужны выверенные до пикселя линии. Но это важно для правильного отображения иконки в финальном продукте. Помните о минимальном количестве элементов формы и отсутствии пробелов между соседними элементами.
То же самое относится к раздражающим размерам в 8.999 px или 100,001 px. Если точки размещены верно, иконка выглядит четкой. При этом у вас не будет риска получить лишние точки и пробелы при слиянии формы.
9. Чистите SVG от мусора
Многие редакторы интерфейса вроде Sketch могут создавать SVG с ненужными артефактами: лишними группами, слоями цветов и обтравочными масками. Давайте посмотрим. В Sketch все выглядит хорошо.
Откроем этот SVG в другом редакторе. Вы заметите пустые слои, ненужные группы и иногда и обтравочные маски. Все эти вещи могут стать причиной проблем при использовании на веб-странице.
Сетки, принципы и правила создания интерфейсных иконок, iOS и Android
Если вы цифровой дизайнер, то уже наверняка сталкивались с сеткой иконок. Возможно, вам поручали создать иконку приложения для iOS или Android, или вы участвовали в работе над набором иконок интерфейса. Вероятно, вы, как и я, не знали, как ее использовать.
Хотя эти линии могут казаться загадочной чепухой, они служат определенной цели. Давайте рассмотрим их подробнее.
Обзор
Сетки иконок закладывают визуально основу для рисования. Они очерчивают размеры иконки, пиксельную сетку, лежащую в ее основе, и дополнительные ключевые линии, которым нужно следовать.
Сетка иконок – это инструмент, обеспечивающий скорость и последовательность процесса проектирования иконок. Когда один дизайнер рисует иконки, он хорошо знает правила, потому что сам их придумал. Но со временем он может их забыть. А в более крупных командах и при создании набора иконок сетка обеспечивает одинаковую отправную точку для нескольких дизайнеров.
Анатомия
Необходимые части сетки определяются контекстом – где иконки будут отображаться, какой будет маска и какие фигуры будут использоваться в качестве шаблонов.
К ее элементам могут относиться пиксельная сетка, ключевые фигуры, ортогонали, маска и безопасная область / область обрезки. Каждый из этих элементов обеспечивает контрольные точки для рисования. Как и в любом рецепте, создатель сетки сам выбирает, что использовать, а что пропустить.
К ее элементам могут относиться пиксельная сетка, ключевые фигуры, ортогонали, маска и безопасная область / область обрезки. Каждый из этих элементов обеспечивает контрольные точки для рисования. Как и в любом рецепте, создатель сетки сам выбирает, что использовать, а что пропустить.
Пиксельная сетка
Пиксельная сетка помогает рисовать с определенным шагом. Приращение в 1px долгое время считалось стандартом для цифровых технологий, а шаг в 0.5px пикселя стал применяться совсем недавно.
Иконка увеличения громкости из руководства Material плотно прилегает к сетке 24 x 24px с использованием штриха в 2px:
Привязка к пикселям помогает сделать иконки четкими на экранах с более низким разрешением, но стала менее востребованной по мере улучшения аппаратного рендеринга. Подробнее о привязке к пикселям – в будущей статье.
Ключевые фигуры (Keyshapes)
Ключевые фигуры предоставляют исходные формы шаблонов. Обычно используются четыре основных элемента: круг, квадрат, прямоугольник в портретной и ландшафтной ориентации.
IBM использует эти 4 ключевые фигуры для создания иконок воспроизведения, сохранения, удаления и HD:
Думайте о ключевых фигурах как о starter kit, обеспечивающем необходимый стандарт, оставляя при этом место для гибкости и творчества. Цель вовсе не в том, чтобы каждая иконка идеально соответствовала базовой форме.
Ортогонали
Ортогонали – заимствованы из перспективы рисунка – относятся к ключевым линиям, которые пересекают центральную точку иконки и создают дополнительные вершины для использования. Эти линии обычно разрезают холст под углом 90 ° и 45 °. Когда требуются дополнительные углы, следующим шагом будет увеличение 15 ° и 5 °.
Иконка выключения звука из руководства Material выравнивает косую черту под углом 45 °:
Маска
Маска кастомизирует контейнер иконки из квадратного холста, используемого по умолчанию. Маски могут быть встроены в сам актив или применены к нему впоследствии. Play Store применяет ко всем иконкам маску прямоугольника с закругленными углами:
Для иконок лаунчера (которые находятся на главном экране и в панели приложений) разные OEM-производители Android девайсов применяют различные маски к своим иконкам.
Безопасная область и область обрезки
Безопасная область (safe area) или активная область (live area) показывает, где должно располагаться важное содержимое значка, а область обрезки (trim area) – показывает область, которую следует избегать.
В некоторых случаях безопасная область – это всего лишь рекомендация, но в случаях, когда контент будет обрезан, необходимо строго следовать безопасной области.
Иконка Google Apps Device Policy соответствует области обрезки:
Примеры
Теперь, когда мы знакомы с компонентами сетки иконок, давайте подробнее рассмотрим их конструкцию и использование.
Сетка иконок iOS-приложений
Сетка иконок приложений Apple помогает создавать значки приложений, отображаемые в App Store и системе iOS. Она основана на пропорциях золотого сечения и вписанных фигурах, взяв за отправную точку длину одной стороны. Ее маска представляет собой адаптацию расчета суперэллипса или кривой Ламе.
Строение сетки иконок iOS-приложений
Круглые иконки приложений Apple, такие как Safari, Часы, Компас и Настройки, непосредственно следуют круговыми ключевыми линиями.
Не круглые иконки сложнее отследить, но, по-видимому, они используют комбинацию дальнейших расчетов золотого сечения:
Я считаю эту сетку очень приятной, но не самой интуитивно понятной в использовании. Неизвестно, какие дальнейшие расчеты или правила следует выполнять.
Сетки иконок Material Design
Основное различие между сетками iOS и Material – это добавление ключевых фигур в руководство Material. В шаблоне используются четыре основные фигуры – круг, квадрат, портретный и ландшафтный прямоугольник:
Ключевые фигуры Play Store
Gmail использует прямоугольник в ландшафтной ориентации:
В Google Apps Device Policy используется круг:
Google рекомендует несколько вариантов этой сетки, адаптированных к различным контекстам. Например, сетка иконок лаунчера имеет обширную область обрезки, позволяющую различным OEM-производителям Android девайсов применять свою собственную маску. Хотя пропорции меняются, эти сетки духовно одинаковы:
Вот структура системной сетки, используемой для создания иконок интерфейсов продукта:
Структура системной иконки Material
Примечание об основных параметрах
Обратите внимание, что основной размер холста для этой сетки иконок составляет 24 x 24px. Это означает, что иконки создаются с этим размером. Однако при использовании системных иконок Material их можно масштабировать до различных размеров:
В некоторых семействах иконок дизайнеры рисуют нестандартные альтернативные размеры для оптимизации производительности. Например, иконка компаса Nucleo изящно уменьшает детализацию для ясности и читабельности, когда иконка становится меньше:
Разный уровень детализации иконки компаса Nucleo при размере от 64px до 16px
Это сложный прием, ведь его применение ко множеству иконок потребует много времени. Чем больше нюансов, тем сложнее. Подумайте, нужно ли вам это.
Сетка иконок IBM
Сетка иконок IBM очень близка к Material, предлагая аналогичный набор ключевых фигур:
Ключевые фигуры IBM
В ее основе лежит холст размером 32 x 32px:
Структура сетки IBM
Вы видели это выше:
Иконки IBM icons поверх сетки (слева направо, сверху вниз): Воспроизведение, Сохранить, Удалить, HD, Пчела, Вырезать, Микроскоп и Глаз
Сетка иконок Phosphor
В прошлом году я и мой коллега выпустили Phosphor, семейство иконок, созданное для пользователей Android, чтобы они могли оформить домашний экран с минимальной эстетикой. Phosphor адаптирует сетку Material.
Структура сетки Phosphor
Для достижения визуального баланса ключевые фигуры иконки примерно основаны на расчетах ее площади. Мы используем круг, чтобы нарисовать иконки приложений Daylio и New York Times, квадрат для LinkedIn и калькулятора, прямоугольник в портретной ориентации для Google Docs и Microsoft Word, и прямоугольник в ландшафтной ориентации для иконок приложений AliExpress и NBC:
Ключевые фигуры и примеры иконок Phosphor
В некоторых случаях (второй ряд) мы используем форму напрямую, а в других (последний ряд) она просто служит общим руководством.
Важно отметить, что мы не сразу сформировали структуру сетки Phosphor. Со временем мы удалили части, которые не были полезными (например, дополнительные ортогонали), мы уточнили и выделили область обрезки, а также изменили ключевые линии по мере того, как правила нашего семейства иконок обретали форму.
Несколько вариантов сетки Phosphor
Сетка – это рекомендация
Как и любая сетка, сетки иконок предназначены для использования в качестве рекомендаций, а не жестких правил. Не используйте их, когда они перестанут быть полезными.
Оптический баланс
Всегда проверяйте оптический баланс. В приведенном ниже примере строгое следование ключевой фигуре круга не совсем правильно.
В контексте символ «G» кажется немного большим. Если немного уменьшить его масштаб, он будет выглядеть более сбалансированным.
Часто бывает необходимо отклониться от сетки для достижения визуального баланса. Следуйте тому, что выглядит оптически правильным, а не строгим метрическим значениям.
Чтобы узнать больше об оптических эффектах, прочтите эту прекрасно иллюстрированную статью Славы Шестопалова: «Оптические эффекты в пользовательских интерфейсах: иллюстрированное руководство».
Тестирование
Протестируйте свои иконки в контексте, чтобы проверить их согласованность и эффективность. Если вы создаете иконку приложения для iOS, как она будет отображаться вместе с другими иконками на главном экране? Внутри папки, внутри уведомления, в режиме просмотра настроек? В App Store? Для достижения максимальной точности тестируйте в собственном контексте, а не в инструментах проектирования.
Для Phosphor мы разработали строгую процедуру контроля качества, используя «тестовые листы», в которых каждая новая иконка помещается рядом с ее «братьями и сестрами» разных размеров и цветов. Предварительный просмотр выполняется непосредственно на устройствах Android, чтобы убедиться в ясности, удобочитаемости и соответствии стилистике.
Последовательность тестирования иконки Curiosity:
Сетки + Принципы + Правила
Сетки иконок обеспечивают удобный визуальный ориентир, но не содержат всех технических правил и принципов дизайна, которым должна соответствовать каждая иконка. Чтобы получить полную картину, совместите сетки иконок с документацией.
Лично для меня сетки иконок – скорее вспомогательный элемент, а принципы и правила важнее всего:
Примеры принципов из семейства иконок Phosphor:
Пример технических правил семейства иконок Phosphor:
Это руководящие принципы, которые развиваются по мере того, как мы узнаем, что работает, а что нет. Не возражайте против проведения итерации и соответствующим образом обновите свою документацию.
Вывод
Последовательное использование сетки иконок способствует достижению гармонии в семействе иконок и ускоряет процесс проектирования. Это довольно красивый артефакт, но убедитесь, что используемые инструменты и процессы приносят вам пользу. Со временем они могут устареть или использоваться неправильно – оцените, полезна ли ваша сетка, стоит ли отложить ее в сторону или пора внести изменения.
Иконки Phosphor сетки иконок Phosphor
Спецификации сетки иконок
Apple
🙏 Спасибо: Toby Fried, Monica Chang, Tate Chow и Christine Lee