Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Ангстрем

Позднее Ctrl + ↑

Автодополнение через выделение и без него

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

Автодополнение через выделение

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

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

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

Автодополнение без выделения

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

Сайт «Авито» постоянно обламывает меня своим поиском. Пишешь, например, «сно», он дописывает «уборд», ты жмёшь Энтер, а он ничего не находит по запросу «сно». Классическое автодополнение такой лажи себе бы не позволило.

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

В недавнем обновлении Ангстрема мы перешли на такое автодополнение:

Автодополнение в Ангстреме

Я бы, наверное, ещё год с этим тупил, если бы Шурик не предложил. Смысл не пострадал, а чище стало.

 529   2015   Ангстрем   пользовательский интерфейс

Ангстрем: улучшение ввода и поддержка айфонов 6

У нас для вас апдейт Ангстрема — версия 1.4:

Этот апдейт посвящён наведению порядка после не очень удачного 1.3. Мы даже кодовое название не придумали — упорно чинили всё, что сломали.

К сожалению, виджет для экрана «Сегодня» пришлось выпилить. Мы наспех сделали его осенью, но добиться скорости и надёжности так и не смогли. Не хотим фич «для галочки», так что пока без виджета. Когда разберёмся, как его сделать по-честному, вернём. Простите.

Улучшили ввод. Когда меняешь единицу с «метров» на «Московское время», введённое 3,57 раньше превращалось в 3:34, а теперь превратится в 3:57 (нечего было умничать, так удобнее). 357мск тоже автоматом превратится в 3:57 Москвы. Ещё можно писать 007 без десятичной точки, само превратится в 0,07 или 0:07 в зависимости от выбранной единицы. Меньше тапов — это клёво.

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

Гривны теперь включены в бесплатный набор единиц.

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

Если вы ещё не используете Ангстрем, то вот кнопка:

Скачать в Апсторе бесплатно

 41   2015   Ангстрем   продукты   релиз

Доклад про Ангстрем

В этот раз 404фест удивительно быстро опубликовал видеозаписи докладов.

Вот я рассказываю про Ангстрем:

Ангстрем: переводите время и часовые пояса

Появилась новая версия Ангстрема под названием «Гринвич». Переводите часы в секунды, недели в минуты и т. д.

Платные пользователи получают перевод часовых поясов. Сколько времени в Москве, когда в Петропавловске-Камчатском полночь?

Так, стоп. Ха-ха-ха. Написал эту строчку, потому решил проверить, а у нас-то среди городов Петропавловска-Камчатского как раз и нет. Вот так облом. Ладно, добавим в следующих версиях, пока дубль два.

Сколько времени в Челябинске, когда в Сан-Франциско начинается презентация Эпла? Достаточно написать 10san:

Ангстрем: переводите время и часовые пояса

Мы знаем, когда где действует летнее время.

Ещё мы наконец-то правильно скруглили углы:

Мы наконец-то правильно скруглили углы в Ангстреме

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

Мы добавили новые символы валют, включая турецкую лиру, камбоджийский риель и армянский драм (кстати, биткоин у нас был всегда):

Мы добавили новые символы валют в Ангстрем

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

Спасибо Федерико Витиччи из Максторис за отличный обзор Ангстрема:

The result is an incredibly fast conversion process that only takes a few taps and doesn’t require you to scroll long lists or bookmark favorites for quick access. For me, typical usage of Ångström goes like this: I open the app, type a number, insert the first letter of a unit, and I’m done.

Если вы ещё не используете Ангстрем, то вот кнопка:

Скачать в Апсторе бесплатно

 34   2014   Ангстрем   продукты   проекты   релиз

Система стилей Ангстрема

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

Когда мы с Шуриком делали Ангстрем, наш мегаконвертер для Айфона (поставьте, если ещё не), мы придумали технологию Å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. Трясу телефоном и сразу вижу, как всё выглядит с новыми параметрами.

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

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

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

 14   2014   Ангстрем   проекты

Ангстрем

Я всегда хотел, чтобы у меня был длинный курсор.

А летом как раз пришёл Шурик Бабаев и говорит: давай сделаем конвертер единиц. Я его сначала на смех поднял: нахрена делать конвертер, их же сто штук и так. Но Шурик быстро открыл мне глаза на то, что конвертеров хоть и много, но хороших среди них нет: везде дебильные меню с категориями и иконками, какая-то шелуха ненужная. Как будто дизайнеры думали не о пользе, а о Дрибле. Пока проберёшься через их интерфейс и настроишь, что из чего куда переводить, уже забудешь, что перевести хотел.

Мы сделали всё по-своему, и у нас получился Ангстрем:

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

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

Каждый экран приложение стремится к максимальной информативности. Даже в меню мы сразу показываем результаты перевода с каждой из единиц.

Сегодня вышла версия 1.1, и мы с Шуриком приглашаем вас посмотреть, что у нас получилось. Она была в статусе In Review дней пять — очевидно, весь Эпл по очереди жал на наш знак равенства.

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

Скачать в Апсторе бесплатно

 83   2014   Айфон   Ангстрем   дизайн   проекты