Thư viện giao diện
Thành phần giao diện mẫu cho website, app và trang quản trị
Đây là những thành phần chúng tôi có thể đưa vào sản phẩm của bạn. Mọi thẻ đều thao tác trực tiếp được. Sản phẩm, giá và số liệu trong thẻ đều là dữ liệu mẫu để minh họa.
Dịch vụ bổ trợ · Website
Website chuyên nghiệp, xây dựng quanh mục tiêu kinh doanh
Bên cạnh quảng cáo và AI, chúng tôi thiết kế website khi doanh nghiệp cần một nơi chính thức để giới thiệu, nhận khách từ quảng cáo và bán hàng. Mỗi website bắt đầu từ câu hỏi: bạn muốn khách hàng làm gì sau khi truy cập?
Tiêu chuẩn áp dụng cho mọi website
- Ưu tiên điện thoại
Bố cục, cỡ chữ và nút bấm được thiết kế cho màn hình nhỏ trước, sau đó mở rộng cho máy tính.
- Tốc độ tải trang
Hình ảnh được nén, mã nguồn gọn và chỉ tải những gì thực sự cần thiết.
- Bảo mật cơ bản
Chứng chỉ SSL, kiểm tra dữ liệu nhập vào biểu mẫu, không để lộ khóa bí mật trong mã nguồn trang.
- Sẵn sàng cho tìm kiếm
Tiêu đề, mô tả, cấu trúc nội dung và sơ đồ trang theo hướng dẫn của Google.
- Đo lường được
Gắn công cụ đo lượt truy cập và chuyển đổi theo nhu cầu, để bạn biết khách hàng đến từ đâu.
- Dễ tiếp cận
Độ tương phản, cỡ chữ và thao tác bàn phím đảm bảo dễ đọc, dễ dùng cho nhiều đối tượng.
Thành phần giao diện tiêu biểu
Các thẻ dưới đây là những thành phần có thể đưa vào website của bạn, thao tác trực tiếp được trên từng thẻ. Mọi sản phẩm, giá và số liệu đều là dữ liệu minh họa.
Mua sắm và tìm kiếmGiúp khách tìm đúng sản phẩm và thêm vào giỏ nhanh chóng
Váy đầm
Áo sơ mi linen
390.000đ
Xu hướng
Còn lại05:12:40
Khách mua lần đầu15%GIẢM
Đơn từ 500.000đ · giảm tối đa 100.000đ
Đã lưu vào ví · tự áp dụng khi thanh toán
Trang sản phẩm và thanh toánTừ lúc xem sản phẩm đến khi hoàn tất đơn hàng
Tóm tắt đơn hàng2 sản phẩm
Tạm tính
Vận chuyển
Giảm giá
Tổng
Laptop
Áo sơ mi linen hằng ngày
20%390.000đ480.000đ
Miễn phí vận chuyển · Giao ngày maiChi tiết
Vải linen nhẹ, thoángChiếc áo mặc hằng ngày cả mùa hè mà không lo nhăn
Màu sắc
Kích cỡ
| S | M | L | XL | |
|---|---|---|---|---|
| Vai | 44 | 46 | 48 | 50 |
| Ngực | 54 | 56 | 58 | 61 |
| Dài | 72 | 74 | 76 | 78 |
Bảo quản
Giặt tay nước lạnh · Phơi trong bóng râm · Ủi nhiệt thấp
Người mẫu 178 cm · mặc size L
Đánh giá
Đánh giá của khách sẽ hiển thị ở đây
Giao đến
Giày chạy bộ tối giản
31%890.000đ1.290.000đ
Miễn phí vận chuyển · Xuất kho hôm nayChi tiết
Giày chạy nhẹ, bền, mang hằng ngày. Mũ giày dệt thoáng khí và đế đàn hồi giúp bạn thoải mái khi đi bộ lâu.
Đánh giá
Đánh giá của khách sẽ hiển thị ở đây
Có thể lọc theo số sao
890.000đ31%
Biểu mẫu và thu thập thông tinÍt thao tác, báo lỗi rõ ràng, giảm tỷ lệ bỏ dở
Chúng tôi dùng cookie được không?Chỉ để trang dễ dùng hơn.
Bạn thấy đơn hàng này thế nào?
Điều hướngMenu và nút bấm đưa khách đến đúng nội dung
Menu
- Giới thiệuTrượt qua
- Dịch vụMở từ giữa
- Bài viếtSóng chảy
- Liên hệChéo nhau
- Báo giáChấm kéo dài
Trình bày nội dungChi nhánh, bộ sưu tập, danh sách và dịch vụ
Bộ sưu tập
Bạn cần gì tiếp theo?
Bán hàng và thanh toán nâng caoChọn gói, chọn màu, số lượng, thanh toán và theo dõi giao hàng
Gói Pro300.000đ / tháng
Cà phê ủ lạnh 500 ml64.500đ · Giao hôm nay
Tổng129.000đ
ĐenBình giữ nhiệt
Khoảng giá530.000đ – 1.200.000đ
48 sản phẩm
MỚI
Bình nước 500 ml490.000đ
Inox · giữ nhiệt 12 giờ
Bình nước 500 ml · San hô580.000đ
Vận chuyển60.000đ
Tổng640.000đ
Thẻ ngân hàng•••• 0818
Trả gópTrả một lần
Điểm tích lũy+ 960P
Đơn DH-0428 · Bình nước 500 ml
Màu
Thêm địa chỉ giao hàng
Địa chỉÔ nhập và biểu mẫuNhập liệu nhanh, kiểm tra ngay, hạn chế sai sót
Gần đây
Gợi ý
Minh AnhHiệu ứng chuyển ở mẫu 3 hơi nhanh. Bạn thấy sao?
Thẻ dự án3 / 6
Bắt đầuChọn ngày
Kết thúcChọn ngày
Chọn thời gian dự án
Vùng và ngôn ngữ
Ngôn ngữ hiển thị
Múi giờ
Marketing Kế hoạch
Đăng nhập và đăng kýVào tài khoản nhanh, an toàn và rõ ràng
Sẵn sàng bắt đầu?
Dùng tài khoản bạn đã có
hoặc
Đọc điều khoản
1. Mục đích
Điều khoản này quy định quyền và nghĩa vụ khi sử dụng dịch vụ.
2. Tài khoảnMỗi email dùng cho một tài khoản; thành viên tự bảo mật thông tin tài khoản của mình.
3. Nội dungThành viên sở hữu tệp mình tải lên. Đơn vị cung cấp chỉ dùng khi cần để vận hành dịch vụ.
4. Dữ liệu cá nhânChỉ thu thập thông tin cần cho đăng ký và thanh toán, xóa ngay khi không còn cần.
5. Hủy tài khoảnThành viên có thể rời đi bất cứ lúc nào trong Cài đặt; dữ liệu còn lại được xóa sau 30 ngày.
Đọc đến cuối để mở các mục bắt buộc
Đầu trang, menu và tabGiúp khách định hướng ngay từ phần đầu trang
Blog · 5 phút đọcCách đội nhỏ
Cách đội nhỏ
ra mắt nhanh
Thương hiệuSản phẩmBảng giáBlogBắt đầu
Đã có phiên bản 2.0
Từ lên kế hoạch đến ra mắt, mọi công cụ rời rạc về một chỗ.
Dùng thửXem giới thiệu
Thương hiệu
Bộ sưu tập tuần nàyNghiên cứu ánh sáng và màu sắc
Bài đọc hôm nayTin mẫu
Thẻ nội dung và bài viếtTrình bày tin tức, sự kiện, hình ảnh và bài viết
TƯƠNG TÁC · BÀI VIẾT
SỐ 12 · 6 PHÚT
Niềm tin trong
một chuyển động ngắn
Phản hồi trong 150 mili giây đủ để màn hình trở nên sống động. Quyết định chỗ nào dừng, chỗ nào nảy là việc của thiết kế.
Nhóm thiết kếBài viết mẫu
Tin thiết kế
Vì sao thanh tab dưới đáy quay trở lại
Điều hướng vừa tầm ngón cái đang quay lại. Đây là cách năm ứng dụng lớn thay đổi.
Hôm nay 9:20 · 8 phút
GHI CHÚ THIẾT KẾ · 4 PHÚTChuyển động không bắt người dùng chờ
Mở đầu
0,3 giây sau khi chạm mà màn hình không phản hồi dài hơn bạn nghĩ. Người dùng hiểu khoảng lặng đó là “bị lỗi”.
Vì vậy chuyển động tốt phản hồi trước, hiện kết quả sau. Khi thứ gì đó di chuyển ngay lúc bạn bấm, việc chờ không còn giống chờ nữa.
Ba nguyên tắc
Một, bắt đầu từ chỗ ngón tay chạm. Hai, chỉ di chuyển phần thay đổi. Ba, khi dừng thì vượt nhẹ rồi trở về.
Chỉ cần giữ ba điều này, màn hình bớt cứng nhắc hẳn. Điều thứ ba đặc biệt tạo cảm giác có trọng lượng.
Trong thực tế
Khi sản phẩm bay vào biểu tượng giỏ hàng, mắt người dùng đi theo kết quả. Cách này ít gây nhầm hơn một con số lặng lẽ thay đổi.
Khi vệt sáng trượt giữa các tab, bạn vẫn biết mình vừa ở đâu. Người dùng không bị lạc.
Xóa khỏi danh sách cũng vậy. Khi các mục bên dưới từ từ khép lại, bạn tự nhiên thấy mục nào vừa bị xóa.
Tóm lại
Chuyển động không để trang trí mà để giải thích: câu ngắn nhất cho biết thứ gì đi đâu.
Quá dài thì thành chờ, quá ngắn thì không ai thấy. Phần lớn câu trả lời nằm trong khoảng 0,2 đến 0,5 giây.
Với người thích ít chuyển động, hãy truyền đạt cùng thông tin mà không cần hiệu ứng. Đó cũng là một phần của chuyển động tốt.
Bạn đã đọc hết · Gợi ý bài tiếp theo
SỰ KIỆN24
Gặp mặt trực tiếpBuổi tối thiết kế chuyển động
Thứ Sáu 19:30Không gian mẫu
tham gia
Một buổi tối cùng phân tích một tương tác nhỏ. Chỉ cần mang laptop.
50 chỗCòn 13 chỗ
Đà Lạt, 4 ngày5 ảnh
Ghi chú thiết kế
Nghĩ cho màn hình nhỏ trước
Giao diện và nền độngChế độ sáng tối và nền chuyển động cho phần mở đầu
NỀN SỐNG ĐỘNGÁnh sáng lúc bình minhÁnh sáng trôi theo con trỏ của bạn
Dịch vụ bổ trợ · App mobile
App mobile giúp khách hàng quay lại thường xuyên hơn
Ứng dụng di động là kênh chăm sóc khách hàng trực tiếp nhất: đặt hàng nhanh, nhận thông báo, tích điểm ưu đãi. Chúng tôi phát triển app cho cả iOS và Android, bắt đầu từ phiên bản tinh gọn nhất có thể đưa vào sử dụng.
Trải nghiệm trên ứng dụng
Màn hình và điều hướngCách người dùng di chuyển giữa các màn hình
Cửa hàng gần bạn8 nơi
Tìm theo tên hoặc món
Bên trong một ứng dụng
Đã ghép hoàn chỉnh
ỨNG DỤNG MẪU
Một ứng dụng, mọi thiết bị
Tác vụ thường gặpTóm tắt nội dung, cài đặt, chia sẻ, xóa an toàn và thông báo
Họp tuần (nội dung mẫu)14/10 · 6 người
Báo sắp hết hàngBáo khi còn 5 sản phẩm trở xuống
Chia sẻ “Kế hoạch chiến dịch”
Người có quyền truy cập
Quyền truy cập chung
https://example.com/chia-se/ke-hoachCài đặt dự án
trang-gioi-thieuĐã đăng 3 phút trước · bản mẫu
Vùng nguy hiểm
Xóa dự án và mọi bản đã đăng
Đã xóa dự án
Muốn được báo khi có người trả lời?
Chỉ việc quan trọng. Tắt bất cứ lúc nào trong cài đặt.
Đã bật thông báo
Có người trả lời“Ổn rồi, mình gửi ngay hôm nay!”
!
Mức dùng tháng nàyGói mẫu · đặt lại ngày 1/11
Thông báo và phản hồiCho người dùng biết điều gì vừa xảy ra
Thông báo sẽ xếp chồng ở đây
Hộp thư
Hộp thư trống
Trạng thái hệ thống
- Kết nối thanh toán bị lỗi
3 yêu cầu gần nhất không có phản hồi.
09:41:02 /hooks/pay 504 09:41:32 /hooks/pay 504 09:42:02 /hooks/pay 504 - Dung lượng đã dùng 72%
Dừng nhận tệp mới khi vượt 90%.
- Đã có phiên bản 2.4
Độ tương phản tốt hơn ở giao diện tối.
- Sao lưu xong
Hôm nay 4:00 · 12,8 GB
Không gian
Ghi chú họp tuần này
Màn hình chào mới sẽ bắt đầu ngay ở trang đầu, và mọi chú thích đều hiện phím tắt.
Màn hình chào mới sẽ bắt đầu ngay ở trang đầu, và mọi chú thích đều hiện phím tắt.
Thu HàBản nháp v3 đã lên! Mình rút hiệu ứng nút còn 0,3 giây.
Minh AnhNhẹ hơn hẳn rồi. Mình nghĩ dùng được luôn 🙌
Hay dùng
Cài đặt và lựa chọnCông tắc, đánh giá và tùy chọn cá nhân
Không làm phiền
Thông báo đổ chuông như thườngTắt tiếng đến 8 giờ sáng mai
Bạn thấy đơn hàng thế nào?
Bạn quan tâm dịch vụ nào?Chọn tối đa 5 mục để được tư vấn đúng
0/5
Thông báo2 đang bật
Thông báo đẩyChỉ khi được nhắc tên và trả lời
Email tổng hợpTắt
Tự động lưuLưu mỗi 30 giây
Màn hình app thường gặpViệc cần làm, hướng dẫn từng bước, thẻ thành viên, làm mới, hẹn giờ
Hôm nay
Danh sách việc mẫuĐã xong việc hôm nay
- Tài khoản
- Không gian
- Mời
- Xong
Chúng tôi nên gọi bạn là gì?
Tên này sẽ hiển thị với nhóm của bạn
Nguyễn Văn AHọ tên
Thiết kếLập trìnhQuản lý
Tạo không gian làm việc
Bạn có thể đổi bất cứ lúc nào
Cửa hàng của bạnHọ tên
anhkhoigroup.io.vn/designURL
Mời đồng đội
Lời mời được gửi ngay
jun@example.comĐược sửa
mina@example.comChỉ xem
Đã sẵn sàng
Chào mừng đến với Cửa hàng của bạn
Cập nhật của nhóm
Hẹn giờ tập trungSẵn sàng
2 phiên tập trung hôm nay
· Lặp lại các ngày trong tuần
Dịch vụ bổ trợ · Hệ thống quản trị
Quản lý đơn hàng, khách hàng và đội ngũ trên một màn hình
Website và app chỉ phát huy hiệu quả khi bạn theo dõi được hoạt động kinh doanh. Trang quản trị được thiết kế theo đúng công việc hằng ngày: xem đơn hàng, chăm sóc khách, giao việc, đọc báo cáo. Số liệu trong các thẻ dưới đây là dữ liệu minh họa.
Theo dõi kinh doanhĐơn hàng, khách hàng, công việc và nguồn khách
TRANG QUẢN TRỊ
Cả cửa hàng, một màn hình
Tháng 10, tuần 3
T2T3T4T5T6
Ghi chú ra mắtđang sửa
Doanh thu tháng này
0đ+18% so với tháng trước
Khách hàng
Mọi hệ thống bình thườngKiểm tra 1 phút trước
Theo dõiLàm việc nhóm và vận hànhGiao việc, phát hành tính năng và theo dõi lãi lỗ
Kiểm tra trang chủ
tính năng mới
THỬ
DUYỆT
CHẠY
Ý tưởng
chung.
chung.
Quán Góc.
187.000đ
CÀ PHÊ SỮA × 2100.000
BÁNH MÌ NƯỚNG70.000
VAT 10%17.000
Đơn vị · triệu (mẫu)
80
Đầu kỳ+40
Doanh thu−30
Giá vốn−15
Vận hành75
Còn lạiCông cụ làm việcChuyển tài khoản, menu thao tác nhanh và bảng lệnh
Tệp gần đây4 mục
Màn hình chào v4Thiết kế · vừa xong
Báo cáo quý 3Tài liệu · 1 giờ trước
Bộ chuyển độngBảng tính · hôm qua
Bảng cảm hứng thương hiệuBảng · 3 ngày trước
Thiết kế và trải nghiệm
Chỉn chu đến từng chuyển động
Chuyển động phù hợp giúp người xem tập trung vào thông tin quan trọng và ghi nhớ thương hiệu lâu hơn. Chúng tôi lựa chọn hiệu ứng theo tính cách thương hiệu và luôn ưu tiên tốc độ tải trang.
- Mỗi hiệu ứng có mục đích
Giúp người xem hiểu nhanh hơn hoặc bấm đúng chỗ, không chỉ để trang trí.
- Nhẹ trên điện thoại
Hiệu ứng được thử trên thiết bị cấu hình thấp và lược bớt nếu làm trang chậm.
- Tôn trọng người dùng
Khi thiết bị bật chế độ giảm chuyển động, các hiệu ứng tự giảm hoặc tắt.
Phần mở đầu trangẤn tượng đầu tiên khi khách truy cập
đ
Đã nhận thanh toán · vừa xong2.900.000đ
Bảng số liệu mẫuMọi con số
Mọi con số
trên một màn hình
Gom số liệu rải rác về một chỗ.
Xem thửPhù hợp với
Cửa hàngĐội saleCEO
Số liệu mới nhấtLuôn cập nhật
Phân quyềnMỗi nhóm một màn hình
Hiệu ứng khi cuộnNội dung xuất hiện đúng lúc người xem cuộn tới
Quy trình làm việc
Tính năng
Làm kỹ từng chi tiết
Quen thuộc ngay từ ngày đầu, tính năng thêm dần khi bạn cần.
Bắt đầu
Bốn giai đoạn của một ý tưởng
Đủ bốn giai đoạn
Nút bấm có phản hồiMỗi lần bấm đều có phản hồi rõ ràng
Bộ nhận diện v3.fig48,2 MB · Sửa hôm qua
Đã xóa tệp
Bao-cao-quy-2026.pdf 24.6 MB
Khách hàngĐang hoạt động
Bạn gửi giúp mình ảnh mẫu nhé?
Kênh mẫu
người theo dõi
Nhạc nền thương hiệuBản nhạc mẫu · Lo-fi
1:123:40
$npm i @lucian/motion
Đã chép
Tương tác theo con trỏDanh sách, ô hình ảnh và nội dung phản hồi theo chuột
Trạng thái tải, trống và lỗiLúc chờ, lúc chưa có dữ liệu hay khi gặp lỗi vẫn rõ ràng
Thu Hà
Nha Trang · 2 giờ trước
♥ 248
💬 31
↗ Chia sẻ
Thu Hà Biển đổi ba màu lúc hoàng hôn.
Cam, rồi hồng, rồi tím.
#nhatrang #hoanghon #dao
Đang kết nối máy chủ
Chờ một chút
Dự án của tôi
Chưa có dự án nào
Chọn một mẫu để bắt đầu dự án đầu tiên
anhkhoigroup.io.vn/projcts
Có vẻ bạn đi lạc rồi
Địa chỉ bị gõ sai hoặc trang đã chuyển
Gần đúng nhất
Doanh số tuần nàyKhông tải được
Không tải được dữ liệu doanh số
Máy chủ đang không phản hồi
Danh sách việc mẫuHôm nay
Chữ chuyển độngTiêu đề, câu trích, phụ đề và chế độ đọc tập trung
Chế độ đọc · / 5
Nhấn mạnh thông điệpLàm nổi bật ý chính của thương hiệu
ANH KHÔI GROUPAGENCY
01 / 03
THÔNG ĐIỆPĐã giải
Ghi chú dự án
Website của bạn nên rõ ràng, tải nhanh và có một nút liên hệ ở mọi nơi.
Nguyên tắc làm việc
Một sản phẩm tốt dùng được mà không cần giải thích, cho bạn đường lui êm ái khi lỡ tay, và trên hết chuyển động theo nhịp của con người.
Các bước làm website
Từ chọn phông chữ đến kết nối tên miền
Từ chọn phông chữ, dựng trang, góp ý trực tiếp đến tối ưu hình ảnh, đo tốc độ và kết nối tên miền.
Thiết kế và góp ýChọn phông chữ, dựng khối trang, ghim góp ý lên bản mẫu
Tỷ lệ cỡ chữ
Câu chuyện lớn từ cửa hàng nhỏ
Tiệm bánh đầu ngõ lên mạng
Bánh nướng mỗi sáng giờ giao tận nhà. Đặt trước 21 giờ hôm trước.
Khối
Bấm một khối bên trái để bắt đầu dựng trang
Bộ sưu tập mới
Mua ngay
Vừa lưu xong
Đã lưu hết
Kiểm thử và triển khaiXem trước, tối ưu, đo tốc độ và kết nối tên miền
Thương hiệuTính năngBảng giáLiên hệ
Website đẹp trên mọi màn hình
Bắt đầuTiêu đề
Mô tả
Anh Khôi Grouphttps://anhkhoigroup.io.vn › dich-vu
anhkhoigroup.io.vn
Chất lượng
2.4MB
Kết nối tên miền
https://thuonghieu.vn
LoạiTênGiá trị
Cần làm website hoặc app theo hướng này?
Nhận tư vấn
Gửi nhu cầu, chúng tôi báo giá bằng văn bản trước khi bắt đầu.