Рейтинг темы:
  • Голосов: 0 - Средняя оценка: 0. Если голосов меньше 5 оценка не показывается.
  • 1
  • 2
  • 3
  • 4
  • 5
UI (интерфейсы)
#1
Video 
Товарищи, нужна помощь в .... да... моделировании интерфейсов.

Проблемы не было в куспе ибо там все было "в натяжку" и "с допуском" - т.е. довольствоваться приходилось чем есть.

Но в новых движках - фейс может быть абсолютно любым, и тут проблема - что и как сделать и куда сунуть.

1) Есть ли какиенибудь гайды?
2) Ваши личные best practices?
3) Как вы делаете или планируете UI?

Я вот сегодня поделал-поделал, вышла вот такая вот хуевина - ну это за пару часов, понятно что доработать и шрифты и прочее можно....но все же интересно что и как вы делаете.
Свёрнутый текст:

 
Ответить
#2
(07.09.2017, 22:11)4ef2f817 писал(а): 2) Ваши личные best practices?
"лишний клик для нас погибель"
(07.09.2017, 22:11)4ef2f817 писал(а): Я вот сегодня поделал-поделал, вышла вот такая вот хуевина
И вышел тот же кусп.
ну, пусть аэрокусп, или как оно там зовется.

а ты шо, решил на буржуев переточиться?

 
Ugly times ugly
Ответить
#3
@4110d99b, да я балуюсь с интерфейсом пока smile мне проще по аглицки его мучать - там шрифтов больше.


@4110d99b, дык я и хочу кусп, ибо игра все равно текстовая, хоть и h,264 вставки.

 
Ответить
#4
(07.09.2017, 22:20)4ef2f817 писал(а): дык я и хочу кусп,
тогда чего жопу морщить? не так давно топил же за него, дескать "нах вам унити, все можно сделать в куспе" ))

В чем делаешь, кстати? фьюжн какой-нить, или геймейкер?

 
Ugly times ugly
Ответить
#5
@4110d99b, причины следующие:
1) симантек орет на него постоянно, каждый месяц новая длл-ка qsplayer570 попадает в "дыры года". А пересобирать и патчить я лично не собираюсь и авторы провинциалки похоже тоже.
2) трудоемкость невротъебенная начинается с размера файла в 1Мб:
- тестинг и дебаг никакущщий
- для того что бы создать "что хочется" - движение, физику, и прочее - это надо неделю-две хуярить создавая "движок" этого, в construct-2 это чаще всего уже "есть"
- большие объемы данных, подгрузка json/xml, 3-х мерных массивов
- практически никаких взаимосвязей отследить невозможно, любое изменение тащит за сообой хвосты и баги.
3) HTML5, full hd и мультиплатформенность
4) Спрайты = объекты и вся красота их взаимодействия.
5) возможность мультиплеера но мне до этого еще как до луны.
6) и прочее...


Construct 2 - https://www.youtube.com/watch?v=xj_XKHPZk1U

 
Ответить
#6
ну славатехоспади, ты понял теперь, почему я за юнити топил )

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

 
Ugly times ugly
Ответить
#7
(07.09.2017, 22:11)4ef2f817 писал(а): 1) Есть ли какиенибудь гайды?
2) Ваши личные best practices?
3) Как вы делаете или планируете UI?
1) Полно в интернете. Сильно зависит от задач. В разных системах и направлениях свои гайды. UI для текстовых квестов ещё не делал, хотя это чем-то напоминает дизайн сайтов со смесью мессенжера или газетную/журнальную вёрстку.
2) Опять же зависит от задач. Я всё забыл и когда надо делаю по памяти-интуитивно.
3) В Fireworks делаю макет сначала. Но сейчас нынче модно уже Sketch и Affinity Designer, может что ещё новое появилось. Планируется в зависимости от имеющегося функционала (доступного пользователю), его количества, используемых платформ (грубо говоря если будут мобильные значит надо отдельный диз с кнопками побольше). Думаю о времени доступа (это важно!) и доступности, так чтоб можно было быстро выполнять типовые задачи, а не тянуться мышкой каждый раз далеко. Если активных элементов много их нужно грамотно распланировать (опять же учесть время доступа), например можно что-то выделить в общую кнопку с выпадающим подкнопками что-то не часто используемое. Выравниваю по сетке (где это необходимо). Интерфейс тема обширная, тут можно много чего придумать.

В твоём случае я думаю:
1. Надо изучать (модульные) сетки и всё смежное с ними (например композиция). Если у тебя движок на веб-технологиях, то есть может использовать (достаточно свежие) возможности CSS, я бы применил CSS Grid с адаптивностью, так чтоб интерфейс на разных экранах/соотношениях смотрелся хорошо. CSS сетки достаточно мощный инструмент вёрстки, позволяет многие сложные вещи делать заметно легче чем обычно.
2. Изучи сочетание цветов, их влияние. Например у тебя правый блок оттягивает на себя внимание отвлекая от текста. Цвета могут влиять на настроение, умей этим пользоваться.
3. Про шрифты ты уже сам вроде понял. Опять же они должны быть сочетаемы и правильно спозиционированы. Их не должно быть слишком много. Есть вроде бы даже сервисы по подбору пар. Если у тебя вычурные шрифты то кнопка должна иметь подобного рода шрифт и оформление. Можно делить шрифты по группам для UI-элементов и для текста отличающимся начертанием, но они само собой должны быть сочетаемые (их что-то должно роднить).

