it-swarm-vi.tech

Thanh cuộn đã chết vào năm 2020?

Gần đây tôi đã nghe một nhà thiết kế nói điều gì đó về hiệu ứng mà các thiết kế web hiện đại không sử dụng thanh cuộn trực quan - hoặc ít nhất chúng chỉ hiển thị khi cuộn. Tôi là một nhà phát triển front-end và chưa thực sự nghe thấy điều này. Có sự thật này? Cụ thể câu hỏi của tôi là:

Đối với ứng dụng web, khi có thể cuộn nội dung :

  1. Có bao giờ nên có thanh cuộn có thể nhìn thấy (và tại sao)?
  2. Có nên không bao giờ có thể nhìn thấy thanh cuộn (và tại sao không)?
92
jbyrd

Có nên có.

Thanh cuộn có thể nhìn thấy là một khả năng "trang này có thể cuộn"

Nếu không có gợi ý trực quan như thế này thì chức năng có thể bị bỏ lỡ.

107
colmcq

Một số hướng dẫn thiết kế hiện đại chắc chắn phân tán các thanh cuộn có thể nhìn thấy liên tục, nhưng không phải tất cả. Ví dụ: trong Hướng dẫn thiết kế vật liệ , đối với các menu, nếu một menu có thể cuộn được, nó sẽ hiển thị một thanh cuộn. Trong mọi trường hợp, nếu nội dung của bạn có thể cuộn được, thì rõ ràng không nên nhìn vào nội dung mà nó có thể cuộn.

Tùy thuộc vào một nhà thiết kế hoặc hướng dẫn riêng lẻ cho dù khả năng đó có được thanh cuộn thể hiện rõ ràng mức độ bạn có thể cuộn xuống (truyền thống), liên kết "đọc thêm" hoặc mũi tên chỉ xuống màn hình (như trên nhiều trang chủ ứng dụng hiện đại hoặc blog ) hoặc mờ dần khi bạn tiếp cận Cạnh của khu vực nội dung ngụ ý rằng bạn có thể di chuyển hướng đó để nhìn rõ hơn hoặc rõ hơn, nhưng chính khả năng chi trả là thành phần cần thiết. Nó sẽ là thiết kế kém để trình bày nội dung có thể cuộn nhưng không chỉ ra rằng khả năng cuộn cho người dùng. Nó có thể làm người dùng thất vọng hoặc khiến họ bỏ lỡ thông tin quan trọng hoặc kêu gọi hành động.

102
sintax

Là người dùng chuột, tôi ghê tởm nội dung có thể cuộn mà không cho tôi xem và truy cập vào thanh cuộn.

  1. Thanh cuộn là một điều khiển. Nó cho phép tôi nhanh chóng điều hướng các trang lớn mà không có số lượng cuộn ngón tay, cuộn bánh xe, vv có thể so sánh với. Nó cũng mang lại cho tôi độ chính xác cao hơn cho hầu hết các trang so với bánh xe cuộn của tôi.

  2. Thanh cuộn cung cấp cho tôi thông tin. Nó cho phép tôi nhanh chóng xác định sẽ mất bao lâu để đọc nội dung trên trang (giả sử một thanh cuộn tốt có tay cầm: Tỷ lệ máng xối bằng với tỷ lệ màn hình: trang) và cho tôi biết tôi đã đi được bao xa qua trang . Nó cũng cho tôi một chỉ mục để xác định nơi tôi đang ở trên trang nếu tôi muốn nhanh chóng cuộn lên trên cùng và quay xuống.

  3. Thanh cuộn chiếm một lượng không gian không đáng kể. Ngay bây giờ, màn hình của tôi ở mức 1920 x 1080 = 2.1 Mpx. Cửa sổ Firefox có trang này nằm ở 1125 x 905 = 1.0 Mpx. Thanh cuộn có kích thước 16 x 816, chiếm tổng cộng 13 Kpx, tương đương 1,3% màn hình của tôi. Màn hình của tôi khá gần với tôi vì tôi sử dụng nó để chơi game, vì vậy tôi có xu hướng giữ cho cửa sổ của tôi hẹp hơn so với màn hình, vì vậy thanh cuộn hoàn toàn không chiếm dung lượng.

  4. Có những lúc tôi thậm chí không biết nội dung có thể cuộn được, mặc dù tôi có xu hướng thử cuộn bằng bánh xe mà không kiểm tra thanh, vì vậy tôi nghi ngờ đây là một vấn đề lớn đối với các trang web. Đối với các ứng dụng máy tính để bàn thường không cuộn, nó sẽ là một vấn đề lớn hơn.

  5. Nếu bạn muốn một thanh cuộn có thể ẩn, nó sẽ xuất hiện bất cứ khi nào tôi cuộn thủ công (thông qua bánh xe chuột, phím bàn phím, bàn di chuột, v.v.) và bất cứ khi nào tôi di chuyển chuột về phía Cạnh phải của màn hình.

