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 kết nối mục đích của sản phẩm với các màn hình và tương tác mà người dùng cần để hoàn thành các tác vụ cốt lõi. Công việc có thể bao gồm nghiên cứu, đánh giá đối thủ, luồng người dùng, wireframe, thiết kế trực quan, thư viện thành phần, prototype có thể click, kiểm thử khả năng sử dụng và bàn giao developer trong Figma. Phạm vi phù hợp phụ thuộc vào những gì đã được xác định và những gì còn khó khăn cho người dùng.

Đối với một dApp, wallet, sàn giao dịch hoặc luồng landing, hãy bắt đầu bằng cách ghi lại người dùng dự kiến và tác vụ họ đến để thực hiện. Sau đó ghi chú nơi tác vụ đó bắt đầu, sản phẩm cần thông tin gì và điều gì sẽ xảy ra khi người dùng tạm dừng hoặc gặp lỗi. Điều này cung cấp cho việc đánh giá thiết kế một cơ sở thực tế thay vì chỉ dựa vào sở thích trực quan.

Một danh sách kiểm tra hữu ích để bắt đầu là:

• Nhóm người dùng nào là mục tiêu cho bản phát hành đầu tiên?
• Tác vụ quan trọng nhất cần làm cho dễ hiểu là gì?
• Những màn hình, luồng hoặc tài sản thiết kế nào đã tồn tại?
• Ai sẽ xem xét công việc và đưa ra quyết định sản phẩm?

Nếu bạn cần nhận diện trực quan hoặc tài sản chiến dịch hỗ trợ bên cạnh giao diện, hãy xem thiết kế và hình ảnh. Để có cái nhìn rộng hơn về nội dung và kênh liên quan, hãy khám phá mạng xã hội và nội dung.

Làm thế nào để thiết kế luồng wallet và giao dịch?

Chúng tôi lập bản đồ những gì người dùng thấy và có thể làm tại mỗi điểm trong hành trình sản phẩm, bao gồm cả những thời điểm mà wallet hoặc giao dịch thay đổi bước tiếp theo. Điều đó làm cho các trạng thái quan trọng trở thành một phần của thiết kế ngay từ đầu, thay vì là chi tiết để lại cho developer diễn giải sau.

Một đánh giá luồng nên tính đến các hành động và ngôn ngữ thực tế của sản phẩm. Ví dụ, giao diện có thể cần giải thích lý do tại sao kết nối wallet được yêu cầu, hiển thị những gì người dùng có thể làm trước khi kết nối và làm rõ hành động tiếp theo sau đó. Các màn hình liên quan đến giao dịch nên phân biệt một hành động đang chờ người dùng nhập liệu với một hành động đã gửi, một hành động đã hoàn thành và một trạng thái lỗi nơi người dùng cần hướng dẫn. Phí gas và thông báo lỗi nên được xem xét trong bối cảnh luồng sản phẩm và thông tin có sẵn cho nhóm.

Đối với onboarding nhắm đến những người mới làm quen với crypto, hãy kiểm tra từng màn hình để tìm các thuật ngữ xa lạ, quyết định không được giải thích và các bước có thể tránh. Sử dụng wireframe để thống nhất trình tự và nội dung trước khi tinh chỉnh chi tiết trực quan. Trong quá trình đánh giá, hãy hỏi liệu người dùng có thể xác định trạng thái hiện tại, hiểu hành động tiếp theo có sẵn và phục hồi sau một gián đoạn phổ biến hay không. Chúng tôi ghi lại luồng đã thống nhất và hiển thị nó trong một prototype có thể click, để nhóm sản phẩm có thể xem xét toàn bộ hành trình thay vì đánh giá các màn hình riêng lẻ.

Nhóm của bạn sẽ nhận được những bàn giao Figma nào?

Dự án tạo ra một gói thiết kế mà nhóm bạn có thể xem xét, kiểm thử và sử dụng trong quá trình triển khai. Số lượng màn hình chính xác và mức độ chi tiết được thống nhất sau khi chúng tôi hiểu về sản phẩm, tài sản hiện có và các hành trình ưu tiên.

Tùy thuộc vào phạm vi đã thống nhất, gói bao gồm:

• Nghiên cứu và đánh giá đối thủ để cung cấp thông tin cho các quyết định về sản phẩm và giao diện.
• Luồng người dùng và wireframe cho thấy các tác vụ ưu tiên di chuyển giữa các màn hình như thế nào.
• Thiết kế giao diện trực quan, với bộ UI kit và thư viện thành phần cho các mẫu nhất quán.
• Một prototype có thể click để xem xét các hành trình chính và khả năng sử dụng.
• Kiểm thử khả năng sử dụng và bàn giao Figma cung cấp cho developer bối cảnh giao diện họ cần.

Một bàn giao tốt nên làm cho hành vi dự kiến rõ ràng như hình thức bên ngoài. Chúng tôi tổ chức các màn hình xoay quanh các luồng đã thống nhất, xác định các trạng thái tương tác và giao dịch chính, và giữ các thành phần tái sử dụng riêng biệt khỏi các yếu tố một lần. Trước khi ký duyệt, nhóm bạn có thể so sánh prototype với các yêu cầu sản phẩm ban đầu và gắn cờ các trạng thái còn thiếu hoặc nhãn không rõ ràng.

Giao diện cũng cần nằm thoải mái bên cạnh phần giải thích sản phẩm của bạn. Khi tài liệu hỗ trợ đó cần được chú ý, copywriter Web3 có thể giúp định hình các từ ngữ người dùng gặp, trong khi viết sách trắng và litepaper hỗ trợ tài liệu sản phẩm chuyên sâu hơn. Đây là các dịch vụ liên quan, không phải điều kiện tiên quyết cho thiết kế.

