Офтоп
NUber
9598

Steam Mobile Redesign

Привет, DTF. На фоне последних новостей стима про «улучшение юзабилити мобильного приложения» решил показать вам свой редизайн, пока валв не сделали красивее.

В закладки
Аудио

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

Текущий дизайн мобильного приложения Steam

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

Конечно же все пользователи DTF на самом деле латентные UI\UX’еры с 50-летним стажем, поэтому воспринимайте это как концепт и пробу пера, а не полноценный редизайн от Джони Айва.

Нуу в общем вот.

​Слышите шум? Это дизайнеры кричат от боли..

Главная идея редизайна – полностью отказаться от боковых меню и сделать всю навигацию через навбар\таскбар. В оригинальном же дизайне вообще вся навигация через боковые меню.

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

Приложение конечно же только в тёмной теме ( ͡• ͜ʖ ͡•), потому что всем известно, что геймеры слепнут от белого света и живут в подвалах. При этом не хотелось делать совсем чёрный интерфейс, потому что от него белый текст читать ещё больнее и теряется общая читаемость интерфейса, хотя святые гайдлайны IOS считают иначе.

​В идеале конечно смотреть все скрины в сравнении, чтобы чувстовать себя чуть-чуть уверенее

На этом всё. Заранее скажу, что я тоже вижу много недочётов, но пока видимо мне не хватает опыта, чтобы их исправить. На страничку с чатами мне до сих пор стыдно смотреть). Если вы вместе с критикой будете ещё красными кружками обводить все недочёты, то я попрошу Фрая поставить вам плюс со всех аккаунтов. o(〃^▽^〃)o

Материал опубликован пользователем.
Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "NUber", "author_type": "self", "tags": [], "comments": 193, "likes": 391, "favorites": 85, "is_advertisement": false, "subsite_label": "flood", "id": 100754, "is_wide": false, "is_ugc": true, "date": "Thu, 06 Feb 2020 19:57:32 +0300", "is_special": false }
0
{ "id": 100754, "author_id": 5223, "diff_limit": 1000, "urls": {"diff":"\/comments\/100754\/get","add":"\/comments\/100754\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/100754"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "last_count_and_date": null }
193 комментария
Популярные
По порядку
Написать комментарий...
171

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

Ответить
–7

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

Ответить
0

конкурентов себе наплодила

шо?

Ответить
6

Так, как тут скрины менять в статье?)

Ответить
97

Эх, а я думал, что специальный рофел(

Ответить
10

С хорайзен отдельно угорел, неплохо :)

Ответить
6

Хоть кто-то заметил)

Ответить
3

Как RDR похорошела при Габене.

Ответить
1

Пасхалочка для самых внимательных детишек

Ответить
36

Вольво, наймите вы этого парня на работу, это ведь шикарно!

Ответить
12

Но у чувака нет в портфолио шапок

Ответить
11

Ты хочешь, чтобы он там от скуки помер? 

Ответить
0

Судя по тому как протикает жизнь проектов валве, так оно и будет похоже

Ответить
–117

Для чего это делается? Ты серьёзно расчитываешь/таишь надежду на то, что тебя возьмут на работу в вальв из-за этого? 

Ответить
118

Нет конечно, просто тренирую навыки и набиваю руку, а сюда решил залить т.к. под тематику сайта подходит)
Многие начинающие фрилансеры первые заказы делают для себя, потому что настоящих заказчиков нет

Ответить
21

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

——————

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

——————

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

Ответить
21

Почему у тебя кнопка Войти находится слева? Почему регистрация справа?

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

Зачем забыли пароль приклеин к инпуту пароля? 

потому что эта кнопка нажимается сразу после неудачных попыток ввода пароля?) Я не опытный, поэтому тут неуверен, но вроде её к кнопкап не привязывают.

Зачем логотип на форме регистрации? 

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

Чувак, я хз что там у тебя за впечатление создается, меня просто бесил дизайн стима и было желание начать заниматься UI\UX, из чего вышел этот пост как первая попытка. Но насчёт вопросов ты прав, просто ещё много новых элементов и немного растерянный в том куда что пихать, я записал все твои замечания)

