Интерфейс приложения: Разработка интерфейса приложения – Интерфейс приложения — это не только красота

Разработка интерфейса приложения

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

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

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

 

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

Тестирование на фокус-группе. Мы собираем фокус-группу и просим скачать приложение на смартфон. Многие элементы интерфейса, которые кажутся очевидными на этапе разработки, на деле не понятны сразу. Идеальный интерфейс вообще не требует обучения и разъяснений.  

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

 

Повторное тестирование и релиз. Проводится еще один тест, если он успешен, то создание интерфейса приложения завершается и оно готово к релизу.

Интерфейс приложения — это не только красота

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

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

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

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

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

Грамотно сконструированный интерфейс упрощает освоение программы. И, следовательно, неудачный — наоборот снижает эффективность работы с приложениями, вызывает у клиентов разочарование.

В итоге пользователи начинают игнорировать его и вообще полностью отказаться от него.

С учетом важности интерфейса приложений разработчики выделяют следующие основные правила разработки:

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

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

Эти статьи блога Вам должны быть интересны:

8 этапов процесса разработки интерфейса мобильного приложения / Skillbox corporate blog / Habr

От переводчика: Роман Гапонов — сооснователь компании Django Stars, которая занимается разработкой веб- и мобильных приложений. Основываясь на личном опыте и опыте своей компании, Роман написал статью о процессе разработки пользовательского интерфейса. Изначально она была размещена на Medium, на английском языке. Перевод этой статьи публикуется нами на Хабре.

Немного приятного: в этой статье (а это уже второй материал о мобильной разработке, первый здесь) есть своеобразная пасхалка, которая позволяет получить скидку на курс Skillbox и агентства Agima по мобильной разработке. Это ребус, который при расшифровке даст слово или название решения из сферы разработки мобильных интерфейсов. Скидка за угаданный ребус — 10%. Ребусы есть и в других наших статьях из этой серии. Скидки суммируются, и если собрать их все, можно получить курс за смешную цену.

Создание концепции

Самый первый этап — это когда идея уже есть, а разработчик имеет все необходимые инструменты для ее реализации. Но с чего нужно начинать? Мы начинаем с изучения ниши, целевой аудитории и кейсов продукта. Это неплохо помогает понять будущих клиентов сервиса и создать пользовательский интерфейс, который оптимален для каждого из них.

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

Финтех-приложение. Много иконок, они не слишком крупные, но работать с ними удобно. Обилие разнообразных функций

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

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

Брейнсторминг и эскизы

Как только концепция проекта ясна, двигаемся к следующему этапу — брейнстормингу. Он нужен, чтобы превратить идею интерфейса в реальность. Мы в Django Stars берем ручку и лист бумаги — это быстрее, чем использование таких продвинутых инструментов, как Balsamiq Mockups, Sketch, Photoshop и InVision.

Диаграмма переходов

Создание эскиза дает нам структуру интерфейса. Но как пользователь должен взаимодействовать с ним? Здесь поможет User Flow Diagram. Она проиллюстрирует логику продукта, показав всевозможные способы взаимодействия с интерфейсом, дорожную карту этих взаимодействий и состояние интерфейса на каждом этапе.

Утверждение структуры и диаграммы переходов

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

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

Выбор стиля интерфейса

Когда клиент все утверждает — можно двигаться дальше. Что будем делать? Выберем стиль интерфейса. Есть множество вариантов: от минимализма и Metro до material design и скевоморфизма. На этом этапе мы просим клиентов прислать несколько ссылок на примеры стиля интерфейса, который им нравится, а также спрашиваем об их планах на ближайшее будущее продукта. Мы уделяем внимание текущим трендам, масштабированию интерфейса, определяем время, которое необходимо на разработку и внедрение дизайна.

Подтверждение стиля

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

Курсы по теме: Fullstack мобильный разработчик.

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

Прототипирование, дизайн и их демонстрация

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

Wireframe

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

Макет

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

Кликабельный прототип

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

