Дизайн интерфейса: Разработка и проектирование UX/UI дизайна интерфейсов — Райт

Кавайный дизайн интерфейса — понятие, особенности и советы по созданию

Тренды в веб-дизайне появляются стабильно, но не все они становятся глобальными. Дизайнерам приходится подстраиваться под изменения, чтобы не терять клиентов.

В этом материале поговорим о милом дизайне, как относительно новом тренде в дизайне интерфейсов.

Что это такое

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

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

Постепенно в дизайне интерфейсов образовался устойчивый тренд на кавайный дизайн. User interface, созданные в этом стиле, выглядят красиво, необычно и объёмно. Дизайнеры часто добавляют в них элементы геймификации. Сайт или приложение по-прежнему решают задачи пользователей, но они лучше вовлекают юзеров по сравнению с интерфейсами в стиле Metro, Flat или Material Design.

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

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

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

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

За счёт ярких цветов, объёмных форм, ненавязчивой типографики UI выглядит доступным, и с первых секунд знакомства подогревает интерес пользователей.

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

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

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

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

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

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

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

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

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

.

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

5 особенностей кавайного дизайна

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

Объёмные элементы

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

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

Яркие и приглушённые тона

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

Цвет не зря считают сильным визуальным средством. В сочетании с объёмными формами, красивым фоном и милыми персонажами пастельные оттенки создают атмосферу расслабления и спокойствия. Приложения в кавайном стиле можно использовать вместо йоги

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

Эмоциональность

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

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

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

Динамика

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

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

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

Вовлечение аудитории

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

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

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

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

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

Советы по созданию UI

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

Изучите целевую аудиторию

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

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

Вдохновитесь похожими проектами

Есть мнение, что ничего уникального в мире нет. Все идеи — комбинация предыдущего опыта с личными ощущениями дизайнера. Если не понимаете, как строить макет, посмотрите решения коллег на Dribbble, Behance, Awwards. Никто не говорит копировать проекты подчистую. Найдите сильные и слабые стороны, выделите уникальные фишки, зарядитесь мотивацией и начинайте работать.

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

Соблюдайте баланс

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

Для поиска баланса помогает взгляд со стороны. Покажите черновой набросок интерфейса друзьям и знакомым. Пусть незаинтересованные пользователи оценят визуальный ряд, удобство и другие важные детали проекта. Если они дадут «зелёный свет», можно продолжать работу. Свежий взгляд часто помогает устранять критичные проблемы до выпуска продукта в открытый доступ.

Не переходите границы

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

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

Какие проблемы решает милый дизайн

Мы уже определили, что главные преимущества дизайн-системы — максимальная открытость и вовлечение. Пользователи с первых минут знакомства идут на диалог и хотят изучить возможности продукта. Эти плюсы дают отличное ускорение на старте развития проекта.

Закрывает возражения

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

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

Превращает людей в адвокатов бренда

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

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

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

Специалисты веб-студии IDBI не боятся экспериментов. Мы работаем с разными дизайн-системами, находим креативные решения и взаимодействуем с клиентами на всех этапах разработки цифрового продукта.

Что такое UI дизайн и почему это важно?

Что такое UI дизайн и почему это важно?

Компания по разработке сайтов F5 Studio предоставляет услугу UI UX дизайн, поэтому мы хотим поделиться с вами особым опытом.

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

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

Нет времени читать?
Получите бесплатную консультацию по дизайну пользовательского интерфейса.

Вы озадачены ролью дизайнера пользовательского интерфейса? Руководство от toptal.com поможет вам понять, как нанять  идеального дизайнера пользовательского интерфейса.

ПОЧЕМУ ПОЛЬЗОВАТЕЛЬСКИЙ ИНТЕРФЕЙС ВАЖЕН В ВЕБ ДИЗАЙНЕ?

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

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

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

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

• Визуальный дизайн

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

• Интерактивный дизайн

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

• Информационная архитектура

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

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

Выбор элементов дизайна пользовательского интерфейса

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

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

Ваш профессиональный UI\UX дизайн всего в одном клике.

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

Возможно, эта англоязычная статья будет тоже вам интересна:

Какая разница между UX дизайном и UI дизайном?

Лучшие практики UI дизайна 

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

Вот лучшие практики хорошего дизайна пользовательского интерфейса.

