Недавно на платформе Medium разработчик Крис Баша описал в своем блоге процесс редизайна программы, являющейся клиентом Twitter. Пока неясно, будет ли это обновлением официального приложения, но определённый интерес подобные макеты вызывают, поэтому мы перевели пост Криса для вас.

Недавно меня попросили переделать дизайн клиента для Twitter. Это один из самых детально проработанных проектов из тех, что у меня были. Поэтому я решил написать небольшую статью на эту тему. Поехали!

Дизайн для смартфона.

Первые шаги.

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

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

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

Мы имеем:

• Главный экран (Timeline), где последовательно выводятся твиты пользователей, на которых мы подписаны
• Профили пользователей
• Оповещения о ретвитах, ответах и т.п.
• Личные сообщения
• Поиск с наиболее популярными словами в твитах (Тренды)
• Конечно же, наш собственный профиль

Зарисовка

Окей, делаем набросок интерфейса приложения. На этой стадии нам необходимо подстроить всю функциональность под шаблоны операционной системы Андроид, к которым пользователи уже привыкли. Я рассматривал два варианта: вкладки и боковая шторка навигации. После тестирования обоих вариантов я сделал шаг назад и задумался над тем, как пользователи воспринимают связь между веб-сайтом и адаптацией для смартфона.

Веб-сайт — это начальная точка, основа, в то время как мобильное приложение является лишь “удобным способом” преобразовать контент из сети. Поэтому важно чтобы приложения зеркально повторяли сайт, который “обслуживают”. Таким образом, обе платформы должны вести себя так, чтобы пользователю не пришлось каждый раз переучиваться. Мы называем это кросс-платформенной совместимостью.

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

Большинство Android-приложений используют вытягиваемые шторки сбоку для показа уведомлений, так что мы теряем пару “очков” за отклонение от стандартов. Но для согласованности с веб-сайтом всё же будем использовать вкладки.

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

Двигаемся дальше, на очереди дизайн самого твита. Как можете видеть, основные типы твитов — это обычный текст, текст с картинкой и ретвит.

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

Гайдлайны помогли мне в создании этих макетов. Я использовал цвета из официальных спецификаций Twitter. И да, я проверил — цвета хорошо подходят для дальтоников.

В итоге мы получаем главный экран, на котором есть плавающая кнопка в углу. Она ещё не сделана, но могу поспорить, вы знаете что она делает.

Плавающая кнопка

Как мы уже говорили, твиты состоят из текста и, возможно, изображения, которое вы можете вставить из галереи, либо сделать фото.

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

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

В итоге у меня получилось вот такое окно нового твита. Я проделал много работы чтобы придти к такому виду, он показался мне наиболее логичным и удобным.

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

Выше мы можем написать свой твит. Рядом с кнопкой отправки расположен счетчик символов, ведь прежде чем отправить свою мысль, мы должны удостовериться, что она не превышает 140 знаков. Когда длина записи достигает максимума, счетчик начинает трястись, словно говоря: “Эй, я не могу позволить тебе написать что-либо ещё. Удали что-нибудь.” И конечно же он меняет цвет в зависимости от длины вашего сообщения.

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

Я пробовал вариант анимации, когда главный экран “улетает” куда-то в сторону. Но в таком случае теряется чувство связи между окнами.
Сам экран твита довольно прост, и не нуждается в дополнительных пояснениях.

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

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

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

Концептуальная модель.

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

Хоть экран личной переписки довольно прост, на его примере я могу объяснить логику “72db” (72 пикселя).

Оптимальный способ организовать содержимое в списке — отступить 16db от левого края, дальше будет аватар шириной 40db, опять пустое пространство размером 16db и далее текст.

16+40+16 как раз равно 72db, так что заголовок вверху экрана, который отступает от края на 72db, будет гармонично смотреться с остальными элементами на экране. Именно это мы и сделали на главном экране, и это прекрасно сработало!

Давайте взглянем на профиль.

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

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

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

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

Дизайн планшетной версии

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

Поэтому я решил использовать вкладки в планшетной версии тоже. Такой вид был проще для понимания и всё ещё сделан в единой концепции с веб-сайтом.

Я поднял вкладки выше, потому что стало выглядеть, будто они впустую тратят место на своей собственной панели.

При нажатии на плавающую кнопку фон темнеет, а на передний план вылетает окно с полем для ввода, вид которого совпадает с версией для телефона, так что тут ничего нового.

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

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

Профиль выглядит точно также, как и в десктопной версии. Цвета и вкладки тоже схожи с версией для смартфонов.

Хочу отметить, что все эти макеты гибкие и могут легко подстраиваться как под альбомную, так и под портретную ориентацию.

Вот и всё что я хотел вам рассказать. Надеюсь, вам понравилось и вы узнали что-то новое.