it-swarm-vi.tech

Làm rõ những mục nào trong danh sách dài được chọn

Tôi đang cố gắng thiết kế một phần giao diện web cho phép người dùng gắn thẻ các mục và xem tất cả các mục bằng thẻ hoặc bộ thẻ trên chúng - nghĩ rằng gmail, nếu gmail cho phép bạn dễ dàng chọn nhiều thẻ để xem tất cả tin nhắn với tất cả tin nhắn của những thẻ đó. Cách tốt nhất để hiển thị cho người dùng bộ thẻ nào họ đang xem?

Làm nổi bật đơn giản hoạt động cho một thẻ, nhưng nếu danh sách các thẻ dài hơn màn hình, họ sẽ không thể nhìn thấy tất cả chúng cùng một lúc, dẫn đến việc người dùng đã chọn thẻ nào không rõ ràng. Thêm vào vấn đề này, tôi đã có một lượng không gian nhỏ để làm việc - toàn bộ giao diện thẻ và vật phẩm có kích thước khoảng 300x500 pixel, vì vậy hiển thị các thẻ được chọn trong danh sách ngang dài không phải là một tùy chọn.

Tôi đã nghĩ đến việc tạo một danh sách thứ cấp ở đầu danh sách thẻ với các thẻ đã chọn (giống như những danh sách đó danh sách thả xuống có Hoa Kỳ và các quốc gia khác nhấn mạnh ), nhưng tôi tự hỏi liệu có một sự thay thế tốt hơn.

13
sslepian

Sử dụng mẫu Khuôn mặt điều hướng . Amazon.com thực hiện công việc tuyệt vời với nó:

Amazon faceted navigation

(ảnh chụp màn hình từ các kết quả tìm kiếm này cho Nintendo DS - lưu ý rằng bạn có thể giữ cho bạn ngắn hơn nếu bạn có một ràng buộc dọc)

Một số điều cần lưu ý:

  • Giao tiếp rất rõ ràng về mục hiện được chọn trong mỗi khía cạnh là gì (trong trường hợp này, màu đen đậm so với màu xanh cho các liên kết)
  • Tính dễ đọc tuyệt vời bằng cách không biến mỗi mục thành một siêu liên kết, mặc dù chúng đều là các siêu liên kết - trong trường hợp này, việc ưu tiên mức độ dễ đọc hơn mẫu gạch chân siêu liên kết sẽ hữu ích hơn
  • Mỗi khía cạnh hiển thị có bao nhiêu kết quả có sẵn nếu bạn nhấp vào chúng. Loại phức tạp để thực hiện đôi khi, tùy thuộc vào phụ trợ tìm kiếm của bạn.
  • Các điều khiển phù hợp tùy thuộc vào loại khía cạnh bạn đang xử lý, cũng như sao chép tuyệt vời và từ ngữ đúng ("30 ngày qua" cho ngày, vì bạn không quan tâm đến ngày cụ thể trong trường hợp này, v.v.)
  • Khả năng tăng một cấp lên với mỗi khía cạnh, về cơ bản là "hoàn tác" lựa chọn của bạn trong khía cạnh đó. Lưu ý việc sử dụng < trái ngược với chữ thập đỏ (x) giống như nhiều trang web khác có.
  • Kết hợp điều này với mẫu điều hướng bánh mì như Amazon đã làm để tăng thêm tính hữu dụng trong trường hợp mọi người đang quét từ trên xuống và không nhìn vào cột trái/phải

Đừng lo lắng quá nhiều về việc không thể nhìn thấy mọi thứ được chọn nếu nhiều thứ được chọn - đó là một cạm bẫy điều hướng chung về mặt rơi vào. Người dùng sẽ nhận được rằng có nhiều tùy chọn được chọn hơn nữa trên trang nếu họ đã thực hiện nhiều lựa chọn (hãy tưởng tượng chọn một trong mỗi khía cạnh trong ví dụ của Amazon). Để bù đắp một chút, bạn có thể nhóm các khía cạnh được chọn ở trên cùng như @onnodb gợi ý, mặc dù tôi sẽ không ẩn chúng sau một nhấp chuột (như trong điều khiển select).

