Создание прототипа графического интерфейса с заказчиком

При создании прототипа исходной функциональности графического интерфейса с клиентом, что лучше: использовать рисунок ручкой / бумагой или смоделировать что-то с помощью инструмента и показать им это?

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

Ответов (12)

Решение

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

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

Джефф обсуждает бумажное прототипирование в своей статье «Coding Horror» « Разработка программного обеспечения на основе пользовательского интерфейса».

Click the "Watch a video!" link at twitter.com to see an interesting take on the idea from Common Craft.

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

Итог: делайте это как можно проще. Если он на бумаге, покупатель никак не спутает его с рабочим продуктом.

Недавно я использовал приложение для Windows для создания прототипа приложения для клиента (окончательный интерфейс должен быть интегрирован в веб-сайт).

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

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

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

Я предлагаю вам сесть со своим клиентом и использовать такой инструмент, как Mockupscreens, и разработать пользовательский интерфейс в интерактивном режиме. Преимущество, которое он имеет по сравнению с Napkin LAF, заключается в том, что он не требует кодирования или каких-либо инструментов разработки.

The "Napkin Look & Feel" for Java is really cool for prototyping. An actual, functioning, clickable app that looks like it was drawn on a napkin. Check out this screenshot:

Салфетка Look and Feel

Seriously, how cool is that?

WireframeSketcher - это инструмент, который помогает быстро создавать каркасы, макеты и прототипы для настольных, веб-и мобильных приложений. Он поставляется как автономная версия, так и как плагин для Eclipse IDE. Он имеет некоторые отличительные особенности, такие как раскадровки, компоненты, связывание и экспорт в векторный PDF. Среди поддерживаемых IDE - Aptana, Flash Builder, Zend Studio и Rational Application Developer.

Образец макета WireframeSketcher
(источник: wireframesketcher.com )

There is a book called Paper Prototyping which details pen and paper drawing and what you can gain from it. I think it has a lot of benefits, particularly that you can, very early on (and easily), modify what the end result will be without much effort, and then start off on the right foot.

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

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

Я думаю, что лучше всего начать с бумаги / доски / белых стен.

Когда у вас есть базовая структура, вы можете переместить ее в Visio с помощью наборов каркасов.

Или вы можете использовать Denim ( неофициальный инструмент для разработки веб-сайтов и пользовательского интерфейса на ранних этапах ) с планшетным ПК или планшетами Wacom для разработки графического интерфейса и запуска его как веб-сайта в формате HTML.

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

Проверьте Balsamiq

Он очень хорошо делает вид салфетки «ЭТО НЕ ФУНКЦИОНАЛЬНОЕ ПРИЛОЖЕНИЕ» и прост в использовании.

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

Для инструмента на основе браузера, не требующего установки, вы можете попробовать draft-it

Это бесплатно, а если у вас есть учетная запись Gmail, регистрация не требуется.

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

У нас работает ...