Thiết kế bắt đầu từ khoảnh khắc sản phẩm của bạn cần làm rõ
Thiết kế UI/UX cho Web3 kết nối những gì sản phẩm của bạn làm với những gì người dùng cần hiểu tiếp theo. Chúng tôi bắt đầu với tác vụ của người dùng, sau đó định hình hành trình và giao diện xoay quanh nó.
Hãy tưởng tượng một trưởng nhóm chương trình đại sứ mở bảng điều khiển dự án sau một tháng đăng bài yên ắng. Họ muốn xem cần chú ý điều gì, nhưng bước tiếp theo không rõ ràng. Chúng tôi sẽ xem xét tác vụ họ đến để hoàn thành, lập bản đồ nơi bắt đầu có sự nhầm lẫn và làm cho các lựa chọn quan trọng dễ theo dõi hơn.
Cách tiếp cận tương tự cũng hiệu quả với dApp, wallet, sàn giao dịch hoặc luồng landing. Chúng tôi xem xét sản phẩm, người dùng dự kiến và bất kỳ tài liệu hiện có nào. Nghiên cứu và xem xét đối thủ cạnh tranh giúp chúng tôi nhận ra bối cảnh còn thiếu và các bước khó xử trước khi vẽ các màn hình chi tiết.
Điểm khởi đầu phụ thuộc vào những gì đội của bạn đã biết. Nếu hành trình đã rõ ràng, chúng tôi có thể tập trung vào thiết kế giao diện và prototype. Nếu chưa, chúng tôi có thể làm rõ luồng trước. Khi công việc cũng cần hỗ trợ hình ảnh, chúng tôi có thể kết nối nó với thiết kế và hình ảnh Web3.
Giao diện Web3 nên hướng dẫn ai đó qua một hành động wallet như thế nào?
Một luồng wallet hữu ích cho thấy ai đó có thể làm gì, điều gì xảy ra tiếp theo và giao diện phản hồi ra sao. Chúng tôi lập bản đồ từng hành động quan trọng trước khi hoàn thiện các màn hình của nó.
Giả sử một người dùng mới đến một lời nhắc kết nối wallet và không chắc tại sao cần nó. Chúng tôi sẽ xem xét thông tin nào thuộc về trước lời nhắc và người dùng thấy gì sau khi kết nối. Chúng tôi cũng sẽ lập bản đồ nơi luồng nên giải thích một giao dịch hoặc lỗi. Mục đích là làm cho quyết định tiếp theo dễ hiểu, không phải che giấu bước kỹ thuật.
Chúng tôi thường lập bản đồ 3 khoảnh khắc trong hành trình giao dịch: kết nối, xem xét và phản hồi. Wireframe cho phép đội của bạn kiểm tra thứ tự và ngôn ngữ trước khi thiết kế hình ảnh bắt đầu. Sau đó, prototype làm cho các đường dẫn đã chọn dễ thảo luận hơn như một trải nghiệm được kết nối.
Để có một buổi review đầu tiên hữu ích, hãy mang theo tác vụ chính, yêu cầu hiện tại, bất kỳ màn hình hiện có nào và các trạng thái wallet hoặc giao dịch đã biết. Nếu từ ngữ sản phẩm cần được chú ý riêng, copywriter Web3 có thể giúp giữ ngôn ngữ giao diện nhất quán. Một chủ sở hữu sản phẩm nên xác nhận bất kỳ quy tắc nào mà đội thiết kế không thể suy luận.
Các file làm việc mà đội sản phẩm của bạn có thể xem xét
Bạn nhận được một bộ tài liệu thiết kế được kết nối để xem xét hành trình người dùng và chuẩn bị triển khai. Chúng tôi thống nhất các tác vụ và màn hình cần tập trung trước khi thiết kế chi tiết bắt đầu.
Một bộ công việc điển hình có thể bao gồm:
- Ghi chú nghiên cứu và xem xét đối thủ cạnh tranh.
- Luồng người dùng và wireframe cho các tác vụ ưu tiên.
- Hệ thống thiết kế hình ảnh và thư viện component.
- Một prototype có thể nhấp cho các đường dẫn đã chọn.
- Kiểm thử khả năng sử dụng và bàn giao cho nhà phát triển trong Figma.
Luồng và wireframe cho thấy một tác vụ được cấu trúc như thế nào. Hệ thống thiết kế và component giúp đội của bạn xem xét ngôn ngữ hình ảnh trên các màn hình. Một prototype có thể nhấp giúp hành trình đã chọn dễ dàng đi qua hơn. Kiểm thử khả năng sử dụng cho đội cơ hội quan sát nơi mọi người cần thêm bối cảnh.
Bàn giao cuối cùng sắp xếp công việc Figma đã thống nhất cho nhà phát triển. Nếu bản sắc rộng hơn của sản phẩm vẫn đang hình thành, hãy căn chỉnh các quyết định giao diện với xây dựng thương hiệu cho dự án crypto trước khi ổn định hướng hình ảnh. Đội của bạn sau đó có thể xem xét ngôn ngữ sản phẩm và thiết kế cùng nhau.
Từ lần review đầu tiên đến bàn giao Figma
Công việc tiến triển từ bối cảnh sản phẩm đến luồng, quyết định giao diện, prototype và bàn giao cho nhà phát triển. Chúng tôi đặt các điểm review để đội của bạn có thể phản hồi trước khi lớp tiếp theo được xây dựng.
Tại Brand Community, chúng tôi sử dụng một danh sách kiểm tra khởi động để thu thập đối tượng, tác vụ ưu tiên, file thiết kế hiện có, yêu cầu sản phẩm và các câu hỏi đã biết. Sau đó, chúng tôi thống nhất ai có thể trả lời các câu hỏi về sản phẩm và ai sẽ review công việc. Hai điểm review có thể giúp giữ phản hồi rõ ràng: một cho luồng và wireframe, và một cho hướng hình ảnh và prototype đã chọn.
| Giai đoạn | Đội của bạn review gì |
|---|---|
| Review sản phẩm | Người dùng, tác vụ ưu tiên và yêu cầu hiện tại |
| Luồng và wireframe | Thứ tự tác vụ, cấu trúc màn hình và thông tin chính |
| Giao diện và prototype | Hướng hình ảnh và các đường dẫn người dùng đã chọn |
| Bàn giao Figma | File thiết kế được tổ chức để triển khai |
Tiến độ phụ thuộc vào số lượng và độ phức tạp của các hành trình, tài liệu đã có sẵn và tốc độ đưa ra quyết định. Công việc cũng có thể kết nối với tạo nội dung crypto hoặc đội truyền thông xã hội và nội dung rộng hơn thông qua ngôn ngữ sản phẩm chung.
Mang theo các quyết định sản phẩm định hình giao diện
Review thiết kế hữu ích nhất khi đội của bạn có thể giải thích người dùng, tác vụ và các quy tắc sản phẩm đằng sau nó. Chúng tôi có thể làm cho các câu hỏi chưa được trả lời hiển thị trong luồng, nhưng chúng tôi không nên điền chúng bằng cách phỏng đoán.
Một prototype Figma có thể hiển thị các trạng thái wallet và giao dịch dự kiến, nhưng nó không thể xác định những gì một wallet được kết nối hiển thị. Nó cũng không thể xác định liệu một giao dịch mạng có hoàn thành hay không. Những hành vi đó và các quy tắc sản phẩm đằng sau chúng vẫn thuộc về nền tảng và đội sản phẩm của bạn.
Để bắt đầu review đầu tiên, hãy chuẩn bị 3 điều sau:
- Một tổng quan ngắn về sản phẩm và những người bạn mong đợi sẽ sử dụng nó.
- Một hành trình quan trọng nhất, cùng với bất kỳ file Figma hoặc yêu cầu hiện tại nào.
- Một người có thể xác nhận các quyết định sản phẩm và thu thập phản hồi.
Bạn không cần một brief trau chuốt. Gửi cho chúng tôi những gì bạn có, bao gồm các màn hình hoặc câu hỏi cảm thấy chưa được giải quyết. Chúng tôi sẽ xem xét tài liệu với bạn, thống nhất hành trình đầu tiên và các điểm review, và lập bản đồ một lộ trình rõ ràng đến prototype và bàn giao Figma.
Cách hoạt động
- Chia sẻ bức tranh sản phẩmGửi tổng quan sản phẩm, người dùng dự kiến, tác vụ ưu tiên và bất kỳ file thiết kế hoặc yêu cầu hiện có nào.
- Thống nhất nội dung reviewChúng tôi xác nhận hành trình nào cần tập trung, ai có thể trả lời các câu hỏi về sản phẩm và khi nào đội của bạn sẽ review các quyết định.
- Lập bản đồ tác vụ người dùngChúng tôi chuẩn bị luồng và wireframe đã thống nhất để đội của bạn có thể kiểm tra cấu trúc trước khi thiết kế giao diện.
- Thiết kế và kiểm thử các đường dẫn đã chọnChúng tôi tạo hệ thống hình ảnh và màn hình, xây dựng prototype có thể nhấp và thực hiện kiểm thử khả năng sử dụng như đã thống nhất.
- Chuẩn bị bàn giao FigmaChúng tôi tổ chức các file thiết kế đã được phê duyệt cho nhà phát triển và hướng dẫn đội của bạn qua các lựa chọn giao diện liên quan.
Câu hỏi thường gặp
Tôi có thể chia sẻ gì nếu brief thiết kế của chúng tôi vẫn còn sơ sài?
Hãy bắt đầu với một mô tả ngắn về sản phẩm, người dùng dự kiến và tác vụ bạn muốn làm cho dễ dàng hơn. Các file Figma hiện có, yêu cầu hoặc danh sách các câu hỏi mở cũng hữu ích. Ví dụ, ngay cả một màn hình hiện tại cũng có thể cho chúng tôi một điểm khởi đầu hữu ích cho lần review đầu tiên.
Bạn có thể chỉ tập trung vào một hành trình dApp hoặc wallet không?
Có. Chúng tôi có thể đồng ý tập trung vào một hành trình ưu tiên, chẳng hạn như kết nối wallet hoặc xem xét giao dịch. Chúng tôi sẽ kiểm tra trước hành trình cần bao gồm những gì, sau đó thống nhất luồng, màn hình và công việc prototype nào thuộc về kế hoạch.
Các nhà phát triển của chúng tôi có thể sử dụng bàn giao Figma không?
Dịch vụ bao gồm bàn giao cho nhà phát triển trong Figma cho công việc thiết kế đã thống nhất. Chúng tôi tổ chức các file đã được phê duyệt và hướng dẫn đội của bạn qua các quyết định giao diện liên quan. Hãy chia sẻ sớm bất kỳ thiết lập thiết kế hiện có hoặc nhu cầu triển khai, để chúng tôi có thể tính đến chúng trong quá trình lập kế hoạch.
Bạn có thể cải thiện giao diện sản phẩm hiện có mà không thay đổi tính năng của nó không?
Có. Chúng tôi có thể xem xét các màn hình hiện tại và tập trung vào hành trình, ngôn ngữ hoặc các trạng thái giao diện cần được chú ý. Ví dụ, nếu các quy tắc sản phẩm đã được ổn định nhưng người dùng có thể không hiểu một bước giao dịch, chúng tôi có thể giải thích bước đó rõ ràng hơn. Chúng tôi sẽ không xác định hành vi sản phẩm mới.
Làm thế nào để bạn quyết định lịch trình cho một dự án thiết kế Web3?
Chúng tôi thống nhất lịch trình sau khi xem xét các hành trình, tài liệu có sẵn và nhu cầu review. Các đường dẫn phức tạp hơn hoặc quyết định sản phẩm chưa được giải quyết có thể cần thêm thảo luận. Có một người ra quyết định sản phẩm sẵn sàng có thể giúp phản hồi rõ ràng tại mỗi điểm kiểm tra.
Một prototype có thể hứa hẹn những gì xảy ra trong một giao dịch wallet thực tế không?
Không. Một prototype hiển thị các trạng thái giao diện mà đội đã thiết kế. Nó không kiểm soát màn hình wallet, điều kiện mạng, kết quả giao dịch hoặc quyết định tiếp tục của một người. Chúng tôi có thể kiểm tra xem prototype đã thống nhất có truyền đạt đường dẫn rõ ràng hay không và bàn giao thiết kế để triển khai.
Kể cho chúng tôi về dự án của bạn
Trả lời bốn câu hỏi nhanh và quản lý sẽ gửi kế hoạch, thời gian và mức giá trong vòng một giờ. Mọi thứ được bảo mật.
Đang tải biểu mẫu…