Требования к дизайну приложения

Основы композиции и дизайна

11.1. Требования к дизайну пользовательского интерфейса

Пользовательский интерфейс вовсе не является порождением компьютера. Интерфейс есть и у тостера. Он совмещает все аспекты технологии и дизайна, которые обеспечивают взаимодействие человека с технической системой. При этом к пользовательскому интерфейсу компьютерной программы или мультимедийного издания предъявляются, в сущности, те же требования, что и к интерфейсу тостера.
l Пользовательский интерфейс (ПИ, графический интерфейс пользователя) – это комплекс средств для взаимодействия пользователя с технической системой (в т. ч. с программным приложением, мультимедийным изданием).
В понятие пользовательского интерфейса компьютерной системы входят следующие составляющие:
а) графическая среда – картинка на экране;
б) набор управляющих элементов пользовательского интерфейса и их расположение на экране;
в) технологии взаимодействия пользователя с системой.
l Управляющие элементы пользовательского интерфейса – это графические элементы (кнопки, списки, диалоговые окна и т.п.), которые позволяют осуществлять какие-либо действия с компьютерной системой (например, выбирать пункты и свойства объектов).

n Основные требования к пользовательскому интерфейсу:
· функциональность (соответствие задачам пользователя);
· соответствие технологии;
· понятность и логичность;
· обеспечение высокой скорости работы пользователя;
· обеспечение защиты от человеческих ошибок;
· быстрое обучение пользователя;
· субъективное удовлетворение пользователя.

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

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

3) для повышения субъективной скорости выполнения работы:
· заполняйте паузы между событиями (рис. 1).

На основе общих требований к пользовательскому интерфейсу сформирована система требований к его элементам управления.

n Требования к названию (тексту) элементов управления:
· название элемента должно отражать его функцию;
· названия элементов должны быть краткими, но понятными пользователю;
· наиболее значимое слово должно стоять в названии элемента первым;
· для названия элемента, запускающего действие, целесообразно использовать глагол в форме инфинитива;
· если элемент меню служит для запуска окна с продолжением диалога, то в конце его названия следует ставить многоточие;
· пиктограммами следует снабжать только самые важные элементы меню

n Требования к расположению элементов управления:
· элементы меню следует группировать;
· группы следует разделять разделительными полосками либо «визуальными паузами»;
· часто используемые элементы целесообразно располагать в левой верхней части экрана, редко используемые — в правой нижней части;
· терминационные кнопки (т.е. командные кнопки, управляющие окном, например, «Ок», «Отмена», «Применить», «Закрыть») должны быть расположены либо внизу окна, либо в правой его части (т.е. в той части окна, которая сканируется взглядом в последнюю очередь);
· хорошо, если диалоговое окно читается, как текст: один элемент управления однозначно преобразовывается во фрагмент предложения, а единая группа элементов — в целое предложение (рис. 2).

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

Дизайн мобильного приложения для стартапа из США

Проект был предназначен для распространения через реабилитационные центры США. Freedom institute был первым клиентом стартапа.

Суть проекта в следующем:

• Бывшие пациенты центров используют мобильные приложения, чтобы вернуться к здоровому образу жизни после лечения от зависимости;
• Сотрудники через сайт наблюдают за пациентами и поддерживают их после курса лечения.

Что нужно было сделать

Спроектировать интерфейсы и сделать дизайн приложения для бывших пациентов реабилитационных центров США. Дизайн нужно было сделать для Android и iPhone смартфонов. Затем оформить всё в виде Дизайн-проекта и передать в разработку компании EigenGraph.

Команда разработчиков (компания EigenGraph) подготовила структуру проекта, написала серверную часть и API для взаимодействия приложений с сайтом. Мы получили общее виденье продукта и описание необходимых разделов приложения.

От идеи до прототипа

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

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

Затем, с помощью www.draw.io мы сделали статический прототип, по уже утвержденной схеме экранов.

Валерий Лукьяненко, UX-дизайнер приложения: неправильно называть «Прототипом» эту стадию работы. В английском языке используют 4 стадии создания дизайна интерфейсов: Sketch, Wireframe, Prototype, Mockup. Чтобы узнать про разницу между ними, почитайте эту и эту статью. У нас как-то не прижились слова «Скетч» и «Вайрфрейм», да и клиенту удобно называть всё одним словом. Поэтому первые 3 стадии работ у нас часто называют Прототипом.

