Хабр Курсы для всех
РЕКЛАМА
Практикум, Хекслет, SkyPro, авторские курсы — собрали всех и попросили скидки. Осталось выбрать!
Хабр доступен 24/7 благодаря поддержке друзей
Комментарии 55
Такое ощущение, что всю эту плоскость нам навязали. Я не знаю никого, кто бы с этого тащился.
Добрый день. Меня зовут Степан и мне действительно нравятся хорошие плоские интерфейсы.
Всё проще. Вам, простите, сколько лет? Помните дисковые (или хотя бы кнопочные, но с проводной трубкой) телефоны? Помните ежедневники, «обитые» кожзаменителем, телевизоры и мониторы с выпуклым экраном, дискеты и аудиокассеты?
А теперь немного арифметики. Дискеты с кассетами начали «вымирать» в 1999-2001 году с массовым распространением флешек и CD. Людям, которым сейчас 20 лет (и на которых ориентируется индустрия популярных сервисов, так как за ними — будущее), тогда было по 7-8 лет.
Поэтому увидев в программе иконку на кнопке «Сохранить», они недоумевают, что на ней изображено, а увидев красивый скевоморфный дизайн «ежедневника» в телефоне от Apple, они не понимают, что перед ними — книжка-ежедневник. Нет «тёплого лампового» ощущения.
С тем же успехом его можно было бы оформить в виде какого-нибудь папируса. Вам, державшим в руках оригинал, такой внешний вид помогает понять содержание, для них он выглядит бессмысленным ретро. Как, скажем, патефон, или промокашка.
А какой же скевоморфный дизайн можно предложить им? А никакой! Они всю свою жизнь используют для хранения своих контакт-листов исключительно компьютер и смартфон. Сама идея создать у пользователя аналогию с реальным миром исчезла, как бы красива она ни была.
Вот и погиб этот дизайн. Устарел вместе с поколением, которое воспринимало комп как чудо-машину для упрощения обычных вещей. Теперь этот самый комп помещается в карман (привет от пацана из 90-х, который о таком и мечтать не смел), причем сам по себе он уже стал обыденной вещью.
А теперь немного арифметики. Дискеты с кассетами начали «вымирать» в 1999-2001 году с массовым распространением флешек и CD. Людям, которым сейчас 20 лет (и на которых ориентируется индустрия популярных сервисов, так как за ними — будущее), тогда было по 7-8 лет.
Поэтому увидев в программе иконку на кнопке «Сохранить», они недоумевают, что на ней изображено, а увидев красивый скевоморфный дизайн «ежедневника» в телефоне от Apple, они не понимают, что перед ними — книжка-ежедневник. Нет «тёплого лампового» ощущения.
С тем же успехом его можно было бы оформить в виде какого-нибудь папируса. Вам, державшим в руках оригинал, такой внешний вид помогает понять содержание, для них он выглядит бессмысленным ретро. Как, скажем, патефон, или промокашка.
А какой же скевоморфный дизайн можно предложить им? А никакой! Они всю свою жизнь используют для хранения своих контакт-листов исключительно компьютер и смартфон. Сама идея создать у пользователя аналогию с реальным миром исчезла, как бы красива она ни была.
Вот и погиб этот дизайн. Устарел вместе с поколением, которое воспринимало комп как чудо-машину для упрощения обычных вещей. Теперь этот самый комп помещается в карман (привет от пацана из 90-х, который о таком и мечтать не смел), причем сам по себе он уже стал обыденной вещью.
Ух, такие комментарии заставляют чувствовать себя слегка старым в свои 23…
Дело не в том, какая пиктограмма/аналогия/ассоциация нарисована на КНОПКЕ, дело в самой КНОПКЕ, которой теперь нет де-факто. Наличие кнопок в реальном мире Вы тоже будете отрицать?
В общем да — кнопки потихоньку уходят, сенсорные панели теперь даже в машины ставят. А автомобили с большим количеством кнопок (вроде Опеля Астры/Корсы/Инсигнии выглядят пришельцам из 90-х).
Да ладно? Посмотрите тенденцию, скажем, компьютерных клавиатур. В 90х тонкие (и то с натяжкой) клавиатуры были только в ноутбуках. Сейчас же львиная доля клавиатур для настольника с ходом несколько раз меньше классического. Кнопки тоже становятся более плоскими, как не крути.
Мне 27, и я частично с вами согласен, но основной довод против изложил ниже DikSoft. В винде и иОСе есть куча иконок со старыми непонятными вещами, например и там и там шестерня обозначает настройки. Но нарисована она в том же иос7 весьма уныло. По-моему переборщили с плоским интерфейсом. Не всегда понятно, где есть ховер, где кнопка. Половина иконок ИОС7 выглядят, извините, как говно, например, иконка iBooks. От modern UI я тоже плююсь.
То есть я не против осовременнивания интерфеса, иконок, но нельзя же так убого рисовать и делать непонятные интерфейсы.
То есть я не против осовременнивания интерфеса, иконок, но нельзя же так убого рисовать и делать непонятные интерфейсы.
Рискую нарваться на гнев адептов «нового и прогрессивного» плоского дизайна, но всё же напишу:
Всё хорошо в меру. Лучшее враг хорошего.
Плоский дизайн «убил» различие между интерфейсными управляющими элементами и элементами исключительно информационными, неактивными. Для голого потреблядства контента он, может быть, чем-то и хорош. Но с активным взаимодействием «человек-программа» дела обстоят хуже некуда.
Хорошо, если наведение мышью ещё как-то может «размаскировать» кнопку и никак не активировать просто надпись. Но что, к примеру делать если есть возможность управлять только «пальцем»?
Самый яркий пример снижения юзабилити из-за тупого следования моде в ущерб удобству: Outlook 2010 --> Outlook 2013.
И не нужно в этом обвинять только неграмотную работу с контрастами и цветами. Это прямое следствие прикручивания седла к корове. Маркетинг. Вернее последствия угоды во всёмтупым маркетологам. Искренне жду момента, когда дурацкая мода снова вернет необходимость создавать _удобные_, а не «понтовые и клёвые» интерфейсы.
Всё хорошо в меру. Лучшее враг хорошего.
Плоский дизайн «убил» различие между интерфейсными управляющими элементами и элементами исключительно информационными, неактивными. Для голого потреблядства контента он, может быть, чем-то и хорош. Но с активным взаимодействием «человек-программа» дела обстоят хуже некуда.
Хорошо, если наведение мышью ещё как-то может «размаскировать» кнопку и никак не активировать просто надпись. Но что, к примеру делать если есть возможность управлять только «пальцем»?
Самый яркий пример снижения юзабилити из-за тупого следования моде в ущерб удобству: Outlook 2010 --> Outlook 2013.
И не нужно в этом обвинять только неграмотную работу с контрастами и цветами. Это прямое следствие прикручивания седла к корове. Маркетинг. Вернее последствия угоды во всём
В чем-то вы правы, но… Во-первых, всегда в первую очередь необходимо анализировать задачи, которые должен решать интерфейс и целевую аудиторию, устройства, а уж потом, отталкиваясь от этого выбирать какой-то стиль. Во-вторых, не нужно воспринимать все тенденции буквально: «Плоский — значит все, только большие фото и заливки одним цветом», например, продукты Google — интерфейсы того же календаря или почты выглядят плоскими, однако, если присмотреться там есть и градиенты в кнопках, и тени при наведении, просто все это используется очень аккуратно.
в первую очередь необходимо анализировать задачи, которые должен решать интерфейс и целевую аудиторию, устройства, а уж потом, отталкиваясь от этого выбирать какой-то стиль
— В этом-то и есть главная проблема!
«Старый» дизайн подходил ко всем задачам, «новый» только к информационным, но не к интерактивным. Раньше можно было удобно всё отобразить в едином стиле, теперь «работающие» страдают, а «потребители»… Ну разве что открыто не возмущаются.
Бурного восторга и аргументированных преимуществ по удобству и повышению эффективности восприятия от применения нового дизайна как-то никто до сих пор не приводил.
Так ведь это отражает тенденции в работе с компьютером и смартфоном. Пока интернет не был насколько коммерческим — пользователям приходилось создавать контент. Сейчас контента больше чем человек способен усвоить. Большую часть времени пользователь проводит читая twitter, facebook и рассматривая фотки котиков, изредка нажимая на кнопку Like или Share.
Разные времена — разные задачи и разные решения.
Разные времена — разные задачи и разные решения.
Искренне жду момента, когда дурацкая мода снова вернет необходимость создавать _удобные_, а не «понтовые и клёвые» интерфейсы.
Мода на «понтовые» интерфейсы не пройдёт никогда. Может лишь измениться представление о понтовости. MDI, dockable toolbars, floating toolbars, skins, ribbons, bloatware… Вы правда верите, что плоский дизайн станет последним? :)
MDI, dockable toolbars, floating toolbars, skins, ribbons, bloatware
Хм, прямо все это так ясно вспомнилось.
Но удобный (эффективный — не равно «модный») интерфейс все-таки можно сконструировать, и наибольший прогресс в этой области достигнут, наверное, в интерфейсах управления самолетами. Где неудобность (неэффективность) интерфейса реально может стоить жизни и пилоту, и пассажирам.
Это я последнее время размышляю на тему книги Джефа Раскина (пилота и специалиста по интерфейсам, который одно время работал в Apple и оказал некоторое влияние на принятые в этой корпорации принципы интерфейсостроения), и мне тоже кажется, что этот квадратный Metro-Modern-UI — не более чем новая мода, а принципы, следование которым позволяет сконструировать удобный и эффективный, а не просто эффектно выглядящий интерфейс, лежат чуть глубже.
Хм, прямо все это так ясно вспомнилось.
Но удобный (эффективный — не равно «модный») интерфейс все-таки можно сконструировать, и наибольший прогресс в этой области достигнут, наверное, в интерфейсах управления самолетами. Где неудобность (неэффективность) интерфейса реально может стоить жизни и пилоту, и пассажирам.
Это я последнее время размышляю на тему книги Джефа Раскина (пилота и специалиста по интерфейсам, который одно время работал в Apple и оказал некоторое влияние на принятые в этой корпорации принципы интерфейсостроения), и мне тоже кажется, что этот квадратный Metro-Modern-UI — не более чем новая мода, а принципы, следование которым позволяет сконструировать удобный и эффективный, а не просто эффектно выглядящий интерфейс, лежат чуть глубже.
Поддерживаю, но с некоторыми оговорками — плоскость на примере всем известного офисного пакета была видна уже при переходе с 97 на 2000 версию (тулбары, элементы управления и т.д) и там это органично смотрелось, но при этом не мешало базовому восприятию и было ясно где надпись, а где — элемент управления. То что сейчас происходит — это примитивизация. Мне современный интерфейс а-ля Metro UI напоминает Windows 3.0, только там тени и градиенты не отрисовывали потому что ресурсов было жалко, а сейчас — потому что модно. Но самое печальное, что от примитивизации также страдает и функциональность.
Я сам занимаюсь дизайном сложных интерфейсов и когда я чем-то пользуюсь, я вижу идеи и уровень UX и визуальных дизайнеров, создавших интерфейс.
По-моему, интерфейс Outlook 2013 — работа высочайшего класса.
Поставив себе в прошлом году бета-версию Outlook 2013, в первый день я плевался, поскольку предельную простоту не приветствую. Но через неделю мне уже нравилось очень. Тогда я работал параллельно в Windows и OS X, и скоро начал избегать маковской версии Outlook, для коммуникации постоянно переключаясь на Windows.
И еще я понял, что скевоморфизму — конец. И Джонатан Айв знал об этом конце гораздо раньше меня, потому что работа над iOS 7 наверняка шла тогда уже полным ходом, о чем мне стало ясно полтора года спустя.
Конечно, некоторый откат от «плоского» дизайна случится очень скоро, но не в операционных системах, а в разработке веб-сайтов и приложений. Поскольку набор выразительных средств там сильно ограничен, трудно создать запоминающуюся айдентику, — многим дизайнерам просто не по силам. В результате полным ходом пойдет поиск компромиссных решений.
По-моему, интерфейс Outlook 2013 — работа высочайшего класса.
Поставив себе в прошлом году бета-версию Outlook 2013, в первый день я плевался, поскольку предельную простоту не приветствую. Но через неделю мне уже нравилось очень. Тогда я работал параллельно в Windows и OS X, и скоро начал избегать маковской версии Outlook, для коммуникации постоянно переключаясь на Windows.
И еще я понял, что скевоморфизму — конец. И Джонатан Айв знал об этом конце гораздо раньше меня, потому что работа над iOS 7 наверняка шла тогда уже полным ходом, о чем мне стало ясно полтора года спустя.
Конечно, некоторый откат от «плоского» дизайна случится очень скоро, но не в операционных системах, а в разработке веб-сайтов и приложений. Поскольку набор выразительных средств там сильно ограничен, трудно создать запоминающуюся айдентику, — многим дизайнерам просто не по силам. В результате полным ходом пойдет поиск компромиссных решений.
Так как размер экрана и плотность пикселей на мобильных устройствах продолжают расти, становится возможным четко отображать все более тонкие шрифты
Вот только есть маленькая проблема. Плотность пикселей человеческого глаза какая была, такая и осталась. И эти тонкие шрифты нормально не видны. Зато красиво!
Упрощение и уплощение хорошо заметно в архитектуре: Особняки -> Сталинки -> Хрущевки -> Новостройки
Стало лучше?
Стало лучше?
Хорошая аналогия. Правда на последнем шаге из вашей цепочки лучше всё же стало (сам живу в новом доме). Так что есть поводы для оптимизма…
Вы приводите пример удешевления, а не упрощения. Переход к плоскому интерфейсу не про это, он не делает дизайн дешевле нинасколько.
Вы забываете о том, что это всё надо нарисовать. Все эти иконочки, фоны… Дизайнеры очень сильно упрощают себе работу, когда под каждый треугольник не надо подводить реалистичную тень, а нв фон аккуратно укладывать подходящую текстуру.
Мой любимый пример — сравните техническую сложность иконки Safari в IOS 6 и IOS 7.
Мой любимый пример — сравните техническую сложность иконки Safari в IOS 6 и IOS 7.
Проблема нарисовать перед профессиональным дизайнером не стоит вообще. Предположение, что Apple или MS не могут себе позволить нанять профессиональных дизайнеров, смешно.
Чем уже набор средств, тем тем сложнее решать задачи айдентики интерфейса. Это примерно, как композитору писать симфонию для исполнения только в одной октаве или только на белых клавишах.
Чем уже набор средств, тем тем сложнее решать задачи айдентики интерфейса. Это примерно, как композитору писать симфонию для исполнения только в одной октаве или только на белых клавишах.
Так будет наглядней :)
Упрощение и уплощение хорошо заметно в архитектуре
Особняки
Сталинкии
Хрущевкии
Новостройкии
Сталинкии
Хрущевкии
Новостройкии
Пройдет еще какое-то время (3-5 лет?) и в моде снова появятся нажимающиеся кнопочки, окошки с тенями, уникальные элементы интерфейса, а дизайнеры будут продолжать спорить нужны ли иконки с углами или с закруглениями. И это будет преподноситься под лозунгами «инновационности» и «удобства» нового пользовательского интерфейса.
Есть, конечно, некоторые вечные ценности: текст должен быть читабельным (а для этого шрифт должен быть привычен глазу и контрастен), графика должна быть понятная и не допускать двусмысленностей, площадь должна быть использована эфективно, но не в ущерб качеству, анимация должна использоваться «по делу», а не «для понта», интерактивные и неинтерактивные элементы должны быть различимы
Есть, конечно, некоторые вечные ценности: текст должен быть читабельным (а для этого шрифт должен быть привычен глазу и контрастен), графика должна быть понятная и не допускать двусмысленностей, площадь должна быть использована эфективно, но не в ущерб качеству, анимация должна использоваться «по делу», а не «для понта», интерактивные и неинтерактивные элементы должны быть различимы
Есть, конечно, некоторые вечные ценности: текст должен быть читабельным (а для этого шрифт должен быть привычен глазу и контрастен), графика должна быть понятная и не допускать двусмысленностей, площадь должна быть использована эфективно, но не в ущерб качеству, анимация должна использоваться «по делу», а не «для понта», интерактивные и неинтерактивные элементы должны быть различимы— Вы совершенно правы! Вы только что перечислили то, что профессионал просто обязан соблюдать. Но в нашу эпоху дилетантов, к великому сожалению, безграмотность, непрофессионализм и раздолбайство стало модным выдавать за прогрессивность и инновационность. :-(
PS Позиция автора перевода весьма аккуратная и взвешенная, кстати.
Я знаю! Минимализм — это всемирный заговор дизайнеров, которые рисовать красиво не умеют.
скевоморфныйЗа неделю второй раз это слово встречаю. Гугл что-то про античное искусство пишет. Можно пояснить этот термин?
Это непонятное слово описывает способ, когда дизайны заимствуют определенные функции из прошлого, даже когда в этом нет функциональной потребности. Примеры включают записанный звук затвора на смартфонах, благодаря которому они напоминают пленочные фотоаппараты, или приложения с календарем, в которых есть переворачиваемые бумажные страницы и металлические кольца.
Скевоморфизм – это физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.
Подробнее тут
Скевоморфизм – это физический орнамент или элемент дизайна, который скопирован с формы другого объекта, но изготовлен из других материалов или иными методами.
Подробнее тут
Вот не скажите, что «нет функциональной потребности». На некоторых смартфонах, продаваемых в Европе этот звук сделан неотключаемым (даже при выключении звука в настройках системы) из соображений сохранения приватности — щелчок затвора оповещает окружающих, что их фотографируют. Закон мерзкий, но призван решить проблему с любителями тайком вести фотосъемку окружающих без их согласия.
Так что иногда-таки не всё, кажущееся бесполезным, таковым является ;)
P.S. Шучу, конечно. Просто вспомнил этот казус.
Так что иногда-таки не всё, кажущееся бесполезным, таковым является ;)
P.S. Шучу, конечно. Просто вспомнил этот казус.
Непонятно только, откуда там вдруг взялась буква «в». В оригинале слово пишется «skeuomorphic», и наиболее близкой русской адаптацией является «скеоморфный».
Прибавлю ещё, что статья про V в англоязычной Википедии гласит, что первое известное историкам различие между буквами V и U замечено только в готическом алфавите 1386 года, а до этого времени буквы считалися взаимозаменяемыми.
Процитирую известного специалиста в области юзабилити Якоба Нильсена:
iOS 7 User-Experience Appraisal
Tablet Usability
Summary: Flat design hides calls to action, and swiping around the edges can interfere with carousels and scrolling.
iOS 7 User-Experience Appraisal
Summary: Flat design and improperly rescaled design are the main threats to tablet usability, followed by poor gestures and workflow.
Tablet Usability
— Шикарная идея. Свежо. Инновационно.
Только вот делать из неё фетиш, насильно утрамбовывая и навязывая везде, где про свайпы даже речь не идёт… это как называется?
Только вот делать из неё фетиш, насильно утрамбовывая и навязывая везде, где про свайпы даже речь не идёт… это как называется?
Я в основном о «flat design hides calls to action», то есть о том, что плоская кнопка теряет часть мгновенной узнаваемости как элемент управления.
Или во flat design'е могут быть кнопки с тенью?
Я правильно понял ваш посыл?
Или во flat design'е могут быть кнопки с тенью?
Я правильно понял ваш посыл?
Насколько я понял, вы отстаиваете ту же точку зрения, цитаты выше я добавил для дополнения.
В общем-то, мне тоже нравится идея упрощения метафор, ухода от излишней детализации, но согласен с теми, кто говорит, что плоский дизайн несет меньше полезной информации о назначении элемента. Кликабельный элемент должен четко отличаться от не кликабельного, с этим глупо спорить.
Но вот что не понятно — почему кто-то решил, что одно другому мешает? почему нельзя ссылки выделить цветом и подчеркнуть, а кнопкам добавить характерную обводку или небольшую тень. Да, есть люди которые не видели дискет и бумажных справочников, но все ведь видели кнопки и ссылки?
В общем пора отделить абсолютно плоский дизайн от облегченного, избавленного от лишних символов и графики.
Но вот что не понятно — почему кто-то решил, что одно другому мешает? почему нельзя ссылки выделить цветом и подчеркнуть, а кнопкам добавить характерную обводку или небольшую тень. Да, есть люди которые не видели дискет и бумажных справочников, но все ведь видели кнопки и ссылки?
В общем пора отделить абсолютно плоский дизайн от облегченного, избавленного от лишних символов и графики.
Мне кажется, основная проблема плоского дизайна — в том, что многие считают, что достаточно сделать дизайн плоским, а больше работать над ним и не надо. В результате получаются в лучшем случае красивые, но не продуманные интерфейсы, а в худшем — и вовсе что-то страшное (да-да, иконки в iOS 7 — отличный пример неудачного плоского дизайна).
Но вообще, я очень рад такой тенденции. Все эти годы глаза мозолили тени, градиенты, скругления, блики, размытия — на этом фоне плоский дизайн подобен глотку свежего воздуха. И в массы его понесли Microsoft, за что я им весьма благодарен. Я не пользовался Windows 8, но, по крайней мере, на вид она весьма хороша после аляповатого Aero.
От скеоморфизма тошнит ещё со времён XP — да, конечно. Но давайте не забывать, что недостаточно сделать дизайн плоским — надо сделать его хорошим.
Но вообще, я очень рад такой тенденции. Все эти годы глаза мозолили тени, градиенты, скругления, блики, размытия — на этом фоне плоский дизайн подобен глотку свежего воздуха. И в массы его понесли Microsoft, за что я им весьма благодарен. Я не пользовался Windows 8, но, по крайней мере, на вид она весьма хороша после аляповатого Aero.
От скеоморфизма тошнит ещё со времён XP — да, конечно. Но давайте не забывать, что недостаточно сделать дизайн плоским — надо сделать его хорошим.
наблюдая, как отключение box-shadow и прочих удивительных градиентов из мира css3 решает кучу проблем, связанных со скоростью анимации страниц в мобильных браузерах, идея чего-то простого, плоского и тонкого начинает напрашиваться как-то сама собой. :)
т.е. да, может мода, может стиль, может тенденции, но сейчас у меня есть по крайне мере один логичный довод в пользу данного эстетического безобразия.
т.е. да, может мода, может стиль, может тенденции, но сейчас у меня есть по крайне мере один логичный довод в пользу данного эстетического безобразия.
Зарегистрируйтесь на Хабре, чтобы оставить комментарий
Плоский и тонкий