Cách làm nút bên lên trên. Nút nổi - Plugin nút WordPress. 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?
Một nút nổi là cách mới thêm khảo sát, thông báo hoặc bất kỳ nội dung nào khác nội dung bổ sung 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ả đ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 nút bổ sung sẽ xuất hiện cửa sổ phương thức với những 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.
Cắm vào nút wordpress, được gọi là Nút nổi sẽ thêm nút nổi như vậy vào trang web của bạn.
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 đặtSau 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ểnVà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 pluginSau 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í!
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 được cấp FAB cấp cao nhất, vĩnh viễn 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.
Điều này có vẻ giống như mặt khác 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 cái 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.) để mang lại 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 ý.
Thúc đẩy hành động 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ế một vài 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 có xu hướng sử dụng chúng ứng dụng emailđể đọc email.
Có thể có 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 phù 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 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; trong ứng dụng Người dùng Gmail 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 trải nghiệm người dùng 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ó.
Chúc một ngày tốt lành cho tất cả. Hôm nay chúng ta sẽ nói về các cửa sổ phương thức và sử dụng ví dụ của chúng, chúng ta sẽ triển khai nút “Đặt hàng” gọi lại". Bạn có thể đã thấy một nút như vậy trên nhiều trang đích; khi bạn nhấp vào nút đó, một biểu mẫu liên hệ sẽ xuất hiện với nền tổng thể tối đi. Đây chính xác là chức năng mà chúng tôi đang triển khai ngày hôm nay.
Thông thường nút “yêu cầu gọi lại” nằm ở bên phải góc trên cùng. Bạn có thể thử nghiệm vị trí nhưng hãy nhớ rằng mọi người đã quen với việc nhìn thấy yếu tố này ở đó, mặc dù điều này áp dụng nhiều hơn cho các trang web kinh doanh và dịch vụ.
Tất nhiên, trong hầu hết các trường hợp, cửa sổ phương thức được tạo bằng javascript, nhưng hôm nay chúng tôi sẽ cố gắng chỉ sử dụng sử dụng css và chúng tôi sẽ không tải trang đích kịch bản bổ sung.
Và cuối cùng, tôi sẽ nói rằng tôi không bận tâm đến việc thiết kế biểu mẫu liên hệ, tôi chỉ muốn truyền đạt bản chất của cách thực hiện một hiệu ứng như vậy, vì vậy vui lòng đừng quá cố gắng. Tôi sẽ chỉ mô tả những điểm chính và sau đó bạn có thể sửa chúng theo ý muốn.
Về cách thiết lập Mâu liên hệ Bạn có thể đọc những bài viết này:
Để đảm bảo bài viết không quá dài, tôi sẽ chỉ cung cấp phần đánh dấu html và bạn có thể xem phần còn lại bằng cách tải xuống nguồn.
Chúng tôi sẽ triển khai chức năng này: :)
Một lần nữa, đây chỉ là một mẫu nhỏ mà bạn có thể điều chỉnh cho phù hợp với thiết kế của mình. Tất cả điều này sẽ được gọi bằng cách nhấn một nút.
Điều đầu tiên cần làm là đưa style sheet (ít hơn) được cung cấp vào nguồn. Tôi đã mô tả nó rất chi tiết kèm theo các nhận xét, hãy xem và chỉnh sửa.
Cấu trúc HTML rất đơn giản. Chúng tôi đặt liên kết này ở đúng nơi trên trang web. Nơi bạn định hiển thị nút “yêu cầu gọi lại”:
Yêu cầu gọi lại
Bây giờ bạn cần tạo một vùng chứa cửa sổ phương thức:
nội dung cửa sổ phương thức
Để lại số điện thoại của bạn
và chuyên gia tư vấn của chúng tôi sẽ liên hệ với bạn
Tôi chưa xuất bản style sheet, bạn có thể tải nguồn tại đây:
Và với đánh dấu html- Tất cả. Vì vậy, nó đơn giản. Ưu điểm của phương pháp này là cửa sổ phương thức có thể được gọi nhiều lần trên trang và các tập lệnh không được sử dụng.
Như bạn có thể nhận thấy, tôi đã viết rằng tôi sử dụng ít hơn. Nhìn vào cấu trúc. Tôi chưa sử dụng dù chỉ 5% khả năng của bộ tiền xử lý (chỉ lồng nhau), vì tôi mới bắt đầu tìm hiểu nó, nhưng tôi dự định sẽ sử dụng nó thường xuyên hơn trong tương lai. Tôi muốn hỏi bạn điều gì là tốt nhất. Bạn có phiền nếu các ví dụ về mã không có trong CSS mà ở dạng ít hơn không? tôi có Google Chrome và trình duyệt Yandex từ chối biên dịch less thành css mà không mở tệp thông qua Denver hoặc OpenServer. Trên Mazil và IE - bị nuốt chửng. Vì vậy, rất có thể tôi sẽ đăng các kiểu CSS thông thường.
Và đó là tất cả cho ngày hôm nay! Tạm biệt mọi người!
Nếu bạn không muốn tự mình tạo một nút như vậy, tôi khuyên bạn nên chú ý đến nút này cho phép bạn triển khai chức năng này và có nhiều tính năng bổ sung khác.
Xin chào các du khách thân mến!
Tôi tiếp tục xuất bản các bài viết kỹ thuật.
Và hôm nay tôi sẽ đề cập đến chủ đề thú vị, trong đó chúng ta sẽ thảo luận về nút cuộn lên đầu trang trên trang web. Chúng ta sẽ nói về tầm quan trọng của nút này, đó là cách tôi thích làm. Tôi cũng sẽ chỉ cho bạn cách triển khai chức năng này thú vị và hiệu quả nhất.
Có cần thiết khôngTôi nghĩ rằng không đáng để hiển thị nó trông như thế nào trên các trang web vì hầu hết mọi tài nguyên đều có nó. Đây là một nút đơn giản có mũi tên lên hoặc một từ mà khi nhấp vào sẽ nhanh chóng đưa bạn đến khu vực trên cùng của trang web.
Chức năng này là một yếu tố, trong một số trường hợp nhất định, sẽ cải thiện khả năng sử dụng của trang web. Đây là những trường hợp mà bây giờ chúng tôi sẽ thảo luận với bạn.
Điều quan trọng đầu tiên và có lẽ là trường hợp duy nhất cần đến nút lên là sự hiện diện lượng lớn nội dung trên trang. Nếu trang dài thì việc cuộn lên đầu sẽ khá khó khăn.
Bạn phải sử dụng thanh cuộn, điều mà ít người sử dụng. Ít nhất thì tôi không sử dụng nó chút nào, vì đó là một thao tác di chuột phụ và không thuận tiện lắm. Hoặc bạn phải quay video trên chuột, việc này mất rất nhiều thời gian và lâu dần trở nên khó chịu.
Do đó, nếu trang web của bạn có các bài viết thực sự lớn thì bạn có thể cài đặt một nút, nhưng bạn cần phải làm cho nó dễ dàng nhấp vào nó và thực hiện việc này dễ dàng hơn là quay video hoặc sử dụng thanh cuộn trong browser. Nếu không thì sẽ có ích gì nếu nó tương đương với những hành động tiêu chuẩn?
Dựa trên điều này, có những nút cuộn lên phổ biến nhất và hiệu quả nhất thực sự hoạt động hiệu quả. Một lựa chọn như vậy là nút lên, như trong mạng xã hội Liên hệ với. Chúng tôi chuyển sang thực hiện phương pháp này.
Nút lên như VKontakteMột tính năng đặc biệt của nút này là dễ sử dụng. Nó trông giống như một thanh cuộn ở phía bên trái của trang web, chiếm toàn bộ chiều cao của tài nguyên.
Tùy chọn này đã được chứng minh vì thực tế không có người dùng nào không sử dụng nó trên mạng xã hội. Mạng VKontakte. Thuận lợi việc thực hiện này vì bạn không cần phải hướng con trỏ chuột vào bất kỳ nút nào. Chỉ cần nhấp vào khu vực bên trái của trang web và trang sẽ cuộn lên trên cùng. Thậm chí không cần phải quan sát con trỏ; bạn chỉ cần di chuyển chuột đến mép màn hình và nhấp một lần.
Sẽ không thể thực hiện chính xác việc triển khai giống như VKontakte, nhưng một phiên bản gần đúng thì dễ dàng.
Để thực hiện nó, bạn chỉ cần đặt tập lệnh trên trang web.
Để tải tập lệnh, bạn có thể đặt chính mã đó giữa các thẻ hoặc trước thẻ đóng trong tệp footer.php. Hoặc bạn có thể chỉ cần tải tệp có tập lệnh lên máy chủ của mình, sau đó chỉ cần tải tệp lên trang web.
Nếu bạn muốn đặt tập lệnh và không phải lo lắng về việc tải nó thì tôi sẽ đưa cho bạn chính mã tập lệnh.
JavaScript
$(document).ready(function() ( $("body").append("^ Back to Top"); $ (window).scroll (function () ( if ($ (this).scrollTop() > 300) ( $ ("".button-up").fadeIn(); ) else ( $ ("".button-up").fadeOut(); ) )); $(".button-up").click( function( )( $("body,html").animate(( ScrollTop: 0 ), 100); return false; )); $(".button-up").hover(function() ( $(this) .animate (( "opacity:"1", )).css(("background-color:"#E1E7ED","color:"#45688E")), function())( $(this). animate (( "opacity:"0.7" )).css(("background:"none","color":"#45688E"); ));
$(tài liệu). sẵn sàng(hàm()( $("cơ thể"). nối thêm("^Trở lại đầu trang"); $(cửa sổ). cuộn(hàm()( if ($(this).scrollTop() > 300)( $(".nút lên"). fadeIn(); ) khác ( $(".nút lên"). fadeOut(); } ) ; $(".nút lên"). nhấp chuột(hàm()( $("cơ thể,html") . sinh động (( cuộnTop: 0 } , 100 ) ; trả về sai; } ) ; $(".nút lên"). di chuột (hàm()( $(cái này). sinh động (( "độ mờ" : "1", ) ) . css (( "background-color" : "#E1E7ED", "color" : "#45688E" ) ) ; ) , chức năng () ( $(cái này). sinh động (( "độ mờ" : "0,7" ) ) . css (( "nền" : "không", "màu" : "#45688E" ) ) ; ; } ) ; } ) ;
|
Trong mã này, bạn có thể thay đổi một số tham số cho phù hợp với nhu cầu của mình.
- Dòng 4 chịu trách nhiệm hiển thị chính khu vực cuộn trang. Nó chứa các kiểu cơ bản để hiển thị nút. về nguyên tắc, những thông số này phải phù hợp với hầu hết mọi người. Nhưng bạn có thể cần chỉnh sửa chúng cho phù hợp với mình;
- Ở dòng 7 trong ngoặc có số 300, chịu trách nhiệm về thời điểm nút xuất hiện. Tức là nút sẽ chỉ xuất hiện sau khi cuộn xuống 300 pixel. Tôi khuyên bạn nên chọn một giá trị ở đây để chỉ có thể cuộn khi menu trang chính hoặc một số thành phần quan trọng khác trong điều hướng biến mất khỏi chế độ xem;
- Ở dòng 17, giá trị 100 là tốc độ cuộn. Giá trị càng thấp thì tốc độ quay lại đầu trang càng nhanh.
Mã này có thể được đặt giữa các thẻ ở đầu trang web. Nếu trang web trên WordPress thì khu vực này nằm trong tệp mẫu header.php. Bạn cũng có thể đặt nó trước thẻ đóng ở cuối trang (tệp footer.php). Tôi khuyên bạn nên sử dụng tùy chọn cuối cùng vì nó sẽ tăng tốc độ tải trang web. Nó sẽ trông giống thế này.
Thậm chí nhiều hơn lựa chọn hiệu quảđang tải tập lệnh này từ tập tin riêng biệt. Bạn có thể tải xuống tệp bằng cách sử dụng nút bên dưới. Nó nằm bên trong kho lưu trữ.
Sau đó upload file này lên hosting của bạn. Bạn có thể tải nó lên thư mục chủ đề hoặc vào thư mục gốc của trang web. Theo truyền thống, tôi làm điều này trong thư mục mẫu. Sau đó, bạn nên viết mã sẽ tải tệp này vào cùng một nơi. Để làm điều này, sử dụng dòng sau.
JavaScript
|
Trong đó, bạn sẽ cần thay thế đường dẫn đầy đủ đến tệp bằng đường dẫn của bạn ở dòng thứ hai. Sau đó dán mã này vào cùng khu vực trước thẻ đóng như hình bên dưới.
Sau khi chỉnh sửa file nếu thực hiện trên máy tính thì chúng ta upload lên hosting kèm theo thay thế tập tin nguồn. Sau đó, một nút lên đơn giản trên trang web của bạn sẽ hoạt động.
Để chỉnh sửa các thông số trong tập tin này, bạn sẽ cần mở nó bằng trình soạn thảo Notepad.
Tùy chọn này rất tốt vì sự đơn giản của nó, cả trong vận hành và cài đặt trên trang web. Một tùy chọn nâng cao hơn là khi, ngoài việc cuộn lên, bạn có cơ hội quay lại vị trí mà bạn đã cuộn. Đây chính xác là tùy chọn được triển khai trên phương tiện truyền thông xã hội. Mạng VKontakte. Làm thế nào để làm điều đó, xem bên dưới.
Cách thứ hai để cài nút từ VKontakteQua phương pháp này Mình đã quay video hướng dẫn chi tiết.
Tùy chọn này hiện có trên blog của tôi. Tôi vẫn chưa thể phân tích tính hữu dụng của nó. Tuy nhiên, nếu nó nằm trên một trong những gã khổng lồ của Runet, thì chúng ta có thể yên tâm cho rằng nó có tác dụng gì đó. Tất nhiên, ở quy mô như vậy thì đó là điều không cần bàn cãi. Nhưng trên một nguồn tài nguyên nhỏ, bạn có thể suy nghĩ kỹ trước khi cài đặt nó. Nhưng tôi nhìn về tương lai, đó là lý do tại sao tôi đưa ra quyết định này.
Việc thực hiện phương pháp thứ hai phức tạp hơn một chút, nhưng quy trình này chắc hẳn đã quen thuộc với bạn nếu người khác đã thực hiện nó điểm kỹ thuật trên tài nguyên của bạn.
Gồm 3 giai đoạn:
Đầu tiên, chúng ta cần đặt một đoạn script giúp cuộn mượt mà và màu sắc thay đổi mượt mà khi di chuột, cả vùng và màu của con cú “To Top”, tùy thuộc vào khoảng cách trang được cuộn xuống.
Bạn có thể đi theo 2 cách, như trường hợp đầu tiên. Đặt chính tập lệnh vào khu vực mong muốn (xem điểm ở trên) hoặc tải xuống tập lệnh qua một tệp. Tiếp theo, chúng ta sẽ thực hiện mọi thứ thông qua phương pháp thứ hai sao cho hiệu quả.
Tải xuống tập lệnh bằng nút bên dưới.
Đặt tệp trên máy chủ lưu trữ và tải tệp lên thông qua mã ở cuối trang web, như bạn đã làm trước đây. Tệp được đặt tên giống hệt như trong phương pháp 1, vì vậy bạn có thể lấy cùng một dòng mã cho đầu ra.
⇓ Quay lại ⇑ Lên
< div class = "leftbar-wrap" > < a href = "#0" id = "scroll-back" > < span class = "active-area" > < span class = "bar-desc-niz" >⇓Quay lại< / span > < / span > < / a > < a href = "#" class = "left-controlbar" > < span class = "active-area" > < span class = "bar-desc-top" >⇑Top< / span > < / span > < / a > |
Bạn có thể đặt nó ở cuối trang web, trước thẻ đóng trong tệp footer.php.
Sau đó, chúng tôi viết các kiểu thiết kế trong tệp kiểu của mình (style.css) và tải tất cả các tệp đã thay đổi lên dịch vụ lưu trữ. Đây là những phong cách riêng của họ.
/* mô tả vùng chứa */.leftbar-wrap ( vị trí: cố định; chiều cao: 100%; trên cùng: 0; chiều rộng: 99px !important; left: 0; ) /* mô tả về nút “Top” */.left -controlbar ( chiều cao : 100%; hiển thị: khối; trang trí văn bản: không có; ) /* mô tả về nút “Quay lại” */#scroll-back ( hiển thị: khối; chiều cao: 100%; trên cùng: 0; hiển thị: none; text-align: center; ) /* mô tả cột màu nền cho cả hai nút */.active-area ( width: 100px; Height: 100%; display: block; text-align: center; ) /* đặt độ trong suốt của màu nền khi di chuột qua vùng hoạt động của trang */.leftbar-wrap:hover .active-area ( nền: #E1E7ED !important; opacity:0.7 !important; ) /* làm cho đèn nền sáng hơn một chút khi di chuột qua dòng chữ */.leftbar-wrap .active-area :hover ( ) /* căn giữa dòng chữ ở các nút * /.bar-desc-niz ( top: 26% !important; vị trí: tương đối; display: inline-block; ) .bar-desc-top ( top: 10% !quan trọng; vị trí: tương đối; hiển thị: khối nội tuyến;
/* mô tả vùng chứa */ Thanh bọc bên trái ( vị trí: cố định; chiều cao: 100%; trên cùng: 0; chiều rộng: 99px !quan trọng; trái: 0; /* mô tả nút “Up” */ Thanh điều khiển bên trái( chiều cao: 100%; hiển thị: khối; trang trí văn bản: không có; /* mô tả nút “Quay lại” */ #cuộn lại ( hiển thị: khối; chiều cao: 100%; trên cùng: 0; không trưng bày; căn chỉnh văn bản: giữa; /* Mô tả cột màu nền cho cả hai nút */ Khu vực hoạt động ( chiều rộng: 100px; chiều cao: 100%; hiển thị: khối; căn chỉnh văn bản: giữa; /* đặt độ trong suốt của màu nền khi di chuột qua vùng hoạt động của trang */ Thanh bên trái:hover.active-area ( nền : #E1E7ED !quan trọng ; độ mờ: 0,7 !quan trọng; /* làm cho phần đánh dấu sáng hơn một chút khi di chuột qua dòng chữ */ Thanh bên trái .active-area:hover ( /* căn giữa nhãn trên các nút */ Thanh-desc-niz ( trên cùng : 26% !quan trọng ; vị trí: tương đối; hiển thị: khối nội tuyến; Thanh-desc-top ( trên cùng : 10% !quan trọng ; vị trí: tương đối; hiển thị: khối nội tuyến; |
Tùy thuộc vào thiết kế và cấu trúc tài nguyên của bạn, bạn sẽ cần thay đổi một chút một số tham số trong các kiểu này. Ví dụ: ở dòng 47 và 53, thay đổi tham số thụt lề cho các từ “Back” và “Top” lần lượt từ đầu trang
Sau khi chỉnh sửa tất cả các tệp, chúng tôi có thể tải chúng lên máy chủ lưu trữ một cách an toàn và phương pháp này sẽ hoạt động. Bạn có thể thấy việc triển khai nó trên blog của tôi. Hãy làm điều đó vì sức khỏe của bạn.
Chúng tôi chuyển sang phương pháp tiếp theo. Tùy chọn này sẽ chứa nút đơn giảnở khu vực phía dưới bên phải của màn hình, nhấp vào nó sẽ chuyển lên đầu trang.
Phương pháp thứ ba cho nút quay lại đầu trang mà không cần pluginViệc triển khai nút cũng rất đơn giản và hoạt động 100% trên trang web WordPress. Tôi không thể nói bất cứ điều gì về trang HTML hoặc công cụ khác. Kiểm tra nó.
Bạn cần sao chép đoạn mã sau có tập lệnh vào cuối trang trước thẻ đóng /
JavaScript
$(document).ready(function())( $("#back-top").hide(); $(function () ( $(window).scroll(function () ( if ($(this). ScrollTop () > 100) ( $("#back-top").fadeIn(); ) else ( $("#back-top").fadeOut(); ) )); $("body,html").animate(( ScrollTop: 0 ), 400); trả về sai;< p id = "back-top" > < a href = "#top" > < span > < / span > < / a > < / p > |
Đến nay nó đã trở thành một khám phá đối với những người làm việc với các ứng dụng trên Nền tảng Android và cả thiết kế giao diện người dùng. Nó đã được giới thiệu bởi Google vài năm trước. Mục đích vật liệu thiết kế là sự sáng tạo ngôn ngữ hình ảnh, sẽ thống nhất các nguyên tắc thiết kế cổ điển với sự đổi mới.
Ý tưởng này có vẻ rất hứa hẹn và hứa hẹn. Material Design là nỗ lực mới nhất nhằm đồng thời mang lại trải nghiệm người dùng (UX) thoải mái và hiệu quả. Google đã thực hiện một công việc tuyệt vời trong lĩnh vực này: họ sử dụng đặt tối thiểu các yếu tố thiết kế, sử dụng các thành phần độc đáo, màu sáng, hoạt ảnh và tạo môi trường thân thiện với người dùng.
Đồng thời, các nhà thiết kế thực hành cái gọi là nút hành động nổi (FAB). Đó là một nút tròn vẻ bề ngoàiđược nhiều người biết đến Người dùng Android. Đó là một yếu tố đặc biệt khác của thiết kế vật liệu. FAB xuất hiện trên đầu giao diện ứng dụng và thúc đẩy người dùng thực hiện một hành động được nhắm mục tiêu cụ thể.
Về cơ bản, FAB là vì mục đích của nó là thuyết phục một người làm điều gì đó (chẳng hạn như tải xuống hoặc tải lên một số nội dung nhất định). Nút hành động mục tiêu nổi thường được đặt ở góc bên phải màn hình. Rất khó để không chú ý vì nó có thiết kế tươi sáng và hấp dẫn. FAB thúc đẩy người dùng thực hiện các hành động phổ biến nhất trong ứng dụng. Tuy nhiên, có một số vấn đề khi sử dụng các nút này.
Có vấn đề gì với các nút hành động mục tiêu nổi?FAB đại diện cách tiếp cận hợp lý, điều này cho phép bạn thúc đẩy người dùng thực hiện hành động vì rất khó để họ không chú ý. Tuy nhiên, chúng có thể là giải pháp sai lầm cho toàn bộ thiết kế trải nghiệm người dùng. Dưới đây là một số lý do tại sao các nút hành động nổi có thể có tác động tiêu cực đến UX.
FAB có thể can thiệp vào người dùngNhư đã đề cập ở trên, các nút hành động mục tiêu nổi thường được đặt ở góc dưới bên phải màn hình. Trong hầu hết các trường hợp, chúng nằm ở trên cùng của nội dung ứng dụng, che phủ một phần nội dung đó.
Tất nhiên, FAB có kích thước thực sự nhỏ nên chúng chỉ che giấu một phần nhỏ nội dung khỏi mắt người dùng. Tuy nhiên, hãy xem ứng dụng Google Ảnh(ảnh chụp màn hình bên dưới) trong đó nút hành động mục tiêu nổi bao phủ một phần quan trọng của ảnh.
Để xem những gì ẩn dưới nút, người dùng sẽ phải cuộn xuống trang. Nhưng nếu nó đã ở cuối trang thì sao? Sau đó, việc cuộn sẽ không thể thực hiện được và người dùng sẽ phải thêm một số nội dung để thực hiện. phần ẩn những bức ảnh có thể nhìn thấy được.
Điều rất quan trọng là phải nhận ra một thực tế là nút hành động mục tiêu nổi, mặc dù có kích thước nhỏ nhưng có thể che giấu một phần nội dung của ứng dụng khỏi mắt người. Điều này có thể gây ra hậu quả tiêu cực đối với trải nghiệm người dùng.
Thiết kế của chúng ngăn chặn việc ngâm hoàn toànCác nút hành động mục tiêu nổi nổi bật so với nền chung. Trong nhiều trường hợp, điều này tạo ra trở ngại cho việc thực hiện đặc điểm quan trọng nhất Kinh nghiệm người dùng - ngâm hoàn toàn vào bầu không khí của ứng dụng.
Ví dụ một lần nữa là ứng dụng Photos của Google. Khi một người mở nó, anh ta sẽ được đưa đến thư viện của người dùng, nơi anh ta có thể chỉ cần xem ảnh. Trong trường hợp này, chức năng tìm kiếm do FAB cung cấp có thể hữu ích nhưng không được ưu tiên.
Nút mục tiêu nổi khiến anh ấy mất tập trung khi xem ảnh một cách say mê bằng cách chiếm không gian trên màn hình và chặn một số phần của hình ảnh. Trong những trường hợp như vậy, nút không nên quá nổi bật.
Chúng có thể vô dụngNhư chính các chuyên gia của Google giải thích, một nút nổi sẽ khuyến khích người dùng thực hiện một hành động được nhắm mục tiêu. Tuy nhiên, các nhà phát triển đôi khi quên tần suất một người thực hiện hành động này khi sử dụng ứng dụng.
Nguyên tắc vàng trong thiết kế trải nghiệm người dùng là làm cho các yếu tố cần thiết và thường xuyên được hiển thị, còn các yếu tố hiếm khi được sử dụng gần như vô hình. Tuy nhiên, như chúng ta thấy trong ví dụ Ứng dụng Gmail(ảnh chụp màn hình ở trên), các nhà phát triển đã không tính đến quy tắc này.
Trên màn hình ứng dụng, chúng ta thấy một nút, bằng cách nhấp vào nút đó người dùng có thể nhanh chóng tiến hành viết e-mail. Tuy nhiên, theo khảo sát gần đây, khoảng một nửa số người dùng chỉ xem email bằng thiết bị di động. Nói cách khác, họ không thường xuyên viết thư bằng điện thoại thông minh hoặc máy tính bảng.
