Thiết kế UI/UX Web3 cho dApp, Wallet và Sàn giao dịch

Thiết kế UI/UX Web3 mang lại những gì?

Thiết kế UI/UX Web3 giúp các tác vụ chính của sản phẩm dễ hiểu và dễ hoàn thành hơn. Nó kết nối nghiên cứu người dùng và yêu cầu sản phẩm với các màn hình giao diện có thể được xem xét trong bản mẫu Figma có thể tương tác trước khi nhà phát triển triển khai.

Dịch vụ này phù hợp cho các nhóm đang xây dựng dApp, wallet, sàn giao dịch hoặc luồng trang đích, bao gồm các sản phẩm cần giải thích các thao tác crypto cho những người mới làm quen. Điểm khởi đầu không phải là phong cách hình ảnh; mà là những gì người dùng cần làm, họ cần thông tin gì để đưa ra quyết định và sản phẩm có thể hiển thị đáng tin cậy ở mỗi bước.

Một dự án có thể bao gồm:

• Nghiên cứu và đánh giá đối thủ cạnh tranh để làm rõ kỳ vọng của người dùng và các điểm gây khó khăn.
• Luồng người dùng và wireframe cho các tác vụ chính.
• Thiết kế hình ảnh, bộ UI kit và các thành phần có thể tái sử dụng.
• Bản mẫu có thể tương tác, kiểm thử khả năng sử dụng và bàn giao cho nhà phát triển trong Figma.

Danh sách màn hình cụ thể tuân theo phạm vi đã thống nhất. Nếu bạn cũng đang làm mới ngôn ngữ hình ảnh của mình, hãy kết hợp công việc này với thiết kế và hình ảnh cho Web3 hoặc xây dựng thương hiệu dự án crypto.

Chúng tôi thiết kế luồng wallet và dApp như thế nào?

Chúng tôi thiết kế dựa trên các lựa chọn và phản hồi mà người dùng gặp phải, không chỉ là con đường lý tưởng qua sản phẩm. Điều đó có nghĩa là lập bản đồ các bước trước và sau khi kết nối wallet, hiển thị những gì người dùng được yêu cầu xác nhận, và làm cho tiến trình giao dịch cũng như lỗi trở nên dễ hiểu.

Trong giai đoạn khám phá, chúng tôi xem xét brief sản phẩm, đối tượng mục tiêu, các màn hình hiện có và bất kỳ tài liệu tham khảo đối thủ cạnh tranh nào có sẵn. Cùng nhau, chúng tôi xác định các tác vụ người dùng chính và thông tin mà giao diện phải giải thích. Đối với onboarding nhắm đến người dùng không phải crypto, chúng tôi kiểm tra nơi nào các thuật ngữ lạ, lựa chọn mạng hoặc thao tác wallet cần hướng dẫn bằng ngôn ngữ đơn giản.

Sau đó, luồng được chuyển thành wireframe. Đối với mỗi thao tác quan trọng, chúng tôi ghi lại màn hình dự kiến và các trạng thái liên quan: ví dụ: giao dịch đang chờ xử lý, thao tác đã hoàn thành, yêu cầu bị từ chối hoặc thông báo lỗi. Chi tiết gas và mạng được thiết kế dựa trên yêu cầu của sản phẩm và thông tin kỹ thuật được cung cấp, chứ không phải do nhà thiết kế tự nghĩ ra.

Trước khi hoàn thiện hình ảnh, hãy xem xét liệu mỗi màn hình có trả lời ba câu hỏi thực tế hay không: tôi có thể làm gì ở đây, điều gì sẽ xảy ra tiếp theo và tôi nên làm gì nếu nó không hoạt động? Việc xem xét này giúp bản mẫu hữu ích cho các quyết định sản phẩm và thảo luận với nhà phát triển.

Những gì được bao gồm trong bàn giao thiết kế Figma?

Bàn giao đưa các quyết định giao diện đã được phê duyệt vào một tệp Figma có cấu trúc mà nhóm sản phẩm và phát triển có thể xem xét. Nó bao gồm các mục trong phạm vi đã thống nhất, được tổ chức sao cho mối quan hệ giữa các luồng, màn hình và các thành phần có thể tái sử dụng là rõ ràng.

Các mục bàn giao điển hình bao gồm:

• Bản tóm tắt nghiên cứu và đánh giá đối thủ cạnh tranh gắn liền với brief sản phẩm.
• Luồng người dùng và wireframe cho các tác vụ đã thống nhất.
• Màn hình độ phân giải cao và bộ UI kit với các thành phần giao diện có thể tái sử dụng.
• Bản mẫu có thể tương tác để trình diễn và kiểm thử khả năng sử dụng.
• Ghi chú bàn giao cho nhà phát triển về tương tác, trạng thái và tài sản thiết kế được cung cấp.

Đối với sản phẩm Web3, danh sách màn hình có thể bao gồm onboarding, kết nối wallet, xác nhận giao dịch, thông báo gas, trạng thái đang chờ xử lý và đã hoàn thành, và phục hồi từ lỗi. Chúng tôi xác nhận những mục nào áp dụng trong quá trình xác định phạm vi; một luồng trang đích sẽ có nhu cầu khác với giao diện wallet hoặc sàn giao dịch.