Так. Пришло время ребуса, вы попали именно в то место, где можно найти скидку. Учитывайте, что английский здесь может мешаться с русским, и главное — не забывайте, что мы будем тщательно следить за комментариями и удалять из них подсказки и ответы! Промослово, зашифрованное в ребусе, следует назвать, когда с вами свяжется наш менеджер после того, как вы отправите заявку на курс. Скидки за разгаданные ребусы суммируются между собой (с учетом этой статьи есть четыре ребуса), но не со скидками на сайте. Слишком медлить не стоит — промо работает до 30 августа 2018 года.

Анимированные flow

А это уже видеозапись взаимодействия пользователя с приложением. Создание демонстрационной модели такого типа требует максимального количества времени, ведь необходимо не только сделать прототип, но еще и записать на видео работу с ним. Тем не менее это очень наглядная модель.

Утверждение дизайна

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

В качестве вывода

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

Skillbox рекомендует

Проектирование графического интерфейса пользователя / Habr

Введение

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

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

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

Ниже я постараюсь ответить на эти вопросы.

Общие принципы

• Интерфейс должен быть интуитивно понятным. Таким, чтобы пользователю не требовалось объяснять как им пользоваться.
• Для упрощения процесса изучения необходима справка. Буквально — графическая подсказка, объясняющая значение того или иного ЭИ. Полное руководство должно быть частью интерфейса, доступной в любой момент.
• Возвращайте пользователя в то место, где он закончил работу в прошлый раз. Зачем нажимать все заново?
• Чаще всего, пользователи в интерфейсе сначала ищут сущность(существительное), а затем действие(глагол) к ней. Следуйте правилу «существительное -> глагол». Например, шрифт -> изменить.
• Чем быстрее человек увидит результат — тем лучше. Пример — «живой» поиск, когда варианты, в процессе набора поискового запроса. Основной принцип: программа должна взаимодействовать с пользователем на основе наименьшей значимой единицы ввода.
• Используйте квазирежимы. Например, ввод заглавных букв с зажатой клавишей shift — это квазирежим. С включенным capslock — режим. Основное отличие в том, что человек может забыть в каком режиме он находится, а в квазирежиме(с зажатой доп. клавишей) это сделать гораздо сложнее.


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

Какие ЭИ создать?

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

Какой должен быть дизайн ЭИ?

На самом деле, дизайн ЭИ — тема отдельной статьи. Тут нужно учитывать все: начиная от цвета, формы, пропорций, заканчивая когнитивной психологией. Однако, несколько принципов все же стоит отметить:

• Цвет. Цвета делятся на теплые(желтый, оранжевый, красный), холодные(синий, зеленый), нейтральные(серый). Обычно для ЭИ используют теплые цвета. Это как раз связано с психологией восприятия. Стоит отметить, что мнение о цвете — очень субъективно и может меняться даже от настроения пользователя.


• Форма. В большинстве случаев — прямоугольник со скругленными углами. Или круг. Полностью прямоугольные ЭИ, лично мне нравятся меньше. Возможно из-за своей «остроты». Опять же, форма как и цвет достаточно субъективна.
• Основные ЭИ(часто используемые) должны быть выделены. Например размером или цветом.
• Иконки в программе должны быть очевидными. Если нет — подписывайте. Ведь, по сути дела, вместо того чтобы объяснять, пиктограммы зачастую сами требуют для себя объяснений.
• Старайтесь не делать слишком маленькие элементы — по ним очень трудно попасть.

Как правильно расположить ЭИ на экране?

• Есть утверждение, что визуальная привлекательность основана на пропорциях. Помните известное число 1.62? Это так называемый принцип Золотого сечения. Суть в том, что весь отрезок относится к большей его части так, как большая часть, относится к меньшей. Например, общая ширина сайта 900px, делим 900 на 1.62, получаем ~555px, это ширина блока с контентом. Теперь от 900 отнимаем 555 и получаем 345px. Это ширина меньшей части:
• Перед расположением, ЭИ следует упорядочить(сгруппировать) по значимости. Т.е. определить, какие наиболее важны, а какие — менее.
• Обычно(но не обязательно), элементы размещаются в следующей градации: слева направо, сверху вниз. Слева в верху самые значимые элементы, справа внизу — менее. Это связано с порядком чтения текста. В случае с сенсорными экранами, самые важные элементы, располагаются в области действия больших пальцев рук.
• Необходимо учитывать привычки пользователя. Например, если в Windows кнопка закрыть находится в правом верхнем углу, то программе аналогичную кнопку необходимо расположить там же. Т.е. интерфейс должен иметь как можно больше аналогий, с известными пользователю вещами.
• Размещайте ЭИ поближе там, где большую часть времени находится курсор пользователя. Что бы ему не пришлось перемещать курсор, например, от одного конца экрана к другому.
• Соблюдайте пропорции
• Элемент интерфейса можно считать видимым, если он либо в данный момент доступен для органов восприятия человека, либо он был настолько недавно воспринят, что еще не успел выйти из кратковременной памяти. Для нормальной работы интерфейса, должны быть видимы только необходимые вещи — те, что идентифицируют части работающих систем, и те, что отображают способ, которым пользователь может взаимодействовать с устройством.
• Делайте отступы между ЭИ равными или кратными друг-другу.

Как ЭИ должны себя вести?

• Пользователи привыкают. Например, при удалении файла, появляется окно с подтверждением: «Да» или «Нет». Со временем, пользователь перестает читать предупреждение и по привычке нажимает «Да». Поэтому диалоговое окно, которое было призвано обеспечить безопасность, абсолютно не выполняет своей роли. Следовательно, необходимо дать пользователю возможность отменять, сделанные им действия.
• Если вы даете пользователю информацию, которую он должен куда-то ввести или как-то обработать, то информация должна оставаться на экране до того момента, пока человек ее не обработает. Иначе он может просто забыть.
• Избегайте двусмысленности. Например, на фонарике есть одна кнопка. По нажатию фонарик включается, нажали еще раз — выключился. Если в фонарике перегорела лампочка, то при нажатии на кнопку не понятно, включаем мы его или нет. Поэтому, вместо одной кнопки выключателя, лучше использовать переключатель(например, checkbox с двумя позициями: «вкл.» и «выкл.»). За исключением случаев, когда состояние задачи, очевидно.
  Такой переключатель напрямую отражает состояние ЭИ
• Делайте монотонные интерфейсы. Монотонный интерфейс — это интерфейс, в котором какое-то действие, можно сделать только одним способом. Такой подход обеспечит быструю привыкаемость к программе и автоматизацию действий.
• Не стоит делать адаптивные интерфейсы, которые изменяются со временем. Так как для выполнения какой-то задачи, лучше изучать только один интерфейс, а не несколько. Пример — стартовая страница браузера Chrome.
• Если задержки в процессе выполнения программы неизбежны или действие производимое пользователем очень значимо, важно, чтобы в интерфейсе была предусмотрена сообщающая о них обратная связь. Например, можно использовать индикатор хода выполнения задачи (status bar).
• ЭИ должны отвечать. Если пользователь произвел клик, то ЭИ должен как-то отозваться, чтобы человек понял, что клик произошел.

В заключении

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

Литература

Джеф Раскин, «Интерфейс: новые направления в проектировании компьютерных систем»
Алан Купер, «Об интерфейсе. Основы проектирования взаимодействия»
Алан Купер, «Психбольница в руках пациентов»

9 бесплатных инструментов для дизайна интерфейсов

1. Pixate

Pixate — платформа для прототипирования приложений, которая обладает большим набором функций. Вы можете создавать слои, добавлять интерактив и анимации и, что самое главное, — посмотреть, как будет выглядеть ваш дизайн в жизни. С помощью плеера Pixate вы сможете полистать готовый прототип и покликать по нему на смартфоне (поддерживаются платформы Android и iOS). Ещё один плюс программы — научиться работать в ней довольно просто. В итоге вы сможете создать дизайн приложения, не написав ни строчки кода.

Pixate →

2. Marvel

