Видео по вторникам: Чайковский и магнитики
Такие:
Позднее
Ctrl + ↑
Дизайнер Евгений Филатов коротко рассказывает о транспортных схемах, а точнее о том, когда важна, а когда не важна привязка к географии
Участники моих проектов
Всё больше людей помогают с разными моими проектами, а у меня на сайте отсутствовал стандартный дизайн для титров. Иногда я просто перечислял людей на странице проекта, иногда с фоточками, а иногда писал в блоге про то, кто чем помог, и давал ссылки на них.
Зерулс 2.0 заставил меня унифицировать это дело, в его описании теперь такой подвал:
Наконец-то я сделал себе штуку, чтобы такое ставить:
<?= i8team ([
'ib' => 'Арт-директор | и разработчик',
'rp' => 'Со-разработчик | технологии поиска',
'vk' => 'Веб-разработчик',
'vy' => 'Дизайнер',
'ad' => '§§-шрифтовик',
'gg' => 'Сисадмин',
]); ?>Конечно, идея обозначать людей двумя буквами, оказалась дебильной: Александру Бабаеву, Алексею Блинову и Александру Банкину пришлось подраться. Наверное, я это потом поменяю. Но главное, что эта штучка знает фотки и сайты людей, и это всё хранится в одном месте, поэтому если кто-то помогал мне с несколькими вещами, он будет одинаковый везде.
Если вывести всех, кого пока знает эта функция, выглядит так:
Тут я должен извиниться перед теми, кто пока не попал в этот список, но при этом много чего сделал. Например, это все, кто помогал в разное время с Эгеей, особенно в последнее время Игорь Адаменко и Иван Щолоков. Дело в том, что Эгея живёт на другом сайте, а не в виде рассказа в портфолио, поэтому с ней другая история. Может, я что-нибудь ещё придумаю. Если вы чувствуете, что я вас забыл, напишите мне, пожалуйста, куда именно хотели бы, чтобы я вас добавил. Скорее всего, я всё-таки не забыл, а просто пока не нашёл подходящего места, но вдруг. Если вы хотите поменять фотку или ссылку, тоже говорите.
Всем большое спасибо!
Запущена вторая версия сайта «Зерулс» — лучшего веб-издания правил русского языка
Зерулс переехал на ХТТПС
Эта новость расстроит тех, кто использовал сайт «Зерулс» для входа в вайфай с браузерной авторизацией. Да, сайт переехал на ХТТПС.
И ещё я забыл рассказать, что теперь можно шарить параграфы в соцсети. Под параграфами иконочки. На скриншоте — просто какой-то параграф. Расскажите всем, какие правила русского языка вам нравятся больше всего (хе-хе)!
В рассказе о проекте переделался этаж с участниками снизу — теперь все с фоткам и ссылками. И туда добавился Глеб Гончаров, который помог настроить новый сервер и завести ХТТПС. С Глебом мы также делаем сервис Эгеи, и он помогает с моим сайтом и сайтом самой Эгеи.
Никто не читает «Правила пользования московским метрополитеном», потому что это скучно, да и вагон трясёт
Размер имеет значение — чуваки с длинными Айфонами не дадут соврать
Телеграм за неделю 29 января — 4 февраля 2018
Вот как выглядела позапрошлая неделя в моём канале в телеграме (пардон, дайджесты отстают от реального времени, поэтому лучше читать в прямом эфире):
Вообще, с окнами подтверждения удивительная история. Я на каждом курсе рассказываю о том, что они бесполезны и только вырабатывают привычку жать «Да», не читая вопрос. Все это внимательно слушают, а потом в домашке каждый второй рисует подтверждающий экран.
Причём дело не в том, что люди пропустили или забывают. Когда спрашиваешь, зачем, говорят, что помнят тему, «но в данном случае же действительно важно убедиться...».
Поэтому напоминаю всем, что подтверждения нужно убирать не потому, что убеждаться не важно. А потому, что они не помогают убедиться.
Так что если убеждаться не очень важно, то подтверждение не так страшно — это будет просто раздражающее препятствие на пути. Но вот если убедиться важно, то его точно надо убрать и заменить на надёжное анду:
А вы режете сыр и колбасу так, чтобы максимально равномерно покрыть поверхность хлеба?
Нет, я же не ку-ку! — 634 (62%)
Да, а как же? — 384 (38%)
1018 человека проголосовало.
Наверняка это антинаучно, но я отношу такие штуки к проявлениям обсессивно-компульсивного расстройства. Это когда тебе некомфортно оттого, что в чём-то неосязаемом нет порядка.
Например, моя мама может спокойно открыть банку сгущёнки вверх ногами, и она так будет стоять в холодильнике неделю, и ей в голову не придёт, что что-то не так. И она права, это действительно не имеет никакого значения! Но людям вроде меня от одной мысли о таком становится некомфортно.
Или вот нормальные люди идут по тротуару и не знают забот. А люди с ОКР, если наступили одной ногой на шов между плитками, неизбежно стремятся наступить и второй, иначе прям физически ощущается дисбаланс и дискомфорт.
Википедия пишет: «Больные ОКР — чаще всего люди с высоким уровнем интеллекта». Ну, хоть какая-то радость.
А вот это, слава богу, не про меня: «Такие действия, как постоянное мытьё рук и умывание, сплёвывание слюны, многократное предотвращение потенциальной опасности (бесконечная проверка электроприборов, закрытия двери, закрытия молнии на ширинке), повторение слов, счёт. Например, с целью убедиться, что дверь закрыта, больному необходимо дёргать ручку определённое количество раз (при этом считать разы). Проведя ритуал, больной испытывает временное облегчение, переходя в „идеальное“ постритуальное состояние. Однако спустя какое-то время всё повторяется заново».
Плитка в Вене, по которой невозможно гулять спокойно
Интересно, что такая штука у огромного числа людей, просто у всех разное. Когда я рассказываю про свои странности, людям кажется, что с ними-то такого не бывает.
А потом им говоришь «а ещё бесит, когда конфеты из коробки берут так, что паттерн оставшихся конфет становится несимметричным», и они такие: «О, МЕНЯ ЭТО ВООБЩЕ ВЫВОДИТ ИЗ СЕБЯ!»
Иконка красивая и цвет почти совпал с цветом интерфейса Апстора — клёво
Забавно. Пригласил людей из твиттера подписаться на канал:
Запостилось «AAAAA!», и это реально рабочая ссылка.
Смотрите, какой любопытный баг в Ютюбе:
Обычно программисты вообще забывают склонять существительные при числительных и пишут «просмотров: 1 тыс., дней назад: 5». Тут чуваки заморочились и просклоняли.
Но он пишет «1 тыс. просмотра» вместо «просмотров».
Такое ощущение, что там сначала срабатывает код, который подбирает падеж для настоящего числа просмотров (а их, скажем, 1022), а уже потом код, который сокращает эти 1022 до «1 тыс.»
Разработчики, будьте внимательнее. Вызывайте код в нужном порядке.
Konstantin Dubrovsky:
Илья, расскажи голосом или суперпостом как ты отслеживаешь новую музыку и дискаверишь её.
Эплы не считают свой логотип суперсвятым, с ним можно и поиграть. Вот как они строили Эпл-стор в Амстердаме:
https://ilyabirman.net/meanwhile/all/apple-store-in-amsterdam/
А вот картинка из Вены, где тоже новый Эпл-стор:
Александр Путилин:
Зацените британскую инструкцию к аспирину. Написано нормальным человеческим языком, а не сухим канцеляритом:
Прекрасно. Я прочитал половину текста с интересом.
Это нужно показывать, когда клиент из какой-нибудь там терминологически заумной области типа страхования боится писать нормальным языком, потому что это «несолидно».
Если вырезать из чего-то букву со скруглёнными краями, то у того, что останется, появятся засечки (при этом тут буквы I и N)
Иконочки:
Клёвая идея — сделать кнопки или активные зоны в программе непрямоугольной формы
Мне написала письмо Виктория:
«Илья, добрый день.
Подскажите, как лучше называть и хранить файлы при работе над проектом? Чтобы в конце не было „project-name-final-final-123.ai“? Есть ли у вас какая-то конвенция при работе с файлами?
Как у вас устроен процесс архивации и хранения сделанных вами проектов (дата начала/выпуска, кто принимал участие в проекте и т. п.)? Эксель/Намберс табличка? Какой-то сервис? В какой системе лучше хранить свои проекты дизайнеру?»
Отвечаю.
Чтобы не было -final-final я просто никогда не пишу -final. Даже не представляю, как приходит в голову такое написать, какая-то декларация, не имеющая отношения к делу. Всё равно, что написать -iwillgetmoneyforthis. Может, это и правда, но зачем это в названии файла? Достаточно после каждого смыслового изменения сохранять версию под новым номером. Иногда полезно отражать в имени файла, что изменилось: *-417-hovrino-opens.ai.
Что касается всего остального, то никакой системы у меня нет :-) И я нисколько из-за этого не страдаю.
Дайджест подготовил higimo
Хотел вам про разметку аэродромов рассказать. Вообще у меня на рабочем столе лежит папочка Airfield markings, я давно хотел написать
Почему Фотошоп важен для дизайнера интерфейса
В Скетче можно одним кликом скруглить края по-нормальному, а не радиусом. И очень легко сделать матовую поверхность, так как кроме прозрачности там настраивается размытие фона:
Иллюстрация Константина Дубровского
Любить и пользоваться Скетчем — это прекрасно. Прогресс должен идти, рутина должна ускоряться. Но дизайнер, который всерьёз говорит, что Фотошоп теперь не нужен, второсортен.
Эти фичи есть в Скетче, потому что дизайнеры с Фотошопом их придумали.
Замкнутость интерфейса: проверочные вопросы
Я вчера написал про замкнутость. Продолжаю в режиме черновиков.
Вот вопросы, которые дизайнер должен задать себе, глядя на каждый макет интерфейса:
- Для каждой нарисованной кнопки: что произойдёт, если нажать? Не обязательно должна быть прям картинка следующего состояния, но понадобится внятный ответ.
- Для каждой кнопки «Закрыть», «Скрыть» и подобных: как снова открыть, показать?
- Для каждой переменной величины: что, если значение будет отрицательным, нулём, единицей, в сто раз больше, в сто раз меньше, длиннее, короче? Что, если значение изменится в реальном времени?
- Для каждого переменного числа элементов (список, матрица иконок и т. д.): что, если элементов будет ноль, один; в сто раз больше, чем нарисовано. Что, если число элементов изменится в реальном времени?
Это довольно занудная фигня, непонятно, как её системно применять, но я ж говорю, это черновик. Дополняйте в комментариях, что ли.
Бесплатный Жуэль обновился до третьей версии
Недавно появился новый крутой платный Жуэль-про 3.0 с кастомными элементами управления. С тех пор он уже 3.0.4 — поправили несколько помарок.
Для третьей версии код пришлось взорвать и переписать заново, а бесплатная оставалась в версии 2.3.4 со старым кодом.
Теперь Женя синхронизировал бесплатную и платную ветки. Бесплатная версия стала тоже 3.0.4, и теперь отличается от платной только поддержкой элементов управления. Все АПИ стали одинаковыми и работать стало лучше. Обновляйтесь!
Опубликовали видос моего летнего доклада на Питер-ЦСС про декларативные АПИ (на английском)
Пример незамкнутости интерфейса
Меня много лет волнует проблема, которая у меня в голове живёт под названием «замкнутость» интерфейса. Я всё время хочу написать про это что-то большое и сделать такую тему на курсе. Но это так же сложно, как спроектировать замкнутый интерфейс. Поэтому я попробую сделать первый подход, считайте это черновиком.
Замкнутость — это что-то вроде математически полной продуманности интерфейса, когда все случаи рассмотрены и противоречия разрулены. Может, не очень удачное слово, но пока такое. Я имею в виду, все пути в интерфейсе ведут в какие-то имеющиеся состояния внутри интерфейса.
Разумеется, когда интерфейс уже реализован, он неизбежно замкнутый — так уж работает компьютер, что всё к чему-то да приведёт. Но меня волнует именно процесс проектирования. У начинающих дизайнеров постоянно такая фигня, когда не продумываются даже самые очевидные случаи.
Давайте вот разберём пример.
Скажем, надо сделать поле с автодополнением. Дизайнер рисует поле и показывает, как работает автодополнение:
А потом где-нибудь в описании пишет:
В поле работает автодополнение. Оно помогает ввести значение, которое ранее уже вводили. Если подходящих значений несколько, подставляет в самом поле самое часто используемое, а снизу рисует выпадайку, в которой можно выбрать из них. Достаточно, чтобы совпало хотя бы одно слово, например если уже вводили «ремонт часов», предлагает этот вариант по «ча».
Вообще, дизайнер, который напишет даже такое описание — это уже большая находка, таких надо беречь. Но вот интересно, многие ли из вас сразу заметили прокол?
На самом деле их несколько, но разберём главный. Что конкретно будет в поле, когда я введу «ча»? Если автодополнение просто дописывает кусок в конце, то «ремонт часов» в поле никак не может появиться.
Дизайнер уходит думать и возвращается с уточнением в описании:
При этом если предлагаемый вариант не начинается с того, что уже ввёл пользователь, этот вариант показывается только в выпадайке, но не в самом поле.
А сейчас видите дыру?
Судя по первому описанию, выпадайка должна появляться, если подходит несколько вариантов. А раз в поле сразу что-то дописано, то какой-то из вариантов, выпавших в выпадайке, должен быть как бы сразу выбран:
Судя по добавленной к описанию мысли, выпадайка может появиться, даже если подходящий вариант — один, «ремонт часов». Получается, в выпадайке может быть ничего не выбрано:
То есть выпадайки должны как-то по-разному себя вести, что ли, в зависимости от того, в первом ли слове нашлось совпадение? Или в первой выпадайке тоже можно как-то развыбрать?
Вот, например, в первом случае я могу нажать бекспейс, и тогда у меня останется просто «а».
А могу нажать на стрелку вниз, и получится такое:
Так ведь? А что тогда во втором случае, если нажать на стрелку вниз, будет?
Так что ли?
Но это же странно. Он мне как бы с двух сторон дописал, но при этом с одной стороны предвыделил, а с другой нет. И сейчас если нажать бекспейс, уже не останется исходный текст. А могу ли я нажать стрелку вверх, и что при этом произойдёт, вернётся ли «ча» или останется «ремонт ча»? А если я стрелку влево нажму, выпадайка останется или пропадаёт?
Тут дизайнер перестаёт писать описание и начинает латать дыры на лету. Говорит, «давай в этом случае сделаем, чтобы бекспейс стирал всё дописанное и возвращал исходное „ча“, и стрелка вверх тоже».
Но такой патч ничего не замыкает, а только сильнее размыкает. Теперь у нас появляется какое-то особое состояние интерфейса, когда бекспейс работает не как обычно. И надолго ли это состояние сохраняется? Например, если я введу „с“, будет ведь вот так:
И это согласно исходному описанию, безо всяких поправок — ведь сейчас уже начало введённой строки совпадает с началом единственного подходящего варианта, и выпадайка не нужна. Но посмотрите ещё раз на предыдущую картинку. Какого хрена там делала выпадайка в точно такой же на вид ситуации? И почему выпадайка пропала при вводе буквы „с“? Уже совсем трудно предсказать, что сделает бекспейс. Помнит ли он ещё, что слово «ремонт» тут «ненастоящее»?
Это не то, чтобы неразрешимые проблемы. Тут нет никакой проблемы всё аккуратно распутать. Но просто маловероятно, что дизайнер хотя бы увидел сам этот ворох вопросов, если ему показалось, что добавленная им к исходному описанию мысль всё объясняет.
Действительно хороший дизайнер пошёл бы уже после первого вопроса изучать, как работают такие автодополнения с выпадайками в других местах, и увидел бы, что там куча вариантов. Даже в разных браузерах поля адреса умеют очень разное вспоминать и находить, и ведут себя очень по-разному.
Я на этом возьму паузу, а вам всем домашка: замкнуть этот интерфейс.
И ещё почитайте про автодополнение через выделение.
А вот вам специальное фото. В Лондонском метро повесили объявление на обычном листке А4 безо всяких шрифтов Нью Джонстон и подписей мэрии
Ещё штуки в Зерулсе 2.0
Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.
Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.
Во-вторых, у сайта нет ни логотипа, ни даже заголовка. Кто бы мог подумать, что так можно? Роль логотипа-заголовка играет поле поиска сверху, в котором написано «Поиск по правилам русского языка». Этот текст работает и как подпись к полю, и как название сайта. Подобные подписи в полях обычно пишут бледно-серым, но мы тут сделали исключение именно из-за второй функции этого текста. Сравните со старым сайтом — там я ещё не догадался, что заголовка можно не делать.
В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.
В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.
В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.
Наверняка что-то забыл.
См. также страничку о проекте.
Отзыв о рекламе канала Никиты Лялина
Мне написал Никита Лялин, который недавно рекламировал здесь свой канал:
Привет, Илья!
Делюсь результатами рекламы своего канала у тебя в блоге на прошлой неделе.
В первый день я получил 130 подписчиков на канал в телеграме и ещё 40 за пять дней. Люди продолжают подписываться, правда уже понемногу — 1-3 человека в день. В итоге, подписчик мне вышел в 47 рублей и сумма постепенно уменьшается. Для моей тематики и канала — это средняя сумма, но благодаря большому охвату я получил сразу много новых подписчиков.
Хочу ещё отметить качество аудитории, сравниваю по отпискам с другой рекламы. Обычно в течение недели отписывается 10% аудитории, пришедшей по рекламе, а из твоего блога отписалось не больше 3% — это приятный бонус.
Теперь планирую заказать у тебя рекламу в телеграм-канале. Скажем, в марте.
Добро пожаловать!
Напоминаю, что кроме обычной рекламы в блоге и в телеграме можно ещё стать спонсором рубрики «Что почитать на выходных», «Аудио по четвергам» или «Видео по вторникам».
Обратите внимание, что прислав отзыв, Никита бесплатно получил дополнительное упоминание. Если вы размещали у меня рекламу и ещё не присылали отзыв, присылайте, я буду рад его опубликовать. Я опубликую его независимо от того, как вы оцениваете результат — мне важно показать будущим рекламодателям полную картину для принятия решения.
«Злые марсиане» попросили вне графика пропиарить мастер-класс про разработку под Айдивайсы, он будет в эти выходные
Ранее
Ctrl + ↓