Как находить идеи для мобильных интерфейсов и превращать их в дизайн-бриф
Практический процесс сбора примеров мобильных интерфейсов, изучения полных последовательностей экранов и превращения визуальных наблюдений в оригинальный дизайн-бриф, который можно проверить.
Папку с красивыми экранами приложений легко собрать и трудно использовать. Если не задать вопрос для поиска, визуальные примеры могут подтолкнуть к подражанию, оставив реальную задачу пользователя нерешённой.
Используйте скриншоты как отправную точку для исследования. Полезный процесс начинается с задачи, сравнивает полные сценарии, фиксирует решения за визуальным оформлением и превращает наблюдения в бриф, по которому можно сделать прототип и оценить его.
Главные выводы
- Определите пользователя, задачу и неясный вопрос дизайна до сбора примеров.
- Изучайте последовательности экранов и состояния взаимодействия, а не отдельные визуальные решения.
- Запишите переносимые принципы, затем примите оригинальные решения для своего продукта и проверьте их с людьми.
- Проверяйте доступность и соответствие платформе, пока бриф ещё можно менять.
1. Начните с вопроса о дизайне
Перед просмотром запишите одним предложением, для кого и какого момента вы проектируете. Например: «Человеку, который впервые готовит дома, нужно выбрать рецепт ужина на будний день и понять дальнейшие действия». Затем назовите неопределённость: труднее всего просмотреть варианты, довериться рекомендации или начать готовить по рецепту с несколькими шагами?
Такой вопрос задаёт границы поиска. Определите важные платформу, область продукта и задачу. Если вы исследуете первый опыт использования, смотрите примеры онбординга; если проблема в выборе плана — экраны подписки; для ввода данных сравнивайте паттерны форм. ScreenKits позволяет просматривать реальные экраны приложений по категориям. Сохраняйте полезные приложения в закладках браузера, чтобы вернуться к их экранам при обобщении.
- Кто ваш пользователь и чего он пытается достичь?
- Какое решение по дизайну остаётся неясным: иерархия, последовательность, навигация, контент или обратная связь?
- Какие ограничения важны: платформа, доступность, размер устройства или бизнес-правила?
2. Соберите небольшую подборку с ясной целью
Соберите несколько примеров той же или близкой задачи. Возьмите больше одного подхода: прямой путь, путь с подсказками, возможно вариант с ошибкой или пустым состоянием. Для каждого кандидата сохраните приложение и отметьте экран или момент, к которому хотите вернуться. Сравнивать компактную подборку проще, чем неотфильтрованную доску вдохновения.
Смотрите и на разные категории, если исходная проблема общая. Приложение для записи на приём и приложение для покупки продуктов могут помогать выбрать дату и подтвердить изменение. Полезная связь здесь — структура решения, а не внешняя тема. Не считайте похожую аудиторию или отрасль доказательством того, что интерфейс решает именно вашу задачу.
- Выбирайте примеры по причине, которую можете сформулировать, например «показывает, как выбранный вариант меняет сводку».
- Включайте разные решения, чтобы первый аккуратный пример не стал ответом по умолчанию.
- Используйте закладки браузера, чтобы сохранить выбранные приложения для сравнения при написании брифа.
3. Изучайте сценарий, а не только скриншот
Отдельный экран показывает компоновку, цвет, текст и элементы управления в один момент. Он не раскрывает, что привело к нему, что произойдёт после нажатия и будет ли задача выполнена. Пройдите каждый подходящий экран по порядку. Отмечайте точку входа, решение, действие, обратную связь и следующее состояние. Добавляйте альтернативы, например ошибки проверки, закрытие и возврат к редактированию выбора, если они влияют на задачу.
Отделяйте наблюдение от интерпретации. «Основное действие остаётся внизу на трёх шагах» — наблюдение; «так точно удобнее» — неподтверждённое утверждение. Скриншот может вдохновить гипотезу, но не доказывает удобство. NN/g описывает прототипирование и пользовательское тестирование как способы выявить возможные проблемы и узнать, как люди взаимодействуют с предлагаемым интерфейсом.
| Запишите | Пример из сценария выбора рецепта |
|---|---|
| Цель пользователя | Выбрать рецепт ужина, который соответствует доступному сегодня времени. |
| Наблюдаемый паттерн | Фильтры по времени и диете появляются до списка рецептов. |
| Возможный принцип | Показывать ограничения с сильным влиянием до просмотра результатов. |
| Открытый вопрос | Понятно ли людям, какие фильтры необязательны? |
| Решение для продукта | Показать два основных фильтра, а дополнительные варианты открывать по запросу. |
4. Превратите наблюдения в оригинальный бриф
Именно обобщение делает примеры полезными. Выделите принцип, который можно перенести, например «показывать последствия выбора до подтверждения». Затем решите, как этот принцип должен работать в вашем продукте с учётом его задачи, содержимого и ограничений. Не копируйте фирменную иллюстрацию, точную формулировку или характерную компоновку только потому, что пример убедителен.
В примере с рецептами подборка может подсказать, что время стоит показывать рано, а влияние выбранного фильтра — предварительно отображать. В оригинальном брифе можно описать короткий путь планирования ужина, заметное ограничение по времени, ясные состояния фильтров и проверку перед сохранением. Эти решения отвечают цели продукта и не воссоздают экран другого приложения.
- Аудитория и контекст: кому это нужно, где и когда они будут этим пользоваться?
- Цель и успех пользователя: что он должен суметь завершить или понять?
- Сценарий: каковы основные шаги, решения и важные альтернативные состояния?
- Принципы дизайна: что интерфейс должен прояснять или облегчать?
- Ограничения и открытые вопросы: что обязательно и что нужно исследовать?
- План оценки: какую задачу вы дадите человеку в прототипе и что будете наблюдать?
5. Создайте прототип, проверьте доступность и уточните решение
Превратите бриф в черновую схему экранов и переходов до полировки визуального стиля. Сделайте прототип ключевого решения и обратной связи, затем попросите представителя целевой аудитории выполнить реалистичную задачу. Следите за заминками, неожиданным выбором и ошибками. Исправьте сценарий и повторите; рекомендации NN/g по исследованиям рассматривают итеративный дизайн и оценку прототипов как часть обучения, а не считают первый вариант окончательным.
Проверяйте доступность параллельно. Рекомендации Apple по дизайну интерфейсов подчёркивают воспринимаемость, адаптивность взаимодействия и учёт разных способов ввода. Проверяйте увеличение текста, контраст, размер элементов и промежутки между ними, понятные подписи и то, не зависит ли смысл лишь от цвета. Убедитесь также, что сценарий допускает более длинный текст и понятен со вспомогательными технологиями. Рекомендации Material Design по доступности полезны для продукта, следующего правилам Android.
- Дайте человеку задачу, а не экскурсию по интерфейсу, и наблюдайте, может ли он двигаться дальше.
- Проверяйте раннюю, малодетализированную версию, пока структуру легко изменить.
- Сверяйтесь с рекомендациями платформы, соответствующей устройствам и дизайн-системе вашего продукта.
- Возвращайтесь к примерам только ради конкретного вопроса; внешнее сходство не заменяет доказательств.
Список для проверки пути от примеров к брифу
Перед передачей брифа убедитесь, что он описывает решение о продукте, а не доску настроения. Человек, который не собирал примеры, должен понять задачу, предлагаемый сценарий, ещё не решённые вопросы и то, как команда собирается выяснить, работает ли дизайн.
- Исходный пользователь и задача явно описаны.
- У каждого примера есть заметка о вопросе или паттерне, который он помогает изучить.
- Наблюдения отделены от предположений и утверждений об удобстве.
- Бриф описывает оригинальный сценарий и причины решений для этого продукта.
- Учитываются доступность, поведение платформы и важные альтернативные состояния.
- Определены задача для прототипа и план проверки на основе наблюдений.