Можно создавать дизайн приложения сразу в Marvel или экспортировать свои макеты из Photoshop или Sketch. С готовым оформлением можно сделать прототип (добавить анимации и переходы), чтобы посмотреть, как приложение или веб-страница будет выглядеть для пользователя. Есть возможность делиться проектами и получать обратную связь в режиме реального времени.

Marvel →

3. iPhone Mockup

Поможет быстро и просто создать иллюстрацию или скетч мокапа iPhone. Всё, что нужно сделать, — методом drag-and-drop перетащить необходимые элементы интерфейса. Сервис не годится для серьёзной разработки, но если вы хотите быстро зафиксировать свою идею или поделиться с кем-то набросками, iPhone Mockup для этого вполне подойдёт.

iPhone Mockup →

4. Pencil Project

Pencil Project — бесплатный инструмент для прототипирования с открытым исходным кодом. Позволяет создавать макеты веб-страниц и мобильных приложений. Есть встроенные коллекции с популярными формами, блок-схемами и элементами интерфейсов.

Pencil Project →

5. Form

Приложение для создания прототипов и их просмотра на iPhone или iPad через Wi-Fi или USB.

Form →

6. Use Your Iinterface

Огромная коллекция анимированных интерфейсов. Заходим, вдохновляемся интересными решениями и применяем идеи на практике.

Use Your Iinterface →

7. UX Myths

Как уже понятно из названия, на этом сайте собраны самые популярные заблуждения в области проектирования пользовательских интерфейсов — с подробными объяснениями, ссылками на исследования и полезные материалы.

UX Myths →

8. Mobile Patterns

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

Mobile Patterns →

9. Good UI

Ещё один полезный ресурс с теорией дизайна интерфейсов (одно «но» — все материалы на английском). Здесь собрано 75 идей по оформлению веб-страниц. Все рекомендации проверены A/B-тестированием.

Good UI →

Как должны выглядеть Android приложения? / Habr

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

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

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

Ice Cream Sandwich

Последняя версия Android (4.0) была выпущена совсем недавно. Релиз принес с собой крупнейший набор пользовательских улучшений платформы, чем когда-либо. Эти изменения естественно влияют на то, как Android приложения будут выглядеть в будущем. Некоторые усовершенствования могут быть портированы обратно для более ранних версий, но не все из них. В этой статье я в основном говорю о том, как приложения для Android выглядят прямо сейчас. Надеюсь, скоро мы увидим эволюцию интерфейса ICS, но дело в том, что у нас есть около 200.000.000 Android устройств с версиями от 2.1 до 2.3.

Главный экран приложения

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

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

Общий экран приложения

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

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

Проект ActionBarSherlock (Jake Wharton) позволяет облегчить внедрение панелей действий.

Списки

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

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

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

Панель действий на экранах списков.

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

Элементы списка и чекбоксы

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

Размещение чекбокса слева в элементе списка имеет следующие преимущества:

1. Мы привыкли видеть чекбоксы с левой стороны элементов, которые мы выбираем. Это верно для веб, рабочего стола и других мобильных приложений.
2. Чекбокс на краю пункта позволяет нам создавать большие области для нажатия, что позволяет пользователям легче различать нажатия на элементы списка и выбор одного элемента.
3. Графический компонент с левой стороны элемента создает легкую визуальную подсказку, где заканчивается один элемент и начинается другой, что делает его намного проще для пользователей, чтобы быстро просмотреть список.

Вторичные элементы управления

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

Aldiko и Google Mail являются хорошими примерами приложений, которые используют приятные списки. Aldiko решил поставить флажки справа, что визуально делает пользовательский интерфейс несбалансированным.

Примеры

Бесконечные списки

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

Android Market и Twitter автоматически загружают несколько элементов при достижении конца списка.

Примеры

Действия над элементами — Долгое нажатие — Быстрые действия

Нужно дать пользователям возможность выполнять операции над одним элементом списка без необходимости перемещаться в начало экрана.

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

Существует модель пользовательского интерфейса, которая называется “быстрые действия” для отображения действий над элементами списка. Использование оригинального графического подхода в значительной степени вымерло, но суть остается все та же. Она является одной из форм наложения меню, которое отображает очень простой перечень действий. Обычно от трех до пяти. Независимо от того, как быстро визуально реализуется действие, имейте в виду:

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

