Jak narysować zestaw przycisków hierarchii i wyglądać mniej obraźliwie niż jest w rzeczywistości?

17

Próbuję utworzyć zestaw przycisków, który może być używany do poruszania się po hierarchicznych danych i wygląda jak swastyka. Nie jestem pewien, jak to naprawić.

wprowadź opis zdjęcia tutaj

Na powyższym obrazku, jeśli wybrano „Panel” i naciśniesz górny przycisk, wybierzesz „AnimatedPanel”. Jeśli klikniesz lewy przycisk, wybierzesz „Skrypt”. Po kliknięciu prawego przycisku nic się nie zmieni, ponieważ panel jest ostatnim elementem na liście. Jeśli wybierzesz dolny przycisk, zostanie wybrany „EventHandler”.

Zestaw przycisków znajdzie się po lewej stronie etykiety. Etykieta i przycisk zostaną wyświetlone po wybraniu elementu. Na przykład na stronie internetowej może znajdować się lista pozycji menu w pionie lub w poziomie. Zestaw przycisków i etykieta będą znajdować się nad wybranym menu. Następnie naciśnięcie „in” spowoduje wybranie pierwszego elementu menu. Wybór „w lewo” lub „w prawo” spowoduje przechodzenie między elementami menu. Mam nadzieję, że to ma sens.

Wszelkie sugestie, jak zmniejszyć to cokolwiek to jest?

Więcej szczegółów na @PremierBromanov:
Tak jak teraz, mam 3 etykiety w jednym rzędzie, tak jak „Panel” „L” „R” „R”.

wprowadź opis zdjęcia tutaj

Używam terminów „w górę”, „w lewo” i „w prawo”, ale „w górę” to tak naprawdę „wyjdź z bieżącego wiersza i wróć do poprzedniego”. Terminy te są luźno oparte na tym, jak są wyświetlane w układzie poziomym (chociaż w pionie nie ma już sensu).

W XML używają terminów takich jak węzeł gałęzi i węzły liści. Gałąź ma lub może mieć węzły liści. Dane hierarchiczne wykorzystują również terminy węzeł nadrzędny i węzły podrzędne. W takim przypadku masz przodków i potomków. Ty też masz rodzeństwo. Są to węzły podrzędne, które mają tego samego rodzica.

Tak więc w ostatnim przypadku możesz mieć rodzica, poprzedniego rodzeństwa, następnego rodzeństwa i potomków bieżącego węzła potomnego. Możesz także mieć Oddział Rodzica, poprzedni lewy, następny liść. W takim przypadku, jeśli liść ma liście, byłby to gałąź. Więc gałąź nadrzędna, poprzedni liść lub gałąź, następny liść lub gałąź i liście bieżącej gałęzi.

icon interface-design critique 1,21 gigawata
źródło
1
Spróbuj użyć dwóch ukośnych strzałek.
Paolo Gibellini,
7
Ciekawostka: skierowana w lewo swastyka jest w rzeczywistości symbolem pokoju w hinduizmie i jest chętnie używana na mapach do reprezentowania miejsc kultu. Swastyka skierowana w prawo jest symbolem zła, ale wciąż nie jest obraźliwa w hinduizmie.
John Dvorak,
3
Obie swastyki były używane jako znaki szczęścia w zachodniej kulturze od początku XX wieku na ( wiki ). Aż ktoś przyszedł i coś zrujnował.
Vincent
Czy próbowałeś stworzyć prosty system strzałek w lewo, w prawo w górę w dół? Może to mieć większy sens wizualny, gdy przejdziesz przez strukturę pliku i będzie to bardziej jak „+”, a nie swastyka. Przesuwanie w górę i w dół zmieniałoby się z „Panelu” na „skrypt”, a lewy i prawy odpowiednio wychodziły i wchodziły.
Premier Bromanov,
1
To nie jest swastyka, brakuje jej dwóch nóg, nie sądzę, że powinieneś się tym przejmować, tylko naziści to zauważą, przeczytałem tytuł twojego pytania, a potem spojrzałem na twój zestaw przycisków i ja nie dostałem „ofensywy” (myślałem, że miałeś na myśli, że to było zbyt brzydkie: P to nie jest), musiałem przeczytać twoje pytanie, żeby wiedzieć, co masz na myśli przez „ofensywę”, tak przy okazji, kiedy studiowałem II wojnę światową mimo to od 10 lat nie mogłem dostrzec swastyki
Kyle

Odpowiedzi:

32

Twoja koncepcja strzały i to, do czego zamierzasz ją wykorzystać, wydaje się odpowiednie. Z tego, co widzę, wydaje mi się, że i tak nie masz dużo miejsca na ikony.

Może to, co może ci pomóc, to po prostu użycie grubszych i zakrzywionych strzałek, aby ukryć efekt, którego nie lubisz.

Poniżej znajduje się szybki przykład:

Może być konieczne dostosowanie strzałek do preferencji i jasności, gdy są małe. To ta sama koncepcja co twoja, ale różne strzałki.

przykładowe strzałki w skali szarości

przykład duża skala szarości

Strzały mogą mieć również różne kolory:

przykład niebieskie strzałki

przykład niebieska strzałka duża

go-junta
źródło
2
Myślę, że zakrzywione strzały działają dobrze nawet bez zmiany kolorów. Fajny pomysł +1
Aistis
Przy małych rozmiarach może być nawet wskazane, aby zakrzywione strzały miały ten sam kolor co te proste.
trzydziesty trzydziesty
1

Możesz rozważyć prostsze, „płaskie” podejście, używając przycisków, które jedynie przesuwają listę w górę i w dół niezależnie od głębokości hierarchii, i umożliwiając użytkownikowi dostosowanie prędkości przejścia, np. Cztery przyciski :

  • [szybciej]
  • [w górę]
  • [na dół]
  • [w dół szybciej]

„w górę” i „w dół” przechodzą przez element po elemencie, a przyciski „szybciej” przechodzą od folderu do folderu.

Matt Smith
źródło
Dlaczego nie Up folderi Down folder. I jak powinny być narysowane zgodnie z pytaniem?
Mensch,
Spróbowałbym Up Folder : podwójny szewron skierowany w górę. W górę : pojedynczy szewron „w górę”. W dół : pojedynczy szewron skierowany w dół. Folder dolny: podwójny szewron „dolny”.
Matt Smith,
Dobry pomysł. Wychodzę i wchodzę. Więc zgaduję coś w stylu, ^ << >> \ / gdzie „^” i „\ /” są wyśrodkowane powyżej i poniżej „<< >>”.
1,21 gigawatów
Tak, to jest jak dobrze znany wzór projektowania stronicowania, tylko pionowy.
Matt Smith,