реклама
разместить

Исправляем типографику в Steam

Похоже, что астрологи объявили неделю Гейба и количество постов о редизайне Стима удвоилось. Тем не менее хочу рассказать и показать наглядно простую идею: с помощью базовых правил типографики можно решить множество проблем в интерфейсе.

Исправляем типографику в Steam

Предисловие

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

Текущие проблемы

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

<i>Нет никакой системности в элементах управления, а общая контрастность текста слишком низкая, это попросту неудобно читать</i>
Нет никакой системности в элементах управления, а общая контрастность текста слишком низкая, это попросту неудобно читать

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

<i>​И еще разберемся с кашей справа сверху: приведем ее к привычному по многим другим приложениям виду</i>
​И еще разберемся с кашей справа сверху: приведем ее к привычному по многим другим приложениям виду

Посмотрим на список игр
Здесь полная каша: кнопки и иконки малого того, что разного размера, так еще и разного стиля. Унифицируем все кнопки и иконки, а настройки фильтрации и сортировки прячем под единой кнопкой:

<i>Мне было лень искать все иконки для всех игр или ачивок, поэтому пусть будут цветные квадратики</i>
Мне было лень искать все иконки для всех игр или ачивок, поэтому пусть будут цветные квадратики

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

<i>​А еще заменим звездочку в качестве избранного на сердечко, ведь мы же люди, а значит игра может попасть в самое сердечко</i>
​А еще заменим звездочку в качестве избранного на сердечко, ведь мы же люди, а значит игра может попасть в самое сердечко

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

<i>Работа с текстом и консистентность — наше все, позволяет решать многие проблемы без масштабного редизайна</i>
Работа с текстом и консистентность — наше все, позволяет решать многие проблемы без масштабного редизайна

Результат

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

Напишите в комментариях — стало лучше или нет? Я не касался здесь (только если чуть-чуть) UX, так как его проектирование займет год исследований и понимания глубинных проблем и решений. Короче, напиши мне, норм или не?

173173
реклама
разместить
202 комментария

Имхо, стало только хуже. Зачем делать контрастный цвет текста на редкоюзаемых кнопках? (Воркшоп и прочее) Теперь вместо одной большой кнопки плей, выделяются другие. Кнопкам сверху ты убрал капслок, зачем? Это основный кнопки, в чем магия сделать их менее заметными? Так же с синей кнопкой инсталл/плей.

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

108

В чем магия капслока? 
То же с Play, огромная выделяющаяся кнопка на сером фоне. 

11

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

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

Про капслок сверху снизу уже писал — если коротко, то он усложняет читаемость верхнего меню.

2

 ​А еще заменим звездочку в качестве избранного на сердечкоАга, и испортим семантику, ведь теперь люди будут думать, что ставят лайк игре, а не добавляют её в избранное.
 настройки фильтрации и сортировки прячем под единой кнопкойЁбаные бутерброды из веб-дизайна понемногу перебираются в настольные приложения. Почитай про импакт подобных решений, юзеры это не одобряют, если там больше 2 кликов до функции - сложно.
очень просто: за счет выстроенного юай-китаГде-то я уже видел этот ю а й к и т. Чем текущая кнопка "скачать" (которая синяя) хуже той, что ты сделал? Она как-то даже получше, чем твой бутстрап-стайл.

На твоём скриншоте такая же каша, как и сейчас в стиме. Это субъективный взгляд со стороны. Мне кажется, у приложения стима не со шрифтами проблема, а с композицией всего вообще.

41

1. И в чем же существенная разница между избранным и лайком? Чем список лайков не равен списку избранного? Почему то, что я поставил лайк игре не равно тому, что я выделяю эту игру и добавляю ее в некий отдельный список?
2. Я перенес все родственные элементы (фильтрация и сортировка) в одно подменю, они и так были, но два разных по размещению, но одинаковых по сути.
3. Юай-кит это же не уникальная штука, особенно сегодня. Юай-кит — централизованное хранение элементов интерфейса, только и всего.

1

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

1
Раскрывать всегда
Стартап Perplexity сделал версию DeepSeek-R1 без цензуры для своего ИИ-поисковика

Компания выложила дообученную модель на Hugging Face.

Стартап Perplexity сделал версию DeepSeek-R1 без цензуры для своего ИИ-поисковика
1919
22
11
реклама
разместить
«4070 Ti Super Duper»: тесты и главное из обзоров GeForce RTX 5070 Ti

Видеокарта достойная, но только не по тем ценам, которые сейчас на рынке.

«4070 Ti Super Duper»: тесты и главное из обзоров GeForce RTX 5070 Ti
6464
1515
55
11
11
Краткий вывод: За эту цену нафиг надо.
NASA повысило вероятность столкновения астероида 2024 YR4 с Землёй до 3,1%

Небесное тело приблизится к планете в 2032 году.

NASA повысило вероятность столкновения астероида 2024 YR4 с Землёй до 3,1%
141141
4343
1515
1212
99
88
22
22
11
11
Какова позиция русских рэперов по этому вопросу?
День не без хороших новостей: Bonnie Blue, известная тем, что переспала с 1057 мужчинами менее чем за 24 часа, как сообщается, беременна

Порадуемся за молодых

57 оказались дтэферами, поэтому она их вычеркнула <br />
6060
88
55
33
11
11
11
11
Это 1,3 мужика в минуту, при условии полного отсутствия сна и отдыха
A24 выпустила тизер Bring Her Back — следующего хоррора от режиссёров «Два, три, демон, приди!»

В главной роли — Салли Хокинс, звезда «Формы воды».

5050
11
A24 уже не те...
Милли Бобби Браун в журнале Vanity Fair

Оказывается она книгу написать успела: в 2023 году в свет вышел роман "Девятнадцать шагов". Роман вдохновлен биографией ее бабушки. Действие происходит во время Второй мировой войны. В центре сюжета - молодая девушка, которая после знакомства с американским летчиком планирует сбежать вместе с ним подальше от бомбежек. На амазоне можно купить.

4747
3232
88
22
11
11
11
11
милфа Бобби Браун
Режиссёр «Сёгуна» 1980 года считает, что недавний сериал от FX непонятен американской аудитории

Однако кинематографист рад тому, что авторы новой адаптации решили не копировать его шоу.

Режиссёр «Сёгуна» 1980 года считает, что недавний сериал от FX непонятен американской аудитории
2727
2525
66
33
Сочувствую его окружению. Если кому-то настолько доступный и продуманный сериал оказался сложным, где действующих кланов и фракций в два раза меньше, чем в попсовой игре престолов, то это какой-то фейспалм.
[]