Прототип сделали для Android и iPhone смартфонов.

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

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

1 Уровень. Личные цели. Для каждого из направлений клиент задает личную цель (читать книгу, выходить на природу, встречаться с родителями…). С главного экрана можно наблюдать за прогрессом по целям, а чтобы их сменить, не нужно идти в «Настройки». С главного экрана клиент видит выбранную цель и может сменить её или дни в которые он её выполняет.

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

От прототипа к дизайн-макетам

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

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

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

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

Дизайн-макеты и элементы приложений Android и Apple iOS разрабатывались на основе ТЗ, в котором уже была полная определенность по функционалу и количеству экранов.

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

Запустив приложение впервые, клиент попадает на экран с вводом email и пароля. Если клиент не забыл пароль, он может восстановить его, а может сразу позвонить в реабилитационный центр. Целевая аудитория не простая и её проблема может быть намного серьезнее, чем потерянный пароль. Стандартные сценарии тут не пройдут. Клиенту нужна помощь прямо сейчас, а значит звонок на горячую линию может быть важнее, чем попытка получить новый пароль и попасть в приложение. По этой же причине, горячая линия продублирована на основных экранах приложения.

Каждый день пользователю нужно делать «Check in»: отмечаться по целям и писать о своем самочувствии, а чтобы он не забывал отмечаться, ему приходит уведомление.

Каждую неделю нужно проходить «Survey»: опрос на общие темы. Уведомление о новом опросе приходит в «шторку» смартфона и дублируется в приложении.

Результаты опросов просматривают и анализируют специалисты реабилитационных центров.

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

Отзыв Lauren Stahl, основательницы и CEO компании Sparkite: Very happy with the finished product and happy it was delivered within the project timeline. You listened well to my vision and the aesthetic I wanted for Sparkite.

Дизайн интерфейсов мобильных приложений

Для того, чтобы ваш продукт мог конкурировать на мобильном рынке и приносить прибыль, он должен соответствовать определённым требованиям. Привлекательный дизайн интерфейса и удобная функциональность — неотъемлемые части любого современного мобильного приложения. Студия Live Typing поможет вам разработать гармоничный дизайн-макет и выделиться среди других приложений.

Наши преимущества

• UX-проектирование — разработаем удобный и полезный дизайн, основываясь на пользовательском опыте;
• UI-дизайн — вы получите интуитивно понятное и удобное в использовании приложение;
• Многопрофильность — проектирование дизайна веб-интерфейсов , адаптивный дизайн для мобильных устройств, мы не ограничиваемся одними приложениями;
• Коммуникация — наши дизайнеры работают в тесном контакте с разработчиками, поэтому воплощение интерфейсов происходит максимально быстро и гладко;
• Знание гайдлайнов — требования к дизайну от платформ iOS и Android отличаются и постоянно меняются, приложения с устаревшим и неудобным дизайном удаляются из сторов. Наша команда в совершенстве знает все особенности проектирования приложений под разные платформы.

Этапы разработки дизайна приложения

Наши технологии

Мы используем Sketch как главный инструмент для дизайна интерфейсов, а старые-добрые Photoshop и Illustrator — когда без них не обойтись. Zeplin и Marvel используются для передачи дизайнов разработчикам. Среди других инструментов — Principle, Atomic и Adobe After Effects для анимаций.

Мы постоянно следим за трендами в дизайне приложений, ездим на отраслевые мероприятия и повышаем профессиональный уровень отдела дизайна. А ещё пишем интересные статьи и выкладываем некоторые примечательные работы на Dribbble, Behance и в Instagram.

Создавая прототип интерфейса, вы определяете финансовый и продуктовый успех будущего проекта. Рассказываем, как это происходит в Лайв Тайпинг

UI похож на лифт: он либо поднимет ваш продукт над конкурентами, либо опустит ниже подвала. Нас интересует подъём. Рассказываем, на какую кнопку нажать

Они отлично смотрятся вместе и развивают свои отношения не только ради друг друга, но и ради пользователей вашего продукта. О чём речь?

Наше мнение об инструментах для создания прототипов, которыми вы пока ещё можете воспользоваться бесплатно

Дизайн мобильного приложения для заказа такси

Убероподобное Android-приложение для поиска техников для рынка Индонезии

