Главное Свежее Вакансии Образование
Выбор редакции:
0 4 В избр. Сохранено
Авторизуйтесь
Вход с паролем

О том, что важно - Интерфейс и дизайн

Получив первые отзывы пользователей, было решено переработать внешний вид редактора HTML5 игр Game Coder. О нюансах мероприятия по редизайну и хотелось бы рассказать.

Изначально IDE была оформлена так:b_59c22581da78d.jpg

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

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

Так же переработке подлежало и левое меню самого проекта, в особенности - списка файлов. Уже давно пользователи привыкли ориентироваться в файловых системах любых ОС по иконкам и пиктограммам.

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

Так же очень важно дать возможность пользователю самому менять цветовые настройки редактора, так как кому-то удобно работать в темных тонах, а кому-то - в светлых. Для этой цели стоит посмотреть на популярные IDE и выделить основные цветовые схемы. Так, были использованы темы, похожие на Eclipse, Sublime Text и Blitz3D.

Результаты работы вы можете видеть на скриншоте ниже:b_59c2293881e7a.jpg

b_59c22a49577a5.jpg

0
В избр. Сохранено
Авторизуйтесь
Вход с паролем
Комментарии
Ярослав Лаптев
вы пытаетесь повторить Visual Studio Code?)
http://prntscr.com/gndwmn
Ответить
RTS Game
Мобильная игра в жанре RTS
Петр Нагель
вовсе нет) Если почитаете о проекте, Game Coder - это редактор HTML5 игр, в котором встроена система работы, отладчик, компилятор, система тестирования написанных игр. Мы просто хотим сделать правильный интерфейс, который бы побуждал работать, не отвлекаясь. Но если так получится, что наш интерфейс будет на что-то похож, мы не специально)
Ответить
Ярослав Лаптев
Спасибо, удачи проекту)
Ответить
RTS Game
Мобильная игра в жанре RTS
Петр Нагель
Спасибо и вам за комментарий!
Ответить
Выбрать файл
Блог проекта
Расскажите историю о создании или развитии проекта, поиске команды, проблемах и решениях
Написать
Личный блог
Продвигайте свои услуги или личный бренд через интересные кейсы и статьи
Написать

Spark использует cookie-файлы. С их помощью мы улучшаем работу нашего сайта и ваше взаимодействие с ним.