1. Простые интерфейсы лучше, поэтому используйте понятный язык взаимодействия и избегайте несущественных элементов.
2. Стремитесь к согласованности, используя общие элементы пользовательского интерфейса. Это гарантирует, что дизайн будет создан быстро. А пользователь получит комфорт и удовольствие от взаимодействия.
3. С помощью грамотно структурированных макетов страниц старайтесь привлечь внимание пользователей к наиболее важным разделам сайта.
4. Используйте соответствующие цвета и текстуры, чтобы привлечь внимание пользователя к определенному элементу страницы. На примере работы дизайнера F5 Studio посмотрите как цвет создает совершенно иной веб дизайн даже для обычной компании.
5. Используйте шрифт, чтобы улучшить читабельность контента.
6. Используйте значения по умолчанию, чтобы уменьшить нагрузку на пользователя везде, где это возможно.

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

Веб-дизайнеры F5 Studio используют эти практики дизайна пользовательского интерфейса для наших работ.

5 ошибок, которые нужно избегать в дизайне пользовательского интерфейса

1. Отсутствие ориентированного на пользователя дизайна: эту часть легко игнорировать, хотя это один из важных аспектов дизайна пользовательского интерфейса. При проектировании необходимо учитывать потребности, предпочтения,
   проблемы пользователей. Отказ от этого может оказать негативное влияние на ваш бизнес.
2. Мало знаний о целевой аудитории. Опять же, это иллюстрирует больше то, о чем мы только что говорили. Вместо создания дизайна на основе ваших собственных предпочтений и вкусов, создавайте так, как если бы вы были клиентом. Просто подумайте о том, что клиенту понравится, и, если возможно, проведите опрос, чтобы по-настоящему понять, что им нужно.
3. Чрезмерное использование динамических эффектов: использование слишком большого количества анимационных эффектов не является синонимом отличного дизайна. Это часто утомляет и раздражает пользователя вебсайта или приложения. Избегайте чрезмерной анимации чтобы оптимизировать взаимодействие с пользователем.
4. Отказ от исследований: давление сроков и большая рабочая нагрузка могут заставить дизайнера отказаться от изучения пользователей, лучших практик и возможностей получить вдохновение.
5. Создание слишком многих элементов на ранней стадии. Часто, все мы просто хотим иметь представление о дизайне и, соответственно, как можно быстрее начать работу. Однако такая концепция не всегда эффективна. Иногда изучение других практик может открыть нам некоторые удивительные вещи.

В ЗАКЛЮЧЕНИИ

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

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

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

В этой статье рассказывается, какую роль дизайн интерфейсов играет в условиях современного рынка. А также, что отличает хороший интерфейс от плохого (UI = user interface, то есть, интерфейс пользователя). Также мы взглянем на парочку новых моделей UI дизайна, включая Google Fuchsia и Fluent Design от Microsoft.

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

Творчество разработчиков пользовательских интерфейсов ограничено определенным устройством и операционной системой. Их работа часто должна соответствовать рекомендациям производителя операционной системы (Google для Android, Apple для iOS). Apple публикует, что можно, а чего нельзя для пользовательского интерфейса, а также подробный список рекомендаций для UI. У Google также есть собственные стандарты материального дизайна.

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

Многие элементы пользовательского интерфейса мы воспринимаем как приглашения к взаимодействию с приложением или устройством:

Поле для ввода текста и курсор предлагают пользователю ввести текст, а кнопка «Подтвердить» — кликнуть или коснуться ее, чтобы продолжить:

Переключатель, представленный здесь в виде ползунка, приглашает пользователя включить или отключить опцию:

Иконка приглашает пользователя кликнуть по ней, чтобы запустить приложение или функцию:

При нажатии по кнопке-гамбургеру…

…появляется меню, которое приглашает пользователя выбрать дополнительные варианты:

Ползунок приглашает пользователя коснуться/кликнуть и перетащить его, чтобы изменить настройки, например, яркость экрана:

Выпадающее меню предлагает пользователю выбрать нужный вариант из списка.

Это лишь некоторые примеры элементов дизайна интерфейсов приложений. Но все они объединены идеей повысить эффективность взаимодействия с пользователем.

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

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

Разработан с учетом глубокого понимания пользователя, его потребностей и того, как он будет перемещаться по приложению или сайту. Поэтому мы и говорим, что дизайн UI является одним из аспектов UX-дизайна (UX = User eXperience, опыт взаимодействия).

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

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

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

В таком интерфейсе очень много мелкого текста, который трудно читать. Кроме этого, плохому интерфейсу присуще использование жаргона (в том числе профессионального) вместо понятного языка. Например, написано: «Плохие данные». А нужно — «Неверные логин и пароль». К плохому интерфейсу также можно отнести применение назойливых диалоговых окон вместо панели уведомлений:

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

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

Но успех компании Amazon, наоборот, доказывает эффективность их UI. Почему? Один из секретов кроется в том, что внешний вид страницы улучшался постепенно, и поэтому не заставлял пользователей приспосабливаться к резким изменениям интерфейса. Посетителям сайта это удобно.

Я, как давний пользователь Amazon, особо и не замечал изменений во внешнем виде или способе взаимодействия. Но вот как выглядел Amazon 10 лет назад:

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

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

В последние месяцы все чаще слышно о «Fluent Design» от Microsoft. Говорят, он нацелен на интеграцию большей визуальной глубины и движения. То же самое касается экспериментальной операционной системы от Google с кодовым названием «Fuchsia», в которой разработчики пытаются обойтись без рабочих столов и иконок.

Каково, по-вашему, будущее UI-дизайна? Поделитесь своими соображениями!

Пожалуйста, оставляйте свои отзывы по текущей теме статьи. За комментарии, отклики, дизлайки, лайки, подписки низкий вам поклон!

Данная публикация является переводом статьи «How To Get Started In User Interface (UI) Design» , подготовленная редакцией проекта.

Дизайн интерфейсов и UX — всё по этой теме для программистов

Первый митап Tproger по GameDev: UX и реверс-инжиниринг

Первый митап от Tproger, посвящённый разработке игр: поговорили про UX в игровых интерфейсах и про реверс-инжиниринг в гипер-казуалах.

Чек-лист для начинающего дизайнера в IT-компании

Старший дизайнер Noveo Ирина подготовила для начинающих коллег чек-лист дизайнера: список аспектов, на которые стоит обратить внимание.

Как программисту сделать хороший UX

Рассматриваем пример формального подхода к задаче создания интерфейсов и решения её с точки зрения «ориентации на пользователя».

Боль фронта, или Что нам нужно от дизайнеров

Разбираем некоторые проблемы в отношениях дизайнеров и фронтендеров и ищем способы их решения.

Тест «Что делает эта кнопка?»

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

5 неочевидных вещей, которыми занимается дизайнер интерфейсов в компании

Дизайнер интерфейсов — это уже давно не про простое рисование в фотошопе. В статье рассмотрено, в каких ещё процессах участвует такой специалист.

Хотел кликнуть, но не смог: как правильно настроить размер области клика

Рассматриваем несколько распространённых проблем с UX и показываем, с какой из них столкнулись сами и как её решали.

Харизматичный дизайн или использование эмпатии для вовлечения пользователя

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

Интерфейс 6+: принципы разработки UX/UI для детей

Дизайнер интерактивных курсов образовательной онлайн-платформы рассказывает про нюансы, которые стоит учитывать при создании «детского» интерфейса.

Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен

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

Делаем жизнь пользователя лучше — UX-исследования для начинающих

Подробный разбор UX-исследований: что это такое, зачем нужны и какие бывают.

Какие типичные ошибки в дизайне сайта допускают новички — рассказывают эксперты

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

Лучшие IT-выступления 2019 по версии Tproger: дизайн интерфейсов и UX

Выбрали самые интересные доклады 2019 в сфере UX/UI-дизайна по весии Tproger.

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

Вы узнаете, как превратить отличную идею для продукта или сервиса в красивый UI-дизайн для мобильного или веб-приложения.

Важные мелочи при разработке мобильных приложений

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

Обзор графических библиотек C++

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

23 совета по созданию качественного веб-продукта

Мы подготовили для вас чеклист по пунктам, которые следует учесть при разработке сайтов. По нему вы сможете проверять, насколько правильно делаете свой проект. Ведь каждый проект разработчика подобен коту Шрёдингера — пока не откроешь, не узнаешь, насколько он жизнеспособен…

10 правил, которые нужно учитывать при разработке интерфейсов

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

Адаптивная вёрстка: что это и как использовать

Адаптивная вёрстка позволяет правильно отображать содержимое веб-сайта на любых устройствах. Рассказываем, как это сделать.

Как не стоит делать важные интерфейсы: гавайская версия

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

Прописывание UX: практические советы

Несколько простых советов, которые следует учитывать при разработке UX.

Что творится с регуляторами громкости?!

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

Всё, что вам нужно знать о Fall Creators Update — следующем крупном обновлении Windows 10

Рассказываем об одном из главных событий конференции Microsoft Build 2017 — анонсе Windows 10 Fall Creators Update, следующего крупного обновления ОС.

Советы по проектированию интерфейса чат-ботов: лучшая практика

Чат-боты сейчас очень популярны, особенно в мессенджерах и социальных сетях — почитайте, например, наше руководство по созданию бота для ВКонтакте. С помощью ботов заказывают еду, покупают билеты, выбирают одежду и делают многое,…

