Cách làm mũi tên cho UX không thể bỏ qua!

992
Mũi tên thay đổi được nhưng góc thì luôn như cũ

Bài viết này sẽ hướng dẫn bạn cách làm mũi tên siêu tùy biến một cách linh hoạt cho sơ đồ luồng của mình.

Downloadable content: Link dưới đây có chứa 4 kiểu dòng và 8 đầu mũi tên!

https://www.dropbox.com/s/dhbjqjm9qkqniqq/StretchyArrowsAssets.sketch?dl=0

Vấn đề

Muỗi tên với chiều đi thông thường và các góc bo tròn. Khi bạn kéo giãn, các góc và đầu mũi tên bị biến dạng.

Giải pháp

Dùng tính năng ký hiệu và góc tròn để giúp mũi tên thay đổi đúng tỷ lệ hơn.

Hình 1
Hình 1
Hình 2
Hình 3
Hình 3
  1. Vẽ các đoạn thẳng bằng công cụ  Vector
  2. Gán dính các điểm với grid để đảm bảo độ song song, vuông góc
  3. Lựa chọn hai góc muốn tạo và đặt point curving thành Straight và kéo Corners slider để có được góc tròn ưng ý nhất (xem hình 4)
  4. Biến thân mũi tên này thành ký hiệu (symbol)
  5. Tạo đầu mũi tên và cho phép nó xuất hiện bên ngoài phạm vi ký hiệu, hãy chú ý làm sao để đoạn thẳng nối tiếp khớp với đầu mũi tên, và nửa trên của mũi tên nằm ngoài hộp giới hạn của ký hiệu (hình 2)
  6. Thiết đặt tùy chọn Resizing cho mũi tên thành Pin to Corner (hình 5). Còn thân mũi tên vẫn có thể ở nguyên mặc định Strech.
  7. Giờ đây bạn đã có thể nhân bản, kéo giãn, xoay lật và phóng to thu nhỏ ký hiệu tùy thích.
Hình 4: Tinh chỉnh cho hai điểm ở bước 3
Figure 5: Gắn mũi tên vào góc

Thông tin thêm

Kỹ thuật này chỉ hoạt động hiệu quả đối với một kiểu mũi tên duy nhất, nhưng bạn vẫn có thể sử dụng nested symbol trong Sketch để áp dụng với nhiều kiểu mũi tên khác nhau (e.g. thẳng, đơn góc, hoặc hình chữ U) và các dạng đầu tên khác nhau (kim cương, tròng, có/không)

Techtalk via medium

CHIA SẺ