it-swarm.asia

Apakah ada cara "Bagus" untuk menampilkan ikon navigasi sehingga tidak mengacaukan UI?

Saya punya aplikasi desktop kecil yang memindai folder musik dan secara acak memilih album untuk diputar. Versi pertama adalah WinForms dan memiliki tombol "sebelumnya" dan "berikutnya" di kedua sisi sampul album yang diaktifkan ketika ada lebih banyak album oleh artis yang sama.

enter image description here

Saya tidak senang dengan UI ini karena tombolnya mengambil terlalu banyak ruang.

Saya menulis ulang aplikasi menggunakan WPF dan saya mencari cara yang lebih baik untuk menunjukkan bahwa ada album lain dari artis yang sama. Saya telah bereksperimen dengan menampilkan tombol-tombol di atas sampul dan hanya menunjukkannya ketika mouse berguling-guling pada posisi mereka, tetapi saya tidak senang dengan hasilnya terutama karena tidak ada indikasi bahwa opsi ada di sana.

Saya menemukan trik yang rapi pada Brian Stevens Photography situs di mana kursor berubah menjadi "+" dan "-" pada setiap bagian gambar untuk menunjukkan navigasi, tetapi saya juga menggunakan klik pada gambar untuk memainkan album itu jadi saya harus menyesuaikan pendekatan ini jika saya ingin menggunakannya sendiri.

Apakah ada cara yang lebih baik atau apakah korsel atau aliran balik mengontrol cara untuk melakukannya?

Untuk latar belakang yang lebih banyak baca ini posting blog milik saya.

10
ChrisF

Pada dasarnya 2 ide di sini, yang pertama menunjukkan lingkaran kecil, yang disorot di tengah adalah halaman/album saat ini sedang ditampilkan, saat Anda mengklik panah itu akan menyoroti yang berikutnya/sebelumnya. Ini memberi pengguna ide tentang berapa banyak album yang tersedia untuk artis yang diberikan.

(Mengarahkan ulang Matt Lutze excellent ASCII gambar)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Yang berikutnya ini dapat ditampilkan ketika ada lebih dari mengatakan 6 album untuk seorang artis, yang hanya menunjukkan album 1 dari total album.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Dengan cara ini elemen masih ada dan menunjukkan antrian visual (atau literal) bahwa ada lebih banyak untuk dilihat/didengarkan.

Ide Acak: Tentu saja saya sangat menyukai gagasan mengklik Sampul Seni dan bisa melihat ke dalam, yang dalam hal ini hanya akan menampilkan daftar lagu yang tersedia di album itu. Ini akan menjadi pilihan mereka untuk memainkan lagu tertentu.

[Settings]  [Random album]  [Info]

 {   1. Song Names here       ^ }
 {   2. Song Names here         }
 {   3. Song Names here         }
 {   4. Song Names here         }
 {   5. Song Names here       v }

 <<           1 of 10          >>
9
Drofnas

Tombol navigasi terlihat buruk karena disonansi visual

  • Mereka bulat dan gambarnya persegi.
  • Mereka sangat kuat 3D dan gambarnya datar

dan

  • Ruang yang mereka buang di atas dan di bawah berwarna abu-abu datar yang tidak digunakan, tidak menggunakan hiasan yang serupa dengan tombol, sehingga tidak selaras dengan tombol juga.

Flat sempit persegi panjang mengancingkan ketinggian penuh dari sampul album, menggunakan tumpukan ">" (atau "<") di tengah akan menyelesaikan tiga masalah ini, tetapi sampul depan masih tetap memisahkan kontrol navigasi Anda. Ini akan bekerja lebih baik dengan memiliki kontrol navigasi dalam satu potongan visual.


Inilah solusi kuno (kiri) dan lebih modern (kanan).

Styling tombol (bevel/pembulatan/drop-shadow/apa-apa) harus cocok dengan styling untuk bingkai cover-art.

enter image description here

Yang kiri memiliki keuntungan bahwa Anda dapat dengan mudah meningkatkan ukuran tombol kiri/kanan tergantung pada berapa banyak real estat yang ingin Anda berikan kepada mereka dan seberapa mudah Anda ingin mereka dipukul.

Yang kanan memiliki carousel mini mata ikan di bawahnya. Anda harus mem-foto lama gambar mini ketika tidak diaktifkan agar tidak mengalihkan perhatian dari sampul depan, dan Anda memiliki banyak pilihan dibandingkan ukuran.

Kiri sederhana dan efektif, kanan memiliki lebih banyak pujian permen mata. Saya lebih suka yang kiri. Anda mungkin bisa menebak dari era mana selera musik saya berasal.

5
James Crook

Sebagai saran lain, CoverFlow Apple menggunakan scrollbar horizontal di bawah cover art untuk memungkinkan pengguna menggosok penutup.

Keuntungan:

  • Dapat dengan cepat menggosok melalui seni. Mungkin bukan persyaratan untuk aplikasi Anda.
  • Sisik okish dengan sejumlah besar seni.
  • Memungkinkan pencarian acak yang baik dengan menggosok bolak-balik.

