CSS:

 .dialog {
    положение: абсолютное;
    слева: 50%;
    поле слева: -315px;
    ширина: 630 пикселей;
    z-индекс: 100001;
}
.диалог .тело {
    фон: url(/img/dialog.png) 0 0; /* полупрозрачное изображение .png */
    отступ: 40px 13px 10px 40px;
} 

В качестве альтернативы вы также можете использовать лайтбоксы на основе JavaScript или тени с использованием CSS3-атрибутов, которые мы описали ранее, но вы должны знать, что Internet Explorer их не поддерживает.

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

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

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

Campaign Monitor укажет вам правильное направление, когда вы начнете создавать кампанию по электронной почте.

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

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

На странице форм Wufoo есть большое дружественное сообщение с приглашением создать новую форму, если ее еще нет.

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

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

Вы можете добавить состояние нажатой кнопки с помощью CSS, стилизовав псевдокласс active рассматриваемой ссылки. Так, например, если ваш якорь имеет класс add_task_button , вы можете стилизовать его активный класс, указав add_task_button:active .

Кнопки в Highrise на самом деле показывают нажатое состояние, когда вы нажимаете на них, предоставляя пользователю удовлетворительное ощущение отклика.

7. Ссылка на страницу регистрации со страницы входа

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

У вас нет учетной записи Delicious? Без проблем; на странице Delicious log — указана ссылка вверх по знаку — .

В Goplan есть красивая цветная кнопка в журнале — на странице, указывающая на знак — вверх по странице.

Облегчите жизнь этим людям, разместив ссылку для регистрации в своем журнале — на страницах . Если у них еще нет учетной записи, им не нужно искать страницу регистрации. Наши исследования подтверждают: у 18% есть форма входа или ссылка на форму входа, размещенная рядом с ней (например, YouTube, Reddit, Digg, Lulu, Metacafe).

8. Контекстно-зависимая навигация

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

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

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

9. Больше внимания ключевым функциям

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

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

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

10. Встроенное видео

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

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

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

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

Что такое дизайн пользовательского интерфейса (UI)? Руководство для начинающих

«Как мне это использовать?» Это последние пять слов, которые хочет услышать UI-дизайнер.

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

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

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

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

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

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

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

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

Хотя для каждого приложения требуется уникальный интерфейс, есть несколько фундаментальных принципов, которыми следует руководствоваться в любом проекте. Вы найдете десятки в Интернете и в учебниках, но есть несколько наиболее известных и уважаемых. К ним относятся «10 эвристик юзабилити для дизайна пользовательского интерфейса» Якоба Нильсена, «Восемь золотых правил дизайна интерфейсов» Бена Шнейдермана и «Принципы интерактивного дизайна» Брюса Тоньяццини. Большинство из этих принципов пересекаются, поэтому мы сконцентрируем и суммируем их ниже.

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

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

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

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

2. Дайте пользователям почувствовать, что все под контролем.

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

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

Источник изображения

3. Предоставьте отзыв.

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

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

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

Источник изображения

4. Разрешить пользователям устранять ошибки.

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

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

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

Источник изображения

5. Предотвращение ошибок.

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

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

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

Источник изображения

6. Не полагайтесь на то, что пользователи запомнят информацию.

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

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

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

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

Источник изображения

7. Будьте проще.

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

8. Дизайн для разных типов пользователей.

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

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

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

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

1. Поймите болевые точки вашего пользователя.
2. Пишите пользовательские истории.
3. Проведите инвентаризацию интерфейса.
4. Определение шаблонов проектирования.
5. Создать прототип.

1. Поймите болевые точки вашего пользователя.

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

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

2. Пишите пользовательские истории.

После того, как вы провели интервью, опросы и тестирование пользователей, у вас будет много полезной информации о ваших пользователях. Одним из способов использования и организации этой информации является создание пользовательских историй. По словам архитектора UI/UX Тома Бринтона в статье на UXBooth, пользовательские истории описывают основную цель, которую пользователь хочет достичь с помощью приложения. Обычно они состоят из одного предложения и имеют следующий формат: «Как пользователь, я хочу… [некоторая цель]».

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

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

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

3. Проведите инвентаризацию интерфейсов.

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

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

4. Определение шаблонов проектирования.

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

5. Создать прототип.

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

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

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

1. Justinmind
2. Эскиз
3. Марвел
4. Wondershare Мокитт
5. Студия Инвидения
6. Фигма
7. Adobe XD

1. Justinmind

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

2. Sketch

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

3. Marvel

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

4. Wondershare Mockitt

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

5. Invision Studio

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

6. Figma

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

7. Adobe XD

Adobe XD — это универсальный инструмент, используемый дизайнерами UI и UX. Вы можете создавать каркасы, анимировать, создавать прототипы, сотрудничать и многое другое. Поскольку Adobe XD основан на векторах, как Sketch и Invision Studio, он позволяет создавать высококачественные проекты для любого экрана. Есть бесплатный план, а также платные планы для частных лиц и предприятий.

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

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

1. Wine + Peace

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

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

2. Наба Забих

Наба Забих — свадебный фотограф, путешествующий по США и миру на свадьбы. Под девизом «Я верю в волшебство» Заби разработала свой сайт так, чтобы он выглядел романтично и сказочно, с естественной цветовой гаммой и шрифтом, последовательно используемым внизу страницы.

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

3. Delassus Group

Delassus Group – марокканский производитель закусочных томатов, цитрусовых, винограда, авокадо и цветов. При первом посещении сайта вы увидите 60-секундное видео, в котором объясняется, когда была впервые основана Delassus Group, что она производит и какова ее миссия в области социальной ответственности.

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

4. Привет, кожа

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

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

5. ГаллоБазис

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

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

6. Spain Collection

Spain Collection — это туристический веб-сайт, предлагающий роскошные путешествия по Испании и Португалии. Его девиз: «Живи собственным уникальным приключением!» Поэтому понятно, почему веб-сайт предлагает пользователю такую ​​большую автономию.

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

7. Приложение Tasty Burger

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

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

8.

Dribbble

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

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

9. Приложение Linkedin

Источник изображения

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

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

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

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

This entry was posted in Популярное