Aldiko, Asto File Manager и Google+ используют различные визуальные стили. Во всех случаях эти действия появляются при длительном нажатии на элемента экрана.

Aldiko и Astro примеры хорошего дизайна, но Google + нарушает правило о сокрытии целевого элемента, поскольку они используют простые всплывающие окна. Я надеюсь, что они исправят этот недостаток в будущих версиях.

Действия над несколькими элементами

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

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

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

Примеры

Больше информации о списках

Для получения большей информации о технических деталях работы со списками можно посмотреть следующие две превосходные серии статей:

Styling Android’s Mark Allison:
ListView – Part 1
ListView – Part 2
ListView – Part 3
ListView – Part 4

AndroidDevBlog’s Cyril Mottier:
ListView Tips & Tricks #1: Handle emptiness
ListView Tips & Tricks #2: Section your ListView
ListView Tips & Tricks #3: Create fancy ListViews
ListView Tips & Tricks #4: Add several clickable areas

Вкладки

Многие приложения в той или иной форме используют вкладки, чтобы помочь пользователям перемещаться между страницами. Android версии Honeycomb (3,0) и Ice Cream Sandwich (4,0) немного изменил способ работы и внешний вид вкладок. Мое мнение, что мы должны попытаться использовать это нововведение во всех наших приложениях, независимо от версии, на которой они работают.

Я недавно писал о ICS в этой статье, поэтому я не буду повторять содержание здесь. Если быть кратким, то изменился способ перемещения между вкладками. Если ваше приложение использует вкладки, то пользователи ожидают, что можно перемещаться между ними просто проведя пальцем.

Хорошими примерами приложений, которые используют слайдинг для навигации между вкладками являются Android Market и Google+.

Примеры

Mark Allison написал несколько превосходных статей о технической реализации данной темы:
ViewPager – Part 1
ViewPager – Part 2
ViewPager – Part 3

Проект Jake Wharton’s показывает как можно работать с вкладками:
ViewPagerIndicator на GitHub

Заключение

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

P.s. статья немного запылилась, но думаю будет полезна.

7 правил создания красивых интерфейсов / Я люблю ИП corporate blog / Habr

Недавно мы в «Я люблю ИП» закончили курсы по дизайну от trydesignlab.com. И это одна из самых важных статей, которую нам посоветовал ментор в процессе обучения. Именно поэтому мы решили её перевести. Посмотреть все наши работы с курсов можно в ВКонтакте по тэгу #design101@iloveip.

Вступление

Сначала о главном. Это руководство не для всех. Это руководство прежде всего для:

• разработчиков, которые хотят уметь делать хорошие интерфейсы для себя, если вдруг прижмёт;
• UX-дизайнеров, которые знают, что хороший UX-дизайн продаётся лучше в красивой UI-упаковке.

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

А пока давайте я расскажу, что вы найдёте в этой статье.

Раньше я был UX-дизайнером без каких-либо навыков графического дизайна. Я обожал просто проектировать интерфейсы, но вскоре я понял, что есть куча причин научиться делать это ещё и красиво:

1. Моё портфолио выглядело ужасно и едва отражало мой рабочий процесс и ход мыслей.
2. Клиенты, с которыми я работал, с большей готовность заплатили бы тому, кто умеет рисовать не только прямоугольники и стрелочки.
3. Хотел ли я в какой-то момент присоединиться к стартапу на ранней стадии? Тогда лучше мне освоить эти навыки уже сейчас.

Я всегда находил себе оправдание:

Я ничего не понимаю в эстетике. Я закончил инженерно-технический факультет. Я не должен делать вещи красивыми.

В конце концов, я научился дизайну так же, как и любому другому мастерству: путём холодного, жёсткого анализа, бессовестно копируя то, что работает. Я тратил по 10 часов на проект, а брал деньги всего за час. Остальные 9 я учился. Отчаянно разыскивая в Google, Pinterest и Dribbble то, что можно скопировать.

