Axure RP - Giao diện người dùng

Sau khi cài đặt Axure, bạn sẽ thấy một giao diện như thể hiện trong ảnh chụp màn hình sau.

Màn hình này sẽ luôn được hiển thị khi khởi động cho đến khi bạn chọn không hiển thị.

Trên màn hình này, bạn có các tùy chọn sau:

Bắt đầu một tệp mới trong Axure
Mở một dự án Axure hiện có

Bây giờ chúng ta hãy tạo một tệp mới với Axure.

Khi bạn nhấp vào nút “TẬP TIN MỚI”, bạn sẽ thấy màn hình sau để tạo một nguyên mẫu mới.

Như trong hình trên, không gian làm việc được chia thành 6 phần.

Pages
Libraries
Inspector
Outline
Masters
Khu vực thiết kế

Hãy để chúng tôi đi qua từng phần một.

Các trang

Phần này hiển thị các trang bạn đang làm việc. Các trang này được hiển thị trong cấu trúc cây mặc định như sau. Trang chủ có các trang con sau.

Trang Chủ

Page 1

Page 2

Page 3

Bạn có thể tiếp tục với cấu trúc đã cho hoặc bạn có thể thay đổi nó theo nhu cầu của bạn. Để làm như vậy, hãy nhấp chuột phải vào bất kỳ trang nào, sau đó bạn sẽ thấy các tùy chọn như - Thêm, Di chuyển, Xóa, Đổi tên, Nhân bản, v.v.

Giống như hầu hết các công cụ khác nhau có sẵn, phần này cho phép bạn tương tác với các trang trong nguyên mẫu của mình. Bạn có thể sử dụng nó để lập kế hoạch cho các màn hình trong nguyên mẫu dự kiến.

Libraries Pane

Trong ngăn thư viện, hầu hết các điều khiển cần thiết cho nguyên mẫu đều có sẵn. Các điều khiển điển hình có sẵn trong phần này là - Hộp, Hình ảnh, Trình giữ chỗ, Nút, v.v. Axure RP cung cấp một bộ điều khiển giao diện người dùng phong phú được phân loại theo lĩnh vực ứng dụng của chúng.

Như thể hiện trong hình trên (a), các thư viện có các danh mục như - Common, Forms, Menus and Table, and Markup. Tất cả các danh mục này được mở rộng khi bạn mở ứng dụng. Để thuận tiện, nó được thu gọn trong ảnh chụp màn hình này.

Các thư viện phổ biến bao gồm các hình dạng cơ bản, các nút, văn bản tiêu đề, Điểm nóng, Bảng điều khiển động, v.v.

Với Axure RP, đối với tất cả các yêu cầu tạo mẫu của bạn, có một điều khiển rất hiệu quả được gọi là Điểm nóng. Sử dụng điều khiển này, bạn có thể cung cấp tương tác nhấp chuột cho hầu hết mọi điều khiển trong giao diện người dùng. Một ví dụ sẽ được cung cấp trong các trang tiếp tục.

Trong thư viện biểu mẫu, như tên cho thấy, Hộp danh sách, Hộp kiểm, nút radio, vùng văn bản và các điều khiển trường văn bản được bao gồm. Để thiết kế biểu mẫu nhập của người dùng, bạn có thể sử dụng các điều khiển từ phần này trong thư viện.

Thực đơn và bảng có cấu trúc truyền thống. Cấu trúc như vậy, có thể ở dạng ngang hoặc dạng dọc, có sẵn trong thư viện này được gọi là Menu và bảng.

Cuối cùng, nhưng không kém phần quan trọng, là thư viện Markup, bao gồm các dấu dính, điểm đánh dấu và mũi tên. Hầu hết, điều này sẽ được sử dụng cho các chú thích trong nguyên mẫu của bạn.

Khu vực thiết kế

Đây là sân chơi thực tế dành cho các kỹ sư UX. Không gian này sẽ được sử dụng để tạo các nguyên mẫu theo yêu cầu của bạn. Để bắt đầu, hãy tham khảo khu vực được đánh dấu bằng số 6 trong ảnh chụp màn hình sau.

Trong khu vực này, bạn có thể kéo và thả các điều khiển mong muốn từ thư viện. Hãy để chúng tôi tạo thanh menu nhanh bằng thư viện.

