- PVSM.RU - https://www.pvsm.ru -

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

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

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

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

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

2. Альфа-Банк [2]

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

image

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

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

3. The Verge [3]

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

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

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

5. Twitter [5]

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

6. MaxiFilm [6]

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

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

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

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

8. djay for iPhone [8]

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

9. Airbnb [9]

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

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

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

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

***

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

Обзор еще десяти приложений я разместил на сайте «Планета iPhone» [11]. Если есть разработчики, которыми интересно получить мою оценку и критику собственного приложения — присылайте, постараюсь уделить внимание.

Автор: formazon

Источник [12]


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/interfejsy/20664

Ссылки в тексте:

[1] Мои расходы: https://itunes.apple.com/ru/app/moi-rashody/id358228999?mt=8

[2] Альфа-Банк: https://itunes.apple.com/ru/app/al-fa-bank/id353127685?mt=8

[3] The Verge: https://itunes.apple.com/ru/app/the-verge/id542512225?mt=8

[4] ВКонтакте 2: https://itunes.apple.com/ru/app/vkontakte-2/id555703386?mt=8

[5] Twitter: https://itunes.apple.com/ru/app/twitter/id333903271?mt=8

[6] MaxiFilm: https://itunes.apple.com/ru/app/maxifilm/id480593477?mt=8

[7] Яндекс.Карты: https://itunes.apple.com/ru/app/andeks.karty/id313877526?mt=8

[8] djay for iPhone: https://itunes.apple.com/ru/app/djay-for-iphone/id424492403?mt=8

[9] Airbnb: https://itunes.apple.com/ru/app/airbnb/id401626263?mt=8

[10] Логотипы СССР: https://itunes.apple.com/ru/app/logotipy-sssr/id545592610?mt=8

[11] сайте «Планета iPhone»: http://planetiphone.ru/news/page46323.php

[12] Источник: http://habrahabr.ru/post/159545/