Thiết bị di động phức tạp hơn, vì thanh cuộn chiếm một lượng không gian lớn như vậy, đặc biệt là nếu nó đủ lớn để sử dụng.

  • A. Tôi thường giải quyết vấn đề bằng cách chuyển sang chế độ xem trên máy tính để bàn (Tôi chưa thấy trang web nào có phiên bản di động tốt như vậy, huống chi là tốt hơn so với phiên bản dành cho máy tính để bàn, vì vậy tôi mặc định xem mọi cách để máy tính để bàn). Sau đó, tôi phóng to thu nhỏ, cuộn xuống, sau đó phóng to lại. Nó nhanh hơn và chính xác hơn là cố gắng cuộn, cuộn, cuộn trong khi phóng to và không yêu cầu thanh cuộn có thể lấy được. (Nó cũng cho phép tôi phóng to để xem hình ảnh, sơ đồ tốt hơn, v.v., điều mà hầu hết các trang web di động không thể từ chối cho phép.)

  • B. Firefox trên Android có thanh cuộn không thể truy cập để cho tôi biết phần nào của trang tôi đang truy cập (cho cả phiên bản dành cho máy tính để bàn và thiết bị di động), cũng như "Internet" mặc định "trình duyệt. Tôi sử dụng những trình duyệt này giống như trên trình duyệt máy tính để bàn bằng chuột để lập chỉ mục và xác định độ dài trang.

  • C. Tôi cũng có xu hướng chỉ xem các trang web lớn trên một màn hình phù hợp, do đó, rất ít khả năng tôi đang ở trên một thiết bị di động đang cố cuộn qua .pdf 900 trang hoặc một cái gì đó. Nếu ứng dụng web của bạn không bao giờ dài quá hai hoặc ba màn hình, thì việc cuộn sẽ ít gặp vấn đề hơn.

  • D. Điều đáng chú ý là việc cuộn ngón tay trên màn hình cảm ứng thường nhanh hơn và chính xác hơn so với sử dụng bánh xe chuột, vì vậy một trang phải lớn hơn nhiều trước khi khó điều hướng nhanh.

Kết luận

Đối với các thiết lập chuột (hoặc trackpad hoặc trackball), tôi nghĩ thanh cuộn phải luôn hiển thị và có thể lấy được. Tối thiểu, nó sẽ xuất hiện khi cuộn hoặc khi di chuyển chuột gần thanh cuộn.

Đối với thiết lập màn hình cảm ứng di động, tôi nghĩ rằng thanh cuộn phải luôn hiển thị khi cuộn, nhưng không cần phải có thể lấy được và có lẽ nên ẩn khi không cuộn để giảm không gian lãng phí.

Tôi chưa gặp rắc rối với máy tính bảng/iPad hoặc màn hình cảm ứng lớn hơn, vì vậy tôi không chắc tôi cảm thấy thế nào về những thứ đó.

Tất nhiên, có tùy chọn thay đổi kiểu trực quan (thông qua cookie tạm thời hoặc thông qua cài đặt người dùng được lưu trữ, tùy thuộc vào việc người dùng của bạn là khách hay có tài khoản) là cách tốt nhất, nhưng bạn nên mặc định có chức năng nào đó.

61
MichaelS

Quan điểm này chủ yếu đến từ môi trường Mac, nơi các thanh cuộn thường được hiển thị ngắn gọn khi nội dung xuất hiện lần đầu tiên, sau đó mờ dần. Khi cuộn xảy ra (người dùng kích hoạt hoặc cách khác), thanh cuộn xuất hiện lại. Chỉ có thể nhìn thấy tay cầm (như một thanh màu đen tròn bán trong suốt); không có mũi tên hoặc máng xối. Nếu con trỏ ở trên thanh cuộn khi nó xuất hiện, nó sẽ trở nên rộng hơn và cho phép kéo bằng con trỏ. Không có điểm nào thay đổi kích thước nội dung; nó hoạt động như thể thanh cuộn không có mặt và thanh cuộn được hiển thị trên cùng.

Điều này áp dụng khi sử dụng các cơ chế nhập giống như trackpad hoặc trackpad (ví dụ: máy tính xách tay). Thanh cuộn thông thường vẫn được hiển thị theo mặc định khi sử dụng chuột.

Tất nhiên, điều này cũng mở rộng cho điện thoại di động; iOS sử dụng hành vi gần như giống hệt nhau (trừ tương tác con trỏ). Trong thực tế, tôi nghĩ rằng nó đã bắt đầu trên iOS (trong đó các thanh cuộn sẽ quá nhỏ để có thể chạm một cách đáng tin cậy) và di chuyển sang macOS.

Nhìn chung, điều này có những ưu điểm và nhược điểm:

  • Không cần tạo không gian cho thanh cuộn đơn giản hóa thiết kế trang (ít yếu tố gây mất tập trung hơn) và cho phép nhiều không gian hơn cho nội dung, đặc biệt là khi nhiều nơi có thể cuộn.
  • Người dùng trên mac đã quen với hành vi này và mong đợi nó.
  • Không có bước nhảy nào về kích thước nội dung khi một khu vực đột nhiên có thể cuộn được, điều này cũng khắc phục sự mơ hồ phổ biến trong đó có thể cần một thanh cuộn miễn là có thể nhìn thấy và không cần thiết nếu nó bị ẩn (ví dụ: do gói văn bản).

  • Về mặt tiêu cực, như đã được đề cập, bạn cần đưa ra một cách khác để chỉ ra nội dung có thể cuộn được. Không phải là một vấn đề như vậy đối với phần chính của trang web bởi vì dù sao điều này cũng được mong đợi, nhưng có thể là một vấn đề đối với nội dung bên trong tùy thuộc vào mong đợi của người dùng. Đèn flash ban đầu giúp, nhưng không phải lúc nào cũng đủ.

  • Sự tương tác của người dùng để nhảy đến một vị trí khác trong tài liệu rất khó hiểu; người dùng phải di chuyển con trỏ đến nơi thanh cuộn sẽ xuất hiện, cuộn nhẹ bằng bánh xe chuột hoặc "cuộn 2 ngón tay", lấy thanh cuộn khi nó xuất hiện và kéo đến vị trí mong muốn. Cuộn đà giúp tránh điều này trong một số trường hợp.
  • Vì thanh cuộn xuất hiện trên nền trong suốt, nếu nền tối có thể khó nhìn. macOS cung cấp một thanh cuộn thay thế màu trắng có thể được sử dụng trong trường hợp này (tôi tin rằng các trình duyệt sẽ tự động chuyển sang điều này nếu nền đủ tối, nhưng nó không thể đánh lừa được 100%). Ngoài ra, nó mang lại cho thanh một ánh sáng tinh tế (hoặc bóng) như là một sự an toàn không đủ tốt.

Tất nhiên, nếu có thể, hãy bám vào các thành phần gốc của trình duyệt cho loại điều này. Họ sẽ đảm bảo mỗi người dùng có được trải nghiệm tự nhiên cho nền tảng của họ (Tôi chắc chắn đã thấy rất nhiều trang web cố gắng tái tạo cuộn đà và cuộn đàn hồi với kết quả cuối cùng tồi tệ). Người dùng Mac sẽ không cảm ơn bạn vì đã buộc các thanh cuộn hiển thị nơi họ không mong đợi họ và người dùng Windows sẽ không cảm ơn bạn vì đã ẩn thanh cuộn nơi họ mong đợi.

26
Dave

Việc loại bỏ các thanh cuộn theo quan điểm của tôi là một ví dụ khác về hệ tư tưởng ngu ngốc và nông cạn về việc đặt phong cách lên chức năng. Điều này trở lại phía trước để làm thế nào nó nên và là dấu hiệu cho thấy sự xuống dốc của xã hội đối với tôi. Thanh cuộn phục vụ một mục đích chức năng quan trọng mà các phương pháp thay thế khác không thể luôn lặp lại. Tôi nghĩ rằng sự thay đổi một phần dựa trên quan niệm rằng mọi người sử dụng màn hình cảm ứng nên không cần thiết, nhưng nhiều người vẫn không cần. Nhiều phương pháp thay thế đòi hỏi sự tập trung cao độ và sự tinh tế để thao túng, đó là một sự tiêu hao năng lượng mà tôi muốn dành cho công việc hơn là chiến đấu với giao diện người dùng tồi. Các phương pháp cuộn truyền thống thường đi cùng với cuộn bàn phím bằng cách nhấn phím mũi tên xuống, điều này tôi thấy dễ dàng hơn nhiều so với các phương pháp khác đòi hỏi sự tập trung cao hơn, nhưng với các thanh cuộn bị loại bỏ, cuộn mũi tên đôi khi cũng biến mất với LỚN -Không! Một ví dụ là Mạng xã hội F lớn đã gây ra sự khó chịu liên tục với kiểu cuộn "động" trong khi cuộn qua lịch sử tin nhắn và bạn không biết bạn đang ở đâu trong cuộc trò chuyện trong khi cuộn lên, nhưng sau đó bạn cuộn qua một số điểm nhất định và đột nhiên một tải thêm của lịch sử hội thoại được tải và cuối cùng bạn sẽ nhảy xa về phía trước nơi bạn muốn.

Tôi nghĩ đó cũng là một phần thiếu hiểu biết, và một phần mong muốn tiết kiệm tài nguyên và băng thông trên các máy chủ để tiết kiệm tiền cho các công ty với chi phí trải nghiệm người dùng. Đó cũng là về việc làm giảm bớt những điều ngu ngốc để làm cho mọi thứ "dễ dàng hơn" được sử dụng cho các lệnh rất cơ bản, với chi phí làm cho mọi thứ trở nên rắc rối hơn đối với bất kỳ ai không bị câm và có thể muốn làm điều gì đó hơi khác thường. Tôi hy vọng blockchain báo trước sự kết thúc của kỷ nguyên hy sinh trải nghiệm người dùng này để tiết kiệm tiền và chúng tôi có thể có các hệ thống hoạt động nhanh chóng và không gặp rắc rối cho cả người dùng cơ bản và nâng cao.

Ví dụ, sẽ không tuyệt vời nếu phần mềm như skype và F messenger cho phép bạn ngay lập tức cuộn đến phần đầu của lịch sử tin nhắn thay vì chờ mãi cho phần sau khi tải phần?! Tôi đã luôn nghi ngờ rằng đó là để tiết kiệm tài nguyên của việc tải toàn bộ lô cùng một lúc. Tuy nhiên, nếu ai đó có một chút thông minh và suy nghĩ sắc thái đang thiết kế điều này, (phổ biến hơn trong giới blockchain so với các tập đoàn tôi hy vọng), tất cả chúng ta đều có thể ăn bánh và ăn nó. Chúng tôi có thể tiết kiệm tài nguyên (vẫn không phải là một việc nhỏ ngay cả trong blockchain) và có được thông tin chúng tôi muốn ngay lập tức mà không cần phải đưa lên trang gớm ghiếc này bằng hệ thống tải trang.

Chỉ cần bố trí khung của toàn bộ lịch sử dòng thời gian trên thanh cuộn cùng với ngày bật lên khi bạn cuộn. Ngay khi bạn buông nút chuột hoặc cuộn strop, phần cụ thể đó có thể tải. Nếu bạn muốn quay lại từ đầu, hãy cuộn sang phải trên cùng và chỉ trang đầu tiên cần tải. Nếu bạn cần mọi thứ để tải ngay lập tức, ví dụ, để tìm kiếm một từ khóa, thì chỉ cần cung cấp một nút đơn giản có thể được nhấn nếu cần để lấy toàn bộ lịch sử tin nhắn hoặc lịch sử của bất cứ thứ gì bạn đang cuộn qua.

