it-mot-dan-vi.com

Làm thế nào để bạn xác định các tương tác trong một mockup?

Tôi vừa là lập trình viên vừa là nhà thiết kế UX/UI. Khi tôi thiết kế mọi thứ, tôi thường tạo ra các hình ảnh tĩnh về giao diện sẽ trông như thế nào. Vấn đề là, hầu hết các UI không tĩnh; họ thay đổi và thay đổi kích thước từ đầu vào của người dùng. Tất nhiên, tôi biết chính xác giao diện sẽ đáp ứng như thế nào với đầu vào như vậy, nhưng đối với các dự án lớn, khách hàng và các lập trình viên khác phải có khả năng thực hiện các mô hình của tôi và hiểu các tương tác. Vậy làm thế nào để bạn hiển thị trong một mockup cách thiết kế của bạn tương tác và phản hồi với người dùng?

17
Jonathan Dumaine

Cách tốt nhất để mô tả sự tương tác là mô hình hóa nó với một nguyên mẫu tương tác.

Có nhiều công cụ tạo mẫu khác nhau như Axure hoặc công cụ chúng tôi đang phát triển, Thủ công . Cho dù bạn sử dụng loại nào, điểm quan trọng là chúng cho phép bạn hiển thị ứng dụng khách, đồng nghiệp, v.v. điều gì xảy ra khi bạn tương tác với các yếu tố trong mockup. Tuy nhiên, bạn sẽ nhận được kết quả tốt hơn bằng cách sử dụng một nguyên mẫu để hiển thị khả năng tương tác so với bạn với một mockup có thể nhấp, tuy nhiên. Có thể hiển thị các thay đổi trạng thái cơ bản với các mô hình và có một giai đoạn trong quy trình thiết kế, nơi điều này có thể hữu ích, nhưng có một số điều khó diễn tả bằng hình ảnh tĩnh, chẳng hạn như hình động (quan trọng trong một số tình huống), khả năng phản hồi ( một yếu tố chính của tính tương tác) và trong trường hợp ứng dụng gốc hoặc ứng dụng web, "cảm giác" của việc sử dụng nền tảng cụ thể đó.

7signals nói rất nhiều về cách họ bỏ qua các khung lưới và đi thẳng đến HTML. Tôi đã viết một bài đăng trên blog vài tháng trước về một cuộc nói chuyện mà họ đã đưa ra trong đó họ mô tả quá trình của họ.

Tuy nhiên, nếu bạn muốn làm phong phú các mockup tĩnh, Ký hiệu phác thảo tương tác của Jakub Linowski là điểm khởi đầu tốt cho cách tương tự như UML để mô tả tương tác:

interactive sketching notation

Xem Ưu/nhược điểm của PSD so với mockup HTML để biết một cuộc thảo luận tương tự:

Nếu bạn đang xây dựng một trang web hoặc ứng dụng, các mockup HTML vượt trội hơn nhiều vì bạn đang thiết kế mockup ở định dạng càng gần với sản phẩm cuối cùng càng tốt. Điều này cho phép bạn đặt kỳ vọng dễ dàng hơn nhiều, nó ràng buộc bạn chỉ là những gì có thể có trong sản phẩm cuối cùng và nó mang lại sự linh hoạt cao hơn nhiều.

25
Rahul

Khi một mô hình tương tác không phải là một tùy chọn, hãy thử văn bản. Bạn có thể thêm các số trỏ vào các phần của hình ảnh tĩnh hoặc khung dây, sau đó cung cấp ghi chú tương tác cho mỗi số.

alt text

Trên: một ví dụ về một số điểm.

5
JeromeR

Nếu bạn không có tùy chọn nào đó như Axure (hoặc công cụ tạo mẫu tương tác khác hoặc thậm chí HTML hoặc Flash), tôi nghĩ rằng cách tốt nhất của bạn là tạo khung cho khung nhìn "tiêu chuẩn" hoặc "mặc định", sau đó hiển thị trong các dây bổ sung trạng thái thay thế của các mô-đun cụ thể.

Theo kinh nghiệm của tôi, việc dựa vào các chú thích dựa trên văn bản để truyền đạt các thay đổi thường là không đủ - Tôi đã thực hiện quá nhiều dự án trong đó các khung lưới được chú thích hoàn hảo bị hiểu sai hoặc được xây dựng không chính xác vì máy khách/nhà phát triển/v.v. bỏ lỡ các chi tiết văn bản quan trọng sẽ được ghi lại tốt hơn bằng mắt thường.

2
Michael Histen

Tôi biết cái này đã được nửa năm tuổi, nhưng vì chưa có ai đề cập đến nó, tôi sẽ:

Bill Buxton đã viết một cuốn sách có tên "Phác thảo kinh nghiệm người dùng" liên quan đến vấn đề "phác thảo" của thiết kế tương tác - làm thế nào chúng ta có thể truyền đạt các khái niệm và mô hình tương tác theo cách khám phá, tức là nhanh chóng và chi phí thấp, nhưng không quá trừu tượng?

2
Jan