В принципе от боковой панели можно избавиться или сделать необязательной.


Во даж 3 в 1 сразу нагугил http://shkola.readymag.com/ не хватает только специфичной части про UI, но её можно нагуглить самому да почитать руководства от Microsoft, Apple, Google под их платформы, там многие случаи обсасываются. Главное это время доступа. Ещё не стоит забывать о навигации через клавиатуру.

 
1
Ответить
#8
@31e3cf1d, спасибо,

хотя если подумать ppt-шки в powerpoint я клепаю со скоростью ветра так что многие иллюстраторы завидуют - главное иметь правильный и хороший темплейт.

Есть ли темплейты UIs?

 
Ответить
#9
(07.09.2017, 22:19)3d1a1972 писал(а): "лишний клик для нас погибель"
И "прокрутка - зло"

 
Ответить
#10
(08.09.2017, 22:38)4ef2f817 писал(а): Есть ли темплейты UIs?
Ну примеры должны быть. А прям шаблоны хз, наверное есть, но направлений UI много, нужно искать под своё и там как правило под конкретное тех решение, либо просто пример картинкой, изредка можно найти psd от дизайнера.
Я просто не использовал шаблоны, но обращался к примерам из методических рекомендаций где показано как должны выглядеть стандартные элементы интерфейса, например:
https://msdn.microsoft.com/ru-ru/library/windows/desktop/dn742499(v=vs.85).aspx
https://msdn.microsoft.com/ru-ru/library/windows/desktop/dn742503(v=vs.85).aspx
А так обычно собирал себе коллекцию интересных интерфейсов где подмечал хорошие решения и дальше это уже в голове откладывалось.
Но ты можешь обратиться к шаблонам веб-сайтов, их полно.

В играх стандартов в UI особо и нет, нередко переизобретают интерфейс.


Учти, сейчас идут во всю веб-приложении и к ним хватает всяких css-фреймворков как и шаблонов, только вот там частенько переизобретение интерфейса со своими взглядами на то как должно быть правильно (особенно учитывая тенденцию mobile first и самобытность веба), то есть нередко совсем кладут на методические рекомендации производителей ОС (в случае с mobile first если учитываются в основном рекомендации для мобильного приложения). Хуже того сами производители ОС создают всякие новые классы приложений типа UWP (то что раньше называлось метро) и там уже свои рекомендации (заточка в большей мере под планшетный способ взаимодействия).

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

Нужно понимать и относительность некоторых из этих правил — что то хорошо для для мышиного управления не очень хорошо для сенсорного управления. Быстрое время доступа для "мышки" ≠ быстрое время доступа для "планшета". Поэтому в той же win 10 есть особый планшетный режим меняющий поведение основного интерфейса. Большие кнопки с достаточно широкими отступами для мышки бесполезны до них дольше тянуться, а вот для планшета это как раз быстро гарантировано нажать куда надо.

Интерфейсы это до сих пор бардак.

В принципе как и веб так и игры сталкиваются с проблемой кроссплатформенного интерфейса + в играх задачи решаемые в игре могут сильно отличаться от типичных сценариев (классических) приложений.
Но есть две группы основных направлений.
По способу ввода:
1. Мышка (она же тачпад и т. п.) и клавиатура.
2. Геймпад
3. Тактильный сенсор
Специфическую периферию приводить не буду, там отдельно затачивается.
По размеру:
1. Большие (настольные мониторы)
2. Средние (ноутбуки, планшеты)
3. Маленькие (смартфоны)
С размером всё не так просто, есть физический размер устройства вывода, а есть его внутреннее разрешение и это внут. разрешение ещё может масштабироваться. Ну там PPI и DPI всякие. Кроме того есть соотношение сторон, многие экраны в том числе ноутбучные (где по крайней мере есть сенсорное управление) умеют автоматически переключаться в портретную ориентацию, да и никто не запрещает повернуть обычный монитор и переключить его ориентацию через настройки ОС.

Делая интерфейс ты должен понимать под кого ты его делаешь. Разные сочетания групп выше требуют разные подходы.
Например чтобы показать широту проблемы берём интерфейс под консольщиков (а тут ещё одно направление вырисовывается — расстояние от экрана) то надо учитывать:
Экран-то большой, да чел сидит от него далеко, так что будь там хоть 4к разрешение элементы интерфейса должны быть большие и видные.
Из-за того что элементы большие, очень мало что получается уместить, в дополнение к этому сам геймпад слабо пригоден как замена указателя, поэтому интерфейс должен быть разбит на группы и/или экраны чтоб можно было удобно прыгать на них через бамперы.

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

 
Ответить
#11
@31e3cf1d, то есть мультиплатформенность подразумеваeт создание 3-4 ui... чтотв принципе логично.