Ответить
2

 правый нижний угол самая неудобная точка на телефоне же

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

Ответить
1

Наверно подумал, что будет слишком громоздко) а вообще попробую теперь, спасибо за совет)

Ответить
12

Ты, возможно, и не запомнил (всё-таки к утру ты станешь тут популярен хД) , но я обещал что пройдусь - пройдусь, позже) 

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

Ответить
2

На мой взгляд проще логин сделать одной кнопкой на всю ширину, а регистрацию ниже в виде ссылки, по аналогии "с забыл пароль"

Да и симметричнее так

Ответить
0

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

Ответить
–2

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

Ответить
0

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

Ответить
2

Ну так я ж рассуждаю, а не утверждаю)
Я не умнее их, десктопную версию пилили годами и это самый крупный стор на ПК, конечно там аналитики дофига, но мобильная версия явно сделана по принципу "лишь бы работало" и они просто старались вместить все пункты с десктопа)

Посмотри на скрин, ты серьезно думаешь, что они тут сильно думали об акцентах, фокусировке внимания и читаемости интерфейса?) Особенно название тайтла на баннере очень читаемое, всем вэлвом дизайн разрабатывали)

Если так делают дизайн профессионалы, то я лучше дураком останусь)

Ответить
0

вообще похоже что думали :) но выглядит конечно так себе

Ответить
0

Весь текст абсолютно однотонный и нет никаких акцентов ни на цене, ни на названии тайтла.
Очень тупо сделана кнопка с подарком, собственно поэтому я слайдером ее и реализовал. Эти две кнопки ведут в итоге на такую же страницу с кнопкой "checkout", т.е. они тупо добавили лишнюю страницу и две лишние кнопки. Насчёт выравния я нечего не скажу, потому что это явно просто криво ресайзнутая версия десктопной веб страницы.
Зачем над товаром писать, что он добавлен в корзину, если у меня это меню открывается сразу после нажатия "добавить в корзину"?
Короче нет, вэлвы молодцы и очень большая компания, но их мобильная версия это просто сжатый сайт)

Ответить
0

@Шериф DTF , я чо заметил - тут какой-то чел ходит по комментам NUber'a и минусит их. Просто тупо минусит. Я допускаю, что он просто сильно несогласен с каждым утверждением ТС"а, но just in case...)

Ответить
0

Если у @NUber есть какие-то вопросы и претензии по этому поводу, то пусть напишет мне в ЛС :)

Ответить
–8

Это были риторические вопросы, мне от вас не нужны на них ответы. Я их увидел из дизайна. 

Ответить
0

Просто тут сразу подъехал латентный UI\UX’ер с 50-летним стажем. Не переживай :D

Ответить
6

Вопрос. А почему ты думаешь что эти вопросы и ответы на них являются верными ?

Ответить
3

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

Ответить
2

И, да, правый нижний угол - весьма плохое место для целевого действия

Где я писал что правый нижний угол — это верное расположение вообще чего либо? Я спрашиваю зачем там у Дизайнера кнопка регистрации. 

У него вся форма разбросана по всему экрану и брендинг занимается 75 процентов этого экрана, когда должно быть 10 процентов брендинга, логически верное расположение формы и ее контролов и тд. 

Все это вытекает из общих ошибок проектирование.

Условно, согласно тепловой карте айфона: в центре 2 поля, под полями кнопка входа (на всю ширину), чуть ниже регистрации (текстом) и уже на дне восстановление пароля. 

Откуда инфа, что с мобил мало регистрируются? 

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

Ответить
1

Сайты - просто пример. После написания коммента я уже сам понял, что протормозил по поводу ЦА в текущем случае. По тому, что написано выше, я с тобой согласен, это очевидно.

Ответить
3

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

Но может оно и к лучшему, если после всего этого мы ломаем глаза, мозг, и пальцы об говно в виде Facebook и мобильного стима?

Ответить
1

Но может оно и к лучшему

