мяу-дизайн – Telegram
мяу-дизайн
2.86K subscribers
1.16K photos
91 videos
37 files
265 links
т.е. «мяу»

публикует поучительные картинки про дизайн и пытается не упомянуть свой армейский дневник @kefiijrw
Download Telegram
Она выглядит очень приятно, но когда я решил при помощи нее понять, как устроена территория, мне не удалось разобраться, какие из линий обозначают связи (то есть дорожки), а какие — ограничения (то есть заборы). А это ведь противоположные сущности, перепутать которые довольно обломно при построении маршрута.
​​А вот еще фотография по теме.
Это фрагмент схемы японской жд-станции, состоящей из двух слоев — визуальной и тактильной (бороздки на стекле для слепых). Обратите внимание, что в тактильной версии сплошными линиями показывают не стены помещений, как в визуальной, а тропинки между этими помещениями.

Когда рисуешь схему, надо быть аккуратным с уровнем абстракций, на который ты опускаешься, и лучше заранее убедиться, что твоя внутренняя легенда схемы совпадает с легендой других людей.
Карта магазинов на Яндекс.Маркете. Крупный кружок с белой сердцевиной и синей обводкой – это магазин, в котором есть разыскиваемый товар. А маленький кружок с белой сердцевиной и синей обводкой – это московские железнодорожные станции. Зачем их показывать (в таком масштабе даже метро не показывают) и зачем их показывать схожим со значками магазинов стилем – не очень понятно.
Вышел новенький анонс проекта с моим участием — экраны в вагоны метро: https://www.artlebedev.ru/metro/screens/.

Если вы не очень понимаете, чем этот проект отличается от другого вроде бы такого же https://www.artlebedev.ru/kvant/moscow/, то успокою — я сам уже запутался.
Наверное, главное отличие — в прошлом анонсе были сплошные рендеры и фотопривязки выдроченных макетов, а в этом — живые фотки «всё как есть» из вагонов. Это вызывает гордость, ведь приятно встретиться в жизни с результатом своей работы, но иногда и стыд, когда ты наблюдаешь, с какими дефектами твои макеты докатились до продакшена.
Серьезно, как можно ТАК сверстать и даже не заметить подвоха.
В навигации внутри помещений свет влияет на понимание, куда можно идти, а куда не стоит, даже сильнее формальных указателей и табличек. Вот, например, в магазине бесшовность освещения (ну и напольного покрытия) приглашает посетителей продолжить покупки в следующем помещении, и запретительная вывеска «Склад» над проходом тут бессильна.
Далеко не всегда стоит указывать размер файлов у ссылок на скачивание, в большинстве случаев это анахронизм веба пятнадцатилетней давности. Нет смысла заботливо предупреждать пользователя, что пдфка для скачивания весит 35 кб, после того как твоя страничка загрузила картинок и видосов на 15 мб, кастомный шрифт и десяток жирных js-библиотек. В каждом случае нужно спрашивать себя «Будет ли для человека иметь значение, сколько весит эта экселька с прайс-листом?».
Если подобная мысль кажется крамольной, представьте, что возле каждой ссылки в интернете указывалось бы, сколько весит страница по этой ссылке.

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

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

Ни и, конечно, всегда можно придумать исключения и гипотетические «а что ты скажешь на это»-случаи, как под ссылкой «Реквизиты для оплаты.doc» внезапно оказывается файл на полтора гига. И, конечно, речь не идет о ресурсах, весь смысл которых в хранении файлов для скачивания — торрент-трекеры, файлообменники, яндекс.диски и т.д.
Индекс самоизоляции от Яндекса до сих пор ломает мне мозг. Неужели кто-то без чтения серых подсказок снизу может решить, глядя на эти значки, что чем большее число стоит рядом с пиктограммой человека, тем меньшее количество людей это означает.

Цветовое кодирование окончательно добивает попытку мозга разобраться, и получается какой-то полный абсурд: есть тревожный оранжевый значок с 3,2 человечков и спокойный серенький с 0,7, но на самом деле ситуация обратная: справа много людей и это плохо, а слева людей меньше и это получше.
Когда-то давно я тут рассказывал о попапах (https://news.1rj.ru/str/meow_design/126). Я там описал все проблемы, которые несет использование попапов, описал случаи, когда их применение можно оправдать, и предложил альтернативу попапам — элементы, которые встраиваются в страницу вместо того, чтобы ее перекрывать.

Но важно, чтобы эти элементы-плашки или сразу присутствовали на странице при загрузке, или, если планируется анимацией появления плашки привлечь к ней внимание, чтобы место под нее на странице уже было зарезервировано.
This media is not supported in your browser
VIEW IN TELEGRAM
Просто ужасно, когда страница уже вроде бы загрузилась, ты сориентировался на ней и начинаешь целиться в нужную ссылку, и тут в комнату входит Батя — баннер, который сдвигает всё содержимое страницы и уводит нужный пункт меню из-под курсора. И еще повезло, если это произошло не в последний момент, когда ты уже тыкаешь в ссылку, но вместо желанной страницы попадаешь на какую-то другую, которая подсунулась из-за предательского сдвига. Это просто диверсия против пользователя, и даже если плашка сообщает самую прекрасную новость в мире (в примере на видео это какие-то большие скидки), реакция на нее выходит совершенно обратной ожидаемой — раздражение и техноярость.
После того, как при загрузке страницы начало появляться ее содержимое, никакие интерактивные элементы не должны передвигаться произвольно, то есть если это не ответная реакция на действие посетителя. Потому что целиться по хаотично двигающимся мишеням куда сложнее, чем по статичным.

Это, кстати, еще и одна из причин, почему важно контролировать ход загрузки страницы, встраивать прелоадеры, прописывать размеры элементов еще до того, как их содержимое загрузятся. Наверняка сталкивались с «эффектом упячки», когда страницу схватывает эпилептический припадок во время загрузки множества тяжелых изображений без прописанных в хтмл размеров, и если тебе нужно найти что-то среди всех этих картинок, лучше расслабится и смиренно ждать, когда загрузится самый последний жпег, приступ эпилепсии закончится и страница будет уже лежать бездвижно. И не вставляйте ключи или другие металлические элементы в рот, все заголовки обломаете бедняге!
This media is not supported in your browser
VIEW IN TELEGRAM
Обнаружено самое незаметное в мире выделение текущего раздела в меню. Проверил пипеткой — оттенок серого в иконке при нажатии на нее становится светлее на 5%.
​​Как обычно выглядят видеоконференции:
​​Как выглядят видеоконференции на промо-картинках соответствующих сервисов:
Сервисы видеозвонков настолько стесняются того, как выглядят люди во время этих видеозвонков, что на промо-картинках лепят в макеты качественные фотопортреты с глубиной резкости и обилием света.

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

То есть из-за жадности дизайнеров/маркетологов сервис с первого взгляда воспринимается хуже, чем он есть на самом деле — сервисом аудио-, а не видеозвонков.
Интересно смотреть, как разные сервисы пытаются найти нужную грань реалистичности, какие приемы используют.
​​Кто-то снимает в упор на широкоугольный объектив, подражая линзам веб-камеры.