@4110d99b, @31e3cf1d,
Поигрался с сетками, цветами и шрифтами (отличные статьи) вышло в итоге вот что:
Свёрнутый текст:
Думаю на этом пока остановлюсь, дальше буду менять уже в рамках развития процесса.

 
2
Ответить
#12
(09.09.2017, 13:13)4ef2f817 писал(а): то есть мультиплатформенность подразумеваeт создание 3-4 ui... чтотв принципе логично
Зависит от технологии и интерфейса, в каких-то относительно универсальный интерфейс можно поделить на модули (подшаблоны) дальше требуемые модули можно подменить под специализированный на нужную платформу.

(09.09.2017, 13:13)4ef2f817 писал(а): Поигрался с сетками, цветами и шрифтами (отличные статьи) вышло в итоге вот что:
Стало лучше.

 
Ответить
#13
Меня тут опять спросили про дизайн, вот чтоб не пропадало:
dribbble.com сообщество дизайнеров, там можно найти красочные работы по интерфейсам
behance.net тоже народ выкладывает разное, ссылка c выборкой по интерфейсам
На pinterest.com есть подборки, например + глобальный поиск



К слову, UX (User Experience) — пользовательский опыт, это новомодное название (с учётом новых тенденций) того что раньше было модно называть юзабилити (удобство использования), а по факту это всё эргономика.

UX сейчас можно понимать как опыт взаимодействия и как эмоциональный опыт.

В случае с опытом взаимодействия это попытка разделения дизайнера интерфейсов на две составляющие:
1. UX — проектирование взаимодействия пользователя с приложением, откуда уже скачет UI. Если попытаться перенести это в плоскость практики, то это этап где мы определяем что пользователю будет работать с приложением удобнее/быстрее вот так-то, например вместо того чтобы пользователю вводить каждый раз логин и пароль мы сделаем закладку при нажатии которой будет автовход.
2. UI — то как интерфейс будет выглядеть, как выполнять поставленные UX задачи. На практике это где мы кнопку для создания закладки где и как поместим, каким размером сделаем, как выглядеть будет и т. п.
Граница довольно размыта, иногда в UX попадает и позиционирование, потому и "попытка разделения". Разделение вышло бестолковым и многие дизайнеры теперь себя именуют "UI/UX специалист", толком так и не поняв эргономику.

В случае с эмоциональным опытом это притягивание к и так размытому термину ещё большей неоднозначности:
Это уже не просто удобный, эффективный интерфейс, а красочное ВАУ, и тут может дойти до того что люди начинают делать лишь ради всех этих УХ ТЫ, а то что интерфейс от этого становится куда менее удобным и эффективным мало кого ебёт, главное ведь (в их понимании) чтоб человеку заебись эмоционально было, и некоторый народ уже так изъёбывается (см. snapchat) что неудобство преподносится как социальная фишка. Все эти "вирусные" штуки аля IDDQD и прочие приколы, всякие "потайные знания" (на самом деле секреты вещь хорошая, если разумно этим пользоваться, не превращая базовые вещи в секрет).
Кажется UX начали извращать в сторону эмоций когда маркетологи подключились и от UX начали требовать чтобы интерфейс «торкал».

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

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


Раз уж решил добить все стороны дизайна интерфейса нужно ещё рассказать о доступности (Accessibility).
Этому очень мало уделяется внимания, но в мире не так уж мало слабовидящих или вовсе слепых людей. Куча интерфейсов не приспособлены для удобного взаимодействия людьми с ограниченными возможностями.
Существуют определённые правила и стандарты в этом направлении.
Например в вебе это WAI-ARIA.
А так, если тема интересна, советую почитать статьи из этого блога. Начать можно с этой.

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



Оффтоп:
Потом найду время и попробую это переработать в нормальную статью.

 
Ответить
#14
Так же есть смысл почитать про оптическое восприятие:
https://habrahabr.ru/company/badoo/blog/333992/
https://habrahabr.ru/post/338780/
https://habrahabr.ru/post/340258/
https://www.youtube.com/watch?v=hV8hOLOC_Hk

 
Ответить
#15
https://habrahabr.ru/company/cloud4y/blog/347444/ о принципах гештальта. Само собой разумеющееся для знатоков, но не для новичков.
Ещё правильное использование теней создаёт глубину в интерфейсе, выставляя тот или иной блок визуально на передний план.

 
Ответить
#16
(09.02.2018, 10:54)d7594d31 писал(а): о принципах гештальта
Интересная статья , спасибо!

 
Ответить


Переход:


Просматривают эту тему: 1 Гость(ей)