9 заметок с тегом

дизайн

Как собрать пакет иконок из фигмы — 3

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

Что вообще происходит

У дизайнера есть несколько разных способов передать иконки разработчику:

  • отдельными файлами или спрайтом в png,
  • отдельными файлами или спрайтом в svg,
  • иконочным шрифтом.

На формат распространения накладываются и другие ограничения:

  • платформа: веб, десктоп, мобильные
  • цветность: монохромные, двухцветные, полноцветные
  • dpi экранов
    и прочее

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

Рассказ может быть полезен разработчикам фронтенда и дизайнерам интерфейсов. В меньшей степени он будет полезен бекендным разработчикам интерфейсов (классический ASP.NET MVC или что-то подобное): схема будет та же, но не будет готовых файлов конфигураций и скриптов. Если кто-то расскажет как прикрутить к этому NuGet, напишите, я добавлю.

Зачем это делать, есть же фонтелло

Есть много готовых сервисов, которые собирают шрифт по загруженным svg-файлам, например fontello. Мы не стали использовать ни один из них, потому что с ними могут быть сложности:

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

Хорошее решение — простое, в нем минимум ручных действий.

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

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

Cложно интегрировать в общий процесс сборки продукта. Отдельно стоящий сервис тяжело встроить в общий процесс разработки и сборки, а у кого-то есть еще и процесс CI. Придется вручную собирать сервисом файл, куда-то его загружать и как-то версионировать.

Хорошее решение встраивается в процесс разработки.

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

Хорошее решение работает внутри компании.

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

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

Хорошее решение дает разработчикам все что нужно. Иконка кодируется понятным названием, коды символов и размер подставляются автоматически.

Новое в этой версии  

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

Сегодня — вариант для фигмы. Еще в нем появились svg-файлы и svg-спрайт. Иконки svg-спрайта поддерживают двухцветность и перекрашивание средствами css.

Куда смотреть

Я сделал:

Чтобы сборка завелась, нужно подготовить токен доступа к фигме, ищите в профиле вот такое:

После этого действуйте по инструкции в Readme.md

Сборщик обращается к фигме, через веб-апи экспортирует svg-файлы, запускает сборку шрифта и svg-спрайта.

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

КДПВ

Было:

Стало:

Разные особенности

Как работает двухцветность спрайтовых иконок

Для двухцветности иконок в svg-спрайте и возможности перекрашивания их через css используется своеобразных хак.

<svg fill="#000" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
<path d="M8.62155 1.21658C8.45088 1.08099 8.2349 1 8 1C7.44771 1 7 1.44772 7 2C7 2.55228 7.44771 3 8 3C4.1554 3 3.80482 5.42796 3.08886 10.3863C3.05992 10.5868 3.03039 10.7913 3 11C2.51458 11 2.02917 11.3534 1.54375 12.0603C1.4751 12.1603 1.43835 12.2787 1.43835 12.4C1.43835 12.7314 1.707 13 2.0384 13L6.58534 13C6.53007 13.1564 6.5 13.3247 6.5 13.5C6.5 14.3284 7.17157 15 8 15C8.82843 15 9.5 14.3284 9.5 13.5C9.5 13.3247 9.46992 13.1564 9.41465 13L13.9616 13C14.0829 13 14.2013 12.9633 14.3013 12.8946C14.5745 12.707 14.6439 12.3335 14.4562 12.0603C13.9708 11.3534 13.4854 11 13 11C12.9668 10.775 12.9346 10.5547 12.9031 10.3391C12.7783 9.48499 12.6644 8.70518 12.5409 7.99982C12.5273 7.99994 12.5137 8 12.5 8C11.9617 8 11.4454 7.90547 10.9669 7.7321C11.0539 8.18151 11.1391 8.69127 11.2279 9.26906C11.2687 9.53513 11.3106 9.81613 11.3674 10.204C11.3589 10.146 11.4807 10.9794 11.5161 11.219L11.5575 11.5H4.44301L4.48435 11.2161C4.50903 11.0466 4.57528 10.5882 4.6098 10.3494L4.63087 10.2036C4.68629 9.8214 4.72807 9.5381 4.7686 9.27157C5.39203 5.17234 5.83807 4.5 8 4.5C8.03774 4.5 8.07495 4.50021 8.11166 4.50065C8.03858 4.17884 8 3.84392 8 3.5C8 3.33101 8.00932 3.1642 8.02746 3.00004C8.09885 2.35473 8.30674 1.75013 8.62155 1.21658Z"/>
<circle cx="12.5" cy="3.5" r="2.5" fill="currentColor"/>
</svg>