Вручную отобранный список вручную отобранных списков: полезные материалы для программистов и дизайнеров, собранные экспертами

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

FAQ и лучшие практики по реализации адаптивного веб-дизайна

Google официально объявил адаптивный веб-дизайн приоритетным инструментом для создания мобильных версий сайтов. Если у вас есть сайт или блог, пора серьёзно задуматься о переходе на адаптивный дизайн вместо того, чтобы…

5 советов по грамотному использованию иконок в интерфейсе

Иконки. Они популярны. Они помогают дополнять контент (в большинстве случаев). Тем не менее, они могут доставить немало сложностей.

Подборка инструментов и ресурсов для веб-разработчиков. Часть первая. Дизайн, кодинг

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

Как улучшить интерфейс: советы не только для дизайнеров. Часть 2. Чекбоксы и выпадающие списки

В прошлой части мы расмотрели некоторые принципы работы с полями ввода и радиокнопками. Эта статья — вторая порция советов по улучшению интерфейсов приложений и веб-сайтов. Если у вас есть желание оставить…

7 элементов интерфейса, которые лучше убрать с вашего сайта

Пользовательский интерфейс — это то, что видит пользователь и что он использует. В любом проекте интерфейс играет ключевую роль в оказании впечатления на пользователя. Главная его задача — предоставить пользователю…

Как улучшить интерфейс: советы не только для дизайнеров. Часть 1. Поля ввода и радиокнопки

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

Дизайн интерфейсов — проектирование и прототипирование пользовательского интерфейса

Как мы проектируем интерфейсы

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

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

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

3. Исследование пользователей. Мы собираем информацию, которая позволит сформулировать требования пользователей к интерфейсу: мотивацию, основные сценарии работы с продуктом, страхи, ограничения и т.п. Для этого, в зависимости от особенностей продукта и целевой аудитории, мы проводим интервью, онлайн-опросы пользователей, наблюдаем за их работой и привлекаем данные веб-аналитики. Так мы понимаем потребности пользователей и основные сценарии использования продукта.

4. Создании концепции интерфейса (концептуальное проектирование). Концепция интерфейса — это черновой набросок будущего продукта: мы продумываем логику перехода между разделами интерфейса и схематически обозначаем, как будет располагаться контент на экране. Самого контента (текстов, иллюстраций) в концепции ещё нет. Такой низкодетализированный прототип нужен, чтобы убедиться: мы и заказчик одинаково понимаем, как пользователь должен взаимодействовать с продуктом.

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

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

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

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

Дизайн интерфейса — заказать разработку, цены на создание интерфейса

Основы разработки дизайна интерфейса

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

Предельная ясность

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

Очевидные предпочитаемые действия

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

Сила контекста

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

Настройки по умолчанию

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

Проще – лучше

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

Обратная связь

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

Агентство «Дигимак» занимается разработкой интерфейсов с 2008 года. У нас можно заказать проектирование интерфейсов для сайтов, мобильных приложений. Работаем с клиентами из Москвы, Краснодара и других городов. Мы соблюдаем все актуальные принципы разработки интерфейсов и предлагаем клиенту выгодные цены на данную услугу.

Дизайн пользовательского интерфейса — VisualPharm

услуги и цены →

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

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

Платформы

Веб-приложения 
Сложные интерактивные веб-сайты, интранет-системы, удаленно управляемые приложения.

Настольные приложения
Любые приложения для операционных систем Windows и Mac OS.

Прочее
Так же мы делаем дизайн мобильных приложений для iPhone и Android .

Примеры дизайна пользовательского интерфейса — Talkbits и Tic Toc Timers.

Время

Продолжительность работ зависит от количества экранов. Обычно на создание макета интерфейса одного экрана требуется два дня плюс пять дней на оформление всего заказа. То есть на дизайн интерфейса 5 экранов потребуется 15 рабочих дней. Нужно, чтобы проект был закончен по времени быстрее? Свяжитесь с нами, и мы подумаем, что можно сделать.

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

Цена

Цена дизайна интерфейса зависит от количества экранов.

Первый экран Первый экран — это экран, с которого начинается работа над проектом. Этот экран самый дорогой, так как он определяет расположение элементов, цвета, шрифты и другие характеристики всего приложения.		63 700 р.
Каждый последующий экран		28 600 р.
Заставка (splash screen)	пример	11 500 р.
Иконки	цена определяется отдельно

Частые вопросы по ценам 

С чего начать

Чтобы приступить к дизайну интерфейса, нам понадобится следующее:

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

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

