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

Когда мы с Шуриком делали Ангстрем, наш мегаконвертер для Айфона (поставьте, если ещё не), мы придумали технологию Ångström Style System, которая ловко сокращается до слова ÅSS.

ÅSS — это движок стилей для Какао-приложений с синхронизация через Дропбокс. Стили обновляются, если потрясти телефон (шейк-ту-рефреш называется). Это суперспособ разделить код и дизайн. Благодаря нему я попробовал кучу разных цветовых схем, шрифтов, отступов, а главное, покрутил по-разному анимации. При этом не приходилось докучать Шурика просьбами «а давай попробуем ещё вот так» по двадцать восемь раз в день.

Курсор

Любимая заморочка в Ангстреме — анимация текстового курсора:

Это гифка, лучше смотреть в настоящем приложении (бесплатно).

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

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

В итоге после нескольких часов подбора цифирок получилось вот так:

"cursor": {
  "showTime": 0.2,
  "hideTime": 0.2,

  "color": "@colors.textNumberColor",

  "period12": 0.4,
  "timingType12": "linear",

  "period21": 0.2,
  "timingType21": "easeOut",

  "height1": 48.0,
  "width1": 2.0,
  "delay1": 0.3,
  "alpha1": 1.0,

  "height2": 78.0,
  "width2": 1.0,
  "delay2": 0.1,
  "alpha2": 0.33
},

Это примерно 3% всей «таблицы стилей» Ангстрема.

Синхронизация через Дропбокс и шейк-ту-рефреш

Это две главных радости.

Вообще вынести переменные, связанные со стилем, в отдельный файл — само по себе хорошая идея. Уже так я мог бы играть с разными параметрами и пересобирать программу, не вникая в код Шурика. Как я понимаю, так работает ДБ5 Брента Симмонса.

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

1. Открываю Ангстрем на телефоне и иду в экран, который хочу подкрутить.
2. Открываю файл стилей из Дропбокса Сублайм-текстом на Маке.
3. Меняю параметры, которые хочу подкрутить и сохраняю файл.
4. Трясу телефоном и сразу вижу, как всё выглядит с новыми параметрами.

То есть прямо запущенное приложение тюнится вживую. Это очень круто.

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

Шурик написал заметку про внутренности системы, там есть куски кода всякие, почитайте.

Вы пришли на сайт Аэрофлота зарегистрироваться на рейс, и вам показывают салон. Вы летите без компании. Какое место выберете?

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

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

Хорошо, но почему бы тогда не занять место у окна в любом из свободных рядов, начиная с шестнадцатого? Ведь соседнее среднее место всё равно никто не захочет брать, пока есть выбор?

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

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

Когда я был в Лондоне в ноябре, на станции «Черинг-кросс» прошла выставка обложек карманной версии схемы метро:

Вариант с мишенью — мой любимый, у меня такая даже лежит где-то в коробке со всякими схемами, буклетами и билетами.

После длинного перерыва мы возобновляем наш курс о навигации в общественных местах. Он пройдёт 19, 20, 21 и 23 апреля у нас в Коворкафе, записывайтесь и приходите.

Курс придумал и проводил Артём Горбунов, в подготовке материалов участвовали Таня Мисютина Бибикова и Никита Иванов, а теперь его буду вести я. Это совершенно офигительный курс, и я жду его с нетерпением. Последние три месяца интенсивно готовлюсь, дополнил его кучей нового.

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

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

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

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

Отдельное место в моём сердце занимает тема про транспортные схемы.

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

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

Навигация — моя любимая область. Записывайтесь и приходите!

Я тут дописал трек. Чокнутый пситранс с техно-влиянием. 148 ударов в минуту:

Значительная часть материала сделана давно, но собрать всё в логичную историю и отточить пиксели дошли руки только сейчас. Сл. 2:09 барабаны; 3:09 такой бас и 3:22 вот такой; 3:40 ой; 5:17 щекотно; 5:32 шутка; 5:36 тарелки; 5:59 механика; 6:17 напоследок.

Ранее выпущенная музыка — в музыкальном разделе сайта.

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

У некоторых людей с этим проблема. Им на помощь спешит знак:

См. ещё у Андрея Шитова правило, помогающее отличать лево от права.