мяу-дизайн

мяу-дизайн

@meow_design
Изображение канала: мяу-дизайн
2 499 подписчиков
0 постов
Посты
Возможно, когда дизайнер только рисовал макет, банеров еще не было, и так кнопка действительно выглядит самым активным элементом экрана.
Изображение поста
Но только кнопка борется за внимание и с элементами за пределами экрана.
При взгляде на более широкий контекст всей станции оплаты с большими разноцветными наклейками и стоящими перед экраном устройствами кнопка оплаты всё же мелкая и незначительная даже без промо-банеров внутри интерфейса.
Изображение поста
Чтобы бороться за внимание и с банерами внутри экрана, и с объектами снаружи, кнопку надо делать значительно крупнее.
Изображение поста
В 2011 году я придумал объем выборки визуализировать четкостью графики: чем меньше данных, тем более размытая картинка. Так она дает только какое-то общее представление, по мере добавления данных она становится более четкой.
На картинке изображена статистика трех игроков: исходы матчей, в которых они приняли участие (победы, ничьи, поражения). В центральной части диаграмм для сравнения расположена четкая статистика команды во всех матчах, а снаружи — только в тех матчах, где играл данный игрок. Видно, что у первого игрока со статистикой всё хорошо, но и сыграл он совсем мало, поэтому прямо сравнивать с другими игроками его не совсем корректно. И, как мне кажется, считывается это довольно естественно без ментальных усилий и вычислений, хотя подсказка при первой встрече с таким приемом не помешала бы.
Изображение поста
Собственно, в недавнем редизайне Карт это и было сделано.
(конечно, еще лучше было бы с эффектом размытия фона, но это уже другая история)
Изображение поста
Способы повышения контраста и видимости объектов на фоне всем хорошо известны: добавить объекту обводку или свечение/тень — и готово!
Объект стал более заметным, ведь теперь на его границе цвет объекта и цвет фона отличаются сильнее (потому что цвет фона был локально подправлен эффектом). Это как накинуть «шарпа» фотографии. Очевидная и общеизвестная вещь.
Изображение поста
У эпла есть приложение для ведения заметок, и в нем есть возможность вставлять чекбоксы для создания какого-то подобия списка дел.
А еще у них есть отдельное приложение для списка дел. И каким-то образом это специальное приложение ведения туду-листов справляется со своими прямыми обязанностями хуже, чем заметки, у которых это лишь какой-то побочный функционал. Два примера:
Изображение поста
Кнопка входа в интернет-банк, которая при ховере распадается на две подкнопки-уточнялки: вход для частных лиц или корпоративных.
Такой ход нарушает ожидания: ты уже навел курсор и начинешь кликакать, как в последний момент значение кнопки меняется, и внезапно на результат нажатия влияет, в правую или левую часть изначальной кнопки ты целился. Если ты распторопный, ты успеешь остановиться в последний момент и выбрать нужную подкнопку. Если менее расптороный, то заметишь раздвоение кнопки уже во время или после нажатия, и, матерясь, пойдешь обратно на главную страницу кликнуть правильно. А кто-то даже не заметит раздвоения и не поймет, почему при нажатии на кнопку «интернет-банк» он попал в какой-то корпоративный интерфейс. Это подстава, не надо так. Если так хочется разделения в выпадайке, то пускай она выпадет ниже изначальной кнопки, а не вместо нее. А еще лучше сразу эти два входа разместить рядом. А еще лучше сделать единый вход для всех видов пользователей.
2007 год, презентация Mac OS X Leopard, Стив Джобс на живом демо показывает, как окно программы отражается в док-панели.
Кажется, про этот или какой-то другой эффект (добавление приложения на док с расходящимися как на воде кругами?) он даже честно сказал, что сделали его просто потому что могут (эхом слышится «а конкуренты не могут»). История повторяется: когда эффект размытого стеклышка стал настолько доступным, что его уже даже в CSS завезли, понадобилась новая уникальная вау-штука, которую конкуренты задолбаются воспроизводить. И им стала рефракция.
И вот внезапно спустя 10 лет диаграмма стала иллюстрацией в чилийской книге об Антарктике.
https://bureau.ru/news/2025/antarctica/ Ну и разворот всё еще можно купить плакатиком на стену: https://printdirect.ru/storefront/shared_info/8630707
Изображение поста
Так, ребятки, лучше вы узнаете об этом от меня, чем наслушаетесь всякого в этом вашем интернете.
У Яндекс Карт сегодня сменился дизайн картографической основы (то есть непосредственно «карты в Картах», лежащей под интерфейсом), и я часть команды, стоящей за этим редизайном. Если более конкретно, то я ответственен за то, что вам в новом дизайне карт понравилось, а если что-то не понравилось – это уже был не я, извините. А если вы справедливо заподозрили во мне изворотливого дизайнера, избегающего ответственности за последствия своих действий, то я с вами соглашусь, но и могу объявить явно об одной сделанной конкретно мной части работы: я от имени команды написал статью на Хабр с описанием причин редизайна, почему при данных вводных условиях нельзя было остаться с желтыми дорогами и какие менее заметные изменения вошли в этот редизайн. https://habr.com/ru/companies/yandex/articles/914420/ Так что ура, если вам новый дизайн понравился, и извините, если я/мы всё испортили.
Изображение поста
От чего-то избавиться относительно легко. Икея пыталась воспитать в нас привычку пересыпать продукты из продающей магазинной упаковки в их нейтральные контейнеры. С крупами тут попроще, чем с зубной пастой, хотя и с ней тоже есть варианты.
Изображение поста
В отличие от продуктов и прочих расходников, которые надо регулярно пересыпать, наклейки на технике требуют лишь одного приступа триумфа воли и желательно еще растворитель для удаления остатков клея. Нет, гарантия не перестанет действовать от снятия рекламной наклейки про гарантию (если речь не про маленькие стикеры-угрозы лишить гарантии за попытку разобрать технику). Да и коробка для этого не понадобится, можете выкинуть уже.
К сожалению, производители постепенно позволяют себе лепить наклейки на всё более компактную технику. Тригер, который спровоцировал меня на эту публикацию — наушники Sony с наклейкой Professional. Я долго негодовал от такого удешевляющего хода в дизайне наушников, и только потом догадался, что это всё же не неотъемная часть дизайна, а наклейка, просто на всех фотографиях ее отказываются / ленятся / боятся / надо_вернуть_в_магаз_после_написания_обзора ее снимать.
Изображение поста
Начальство: ставит задачу повысить уровень удовлетворенности сервисом. А значения его меряют шкалой в опросе.
Исполнители: дополняют шкалу опроса сильно перекрученным цветовым обозначением, чтобы опрашиваемые считали 8 так себе оценкой. Уверен, метрики улетели в стратосферу, все получили свои премии. Это очередной пример, как на любой хитрый KPI найдется не менее хитрый способ его накрутить, проигнорировав полностью смысл, который подразумевался за этим KPI. Еще один пример, уже исторический: https://ru.wikipedia.org/wiki/Рязанское_чудо
Изображение поста
Я снова случайно чуть не зашел в женский туалет! На этот раз я увидел две таблички, мозг распознал на первой из них иконку женского туалета, но поленился распознавать вторую и сказал «ну там значит мужской, тебе туда», решив действовать методом «от обратного». Меня остановили в последний момент, и только тогда я заметил, что на второй табличке тоже женский туалет!
Мужские же туалеты были дальше по коридору, но их таблички плохо видно:
Изображение поста
То есть в этот раз меня подвела вера в устоявшийся формат «две таблички для мужского и женского туалета, ну может еще будет третья с колясочником, но его легко распознать», который тут оказался нарушен. Возможно, для женских туалетов стоило обойтись одной табличкой по центру со стрелками к дверям.
Предыдущие замешательства с туалетами: https://t.me/meow_design/1867 https://t.me/meow_design/1194
Изображение поста
У нас в глазах два вида фоторецепторов: колбочки и палочки. Колбочки хорошо считывают цвет и быстрые движения, зато палочки в 100 раз более чувствительны к свету, поэтому в сумерках мы полагаемся на них. А вот яркий свет их слепит, поэтому после перехода из светлого помещения в темное требуется время для адаптации зрения и активации палочек, способных что-то распознать в темноте.
В дизайне это знание поможет влиять на способность людей разглядывать детали на темных изображениях. Правило тут простое: темные изображения при соседстве с белыми элементами достаточно большой площади становятся «плоскими», разглядеть детали становится затруднительно. Классический пример: черная одежда в онлайн-каталоге с белым фоном. Яркий свет слепит палочки, поэтому за них отдуваются колбочки, но их светочувствительности не хватает, чтобы разглядеть какие-то детали одежды вроде наличия карманов или текстуры ткани, элементы каталога превратились в силуэты.
Изображение поста
Что с этим можно поделать? В идеале — понимать контекст, в котором живут изображения, и при необходимости избавляться от слепящих элементов в дизайне. Если вы знаете, что собираетесь показывать на странице темную одежду, вероятно, стоит подобрать и подходящее окружение, выбрать потемнее и фон на фотографии, и самой странички:
Изображение поста
А это пока еще нестандартное поведение макоси, просто какой-то разработчик заморочился обновлением содержимого окна программы через плавный кросс-фейд. Выглядит, конечно, по-богатому, но насколько же неповоротливым ощущается интерфейс от этого.
Оправдать такой маневр можно было бы, если содержимое разделов требовалось бы как-то вычислять или догружать ощутимое время, и такой вялой анимацией можно было бы замаскировать ожидание данных, но это явно не тот случай. Разработчик постарался, чтобы сделать хуже.
Я вам принес новый артефакт проникающей в интерфейсы эпла шизофрении. Попытался изменить какой-то параметр в разделе «Батарея» системных настроек, и на меня вылез попап с предупреждением, что «Батарея пытается модифицировать ваши системные настройки», подтверди это отпечатком пальца или паролем.
Изображение поста