Hướng dẫn cách 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. Để 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.

Thật tuyệt khi nhà phát hành đã đính kèm hướng dẫn sử dụng Prototyping Tutorial trong tab Templates ở cửa sổ Documents của Sketch cho Mac. Bên cạnh đó, bạn có thể tham khảo hướng dẫn dưới đây để 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 Link (liên kết) giữa hai Artboard. Bạn có thể thêm Link từ mọi layer vào Artboard bất kỳ.

Để thêm một Link, 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 Link

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

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

Cách xóa một Link

Chọn Prototyping > Remove Links from Selection, đặt mục tiêu của Link sang None hoặc click icon thùng rác trong phần Prototyping của Inspector để di chuyển một Link.

Thêm Hotspot

Hotspot cung cấp cho bạn nhiều quyền kiểm soát hơn Link và hữu ích khi bạn muốn tạo một vùng có thể click lớn hơn một lớp riêng.

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

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

Cách biến Link thành một Hotspot

Chọn Link bất kỳ và click icon “Create Hotspot” trong Inspector để biến nó thành một Hotspot.

Cách sửa vị trí của một Hotspot

Chọn Hotspot, sau đó, tích ô Fix position when scrolling trong Inspector để sửa vị trí của nó trên canvas ngay cả phần còn lại trên trang cuộn Layers.

Cách dùng Hotspot với Symbol

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

Cách ẩn Link và Hotspot

Chọn View > Show Prototyping (hoặc nhấn Ctrl + F) để ẩn các đường dẫn đại diện cho Prototyping Link và Hotspot khác nhau. Bạn cũng có thể thay đổi màu trong phần Canvas ở Preferences.

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

Để tạo một phần tử cố định, chọn layer hoặc Hotspot và tích Fix position when scrolling trong phần Prototyping của Inspector. Ngoài ra, bạn cũng có thể chọn Prototyping › Fix Layer Position when Scrolling trong menu.

Ví dụ: Thao tác này hữu dụng 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 web.

Cách tạo Artboard cuộn

Nếu muốn tạo một prototype với các nhân tố cuộn, bạn cần chọn một Artboard Preset hoặc tạo Custom Preset và chỉnh lại chiều cao của nó. Nếu không dùng Preset và vẽ một Artboard tùy chỉnh, prototype của bạn sẽ không cuộn và hiện ở 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 canvas. Khi bạn làm việc này, tên thiết lập trước trong Inspector sẽ thay đổi để bao gồm từ Resized.

Để tạo thiết lập trước kích thước tùy biến cho artboard, chọn Create Custom Size ở phía dưới Inspector. Xác nhận kích thước & tên artboard của bạn, rồi thay đổi chiều cao của nó trên canvas. Giống như preset thông thường khác, tên của nó trong Inspector sẽ thay đổi để bao gồm từ Resized.

Dùng Start Point

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

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

Đặt nhiều điểm khởi đầu

Bạn có thể đặt nhiều hơn một Start Point để hướng 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 lần bạn đặt một Start Point mới, nó sẽ hiện như một Prototype khác trong cùng tài liệu ở 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 dùng Sketch Mirror, hoặc ở 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 Preview ở thanh công cụ. Nếu đã đặt một Start Point, 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ổ Preview để 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 Back 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. Icon lá cờ đặt Artboard hiện bạn đang xem làm một Start Point.

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ổ Preview ở ứ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 Back 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 View 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 Close.

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

Mở ứng dụng Sketch Mirror trên thiết bị iOS và kết nối qua USB hoặc Wi-Fi, sau đó click thông báo ở góc phía 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 để bắt đầu 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ó.

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