Предоплата
Мы работаем по 50%-й предоплате. 

Что такое UI-дизайн? Что такое UX-дизайн? UI vs UX: в чем разница | автор: ✨ They Make Design ✨

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

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

от Ramotion

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

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

Фото CareerFoundry

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

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

Проектирование в вакууме приводит к далеко не идеальным результатам.

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

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

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

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

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

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

Tweet by LukeW

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

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

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

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

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

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

Исследования для UX-дизайна

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

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

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

Что такое дизайн пользовательского интерфейса? | Академия каркасного моделирования

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

Дизайн пользовательского интерфейса на удивление сложно определить. Краудсорсинговое определение (т. Е. Википедия), по-видимому, по сути говорит о том, что «дизайн пользовательского интерфейса — это дизайн пользовательских интерфейсов программного обеспечения», что не очень поучительно.

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

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

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

---

Уровень дизайна пользовательского интерфейса 1: элементы управления

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

Теперь давайте посмотрим на некоторые элементы управления пользовательского интерфейса, которые использовались для создания этой страницы:

Элементы управления пользовательского интерфейса (также известные как элементы, компоненты и «виджеты») — это отдельные части пользовательского интерфейса, которые выполняют одну функцию.Некоторые примеры — ссылки, кнопки и значки. Даже простой текст можно рассматривать как элемент управления, поскольку его функция заключается в описании или маркировке чего-либо в пользовательском интерфейсе.

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

---

Уровень дизайна пользовательского интерфейса 2: Шаблоны

Мы можем еще больше упростить эту страницу, уменьшив точность нашего каркаса, чтобы абстрагироваться от отдельных элементов управления, например:

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

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

---

Уровень дизайна пользовательского интерфейса 3: принципы дизайна

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

Конкретные принципы, которые мы рассмотрим в этом курсе: Contrast , Hierarchy , Proximity и Alignment .

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

В любом случае цель состоит в том, чтобы отвлечь ваше внимание от контента, чтобы сосредоточиться на визуальных эффектах и ​​методах .

---

Уровень дизайна пользовательского интерфейса 4: Шаблоны

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

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

Другой шаблон пользовательского интерфейса — это шаблон категории, показанный здесь:

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

---

Аналогия с приготовлением пищи

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

То же самое будет справедливо для элементов управления и шаблонов, которые вы используете, когда вы ознакомитесь с ними.В Balsamiq вы найдете ингредиенты (элементы управления) в своей библиотеке пользовательского интерфейса. Вы можете найти рецепты (шаблоны проектирования) в Wireframes to Go или создать свои собственные шаблоны для своей экосистемы.

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

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

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

Готовы? Начнем с ингредиентов (элементов управления пользовательского интерфейса)!

---

Дизайн интерфейса

— обзор

8.8 Граница между аппаратным и программным обеспечением

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

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

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

Загрузка ЦП . Интерфейс может использоваться для разгрузки некоторой обработки с ЦП. Высокие скорости передачи данных особенно обременительны для программного обеспечения. Стоимость более быстрого процессора должна быть сопоставлена ​​со стоимостью более сложного аппаратного интерфейса.

Частота дискретизации.У процессоров есть некоторые основные ограничения на скорость, с которой они могут обрабатывать данные. Обработка прерываний, накладные расходы RTOS и производительность программного обеспечения ограничивают скорость, с которой ЦП может выполнять вычисления. Интерфейс может использоваться для распознавания событий или для субдискретизации сигналов.

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

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

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

Как показано на рис. 8.8, несколько различных программных объектов участвуют в потоке обработки данных, когда он перемещается от входа к выходу. Подпрограммы обслуживания прерываний сами обрабатывают задачи ввода и вывода.Программная задача выполняет обработку. Данные, поступающие в задачу, проходят через один буфер, в то время как другой буфер обрабатывает поток данных из задачи. На рис. 8.9 показана диаграмма последовательности UML для потока данных.

Рис. 8.8. Диаграмма объектов UML для объектов обработки данных.

Рис. 8.9. Схема последовательности UML для потока обработки данных.

На рис. 8.10 показана диаграмма состояний UML для драйвера. При входе драйвер обычно проверяет состояние устройства, чтобы понять, какой тип обслуживания необходимо выполнить.Он может управлять данными как при чтении, так и при записи. Затем он обновляет статус устройства, например, чтобы включить его следующую операцию.

Рис. 8.10. Диаграмма состояний UML для драйвера.

Основные принципы проектирования пользовательского интерфейса

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

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

