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

Thiết kế UI/UX Web3 bao gồm những gì?

Thiết kế UI/UX Web3 biến yêu cầu sản phẩm thành một kế hoạch giao diện đã được kiểm thử và các tệp Figma sẵn sàng cho sản xuất.

Bắt đầu với hành động người dùng quan trọng nhất: kết nối wallet, thực hiện giao dịch, quản lý tài sản hoặc hoàn thành một tác vụ chính khác. Chúng tôi sử dụng hành động đó để xác định chu kỳ thiết kế đầu tiên phải giải quyết vấn đề gì. Nghiên cứu và đánh giá đối thủ cạnh tranh giúp xác định các mẫu quen thuộc và điểm gây nhầm lẫn; chúng không thay thế các quyết định sản phẩm về quyền, lưu ký hoặc mạng được hỗ trợ.

Phạm vi có thể là một luồng tập trung hoặc một hệ thống giao diện rộng hơn. Một brief hữu ích nêu tên sản phẩm, người dùng mục tiêu, nền tảng được hỗ trợ, tệp thiết kế hiện có và tác vụ người dùng cần hoàn thành. Đối với công việc thương hiệu và trực quan liên quan, hãy xem thiết kế và hình ảnh và xây dựng thương hiệu dự án crypto. Nếu giao diện cần phù hợp với thông điệp sản phẩm công khai, copywriter Web3 có thể hỗ trợ cùng một hành trình người dùng.

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

Chúng tôi thiết kế mỗi luồng xoay quanh quyết định của người dùng, phản hồi của sản phẩm và hành động rõ ràng tiếp theo.

1. Lập bản đồ hành trình. Đánh dấu điểm vào, điều kiện tiên quyết, quyết định và trạng thái hoàn thành.
2. Bao quát trạng thái kết nối. Hiển thị giao diện trước khi kết nối, trong khi kết nối, sau khi kết nối và khi người dùng cần thử lại.
3. Xác định phản hồi giao dịch. Thiết kế trạng thái đang chờ, đã xác nhận, bị từ chối và thất bại, bao gồm thông báo gas và lỗi liên quan.
4. Kiểm tra onboarding. Giải thích các thuật ngữ và hành động không quen thuộc ở nơi chúng ảnh hưởng đến quyết định của người dùng.

Những trạng thái này quan trọng vì lời nhắc wallet hoặc giao dịch có thể di chuyển người dùng giữa giao diện sản phẩm và giao diện wallet. Thiết kế nên cho người dùng biết điều gì đang xảy ra trong sản phẩm, hành động nào được mong đợi từ họ và họ có thể làm gì nếu hành động không hoàn thành. Chúng tôi ghi lại hành vi đó trong luồng và prototype thay vì coi happy path là toàn bộ sản phẩm.

Để khởi động, hãy cung cấp quyền truy cập vào các yêu cầu sản phẩm hiện có, ảnh chụp màn hình hoặc bản dựng staging và mô tả của nhóm về các hành động wallet được hỗ trợ. Chúng tôi ghi lại các câu hỏi mở trong Launch Spec để nhóm sản phẩm và kỹ thuật có thể giải quyết chúng trước khi các chi tiết trực quan trở nên đắt đỏ để thay đổi. Điều này đặc biệt hữu ích khi một sản phẩm bao gồm nhiều mạng, trạng thái tài khoản hoặc tuyến onboarding.

Những bàn giao Figma nào được bao gồm?

Các bàn giao làm cho hành trình người dùng đã thống nhất có thể xem xét và sử dụng được bởi nhóm sản phẩm.

Chúng tôi xây dựng giao diện xoay quanh các quyết định sản phẩm hiện có và định hướng trực quan của dự án. Khi một trong hai vẫn đang được xác định, brief nên xác định ai phê duyệt thay đổi và quyết định nào vẫn còn mở. Điều đó giữ cho việc khám phá thiết kế tập trung và ngăn prototype ngụ ý hành vi sản phẩm mà kỹ thuật chưa phê duyệt.

Bàn giao nên cho phép developer tìm thấy các màn hình, trạng thái và component có liên quan mà không cần đoán phiên bản nào là hiện tại. Trong Spec Review, chúng tôi xem xét cấu trúc Figma, xác minh rằng các màn hình và trạng thái đã thống nhất có mặt và thu thập các chỉnh sửa cuối cùng. Nếu nhóm của bạn cũng cần một landing page thay vì giao diện trong sản phẩm, hãy xem thiết kế landing page; đối với tài sản chuyển động, hãy xem hoạt ảnh.

