![](https://habrastorage.org/getpro/habr/upload_files/80d/934/f97/80d934f97875140a7020444ea64ba280.png)
Я подготовила для тебя потрясающий шорт-лист полезных UI-типсов (ну те, которые прям мастхев в моей ежедневной практике). Думается мне, что матерые дизайнеры уже все это знают, тем не менее повторить все же будет полезно, так как типсов бесконечное множество, а мы постоянно что-то теряем из виду.
Статья поможет тебе, если ты новичок в дизайне или просто немного взаимодействуешь с ним и хочешь сделать своих пользователей счастливее ????
1 Tip. Заголовок и текст
Хороший заголовок в шапке должен иметь контрастность по отношению к остальному контенту, тем самым привлекая внимание пользователя и направляя его к описанию карточки. Чтобы достичь правильной иерархии, воспользуйся этими советами:
Используй выравнивание по левому краю – это повысит читабельность.
Используй контрастный шрифт и цвет для заголовка.
-
Убавь контраст у второстепенного текста.
Снизить контрастность не прибегая к настройкам прозрачности тебе поможет формула:
1. Выбери свой цвет заголовка (конечно же необязательно black).
2. Перейди в режим HLS.
3. Первую ячейку пропускаем, вторую ячейку делаем {х-2}, третью ячейку {х+5}
(например: у меня было значение: HLS 240 | 12 | 10. Стало: HLS 240 | 10 | 15). -
Размер второстепенного текста должен быть меньше основного.
Полезная формула: {x / 1.25} (например: заголовок равен 42px делим 1.25 получаем 33).
![Как подобрать цвет Как подобрать цвет](https://habrastorage.org/getpro/habr/upload_files/19f/076/585/19f0765852229f0e894860175aa9cc2e.png)
![1 tip 1 tip](https://habrastorage.org/getpro/habr/upload_files/a81/0cd/222/a810cd222f4def21d976ae3591691d98.png)
2 Tip. Что скрыто за иконкой
При работе с иконками в быстром меню, помни: пользователь довольно индивидуальная личность с огромным багажем опыта и может интерпретировать твои иконки опираясь на него или вовсе на вещи, о которых тебе никогда не узнать ????.
Чтобы быть френдли для всех всех всех, добавь текстовую подпись рядом с иконками, которая будет точно описывать ее использование. Не добавляй длинные и тяжелые формулировки, пиши простым и понятным языком не усложняя свой интерфейс.
Держи это правило при себе, особенно когда проектируешь для тач устройств, так как они не имеют ховер-эффектов.
![2 tip 2 tip](https://habrastorage.org/getpro/habr/upload_files/e23/0c9/68b/e230c968bde6d0ce4edd389d9fb0961b.png)
3 Tip. Выравнивание непохожих объектов
Часто нужно выравнивать разно размерные и равновесные элементы. Конечно же, если ты задашь одинаковое расстояние между объектами - результат не будет тебя устраивать, и уж точно не будет выглядеть аккуратно.
Для исправления этой проблемы собери элементы в одинаковые контейнеры, создай автолаяут (autolayout) и задай между ними расстояние. Не выбирай размер контейнера на глаз, для начала выбери самый большой блок и на основе него создай остальные:
Помести надпись во фрейм и размести надпись по центру, а так же не забудь в блоке "Ограничения" (constraints) добавить позиционирование по центру.
Заключи иконку и надпись в автолаяут, выбери позиционирование по центру (при редактировании можно будет с легкостью менять между ними расстояния).
![Как собрать auto layout Как собрать auto layout](https://habrastorage.org/getpro/habr/upload_files/b9d/ded/e18/b9ddede1863d7ba854efa6ebc8cb4946.png)
![3 tip 3 tip](https://habrastorage.org/getpro/habr/upload_files/0b7/df5/5c4/0b7df55c4cb4684d31b153bbcd05fedd.png)
4 Tip. Рефакторинг интерфейса
В процессе проектирования ты можешь не заметить как создается несколько элементов выполняющих одну и ту же функцию. Повторяющиеся функции могут создать лишнюю нагрузку на пользователя, и на знакомство и погружение в интерфейс уйдет больше времени чем ожидалось.
Объединяй похожие функции вместо разделения на мелкие детали. Проводи рефакторинг пользовательского интерфейса, чтобы отслеживать и объединять похожие функции
![4 tip 4 tip](https://habrastorage.org/getpro/habr/upload_files/da3/9bb/4a2/da39bb4a2ce7eafdeeb4c5df85d5bad8.png)
5 Tip. Меньше полей для формы ввода
Каждое лишнее поле, которое мы предлагаем пользователю для заполнения, довольно часто заставляет его развернуться и покинуть наш ресурс в пользу места, где его ничего не тревожит. Не все быстро печатают, и конечно же, не у всех недостаточно времени для долгого заполнения ненужной формы.
Обязательно убедись в том, что каждое твое поле проходит критический шквал вопросов о его важности, и удали как можно больше полей. Если уж ты удалил все, что смог и остались только важные-важные для заполнения – рассмотри возможность их переноса на отдельную страницу (после отправки формы).
Также подумай о том, а не решил ли уже кто-то проблему за тебя? Быть может быстрая регистрация через сторонние и привычные сервисы (например через gmail) уже решает твою проблему. Формы очень просто сделать большими и даже гигантскими, но наша задача как дизайнера от бизнеса – это увеличить конверсию, а задача как дизайнера для пользователя – не раздражать и быть приятным.
![5 tip 5 tip](https://habrastorage.org/getpro/habr/upload_files/989/ae9/b11/989ae9b11199b1770ca4489c3a1778b4.png)
6 Tip. Повысить UX конверсию
Повысить UX конверсию можно с помощью правильно подобранного фото или иллюстрации. Размещая визуальные образы, старайся подбирать фото или картинки таким образом, чтобы взгляд был направлен в сторону контента.
Мы все следим за линией взгляда другого человека. Этот эффект поможет тебе сосредоточить пользователей на отдельных элементах или добраться до нужного раздела если нужно применить скролл.
![6 tip 6 tip](https://habrastorage.org/getpro/habr/upload_files/bc5/b5f/554/bc5b5f55491a6171f4023a0c261b711f.png)
7 Tip. Переключатели
Правильно проектируй быстрые переключатели. Когда ты проектируешь интерфейс утверди свои решение с разработкой и убедись, что выбранные визуальные переключатели будут соответствовать опыту использования.
Решив поместить тумблеры не забывай, что это быстрый эффект включения и выключения, а это значит, что эффект вызванный переключением должен сразу же вступить в силу. Если с твоим переключателем все не так – смело меняй на чекбокс.
![7 tip 7 tip](https://habrastorage.org/getpro/habr/upload_files/51d/a6e/ed5/51da6eed521323702dd9ff68a9fd923d.png)
8 Tip. Чипсы и настройки
При большом количестве меток, бывает крайне тяжело рассмотреть какой же все-таки элемент выбран. Чекбоксы и название параметра сливаются воедино, и пользователь вынужден тратить больше времени, чтобы понять куда нажимать. Предотврати ситуацию с помощью добавления чипсов, тем самым предоставив четкое визуальное разделение вариантов.
![8 tip 8 tip](https://habrastorage.org/getpro/habr/upload_files/599/c00/0e8/599c000e85062d5bb0309bcb38fa25d3.png)
9 Tip. Оптимизируй длинные списки
Используй раскрывающееся меню для отображения большого списка параметров (если вариантов больше 6 или 7). Согласно закону Миллера, человек может удерживать в памяти только 7 (+ -) элементов, поэтому не перегружай пользователя большим количеством параметров
![9 tip 9 tip](https://habrastorage.org/getpro/habr/upload_files/79c/547/064/79c547064a96e91132c5589c98389477.png)
10 Tip. Прозрачный интерфейс
Если в твоем интерфейсе параметров меньше 4, отличным решением будет постоянное отображение списка. Таким образом пользователь может легко их запомнить или сравнить, что снижает когнитивную нагрузку и помогает интерфейсу быть более прозрачным.
![10 tip 10 tip](https://habrastorage.org/getpro/habr/upload_files/df4/8b1/630/df48b163091b52b814915fd04e72caae.png)
11 Tip. Область нажатия
Не забывай про интерактивные области в мобильной и десктоп версиях. Твои кнопки и метки должны быть включены в большую интерактивную область. Согласно закону Фиттса – размер мишени играет важную роль. Часто у новичков в дизайне можно встретить флажки и переключатели крошечного размера, которые просто не позволяют нажать на них (особенно на мобильных устройствах).
Поэтому в моменте проектирования отметь области нажатия, и обязательно проговори этот момент с командой разработки. Сделать это легко инструментом Slice в Figma. Исходя из своего опыта, для мобильной версии я рекомендую проектировать область нажатия не меньше 42рх.
![11 tip 11 tip](https://habrastorage.org/getpro/habr/upload_files/da5/81f/eb3/da581feb3260444fb6bfdfece3a5074a.png)
12 Tip. Оптимальное количество строк в тексте
Оптимизируй количество строк в своем тексте. Если ты проектируешь для десктоп версии обрати внимание на то, чтобы твой текстовый блок не превышал 700 пикселей. Например, согласно исследованию Мери К. Дайсон и Марка Хейзелгрува ученые отметили, что пользователи понимали текст лучше, когда читали строки длиной в 55 символов, в отличие от тех, кто читал строки до 100 символов. Множество исследований подтверждают, что людям нравятся тексты с длиной от 55 до 70 символов.
![12 tip. 55-70 символов для одной строки 12 tip. 55-70 символов для одной строки](https://habrastorage.org/getpro/habr/upload_files/f8d/08c/330/f8d08c330757894451513dd8e1e33bdf.png)
13 Tip. Дегенеративное действие
Частая ошибка многих дизайнеров в том, что в дизайне нет разумного различия между обычными и дегенеративными действиями. Во многих интерфейсах есть кнопка удаления, стереть или отменить, которая сливается с активным действием, или действием не несущим серьезных последствий.
Рекомендую отметить кнопку сигнализирующим цветом и правильно определить для нее место. Кнопка удаления не должна стоять вблизи с частыми нажатиями и для нее лучше задать больше охранного поля, чтобы пользователь случайно не нажал на нее.
Если кнопка удаления стоит рядом с кнопкой сохранения определи для нее второстепенные признаки (цвет, размер, тип и размещение).
Кроме того, после функции удаления лучше не переспрашивать пользователя: А уверен ли ты в своем выборе? Потому что, это лишний раз подвергает его сомнениям. Дай пользователю почувствовать больше уверенности, предоставив ему возможность отмены действия, не переспрашивая постоянно его о чем то.
![13 tip 13 tip](https://habrastorage.org/getpro/habr/upload_files/22b/177/899/22b177899e21c8aad62dbfa3e404a6eb.png)
14 Tip. Горячие клавиши
Позволь им выполнить повторяющиеся задачи быстрее чем они это делают с помощью графического интерфейса. Горячие клавиши значительно ускорят процесс выполнение задач. Например, раньше для gmail использовали клавиши J и K для следующего и предыдущего письма, а в опросниках часто используют клавиши R и T для быстрого выбора ответа, или в интерфейсе терминала Y и N.
![14 tip 14 tip](https://habrastorage.org/getpro/habr/upload_files/35e/e23/918/35ee2391883fbea060fba9a11b402d48.png)
И помни, твой дизайн становится прекраснее, когда ты активно используешь фреймы, автолаяуты и компоненты, даже если заказчик не просит тебя создавать библиотеку или не разбирается в твоих макетах. Ты должен быть аккуратен в своих рабочих файлах и осознавать, что после себя ты можешь оставить кучу мусора, в которой будет разбираться "кто-то еще", или же аккуратный рабочий проект.
PS. Повторюсь, типсов огромное количество, и охватить их за одну статью – невозможно. Если тебе интересно (напиши комментарий, или плюсани в личку), я могу периодически делать статьи с различными типсами для улучшения пользовательского опыта и твоего интерфейса ????.
Комментарии (7)
AlexanderAstafiev
23.05.2022 13:28Используй выравнивание по левому краю – это повысит читабельность
Как это "использовать", если выравнивание по левому краю — это поведение текста по-умолчанию?
Почему выравнивание по левому краю повышает читабельность? В книгах (качественных!) выравнивание по ширине. И гифенация (расстановка мягких переносов). Разве читабельность в книгах от этого страдает?
UPD: не сразу увидел, что пункт относится к заголовкам. Когда это осознал, облился по́том. Простите.
AlinaZykina Автор
23.05.2022 14:37Здесь говорится не о текстовом блоке, а о тексте внутри блока. Если мы расставим значение text align – center глаза читателя быстро устанут, выявить нужную информацию также не легко.
Поэтому если использовать выравнивание по центру самого текста (внутри блока) то лучше это сделать в блоках, где количество строк не превысят 2 строк
YaShahov
23.05.2022 18:10Закон Миллера в девятом пункте не применим.
https://bureau.ru/bb/soviet/20160628/
В пункте 12 название про количество строк, а содержание про количество символов в строке. Последнее предложение странно звучит. Что значит «людям нравятся тексты <...> до 100 символов»? Ваша любимая книга явно содержит больше 100 символов.
Отдельно занудное замечание: символ ± есть во многих шрифтах и если он ставится, то нужно указать диапазон изменения значения, иначе это не имеет смысла. В законе Миллера это ±2.AlinaZykina Автор
23.05.2022 20:07В 12 пункте говорится о том что, не только строки имеют значение но и символы. Допустим проектируя текстовый блок легко можно задать ему ограничение в 700 рх, но напечатать 13 размером шрифта или 48. Поэтому обращать внимание нужно и на кол строк – который строят твой текстовый контейнер и так же на кол символов.
Замечу что здесь говорится про веб-проектирование, я не охватываю верстку книг. Действительно в книгах можно заметить 100 символов, но это книга вы изначально пришли к ней чтобы погрузиться. С сайтами не так, пользователь не хочет тратить время на долгое чтение, в основном он ищет нужную для себя информацию и идет дальше.
И да мы должны понимать где будет размещен наш текст, на рекламной плашке – где лучше применить 50-70 символов, или в статье где можно применить 100 символов.
Закон Миллера. Если информация важная – то ее не стоит прятать, а нужно глубоко подумать как не затруднять к ней доступ. В моем примере показано что пользователь выбирает город – это список признаков, которых не нужно запоминать, ты задал его один раз и ушел. В вашем примере в статье говорится о раскрывающимся меню Офиса-2000 года, где спрятались основные функции программы – так делать плохо.
Большое спасибо за рассказ про символ ????
Bone
Пункт 3 я не понял, по-моему стало хуже. Было одинаковое расстояние между элементами, а стало хаотичное.
Aleksandr-JS-Developer
Теперь они расположены равномерно в блоке, независимо от размера текста. В данном случае разное расстояние между самими иконками неважно.
Гораздо интереснее, когда таким подходом пользуются при проектировании меню, которое динамически меняется. Стоит менеджеру вписать что-то длинное в пункт меню и весь стайлгайд идёт лесом потому, что меню - это просто полоска с текстовыми пунктами и они туда перестают влазить. Естественно, это всё вскрылось в пятницу вечером. Пришлось делать пункты шириной текст + отступы по 8px по сторонам. С тех пор так там всё и работает....