Trong một lưới, làm thế nào để tự sắp xếp lại các hàng?
Tôi muốn cho phép người dùng của tôi sắp xếp lại các thành phần trong một lưới - không thực hiện sắp xếp tự động trên một cột. Họ chọn phần tử nào là phần tử đầu tiên, phần tử nào đến phần tử khác, v.v.
Tôi nghĩ và thấy một số giải pháp có thể hoạt động tùy theo trường hợp:
- Kéo và thả: gợi cảm nhưng không hoạt động đối với lưới dài khi cuộn hoặc phân trang. Một nhược điểm khác là nó vô hình, thậm chí bạn có thể không biết chức năng này có sẵn. Cuối cùng một số khéo léo là cần thiết. Tuy nhiên, nó có thể được sử dụng để di chuyển nhiều yếu tố cùng một lúc.
- Mũi tên lên/xuống: dễ hiểu và dễ sử dụng cho các bước di chuyển nhỏ, nhưng nhàm chán khi bạn phải di chuyển phần tử cuối cùng ở vị trí đầu tiên. Ngoài ra khi bạn di chuyển một yếu tố một vài bước, bạn phải bắt được mũi tên đó sau mỗi lần di chuyển. Chỉ hoạt động trên một yếu tố tại một thời điểm.
- Một cột chỉ mục: người dùng nhập một số chỉ vị trí của phần tử. Hữu ích khi người dùng biết vị trí tuyệt đối mong muốn. Khó đoán được điều gì sẽ xảy ra nếu một số đã tồn tại được nhập vào. Chỉ hoạt động trên một yếu tố tại một thời điểm.
Tôi muốn kết hợp hai trong số các kỹ thuật này như cột chỉ mục + kéo và thả, nhưng tôi sợ tích lũy những nhược điểm của cả hai thay vì có lợi ích của cả hai.
Các kỹ thuật sắp xếp lại đã được chứng minh để làm việc là gì?
Netflix kết hợp ba phương pháp trong hàng đợi của họ. Bạn có thể kéo và thả, nhưng cũng chỉ định một số hàng cụ thể hoặc nhấp để di chuyển nó lên trên cùng:
Điều tôi cảm thấy thú vị về cách tiếp cận của họ là họ đã đặt biểu tượng "Trên cùng" (khoanh tròn màu xanh lá cây) ngay trên mỗi hàng, trái ngược với việc yêu cầu người dùng thực hiện lựa chọn và sau đó nhấp vào đâu đó ở đầu trang, trong đó hầu hết các ứng dụng web đặt các biểu tượng hoặc nút như vậy.
Trong trường hợp của bạn, tôi sẽ sử dụng kéo và thả, nhưng sẽ đặt biểu tượng bánh răng trên mỗi hàng:
Điều này sẽ cho phép một số hành động:
Người dùng có thể kéo và thả một hoặc nhiều hàng
Người dùng có thể chọn nhiều hàng, sau đó nhấp vào biểu tượng bánh răng để có menu thả xuống và thực hiện bất kỳ số lượng nào, ví dụ: di chuyển lựa chọn lên trên cùng hoặc dưới cùng, di chuyển lựa chọn một số hàng được chỉ định lên hoặc xuống (trong trường hợp đó một hộp thoại nhỏ xuất hiện), sao chép, cắt, v.v ... Hầu như không có giới hạn.
Điều đầu tiên bạn cần tự hỏi mình trước khi bạn cố gắng tìm ra cách thực hiện là tần suất người dùng sẽ thực hiện nó.
Nếu nó sẽ được sử dụng thường xuyên, tôi sẽ cố gắng tạo nó để bạn sử dụng kéo và thả và chỉ cần tự động cuộn trang sau khi người dùng đạt đến một ngưỡng nhất định.
Đó là một quy tắc tốt để nói rằng nếu người dùng cần phải làm điều gì đó khá thường xuyên và bạn có thể làm cho nó dễ dàng hơn ngay cả bằng cách giới thiệu một số loại tương tác kỳ lạ, hãy làm điều đó. Người dùng ổn với đường cong học tập vì nó sẽ có lợi cho họ sau này.
Nếu nó không được sử dụng thường xuyên, tôi sẽ làm một mũi tên lên/xuống, nó có thể không thoát nhưng rõ ràng.
Tôi sẽ kết hợp mũi tên lên/xuống với drag'n'drop.
Phải đoán một số, hoặc phải làm việc đó trước, chỉ đơn giản là cồng kềnh. Và mặc dù các xung đột có thể và nên được xử lý bằng mã, ví dụ bằng cách tăng tất cả các số ở trên hoặc trên số đã nhập, hầu hết người dùng sẽ cố gắng tìm ra số chính xác trước đó, nếu không chắc chắn về cách trùng lặp hoặc sai số sẽ bị xử lý.
Mũi tên lên và xuống là cách sắp xếp lại thuận tiện hơn nhiều trong khoảng cách ngắn.
Đối với khoảng cách xa hơn và cho nhiều lần di chuyển vật phẩm, có thể thêm drag'n'drop. Để đảm bảo khả năng sử dụng kéo của khoảng cách trên một trang, việc cuộn tự động của lưới cũng nên được thực hiện. Điều này có nghĩa là trong quá trình kéo, lưới sẽ tự động cuộn khi bạn kéo chuột trong một lề nhất định của đường viền trên hoặc dưới của lưới. Đó chính xác là những gì Windows Explorer làm.
Để tăng thêm điều này hơn nữa, tốc độ cuộn có thể bắt đầu chậm và tăng lên khi lực kéo tiếp tục nằm trong khu vực "cuộn nhạy cảm". Mặc dù vậy, hãy cẩn thận với điều này, cộng với cài đặt tốc độ cuộn tối đa: Tôi đã bị thúc đẩy giận dữ bằng cách cuộn tự động tăng tốc rất nhiều và/hoặc nhanh đến mức tôi luôn di chuyển qua nơi tôi cần.
Drupal CMS có một giải pháp tương đối tốt cho việc này chia tỷ lệ thành danh sách 30-50 mặt hàng. Không chắc chắn làm thế nào nó sẽ tăng quy mô cao hơn.
Cấu hình "khối" trang web là một ví dụ - xem ảnh chụp màn hình bên dưới.
- Mỗi mục có tay cầm 4 chiều có thể được lấy cho các thao tác kéo và thả.
[.___.] Tay cầm cung cấp một "khả năng chi trả" trực quan mà vật phẩm có thể được kéo. - Danh sách được chia thành các phần.
[.__.] Di chuyển một mục đến một phần cụ thể có thể được thực hiện bằng cách chọn mục đó từ hộp tổ hợp được hiển thị cho mục đó
Cách tiếp cận "kéo và thả" mượt mà hơn nhiều so với việc mũi tên di chuyển vật phẩm một bước. JIRA làm điều đó và thật sự rất tốn công khi đưa mọi thứ vào đúng chỗ.
Nó phụ thuộc vào cách người dùng của bạn đang sử dụng hệ thống:
Nếu số hàng có ý nghĩa (ví dụ vị trí trong hàng đợi), bạn có thể muốn hiển thị nó và làm cho nó có thể chỉnh sửa.
Nếu "thực hiện trước" là một hành động phổ biến, bạn có thể muốn giới thiệu nút "di chuyển lên trên cùng" (hoặc di chuyển xuống dưới).
Nếu người dùng của bạn thích các phím tắt thêm và tắt phím tắt, hãy đảm bảo lựa chọn/tiêu điểm theo hàng khi nó di chuyển để nhấn phím tắt lên 3 lần sẽ thực sự di chuyển hàng lên 3 vị trí.
Bạn có thể thêm các nút lên/xuống, người dùng của tôi không thích những nút đó lắm (người dùng của bạn có thể khác)
Và cuối cùng, Kéo và thả, cách ưa thích của người dùng để sắp xếp lại các hàng - trong ứng dụng của tôi không có tay cầm kéo và người dùng quản lý để kéo và thả tốt (người dùng của bạn có thể khác)
Và, bất cứ điều gì bạn làm, hãy đảm bảo bạn kiểm tra nó trên người dùng cụ thể của bạn và xem họ thích nó như thế nào.