Комментарии 40
И ба-бах, Opera 5 в 2000 году, в которой происходят сразу 3 мегаинновации.Табы впервые появились в браузере NetCaptor, за годы до Opera.
…
Также здесь появились табы. Они внизу. Ребята из Opera просто посмотрели, что в Windows есть панель внизу, в которой показаны открытые окна в текущий момент — таск бар. Они взяли все окна относящиеся к Opera, показали внутри своего окна, просто сгруппировали их таким образом.
И Chrome в 2008 году совершил последнюю на сегодняшний день мощную революцию.Объединённая адресная и поисковая строка была в Mozilla Phoenix 0.1 в 2002 году. Просто Mozilla посчитала, что это не интуитивно, и к релизу Firefox сделали ещё дополнительную поисковую строку, чтобы пользователи наверняка искали именно через окошко в браузере, а не заходя на google.com. Но её всегда можно было убрать и искать через адресную строку. В Firefox и кейворды поддерживались, когда вы задаёте «g» для Google, «y» для Яндекса, и запрос «y test» уйдёт в Яндекс, а «g test» уйдёт в Google. Chrome просто вынес эту фичу на передний план и «продал» пользователям. Вообще интерфейс Chrome выглядел как собрание идей из различных расширений для Firefox. Действительно новым для меня на тот момент было размещение вкладок в заголовке, хотя возможно, на самом деле в Firefox уже тоже было расширение для этого, просто я не видел =)
Chrome все сметает железной метлой, ..., объединяет адресную и поисковую строку в одну, и помещает ее по центру.
UPD. Вспомнилось, что если в IE6 я вводил несуществующий адрес, то оно редиректило меня куда-то в поиск на MSN. Загрузился в виртуалку проверить. Действительно, если просто ввести в адресную строку «habr», то мы попадаем в bing с этим запросом. Затем я загрузился в Windows 98, и повторил то же самое в IE5 с тем же успехом. То есть, идея ещё более бородатая. Впрочем, выбрать другой поисковик там видимо нельзя, оно всегда редиректит на подконтрольный Microsoft домен.
НЛО прилетело и опубликовало эту надпись здесь
Ох, ещё и это...
Да и вообще, странно сравнивать дизайн окошка винды прошлого десятилетия, и окошка макоси этого десятилетия. Как вообще можно из этого делать какие-то выводы? В прошлом десятилетии в макоси тоже чрезмерно увлекались всякими рюшечками типа «стеклянных» кнопочек. А в этом десятилетии Microsoft тоже значительно упростила свой стандартный дизайн окна.
На картинке выше видно, что дизайнеры блокнота очень старались, там блики, градиенты, неоновая голубая подсветка снизу, аккуратно подсвечено под заголовком окна, чтобы хорошо было видно. Много работы было проделано.Да ничего дизайнеры блокнота не старались. Это обычная системная тема Aero из Windows 7. Переключаем на Windows Classic, и получаем полный минимализм без бликов и неприятных теней:
Да и вообще, странно сравнивать дизайн окошка винды прошлого десятилетия, и окошка макоси этого десятилетия. Как вообще можно из этого делать какие-то выводы? В прошлом десятилетии в макоси тоже чрезмерно увлекались всякими рюшечками типа «стеклянных» кнопочек. А в этом десятилетии Microsoft тоже значительно упростила свой стандартный дизайн окна.
Да и во втором варианте, ни разу не
Тут тоже градиенты в заголовке и градиентные тени сзади «просто белого квадрата». Просто белый квадрат был в win 3.1 и ранее и маках того же времени.
Просто просто белый квадрат.
Тут тоже градиенты в заголовке и градиентные тени сзади «просто белого квадрата». Просто белый квадрат был в win 3.1 и ранее и маках того же времени.
Мне кажется, сравнение более чем уместно, но из интереса добавлю скриншоты по годам (для строгости сравнения):
Windows Vista (2007 год)
Mac OS X Leopard (2007 год)
Более того
Mac OS X 10.0 Cheetah (2000)
Windows ME (2000)
Windows 2000
Mac OS X 10.1 Puma (2001)
Windows XP
Windows Vista (2007 год)
Mac OS X Leopard (2007 год)
Более того
Mac OS X 10.0 Cheetah (2000)
Windows ME (2000)
Windows 2000
Mac OS X 10.1 Puma (2001)
Windows XP
Сравнение не уместно, потому что оформление оконного менеджера — это не гайдлай. Разработчик блокнота не нужно «стараться» и «делать много работы», чтобы ему соответствовать. Если вы используете системное API для отрисовки окон и элементов управления, вы всё это оформление получаете автоматически.
Совершенно неуместно. В своём тексте вы противопоставляете дизайн продукта одной компании дизайну продукта другой компании. Но для сравнения вы выбрали дизайны окон из разных десятилетий, когда тренды были совсем разными. Если бы вы справедливо показали скриншот окошка из MacOS X образца нулевых, то вам пришлось бы написать, как дизайнеры старались нарисовать кнопки, которые прям «хочется лизнуть» (буквально слова Джобса), а ещё напомнить, что меню приложения не попало на скриншот, потому что оно находится не в самом окне приложения, которому оно принадлежит, а внезапно где-то там далеко вверху.
Вот кадр из презентации:
Слова автора от этого не изменились. Не хотелось много картинок такого качество запихивать в пост.
В комментарии выше уже по годам раскидала, чтобы сравнение было точнее.
Спасибо за напоминание про меню приложение, и правда упустила этот момент, спикер о нем упоминал, уже исправилась.
Слова автора от этого не изменились. Не хотелось много картинок такого качество запихивать в пост.
В комментарии выше уже по годам раскидала, чтобы сравнение было точнее.
Спасибо за напоминание про меню приложение, и правда упустила этот момент, спикер о нем упоминал, уже исправилась.
Это не страшно, скорее смешно, это какие-нибудь пираты, цирк может быть, но не страх в прямом понимании. Это «смешной» страх, или театрализованное представление.Вот отличный анти-пример.
Подобный странный шрифт прекрасно ассоциируется с какой-нить оккультной сектой психопатов из фильмов ужасов, так что из всех примеров он на роль страха подходит лучше всего. Но, опять таки, естественно зависит от аудитории на которую это показывается, если человек никогда таких фильмов не смотрел, ассоциации у него не будет.
Иконки (кнопки) за пару десятилетий пережили неоднократное упрощение. Сейчас в большинстве хромов (за исключением некоторых китайцев) они напоминают наскальную живопись. Все ориентируются по хрому, а дизайнеры, как мне кажется, просто невольно бездельничают, поскольку от канона отойти — никак.
Кое что Mozilla делает, табы вон прямоугольные вернула (хотя были жалобы «верните классические табы, как у хрома, трапецеидальные» — ну не застали многие мир без хрома....)
Что дальше будет? Еще упрощение?
Какие каляки нам ожидать от дизайнеров, тратящих время на обсуждение угла поворота стрелки?
Кое что Mozilla делает, табы вон прямоугольные вернула (хотя были жалобы «верните классические табы, как у хрома, трапецеидальные» — ну не застали многие мир без хрома....)
Что дальше будет? Еще упрощение?
Какие каляки нам ожидать от дизайнеров, тратящих время на обсуждение угла поворота стрелки?
Спасибо, хорошая статья. Я и раньше себя считала спокойным человеком, но после работы с дизайнерами стала гуру спокойствия и терпения))
Следующий прием. Возьмем этот прямоугольник и размножим его по плоскости листа. У нас получится сетка.
У меня здесь иллюзия, что между прямоугольниками появляются маленькие светло-серые эллипсы:)
[irony] из статьи я понял, что если дизайнера подпустить еще на старте, то вечные споры будут обеспечены [/irony]
в мире дизайна считается, что правый верхний угол — это самое позитивное направление.
В мире дизайне слишком много "считается" и слишком мало "так и есть". Мышление человека не на столько примитивно, чтобы рассматривать правый верхний угол как хороший, а все остальные как плохие. Постой контр-пример: растущий в правый верхний угол график смертей от коронавируса вызывает скорее удручение. А очень много вещей являются нейтральными сами по себе и не вызывают вообще никаких эмоций. Лупа — именно такая вещь. А вот поворот ручки влево может вызвать скорее чувство "что-то тут не правильно" у правшей, так как нарушает типичный визуальный образ.
если представить себе эту иконку, отлитую в металле и поставленную на стол, имея такой центр тяжести, она не сможет перевернуться из этого положения, ей уже хорошо, она может даже наоборот назад заваливается.
Обычные пользователи не задаются такими вопросами. По большому счёту им всё равно. Подобные рассуждения применимы разве что для скевоморфного дизайна, имитирующего предметы реального мира. Но от скевоморфизма мы, к счатью, уже ушли. А в "плоских интерфейсах" нет ни гравитации, ни заваливаний. Есть только опрятность, ясность и базовые законы гармонии (симметрия, ритм и тд).
каждый из нас знает десятки тысяч круглых предметов, куда они все деваются в момент, когда нужно их нарисовать? У нас очень много ментальных блоков и комплексов в сознании, которые мешают эти идеи оттуда доставать когда они нужны.
Не в "блоках" дело. Человеческое мышление работает ассоциациями и классификациями. Это не СУБД из которой можно выбрать все предметы по запросу "круглая штука". Переход между образами происходит по связям, сила которых определяется эмоциональной вовлечённостью. У детей эмоций от познаваемого мира куда больше, а число усвоенных круглых образов куда меньше. У взрослого, видавшего миллионы круглых штук, эти кругляки ничего кроме скуки не вызывают. Ну а всё, что делают "расширители сознания" — это заставляют мозг работать хаотично, в результате чего по ассоциациям всплывают самые разнообразные (даже квадратные) образы, которые остаётся лишь отфильтровать классификатором.
Ну и давайте разберём редактор из макоси, который вы преподносите как образец хорошего дизайна:
- Текст "прилип" к верху окна — там буквально 1-2 пикселя расстояния. Первое, что делает пользователь, чтобы шапка окна его не отвлекала, — добавляет пустую строку сверху.
- Расстояние от текста до верхней границы окна и до левой сильно разное, что выглядит неопрятно, словно школьная поделка. Та же проблема и со светофором. При чём отступы везде разные без какой-либо причины.
- Кстати, о светофоре, цвета вот совершенно ничего не говорят о том, какое за ними скрывается действие. Особенно дальтоникам.
- И конечно нельзя не упомянуть гениальную находку располагать меню приложения не рядом с приложением, а где-то в верху экрана. Очень, знаете ли, удобно мотать мышью туда-сюда. Это же интерфейс для ежедневной работы, а не для красивых картинок на презентациях.
4) Ну не скажу, за многие годы на маке уже стало довольно удобным то, что можно резко сделать мышкой или трекпадом вверх(и немного влево) — и я точно на меню, не надо специально целиться.
В нужный пункт меню вам в любом случае придётся целиться. Это вы пытаетесь рационализировать дизайнерскую некомпетентность.
Вы попробуйте с двумя приложениями одновременно поработать: сфокусировал одно, пошарился в меню, сфокусировал другое, пошарился в меню.
Привыкнуть-то можно ко всему, только зачем привыкать ко плохому?
НЛО прилетело и опубликовало эту надпись здесь
Может просто птичку нажать «Automatically hide and show the Dock»?То есть в борьбе с одним раздражающим произвольно выезжающим нечто вы предлагаете сделать другое произвольно выезжающее нечто? Гениально!
Можно кстати Док и переместить вправо или влево, или уменьшить размер. Чем ругать, лучше изучать. Это делается из меню Дока.Вы всерьёз думаете, что я за год не нашёл эти настройки? Да я там всё что можно облазил в поисках возможности сделать так, чтобы ОС мне не мешала работать. Размер дока я уменьшал до минимума, но толку от этого мало — щель никуда не девалась, просто становилась меньше.
В окне браузера Хрома и Лисы, если окно не но полный экран, а страница длинная, то в Виндоус 10 scroll будет виден всегда, занимая место, и оскорбляя взгляд своим устаревшим внешним видом. В то время как на Каталине, он спрячется, и появится при скролле, и его внешний вид изящен и выдержан в стиле системы. Да и понятно, scroll bar мышкой тягают крайне редко, обычно мотают клавишами.На мобильном телефоне такой исчезающий скролл имеет смысл — там мало горизонтального пространства. На десктопе же ситуация ровно обратная — по горизонтали пространства достаточно, поэтому пользователю можно всегда показывать, где именно он находится на странице, чтобы ему без лишних действий было понятно, сколько от начала страницы, и сколько ещё до конца.
Firefox на десктопе умеет показывать мобильный скролл тоже. Но он это делает только когда вы находитесь в инструментах разработчика и тестируете как сайт будет работать в мобильном браузере. Это фича.
Внешний вид скролла по крайней мере в Firefox выдержан в стиле системы:
Впрочем, наверняка весь этот стиль будет оскорблять ваш взгляд своим недостаточно новым внешним видом =)
У этого меню есть ещё один большой косяк — оно прячется когда приложение развёрнуто в полный экран, и автоматически вылазит, даже если пользователю это не нужно, и он хотел нажать там что-то другое. И способа зафиксировать его, чтобы оно никогда не пряталось, я не нашёл (где-то год пользовался маком для разработки одного кроссплатформенного приложения). Ох, и намучался я с этим меню, которое вылазило невпопад когда не нужно было… Столько раздражения мне кажется ни один другой дизайнерский «изыск» у меня не вызывал. Приходилось руками на основном рабочем столе растягивать приложение на весь экран, но в таком режиме снизу остаётся нелепое пространсво из-за дока и теряется возможность удобного переключения между окнами. Вот уж где внимание к деталям, да.
4) Но почему-то во многих линуксовых WM есть такая настройка, позволяющая разместить меню приложения "как в Маке".
Никогда этого не понимал, но похоже, что есть достаточно много людей, которым это удобно, чтобы так заморочиться.
Интересно, это мак-деформация восприятия (прибитая гвоздями в мозгах привычка у маководов) или в этом все-таки что-то есть?
думаю это такое простое дизайнерское решение, чтобы не думать о том, как показывать меню, если размер окна меньше, чем нужно для меню.
А если размер дисплея меньше, чем нужно для меню?
По сути, логика одинаковая и в Windows, и в MacOS, отличие лишь одно:
по давней традиции приложение Windows создаёт под себя персональный «рабочий стол» – прямоугольник со сплошным фоном, а приложение под MacOS не создаёт нового «рабочего стола», используя существующий общий (весь экран). В обоих случаях меню прибито к верху рабочего стола.
Непонятно только зачем при запуске приложения MacOS оставляет просвечивать общий рабочий стол – обычно от иконок на нём рябит в глазах, они лишь отвлекают. С другой стороны, всё это проектировалось на волне моды drag’n’drop – в то время, возможно, люди активно пользовались перетаскиванием иконок в окна приложений. Кстати, меня до сих пор обескураживает в Windows то, что нельзя просто перетащить файл на его имя в таск-баре.
по давней традиции приложение Windows создаёт под себя персональный «рабочий стол» – прямоугольник со сплошным фоном, а приложение под MacOS не создаёт нового «рабочего стола», используя существующий общий (весь экран). В обоих случаях меню прибито к верху рабочего стола.
Непонятно только зачем при запуске приложения MacOS оставляет просвечивать общий рабочий стол – обычно от иконок на нём рябит в глазах, они лишь отвлекают. С другой стороны, всё это проектировалось на волне моды drag’n’drop – в то время, возможно, люди активно пользовались перетаскиванием иконок в окна приложений. Кстати, меня до сих пор обескураживает в Windows то, что нельзя просто перетащить файл на его имя в таск-баре.
1 & 2. Про отступы всё верно сказано.
3. Про дальтоников забывать не стоит, но Apple и не забывает – попробуйте прогнать эту картинку через симулятор разных видов дальтонии – увидите, что всё там нормально. Цветовое кодирование в данном случае – не основа, а приятное дополнение. Нет смысла отказываться от него.
4. Работаю на Маках 25 лет, крайне редко пользуюсь верхним меню. Программы Apple обычно хорошо продуманы, в них почти отсутствует необходимость елозить мышью по меню. Программы сторонних производителей могут быть спроектированы хуже, но это уже не проблема MacOS.
3. Про дальтоников забывать не стоит, но Apple и не забывает – попробуйте прогнать эту картинку через симулятор разных видов дальтонии – увидите, что всё там нормально. Цветовое кодирование в данном случае – не основа, а приятное дополнение. Нет смысла отказываться от него.
4. Работаю на Маках 25 лет, крайне редко пользуюсь верхним меню. Программы Apple обычно хорошо продуманы, в них почти отсутствует необходимость елозить мышью по меню. Программы сторонних производителей могут быть спроектированы хуже, но это уже не проблема MacOS.
Эмоционально позитивная статья. И с рациональной точки зрения получил полезную информацию. Мои благодарности автору!
> Меня зовут Костя, я немножко дизайном занимаюсь и расскажу вам кое-что о дизайне.
Отличный дизайн вступления для пространной портянки из Топ-1% самых длинных статей хабра.
Отличный дизайн вступления для пространной портянки из Топ-1% самых длинных статей хабра.
Хорошая статья. И картинка с Лебедевым правильная :)
Только один момент смутил: в описании этапов пропущено юзабилити-тестирование. Написано так, будто после обсуждений внутри компании продукт сразу выпускают в открытое плавание, и только тогда удивлённые проектировщики начинают получать отзывы недовольных пользователей.
В реальности, конечно, проводят серию предварительных тестирований на целевой аудитории. О таком тестировании упомянуто в отдельной истории (про светлый и тёмный фон), но почему-то в качестве исключения (когда не смогли договориться дизайнер и менеджер продукта).
Только один момент смутил: в описании этапов пропущено юзабилити-тестирование. Написано так, будто после обсуждений внутри компании продукт сразу выпускают в открытое плавание, и только тогда удивлённые проектировщики начинают получать отзывы недовольных пользователей.
В реальности, конечно, проводят серию предварительных тестирований на целевой аудитории. О таком тестировании упомянуто в отдельной истории (про светлый и тёмный фон), но почему-то в качестве исключения (когда не смогли договориться дизайнер и менеджер продукта).
А вот дети, особенно если взять маленьких детей, возраста примерно яслей, почти все дети заполняют все кружки. Они, конечно, могут застрять с тем, что долго что-то рисуют, но если задание немного видоизменить, например, нужно не рисовать, а просто перечислять идеи, то у них получается очень большое количество идей. С возрастом эта способность теряется, чем старше ребенок, тем сложнее ему эти идеи быстро придумывать.
Нет. Взрослые могут помнить старые пиш. машинки, где были круглые клавиши и просто заполнить кружки буквами алфавита.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Не решать за дизайнера задачу дизайнера