Как стать автором
Обновить

Комментарии 39

И ба-бах, Opera 5 в 2000 году, в которой происходят сразу 3 мегаинновации.

Также здесь появились табы. Они внизу. Ребята из Opera просто посмотрели, что в Windows есть панель внизу, в которой показаны открытые окна в текущий момент — таск бар. Они взяли все окна относящиеся к Opera, показали внутри своего окна, просто сгруппировали их таким образом.
Табы впервые появились в браузере NetCaptor, за годы до Opera.

И Chrome в 2008 году совершил последнюю на сегодняшний день мощную революцию.
Chrome все сметает железной метлой, ..., объединяет адресную и поисковую строку в одну, и помещает ее по центру.
Объединённая адресная и поисковая строка была в Mozilla Phoenix 0.1 в 2002 году. Просто Mozilla посчитала, что это не интуитивно, и к релизу Firefox сделали ещё дополнительную поисковую строку, чтобы пользователи наверняка искали именно через окошко в браузере, а не заходя на google.com. Но её всегда можно было убрать и искать через адресную строку. В Firefox и кейворды поддерживались, когда вы задаёте «g» для Google, «y» для Яндекса, и запрос «y test» уйдёт в Яндекс, а «g test» уйдёт в Google. Chrome просто вынес эту фичу на передний план и «продал» пользователям. Вообще интерфейс Chrome выглядел как собрание идей из различных расширений для Firefox. Действительно новым для меня на тот момент было размещение вкладок в заголовке, хотя возможно, на самом деле в Firefox уже тоже было расширение для этого, просто я не видел =)

UPD. Вспомнилось, что если в IE6 я вводил несуществующий адрес, то оно редиректило меня куда-то в поиск на MSN. Загрузился в виртуалку проверить. Действительно, если просто ввести в адресную строку «habr», то мы попадаем в bing с этим запросом. Затем я загрузился в Windows 98, и повторил то же самое в IE5 с тем же успехом. То есть, идея ещё более бородатая. Впрочем, выбрать другой поисковик там видимо нельзя, оно всегда редиректит на подконтрольный Microsoft домен.
Спасибо за дополнение.

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

Впервые слышу. Из чего-то похожего на предшественники js-а могу вспомнить только VBScript и, возможно, какие-нибудь Java-апплеты.
нене, тот, что LiveScript
Обалдеть, я и забыл про существование таких вещей.
Но разве он предшественник?
Там страшно запутанная история, но вроде да.
Классная статья. Молодцы — полезная информация.

Кнопку рефреш уравновесили — молодцы, странно как другие не заметили.

Хороший пример — противопоставление Блокнота (Win) и TextEdit(MacOS):
Когда ты смотришь на блокнот просто как на слайд презентации — это одна история, когда ты начинаешь работать с интерфейсом постоянно, то большое количество бликов скорее утомляет.
Тут видна разница между дизайнерами Майкрософт и Аппл. Часто люди не видят разницы. И я не умаляю Винды, и нормально отношусь, особенно к 10-й. Но мне всегда очень приятны на Маках особенное внимание к деталям и забота о пользователях. Это и есть хороший дизайн.
Ох, ещё и это...
На картинке выше видно, что дизайнеры блокнота очень старались, там блики, градиенты, неоновая голубая подсветка снизу, аккуратно подсвечено под заголовком окна, чтобы хорошо было видно. Много работы было проделано.
Да ничего дизайнеры блокнота не старались. Это обычная системная тема Aero из Windows 7. Переключаем на Windows Classic, и получаем полный минимализм без бликов и неприятных теней:
image

Да и вообще, странно сравнивать дизайн окошка винды прошлого десятилетия, и окошка макоси этого десятилетия. Как вообще можно из этого делать какие-то выводы? В прошлом десятилетии в макоси тоже чрезмерно увлекались всякими рюшечками типа «стеклянных» кнопочек. А в этом десятилетии Microsoft тоже значительно упростила свой стандартный дизайн окна.
Да и во втором варианте, ни разу не
Просто просто белый квадрат.

Тут тоже градиенты в заголовке и градиентные тени сзади «просто белого квадрата». Просто белый квадрат был в win 3.1 и ранее и маках того же времени.
Мне кажется, сравнение более чем уместно, но из интереса добавлю скриншоты по годам (для строгости сравнения):

Windows Vista (2007 год)
image

Mac OS X Leopard (2007 год)
image

Более того

Mac OS X 10.0 Cheetah (2000)
image

Windows ME (2000)
image

Windows 2000
image

Mac OS X 10.1 Puma (2001)
image

Windows XP
image
Сравнение не уместно, потому что оформление оконного менеджера — это не гайдлай. Разработчик блокнота не нужно «стараться» и «делать много работы», чтобы ему соответствовать. Если вы используете системное API для отрисовки окон и элементов управления, вы всё это оформление получаете автоматически.
Совершенно неуместно. В своём тексте вы противопоставляете дизайн продукта одной компании дизайну продукта другой компании. Но для сравнения вы выбрали дизайны окон из разных десятилетий, когда тренды были совсем разными. Если бы вы справедливо показали скриншот окошка из MacOS X образца нулевых, то вам пришлось бы написать, как дизайнеры старались нарисовать кнопки, которые прям «хочется лизнуть» (буквально слова Джобса), а ещё напомнить, что меню приложения не попало на скриншот, потому что оно находится не в самом окне приложения, которому оно принадлежит, а внезапно где-то там далеко вверху.
Вот кадр из презентации:
image
Слова автора от этого не изменились. Не хотелось много картинок такого качество запихивать в пост.

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

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

Что дальше будет? Еще упрощение?
Какие каляки нам ожидать от дизайнеров, тратящих время на обсуждение угла поворота стрелки?
Спасибо, хорошая статья. Я и раньше себя считала спокойным человеком, но после работы с дизайнерами стала гуру спокойствия и терпения))
Следующий прием. Возьмем этот прямоугольник и размножим его по плоскости листа. У нас получится сетка.

У меня здесь иллюзия, что между прямоугольниками появляются маленькие светло-серые эллипсы:)

[irony] из статьи я понял, что если дизайнера подпустить еще на старте, то вечные споры будут обеспечены [/irony]
в мире дизайна считается, что правый верхний угол — это самое позитивное направление.

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


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

Обычные пользователи не задаются такими вопросами. По большому счёту им всё равно. Подобные рассуждения применимы разве что для скевоморфного дизайна, имитирующего предметы реального мира. Но от скевоморфизма мы, к счатью, уже ушли. А в "плоских интерфейсах" нет ни гравитации, ни заваливаний. Есть только опрятность, ясность и базовые законы гармонии (симметрия, ритм и тд).


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

Не в "блоках" дело. Человеческое мышление работает ассоциациями и классификациями. Это не СУБД из которой можно выбрать все предметы по запросу "круглая штука". Переход между образами происходит по связям, сила которых определяется эмоциональной вовлечённостью. У детей эмоций от познаваемого мира куда больше, а число усвоенных круглых образов куда меньше. У взрослого, видавшего миллионы круглых штук, эти кругляки ничего кроме скуки не вызывают. Ну а всё, что делают "расширители сознания" — это заставляют мозг работать хаотично, в результате чего по ассоциациям всплывают самые разнообразные (даже квадратные) образы, которые остаётся лишь отфильтровать классификатором.

Вот я примерно подобного ждал от статьи. Про практичность и твёрдое обоснование… А прочитал про правый верхний угол.

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

Ну и давайте разберём редактор из макоси, который вы преподносите как образец хорошего дизайна:


  1. Текст "прилип" к верху окна — там буквально 1-2 пикселя расстояния. Первое, что делает пользователь, чтобы шапка окна его не отвлекала, — добавляет пустую строку сверху.
  2. Расстояние от текста до верхней границы окна и до левой сильно разное, что выглядит неопрятно, словно школьная поделка. Та же проблема и со светофором. При чём отступы везде разные без какой-либо причины.
  3. Кстати, о светофоре, цвета вот совершенно ничего не говорят о том, какое за ними скрывается действие. Особенно дальтоникам.
  4. И конечно нельзя не упомянуть гениальную находку располагать меню приложения не рядом с приложением, а где-то в верху экрана. Очень, знаете ли, удобно мотать мышью туда-сюда. Это же интерфейс для ежедневной работы, а не для красивых картинок на презентациях.

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

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


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


Привыкнуть-то можно ко всему, только зачем привыкать ко плохому?