Это — код двухцветной иконки. Обратите внимание, что fill у svg стоит #000, а у части иконки, которую нужно красить отдельно, стоит fill=«currentColor».
Для перекрашивания применяется правило:

svg {
    fill: #8F99AA; /* Цвет основной части*/
    color: #E80E0E; /* Цвет дополнительной части*/ 
}

В результате этого правила у svg появляются два свойства: fill и color. Fill перекрашивает всю иконку, а color ни на что не влияет. У вложенной фигуры срабатывает свой fill, но он берет цвет из специальной переменной currentColor, которая залинкована на атрибут color у svg. В итоге атрибут color у svg не влияет на базовую контур, а используется только чтобы прокинуть внутрь дополнительный цвет.

Такая особенность нужна только для спрайта. Если вставить иконку прямо в DOM, то можно будет использовать любые нормальные способы (например, css-классы).

Зачем нужны CODEPOINTS

Ручное прописывание codepoints для символов нужно, чтобы при переборке шрифта не поехали коды символов. Если вы не собираетесь использовать TTF-шрифт, забейте и не используйте. Если вам нужен TTF-шрифт со стабильными кодами символами, придется выдавать их вручную.

Как лучше версионировать

У нас (вообще это не обязательно) пакеты версионируются по семверу (semver.org). Версии нумеруются в формате Major.Minor.Patch (например, 3.2.1: 3 — major, 2 — minor, 1 — patch).

  • Major-версия обновляется при ломающих изменениях
    Ломающие изменения говорят о том, что нельзя просто обновить иконку, нужно скорее всего будет менять код в продукте. Ломающие изменения описаны в changelog. Самый частый случай: переименования иконок, при обновлении пакета нужно заменить в продукте старое имя на новое.
  • Minor-версия обновляется при новых фичах: появление новой иконки, нового формата css и прочее.
    Обновляться на новую версию можно безопасно, ничего сломаться не должно.
  • Patch-версия инкрементируется при багфиксах, исправлениях иконок и прочих мелких изменениях.
    Обновляться на новую версию можно безопасно, ничего сломаться не должно.

Если есть вопросы, пишите в комментарии или на почту mike.ozornin@gmail.com

Подписаться на блог…

Сбербанк и Caller ID

Мне недавно один раз позвонили мошенники «из Сбербанка» и я задумался о способе борьбы с ними

Проблема

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

Почему это происходит именно со Сбербанком (мои предположения):

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

Как пытаются решить проблему сейчас

Люди и банк пытаются решить проблему с разных сторон. Пользователи — учатся отличать мошенников от банка (благо это несложно: если звонят — в 99% это мошенники), а банк борется с номерами и пытается их блокировать.

Высказываются и совсем экстремальные способы, например, перевести всех на чат и рассказывать всем, что банк вообще не звонит. Мне кажется, это будет работать не очень хорошо. В этом способе не решается главная проблема: как донести всем 100% клиентов, что банк не звонит? Как их к этому приучить? Как сделать реакцию «позвонили — мошенники» уверенной?

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

Мое решение

Сбербанк может встроить в своё мобильное приложение определитель мошеннических номеров и будет подставлять их на экран звонка через Caller ID. Caller ID — специальное API, через которое можно определять номер телефона, добавляя к нему какую-то внешнюю информацию.

Многие приложения и сервисы так уже делают:

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

Выглядеть это будет примерно так:

Работоспособность решения

Почему это вряд ли будет работать у Яндекса, 2Гиса или Касперского так хорошо, как Сбербанк.

Желание и цель: Решение такой задачи на очень высоком уровне не в интересах Яндекса, 2Гиса или Касперского. У них просто нет необходимости убиваться и очень легко остановиться на уровне «удовлетворительно».

