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

StackOverflow https://stackoverflow.com/questions/3781

  •  08-06-2019
  •  | 
  •  

Вопрос

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

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

Это было полезно?

Решение

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

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

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

Нажмите на ссылку "Посмотреть видео!" по адресу twitter.com чтобы увидеть интересный взгляд на идею от Обычное Ремесло.

Другие советы

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

Napkin Look and Feel

Серьезно, насколько это круто?

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

Проверьте Бальзамик

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

Имеет полнофункциональный ДЕМОНСТРАЦИЯ вы можете попробовать онлайн, и в качестве дополнительного бонуса вы можете отправить свой XML-файл по электронной почте своему клиенту, и они смогут настроить его, поиграть с ним и отправить вам обратно по электронной почте без необходимости получения лицензии.

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

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

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

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

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

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

Получив базовую структуру, вы можете перенести ее в Visio с помощью каркасных трафаретов

Или вы могли бы использовать Джинсовую ткань (Неофициальный инструмент Для разработки веб-сайта и пользовательского интерфейса на ранней стадии) с помощью планшетного компьютера или планшетов Wacom разработать графический интерфейс и запустить его как веб-сайт в формате HTML.

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

Sample WireframeSketcher mockup
(источник: wireframesketcher.com)

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

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

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

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

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

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

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

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

Работает на нас ...

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top