Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. UX
Webdesign

3 совета как сделать UX документацию лучше

by
Length:ShortLanguages:

Russian (Pусский) translation by Ola Matona (you can also view the original English article)

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

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

Компоненты UX документации

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

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

Инструменты

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

httpuxtoolscotoolshandoff
uxtools.co/tools/handoff

Figma

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

Adobe XD

Пока бесплатен. Это UI/UX решение все-в-одном для дизайна сайтов, мобильных приложений и т.д. Он генерирует специальную ссылку для спецификаций, также есть защита паролем.

InvisionApp

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

Zeplin

Инструмент для передачи дизайна, с возможностью интеграции Slack и Sketch (только для Mac), чтобы упростить взаимодействие с разработчиками. Также вы можете экпортировать свои файлы из Figma, Photoshop и XD прямо в Zeplin. Функция комментирования тоже очень удобна и находится там же, где и спецификации.

Узнайте больше об UX инструментах

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.