UI оказывает реальное, ощутимое влияние на бизнес. Обращать на это внимание — не приукрашивать витрину, это важно для успеха бизнеса.

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

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

1. Поместите пользователя в центр

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

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

2. Стремление к ясности

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

3. Минимизируйте действия и шаги на экране

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

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

4. Простота

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

Пользовательский интерфейс должен быть простым и элегантным.

5. Будьте последовательны

Согласованность создает знакомство, а знакомые интерфейсы, естественно, более удобны. Насколько неприятно было бы сесть за руль автомобиля, когда тормоз находится справа, а акселератор — слева? Или заполните веб-форму, нажав красную кнопку «Отправить» и зеленую кнопку «Удалить».

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

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

Дизайн-система — отличный способ обеспечить единообразие дизайна пользовательского интерфейса.

6. Ваша цель: сделать дизайн пользовательского интерфейса невидимым

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

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

Обратная связь помогает ответить на вопросы в четырех областях:

1. Расположение: Вы здесь.
2. Статус. Что происходит? Это все еще продолжается?
3. Будущий статус: что дальше?
4. Результаты и результаты: Эй, что случилось?

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

8. Снижение когнитивной нагрузки

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

• Действия и информация с фрагментами. Большинство людей могут обрабатывать семь плюс-минус два фрагмента информации при их обработке. Например, разделение телефонных номеров обычным способом 3-3-4, а не 10-значной последовательностью, приводит к меньшему количеству ошибок.
• Помните правило трех щелчков мышью — для поиска любой информации не требуется более трех щелчков мышью.
• Минимизируйте отзыв в пользу распознавания — общие изображения и значки в контексте помогают пользователям определять функциональные возможности, думать о корзине и звонке. значки (обычно используются для уведомлений) и другие часто используемые значки, которые запускают уже существующую память.Это также означает, что не следует брать широко используемый значок, который понимает большинство людей, а затем использовать его для обозначения чего-то еще, вы просто запутаете людей.

9. Сделайте его доступным

Дизайн пользовательского интерфейса должен учитывать проблемы доступности. В сети это часто означает обеспечение доступа к продукту и его использования для лиц с нарушениями зрения. Не забывайте и о дальтонизме. Примерно 1 из 12 мужчин (это примерно 8%) и 1 из 200 женщин (примерно 0,5%) в той или иной степени страдают дальтонизмом.Используйте цвет, чтобы подчеркнуть и подчеркнуть, но не полагайтесь исключительно на цвет для передачи информации.

10. Включите отзывы пользователей в пользовательский интерфейс

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

11. Гибкость

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

12. Визуальная структура

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

13. Диалоги должны завершаться

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

14. Обеспечьте четкий следующий шаг

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

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

Лучшие инструменты дизайна пользовательского интерфейса 2021

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

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

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

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

(Изображение предоставлено Mockups)

01. Mockflow

Лучший инструмент для проектирования пользовательского интерфейса для базовых каркасов

Технические характеристики

Система: Mac, Windows, Интернет

Бесплатный план: Да

Бесплатная пробная версия для платной версии : 7 дней

Причины для покупки

+ Ориентация на каркасы + Быстрый и простой + Бесплатный план

Причины, которых следует избегать

-Лучшие функции требуют оплаты

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

(Изображение предоставлено: Balsamiq)

02. Balsamiq

Лучший инструмент для проектирования пользовательского интерфейса для быстрых каркасов

Технические характеристики

Система: Mac, Windows, Интернет

Бесплатный план: Нет

Бесплатная пробная версия для платной версии : 30 дней

Причины для покупки

+ Удобный интерфейс + Быстрая работа + 30-дневная бесплатная пробная версия

Причины, по которым следует избегать

-Нет бесплатной версии

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

(Изображение предоставлено Axure)

03. Axure

Лучший инструмент для проектирования пользовательского интерфейса для технического дизайна пользовательского интерфейса

Технические характеристики

Система: Mac, Windows

Бесплатный план: №

Бесплатная пробная версия для платной версии: 30 дней

Причины для покупки

+ Создание сложных прототипов + 30-дневная бесплатная пробная версия

Причины, по которым следует избегать

-Нет бесплатного плана -Нет веб-версии

Axure уже давно является одним из лучших инструментов для дизайна пользовательского интерфейса на рынке. и отлично подходит для более сложных проектов, требующих динамических данных.С Axure вы действительно можете сосредоточиться на создании более технических проектов, требующих особого внимания, когда дело касается структуры и данных. Обратите внимание, что существуют версии Axure для Windows и Mac, но нет веб-версии и бесплатной версии.

(Изображение предоставлено Adobe)