iOS и Android-приложение для путешественников, желающих удалённо купить любую туристическую услугу

Приложение для лидера на рынке парфюмерной и косметической продукции в России

Требования к дизайну приложения

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

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

1. Правила, которые всегда работают

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

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

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

Возможность (аффо́рданс) и символичность. Аффо́рданс — это функция. Для простоты снова воспользуемся приемом со ссылкой. Так, голубой подчеркнутый текст указывает на то, что клик по нему переведет пользователя по какому-то адресу. Подобные символы нужно использовать таким образом, чтобы пользователь не размышлял о том, что может означать тот или иной элемент интерфейса. Практичность и рациональность — наше все.

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

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

Как верно заметил Эндрю Майер (Andrew Maier) в своей статье, эти пять правил должны стать основой, определяющей проектирование любого типа взаимодействия.

2. Знать своих пользователей

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

В этом вопросе есть четкая тактика, состоящая из трех положений:

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

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

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

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

Отличные советы по этому вопросу дает Джефф Саурос (Jeff Sauros).

3. Контент и поведение пользователей

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

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

[Раз в месяц][Дважды в месяц]

[Через неделю][Каждую неделю]

[Выбрать календарный день]

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

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

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

4. Улучшение юзабилити с использованием знакомых пользователю схем

Дизайн мобильного приложения стоит сделать «знакомым» для пользователя. К примеру, практически все картографические сервисы используют прием навигации slide-out. Это позволяет пользователю чувствовать себя «как дома». Приложение незнакомо, но схема работы с ним общеизвестна и понятна.

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

Рекомендуем использовать две категории схемы взаимодействия пользователей с интерфейсом приложения:

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

Оживление: здесь имеется в виду анимация, которая сделает приложение более живым. Рекомендуем объединить анимацию с жестовым управлением.

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

Yelp — отличный пример приложения с интуитивно понятным интерфейсом.

5. Учитываем размер пальцев пользователя

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

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

Вот что стоит учитывать, проектируя кнопки и другие сенсорные элементы:

Все мы держим телефон или планшет по-разному. Даже один и тот же человек в различных ситуациях держит устройство разными способами.

Наши пальцы действительно большие. Их ширина составляет около 45–57 пикселей, что больше, чем рекомендует большинство руководств для тестовых устройств. Apple, например, рекомендует цель квадратной формы с размером стороны в 44 пикселя. А этого далеко не всегда достаточно.

6. Не отказывайтесь от градиента и теней

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

Тень обычно очень актуальна при проектировании кнопок, переключателей и подобных элементов.

Тени и градиент отдельных элементов делают интерфейс более понятным пользователю. Эти приемы оформления можно использовать для создания объемных кнопок и полей ввода.

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

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

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

Как это делается?
Дизайн мобильных приложений под Android.

Как не облажаться, если вы взялись создать дизайн приложения под Android впервые.

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

Для начала нужно разобраться с размерами. Есть 4 диапазона размеров small (2–3,5″); normal (3–4″); large (4–7″); xlarge (7–10″) — эта группа относится к планшетам. А так же 4 диапазона плотности экранов ldpi (Low density, 120); mdpi (Medium density, 160); hdpi (High density, 240); xhdpi (Extra high density, 320).

Обрадую вас, рисовать все не нужно. Рисуем самые популярные размеры экранов телефонов на данный период времени: 320 х 480 px (160dpi), 480 x 800 px (240dpi), 640 x 960 px (320dpi), 720 x 1280 px (320dpi).

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

1. 320 x 480 px, MDPI (160 dpi)
2. 480 x 800 px, HDPI (240 dpi)
3. 640 px x 960 px XHDPI (320 dpi)
4. 720px x 1280 px XHDPI (320 dpi)
5. Metrics
6. Graphics
7. Style Guide

Единицы измерения

Единицы измерения для приложений под Android особенные. 1dp = 1px при плотности экрана в 160 dpi, sp = dp. sp — используется для шрифтов, dp — для всего остального. Я поняла смысл этих новых единиц измерения когда нарисовала все и увидела вот это:

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

Так вот что нужно вынести из выше сказанного, 1 dp = 1 px (при 160 dpi), 1 dp = 1.5 px (при 240 dpi), 1 dp = 2 px (при 320 dpi). В примере сетка равняется 8 dp, соответственно при 160 dpi она равна 8 px, при 240 dpi — 12 px, при 320 dpi — 16 px. Что бы понимать как будет выглядеть страница в телефоне макеты нужно смотреть в масштабе 100% (при 160 dpi), 66,67% (при 240 dpi), 50% (при 320 dpi).

