Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>11 ноя 2022</li>

3 <li>0</li>

4 </ul>Объясняем значения девяти слов, которые используют в профессии.

5 Иллюстрация: Polina Vari для Skillbox Media

6 Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

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

8 Объясняем девять терминов, которые важны в работе UX-дизайнера.

9 О том, кто такой UX-дизайнер и чем он занимается, -<a>читайте в нашей подробной статье</a>.

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

11 Обычно прогресс-бар выглядит как длинная полоска, на которой отображается прогресс выполнения процесса:

12 Скриншот: Skillbox MediaСкриншот: Skillbox MediaВ мобильных версиях может встречаться в виде кружочка. Например, как в iOS:

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

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

15 Часто индикатор загрузки делают круглым, поэтому его называют "крутилкой":

16 Изображение: AppleНо он не всегда может быть "крутилкой":

17 Скриншот: Skillbox MediaИзображение: Daniel Tan /<a>Dribbble</a>Элемент интерфейса, который показывает дерево переходов по разделам системы или сайта: от главного до текущего. Цепочка помогает пользователю вернуться в любой раздел и не запутаться в структуре продукта.

18 Обычно "хлебные крошки" используют в сложных продуктах: например, в интернет-магазинах или файловой системе компьютера:

19 Скриншот: Skillbox MediaИзображение: Vitaly Zimmer /<a>Behance</a>Изображение: Anastasiya Kars /<a>Behance</a>Способы распределения информации на странице и в программе.

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

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

22 Кстати, переключение экранов в смартфонах - тоже вид пагинации:

23 Скриншот: Skillbox MediaПрокрутка, в отличие от листания, не делит информацию на явные части, а показывает всё содержимое как есть. Пользователь видит только то, что вмещается у него в экране. Чаще всего прокрутку используют в соцсетях:

24 Изображение:<a>Cuberto</a>/<a>Dribbble</a>Совокупность настроек, которые как-либо меняют функции интерфейса. Например, переключение раскладки клавиатуры в компьютере и разные режимы горячих клавиш в Photoshop - это модальность.

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

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

27 Изображение: XTB /<a>Artur Choiński</a>/<a>Dribbble</a>Изображение: Bora DAN /<a>Dribbble</a>Свойство системы, когда она даёт какой-либо ответ на действия пользователя. Например, если человек жмёт виртуальную кнопку в телефоне, она меняет цвет. А если программа зависла, она показывает индикатор загрузки, чтобы показать, что идёт какой-то процесс.

28 В iOS строки меняют цвет, чтобы пользователь приготовился к тому, что сейчас окно поменяется:

29 Скриншот: Skillbox MediaПри наведении курсора смайлики меняют размер, чтобы показать пользователю, что на них можно кликнуть:

30 Изображение:<a>Aaron Iker</a>/<a>Dribbble</a>Обратная связь может быть и "гиперактивной" - когда вокруг много лампочек и всё мигает как новогодняя ёлка, это будет раздражать пользователя.

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

32 Изображение: Skillbox MediaА если цвета недостаточно контрастные, то слабовидящий пользователь не сможет различить, где текст, а где его фон:

33 Скриншот:<a>Coolors</a>/ Skillbox MediaСвойство интерфейса, которое определяет количество полезной информации для пользователя. Например, информативность этого графика очень низкая:

34 Изображение: Skillbox MediaЗдесь два жирных цветных столба, которые показывают одну простую вещь - 8 больше, чем 6. Ту же задачу можно решить либо простой фразой, либо математическим выражением - и тогда информативность вырастет в разы, хотя её суть не изменится:

35 8 > 6

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

37 Изображение: RonDesignLab / RD UX/UI /<a>Dribbble</a>А у этого приложения информативность низкая. Экран посередине предлагает выбрать посадочное место, но из-за перспективы правильно его определить невозможно. Более того, дизайнер изобразил много элементов интерьера самолёта, которые не влияют на выбор кресла:

38 Изображение: Rishabh Rai / Jai Sawle /<a>Behance</a>"Японские свечи" - пример высокой информативности. Обычно их используют биржевые трейдеры, чтобы следить за динамикой стоимости акций в определённом периоде. Читают их так:

39 <ul><li>конец верхнего "уса" свечи - самая высокая цена акции;</li>

40 <li>тело свечи - цена на начало и на конец указанного периода;</li>

41 <li>конец нижнего "уса" - самая низкая цена акции.</li>

42 </ul>Благодаря этому трейдер не забивает себе голову лишней графикой и видит только сухие цифры:

43 Изображение: Ghulam Rasool /<a>Dribbble</a>Инструмент тестирования интерфейса. Дизайнеры изучают рынок, определяют среднестатистические характеристики своих пользователей и придумывают себе персонажа, для которого они разрабатывают интерфейс.

44 Чем подробнее проработана персона, тем проще вам будет с ней взаимодействовать. Вот, например, каких персонажей придумывали дизайнеры сервиса по продаже автомобилей av.by:

45 Изображение:<a>av.by</a>Больше слов для дизайнеров

46 Больше о дизайне интерфейсов

47 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>