04. Adobe Comp

Лучший инструмент для дизайна пользовательского интерфейса для каркасов iPad

Технические характеристики

Система: iOS, Android

Бесплатный план: Да

Бесплатная пробная версия платной версии: Нет

Причины для покупки

+ Бесплатно + Хорошо работает на планшетах + Интегрируется с Creative Cloud

Причины, по которым следует избегать

-Нет бесплатной пробной версии

Adobe Comp — лучший инструмент для дизайна пользовательского интерфейса для тех, кто создает и разрабатывает концепции идти.У вас есть iPad или аналогичный планшет с умным карандашом? Если вдохновение приходит, когда вы находитесь вне дома, оно позволяет вам разработать новую концепцию в автобусе, поезде, самолете или просто сидя на скамейке в парке.

Приложение можно загрузить и использовать бесплатно: вам просто нужен Adobe ID, который также можно бесплатно настроить. Тем не менее, если вы заплатите за Creative Cloud, вы получите еще больше пользы от него, так как он может легко подключить вас ко всем вашим ресурсам — фотографиям, цветам, кистям, формам, шрифтам, стилям текста и графике — через CreativeSync. .

Лучшие на сегодняшний день предложения Adobe Creative Cloud

(Изображение предоставлено: Sketch)

05. Sketch

Лучший инструмент дизайна пользовательского интерфейса для создания прототипов на Mac

Технические характеристики

Система: Mac

Бесплатный план: №

Бесплатная пробная версия платной версии: 30 дней

Причины для покупки

+ Промышленный стандарт + Мгновенный предварительный просмотр на мобильных устройствах + Вложенные объекты

Причины, по которым следует избегать

— Только Mac

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

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

Обратите внимание, что Sketch предназначен только для Mac, и бесплатной версии нет. Тем не менее, многие по-прежнему предпочитают тот факт, что вы можете купить его за разовую плату, в то время как полная версия его основного конкурента Adobe XD требует ежемесячной подписки.

(Изображение предоставлено Prot.io)

06. Proto.io

Лучший инструмент дизайна пользовательского интерфейса для создания прототипов в браузере

Технические характеристики

Система: Интернет

Бесплатный план: Нет

Бесплатная пробная версия для платная версия: 15 дней

Причины для покупки

+ Интернет-версия + Многофункциональность + Гибкость и расширяемость

Причины, по которым следует избегать

-Нет бесплатной версии

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

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

Плагины Sketch и Photoshop действительно помогают, если вы хотите проектировать с использованием других инструментов, но Proto.io хорошо справляется со сквозным процессом проектирования. Другие функции, такие как пользовательское тестирование, также помогут проверить ваши проекты. Обратите внимание, что бесплатного плана нет, но доступна 15-дневная бесплатная пробная версия без предоставления данных кредитной карты.

(Изображение предоставлено Adobe)

07. Adobe XD

Лучший инструмент для проектирования пользовательского интерфейса для создания прототипов в Windows

Технические характеристики

Система: Windows, Mac

Бесплатный план: Да

Бесплатная пробная версия платной версии : 15 дней

Причины для покупки

+ Промышленный стандарт + Работает на Windows + Бесплатные и платные планы

Причины, которых следует избегать

— Кривая обучения

Запущенный в 2016 году Adobe XD быстро стал популярным среди дизайнеров, и теперь конкурирует со Sketch в качестве отраслевого стандарта для цифрового прототипирования.Хотя каждое приложение может рекомендовать его по сравнению с другим, XD больше всего привлекает Sketch тем, что он работает как на Windows, так и на Mac.

Если вы увлеченный пользователь Adobe и новичок в XD, вам может не понравиться интерфейс Adobe с самого начала — это скачок, если вы какое-то время занимались дизайном в Photoshop. Но он не уступает другим ведущим инструментам и того стоит, если вы большой поклонник Adobe.

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

Также ознакомьтесь с нашими рекомендациями по плагинам Adobe XD.

(Изображение предоставлено Marvel)

08. Marvel

Лучший инструмент дизайна пользовательского интерфейса для быстрого прототипирования

Технические характеристики

Система: Интернет, iOS, Android

Бесплатный план: Да

Бесплатная пробная версия платной версии : 7 дней

Причины для покупки

+ Интернет + Хорошая интеграция + Бесплатный план

Причины избегать

-Нет приложений для Windows или Mac

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

(Изображение предоставлено Figma)

09. Figma

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

Технические характеристики

Система: Windows, Mac, Интернет, iOS, Android

Бесплатный план: Да

Бесплатно пробная версия для платной версии: 7 дней

