Вам бонус- начислено 1 монета за дневную активность. Сейчас у вас 1 монета

Этапы Проектирования и разработки дизайна интерфейсов кратко

Лекция



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

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

Пользовательский интерфейс, или UI (User Interface) — это внешний вид продукта, способ общения между пользователем и программой. А еще интерфейс влияет на то, будет ли продукт приносить деньги и пользоваться уважением и любовью аудитории.

Процесс работы над созданием дизайна интерфейса

  • Проектирование и дизайн интерфейсов

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

  • Интерактивный прототип

    Три этапа, в ходе которых создается интерактивный прототип продукта и его презентационный ролик.

  • Юзабилити-консалтинг

Документы

Итогом каждого этапа работы над проектом является набор документов, описывающих проект. Мы выделяем этапы работ:

  1. сбор требований

  2. проектирование интерфейса

  3. дизайн

  4. создание интерактивного прототипа

  5. редизайн существующего проекта

  6. Стилизация

Сбор требований

  • Видение проекта (vision)

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

  • Описание целевой аудитории (персонажи)

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

  • Сценарии взаимодействия, краткие и подробные

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

  • Перечень функциональности (user stories)

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

  • Спецификация

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

Проектирование интерфейса

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

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

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

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

  • Коридорный метод. Обратная связь поступает от родных, друзей и коллег дизайнеров. Собрать ее легко, но этого недостаточно.
  • Разговор с вами. Справедливо предполагается, что вы как никто знаете, что нужно вашей аудитории.
  • Полевые исследования. В рамках метода дизайнеры идут в народ: общаются с людьми напрямую, если делают продукт для местного рынка, или читают форумы, если для зарубежного;
  • Проблемное интервью. Об этом говорит сайт https://intellect.icu . Задавая пользователям вопросы про их жизнь и место проблемы в ней, дизайнеры узнают, как эта проблема решается сейчас и насколько полезным окажется их продукт. То, что он может оказаться бесполезным — тоже ценный результат: не придется тратить деньги на приложение, которым никто не будет пользоваться.

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

  • Карта сайта и схема навигации

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

  • Диаграммы взаимодействия

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

  • Структурные схемы страниц (wireframes)

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

Дизайн

  • Дизайн-макеты страниц

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

  • Руководство по стилю интерфейса

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

прототипирование Интерактивный прототип

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

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

Будет ли вайрфрейм грубым наброском, который вы сделали с коллегами ручкой на бумаге для принтера, или созданной в графическом редакторе организованной картой экранов — решать вам. Единственное: готовьтесь объяснить клиенту, что визуально вайрфрейм не имеет отношения к финальному продукту.

Этапы Проектирования  и разработки дизайна интерфейсов

Вайрфрейм, набросанный от руки

Этапы Проектирования  и разработки дизайна интерфейсов

Вайрфрейм, сделанный в Sketch

  • Интерактивный прототип

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

  • Презентация продукта

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

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

Этапы Проектирования  и разработки дизайна интерфейсов

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

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

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

Этапы Проектирования  и разработки дизайна интерфейсов

В качестве софта для этой задачи мы используем Overflow, чей слоган "User flows done right" дает понять, что время за этой работой пройдет продуктивно и с пользой. В Overflow легко импортируются экраны из Sketch или Figma, а сделать flow для 100 экранов можно за час — гораздо быстрее, чем рисовать стрелочки самому.

Нужен дополнительный уровень понимания, как продукт будет работать? С помощью таких сервисов, как Marvel, InVision, POP App и Origami Studio детализированный прототип можно превратить в интерактивный. Его польза в том, что он дает прокликать (а в случае, если у нас мобильное приложение — прокликать прямо в телефоне) все элементы интерфейса и оценить логику работы продукта до того, как он попадет в руки конечного пользователя.

Его создание — этап необязательный, так как с презентацией будущей работы справляются макеты и user flow. Но когда нужно показать возможности мобильного приложения и раскрыть перед клиентом предстоящий объем работ в деталях, используйте его.

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

Редизайн существующего проекта

  • Отчет об экспертной оценке юзабилити

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

Стилизация

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

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

Этапы Проектирования  и разработки дизайна интерфейсов

дизайн-концепт сайта

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

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

Вау!! 😲 Ты еще не читал? Это зря!

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

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

создано: 2016-04-07
обновлено: 2021-03-13
181



Рейтиг 9 of 10. count vote: 2
Вы довольны ?:


Поделиться:

Найди готовое или заработай

С нашими удобными сервисами без комиссии*

Как это работает? | Узнать цену?

Найти исполнителя
$0 / весь год.
  • У вас есть задание, но нет времени его делать
  • Вы хотите найти профессионала для выплнения задания
  • Возможно примерение функции гаранта на сделку
  • Приорететная поддержка
  • идеально подходит для студентов, у которых нет времени для решения заданий
Готовое решение
$0 / весь год.
  • Вы можите продать(исполнителем) или купить(заказчиком) готовое решение
  • Вам предоставят готовое решение
  • Будет предоставлено в минимальные сроки т.к. задание уже готовое
  • Вы получите базовую гарантию 8 дней
  • Вы можете заработать на материалах
  • подходит как для студентов так и для преподавателей
Я исполнитель
$0 / весь год.
  • Вы профессионал своего дела
  • У вас есть опыт и желание зарабатывать
  • Вы хотите помочь в решении задач или написании работ
  • Возможно примерение функции гаранта на сделку
  • подходит для опытных студентов так и для преподавателей

Комментарии


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

Дизайн программных UI и Web дизаин

Термины: Дизайн программных UI и Web дизаин