it-swarm-vi.tech

Thiết kế giao diện người dùng để đặt hàng các mục trong danh sách

Thiết kế thành phần/giao diện người dùng nào bạn sẽ sử dụng để sắp xếp các mục trong danh sách (bảng có nút di chuyển lên/xuống)?

6
padis

Kéo và thả các mục có lẽ là tốt nhất cho hầu hết các UI. Thật không may, thật khó để làm cho tính năng này có thể khám phá được. Một khu vực "lấy" gần với mỗi mục giúp. Phản hồi trực quan trong khi kéo cũng như cuộn tự động khi một mục được kéo vào Edge là cần thiết trong giao diện người dùng sắp xếp kéo và thả tốt.

Thật tốt khi cung cấp move upmove down nút, ngoài việc kéo và thả. Không có biểu tượng/phong cách "túm" được công nhận và phổ biến ngay lập tức. Đối với các giao diện được sử dụng không thường xuyên, thời gian sử dụng các nút hơi vụng về có thể ít hơn thời gian để người dùng khám phá chức năng kéo và thả hiệu quả hơn.

Ngoài ra, với tính năng kéo và thả, có nhiều chi tiết tinh tế gây khó chịu cho người dùng nếu không được thực hiện chính xác (ví dụ: autoscroll). Các nút không hiệu quả trong việc sử dụng thường xuyên, nhưng rõ ràng, dễ sử dụng và dễ viết mã hơn nhiều.

5
dbkk

Kéo và thả có thể được coi là 'thao tác trực tiếp', trong đó các lần nhấp trực tiếp vào danh sách có hiệu lực, so với 'thao tác gián tiếp' trong đó bạn có một nút riêng hoặc hành động khác có hiệu lực trong danh sách.

Tùy thuộc vào những gì trong danh sách của bạn, cả hai có thể phù hợp.

Dù bạn làm gì, hãy ghi nhớ lời khuyên hiền triết của 10 sai lầm thiết kế ứng dụng hàng đầu của Jakob Nielsen :

Thiết kế kéo và thả thường là những kẻ phạm tội tồi tệ nhất khi không rõ ràng có thể kéo thứ gì đó hoặc nơi có thể bỏ thứ gì đó. (Hoặc điều gì sẽ xảy ra nếu bạn kéo hoặc thả.) Ngược lại, các hộp kiểm đơn giản và các nút lệnh thường làm cho nó rõ ràng một cách đau đớn những gì bạn có thể nhấp vào.

Vì vậy, nếu bạn cung cấp khả năng thao tác trực tiếp trong danh sách, hãy cung cấp các tín hiệu trực quan như:

  1. khu vực 'lấy đồ' trực quan (loạt dấu chấm hoặc đường kẻ) gợi ý 'khả năng nắm bắt'
  2. thay đổi con trỏ
  3. phản hồi khi bạn di chuyển. Xem bản demo này mặc dù chú ý cách điểm của tôi (1) không được hỗ trợ và vì vậy không rõ ràng những danh sách này có thể sắp xếp được.
4
Julian H

Tôi đồng ý rằng thao tác trực tiếp của các yếu tố có lẽ được ưa thích ngay bây giờ.

Mặc dù các cáo buộc rằng 37 Tín hiệu là một chút về phía kiêu ngạo, Basecamp của họ là một ứng dụng có thể sử dụng nổi bật. Hầu như bất kỳ danh sách nào trong ứng dụng đó đều cho phép sắp xếp lại các yếu tố thông qua kéo thả.

Đầu tiên, bạn phải nhấp để chuyển sang chế độ đặt hàng lại, thông qua liên kết văn bản ở góc trên. Sau đó, có một hình ảnh nhỏ gợi ý rõ ràng 'khả năng lấy được' mà bạn nhấp và giữ và sau đó thao tác để di chuyển vật phẩm. Xem tệp đính kèm.

alt text

2
jameswanless

Các nút lên/xuống đều ổn, nhưng xu hướng là hoạt động trực tiếp trên dữ liệu, tức là có thể nhấp (hoặc nhấn) vào mục và sau đó di chuyển nó. Một ví dụ nổi bật là hàng đợi Netflix. Điều này có thể hoạt động ngay cả khi chọn nhiều mục trong danh sách.

0
Hisham

Sở thích của tôi là sử dụng kéo và thả với các bộ chọn kéo rõ ràng hiển thị khi di chuột qua. Trong ứng dụng của chúng tôi, chúng tôi sử dụng một mũi tên lên/xuống gấp đôi hiển thị để chỉ ra mục có thể được sắp xếp lại.

Chỉ cần thay đổi con trỏ là đủ tốt cho đám đông am hiểu công nghệ, nhưng đối với các ứng dụng cho mục đích chung, bạn muốn một cái gì đó rõ ràng hơn.

0
Sam