Дизайн плеера для iPhone (и других)


Вт Янв 18, 2011 22:44
Logger
3  Знаменитый приключенец

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

Сначала есть просто иконка на экране (иконка чуть отличается для разных игр):

После запуска на секунду появляется такая картинка (индивидуальная для игры)

А потом на 1-2 секунды – такая (индивидуальная для игры)

Главный экран приложения (текст – индивидуальный для игры, кнопки – общие для всех игр)

Все на экран не входит, есть скроллинг

Это типовой вариант параграфа без выбора

Параграф с выбором

Финальный параграф (игра проиграна)

Экран "Дополнительно" (общий для всех игр)

Важно – устройство может быть так же расположено горизонтально, все экраны меняются


Добавил через 5 минут 47 секунд:

Задача – улучшить дизайн плеера.

Решение – пока поиск дизайнера или просто светлой идеи.

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

Дизайн должен обеспечивать следующее
1) Название игры и ее авторов
2) Запуск игры
3) Продолжение прерванной игры (если доступно)
4) Запуск хелпа
5) Выразить мнение о игре (в данный момент – переход на этот форум)
6) Задать вопрос об игре (в данный момент – переход на этот форум)
7) Поиск подобных игр (переход в наш раздел в App Store)
8 ) Создать свою (в данный момент – переход к редактору "Я – Мастер Книг")
9) Пока списка благодарностей (кому, за что и т.п.)

Так же хочется, чтобы было место для рекламы оффлайновых книг-игр (бумажных, на этом форуме).


_________________
Редактор книг-игр "Я - Мастер Книг"
Вт Янв 18, 2011 23:11
Wannamingo

Постараюсь завтра написать свои идеи с имеющимися аналогами элементов в виде скринов разных прог.


_________________
Ведущий подкаста Podgames Weekly
Ср Янв 19, 2011 1:32
rosk
Свободный искатель

А исходники картинок (фон и прочее) можешь выложить? Ну или лучше сам шаблон... Чтобы понять что и откуда...

Ср Янв 19, 2011 19:32
Logger
3  Знаменитый приключенец

rosk
А исходники картинок (фон и прочее) можешь выложить? Ну или лучше сам шаблон... Чтобы понять что и откуда...

Увы, там много программно формируется, так что шаблона нет.

Улучшенный вариант кнопок от Jumangee (там еще должен был быть градиент, но я что-то напутал с CSS)

Сам попытался сделать кнопки в стиле "старой книги", но вышло мрачно


_________________
Редактор книг-игр "Я - Мастер Книг"
Ср Янв 19, 2011 19:57
Lethal Weapon
5  1  Герой легенд

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


_________________
@creativity101 — телеграм-канал про креативность, творчество и всё, что с этим связано (книги, исследования, принципы, методики)
Ср Янв 19, 2011 22:16
rosk
Свободный искатель

Кнопки все равно большие, неужто нельзя кнопки с текстом сделать чуть больше основного шрифта книги?

Ср Янв 19, 2011 22:39
Logger
3  Знаменитый приключенец

rosk
Кнопки все равно большие, неужто нельзя кнопки с текстом сделать чуть больше основного шрифта книги?

По моему опыту, в кнопку менее 50 пикселей сложно попасть пальцем на тач-скрине. Сейчас кнопки 75px в высоту, наверное – многовато, но менее 50 их не желательно делать.


_________________
Редактор книг-игр "Я - Мастер Книг"
Ср Янв 19, 2011 22:59
Casralis
2  Герой легенд
Logger
но менее 50 их не желательно делать.

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

Чт Янв 20, 2011 8:44
Logger
3  Знаменитый приключенец

Casralis
Кстати, а можно что-то типа "прозрачности" сделать? то есть визуально размер картинки маленький, а на деле размер зоны, в которую нужно нажать, все тот же.

Можно, но мне честно не слишком понятно, чем маленькая кнопка + много пространства вокруг лучше большой кнопки.

Новый дизайн кнопок от Jumangee:


_________________
Редактор книг-игр "Я - Мастер Книг"
Чт Янв 20, 2011 13:31
Casralis
2  Герой легенд
Logger
Можно, но мне честно не слишком понятно, чем маленькая кнопка + много пространства вокруг лучше большой кнопки.

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


_________________
Долинописец
Чт Янв 20, 2011 19:34
Logger
3  Знаменитый приключенец

несколько скриншотов из популярной бесплатной читалки книг для ай-фона Stanza

Экран при чтении книги. Страницы перелистываются сдвигом экрана влево.

меню (нужно щелкнуть по экрану в любом месте)

описание книги


_________________
Редактор книг-игр "Я - Мастер Книг"
Чт Янв 20, 2011 20:52
rosk
Свободный искатель

А зачем на кнопках повторять текст? Ведь в тексте книги есть маркеры с цифрами и в добавок еще и разноцветные, почему бы не выделить снизу страницы область высотой в одну кнопку и шириной во весь экран, и в нем просто делать увеличенные в размерах маркеры-кнопки с цифрами, если 1 вариант – 1 большая кнопка, если 2 варианта – 2 кнопки, 3 – три кнопки и т.д. Сомневаюсь что кто-то будет делать больше3-4 вармантов действий развития событий в игре.

Чт Янв 20, 2011 21:11
Lethal Weapon
5  1  Герой легенд

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

Casralis
но теперь возникает четкий контраст между циферками в тексте и кнопками

не понял


