Дизайн чат-приложения: редизайн списка чатов, до и после
Список чатов от джуна: четыре иконки в шапке, шесть фильтров, уезжающих за экран, и полная дата в каждой строке. И тот же экран после исправлений. Каждое изменение рядом, причина каждого и бесплатный файл Figma.
У списка чатов одна задача: показать, кто написал, что сказал и нужен ли ответ. В первом черновике ниже есть все функции, о которых мог мечтать мессенджер, и он показывает их все сразу: четыре иконки в заголовке, поле поиска, которое объясняет само себя, шесть фильтров, убегающих за край, и полная дата в каждой строке. Исправление оставляет тех же людей и те же сообщения, но каждой части экрана даёт одну работу.
Весь экран, до и после
Черновик джуна
Исправлено
Слева глаз встречает четыре иконки, подсказку поиска из 47 символов, пять одинаковых радужных колец, ряд фильтров, который не заканчивается, и семь строк с однострочными сообщениями, датой и бейджем в каждой. Справа глаз встречает большой заголовок, одну кнопку, одно поле поиска, пять лиц, четыре чипа и пять строк, которые читаются как предложения.
| Черновик джуна | Исправлено | |
|---|---|---|
| Иконки в шапке | 4 | 1 |
| Подсказка поиска | 47 символов | «Поиск» |
| Чипы фильтров | 6, уходят за экран | 4, все видны |
| Время в строке | «10/24/26 9:41 AM» | «9:41», «Вчера», «Чт» |
| Бейдж непрочитанного | красный 20 px | синий 17 px, серый для заглушённых |
| Вкладки | 5 | 4 |
| Боковой отступ | 14 px слева, 12 px справа | 20 px с обеих сторон |
| Размеры текста | от 9 до 20 px | от 11 до 28 pt |
Исправление 1: одно действие в заголовке, поиск, который говорит «Поиск»
До
После
Четыре иконки и поле поиска, перечисляющее, что оно ищет, против одной кнопки и единственного слова «Поиск».
В заголовке черновика живут камера, карандаш, лупа и меню. Лупа расположена над полем поиска, у которого есть своя лупа, так что экран предлагает один и тот же поиск дважды.
Исправление оставляет одно действие, ради которого сюда приходят, написать новое сообщение, и даёт ему мягкую круглую кнопку фирменного синего цвета. Заголовок вырастает до большого, по тому же шаблону, что использует iOS, так что экран сначала сообщает, где вы находитесь. Поле поиска говорит «Поиск». Те 47 символов черновика, «сообщения, люди, группы и не только», описывали поле, которым все и так умеют пользоваться.
Правило на вынос: в заголовке одно действие, а полю с названием «Поиск» не нужно целое предложение.
Исправление 2: кольцо, которое значит «новое»
До
После
Пять одинаковых радужных колец и обрезанные имена против синего для новых, серого для просмотренных и целых имён.
Когда все кольца выглядят одинаково, кольцо не несёт никакой информации. Черновик даёт всем пяти историям один градиент, так что просмотренная история выглядит точно так же, как непросмотренная, а имена обрезаны до «Jessica M...» и «Daniel Ro...».
Исправление наполняет кольцо смыслом. Синее кольцо 2,5 px значит «новое». Серое кольцо 1,5 px значит «просмотрено».
Ваша собственная история стоит первой с маленьким плюсом, а каждое имя написано целиком: Jessica, Daniel, Amara, Leo. Короткие имена помещаются, и именно так люди друг друга зовут.
Правило на вынос: используйте цвет, чтобы разделить два состояния, и красьте только то состояние, которому нужно внимание.
Исправление 3: четыре чипа, один стиль, счётчик на своём чипе
До
После
Шесть контурных чипов в ряду шире экрана против четырёх чипов, которые помещаются, со счётчиком в виде бейджа.
В черновике шесть чипов в ряду 434 px на колонке 364 px. Шестой обрезан пополам, так что экран показывает человеку, что есть что-то ещё, но не даёт понять, что именно. Счётчики стоят в скобках внутри подписей, «Непрочитанные (12)» и «Группы (3)», из-за чего каждая подпись разной длины.
Исправление оставляет четыре: «Все», «Непрочитанные», «Избранные» и «Группы». Выбранный залит синим, остальные мягко-серые. Счётчик непрочитанных переезжает на свой чип как маленький синий бейдж, потому что это единственное число, которое людям нужно, и это тот же бейдж, который они увидят в строках ниже. Группы потеряли свой счётчик.
Каналы и Архив ушли из ряда. Это настоящие функции, и этот редизайн не рисует, куда они переехали, так что в полном приложении для них всё равно нужно найти место.
Правило на вынос: ряд фильтров должен заканчиваться внутри экрана, а выбранный должен быть единственным залитым.
Исправление 4: строки с человеком, двумя строками и коротким временем
До
После
Одна обрезанная строка, полная метка времени и красный бейдж с иконкой против двух строк, короткого времени и одного тихого бейджа.
Строка это сообщение в миниатюре, а черновик обрезает сообщение примерно после пяти слов: «Haha yes!! Send me the photos fro...». Место ушло на дату «10/24/26 9:41 AM» и на маленькую иконку булавки или динамика рядом с красным бейджем. Дата с годом и секундами это самое бесполезное, что можно поставить в строку для сообщения, пришедшего сегодня утром.
Исправление отдаёт превью две строки, так что «Haha yes! Send me the photos from last night when you get a chance» читается, не открывая чат. Время короткое: «9:41» сегодня, «Вчера», затем «Чт».
Непрочитанный чат получает время синим цветом и синий бейдж 17 px. Заглушённая группа Design Team получает серый бейдж, чтобы учитываться, не требуя внимания. Аватары вырастают до 52 px, а у голосового сообщения перед длительностью появляется маленький микрофон.
Правило на вынос: тратьте место строки на сообщение и пишите время так, как его говорят люди.
Мелкие исправления
- Один левый край. Черновик использовал 14 px слева и 12 px справа. Исправление использует 20 px с обеих сторон, а разделители начинаются после аватара.
- Один цвет для внимания. В черновике бейджи красные, кольца от оранжевого к фиолетовому, а чип непрочитанных контурный. Исправление использует фирменный синий #2E7CF6 для нового, выбранного и непрочитанного и серый для всего тихого.
- Настоящая типографская шкала. Текст перешёл от 9–20 px к размерам текста iOS от 11 до 28 pt с большим заголовком сверху.
- Четыре вкладки, а не пять. Вкладки черновика «Чаты, Звонки, Камера, Статус и Настройки» стали «Чаты, Звонки, Обновления и Настройки». Камера ушла из панели вкладок.
- Лица крупнее. Аватары в списке выросли до 52 px, так что человек это первое, что показывает строка.
Проведите аудит своего списка чатов
| Вопрос | Почему это важно |
|---|---|
| Сколько действий в заголовке? | Одно действие находят, четыре сканируют |
| Описывает ли поле поиска себя предложением? | Слова «Поиск» уже достаточно |
| Значит ли каждое кольцо или точка ровно одно? | Стиль, используемый для всего, ничего не говорит |
| Заканчивается ли ряд фильтров внутри экрана? | Обрезанный чип скрывает, что он предлагает |
| Превью занимает хотя бы две строки? | Читателям не стоит открывать чат, чтобы его прочитать |
| Время написано так, как его говорят люди? | «Вчера» быстрее, чем дата с годом |
Получите файл Figma
В бесплатном файле оба экрана как компоненты, каждое исправление в виде пары до и после, переменные цвета и текстовые стили iOS.
Бесплатный файл Figma
Список чатов, до и после
Оба экрана и каждая исправленная часть как компоненты Figma. Бесплатно, только просмотр, продублируйте к себе в черновики.
FAQ
Что должен показывать экран списка чатов в каждой строке?
Человека, две строки последнего сообщения, короткое время и один маленький бейдж непрочитанного. Уберите полную дату, лишние иконки и любой второй бейдж.
Сколько фильтров должен показывать мессенджер?
Четырёх чипов достаточно на главном списке: «Все», «Непрочитанные», «Избранные» и «Группы». Остальное, например Архив, спрячьте в меню или на другой экран и следите, чтобы ряд никогда не уходил за край.
Как проектировать кольца историй в чат-приложении?
Используйте один цвет для нового и тихий цвет для просмотренного, чтобы кольцо несло информацию. В нашем исправлении синее кольцо означает новое, а тонкое серое просмотренное, а под лицами стоят имена целиком.
Как чат-приложению показывать время сообщения?
Так коротко, как сказал бы человек: время для сегодняшнего дня, затем «Вчера», затем день недели. Полные даты оставьте для самого чата.
Какие размеры шрифта использовать в чат-приложении?
Используйте текстовую шкалу платформы. Исправленный экран использует размеры iOS от 11 до 28 pt с большим заголовком для названия экрана.
Источники
- Оба экрана наши собственные, нарисованы и измерены в Figma. Имена и сообщения выдуманы для упражнения.
- Фото с Pexels: Татьяна Танатова, Iphanyi Ezemenari, pessoas uem, Son Hoa Nguyen, Ajan Yogi, Tamra Creatives Agency, Kenneth Surillo и kaleef lawal.
- Apple Human Interface Guidelines: Typography, для размеров текста iOS и большого заголовка в исправленном экране.
- Apple Human Interface Guidelines: Accessibility, для размера области касания 44 pt.
- Впервые опубликовано как карусель в App Brainy.
Want this for your own app? Our team redesigns app screens like this one, from the first audit to the finished components.
Get Started