Ví dụ - Thanh Menu

Từ các thư viện, trong Menu và Bảng, kéo Menu Cổ điển - Điều khiển theo chiều ngang đến vùng thiết kế.

Khi bạn đã kéo điều khiển trong vùng thiết kế, bạn sẽ thấy màn hình sau.

Như được hiển thị trong màn hình ở trên, Axure RP đủ thông minh để hiển thị văn bản dự định trong menu. Coi nó là một thanh menu, Axure RP đã tự động tạo File, Edit và View dưới dạng menu trong điều khiển.

Như được chỉ bởi mũi tên, phần thanh tra hiển thị các thuộc tính của điều khiển. Sử dụng phần này để tạo tên cho điều khiển của bạn nhằm nhận dạng duy nhất khi tạo các nguyên mẫu phức tạp.

Hãy để chúng tôi đặt tên cho điều khiển này là TestMenu. Chúng tôi sẽ sử dụng tên này trong các ví dụ tiếp tục.

Thuộc tính trang

Khi lập kế hoạch cho một nguyên mẫu, điều hợp lý là phải có ý tưởng rõ ràng về người dùng và do đó thiết bị mà nguyên mẫu sẽ được trưng bày / xem. Để có trải nghiệm tương tác tốt nhất với nguyên mẫu, Axure đã cung cấp một tính năng để đặt thuộc tính trang.

Như trong hình trên, khu vực được ký hiệu bằng số 3 là phần thuộc tính trang. Trong phần này, bạn sẽ có thể thấy trình đơn thả xuống tương tác và phần phụ Thích ứng.

Hãy để chúng tôi thảo luận chi tiết về các phần này.

Interactions sectiongiải quyết các tương tác (trường hợp) có thể xảy ra với trang. Như bạn có thể thấy, trường hợp tương tác OnPageLoad xử lý các sự kiện khi tải trang. Trong hầu hết các nguyên mẫu, các kỹ sư UX thích đưa hoạt ảnh vào để tạo ấn tượng đầu tiên. Sự kiện cụ thể này để hiển thị hoạt ảnh thường được kích hoạt trong trường hợp OnPageLoad.

Tương tự, các trường hợp khác bao gồm - OnWindowResize, OnWindowScroll. Trong menu thả xuống, Thêm Sự kiện, bạn có thể xem các trường hợp được hỗ trợ khác để định cấu hình các tương tác liên quan đến trang.

Với Adaptive section, Axure RP tham gia vào một thiết kế web đáp ứng. Ngày nay, thiết kế trải nghiệm cho các trang web là không đủ, cùng với đó, các doanh nghiệp thích các trang web di động cùng tồn tại với các trang web.

Cùng một trang, khi được xem từ các kích thước và bố cục màn hình khác nhau tạo thành các chế độ xem thích ứng khác nhau. Thông thường, các chế độ xem thích ứng được thiết kế cho điện thoại di động và máy tính bảng. Axure cung cấp tính năng này của các chế độ xem thích ứng, để các kỹ sư UX nắm được khía cạnh đáp ứng của các nguyên mẫu ngay từ đầu.

Ngăn Thanh tra cho Tiện ích con

Ngăn Tương tác tiện ích là phần quan trọng nhất trong Axure. Bạn có thể xem ngăn này bằng cách nhấp vào bất kỳ tiện ích con nào trong khu vực thiết kế.

Hãy xem xét một ví dụ về mục menu mà chúng ta đã sử dụng trong phần trước. Chọn mục menu có tên TestMenu và quan sát phần được đánh dấu trong ảnh chụp màn hình sau.

Như bạn có thể thấy trong tab Thuộc tính, có các tương tác khác nhau như OnMove, OnShow, OnHide và OnLoad. Những điều này dành riêng cho toàn bộ điều khiển Menu.

Bây giờ, hãy nhấp vào Tệp từ điều khiển menu.

Bạn sẽ nhận thấy sự thay đổi về kiểu tương tác trong ngăn Thuộc tính tiện ích. Ngoài ra, nó cung cấp sự linh hoạt để cung cấp tên cho mục menu này. Hãy để chúng tôi lấy trường hợp OnClick làm ví dụ.

OnClick- Trường hợp OnClick xác định hành vi của điều khiển, khi bạn nhấp vào điều khiển khi chạy nguyên mẫu. Điều này cho phép các tương tác khác nhau như điều hướng trang, menu bật lên, v.v.

Notes Pane- Trong chính ngăn thanh tra, có một phần con gọi là Ghi chú. Trong ngăn ghi chú, bạn sẽ có thể thêm một số điểm cần nhớ để kiểm soát sự lựa chọn của mình.

Những điểm này sẽ rõ ràng khi chúng ta đi sâu vào một ví dụ trong chương tiếp theo.

Lưới và Hướng dẫn

Đối với một nguyên mẫu có chất lượng và độ chính xác ở mức tối đa, các kỹ sư UX yêu cầu khả năng căn chỉnh / định vị một điều khiển với điều khiển khác.

Ví dụ, bạn muốn hiển thị cửa sổ bật lên đăng nhập. Nếu cửa sổ bật lên này được hiển thị ngay giữa màn hình, bạn cần có kích thước tổng thể của màn hình. Ngoài ra, để căn chỉnh chính xác ở giữa màn hình, bạn nên có các ô lưới để căn chỉnh hợp lý.

Axure cung cấp tính năng Lưới và Thanh dẫn, để bạn có thể sử dụng khu vực thiết kế của mình một cách hiệu quả.

Để xem Lưới và Hướng dẫn có sẵn, hãy nhấp chuột phải vào khu vực thiết kế và menu ngữ cảnh được hiển thị trong ảnh chụp màn hình sau sẽ bật lên.

Bây giờ, hãy để chúng tôi hiểu các tùy chọn có sẵn.

Grid- Ba tùy chọn đầu tiên hiển thị trong menu ngữ cảnh được liên kết với lưới. Đó là Hiển thị lưới, Chụp theo lưới và Cài đặt lưới.

Show Grid- Khi Bật Hiển thị Lưới, bạn sẽ có thể thấy lưới trên khu vực thiết kế như thể hiện trong ảnh chụp màn hình sau. Điều này rất hữu ích trong việc căn chỉnh các điều khiển với các điều khiển khác trên màn hình.

Snap to Grid- Khi bật Snap to Grid, các điều khiển sẽ tự động được gắn theo các lưới hiện có xung quanh. Bạn sẽ có thể thấy hành vi này khi bạn kéo một điều khiển và nó sẽ tự gắn vào lưới gần đó.
Grid Settings- Các cài đặt khác liên quan đến Lưới có trong hộp thoại này. Như được hiển thị trong ảnh chụp màn hình sau, khoảng cách giữa các lưới, loại lưới, v.v. sẽ có sẵn trong hộp thoại này. Bạn có thể chọn lưới của loại giao lộ, tùy theo sự thuận tiện của bạn.

Guides - Trong menu ngữ cảnh như được hiển thị trong ảnh chụp màn hình sau, các tùy chọn sau dấu phân tách đầu tiên có liên quan đến các hướng dẫn.

Chúng tôi sẽ đề cập đến các tùy chọn thường được sử dụng cho Hướng dẫn.

Show Global Guides- Các đường dẫn này sẽ hiển thị khi bạn kéo từ cả thước ngang và thước dọc trong vùng thiết kế. Hãy thử nó cho chính mình!
Show Page Guides- Hướng dẫn cũng có sẵn ở cấp độ trang. Các đường dẫn này được tạo ra khi bạn kéo chúng từ các thước kẻ dọc và ngang. Chúng phổ biến hơn Global Guides. Có một hướng dẫn trang giúp tăng tính linh hoạt của thiết kế ở cấp độ trang.
Show Adaptive Guides- Khi nói đến việc thiết kế các trang cho các chế độ xem thích ứng khác nhau, điều đáng giá là phải có các hướng dẫn thích ứng tại chỗ. Tùy chọn này cho phép hiển thị các hướng dẫn thích ứng, sẽ được sử dụng để căn chỉnh các đối tượng trên các chế độ xem thích ứng khác nhau.
Snap to Guides- Khi sắp xếp các phần tử màn hình khác nhau trong khu vực thiết kế, chức năng này cho phép các đối tượng được gắn vào các đường dẫn. Điều này rất hữu ích khi bạn đặt một đối tượng cụ thể trên màn hình và sắp xếp nó so với đối tượng khác.