Как сделать приложение для iPhone лучше? 2012 года

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

1. Мои расходы

 

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

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

2. Альфа-Банк
После обновления программы до версии 3.0, здесь появилось много приятных решений. Например, слайдер, рассказывающий о функциях, оформлен очень сдержанно и стильно.

Также интересно и красиво реализована функция кнопок «Настройки» и «Дополнительно». Они сдвигают экран влево и вправо, соответственно, тоже самое можно сделать свайпом.

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

3. The Verge

Этим приложением просто приятно пользоваться. Здесь прекрасно реализован слайдер, который позволяет максимально информативен, но не занимает много пространства. Во всем приложении прекрасно подобраны шрифты, особенно это заметно в тулбаре снизу: узкие и читаемые.

Кнопка «News», которая возвращает назад, на мой взгляд, расположена в самом логичном месте для таких кнопок. Я большую часть времени пользуюсь iPhone левой рукой, но проблем с взаимодействием в этой программе не возникало ни разу. Иконки в Tab-Bar очень органичны и узнаваемые, экономно расположены без подписей, с другой же стороны, так как их всего три штуки, им совсем не тесно.

4. ВКонтакте 2

В новом приложении ВКонтакте отлично реализованы диалоги, деликатные «баблы» с текстом умело упаковывают текст, прекрасно подобран размер текста и цвет фона. Но чего не хватает большинству программ, где есть переписка — сохранения тех ссылок, контактов и адресов, которые встречались в диалогах. Часто приходится прокручивать всю историю, иногда очень далеко, чтобы добраться до ссылки, которая внезапно понадобилась.

5. Twitter

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

6. MaxiFilm

 

Больше всего мне понравилась реализация кнопки «Поделиться». Сама иконка совершенно не вызывает никаких ассоциаций со своей функцией, но вот то, как выскакивают символы социальных сетей, сделано интересно и нестандартно.

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

7. Яндекс.Карты

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

8.  djay for iPhone

Тут все логично и прекрасно реализовано. Кнопка выбора музыкальной дорожки объединена с пластинкой - красиво и удобно. Единственное "но" - это маленькие кнопки настроек, но так как места вокруг них много, то попасть в них довольно легко.

9.  Airbnb

Очень плохо, когда приложение заставляет напрягаться пользователя, особенно, когда это связано со зрением — мелкий шрифт нужно увеличить. При том что снизу пустует прекрасная зона, в которой можно разместить подсказку или пример поиска, или даже слайдер…

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

10. Логотипы СССР

 

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

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

11. Instagram

 

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

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

12. Aviasales

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

13. Подкасты

 

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

14. Pinterest
 
Хорошее решение, убирать тулбар и заголовок, когда пользовател скроллит ленту — это увеличивает рабочее пространство.
 
15. Tumblr
 
Синий фон по краем сильно отвлекает. Авторы хотели подчеркнуть основной цвет родительского сайта, но, на самом деле, его вполне достаточно в заголовке.

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

16. Facebook

У фейсбука все отлично. Очень порадовали всплывающая подсказка и единство иконок для работы с изображением.

 

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

17. LinguaLeo
 
Это самые непонятные иконки, которые я когда-либо видел, им удается путать меня, и даже за долгое время использования привычка к ним у меня не возникла.

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

18. NIKE
 
Все на местах — большие цифры достижения, заметные даже при беге, основная кнопка «Run» в правом верхнем углу и интересный график сравнения пробежек. Хорошая комбинация цветов и понятные иконки.
 
19. Яндекс.Диск
 

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

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

Вот только непонятно для чего строка поиска в пустой папке.

Хочу отметить, что в Яндекс.Диск использована удачная цветовая гамма, Все элементы качественно отрисованы, что позволяет им органично сочитаться между собой.
 
20. Wordpress
 

И напоследок хочу показать хорошую реализацию списка — аккуратно, читаемо и без лишних элементов.  Сверху две иконки — "Меню" и "Добавить запись". Лаконично и функционально сделан список, а вот экран редактирования мне очень не понравился, в связи с чем пользоваться этим приложением желания мало.

 


Кому-то мои соображения покажутся очевидными, но, как мне кажется, польза от такого небольшого обзора хороших и плохих решений будет очень и очень большой. Я всегда готов обсуждать спорные моменты и исследовать тему дальше. Разработчики, уделяйте больше внимание дизайну и интерфейсу - именно это залог успеха!

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

Источник: Планета iPhone
Вернуться25533400
 
Комментарии
Оставлять комментарии могут только зарегистрированные пользователи.
Nic   Пароль
Зарегистрироваться           Напомнить пароль
Ответить

SuperStar

22.11.2012
SuperStar

Retinapad

Ответить

Vort

21.11.2012
Vort

пока только в альфа-приложении встречсал выбор используемых карт (яндекс или встроенные). Почему другие не делают? Яндекс api не даёт?

Ответить

giroes

21.11.2012
giroes

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

Ответить

Tagere

21.11.2012
Tagere

Спасибо за полезную информацию. Про Альфа-Банк, согласен что сделали прикольно, но "рендер" этой скользящей менюшки абсолютно не предполагает использования на слабом устройстве (у меня это был iPod Touch 4G). Помимо этого лагало так же на картах, на списке новостей...
Поэтому хотелось бы дополнить, что интерфейс это не мало важно, но если определенное решение вызывает подвисание (большие картинки, сложные анимации и т.п.), то может они этого не стоят?