5 советов хороших приложений для iPhone

Опубликовал Александр Иваничкин, 21 мая 2013

Когда люди заходят на Apple App Store чтобы купить новое приложение, свои покупки они выбирают исходя из их дизайна.

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

Так как невозможно судить о простоте использования (юзабилити) или качестве кода просто зайдя на App Store, имеет смысл оценивать приложения основываясь только на дизайне, а потому приложения с лучшим дизайном намного чаще могут быть выбраны пользователями, чем их аналоги.

Так как же можно разработать качественное приложение? Рад, что вы спросили. Я дам вам пять простых советов, которые вам помогут.

1. Создайте каркас своего приложения

Когда речь идет о дизайне приложения, мы говорим о двух его основных компонентах. Эти два компонента – это дизайн опыта пользовательского взаимодействия (UX) и дизайн пользовательского интерфейса (UI).

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

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

При разработке приложений для iPhone оба этих компонента дизайна являются крайне важными и идут рука об руку.

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

Каркас – это простой набросок идеи вашего приложения, который позволяет работать только на взаимодействие, игнорируя визуальные аспекты. (Более детально это рассмотрено в статье “Преимущества создания каркаса дизайна”).

Я просто люблю ручкой на бумаге рисовать блоки и формы моего каркаса. Другие используют что угодно от иллюстратора до Balsamiq Mockups (популярного инструмента для создания каркасов приложений). В этом смысле неважно, что вы используете.

Источник изображения: MOObileFrames

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

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

2. Используйте области нажатия размером с палец

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

Apple рекомендует минимальный размер 44x44px для любого элемента, с которым пользователь будет взаимодействовать.

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

3. Сохраняйте на экране только одну основную цель

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

Например, на экране списка писем в приложении Mail для iPhone основной целью пользователя является чтение почты. Однако тут же есть и второстепенное действие для написания письма, кнопка которого расположена в углу экрана и не выделяется.

В Commit (одном из моих приложений для iPhone) основным действием является экран выполненных задач, на котором можно отметить, что дело выполнено. Поэтому я сделал большую оранжевую кнопку для этого действия. Несмотря на то, что остальные кнопки также расположены на этом экране, они не выделяются на фоне основного действия.

Одно из ваших заданий как дизайнера – решить, что является наиболее важным, и выделить это. Уменьшите визуальный вес второстепенных элементов, чтобы основное действие было понятным.

Чтобы разобраться с созданием оптимальных визуальных иерархий и приоритетов в дизайне, ознакомьтесь со следующими статьями:

Работа с визуальным весом в дизайне (Working with Visual Weight in Your Designs)
Создание узловых пунктов в веб-дизайне (Creating Focal Points in Your Web Design)
Использование властных структур и гештальта в визуальной иерархии (Using Power Structure and Gestalt for Visual Hierarchy)
Искусство отличий в веб-дизайне (The Art of Distinction in Web Design)

4. Не используйте стандартные стили кнопок

Стандартные стили кнопок интерфейса на iPhone – это для меня самая больная тема. Почти все стандартные элементы, включенные в iOS, выглядят отлично. Но не стандартные кнопки.

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

Вы можете либо установить обычный стиль кнопок и добавить фоновое изображение, или можете нарисовать новый стиль кнопок с кодом.

Существует множество уроков и ресурсов, которые помогут вам в создании отличных кнопок. Ознакомьтесь с этими двумя ресурсами:

5. Добавьте новые экраны, если на странице много информации

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

В iPhone вы можете обратить внимание на то, как успешно Apple справились с этим на экране создания записи.

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

Нажатие на метку телефонного номера вызывает модальный диалог с другими опциями меток (под названием Метки).

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

Это перевод статьи под названием “5 Simple Tips for Designing Better iPhone Apps” от Nathan Barry. Перевели в компании UXDepot с одобрением издания Six Revisions.

PS от переводчиков: Надеюсь, вам понравилась статья. Мы будем рады, если вы укажете нам на ошибки в переводе, чтобы мы могли их оперативно исправить. Пишите нам по адресу editor@uxfox.ru, пожалуйста 🙂

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) {return;} js = d.createElement(s); js.id = id; js.src = «//connect.facebook.net/ru_RU/all.js#xfbml=1&appId=»; fjs.parentNode.insertBefore(js, fjs); }(document, ‘script’, ‘facebook-jssdk’));

VK.init({apiId: 2745953, onlyWidgets: true}); VK.Widgets.Like(‘vk_like_6044’, {type: ‘button’, pageTitle: ‘5 советов хороших приложений для iPhone’, pageUrl:’/5-simple-tips-for-designing-better-iphone-apps/’, verb: ‘0’}, 6044);

75статья