Обратившись к информация architecture ¹ и различные systems ² навигации в первых двух частях этой серии статей, последний шаг, чтобы эффективноупростить навигацию впечатления — в частности, путем тщательной разработки взаимодействие с меню навигации .

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

• Символы,
• Целевых областей
• Событие взаимодействие,
• Верстка,
• Уровни,
• Функциональный контекст .

Можно конструировать эти аспекты по-разному.Дизайнеры часто экспериментировать с новыми techniques ³ создать более захватывающий опыт навигации.И, глядя на новые, более привлекательные решений очень хорошая вещь.Однако, большинство пользователей просто хочу, чтобы добраться до содержимого с минимальными усилиями, как это возможно.Для тех пользователей, проектирование вышеупомянутых аспектов, чтобы быть как простой, предсказуемой и comfortable как это возможно, важно .

Symbols

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

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

Треугольник Symbol

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

⁴
треугольник, направленный вниз рядом с пунктом меню является наиболее надежным способом для обозначения раскрывающемся списке.(Источник: CBS ⁵ ) ( Просмотр большой version ⁶ )

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

⁷
треугольник или стрелка, указывающая в правильном направлении самый надежный способ, чтобы указать выпадающем меню.(Источник: Currys ⁸ ) ( Просмотр большой version ⁹ )

Плюс Symbol

Еще один символ, который используется для открытия меню является также символом (“”).Обратите внимание, что веб-сайт ниже смешивает символы: стрелки для «верхнем меню навигации и” для динамического меню навигации слева (хотя стрелка используется для дальнейшего расширения динамического — например, шоу «Другие виды спорта”) .

¹⁰
Некоторые веб-сайты используют “”, чтобы опуститься или вылетают меню.(Источник: Nike ¹¹ ) ( Просмотр большой version ¹² )

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

Три-Line Symbol

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

¹³
Три горизонтальные линии часто используется для чувствительных навигационных меню.(Источник: Nokia ¹⁴ ) ( Просмотр большойversion ¹⁵ )

Обратите внимание на несколько вещей.Во-первых, три линии, как grid ¹⁶ и пуля list ¹⁷ икона, общаться определенный тип макета — частности, вертикальную стопкузаписи.Расположение меню должно быть в соответствии с планировкой, что значок подразумевает.Сайт ниже, например, перечислены элементы по горизонтали, что противоречит макет с символом меню .

¹⁸
Три линии не работают хорошо, если пункты меню не укладываются вертикально.(Источник: dConstruct 2012 ¹⁹ ) ( Просмотр большой version ²⁰ )

Преимущество более инклюзивного символом треугольника и этикетки “Меню” в том, что они подходят любой макет, в котором можно изменить расположение без изменения значок .

Во-вторых, даже если три линии становятс� …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров