Nền tảng Thiết kế Tương tác

3.1 Nguyên lý tương tác và Hệ thống sự kiện của Axure

3.1.1 Tương tác là gì?

Thiết kế tương tác là quá trình thêm các phản hồi vào nguyên mẫu, cho phép người dùng tương tác với các yếu tố trên trang. Axure hỗ trợ nhiều loại tương tác, ví dụ:

• Nhấp vào nút để chuyển trang
• Di chuột qua để hiển thị menu
• Hiển thị thông báo sau khi gửi biểu mẫu

3.1.2 Giới thiệu hệ thống sự kiện của Axure

Axure tạo ra các hiệu ứng tương tác bằng cách kết hợp sự kiện kích hoạt và hành động. Dưới đây là các loại sự kiện phổ biến:

1. Sự kiện chuột: Nhấp (OnClick), Nhấp kép (OnDoubleClick), Di chuột vào (OnMouseEnter).
2. Sự kiện bàn phím: Nhấn phím (OnKeyUp, OnKeyDown).
3. Sự kiện trang: Trang đã tải xong (OnPageLoad).
4. Sự kiện kéo-thả: Bắt đầu kéo (OnDragStart), Kết thúc kéo (OnDragDrop).

Bài tập thực hành: Thêm tương tác nhấp để chuyển trang cho nút

1. Khởi động Axure và kéo một thành phần hình chữ nhật vào khung làm việc để làm nút bấm.
2. Trong bảng thuộc tính bên phải, tìm đến mục "Tương tác" và nhấp vào "+ Thêm tương tác".
3. Trong cửa sổ "Trình chỉnh sửa tương tác" xuất hiện:
   • Sự kiện: Chọn "Nhấp (OnClick)".
   • Hành động: Chọn "Mở liên kết" → Chỉ định trang đích.
4. Lưu và xem trước, nhấp vào nút để chuyển đến trang đích.

Phân tích điểm chính và khó khăn

Điểm chính: Hiểu mối quan hệ giữa sự kiện và hành động.
Sự kiện (Event): Hành vi của người dùng, ví dụ "nhấp".
Hành động (Action): Phản hồi của hệ thống, ví dụ "chuyển trang".
Khó khăn: Các logic tương tác phức tạp đòi hỏi kết hợp nhiều hành động, ví dụ: "Chuyển trang có điều kiện" cần sử dụng logic (sẽ được giải thích chi tiết ở các chương sau).

3.2 Thêm các hành động tương tác đơn giản

3.2.1 Chuyển trang

Bài tập thực hành:

Kịch bản: Thiết kế một nút "Đăng nhập", nhấp vào sẽ chuyển đến "Trang chủ".

1. Kéo thành phần nút (với văn bản "Đăng nhập").
2. Cài đặt sự kiện "Nhấp", hành động là "Chuyển đến trang Trang chủ".

3.2.2 Hiển thị/Ẩn组件

Bài tập thực hành:

Kịch bản: Nhấp vào nút "Hiển thị gợi ý", sẽ hiển thị một thông tin gợi ý ẩn.

1. Kéo thành phần nút và hộp văn bản, đặt hộp văn bản ở trạng thái "Ẩn".
   • Trong bảng thuộc tính bên phải, đánh dấu vào "Ẩn (Hidden)".
2. Thêm sự kiện "Nhấp" cho nút: Hành động chọn "Hiển thị/Ẩn" → Thành phần đích là hộp văn bản → Hành động là "Hiển thị".

Hiệu ứng xem trước: Nhấp vào nút, thông tin gợi ý sẽ xuất hiện.

3.2.3 Hiệu ứng hoạt hình

Bài tập thực hành:

Kịch bản: Nhấp vào nút "Mở rộng", khu vực nội dung sẽ trượt xuống hiển thị.

1. Kéo nút và một khung hình chữ nhật, đặt khung hình chữ nhật ở trạng thái "Ẩn".
2. Thêm sự kiện "Nhấp" cho nút:
   • Hành động chọn "Hiển thị/Ẩn".
   • Cài đặt "Hiệu ứng hoạt hình khi hiển thị" là "Trượt xuống".

Phân tích điểm chính và khó khăn

Điểm chính: Nắm vững thuộc tính "Ẩn/Hiện" của component, sử dụng hoạt hình để tăng tính trực quan.
Khó khăn:

• Tốc độ và kiểu dáng của hoạt hình cần phù hợp với nhu cầu thực tế.
• Cần kiểm soát thứ tự hiển thị của các component để tránh xung đột hành động.

3.3 Bảng điều khiển động và Thiết kế nhiều trạng thái

3.3.1 Khái niệm Bảng điều khiển động

