Thiết kế UI/UX cho Web3 – dApp, wallet và sàn giao dịch

Thiết kế UI/UX Web3 nên giúp người dùng làm gì?

Thiết kế UI/UX Web3 nên làm cho các tác vụ quan trọng của sản phẩm dễ tìm, dễ hiểu và dễ hoàn thành. Chúng tôi bắt đầu với hành động mà người dùng cần thực hiện – không phải với phong cách màn hình – và định hình giao diện xoay quanh mục tiêu đó.

Một dApp có thể cần giúp người dùng lần đầu hiểu giá trị của nó, kết nối wallet và hoàn thành giao dịch. Một wallet, sàn giao dịch hoặc luồng landing có các ưu tiên riêng. Chúng tôi làm rõ các ưu tiên đó với đội ngũ của bạn, sau đó lập bản đồ các màn hình và quyết định hỗ trợ chúng. Nếu dự án của bạn cũng cần một nhận diện trực quan rộng hơn, hãy xem thiết kế và hình ảnh hoặc xây dựng thương hiệu cho dự án crypto.

Xác định quyết định trước màn hình

Mang đến một brief sản phẩm, giao diện hiện có, hoặc thậm chí một mô tả sơ lược về luồng. Cùng nhau, chúng tôi xác định:

• Người dùng và tác vụ họ đến để hoàn thành.
• Những gì họ cần biết trước khi hành động.
• Nơi họ có thể do dự, mắc lỗi hoặc cần được trấn an.
• Những màn hình, trạng thái wallet và bố cục thiết bị nào nằm trong phạm vi.

Kết quả là một brief thiết kế tập trung và một cái nhìn chung về thành công của giao diện. Điều này cung cấp cho đội ngũ sản phẩm và kỹ thuật một cơ sở thực tế để đánh giá các lựa chọn thiết kế và ưu tiên công việc.

Nghiên cứu và luồng người dùng định hình giao diện Web3 như thế nào?

Nghiên cứu và luồng người dùng tiết lộ nơi sản phẩm yêu cầu mọi người đưa ra quyết định, cung cấp thông tin hoặc chuyển đổi ngữ cảnh. Chúng tôi xem xét trải nghiệm sản phẩm và các lựa chọn thay thế liên quan, sau đó biến các phát hiện thành một lộ trình rõ ràng qua giao diện.

Trong Tuần Khởi động, chúng tôi thảo luận về đối tượng của bạn, mục tiêu sản phẩm, màn hình hiện tại và các vấn đề về khả năng sử dụng đã biết. Một đánh giá đối thủ cạnh tranh giúp xác định các mẫu tương tác quen thuộc và các lĩnh vực mà sản phẩm của bạn cần giải thích rõ ràng hơn; đó không phải là lý do để sao chép giao diện khác. Sau đó, chúng tôi lập bản đồ hành trình dự kiến, bao gồm điểm vào, lựa chọn chính và kết quả.

Chuẩn bị đầu vào hữu ích

Chia sẻ những gì bạn đã có, ngay cả khi chưa hoàn chỉnh:

• Mô tả sản phẩm và tác vụ chính mà giao diện nên hỗ trợ.
• Màn hình hiện có, liên kết sản phẩm hoặc một bản walkthrough ngắn.
• Phản hồi người dùng liên quan, câu hỏi hỗ trợ hoặc quan sát về khả năng sử dụng.
• Các yêu cầu kỹ thuật đã biết từ đội ngũ sản phẩm và kỹ thuật của bạn.

Chúng tôi sử dụng các đầu vào đó để phác thảo luồng người dùng và wireframe trước khi chuyển sang thiết kế trực quan chi tiết. Nếu giao diện cần cả từ ngữ hỗ trợ lẫn màn hình, copywriter Web3 có thể giúp căn chỉnh thông điệp sản phẩm với trải nghiệm. Đối với một sản phẩm đang được xây dựng, phát triển dApp là một khả năng liên quan cần thảo luận cùng với thiết kế.

Bộ UI Web3 bao gồm những gì?

Bộ UI biến các wireframe đã được phê duyệt thành một hệ thống trực quan mạch lạc mà các đội ngũ có thể áp dụng trên toàn bộ sản phẩm. Nó bao gồm các thành phần giao diện và trạng thái cần thiết cho phạm vi đã thống nhất, thay vì một bộ sưu tập các mockup rời rạc.

