menu

17:09
Легкие заметки с конференции Google Developer Day 2010. Пользовательский интерфейс для Android приложений

Общие впечатления

Побывал на конференции для разработчиков Google, привез впечатления :).



Кстати опубликовали фотографии с конференции -http://picasaweb.google.com/selanne2007/GDDMoscow2010?feat=flashslideshow#5540925326155696642

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

Иванов Петр
Украина, Киев
Android: 2D Game Developer, Office programs Developer.

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

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

По результатам этой поездки меня попросили подготовить заметки для помощи начинающим программистам под Android. Результат перед вами. Прошу прощения за нечеткие фотографии. Не всегда получались.

1. Пользовательский интерфейс и юзабилити

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

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

Установка и запуск вашей программы

Минимизируйте время для запуска программы. Уберите или упростите до минимума процесс регистрации пользователя, пользователь не любит печатать на мобильных устройствах. Синхронизируйте данные пользователя с его контекстом по максимуму - без его рукотворного участия. Подключайтесь автоматически к аккаунтам Google, Facebook или другим.

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

Главная активити

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

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

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

      

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

Элементы пользовательского интерфейса

Ясность интерфейса порождает легкость его использования. Как этого добиться?

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

Что НЕ рекомендуется:


Использование 5-ти и более вкладок, или вкладок внизу экрана.


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


Кнопка «Назад» сделанная в виде отдельного графического элемента «а-ля» Ай-Фон.

Что Рекомендуется:


Используйте Dashboard + Action bar


Причем используйте различные варианты Action bar в разных рабочих кранах.

Ограничьте количество закладок 4-мя,


Используйте сдвигающиеся закладки при ОДНОРОДНОМ их содержимом.


При разработке интерфейса рекомендуют использовать один из трех вариантов:


  1. Ручка и карандаш.

  2. Pensil for Firefox - http://pencil.evolus.vn/

  3. Adobe Fireworks.


Pensil for Firefox я уже ранее использовал для других проектов и остался доволен. Рекомендую. Не забудьте только скачать плагины для андроида. На основном сайте программы их нет, скачайте по адресу

http://code.google.com/p/android-ui-utils/downloads/detail?name=android-pencil-stencil-basic_0.1.zip

http://code.google.com/p/android-ui-utils/downloads/detail?name=android-pencil-stencil-frame_0.1.zip

Есть отзывы, что версия Pensil 1.2 не у всех запускается. Если у вас такой случай — попробуйте версию 1.1, она запускалась у всех.


Сейчас очень часто разработчиков просят разработать приложение под андроид и одновременно под айфон и блекберри.

НЕ КОПИРУЙТЕ бездумно все элементы дизайна разработанного для других платформ.

НЕ ПЕРЕРИСОВЫВАЙТЕ без крайней необходимости элементы диалогов или индикатовров активности (progress бары и т.д.)

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

НЕ ИСПОЛЬЗУЙТЕ маленький шрифт, он не удобен для чтения.

При разработке дизайна используйте относительный лэйаут и dp для указания размеров вместо px (sp для текста). Это поможет правильно отображать ваш дизайн при различных разрешениях экрана.

ИСПОЛЬЗУЙТЕ большие области для навигационных элементов интерфейса. Не заставляйте пользователей играть в игру «попади пальчиком» в маленькие элементы интерфейса. Не у всех такой миниатюрный палец как у вас.

ИСПОЛЬЗУЙТЕ навигацию при помощи трекбола. Возможно на вашем его устройстве и нет, но у многих он есть, и такие пользователи будут разочарованы отсутствием его поддержки.

КОРРЕКТНО используйте стек ваших активити. Помните, что при нажатии кнопки «back» пользователь ожидает возврат на предыдущую активность, а не на придуманную вами. Не изощряйтесь в навигации, делайте проще.

ПРАВИЛЬНО отрабатывайте повороты устройства. Это успокаивает пользователя.

Для облегчения работы разработчики платформы не зря потрудились и продумали структуру ресурсов.


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

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

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

Дизайн иконок всех видов:

http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

Дизайн виджетов:

http://developer.android.com/guide/practices/ui_guidelines/widget_design.html

Дизайн экранов (активити):

http://developer.android.com/guide/practices/ui_guidelines/activity_task_design.html

Дизайн меню:

http://developer.android.com/guide/practices/ui_guidelines/menu_design.html

Кроме того рекомендую Asset Studio – онлайн инструмент, при помощи которого вы можете даже без помощи дизайнера быстро создать наборы иконок для различных типов меню, уведомлений и т.д. http://j.mp/androidassetstudio Очень удобный инструмент, давно им пользуюсь.


Category: Android | Views: 2710 | Added by: tsvetkov | Tags: Market, UI, Android | Rating: 0.0/0
Total comments: 0
Name *:
Email *:
Code *: