[ad_1]
Kéo và thả, trong ngữ cảnh của ứng dụng web, cung cấp cho mọi người một cách trực quan để nhận và di chuyển các yếu tố giống như chúng ta trong thế giới thực . Một chút sai lệch này làm cho các UI có các tương tác kéo và thả trực quan để sử dụng.
Skeuomorphism là nơi một đối tượng trong phần mềm bắt chước đối tác trong thế giới thực của nó. – IDF
Mặc dù có thể không có đối tác trong thế giới thực rõ ràng để kéo thẻ kỹ thuật số xung quanh danh sách Kanban tương tác, chẳng hạn như Trello, hành động này rất quen thuộc với con người, vì vậy rất dễ để tìm hiểu.
Sự đa dạng hiện đại là cây cầu ở giao điểm của thiết kế kỹ thuật số và công nghiệp. Đó là về việc tạo điều kiện cho việc tương tác thiết bị phi truyền thống mà không mất khả năng sử dụng. Đó là về làm phong phú và làm sinh động các vật thể trong thế giới thực trong bối cảnh sinh lý con người của chúng ta.
Justin Baker
Trong khi các tương tác này trở thành một đặc điểm chung trong một một loạt các công cụ trên web – từ các bảng Kanban như Trello, đến các hộp thư email thực tế như Gmail, chúng thực sự rất khó để xây dựng. Tôi tìm thấy điều này khi làm cho riêng mình. Đây là những gì nó trông giống như lúc này:
Trong bài viết này, tôi sẽ trình bày:
- Cân nhắc thiết kế : Khả năng truy cập và hơn thế nữa
- Thư viện React : Một vài lựa chọn để xây dựng giao diện kéo và thả UI
- nó phản hồi : Kéo và thả trên thiết bị di động
Trước khi xem xét các thư viện khác nhau, và phía kỹ thuật thực hiện kéo và thả, tôi khuyên bạn nên bắt đầu với những cân nhắc thiết kế Điều gì làm cho một kéo và thả tốt? Dưới đây là một vài điều:
Có thể truy cập
Khả năng truy cập có thể là thách thức đối với việc kéo và thả, với các thư viện kéo và thả truyền thống lướt qua nó:
tương tác thả chỉ là một tương tác chuột hoặc chạm.
Alex Reardon
Nếu người dùng không thể kéo và thả vật lý bằng phương pháp tương tác của họ, Làm thế nào bạn có thể làm cho nó dễ dàng hơn? Tương tác bàn phím là một lựa chọn tốt, ví dụ:
- Nhấn phím cách để chọn
- Sử dụng các phím mũi tên để di chuyển phần tử đã chọn
- Sử dụng lại khoảng trống để thả
]
Để hiểu rõ hơn về vấn đề này, hãy xem '4 mẫu chính cho kéo và thả' của Jesse Hausler. Ông phác thảo các mẫu phổ biến và gợi ý cách có thể truy cập bằng cách sử dụng ARIA Live Area để liên lạc với hoạt động, danh tính và trạng thái.
Xử lý kéo
tay cầm kéo là khu vực của phần tử có thể kéo mà bạn nhấp hoặc chạm để chọn và di chuyển một mục. Nó cũng có thể được gọi là khu vực có thể kéo:
Ví dụ trên cho thấy tay cầm nhỏ, có thể hoạt động cho ai đó trên máy tính để bàn thiết bị có con trỏ chuột, nhưng có thể khó dùng ngón tay mũm mĩm trên màn hình cảm ứng nhỏ. Trong trường hợp đó, bạn có thể muốn thực hiện một số thay đổi.
Bạn cũng có thể đặt câu hỏi bằng cách sử dụng tay cầm kéo. Mặc dù hữu ích trong một số bối cảnh, nhưng trong những bối cảnh khác, có thể không thực sự cần thiết:
Đối với các thành phần thường không liên quan đến kéo và thả, tay cầm kéo giúp người dùng khám phá kéo và thả như một hành động khả dụng . Nhưng trong trường hợp kéo và thả luôn là một hành vi được mong đợi, thì không cần thiết.
Grace Noh, trên blog Marvel
Ví dụ về Notion
]
Điều này thể hiện rõ trong Notion. Đối với chế độ xem danh sách thông thường của họ, một trình điều khiển kéo thực sự nhỏ có mặt, nhưng không dành cho chế độ xem Kanban. Trong tình huống đó, toàn bộ thẻ trở thành bề mặt có thể kéo được:
Các trạng thái kéo và thả
Làm thế nào để người dùng của bạn biết khi nào bắt đầu kéo? Sử dụng các trạng thái có thể là một chỉ số tốt. Một số tiểu bang cần xem xét là:
- On Hover
- On Press (hoặc nhấp)
- Khi kéo
- Khi thả
- Giữ chỗ thả tùy chỉnh – xem dòng chấm màu xanh ở trên. Đây là một cải tiến tuyệt vời cho trải nghiệm tổng thể, vì không có nghi ngờ gì về việc thành phần sẽ hạ cánh ở đâu.
- Tốc độ kéo chậm hơn – React-beautiful-dnd gần như quá nhạy cảm để thả các thành phần vào đúng nơi. Thư viện này cảm thấy được kiểm soát nhiều hơn và chậm hơn, hoạt động tốt hơn đối với các thành phần lớn.
- Không có giới hạn nào đối với các thùng chứa chồng chéo – điều này giải quyết vấn đề tôi gặp phải với React-beautiful-dnd
- Kích thước tay cầm kéo : Trên thiết bị cảm ứng, có nên có tay cầm kéo không? Tay cầm có thể sử dụng được không?
- Touch Input : Touch khác với nhấp chuột.
- Kéo bề mặt : Có thể toàn bộ thành phần một bề mặt có thể kéo. Nếu vậy, có nên có một nút để kích hoạt chế độ kéo? Khi thành phần được chạm để kéo, chúng ta cần đảm bảo văn bản không được tô sáng do nhầm lẫn.
- Kích hoạt ở chế độ chờ : Nếu người dùng chạm và giữ cùng một vị trí trên một thành phần có thể kéo được, kích hoạt kéo.
- Bỏ qua khi vuốt : Nếu thời lượng chạm thấp, chẳng hạn như vuốt, chúng ta có thể đoán rằng người dùng đang cuộn.
]
Những âm thanh này có thể rõ ràng, nhưng nó cũng phụ thuộc vào thiết bị đầu vào. Ví dụ: thực sự không có trạng thái di chuột trên thiết bị cảm ứng.
Việc sử dụng đúng mục đích của ứng dụng của bạn là rất quan trọng và Grace Noh đi sâu hơn nhiều vào Điều này trong bài viết của cô, Kéo và Thả cho Hệ thống Thiết kế. Trong đó, cô bao quát các con trỏ hệ thống, phong cách nhà nước, khả năng chi trả và hơn thế nữa:
May mắn thay, những người như Alex Reordon cũng đã cân nhắc rất nhiều về những điều trên khi xây dựng thư viện kéo và thả nguồn mở mà chúng ta có thể tận dụng. Kiểm tra bài đăng của anh ấy, Xem lại Kéo và Thả, để biết thêm. Trong phần tiếp theo, tôi sẽ cho bạn thấy tôi đã tìm thấy cách làm việc với AlexD React Beautiful DnD của Alex và thực sự tại sao cuối cùng tôi không sử dụng nó:
Với việc có sẵn các thư viện kéo và thả sẵn, việc tạo riêng của bạn từ đầu có thể là điều bạn muốn tránh. Tuy nhiên, điều quan trọng cần lưu ý là có những hạn chế đối với các thư viện nguồn mở dẫn đến chúng không hoạt động cho thiết kế của bạn. Trong trường hợp đó, thực sự có thể nhanh hơn để bắt đầu lại từ đầu thay vì thử và xây dựng các cách giải quyết.
Ví dụ, công cụ thiết kế Marvel có trường hợp sử dụng duy nhất, theo đó các thành phần được kéo theo chiều dọc giữa 'Phần' và cũng theo chiều ngang:
Giao diện người dùng như thế này có thể làm cho nó trở thành một lựa chọn tốt hơn để suy nghĩ lại về việc kéo và thả mình. Tôi phát hiện ra điều đó cho chính mình khi bạn thấy bên dưới.
Bây giờ bạn nhận thức được có những hạn chế, tôi đã đi qua các thư viện mà tôi đã thử. Đây chỉ là các thư viện React, vì Letter được tạo bằng React:
React Beautiful DnD
Đây là một trong những thư viện được sử dụng rộng rãi nhất, hãy kiểm tra Số liệu thống kê của GitHub:
Lợi ích
Lợi ích của thư viện này là rất lớn – bạn đã đề cập đến một loạt các kịch bản thiết kế đã được nêu ra trước đây phần. Theo tôi, hỗ trợ khả năng truy cập của nó khác biệt với phần còn lại theo quan điểm của tôi:
Nó cũng khá vô hạn khi hỗ trợ thiết bị đầu vào. Nhìn kìa, một cảm biến suy nghĩ:
Chuyện hay gì về cảm biến webcam:
Tôi hy vọng sẽ quay trở lại React-Beautiful khi vấn đề về hộp cuộn cuộn lồng nhau được khắc phục – họ hiện đang làm việc trên nó.
React Smooth DnD
Không tuyệt như React-Beautiful, nhưng đây là cái tôi đã đi cùng sự kết thúc.
Lợi ích
Những hạn chế
Không có đề cập đến hỗ trợ bàn phím hoặc cân nhắc khả năng truy cập với React-Smooth-DnD. Bây giờ, kiến thức phổ biến là chúng ta nên xây dựng khả năng tiếp cận trước tiên và tôi đã phác thảo nó trong phần trước. Mặc dù về lý thuyết, nó rất dễ dàng và rõ ràng, nhưng thực tế làm việc với thời gian và nguồn lực rất hạn chế khiến cho tính năng kéo và thả có thể truy cập được rất khó để xử lý một mình. Tôi phải dựa vào các thư viện nguồn mở cho việc này.
Một lần nữa tôi đã thử là React-DnD. Đây là cái đầu tiên tôi từng sử dụng, khi ứng dụng Letter được gọi là Email Rái cá. Tôi thấy nó khá khó sử dụng khi thêm hình ảnh động, vì vậy đã chuyển sang React-beautiful-dnd:
Nói chung, có lẽ công bằng với nói rằng tôi đã trải qua kéo và thả địa ngục, và trở lại. Tôi cũng đã gõ 'kéo và thả' 30 lần cho đến nay trong bài viết này 🤷🏽♂️.
Một điều là một vị cứu tinh là tất cả các thư viện kéo và thả (31) này hoạt động tương tự nhau, vì vậy nó không không thể trao đổi giữa chúng. React-beautiful-dnd và React-smooth-dnd đều dựa trên các khái niệm tương tự – kéo container và vật phẩm có thể rơi, làm cho các thành phần phản ứng tương tự từ mức cao.
Bạn không bao giờ biết kích thước màn hình hoặc loại thiết bị mà ai đó sẽ sử dụng khi dùng thử ứng dụng của bạn. Nếu họ sử dụng thiết bị di động, có một vài điều nữa cần xem xét:
Trong số 3, tôi đã thấy đầu vào cảm ứng là một trong những khía cạnh thách thức hơn. Khi người dùng chạm vào thành phần có thể kéo và sau đó vuốt để di chuyển nó, toàn bộ cuộn với nó. Do đó, cuộn cảm ứng gốc phải bị vô hiệu hóa trong quá trình kéo thành phần. Để thực hiện điều này, React có một danh sách các sự kiện tổng hợp để chúng tôi tham gia (có thể không có ý định chơi chữ):
Bằng cách sử dụng onTouchStart để phát hiện khi người dùng nhấn một yếu tố có thể kéo, cuộn có thể bị vô hiệu hóa vào đúng thời điểm.
Thời lượng chạm
Nhưng đó không phải là tất cả! Làm thế nào để bạn biết nếu người dùng muốn cuộn, hoặc chọn một thành phần? Do đó, việc phát hiện thời lượng cảm ứng có thể được sử dụng:
Các bước tiếp theo của tôi
Bây giờ tôi đã có thao tác kéo và thả trên máy tính để bàn ( trong một thanh menu popout – đó là một thứ hoàn toàn khác vấn đề), tôi đang cải thiện trải nghiệm trình chỉnh sửa của mình trên các màn hình nhỏ hơn.
Một ý tưởng tôi đang khám phá là làm cho trình đơn kéo và thả có thể ẩn trên màn hình nhỏ hơn, vì vậy có thể sử dụng toàn bộ không gian cho chỉnh sửa. Đây là một Nguyên mẫu Marvel về điều đó:
Cảm ơn bạn đã đọc, nếu bạn có bất kỳ câu hỏi nào hoặc muốn tôi đi vào chi tiết hơn, hãy bỏ qua một lời bình luận. Ngoài ra, hãy tìm hiểu thêm về công cụ thiết kế Email mà tôi đang xây dựng ở đây.
[ad_2]
Source link: webdesignernews