Thiết kế UI/UX cho Web3: giao diện dApp và sản phẩm blockchain

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

Thiết kế UI/UX cho Web3 kết hợp logic của kịch bản người dùng và giao diện trực quan. Công việc phù hợp với các đội cần thiết kế dApp mới hoặc xây dựng lại hành trình người dùng trong ví, sàn giao dịch hoặc luồng landing page. Chúng tôi bắt đầu từ những hành động mà người dùng cần thực hiện, chứ không phải từ một tập hợp màn hình.

Tùy theo nhiệm vụ, công việc bao gồm nghiên cứu và xem xét các giải pháp cạnh tranh, sơ đồ luồng người dùng, wireframe, hệ thống trực quan, thư viện component, prototype có thể click và bàn giao tài liệu cho developer trong Figma. Phạm vi được thống nhất theo các kịch bản cụ thể: ví dụ, lần đầu truy cập, kết nối ví và xác nhận giao dịch. Để hỗ trợ trực quan riêng cho sản phẩm, bạn có thể kết hợp thiết kế và hình ảnh, còn để có hình ảnh thống nhất cho dự án — xây dựng thương hiệu.

Trước khi bắt đầu, hãy chuẩn bị mô tả sản phẩm, tác vụ người dùng mục tiêu, các màn hình hiện có và giới hạn phát triển. Nếu một số quyết định chưa được xác định, chúng tôi ghi lại các câu hỏi riêng và chỉ ra những câu hỏi nào ảnh hưởng đến luồng hoặc giao diện. Nhờ đó, đội nhận được không chỉ bản phác thảo mà còn là cơ sở để thảo luận về sản phẩm và triển khai sau này.

Nghiên cứu được chuyển thành hành trình người dùng rõ ràng như thế nào?

Nghiên cứu giúp xác định nơi người dùng có thể mất ngữ cảnh và những bước nào giao diện cần giải thích. Chúng tôi phân tích nhiệm vụ sản phẩm, tài liệu có sẵn và các hành động chính, sau đó đối chiếu chúng với luồng người dùng và giao diện của các sản phẩm tương tự.

Kết quả thực tế của giai đoạn này là bản đồ kịch bản: từ màn hình đầu tiên đến kết quả mong đợi, bao gồm các nhánh rẽ và trạng thái mà người dùng cần gợi ý. Đối với đội, đây là cách thống nhất hành vi sản phẩm trước khi làm việc chi tiết về hình ảnh. Trong quá trình review kịch bản, chúng tôi ghi chú:

• dữ liệu nào người dùng cần trước khi thực hiện hành động;
• nơi nào cần giải thích bước tiếp theo hoặc hậu quả;
• điều gì xảy ra khi hủy bỏ, chờ đợi hoặc yêu cầu thất bại;
• những câu hỏi nào còn tồn đọng với sản phẩm hoặc phát triển.

Hãy kiểm tra xem tài liệu của đội có trả lời ít nhất ba câu hỏi: ai sử dụng sản phẩm, người dùng giải quyết tác vụ gì và hành động nào được coi là kết thúc kịch bản. Nếu chưa có câu trả lời, chúng tôi sẽ giúp cấu trúc thông tin đầu vào và xác định những điều chưa biết, mà không thay thế các quyết định sản phẩm bằng phỏng đoán. Trình tự này đặc biệt hữu ích cho các dApp và dịch vụ mới, nơi hành trình người dùng đang được hình thành.

Làm thế nào để thiết kế kết nối ví và giao dịch?

Trong giao diện Web3, kết nối ví và giao dịch phải là các bước rõ ràng, không phải bí ẩn kỹ thuật. Chúng tôi đưa các trạng thái này vào luồng người dùng và xây dựng thông tin cần thiết cho người dùng trước, trong và sau hành động.

Đối với kịch bản kết nối, cần hiển thị khi nào cần hành động của người dùng và giao diện hiển thị gì sau đó. Đối với giao dịch, hãy xác định trước các trạng thái chờ, xác nhận, hoàn thành và lỗi. Nếu sản phẩm có thông tin về gas, giao diện phải giải thích nó trong ngữ cảnh phù hợp, chứ không để lại như một con số riêng lẻ không được giải thích. Thông báo lỗi được thiết kế để người dùng hiểu chuyện gì đã xảy ra và hành động nào có thể thực hiện tiếp theo.

Trước khi bắt đầu chuẩn bị kịch bản, hãy thu thập danh sách các thao tác, trạng thái sản phẩm có thể có và các giới hạn tích hợp đã biết. Nếu đội kỹ thuật vẫn đang làm rõ hành vi của một thao tác cụ thể, chúng tôi ghi chú điều này trong bản phác thảo như một câu hỏi để cùng kiểm tra. Đối với giao diện có onboarding cho đối tượng không phải crypto, chúng tôi phân tích riêng thuật ngữ và trình tự giải thích: trước tiên là hành động cần thiết và ý nghĩa của nó, sau đó là chi tiết cần thiết để đưa ra lựa chọn có ý thức. Điều này giảm nguy cơ thiếu nhất quán giữa các màn hình và triển khai.

Đội phát triển nhận được gì trong Figma?

Bàn giao trong Figma phải cho phép đội hiểu cấu trúc giao diện, tái sử dụng các phần tử và thảo luận về hành vi của màn hình. Chúng tôi tổ chức tài liệu cuối cùng sao cho các kịch bản sản phẩm, giải pháp trực quan và trạng thái giao diện được liên kết với nhau.

