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

9

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

Кристофер
источник
3
Мне всегда говорят: «Сделайте набросок вашего интерфейса, если вы сделаете это в фотошопе или что-то еще, что люди подумают, что вы дальше, чем вы есть. Оставьте ваши макеты выглядящими схематично, просто опустите основы, чтобы ваш клиент знал, чего ожидать, а затем расширялся». на вашем интерфейсе позже. "
Ханна
1
Это полностью зависит от проекта. Универсального «лучшего» ответа не существует.
DA01

Ответы:

14

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

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

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

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

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

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

Лез Мажесте
источник
ОП может быть спорным об использовании редактора кода WYSIWYG, с его помощью вы можете выбирать цвета или даже «рисовать» объекты ...
jackJoe
2
На самом деле, кодирование без предварительного проектирования пользовательского интерфейса является вполне допустимым методом. Это, конечно, если «кодирование» не означает UI или UX части :). Большинство API и библиотек разрабатываются фактически без учета пользовательского интерфейса - это было бы просто непрактично.
Thebodzio
1
@lese, ты разбираешь метод водопада. Что может быть хорошо, но тенденция в наши дни заключается в том, чтобы идти быстрыми темпами, при этом очень вероятно, что вы работаете в коде с первого дня.
DA01
@ DA01: Вы работаете над кодом с первого дня, но все еще применяете методологию сверху вниз. В Agile нет ничего, что говорит о том, что вы не можете планировать свою архитектуру данных или определять UI-сначала до кодирования (что, я думаю, большинство гибких фирм предпочитают UML, диаграммам классов и т. Д.).
Lèse Majesté
2
@thebodzio: Да, конечно, для этого существует разделение интересов. Но я не имею в виду кодирование бэкэнда. Когда я говорю кодирование с точки зрения разработки части вопроса (а не аналогии с программированием, которую я использовал, чтобы проиллюстрировать эту мысль - я знаю, немного запутанно), я имею в виду кодирование макета (CSS + HTML или любой другой язык пользовательского интерфейса). ).
Lèse Majesté
5

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

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

thebodzio
источник
2
"и вы знакомы и привыкли работать на уровне" кода "" -> Важно, чтобы команда UI / UX могла работать на уровне кода. Каждый дизайнер не обязательно должен быть программистом, но команда должна уметь создавать все, что они проектируют, и понимать инженерию так же, как и визуальный дизайн.
DA01
Я могу согласиться, если вы имеете в виду команду в целом. Я думаю, что когда вы просто разрабатываете UI / UX, а не программируете его, знание внутренней работы кода может на самом деле вас сдерживать, потому что вы будете стремиться избегать некоторых потенциальных решений только потому, что будете считать их «слишком трудными для понимания». воплощать в жизнь". Это означает, что ваши проекты могут быть лишены некоторых блестящих идей, потому что «мышление инструментария» заблокирует части вашего воображения. Опять же ... это только одна сторона клинка :) Кроме того, вопрос был только о "макетах".
Thebodzio
1
Я слышу «держать вас назад» довод много, но найти это приходит только от визуальных дизайнеров , которые упорно против обучения код уровня представления. Эти люди также склонны делать все во Flash. :) Я хотел бы предположить, что это ничем не отличается от полиграфического дизайна. Знание того, как работает печать, не «сдерживает вас» как дизайнера печати. Скорее, он не позволяет вам создавать файлы, которые будут душить RIP, или заставлять принтер кричать на вас для 300% покрытия чернилами. Это просто понимание среды и связанных с ней ограничений.
DA01
1
WYSIWYG не для облегчения «визуального мышления». Это для того, чтобы позволить людям, которые не хотят учиться чему-то безвольно. ;) Что касается ограничений, они определяют среду. Архитектор, который умеет рисовать отличные картинки, но не понимает основ нагрузок и пролетов, в значительной степени сдерживается ... поскольку ничто из того, что они рисуют, на самом деле не может быть построено.
DA01
1
(и большая часть моего мнения сформировалась, работая или с командами UX, или с командами UX, которые не имеют представления о том, как создать что-то, что они придумали. Большую часть времени они не занимаются инновациями ... а скорее проектируют только наполовину продуманную решения, которые не практичны с точки зрения реализации, сроков, пользователей или бюджетов [которые являются дополнительными ограничениями, которые, вместо того чтобы быть «стенами», являются тем, что помогает определить проектное решение]) PS: хорошее обсуждение!
DA01
3

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

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

Фотография каркаса доски

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

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

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

user56reinstatemonica8
источник
2

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

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

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

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

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

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

Уоррен Койффель
источник