x
 
Женя Бакст
21 августа 2008

Существует ли какая-то система нотации для моделирования пользовательского интерфейса, которая бы позволяла обозначать такие свойства элементов, как «резиновость», сохранение выравнивания по какой-либо оси?

Применяется ли что-либо подобное у вас в бюро?



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

Однако наш опыт показывает, что при разработке все равно приходится делать вот так:


Поделиться
Отправить

Комментарии

Саша Киссель
21 августа 2008

У нас в компании принята простая схема передачи информации от проектировщиков — дизайнерам и программистам. Одним мы выдаем просто интерактивный прототип, а другим — ТЗ с интерактивным прототипом.

Для прототипирования используем «Аксуру» (http://axure.com), она позволяет удобно вставлять примечания, сноски и т. п. К тому же автоматически генерирует спецификацию, в которой английским языком показано, что и где, как и зачем взаимодействует с пользователем и друг с другом.

Вариант Артема прикольней, мне больше по душе. К сожалению, я не один работаю, поэтому приходится использовать то, что эффективней. Не эстетичней, но эффективней :-)

Виталий Ким
21 августа 2008

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

На иллюстрации лекго показать компоновку, но трудно объяснить действие. Поэтому действия лучше описывать словами. В моем представлении, макет интерфейса — это документ с подробным описанием действий и иллюстрациями. Для объяснения компоновки экранов достаточно привести большие «чертежи» со всеми размерами.

Алексей Рытов
21 августа 2008

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

Поэтому система нотаций — это, конечно, хорошо, но нужно, чтобы дизайнер (арт-директор) следил за проектом и на этапе верстки, и на этапе наполнения. Авторский надзор, короче, необходим.

Сергей Бутов
22 августа 2008

А зачем на первых двух драфтах целых 12 полосок? По моему мнению, в этом примере хватило бы трех (по бокам и третьей), а если четко задавать такую специфическую сетку, то надо и весь дизайн под нее подстраивать. Меня, как верстальщика, очень смущает, что сетка есть, а размеры и положение «Типовых блоков» к ней отношения не имеют, а в функциональном меню (ссылки «Играть в плеере», «В плейлист»,…) только мешают.

Максим Богатырев
22 августа 2008

Полностью согласен с Артемом.

Как показывает практика, сначала все гайды, сетка показывается верстальщикам, объясняется на пальцах, что и как работает. Потом верстается.

И, конечно же, потом опять идут правки со стороны дизайнера, на подобие: «1 пиксель вправо», «это по вот этой линии», «прижимаем к этому краю», «отступ −1 пиксель».

Алексей Мельников
24 августа 2008

Друзья!
Мне кажется, что сетки и гайды нужны в двух случаях: либо когда верстальщик находится за три моря и это первый опыт работы с ним, либо когда верстальщик сидит рядом, но работает не в команде, а назло. Тогда, во избежание недоразумений типа «я не виноват, ты же мне не сказал, вот я и не сделал!», ему отправляют макет с разметкой.

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

Однако есть в них и положительный момент, их можно рисовать специально для раздела студийной рутины (обыватель ахнет, 100%), чтобы подчеркнуть сложность процесса и ответственность трудящихся.


24 августа 2008

Сергей, сетка на картинке касается вёрстки в общечеловеческом, а не техническом понимании. Это не инструкция верстальщику, как расставлять теги <tr> и <td>; как это сделать, он должен придумать сам.

В меню по сетке выровнена иконка от кнопки «Плей», а не надпись. То, что это «мешает», не играет никакой роли: перед дизайном никогда не ставится задача быть простым для верстальщика.


24 августа 2008

Илья, иногда, наверное, ставится.

Павел Бородай
24 августа 2008

Описанную проблему решит командная работа. Программист не обязан знать, что такое пиксель и чем он отличается от сантиметра. А верстальщик не обязан уметь переводить хекс-коды в нули и единицы. И уж тем более ни то, ни другое не должно волновать дизайнера. У каждого свой кусок работы, но если все эти персонажи умеют разговаривать и внятно объяснять свои мысли и идеи и, главное, понимают, что каждый из них выполняет только часть целого — успех проекта обеспечен. Отчасти это можно назвать авторским надзором арт-директора (изначально-то мы о дизайне заговорили). Но важнее командная работа!

Виталий Ким
25 августа 2008

Друзья!

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

2 Хочу сделать красивый блог с пошаговыми рецептами 7




Недавно всплыло

Практика: формулировка полезного действия 8 Иногда я спрашиваю о скидке для тренировки и потому что не против шанса сэкономить 1 7 10