Bảng điều khiển động là một component rất mạnh mẽ trong Axure, được sử dụng để tạo các hiệu ứng chuyển đổi nhiều trạng thái. Ví dụ:

• Hình ảnh chuyển động (carousel)
• Biểu mẫu nhiều bước
• Cửa sổ bật lên (popup) và cửa sổ模态 (modal)

3.3.2 Các thao tác cơ bản với Bảng điều khiển động

Hoạt động thực hành:
1. Kéo một khung hình chữ nhật, nhấp chuột phải và chọn "Chuyển đổi thành Bảng điều khiển động".
2. Nhấp đúp vào bảng điều khiển để vào "Chỉnh sửa trạng thái", thêm hai trạng thái: Trạng thái 1 và Trạng thái 2.
Trạng thái 1: Thêm một hình ảnh A.
Trạng thái 2: Thêm một hình ảnh B.
3. Trở về trang chính, thêm sự kiện "Nhấp" cho bảng điều khiển động:
Hành động chọn "Đặt trạng thái bảng" → Chuyển đến "Trạng thái tiếp theo".

Phân tích điểm chính và khó khăn

Điểm chính: Bảng điều khiển động là một container cho nội dung nhiều trạng thái, hiểu được sự phối hợp giữa "trạng thái" và "hành động".
Khó khăn:

• Người mới bắt đầu thường dễ nhầm lẫn logic chuyển đổi trạng thái, cần luyện tập nhiều.
• Khi sử dụng nhiều bảng điều khiển động cùng lúc, cần chú ý đặt tên rõ ràng.

3.4 Ví dụ thực tế: Thiết kế Biểu mẫu nhiều bước

Mô tả kịch bản

Thiết kế một biểu mẫu đăng ký ba bước, sau khi gửi mỗi bước sẽ chuyển đến bước tiếp theo:
1. Bước 1: Điền thông tin cơ bản.
2. Bước 2: Thiết lập mật khẩu.
3. Bước 3: Thông báo đăng ký thành công.

Hoạt động thực hành:
1. Thiết kế giao diện:
• Kéo một bảng điều khiển động, đặt 3 trạng thái, lần lượt là Bước 1, Bước 2 và Bước 3.
• Mỗi trạng thái thêm các ô nhập liệu và nút tương ứng.
2. Thiết lập tương tác:
• Thêm sự kiện "Nhấp" cho mỗi nút:
• Hành động là "Chuyển đổi trạng thái bảng" → Chuyển đến trạng thái tiếp theo.
3. Hiệu ứng bổ sung (tùy chọn):
• Thêm biến toàn cục, ghi lại dữ liệu người dùng nhập ở mỗi bước.
• Hiển thị kết quả đầu vào của người dùng trong trạng thái cuối cùng.

Hiệu ứng xem trước

Nhấp vào nút "Bước tiếp theo", chuyển đổi dần biểu mẫu, sau khi hoàn thành đăng ký sẽ hiển thị trang thành công.

Phân tích điểm chính và khó khăn

Điểm chính: Kết hợp chuyển đổi trạng thái của bảng điều khiển động với dữ liệu đầu vào của người dùng.
Khó khăn: Xác thực nội dung biểu mẫu và truyền dữ liệu giữa các trạng thái (sẽ được giải thích chi tiết ở các chương sau).

3.5 Tóm tắt và Bài tập

Tóm tắt các kiến thức chính

1. Hệ thống sự kiện cốt lõi của Axure là Sự kiện (kích hoạt) + Hành động (phản hồi).
2. Bảng điều khiển động là công cụ cốt lõi để thực hiện các tương tác phức tạp, quản lý trạng thái là trọng tâm.
3. Hiệu ứng hoạt hình có thể nâng cao tính trực quan của nguyên mẫu, nhưng cần sử dụng hợp lý.

Mẹo vượt qua khó khăn

• Sử dụng chức năng "Giải thích tương tác" của Axure để kiểm tra xem sự kiện và hành động đã được đặt đúng chưa.
• Luyện tập các thiết kế tương tác phổ biến, như:
  • Hiển thị/Ẩn component
  • Chuyển trang
  • Chuyển đổi trạng thái của bảng điều khiển động

Bài tập thực hành:

1. Thiết kế một trang đăng nhập:
   Nhấp vào nút "Đăng nhập", xác thực biểu mẫu rồi chuyển đến trang chủ.
2. Thiết kế một hình ảnh chuyển động (carousel):
   Tự động chuyển đổi hình ảnh, đồng thời thêm các nút chuyển sang trái/phải.
3. Thiết kế một biểu mẫu đăng ký nhiều bước:
   Sử dụng bảng điều khiển động để chuyển đổi trạng thái và ghi lại nội dung người dùng nhập.