Nếu ai đó báo hiệu cụ thể cần thiết cho tất cả những thứ đó để tải, thì blockchain sẽ chứa các tài nguyên. Đây là điểm khác biệt giữa nó và các tập đoàn trên mô hình cũ, người mà tôi nghi ngờ sẽ miễn cưỡng cho phép ngay cả những người đặc biệt cần mọi thứ để tải, để có thể làm như vậy để bảo vệ tài nguyên của họ cho động cơ lợi nhuận bẩn thỉu của họ và lừa đảo người dùng. Đây là lý do tại sao chúng ta cần blockchain, và tốt nhất là phiên bản mở.

11
Lex

Như một quan điểm trái chiều ...

Thanh cuộn ngang thường là một điều xấu. Điều đó có nghĩa là bạn đã tối ưu hóa cho chiều rộng màn hình của màn hình PC, điều này không dịch tốt cho thiết bị di động. Khi cuộn xuống, đọc toàn bộ trang cần nhiều cuộn trái phải mỗi màn hình nội dung. Và ngược lại, các trang web đó sẽ lãng phí không gian trên màn hình lớn hơn. . Đừng đến đó.

Thanh cuộn dọc mặt khác là tốt. Trực giác được sử dụng để cuộn xuống một cái gì đó - ví dụ như nghĩ về cách bạn đọc một tờ báo giấy. Toàn bộ trang có thể dễ dàng nhìn thấy chỉ bằng các cuộn lên/xuống.

Có một trường phái cho rằng hơn 2 hoặc 3 màn hình đầy đủ nội dung là quá nhiều. Sau đó, nó trở nên khó khăn để tìm công cụ. Vì vậy, trong khi các thanh cuộn hoạt động, đừng để nó dẫn bạn đến các trang có độ dài không giới hạn!

8
Graham

Có, thanh cuộn phải được hiển thị, nếu không vì lý do nào khác ngoài mục đích truy cập.

Có nhiều trường hợp việc ẩn một thanh cuộn làm cho trang web/chương trình của bạn ở bất cứ đâu giữa bực bội và đường biên không thể sử dụng được:

  • Sử dụng phần cứng/phần mềm hỗ trợ để truy cập trang của bạn
  • Sử dụng chuột không có bánh xe cuộn
  • Sử dụng một hệ thống máy tính để bàn từ xa không đi qua các sự kiện cuộn
  • Sử dụng bàn di chuột cuộn bằng cử chỉ nhiều ngón tay (hầu hết người dùng trung bình không biết những thứ đó tồn tại)
  • Sử dụng màn hình cảm ứng, trang cao hơn một vài màn hình và tôi cần cuộn đến một nơi nào đó ở đầu kia của trang
  • Sử dụng màn hình cảm ứng, cuộn một trang có đầy đủ các liên kết/nút (trong đó chuyển động chạm và chạm có khả năng vô tình kích hoạt thứ gì đó)

Thanh cuộn có thể nhìn thấy là một cách dễ dàng để tránh tất cả những vấn đề này. Nếu đối số chính của đồng nghiệp của bạn là các trang web khác đang làm điều đó, thì thậm chí đừng lắng nghe anh ta. Áp lực ngang hàng không phải là một đối số hợp lệ trừ khi kèm theo một lý do quan trọng, có ý nghĩa tại sao thực hiện nó là một ý tưởng tốt. Kiểu suy nghĩ đó là cách <blink> tag trở nên phổ biến.

Ngoài ra, để dễ truy cập, đừng triển khai thanh cuộn của riêng bạn. Sử dụng những cái được cung cấp bởi hệ thống. Công nghệ hỗ trợ không thể luôn xác định các thanh cuộn tự chế và vận hành chúng như vậy.

7
bta

Một thanh cuộn cực kỳ hữu ích

  1. nó cho người dùng thấy trang đó có thể cuộn được
  2. nó hiển thị cho người dùng nơi họ hiện đang ở trên trang có thể cuộn

