Cách tạo nút “Yêu cầu gọi lại”. Material Design: Tại sao nút hành động nổi không phải là phương pháp hay nhất trong thiết kế UX

Xin chào các bạn thân mến. Hôm nay tôi sẽ hướng dẫn các bạn cách tạo nút quay lại đầu trang trên một trang web. Tình cờ là mẫu blog của tôi ban đầu không được trang bị tính năng này chức năng hữu ích, và khách truy cập không thể nhanh chóng di chuyển từ cuối bài lên đầu. Vì vậy, đồng thời với việc tự tạo một nút như vậy, tôi sẽ hướng dẫn bạn cách thực hiện (Có thể bạn cũng gặp vấn đề tương tự và chưa biết cách giải quyết).

Bài viết sẽ có các phần sau:

Nút này dùng để làm gì?

Thành thật mà nói, hàng triệu người sống mà không có nút bấm như vậy. Không có gì quan trọng khi thiếu nó, nhưng việc sử dụng yếu tố này có thể mang lại những lợi ích nhất định cho cả khách truy cập và bạn, với tư cách là chủ sở hữu của tài nguyên.

Lợi ích cho du khách

Các trang web thường bị quá tải với nội dung. Các bài viết dài và chi tiết buộc người truy cập phải cuộn xuống, cuộn văn bản bằng con lăn chuột. Cuối cùng, hàng chục bình luận đang chờ đợi họ và để thêm bình luận của mình, họ còn phải làm nhiều việc hơn nữa.

Trong khi chúng ta đang bận đọc, việc cuộn như vậy không gây mệt mỏi. Nhưng việc quay lại không còn thú vị nữa và thay vì quay lại và khám phá các phần khác trên trang web của bạn, người dùng chỉ cần đóng nó lại.

Sử dụng mũi tên lên cho một trang web cho phép bạn quay lại thực đơn trên cùng nhanh chóng và thoải mái.

Lợi ích cho trang web

Những lợi ích cho trang web được đưa ra trực tiếp từ văn bản trước đó. Nút đơn giản hóa việc điều hướng trang và cải thiện yếu tố hành vi cho tài nguyên của bạn, vì người dùng tích cực hơn và sẽ chú ý hơn đến tài liệu của bạn.

Đến lượt nó, điều hướng thuận tiện và các yếu tố hành vi tốt dẫn đến sự gia tăng uy tín trong mắt và theo đó, tăng vị trí trong kết quả tìm kiếm.

Nút đơn giản lên đầu cho trang web html

Tôi sẽ xem xét hai cách để cung cấp cho trang web của bạn một nút như vậy. Việc đầu tiên sẽ nhắm đến các trang web đơn giản mà không có khả năng hoặc mong muốn kết nối bất kỳ thư viện hoặc Javascript bổ sung nào.

Để triển khai, chức năng tiêu chuẩn của ngôn ngữ sẽ đủ đánh dấu HTML, được bổ sung các kiểu CSS. Nút lên sẽ hoạt động giống như một liên kết thông thường, đưa khách truy cập lên đầu trang.

Thuận lợi:

• Đơn giản và dễ cài đặt;
• Không cần hỗ trợ thư viện hoặc tập lệnh.

Sai sót:

• Nút này luôn hiển thị, ngay cả khi khách truy cập ở đầu trang;
• Chuyển động đi lên không diễn ra suôn sẻ mà diễn ra ngay lập tức, có một cú giật.

Mã nút sẽ bao gồm hai phần tử. Điều thứ nhất là liên kết HTML, được đặt trong mã trang web. Cái thứ hai là kiểu CSS nút, nó nằm trong tệp kiểu và chịu trách nhiệm về vị trí của nút và của nó. vẻ bề ngoài.

Đặt đoạn mã sau vào bên trong phần thân của trang web (bên trong thẻ cơ thể, tốt hơn, ngay trước khi nó đóng cửa). Xin lưu ý rằng bạn sẽ cần một hình ảnh đóng vai trò là một nút (thay thế phần mã bằng đường dẫn đến hình ảnh và tên của nó).

< a href = "#" title = "Quay lại Lên trên" class = "buttonup" > < img src = "путь к картинке/картинка.png" > < / a >

Nút bấm ( chiều rộng: 88px; chiều cao: 118px; vị trí: cố định; đáy: 20px; phải: 50px; )

Nút lên ( chiều rộng: 88px; chiều cao: 118px; vị trí: cố định; dưới cùng: 20px; phải : 50px ;

Mã này chịu trách nhiệm về vị trí của nút, bằng cách chỉnh sửa các số bạn có thể thay đổi nó. Ngay sau khi bạn lưu tệp, nút sẽ có hiệu lực. tham số chiều rộngđặt nó bằng chiều rộng của hình ảnh, dưới cùng – thụt lề từ cạnh dưới của màn hình, bên phải – từ cạnh phải của màn hình.

Nút nổi lên trên cùng cho trang web

Các bạn cũng vậy, nút đơn giản Chúng tôi đã thực hiện nó bằng HTML, bây giờ hãy chuyển sang triển khai phiên bản nâng cao hơn. Trong đó chúng ta sẽ loại bỏ những thiếu sót đã có ở phiên bản trước, cụ thể là:

• Nút này sẽ không liên tục hiện ra trước mắt bạn mà chỉ xuất hiện khi khách truy cập cuộn xuống trang;
• Hiệu ứng quay lại đầu trang sẽ mượt mà, trông rất phong cách;
• Ngoài ra, nút của chúng tôi sẽ thay đổi khi bạn di con trỏ (thay đổi màu sắc hoặc độ sáng).

Có rất nhiều cách và tập lệnh cho phép bạn tạo nút up. Tôi thành thật thừa nhận, tôi không phải là lập trình viên và nếu ở phiên bản trước tôi đã tìm ra HTML, thì tôi đang học JavaScript ấm đun nước đầy đủ. Vì vậy tôi đã xem qua và nghiên cứu rất nhiều phiên bản khác nhau và đã chọn cho mình tùy chọn dễ thực hiện nhất (ít thay đổi hơn trong các tệp khác nhau).

Nhìn chung, quá trình tạo nút như vậy phức tạp hơn một chút nhưng bất kỳ ai cũng có thể tìm ra cách. Mọi thứ được thực hiện trong 2 giai đoạn:

1. Kết nối thư viện jQuery

Nếu bạn sử dụng WordPress hoặc CMS tiêu chuẩn khác thì thư viện này rất có thể được bao gồm theo mặc định. Trong trường hợp này, bạn có thể bỏ qua điểm này.

Để kết nối thư viện jQuery, bạn cần viết dòng sau vào phần trang web của mình:

2. Kết nối tập lệnh hiển thị nút

Mã tập lệnh có thể được chèn theo hai cách:

• hoặc đặt nó hoàn toàn giữa các thẻ,
• hoặc bằng cách đặt tập lệnh vào một tệp riêng biệt và chỉ định kết nối của nó trong mã trang.

Tùy chọn đầu tiên đơn giản hơn, theo tôi, tùy chọn thứ hai thuận tiện hơn.

jQuery(document).ready(function($)( $(""+ "..png) 0 0 no-repeat; )" + ".scrollTop:hover( Background-position:0 -133px;)" +"" ).appendTo("body"); tốc độ var = 550, $scrollTop = $(" ").appendTo("body"); $scrollTop.click(function(e)( e.preventDefault(); $("html:not(:animated),body:not(:animated)").animate(( ScrollTop: 0), tốc độ); )); //hàm xuất hiện show_scrollTop())( ($(window).scrollTop() > 330) ? $scrollTop.fadeIn(700) : $scrollTop.fadeOut(700); ) $ (window).scroll(function())( show_scrollTop(); )); show_scrollTop(); ));

jQuery(tài liệu). sẵn sàng(hàm($)( $ ("" + ".scrollTop( display:none; z-index:9999; location:fixed;" + "dưới:20px; trái:90%; chiều rộng:88px; chiều cao:125px;" + "background:url(https://site/img/arrow.png) 0 0 không lặp lại; )" + ".scrollTop:hover( vị trí nền: 0 -133px;)" + "") . addTo("body"); tốc độ = 550, $scrollTop = $(" ").appendTo("body"); $scrollTop. bấm vào (hàm (e) ( đ. ngăn chặn Mặc định(); $ ("html:not(:animated),body:not(:animated)" ). hoạt hình (( ScrollTop : 0 ), tốc độ ) ; } ) ; //vẻ bề ngoài hàm show_scrollTop() ( ($(window).scrollTop() > 330)? $scrollTop. fadeIn(700) : $scrollTop. mờ dần(700); $(cửa sổ). cuộn(hàm()(show_scrollTop();)); show_scrollTop(); } ) ;

Nếu bạn sử dụng một tệp riêng cho tập lệnh, như tôi đã làm, thì bạn đặt mã giữa các thẻ trong đó; bạn không cần phải sao chép chính các thẻ đó vào tệp. Đặt tập tin trên máy chủ của bạn.

Tôi đặt tên tệp là Buttonup.js. Để kết nối nó, chúng tôi viết dòng sau vào tiêu đề trang web:

Thay vì “đường dẫn đến tệp”, hãy nhập địa chỉ nơi chứa tệp của bạn với tập lệnh.

Nút nổi là một cách mới để thêm khảo sát, quảng cáo hoặc một số nội dung bổ sung khác mà không cần thêm bất kỳ thay đổi nào vào thiết kế trang web của bạn. Chức năng của tất cả những điều này được triển khai dưới dạng nút nổi trên trang web của bạn và sau khi nhấp vào nút, một cửa sổ phương thức bổ sung sẽ mở ra với nội dung cần thiết. Để cải thiện khả năng sử dụng, bạn có thể sử dụng bảng quản trị, cài đặt và tùy chọn điều hướng cũng như một số dữ liệu để ghi lại số liệu thống kê và tiến hành phân tích.

Một plugin nút wordpress có tên Nút nổi sẽ thêm nút nổi như vậy vào trang web của bạn.

Cài đặt plugin

Plugin được cài đặt giống như bất kỳ plugin nào khác: đi tới phần “Plugins” - “Thêm mới”. Sau đó, nhập nút Nổi vào thanh tìm kiếm và cài đặt.

Cài đặt

Sau khi cài đặt, một tab Nút nổi bổ sung sẽ xuất hiện ở bên phải trong bảng điều khiển quản lý trang WordPress của bạn:

Nhấp vào nó và bắt đầu thiết lập nút nổi:

1. Trạng thái nút - bật và tắt hiển thị nút;

2. Nguồn cài đặt - cài đặt này chịu trách nhiệm về chức năng bổ sung của plugin. Nếu bạn chọn “Cài đặt cục bộ”, chức năng sẽ rất hạn chế, vì vậy bạn nên chọn tùy chọn thứ hai “Cài đặt từ probtn.com”;

3. Bây giờ bạn cần đăng ký trên trang web của nhà phát triển plugin - sẽ không mất nhiều thời gian, nhưng chức năng của nút WordPress sẽ mở rộng đáng kể.

Đăng ký trên trang web của nhà phát triển

Vào trang https://admin.probtn.com/login/new và điền địa chỉ E-mail, tên và mật khẩu rồi nhấp vào nút “Tạo”:

Sau khi quá trình đăng ký này hoàn tất, chúng tôi chuyển sang cấu hình bổ sung thêm, nhưng trực tiếp trên trang web mà chúng tôi vừa đăng ký.

Sau khi đăng ký và đăng nhập vào trang web, chúng ta thấy trang sau:

Hai nút bên dưới có nhiệm vụ tạo nút nổi, nút thứ hai dùng để tạo khảo sát sẽ xuất hiện khi bạn nhấp vào nút nổi.

Hãy bắt đầu với việc tạo, vì vậy hãy nhấp vào "Tạo" Nút nổi" Đầu tiên chúng ta chỉ ra tên của nút:

Xin lưu ý rằng bạn có thể chọn một biểu tượng trên máy tính của mình hoặc cung cấp liên kết tới hình ảnh. Để làm đẹp, nên sử dụng hình ảnh có nền trong suốt kích thước nhỏ.

Ở giai đoạn tiếp theo, chúng tôi chọn nền tảng để hiển thị nút. Chúng tôi đã cài đặt plugin trên trang web, vì vậy chúng tôi sẽ chọn tùy chọn hiển thị trên miền mà chúng tôi chỉ định:

Hãy kết thúc thiết lập ban đầu bằng cách nhấp vào nút "Gửi".

Chỉ định hành động, sau đó nhấp vào nút nổi và tiếp tục định cấu hình plugin

Sau khi tạo, nút của chúng tôi được hiển thị trong bảng điều khiển bên trái:

Trong phần CÔNG CỤ, chúng tôi chỉ ra địa chỉ sẽ được mở trong cửa sổ bật lên sau khi nhấp vào nút:

Hoặc chúng tôi chỉ ra một khảo sát có thể được tạo bằng cách nhấp vào liên kết “Tạo khảo sát”:

Chúng tôi lưu tất cả các thay đổi được thực hiện ở mỗi bước. Nút nổi được cài đặt trên trang web có thể trông như thế này:

Và khi bạn nhấp vào nó, cửa sổ bật lên sau sẽ xuất hiện:

Có nhiều tùy chọn để sử dụng plugin này cho WordPress: bạn có thể tạo trang riêng, trên đó đặt quảng cáo, khảo sát hoặc bất kỳ thông tin nào không thể đưa vào thiết kế trang web. Nói chung là gì cũng được!

tái bút Nếu bạn cần trợ giúp thiết lập hoặc cài đặt, hãy viết câu hỏi của bạn trong phần bình luận. Trợ giúp là miễn phí!

Có mặt trong Leadback một số lượng lớn cài đặt cho phép bạn sắp xếp hầu hết mọi thuật toán cho tiện ích gọi lại. Cài đặt đầu tiên liên quan đến tính logic của sự xuất hiện của tiện ích trên trang web.

Bắt cuộc gọi không thời gian làm việc— các số được nhập ngoài giờ làm việc sẽ được phân phối giữa các nhà quản lý trong giờ làm việc. Người quản lý sẽ nhận được một cuộc gọi và máy trả lời tự động sẽ thông báo cho anh ta rằng cuộc gọi được đặt ngoài giờ làm việc và sẽ kết nối anh ta với một khách hàng tiềm năng.

Bắt khách truy cập trên đường thoát ra - tiện ích phát hiện thời điểm khách truy cập chuẩn bị rời khỏi trang web của bạn và mời anh ta liên hệ với người quản lý sau 27 giây.

Nút nổi “Điện thoại” - luôn có một nút hiển thị trên trang web ở một vị trí nhất định, khi nhấp vào nút đó, bạn có thể nhập số và liên hệ với bộ phận bán hàng. Chúng tôi khuyên bạn nên sử dụng tính năng này.

Thiết lập cửa sổ tiện ích - Bạn có thể chọn 2 tùy chọn để hiển thị tiện ích: tùy chọn “Cửa sổ” và “Toàn màn hình”. Ngoài ra hãy chọn bảng màu và thay đổi chú thích trên tiện ích. Chúng tôi khuyên bạn nên sử dụng thông tin về giảm giá và khuyến mãi để khuyến khích khách hàng để lại số liên lạc.

Tiện ích gọi lại “Toàn màn hình”

Thiết lập nút nổi là phần chúng ta tùy chỉnh hình thức và cách phối màu của nút. Có các tùy chọn sau: Chuông, nút tròn với điện thoại, nút vuông với điện thoại và nút thời trang với một ống gợi nhớ đến các biểu tượng tin nhắn phổ biến.

Xin lưu ý rằng màu của nút có thể phù hợp với bảng màu của trang web của bạn và nút có thể được đặt ở bất kỳ đâu. Có các cài đặt bổ sung cho việc này.

Cho phép một khách hàng gọi nhiều lần - cùng một khách hàng có thể gọi cho bạn nhiều lần không? CÓ/KHÔNG Máy khách được xác định bởi trình duyệt.

Thay đổi thời gian “Chúng tôi sẽ gọi lại cho bạn sau ... giây” - Bạn có thể thay đổi thời gian mà bạn hứa sẽ gọi lại cho khách hàng lên hoặc xuống.

Thực hiện cuộc gọi tới 1 khách hàng không quá 1 lần mỗi... - nếu bạn đã bật chức năng “Bắt khách trên đường ra”, bạn có thể chỉ định khoảng thời gian để không làm phiền khách truy cập bằng cửa sổ bật lên mỗi lần.

Nhận cuộc gọi từ CIS và Châu Âu - Nếu bạn chỉ làm việc cho thị trường Nga, chúng tôi khuyên bạn không nên bật tính năng này. Nếu bạn cần khách hàng từ các quốc gia khác, hãy kích hoạt nó. Đối với các quốc gia khác (trừ Nga), đối với một phút trò chuyện, bạn sẽ bị tính phí như sau: Ukraine - 3 phút, Kazakhstan - 2 phút, Belarus - 4 phút, tất cả các quốc gia khác - 5 phút.

Báo cáo tên tiện ích - Nếu bạn sử dụng nhiều tiện ích trên cùng một tên miền.

Một thông báo sẽ xuất hiện. Xin lưu ý rằng không cần cập nhật mã trên trang web!

Thiết lập widget đã hoàn tất

Sau khi hoàn tất thiết lập trong tài khoản cá nhân Leadback Tiện ích đầu tiên của bạn sẽ xuất hiện trong phần tiện ích.

Tiện ích trong tài khoản cá nhân của bạn

Bây giờ bạn cần cài đặt mã widget trên trang web của mình.

Material Design là một ngôn ngữ thiết kế được giới thiệu năm của Google trước đây, đại diện cho nỗ lực táo bạo của công ty nhằm tạo ra một hệ thống thống nhất Kinh nghiệm người dùng trên mọi thiết bị và nền tảng. Điều này được đánh dấu bằng màu đậm, cách sử dụng bóng tự do nhưng có nguyên tắc để biểu thị các lớp giao diện người dùng và hoạt hình mượt mà, cung cấp khá kinh nghiệm tốt tương tác trong Android (và một số ứng dụng Google trên iOS).

Tuy nhiên, có một điều về Material Design đã làm tôi khó chịu kể từ khi nó được giới thiệu vào năm ngoái: nút hành động nổi.

FAB (Nút hành động nổi), theo Google, là các nút tròn nổi phía trên giao diện người dùng và “được sử dụng để thúc đẩy hành động”. Chúng hoạt động như các nút kêu gọi hành động được thiết kế để thực hiện hành động mà người dùng thực hiện thường xuyên nhất trên màn hình đó.

Và vì phong cách hình ảnh táo bạo của Material Design, FAB khá khó để bỏ qua—và vấn đề nằm ở đó. Trong khi thực hành, ở điều kiện lý tưởng FAB dường như cung cấp UX tốt - việc lạm dụng FAB sẽ gây bất lợi cho UX tổng thể của ứng dụng. Dưới đây là một số lý do cho việc này.

Sự đắm chìm đến từ kinh nghiệm

FAB nổi bật về mặt trực quan — chúng thực sự nằm trên bất kỳ thành phần giao diện người dùng nào trên màn hình. Ngoài ra, việc thêm FAB sẽ tự động dẫn đến trải nghiệm người dùng kém hấp dẫn hơn, đặc biệt ảnh hưởng đến các ứng dụng (hoặc màn hình) có mục đích cung cấp trải nghiệm tương tác.

Một ví dụ là ứng dụng ảnh mới của Google.

Ứng dụng ảnh mở ra dưới dạng thư viện với nút tìm kiếm nổi. Nhưng vấn đề là khi tôi mở một ứng dụng ảnh, tôi chỉ muốn... xem ảnh của mình. Do đó, nút tìm kiếm nổi khiến người dùng mất tập trung vào việc duyệt ảnh, đây là mục đích chính của ứng dụng. Gửi bởi tìm kiếm thông minh – tính năng độc đáoẢnh ứng dụng Google. Nhưng điều này có nghĩa là anh ta cần phải được cấp FAB vĩnh viễn ở cấp độ cao nhất trong đơn đăng ký? (Tôi nghĩ không có.)
Thật kỳ lạ, Google đồng ý với tôi. Trên trang Thiết kế Vật liệu trên FAB, Google giải thích rằng "không phải màn hình nào cũng cần nút lệnh nổi".
Và sau đó anh ấy nói thêm rằng “hành động chính là chạm vào hình ảnh trong thư viện, trong trường hợp đó không cần đến nút.

Họ nổi bật và cản đường.

Điều này có vẻ giống như mặt trái của đồng tiền, nhưng còn có điều gì đó hơn thế nữa tài sản quan trọng FAB đang cản trở tính hữu dụng của nó. Bằng cách chiếm không gian trên màn hình, FAB chặn nội dung một cách hiệu quả.

Được rồi, FAB chỉ là một nút tròn nhỏ thôi phải không? Nó có thể chặn bao nhiêu nội dung?
Nếu nhìn vào ảnh chụp màn hình của ứng dụng ảnh, bạn sẽ nhận ra rằng FAB tìm kiếm đang chặn khoảng 50% hình ảnh thu nhỏ—chắc chắn đủ để che khuất một vài khuôn mặt. Về cơ bản, điều này tạo ra nhu cầu cuộn thêm một lần cho mỗi hình ảnh thu nhỏ thứ tư. hàng cuối cùng trên màn hình. Và đó không phải là phần tồi tệ nhất.

FAB chặn nút “Yêu thích” và ngày.

Người dùng Dumazy đã đăng trên Graphic Design Stack Exchange về một vấn đề mà anh ấy gặp phải khi FAB chặn ngôi sao "yêu thích" cũng như thời gian trên màn hình ứng dụng của anh ấy. Điều này minh họa sự cố xảy ra với tất cả các ứng dụng xem danh sách và nó trở nên đặc biệt rắc rối khi mục cuối cùng trong danh sách không thể cuộn lên thêm nữa. Điều này có nghĩa là toàn bộ một cột phải được loại bỏ (thay đổi vị trí của dấu hoa thị, v.v.) để cung cấp khả năng sử dụng màn hình phù hợp.

Do đó, FAB mất nhiều nhiều không gian hơn trên màn hình hơn kích thước của nó gợi ý.

Hành động tạo điều kiện có thể không được sử dụng thường xuyên.

Khi thiết kế UX, bạn cần nhớ quy tắc 80/20, quy tắc này nói rằng người dùng sẽ sử dụng 20% ​​tính năng trong 80% thời gian. Nói cách khác, phần lớn nỗ lực nên được dồn vào việc thiết kế số lượng nhỏ các yếu tố mà người dùng sẽ sử dụng hầu hết thời gian.

FAB thực sự làm điều này - về mặt lý thuyết. Nhưng điều gì sẽ xảy ra nếu Quảng cáo hành động không được sử dụng thường xuyên?

Lấy ví dụ Ứng dụng Google Gmail.

FAB của ứng dụng Gmail là nút soạn thư giả định rằng hành động chính của người dùng là soạn email.

Nhưng nó là?

Nhiều nghiên cứu đã chỉ ra rằng ít nhất 50% email được đọc trên thiết bị di động và hầu như không có nghiên cứu nào nói như vậy về việc tạo email. Nói cách khác, như kinh nghiệm hàng ngày của chúng tôi đã xác nhận, hầu hết người dùng thiết bị di động đều có xu hướng sử dụng ứng dụng emailđọc email.

Có lẽ một số người sử dụng thiêt bị di độngđể trả lời email, nhưng điều này chỉ xảy ra sau khi email được mở (lưu ý rằng điều này có nghĩa là họ sẽ bỏ qua FAB). Hành vi này của người dùng có thể là do cơ chế nhập liệu không hoàn hảo bàn phím ảo và tự động thay thế có nghĩa là hành động chính mà người dùng thực hiện là đọc (và trả lời) email chứ không phải tạo email mới.

Vậy nút “soạn email” FAB có tác dụng gì? Trong một số trường hợp hiếm hoi, người dùng sẽ rất vui khi muốn tạo một bức thư bằng ứng dụng này. Nhưng thời gian còn lại, nó chỉ chiếm không gian trên màn hình, chặn “ngôi sao” và thời gian, đồng thời liên tục gây xao lãng với màu đỏ tươi.

Chúng ta có muốn FAB không? Gạch bỏ cái trước - chúng ta có cần nó không?

Tất nhiên, không phải tất cả các hoạt động sử dụng FAB đều làm giảm trải nghiệm sử dụng ứng dụng Material. Có một số ví dụ tuyệt vời về FAB có ý nghĩa và giúp cải thiện UX của các ứng dụng này.

bản đồ Googleđây là một ví dụ tuyệt vời về việc FAB được thực hiện đúng đắn. Hành động chính mà người dùng thực hiện trên Maps là nhận chỉ đường, vì vậy việc sử dụng FAB cho mục đích này là rất thích hợp.

Nhưng hãy nhớ rằng Bản đồ khá một trường hợp đặc biệt, khi người dùng nội dung hầu như luôn quan tâm đến việc di chuyển đến giữa màn hình (nơi đặt dấu chấm màu xanh lam của bạn, đánh dấu vị trí). Tuy nhiên, trong hầu hết các ứng dụng, chế độ xem dạng lưới hoặc danh sách có nghĩa là người dùng tương tác với nội dung ở mọi nơi trên màn hình, bao gồm cả vị trí thường đặt của FAB.

Cũng xin lưu ý rằng ảnh chụp màn hình ở trên chỉ kể một phần câu chuyện: trong sử dụng thực tế, FAB vẫn giữ nguyên vị trí ngay cả khi người dùng cuộn (hầu hết thời gian). Như Google đã nhấn mạnh nhiều lần trong Material Design, thiết kế chuyển động cũng quan trọng như thiết kế giao diện người dùng.

Sự vắng mặt của chuyển động - sự nhấn mạnh vào không gian màn hình - trong bối cảnh nội dung chuyển động tạo ra nhiều cấp độ cao sự phân tâm mà ảnh chụp màn hình không thể hiển thị.

Vì vậy, vì chúng ta hầu như không có ví dụ nào về việc triển khai FAB tốt nên điều này đặt ra câu hỏi: chúng có cần thiết không?

Khi chúng ta xem xét những nhược điểm của việc sử dụng FAB trong các ứng dụng, chúng ta có thể tóm tắt nó thành hiểu biết đơn giản: Người dùng không chỉ thực hiện các hành động trong ứng dụng mà còn sử dụng nội dung.

Thiết kế FAB trong Material Design dựa trên tiền đề là người dùng dành phần lớn thời gian để làm Hành động cụ thể, và do đó nên được đưa ra trạng thái nâng cao dưới dạng một nút chính, cấp cao. Nhưng trong nhiều ứng dụng, người dùng cũng tập trung vào việc xem nội dung: trong ứng dụng ảnh, người dùng muốn xem ảnh; V. ứng dụng Gmail người dùng muốn đọc email của họ; và trong ứng dụng Facebook, người dùng muốn đọc tin nhắn của bạn bè.

Do đó, FAB là một triết lý thiết kế (hoặc ít nhất là một lựa chọn thiết kế) đặt việc tiêu thụ nội dung tối ưu phụ thuộc vào việc thực hiện hành động. Và chúng ta phải tự hỏi: sự thỏa hiệp như vậy có cần thiết không? Chúng ta có muốn thực hiện một thỏa hiệp như vậy không?

Khi FAB thường dẫn đến UX kém, khi khó tìm ra hành động được sử dụng nhiều nhất trong ứng dụng và khi bạn phải tìm những cách vòng vo (trong đó FAB biến mất khi cuộn hoặc chồng chéo với các thành phần khác khi vuốt), Tôi sẽ nói câu trả lời là không.

Vật liệu thiết kế của Google, một ngôn ngữ thiết kế nguyên tắc, thống nhất khá tốt, nhưng FAB không phải là điều tốt nhất về nó.

là một trợ lý nhẹ, thanh lịch, năng động, nhanh chóng và hiệu quả nhằm hỗ trợ điều hướng cơ bản và thu hút người dùng. Chỉ là một phần tử tròn nhỏ di chuyển theo người dùng, nổi độc lập trên toàn bộ cấu trúc thiết kế và nói chung là bám chặt vào bên phải, nó có thể mở rộng chức năng của từng màn hình cũng như làm cho chương trình trở nên thuận tiện hơn.

Theo thông số kỹ thuật của Google đề xuất, nút này phải có ý nghĩa và cung cấp quyền truy cập nhanh vào các công cụ quan trọng. Yếu tố này phải đơn giản và đẹp mắt, chứa đồ họa trực quan và rõ ràng, sống động và thiết kế sáng sủa, nhưng đồng thời tránh các chức năng phá hoại. Chúng tôi đã tập hợp một bộ sưu tập nhỏ các khái niệm di động mới giao diện người dùng những người đã nắm bắt xu hướng mới này.

Thiết kế lại tài liệu Instagram

Thiết kế này có một nút tròn nhỏ có bóng tinh tế, được tô màu xanh đậm phù hợp. Nó cung cấp quyền truy cập nhanh vào ảnh và cũng cung cấp cho chủ sở hữu chức năng bổ sung. Đi kèm với hầu hết các màn hình.

Hệ sinh thái ứng dụng Android & Wear

Nhà thiết kế Stefan Castro sử dụng nút nổi hình tròn, nhờ tông màu đỏ nên tương phản rõ rệt với nội dung. Nó mở ra năm biểu tượng nhỏ có đầu, cũng có màu sắc tươi sáng, nằm từ dưới lên trên.

Magnet.me

Kỹ thuật tương tự được sử dụng ở đây như trong ví dụ trước. Đầu tiên, nó chỉ là một nút tròn thông thường nằm ở cuối trang. Khi người dùng nhấn vào, nó sẽ hiển thị mượt mà ba biểu tượng khác, lần lượt được đặt theo chiều dọc.

Giao diện người dùng tô màu

Nhà thiết kế Lois Yang trình diễn Bạn đã làm rất tốt tùy ý bảng màu Vì của phần tử này. Giao diện trang web khá nặng về nội dung. Nền màu đỏ tươi sáng kết hợp với các bóng mờ tinh tế tách biểu tượng khỏi luồng thông tin, thu hút sự chú ý một cách tinh tế.

Chảy dãi của Henrique Ferreira

Ở đây, nút nổi được hỗ trợ bởi lớp phủ màn hình mờ trang nhã. Màn hình là cần thiết để thu hút sự chú ý đến các biểu tượng và tiêu đề vì nền của ứng dụng chứa đầy các hình ảnh lớn và hấp dẫn. Một sai lệch nhỏ so với quỹ đạo sẽ làm tăng thêm sự tinh tế cho thiết kế.

Nút Thêm phương tiện nổi

Nút hành động hình chữ O hiện diện ở cuối trang và bao gồm bốn CTA được sắp xếp thành vòng tròn. Bởi vì điều này, chúng nhanh chóng có sẵn. Mỗi biểu tượng có kích thước tương đối lớn, màu sắc tươi sáng, biểu tượng sắc nét, rõ ràng.

Giao diện người dùng hàng ngày 010

Ở đây, nút được kết nối với một thanh bên lớn chạy ra từ phía bên phải và dịch chuyển nội dung sang bên trái một chút. Có quan hệ với truyền thông xã hội, nó bao gồm tất cả các cổng phổ biến: Pinterest, Twitter, Facebook, Google, v.v.

Ứng dụng Alex Ryabushko

Nút hành động và CTA của nó được thiết kế một cách tuyệt vời phong cách phẳng và trong một màu. Tuy nhiên, trạng thái di chuột đang ở trạng thái vui vẻ màu cam mặc định thay đổi thành màu xanh. Các ký tự khổng lồ bên trong các vòng tròn rất trực quan và dễ đọc. Phần tử này cung cấp cho người dùng các tín hiệu trực quan để nhanh chóng đạt được mục tiêu.

Mẫu PSD ứng dụng thiết kế vật liệu (của Daniel De Santis)

Giao diện người dùng được tạo trong truyền thống tốt nhất thông số kỹ thuật hiện hành của Google. Cuộc gọi nút nổi cổ điển bảng lớn, chiếm gần như toàn bộ màn hình và bao gồm các hành động cần thiết để hoạt động trong phần Hộp thư đến.

Giao diện người dùng di động (bởi Smiley)

Nghệ sĩ thể hiện nhiều khái niệm màn hình chức năng. Như bạn có thể thấy, hầu hết mọi trang đều có nút hành động riêng. Cái sau gây ra một tác động nhỏ nhưng đủ bảng cao, ở bên trái và chiếm khoảng mười lăm phần trăm không gian.

Nút hành động nổi của Tyler Berry

Tùy chọn này khác với hầu hết các ví dụ được liệt kê trong bộ sưu tập của chúng tôi. Chúng không chỉ có màu sắc phong phú và bóng tuyệt vời mà còn hiển thị các biểu tượng thành một dòng ở đầu giao diện.

Nút hành động nổi của Giulio “bart172” Smedile

Mặc dù hầu hết các nút trong thiết kế này đều tương tự như các nút khác nhưng chúng được kết nối với bàn phím sterling. Tác giả nhận lợi nhuận tối đa từ người trợ giúp nổi nhỏ bé này. Nó cũng cung cấp một hiệu ứng chuyển tiếp suôn sẻ giữa hai trạng thái.

Khám phá UX

Trong thiết kế này, một nút nổi hiển thị một tập hợp các CTA được sắp xếp thành một hàng. Điều này chiếm toàn bộ phần dưới cùng của màn hình. Công việc sơn hai tông màu, các bức vẽ đơn sắc đồng nhất, các hình tượng và bóng tối hoàn hảo đến từng pixel tạo nên một thẩm mỹ tuyệt vời.

Giao diện người dùng ngón tay cái (bởi Jochem van der Veer)

Ý tưởng đằng sau thiết kế này là sử dụng nút hành động nổi, tương tự như hầu hết các nút khác. Nó dính vào phía bên phải, có vẻ ngoài đơn giản và ngay lập tức bắt mắt. Trong một số trường hợp, nút này đi đôi với phiên bản thu nhỏ của logo.

Nút ma thuật nổi

Các nút nổi này được tối giản về mặt chức năng. Chúng chỉ được sử dụng để cung cấp cho người dùng truy cập nhanhđến không gian làm việc nơi bạn có thể tạo sách của mình. Thiết kế tuân thủ các tiêu chuẩn và phù hợp với tâm trạng của ứng dụng.

theScore Android

Nút CTA ở đây trông sang trọng, tinh tế và tinh tế. Phong cách tuyến tính kết hợp với cách phối màu hai tông màu đẹp mắt trong đó màu xanh lam chiếm ưu thế tạo nên tính thẩm mỹ nổi bật đồng thời biến hành động thành điểm nhấn.

FAB cho sự tương tác của người dùng

Nhà phát triển sử dụng nút hành động, thiết kế của nút này tạo tiếng vang nhẹ nhàng bảng trên cùng dẫn đường. Nó nhằm mục đích thu hút người dùng và giúp họ cảm thấy thoải mái với toàn bộ dự án. Nút này chồng lên cửa sổ bật lên ở góc dưới bên phải và chiếm toàn bộ màn hình.

chăm sóc thay thế

Tác giả của thiết kế này ẩn các bộ lọc dưới nút hành động nổi, cho phép người dùng sắp xếp thông tin dư thừa và đạt được mục tiêu của mình trong vòng vài giây. Nhờ vẻ ngoài táo bạo và màu sáng, nút không khớp với nội dung và ngay lập tức gây chú ý.

Ứng dụng Swipii

Khái niệm Ứng dụng Swipii dựa trên một số giải pháp mới. Nút nổi là một trong số đó. Nó phục vụ tốt mục đích của nó, làm cho cuộc sống của người dùng dễ dàng hơn. Nút này nằm ở góc của mỗi trang và hiển thị một trang bật lên có mã QR.

Nút hành động trôi chảy của nhà thiết kế Shu Makino

Thiết kế này ngắn GIF động thể hiện quy trình làm việc tiêu chuẩn của nút hành động nổi. Anh ấy mạnh mẽ với chính mình chuyển tiếp suôn sẻ và bao gồm bảy phần tử có hình dáng trang nhã lần lượt xuất hiện và bám chặt vào phía bên phải.

Tóm lại là…

Các nút hành động nổi có thể dễ dàng trở thành các thành phần UI thiết yếu. Đây là một cách thanh lịch và khá đơn giản để cải thiện nó. Cung cấp cho người dùng quyền truy cập nhanh vào các thông tin quan trọng chức năng quan trọng ứng dụng di động, họ đi thẳng vào vấn đề và có thể giúp việc sử dụng ứng dụng trở nên nhanh chóng, hiệu quả và năng suất.