Quy trình review và bàn giao diễn ra như thế nào?

Dự án chuyển từ brief đã xác nhận sang luồng, thiết kế giao diện, review prototype và bàn giao developer.

Thời gian được thiết lập sau khi chúng tôi hiểu số lượng màn hình, độ phức tạp của luồng, tính sẵn có của các quyết định sản phẩm và tốc độ phản hồi của người review. Một luồng tập trung có thể di chuyển qua review với ít phụ thuộc hơn so với sản phẩm nhiều vai trò với hành vi wallet hoặc giao dịch chưa được giải quyết. Chúng tôi xác nhận các mốc và khung thời gian phản hồi trước khi công việc bắt đầu, sau đó gắn cờ các thay đổi phạm vi để phê duyệt thay vì mở rộng bàn giao một cách thầm lặng.

Run Log ghi lại các quyết định, phản hồi đã gửi và giai đoạn công việc hiện tại, cung cấp cho nhóm khách hàng một hồ sơ dự án ngắn gọn. Để giữ cho các review có thể hành động, hãy chỉ định một người tổng hợp nhận xét và gắn nhãn từng mục là lỗi, vấn đề về khả năng sử dụng hoặc sở thích. Gửi cho chúng tôi brief sản phẩm, Figma hoặc ảnh chụp màn hình hiện tại và tác vụ người dùng chính; AEOTech sẽ sử dụng các đầu vào đó để đề xuất phạm vi và trình tự review.

Nhóm nên kiểm tra gì trước khi phê duyệt UI Web3?

Một bàn giao thiết kế sẵn sàng khi các màn hình, trạng thái chính và quyết định sản phẩm chưa được giải quyết hiển thị cho cả thiết kế và kỹ thuật.

• Kiểm tra rằng trạng thái kết nối và ngắt kết nối wallet được thể hiện.
• Xác nhận rằng phản hồi giao dịch bao gồm đang chờ, thành công, bị từ chối và thất bại.
• Xác minh thông báo gas và lỗi với chủ sở hữu sản phẩm hoặc kỹ thuật.
• Review ngôn ngữ onboarding với người không quen thuộc với sản phẩm.
• Xác nhận rằng tên component và tổ chức màn hình phù hợp với quy trình triển khai của nhóm.

Một prototype có thể làm lộ các bước không rõ ràng trước khi phát triển, nhưng nó không thể xác thực hành vi hợp đồng hoặc thay thế cho review kỹ thuật. Yêu cầu kỹ thuật xác nhận kết quả giao dịch và chi tiết lỗi nào sản phẩm thực sự có thể phát hiện và hiển thị. Yêu cầu chủ sở hữu sản phẩm xác minh rằng nhãn, quyền và lựa chọn mạng phù hợp với quy tắc sản phẩm hiện tại. Các thay đổi đối với các quy tắc đó có thể yêu cầu cập nhật luồng và màn hình, vì vậy hãy ghi lại chúng như các quyết định phạm vi.

Nhà cung cấp wallet kiểm soát lời nhắc và giao diện giao dịch của riêng họ, và mạng có thể trả về kết quả mà sản phẩm phải diễn giải; công việc Figma của chúng tôi không thể kiểm soát các màn hình bên ngoài đó hoặc đảm bảo giao dịch thành công. Chúng tôi bàn giao các tệp giao diện đã thống nhất và trạng thái đã ghi lại, không phải thay đổi hành vi wallet hoặc mạng. Gửi hành trình chính và bất kỳ ràng buộc sản phẩm hiện có nào, và chúng tôi sẽ trả lại một đề xuất chi tiết cho dự án UI/UX Web3 của bạn.

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ẻ briefGửi loại sản phẩm, tác vụ người dùng chính, tệp thiết kế hiện có và các ràng buộc chính.
2. Xác nhận phạm viChúng tôi xác định các màn hình, trạng thái, chủ sở hữu review và bàn giao dự kiến cho dự án.
3. Phê duyệt cấu trúc UXReview luồng người dùng và wireframe trước khi bắt đầu thiết kế trực quan chi tiết.
4. Review prototypeKiểm thử hành trình đã thống nhất trong Figma và gửi lại phản hồi tổng hợp.
5. Nhận bàn giaoNhận tệp Figma có tổ chức, component tái sử dụng và ghi chú triển khai.