Một dự án thiết kế sản phẩm Web3 diễn ra như thế nào?

Một dự án UI/UX Web3 di chuyển từ căn chỉnh phạm vi đến các luồng đã thống nhất, thiết kế giao diện, đánh giá prototype và bàn giao developer. Chúng tôi xác nhận lịch trình sau khi xem xét sản phẩm và số lượng hành trình và màn hình trong phạm vi, để dòng thời gian phản ánh các quyết định và phản hồi mà công việc thực sự yêu cầu.

Khi bắt đầu, hãy chia sẻ liên kết sản phẩm hoặc bản build hiện tại, các file thiết kế hiện có, hành trình người dùng ưu tiên, tài sản thương hiệu và bất kỳ ràng buộc kỹ thuật nào đã biết. Chỉ định một người ra quyết định và thu thập phản hồi ở một nơi; điều này giúp nhóm giải quyết các bình luận mâu thuẫn trước khi chúng ảnh hưởng đến các màn hình sau. Nếu sản phẩm vẫn đang ở giai đoạn ý tưởng, một mô tả ngắn về người dùng dự kiến và hành động cốt lõi là đủ để bắt đầu xác định phạm vi.

Trong quá trình đánh giá, Web3Do kiểm tra từng vòng thiết kế dựa trên các luồng đã thống nhất và gắn cờ các câu hỏi sản phẩm còn mở thay vì âm thầm lấp đầy khoảng trống bằng các giả định. Nhóm bạn xem xét prototype, tổng hợp phản hồi và xác nhận các trạng thái giao diện đã sẵn sàng để bàn giao. Sau đó, chúng tôi chuẩn bị file Figma để developer có thể điều hướng các luồng, xác định các thành phần tái sử dụng và thấy các trạng thái đã thiết kế cùng nhau.

Để giữ cho dự án tiến triển, hãy gửi phản hồi tổng hợp dựa trên các màn hình hoặc bước cụ thể trong một hành trình. Nếu yêu cầu thay đổi, trước tiên chúng tôi làm rõ ảnh hưởng đến phạm vi và trình tự, sau đó thống nhất những gì cần điều chỉnh trước vòng thiết kế tiếp theo.

Khi nào một hợp đồng thiết kế là bước tiếp theo phù hợp?

Một hợp đồng thiết kế hữu ích khi hành trình sản phẩm chưa rõ ràng, một tính năng mới cần một giao diện mạch lạc, hoặc developer cần các luồng và thành phần đã được phê duyệt trước khi triển khai. Nó cũng phù hợp thực tế khi một sản phẩm đã được thiết lập nhưng onboarding, tương tác wallet hoặc thông báo giao dịch của nó cần một đánh giá có cân nhắc.

Nếu nhóm bạn đã có một luồng rõ ràng và chủ yếu cần các tài sản trực quan nhất quán, một phạm vi thiết kế tập trung có thể phù hợp hơn một dự án thiết kế sản phẩm toàn diện. Nếu hành trình người dùng vẫn còn chưa chắc chắn, hãy bắt đầu với nghiên cứu và định nghĩa luồng trước khi yêu cầu một prototype trau chuốt. Sự phân biệt này giúp founder và người phụ trách sản phẩm đặt hàng công việc trả lời câu hỏi hiện tại của họ, thay vì trả tiền cho các màn hình trước khi các quyết định cơ bản được đưa ra.

Thiết kế không thể xác định liệu người dùng có chấp nhận sản phẩm hay một hành động kỹ thuật cụ thể có hoàn thành hay không: những kết quả đó phụ thuộc vào sản phẩm, quá trình triển khai và lựa chọn của từng người dùng. Chúng tôi có thể bàn giao nghiên cứu, tài sản thiết kế, prototype, kiểm thử và bàn giao đã thống nhất, trong khi nhóm bạn xác thực hành vi kỹ thuật trong môi trường riêng của mình.

Để xác định phạm vi công việc, hãy gửi cho Web3Do tổng quan sản phẩm, hành trình người dùng bạn muốn cải thiện, các file thiết kế có sẵn và bối cảnh ra mắt mục tiêu của bạn. Chúng tôi sẽ xem xét những tài liệu đó, xác định các quyết định và bàn giao mà dự án cần, và trả lại một đề xuất về phạm vi và lịch trình để thảo luậ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ẻ bối cảnh sản phẩmGửi liên kết sản phẩm hoặc ý tưởng, các file thiết kế hiện tại, người dùng ưu tiên và hành trình bạn muốn cải thiện. Bao gồm bất kỳ ràng buộc kỹ thuật hoặc thương hiệu nào đã biết.
2. Thống nhất phạm vi và ưu tiênChúng tôi xem xét tài liệu và xác định các luồng, màn hình, nhiệm vụ nghiên cứu và bàn giao nào thuộc về dự án. Bạn xác nhận một người ra quyết định cho phản hồi thiết kế.
3. Xem xét luồng và thiết kế giao diệnXem xét luồng người dùng và wireframe trước khi tinh chỉnh trực quan, sau đó đánh giá các màn hình đã thiết kế và các trạng thái chính trong prototype có thể click.
4. Xác nhận bàn giaoChúng tôi chuẩn bị các file Figma và thành phần đã thống nhất cho nhóm phát triển của bạn, với prototype và các trạng thái đã thiết kế sẵn sàng để xem xét triển khai.