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 các yêu cầu sản phẩm với các màn hình và tương tác mà mọi người cần để sử dụng dApp, wallet, sàn giao dịch hoặc luồng trang đích. Phạm vi có thể bao gồm nghiên cứu, đánh giá đối thủ cạnh tranh, luồng người dùng, wireframe, thiết kế hình ảnh, thư viện thành phần, bản mẫu có thể nhấp chuột, kiểm thử khả năng sử dụng và bàn giao cho lập trình viên trong Figma.

Quyết định đầu tiên không phải là sử dụng phong cách hình ảnh nào; mà là tác vụ người dùng nào sản phẩm phải làm cho dễ hiểu. Đối với một luồng wallet, điều đó có nghĩa là giải thích kết nối và ký. Đối với một dApp, điều đó có nghĩa là hiển thị các bước giữa việc chọn một hành động và xác nhận kết quả của nó. Chúng tôi lập bản đồ các tác vụ đó trước khi trau chuốt màn hình, để các lỗ hổng trong trải nghiệm được phát hiện sớm.

Công việc này phù hợp với các đội ngũ đang chuẩn bị một sản phẩm mới, thiết kế lại một hành trình khó hiểu hoặc căn chỉnh giao diện sản phẩm đang phát triển. Nếu nhu cầu vượt ra ngoài thiết kế giao diện, hãy kết nối nó với Thiết kế Web3 và sản xuất hình ảnh hoặc Dịch vụ mạng xã hội và nội dung rộng hơn.

Các câu hỏi về phạm vi hữu ích bao gồm:

• Những loại người dùng và tác vụ nào bản phát hành đầu tiên phải hỗ trợ?
• Những màn hình nào đã tồn tại và bằng chứng nào cho thấy chúng cần sửa đổi?
• Những yêu cầu sản phẩm, pháp lý hoặc kỹ thuật nào mỗi luồng phải tuân thủ?

Các câu trả lời tạo ra một brief thiết kế thực tế, không phải một lời hứa về một kết quả kinh doanh cụ thể.

Làm thế nào để tạo luồng wallet và giao dịch dễ hiểu?

Chúng tôi tạo các luồng nhận biết wallet dễ hiểu bằng cách hiển thị những gì người dùng cần làm, sản phẩm đang yêu cầu quyền làm gì và trạng thái nào tiếp theo sau mỗi hành động. Thiết kế bao gồm kết nối wallet, onboarding cho người mới làm quen với crypto, các trạng thái giao dịch, thông tin gas và thông báo lỗi rõ ràng.

Một luồng nên tính đến nhiều hơn là đường dẫn lý tưởng của nó. Chúng tôi lập bản đồ trình tự từ điểm vào qua hành động người dùng, xác nhận và hoàn tất, sau đó ghi lại các trạng thái thay thế có liên quan. Ví dụ, giao diện cần một phản hồi được cân nhắc khi người dùng chưa kết nối wallet hoặc khi một hành động cần làm rõ. Chúng tôi sử dụng các yêu cầu sản phẩm và kỹ thuật của dự án để xác định các trạng thái đó thay vì phát minh ra hành vi.

Trước khi phê duyệt một luồng, hãy kiểm tra xem nó có trả lời các câu hỏi này không:

• Hành động tiếp theo có hiển thị và được mô tả bằng ngôn ngữ mà đối tượng dự định hiểu không?
• Giao diện có phân biệt hành động của người dùng với trạng thái sản phẩm hoặc mạng không?
• Các lỗi có thể hành động được, thay vì chỉ đơn thuần nêu tên một lỗi không?
• Người dùng lần đầu có thể hiểu tại sao cần tương tác với wallet không?

Kết quả bàn giao là một luồng và kế hoạch màn hình mà đội ngũ sản phẩm có thể xem xét với các đồng nghiệp kỹ thuật. Đối với các đội ngũ đang định hình câu chuyện dự án đi kèm, Sáng tạo nội dung Web3 có thể hỗ trợ ngôn ngữ sản phẩm nhất quán trên giao diện và truyền thông.

Một đội ngũ Web3 nên mong đợi những kết quả thiết kế nào?

Một dự án giao diện Web3 có phạm vi tốt tạo ra một tập hợp các quyết định thiết kế có kết nối, chứ không phải một bộ sưu tập các màn hình hấp dẫn nhưng biệt lập. Các kết quả bàn giao chuyển từ bằng chứng và cấu trúc sang bản mẫu và các tệp sẵn sàng cho triển khai.

Phạm vi màn hình và luồng chính xác được xác nhận trước khi bắt đầu công việc. Một thư viện thành phần hữu ích khi một sản phẩm có nhiều màn hình liên quan hoặc dự kiến mở rộng giao diện của nó; một bản mẫu tập trung có thể là ưu tiên khi đội ngũ cần kiểm tra một hành trình quan trọng. Chúng tôi ghi lại những gì được bao gồm để các bên liên quan có thể xem xét cùng một kết quả bàn giao.

Để có một bài thuyết trình hoàn chỉnh về sản phẩm ngoài giao diện của nó, hãy kết hợp brief thiết kế với Copywriter Web3 hoặc Viết sách trắng và litepaper. Các dịch vụ này giải quyết các tài liệu khác nhau; chúng không thay thế nhu cầu xác định các yêu cầu giao diện của sản phẩm.

Quy trình quản trị và đánh giá chất lượng phù hợp như thế nào vào quy trình thiết kế?

Một lộ trình xem xét được xác định giữ cho các quyết định về sản phẩm, thiết kế và kỹ thuật được thống nhất. MegaSatoshi bắt đầu với một Thư Ủy quyền ghi lại mục tiêu thiết kế, đối tượng, phạm vi, các ràng buộc đã biết, đầu vào của khách hàng và vai trò phê duyệt. Điều này cung cấp cho người xem xét một tài liệu tham khảo chung trước khi công việc chuyển sang các luồng và màn hình.

Khách hàng cung cấp brief sản phẩm hiện tại, tài sản thương hiệu, các ràng buộc kỹ thuật, nghiên cứu có liên quan và quyền truy cập vào những người có thể làm rõ hành vi sản phẩm. Đội ngũ của chúng tôi chuẩn bị nghiên cứu và đánh giá đối thủ cạnh tranh, lập bản đồ các hành trình đã thống nhất, phát triển wireframe và định hướng hình ảnh, và đưa công việc vào một bản mẫu có thể nhấp chuột. Một Cổng Chất lượng kiểm tra các kết quả bàn giao so với các yêu cầu đã thống nhất trước khi bàn giao.

Một danh sách kiểm tra chuẩn bị thực tế là:

• Cung cấp mục tiêu sản phẩm, định nghĩa đối tượng và các tác vụ người dùng ưu tiên.
• Chia sẻ các màn hình hiện có, hướng dẫn thương hiệu và bất kỳ tệp thiết kế nào đang được sử dụng.
• Xác định các ràng buộc về wallet, chuỗi, hợp đồng hoặc kỹ thuật ảnh hưởng đến giao diện.
• Nêu tên người ra quyết định và người có thể trả lời các câu hỏi về sản phẩm.
• Xác nhận hành trình nào và vòng phản hồi nào nằm trong phạm vi.

Trường hợp sản phẩm yêu cầu ngôn ngữ hoặc tiết lộ cụ thể, một Đánh giá Tuân thủ có thể gắn cờ các mục cho người xem xét thích hợp của khách hàng; nó không thay thế tư vấn pháp lý. Các quyết định kịp thời của khách hàng giúp giữ cho trình tự đã thống nhất được tiến hành. Để biết cách tổ chức trách nhiệm và giao tiếp giữa các dịch vụ, hãy xem cách chúng tôi làm việc.

Thiết kế giao diện Web3 có thể kiểm soát điều gì—và điều gì nằm ngoài tầm kiểm soát của nó?

Thiết kế giao diện Web3 có thể làm cho các trạng thái sản phẩm, hành động bắt buộc và thông tin có sẵn trở nên rõ ràng hơn; nó không thể thay đổi hành vi cơ bản của một wallet, chuỗi hoặc hợp đồng thông minh. Giao diện phải phản ánh các thông tin kỹ thuật và sản phẩm do khách hàng cung cấp, với các chi tiết đó được xem xét bởi các chủ sở hữu sản phẩm và kỹ thuật có liên quan.

Các nhà cung cấp wallet có thể hiển thị màn hình kết nối hoặc ký của riêng họ, trong khi các điều kiện mạng có thể ảnh hưởng đến thời gian giao dịch và hành vi hợp đồng có thể xác định các kết quả có sẵn. Các yếu tố này không thể được khắc phục bằng một thiết kế Figma hoặc được đảm bảo thông qua kiểm thử khả năng sử dụng; cam kết của chúng tôi là đối với công việc thiết kế đã thống nhất và việc bàn giao tài liệu của nó.

Để chuẩn bị cho một đánh giá hữu ích, hãy đưa các ràng buộc kỹ thuật đã biết vào brief thay vì chờ đến khi phê duyệt hình ảnh. Yêu cầu bộ phận kỹ thuật xác nhận trạng thái nào sản phẩm có thể phát hiện, hành động nào yêu cầu một wallet bên ngoài và từ ngữ nào mô tả chính xác từng lựa chọn của người dùng. Sau đó xem xét bản mẫu dựa trên các thông tin đó trước khi bàn giao.

Khi brief sản phẩm, giao diện và giải thích công khai cần được thống nhất, Nội dung giáo dục Web3 có thể giúp giải thích các khái niệm sản phẩm trong một định dạng truyền thông riêng biệt. Gửi cho chúng tôi brief hiện tại, các màn hình hiện có và hành trình bạn muốn cải thiện; MegaSatoshi sẽ xem xét phạm vi và đề xuất một kế hoạch thiết kế.

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. Xác định phạm vi ủy quyềnChúng tôi ghi lại đối tượng mục tiêu, tác vụ người dùng, bối cảnh sản phẩm, ràng buộc và lộ trình phê duyệt trong một Thư Ủy quyền. Các kết quả bàn giao và đầu vào đã thống nhất được rõ ràng trước khi công việc thiết kế bắt đầu.
2. Xem xét bối cảnh sản phẩmChúng tôi đánh giá nghiên cứu được cung cấp, giao diện hiện có và bối cảnh đối thủ cạnh tranh. Các đầu mối sản phẩm và kỹ thuật làm rõ các yêu cầu về wallet, giao dịch và triển khai.
3. Lập bản đồ luồng và wireframeChúng tôi cấu trúc các hành trình ưu tiên và trạng thái chính trước khi áp dụng định hướng hình ảnh. Khách hàng xem xét logic sản phẩm trong khi các thay đổi vẫn còn dễ thảo luận.
4. Thiết kế và tạo bản mẫuChúng tôi phát triển hệ thống hình ảnh, các thành phần tái sử dụng và bản mẫu có thể nhấp chuột trong Figma. Cổng Chất lượng đã thống nhất kiểm tra công việc so với brief.
5. Kiểm thử và bàn giaoChúng tôi thu thập phản hồi về khả năng sử dụng trong phạm vi đã thống nhất, tinh chỉnh các kết quả bàn giao và chuẩn bị các tệp Figma cho lập trình viên.