Chúng tôi thiết kế cho những khoảnh khắc mà người dùng cần sự rõ ràng nhất: onboarding, kết nối wallet, tiến trình giao dịch và hoàn tất, cũng như khôi phục lỗi. Thông báo gas và giao dịch nên giúp người dùng hiểu những gì đang xảy ra và hành động nào có sẵn. Hệ thống trực quan có thể bao gồm kiểu chữ, màu sắc, khoảng cách, nút bấm, thành phần biểu mẫu và các thành phần tái sử dụng phù hợp với giao diện của sản phẩm.

Đánh giá giao diện như một hệ thống

Một đánh giá thực tế kiểm tra nhiều hơn là liệu các màn hình riêng lẻ có trông trau chuốt hay không. Hãy tự hỏi liệu:

• Các thành phần có hoạt động nhất quán trên toàn bộ hành trình người dùng đã lập bản đồ không.
• Các hành động quan trọng và bước tiếp theo của chúng có dễ phân biệt không.
• Các trạng thái đang chờ, hoàn tất và lỗi có được thể hiện rõ ràng không.
• Ngôn ngữ giao diện có phù hợp với đối tượng và mức độ quen thuộc của sản phẩm không.

Creative Check của chúng tôi cung cấp cho đội ngũ của bạn một điểm có cấu trúc để đánh giá định hướng trực quan và các trạng thái chính trước khi thiết kế được mở rộng. Nếu tài sản truyền thông xã hội cũng là một phần trong chiến dịch ra mắt của bạn, sáng tạo nội dung crypto có thể hỗ trợ cùng một câu chuyện sản phẩm trong truyền thông của bạn.

Tại sao cần kiểm thử bản mẫu trước khi bàn giao cho nhà phát triển?

Một bản mẫu có thể tương tác cho phép đội ngũ của bạn và người dùng đánh giá luồng trước khi nó trở thành một sản phẩm hoạt động. Nó làm cho thứ tự các hành động, chuyển tiếp màn hình và ngôn ngữ giao diện dễ đánh giá hơn so với chỉ các màn hình tĩnh.

Chúng tôi kết nối các màn hình đã thống nhất thành một bản mẫu Figma và sử dụng kiểm thử khả năng sử dụng để quan sát nơi mọi người hiểu hành động tiếp theo hoặc cần thêm hướng dẫn. Các phát hiện có thể cung cấp thông tin cho các sửa đổi về luồng, nhãn và trạng thái giao diện trước khi bàn giao. Kiểm thử hữu ích nhất khi nó tập trung vào một tác vụ cụ thể, chẳng hạn như hoàn thành onboarding hoặc hiểu thông báo giao dịch, thay vì hỏi liệu ai đó có thích thiết kế hay không.

Những gì đội ngũ của bạn nhận được

Phạm vi dự án có thể bao gồm:

• Nghiên cứu người dùng và đánh giá đối thủ cạnh tranh.
• Luồng người dùng và wireframe cho các tác vụ đã thống nhất.
• Hệ thống thiết kế trực quan và thư viện thành phần.
• Bản mẫu có thể tương tác và kiểm thử khả năng sử dụng.
• Bàn giao Figma giải thích các màn hình và trạng thái đã thiết kế.

Chúng tôi sắp xếp các tệp để nhà phát triển có thể kiểm tra các thành phần giao diện và hiểu cách các màn hình kết nối với nhau. Xác nhận các nền tảng yêu cầu, bố cục đáp ứng và ràng buộc kỹ thuật sớm; điều đó cho phép đội ngũ đánh giá một bàn giao phù hợp với việc xây dựng sản phẩm. Đối với nội dung trên các kênh rộng hơn của bạn, hãy khám phá truyền thông xã hội và nội dung.

Một dự án UI/UX Web3 diễn ra như thế nào từ brief đến bàn giao?

Một dự án UI/UX Web3 diễn ra từ mục tiêu sản phẩm đến nghiên cứu, thiết kế luồng, sản xuất giao diện và bàn giao đã được đánh giá. Trình tự giữ cho các quyết định được minh bạch để đội ngũ của bạn có thể đưa ra phản hồi hữu ích trước khi công việc tiến sang giai đoạn tiếp theo.

Lịch trình chính xác tuân theo phạm vi dự án và tốc độ các bên liên quan có thể đánh giá. Một dự án điển hình sử dụng các giai đoạn sau:

• Tuần Khởi động: thống nhất về người dùng, mục tiêu, tài liệu hiện có và ràng buộc kỹ thuật; lập bản đồ phạm vi thiết kế.
• Giai đoạn luồng và wireframe: đánh giá hành trình sản phẩm, quyết định chính và cấu trúc màn hình.
• Giai đoạn ra mắt: xây dựng hệ thống trực quan, bộ UI và bản mẫu có thể tương tác cho các luồng đã thống nhất.
• Theo dõi: thu thập ghi chú đánh giá, hoàn thành các sửa đổi đã thống nhất và chuẩn bị bàn giao Figma.

