Hướng dẫn sử dụng Prototyping trong Sketch

Với Prototyping trong Sketch, bạn có thể xem trước thiết kế với các tương tác sinh động. Để sử dụng tính năng tạo mẫu của Sketch, bạn cần sử dụng Artboard trong tài liệu.

Rất tiện lợi khi nhà phát triển đã bao gồm hướng dẫn sử dụng Prototyping Tutorial trong tab Mẫu ở cửa sổ Tài liệu của Sketch cho Mac. Ngoài ra, bạn có thể tham khảo hướng dẫn dưới đây để sử dụng Prototyping trong phần mềm thiết kế đồ họa Sketch ngay lập tức.

Thêm liên kết

Cách nhanh nhất để tạo Prototype là thêm một Liên kết giữa hai Artboard. Bạn có thể thêm Liên kết từ bất kỳ layer nào vào Artboard bất kỳ.

Để thêm một Liên kết, chọn layer > click + bên cạnh Prototyping ở Inspector (hoặc nhấn W), sau đó click vào artboard bạn muốn liên kết với layer.

Cách chỉnh sửa Liên kết

Trong Inspector, bạn có thể chọn cách chuyển tiếp một Liên kết sẽ trông như thế nào qua các nút Animation và thay đổi Liên kết đưa bạn tới Artboard bằng cách dùng menu Target thả xuống.

Chọn “Artboard Trước Đó” trong menu Target để yêu cầu Sketch trả về Artboard bạn đã xem trước khi chuyển sang bảng vẽ hiện tại. Tính năng này cực kỳ hữu ích khi bạn có nhiều Liên kết dẫn tới một Artboard.

Cách xóa một Liên kết

Chọn Prototyping > Xóa Liên kết từ Lựa chọn, đặt mục tiêu của Liên kết sang Không hoặc click vào biểu tượng thùng rác trong phần Prototyping của Inspector để di chuyển một Liên kết.

Thêm Vùng Nhạy cảm

Vùng Nhạy cung cấp cho bạn nhiều quyền kiểm soát hơn Liên kết và hữu ích khi bạn muốn tạo ra một vùng click lớn hơn so với một lớp đơn lẻ.

Để thêm Vùng Nhạy, chọn Chèn > Vùng Nhạy (hoặc nhấn H), sau đó click và kéo để vẽ Vùng Nhạy. Sau đó, nhấn Artboard mà bạn muốn liên kết tới Vùng Nhạy.

Bạn có thể chỉnh sửa hoạt ảnh của Vùng Nhạy và Artboard mục tiêu, trong Inspector, giống như bạn có thể làm với Liên kết.

Cách biến Liên kết thành một Vùng Nhạy

Chọn bất kỳ Liên kết nào và click vào biểu tượng “Tạo Vùng Nhạy” trong Inspector để biến nó thành một Vùng Nhạy.

Cách điều chỉnh vị trí của một Vùng Nhạy

Chọn Vùng Nhạy, sau đó, tích ô Cố định vị trí khi cuộn trong Inspector để điều chỉnh vị trí của nó trên bảng vẽ ngay cả khi phần còn lại của trang được cuộn qua các Lớp.

Cách sử dụng Vùng Nhạy với Biểu tượng

Nếu sử dụng Vùng Nhạy như một phần của Biểu tượng, bạn có thể tái sử dụng Biểu tượng đó nhưng ghi đè lên mỗi mục tiêu của Vùng Nhạy. Bạn cũng có thể ghi đè mục tiêu của Vùng Nhạy sang None nếu không muốn liên kết tới Artboard khác.

Cách ẩn Liên kết và Vùng Nhạy

Chọn Hiển thị > Hiện Prototyping (hoặc nhấn Ctrl + F) để ẩn các đường dẫn đại diện cho Liên kết Prototyping và Vùng Nhạy khác nhau. Bạn cũng có thể thay đổi màu trong phần Bảng Vẽ ở Tùy chọn.

Tạo các phần tử cố định

Để tạo một phần tử cố định, chọn lớp hoặc Vùng Nhạy và tích Cố định vị trí khi cuộn trong phần Prototyping của Inspector. Ngoài ra, bạn cũng có thể chọn Prototyping › Cố định Vị Trí Lớp khi Cuộn trong menu.

Ví dụ: Thao tác này hữu ích khi bạn muốn cố định một hàng tab nằm dưới thiết kế ứng dụng hoặc có một nút nổi trên trang web.

Cách tạo Artboard có khả năng cuộn

Nếu bạn muốn tạo một prototype với các yếu tố có khả năng cuộn, bạn cần chọn một Artboard Preset hoặc tạo Custom Preset và điều chỉnh lại chiều cao của nó. Nếu không sử dụng Preset và vẽ một Artboard tùy chỉnh, prototype của bạn sẽ không cuộn và sẽ hiển thị ở trạng thái thu nhỏ trong ứng dụng, trên Sketch Cloud và Sketch Mirror.

