Как нарисовать набор кнопок иерархии и выглядеть менее оскорбительным, чем он есть?


17

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

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

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

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

Любые предложения, как сделать это меньше, чем бы это ни было?

Подробнее о @PremierBromanov:
У меня теперь есть 3 метки подряд, такие как «вверх», «L», «R», «панель».

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

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

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

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


1
Попробуйте использовать две диагональные стрелки.
Паоло Гибеллини

7
Интересный факт: свастика, обращенная влево, на самом деле является символом мира в индуизме и с готовностью используется на картах для обозначения мест поклонения. Свастика, стоящая лицом к лицу, является символом зла, но все еще не оскорбительна в индуизме.
Джон Дворжак

3
Обе свастики использовались как знаки удачи в западной культуре с начала 20-го века ( вики ). Пока кто-то не пришел и не испортил что-то.
Винсент

Вы пытались сделать простую систему стрелка вверх вправо-влево? Это может иметь больше смысла визуально, когда вы пересекаете файловую структуру, и это будет больше похоже на «+», а не на свастику. Вверх и вниз будет переходить от «Панели» к «сценарию», а влево и вправо - соответственно.
Премьер Броманов

1
Это не свастика, в ней не хватает двух ног, я не думаю, что вам стоит беспокоиться об этом, только нацист заметит это, я прочитал заголовок вашего вопроса, а затем посмотрел на ваш набор кнопок, и я не получил «оскорбление» (я думал, что вы имели в виду, что это было слишком уродливо: P это не так), мне пришлось прочитать ваш вопрос, чтобы понять, что вы имели в виду под «оскорблением», кстати, я изучал WW2 в течение 10 лет, даже в этом случае, я не мог разглядеть свастику
Кайл

Ответы:


32

Ваша концепция стрелы и то, для чего вы планируете ее использовать, кажутся подходящими. И из того, что я вижу, я думаю, у вас все равно мало места для иконок.

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

Ниже приведен краткий пример:

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

пример стрелки в оттенках серого

пример оттенков серого большой

Стрелки также могут быть разных цветов:

пример синие стрелки

пример синяя стрелка большая


2
Я думаю, что изогнутые стрелки работают хорошо, даже не меняя цвета. Хорошая идея +1
Aistis

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

1

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

  • [быстрее]
  • [Вверх]
  • [вниз]
  • [быстрее]

«вверх» и «вниз» будет проходить по пунктам, а кнопки «быстрее» будут переходить из папки в папку.


Почему бы Up folderи нет Down folder. И как их нарисовать, как задано в вопросе?
Mensch

Я бы попробовал Up Folder : двойной шеврон, направленный вверх. Up : одиночный шеврон Вниз : один шеврон, направленный вниз. Вниз папка : двойной «вниз» шеврон.
Мэтт Смит

Хорошая идея. Вне и в. Так что я предполагаю что-то вроде ^ << >> \ /, где «^» и «\ /» центрированы выше и ниже «<< >>».
1,21 гигаватт

Да, это похоже на хорошо известный шаблон дизайна пагинации, только вертикальный.
Мэтт Смит
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.