UI: разные варианты одной панельки!

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

Начало

Есть у меня игра... висит в статусе "в разработке" уже больше полугода. Жанр - что-то вроде Tower Defense. Базовое флеш-окошко имеет разрешение 700x525 пикселей. Основная "движуха" в центре экрана. Отличие от Tower Defense в классическом понимании - это то, что башня у нас только одна.
Итак, мы можем улучшать параметры центрального игрового здания. Встаёт вопрос - как лучше это делать с точки зрения интерфейса? Вариантов несколько:

• Диалоговое окно 
• Постоянно висящая панелька 
• Выезжающая панелька
• А может вообще упростить интерфейс, убрав ненужные кнопки?  

Сейчас будем разбирать все эти варианты.

Диалоговое окно

Это первое, что приходит на ум. Нарисовал сначала с вертикальными кнопками вот так:

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

Быстренько перерисовал в такое:

И вроде лучше, но снова тесно. Видимо иду на поводу у желания "сделать побольше возможных апгрейдов".

Сел, и спокойненько раздул каждый элемент, чтобы было посвободнее:

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

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

После этого я вернулся к первому варианту с вытянутыми кнопками... но теперь я решил вытянуть их горизонтально! Получилось вот так:

Мне очень понравилось! И текст крупный, хорошо читается, и всё друг под другом замечательно смотрится. И сразу решается вопрос большого количества апгрейдов дополнительными желтыми кнопками внизу! Супер!

В итоге вариант с таким диалогом пробыл в игре пару месяцев. Я привязал апгрейды, сделал логику переключения страниц диалога, создал интересные анимации на hover/click... А потом понял вот какую штуку: хочется, чтобы игрок мог видеть, что происходит на экране. А этот диалог всё закрывает. Причём, когда понимаешь, что только диалогом и управляешь геймплеем, то закрывать его вообще не захочется. Как бы диалог есть, а саму игру никто и не увидит. Зачем ее тогда делать? Нехорошо как-то... И тогда я  пошёл другим путём...

Постоянно висящая панелька

Да, придется перерисовывать уже полностью готовый диалог. Уродовать, уменьшать, втискивать. Так как у меня ландшафтный вид (700х525 пикселей), то панельку буду пробовать втиснуть сбоку. Первый вариант вышел таким:

Что нравится - цвет :) Что не нравится - так это то, как она загораживает полэкрана. Висит себе, и загораживает очень много визуального простраства.  А еще нужно как-то нарисовать значение каждого параметра, бейджи цен, а еще закладки из предыдущей картинки... Не нравится в общем.

Сдвигаем вниз и ужимаем:

Стало еще хуже. Ведь теперь правый-нижний угол полностью выпадает из игры... Что делать? А может панельку скрывать, пока она не нужна?

Выезжающая панелька

Хорошая идея! Надо попробовать. Снова перерисовываю...

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

Тогда я делаю еще вариант, где панелька сдвигает всё игровое поле, ничего при этом не загораживая. Например, справа:

И вроде неплохо. Но снова беда - при появлении/убирании изменяются пропорции экрана, и становится непонятно, откуда спавнить врагов. Они должны выходить из-за границ экрана, а эти самые границы я и изменяю. В общем, не зашла мне эта идея.
Тогда я пошёл радикальным путём:

А может вообще упростить интерфейс, убрав ненужные кнопки? 

Ведь проблема в том, что у нас четыре-пять параметров, у каждого свои числа, цены, а еще и закладки-переключалки хочется. Может убрать лишнее? Например, оставив только два варианта:

Я очень долго склонялся к этому варианту... Занимают мало места, отпадает вопрос с выезжающей панелькой. Одно плохо - нужно полностью менять геймлплей. Теперь игра уже не о том, что из нескольких вариантов апгрейда мы пробуем выработать стратегию развития. А о том, какой из ДВУХ вариантов выбрать. И, знаете, в этом что-то есть. Обязательно хочу сделать такую игру! Но не сейчас, а потом... А пока - нужно возвращаться к варианту с несколькими апгрейдами.

Итого

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

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

К чему это я всё?

Если вот так запечатлеть всю эволюцию одной панельки - то можно понять, что, зачастую, построение действительно удобного интерфейса отнимает кучу времени. При этом каждый шаг что-то внёс общее понимание игры. Без всего этого я, возможно, не понял бы до конца, какую именно игру я делаю. Вот так перфекционизм толкает

Сообщения, схожие по тематике: