Thiết kế UI UX cho Web3 cho luồng wallet, dApp và màn hình sản phẩm

3 bước kiểm tra được ghi lại trước màn hình Figma đầu tiên

Trước khi nhận việc thiết kế, chúng tôi ghi lại 3 bước kiểm tra: tác vụ người dùng, tương tác wallet và nhu cầu bàn giao cho nhà phát triển. Việc đánh giá sớm đó giúp chúng tôi phát hiện các quyết định sản phẩm còn thiếu trước khi chúng lan rộng ra các màn hình.

Bước kiểm tra cũng xác định những gì chúng tôi xem xét và trình bày trong các ghi chú thiết kế cuối cùng. Chúng tôi kết nối từng quan sát với một luồng, wireframe, prototype hoặc câu hỏi mở. Bạn có thể thấy những gì đã sẵn sàng để xem xét và những gì vẫn cần đầu vào từ nhóm của bạn.

Điều này phù hợp với dApp mới, wallet, sàn giao dịch hoặc luồng landing. Nó cũng hiệu quả khi bạn muốn cải thiện một tác vụ hiện có mà không thay thế toàn bộ giao diện. Đối với công việc sáng tạo liên quan, hãy xem thiết kế và hình ảnh.

Làm thế nào để chúng tôi làm cho các hành động wallet trở nên dễ hiểu với người dùng?

2 nhóm người dùng định hình luồng: người mới với crypto và người đã biết các hành động wallet. Chúng tôi làm cho bước tiếp theo rõ ràng cho cả hai.

Mỗi tương tác wallet có một vị trí trong luồng, từ kết nối đến phản hồi giao dịch. Wireframe hiển thị những gì người dùng thấy trước khi họ tiếp tục. Một prototype sau đó kết nối các tương tác đã thống nhất để xem xét.

Chúng tôi ghi lại các trạng thái mà sản phẩm của bạn cần giải thích:

• Kết nối: hành động của người dùng và những gì giao diện xác nhận.
• Giao dịch: thông tin được hiển thị trước khi người dùng xác nhận.
• Tiến trình: những gì giao diện truyền đạt trong khi một hành động đang diễn ra.
• Hoàn thành: cách người dùng có thể biết hành động đã kết thúc.
• Lỗi: điều gì đã xảy ra và người dùng có thể làm gì tiếp theo.
• Gas: nếu có liên quan, cách giao diện trình bày thông tin gas.

Mang theo các yêu cầu đã biết từ sản phẩm và kỹ thuật. Nếu một tương tác chưa được xác nhận, chúng tôi đánh dấu nó là một quyết định mở. Chúng tôi không trình bày một giả định như một hành vi đã được giải quyết. Đối với từ ngữ hướng đến người dùng trong toàn bộ luồng, copywriter Web3 có thể hỗ trợ giao diện.

7 phần mà bàn giao Figma của bạn có thể kết nối

7 phần có thể kết hợp trong một bàn giao Figma, tùy thuộc vào nhu cầu sản phẩm của bạn. Nhóm của bạn có thể xem xét luồng dự kiến và thấy cách các màn hình kết nối với các mẫu có thể tái sử dụng.

• Ghi chú nghiên cứu: nhu cầu người dùng và câu hỏi sản phẩm đã được xem xét.
• Đánh giá đối thủ cạnh tranh: quan sát giao diện từ các tài liệu tham khảo được cung cấp.
• Luồng người dùng: tác vụ chính, quyết định và đường dẫn thay thế.
• Wireframe: cấu trúc màn hình và phân cấp trước khi tinh chỉnh trực quan.
• Hệ thống trực quan: hướng thiết kế được áp dụng trên toàn bộ giao diện.
• Thư viện component: các yếu tố có thể tái sử dụng cho các màn hình nhất quán.
• Prototype có thể click và ghi chú kiểm thử: tương tác đã kết nối và phát hiện về khả năng sử dụng.

Chúng tôi sắp xếp các màn hình và component trong bối cảnh. Trong quá trình bàn giao, chúng tôi giải thích ý định tương tác và các câu hỏi mở. Nhà phát triển có thể xem xét nhiều hơn các hình ảnh tĩnh. Trưởng nhóm sản phẩm có thể kiểm tra các quyết định đằng sau giao diện.

Nếu hướng trực quan cần định nghĩa rộng hơn, hãy xem xây dựng thương hiệu cho dự án crypto. Đối với từ ngữ sản phẩm, tạo nội dung crypto có thể hỗ trợ giao diện.

5 bước từ tin nhắn đầu tiên đến ghi chú thiết kế cuối cùng

