мяу-дизайн

(Более продвинутые читатели подсказывают, что это, скорее всего, не мясной ретушер, а нейросетка, которая при генерации фона не всегда понимает масштаб встраиваемого предмета: https://www.reddit.com/r/StableDiffusion/comments/1fvwf0h/how_do_you_deal_with_the_object_to_background/)

(если что, высота этой коробочки не превышает 10 см. ну и если представим, что это канал обзора покупок, то я бы не рекомендовал покупать такой детектор из-за некачественных показаний, уж лучше поднакопить на Aranet4 или хотя бы детекторы от Qingping).

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

Но ретушер фоток из объявления детектора углекислого воздуха решил не ограничивать себя:

Пример, как созданный характерный бренд оказался слишком тесным для всей продуктовой линейки компании.

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

И вот так постепенно и незаметно, разрабатывая «а че такого»-шагами диапазон применения бренда, маркетологи дошли до того, что старый морской волк продает ананасы, и не заметили, какой диссонанс уже вызывает такое сочетание.

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

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

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

То есть чтобы создать новогоднее настроение, мэрия развесила по городу неработающие часы. Кажется, есть способы более безобидные.

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

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

На Принтфуле:
https://www.printful.com/product-template/81743905/cc1b7906177e8f587a962055472d6072
Он говорит, что у него доставка по всему миру, но подозреваю, что по факту там может быть множество звездочек со сносками маленьким шрифтом.

Поэтому еще продублировал на Принтдиректе:
https://kefiijrw.printdirect.ru/index.php?action=addtocart&product=9345679

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

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

Как обычно, прикрепляю в качестве примера свой календарь за 2019 год:

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

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

Ладно, хватит лирики, вот пдфки на печать. Два формата (А2 и под рулонный плоттер 60см) и два варианта (по производственному календарю рф и «международный» с выделением лишь выходных), итого 4 файлика на выбор:

Мой брат не только ведет канал о том, как покоряет Голливуд и снимает клипы для Арианы Гранде, но и иногда подкидывает материал для публикаций и в этот канал.

Так что небольшой сеанс гостевых наблюдений:

Это список отделений в приложении банка. При нажатии на пункт в списке ниже открывается уточняющий вопрос с кнопками NO и YES.

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

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

Обычные call-to-action-ссылки на сайте оформили как кругляши в шахте, причем на первой кнопке внутри круга еще и стрелка направо вдоль шахты, что вызывает четкое ощущение, будто их надо свайпать.

как говорится, жалкая пародия и неповторимый оригинал

например, в логотипе слева внизу закодировано MOCA, но это же расшифровывается как The Museum of Contemporary Art, то есть музей современного искусства, ему положено провоцировать и не париться об утилитарных материях.

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

Многие логотипы существуют на самой грани однозначной прочитываемости, а некоторые сознательно заглядывают за эту грань:

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

Но если всё же ставить перед собой такую задачу, то может стоит признать, что букву в этой закорючке не прочитать, и использовать ее как значок отдельно от текстовой части.

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

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

(только сейчас заметил, что на лого турецкой лиги какое-то время была чуть ли не звезда давида) 🤔

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

Ну а в завершение я сделал еще эмблему для сборной лиги:

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

Штош, вот поэтому логотип оказался таким. Как часто у меня бывает, финальный результат оказался решением системы ограничений-«уравнений».

Заданный логотипом стиль затем слегка разросся на вспомогательные носители:

4. Готовность логотипа существовать в одном цвете. Опять же, требование времени — почти у всех современных логотипов, если они не были изначально отрисованы в один цвет, есть монохромная версия для размещения на сложных фото- и видеофонах.

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

(для каноничности надо было, конечно, еще присыпать логотип черной крошкой)

3. Следующее требование связано с предыдущим: логотип должен выживать в маленьких кругляшах. Да, это всё те же соцсети, задавшие стандарт круглых, изредка квадратных аватарок. Можно делать фотопривязки и кайфовать над тем, как логотип выглядит на рекламном банере во всю стену или обоиной телефона, но суровая реальность такова, что чаще всего ваш логотип будут наблюдать в кружочке с диаметром 50‒70 пикселей.

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

Скажем, Panasonic с его длинным чисто текстовым логотипом справляется уже тяжеловато, в соцсетях его логотип превратился в белую палочку:

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


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

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

Шведская лига выбрала своим символом фаната. Вероятно, подразумевается, что по шарфам угарают только футбольные фанаты:

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

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

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

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

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

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

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

Ну и главное: почему не выбрать сразу дату, в которую ткнул пользователь? Кому это помешает? За что вы наказываете пользователя? На кого вы работаете?

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

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

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

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

(в прошлый раз я из-за дизайна случайно зашел не в тот туалет в Бургер Кинге: https://t.me/meow_design/1194)

(в предыдущей серии о мелких детялях дизайна айфона выяснял, как эпл совмещает необходимость размещать на корпусе всякие служебные маркировки с нежеланием их показывать на промо-материалах: https://t.me/meow_design/574)

Но, вероятно, для такого маневра внутри не хватает места для размещения матрицы — уж слишком близко к краю.

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

Тут рассинхрон радиусов прям бросается в глаза из-за того, что радиус «капсульной» формы блока камер жестко завязан на радиусе объектива, мухлевать скруглениями для сглаживания эффекта рассинхрона сложнее, чем в квадратном блоке камер. Для наглядности опять воспользуемся обводками:

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

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

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

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

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

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

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

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

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

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

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

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

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

Тот случай, когда достаточно просто использовать безупречную Фотораму (R.I.P. Артём Поликарпов).

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