мяу-дизайн – Telegram
мяу-дизайн
2.86K subscribers
1.16K photos
91 videos
37 files
265 links
т.е. «мяу»

публикует поучительные картинки про дизайн и пытается не упомянуть свой армейский дневник @kefiijrw
Download Telegram
А это уже про теорию близости и разделительную силу линий.
Интерфейсы и магазины

Может показаться, что допотопное противостояние «Графический интерфейс VS Интерфейс командной строки» разрешилось еще лет тридцать назад, ведь последние десятилетия доминируют операционные системы на основе GUI, а командная строка осталась только в мире админов-линуксоидов, где они через терминал набирают какие-то команды, чтобы пропатчить кде.

Однако на деле интерфейс командой строки не исчез, он постоянно встречается внутри графического интерфейса. Самый простой пример — строка поиска: пользователь вводит в ней команду (например, название искомого файла, если дело происходит в системном проводнике), может добавить к ним специальные символы (вроде всех этим синтаксических хитростей поисковой строки гугла типа «site:example.com -otherstuff»), нажимает Enter и получает результат — всё практически как в консоли. Так что вопрос, в каком случае лучше командная строка, а в каком — графический интерфейс, всё еще актуален.

Я использую аналогию магазинов. Графический интерфейс — это супермаркет, где весь товар лежит на полках, можно его изучать и выбирать, но также потратить уйму времени, пока найдешь нужную вещь, или еще больше времени — пока не обнаружишь, что этой вещи в супермаркете нет (а может просто проглядел? надо еще раз поскролить, т.е. пройтись по магазину).

Консоль — это магазин-склад, где тебя встречает продавец и спрашивает, чего тебе надо, после чего ненадолго отлучается на склад и приносит тебе искомый товар. Результат получаешь куда быстрей, но для этого надо точно знать название товара (т.е. «команды»). А ведь иногда так хочется сказать «Я не знаю точно, покажите, что у вас есть, я сам поизучаю и выберу.»!

Оптимальный для пользователя вариант в мире магазинов — сочетание этих двух подходов, когда можно беспрепятственно бродить среди раскладки товаров, но при необходимости обратиться к консультанту за помощью (версия для интровертов: узнать через сайт место размещения в магазине конкретного товара или заказать его доставку до кассы). Если перевести обратно на язык интерфейсов: оптимально визуальную выкладку в графическом интерфейсе дополнять командной строкой, позволяющей найти конкретный объект. Пример: поиск по системным настройкам в айоси — ненавязчивый консультант, который не будет лезть, пока его не позовут (подскролят список параметров вверх).

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

Ну и не надо стесняться пользоваться преимуществом интерфейса перед физическим магазином — можно попросить продавца принести тебе посмотреть все 45 товаров, в названии которых есть подстрока «U2Pro», и не получить в ответ взгляд ненависти и презрения.
Фильтр в приложении РЖД сбил меня с толку. Я хотел оставить только билеты на поезда, ну и ткнул на кнопку «Поезда».
Но получил обратный результат — оказалось, что обе кнопки опций уже были активированы, а я отжал кнопку «Поезда» и получил только электрички. Проверяйте интуитивность визуализаций состояний кнопок.
мяу-дизайн
​​Пока волна публикаций с итогами года только начинает накатывать, выкачу на опережение свой традиционный настенный календарь. Подробности можно почитать в заметке к прошлой версии (https://news.1rj.ru/str/meow_design/190), а если кто-то им пользовался и не стесняется…
Для тех, кто еще верит в бумагу или не слышал про таймстрайп, я традиционно подготовил календарь. В этом году изменил шрифт, а так всё как всегда: версия под плоттер (60×37 см) и под формат А2. Можно напечатать и на А4, конечно, но тогда черкать ручкой будет мало место, а в этом, как мне кажется, самый кайф этого календаря.
Выглядит как-то так
С 1 января Adobe Flash официально умирает (хотя в реальности уже давно как мертвенький), и я решил сохранить свои флэшерские поделки хотя бы в формате видео, пока это возможно.
This media is not supported in your browser
VIEW IN TELEGRAM
Это, например, интро для сайта из 2007 года, когда я фанател от сайта Олега Пащенко Conclave Obscurum (как прекрасно, что Олег тоже решил сохранить сайт в видеоформате) и пытался сделать всё так же загадочно и неудобно. Тут я прятал курсор пользователя и вставлял вместо него фальшивый перевернутый курсор, который зеркалил действия пользователя и двигался в противоположную сторону движению мышки, заставляя таким вот извращенным способом целиться в пункты меню, которые были сделаны тоже максимально нечитабельными.
(на символы для названия разделов я дал себе три-четыре пикселя высоты)
This media is not supported in your browser
VIEW IN TELEGRAM
Интерактивная открытка 2009 года, тоже почти напрямую копировавшая одну из работ Пащенко. Здесь мой встроенный глаз следит за курсором, тригерятся случайные события, капельки стекают, шарик на веревочке пытается в физику, ну и рой мух летает.
Media is too big
VIEW IN TELEGRAM
Ну и самая масштабная и любимая работа на флэше, за которую не стыдно и сейчас — сайт дизайнера украшений Алексея Габило с огромным трэшовым курсором среди сдержанного окружения с приятными анимациями. 2010 год.
Сейчас поискал на компьютере самые поздние свфки — даже в 2015 году я еще использовал флэш для быстрого прототипирования студийных проектов, и так и не смог найти настолько же удобного инструмента создания умных визуальных интерактивных конструкций. Прощай, флэш, с тобой было хорошо.
Гениальное описание товара.
А всё потому что не надо так разлучать начало и продолжение текста.
мяу-дизайн
В подобную ловушку «интерфейс не готов к увеличению длины надписи при ее переводе на другой язык» попадают и большие ребята. Это гугл.документы, из-за разросшейся кнопки не признающие имя пользователя длиннее 6 символов:
И снова о проблемах глобальных компаний: надо быть готовым, что в мире найдется язык (например, русский), при переводе на который их емкая формулировка в интерфейсе распухнет в несколько раз и не впихнется в отведенное для нее место. На этот раз Ютуб с его «Трансляция закончилась 3 хуйпоймичегоназад». В английский версии интерфейса там «Streamed» вместо «Трансляция закончилась» — 8 символов вместо 22. И это даже не мобильная версия интерфейса, где можно списать всё на ограниченную площадь и нищенские 4 дюйма моего древнего айфона — нет, тут весь экран ноута в распоряжении, но всё равно не уместились.
Ради интереса изучил на quto все современные модели автомобилей. И что-то визуально ни одна модель не понравилась.
По ощущениям — будто пролистал каталог мобильных телефонов накануне появления айфона: производители в ступоре пытаются визуальными приемами казаться чем-то и сверху посыпают это взаимно натыренными фичами.