Почему диалоги имеют серый фон?

Большинство диалогов Windows /Mac /Linux, которые я видел, имеют серый фон. О-диалоги, страницы настроек, мастера, диалоги подтверждения и ошибки и т. Д.

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

Я регулярно использую модальные диалоги для прогрессивного раскрытия (подробные страницы, добавление, редактирование и т. д.) при разработке моих программ для Windows, поэтому в этих диалогах есть много элементов управления формой и текста.

Что делать, если я просто переключил их на белый?

Пример: одна из страниц настроек Internet Explorer - Оригинал:

 Одна из страниц настроек Internet Explorer

Тот же диалог - отредактирован, чтобы иметь белый фон:

 Одна из страниц настроек Internet Explorer - отредактирована

97 голосов | спросил J_rgen 14 J0000006Europe/Moscow 2016, 12:27:12

5 ответов


184

На самом деле нет причины «UX» для этого, или если это так, это очень ограниченный. Фактическая причина, по которой фоновые диалоги (по умолчанию) имеют оттенок серого, потому что некоторые дизайнеры думали, что это выглядит лучше.

Во многих ранних операционных системах окна диалога и окна были абсолютно белыми. Очевидно, что они были белыми на исходной Mac OS, так как у него был только однобитовый черно-белый дисплей. Но это продолжалось долго после того, как Mac II добавила поддержку цветного дисплея:

Система 7.5 (для Macintosh)

В Windows настройки по умолчанию имели белый фон для окон и диалоговых окон полностью через Windows 3.1:

Windows 3.1

Начиная с Mac OS 8 и Windows 95 (другие операционные системы последовали этому примеру, естественно, и прецедент уже был хорошо установлен предыдущими менее популярными системами окон, такими как NeXTSTEP , DESQview /X и Amiga Workbench ), все стало яростью среди дизайнеров, чтобы дать контроль над трехмерным внешним видом. Вы уже можете увидеть начало этого на скриншоте выше из Windows 3.1 - кнопки управления уже имеют faux-3D вид. Чтобы завершить 3D-эффект, диалоговые окна обрабатывались серым фоном.

Mac OS 8.1

Пользовательский интерфейс был спроектирован так, как если бы на него влиял глобальный направленный источник света, так что элементы управления имели затененные и выделенные края. Разделы окон и диалогов были скошены, чтобы они выглядели «вставками» или «начальными». Практически для достижения этого эффекта требуется, чтобы фон, на котором сидели элементы управления (окно или диалоговое окно), имел цвет , отличный от белого . У вас не может быть подсветка на белом фоне, так как белый цвет уже является самым легким. Им нужно было отказаться от контраста фона, чтобы 3D-эффект работал.

Windows 95

Теперь, возможно, именно здесь и появился UX. Было широко распространено мнение, что создание интерфейсов, выглядящих 3D, сделает их более «удобными для пользователя». Даже на этом раннем этапе, когда дизайн пользовательского интерфейса все еще находился в зачаточном состоянии, вы могли увидеть появление принципа skeuomorphism - если мы сделаем объекты на экране похожими на их физические коллеги, тогда пользователям будет удобнее взаимодействовать с ними. Например, 3D-кнопки были более гибкими - они выглядели как кнопки , потому что они выглядели так, как будто они могли быть нажаты (концепция, известная как «доступность», наиболее четко сформулированная Дональд Норман). И, удивляясь чудесам, когда пользователь нажимал на них, на самом деле был эффект анимации, который изменил цветовую схему, чтобы кнопка казалась отступом («нажмите») на экран!

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

Конечно, не все выбрали тот же оттенок серого. Некоторые фоны были более светло-серыми, другие - более темными. Но еще лучше, пользователь вообще не зациклился на сером. Оконные менеджеры обеспечили крючок настройки, когда продвинутые пользователи (или с ограниченными возможностями) могли перенастроить внешний вид своей системы, выбрав разные цвета. Для создания 3D-эффекта использовались светлые и темные вариации на фоне.

A пользовательская тема для Windows, любезно предоставленная Erin Thomas (mochinet.com)

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

Теперь, когда поле интерфейса пользовательского интерфейса эволюционировало, это то, что иногда приводит к проблемам дизайнеров. Они проводят много работы, создавая интерфейс, который, по их мнению, абсолютно красив, с эффективным использованием цвета. Затем они выпускают его на своих ничего не подозревающих пользователей, которые, как оказалось, абсолютно ненавидят синий. Вероятно, они не будут так сильно ненавидеть, если им не придется смотреть на него весь день, но ваша программа заставляет их делать именно это. Все, потому что у какого-то дизайнера где-то (или у команды дизайнеров) было субъективное мнение, что особый оттенок синего действительно сделал UI pop .

Хотя это будет противоречиво, я очень сильно чувствую, что основные цветовые решения, подобные этому, не являются чем-то, что должно быть для разработчиков отдельных приложений. Пользователь абсолютно должен обладать способностью настраивать цветовую схему, если она желает (личная предпочтения) или нуждается (по причинам доступности), и для каждой программы просто слишком громоздка, чтобы предложить уникальный интерфейс для настройки своего внешнего вида. Гораздо лучшая идея заключается в том, чтобы каждый мог отвлечься от встроенного средства операционной системы для этого. И в качестве дополнительного бонуса вы получаете консистенцию . Это анафема для некоторых дизайнеров, которые абсолютно не могут придерживаться идеи отказаться от контроля над каждой детальностью, но последовательность намного важнее для пользователей. Если ваше приложение выглядит и работает как другие приложения, которые они используют, и они потратили время на изучение, тогда потребуется значительно меньше времени для ускорения работы с вашим приложением - даже если есть некоторые аспекты дизайна что вы можете утверждать, являются «субоптимальными». Консистенция превосходит инновации, если у вас нет веской причины darn . Яркий цвет синего цвета не подходит.

В любом случае, возвращаясь к нашей истории: по мере того как мода меняется и развивается, старый становится новым снова. Windows Vista представила тему Aero, которая облегчила оттенок серого, используемый окнами и диалоговыми окнами, как вы можете видеть на первом скриншоте в вопросе. Windows 8 взяла нас на полный круг, сглаживая (или почти) все элементы управления и возвращаясь к совершенно белым диалоговым окнам, которые восходят ко временам Windows 3.1:

Windows 10

Хуже того, способность (ограниченная) настройки, которая уже давно является отличительной чертой хорошо продуманного оконного менеджера, исчезает. Пользователь был выведен из-под контроля - на этот раз не независимыми поставщиками приложений, а разработчиком оконного менеджера. Тот, кто должен знать лучше. Почему Windows вернулась к «плоской» теме? Потому что все делали это в Интернете, и команда дизайнеров подумала, что она выглядит «свежей» и «современной». Веб-приложения, со своей стороны, начали делать это прежде всего из-за технических ограничений: поскольку они работали в браузере, а не на полноценном окне на рабочем столе, у них не было доступа к оконному менеджеру, и они оставались реализовать свои собственные окна и диалоги:

Некоторые случайное веб-приложение

Очевидно, что эти вдохновлены диалоговыми окнами диспетчера окон, но они не совпадают. Вы не можете быть совместимы с операционной системой, если вы запускаете операционные системы all . Где вы нажимаете кнопку закрытия? На Mac все знают, что это идет вверху слева. В Windows он находится в верхнем правом углу с Windows 95. В Интернете все догадываются, где это может быть. Такая же сделка для заказа и выравнивания кнопок. Консистенция, которая только начинала создавать компьютеры, стала удобной для пользователя, стала испаряться из-за этих глупых технических ограничений, а затем, когда веб-приложения стали все более популярными, их дизайн также начал улавливаться, так что они выглядели более «современными» и «свежий», чем «старые» настольные приложения. Время снова запустить старые копировальные машины!

К сожалению, у нас все еще нет согласованности. Некоторые диалоги в Windows 10 имеют совершенно белые фоны, а другие по-прежнему используют светло-серый цвет. Нет очевидной причины. И пользователь не может его настроить.

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

ответил Cody Gray 14 J0000006Europe/Moscow 2016, 15:51:27
35

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

Существует еще одна тема ux.se, в которой обсуждаются белые и серые фоны:

Серый или белый фон для простота использования и удобочитаемости /удобочитаемости

ответил SteveD 14 J0000006Europe/Moscow 2016, 13:12:30
16

Поскольку разница между цветом шрифта и фоновым цветом может вызвать напряжение глаз и не является оптимальной.

Наличие черного или темно-серого текста на светло-сером фоне является самым простым для человеческого глаза для чтения. Подробнее см. эту ссылку .

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

ответил MJB 14 J0000006Europe/Moscow 2016, 13:51:57
1

Это поведение выполняет два основных задания: во-первых, оно обращает внимание на ваше всплывающее /диалоговое окно, а во-вторых, давайте узнаем, что страница за ним (для браузеров) в этом состоянии неактивна.

И эти тени или оверлеи делают довольно хорошую работу.

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

ответил Mircea-Alexandru 14 J0000006Europe/Moscow 2016, 12:40:51
1

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

ответил Peter 19 J0000006Europe/Moscow 2016, 02:41:00

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132