Chúng tôi giữ phản hồi tập trung vào tác vụ người dùng, sự rõ ràng và nhất quán thay vì chỉ sở thích cá nhân. Một Pulse Report có thể tóm tắt công việc đã hoàn thành, các quyết định đang mở và điểm đánh giá tiếp theo, cung cấp cho các bên liên quan về sản phẩm và kỹ thuật một cái nhìn chung về tiến độ. Trước khi công việc bắt đầu, hãy thống nhất ai đưa ra phản hồi tổng hợp và những tài liệu nào cần thiết tại mỗi lần đánh giá. Điều này giúp dự án tiến triển và làm cho các thay đổi dễ đánh giá hơn so với phạm vi ban đầu.

Thiết kế giao diện Web3 có thể kiểm soát những gì – và những gì không thể?

Thiết kế có thể làm rõ các trạng thái sản phẩm và hành động có sẵn, nhưng nó không thể quyết định cách wallet hoặc mạng lưới hoạt động. Các nhà cung cấp wallet và mạng lưới kiểm soát phê duyệt kết nối, xử lý giao dịch, phí, xác nhận và khả năng khả dụng, vì vậy giao diện phải truyền đạt các trạng thái đó mà không tuyên bố kiểm soát chúng.

Trong phạm vi đã thống nhất, BrandBoost Guru bàn giao nghiên cứu, luồng, tài sản thiết kế, bản mẫu, kiểm thử và bàn giao theo quy định. Chúng tôi làm rõ các trạng thái kết nối wallet, giao dịch và lỗi trong thiết kế để đội ngũ của bạn có thể đánh giá cách người dùng được hướng dẫn qua chúng. Brief dự án nên xác định các trải nghiệm wallet được hỗ trợ và bất kỳ ràng buộc kỹ thuật nào mà kỹ sư của bạn đã biết.

Kết hợp thiết kế với hỗ trợ phù hợp

Công việc UI/UX mạnh nhất khi trải nghiệm sản phẩm và truyền thông hướng ra công chúng kể một câu chuyện nhất quán. Tùy theo nhu cầu, bạn có thể kết hợp thiết kế giao diện với copywriter Web3, thiết kế và hình ảnh hoặc dịch vụ truyền thông xã hội và nội dung rộng hơn.

Để bắt đầu, hãy gửi cho chúng tôi liên kết sản phẩm hoặc brief, tác vụ người dùng bạn muốn cải thiện, màn hình hiện có và bất kỳ yêu cầu kỹ thuật đã biết nào. BrandBoost Guru sẽ xem xét phạm vi với bạn và phác thảo công việc thiết kế cùng bước tiếp theo. Liên hệ đội ngũ với những tài liệu đó để bắt đầu.

Bảng giá

Giá khởi điểm bằng USD. Gói tùy chỉnh và chiết khấu theo số lượng theo yêu cầu. Thanh toán bằng USDT, USDC, BTC, ETH, SOL, TON hoặc token dự án của bạn.

Cách hoạt động

1. Tuần Khởi độngChia sẻ mục tiêu sản phẩm, nhu cầu người dùng, màn hình hiện tại và ràng buộc kỹ thuật đã biết. Chúng tôi thống nhất về tác vụ chính và xác định luồng cũng như bố cục mà dự án bao gồm.
2. Lập bản đồ trải nghiệmChúng tôi xem xét sản phẩm và các lựa chọn thay thế liên quan, sau đó phác thảo luồng người dùng và wireframe. Đội ngũ của bạn kiểm tra hành trình và cấu trúc màn hình trước khi thiết kế trực quan bắt đầu.
3. Xây dựng giao diệnChúng tôi tạo hệ thống trực quan, các thành phần và trạng thái giao diện đã thống nhất, sau đó kết nối các màn hình thành một bản mẫu Figma có thể tương tác.
4. Creative CheckĐánh giá định hướng trực quan, độ rõ ràng của tác vụ và các trạng thái wallet hoặc giao dịch chính. Chúng tôi thu thập phản hồi tổng hợp và thực hiện các sửa đổi đã thống nhất.
5. Bàn giao và theo dõiChúng tôi chuẩn bị các tệp Figma để bàn giao cho nhà phát triển và tóm tắt công việc đã hoàn thành, các quyết định đang mở và hành động tiếp theo trong một Pulse Report.