Bạn cũng có thể xem xét các nhu cầu truyền thông liên quan thông qua copywriter Web3 hoặc dịch vụ truyền thông xã hội và nội dung rộng hơn. Các dịch vụ đó có thể giúp giữ cho ngôn ngữ sản phẩm nhất quán, trong khi công việc UI/UX xác định cách ngôn ngữ đó xuất hiện bên trong giao diện.

Làm thế nào bạn có thể xác minh thiết kế trước khi phát triển?

Bạn có thể xác minh công việc bằng cách xem xét bản mẫu Figma dựa trên các tác vụ người dùng và mục bàn giao đã thống nhất. Một bản mẫu giúp bạn có thể xem qua các màn hình và quyết định trước khi triển khai, trong khi kiểm thử khả năng sử dụng có thể tiết lộ nơi mọi người cần hướng dẫn hoặc phản hồi rõ ràng hơn.

Khi bắt đầu, chúng tôi thu thập brief sản phẩm, các nhóm người dùng ưu tiên, tài sản thương hiệu hiện có, các ràng buộc kỹ thuật và bất kỳ giao diện hiện tại hoặc tài liệu tham khảo đối thủ cạnh tranh nào. Danh sách kiểm tra khởi động này giúp CoinMarketingCap xác định sớm các đầu vào còn thiếu và thống nhất các luồng nào nằm trong phạm vi. Trong quá trình xem xét, phản hồi được nhóm theo tác vụ và màn hình để nhóm có thể phân biệt vấn đề về khả năng sử dụng với sở thích về phong cách hình ảnh.

Khi bàn giao, Evidence Pack ghi lại các mục thiết kế đã thống nhất và liên kết chúng với các khu vực Figma có liên quan. Proof Log theo dõi phản hồi xem xét và trạng thái của nó, để nhóm sản phẩm có thể thấy những gì đã được giải quyết và những gì vẫn còn là quyết định của họ. Các bản ghi này là công cụ hỗ trợ xem xét thực tế, không phải là sự thay thế cho chính bản mẫu.

Trước khi ký duyệt, hãy xem qua tác vụ chính từ đầu đến cuối, sau đó kiểm tra các trạng thái trống, đang chờ xử lý, lỗi và phục hồi có liên quan đến tác vụ đó. Xác nhận rằng tên, nhãn và chi tiết giao dịch khớp với các yêu cầu nguồn của sản phẩm.

Thiết kế giao diện Web3 dừng ở đâu và bước tiếp theo là gì?

UI/UX thiết kế cung cấp cho nhóm một kế hoạch giao diện và bản mẫu đã được xem xét; nó không triển khai sản phẩm hoặc thay thế các quyết định về sản phẩm, kỹ thuật và bảo mật. Thiết kế nên phản ánh hành vi mà nhóm sản phẩm xác nhận, đặc biệt là khi liên quan đến kết nối wallet, trạng thái giao dịch, thông tin gas hoặc xử lý lỗi.

Các nhà cung cấp wallet, mạng, dịch vụ RPC và hợp đồng thông minh có thể ảnh hưởng đến những gì người dùng thấy sau khi triển khai. Chúng tôi không thể kiểm soát các phản hồi bên ngoài đó hoặc hứa hẹn rằng chỉ riêng thiết kế sẽ tạo ra một kết quả áp dụng cụ thể; thiết kế, bản mẫu, kiểm thử và bàn giao Figma đã thống nhất là các mục bàn giao mà chúng tôi có thể xác minh.

Để giữ cho công việc có thể hành động, hãy xác định ai sẽ xác nhận hành vi sản phẩm và ai sẽ phê duyệt nội dung giao diện trước khi thiết kế bắt đầu. Chia sẻ bất kỳ ràng buộc kỹ thuật nào đã biết và đánh dấu các màn hình phải khớp với sản phẩm hiện có. Khi việc triển khai sẵn sàng để xác định phạm vi, hãy kết nối bàn giao thiết kế với phát triển dApp; nếu sản phẩm cũng cần một hệ thống nội dung đầy đủ hơn, hãy xem tạo nội dung crypto.

Để bắt đầu, hãy gửi cho CoinMarketingCap loại sản phẩm của bạn, tác vụ người dùng chính, bất kỳ màn hình hiện tại nào và các chi tiết kỹ thuật đã được xác nhận. Chúng tôi sẽ xem xét các đầu vào đó, làm rõ luồng và các mục bàn giao, sau đó trả về phạm vi dự án để phê duyệt.

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. Chia sẻ brief sản phẩmGửi loại sản phẩm, người dùng mục tiêu, tác vụ chính, tài liệu giao diện hiện có và các ràng buộc kỹ thuật đã biết. Đánh dấu màn hình hoặc hành trình người dùng nào quan trọng nhất.
2. Thống nhất nghiên cứu và phạm viChúng tôi xem xét các đầu vào và tài liệu tham khảo đối thủ cạnh tranh, sau đó xác định các luồng, màn hình, kiểm thử và các mục bàn giao Figma có trong dự án.
3. Xem xét luồng và bản mẫuChúng tôi phát triển wireframe và thiết kế hình ảnh, sau đó chia sẻ bản mẫu có thể tương tác để xem xét dựa trên tác vụ và kiểm thử khả năng sử dụng.
4. Giải quyết phản hồi và bàn giaoChúng tôi xử lý phản hồi đã thống nhất, sắp xếp tệp Figma và cung cấp Evidence Pack cùng Proof Log để bàn giao rõ ràng cho nhà phát triển.