У Сбербанка — безопасность денег клиентов одна из важнейших задач, её всегда так или иначе будут решать: антифрод-алгоритмами, машинным обучением, — можно добавить ещё один способ.

Ресурсы: У Сбербанка так или иначе собирается база номеров: их ИБ-подразделение разбирает инциденты. Сбербанк может собирать номера из обращений и по отзывам в соцсетях. Да и просто о фактах мошенничества и номерах телефонах клиенты сообщают именно Сберу, а не Яндексу.

В интересах Сбербанка иметь максимально полную базу мошеннических номеров. Откуда Яндекс возьмет такую же полную базу номеров — непонятно.

Доступность для целевой аудитории: Своё приложение Сбербанк может и будет продвигать активней, чем приложение Яндекса (приложение Яндекса очевидно не будет вообще). Яндекс же тоже не станет убиваться и стараться для Сбера.

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

Выгода: Яндексу решение этой конкретной задачи непонятно зачем.

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

Преимущество решения

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

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

«❌ ❌ ❌ Возможно, мошенники ❌ ❌ ❌».

Замечания параноика. Лучше сделать определитель и встроенным в мобильный сбербанк онлайн (чтобы не ставить отдельное приложение, тем у кого уже есть мобильный банк), и отдельным приложением (те, кто не хочет ставить сбербанк-онлайн смогут установить себе только определитель).

Вместо вывода

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

Я не очень верю, что Сбер не рассматривал такой способ, видимо отказался. Почему? Что я не учел? Где схема ломается?

Подписаться на блог…

История одного неразрывного пробела

Ночная история про профессиональный заскок, сафари и Тинькофф.

Изначально это был твиттер-тред, но для истории я перенес его в блог.

Вижу, что на странице Тинькофф какой-то конский пробел между Tinkoff и Black, очевидно так не должно быть. (только в сафари, в других браузерах все ок).

Смотрю в код, там неразрывный пробел, меняю на обычный — все становится отлично.

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

Интересно…

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

Для окончательной проверки отключаю лигатуры заклинанием:

font-variant-ligatures: none;

 
Все пробелы выравниваются.

Почему так не знаю (скорее всего баг в сафари), но любопытство удовлетворил. Дизайнеры Тинькофф, вы, видимо, в хроме сидите?

Подписаться на блог…

Что такое, эти опентайп-фичи

Что это за фичи, и почему про них нужно знать

Что случилось

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

Что это за фичи

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

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

Пропорциональные и моноширинные цифры

Что это: Фича переключает пропорциональные (сверху) и моноширинные (снизу) цифры. Обратите внимание, что сверху число съехало больше, чем на целый разряд.

Шрифт Inter, rsms.me/inter

Когда использовать: моноширинные — в таблицах и таймерах, пропорциональные — в тексте и фактоидах
Включить в CSS:

font-feature-settings: 'tnum' 1 // табличные
font-feature-settings: 'pnum' 1 // пропорциональные

Старостильные (минускульные) цифры

Что это: Фича переключает маюскульные (сверху) и старостильные (минускульные, снизу) цифры. Минускульные цифры выравниваются по высоте строчных букв (пурпурным) и имеют выносы и сносы.

Когда использовать: по ситуации
Включить в CSS:

font-feature-settings: 'onum'  1

Альтернативные начертания

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

Альтернативные цифры (4, 6, 9):

Шрифт Inter, rsms.me/inter

Устранение неоднозначностей. Символы I (прописная i), l (строчная L), 1 (единица), 0 (ноль), O (прописная буква о) часто путаются, фича делает их различимыми:

Шрифт Inter, rsms.me/inter

Римские цифры:

Когда использовать: по ситуации
Включить в CSS: font-feature-settings: ’ss01’ 1, вместо 01 поставить нужно число

Концевые росчерки (своши)

Что это: Фича включает красивые длинные росчерки у букв, обычно у курсивного начертания.

Шрифт Adobe Garamond, fonts.adobe.com/fonts/adobe-garamond

Когда использовать: по ситуации
Включить в CSS:

font-feature-settings: 'swsh' 1

Контекстные замены

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

