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

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

    1. Альфа-Банк

    image

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

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


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

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

    3. The Verge


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

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


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

    5. Twitter


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

    6. MaxiFilm


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

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

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


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

    8. djay for iPhone


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

    9. Airbnb


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

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


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

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

    ***


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

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

    Похожие публикации

    Комментарии 39

      +15
      Спасибо за полезную информацию.
      Пока только в альфа-приложении встречал выбор используемых карт. Почему другие не делают? Яндекс не разрешает?
        +9
        это скорее технический момент — вопрос тем, кто работал с картами.
        большинство браузеров, как настольных, так и мобильных позволяют выбирать в настройках поисковую систему по умлочанию. было бы здорово, чтобы такая возможность появилась для карт…
          0
          Нет, добавить несколько карт совершенно не проблема.

          Но, почему-то так мало кто делает (еще у QIWI несколько карт), благодаря чему в небольших городах карты в приложениях не работают. Особенно жаль что этим страдает Foursquare.
          0
          Делают и другие, например в этом приложении для вызова такси, там три источника карт.
          –3
          Хабралинч? )
            +7
            про Airbnb.

            про Р. думаю, т.к. дизайн из США, то там $ и так писать — это такая культура.
            про цвета. думаю нет смысла связывать. цвет ценника — чтобы контрастировал на разнообразных фотографиях желищ. зёленый = это не опасное действие. голубой, другое не опасное действие.
            маленькие буквы в слайдере — это да. издержки локализаций.
              +12
              проблема с локализацией, когда по-русски получается длиннее, чем в оригинале — это самый распространенный косяк и в большинстве случаев с ним никак не работают. Происходит это во-первых потому что изначально разработчики не закладывают идею о том, что прийдется переводить на другие языки и проектируют как удобно сейчас, а во-вторых, отсутствие хороших кириллических шрифтов для маленьких экранов.
                +4
                c приходом iOS 6 ситуация улучшится благодаря Cocoa auto layout, как раз пример с локализацией cleveryou.net/post/25564695524/getting-to-know-auto-layout-like-a-slinky-the

                так же есть мысль, что в некотором будущем из-за autolayout возможны айфоны с другими разрешениями, чем сейчас или же это инструмент для создания одной кодовой базы, но для разных устройств на базе iOS аля apple tv, ipad, iphone, ipod touch и т.п.
                  +4
                  с появлением ipad mini проблема проектирования слегка усложнилась. Так как разрешения одинаковые а инструментов адаптировать приложение под mini или обычный ipad нет… то есть кнопка нормальная по размеру на мини будет казаться большой на обычном и наоборот, со шрифтами то же самое

                  автолэйаут будет большим спасением
                    0
                    Эм… А зачем их адаптировать? Пропорции относительно размера дисплея сохранены, а пользователь всё равно будет держать маленький экран немного ближе к себе.

                    Если же вы имеете в виду физический размер элементов интерфейса, то тут тоже всё окей: он будет где-то между оными на iPhone и на большом iPad. Никто же не говорил, что на iPhone слишком мелкий интерфейс.
              +6
              Полезная информация, спасибо. Надо будет учесть на будущее.
                +5
                По поводу MaxiFilm — подобное меню есть в Path
                  +9
                  Про Альфа-Банк, да полностью согласен, сделали прикольно,
                  Поэтому хотелось бы дополнить, что интерфейс это не мало важно, но если определенное решение вызывает подвисание (большие картинки), то может они этого не стоят?
                    +4
                    согласен. любые задержки, подвисания при работе с интерфейсом, на первый взгляд особо не страшны, но у пользователя накапливается отрицательный эмоциональный опыт

                    помню при переходе с palm на windows mobile долго мучился от того, что работа с устройствами вызывала дискомфорт, который не уравновешивали многозадачность и пр.
                      0
                      Задержки и подвисания при работе с интерфейсом особо не страшны?
                      Слава Богу я не слышу это от программистов )
                      +1
                      Почему-то на планшет они выпустили версию для смартфона
                        0
                        Вы про Android?
                        Я лично считаю разработку спец. интерфейса под Android-планшеты одной из самых бесполезных вещей =)
                      +2
                      А как вы определили, что основная функция клиента написать твит?
                        +4
                        Я написал, что это основная кнопка «написать твит», а не основная функция. Основную функцию любого приложения выбирает для себя пользователь, а вот удобно она расположена или нет это уже на совести разработчика. Другое дело, что он может акцентировать внимание на какой-либо функции в интерфейсе, что удовлетворить основной процент, который пользуется приложением именно так.

                        Большинство популярных приложений для айфона представляют из себя ленту сообщений: будь то фотография, запись, место, а иногда все сразу, плюс возможность добавить свой контент. Соответственно модель такая — сделать удобный инструмент работы с лентой и инструмент добавления в ленту. По интерфейсу это практически не пересекающиеся инструменты.
                        +3
                        1. После обновления стало удобнее, только вот fps местами просел раза эдак в два.
                        4. Мне гораздо больше нравится VK App. Хотя я слегка запутался в обилии клиентов для контакта.
                          0
                          По поводу альфабанка хочу сказать вот что: с одной стороны стало лучше, с другой — вертел я на одном месте приложение которое так лагает на моем телефоне. И если раньше я пользовался только им, то теперь мне проще зайти в клик и сделать все там.
                            +1
                            Подпишусь под вашим высказыванием. Новая версия мобильного Альфабанка тормозит ужасно.
                            Подозреваю что дело в какой-то глупой ошибке разработчиков, ибо изменений не так много, чтобы вызвать столь сильное падение производительности.
                            Предыдущая версия «летала».
                              +2
                              У вас у обоих не iPhone 4 случайно?
                                0
                                Скорее всего, так и есть.

                                У меня iPhone 4, и отныне самое тормознутое приложение на телефоне — не официальный клиент Gmail, а именно приложение Альфа-Банка.

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

                                Считаю, что настолько криворуким программистам надо давать мощного пинка под зад — чтобы неповадно было портить некогда хорошие приложения.
                                  0
                                  Да, четверка, но это совсем не повод для оправдания разработчиков. Эта модель ещё поддерживается Apple и получает обновления ОС, поэтому на ней такие простые приложения должны нормально работать.
                                    0
                                    Более того, скажу что на четверке будут замечательно работать как 3д так и 2д игры, которые мы (да, я работаю в геймдеве и связан с мобильными платформами) выпустим в начале и середине следующего года.
                                    0
                                    Да, четверка. Но я серьезно не вижу причин НАСТОЛЬКО сильных тормозов. Даже 3d игры работают с вменяемым fps, а приложение из трех экранов — подтормаживает при наборе текста.
                                    0
                                    Поддерживаю. Сам сейчас реализовал в текущем проекте такой же сдвиг для меню и недоумеваю, чего они там наворотили, чтобы это так тормозило.
                                      0
                                      Да ладно бы дело было в сдвиге — там сейчас реально ВСЁ тормозит, не только места с анимацией.
                                      0
                                      Не замечаю этих глюков на iPhone 5 — все как летало, так и летает
                                        0
                                        Эх, не на ту функцию айфона-пять делает упор Apple в рекламе!

                                        Надо так: «Мы в Apple стараемся сделать мир лучше. И поэтому представляем iPhone 5 с функцией «Без тормозов» в приложении Alfa Mobile!»
                                    +1
                                    Иконка «Определить местоположение» без подписи, скорее всего из-за длинного названия...
                                    Ну, думаю, при желании ее могли и как «Где я?» подписать. :-)
                                    • НЛО прилетело и опубликовало эту надпись здесь
                                      0
                                      Яндекс.карты. Идеальный размер кнопок для управления одной рукой на ходу


                                      Они слишком мелкие и находятся слишком близко друг к другу. Очень неудобно, когда едешь в машине, тянуться до телефона и смотреть куда ты сейчас там нажмешь. Сколько раз вместо увеличение масштаба уменьшал и наоборот. Очень жду когда же их разнесут друг от друга.
                                      У Гуглокарт с этим еще печальнее. Там кнопки еще меньше :)

                                      • НЛО прилетело и опубликовало эту надпись здесь
                                          0
                                          У меня на Galaxy Note есть в правом нижнем углу кнопочки + и — в приложении Google Maps.
                                        0
                                        но вот то, как выскакивают символы социальных сетей, сделано интересно и нестандартно.
                                        И что же в этом хорошего?
                                          0
                                          Раз уж этот пост размещён в блоге компании «Планета iPhone», в нём очень не хватает обзора интерфейса приложения «Планета iPhone». :)

                                          Пример невероятно красивого и продуманного UI
                                            0
                                            :) Это сделано сознательно. Приложение полностью перерабатывается. Надеемся, уже в декабре выйдет абсолютно другая Планета iPhone. Думаю, вам понравится :)

                                            PS. Про интерфейс и дизайн этого приложения мы все сами знаем :) Никогда не делайте, как это приложение!

                                          Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                          Самое читаемое