Причины для покупки

+ Подходит для совместной работы + На основе браузера + Настольные и мобильные приложения

Причины, по которым следует избегать

-Некоторые платные планы дорогие

Figma — еще одна браузерная платформа, которая позволяет вам быстро составлять и проектировать интерфейсы.У него также есть мобильные приложения и настольные приложения для Windows и Mac.

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

(Изображение предоставлено UXPin)

10.UXPin

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

Технические характеристики

Система: Windows, Mac, web

Бесплатная пробная версия: Да

Бесплатная пробная версия для платной версии: 14 дней

Причины для покупки

+ Тысячи готовых ресурсов + Отличная поддержка клиентов + Бесплатная версия

Причины, которых следует избегать

-Может быть медленным

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

UXPin поставляется с тысячами готовых компонентов для iOS, Material Design, Bootstrap и других распространенных фреймворков, так что вам не придется каждый раз изобретать велосипед. Служба поддержки клиентов великолепна, и в ней есть много возможностей для совместной работы, так что вы можете вовлекать заинтересованных лиц по своему усмотрению.

Статьи по теме:

Обзор лучших предложений на сегодня

тем — iOS — Руководство по человеческому интерфейсу

Темы дизайна для iOS

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

Три основные темы отличают iOS от других платформ:

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

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

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

Принципы проектирования

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

Эстетическая целостность

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

Консистенция

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

Прямое манипулирование

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

Обратная связь

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

Метафоры

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

Пользовательский элемент управления

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

Дизайн интерфейса | Руководство по веб-стилю 3

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

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

Рисунок 4.10. Независимо от размера вашего сайта, пользователи видят только одну страницу за раз.

Понятные средства навигации

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

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

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

Рисунок 4.11 — Заголовки необходимы как для идентификации сайта, так и для согласованной навигации.www.digital-web.com

Без тупиковых страниц

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

Рисунок 4.12. Пользователи могут заходить на сайт где угодно, и им нужны мгновенные подсказки для идентификации сайта и маркеры «вы здесь».

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

Прямой доступ

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

Простота и последовательность

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

Рисунок 4.13. Сайт Opera — это шедевр, сочетающий высокую функциональность и сдержанные элементы интерфейса. www.opera.com

Лучшие информационные конструкции никогда не замечаются. Как только вы узнаете, где находятся стандартные ссылки на графике заголовка страницы, интерфейс становится почти невидимым. Навигация проста и никогда не конкурирует с контентом за ваше внимание (рис.4.14).

Рисунок 4.14. Последовательные заголовки Adaptive Path позволяют пользователям сразу увидеть структуру сайта.

Для максимальной функциональности и удобочитаемости дизайн вашей страницы и сайта должен основываться на едином шаблоне модульных единиц, которые используют одни и те же базовые сетки макета, графические темы, редакционные соглашения и организационные иерархии. Цель — быть последовательным и предсказуемым; ваши пользователи должны чувствовать себя комфортно, исследуя ваш сайт, и быть уверенными в том, что они смогут найти то, что им нужно.Графическая идентичность серии страниц веб-сайта дает визуальные подсказки для непрерывности информации. Меню заголовка, присутствующее на каждой странице сайта Capgemini, создает единый пользовательский интерфейс и фирменный стиль (рис. 4.15).

Рисунок 4.15. Capgemini предлагает четкую идентификацию сайта и навигацию, которая никогда не конкурирует с содержанием страницы за внимание читателя.

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

Целостность и стабильность конструкции

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

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

Обратная связь и диалог

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

Пропускная способность и взаимодействие

Пользователи не потерпят длительных задержек. Исследования показали, что для большинства вычислительных задач порог разочарования составляет около десяти секунд.Дизайн веб-страниц, плохо «настроенный» на скорость доступа к сети типичных пользователей, только расстроит их. Проверьте журналы своего веб-сайта, чтобы убедиться, что вы понимаете типичное местоположение пользователя и сетевые подключения. Например, если у вас много международных пользователей, вы можете быть более консервативными в отношении больших изображений на своих страницах (рис. 4.16).

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

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

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

Условные обозначения при проектировании интерфейсов

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

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

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

Что находится в области заголовка?

Заголовки веб-страниц

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

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

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

Рисунок 4.18 — Различные варианты оформления заголовков и маркеры «вы здесь».

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

Правый или левый столбцы для навигационных ссылок?

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

Рисунок 4.19 — Классическая левая локальная навигация с иерархическими списками.

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

Маршруты для навигации

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

Рисунок 4.20 — Два примера цепочек навигации внутри или под заголовком страницы.

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