Дизайн интерфейса для браузерной онлайн-игры

Нужно придумать и нарисовать дизайн страниц и интерфейсов без верстки в HTML.

Основной игровой интерфейс состоит из нескольких фреймов, взаимное расположение которых показано на рисунке 1 (все рисунки, упомянутые в ТЗ, доступны тут - http://www.joyteam.ru/st/ml/design/interface.jpg). Общие условия, касающиеся дизайна фреймов - не делать никаких художественных рамочек вокруг них, а придумать цвет и ширину в пикселях для однотонных бордеров. Иконки, кнопки и т.д. тщательно отрисовывать не надо (это будет отдельная работа) - достаточно просто обозначить их места какими-нибудь временными значками соответствующего размера.

Фрейм с локацией

В этом фрейме (рис. 2) показывается текущее положение персонажа в локации и текущие оперативные действия, которые ему доступны в данном месте. Дизайнеру необходимо для каждого из элементов, выделенных прямоугольниками, придумать оформление.

Область для системных сообщений - это максимум 5-10 строк мелкого текста, который должен быть заметным, но бледным, чтобы не отвлекать игрока от игры - тут будут выводиться всякие надписи типа "Рядом с вами кто-то появился", "Будьте осторожны - проснулся волк" и т.д. Сообщения могут быть разных цветов ("обычные" бледно-серые, "проблемные" бледно-красные, "хорошие" бледно-зеленые и т.д.) - подберите гамму различных допустимых цветов. В этой области может и не быть сообщений совсем, может быть несколько, не обязательно все 5-10. Сообщения тут могут появляться и исчезать через какое-то время. Никакого заголовка типа "Системные сообщения" быть не должно.

Область для взаимодействия - когда игрок начинает торговую сессию своего персонажа с другими, то в этой области появится соответствующая запись "Торговля с ...", которая исчезнет, когда торговая сессия прекратится. Может быть несколько одновременных торговых сессий - тогда надписей "Торговля с ..." должно быть несколько. Персонаж может находиться в бою, тогда появляется надпись с названием боя "Групповой бой", "Бой с персонажем ..." или аналогичная. Одновременно можно находиться только в одном бою. Следующее, что надо учесть, это оформление этого списка. Допустимо написать в заголовке блока что-то вроде "Взаимодействие". Кроме торговли и боев, тут могут в будущем появится и другие надписи, это нужно тоже учесть. Чтобы не делать однообразными текстовые надписи, можно оформить их какими-нибудь иконками. В отличие от системных сообщений, список взаимодействий должен быть заметными и сразу бросаться в глаза.

Область для кнопок - это панелька, на которой будут появляться различные кнопки. Панель может включаться и отключаться, кнопок на ней может быть как много (до 5), так и мало (1). Панелька должна быть как можно компактнее, чтобы не занимать полезную площадь экрана. Допустимо сделать панельку вообще прозрачной, если так будет лучше смотреться. Нужно отрисовать кнопку-пустышку, которая станет подложкой для художника по иконкам.

Область для всплывающих сообщений - это всякие системные сообщения, которые требуют исключительного внимания игрока. Поверх всего остального будет выводиться прямоугольное сообщение, которое будет закрываться щелчком по нему (кнопку "Закрыть" рисовать не надо). Всплывающие сообщения могут быть "хорошими" (например, зелеными), и "проблемными" (например, красными).

Всплывающее меню

При нажатии правой кнопки в локации должно появиться всплывающее меню, оформленное в стиле самой игры. Допустима декоративная рамка. В всплывающем окне должна быть одна строчка-заголовок (например, "Персонаж Злодей") и несколько пунктов меню, например "Напасть", "Торговать" и т.д. Каждый пункт меню должен сопровождаться иконкой. У всплывающего меню не должно быть кнопки "Закрыть". Меню должно быть красивым, но достаточно компактным.

Основной фрейм

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

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

Меню

Меню всегда будут ориентированы горизонтально (см. рис. 3). Каждый элемент меню может быть картинкой, текстом или и тем, и другим сразу. Активный пункт меню должен быть подсвечен. Может быть одновременно несколько полосок меню (3 - максимум) - это также должно быть учтено при оформлении. Задача дизайнеру - сделать высоту менюшки как можно меньше, чтобы сэкономить полезную площадь фрейма. Соответственно, шрифт должен быть поменьше, картинки не больше 50x50, но вполне возможно, что и 32x32 окажется достаточно. Нужно отрисовать кнопку-пустышку, которая станет подложкой для художника по иконкам.

Таблица

Таблицы будут появляться везде, где нужно будет отобразить всякого рода списки. У таблицы могут быть два опциональных элемента - список страниц и заголовок. Пример списка страниц приведен на рисунке. Текущая активная страница должна быть каким-то образом подсвечена. Заголовок содержит названия страниц. У таблиц не должно быть сетки.

Форма

Форма (см. рис. 4) состоит из списка элементов ввода и одной или нескольких кнопок для отправки формы. Каждый элемент ввода всегда имеет какое-то наименование. У некоторых полей (не у всех) могут быть примечания, разъясняющие, что надо вводить в них. Если при вводе пользователем в поле допущена ошибка, то появляется сообщение об ошибке рядом с этим полем. У дизайнера есть свобода действий: выбор цветов фона, рамки и текста для полей ввода, взаимного расположения наименования, примечания, сообщения об ошибке и собственно поля ввода, отступы между полями. Кнопкам отправки формы можно изменять размеры, цвета текста, фона, рамки, а также отступы между ними. Над формой допустим список ссылок, например, на отказ от заполнения формы. Поля ввода могут быть однострочными (как на рисунке), выпадающими списками и многострочными полями ввода (textarea).

Сообщение

Зачастую, результат действия пользователя будет показываться в виде отдельной странички, на которой изображена декоративная рамка и сообщение внутри нее (см. рис. 5). Сообщения бывают "обычными" (без цветовой окраски), "хорошими" (например, зелеными) и "проблемными" (например, красными). Рамка должна быть сделана так, чтобы ее можно быть тянуть как по горизонтали, так и по вертикали. В сообщении должна быть кнопка "Возврат".

Интерфейс магазина

Заходя в магазин, в основном фрейме персонаж будет видеть ассортимент товаров, предлагаемый в нем. Дизайнеру нужно придумать, как оформлять список товаров. О товаре нужно показывать: название, картинку, категорию, цену, его характеристики, количество, сколько купить, и кнопку "купить". Пример хорошего оформления списка товаров - http://www.joyteam.ru/st/ml/design/dwar.jpg (на правую колонку не смотреть). Учтите, что размер картинки может быть от маленьких (60x60) до больших (135x135).

Интерфейс инвентаря

Вызвав собственный инвентарь, персонаж должен увидеть список имеющихся у него вещей. Инвентарь должен быть организован в две колонки. Слева - название вещи, ее картинка и список действий "Выбросить", "Продать", "Использовать" и т.д. Справа - характеристики вещи. Пример удачной организации инвентаря - http://www.joyteam.ru/st/ml/design/torm.jpg. Учтите, что размер картинки может быть от маленького (60x60) до большого (135x135).

Канал чата

Канал чата - это просто список сообщений, которыми обмениваются игроки. Бывают следующие виды сообщений:

* 10:05:15 [персонаж 1] для [персонаж 2] привет, негодяй

* 10:05:20 [персонаж 2] лично [персонаж 1] привет

* 10:05:25 Системное Сообщение Для Всех

* 10:05:30 [персонаж 1] уходит в Темную Пещеру

* [ Вы находитесь в Темной Пещере ]

* 10:05:35 [монстр 1] совершил нападение на [персонаж 1]

* 10:05:40 [персонаж 1] http://www.yandex.ru

Для каждого сообщения нужно придумать оформление цветами и жирностью. Когда в тексте встречаются ники персонажей "персонаж 1" и "персонаж 2", то они должны быть особо выделены в чате (например, сделаны жирными), поскольку они кликабельны. Когда в тексте встречается собственный ник персонажа, то фон под ним должен быть подсвечен - в исходящих сообщениях зеленым цветом, во входящих - красным. Допустимо в сообщениях, адресованных персонажу, который читает чат, подсвечивать время красным фоном, таким же, как и ник. Системные сообщения для всех должны быть яркого заметного цвета, например, красными. Есть сообщения малозначительные, например, когда персонаж уходит в другую локацию: "10:05:30 [персонаж 1] уходит в Темную Пещеру" - такие сообщения должны быть бледного цвета. Когда сам персонаж переходит в другую локацию, у него должно появляться сообщение вида "[ Вы находитесь в Темной Пещере ]", которое вполне допустимо в какую-нибудь рамку даже поместить, поскольку для самого персонажа это важно. В сообщениях о начале боя слово "нападение" должно быть подсвечено и быть кликабельным. Когда в тексте будут встречаться ссылки, нужно их подсвечивать, и они будут кликабельными.

Строка ввода

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

Список персонажей в локации

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

Кнопки чата

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

Лог боя

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

Внешние страницы

Все страницы, которые будут открываться в отдельном окне, должны быть единообразно оформлены. У страницы должна быть шапка с логотипом игры, названием страницы и опциональной формой поиска (ее может на некоторых страницах и не быть) (см. рис. 7). Оформление фона страницы очень хорошо придумано на http://www.dwar.ru/user_info.php?nick=spongebob999 - если будет что-то аналогичное, будет отлично. Разумеется, надо учитывать, что окно может изменять размер по ширине.

Информация о персонаже

Информация о персонаже - это одна из внешних страниц. Пример приведен на рисунке 8. Надписи "персонаж в игре" и "персонаж вне игры" должны быть соответственно оформлены (если вне игры, то "выключенный" цвет, какой-нибудь серый, если в игре, то "включенный", например, зеленый). Можно иконку какую-нибудь к этому сделать - подключен или отключен. По центру инфы расположен аватар персонажа, о котором я напишу ниже. Слева - список характеристик персонажа. Он будет меняться, и может быть как коротким (меньше аватара), так и длинным (больше аватара). Соответственно, дизайнеру надо будет определиться с выравниванием блоков. Справа - тоже параметры, которые могут быть, как меньше аватара, так и больше. Под аватаром расположены два блока - анкета и подарки. Раздел подарки может отсутвовать, а раздел анкета может как быть открытым, так и закрываться модераторами, если содержит нецензурную лексику. Поэтому раздел анкеты существует всегда, но нужно отдельно нарисовать вид анкеты, когда там, вместо данных, расположена картинка, например, с дорожным знаком "кирпич" и надписью вида "Анкета скрыта до 01.06.2008". Самый нижний блок - подарки. Каждый подарок - это картинка 60x60 пикселей. Дизайнеру нужно отрисовать оформление подарка (подложку), которое будет в дальнейшем использовано для отрисовки подарков.

Аватар персонажа

Аватар персонажа изображен на рисунке 9. В центре - образ, размер которого составляет 180x345 пикселей (12x23 клетки). Вокруг - слоты, в которые будут вставляться картинки экипировки. Отступы между всеми элементами - 1 клетка или 15 пикселей (все, как на рисунке). Дизайнеру нужно нарисовать такие рисунки, чтобы, как у заполненных, так и у незаполненных слотов было художественное обрамление. У самих слотов должен быть белый фон (именно на белом будут рендериться все рисунки экипировки). Текстовые подписи на слотах делать не нужно. Сам образ рисуется на черном фоне. Соответственно, задача дизайнера - оформить аватар так, чтобы образ на черном фоне и экипировка на белом выглядели красиво. Художникам, которые рисуют экипировку, дана инструкция делать отступ от краев рисунка по 5 пикселей с каждой стороны - вы можете рассчитывать на это. Примеры, как оформляют аватар персонажа в других играх, можно посмотреть тут: http://www.torment.ru/user/110408, http://morion.carnage.ru/inf.pl?user=Mindwar, http://www.dwar.ru/user_info.php?nick=spongebob999

Всплывающее окно

Например, при нажатии на подарок, будет открываться вспомогательное всплывающее окно, которое должно выглядеть примерно, как изображено на рисунке 10. У окна должен быть заголовок, но не "тяжелая" шапка, как в "Внешних окнах", а что-то легкое, например, как сделано тут: http://enter.territory.ru/artifact_info.php?id=96599289. Разумеется, надо учитывать, что окно может изменять размер по ширине.