Благовидной затеей сделать шапку сайта залипающей, чтобы посетитель в любой момент имел быстрый доступ к меню, устлана дорога в ад. Все эти залипающие при скроле тяжелые шапки вызывают у меня приступы клаустрофобии. Кажется, я даже физически пригибаюсь слегка при посещении таких сайтов. Вот это, например, сайт журнала Time:
Если тестирования или интуиция подсказывают, что посетитель настолько нуждается в мгновенном доступе к меню, что согласен отдать вам немного драгоценной высоты вьюпорта, то закреплять стоит не полноценную версию шапки, а ее мизерную версию. Гугл, например, при залипании уменьшает шапку на 56%. По мне 5% от высоты вьюпорта — максимум, который можно отвести под залипающую шапку сайта.
Ах да, как же здесь не похвастаться: на сайте студии наконец опубликовали анонсы разных навигационных штук для ВДНХ, которые последний год мы с ребятами делали (я в качестве старшего дизайнера): переносимая на огромное количество форматов схема территории, директивные указатели и информационные стелы.
artlebedev.ru/vdnh/
(немного стыдно такое писать в 2018 году, но советую анонсы рассматривать на десктопе).
artlebedev.ru/vdnh/
(немного стыдно такое писать в 2018 году, но советую анонсы рассматривать на десктопе).
Но для меня важнее не внешний вид носителей и все эти фоточки, а используемые в работе принципы, о которых и рассказывается в анонсах:
1) построение схемы на основе ментальных моделей посетителей
2) система указателей, которые не просто в каждом конкретном месте указывают, что где находится, а работают вместе для управления потоками. Это как разница между толпой варваров, где у каждого есть простая задача «убить максимум врагов», и войсками, где действия каждого солдата подчинены стратегии полководца.
1) построение схемы на основе ментальных моделей посетителей
2) система указателей, которые не просто в каждом конкретном месте указывают, что где находится, а работают вместе для управления потоками. Это как разница между толпой варваров, где у каждого есть простая задача «убить максимум врагов», и войсками, где действия каждого солдата подчинены стратегии полководца.
При оформлении нового электротранспорта дизайнеры очень любят изображать на промо-ливрее штепсель («Ну а как еще показать, что это электрический транспорт», — думает дизайнер).
Но эта параллель с обычной домашней электротехникой, метафора из «ассоциаций первого уровня» неуместна, потому что штепсель отвергает саму идею мобильности, так как подразумевает привязанность к розетке. Штепсель — это «Так, епт, а где у вас тут розетка? А поближе нет? Ох, ладно, попробую дотянуться *ползает под столом на коленках с проводом в руках к сетевому фильтру*». Штепсель и сопровождающий его шнур — это поводок, короткий или длинный. Поэтому в области повседневной техники такой устойчивый запрос на «обесшнуривание», беспроводные технологии, мобильность.
И электромобили с электробусами, которым не надо притворяться, так как они уже олицетворяют эту мобильность и беспроводные технологии (вспоминаются все эти тяготы и жертвы электробусные, лишь бы отказаться от питания по проводам), всё равно на боку несут рисунок штепселя. Хотя куда более в тему была бы параллель со смартфоном, который работает автономно и мобильно, и нуждается лишь в периодическом подключении к сети для подзарядки аккумулятора. Никто не рекламирует смартфоны демонстрацией его во время зарядки, прикованным к розетке, потому что это отвергает идею мобильности, но электротранспорт так презентовать почему-то считается ок.
Но эта параллель с обычной домашней электротехникой, метафора из «ассоциаций первого уровня» неуместна, потому что штепсель отвергает саму идею мобильности, так как подразумевает привязанность к розетке. Штепсель — это «Так, епт, а где у вас тут розетка? А поближе нет? Ох, ладно, попробую дотянуться *ползает под столом на коленках с проводом в руках к сетевому фильтру*». Штепсель и сопровождающий его шнур — это поводок, короткий или длинный. Поэтому в области повседневной техники такой устойчивый запрос на «обесшнуривание», беспроводные технологии, мобильность.
И электромобили с электробусами, которым не надо притворяться, так как они уже олицетворяют эту мобильность и беспроводные технологии (вспоминаются все эти тяготы и жертвы электробусные, лишь бы отказаться от питания по проводам), всё равно на боку несут рисунок штепселя. Хотя куда более в тему была бы параллель со смартфоном, который работает автономно и мобильно, и нуждается лишь в периодическом подключении к сети для подзарядки аккумулятора. Никто не рекламирует смартфоны демонстрацией его во время зарядки, прикованным к розетке, потому что это отвергает идею мобильности, но электротранспорт так презентовать почему-то считается ок.
При открытии пдфки в Иллюстраторе появляется диалоговое окно выбора страницы. Чтобы не приходилось вспоминать, что там на какой странице в пдф, в верхней части окна можно полистать превьюшки страниц.
Однако выбранная для отображения превьюшка никак не влияет на то, какая страница будет открыта, так как за это отвечает находящееся ниже независимое поле ввода номера страницы. То есть, казалось бы, стандартная процедура «Полистал превьюшки, пока не встретил нужную, и нажал ОК» приводит к ошибке — открывается страница не из превьюшки, а из поля ввода номера страницы. Сигнал «вижу подходящее изображение» влияет на мозг настолько сильнее сигнала «вижу подходящий номер страницы в инпуте», что мне редко удается открыть нужную страницу с первого раза, иногда получается только с четвертой попытки.
Однако выбранная для отображения превьюшка никак не влияет на то, какая страница будет открыта, так как за это отвечает находящееся ниже независимое поле ввода номера страницы. То есть, казалось бы, стандартная процедура «Полистал превьюшки, пока не встретил нужную, и нажал ОК» приводит к ошибке — открывается страница не из превьюшки, а из поля ввода номера страницы. Сигнал «вижу подходящее изображение» влияет на мозг настолько сильнее сигнала «вижу подходящий номер страницы в инпуте», что мне редко удается открыть нужную страницу с первого раза, иногда получается только с четвертой попытки.
Пусть этот инпут не возглавит великую подборку самых дурацких способов ввода телефонного номера (https://imgur.com/gallery/r102w), но он всё равно неплох, да и к тому же выдуманный с благими намерениями, а не для лулзов.
Вместо того, чтобы просто дать ввести заученную до автоматизма комбинацию цифр, инпут предлагает порефлексировать, из чего состоит номер телефона, какая его часть отвечает за страну, а какая является кодом. Для меня понятие кода телефонного номера осталось где-то в детстве, когда мама звонила в Минск бабушке и искала телефонный код Беларуси и ее столицы. Сейчас же в моем понятийном мире есть просто начинающиеся с плюса телефонные номера разной длины. И все цифры являются номером.
Ну и, конечно, длина полей не соответствует объему вводимых данных, поэтому сначала я пытался в первое поле ввести «Россия».
Вместо того, чтобы просто дать ввести заученную до автоматизма комбинацию цифр, инпут предлагает порефлексировать, из чего состоит номер телефона, какая его часть отвечает за страну, а какая является кодом. Для меня понятие кода телефонного номера осталось где-то в детстве, когда мама звонила в Минск бабушке и искала телефонный код Беларуси и ее столицы. Сейчас же в моем понятийном мире есть просто начинающиеся с плюса телефонные номера разной длины. И все цифры являются номером.
Ну и, конечно, длина полей не соответствует объему вводимых данных, поэтому сначала я пытался в первое поле ввести «Россия».
Мода и тренды
В конце 2013 года, спустя полгода после эпохальной презентации эплом iOS 7, на Хабрахабре и его спутниках начался редизайн, включавший внедрение стилистики, которая сформировалась из попыток дизайнеров адаптироваться к новой реальности пост-скевоморфизма.
В конце 2013 года, спустя полгода после эпохальной презентации эплом iOS 7, на Хабрахабре и его спутниках начался редизайн, включавший внедрение стилистики, которая сформировалась из попыток дизайнеров адаптироваться к новой реальности пост-скевоморфизма.
Длинные тени, примитивные иконки, мягкая палитра с грязноватыми цветами, внедрение кастомных шрифтов (даже если с ними стало хуже) — это всё тогда было настолько модно, что в комментариях под анонсом я написал предостережение «too hot»: