В настоящее время я работаю над созданием нескольких базовых прототипов, частично для сбора требований и частично для разработки окончательного интерфейса.
В данный момент я пытаюсь создать экран, используя заметки Post-it, с желтыми заметками для информации и розовыми для действий (кнопок или меню). Идея в том, что вы можете легко перемещать, удалять и добавлять информацию. Но я уверен, что есть более эффективные методы.
Каков рекомендуемый способ для разработчиков эффективно создавать неинтерактивные прототипы пользовательского интерфейса?
И почему?
Я попробовал несколько версий ручек, бумаги и пост-заметок, и они упали как свинцовый шарик (вероятно, мои навыки рисования). В конце концов я использовал Balsamiq , который до сих пор нравится большинству пользователей, и они получают его как прототип. Увы, у некоторых людей все еще возникают проблемы с идеей, что сначала нужно получить представление о том, что приложение должно делать с помощью прототипов lo-fi, и действительно хотят «увидеть что-то на экране», прежде чем что-то делать.
источник
Ответы:
Я предпочитаю доску.
Это облегчает изменение, когда вы принимаете решения, не перерисовывая все это. Легко поделиться с другими (рядом) разработчиками. Это легко комментировать с помощью заметок или других цветов.
источник
Макеты Balsamiq обычно являются первым портом захода, почти таким же быстрым, как использование ручки и бумаги и многоразовым.
Кроме того, вы можете добавить некоторую степень интерактивности, если хотите, например, связывая страницы вместе.
http://balsamiq.com/
источник
Pencil Project - это дополнение к Firefox, которое делает красивые и простые макеты.
источник
Я использую комбинацию MS Paint и Visual Studio. Я использую VS для перетаскивания всех элементов управления, которые я хочу, на форму, а затем делаю снимок экрана в MS Paint, чтобы переставить их, пока мне не понравится, как он выглядит.
Таким образом, я могу использовать простые, знакомые, бесплатные и всегда доступные инструменты (для меня), чтобы смоделировать мой пользовательский интерфейс, и клиент сможет увидеть его так, как он, вероятно, будет выглядеть после завершения приложения. Кроме того, часто VS заканчивает тем, что содержит начало моего проекта для меня.
Изменить: ответ Тоби привел меня к Balsamiq , и теперь это мой основной инструмент выбора для макетов пользовательского интерфейса для представления другим людям.
Иногда я по-прежнему вытаскиваю MSPaint или ручку / бумагу, но обычно это происходит только тогда, когда я делаю наброски базового дизайна пользовательского интерфейса для собственной справки или если я хочу представить клиенту две опции для завершенного экрана (например, " хотите кнопки здесь или здесь? " )
источник
Похоже, вы используете хорошие методы, но вы сталкиваетесь с сопротивлением, когда люди принимают полезность быстрого прототипирования. Всем нравится писать код, но если через полчаса они все еще борются с JScrollBars и вы сгенерировали 12 макетов, они могут понять, что сила этих инструментов в быстрой итерации .
При этом различные подходы с низким уровнем фантастики имеют разные сильные стороны:
Прототипирование доски полезно, потому что каждый может участвовать, и это помогает обосновывать идеи, но это всего лишь инструмент для обсуждения. Вы хотите сделать что-то еще на шаг вперед, если собираетесь перебирать дизайн, хотя бы потому, что стереть старый маркер становится сложно. ;)
Бумажное прототипирование полезно, потому что люди понимают, что оно непостоянно и открыто для изменений, и вы можете быстро выполнять итерации, и вы все равно можете получить очень хорошие результаты. Проведите юзабилити-тестирование с несколькими пользователями на бумажном прототипе, и вы сможете получить отличные отзывы о дизайне очень быстро, с довольно низкой стоимостью. Люди действительно вовлекаются, когда они могут видеть и чувствовать интерфейс на бумаге.
Бальзамик - это быстрое создание бумажных прототипов, которые можно использовать повторно. Я распечатываю скриншоты и использую их как бумажные прототипы. Я также использую его во время встреч, чтобы помочь имитировать идеи, как они у нас есть - подобно прототипированию доски. Я также использовал Visio и OmniGraffle для этого.
Вырезать и вставлять прототипы хорошо для итерации существующего дизайна - сделать снимок экрана, нарезать его в редакторе изображений, смешать и сопоставить с новыми элементами управления (из Balsamiq или где-либо еще). Еще раз ваша цель - быстрая итерация прототипа, а не то, что выглядит хорошо.
Я никогда не делаю прототипирование с пользователями. Я делаю это с командой дизайнеров, основываясь на пользовательских данных, которые у нас есть. Пользователи не дизайнеры ; если вы относитесь к ним как к дизайнерам, вы получите водянистый томатный соус, горький кофе (спасибо Малкольму Гладуэллу) и машину Гомера. Соберите пользовательский вклад в ваш дизайн и используйте его для уточнения дизайна с командой дизайнеров.
источник
Моими первыми макетами всегда были карандаш, бумага или белая доска, но, как только основа придумана, я обычно перехожу к HTML. У меня есть куча изображений-заполнителей, которые просто говорят «Заголовок», «Баннер», «Изображение», «Диаграмма» и тому подобное. Несколько простых CSS для того, чтобы выложить некоторые вещи разумно, и я готов. Небольшой JS, привязанный к элементу управления, может дать вам некоторое подобие функциональности, и люди, кажется, просто «получают его» лучше.
Единственная проблема с этим заключается в том, что я, вероятно, худший в мире дизайнер пользовательского интерфейса, и иногда мне приходится напоминать людям, что я просто собираю требования, а не показываю, как будет выглядеть законченная вещь. Я часто устанавливаю фон в розовый или что-то в этом роде, поэтому всякий раз, когда кто-то спрашивает: «Должен ли он быть розовым?» Я могу возразить: «Это просто макет, реальная вещь будет выглядеть иначе» (или «Вам придется обсудить это с дизайнером»).
источник
Сначала я использую ручку и бумагу, а затем, несколько раз нарисовав интерфейс, пытаюсь сделать это в powerpoint 2 или 3 раза. Наличие 5 или 6 итераций перед тем, как войти в настоящий редактор, помогает мне сократить неработающие пользовательские интерфейсы (например, генерировать контент Y на основе текстового поля X, когда пользователь еще даже не видел X). Я вижу в этом шанс вытащить глупостей прямо сейчас.
источник
Перо и бумага / доска, вы также можете использовать Visio или что-то подобное (Visio поставляется с шаблонами пользовательского интерфейса для общих элементов управления). Иногда я делаю снимки существующего (похожего) интерфейса, который у нас есть, и вырезал и вставлял в него новый интерфейс, используя программу рисования, такую как Paint.NET.
источник
Я делал быстрые прототипы в Delphi несколько раз. Это позволяет очень быстро собрать воедино макет экрана, гораздо быстрее, чем в PowerPoint или Visio. Полученный exe-файл может быть прикреплен к электронной почте без каких-либо зависимостей. Поскольку я использую его для создания прототипов веб-приложений, нет никакой опасности, что люди будут путать прототип с готовой версией наполовину.
Я пытался сделать то же самое с Sencha Ext Designer, но система компоновки Ext JS сложнее в использовании, и это было скорее бременем, чем удобством для быстрой итерации идей.
источник
Я не всегда использую один и тот же подход. Вот некоторые из методов, которые я использую (в грубом порядке частоты):
Доска (для интерактивного создания прототипов / обсуждения. Сделайте фото позже!)
Дизайнер графического интерфейса в стиле RAD (Visual Studio, NetBeans, Delphi)
Бумага и ручка / карандаш (обычно для мозгового штурма)
Статические файлы HTML / CSS / JS на диске
Векторные инструменты рисования - Illustrator / Inkscape / Visio / PowerPoint / Impress
Инструменты растровой графики - Photoshop / Gimp
ASCII art ;-)
источник