it-swarm-vi.tech

Có cách nào "hay" để hiển thị các biểu tượng điều hướng để chúng không làm lộn xộn giao diện người dùng không?

Tôi đã có một ứng dụng máy tính để bàn nhỏ quét các thư mục nhạc và chọn ngẫu nhiên một album để phát. Phiên bản đầu tiên là WinForms và có các nút "trước" và "tiếp theo" ở hai bên của album nghệ thuật được kích hoạt khi có nhiều album của cùng một nghệ sĩ.

enter image description here

Tôi không hài lòng với giao diện người dùng này vì các nút chiếm quá nhiều không gian.

Tôi đang viết lại ứng dụng bằng WPF và tôi đang tìm kiếm một cách tốt hơn để chỉ ra rằng có những album khác của cùng một nghệ sĩ. Tôi đã thử nghiệm hiển thị các nút trên đỉnh của ảnh bìa và chỉ hiển thị chúng khi chuột lăn qua vị trí của chúng nhưng tôi không hài lòng với kết quả chủ yếu vì không có dấu hiệu nào cho thấy các tùy chọn ở đó.

Tôi đã tìm thấy một mẹo nhỏ trên Brian Stevens Photography trang web nơi con trỏ thay đổi thành "+" và "-" trên mỗi nửa hình ảnh để biểu thị điều hướng, nhưng tôi cũng sử dụng nhấp chuột vào hình ảnh để chơi album đó vì vậy tôi phải điều chỉnh cách tiếp cận này nếu tôi muốn sử dụng nó cho mình.

Có cách nào tốt hơn hay là băng chuyền hoặc nắp đậy kiểm soát con đường đi với điều này?

Để biết thêm một chút nền tảng hãy đọc này bài đăng trên blog của tôi.

10
ChrisF

Về cơ bản có 2 ý tưởng ở đây, đầu tiên là hiển thị các vòng tròn nhỏ, một ý tưởng được tô sáng ở giữa là trang/album hiện tại đang được hiển thị, khi bạn nhấp vào mũi tên, nó sẽ làm nổi bật cái tiếp theo/trước đó. Điều này cung cấp cho người dùng ý tưởng về số lượng album có sẵn cho nghệ sĩ nhất định.

(tái sử dụng Matt Lutze xuất sắc ASCII)

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<       o o o * o o o        >>

Điều tiếp theo này có thể được hiển thị khi có nhiều hơn 6 album cho một nghệ sĩ, chỉ hiển thị album 1 trong tổng số album.

[Settings]  [Random album]  [Info]

 {                              }
 {                              }
 {            Cover             } 
 {                              }
 {                              }

 <<          1 of 10           >>

Bằng cách này, các yếu tố vẫn hiện diện và hiển thị một hàng đợi trực quan (hoặc bằng chữ) có nhiều thứ để xem/nghe.

Ý tưởng ngẫu nhiên: Tất nhiên tôi thực sự thích ý tưởng nhấp vào Cover Art và có thể nhìn vào bên trong, trong trường hợp này chỉ đơn giản là hiển thị danh sách các bài hát có sẵn trong album đó. Đây sẽ là tùy chọn để chơi một bài hát cụ thể.