Для того чтобы логически верный и визуально правильный интерфейс выстроить, достаточно следовать гайдам экосистемы, для которой это приложение делается. 
—--—--
Там не нужны метрики, аб тесты (здравствуйте, аб тесты на айфоне с 2017 только существуют, софт ланчи там), маркетинговые исследования и тд. 
—--—--
Если бы он следовал им, а не просто набросал кнопок, то сделал бы приложение, которым было бы удобно пользоваться пользователям (тавтология) данной экосистемы, потому что приложения было бы частью ее с привычными паттернами поведения. 
—--—--
А если бы оно стало частью экосистемы, то дело бы оставалось за малым — USP. 
—--—--
Но нахуя я все это пишу, если он мне выше отвечал что текст с восстановлением пароля будут под вводом пароля искать, прям как на вебе. 

Ответить
1

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

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

Ответить
3

Я бы с радостью прошёл все круги ада дизайна, но начинать тоже с чего-то надо)
А то попаду в замкнутый круг "для работы нужен опыт, а для опыта - работа"

Ответить
4

Идите юниором в контору, где есть крутые UX-еры, которые будут таскать непосредственно по методологии и пояснять фундаментально.

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

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

И чисто от меня личный совет, но прям must have. Отдельно углубитесь в логику как в науку. Мне ОЧЕНЬ помогло, не только самому оперировать информацией в дизайне корректно, но еще и давить аргументами во время защиты своих решений. Как и почему. Считаю логику хотябы на базовом уровне просто обязательной для любого вида дизайнера.

Ответить
1

Слушайте дядю выше, дело говорит! :)

Ответить
14

Тебе есть куда развиваться, главное чтоб самому дело нравилось и ты на него не забивал. Ждём редизайна DTF ( ͡° ͜ʖ ͡°)

Ответить
6

А еще Редизайн Origin, EGS и другого, можно также другой дизайн меню или интерфейса игр сделать. ПО различное.

Ответить
1

Завалили парня заказами, а платить кто будет? 😂

Ответить
0

Он не обязан выполнять заказ.

Ответить
3

Редизайн DTf я уже делал )
https://dtf.ru/flood/75980-temnaya-tema-v3

Ответить
0

Ну чё, го редизайн-батлы делать?)

Ответить
5

Лол
Я бы предложил лучше редизайн коллабы)

upd: огребать хейт  вместе веселее х)

Ответить
4

Я за любой движ)

Ответить
1

Если серьёзно - то го,  давно хотел найти человека, который также интересуется этой темой, как и я, и кто находится на плюс-минус том же уровне *развития* :D

Куда тебе лучше написать? ВК или тут в личку? Или вообще в какую-нибудь телегу?

Ответить
0

На выходных отпишу тебе, заодно и посты с критикой разберу)

Ответить
0

Со шрифтами беда

Ответить
0

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

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

Ответить
–3

Многие начинающие фрилансеры первые заказы делают для себя, потому что настоящих заказчиков нет

Это какой-то дибилизм.

Ответить
9

Об портфолио вы не слышали видимо? В Valve может и нет, а в другое место могут. 

Ответить
3

Я помню, ты комментом похожим образом мой пост про редизайн дтф в темной теме. Так вот что хочу сказать. 
В каждой такой теме найдётся человек, который будет спрашивать - зачем это все? Это бесполезно!

Ответить
2

Человек просто пробует себя, для него это хобби. Ни на что он не рассчитывает.

Ответить
5

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

Ответить
1

Это, кстати, именно так. Я когда выкатывал свою версию дизайна ДТФ, был рад именно конструктивной критике, пусть и негативной, нежели пустым положительным комментам. 
Хотя, конечно, приятно было, и ни чуть не говорю, что просто хвалить не нужно.

Ответить
2

Нет, ты что, так не бывает. Меня точно так же спрашивали, я что - хочу чтобы меня из-за моего редизайна ДТФ на работу в комитет взяли? Я тогда посмеялся и сказал нет, конечно, ведь это и не было целью. Мне просто нравится дтф, мне нравилась движуха с дизайном - это классное хобби, умиротворяет.

А недавно чуть не стал дизайнером в комитете, лол (но это уже совсем другая история).

Ответить
1

А недавно чуть не стал дизайнером в комитете, лол

Но не стал, потому что они платят стаканом зерна в месяц, угадал?)

Ответить
1

Х) не, потому что мне от них тестовое нужно было, а не работа.

Ответить
1

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

Ответить
0

пиар

Ответить
14

Очень хорошо.Пришлите ваши контакты на почту ventil@333.com

Ответить
12

или сюда hr@volvo.auto

Ответить
5

Вранье, Гейб не умеет считать до трех.

Ответить
11

В целом симпатично и более современно, мне нравится. Но я сразу вижу несколько спорных моментов.

1. Избавляясь от бокового меню, ты уменьшаешь место под основной контент. Знаю, что сейчас тенденция к более длинным телефонам, чем раньше, но не настолько. Добавляю скрин для наглядности.

2. Слишком конские заголовки относительно остальных текстов и места размещения.

3. При регистрации стрелка назад в самом неудобном месте из возможных, учитывая превалирование правшей. Плюс, далеко от всех остальных активных элементов. Я бы сделал текстом под кнопкой "create an account" в стиле "forgot your password" или просто текстом без стрелок.

4. Фильтрацию можно сделать на весь экран - больше места для фильтров, лучше выделяется, чем на фоне остального контента.

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

Ещё раз, версия интересная и хорошая, а это просто нюансы на глаз.

Ответить
9

По поводу пункта №1. Нижняя навигация - это естественная эволюция, как мне кажется, сраного бургерного меню, которое на мобилах находится всегда в левом верхнем углу. Самом, на минуточку, труднодоступном месте экранов. Раньше, когда диагонали не превосходили 4", бургер был легкодоступен даже для детей. Сейчас даже на небольшом телефоне мне со своими пальцами сложно к нему тянуться, чего нельзя сказать про нижнюю навигацию, которая очень удобная и не напрягает руку.

Ответить
–2

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

Сейчас телефоны по 6"+, которые вообще затруднительно использовать одной рукой. И если пользоваться всё равно двумя руками, то уже становится без разницы, что ты в навбар тыкнешь, что в гамбургер. А если пунктов больше 4-5, то ещё и горизонтальный скролл, и теряется одна из фишек в виде перехода в 1 клик.

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

Поэтому я, кстати, согласен, что стоит везде заменить кнопку возврата на свайп.

Ответить
1

Ведь в боковом меню можно комфортнее разместить намного больше вещей 

Для этого крайней правой делают кнопку "more", которая открывает точно такое же меню, в котором можно сколько угодно чего угодно  разместить :)

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

Ответить
0

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

Меню в центре экрана - это был бы огонь. Я лично за меню по жесту увеличения, когда растягиваешь в стороны :D

Ответить
0

то до верхней части этого чего угодно всё равно вряд ли дотянешься

Так и при открытии гамбургерного меню ты с той же самой проблемой сталкиваешься. Они одинаковые при открытии ведь, по сути.

Ответить
0

Ну так мы же отталкиваемся от режима одной рукой. Гамбургер одной не использовать - это факт. Но и more с большим количеством пунктов - тоже. В чём тогда преимущество навбара? Так он ещё и контент закрывает.

Ну и как вишенка конкретно в концепте-сабже полно вещей, которые только вверху экрана. И преимущества навбара вообще нивелируются. Этим Стимом ты будешь пользоваться двумя руками, как ни крути.

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

Ответить
1

Ну, можно сделать по типа bottom sheet из material, когда оно сначала на половину экрана открывается, так что ты легко до верхнего айтима достаешь. А когда начинаешь скроллить, оно разворачивается на весь экран. 

P.s. хорошо ведём беседу)) 
Ты профессионально этим занимаешься или так, на чистой логике?

Ответить
1

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

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

Ну что это я всё о себе. Да, беседа хороша! :)

п.с. Кстати, прочитал твой пост на тильде про ДТФ дизайн - клёво :)

Ответить
0

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

Ответить
2

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

Ответить
1

А то что "свайп вправо от левого края", например в iOS используется как "вернуться назад". Поэтому не вариант)

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

UPD: И, если честно, это удобно. Я пользовался андроидофонами лет стописят, а сейчас пользуюсь айфоном. Одной кнопки более, чем достаточно) Возможно, они вообще не нужны, но их совсем нет только на самых новых моделях, кажется.

Ответить
0

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

Ответить
1

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

Ответить
0

Жаль если это так(
Увеличивать дисплеи, чтобы потом их же и засорять, вместо того чтобы подумать над более неочевидными системными жестами - мне кажется странным.
А можете поделиться ссылкой на гайдлайны?

Ответить
1

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

Ответить
0

Попробуй свайпать с левого края, бургер в 99% вылезет за свайпом

Ответить
1

Пробую. Почему-то перехожу постоянно на экран назад.
А, постойте, может, потому что у меня ios и вообще в мире не одна система?)

Ответить
0

А, ну сорян, на андроиде с этим лучше

Ответить
0

Это очень спорное заявление)

Ответить
0

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

Ответить
4

Большие заголовки — стандарт дизайн-кода iOS, они как раз хорошо подходят

Ответить
0

Да только в твоём примере они смотрятся гармонично, особенно относительно заголовков второго уровня. Я не против крупных заголовков как таковых, просто обратил внимание на конкретную ситуацию.

Ответить
1

С гигантскими заголовками так и задумано было, а насчёт всего остального согласен, учту)

Ответить
0

одна вкусовщина, домыслы. минимально рекомендуемые всеми шрифты для основного текста минимум 15

Ответить
0

Можешь просто загуглить и почитать, например, вот это: https://uxdesign.cc/guide-for-designing-better-mobile-apps-typography-5796495ef86f
Или это: https://learnui.design/blog/mobile-desktop-website-font-size-guidelines.html
Чтобы не было непонятно откуда взятого рекомендуемого "всеми".

Если вкусовщина, то обосновывай. Если лень или нечего написать, так и иди, куда шёл.

Ответить
–1

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

любой дизайн это функция и не стоит приплетать гайдлайн системы под гайдлайн продукта только по причине собственной тупости.

Ответить
2

Слушай, "дружище", если ты ведёшь себя как мудак, то ты и выглядеть будешь как мудак, что бы ты в реальности не сделал. Давай или конструктив, или иди в задницу и не отсвечивай сам.

Ответить
–39

Заранее скажу, что я тоже вижу много недочётов, но пока видимо мне не хватает опыта, чтобы их исправить. На страничку с чатами мне до сих пор стыдно смотреть).

Раз такой неопытный и самому стыдно смотреть, зачем нам показываешь?

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

Ответить
27

Чтобы получить фидбек и исправить недочеты. Все с чего-то начинали

Ответить
–24

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

Ответить
7

Ты тоже сам себя опустил только что)

Ответить
3

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

Ответить
1

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

Ответить
0

Как вариант у человека реально низкая самооценка, но это всё излечимо. И уж точно не опусканием себя.

Ответить
8

Габен тян заметь его 

Ответить
3

Такой ползунок цен на торговой площадке будет абсолютно неудобен, т.к. цены рассчитываются вплоть до копеек. 
И профиль юзера выглядит не очень: последняя активность — бесполезная информация, нет смысла выводить её первой. И обычно юзер настраивает внешний вид своего профиля, с таким интерфейсом потеряется индивидуальность. Нынешний вид профиля в мобильной версии точно не идеален, но выглядит лучше, т.к. наиболее близок к десктоп версии 

Ответить
2

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

Ответить
1

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

Ответить
1

На скрине фильтр поиска, а не механика выставления цены. 

Ответить
1

Я предположил, что выставление цены работать должно так же. В любом случае, такой вариант не совсем удобен. Если ты ищешь вещь/вещи, то они всегда в одном ценовом диапазоне. Это не касается, например, скинов кс, т.к. там уровень повреждения скина сильно влияет на цену, а уровней несколько. 

Ответить
1

Более того, зачастую хватает трех кнопок с диапазонами (например до 100р, 100 - 500, 500 - 1000) и отдельной кнопки на форму точного подбора

Ответить
0

Насчёт цен тоже думал, нужно было добавить рядом поля для ручного ввода цены
Насчёт профиля хз, бэкграунды стимовские нормально сюда не лягут, а все остальные элементы можно портировать сюда, я просто не все перериосвывал)
Хотя конечно ТАКОЕ в мобильной версии никак не получится уместить

Ответить
0

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

Ответить
1

В Big Picture профили тоже не особо выделяются, так что мне кажется всю кастомизацию оставят для PC

Ответить
3

Хотелось бы флоу увидеть и изменения вне сугубо графической стилизации. Стянуть стилистику с Беханса - одно дело. Упростить сценарии - совсем другое.

Хотя может еще лэйаут и улучшен (оригинал на мобиле не видел).

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

Ответить
2

Да понятно, что сценарии бы круто было бы.
мне, как такому же новичку как и автор кажется, что «рисовать» в отрыве от живого использования тоже не плохо, просто чтоб делать «красиво». Конечно, совсем про юикс забывать не стоит, но ты и не сможешь точно все угадать, потому что у тебя никаких данных нет, в отличие от вольве.

Ответить
3

Есть чего спросить у этого дизайнера.
1.  https://i.imgur.com/8N21ypI.png
Если картинка игры будет белая, то кнопок больше нет для глаз юзера. Есть решение в данной ситуации?
2. https://i.imgur.com/QUE1dHq.png
Тут даже не вопрос, а предъява. UX этого момента кривой. Гифт это не "маленькая настроечка" и не галочка, это отдельное действие "Купить в подарок".
3. https://i.imgur.com/JZN7oPL.png
Что произойдёт если ачивок будет 10420 из 11069? Дизайн же нужен для того чтобы такие моменты продумывать, верно?
4. https://i.imgur.com/pSp8f2d.png
4.1 Если в этом блоке будет 15 игр, то скроллиться будет только этот блок или вся страница?
4.2 Если у игры будет скидка, как это будет выглядеть?
4.3 Если у игры была скидка, но теперь её нет, то как это будет выглядеть? В десктопной версии это есть вроде бы, или у меня бе ды с ба шкой.
5. https://i.imgur.com/hNIQ9qt.png
Что произойдёт с контентом если имя будет длинное? Например Gazenvagen PRO 9000 | Circuit de la Sarth Edition 2020. Вторая строка? Троеточие? Будет ли ок выглядеть при том, что цена предмета центрирована и будет как бы ниже названия?
6. https://i.imgur.com/DifeTwf.png
Предъява 2. Фильтры предметов на маркете зависят от игры.
Предъява 3. Фильтра по цене нет в функционале. Ты его придумал, причём скорее всего чтобы просто заполнить место. Так нельзя *ре*дизайнить.

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

Сверстать такое pixel-perfect как два пальца об асфальт, потому что видно что ты умеешь пользоваться своими инструментами. Тут Комитет ищет фронтенд дева и если бы я знал что меня без особых знаний WebRTC смогут хотя бы рассматривать, возможно я бы свалил бы к ним со своего рабского места.

Ответить
1

Ну на половину ответов я бы ответил тебе анимациями, которые я ещё не выучил)
1. Иконки обычно либо с инверсией туда пихают, либо можно кружок вокруг них замутить прозрачный
2. Насчёт гифта долго думал и тут мне бы с вольвами пообщаться и узнать как они к этой кнопке относятся, но выбрал такой вариант чисто из своих требований к корзине
3\5 Думаешь почему я RDR 2 на DOOM Enernal поменял?) все варианты скрытия текста стремные (2 строки, прокрутка текста за скрытым градиентом) и как эту проблему решить я так и не нашёл пока, но в поисках.
4. Вот тут бы я мог ответить анимацией прокрутки и т.д., чтобы стало понятно что куда скроллится, а скроллится будет только блок с играми, всё что за разделителем стоит на месте.
6. Мой косяк, уже 10 человек об этом написали, я понял)

Ну а сейчас у стима уникальность только из-за стрёмного дизайна, да и так ли нужно ему быть уникальным?) Всё лучше чем то, что есть сейчас.

Ответить
0

к 6 пункту дополнение, все эти ползунки НЕ используются нармальными людьми так как точность ввода и колличество действий позволяет совершить кучу ощибок. Это не мобильное решение и не для денег. если и делать до оставлять возможность ручного ввода крайних значений.

это аксиома

Ответить
2

 Я, как вы уже наверно поняли, ни разу не дизайнер, не разбираюсь в UI

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

Ответить
3

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

Ответить
2

Ну, главное - это стремление. Жаль, что в стиме вряд ли заметят твоё рвение. Я и сам уже пару раз горел с приложения стима на телефоне, давно пора его обновить - факт.

Ответить
0

Ага, и в идеале перейти с вебвью на нативочку, вот красота-то будет))

Ответить
0

В этом году и должны обновить.)

Ответить
2

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

Ответить
2

У них же фиолетовый, а тут серо-голубой и синий. Я брал цвета из странички библиотеки стима, она свежее всего выглядит

Ответить
0

У дискорда как раз таки серо-голубой

Ответить
2

Ну штош... На истину я не претендую, просто выскажу свои мысли.

По поводу дизайна в целом - я бы опирался на те цвета и стили, которые сейчас в библиотеке, потому что, судя по всему, это "первая ласточка" их новой дизайн-системы. Это и градиентные кнопки, и скругление меньше (а местами и без него), "подсветка" в некоторых панелях и т.д.
- На экране создания аккаунта у одного из инпутов скругление меньше, чем у остальных - видимо, просто ошибка)
- Если текст валидации (описание ошибки) под полем находится, то не стоит ли оставить чуть больше места между инпутами? А то в текущем виде текст прям прилеплен будет)
- Разница в текстах - "Create a Steam account name" vs "Email". Тогда либо "Enter your Email address", либо просто "Steam name", например
- Слишком уж круглые иконки ачивок
- На экране профиля X hours played и соседняя надпись - зря выровнил по центру. Создают ощущение неряшливости этой карточки.
- Там же "+116" вроде как меньше, чем остальные - и это странно
- Иконка фильтра выглядит больше иконки поиска раза в 1,5.
- Зря сократил названия игр. Так мож и выглядит опрятнее, но советую попробовать всё-таки сделать полный вариант и попробовать другие длинные названия, которые 100% не вместятся в строчку. Я бы их резал лёгким градиентом из цвета фона в прозрачный. Возможно, они также должны при этом скроллиться туда-сюда сами по себе. Не знаю насчёт best practices, но каких-то решений этой проблемы, кроме того что я озвучил, не встречал.
- На те же карточки товаров вполне можно впихнуть quantity, которое сейчас присутствует в магазине.
- Фильтр странно сгруппирован. По логике, в самом верху должна быть игра, а уже потом фильтры. Потому что набор фильтров будет зависеть от выбранной игры. Причём, делать "поиск" по фильтрам тоже странно очень. Я бы сделал так: сначала дропдаун с выбором игры, потом ниже - фильтр цены, и уже потом набор фильтров выбранной игры. Потому что цена у тебя будет для всех игр, и если она будет ниже фильтров, для той же КС, у которой два десятка фильтров, она может быть очень очень далеко внизу.
- Слишком много места под ползунок цены. Вот эти поп-апы с указанием количества лучше показывать при тапе. Пока игрок держит палец - он видит (над пальцем, получается) индикатор текстовыйй, как только отпустил - он исчезает, и нет вот этого громадного пустого места от "Price" до самого ползунка.
- И да, как советовали - лучше на фулскрин сделать, ничего не потеряешь. В 13 iOS (раньше не замечал) щас так модно и даже выглядит норм - открывается "карточка", которая почти на полный экран, только сверху чуток торчит фон. Могу показать скрин, если не забуду)
- На экране магазина смузает меня это отделение шапки и панели с табами и полоской и тенью одновременно, много на себя оттягивает прям.
- Свечение у кнопок всё-таки вряд ли, имхо. Мне тоже эти светячки нравятся, но тут оно лишним выглядит.
- В корзине не хватает кнопки удаления игры из неё)

