Mọi người đều muốn nhận được phản hồi tích cực cho một công việc được thực hiện tốt. Đó là một lý do tại sao rất nhiều công ty bao gồm lời chứng thực trên trang web của họ.
Ngoài cảm giác ấm áp và khó hiểu, lời chứng thực cũng có thể giúp tuyển dụng khách hàng mới. Biết rằng những người khác đã có một kinh nghiệm tốt truyền cảm hứng cho sự tự tin. Nhìn chung, đó là một chu kỳ nhỏ hạnh phúc giúp doanh nghiệp bùng nổ.
Về mặt triển khai UI chứng thực, sự đơn giản thường tốt hơn. Tuy nhiên, điều đó không có nghĩa là họ phải nhàm chán. Việc sử dụng thông minh màu sắc, thiết kế và hiệu ứng đặc biệt có thể làm cho lời chứng thực của bạn nổi bật.
Chúng ta hãy xem một số ví dụ sẽ cung cấp cho lời chứng thực của bạn một nơi để tỏa sáng.
Tất cả trên băng chuyền
Lời chứng thực thường được kết hợp với thanh trượt và băng chuyền để tương tác và hiệu quả. Một số ví dụ trong bộ sưu tập của chúng tôi sử dụng chúng. Tuy nhiên, ví dụ này là duy nhất trong thiết kế của nó. Mặc dù có các mũi tên điều hướng tiêu chuẩn ở dưới cùng của tính năng, nhấp vào ảnh của khách hàng ở mỗi bên cũng sẽ cho phép bạn cuộn qua lại.
Xem băng chuyền của những lời chứng nhận tiếp nhận từ Bút của Md Nahidul (@thenahid)
Hình dạng và cầu vồng
Nếu bạn đang tìm cách thêm phần chứng thực vào trang của mình, điều đó thật khó để đánh bại điều này. Đầu tiên, có gradient hoạt hình thay đổi màu nền. Thứ hai, việc sử dụng đường dẫn clip CSS tạo ra một cái nhìn tuyệt đẹp trên hình ảnh. Ngay cả với tất cả những điều đó, giao diện người dùng vẫn đơn giản và thanh lịch.
Xem thanh trượt Phản hồi Bút chứng thực của hellokatili (@hellokatili)
JavaScript là không bắt buộc
Đối với tất cả những người theo chủ nghĩa CSS, đây là một giải pháp không cần một dòng JavaScript. Mặc dù nó không có gì ấn tượng về ngoại hình, nhưng nó thực sự là một điều tốt. Nó để lại cho bạn rất nhiều phòng để bạn có thể thiết kế nó phù hợp với nhu cầu của bạn. Ngoài ra, điều này sẽ phù hợp trong một không gian tương đối nhỏ.
Xem Bút chứng thực CSS thuần tuý tinh khiết của MAHESH AMBURE (@ maheshambure21)
Nó ở trong thẻ
Giao diện người dùng của thẻ này rất đơn giản và đẹp. Mỗi thẻ có ảnh nền riêng, có lẽ là để sử dụng ảnh hoặc logo của khách hàng. Độ mờ CSS được sử dụng để cho phép đủ độ tương phản để đặt văn bản màu trắng lên trên. Nó cũng khuyến khích việc sử dụng một lượng nhỏ nội dung, dễ tiêu hóa hơn nhiều so với một lời chứng thực dài hơn.
Xem Bút số 1574 – Thẻ chứng thực của LittleSnippets.net (@littlesnippets)
Một góc nhìn mới
Thiết kế là những gì chúng tôi tập trung vào bản demo này không hoạt động. Nó cho thấy sự đơn giản có thể thực sự hiệu quả. Các góc nhỏ trong ảnh nền thu hút ánh mắt của bạn, trong khi phần đệm rộng rãi xung quanh ngày tháng tạo cảm giác rộng rãi.
Xem tiện ích chứng thực Pen Stripe trong Tailwind CSS của Adam Wathan (@adamwathan)
Báo giá du lịch
Đây là một phiên bản khác nhau của một giao diện người dùng chứng thực. Nó là toàn màn hình và bạn phải di chuột qua các hình ảnh để xem giá tương ứng của mỗi người. Giao diện cực kỳ sắc nét và chuyển cảnh mượt mà. Đây có thể là một lựa chọn tốt cho các trang web tập trung nghệ thuật hơn.
Xem Bút chứng thực Hover Reveal của Dave Knispel (@daveknispel)
Một cách khác
Có rất nhiều điều để thích trong ví dụ này. Thiết kế băng chuyền cạnh nhau tạo hiệu ứng thị giác thú vị. Các hình ảnh di chuyển sang bên trái khi dấu ngoặc kép thay đổi bên phải. Nói về khu vực trích dẫn, nó cung cấp nhiều khoảng trắng và dễ đọc. Nó là một gói đó là bất cứ điều gì nhưng điển hình.
Xem thanh trượt Bút chứng thực, thanh trượt của md aqil (@ md-aqil)
Biểu đồ màu
Một ví dụ tuyệt vời khác về sự đơn giản, thiết kế thẻ này sử dụng một vài hiệu ứng CSS để tạo sự khác biệt. Đầu tiên là trích dẫn hơi xoay ở phía dưới. Chuyển đổi CSS được sử dụng để phá vỡ tính đồng nhất, theo một cách tốt. Ngoài ra, độ dốc đầy màu sắc ở chân trang làm cho toàn bộ thẻ, chúng ta dám nói, "pop".
Xem Bút mdJWryR của bradley (@bradleyham)
Lời khen đẹp
Toàn bộ ý tưởng đằng sau việc thu thập lời chứng thực là cho thấy rằng bạn biết cách làm cho khách hàng hài lòng. Đối với một số công ty và tổ chức khác nhau, họ phục vụ như một công cụ bán hàng quan trọng.
Khi nói đến việc hiển thị lời chứng thực trên một trang web, có một số tùy chọn hấp dẫn. Các ví dụ trên cho thấy cách sử dụng màu sắc, chuyển động, kiểu chữ và thiết kế có thể đóng một vai trò quan trọng trong việc xây dựng một giao diện người dùng bắt mắt. Tùy thuộc vào bạn để quyết định phương pháp nào phù hợp nhất với thương hiệu của bạn.
Bạn muốn xem các UI chứng thực hơn nữa? Hãy xem bộ sưu tập CodePen của chúng tôi và tìm hiểu những gì các nhà thiết kế khác đang làm.
