Connect with us

Дизайн и прототипирование

10 подсказок для создания лучшего интерфейса

Популярная статья UX-дизайнера Мариель Москериола с ценными советами по улучшению любого интерфейса.

Анна Гуляева

Опубликовано

/

     
     

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

1. Важность не за счет размера

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

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

Как создать лучший контраст?

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

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

2. Не создавайте разные тона черного

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

3. Используйте математику для понимания цветов

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

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

Вариант А

В первом варианте значение тона в 123 сохраняется во всех фигурах, а меняются насыщенность и яркость. При создании более темного цвета для папки мы изменяем насыщенность с 24 на 40, а яркость — с 96 на 82, что показывает, что положительное или отрицательное изменение насыщенности должно сопровождаться противоположным изменением яркости, и наоборот. То же самое происходит для полосы: используя значения оттенков папки, насыщенность мы изменяем с 40 на 44, а яркость — с 82 на 75. Это приводит нас к формуле:

Темный оттенок = Повышение насыщенности + снижение яркости

Светлый оттенок = Снижение насыщенности + повышение яркости

Вариант В

Тот же самый принцип применяется и во втором варианте, но значение тона меняется. Здесь мы будем использовать терминологии RGB и CMY, которые не были важны для меня, когда я только начинал работать, пока я не нашел такое применение RGB и CMY для сочетания цветов.

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

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

После этого мы можем применить формулу из первого варианта, что приводит нас к этому цветовому сочетанию:

Красный, зеленый, синий (RGB) + формула из варианта А = темная вариация

Бирюзовый, маджента, желтый (CMY) + формула из варианта А = светлая вариация

4. Используйте интервалы, чтобы разделить группы

Использование большого интервала — это простое решение для разделения групп. В примере выше моей целью было разделить заголовок и имя автора при помощи большого интервала в 24px.

5. Используйте цвета, чтобы разделить строки

Создание интерфейсов с несколькими строками может быть скучным, так как от вас требуется вставить компонент N раз. Но чтение такого интерфейса может быть ещё более сложной задачей, если один ряд не отличается от другого. Цветной фон может помочь пользователям в чтении, а также сделать работу дизайнера немного интереснее.

6. Используйте умножение вместо текста с тенью

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

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

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

7. Длина строк

Часто дизайнеры удлиняют строки, чтобы они подходили под страницу. Но для удобства чтения лучше сохранять длину строки в 45–65 символов. Но если вы укорачиваете строку, то может оказаться, что справа возникает большое пустое пространство:

В таком случае сделайте выравнивание по центру всего текста.

8. Не изобретайте колесо

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

Прежде чем создавать новый интерфейс, посмотрите на предыдущие дизайны, чтобы найти паттерн, который можно использовать снова. В примере выше мы могли бы создать другую карточку для Art Group, но мы можем взять карточку статьи и использовать её снова. Это сэкономит время дизайнеру и сохранит дизайн однородным.

9. Используйте цвета компании в качестве акцентов

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

10. Выделите список

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

 

 

Комментарии
Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.
Advertisement
Click to comment

You must be logged in to post a comment Login

Leave a Reply

Дизайн и прототипирование

17 лекций о разработке интерфейсов Школы разработки интерфейсов Яндекса

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

AppTractor

Опубликовано

/

Автор:

Материалы для самоподготовки

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

Все лекторы — сотрудники Яндекса. Они работают над интерфейсами разных сервисов компании — Поиска, Карт, Дзена, Директа — и подкрепляют рассказ примерами из личного опыта. В конце они приводят ссылки на дополнительные материалы — если тема интересна, будет понятно, куда двигаться дальше.

Курс даёт базовую теорию. Тех, кто хочет применить знания на практике, Яндекс приглашает на очные занятия в Школу разработки интерфейсов. Практики будет много — слушателей ждут семинары, домашние задания и работа над учебными проектами. Для поступления нужно заполнить анкету и решить тестовое задание.

Обучение в Школе бесплатное. Набор открыт в трёх городах: Москве, Симферополе и Минске. Жители других мест могут приехать на учёбу в столицу: тем, кто пройдёт отбор, Яндекс оплатит дорогу и проживание в хостеле.

Комментарии
Продолжить чтение

Дизайн и прототипирование

FlowMapp

FlowMapp – онлайновый инструмент для создания интерактивных карт и пользовательских потоков для сайтов и приложений.

AppTractor

Опубликовано

/

Автор:

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

Комментарии
Продолжить чтение

Дизайн и прототипирование

Новое для дизайнеров в iOS 12

Юрий Ветров в “Дайджесте продуктового дизайна” рассказал о нововведениях в iOS 12.

AppTractor

Опубликовано

/

Автор:

Вчера анонсировали iOS 12. С точки зрения интерфейса изменений немного, основной упор сделан на повышение производительности (iOS 11 была одной из самых сырых и глючных). Причём её можно будет поставить на те же устройства, что работали с прошлой версией — пул доступных устройств получается шире.

Неплохие обзоры обновления сделали The Verge и Engadget. Какие визуальные и интерфейсные нюансы можно отметить:

  • iOS-приложения можно будет портировать для MacOS. Пока это сделано для некоторых приложений Apple, со следующего года станет доступно сторонним разработчикам. Но это не объединение платформ, о чём мечтают многие.

  • Ещё один стиль кнопок в action sheets:

  • Apple, Adobe и Pixar продвигают единый стандарт файла для описания дополненной реальности.
  • Shortcuts, своя версия IFTTT на базе купленного продукта Workflow — можно создавать собственные операции для Siri, которые затрагивают несколько действий в разных приложениях.
  • Автоподстановка кодов подтверждения, которая поможет мобильным банкам.
  • Умельцы раскопали намёк на тёмную тему. Она появится в новом MacOS, в iOS была в некоторых приложениях (например, будильник).

Короче, для дизайнеров новостей мало, получился скорее релиз про полировку и оптимизацию. Полный список изменений. iOS 12 будет доступна в сентябре, но уже сейчас можно поставить бета-версию.

Комментарии
Продолжить чтение

Дизайн и прототипирование

Темный или светлый UI? Советы по выбору цветовой схемы для вашего интерфейса

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

AppTractor

Опубликовано

/

Автор:

Факторы, влияющие на выбор цветовой схемы

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

Читаемость и разборчивость

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

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

Означает ли это, что интерфейсы со светлым фоном более читабельны? Не всегда. Один из известных гуру дизайна пользовательского опыта Джейкоб Нильсен сказал: «Используйте цвета с высоким контрастом между текстом и фоном. Для оптимальной четкости требуется черный текст на белом фоне (так называемый позитивный текст). Белый текст на черном фоне (негативный текст) почти так же хорош. Хотя коэффициент контрастности такой же, как и для положительного текста, инвертированная цветовая схема немного «остужает» людей и замедляет их чтение. Больше всего разборчивость страдает в цветных схемах, которые делают текст более легким, чем чистый черный, особенно если фон сделан более темным, чем чистый белый».

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

Однако некоторые научные исследования, относящиеся к 1980-м годам, показывают, что для больших объемов текста светлый фон представляется более эффективным выбором для большинства пользователей. Изучая работу рекламных носителей, Д.Бауэр и К.Р.Кавоний поделились своими исследованиями в статье «Улучшение удобочитаемости визуального отображения при помощи изменения контраста» (1980). В частности, они обнаружили, что участники были на 26% более точными при чтении текста, когда на светлом фоне фигурировали темные буквы.

Почему это так? Джейсон Харрисон из Sensor Perception and Interaction Research Group (Университет Британской Колумбии) объясняет это явление следующим образом. Люди с астигматизмом (которых, согласно различным статистическим данным, около 50% населения) чувствуют, что сложнее воспринимать белый текст на черном, чем черный текст на белом. Отчасти это связано с уровнем освещенности. С ярким дисплеем (на белом фоне) диафрагма закрывается немного больше, уменьшая эффект «деформированной» линзы. С темным дисплеем (черным фоном) радужная оболочка открывается, чтобы получать больше света, и деформация линзы создает гораздо более нечеткий фокус для глаза. Итак, основываясь на этом исследовании, если интерфейс представляет много текста и требует длительного чтения, то светлый фон более удобен для пользователя.

image

Доступность

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

Ясность

Ясность определяет способностью видеть и различать все нужные данные на экране или странице. Прежде всего, это касается простоты и интуитивности навигации — возможности понимания макета, поиска зон информации и элементов взаимодействия, когда пользователям не нужно прилагать много усилий для получения того, что им нужно. Если этот аспект не отработан должным образом, то это может привести к слабой визуальной иерархии и превратить экран в полный хаос. Контраст играет здесь большую роль, и цветовая схема становится основой для него. Чтобы проверить, достаточно ли понятен интерфейс и достаточен ли контраст, не забывайте о хорошем старом трюке «эффекта размытия», когда вы смотрите на экран или страницу в размытом режиме и проверяете, легко ли  заметно и доступно все необходимое.

image

Отзывчивость

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

Окружение

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

image

Чеклист список для выбора цветовой схемы

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

  1. Определите цель интерфейса. Определив основные точки использования интерфейса и возможности решения проблем пользователя, вы сделаете выбор цветовой схемы более обоснованным. Если пользовательский интерфейс является текстовым (блог, новостная платформа, электронный ридер и т.д.), светлый фон будет более эффективным выбором. Свет делает экран просторным, и становится легче сосредоточиться исключительно на содержании. С другой стороны, если интерфейс вращается вокруг изображений, а не текста, то цветовая схема с темным или ярким фоном может быть хорошим решением, поскольку цвета изображений будут ощущаться глубже.
  2. Проанализируйте свою целевую аудиторию. Определение и анализ целевой аудитории – это главное, что должен сделать дизайнер. Понимание того, кто является вашим потенциальным пользователем и что он хочет получить от сайта или приложения – это прочный фундамент для удобного, полезного и привлекательного интерфейса. Люди среднего возраста и пожилые люди предпочитают интерфейсы со светлой цветовой схемой, поскольку они находят ее более интуитивной и управляемой. Молодые люди часто считают  интерфейсы с темным фоном более оригинальными и стильными, что может быть способом привлечения целевых пользователей. Подростки и дети предпочитают интерфейсы, где используются яркие фоны и забавные детали. Выбор цвета, очевидно, зависит от характера функционирования интерфейса и контента. Но предпочтения целевой аудитории всегда являются хорошим ключом к решениям, ориентированным на пользователя.
  3. Изучите конкурентов. Еще один аспект, который следует иметь в виду, заключается в том, что ваш продукт не плавает в “синем океане”. Наоборот, он будет бороться за внимание пользователя в условиях сильной и динамически меняющейся конкуренции. Выбор цветовой схемы становится способом сделать приложение или веб-сайт отличающимся и привести к столь драгоценному первому взаимодействию со стороны пользователя. Время, затраченное на исследование существующих продуктов в сегменте, сэкономит вам время и силы, которые вы, в противном случае, потратите на редизайн неэффективных решений.
  4. Тестируйте, тестируйте, тестируйте. Описанные выше моменты убеждают в одной ключевой вещи: поскольку цвет относится к факторам, непосредственно влияющим на удобство использования и привлекательность интерфейса, каждое дизайнерское решение должно быть соответствующим образом проверено – в разных разрешениях, на разных экранах и в различных условиях. Тестирование позволит выявить сильные и слабые стороны цветовой схемы до того, как продукт выйдет на рынок, получит внимание  и потеряет шанс произвести первое впечатление.

image

Компромиссные решения

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

Темный интерфейс, белые вкладки для содержания

Как мы уже упоминали в обзоре тенденций UX-дизайна, это направление особенно популярно для интерфейсов с темным фоном. В нем реализуется подход к лучшей читаемости, который часто является вопросом обсуждения — создавая окна или пространства со светлым фоном для основных блоков с данными, дизайнеры решают проблему, добавляя элегантный контраст с экраном или страницей. Одним из случаев, когда такое решение было применено эффективно — приложение Watering Tracker, разработанное командой Tubik.

image

Предоставление пользователю возможности выбора цветовой схемы

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

image

Полезное чтение:

Комментарии
Продолжить чтение

Реклама

Наша рассылка

Нажимая на кнопку "Подписаться" вы даете согласие на обработку персональных данных.

Вакансии

Популярное

X
X

Спасибо!

Теперь редакторы в курсе.