По внешнему виду
Текст «прилип» к верху окна — там буквально 1-2 пикселя расстояния. Первое, что делает пользователь, чтобы шапка окна его не отвлекала, — добавляет пустую строку сверху.
Тут я с вами соглашусь, добавить отступы не помешает.
А в остальном, вы просто не правы.

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

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

Не в «блоках» дело. Человеческое мышление работает ассоциациями и классификациями. Это не СУБД из которой можно выбрать все предметы по запросу «круглая штука». Переход между образами происходит по связям, сила которых определяется эмоциональной вовлечённостью. У детей эмоций от познаваемого мира куда больше, а число усвоенных круглых образов куда меньше. У взрослого, видавшего миллионы круглых штук, эти кругляки ничего кроме скуки не вызываю
Если есть задача дорисовать много круглых предметов, то как раз «число усвоеных штук» у взрослых больше, по вашим же словам. И ему должно быть легче (вовлеченность уже есть — задача поставлена), но он сидит и затылок чешет. Это и есть блок на фантазии. А цель упражнения как раз растормозить свое воображение и дать волю фантазии.

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

И в целом дизайн (графическое представление) Каталины гораздо более выверен и целен, чем дизайн Виндоус. Хотя конечно косячки есть, но на Виндоус 10 их гораздо больше. Те-же кнопки закрытия/разворота окна расположены между собой на абсолютно необоснованном расстоянии.

Я могу ошибаться, но у меня такое впечатление, что все последнии годы Виндоус идет по стопам МакОс, копируют решения (дизайнерские). Но, так-как цельного подхода к дизайну нет, все время получается как-то неказисто.

По User Experience

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

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

Привыкнуть-то можно ко всему, только зачем привыкать ко плохому?
К вам эту фразу тоже можно применить. Но пользы от таких фраз ноль.

User Experience у обоих систем имеет право на существование. Тут я не буду, да и бессмысленно, утверждать что во всем МакОс лучше.

Но пару примеров, где лучше, приведу:
В окне браузера Хрома и Лисы, если окно не но полный экран, а страница длинная, то в Виндоус 10 scroll будет виден всегда, занимая место, и оскорбляя взгляд своим устаревшим внешним видом. В то время как на Каталине, он спрячется, и появится при скролле, и его внешний вид изящен и выдержан в стиле системы. Да и понятно, scroll bar мышкой тягают крайне редко, обычно мотают клавишами.

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

А вообще тут просто разница в подходе. Лично мне МакОС доставила много эстетического удовольствия. И много раз обнаруживал штучки, которые сделаны удобнее и лучше чем на Винде. Надо просто работать на Маке как Маке, а не как на Винде. Глупо ругать Мерседес, за то, что он не Тойота.

TO VEG
Приходилось руками на основном рабочем столе растягивать приложение на весь экран, но в таком режиме снизу остаётся нелепое пространсво из-за дока и теряется возможность удобного переключения между окнами. Вот уж где внимание к деталям, да.

Может просто птичку нажать «Automatically hide and show the Dock»? Можно кстати Док и переместить вправо или влево, или уменьшить размер. Чем ругать, лучше изучать. Это делается из меню Дока. Группы иконок на доке можно сделать через командную строку.
Расширить окно но не но не навесь экран можно с нажатой alt нажав на зеленую кнопку, и выбрать Left — останется одну границу передвинуть. Или двойной клик на заголовке окна разворачивает — но ширину оставляет по контенту. Зависит от приложения.

Может просто птичку нажать «Automatically hide and show the Dock»?
То есть в борьбе с одним раздражающим произвольно выезжающим нечто вы предлагаете сделать другое произвольно выезжающее нечто? Гениально!
Можно кстати Док и переместить вправо или влево, или уменьшить размер. Чем ругать, лучше изучать. Это делается из меню Дока.
Вы всерьёз думаете, что я за год не нашёл эти настройки? Да я там всё что можно облазил в поисках возможности сделать так, чтобы ОС мне не мешала работать. Размер дока я уменьшал до минимума, но толку от этого мало — щель никуда не девалась, просто становилась меньше.
В окне браузера Хрома и Лисы, если окно не но полный экран, а страница длинная, то в Виндоус 10 scroll будет виден всегда, занимая место, и оскорбляя взгляд своим устаревшим внешним видом. В то время как на Каталине, он спрячется, и появится при скролле, и его внешний вид изящен и выдержан в стиле системы. Да и понятно, scroll bar мышкой тягают крайне редко, обычно мотают клавишами.
На мобильном телефоне такой исчезающий скролл имеет смысл — там мало горизонтального пространства. На десктопе же ситуация ровно обратная — по горизонтали пространства достаточно, поэтому пользователю можно всегда показывать, где именно он находится на странице, чтобы ему без лишних действий было понятно, сколько от начала страницы, и сколько ещё до конца.

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

