Позднее Ctrl + ↑

Книга «Пользовательский интерфейс»: первый раздел

На этой неделе мы открыли первый раздел книги «Пользовательский интерфейс». Раздел называется «Принципы».

Книга «Пользовательский интерфейс»: первый раздел

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

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

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

У тех, кто оформил предзаказ, время подписки пока не тикает, а первый раздел уже есть.

Поддельный интерфейс не катит

Это в первую очередь для студентов Школы стажёров, но вообще для всех.

Начинающие дизайнеры интерфейса порой рисуют подделки:

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

Или мишень в центре. Откуда она такая? Зачем?

Ещё и от самого телефона тень куда-то вбок падает.

Другой вариант:

Весь статусбар поддельный: не тот размер, не такие кружки, не тот шрифт, не та батарейка. Между статусбаром и тулбаром линейка, которой на настоящем Айфоне нет. В поле поиска тоже всё не настоящее, особенно стирающий крестик справа.

Тут сам телефон поддельный:

Откуда с правой стороны три фигулины торчат? Неужели трудно найти фотографию Айфона и вспомнить, с какой стороны у него что? Что творится с бликами по всему периметру?

Андроид:

В Андроиде я меньше понимаю, но шрифт точно поддельный, да ещё и порендерен чуть ли не на Виндоусе с «Клиртайпом». И поиск на Андроидах выглядит не так.

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

Ещё студентам:

Описания обновлений Альфа-банка для Айфона

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

Особое место среди шутников занимает Альфа-банк.

Описания обновления Альфа-банка для Айфона

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

Альфа-банк, не позорься, это же дичь запредельная.

Эгея 2.6 бета

Готова новая Эгея 2.6 бета (сборка v3074). Не обновляйтесь на живых сайтах, если только вы не суперпродвинутый технарь, обложившийся бекапами со всех сторон. Не забывайте, что бета — это очень страшно.

В конце заметки — ссылка на дистрибутив. А пока расскажу вам, что нового.

Локальное автосохранение заметок

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

Как вы помните, я долго думал, как сделать автосохранение в редакторе. Речь идёт о локальном автосохранении: чтобы правки в заметке не потерялись, если при сохранении на сервер вдруг пропал интернет или упал браузер. Теперь такая фича есть.

Если вы редактируете заметку, и ещё не сохранили правки на сервер, вы видите слева ⌘ S и красный кружок:

Эгея 2.6 бета

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

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

У любой несохранённой на сервер заметки возле карандашика будет гореть такая же красная точка:

Эгея 2.6 бета

Кроме того, если в браузере есть несохранённые на сервер заметки, то красная точка загорится и возле иконки черновиков:

Эгея 2.6 бета

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

Эгея 2.6 бета

Если есть несохранённые правки в черновиках, то красные точки появятся около них.

Если вы нажали на плюс, начали писать заметку, и вообще ни разу не сохранили её на сервер, красная точка будет висеть около плюса:

Эгея 2.6 бета

По клику откроется форма новой заметки с тем, что вы успели написать и красной точкой около ⌘ S слева — как если бы вы её не закрывали.

Локальное автосохранение работает только для заметок и черновиков. Его нет у тегов и комментариев.

Эта функция требует тестирования. Если вы будете ставить бету, уделите ей внимание, пожалуйста, и расскажите обо всех проблемах.

Автосохранение запрограммировал Игорь Адаменко — он же ранее помогал мне с новой версией моего сайта. Игорь крутой.

Новый поиск

Я уже упоминал новый поиск в этом блоге. Конечно же, это новый поиск Эгеи.

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

Эгея 2.6 бета

Избранные заметки имеют больше веса при поиске.

Поиск работает на «Розе» — встраиваемом поисковом движке Романа Парпалака, о котором мы с ним ещё напишем отдельно.

Если у вас много заметок, Эгее понадобится несколько минут после обновления, чтобы сначала всё проиндексировать. Результаты поиска в это время будут показываться по старой технологии. Вам ничего не нужно делать, Эгея управляет индексацией сама.

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

Картинки и обложки в редакторе

Эгея с прошлой версии отдаёт картинки в качестве «обложек» при отправке ссылок в соцсети. Но теперь она умеет отдавать так и стоп-кадры видеороликов с Ютюба и Вимео. Ну и заодно у заметок с видеороликами появился шаринг в Пинтерес.

Кстати, эти стоп-кадры попадают и в выдачу поиска наравне с другими картинками, что тоже упрощает нахождение глазами нужной заметки.

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

Раньше Эгея считала, что картинка используется в заметке, только если её упоминание было в тексте заметки. А если удалить упоминание из текста, то картинка «терялась» и из превьюшек снизу. Теперь это независимые вещи: заметка помнит загруженные в неё картинки, даже если они не используются в тексте.

Это даёт несколько приятностей:

  1. Обложкой для соцсети может быть картинка, которая не используется в самой заметке. Просто загрузите картинку в заметку, но не вставляйте её название в текст. Для этого перетащите её на страницу заметки, но за пределы текстового поля (раньше можно было перетащить только в текстовое поле).
  2. Если вы перетаскивали картинку, но файл с таким именем уже был на сервере, Эгея переименовывала его, добавляя в конец число. В прошлой версии добавилось перетаскивание с зажатым Альтом — в этом случае старая картинка заменялась новой. Теперь работает чуть умнее: если на сервере файл есть, но это тот же самый файл, то она просто добавляет его в ту заметку, куда вы его перетаскиваете, не делая бессмысленную копию на сервере.
  3. Когда вы удаляете картинку из превьюшек в редакторе, раньше Эгея просто удаляла файл на сервере. Теперь так делать нельзя, ведь «официально» поддерживается использование одного файла в нескольких заметках. Эгея смотрит, не используется ли файл где-то ещё, и удаляет его только, если он больше нигде не нужен.
  4. Наконец, Эгея не «потеряет» картинку просто из-за того, что вы убрали её имя текста заметки.

Ещё теперь можно загружать картинки в СВГ.

Всё, что я написал про картинки, верно и для аудиофайлов. Но аудиофайл или СВГ не могут быть обложками для соцсетей.

С прошлой версии Эгея «растягивает» текстовые поля по высоте так, чтобы в них влезал весь текст. Это позволило избавиться от двойной прокрутки (когда текстовое поле прокручивается внутри прокручиваемой страницы). Но из-за этого стало не видно лейбл поля, рядом с которым как раз показан статус сохраненности. Поэтому теперь это всё залипает при прокрутке:

Эгея 2.6 бета

И на мобиле:

Эгея 2.6 бета

Кнопка удаления переехала из подвала формы редактирования заметки в правый верхний угол (видно на первом скриншоте выше).

Теперь стандартное форматирование Эгеи поддерживается внутри тегов div, table и blockquote. Если вы хотите поставить текст на плашку или разбить на колонки, можете это сделать, а внутри продолжать использовать привычный синтаксис.

Автомиграция при подключении к старой базе

Когда вы обновляли Эгею, она меняла структуру базы данных для совместимости с новой версией — так было всегда.

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

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

Остальное

Исправлена куча багов. Но этим никого не удивишь.

При редактировании описания тега теперь тоже можно загружать файлы. Короче, описание тега теперь может выглядеть как полноценная заметка, у него тоже работают всякие обложки. Редактор тега открывается по Alt+E на странице тега, как у заметки. А сохранение изменений в описании тега заработало в сто раз быстрее.

Для залогиненного автора быстрее открываются заметки с кучей комментариев.

Изменилась логика включения комментариев. Раньше был глобальный флаг «разрешить комментарии», но можно было выключить индивидуально у отдельных заметок. Теперь глобального флага нет, комментарии настраиваются у заметок по отдельности. А глобально настраивается, врубать ли комментарии заметкам во время публикации по умолчанию или нет.

Основной кегль текста в комплектной теме увеличен с 15 до 16 пунктов. Знаки валют прикрепляются к суммам неразрывным пробелом. Форма логина заадаптивилась (в 2.5 недоглядели).

На странице удаления заметки появилась кнопка «Вернуть в черновики». На страницах архива, где показывают заметки списком ссылок, избранные заметки помечаются звёздочками. Добавилась поддержка шаринга в Линкед-ин (потому что обновился Лайкли).

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

Технические детали

Движок лучше распознаёт, что работает по ХТТПС, и отдаёт по этому же протоколу всякие скрипты и картинки.

Добавилась поддержка Апача 2.4, у которого с какого-то бодуна изменился на полностью нечитаемый синтаксис некоторых опций конфигурации. Движок должен работать под ПХП 7.0 и 7.1 — я теперь тестирую локально под семёркой. А на моём сайте, наоборот, крутится ПХП 5.3 — это теперь низшая из поддерживаемых версий.

Все скрипты теперь минифицируются.

Файл, в котором хранятся параметры настройки теперь называется не settings.psa, а settings.json. Если вдруг захочется вручную что-то отредактировать, теперь это удобнее.

Как попробовать и что тестировать

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

  1. Отредактировать и сохранить любую заметку (на всякий случай, это гарантирует, что сделается актуальный бекап базы).
  2. Забекапить всю папку на сервере, включая бекапы базы данных, которые лежат в /user/backups/.
  3. Заменить файл .htaccess в корне, папку /system/ и все подпапки в /themes/ (то есть убрать старые, положить новые, а не дозалить в старые новые файлы).

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

Что тестировать:

  • миграцию (если у вас есть старая база, попробуйте не обновляться, а поставить новый движок начисто, указав ему на неё);
  • автосохранение в разных комбинациях с несколькими устройствами (особенно интересно, если на каком-нибудь из них ещё часы неправильно идут);
  • загрузку и удаление файлов (загрузить одинаковые файлы в разные заметках; убедиться, что лишних копий не создаётся; удалить файл из какой-нибудь из заметок; убедиться, что он не удаляется с сервера, пока остались заметки, где он используется);
  • поиск;
  • работу под ПХП 7.

Ссылка: e2_distr_v3074.zip Релиз.

Пишите, чё как.

О программе «Скрап»