Để tạo prototype dạng cuộn từ một preset Artboard, chọn thiết lập trước của bạn và thay đổi chiều cao của nó trên bảng vẽ. Khi bạn làm điều này, tên thiết lập trước trong Inspector sẽ thay đổi để bao gồm từ Đã Thay Đổi Kích Thước.

Để tạo thiết lập trước kích thước tùy chỉnh cho artboard, chọn Tạo Kích Thước Tùy Chỉnh ở phía dưới Inspector. Xác nhận kích thước và tên artboard của bạn, sau đó thay đổi chiều cao của nó trên bảng vẽ. Tương tự như các preset thông thường khác, tên của nó trong Inspector sẽ thay đổi để bao gồm từ Đã Thay Đổi Kích Thước.

Sử dụng Điểm Bắt Đầu

Điểm Bắt Đầu cho phép bạn chọn Artboard mà Prototype bắt đầu khi xem trước nó. Để đặt một Điểm Bắt Đầu, mở Prototype trong cửa sổ Xem Trước, chọn Artboard từ menu thả xuống và click nút lá cờ bên cạnh nó.

Mỗi khi bạn xem trước Prototype, bạn sẽ luôn bắt đầu với Artboard đã chọn làm Điểm Bắt Đầu. Để loại bỏ một điểm khởi đầu, chọn Artboard đó trong cửa sổ Xem Trước và click vào nút lá cờ một lần nữa.

Thiết lập Nhiều Điểm Bắt Đầu

Bạn có thể đặt nhiều hơn một Điểm Bắt Đầu để dẫn dắt mọi người qua các khía cạnh khác nhau của những bản thiết kế phức tạp hơn (ví dụ, quy trình đăng ký và thiết lập người dùng). Mỗi khi bạn đặt một Điểm Bắt Đầu mới, nó sẽ hiện như một Prototype khác trong cùng tài liệu trên Sketch Cloud.

Xem Trước Prototype

Có 3 cách để xem trước Prototype - trong ứng dụng Sketch, trên thiết bị iOS sử dụng Sketch Mirror, hoặc trên Sketch Cloud nơi bạn có thể chia sẻ các prototype với người khác.

Cách xem trước một Prototype trong ứng dụng Mac

Để xem trước tác phẩm trong ứng dụng Sketch, click nút Xem Trước ở thanh công cụ. Nếu đã đặt một Điểm Bắt Đầu, Prototype của bạn sẽ bắt đầu từ đây. Nếu không, nó sẽ khởi đầu từ Artboard đã chọn hiện tại.

1. Click vào bất kỳ đâu trong cửa sổ Xem Trước để xem các mục tiêu chạm. Chúng cho bạn biết vị trí Link và Hotspot trên artboard hiện tại.
2. Nút Quay Lại sẽ đưa bạn trở lại một bước tới Artboard trước đó trong prototype.
3. Menu Artboard thả xuống cung cấp cho bạn một cách nhanh chóng để di chuyển giữa các Artboard khác nhau.
4. Biểu tượng lá cờ đặt Artboard hiện bạn đang xem làm một Điểm Bắt Đầu.

Cách xem trước một Prototype trong Sketch Cloud

Khi mở tài liệu trong Sketch Cloud, bạn sẽ thấy mọi Prototype nó chứa nằm trong phần phía trên cùng của cửa sổ tổng quan tài liệu. Click vào ảnh thumbnail của Prototype để mở và xem trước nó trong trình duyệt.

Giống như cửa sổ Xem Trước ở ứng dụng Mac, click vào bất kỳ đâu trên màn hình sẽ làm nổi bật Hotspot hoặc Link bất kỳ. Để quay lại một bước tới Artboard trước đó, click nút Quay Lại trong trình duyệt.

Nếu đã kích hoạt bình luận trên tài liệu, bất kỳ ai xem Prototype của bạn đều có thể chọn Xem Artboard ở dưới cửa sổ để thoát Prototype đó và vào cửa sổ xem tĩnh của Artboard này. Tại đây, bạn có thể để lại bình luận ở thanh bên. Để đóng Prototype và trở lại phần tổng quan tài liệu, hãy chọn Đóng.

Cách xem trước một Prototype trong Sketch Mirror

Khởi động Sketch Mirror trên thiết bị iOS và kết nối qua USB hoặc Wi-Fi, sau đó chạm vào thông báo ở góc trên cùng của cửa sổ Sketch App để kết nối.

Trong Sketch Mirror, chạm vào một artboard để xem trước Prototype của bạn. Tại đây, bạn có thể chạm vào Link và Hotspot để điều hướng Prototype hoặc vuốt xuống một Artboard để đóng nó.

Dưới đây là hướng dẫn cách sử dụng tính năng Prototyping trong Sketch đơn giản nhất. Hi vọng bài viết sẽ hữu ích với bạn.