Подписаться на блог
В Твиттере

Реплики и ссылки на заметки

В Фейсбуке

Ссылки на заметки

Вконтакте

Ссылки на заметки

В Телеграме

Ссылки на заметки

В Тумблере

Заметки целиком

В Же-же

Заметки целиком

По РСС

Заметки целиком

Если что-то из этого не работает, напишите мне: ilyabirman@ilyabirman.ru.

Дизайнерская терминология

Вселенная знает

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

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

Одно из заданий на интерфейсном курсе — терминал оплаты мобильной связи. Каждый второй делает экран выбора оператора. Спрашиваю: зачем? Люди говорят, мол, ну а как? И начинают рассуждать: можно было бы по коду определять автоматически, но сейчас же можно номер поменять, так что это ненадёжно.

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

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

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

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

«Вселенная знает» в таких случаях работает как стартовый толчок для размышлений.

Окно Бирмана

В бюро есть термин — «окно Бирмана».

Так называется окно браузера, высота которого сильно выше ширины. Дело в том, что я люблю браузер ставить вот так:

Окно Бирмана

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

Пользоваться термином так:
— А в окне Бирмана как это будет выглядеть?

Или так:
— У тебя в окне Бирмана фон разъехался.

При разработке книги Артёма Горбунова об окне Бирмана приходилось думать регулярно.

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

Окно Бирмана

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

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

2016   Бюро   дизайнерская терминология

Как подчеркнуть ссылку пунктиром

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

Я называю такие ссылки «недоссылками», а Артём говорит «дыдыдышка» (изображает прерывистость линии словом dash).

Это редко когда годится, поэтому общий совет: не уверены — не используйте.

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

Остальные варианты на этой картинке не годятся.

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

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

Опытным путём установлено, что идеальный паттерн — это чередование трёхпиксельных штрихов и двухпиксельных пробелов (это как раз то, около чего галочка):

Непунктирные ссылки по теме:

2016   дизайн   дизайн сайтов   дизайнерская терминология   пользовательский интерфейс   студентам

Ромб

В рамках занудства я всегда сопротивлялся тому, чтобы называть квадрат, повёрнутый на 45°, «ромбом». Ясен пень, что любой квадрат — ромб, но квадрат, повёрнутый на 45° — ничуть не в большей степени ромб, чем любой другой квадрат.

Ромб

Очень тупо называть «ромбом» повёрнутый квадрат.

Тупо — но очень удобно. Поэтому, чтобы больше не мучиться, введём второе определение ромба. Ромб — квадрат, повёрнутый на 45° относительно горизонта или другой очевидной направляющей.

2015   дизайнерская терминология

Шифт

Шифт — дизайнерская единица измерения, равная десяти пикселям.

— Заголовок на шифт ниже.

— Правое поле этому блоку надо два шифта минимум.

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

2015   дизайнерская терминология

Тоньше пикселя

Хорошо отделить шапку у таблицы линеечкой. Но обычно сначала дизайнеры её делают слишком толстой. Ещё многие слишком толстыми делают обводки у полей и подчёркивания у ссылок.

Когда просишь сделать тоньше, в ответ нередко слышишь: «Да куда ж тоньше, она и так один пиксель». Ёлки, да как же куда? Туда!

Вот жирнющая чёрная линия толщиной в два пикселя:

Это жирная линия толщиной в пиксель:

Полпикселя — всё ещё дофига:

Аккуратная линеечка в 1/6 пикселя, можно брать для таблиц:

А вот 1/12 пикселя — слишком тонкая, но может сработать в выноске:

У кого ретина: вместо «пиксель» читайте «поинт».

Толщина линии обеспечивается изменением опасности, но говорить «сделай линейку прозрачнее» — неверно. Смысл именно в том, чтобы сделать её тоньше. То, что на современном уровне развития дисплеев для этого приходится прозрачнить — второстепенно.

2015   дизайн   дизайнерская терминология

Опасность

Важное дизайнерское слово opacity не переводится на русский язык: у нас нет антонима слову «прозрачность». Иногда говорят «непрозрачность», но с этим словом трудно иметь дело.

В бюро всю жизнь используется термин опасность: «Давай сделаем тулбар чуток поопаснее». Рекомендую.

2014   Бюро   дизайнерская терминология   русский язык

Анатомия стрелки

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

Предлагаю дизайнерам терминологию для описания анатомии стрелки:

Снизу — примеры стрелок в разных шрифтах. Теперь любую из них можно описать словами. Довольно уродская стрелка из шрифта «Символ» имеет уши из точно таких же штрихов, как ствол; они расходятся от острия под углами около 25° к стволу; само остриё при этом тупое, плоское. Стрелка «Калибри» также состоит из трёх одинаковых штрихов; уши идут под прямым углом друг к другу и при этом весьма длинны, настолько, что их проекции на ствол доходят почти до половины его длины; остриё слегка скруглено, в стиле шрифта. У стрелки «Камбрии» уши в острие чуть толще ствола слегка сужаются к краям; пах выглядит так, будто в нём есть небольшое скругление. В «Лиусиде-гранде» — треугольная головка с углом острия 90°, само остриё, наконец-то, острое. У декоративных стрелок хвост может обладать оперением, а ствол, например, может быть двойным.

2013   дизайнерская терминология

Русское сокращение пикселей

Блин, надоело сокращать пиксели как «пикс.», считай не сократил нифига. Лень — двигатель прогресса. Хорошо англоговорящему миру, у них есть px. Теперь и нам будет хорошо.

Отныне вводится официальное русское сокращение пикселей — пк. После пк не ставится точка, как после килограммов кг, литров л и метров м.

Фото Евгения Степанищева

— Подвал выше на 60 пк.
— А с расстояниями в меню ок?
— Давай увеличим на 5 пк где-то.

Блиц-ответ скептикам: парсеки не обидятся; п — типографский пункт, пкс — очень длинно, пи — 3,14, пс — постскриптум, пл — площадь.

2013   дизайнерская терминология

Четыре аббревиатуры

Эти четыре аббревиатуры должен знать любой дизайнер:

  • ЛВУ — левый верхний угол,
  • ПВУ — правый верхний угол,
  • ЛНУ — левый нижний угол,
  • ПНУ — правый нижний угол.

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

2013   дизайнерская терминология