Статьи

Процесс мобильного дизайна

Если вы дизайнер, хорошие новости о пространстве мобильных приложений таковы: дизайн — это все. Независимо от того, создаете ли вы утилиту или игру, внешний вид оказывает большое влияние как на популярность, так и на удобство использования. Загроможденные или неорганизованные приложения сложны для понимания и сложны в использовании. Это не значит, что «серьезный инструмент» должен быть украшен излишним графическим интерфейсом. Отличный дизайн приложения — это тот, который сбалансирует внешний вид с функциональностью.

Мобильный дизайн

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

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

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

(Ваш дифференциатор) (Ваше решение) для (Ваша аудитория).

Вот пример для приложения iPhone «Фото»:

(Простота в использовании) (обмен цифровыми фотографиями) для (случайных пользователей iPhone).

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

Лучший способ перекрестной ссылки и документирования всех ваших исследований — это вставить их в электронную таблицу или текстовый документ. Вы можете создать свой собственный, ИЛИ Я создал его в Документах Google, который вы можете использовать: Таблица исследований мобильных приложений . Я привел примеры, относящиеся к приложению, над которым мы будем работать в этой статье. Просто замените эти данные своими! Это позволяет легко и просто сопоставить все функции, преимущества и технологии, предлагаемые другими продуктами.

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

  • Google
    • сузить поиск до «блогов» и «новостей», чтобы получить действительно свежие результаты
  • iTunes App Store
  • Android Marketplace

Во время исследования рынка будьте готовы раскрыть технические ограничения, которые вы не ожидали. Как дизайнер, вы можете сказать: «Кого это волнует? Это работа разработчиков! »Может быть и так, но вы будете удивлены, как много обсуждений технической осуществимости окажут влияние на дизайн! Поверьте мне, вы хотите быть частью этой дискуссии.

Примеры технических ограничений могут включать: Что, если вы хотите создать приложение, которое позволит вам блокировать звонки с определенного номера? О, iPhone SDK не поддерживает эту функцию. Или, скажем, я хотел создать приложение, которое позволит вам найти ближайшую кофейню? Лучше подумайте, сколько хитов может получить ваше приложение, потому что Google и Yahoo! оба начинают взимать плату, как только вы превысили определенный ежедневный объем поисковых запросов в вашем приложении!

Это очень важно. Когда вы разочаровываетесь, узнав обо всех вещах, которые сегодня невозможны, хорошие новости — вы все равно можете планировать их в своем дизайне! У первого iPhone была видеокамера? Нет, но разработчики, у которых когда-то была их игра, начали задумываться о возможностях в этой области, которые неизбежно откроются в будущем.

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

Знание вашей целевой аудитории очень важно при определении стиля дизайна, типографики и макета. Ваше приложение привлекает бухгалтеров или игроков 18-25 лет? Наличие этой информации и более глубокое погружение в разработку «персон» очень важно для понимания того, что хочет увидеть демографическая группа, и контекста, в котором они будут использовать приложение.

Например, Майк Тодд — 18-летний студент колледжа в Нью-Йорке. Это говорит нам намного больше о Майке. Он учится в колледже, среди других его ровесников, большинство с похожим графиком. Майк может захотеть игру с участием двух игроков. Думали бы мы о взаимодействии двух игроков, если бы знали возраст Майка? В зависимости от приложения, может быть, а может и нет. Независимо от этого, привлечение персон вносит разнообразие в ваш мозговой штурм и помогает привлечь функциональность, которая важна для вашей целевой аудитории и важна для дизайна.

Как только персонажи определены, персонажи должны быть помещены в соответствующие, реальные, «мобильные» обстоятельства. Где пользователи, которые используют приложение? Они пешком, на машине или на поезде?
Сорок три года Билл едет на встречу в центре Лондона и хочет остановиться на чашку кофе. Должно ли приложение требовать, чтобы Билл несколько раз коснулся экрана, прежде чем найти свою кофейню? Абсолютно, если ваш брат владеет магазином кузовов! Продумывание различных обстоятельств, в которые попадают пользователи, и набор сценариев, когда определенные функции повторяются, являются ключом к определению того, какие экраны вы будете разрабатывать.

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

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

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

Также рассмотрите различные способы перемещения контента на экран и за его пределы. Например, мобильные листы — отличный способ скрыть действенные элементы управления, пока пользователь не будет готов их использовать.
Подумайте, как вы можете минимизировать пользовательский ввод. Кто хочет увязнуть в вводе текста? Предоставьте пользователям таблицу выбора, чтобы они могли вместо этого выбирать из меню.

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

Как только вы настроите свои бумажные прототипы, пришло время воплотить эти эскизы в жизнь в Photoshop. Если вы еще этого не сделали, вернитесь к моей предыдущей статье о шаблонах дизайна iPhone и возьмите несколько, чтобы начать работу. В этой статье вы также найдете спецификации о том, как настроить файлы в нужном размере и разрешении. Если вам повезло работать с разработчиком, который может вырезать изображения для вас, будьте вежливы и систематизируйте свой файл, используя папки.

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

Когда она не занята продвижением пикселей, ей нравится писать о дизайне и создавать ресурсы для использования другими дизайнерами и разработчиками. Ниже приведен замечательный комплект для iPhone Design, который она собрала специально для читателей MobileTuts!