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

Web/сайты Прочее

Был(а) онлайн: 26.04.20 14:45
Umen 26 лет

1.0 Был(а) онлайн: 26.04.20 14:45

Недавно
Нужно придумать и нарисовать дизайн страниц и интерфейсов без верстки в 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) содержит наименование локации и число персонажей в ней. После этого, обязаны быть порядок сортировки ников в списке и кнопка "Обновить", принудительно обновляющяя список пользователей. Возможно сделать выбор порядка сортировки менюшкой с иконками. Взаимное расположение элементов также дозволено произвольно менять. Дизайнеру нужно рассматривать, что фрейм со списком персонажей может растягиваться по горизонтали.

Кнопки чата

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

Лог боя

Лог боя - это текстовый список действий персонажей во время боя с постраничным пролистыванием. Лог боя может быть в 2-х вариантах - один встраивается в стержневой фрейм игры, иной открывается в отдельном окне. В тезисе, оформить дозволено вид, в котором есть все элементы, указанные на рисунке 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. Разумеется, нужно рассматривать, что окно может изменять размер по ширине.

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

Мой блок

26.04.20 14:45
Umen 26