Bạn không biết bao nhiêu lần tôi đã bực mình và lạc lối bởi vì một nhà thiết kế ngu ngốc nào đó nghĩ rằng xóa thanh cuộn là một ý tưởng tốt.

3
Solid_Metal

Để thêm vào câu trả lời của MichaelS,

Trên máy tính bảng và iPad, một thanh cuộn không thể lấy được, ẩn khi không cuộn, tốt hơn là nên sử dụng. Như ông nói, việc cuộn trên các thiết bị cảm ứng chính xác hơn nhiều và có thể nhìn thấy, có thể lấy được, các thanh cuộn rất cục mịch và gây khó chịu. Tuy nhiên, tùy thuộc vào độ dài trang, nút quay lại đầu trang sẽ được chào đón.

Ngoài ra, trong khi viết bài này trên StackExchange bằng iPad pro 12,9 inch, tôi nhận thấy rằng việc thêm một lượng đệm (~ 1cm) kha khá, với tông màu khác nhau, rất hữu ích vì nó cho phép cuộn mà không vô tình mở liên kết.

2
Bob Kerman

Một câu hỏi thú vị, 2c của tôi đến từ một nhà phát triển nhưng lãnh đạo UX và cũng có giao diện được thiết kế với một số khu vực có thể cuộn bên trong.

Một vài điểm:

  1. Thanh cuộn có thể nhìn thấy nên tồn tại nếu nội dung đủ lớn để yêu cầu cuộn, vì sự hiện diện của thanh cuộn biểu thị và khẳng định rằng nội dung có thể được cuộn. [.__.]
    • Cuộn vô hạn là ý tưởng cá nhân của tôi về địa ngục, đặc biệt nếu bạn nhấp vào thanh trên đường và đang kéo nó (tiếp tuyến)
  2. Nếu nội dung không thể được cuộn thì thanh cuộn là một khả năng chống trả cho những điều không thể xảy ra. [.__.]
    • Trường hợp Edge là những thứ không thể cuộn bây giờ nhưng có thể nếu nội dung tăng kích thước, điều này phổ biến trong các trình soạn thảo hoặc bất kỳ hệ thống nào có đầu ra động. Cụ thể bởi vì nếu bạn thêm/xóa chức năng cuộn, nó có thể gây rối với bố cục, bạn sẽ nhận được một số chiều ngang jank khi nội dung mở rộng và sau đó thanh cuộn xuất hiện. (nếu bạn dùng overflow: auto ví dụ). Trong trường hợp này, có thể dễ dàng hơn để đặt thanh cuộn bị vô hiệu hóa để chỉ ra rằng đây là khu vực có thể cuộn, nhưng nội dung chưa đủ lớn để kích hoạt hành vi này.
  3. Thanh cuộn ngang thường là một ý tưởng tồi nếu kết hợp với thanh cuộn dọc khi nó giới thiệu và chọn chế độ ẩn. Như trong, mặc định từ cuộn chuột thường là cuộn dọc, nhưng với một phím nhấn bổ sung ẩn (hoặc tương tác trackpad) có thể đạt được. Sự phức tạp của điều này là rất hiếm khi đạt được.
  4. Trong một số giao diện ứng dụng (ví dụ: bản đồ Slippy), việc xóa tất cả các thanh cuộn có thể là một ý tưởng hay, vì nội dung di chuyển bên dưới cửa sổ trình duyệt trong mô hình đó, chứ không phải ngược lại. Các điều khiển được hiểu rõ bởi hầu hết người dùng.
  5. Cố gắng tạo kiểu thanh cuộn là 99% không phải là ý tưởng hay trừ khi bạn muốn có nhiều phiên bản tùy chỉnh cụ thể, imo chấp nhận chúng sẽ không hoàn hảo trong mọi môi trường và sử dụng mặc định của trình duyệt.
1
dougajmcdonald

Có phải nhà thiết kế đang nói về việc thay thế thanh cuộn bằng nút cuộn xuống/lên nổi? Tôi nghĩ rằng nó hợp lý bởi vì đó là cách tiếp cận đầu tiên trên thiết bị di động và tôi đã thấy nó được sử dụng thành công trong một số bối cảnh nhất định, nhưng các nút đó không thể thay thế thanh cuộn trong lưới.

0
Ling