Макеты: кодирование или рисование?

Речь идет не о веб-дизайне, а о дизайне интерфейса в целом. Лучше кодировать интерфейсные макеты или «рисовать» их в графических программах, таких как GIMP, Photoshop и т. Д.?

Задайте себе эти вопросы:

• Сколько макетов / параметров пользовательского интерфейса вы можете изучить за 30 минут путем кодирования? Сколько вы можете исследовать, делая наброски?

• Как часто вы получаете дизайн интерфейса точно с первой попытки? Если не очень часто, насколько быстро / легко можно изменить эскиз вместо кодированного макета?

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

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

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

Я бы сначала проголосовал за «рисование». В графическом интерфейсе правильное расположение / представление - ключ, и это требует визуальных средств, которые будут разработаны. Визуальное проектирование графического интерфейса пользователя позволяет вам быстро изменить свой дизайн без необходимости «представлять» каждое изменение, «переводить его в код» и, наконец, тестировать. Возможен и другой способ, но он редко бывает лучше (например, проект очень маленький, например, всего несколько кнопок, и вы знакомы и привыкли работать на уровне «кода»); во время проектирования могут появиться некоторые шаблоны, которые могут быть просто повторно используется с небольшой модификацией).

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

Для разработки пользовательского интерфейса у меня есть три этапа с разными целями:

1. Sketching. Во-первых, вы хотите получить общее представление о том, какие элементы будут и как они будут сочетаться друг с другом. Любая мелкая деталь или эстетический перфекционизм на этом этапе отвлекает. Я использую доску и жирную стираемую ручку, поэтому невозможно отвлечься от слишком большого количества деталей, легко набросать кучу разных идей и начать все заново в любое время. Я слышал о людях, которые только делают наброски на небольших заметках или используют свои руки (например, левую руку, если вы правша), чтобы заставить себя вообще не обращать внимания на эстетику и фокусироваться на 100%. по идее и функции. (изображение не мое, от Фрэнка Прендегаста )

2. (2!) Имитация.Во-вторых, вы хотите взглянуть свысока и получить обратную связь, выяснив как можно больше о том, что такое интуиция и непредсказуемые ответы людей, прежде чем вы начнете трудоемкую работу по внедрению. Это должно быть в том, во что вы работаете наиболее эффективно, так как, если вы делаете это правильно, вы должны часто возвращаться к «чертежной доске», выискивая критику и стремясь выявить как можно больше неожиданных проблем как можно раньше. Если вы сумасшедший компьютер для кодирования, и это то, в чем вы работаете наиболее комфортно, то кодирование в порядке, но большинство людей будут работать быстрее в чем-то вроде Fireworks, Photoshop, специального программного обеспечения для создания каркасов или, возможно, построителя интерфейса на основе пользовательского интерфейса, такого как Flash Catalyst. (хорошо, если конечный продукт не Flash, цель - получить хорошую обратную связь, прежде чем приступить к реализации).

3. (3!) Реализация. Наконец, вы реализуете эту задачу и стремитесь сделать это таким образом, чтобы вы могли получать больше отзывов на ранней и частой основе.

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

Этот вопрос немного расплывчатый и, как таковой, как и ответы.

Кроме того, проекты будут сильно отличаться, как и команды.

Тем не менее, нет «лучшего». Речь идет об использовании всех инструментов в рабочем процессе, который имеет смысл для вас и вашей команды.

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

1. Эскиз. Карандаш + бумага. Whiteboards. Итерация. Работайте с как можно большим количеством членов команды.
2. низкоуровневые макеты. Может быть PSD, может быть Visio. Может быть бумага. Пользователь тестирует это.
3. Доберитесь до создания прототипов. Здесь вы хотите начать делать как можно больше в рабочем коде. Перейдите в Фотошоп, как вам нужно, и выложите все это в код как можно быстрее. Продолжить пользовательское тестирование / повторение.

Что мне подходит, так это создание макетов с помощью программы, которая подчеркивает, что не нужно создавать макеты с идеальным пикселем. Для меня это Balsamiq Mockups, которые вы можете проверить на http://www.balsamiq.com/products/mockups