При разработке архитектуры интерфейса UX-дизайнер должен учитывать различные требования к удобству использования умных часов. Уменьшение площади экрана сделало размер «цели касания» очень важным соображением. Точно так же роль умных часов как «вспомогательного устройства» является важным фактором при разработке интерфейса. Учет всех этих факторов при разработке пользовательского опыта приложения имеет решающее значение для разработки успешного UX смарт-часов.
Размер имеет значение
Рассматривая часы как интерфейс для взаимодействия с пользователем, размер имеет значение. Пользователю сложнее выполнить жесты, так как интерактивная область существенно меньше, чем на привычном экране смартфона. В качестве компенсации для управления умными часами предлагаются физическая кнопка и колесо Digital Crown.
Разрабатывая архитектуру визуальной коммуникации для умных часов, мы начинаем с размеров объекта, которыми будет апеллировать пользователь в своей взаимодействии с объектом.
Контент должен быть идентичен для экранов разного размера. При размещении элементов пользуйтесь относительными габаритами и отступами. Это позволит интерфейсу меняться в зависимости от доступного экранного пространства.
Для такого размера экрана в верстке используйте линии такой толщины, которая хорошо сочетается с устройством и сложностью глифа. Не пользуйтесь линиями тоньше четырех пикселей, иначе глифы могут стать неразборчивыми.
Из прошлых лекций мы знаем, что по возможности следует прибегать к единому размеру изображений для обоих дисплеев. Иначе может потребоваться отдельный набор изображений для каждого дисплея. Мы останавливаемся на размере дисплея 396×484 px.
Задание: Вычислите размер интерфейса в пикселях, исходя из размеров экрана определите оптимальную толщину линий для объектов.
Результат: Макет с релевантными размерами интерфейса экрана с соответствующей толщиной линий.
Цвет
Бесспорно, одним из камней преткновения для носимой электроники остается энергосбережение. Например, использование черного фона на экранах часов Apple Watch для экономии заряда батареи также является своего рода ограничением при разработке интферфейса. При большом желании можно приложить усилия, чтобы изменить фон в приложении. Но это приведет в результате к дополнительным затратам энергии.
Удобочитаемость — руководящий принцип использования цвета и типографики в интерфейсе.
Макет приложения «Камера»
Для текста пользуйтесь контрастными цветами. С контрастными цветами текст легче читается.
Макет приложения «Сообщения»
Помните о разном цветовосприятии. Большинство людей с ограниченным цветовосприятием с трудом отличают красный от зеленого. Использования монохромных решений нивелирует эту ошибку.
Изучайте восприятие цвета пользователями разных стран и культур. Каждый видит цвета по-своему, и многие культуры отличаются во взглядах на тот или иной цвет.
Выбирайте стандартную цветовую глубину для изображений и пиктограмм. Стандартная глубина — 24 бит (по 8 бит для красного, зеленого и синего). Иконки должны быть без альфа-канала.
Задание: Выявите палитру цветов, подходящую для интерфейса, исходя из смыслов и логики вашего объекта.
Результат: Макет с цветовой гаммой для интерфейса экрана.
Типографика
Прежде всего, текст должен быть читабелен. Если пользователь не может прочесть написанное, то красота начертаний становится бессмысленной.
Существующий макет приложения «Сообщения»
Пользуйтесь одним шрифтом для вашего интерфейса. Применение множества стилей портит визуальное единство приложения и создает ощущение небрежности.
Системный шрифт San Francisco создан и оптимизирован специально для Apple Watch. При большом размере шрифта буквы уплотняются, чтобы занимать меньше места в ширину. Но при уменьшении кегля они размещаются свободнее, и начертание символов оптимизируется для лучшей читаемости. Пунктуационные знаки пропорционально увеличиваются при уменьшении кегля.
Макет приложения «Сообщения»
Используйте San Francisco Text для надписей 19 размера и менее. Для текста больше 20 кегля лучше подойдет San Francisco Display
Задание: Подберите шрифтовые пары для вашего интерфейса объекта.
Результат: Подбор шрифтов и шрифтовых пар для интерфейса объекта.
Кнопки
Кнопки в интерфейсе подменю
Создавайте кнопки во всю ширину экрана. Крайне желательно пользоваться элементами, занимающими всю ширину экрана. Если одной кнопки недостаточно, то не стоит умещать более двух штук в ряд. Углы кнопок должны быть закруглены, чтобы было проще отличить их от других элементов. Сохраняйте стандартный угловой радиус. По умолчанию используется радиус скругления углов в 6 пунктов.
Кнопки выполняют определенные программные действия.
Существующий макет приложения «Погода»
По возможности используйте кнопки одной высоты. Если на одном экране размещено сразу несколько кнопок, выставьте для каждой одну и ту же высоту.
Макет приложения «Погода»
Переключатель предлагает на выбор два взаимоисключающих действия или состояния. Особенности переключателя: — выполняет роль бинарного индикатора состояния; — всегда содержит метку с пояснением. Используйте переключатель, когда от пользователя требуется сделать выбор между двумя состояниями — такими как Да/Нет или Вкл/Выкл.
Задание: Соберите несколько вариантов кнопок для интерфейса вашего объекта.
Результат: 3 варианта кнопок, сверстанные с учетом стиля интерфейса объекта.
Слайдер
Существующий макет приложения «Музыка»
Слайдер позволяет выбрать определенное значение из заранее определенного диапазона. Значение меняется с помощью тапа по картинкам с обеих сторон ползунка. Особенности слайдера: — состоит из горизонтальной полосы и изображений по бокам для изменения значений; — может отображать показатель как в виде дискретных интервалов, так и в непрерывном виде; — всегда увеличивает или уменьшает значение на заранее указанную величину; — не показывает цифровое значение пользователю.
Используйте такие картинки, при которых очевидно назначение ползунка.
Редизайн макета приложения «Музыка»
Задание: Подберите релевантные вашему объекту слайдеры для интерфейса.
Результат: Подбор слайдеров для интерфейса объекта.
Меню
Добавляйте контекстные меню только если есть подходящие действия. Это опциональный элемент, и при его отсутствии система отреагирует на сильное нажатие соответствующей анимацией.
Не создавайте действий, которые влияют только на один элемент или часть интерфейса. Они должны относиться ко всему экрану.
Для каждого контекстного действия назначайте свою иконку и подпись. Изображения для меню должны быть в одном системном стиле на стандартном фоне. Подписи ограничены двумя короткими строчками текста. И картинка и подпись обязательны.
Дизайн иконок 2007 vs 2024
Особенности меню: — содержат от одного до четырех действий, применимых в текущий момент; — действия отображаются сверху вниз и слева направо, в соответствии с очередностью добавления; — в меню недоступны вложенные списки и прокрутка; — могут формироваться как на этапе проектирования, так и программно.
Задание: Подберите релевантное вашему объекту меню для интерфейса экрана.
Результат: Макет меню для интерфейса объекта.
В заключении
Работайте с привычной графикой, которая легко узнается пользователями. Не стоит фокусироваться на вторичном и незначительном аспекте элемента. К примеру, иконка программы Mail выполнена в виде конверта, а не сумки почтальона или силуэта почтового отделения.
Иконка «Фотоальбом» 2007 vs 2024
Стремитесь к простоте. В частности, при разработке иконки стоит избегать слишком сложной и детальной графики. Выделите один элемент, который бы отражал суть приложения, и представьте его простой запоминающейся фигурой. Детали добавляйте крайне осторожно. Слишком сложная картинка в небольшом формате будет выглядеть неряшливой и запутанной.
Иконка «Камера» 2007 vs 2024
Создайте абстрактный символ основной идеи программы. Полезно творчески интерпретировать реальность — это позволяет акцентировать внимание пользователя на важных моментах.
Для всех изображений и пиктограмм используйте формат .svg и удачи вам в проектировании!