Material Design

Если вы пока не представляете что такое material design, то сейчас самое время. Я слышала что даже продукты google не соответствуют требованиям на 100%. Но там собраны основные принципы, которые помогут вам в понимании, как в идеале должно выглядеть и работать ваше приложение. Это особенно будет полезно, если вы как и я никогда не пользовались Android. Внимание, там все размеры указаныв dp и sp.

Я начала с этого размера, потому что плотность здесь 160 dpi, а значит 1px = 1dp. Поэтому запутаться в размерах будет сложно. А самое главное из этого размера адаптировать под все остальные экраны очень просто, почти автоматизировано, но об этом немного позже.

Начинаем с сетки. Подсматриваем в material design, что они об этом пишут. Есть основная сетка с шагом 8 dp, она для всех элементов, кроме текста. Типографика подчиняется более мелкой сетке 4 dp.

Для создания сетки я пользуюсь GuideGuide. Сейчас этот плагин для Adobe Photoshop платный, но он стоит свои 10 $. Думаю можно найти бесплатные аналоги, на крайний случай отрисовать вручную.

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

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

Как я уже писала, всю графику, которая будет на сайте вам нужно будет передать разработчикам в 3-х плотностях. Я нашла удобный для себя способ подготовить эту часть материалов. Паралельно с началом работы над первым макетом я открываю Adobe Illustrator, создаю сетку в 8 dp и под каждый элемент графики создаю отдельный артборд. В итоге у меня получается вот такой вот документ:

И рекомендую сразу давать соответствующее название артборду. Все что вам останется сделать в самом конце — экспорт всех артбордов в 160, 240 и 320 dpi.

После того, как вы подготовите все макеты размером 320 px, начинается самое интересное. Отношение 1px (240dpi) к 1px (160dpi) = 1,5. Отношение между 480 и 320 тоже 1,5. Из этого следует, что бы создать макет 480 px с плотностью 240 dpi, вам всего лишь нужно перенести все слои из макета 320px на макет 480px, выбрать reference point location левый верхний угол и увеличить их в 1,5 раза по вертикали и горизонтали (scale 150%). Создать сетку в 8 dp, которая в данном случае равняется 12 px. И повторить эту процедуру со всеми остальными страницами вашего приложения.

Дальше идет 640 px (320 dpi). Соотношение 1px (320dpi) к 1px (160dpi) = 2. 640 к 320 тоже равняется двум. Значит мы копируем слои из макетов 320 и увеличиваем в 2 раза (scale 200%). Шаг сетки 16 px.

Макеты 720 px (320 dpi) мы делаем из 640 px (320 dpi), так как плотность одинаковая. Нам только нужно будет расширить весь дизайн на 80 px.

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

Все остальные размеры я показываю в отдельной папке, со всеми страницами одного размера (я беру 320 px). Я расставляла размеры вручную, но есть платное расширение PNG Express, стоит 29$, которое может упростить и значительно ускорить процесс.

Это все, чем на данный момент могу поделиться. Как только получим фидбэк от разработчиков и готовое приложение, возможно всплывут еще какие-то моменты, которые нужно будет внести в наш to do list. В таком случае продолжение следует.

Дизайн мобильных приложений от компании S Media Link

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

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

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

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

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

Современный дизайн приложения iOS

Компания Apple, чьи устройства занимают существенную часть рынка, выпустила специально руководство iOS Human Interface Guid, в котором описала основные требования к современному интерфейсу и дала необходимые инструкции. Опытные специалисты создают дизайн мобильного приложения с учётом актуальных тенденций в данной отрасли.

Основные этапы разработки программного обеспечения для различных устройств:

• • Анализ спроса и программ от конкурентов.
• • Формулирование требований к функционалу.
• • Разработка навигации.
• • Проектирование экранов.
• • Продумывание юзабилити.
• • Непосредственная разработка дизайна.

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

Современный дизайн приложения Android

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

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

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