Эти «правила» — это уроки, которые я вынес для себя за это время.

Итак, обращаюсь к занудам: если у меня сейчас что-то и получается в дизайне интерфейсов, это потому что я много анализировал, а не просто появился из ниоткуда с интуитивными знаниями о балансе и красоте.

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

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

А есть крав-мага, которую изобрели евреи в борьбе против нацистов на улицах Чехословакии в 1930-х годах. Там нет искусства. На уроках крав-маги вы научитесь тычкам в глаза с помощью ручки.

Эта статья — крав-мага для экранов.

Правила

Вот они:

1. Свет падает сверху.
2. Сначала черное и белое.
3. Увеличьте белое пространство.
4. Изучите принципы наложения текста на картинки.
5. Научитесь выделять и утапливать текст.
6. Используйте только хорошие шрифты.
7. Крадите как художник.

Перейдём к делу.

Правило № 1: Свет падает сверху.

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

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

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

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

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

Возьмём кнопки. Даже в этой относительно «плоской» кнопке есть множество деталей, связанных со светом.

1. В ненажатом состоянии (вверху) у неё тёмный нижний край. Ведь туда не падает солнечный свет.
2. Верхняя часть ненажатой кнопки чуть светлее, чем нижняя. Это потому что она имитирует слегка изогнутую поверхность. Как, чтобы увидеть солнечный свет, вам нужно было бы направить зеркало вверх, так и изогнутая поверхность отражает чуууууть больше солнечного света.
3. Ненажатая кнопка слегка отбрасывает тень — её можно увидеть в увеличенном виде.
4. Нажатая кнопка сверху темнее, чем снизу. Потому что она находится на уровне экрана, и на неё попадает меньше солнечного света. В реальной жизни нажатые кнопки тоже темнее, потому что мы блокируем свет рукой.

Это всего лишь кнопка, но на ней уже есть 4 небольших эффекта от света. Это и есть главный урок. А теперь мы будет применять его ко всему.

Вот пара настроек из iOS 6 — «Не беспокоить» и «Уведомления». Она немного устарела, но может многому нас научить.

• Верхняя часть контрольной панели (inset control panel) отбрасывает небольшую тень.
• Проём для слайдера «On» располагается ещё глубже.
• Он имеет вогнутую форму, поэтому нижняя часть отражает больше света, чем верхняя.
• Иконки, наоборот, выпуклые. Видите яркий участок в верхней части иконок? Он представляет собой поверхность перпендикулярную к солнечному свету, следовательно, он поглощает и отражает его.
• У разделителя (divider notch) тень там, где не попадает солнечный свет, и наоборот.

Вот ещё один пример из моей старой работы.

Элементы, которые обычно имеют вогнутую форму:

• поля для ввода текста,
• нажатые кнопки,
• проёмы для слайдеров,
• радио-кнопки (неактивные),
• чекбоксы.

Элементы, которые обычно имеют выпуклую форму:

• кнопки (в ненажатом виде),
• сами слайдеры,
• контроллеры выпадающих меню,
• карточки,
• сама кнопка выбранной радио-кнопки,
• всплывающие окна.

Теперь когда вы знаете, вы будете везде это замечать.

А как же дизайн в стиле flat?

iOS 7 наделала много шума благодаря своему «плоскому дизайну». Он в буквальном смысле плоский. В нём нет никаких углублений или выступов — только линии и фигуры сплошного цвета.

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

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

В то время как я пишу эту статью, Google выпустила Material design. Это единый визуальный язык для всех продуктов компании, который, по своей сути, пытается имитировать физический мир.

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

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

Нельзя сказать, что он не имитирует физический мир, но в то же время он не похож на веб-дизайн 2006 года. В нём нет текстур, градиентов или отблесков. Я думаю, будущее за «полу-плоским» дизайном. А дизайн в стиле flat — это просто часть истории.

Правило № 2: Сначала чёрное и белое

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

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

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

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

