Рекомендации Color Safe могут помочь вам выбрать сочетания цветов, которые имеют достаточный контраст [Кредитизображения:DanielSchwarz19[19] ]

(Автор изображения: Даниэль Шварц) [1945901]

Настройка палитры

С помощью выбранного вами инструмента дизайна пользовательского интерфейса создайте по одной довольно большой артборде (нажмите A) для каждого цвета (с именами «Бренд», «Нейтральный / светлый» и «Нейтральный / Темный»). Затем в каждом артборде создайте дополнительные меньшие прямоугольники, отображающие более темные и более светлые вариации цвета, а также сами другие цвета.

Мы бы посчитали немного светлее и темнее как 10% дополнительного белого и 10% дополнительного черный соответственно. Когда вы закончите, отобразите копию типографских стилей на каждом артборде. Цвет этих текстовых слоев должен быть нейтральным, за исключением артборда нейтрального света, где они должны быть нейтрально темными.

Контраст

Далее нам нужно проверить наши цвета для оптимального цветового контраста. Есть множество инструментов, которые могут сделать это, например плагин Stark для Sketch и Adobe XD или Contrast для macOS — однако онлайн-решение, такое как Contrast Checker или Color Contrast Checker, подойдет.

Проверьте цветовой контраст для каждой комбинации и настройте цвета соответственно. Если вы не уверены, какие цвета использовать, попробуйте воспользоваться рекомендациями Color Safe.

03. Ссылки и кнопки в стиле

Размер

Кнопки и ссылки, очень похожие на типографику, должны иметь несколько вариантов. В конце концов, не все действия имеют одинаковый уровень важности и, как мы обсуждали Ранее цвет — ненадежный способ общения, поэтому он не может быть основным методом воздействия на визуальную иерархию. Нам также нужно поиграть с размером.

Как правило, мы рекомендуем этот текст кнопки должен быть объявлен как 18px (такой же, как основной текст), но сами кнопки имеют три варианта размера:

• Normal: высота 44px (закругленные углы: 5px )
• Большой: 54px в высоту (закругленные углы: 10px)
• Очень большой: 64px в высоту (закругленные углы: 15px)

Это позволяет нам сделать некоторые кнопки более важными, не полагаясь на lour и также вкладывать кнопки (например, используйте кнопку внутри поля формы минимального вида).

Глубина

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

Интерактивность

Для каждого типа кнопки требуется указание состояния наведения Это разъясняет пользователю, что то, что он пытался сделать, совершенно нормально и гарантирует что они продолжают без задержки.

Это на самом деле один из более сложных аспектов поддержания визуальной согласованности, потому что цвет часто является предпочтительным стилем для изменения, когда речь идет о создании состояния. К счастью, эти изменения состояния могут быть относительно незаметными, поэтому можно изменить цвет на чуть более светлый или темный вариант — вот для чего они. Это относится и к ссылкам.

Принятие этого решения приведет к тому, что мы будем использовать цвет, который либо уже имеет существенное значение, что приводит к тому, что пользователи запутываются, либо решает выбрать другой цвет. Решить использовать вторичный цвет совершенно нормально, но его следует сохранить для визуальных элементов маркетинга, а не для элементов пользовательского интерфейса. Меньше значит больше (и проще).

Не забудьте повторить этот шаг для каждого артборда. Не включайте фирменные кнопки CTA на фирменный артборд — позже мы рассмотрим, что происходит, когда определенные комбинации не работают.

04. Создайте свои компоненты

Компоненты значительно экономят время, и все инструменты дизайна пользовательского интерфейса предлагают эту функцию (например, в Sketch, они называются символами). В Studio мы можем создавать компоненты с помощью выбрав все слои, которые должны составить компонент, и используя ⌘ K ярлык.

Использование компонентов

Теперь мы можем повторно использовать этот компонент, перетащив его на холст из Библиотеки> Документ на с левой стороны, хотя имейте в виду, что этот рабочий процесс может отличаться в зависимости от вашего инструмента пользовательского интерфейса.

Этот метод создания руководств по стилю (и в конечном итоге создание самого дизайна) особенно хорошо работает с модульными / карточными макетами хотя «общие области», такие как верхние и нижние колонтитулы и навигация, также являются отличными кандидатами для компонента.

Так же, как мы сделали с нашими типографскими стилями, цветами и кнопками, мы должны помнить, чтобы тщательно организовать наши компоненты .

Использование наших правил

Ранее мы делали замечание о том, что не следует использовать фирменные кнопки CTA поверх фирменного цвета, поскольку фирменные кнопки CTA, очевидно, должны выделяться. среди всего остального. Итак, как мы можем создать фирменный компонент, все еще имея возможность использовать фирменную кнопку CTA? В конце концов, если мы используем нейтральные темные кнопки, скажем, для навигационных кнопок или просто для менее важных кнопок, это просто не вариант, верно?