Внешний вид скролла по крайней мере в Firefox выдержан в стиле системы:
image
Впрочем, наверняка весь этот стиль будет оскорблять ваш взгляд своим недостаточно новым внешним видом =)
У этого меню есть ещё один большой косяк — оно прячется когда приложение развёрнуто в полный экран, и автоматически вылазит, даже если пользователю это не нужно, и он хотел нажать там что-то другое. И способа зафиксировать его, чтобы оно никогда не пряталось, я не нашёл (где-то год пользовался маком для разработки одного кроссплатформенного приложения). Ох, и намучался я с этим меню, которое вылазило невпопад когда не нужно было… Столько раздражения мне кажется ни один другой дизайнерский «изыск» у меня не вызывал. Приходилось руками на основном рабочем столе растягивать приложение на весь экран, но в таком режиме снизу остаётся нелепое пространсво из-за дока и теряется возможность удобного переключения между окнами. Вот уж где внимание к деталям, да.

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

4) Но почему-то во многих линуксовых WM есть такая настройка, позволяющая разместить меню приложения "как в Маке".
Никогда этого не понимал, но похоже, что есть достаточно много людей, которым это удобно, чтобы так заморочиться.


Интересно, это мак-деформация восприятия (прибитая гвоздями в мозгах привычка у маководов) или в этом все-таки что-то есть?

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

А если размер дисплея меньше, чем нужно для меню?

По сути, логика одинаковая и в Windows, и в MacOS, отличие лишь одно:
по давней традиции приложение Windows создаёт под себя персональный «рабочий стол» – прямоугольник со сплошным фоном, а приложение под MacOS не создаёт нового «рабочего стола», используя существующий общий (весь экран). В обоих случаях меню прибито к верху рабочего стола.

Непонятно только зачем при запуске приложения MacOS оставляет просвечивать общий рабочий стол – обычно от иконок на нём рябит в глазах, они лишь отвлекают. С другой стороны, всё это проектировалось на волне моды drag’n’drop – в то время, возможно, люди активно пользовались перетаскиванием иконок в окна приложений. Кстати, меня до сих пор обескураживает в Windows то, что нельзя просто перетащить файл на его имя в таск-баре.
1 & 2. Про отступы всё верно сказано.

3. Про дальтоников забывать не стоит, но Apple и не забывает – попробуйте прогнать эту картинку через симулятор разных видов дальтонии – увидите, что всё там нормально. Цветовое кодирование в данном случае – не основа, а приятное дополнение. Нет смысла отказываться от него.

4. Работаю на Маках 25 лет, крайне редко пользуюсь верхним меню. Программы Apple обычно хорошо продуманы, в них почти отсутствует необходимость елозить мышью по меню. Программы сторонних производителей могут быть спроектированы хуже, но это уже не проблема MacOS.
Эмоционально позитивная статья. И с рациональной точки зрения получил полезную информацию. Мои благодарности автору!
> Меня зовут Костя, я немножко дизайном занимаюсь и расскажу вам кое-что о дизайне.

Отличный дизайн вступления для пространной портянки из Топ-1% самых длинных статей хабра.
Хорошая статья. И картинка с Лебедевым правильная :)
Только один момент смутил: в описании этапов пропущено юзабилити-тестирование. Написано так, будто после обсуждений внутри компании продукт сразу выпускают в открытое плавание, и только тогда удивлённые проектировщики начинают получать отзывы недовольных пользователей.
В реальности, конечно, проводят серию предварительных тестирований на целевой аудитории. О таком тестировании упомянуто в отдельной истории (про светлый и тёмный фон), но почему-то в качестве исключения (когда не смогли договориться дизайнер и менеджер продукта).
Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.