Kekurangan:

  • Tidak jelas berapa banyak barang yang ada.
3
ICR

Hanya karena elemen UI tidak segera terlihat, itu tidak berarti bahwa itu adalah pilihan yang buruk. Saya pasti akan pergi dengan sesuatu di mana mengklik di sisi kanan penutup maju satu langkah, dan mengklik di sisi kiri kembali. (Dengan asumsi bahwa ini hanya akan digunakan dengan bahasa kiri ke kanan?)

Alih-alih tanda + dan - dari situs web foto, saya hanya menyarankan <dan>. Dan saya tidak ingin mereka mengubah atau mengikuti kursor, saya hanya akan menempatkan mereka di kanan tengah dan kiri tengah.

Anda dapat bereksperimen dengan mengklik di tengah sebagai cara untuk memainkan/menjeda album.

Jenis antarmuka pengguna yang hampir tak terlihat ini sama mudahnya digunakan begitu Anda menemukannya, dan tampilannya jauh lebih bagus daripada memiliki tombol terpisah yang nampak seperti tombol. Ekstrem estetika ini adalah menggabungkan semua elemen UI ke dalam elemen yang tidak terlihat dalam pratinjau sampul. Sehingga Anda hanya melihat sampulnya (dan mungkin judul lagu) ketika mouse tidak melayang di atasnya. Mungkin ini akan bekerja untuk aplikasi Anda, dan mungkin tidak.

3
Scott Newson

Pertanyaan yang menarik, dan beberapa poin bagus dengan kedua jawaban yang ada.

Mengenai kontrol yang ada di mana-mana vs tersembunyi: Saya akan merekomendasikan condong ke arah kontrol yang selalu terlihat, tetapi tidak mengganggu secara visual. Hijau, biru, berpola; semua memiliki potensi untuk setidaknya sedikit mengganggu. Saya biasanya setuju dengan Nir di sini tentang penggunaan panah sederhana atau simbol "lebih besar dari"

<< {Gambar} >>

vs. ikon/tombol.

Saya juga akan memperluas saran ke ikon teratas Anda, dan mungkin menyarankan agar konsep menjembatani batas aplikasi desktop/aplikasi web secara visual:

[Settings]  [Random album]  [Info]
              Title
   {                          }
   {                          }
<< {          Cover           } >>
   {                          }
   {                          }

Saya biasanya cenderung membuat cover art objek dominan di antarmuka. Baris tipis tombol teks-tautan di atas, judul, lalu gambar besar sampul, dengan garis maju-mundur sempit di kedua sisi. Atau semacam itu.

Namun Anda mengayunkannya, setidaknya saya sarankan untuk tidak menggunakan indikator dinamis baru seperti ikon penunjuk mouse yang berubah. Banyak orang akan takut atau gugup ketika pointer mereka berubah; dari pengalaman saya, pengguna mengharapkan pointer mereka untuk melakukan hal-hal yang dapat diprediksi setelah tindakan yang dapat diprediksi dan tidak mengejutkan mereka.

Proyek rapi, dan terima kasih atas diskusi. Saya ingin tahu apa yang dipikirkan orang lain.

2
Matt

Sebagai seseorang yang menjawab email dukungan, saya dapat memberi tahu Anda bahwa jika elemen antarmuka pengguna tidak segera terlihat, persentase yang baik dari basis pengguna Anda tidak akan pernah menemukannya.

Mereka juga tidak akan pernah membaca dokumen atau pesan sembulan.

Sebuah fitur harus jelas (dan bahkan sering memiliki tombol tidak cukup jelas) atau hanya bekerja tanpa mengganggu pengguna (pemeriksa ejaan bergarisbawahi coretan merah adalah contoh yang baik, Anda tidak perlu menemukannya - itu hanya ada ).

Anda dapat mengubah gaya tombol agar tidak terlalu besar dan sehingga lebih menyatu dengan latar, misalnya jika Anda mengganti tombol dengan dua panah kecil yang tidak memiliki bingkai tombol yang berat, mereka tidak akan menonjol bahwa banyak sementara masih memberi sinyal kepada pengguna ada sesuatu yang lebih tersedia.

2
Nir

Lihatlah ke Web untuk panduan. Itu tempat sebagian besar pengguna tinggal, dan itu memandu harapan UI mereka. Lihatlah situs populer untuk demografis target Anda, dan lihat bagaimana mereka mengelola navigasi. Menavigasi musik mirip dengan menavigasi foto, jadi lihat situs surat kabar dan majalah untuk panduan.

Navigasi semacam ini paling sering dilakukan dengan tombol kecil di atas grafik, atau dengan tombol transparan yang muncul pada mouse-over. Jika UI Anda dirancang agar pengguna mengklik sampul album untuk mendengarkannya, mereka akan menemukan tombol tranparan dengan cukup cepat.

1
David Veeneman