Шрифт Inter, rsms.me/inter

Когда использовать: Просто включите, обычно станет лучше
Включить в CSS:

font-feature-settings: 'calt' 1

Дроби

Что это: Фича превращает обычный текст в обыкновенные дроби (о, каламбур).

Шрифт Inter, rsms.me/inter

Когда использовать: Когда нужно дроби
Включить в CSS:

font-feature-settings: 'frac' 1

Как использовать

Если у вас Фигма, то вам повезло, — недавно Фигма анонсировала поддержку опентайп-фич, сейчас их удобно включать прямо в интерфейсе.

Если у вас Скетч, то все будет не так удобно:
View → Show Fonts → ⚙︎ → Typography

Upd. С версии Скетча 59 будет более-менее, — опентайп-фичи доступны через меню Text → Opentype Features.

Где работают (везде)

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

В мобильных интерфейсах на iOS: stackoverflow.com/questions/46450875/ios-opentype-font-features-in-swift

В вебе тоже уже имеется полная поддержка всеми нормальными браузерами:

Почитать ещё

Возможно, это будет вам тоже интересно:

 Нет комментариев    2004   2019   дизайн   шрифт
Подписаться на блог…

Не скрывать, а показать сразу

Расскажу об одном простом принципе в информационном дизайне и дизайне вообще

ТАСС сделало интерактивный рассказ про дирижабль «Италия»:

Не собираясь оценивать их рассказ, я расскажу об одном моменте рассказа.

На странице есть схема устройства дирижабля:

Все детали скрыты за красными точечками, нужно навести мышку, чтобы узнать что это за деталь. Чтобы посетители справились, пришлось даже сделать мини-онбординг (↑ справка). Я бы предположил, что он не очень помогает.

Но даже те, кто по каким-то причинам знают, что делать, будут мучиться: навел — прочитал — навел — забыл что только что было — навел — прочитал. Это неудобно, желание изучать схему почти сразу пропадает.

Лучше сразу всё подписать:

Особенно глупо точки смотрятся на этой фотографии:

Чтобы не заставлять читателя страдать, есть простое правило:

Если можно не прятать, лучше не прятать.

Когда будете подписывать схемы и скриншоты почитайте на что обращать внимание: Как подписывать скриншоты

 2 комментария    393   2019   дизайн   инфодизайн   подписи
Подписаться на блог…

Переверстка: письмо из Пикпоинта

Сеть постаматов Пикпоинт присылает письмо, когда заказ приезжает в постамат.

Письмо выглядит так:

Наверное есть какие-то объективные причины почему оно такое. Покажу как я бы его переделал, почти не меняя информацию в письме.

Самая важная часть письма — код, вот она:

Мой вариант вышел таким:

Не буду описывать процесс, вот что делал:

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

Мобильная версия. Мне она кажется важней, тот случай когда mobile first. Перед постаматом я всегда стою с открытым письмом, там нужный мне код.

Что осталось нерешенным:

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

Как подписывать скриншоты

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

Я подключился совсем рано, когда подписи скриншотов были совсем сырыми:

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

Общие правила

Про оформление подписей есть бюрошный совет: bureau.ru/bb/soviet/20140728. В нем Артём рассказывает о роли подписей, о том, как их ставить и как рисовать выноски. Подписчики учебника «Типографика и верстка» могут дополнительно посмотреть разворот 71.

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

Прием 1: УВЛ (убрать все лишнее)

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

Слово button встречается 12 раз и все они используются, чтобы сказать «это — кнопка». Вообщем почти все элементы на этом скриншоте — кнопки, поэтому button безболезненно убирается:

Прием 2: вынести общее за скобки

Иногда от повторений нельзя избавиться совсем. В примере ниже повторяется не просто button, а filter button.

Убрать button можно, а вот от filter избавиться нельзя. Если убрать слово filter, то потеряется важный смысл. При этом filter button относится ко всем четырем действиям, все они — действия над сохраненными фильтрами. Нет необходимости писать про сохраненные фильтры 4 раза, можно написать один раз и больше не повторяться.

Например, так:

Фактически мы вынесли filter button за скобки, как в математическом выражении.