Верно. Так что это была бы идеальная возможность создать компонент, в частности, комбинацию заголовок + текст + кнопка. Мы создали нейтральный светлый «карточный» фон для использования фирменной кнопки. Точно так же поле формы нейтрального света (поля формы обычно белые из-за ментальной модели, исторически синонимичной с бумажными формами) не выглядит потрясающе на фоне нейтрального света, поэтому их можно использовать только на нейтральном темном фоне — напрямую или внутри нейтральный темный компонент. Вот как мы делаем наш дизайн гибким, соблюдая наши правила и поддерживая согласованность.

Стресс-тестирование

В идеале, самый быстрый и эффективный способ обеспечения надежности нашего дизайна это стресс-тест. Испытывать дизайн означает быть жестоким. Допустим, у нас есть навигация с количеством элементов навигации X, потому что это было требованием; чтобы действительно обеспечить гибкость, попробуйте изменить эти требования, добавив больше элементов навигации или, чтобы действительно добавить гаечный ключ в работу, попробуйте также добавить элемент навигации с более высокой визуальной иерархией, чем другие. Наши правила размера, типографии и цвета допускают что-то подобное? Или для того, чтобы предложить оптимальное удобство использования, нам нужно другое правило?

Имейте в виду, что есть разница между добавлением правил и изменением правил. Чем больше крайних случаев, тем меньше согласованность, поэтому в большинстве случаев для удобства лучше просто переосмыслить компонент.

05. Документирование и совместная работа

Как мы можем упростить использование наших файлов дизайна для себя и любых других дизайнеров, которые могут использовать наш файл дизайна? Давайте посмотрим.

Цвета

Первым шагом является сохранение всех цветов в образце «Цвета документа». I Если мы еще этого не сделали — это облегчит доступ к ним, когда нам потребуется применить их в нашем проекте. Для этого откройте виджет выбора цвета из Инспектора, выберите «Цвета документа» в раскрывающемся списке и нажмите значок +, чтобы добавить цвет к образцу. Это работает так же в большинстве инструментов пользовательского интерфейса.

Общие библиотеки

Далее нам нужно преобразовать наш документ — с типографскими стилями, цветами, кнопками, общими областями. и базовые компоненты — в общую библиотеку.

По сути, это означает, что каждый элемент должен быть компонентом, даже если он состоит только из одного слоя. Нажмите кнопку «+» на боковой панели «Библиотеки» слева, а затем импортируйте этот документ в новый документ. Правильно: наш документ теперь является библиотекой и готов к использованию для разработки пользовательских интерфейсов с гарантированной согласованностью.

InVision Studio несколько ограничен в том смысле, что он еще не синхронизируется с официальным инструментом InVision Design System Manager, но достаточно просто разместить библиотеку в Dropbox, чтобы другие дизайнеры могли со временем ее использовать и обновлять. Когда вносятся изменения (локально или удаленно), каждый файл Studio, который использует библиотеку (опять же, локально или удаленно), спросит, хотите ли вы обновить цвета и компоненты. Вот как библиотеки проектов поддерживаются в разных командах.

Дизайн в масштабе

По мере расширения дизайна управление им становится все труднее. Существуют различные корректировки, которые мы могли бы сделать, чтобы сделать его эффективным и обслуживаемым, тем более что DSM InVision еще не работает со Studio.

Например, мы могли бы использовать текстовые слои, чтобы аннотировать нашу библиотеку как средство объяснения вариантов использования различных элементов. Для типографских стилей мы могли бы даже отредактировать текст, чтобы он был более описательным (например, «

/ 1.3 / 44px»). Это говорит о том, что

s должны быть 44px и иметь высоту строки 1,3.

Design Handoff

Инструменты переноса дизайна отображают различные стили, используемые каждым элементом дизайна, чтобы разработчики могли создавать приложение или веб-сайт. Эти инструменты включают в себя обзор стилей, а также копию образца «цвета документа». Разработчики могут даже скопировать эти стили как код, что отлично, если вы решили создать какую-либо письменную проектную документацию и хотите включить фрагменты кода для представления компонентов.

Инструмент переноса дизайна InVision называется Inspect. и чтобы использовать все это, мы нажимаем кнопку / значок «Опубликовать в InVision» в InVision Studio, открываем полученный URL-адрес и затем нажимаем, чтобы переключиться в режим проверки. Это действительно удобно.

Этот контент первоначально появился в сетевом журнале.

Подробнее: