«Дизайн», упомянутый в этой статье, относится только к интерактивному и визуальному дизайну в интернет-индустрии в узком смысле;

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

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

Эта статья написана на основе официального сайта Ant Design и моего собственного мнения.Некоторые предложения и изображения в статье взяты из:Anta.design/components/…, потому что дел слишком много, поэтому мы пока потихоньку накапливаем материалы. Вторжение и удаление~~

Я начал обращать внимание на пользовательский опыт на конференции Ant Financial Experience Technology Conference, которая проходила в тот же день, что и конференция D2 в прошлом году, хотя я и не приходил на сайт, просто просмотр PPT и видео заставил меня почувствовать, что Профессия дизайнера и бэкэнд сказали нашему фронтенду: «Значит, ты не только это то же самое, что «раскрашивать страницу» (хотя я все еще мальчик-вырезание/(ㄒоㄒ)/~~)

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

Например: Почему Ant Design рекомендует использовать основной размер шрифта 14 пикселей? Ни слова от дизайнера: я нахожу этот размер шрифта приятным для глаз. Вместо этого он вычисляет лучший размер шрифта на основе расстояния чтения (50 см) и лучшего угла чтения (0,3) монитора компьютера, чтобы обеспечить наилучшее качество чтения для пользователей на наиболее часто используемых мониторах.

Потом я нашла официальный сайт Ant Design, увидела в правом верхнем углу «язык дизайна» и кликнула, как будто нашла клад!

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

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

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

Итак, возникает вопрос, В шестнадцатеричном формате так много значений цвета, как мне выбрать? Размер шрифта от 12px до 24px, как выбрать? Расстояние от 1px до npx, как выбрать?

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

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

0. Что такое хороший дизайн

Что такое хороший дизайн, у сотни людей в сердце есть сотня Гамлетов, но есть одна вещь, в которой большинство людей согласны: природа

• Я не знаю, что делать дальше?
• Я не знаю, каков результат того, что я только что сделал? Успех или неудача?
• "Отменить этот заказ? Да Отменить" Затем я выбираю "Отмена" Я отменил заказ?
• ...

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

Я думаю, что первое условие, которому должен соответствовать хороший дизайн, — это природа.

• Сделать поведение пользователей и взаимодействие человека с компьютером более естественным
• Применять объективные законы природы к дизайну интерфейсов

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

Я тут только об этом подумал.Ввиду нехватки времени,к систематическому обобщению не подошел.Я только об этом подумал,а яму сначала копать.

1. Минимализм: самый важный посыл пользователю

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

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

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

1. Минималистский дизайн

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

Как можно заметить

• На главной странице я порекомендую вам рекомендуемые модели сезона — iPhone 11 pro, и это единственная;
• На «странице со списком» товар занимает один экран, и отображается только самая основная информация, если вы хотите узнать больше, вы можете «узнать больше».
• Используйте один и тот же стиль на всем сайте
• ....

Мы видим, что некоторые из графических дизайнов Apple имеют следующие характеристики:

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

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

1.2 Функциональная простота

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

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

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

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

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

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

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

2. Унификация: снизить стоимость обучения пользователей

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

2.1 Цвет, размер шрифта

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

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

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

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

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

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

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

2.2 Макет

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

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

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

2.3 Последовательный копирайтинг

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

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

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

«Да», чтобы отменить заказ, но с учетом вариантов, отличных от «Да» и «Нет»

3. Feedforward: пусть пользователь знает, что делать

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

3.1 Использование навигации

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

• Меню навигации (Меню)
• хлебные крошки
• Вкладки
• Шаги
• Пагинация

3.2 Правильное использование подсказок и помощи формы

3.3 Предложите приглашение

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

4. Обратная связь: сообщите пользователям, что было сделано

• запрос в реальном времени
• Обратная связь в режиме реального времени (например, надежность пароля)
• loading

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

Кроме того, есть белый экран, который плохо обрабатывает сообщение об ошибке, так что пользователь не знает, что произошло.

5. Классификация: снизить затраты на связь и позволить пользователям быстрее получать информацию

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

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

5.2 Используйте разумное выравнивание: направляйте визуальный поток пользователя и позволяйте пользователям получать информацию более плавно.

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

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

• Сравнение первичных и вторичных отношений
• Сравнение общего балла
• Сравнение отношений состояний

5.4 Повторение одних и тех же элементов: быстрое определение связей между элементами

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

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

6.1 Оставайтесь дома: не переходите на страницу, если вы можете сделать это на текущей странице

• Редактирование на странице
  • Когда «Легко читать» важнее, чем «Легко редактировать», можно использовать «Нажмите, чтобы изменить».
  • Когда «Легко читать» является основным фактором, и в то же время должна быть выделена «Легкость редактирования» рабочей строки, можно использовать «Редактирование цепочки текста / значка».
• наложение
  • Удалить подтверждение (старайтесь избегать использования Modal, это нарушит работу пользователя)
  • Детали обычно находятся в списке, и пользователь может «навести курсор» / «щелкнуть» блок, чтобы загрузить более подробную информацию об элементе списка на текущей странице.
  • Завершите всю обработку процесса на одной странице
• Встраиваемый слой
  • Выпадающий список: поместите некоторые детали в раскрывающийся список
  • вкладка: классифицируйте сообщения и используйте вкладки для переключения отображения

6.2 Упрощенное взаимодействие

• Хорошо умеет перетаскивать
• Сортировать список
• перетащить загрузить

7. Профессионал: необходимые качества для разработчиков

7.1 Используйте точные и полные слова

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

7.2 Заглавные буквы и пунктуация

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

7.3 Относится ясно

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

---

Сложное упрощается, простое стандартизируется, стандартное упрощается, процессное автоматизируется, все так.