Прием 3: соблюдать теории близости

Нужно следить, чтобы при расположении подписей не нарушалась теория близости. Здесь надпись близка к чужой палочке, возникает путаница:

Прием 4: использовать естественное соответствие

Известный инженерный психолог Дональд Норман в своей книге «Дизайн привычных вещей» сформулировал принцип «естественного соответствия». Проще всего объяснить картинкой. Слева просто так, справа — естественное соответствие:

На этом куске скриншота все 4 иконки стоят ровно в ряд с одинаковыми отступами:

По возможности лучше не подписывать что-то сбоку, что-то снизу, а расположить подписи в ряд, с одинаковыми интервалами, — это усилит взаимосвязь:

Прием 5: выравнивать текст осмысленно

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

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

За выравниваем всегда следят на транспортных схемах: правильное расположение названия станции помогает понять, где какая станция. Посмотрите, например, линейные схемы Московского метро: artlebedev.ru/metro/line-map.

Прием 6: убрать «почти, но не совсем»

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

Посмотрим на картинку:

Здесь много почти, но не совсем, всего 6 видов разного выравнивания:

Подписи будут аккуратней, если их выровнять друг относительно друга так:

Ещё примеры «почти, но не совсем» в посте Ильи Бирмана.

Прием 7: следить за типографикой

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

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

Про интерлиньяж:
bureau.ru/bb/soviet/20140310/
bureau.ru/bb/soviet/20140310/

Прием 8: редактировать текст

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

Прием 9: рассказывать по частям

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

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

Приемы

  1. Убрать все лишнее
  2. Вынести общее за скобки
  3. Соблюдать теории близости
  4. Использовать естественное соответствие
  5. Выравнивать текст осмысленно
  6. Убрать «почти, но не совсем»
  7. Следить за типографикой
  8. Редактировать текст
  9. Рассказывать по частям

Про подписи есть ещё два поста Сергея Стеблины, он шарит сильно лучше меня, поэтому если дочитали досюда, то прочитайте и его, вам уже нечего терять:

 1052   2018   верстка   гайдлайны   дизайн   подписи
Подписаться на блог…

Объявления о закрытии метро

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/89319.html

Тут в субботу закрывали 4 станции метро на нашей ветке, в связи с чем были объявления о закрытии. Я видел минимум три варианта, два сфоткал.

Вот вариант, который подготовили явно в Дептрансе, тут и симпатичный стиль, и с текстом получше, и даже про висячую пунктуацию в курсе:

Наравне с этим везде висят объявления, сделанные, судя по всему в депо:

Первое, что хочется сделать — пошутить и нарисовать классическое и потешить своё ЧСВ.

Однако, как заметила Оля, всё не так просто как кажется.

Объявление Дептранса лучше, красивей, человечней. Но при этом объявления депо более работоспособны.

Вот почему:

  • Каждый раз, когда я вижу треш-объявление на листе бумаги, я его читаю. Обычно — это существенные изменения в работе станций. Я мучаюсь, продираясь сквозь косный текст и плохую вёрстку, но читаю
  • Объявление на листе бумаги лучше видно. Оно настолько выделяется из оформления станции и вестибюлей, что видно и на станции, и в вестибюлях. Дептрансовское объявление же теряется на фоне тарифов и прочего, его хуже видно издалека. Оно не кричит «Ахтунг, Ахтунг, не проходи мимо, 4 станции метро на вашей ветке будут закрыты целый день».

Оба этих фактора, как мне кажется, приведут к тому, что дептрансовское объявление мало кто увидит.

Что же делать?

  1. Вешать всегда ахтунг-объявление и нормальное рядом. На ахтунговом писать «Изменения в графике, читайте вот тут →». Постепенно отказываться от ахтунговых, приучая к нормальным. Да, это стёб.
  1. Переделать дизайн нормальных объявлений, чтобы они были более заметны. Сделать их сначала очень заметными, прямо до рези в глазах.

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

Подписаться на блог…

Статистика по задачам

Оригинал в ЖЖ: http://withoutbrains.livejournal.com/78773.html

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

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

 Нет комментариев    48   2013   дизайн   инфодизайн
Подписаться на блог…