Bagaimana cara menggambar set tombol hierarki dan terlihat kurang ofensif?

17

Saya mencoba membuat set tombol yang dapat digunakan untuk bergerak melalui data hierarkis dan itu tampak seperti swastika. Saya tidak yakin bagaimana cara memperbaikinya.

masukkan deskripsi gambar di sini

Pada gambar di atas jika "Panel" dipilih dan Anda menekan tombol atas itu akan memilih "AnimatedPanel". Jika Anda mengklik tombol kiri itu akan memilih, "Script". Jika Anda mengklik tombol kanan tidak akan ada perubahan karena panel adalah item terakhir dalam daftar. Jika Anda memilih tombol bawah, "EventHandler" akan dipilih.

Set tombol akan berada di sebelah kiri label. Label dan tombol akan ditampilkan ketika item dipilih. Misalnya, di halaman web mungkin ada daftar item menu vertikal atau horizontal. Set tombol dan label akan duduk di atas menu yang dipilih. Kemudian menekan "in" akan memilih item menu pertama. Memilih "kiri" atau "kanan" akan bergerak melintasi item menu. Saya harap itu masuk akal.

Ada saran bagaimana membuat ini kurang dari apa pun itu?

Lebih detail untuk @PremierBromanov:
Cara saya memilikinya sekarang, saya memiliki 3 label secara berurutan seperti "Up" "L" "R" "Panel".

masukkan deskripsi gambar di sini

Saya menggunakan istilah "atas", "kiri" dan "kanan" tetapi "naik" benar-benar "keluar dari baris saat ini dan kembali ke baris sebelumnya". Istilah-istilah tersebut didasarkan longgar pada bagaimana itu ditampilkan dalam tata letak seperti horisontal (meskipun secara vertikal tidak lagi masuk akal).

Dalam XML mereka menggunakan istilah seperti node cabang dan node daun. Cabang memiliki atau dapat memiliki simpul daun. Data hierarkis juga menggunakan istilah simpul orangtua dan simpul anak. Dalam hal ini, Anda memiliki leluhur dan keturunan. Anda juga memiliki saudara kandung. Mereka adalah simpul anak yang berbagi induk yang sama.

Jadi dalam kasus terakhir Anda bisa memiliki orangtua, saudara sebelumnya, saudara berikutnya dan keturunan dari simpul anak saat ini. Anda juga bisa memiliki Cabang Induk, kiri sebelumnya, daun berikutnya. Dalam hal ini jika daun memiliki daun itu akan menjadi cabang. Jadi cabang induk, daun atau cabang sebelumnya, daun atau cabang berikutnya, dan daun cabang saat ini.

1,21 gigawatt
sumber
1
Coba gunakan dua panah diagonal.
Paolo Gibellini
7
Fakta menyenangkan: swastika yang menghadap ke kiri sebenarnya adalah simbol perdamaian dalam agama Hindu dan siap digunakan pada peta untuk mewakili tempat-tempat ibadah. Sebuah menghadap kanan swastika adalah simbol kejahatan tetapi masih tidak menyinggung dalam agama Hindu.
John Dvorak
3
Kedua swastika telah digunakan sebagai tanda keberuntungan dalam budaya Barat sejak awal abad ke-20 ( wiki ). Sampai seseorang datang dan merusak barang-barang.
Vincent
Sudahkah Anda mencoba membuat sistem panah kanan bawah ke kanan yang sederhana? Mungkin lebih masuk akal secara visual saat Anda menelusuri struktur file dan itu akan lebih seperti "+" dan bukan swastika. Atas dan ke bawah akan bergerak dari "Panel" ke "script" dan kiri dan kanan akan keluar dan masing-masing.
Premier Bromanov
1
Ini bukan swastika, ini kehilangan dua kaki, saya tidak berpikir Anda harus khawatir tentang hal itu, hanya seorang nazi yang akan menemukan itu, saya membaca judul pertanyaan Anda dan kemudian saya melihat set tombol Anda dan saya tidak mendapatkan "ofensif" (saya pikir maksud Anda terlalu jelek: P tidak), saya harus membaca pertanyaan Anda untuk mengetahui apa yang Anda maksud dengan "ofensif", dengan cara saya telah mempelajari WW2 selama 10 tahun sekarang, meski begitu, saya tidak bisa menemukan swastika
Kyle

Jawaban:

32

Konsep panah Anda dan apa yang Anda rencanakan untuk digunakan sepertinya cocok. Dan dari apa yang saya lihat, saya kira Anda tidak punya banyak ruang untuk ikon.

Mungkin yang bisa membantu Anda hanyalah menggunakan panah yang lebih tebal dan melengkung untuk menyembunyikan efek yang tidak Anda sukai.

Di bawah ini adalah contoh cepat:

Anda mungkin perlu menyesuaikan panah dengan preferensi dan kejelasan Anda saat dalam ukuran kecil. Ini konsep yang sama dengan Anda, tetapi panah yang berbeda.

contoh panah skala abu-abu

contoh grayscale besar

Panah juga bisa warna yang berbeda:

contoh panah biru

contoh panah biru besar

go-junta
sumber
2
Saya pikir panah melengkung berfungsi dengan baik bahkan tanpa mengubah warna. Ide bagus +1
Aistis
Pada ukuran kecil, bahkan mungkin lebih disukai untuk membuat panah melengkung dengan warna yang sama dengan yang lurus.
tigapuluh tiga puluh
1

Anda dapat mempertimbangkan pendekatan "flat" yang lebih sederhana, menggunakan tombol yang murni melintasi daftar naik-turun terlepas dari seberapa dalam hierarki berjalan, dan menyediakan cara bagi pengguna untuk menyesuaikan kecepatan traversal, misalnya, empat tombol :

  • [lebih cepat]
  • [naik]
  • [turun]
  • [turun lebih cepat]

"naik" dan "turun" akan melintasi item-demi-item, dan tombol "lebih cepat" akan melintasi folder-ke-folder.

Matt Smith
sumber
Kenapa tidak Up folderdan Down folder. Dan bagaimana mereka menggambar seperti yang ditanyakan dalam pertanyaan?
Mensch
Saya akan mencoba Up Folder : double chevron mengarah ke atas. Atas : chevron 'up' tunggal. Bawah : chevron tunggal menunjuk ke bawah. Folder bawah : Menggandakan chevron.
Matt Smith
Ide bagus. Keluar dan masuk. Jadi saya menebak sesuatu seperti, ^ << >> \ / di mana "^" dan "\ /" berpusat di atas dan di bawah "<< >>".
1.21 gigawatt
Ya, ini seperti pola desain pagination yang terkenal, hanya vertikal.
Matt Smith