5 bước đưa công việc từ bối cảnh sản phẩm đến một prototype có thể xem xét và bàn giao cho nhà phát triển. Chúng tôi xác nhận công việc bao gồm, điểm xem xét và lịch trình trước khi thiết kế bắt đầu.

1. Gửi bối cảnh sản phẩm. Chia sẻ sản phẩm, người dùng mục tiêu, tác vụ chính, màn hình hiện tại và các ràng buộc đã biết.
2. Xem xét tài liệu. Chúng tôi kiểm tra nghiên cứu được cung cấp, tài liệu tham khảo đối thủ cạnh tranh và màn hình hiện tại. Chúng tôi đánh dấu các câu hỏi ảnh hưởng đến luồng người dùng.
3. Lập bản đồ và wireframe. Chúng tôi kết nối đường dẫn chính và các trạng thái thay thế quan trọng. Wireframe giải quyết cấu trúc trước khi tinh chỉnh trực quan.
4. Thiết kế và prototype. Chúng tôi tạo hệ thống trực quan và màn hình giao diện. Sau đó, chúng tôi kết nối các tương tác đã thống nhất trong một prototype có thể click.
5. Kiểm thử và bàn giao. Chúng tôi chạy kiểm thử khả năng sử dụng trong phạm vi công việc đã thống nhất. Chúng tôi tích hợp các phát hiện liên quan và sắp xếp file Figma cho nhà phát triển.

Chọn một người để thu thập phản hồi và giải quyết các câu hỏi về sản phẩm. Các đánh giá tập trung và chúng tôi có thể tách biệt các thay đổi bắt buộc khỏi sở thích. Để được hỗ trợ rộng hơn về mạng xã hội và nội dung, hãy khám phá mạng xã hội và nội dung.

Một prototype Web3 có thể xác nhận điều gì?

3 đầu vào giúp chúng tôi thiết lập một điểm bắt đầu hữu ích: người dùng, tác vụ và tài liệu sản phẩm hiện tại. Chúng tôi có thể bắt đầu với một mô tả sản phẩm ngắn. Màn hình hoặc nghiên cứu rất hữu ích, nhưng không bắt buộc để bắt đầu.

Một prototype hiển thị các tương tác giao diện đã thống nhất và hỗ trợ đánh giá khả năng sử dụng. Nó không xác thực tích hợp wallet cơ bản, phản hồi mạng hoặc hành vi hợp đồng thông minh. Các wallet, mạng và hợp đồng được kết nối kiểm soát lời nhắc và phản hồi của chúng. Hành vi có thể khác nhau. Chúng tôi thiết kế các trạng thái đã thống nhất và đánh dấu bất cứ điều gì cần xác nhận kỹ thuật.

Trước khi gửi yêu cầu của bạn, hãy thu thập những gì bạn có:

• Tóm tắt sản phẩm và người dùng dự kiến.
• Tác vụ chính của người dùng và bất kỳ điểm gây khó khăn nào đã biết.
• Màn hình hiện tại, liên kết Figma, nghiên cứu hoặc hướng dẫn.
• Các kịch bản wallet, giao dịch, gas và lỗi cần tính đến.
• Bối cảnh phát triển và người sẽ xem xét file.

Gửi những tài liệu đó qua liên hệ. Chúng tôi sẽ xem xét tác vụ và ghi lại các quyết định mở. Bạn nhận được báo giá bằng văn bản trong vòng 2 ngày làm việc. Gửi: tóm tắt sản phẩm, người dùng mục tiêu và luồng chính bạn muốn thiết kế.

Cách hoạt động

1. Gửi bối cảnh sản phẩmChia sẻ sản phẩm, người dùng mục tiêu, tác vụ chính, màn hình hiện tại và các ràng buộc đã biết. Nêu tên người sẽ xem xét các quyết định thiết kế.
2. Xác nhận công việc và lịch trìnhChúng tôi thống nhất các luồng, phần thiết kế và điểm xem xét được bao gồm trước khi công việc bắt đầu.
3. Lập bản đồ luồng và wireframeChúng tôi xem xét các tài liệu có sẵn, lập bản đồ các đường dẫn và trạng thái chính, và giải quyết cấu trúc màn hình.
4. Thiết kế và prototypeChúng tôi tạo hệ thống trực quan và màn hình, sau đó kết nối các tương tác đã thống nhất trong Figma.
5. Kiểm thử và bàn giaoChúng tôi chạy kiểm thử khả năng sử dụng trong phạm vi công việc đã thống nhất, giải quyết các phát hiện liên quan và sắp xếp file Figma cho nhà phát triển.