Создание улучшенного интерфейса для мобильных чатовых приложений
Общаясь со своими друзьями, я часто ловлю себя на мысли, что наличие действия или команды в определенной части приложения было бы очень кстати. Я долго размышлял над тем, как привнести лучший накопленный опыт и фичи в приложение чата. Это натолкнуло меня на проведение детального анализа прошлого опыта и я внес все в документ. Такой анализ помог мне вынести несколько идей как усовершенствовать опыт использования чата. Данная статья - симбиоз коллективных пожеланий и исследований, в которой все идеи объединены в концептуальное приложение содержащее гармоничный язык дизайна. Этот пост содержит идеи, которые объединены под заголовками с разделами:
Целесообразность
Описывает проблему и общее описание предложенного нами решения.
Визуальный дизайн
Мы обсудим как и почему визуальный дизайн работает в UI с небольшим описанием свойств выбранного нами стиля и почему мы выбрали именно его, а не другой.
Дизайн в действии
Как работает все вышеперечисленное в совокупности для решения имеющейся проблемы.
Начальный экран
Визуальный дизайн
Мы перепробовали около десятка возможных видов экрана для конечного вида интерфейса. И теперь он выглядит так:
Окно чата
Целесообразность
Современные чатовые приложения информируют вас о том, что сообщение, которое вы отправили, было получено вашим другом. В данный момент это уведомление имеет вид маленькой иконки (обычно в виде “галочки”) рядом с написанным текстом. Это слишком малозаметно для начинающего пользователя. Это как в анекдоте: моя мама начала использовать чатовое приложение. Она отправляла мне сообщение и подходила ко мне через время с вопросом, получил ли я его?. Ей было тяжело разглядеть галочку, которая стала синей. Поэтому, ей приходилось надевать очки, чтобы рассмотреть ее.
Визуальный дизайн
Мы решили сделать это самое “просмотренное/не просмотренное” сообщение в виде окна, которое становится более бледным после просмотра. Также добавили соответствующую иконку “глаз”, что вызывает ассоциацию с подтверждением того, что чат просмотрен. Вот последовательность изменений окон чата:
Уведомления
Целесообразность
Так бывает, что посреди чата, мне приходит сообщение от другого человека, которое требует быстрого и короткого ответа. На сегодняшний день, чатовые приложения дают вам возможность тапнуть на входящее сообщение, что переносит вас в отдельное окно чата, где вы можете ответить. Переключения вперед и назад ради одного сообщения сильно утомляют, особенно при большом количестве входящих сообщений. Переходы по разным экранам для отправки сообщения, сильно усложняют сам процесс использования приложения. Мы попытались минимизировать подобные переходы в нашем дизайне.
Дизайн в действии
В момент появления окна сообщения в верхней части экрана, вы видите небольшую стрелку, которая дает возможность потянуть вниз. Свайпнув вниз, вам будут показаны все сообщения, что были отправлены вам только что. Вы можете прочесть их и быстро ответить без переключения на другой экран и продолжить ваше общение дальше.
Индикаторы сообщений
Целесообразность
Когда вам кто-то пишет в чате, вы видите “пульсирующий” индикатор. Обычно это делается с помощью абстрактной анимации в виде вращения или ряда “пульсирующих” кругов. Мы столкнулись с этим во время нашего исследования и подумали, что такой индикатор можно сделать куда более выразительным. Мы сделали это при помощи разработки метафор, которые отличали разные виды активности в чате у вашего собеседника.
Визуальный дизайн
Мы создали иконки, которые могут быть как зацикленными на неопределенное время, так и останавливаться в любой момент.
Групповые “лайки”
Целесообразность
Эту фичу я хотел видеть очень давно. Большую часть времени в групповых чатах (в которых происходят всякого рода обсуждения), возникает необходимость некоторого положительного одобрения вместо написания сообщения с текстом: Я согласен”. Для этого теперь есть возможность просто тапнуть кнопку “лайка”.
Программы, которые использовались для создания данного интерфейса:
Sketch
Визуальная часть интерфейса была создана в Sketch. Если вы UI дизайнер и у вас нет этой программы, вы многое теряете. http://ux.pub/podrobnoe-rukovodstvo-po-dizajnu-v-sketch/
Quartz Composer
Все прототипы, показанные выше, сделаны в Quartz Composer от Apple. http://ux.pub/quartz-composer-facebook-origami-i-sketch-dlya-prototipirovanie-interfejsa-apple-tv/
Origami
Анимация интерфейсов создана в Origami, Quartz Composer плагин Facebook.
Quartz Crystal
Данная программа конвертирует прототипы, созданные в Quartz Composer, в видео файлы высокого качества.
FFmpeg
FFmpeg конвертирует видео файлы в .gif, которые вы видели на странице.
Перевод статьи prabros.com
Топ коментарі (0)