Когда речь заходит о разработке мобильных приложений и их дизайна, самым лучшим способом научиться, чаще всего, является изучение содержимого приложений, пользующихся популярностью.
Это не значит, что нужно копировать весь интерфейс либо какой-либо элемент дизайна популярного приложения - наоборот, это значит, что нужно узнать, что именно делает это приложение красивым и функциональным, и использовать эти знания в своих проектах.
Тщательно изучив наши любимые приложения для iOS и Android - а также несколько отличных блогов с шаблонами мобильного интерфейса - мы нашли несколько вещей, которым разработчики и дизайнеры могут поучиться у самых лучших мобильных приложений.
Google+ - мобильный интерфейс может отличаться от Web-интерфейса
Единообразный пользовательский интерфейс - единый для всех платформ - всегда поддерживался большинством экспертов в области дизайна и практичности. Однако он не всегда необходим.
Один из самых важных - и часто игнорируемых - элементов в дизайне интерфейса, независимо от платформы, является контекст. То, где и как вы используете приложение либо сервис, может (и должно) влиять на его внешнюю оболочку/презентацию.
Google действительно принял этот факт всерьёз и обновил, а также изменил дизайн приложения Google+ для iOS и Android.
Родной интерфейс мобильных телефонов и планшетов в корне отличается от интерфейса настольных компьютеров. Конечно, есть схожие черты, однако мобильный и планшетный интерфейс был разработан для лёгкости в сенсорном управлении, навигации и обмене данными.
Акцент на изображениях, иконках для отображения действий и разборчивый, отчётливый шрифт помогают создать отличный пользовательский интерфейс. Если на то пошло, то мы бы хотели, чтобы версия Google+ для настольных компьютеров была больше похожа на версию, которая используется в мобильных приложениях.
StockTouch - подробная информация всё ещё может быть отображена в простом виде
Одним из самых трудных аспектов дизайна мобильных приложений является отображение сложных массивов данных в сжатом и удобоваримом виде.
StockTouch для iOS является наилучшим примером того, как это сделать правильно.
StockTouch предоставляет Вашему взору общую картину множества точек данных для акций в различных секторах экономики. При нажатии на одну из групп выводится больше информации, а нажатие на какой-либо определённый акционерный фонд приводит к отображению более детальных - но понятных - графиков и информации.
Кроме текстовой информации, StockTouch также использует цвета для отображения движения акций, что облегчает просмотр состояния определённого сектора либо акции.
Path - слайдовая навигация хороша для сенсора
Одной из наиболее распространённых отличительных черт пользовательского интерфейса современных мобильных телефонов и планшетов является слайдовая панель навигации. Вместо плавающих меню и верхних либо нижних закладок, пользователи могут перемещаться по экрану с помощью слайдовых движений и открывать расширенное вертикальное меню опций либо уведомлений.
Данный метод был впервые использован в приложении Facebook для iPad, после чего десятки (если не сотни) приложений для iOS и Android переняли данную функцию. Кен Ярмош в своём блоге более подробно рассказывает о некоторых распространённых способах применения данного шаблона дизайна.
Для нас важнейшим примером наилучшего использования такого рода шаблона пользовательского интерфейса является Path для iPhone и Android.
Что нам нравится в Path, так это то, что слайдовая навигация работает как влево, так и вправо. Движения слева выводят стандартные меню и пользовательские оповещения, а справа - подробная информация о друзьях и поиск.
В Path - как и в большинстве приложений со слайдовой навигацией - также используется слайдовая анимация для верхних кнопок, что помогает пользователям, которые не знают, как использовать данную функцию, либо же для удобства.
Spotify - мобильное устройство может быть лучше десктопа
Приложения Spotify для iOS и Android хороши как по внешнему виду, так и в использовании.
Spotify для iPad выглядит особенно впечатляюще благодаря своему интерфейсу, который даже лучше, чем в приложении для десктопов.
Данное приложение не только поддерживает retina-дисплей iPad - у него также большая обложка, простой в навигации интерфейс (используются слайдовые панели!), а также лёгкий доступ к функциям поиска и обмена данными.
Команда Spotify снова указала нам на важность разработки дизайна для определённого устройства и на то, что не нужно пытаться полностью скопировать его интерфейс на другое устройство, но даже они подчеркнули, что последующие версии Spotify для десктопов, возможно, будут использовать некоторые ключевые моменты из приложения для iPad.
News.me - текст может быть красиво переоформлен
Приложение News.me для iPhone является отличным примером того, как приложение, анализирующее ленты новостей (такие как Twitter, Facebook, RSS), может красиво представлять текст.
Нажатие на статью из ленты News.me выводит на экран красиво оформленную презентацию.
Данная функция имеется не только у News.me - Instapaper, Pocket, Readability и Flipboard также используют подобного рода идеи - но нам особенно нравится то, как News.me управляется со шрифтами. Мы ценим его вклад в обмен новостями и открытиями.
Работа с лентами новостей может быть сложной - но News.me демонстрирует, что это может быть сделано со стилем.
Sparrow - внимание к деталям может создать приложение
Sparrow для iPhone представляет Вашему вниманию узнаваемый Gmail-интерфейс на iOS.
Исключительным это приложение делает его внимание к деталям. От слайдовых панелей навигации до статичных кнопок "Ответить" и "Создать", до лёгкого добавления файлов, всё в этом приложении так, как должно быть.
Это, возможно, и есть одна из причин, почему Google посчитал нужным приобрести Sparrow и его разработчиков. Если повезёт, лучшие элементы Sparrow найдут своё место в официальных мобильных клиентах Gmail.
Just Landed - шрифт имеет значение
Just Landed - приложение, помогающее пользователям следить за прибывающими самолётами и планировать маршруты для более быстрой встречи пассажиров.
Приложение обладает хорошим дизайном - с простым интерфейсом и уникальным способом отображения, когда кому-нибудь нужно ехать в аэропорт. Для нас оно также является примером того, насколько важен разборчивый и отчётливый шрифт.
В таких приложениях, как Just Landed, где большинство элементов интерфейса представляет собой текст, а не графические кнопки, читабельная, разборчивая и ясная типографика является существенным критерием.
Легко попасть впросак, используя в приложениях специфические либо декоративные шрифты, но когда текст является центром внимания пользователя, намного важнее сделать его читабельным.
Evernote - Android может выглядеть лучше, чем iPhone
Говорят, что приложения для iOS более симпатичны - а часто и лучше разработаны - чем приложения для Android. Возможно, это из-за Руководства по проектированию пользовательских интерфейсов от Apple (Human Interface Guidelines/HIG), может, всё из-за того, что большинство мобильных приложений всё ещё разрабатываются в первую очередь для iPhone, а затем уже адаптируются под Android; однако какой бы причина ни была, сложно найти приложение для Android, которое выглядело бы лучше, чем его iOS-двойник.
С Ice Cream Sandwich - и даже с JellyBean - Google невероятно усовершенствовал стандартный интерфейс Android. Разработчики также расширяют своё дело и показывают, что iOS не монополист в дизайне интерфейса.
К примеру, Evernote для Android, который был обновлён ещё в мае, является образцом приложения, чья версия для Android превосходит своего iOS-двойника почти во всём.
Начиная от слайдовых навигационных панелей до лучшего отображения заметок, Evernote для Android более ясный, чёткий и лёгкий в использовании.
Так как мы всё ещё считаем, что наиболее приятные глазу приложения выпускаются для iOS, Evernote показывает, что это не всегда так. Разработчики приложений для iOS, Android и Windows Phone должны принять это к сведению.
Christina Warren,
Mashable
Комментарии
Хм, они-таки догадались...
Кто?
Разработчики и дизайнеры :)))
Catch Notes - образец простого и эффективного Android приложения
Ну не знаю. Многие идеи заимствованы из разных Линуксов. Слайдовая навигация, например, давно была в KDE.