Полное руководство по дизайну пользовательского интерфейса

Содержание

• 01. Выберите типографику
• 02. Выберите правильную палитру
• 03. Стили ссылок и кнопок.
• 04. Создайте свои компоненты
• 05. Документируйте и сотрудничайте

Что такое дизайн пользовательского интерфейса? Лучше спросить, что на самом деле входит в дизайн пользовательского интерфейса? Эстетика? Юзабилити? Доступность? Все они? Как все эти факторы объединяются для обеспечения оптимального взаимодействия с пользователем и что должно быть на первом месте?

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

01. Выберите типографику

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

Тем не менее, хорошо продуманная типографика может быть эстетически удовлетворительной. Черно-белый Helvetica (или подобный шрифт) может стать прекрасным после всего лишь нескольких простых типографских улучшений. Под улучшениями мы подразумеваем настройку размера шрифта, высоты строки, межбуквенного интервала и т. Д., А не шрифта или цвета текста.

«Красивая» типографика на самом деле уродлива, когда ее не читать, потому что разочарование всегда важнее эстетики. Великолепный дизайн сбалансирован и гармоничен.

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

Что касается разборчивости и удобочитаемости, минимально допустимый размер шрифта, определенный в Руководстве по доступности веб-контента WCAG 2.0, составляет 18 пунктов (или 14 пунктов жирным шрифтом). Наилучший размер шрифта для использования во многом зависит от самого шрифта, но важно помнить о визуальной иерархии и о том, как этот базовый размер отличается от сводок и заголовков (т. Е. h1>, h2>, h3>).

С помощью выбранного вами инструмента дизайна пользовательского интерфейса (мы будем использовать InVision Studio) создайте серию текстовых слоев (Т), а затем отрегулируйте все размеры, чтобы они соответствовали следующему шаблону:

• h1>: 44 пикс.
• h2>: 33 пикс.
• h3>: 22 пикс.
• p>: 18 пикселей

В InVision Studio (и всех других инструментах дизайна пользовательского интерфейса) это делается путем настройки стилей с помощью панели «Инспектор» с правой стороны.

Затем выберите шрифт, но будьте осторожны, потому что с некоторыми шрифтами вы можете заметить, что 18 пикселей p> и 22px h3> выглядит не так уж и иначе. У нас есть два варианта: изменить размер шрифта или выбрать другой шрифт для заголовков. Выбирайте второй вариант, если вы ожидаете, что ваш дизайн будет содержать много текста.

Имейте в виду, что:

• Визуальный дизайн пользовательского интерфейса - это зачастую интуитивный подход
• Ничего не решено; все может быть изменено

Высота линии

Оптимальная высота строки гарантирует, что строки текста имеют достаточный интервал между ними для достижения приличного уровня читаемости. Это становится все более и более признанным «стандартом»; Инструмент Google Lighthouse Audit даже предлагает это как ручную проверку (или даже как отметку, если текст содержит ссылки, которые могут быть расположены слишком близко друг к другу из-за неоптимальной высоты строки).

Еще раз, WCAG помогает нам в этом, объявляя, что высота строки должна быть в 1,5 раза больше размера шрифта. Итак, в вашем инструменте дизайна пользовательского интерфейса в разделе «Линия» (или аналогичном) просто умножьте размер шрифта, по крайней мере, на 1,5. Например, если основной текст 18 пикселей, тогда высота строки будет 27 пикселей (18 * 1,5 - вы также можете выполнить математическую операцию непосредственно в инспекторе). Опять же, будьте внимательны - если 1,6х кажется более подходящим, используйте 1,6х. Помните, что разные шрифты дадут разные результаты.

Еще рано думать об использовании реальных данных в нашем дизайне, но, по крайней мере, мы все равно должны использовать несколько реалистичные данные (даже lorem ipsum). InVision Studio имеет собственное приложение для работы с реальными данными, которое помогает нам увидеть, как на самом деле может выглядеть наша типографика.

Интервал между абзацами

Расстояние между абзацами - это не стиль, который мы можем объявить с помощью InVision Studio Inspector. Вместо этого нам нужно будет вручную выровнять слои с помощью быстрых направляющих (⌥). Как и высота строки, магический множитель равен 2x (удваивает размер шрифта). Например, если размер шрифта 18 пикселей, то перед переходом в следующий текстовый блок должно быть не менее 36 пикселей. Расстояние между буквами должно быть не менее 0,12.

Однако нам не нужно беспокоиться об этом, пока мы не начнем создавать компоненты.

Общие стили

Если ваш инструмент дизайна пользовательского интерфейса поддерживает это (InVision Studio еще не поддерживает), подумайте о том, чтобы превратить эти типографские стили в «общие стили», чтобы их можно было быстро использовать повторно, обеспечивая при этом визуальную согласованность. Обычно это выполняется через Инспектор.

02. Выберите правильную палитру

Выбор идеальных цветов для вашего дизайна выходит далеко за рамки эстетики: он может информировать всю иерархию вашего сайта.

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

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

01. Старк
Плагин Stark совместим со Sketch и Adobe XD и помогает проверять цветовой контраст и имитировать дальтонизм прямо с холста. Скоро появится поддержка Figma и InVision Studio.
02.Цвета
Цвета - это набор из 90 цветовых комбинаций, которые имеют соответствующий уровень цветового контраста, чтобы соответствовать рекомендациям WCAG 2.0 - некоторым из них даже удается соответствовать стандарту AAA.
03. Проект A11y
Проект A11y - это крупный центр для всего, что связано с доступностью. Он включает в себя ресурсы, инструменты, советы, учебные пособия и создан создателем плагина Stark и получает финансирование от InVision.

Три типа цвета

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

• Цвет призыва к действию (также основной цвет бренда)
• Нейтральный темный цвет (лучше для элементов пользовательского интерфейса или темного режима)
• Для всего вышеперечисленного используются более светлые и темные варианты.

Это позволяет:

• Темный режим будет легко достижим
• Наш цвет CTA никогда не будет конфликтовать с другими цветами
• В любом сценарии мы сможем подчеркнуть и преуменьшить

Настройте свою палитру

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

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

Контраст

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

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

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

Размер

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

Визуальный тест доступности - это тест на удобство использования, используемый для определения того, являются ли цели касания интерактивными. Синхронизируйте дизайн из Studio в Freehand (⌘⇧F), отправьте полученный URL-адрес тестировщикам и попросите их обвести элементы, которые, по их мнению, являются интерактивными.

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

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

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

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

Глубина

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

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

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

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

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

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

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

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

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

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

Это не означает, что нам нужно спроектировать множество компонентов или быть готовыми к любому возможному сценарию, но это означает, что нам нужно использовать позицию «Что, если?».

Например, если наш каркас требует компонента 3x1, но мы знаем, что его содержимое не высечено в камне, небольшое размышление может привести нас к задаче: «Что, если эти компоненты в конечном итоге будут 4x1?». Практическое правило: проектируйте только с учетом уже существующих потребностей пользователей, но старайтесь делать решения относительно гибкими. В противном случае позже мы получим очень грязный «долг за дизайн».

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

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

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

Используя наши правила

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

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

Нагрузочное тестирование

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

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

05. Документируйте и сотрудничайте

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

Цвета

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

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

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

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

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

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

Только не создавайте ненужные компоненты. Помните, что создание библиотеки - это постоянные совместные усилия. Это не обязательно должно быть завершено все сразу, завершено вами в одиночку или завершено когда-либо. Нужно только передать язык.

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

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

Например, мы могли бы захотеть использовать текстовые слои для аннотирования нашей библиотеки как средства объяснения вариантов использования различных элементов. Что касается типографских стилей, мы могли бы даже отредактировать текст, чтобы он был более информативным (например, «h1> / 1.3 / 44px»). Это говорит, что h1>s должен быть 44 пикселя и иметь высоту строки 1,3.

Передача дизайна

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

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

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