Как вы должны показать, что аккордеон расширяется?

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

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

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


Никаких символов вообще, просто цвет, чтобы указать расширение

Gmail для Android использует это, но вот несколько более ясных примеров:

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

<hr>
<h1> Левый и нижний шевроны справа </h1>

<p> Они используются BBC <a href= Global Experience Language :

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

<hr>
<h1> Вверх и вниз шевроны справа </h1>

<p> Они используются в <a href= документации по дизайну Android и в Silverlight .:

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

<hr>
<h1> Правый и нижний шевроны слева </h1>

<p> <img src =


Плюс (+) и минус (-) символы справа

Это используется по умолчанию в ExtJS

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

<hr>
<h1> Плюс (+) и минус (-) символы слева </h1>

<p> <img src =

73 голоса | спросил JohnGB 5 PMpFri, 05 Apr 2013 18:10:40 +040010Friday 2013, 18:10:40

9 ответов


9

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

Левая и правая стороны

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

Это похоже на то, почему селектор и флажок звезды находятся на противоположных сторонах в gmail для Android.
 введите описание изображения здесь>> </p>

<p> В противном случае наличие флажков слева или справа, по-видимому, в первую очередь является дизайнерским решением. Дизайн мудро Я предпочитаю право, так как он держит внимание пользователя на содержании. </p>

<H1> Affordance </h1>

<p> Если у вас нет значка в качестве индикатора, мало что свидетельствует о том, что вы смотрите на аккордеон, а не на простой список. Это не может быть проблемой для многих людей, но я бы <strong> рекомендовал иметь какой-то индикатор </strong>. Это должно сделать его проще в использовании, в (спорном) за счет наличия более занятый дизайна. </p>

<h1> Простота сканирования и понимания </h1>

<p> Использование шеврон вверх /вниз или влево /вправо всегда было для меня проблематичным. Я никогда не сомневаюсь, что шеврон - это состояние или действие, и людям с дислексией трудно сказать разницу. <strong> слева /вниз </strong> (индикатор справа) или справа /вниз (индикатор слева), по-видимому, вызывает наименьшее количество путаницы, в то же время легко проверяя. </p>

<p> <kbd> + </kbd> и <kbd> - </kbd> являются самыми четкими с точки зрения того, что они делают, но они имеют (во внутренних тестах), которые показывают, что они медленнее разглядывают друг друга во время сканирования. Поэтому я бы избегал их, если скорость сканирования имеет значение. </p>

<h1> Цвет и оттенок </h1>

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

<p> Google тонкий в своих рекомендациях по разработке Android, но я бы рекомендовал сделать разницу более четкой. </p>

<p> <img src =

ответил JohnGB 5 PMpFri, 05 Apr 2013 19:27:14 +040027Friday 2013, 19:27:14
18

Я предлагаю объединить их:

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

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

ответил Dominik Oslizlo 5 PMpFri, 05 Apr 2013 19:29:20 +040029Friday 2013, 19:29:20
6

Те, кому лично мне нравится больше всего, это, но не по каким-либо причинам, упомянутым

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

<p> В первом, кроме цвета фона, очевидно, что элементы отбрасываются из элемента выше, потому что <strong> все подпункты имеют отступы </strong>. </p>

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

<p> Я честно даже не заметил, какие примеры имели стрелки, указывающие вверх или вниз или вне экрана, или даже никаких стрелок вообще. Что действительно важно, так это возможность с первого взгляда рассказать, какие элементы группируются вместе как подменю элемента над ними. Так, например, этот: </p>

<p> <img src =

ответил BlueRaja - Danny Pflughoeft 6 AMpSat, 06 Apr 2013 00:05:16 +040005Saturday 2013, 00:05:16
6

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

Никаких символов вообще, просто цвет для указания расширения:

Состояние, представленное цветом.

Минимальный дизайн и хорошо работает для обычного веб-пользователя (кто-то, достаточно умный, чтобы знать, как перемещаться по веб-странице). Хотя ваш второй пример (инструменты веб-журнала) - это не то же самое, что и gmail. Gmail использует 3 цвета, выбор = зеленый, пункт главного меню = темно-серый, элементы подменю = светло-серый. Принимая во внимание, что weblog использует только 2 цвета. Я чувствую, что 3-хцветная система имеет лучший вызов к действию, чем двухцветная система.

Шевроны:

Состояние, представленное шевронами /стрелками.

Лично я предпочитаю левый & вниз по правому & down и up & down.

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

right & down имеют прямое представление (IMO), справа указывают на заголовок и вниз по направлению к содержимому из строки заголовка.

left & down - мой предпочтительный выбор. Они имеют одинаковую простоту справа и снизу, но не обязательно на ваш взгляд. Вы можете проверить состояние, взглянув на шеврон на правом конце, или вы можете продолжить чтение заголовков в левом конце.

Плюс (+) и минус (-):

Состояние, представленное символами +/-

Тот же аргумент, что и шевроны, I предпочитает размещение правого конца символов +/- с момента их присутствия, но на периферии и не обязательно требует моего внимания.


Один из пропущенных вами вариантов: Двойное принудительное выполнение состояния, используйте цвет в сочетании с символами chevron /plus-minus.

Теперь выбор между шевронами, +/- или цветами штрихов - это скорее дизайнерское решение для меня. Но, прежде всего, я попытаюсь посмотреть, подходит ли двойное принуждение к использованию или нет. Если нет, я бы пошел с chevrons /plus-minus для более минимальной темы (если вы не используете много цветов) и пойдите с цветом, если я хочу более ориентированный на цвета минимальный дизайн, где у вас много цветов, но не много значков /символов.

ответил rk. 5 PMpFri, 05 Apr 2013 19:24:54 +040024Friday 2013, 19:24:54
3

+1 Правый и нижний шевроны слева

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

ответил Sohan 5 PMpFri, 05 Apr 2013 19:21:50 +040021Friday 2013, 19:21:50
2

Я думаю, стрелки, указывающие на левую работу лучше всего, + s и -s раздражают и пугают ваш мозг. Мне нравятся левые вещи, но я правша, так что это может повлиять. И стрелки, указывающие вниз или поперек, хороши, вы обычно можете легко понять, что они означают. Также должен быть отступ, цвета должны иметь средний контраст, например, открытый = белый и закрытый = светло-серый.

ответил pythonlover 6 AMpSat, 06 Apr 2013 04:44:06 +040044Saturday 2013, 04:44:06
2

Из статьи: Где разместить значки Ваше меню аккордеона Иконки

"Существует два общих значка, используемых для свертывания: значок минус и значок X. Пользователи могут неправильно интерпретировать значок минуса, поскольку он часто представляет собой удаление или удаление. Пользователи не должны чувствовать, что теряют параметры меню, когда они сворачивают меню .

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

ответил Trebles57 22 PMpFri, 22 Apr 2016 16:40:11 +030040Friday 2016, 16:40:11
1

Используйте привычки, полученные с почти двадцати лет, с окнами, особенно Windows Explorer, и во многих деревьях просматривайте по всему Интернету: [+] и [-] слева.

Вы будете уверены, что все пользователи узнают эти эргономичные символы.

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

ответил pierre lebailly 10 AMpWed, 10 Apr 2013 00:42:40 +040042Wednesday 2013, 00:42:40
0

Просто просмотрите эту статью UX о меню аккордеона и о положении значка. Это скажет вам, что следующий вариант лучше:

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

ответил Userflow 26 Maypm17 2017, 14:36:01

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

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

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