У меня есть этот Side Navbar с детьми. Я не уверен, что то, как я изображаю детей, — лучший способ сделать это.

Вопросы - Это лучший способ для меня проиллюстрировать дочерние элементы навигационной панели? Что еще я могу сделать, чтобы улучшить презентацию?

primary: "#33404D",
secondary: "#465666",
accent: "#FFAB00"

Первая попытка - дубль 1 (самая старая версия компонента)

enter image description here

Вторая попытка - дубль 2

enter image description here

Третья попытка - дубль 3

enter image description here

1
Jeremy Walters 29 Янв 2019 в 11:24

2 ответа

Лучший ответ

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

  • Изменение направления стрелки с анимированным раскрывающимся списком дочерних объектов. (Привлекает внимание пользователя)

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

  • Любой ценой избегайте отступов! Несмотря на то, что это хорошо для предоставления четкого признака уровня, это вызовет проблемы с пространством, если у вас есть несколько уровней и / или длинные метки пунктов меню. Текст также полностью искажается, если просматривать его в более низком разрешении, на экранах меньшего размера или с большим размером текста, поскольку вы увидите очень мало символов, когда опуститесь на 1 или 2 уровня. Достаточно отсутствующих значков и смены цвета фона.

< Сильный > Заместители

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

Или всплывающее меню, в котором всплывающие уровни являются всплывающими.

1
Shreyas Tripathy 29 Янв 2019 в 13:07

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

  1. Увеличение левого отступа

left indent

  1. Уменьшение веса шрифта

font-weight

  1. Использование цвета значка

icon color

0
Danielillo 29 Янв 2019 в 12:27