[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

Các nút điều hướng trông xấu vì sự bất hòa về thị giác

  • Chúng có hình tròn và hình vuông.
  • Chúng có độ sáng 3D mạnh mẽ và hình ảnh phẳng

  • Không gian họ lãng phí bên trên và bên dưới là màu xám không sử dụng, không sử dụng trang trí tương tự với các nút, do đó, nó cũng không hài hòa với các nút.

Căn hộ hình chữ nhật hẹp nút toàn bộ chiều cao của album nghệ thuật, sử dụng ">" (hoặc "<") ở giữa sẽ giải quyết ba vấn đề này, nhưng ảnh bìa vẫn sẽ là tách điều khiển điều hướng của bạn. Nó sẽ hoạt động tốt hơn khi có các điều khiển điều hướng trong một đoạn trực quan.


Đây là một giải pháp lỗi thời (trái) và hiện đại hơn (phải).

Kiểu dáng của các nút (vát/làm tròn/thả bóng/những gì bạn có) nên khớp với kiểu dáng cho khung ảnh bìa.

enter image description here

Nút bên trái có lợi thế là bạn có thể dễ dàng tăng kích thước của các nút trái/phải tùy thuộc vào số lượng bất động sản bạn muốn cung cấp cho họ và mức độ bạn muốn chúng dễ dàng bị tấn công.

Một bên phải có một băng chuyền nhỏ mắt cá bên dưới nó. Bạn cần phải chụp ảnh cũ hình ảnh thu nhỏ khi không được kích hoạt để không làm sao lãng ảnh bìa và bạn có ít sự lựa chọn về kích thước.

Bên trái là đơn giản và hiệu quả, bên phải có nhiều kẹo mắt. Tôi thích bên trái. Bạn có thể đoán thời đại nào hương vị của tôi trong âm nhạc đến từ.

5
James Crook

Như một đề xuất khác, CoverFlow của Apple sử dụng thanh cuộn ngang bên dưới ảnh bìa để cho phép người dùng chà qua các nắp.

Ưu điểm:

  • Có thể nhanh chóng chà qua nghệ thuật. Có thể không phải là một yêu cầu cho ứng dụng của bạn.
  • Cân okish với số lượng lớn của nghệ thuật.
  • Cho phép tìm kiếm ngẫu nhiên tốt bằng cách chà qua lại.

Nhược điểm:

  • Không rõ có bao nhiêu mặt hàng.
3
ICR

Chỉ vì một yếu tố UI không rõ ràng ngay lập tức, điều đó không có nghĩa đó là một lựa chọn tồi. Tôi chắc chắn sẽ đi với một cái gì đó khi nhấp vào phía bên phải của trang bìa tiến lên một bước và nhấp vào phía bên trái trở lại. (Giả sử rằng điều này sẽ chỉ được sử dụng với các ngôn ngữ từ trái sang phải?)

Thay vì dấu + và - của trang web ảnh, tôi chỉ đề xuất <và>. Và tôi sẽ không để chúng biến đổi hoặc theo con trỏ, tôi chỉ cần đặt chúng ở giữa bên phải và giữa bên trái.

Bạn có thể thử nghiệm với việc nhấp vào giữa như một cách để phát/tạm dừng album.

Giao diện người dùng gần như vô hình này rất dễ sử dụng một khi bạn đã tìm thấy nó, và nó trông đẹp hơn nhiều so với việc có các nút riêng biệt treo xung quanh đó (như thường lệ) trông giống như các nút. Cực đoan thẩm mỹ của điều này sẽ là kết hợp tất cả các yếu tố UI vào các yếu tố vô hình trong bản xem trước bìa. Vì vậy, bạn chỉ nhìn thấy bìa (và có lẽ là tiêu đề bài hát) khi chuột không di chuột qua nó. Có lẽ điều này sẽ làm việc cho ứng dụng của bạn, và có lẽ không.

3
Scott Newson

Câu hỏi thú vị, và một số điểm tốt với cả hai câu trả lời hiện có.

Về các điều khiển toàn diện so với các điều khiển ẩn: Tôi khuyên bạn nên nghiêng về các điều khiển luôn hiển thị, nhưng không gây rối mắt. Màu xanh lá cây, xanh dương, hoa văn; tất cả đều có khả năng gây mất tập trung ít nhất. Tôi thường đồng ý với Nir ở đây về việc sử dụng các mũi tên đơn giản hoặc ký hiệu "lớn hơn"

<< {Hình ảnh} >>

so với các biểu tượng/nút.

Tôi cũng sẽ mở rộng đề xuất về các biểu tượng hàng đầu của bạn và có lẽ đề nghị cho phép khái niệm kết nối trực quan ranh giới ứng dụng/ứng dụng web trên máy tính để bàn:

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

Tôi thường có xu hướng làm cho ảnh bìa trở thành đối tượng nổi trội trong giao diện. Hàng nút mỏng liên kết văn bản ở trên cùng, tiêu đề, sau đó là một hình ảnh lớn của trang bìa, với các thanh lùi hẹp ở hai bên. Hoặc điều tương tự.

Tuy nhiên, bạn xoay nó, tôi ít nhất đề nghị không sử dụng các chỉ báo động mới lạ như biểu tượng con trỏ chuột thay đổi. Rất nhiều người sẽ sợ hãi hoặc lo lắng khi con trỏ của họ thay đổi; từ kinh nghiệm của tôi, người dùng hy vọng con trỏ của họ sẽ làm những việc có thể dự đoán được sau những hành động có thể dự đoán được và không làm họ ngạc nhiên.

Dự án gọn gàng, và cảm ơn cho các cuộc thảo luận. Tôi tò mò muốn nghe người khác nghĩ gì.

2
Matt

Là người trả lời email hỗ trợ, tôi có thể nói với bạn rằng nếu một yếu tố giao diện người dùng không rõ ràng ngay lập tức thì phần trăm cơ sở người dùng của bạn sẽ không bao giờ tìm thấy.

Họ cũng sẽ không bao giờ đọc tài liệu hoặc bất kỳ thông báo bật lên nào.

Một tính năng nên rõ ràng (và thậm chí thường có một nút không đủ rõ ràng) hoặc chỉ hoạt động mà không làm phiền người dùng (trình kiểm tra chính tả gạch dưới màu đỏ là một ví dụ tốt, bạn không phải tìm thấy nó - nó chỉ ở đó ).

Bạn có thể định kiểu lại các nút sao cho chúng không quá lớn và để chúng hòa trộn nhiều hơn vào nền, ví dụ: nếu bạn thay thế các nút bằng hai mũi tên nhỏ không có khung nút nặng đó, chúng sẽ không dính vào đó nhiều trong khi vẫn báo hiệu cho người dùng có sẵn một cái gì đó.

2
Nir

Hãy tìm đến Web để được hướng dẫn. Đó là nơi hầu hết người dùng sống và nó hướng dẫn những kỳ vọng về UI của họ. Xem các trang web phổ biến cho nhân khẩu học mục tiêu của bạn và xem cách họ quản lý điều hướng. Điều hướng âm nhạc tương tự như điều hướng ảnh, vì vậy hãy tìm đến các trang báo và tạp chí để được hướng dẫn.

Việc điều hướng loại này thường được thực hiện bằng các nút nhỏ phía trên đồ họa hoặc bằng các nút trong suốt xuất hiện trên chuột. Nếu giao diện người dùng của bạn được thiết kế để người dùng nhấp vào bìa album để nghe, họ sẽ phát hiện ra các nút trong suốt đủ nhanh.

1
David Veeneman