Мне написал Андрей Ильинский и попросил опубликовать рассказ Андрея Кириллова о «Скрапе». Звучит запутанно, понимаю.

Реклама. Текст предоставлен клиентом

Меня зовут Андрей Кириллов. Хочу рассказать о сервисе Скрап, который помогает собирать коллекцию дизайнерских решений.

О программе «Скрап»

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

Мы учимся быстрее, если осмысливаем опыт: почему я хочу сохранить эту картинку, что в ней особенного, как это можно применить. Чтобы удобно собирать осмысленные коллекции, я придумал Скрап.

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

Недавно мы обновили Скрап и добавили новых функций.

Загрузка файлов. Теперь можно не только сохранять скриншоты, но и перетаскивать на иконку Скрапа джипеги и пнг.

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

Быстрый поиск. Если коллекция большая, поиск поможет отфильтровать картинки по тегам или найти конкретный скриншот по описанию.

Ссылки на оригиналы. В описании каждого скриншота указана ссылка на страницу, где его сняли. Пока страница жива, на нее можно вернуться и рассмотреть все подробнее.

Попробуйте Скрап!

Если у вас есть вопросы или предложения — пишите на inbox@scrapp.me.

Первая версия Скрапа была разработана как дипломный проект в Школе стажеров, с  Артёмом Горбуновым в роли арт-директора. Костя Якушев участвовал в разработке с самого начала, потом к нам присоединился дизайнер Андрей Ильинский и фронтендер Руст Кулматов. Рустам Галиуллин и Дима Власов помогли с приложением на маке, а Саша Волкова — с текстами. Миша Озорнин — наш первый пользователь и тестировщик.

Как исправить баланс белого в Фотошопе

Я обрабатываю фотографии в Лайтруме и слабо ориентируюсь в этой части Фотошопа. В Лайтруме чинить баланс белого просто: тыкаешь в серую, на твой вкус, область картинки, и он правит цвета всей фотки. Меня всегда удивляло отсутствие аджастмента White Balance в Фотошопе.

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

Как исправить баланс белого в Фотошопе

Кладём над слоем кривые:

Берём там вот эту пипетку:

Тыкаем ею точку, которая должна быть серой, например, на чёрно-белой фотографии мужика, висящей на стене слева, и Фотошоп сам гнёт кривые так, чтобы всё стало нормально:

Как исправить баланс белого в Фотошопе

Было-стало:

Как исправить баланс белого в Фотошопе

Поскольку аджастмент — это слой, можно менять его опасность, чтобы ослабить эффект, а можно, наоборот, сделать копию, чтобы усилить.

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

Что почитать на выходных — 147

Вот:

  1. Redesigning The Paris Metro Map. Костя Коновалов рассказывает в «Смэшинг-магазине». Любимые штуки: 30-градусная сетка без вертикалей, гармония линий, пересадка на «Пастере» и видос в конце.
  2. Could a subtle tweak to Metro’s map fix overcrowding on the Blue Line? Ещё пример, как изменение схемы метро способно разгрузить линию.
  3. Вывеска для Рубинштейна. Оказывается, тоже Сергей Рассказов делал, как и ту крутую вывеску на манеже.
  4. The Web After Tomorrow.
  5. What does cryptoanarchy mean.

Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru

Логика в двух скриншотах

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

2/3 людей не знают закон исключения третьего и считают, что Анна может быть одновременно и замужем, и не замужем!

Два:

Автор даже добавил слово «логически» в вопрос (достаточно было просто спросить, какое утверждение является верным), но 3/4 опрошенных и это не помогло.

См. также:

Навигация в аэропорту Дюссельдорфа

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

Я прилетел в сектор A, а мне надо было в C. Удачно прошёл через всё. Схема сектора A:

Иконка гейта в клёвом кружочке:

Для навигации на транспорте достаточно двух цветов: один для всего, что связано с самой транспортировкой, а другой — для инфраструктуры. Аэропортная классика — жёлтый и чёрный. Здесь всё про вылеты синее, а остальное — красное:

Реклама в навигации. Последний дьютифри перед вылетом — такое важно продублировать на русском:

Иду в сторону сектора C через B:

Лаконичная схема аэропорта на знаке. Расстояния между секторами указаны минутах:

Фотка получилась по-киношному синяя:

Можно не писать слово «гейт», когда есть диапазон:

Куча знаков в секторе B:

Схема сектора B:

Цвет линейки, отделяющей стрелку от остального, в отличие от цвета текста, дружит с фоном:

Человек на распутье:

Туалет на знаке в центре скромно встал в угол:

Пиктограмма паспортного контролёра:

Немецкий пограничник упрекнул меня в отсутствии подписи в паспорте, а сам забыл поставить печать о пересечении границы. Никакого орднунга!

Другие гражданства — почему-то на белом фоне:

Вот я и в секторе C:

На схему налеплена реклама временного магазина «Молескина»:

Путь к гейту лежит через очередной дьютифри (да, тот был не последним):

Мусульманская молельная комната с полумесяцем:

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

На компактный красный знак не влез текст, но всё понятно и без него:

Ещё фотозаметки из Германии:

Ранее Ctrl + ↓