Что представляют собой 3 близких горизонтальных бара (а не меню гамбургеров) и каково происхождение дизайна?

105 голосов | спросил yuritsuki 22 J0000006Europe/Moscow 2015, 22:09:30

6 ответов


144

Это скеоморфное изображение надреза, указывающее, что область можно вытащить /перетащить. Подобно вырезке на конце пуансона (обеспечивая дополнительное сцепление с пальцами).

введите описание изображения здесь>> </p>

<p> Это появилось уже в Windows 98 (см. нижний правый угол окна). </p>

<p> <img src =

ответил Bowen 22 J0000006Europe/Moscow 2015, 22:17:20
98

В то время как пример пистолета Боуэна является достойным, лучшим примером может служить задняя часть вашего пульта дистанционного управления телевизором (или многих других устройств, которые хранят батареи под крышкой слайда):

введите описание изображения здесь>> </p>

<p> Надрез на пистолете, крышке аккумуляторной батареи и множестве других предметов повседневного пользования в первую очередь обеспечивает дополнительное трение /сцепление для ваших пальцев, а также указывая на лучшее место для пальцев. Поскольку трение, очевидно, не имеет значения на компьютере, это всего лишь скеоморфное представление того, где вы можете щелкнуть мышью. Фактически 3 диагональные полосы в нижнем правом углу окна ОС Windows известны под общим названием <a href = Size Grip и является стандартным элементом пользовательского интерфейса.

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

Изменить: Как вы можете видеть ниже, Stack Overflow использует слегка другой индикатор захвата, используя точки, но к этому моменту большинство людей привыкли к этому мягкому скеоморфизму, что все, что читается как повышенная поверхность в пользовательском интерфейсе, будет интерпретироваться пользователями как место для взаимодействовать путем перетаскивания.

введите описание изображения здесь>> </p></div>
										<div class=ответил Mordred 22 J0000006Europe/Moscow 2015, 23:55:24

21

Чтобы добавить к существующим превосходным ответам.

Этот тип функции дизайна известен как доступность (см. https: //en.wikipedia.org/wiki/Affordance ).

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

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

введите описание изображения здесь>> </p>

<p> Кнопки - это еще один пример реальной доступности жизни, который был внесен в дизайн пользовательского интерфейса. Кнопки реальной жизни легко визуально идентифицировать, и их приподнятая поверхность приглашает нас нажать их - их форма интуитивно подсказывает, что мы должны делать. </p>

<p> Кнопки в пользовательских интерфейсах традиционно имеют тень, чтобы предложить тот же «push me». Вот почему кнопки «плоского дизайна» можно считать обратным шагом для удобства использования. </p></div>
										<div class=ответил Ross McNab 25 J0000006Europe/Moscow 2015, 11:15:06

8

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

Я бы назначил Macintosh System 7.0 (1991, но я смутно напоминаю, что стиль пользовательского интерфейса широко просматривается до этого) в качестве создателя этого соглашения ... вы видите, что ребро в активных листах прокрутки:

Контуры прокрутки Mac OS 7

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

Быстрый обзор графиков GUI до 1991 года (включая Xerox Alto, Apple Lisa, Amiga Workbench, Windows 1.x-3.0, Mac System 1.0-6.0.x) предполагает, что полосы прокрутки System 7 могут быть первыми элементами пользовательского интерфейса, которые указывают перетаскивание таким образом ... в предшествующих и современных системах, перетаскиваемые элементы, такие как полосы прокрутки и заголовки, имеют тенденцию быть плоскими (или скошенными для создания 3D-эффекта, но не «хрупкой» текстуры).

Можно также назначить исходные заголовки заголовков Macintosh (1984) в качестве еще более раннего источника для этого соглашения (как показано на рисунке как в оригинальном, так и в представлении System 7):

Mac OS 1.0 title bar  Mac OS 7.0 title bar

Однако я не уверен, что это совершенно то же самое - здесь у нас очень широкая поверхность «захватывающих» линий на чем-то, что вы можете перетащить в any , а не на маленьком «grippy» «область, указывающая способность перетаскивать в одном конкретном направлении. Я бы сказал, что горизонтальные линии здесь служат скорее указанием того, какое окно активнее, чем как доступность, указывающая на переносимость.

ответил rickster 26 J0000006Europe/Moscow 2015, 22:30:19
1

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

 удаленная обложка удалить

Пример с ручками: рули http://ep.yimg.com/ay/yhst-92821211804676/left-handlebar-grip-for-motovox-pit-bikes-and-mini-bikes-3.jpg

  

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

ответил Stephn_R 24 J0000006Europe/Moscow 2015, 17:23:33
0

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

ответил hildred 26 J0000006Europe/Moscow 2015, 02:02:11

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

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

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