7
Rahul

Tôi muốn nói rằng sẽ rất hợp lý khi tạo 'danh sách phụ' các thẻ được chọn này ở đầu danh sách, như vậy: (ý tưởng tuyệt vời, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Cung cấp cho các thẻ đã chọn một màu nền khác, thêm nút "(X)" để xóa chúng và tôi muốn nói rằng bạn có một giao diện người dùng rất hữu dụng cho việc này.

5
onnodb

Vì bạn có một bất động sản hạn chế để làm việc với bạn, bạn có thể thực hiện những điều sau đây. Đặt danh sách thẻ trong danh sách thả xuống và có nút cộng thêm một hàng khác với danh sách thả xuống của thẻ. Bằng cách này, các thẻ duy nhất được hiển thị là những thẻ mà người dùng đã chọn.

enter image description here

3
Denzo

Tôi biết đó là câu hỏi khá cũ, nhưng nó vẫn còn hiệu lực cho ứng dụng ngày nay theo quan điểm của tôi.

Để có câu trả lời, tôi lấy cảm hứng từ thanh cuộn dọc của Visual Studio:

MS Visual Studio scroll bar

  • chiều cao thanh trượt tương ứng với kích thước của khu vực trên màn hình so với tổng chiều dài của nội dung
  • đường ngang màu xanh mỏng hiển thị nơi con trỏ hiện đang được đặt
  • các thanh màu vàng đậm đánh dấu các dòng tìm thấy thuật ngữ tìm kiếm

Đối với câu hỏi OP - nếu bạn có một danh sách các mục vượt quá dung lượng màn hình, bạn phải sử dụng thanh trượt. Bạn có thể sử dụng thanh trượt để hiển thị vị trí của các mục đã chọn trong danh sách.

0
Mike

Chỉ cần ra khỏi đỉnh đầu của tôi ...

Tùy chọn 1: Sửa đổi thuộc tính 'title' để hiển thị các mục đã chọn khi di chuột. Tùy chọn 2: Sử dụng jquery để thêm một sự kiện di chuột cho danh sách di chuyển ngang qua phần tử và liệt kê các mục đã chọn.

0
Babak Naffas

Vâng, có một vài cách để làm điều này:

1) Như bạn đã đề cập, bạn có thể đánh dấu các thẻ được chọn, trong khi vẫn duy trì thứ tự của chúng trong danh sách. Để khắc phục vấn đề người dùng không nhận thức được các thẻ được chọn không hiển thị trên trang, bạn có thể làm gì đó để gây sự chú ý cho họ - một cái gì đó như nhấp nháy mũi tên ở cuối phần thẻ của trang để thông báo cho họ rằng có gì đó quan trọng nếu họ cuộn xuống

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

Dấu == đánh dấu các thẻ được tô sáng và vv là các mũi tên nhấp nháy

2) Ngoài ra, bạn có thể tạo danh sách bổ sung đó ở trên cùng, nhưng xóa các thẻ khỏi bản gốc để bạn luôn có chiều cao phù hợp với phần thẻ

3) Bạn có thể hiển thị các thẻ đã chọn dưới dạng danh sách dọc dưới tiêu đề của kết quả tìm kiếm.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Lưu ý các xs nhỏ bên cạnh mỗi tên Tag; những điều này sẽ cho phép người dùng nhanh chóng loại bỏ các thẻ và kết quả sẽ thay đổi tương ứng.

Tôi thích các tùy chọn 2 hoặc 3. 3 Có thể tốt hơn, vì người dùng có thể hơi ngạc nhiên khi danh sách các thẻ đang thay đổi thứ tự khi họ tiếp tục chọn thẻ.

0
Waleed Al-Balooshi