Comments 75
я ни разу не дизайнер, но с переключателями панелей — скроллинг лучше
посмотрите сколько места занимает строка состояния телефона + заголовок+табы на первом скрине, а теперь посчитайте что строка с табами будет в два-три ряда… у нас и так проблемы с полезным пространством… а вы табы предлагаете
также что делать тем у кого смартфоны небольшие?
Хорошая картинка. Только как вы в данном случае решите проблему людей с большими пальцами и(или) маленькими экранами которы имеют трудности с попаданием нажатия в нужную часть экрана?
Каждая кнопка тут имеет минимальный размер в 40px, что совсем незначительно меньше рекомендуемых 44.
На скриншоте видно, что эти табы – скорее всего породы собак, и соответствующих пунктов будет намного больше, чем пять кнопок в примере. Как предлагаете отображать это в вашем варианте?
В VS Code к примеру такое оформление очень неудобно по-моему. Не понимаю, зачем там сделали такое по умолчанию, учитывая что все кодят на десктопах и вертикального пространства достаточно, но слава богу эту шляпу можно выключить сделав таб-бар многострочным.
В VSCode ещё попытались усидеть на двух стульях: открытые табы показываются и сверху и сбоку. Оба варианта одинаково неудобные, ибо число табов всё разрастается и уследить за ними через замочную скважину не представляется возможным.
По-моему, если число вкладок превышает несколько, однозначно помещающиеся на одном экране (неважно, мобильном или десктопе), надо искать другое интерфейсное решение. На десктопе это определенно проще реализовать, это та самая фильтрация по мере набор букв и фрагментов слов. Как один из пользователей Emacs, где люди постоянно имеют дело с сотнями открытых буферов (читай страниц) и списком из тысяч лисповых команд, понимаю, что фильтры это самый быстрый способ доступа. Джеф Раскин в своё время хорошо описал идеальный интерфейс поисковой фильтрации, жаль мало приложений этому следует.
+1
Если мы говорим про место на экране телефона, то экономия на спичках здесь, прям, мастхэв, что очевидно же) Насчет полноценного бокового меню - нуу фиг знает, стоит ли его применять для любого кейса (может, это действительно только для 7+-2 позиций меню предесмотрено? Если да, то скролл довольно аккуратно смотрится, да и уже как-то привычнее)
Этот текст вы набирали тоже барабанами в перчатках? Когда фильтр избыточен - он автоматически скрывается. Ну а кнопку шаринга, вызывающую нижнее меню, вы можете наблюдать на первой же картинке в статье.
Я проголосовал за Bootstrap, потому что использую только Bootstrap5 и... просто "рисую" в нём дизайн интерфейса сразу с помощью HTML-кода, в реальном времени, используя либо реальные данные, либо их качественную эмуляцию, которую тут же пишу на PHP (зачастую криво, зато очень быстро).
Никакого "этапа отрисовки макетов" , обсуждения с менеджерами/заказчиками.
Если в итоге кому-то что-то не нравится: ссылка на документацию Bootstrap5 с предложением выбрать вариант лучше. Не выбрали? Значит, я был прав. Сорри, у нас будет стандартное "не понтовое" решение, зато оно будет долго предсказуемо работать и я сделаю его, потратив в 10 раз меньше нашего общего времени + внутри дизайна программист найдёт ТЗ . В том и фишка.
посмотрите на Spectre CSS я на него перешел с Bootstrap мне понравился сильно больше, плюс без зависимостей в виде JS. Элементов поменьше, но тоже все очень удобно.
Spectre CSS интересный, но, судя по гитхабу, уже 3 года не обновлялся.
Спасибо за наводку, но... нет.
Я в жизни был журналистом, видеомонтажером, преподавателем, оператором, предпринимателем, программистом, верстальщиком, дизайнером. Программирование заняло самый долгий временной отрезок моей жизни. Но сейчас я понял, что хочу немного изучить психологию, а также стать писателем, сценаристом и режиссёром.
И поэтому, хотя я продолжаю любить программирование, заниматься им и кайфовать от него, но я определённо должен научиться говорить ему "нет", чтобы успеть всё остальное.
Поэтому, я остаюсь на уже хорошо знакомых мне технологиях до тех пор, пока они решают мои объективные задачи.
bootstrap.min.css - 216 kB
bootstrap.bundle.min.js - 79 kB
Мда, у меня вся игра (маленькая стратежка) весит меньше.
Некоторые гениальные дизайнеры ещё и скрывают скроллбары, и в итоге иногда может оказаться вообще неочевидно, что можно контент прокручивать. Помню как-то наткнулся на это во всеми хвалёной Фигме (там, где слева панель со списком элементов) и несколько минут тупил, почему она мне не показывает нужный экран, пока не понял, что прокручивать можно...
пользователь запустил наше приложение не для того, чтобы с менюшками развлекаться и девайсом жонглировать, а чтобы наименее энергозатратно решать свои задачи
Это давно уже никого из больших™ и не очень разработчиков не волнует. У них есть метрики, у них есть задача удержания аудитории и какие там ещё маркетинговые термины, но у них нет задачи сделать хорошо. К сожалению, большинство, способное что-то менять, жрёт что дают, они к этому привыкли — спасибо прежде всего Apple, вырастившей послушную аудиторию. Теперь, даже если ты перешёл на Android, тебе всё равно предлагают либо жрать, либо уйти, варианта выбрать больше нет. Если метрики ползут вверх — будут внедрять какой угодно говняк, а на статьи каких-то странных персонажей с профильных сайтов всем, к огромному сожалению и досаде, плевать.
Мне самому невыносимо больно от всего этого.
Что за глупости про "стрелочный циферблат"? Как пользователь LinageOS, пример из которой вы взяли, наоборот благодарен за такое решение. Передвинуть стрелки большим пальцем, явно проще, чем тыкатся в экранную клавиатуру.
Я наверное тупой, но в
втыкал минут 5, прежде чем дошло. А потом как дошло!
Но всё равно есть проблема, если вам надо 7:57.
Когда нужна прям такая точность, проще сделать два тапа по экранной клавиатуре.
У такого подхода есть + в реальных проектах. Можно установить для МИНУТ шаг минут не 5, а 15. И будут показываться промежутки 00, 15, 30, 45.
А для часов, например, только рабочие часы - 09 до 17 часов.
У нас получается очень гибкая выборка, которые подходит под решение реальных кейсов в бизнесе - временные слоты для записи на приём, планировании встречь
Действительно, тоже втыкал в "это" минуты 2, очень интуитивно :)
Я тоже не могу понять минут 5, что это за матрица чисел и зачем нам делить матрицы? ))) А потом понял, что этим ТС предлагает заменить таймпикер.
Гугл как по мне делает абсолютно бестолковые , в плане юзабельности, продукты. Структура не интуитивна, а иногда просто урезают функционал в угоду упрощения меню, как в гугл-диске например.
В призыве к действую лучше ыло предложить поискать баланс между удобством и эстетикой. Вот, например, безрамочные формы ввода с подсказкой, которая уплывает чуть вверх, это удобно? Это эстетично? Я для себя сформировал ответ, но как считают другие было бы интересно узнать.
Без рамочные - это которые с серым фоном? Такое себе решение, да. Яркие рамки сильно шумят и отвлекают от контента, поэтому гугл стал играться с подчеркиванием вместо рамок и фоном. При этом подчёркивание выглядит как разделитель, а не поле, а серый фон мало того, что выглядит как задисейбленное поле, так ещё и получается, что серый текст контента на сером фоне выглядит слабоконтрастно. В то время как контраст в полях наоборот надо увеличивать, но это сложно сделать, когда фон экрана уже выжигающе белый или абсолютно чёрный.
Где то видел решение где переключатели панелей прокручиваются скроллингом и дополнительно при возможности прокрутки появляется кнопка со стрелкой которая делает прокрутку. При достижении конца кнопка пропадала. Если бы не эта кнопка никогда бы не догадался что её можно прокрутить
А мне вот стрелочных часов не хватает в Windows, а ведь раньше были. На стрелочном циферблате проще откладывать временные интервалы, прибавлять отнимать 15, 45 минут, например. А сейчас смотрю на цифры и в уме представляю все тот же циферблат, на котором кручу стрелки.
Вам возможно бы пригодились отдельные кнопки типа "+15", "+45", или даже "через 15 мин", чтобы не заниматься ментальной геометрией.
У меня случился приступ когнитивного диссонанса, когда меня как-то вёз друг в машине (Citroen, емнип), в котором скорость отображалась цифрами на сегментном жк-индикаторе. Сколько себя помню, у меня всегда были часы со стрелками, и ощущение временных отрезков/сдвигов/сумм/разниц синхронизировалось в голове. Это, думаю, можно назвать «чувством времени». И, вот, чувство скорости у меня слабо ассоциируется с таким представлением. Да, чтобы ограничение в 60 км/ч не превысить, нужно следить за цифрой, но имхо, за стрелкой проще, когда давишь на педаль. Не знаю, как объяснить — тут, думаю, дело привычки...
Спойлер
Сломало мозг, потому что нарушает паттерн - слева направо, сверху вниз.
Сначала выбираешь группу (ночь/утро/день/вечер), потом выбираешь время. И проще ориентироваться в 4 группах по 6 значений, чем в 6 группах по 4 значения.
Можно вместо таблицы сделать циферблат
Material design, хотя и имеет некоторые позитивные моменты, во многом просто является идеей ради идеи, потому что пресловутое сходство с опытом использования реальных предметов - очень нишевое преимущество. Число людей, для кого это проще, по своей природе много меньше числа тех, кому это без разницы и тех, кому это всё равно не поможет.
Почти со всем согласен.
Однако предложенный Вами вариант выбора времени странный. Прежде всего тем, что расположение цифр по вертикали крайне не интуитивно для языков с письменностью слева на право.
Подкину бесящую лично меня дизайнерскую фишку:
Использование различных переключателей вместо четких и понятных квадратиков с галочками, понятными и на бумаге и на экране и проверенных столетиями использования.
Собственно говоря из-за этого меню выбора и держу tiny callendar
Календарь в Thunderbird. Удобно и изящно. Пользуюсь уже много лет. Это десктоп, но принцип вполне можно перенять.
С представлением календарных интерфейсов есть еще одна проблема — сервисы помешаны скрывать реальные даты/время произошедшего события и вместо этого пишут "вчера", "неделю назад" и прочую муть. Особенно бесит на банковских сайтах — чтобы сделать себе пометки в блокнот с реальными датами трат приходится сидеть с календарем и считать.
Меня особо удивляет, как такое вообще могло прийти в голову, что пользователю важно произошло событие вчера или сегодня, но не важно утром оно произошло или вечером. Особый маразм бывает, когда в 00:01 тебе уже пишут "вчера" на событие, что произошло 2 минуты назад.
Когнитивно этот "ago"-формат проще, чем цифровые значения, но, разумеется, не должен использоваться там, где важна точность. Где-то встречал вариант, где по тапу/клику меняется "3 дня назад" на конкретную дату и наоборот. Тоже неплохо, но заставляет выделять объект как кликабельный, иначе фича будет неочевидна.
Господи, слава Богу, я не одинок! Я не знаю, какие идиоты-дизайнеры сделали выбор времени кручением колесиков, но их место в аду в соседнем котле с "дизайнерами" кнопок лифтов (я не помню, когда последний раз в новом лифте видел нормальный, рядный выбор этажа, а не пойми что за нах). Печально, что идиоты-тестировщики и идиоты-менеджеры это выкатили в промт, а пользователи, чувствуя себя идиотами, вынуждены это жрать уже 10+ лет. И это не какое то там нишевое решение с левой резьбой, это решение на, мать его iPhone! Справедливости ради, хочу заметить, что с какой то там версии ОС, можно уже не крутить колесики, а тапом вызывать экранную клавиатуру. Но я уверен, 99% пользователей до сих пор по привычке "вращает барабан".
Ладно, это же Эпл, они всегда были немного чудаками, но когда я увидел для этой же цели двойной аналоговый циферблат на Андройде я навсегда решил, что Гугол это Говно и это всегда было и будет так. Но эти ребята умудрились еще выкатить отдельный дизайн для секундомера и таймера! (Яблочники, кстати, тоже)
Вот поэтому я ходил с трубкой на Windows Phone до самого конца и ставил время будильника простым вводом чисел с клавиатуры...
Не понимаю, почему до сих пор жив этот циферный архаизм. В мобилках раздражает в два раза больше.
всмысле пагинация как таковая или то что она цифрами?
Именно цифры, конечно. Нет никаких рациональных кейсов для перехода на страницу в радиусе N.
С цифрами можно открыть сразу несколько страниц в разных вкладках.
На самом деле даже для пагинаци нет рациональных кейсов.
В статье не написано про отказ от пагинации, а только про оптимизацию результата при высокой динамике изменений, "амазоны" это и так делают. К дизайну, как таковому, это не относится.
Все зависит от потребностей, от сферы применения, от целевой аудитории. Одно дело ui-kit для десктоп, другое дело - "универсальное" решение и для десктоп и для мобилки.
Приведенные вами примеры местами лучше тех, вариантов что вы хейтите, а местами намного хуже. Все это вкусовщина.
Это какими местами хуже?
Да почти все имеют свои НО, потому что все зависит от ситуации.
Многострочная панель с кнопками большую часть времени будет просто мешать, уменьшая полезную область страницы.
Меню действий, которое всплывает рядом с именем некоторого элемента, будет нелепо выглядеть, когда имена элементов будут разной длины, и когда список самих действий будет большой.
Выбор из списка с полем поиска уместно, когда реально нужно что-то искать и пользователь может указать часть имени, например, имя человека, марка автомобиля. В случае с выбором страны это неуместно, и единственное замечание к примеру с материал дизайном - почему там нет сортировки?
Выбор времени намного удобней в виде барабанов. Ваш вариант с матрицами, как уже отметили другие, совсем не очевиден.
Бестолковый дизайн