Вроде как-то так, уже глаза слипаются :D

Ответить
0

Захотелось ответить на некоторые твои чёрточки.
Иконки ачивок: Там всё круглое, по углам иконок ачивок довольно мало инфы, такое решение оправдано.
X hours played: Не зря, так как они по нижней границе идут и читаются как строка. Текст справа меньше для того, чтобы он помещался.
Свечение кнопок:  Сам же в начале говорил про ["подсветка" в некоторых панелях и т.д.] у дизайн системы десктопного клиента. Свечение уместно, т.к. они это юзают повсеместно.
Удаление из корзины: Свайп же. Я бы в первую очередь попробовал так сделать если бы хотел убрать что-то из корзины, даже если бы кнопка была.

Ответить
0

Свечение кнопок: Сам же в начале говорил про ["подсветка" в некоторых панелях и т.д.] у дизайн системы десктопного клиента. Свечение уместно, т.к. они это юзают повсеместно.

Я говорил про radial gradient га фоне, а не про свечение. и не замечал его у них. Пример есть?

Ответить
1

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

Ответить
0

Нищего страшного! Мы ж тут не говном друг в друга кидаемся, а беседуем :D

Ответить
2

Пусть лучше его нативным сделают, а не вебвью все вкладки вставят.

Ответить
0

Слышал мнение, что это не просто так сделано.

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

Но я не знаю, насколько это достоверно.

Ответить
0

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

Ответить
2

Чувак, не слушай доморощенных мастеров юзабилити. Очень неплохо получилось, мне лично нравится, продолжай в том же духе 🙋🏻‍♂️

Ответить
1

(а про слитые скрины будущего редизайна я вообще молчу).

Об этом идет речь?

Ответить
1

прототип всегда отличается от финала и его главная задача проверить знаковые изменения дизайна и навигации. очень хороший пример как надо работать кстати. да и прототип неплох

Ответить
0

Может это из-за цвета сломанного, но выглядит как типичное приложение из 2008)

Ответить
1

нет

Ответить
0

Вхвхвххвхвх, чувак, ты лучший)
Нет, так нет)

Ответить
1

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

Ответить
1

Есть в этом что-то от egs

Ответить
1

Работа выполнена отлично ! Высокий уровень проработки во всех аспектах. Цветовая схема подобрана отлично ! Гейб звонил сказал берем !!!

Ответить
1

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

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

На основном скрине экране по факту влезает 4 игры, не густо.

Так-то конечно неплохо, но в первую очередь нужно реализовывать существующие фичи, а не кастрировать их в угоду дизайна.

Ответить
0

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

Ответить
0

нужно реализовывать существующие фичи, а не кастрировать их в угоду дизайна

Это да. Напомнило редизайн «кинопоиска»

Ответить
1

Что угодно лучше того, что есть.
А это правда не плохо.

Ответить
1

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

Ответить
1

Я скажу, на это смотреть приятнее чем на то, что я смотрю в этом приложении последние лет 5 , я не знаю почему они решили только в 2020 дизайном заняться, но это выглядит явно не плохо

Ответить
1

Я давно думал об этом,  даже на бумаге что-то пробовал рисовать. Стимом на мабиле вообще пользоватся невозможно. Срочно шли это во всё что есть Валву.

Ответить
1

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

Ответить
1

Приложение конечно же только в тёмной теме ( ͡• ͜ʖ ͡•), потому что всем известно, что геймеры слепнут от белого света и живут в подвалах.

Категорически не согласен. Отсутствие светлой темы в Steam лично для меня чуть ли не единственный его серьёзный недостаток.

Ответить
1

Этот парень крутой,он сделал офигенный дизайн стима

Ответить
1

где скачать?)
это шикарно

Ответить
1

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

Ответить
1

На месте автора я бы ждал звонка не от Valve а от EGS.

Ответить