Только так можно создать «чистый» и «простой» интерфейс. А обилием цветов в разных местах его, наоборот, очень легко испортить. Чёрно-белый дизайн заставляет вас сфокусироваться на расстояниях, размерах и макете. Именно это является основой хорошего дизайна.

Есть ситуации, когда такой подход не слишком полезен. Дизайну с определённой сильной ориентацией — «спортивный», «яркий», «мультяшный» — нужен дизайнер, который хорошо владеет цветом. Но большинству приложений нужен только «чистый и простой» дизайн. Делать дизайн для остальных гораздо сложнее.

Шаг 2: Как добавить цвет

Самое простое — это добавить только один цвет.

Один цвет на чёрно-белом сайте просто и эффективно притягивает взгляд.

Можно пойти ещё дальше и добавить два цвета или несколько оттенков одного тона.

Коды цветов на практике — что такое тон (hue)?

В большинстве случаев на вебе используются HEX-коды цветов модели RGB. Для нас они являются абсолютно бесполезными. RGB плохо подходит для подбора цветов. Лучше использовать HSB (почти тоже самое что HSV или HSL).

HSB лучше, чем RGB, потому что эта модель ближе к тому, как мы воспринимаем цвет, и мы можем предсказывать, как изменение значений HSB повлияет на цвет.

Если вы впервые об этом слышите, то вот хороший путеводитель по HSB цветам.

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

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

Ещё несколько заметок о цвете

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

• Никогда не используйте чёрный. Эта статья о том, что чистый чёрный цвет практически не встречается в реальной жизни. Увеличивая насыщенность серых оттенков, особенно тёмных, вы добавите живости вашему дизайну. К тому же, насыщенные серые тона ближе всего к реальной жизни, что само по себе хорошо.
• Adobe Color CC. Отличный инструмент для того, чтобы подобрать подходящий цвет, изменить его или составить палитру.
• Поиск в Dribbble по цвету. Ещё один классный способ найти, что работает с определённым цветом. Например, если вы уже нашли один цвет, посмотрите, какие цвета сочетают с ним лучшие дизайнеры в мире.

Правило № 3: Увеличьте белое пространство

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

В Правиле № 2 я говорил, что чёрно-белая палитра заставляет дизайнеров думать о макете и расположении элементов прежде, чем добавить цвет, и это хорошо. Теперь пришло время поговорить собственно о макете.

Если вы когда-нибудь писали HTML-страницу с нуля, то скорее всего знакомы с тем, как HTML выглядит по умолчанию.

Если коротко, то всё сбито к верху экрана. Шрифт мелкий, между строчками нет никакого пространства. Между абзацами расстояние чуть-чуть побольше, и они растянуты на весь экран независимо от того, сколько он пикселей, 100 или 10 000.

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

Иногда даже слишком много.

Белое пространство, HTML и CSS

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

Звучит как дзэн? Я думаю, именно поэтому люди продолжают делать наброски.

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

Если вы начнёте с кучи неотформатированного HTML, то о белом пространстве вы будете думать в последнюю очередь.

Вот концепт музыкального плеера от Piotr Kwiatkowski.

Обратите внимание на меню слева.

Вертикальное пространство между ссылками в меню в два раза больше самого текста. Это шрифт размером 12px, с такими же отступами сверху и снизу.

Или посмотрите на заголовки списков. Между словом «PLAYLISTS» и его подчёркиванием расстояние в 15px. Это больше, чем высота заглавной буквы шрифта! Я уже молчу о 25px между самим списками.

В верхнем правом углу тоже достаточно пространства. Текст «Search all music» занимает 20 % высоты панели навигации. У иконок похожие пропорции.

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

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

Или Википедия.

Конечно, можно поспорить, что такому редизайну не хватает функциональности. Но это хорошее место для старта.

Добавьте белое пространство между линиями.

Добавьте белое пространство между элементами.

Добавьте белое пространство между группами элементов.
Анализируйте, что работает, а что нет.

В следующей части я расскажу об остальных 4 правилах красивых интерфейсов:

1. Как накладывать текст на картинки.
2. Как выделять и утапливать текст.
3. Используйте только хорошие шрифты.
4. Крадите как художник