_________________
@creativity101 — телеграм-канал про креативность, творчество и всё, что с этим связано (книги, исследования, принципы, методики)
Чт Янв 20, 2011 21:11
Logger
3  Знаменитый приключенец

rosk
А зачем на кнопках повторять текст? Ведь в тексте книги есть маркеры с цифрами и в добавок еще и разноцветные....Сомневаюсь что кто-то будет делать больше 3-4 вариантов действий развития событий в игре

Легко, в Кеперлейсе есть по 8 и более вариантов (в библиотеке, выбор книги для чтения).

Я изначально делал без текста, но после экспорта игры на URQ были жалобы, что без текста сложно ориентироваться. Точнее – сейчас это на усмотрение автора игра. Если он текст не задаст, то будем именно как у тебя.

Альтернативные вариант стартовой заставки из Кеперлейса (первая картинка появляется почти сразу и заменяется на 2ую, которую видно пару секунд).


_________________
Редактор книг-игр "Я - Мастер Книг"
Чт Янв 20, 2011 22:17
Casralis
2  Герой легенд
Lethal Weapon
не понял

В тексте угловатые квадратики, а кнопки с скругленными углами


_________________
Долинописец
Чт Янв 20, 2011 22:38
Logger
3  Знаменитый приключенец

Casralis
В тексте угловатые квадратики, а кнопки с скругленными углами

Угу, будем пытаться "округлять" Smile

Еще больной вопрос – иконка приложения. Должна ли она быть единой для все книги-игр (не каждый будет себе одновременно устанавливать по 10 книг-игр), уникальной для каждой (но и рисовать ее тогда кому-то надо) или незначительно варьироваться для каждой игры?

Текущие иконки для Кеперлейса, Пассажира и Подземной дороги (в натуральную величину на экране девайса):

Вариант иконок от Jumangee


_________________
Редактор книг-игр "Я - Мастер Книг"
Пт Янв 21, 2011 1:08
Jumangee
Во всех бочках затычка

Вот несколько набросков вам на оценку


  • book3_2.jpg (11.53 КБ) Просмотров: 9270 раз(а) 
    book3_2.jpg
  • icon.png (5.18 КБ) Просмотров: 9270 раз(а) 
    icon.png
  • bm_banner.jpg (27.59 КБ) : 131 раз(а)  Скачать
Пт Янв 21, 2011 12:48
Donkey
2  Свободный издатель

В общем и целом очень даже гуд! Только кубик не кубический какой-то. За то крыса занкомая Smile

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


_________________
Главное качество издателя — умение отстраняться от собственного вкуса. (с) Виталий Пищенко
Пт Янв 21, 2011 20:24
rosk
Свободный искатель

Красивая читалка для книг http://www.appleiphoneschool.com/2009/10/21/bookreader-by-readdle/

Пт Янв 21, 2011 20:25
Logger
3  Знаменитый приключенец

Доработанный вариант иконок от Jumangee для разных книгр (Apple им потом еще уголки закруглит):


_________________
Редактор книг-игр "Я - Мастер Книг"
Пт Янв 21, 2011 23:20
Lethal Weapon
5  1  Герой легенд
В тексте угловатые квадратики, а кнопки с скругленными углами

Не вижу проблем.

Иконки на высоте! Smile Сразу понятно, что один "издатель", и различия есть.


_________________
@creativity101 — телеграм-канал про креативность, творчество и всё, что с этим связано (книги, исследования, принципы, методики)
Сб Янв 22, 2011 8:06
Logger
3  Знаменитый приключенец

Округлил квадратки и поменял шрифт на кнопках-цифрах, а Jumangee убрал артефакты с фона-книги.


_________________
Редактор книг-игр "Я - Мастер Книг"
Вс Янв 23, 2011 6:39
Logger
3  Знаменитый приключенец

rosk
Красивая читалка для книг...


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


_________________
Редактор книг-игр "Я - Мастер Книг"
Пн Янв 24, 2011 16:11
Wannamingo

Смотрите, есть два варианта распространения:
1) отдельные приложения (как в настоящий момент)
2) единое приложение, распространяемое бесплатно, с возможностью "in app purchase".

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

Добавил через 10 минут 47 секунд:

Logger
rosk
Красивая читалка для книг...


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


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


_________________
Ведущий подкаста Podgames Weekly
Пн Янв 24, 2011 19:19
Logger
3  Знаменитый приключенец

Wannamingo
1) отдельные приложения (как в настоящий момент)
2) единое приложение, распространяемое бесплатно, с возможностью "in app purchase".
Второй вариант, на мой взгляд, более интересен, так как продвигать нужно будет только одну прогу и все книги будут в одном месте без кучи иконок на экране.

Да, тоже об этому думал, но...все упирается в непопулярность книг-игр. "Читалка для e-Books" – это всем понятно, ее будут искать. А "Читалка для книг-игр" – уже не так очевидно (без списка книг-игр). Иными словами – одинокая книга-игра может привлекать своим сюжетом. А универсальная читалка требует установки оной читалки, чтобы посмотреть детали книг-игр.

Хотя, бесспорно, продвигать одно приложение проще. Может быть идеальным вариантом мог быть микс 1 и 2, когда скачанная книга-игра потом предлагала докачать остальные игры через "in app purchase", но... рейтинг в апп-сторе у отдельных игр всегда будет ниже. Единого решения пока нет...


_________________
Редактор книг-игр "Я - Мастер Книг"
Представьтесь для добавления комментариев - регистрация в один клик!
Разделы форума