Advertisement
  1. Web Design
  2. Sketch

Cách sử dụng các biểu tượng Sketch để tạo biểu đồ tiến trình

by
Read Time:11 minsLanguages:

Vietnamese (Tiếng Việt) translation by Caitlyn Cat Tien (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

Trong hướng dẫn này, chúng ta để tạo các biểu đồ về tiến trình của người dùng và tiến trình cho công việc trong sketch. Chúng tôi sẽ khai thác sức mạnh của symbol trong Sketch, bằng cách sử dụng các thành phần cơ bản và một vài tuỳ chỉnh để các biểu tượng của chúng tôi làm việc cho chúng tôi.

"[A] flowchart là một sơ đồ của chuỗi các chuyển động hay hành động của con người hoặc những thứ liên quan trong một hệ thống phức tạp hoặc hoạt động." — Naema Baskanderi

Xây dựng flow diagram, chúng tôi sẽ cần các thành phần cho page (trang), arrows (mũi tên), action (hành động) (bao gồm cả các quyết định -decision và dấu hiệu Yes/No), label (nhãn tên) và note (ghi chú). Tôi sẽ đi qua từng cái trong những thành phần này, chúng sẽ trông như thế nào (nếu bạn cảm thấy muốn sao chép phong cách của tôi), chúng hoạt động ra sao và làm thế chúng phù hợp với tổng thể. Nhưng trước khi chúng tôi làm điều đó, chúng ta cần phải xem qua các qui ước đặt tên trong Sketch. Đây là một trong những yếu tố then chốt trong việc thực hiện công việc này. Bạn sẽ dấn thân vào ngay phải không?

Sketch symbols for flow diagramsSketch symbols for flow diagramsSketch symbols for flow diagrams
Cái biểu tượng của Sketch hoàn hảo cho flow diagram.

Chúng ta cần nói về quy tắc đặt tên

Vâng, chúng ta cần như thế và với hai lý do cụ thể. Đầu tiên, là thực tiễn tốt khi luôn đặt tên cho mục đích có tổ chức tốt, đặc biệt khi bạn đang xử lý các file cùng với những người khác. Khi bạn tạo một biểu tượng với nhiều trường text trong nó, những lớp văn bản được đặt tên theo đúng phù hợp sẽ giúp bạn phân biệt chúng khi bạn đang cố gắng để thay thế hoặc ghi đè lên nó.

Lý do thứ hai dù sao cũng hay hơn nhiều. Sketch sẽ tự động nhóm các biểu tượng, style của văn bản và style dùng chung thành các layer khác nhau, giả định là bạn tuân theo một cú pháp đặc trưng. Sketch dựa trên nguyên tắc đặt tên giống về URL và giống nhau về tên thư mục, ví dụ hai biểu tượng sau sẽ được nhóm chung với nhau.

  • Arrow/S-Shape/Left to Right
  • Arrow/S-Shape/Right-Down-Right

Sau đó nếu ta đặt tên cho một biểu tượng khác.

  • Arrow/Default/Left-Up-Left

Nó sẽ được nhóm lại bên dưới arrows, nhưng trong một thư mục con khác: Default. Việc phân chia này cho phép chúng ta tìm chính xác biểu tượng khi chúng ta cần.

Organizing symbols in SketchOrganizing symbols in SketchOrganizing symbols in Sketch
Những biểu tượng đã được sắp xếp trong Sketch

Hãy nhớ điều này khi đặt tên bất kỳ thứ gì kể từ đây, đặc biệt là các layer văn bản, biểu tượng và style dùng chung.

Thành phần Page

Page là một thành phần then chốt của flow diagram. Người dùng website hoặc ứng dụng sẽ theo những hướng sử dụng khác nhau, những tác vụ hoàn toàn khác nhau, và các page luôn là trung tâm.

Để tạo ra thành phần Page chúng tôi cần một hình chữ nhật và một trường văn bản ở trên nó. Style của hình chữ nhật bao gồm màu #325372, Helvetica Neue, độ dày chữ trung bình và các chữ cỡ 11. Bạn có thể tạo một Shared Style (dùng chung) giống như các thành phần khác sẽ dùng chung một kiểu chữ, dù thành phần page sẽ sử dụng chữ in hoa. Để thực hiện điều này, bên dưới phần options, thay đổi text transform sang uppercase.

Hình chữ nhật kích thước 144px x 96px với một góc bo tròn 5, màu nền #F7FCFD và border (đường viền) dày 1px có màu #B7E7EE. Đây là một ý tưởng tốt để chuyển style của hình chữ nhật của page thành Shared Style. Điều này sẽ cho phép dễ dàng chỉnh sửa sau này.

Đổi tên layer văn bản thành "Page name". Bằng cách này, khi bạn sử dụng lại các thành phần này như một biểu tượng mới, ghi đè văn bản ghi đè sẽ có một tiêu đề thay vì "text". Chọn cả hai và chuyển đổi chúng thành một biểu tượng duy nhất thông qua nút Create Symbol trên thanh Tool Bar.

Tạo tùy chỉnh phím tắt trong Sketch

Trong hướng dẫn này, chúng tôi sẽ tạo ra rất nhiều biểu tượng. Sketch không có phím lệnh cụ thể được dựng sẵn phục vụ mục đích này, nhưng chúng ta có thể làm một phím tắt tuỳ chỉnh cho bản thân.

Đầu tiên, vào System Preferences vào Keyboard. Chọn tab Shortcuts từ trên nhìn xuống. Trong bảng bên trái, chọn App Shortcuts và nhấn nút +. Một bảng phù mờ xuất hiện; trong danh sách ứng dụng tìm kiếm Sketch. Bên dưới Menu Title bạn cần điền vào tên các mục menu cụ thể bạn đang hướng đến, trong trường hợp này là Create Symbol (nó là mục menu đầu tiên dưới Layer). Sau cùng, chọn phím tắt của bạn, và xong rồi đấy.

Thủ thuật Pro: có thể được sử dụng cho ứng dụng bất kỳ.

Custom keyboard shortcut for SketchCustom keyboard shortcut for SketchCustom keyboard shortcut for Sketch
Làm một phím tắt tự biên cho Sketch

Những mũi tên

Bạn có thể tạo bao nhiêu style cho mũi tên theo ý bạn muốn, nhưng ý tưởng ở đây là để cho bạn xem làm thế nào để bắt đầu tạo ra một mũi tên duy nhất và có thể chỉnh sửa. Bạn có thể thêm style của riêng bạn và các biến thể sau này.

Như bạn thấy trong hình ở trên, một arrows sẽ có nhiều hình dạng; chúng ta cần phải khéo léo trong việc tạo ra nó. Trước tiên, chúng ta cần một điểm bắt đầu và một điểm kết thúc. Trong trường hợp của tôi, đó là một vòng tròn mở và một hình tam giác. Tam giác là một biểu tượng SVG, tôi tìm thấy trên Noun Project. Bạn có thể tự vẽ một hình tam giác đơn giản cho bạn, hoặc sử dụng một biểu tượng.

Tôi đang sử dụng màu #325372 cho mũi tên, đường viền của hình tròn và đườn thẳng. Vòng tròn có nền trắng #FFFFFF. Bây giờ, chuyển chúng thành các biểu tượng và đặt tên chúng. Nếu bạn muốn một chút phá phách và tạo những biểu tượng cá thể cho hình tam giác lúc lên, xuống, trái hoặc phải, cứ tự nhiên. Nhưng không cần thiết lắm.

Tiếp theo là đường thẳng. Tạo ra một đường thẳng 1px với công cụ line. Dù bạn tạo kiểu style gì cho nó, thì hãy chuyển style của đường thẳng thành một Shared Style. Tôi có hai style: solid và dotted cho arrow chính và phụ. Có nhiều style dùng chung (shared style) sẽ làm cho việc thay đổi giữa chúng dễ dàng hơn.

Tiếp theo, chúng tôi sẽ phải tạo ra mỗi loại arrow bằng cách kết hợp điểm bắt đầu, các đường thẳng và điểm kết thúc. Mũi tên phải được hoán đổi cho nhau để tạo ra sơ đồ, vì vậy, hãy làm điều đó bây giờ.

Tạo ra một biểu tượng arrow thẳng

Trước tiên, hãy tạo một artboard hình vuông. Một hình vuông sẽ giúp chúng tôi giữ tất cả mọi thứ có cùng hình dạng và sau đó làm việc với các arrow dễ dàng hơn. Của tôi là 80px x 80px. Tôi muốn bắt đầu bằng cách tạo ra một artboard cho mỗi arrow. Bằng cách này, tôi sẽ có thể nhìn thấy chúng tất cả cùng một lúc. Hãy bắt đầu bằng cách tạo ra các arrow đầu tiên bên trái, bên phải, trên và dưới phải. Bây giờ, chọn những arrow của bạn và biến chúng thành các biểu tượng theo cách mà chúng tôi đã làm. Cũng đừng quên sử dụng phím tắt mới được thiết lập của bạn. Đặt tên những biểu tượng, Arrow/Default/Left, Arrow/Default/Right và tiếp tục (bạn đã biết ý tưởng này rồi).

Tạo những mũi tên uốn cong

Bây giờ những arrow dễ hơn đã giải quyết xong; Hãy đi tiếp đến những arrow được uốn cong. Phần này là rất quan trọng bởi vì chúng ta cần các mũi tên để có thể thay đổi và điều chỉnh một cách dễ dàng. Đấu tiên tôi sẽ tiếp tục tạo ra một trong ba style.

Trong những artboards mới, vẫn là kích thước 80px x 80px, và sử dụng công cụ vector (V), vẽ các đường thẳng của arrow cho những style của L-Shape, the S-Shape, and the U-Shape. Hãy chắc chắn rằng các đường thẳng của bạn tạo góc vuông. Đừng vẽ bất kỳ đường cong nào. Nếu bạn khó khăn khi vẽ các đường thẳng hoàn hảo, hãy thêm nhiều điểm nhiều hơn hoặc giảm ít lại, sau đó sau đó tự điều chỉnh bằng cách nối vị trí X và Y.

Hãy xem các hình ảnh. Tiếp theo, chúng ta cần phải chỉnh sửa các đường cong. Cho từng đường thẳng chỉ chọn các điểm tạo nên các góc. Không chọn điểm bắt đầu hoặc điểm kết thúc. Bên phía tay phải, tăng con số của góc lên bất cứ bao nhiêu mà bạn muốn. Tôi thiết lập của tôi đến 10px. Bây giờ, các góc sẽ được tự động thay đổi kích cỡ mà không bóp méo các đường thẳng.

Điều sau cùng chúng ta cần làm ở đây là thêm vào các điểm đầu và điểm cuối. Nhưng trước khi làm điều đó, hãy chuyển những đường thẳng (chỉ đường thẳng thôi) thành biểu tượng. Chúng tôi muốn các đường thẳng (line) sẽ có thể điều chỉnh dựa trên hai điểm kết thúc thực sự của nó, nó bắt đầu và kết thúc, không bao gồm các biểu tượng ở đầu của nó. Chúng tôi sẽ thêm ngay vào điểm bắt đầu và kết thúc. Đặt tên ba arrows tên Arrow/L-Shape/Right-Down, Arrow/S-Shape/Right-Down-Right, và Arrow/U-Shape/Right-Down-Left.

Bây giờ, nhấp đúp vào bất kỳ một trong những biểu tượng mới tạo ra để chỉnh sửa nó. Chúng tôi muốn đặt điểm bắt đầu và điểm kết thúc ở rìa của các biểu tượng và canh giữa nó với điểm kết thúc của đường thẳng. Lý tưởng nhất, bạn muốn đặt điểm bắt đầu và điểm kết thúc nằm giữa góc của artboard của những biểu tượng.

Cuối cùng, để làm cho các mũi tên có thể thay đổi kích thước, cho cả hai điểm bắt đầu và điểm kết thúc, dưới phần chọn lựa còn lại, chọn fix width and fix height. Ngoài ra, đừng quên để thay đổi tên thành Start point và End point. Sự thay đổi tên này sẽ làm cho nó dễ dàng hơn để nhận biết từng cái có khi thay đổi các thể loại.

Chúng ta phải lặp lại điều này với các arrows còn lại, bao gồm các hướng dẫn còn lại của arows L-Shape, S-Shape and U-Shape. Làm điều đó bằng cách lặp lại các bước trước đó.

Sự khác nhau giữa các style của các arrow?

Bạn có thể có nhiều style khác nhau của arrow như bạn muốn; dotted, dashed, solid hoặc bất cứ gì khác. Phần tẻ nhạt là bạn đang dự định tạo ra một nhóm mới những arrow cho từng style nếu bạn muốn dùng nhiều hơn một trong cùng một file. Nếu không, chỉ cần cập nhật Shared Style. Đừng quên điều chỉnh các qui ước đặt tên thành mũi tên Arrow/S-Shape/Right-Down-Right/Dotted or Arrow/Dotted/S-Shape/Right-Down-Right.

Actions (các hành động)

Tôi nghĩ rằng sự phát triển quan trọng nhất ở đã xong. Các thành phần còn lại không quá phức tạp. Các thành phần action ở đây bao gồm các thành phần dấu hiệu Yes/No, decision (quyết định), và action label (nhãn tên cho hành động).

Các dấu hiệu Yes và No

Những dấu hiệu Yes và No cho phép chúng ta minh hoạ những điểm của so đồ, ở đó hướng đi của tiến trình bị ảnh hưởng bởi hành động "yes" hoặc "no".

Những dấu hiệu này rất trực tiếp (ít nhất là khi so sánh với các mũi tên). Tôi tạo ra chúng bằng việc tải về hai biểu tượng từ Noun Project. Đây là một liên kết đến kiểm tra và đây là liên kết đến X. Các biểu tượng của Noun Project màu trắng #FFFFFF. Trong khi màu nền là #F89B8D cho 👎 và #FECD75 cho 👍🏿.

Biến chúng thành biểu tượng và đặt tên là Annotation/Yes-No/👎 và Annotation/Yes-No/👍🏿 (vâng, các biểu tượng cảm xúc được hỗ trợ)

Dấu hiệu của quyết định

Quá trình tạo thành phần này rất giống với việc tạo ra thành phần Page. Tạo một hình vuông (của tôi là 126px x 126px) và xoay nó, hoặc biến đổi nó, với một góc 45º. Ngoài ra, tôi đã thêm một hình tròn bán kính 5px trên hình vuống. Màu nền của nó #F2F2F2, có border (đường viền). Lưu lại thành dạng style được dùng chung. Trên hình vuông, chúng ta cần một text area. Tôi đã đặt tên cho lớp văn bản của tôi là "Decision" (Quyết định). Hãy nhớ rằng, đặt tên lớp rất quan trọng. Bạn có thể sử dụng lại style dùng chung nếu bạn lưu nó trước đó. Nếu không, style cho văn bản là #325372 cho màu chữ, Helvetica Neue, kích cỡ trung bình, kích thước phông 11. Nếu bạn làm theo style của tôi, chuyển đổi các style của cả hai, văn bản text và hình vuông, thành style được chia sẻ.

Cuối cùng, đó là thời gian để chuyển đổi các quyết định sang một biểu tượng. Tôi sẽ đặt tên nó là Annotation/Decision (chú thích/quyết định).

Nhãn tên của một hành động

Một nhãn tên cho hành động sẽ sử dụng lại những style từ thành phần decision. Nó là một hình chữ nhật (của tôi  là 117px và 24px). Sử dụng lại cùng một style từ các chỉ thị quyết định cho cả hình chữ nhật và nội dung chữ (text). Đừng quên để đặt tên layer văn bản; Tôi đặt tên của tôi là "Action" (Hành động. Biến nó thành một biểu tượng và tên biểu tượng là Annotation/Action (Chú thích/Hành động). Và chúng ta xong việc ở đây; tiếp theo!

Các notes (ghi chú) và labels (nhãn tên)

Thứ hai thừ sau cùng trong danh sách của chúng tôi sẽ là note và label. Hãy bắt đầu với label. Có một chút khó khăn nhưng không có gì chúng tôi không thể xử lý được. Để tạo hình dễ dàng hơn, bạn có thể sao chép các rectangle và text từ các action mà chúng tôi thực hiện trước đó. Chúng tôi sẽ cần một rectangle,của tôi là 117px x 24px, với góc bo tròn 5px. Chọn #6FCFDB cho màu nền. Tiếp theo, textarea. sử dụng lại kiểu văn bản từ action hoặc dấu hiệu decision. Sau đó, tạo ra một style dùng chung gọi là Label text và tô màu lạii cho text thành #FFFFFF. Tiếp đến, biến chúng thành một biểu tượng một lần nữa (bạn đã sử dụng và quen thuộc với cách thực hiện rút gọn này chưa? Tuyệt 🙌) 

Nhấp đúp vào biểu tượng vừa được tạo và chọn layer văn bản. Chúng ta cần phải điều chỉnh thuộc tính thay đổi kích thước của nó. Chúng ta cần ghim nó vào bên trái và phải của đối tượng. Đôi khi, Sketch tự động thực hiện điều này cho bạn, nhưng không phải luôn thế, do đó tốt hơn để kiểm tra thật kỹ điều này.

Cuối cùng, chúng tôi có notes (các ghi chú). Các style tôi có cho chúng như sau: #A4A4A4 cho màu chữ, Helvetica Neue, lần này font thường và cỡ chữ 11. Cho đến giờ, note không giống như những thứ khác, do đó, không chuyển các text của note thành biểu tượng. Chỉ bổ sung nó thành một style dùng chung.

Giờ thì ta đã xong việc với những hình dạng và thành phần cơ bản, chúng ta có kết hợp các flow diagram cùng nhau.

Kết hợp mọi thứ cùng nhau

Các hình ảnh ở trên cho thấy tất cả các biểu tượng khác nhau tôi được phép sử dụng. Điều này là khá một bộ sưu tập – và tôi đã cố gắng giữ nó thật nhỏ và không quá nhiều tùy chỉnh. Những hình ảnh dưới đây cho bạn thấy một ví dụ flow diagram, tôi tạo ra bằng cách sử dụng các biểu tượng này.

Tất cả bạn cần là chọn một thành phần bạn muốn từ phần symbol và sắp xếp một flow diagram (biểu đồ quy trình) trên artboard của bạn.

Tổng kết

Thực hiện tốt những bước này! Giờ bạn có một file Sketch khá đẹp, dễ dàng cho phép bạn hoặc đội nhóm của bạn tạo ra tiến trình cho người dùng và biểu đồ tiến trình nhiệm vụ.

Những bước sau có thể liên quan đến việc tạo ra một hướng dẫn về phong cách cho các flow diagram của bạn; dễ dàng trao đổi màu, việc sắp xếp chữ và những thứ tương tự. Có lẽ cũng tạo ra các tài liệu trong file Sketch của bạn nếu bạn có kế hoạch sử dụng nó với các đồng đội của bạn hoặc cho nó đi như một món quà. Hãy chờ đón các bài hướng dẫn về các chủ đề này, sớm thôi!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.