Phạm vi đã thống nhất có thể bao gồm:

• wireframe của các màn hình chính và sơ đồ chuyển tiếp;
• bản phác thảo trực quan và UI kit với các component;
• trạng thái ví, giao dịch và lỗi, nếu chúng thuộc kịch bản;
• prototype có thể click để xem trình tự hành động;
• giải thích và bàn giao tài liệu cho developer trong Figma.

Trước khi bàn giao, chúng tôi kiểm tra rằng tên màn hình dễ đọc, các chuyển tiếp prototype không mâu thuẫn với luồng đã thống nhất và các component được nhóm theo trình tự. Riêng biệt, chúng tôi ghi lại các câu hỏi cần câu trả lời từ developer hoặc chủ sở hữu sản phẩm. Nếu song song cần hỗ trợ nội dung giao diện, bạn có thể thống nhất với mảng nội dung cho Web3. Thành phần bàn giao được xác định trước khi bắt đầu công việc: nhờ đó đội biết rõ màn hình, kịch bản và trạng thái nào nằm trong dự án, và cái nào cần thảo luận riêng.

Quy trình thiết kế diễn ra như thế nào: từ thông tin đầu vào đến bàn giao?

Dự án trải qua từ thống nhất tác vụ người dùng đến prototype có thể kiểm tra và bàn giao cho phát triển. Trình tự các giai đoạn giúp đội sớm nhìn thấy các quyết định gây tranh cãi và không trì hoãn các câu hỏi về logic cho đến khi có màn hình trực quan.

Đầu tiên, chúng tôi thu thập tài liệu gốc: mô tả sản phẩm, kịch bản ưu tiên, màn hình hiện có và liên hệ của người chịu trách nhiệm về quyết định sản phẩm. Sau đó, chúng tôi tiến hành xem xét và làm rõ hành trình người dùng. Sau khi thống nhất logic, chúng tôi chuẩn bị wireframe, hướng trực quan và component, sau đó liên kết các màn hình thành prototype. Trong quá trình làm việc, bạn thấy những quyết định nào đã được thống nhất và điều gì vẫn cần câu trả lời.

Review kịch bản là một điểm làm việc cụ thể, nơi chúng tôi đối chiếu bản phác thảo với tác vụ người dùng và ghi chú các lỗ hổng trước khi bàn giao kết quả. Hãy chuẩn bị cho giai đoạn này danh sách các hành động ưu tiên, nội dung sản phẩm hiện tại và các giới hạn phát triển đã biết. Khi kiểm tra prototype, đội có thể đi qua hành trình chính và đưa ra nhận xét về một màn hình hoặc chuyển tiếp cụ thể. Chúng tôi kết thúc dự án bằng việc bàn giao có cấu trúc các tệp trong Figma và giải thích cần thiết cho developer. Thời gian được xác định sau khi đánh giá số lượng kịch bản và phạm vi màn hình, chứ không theo lịch mẫu.

Giới hạn của thiết kế và bước tiếp theo cho đội của bạn

Thiết kế giúp làm rõ kịch bản và chuẩn bị cơ sở có thể kiểm tra cho phát triển, nhưng bản thân nó không thay thế việc triển khai và kiểm tra sản phẩm trong môi trường thực tế. Kết quả kiểm thử cho thấy những khó khăn quan sát được trong các kịch bản đã xem xét, còn hoạt động của ví, mạng, gas và smart contract phụ thuộc vào triển khai và cơ sở hạ tầng bên ngoài; chúng tôi không hứa hẹn các chỉ số sản phẩm cụ thể.

Để gửi nhiệm vụ đánh giá, hãy gửi mô tả ngắn về sản phẩm, kịch bản người dùng chính, bản phác thảo hoặc prototype hiện có và danh sách các giới hạn kỹ thuật đã biết. Nếu không có tài liệu, chỉ cần giải thích ai là người dùng và hành động nào họ cần thực hiện. Chúng tôi sẽ làm rõ các lỗ hổng, đề xuất danh sách công việc và chỉ ra những trạng thái nào nên đưa vào trước tiên.

Nếu giao diện cần hỗ trợ quảng bá trên các kênh xã hội, thiết kế có thể kết hợp với quản lý X và các dịch vụ khác cho mạng xã hội và nội dung. Bạn có thể bắt đầu với một luồng ưu tiên: hãy gửi cho chúng tôi mô tả của nó và tài liệu có sẵn. Sau đó, chúng tôi sẽ quay lại với các làm rõ về kịch bản và đề xuất về phạm vi dự án UI/UX.

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. Thu thập thông tin đầu vàoBạn gửi mô tả sản phẩm, tác vụ người dùng ưu tiên, màn hình hiện tại và giới hạn phát triển. Chúng tôi xác định người chịu trách nhiệm về quyết định sản phẩm.
2. Thống nhất kịch bảnPhân tích hành trình người dùng, nhánh rẽ và trạng thái ví hoặc giao dịch. Ghi lại các câu hỏi ảnh hưởng đến cấu trúc giao diện.
3. Thiết kế giao diệnChuẩn bị wireframe, giải pháp trực quan và component trong phạm vi đã thống nhất. Tạo các chuyển tiếp thành prototype có thể click.
4. Kiểm tra và bàn giaoTiến hành review kịch bản, thu thập nhận xét và đưa tài liệu trong Figma đến trạng thái sẵn sàng bàn giao cho developer.