Views Comments Previous Next Search

Концепт дня: как сделать редизайн Hangouts для iPhone

Дизайнер по продукту Shopify и сооснователь стартапа Pilot Эван Динсмор (Evan Dinsmore) опубликовал на Medium процесс с неофициальной переделкой приложения Hangouts для iPhone.

Концепт дня: как сделать редизайн Hangouts для iPhone. Изображение № 1.

 

Динсмор отметил, что сосредоточился на изменениях во внешнем виде приложения, а не в структуре переходов или иерархии (поскольку она выполнена на хорошем уровне). При этом, по словам автора концепта, у Hangouts сейчас нет единого брендинга. Например, на разных платформах у приложения могут быть разные иконки или оттенки зелёного. Поводом для концепта стало последнее обновление Hangouts для iPhone до версии 2.5. В нём Google отказалась от принципов дизайна Apple (Human Interface) и почти полностью перешла к принципам материального дизайна. Динсмор в своём концепте решил спроектировать новое приложение для Hangouts, совместив гайдлайны Human Interface и материального дизайна.

Концепт дня: как сделать редизайн Hangouts для iPhone. Изображение № 2.

 

Автор отметил, что его Hangouts в основном придерживается принципов iOS. В частности, панели навигации и вкладок он выполнил в стандартизированных размерах, а в качестве основного шрифта выбрал Helvetica Neue размером 12 пунктов. Но он внёс небольшие изменения, которых ранее не видел в приложениях для iOS 7 и 8. Например, лёгкие тени под панелями и «липкие» заголовки. Кроме того, он вернул подписи к иконкам на панели вкладок («поскольку Hangouts пользуются люди всех возрастов, их смысл будет понятен не всем»).

Концепт дня: как сделать редизайн Hangouts для iPhone. Изображение № 3.

 

На экранах контактов, текущих разговоров и звонков Динсмор решил стандартизировать высоту строки элементов (контактов, звонков и чатов), поскольку в действующем приложении Hangouts они имеют разные величины. Также он убрал пользовательский аватар в левую часть экрана, чтобы освободить место под название вкладки. Дополнительные функции (например, поиск, переключение между аккаунтами и пр.) можно сделать из меню, которое выплывает по тапу на аватар. При этом строка поиска тоже убрана в панель навигации в верхней части экрана. Это позволяет сэкономить место для отображения контактов. 

Концепт дня: как сделать редизайн Hangouts для iPhone. Изображение № 4.

 

В списке разговоров Динсмор перенёс иконки «Отключить уведомления» и «Избранное» в левую часть экрана, ограничил предпросмотр нового сообщения одной строкой («по своему опыту скажу, что две строки требуются редко, а когда требуются, то это не является необходимым»), а также использовал зелёный цвет акцента для обозначения контактов онлайн. 

Концепт дня: как сделать редизайн Hangouts для iPhone. Изображение № 5.

 

В окне диалога, считает автор, нужно изменить цвет «пузырей» исходящих сообщений (сейчас они светло-зелёные и не сочетаются с тёмно-зелёной «шапкой»), вынести иконку «Отключить уведомления» из меню с дополнительными действиями на панель навигации («я часто использую её во время работы»), показывать кнопку «Отправить» только после начала набора текста (до этого иконка «Отправить» заменяется иконкой «Приложить»), а также убрать данные о времени отправки сообщения за пределы диалогового «пузыря» (чтобы улучшить читаемость).

Рассказать друзьям
0 комментариевпожаловаться

Комментарии

Подписаться
Комментарии загружаются