S Media Link — это компания с выделенной командой дизайнеров Druids Design, которая специализируется на дизайне интерфейсов. К выполнению задач подключаются дизайнеры, бекенд- и фронтенд-разработчики, тестировщики, а весь процесс контролирует проект-менеджер. Благодаря этому удаётся максимально оптимизировать все процессы, исключить вероятные ошибки и проблемы, а также сократить время разработки. Мы создаём современный дизайн мобильных приложений для решения конкретных бизнес-задач.

Оставьте заявку

Не откладывайте на завтра то, что можно сделать сегодня. Позвоните по телефону +7 (861) 200-27-34 или заполните форму прямо сейчас, чтобы оценить сроки разработки и стоимость вашего проекта.

Разработка дизайна мобильных приложений

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

Опыт пользователя

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

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

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

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

В зарубежных руководствах термин «Интерфейс пользователя» (User Interface) уже довольно часто заменяется термином «Опыт пользователя» (User Experience) – это говорит о приоритете сценариев над контентом приложения.

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

Хорошо известные шаблоны и иконки

В интерфейсе мобильных приложений уже сформировались некоторые хорошо известные пользователям шаблоны взаимодействия:

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

Выдвигающееся меню (Drawer) – кнопка, располагающаяся, как правило, в левом верхнем углу экрана и выдвигающая главное меню программы при нажатии. Хорошо известным жестом является и выдвижение меню по движению «смахивание» слева направо, и пропадание его по обратному смахиванию справа налево.

Панель закладок (Tab Bar) – панель с иконками, располагающаяся в нижней части экрана, переключающая пользователя между различными разделами приложения.

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

Кроме шаблонов взаимодействия, пользователям хорошо известны многие иконки, например, такие, как «Удалить», «Поделиться», «Назад». Для удобства пользователя, частые действия следует обозначать хорошо известными стандартными иконками.

Лаконичность и минимализм

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

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

Например, в списке контактов основной информацией является имя, а номер телефона, адрес, email – не видны, и появляются только при переходе на экран деталей контакта.

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

Опытные пользователи уже изучили такие жесты, как

• смахивание – движение по горизонтали, используемое либо для открытия или закрытия главного меню программы, либо для действия над элементом списка (перенос или удаление);
• долгое нажатие – редактирование или перенос элемента списка.

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

Отзывчивость и анимация

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

Хорошим руководством по использованию анимации для подчеркивания навигации в мобильном приложении является «Руководство по интерфейсу для человека» (Human Interface Guidelines) от Apple.

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

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

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

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

Фирменный стиль

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

Руководства по дизайну мобильных приложений

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

Material Design от Google

Компания Google последовательно внедряет концепцию «материального дизайна» во все свои веб-сервисы и мобильные приложения, начиная с 2014 года, когда появилась операционная система Android 5 Lollipop.

Эта концепция пришла на смену моде на «плоский дизайн», используемый в Windows и Apple iOS и Macintosh. Элементы интерфейса в «материальном дизайне» ориентированы друг относительно друга не только в плоскости экрана, но и по «глубине». Например, кнопки, как и в реальном мире, выступают над основным контентом.

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

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

Принципы материального дизайна сделают приложение для Android удобным для пользователей и выполненным в том же стиле, что и остальные приложения на смартфоне. Полное руководство доступно на английском языке на сайте https://material.io/guidelines/.

Руководство по «интерфейсу для человека» от Apple

Компания Apple является признанным мировым лидером по разработке удобных для пользователя интерфейсов, поэтому при разработке приложений обязательно иметь в виду принципы, сформулированные дизайнерами Apple в документе «Human Interface Guidelines». Эти принципы имеют достаточно общий характер и могут применяться как в iOS, так и в Android-приложениях.

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

• Полупрозрачность и взаимное расположение элементов должны помогать пользователю в навигации.
• Элементы интерфейса должны быть отзывчивыми, то есть, предоставлять обратную связь пользователю: кнопки должны «нажиматься», а сдвигаемые элементы – сдвигаться.
• Анимация, как и в Google Material Design, должна помогать навигации пользователя в приложении – недопустимо украшать приложение «неестественной» анимацией, например, появлением дочернего окна из неожиданного места.
• Важным принципом Apple являются метафоры, помогающие пользователю понять назначение элементов интерфейса по аналогии с объектами реального мира. Примерами метафор Apple являются переключатели и спиннеры.

Процесс разработки дизайна

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

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

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

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

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

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

Разработка и корректировка дизайна

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

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