() translation by (you can also view the original English article)
Thời gian trước chúng tôi đã xuất bản một hướng dẫn về cách tạo tập tin Sketch tùy chỉnh với các biểu đồ tiến trình có thể tái sử dụng. Đó là một nguồn tài nguyên tuyệt vời để tạo ra các biểu đồ tiến trình hay sơ đồ trang web người dùng của riêng bạn. Trong hướng dẫn này, chúng ta sẽ làm mạnh tập tin Sketch đó để làm cho nó dễ sử dụng hơn cho những người khác.
Bạn có thể có các đồng nghiệp muốn sử dụng tập tin của bạn hoặc có thể sử dụng cho các khách hàng. Dù bằng cách nào đi nữa, thì những cải tiến mà chúng ta thực hiện đối với tập tin đó có nghĩa là những người khác có thể mở nó, hiểu nó và sử dụng nó.
Tôi gợi ý bạn nên tiếp tục và đọc qua hướng dẫn ban đầu. Ít nhất, hãy tải tập tin Sketch cuối cùng để bắt đầu một cách thuận lợi và làm theo phần thứ hai này. Hướng dẫn này có nhiều mẹo và thủ thuật về Sketch, một số thủ thuật chuyên nghiệp ở đây đó, cũng như một vài plugin liên quan mà bạn phải tự mình thử.
User’s Manual
Điều đầu tiên mà chúng ta sẽ làm là thiết lập một trang mới. Theo cách gọi của tôi là "User’s Manual". Trang này sẽ là hướng dẫn nhanh về cách sử dụng các yếu tố biểu đồ tiến trình. Chúng ta sẽ sử dụng nó để giải thích vai trò của từng yếu tố, cách sử dụng chúng và cách thao tác các thuộc tính của chúng như điểm bắt đầu cho các mũi tên.
“How to Use the Arrows”
Chúng ta sẽ bắt đầu với một bản vẽ mới, tôi gọi nó là “How to Use the Arrows”. Bấm A để tạo một Artboard mới và từ góc phải trên cùng, chọn Paper Size và Letter. Sketch sẽ tự động đặt bản vẽ có kích cỡ phù hợp cho bạn (điều này cũng hiệu quả với các kích cỡ màn hình máy tính để bàn và màn hình di động!).
Tôi muốn người dùng mới hiểu một vài điều, bao gồm cách chọn một dòng và đặt nó trên một bản vẽ, cách thay đổi hình dạng của nó và cách thay đổi điểm bắt đầu và điểm kết thúc của nó. Cách bạn giải thích những điều này là tùy chọn của bạn; các mô tả và hướng dẫn cụ thể tùy thuộc vào bạn. Tôi đã củng cố các mô tả của mình bằng cách bao gồm một vài ảnh chụp màn hình.
Tổ chức các phong cách văn bản (Text Styles)
Cũng như với các phong cách biểu tượng hoặc layer, chúng ta cũng có thể sắp xếp các phong cách văn bản. Đối với các trang hướng dẫn này, tôi có ba phong cách văn bản khác nhau, H1, H2 và body.
H1 của tôi là Helvetica Neue, Regular, kích cỡ 24px với chiều cao giữa các dòng là 30px. H2 là Helvetica Neue, Bold, có kích cỡ 14px với chiều cao giữa các dòng là 20px. Phần nội dung là Helvetica Neue, Regular, kích cỡ 12px với chiều cao giữa các dòng 20px. Cả ba phong cách văn bản này đều sử dụng màu #325372.
Chúng ta có thể sử dụng cú pháp tổ chức của Sketch để có được các phong cách này được tổ chức trong trình đơn thả xuống. Tôi đã đặt tên cho chúng như dưới đây, mà bạn có thể thấy được phản ánh trong menu thả xuống ở trên:
- Manual texts/Headline/H1
- Manual texts/Headline/H2
- Manual texts/Body
Tôi thích điều này - nó làm cho các tập tin Sketch của tôi có tổ chức nhiều hơn!
“How to Use the Annotations”
Trang tiếp theo trong hướng dẫn sử dụng sẽ nói về các chú thích. Để tiết kiệm thời gian, hãy sao chép trang của mũi tên và chỉnh sửa văn bản và hình ảnh để phản ánh chú thích. Đối với các chú thích, chúng ta cần đề cập các vấn đề sau: thêm vào một trang, chọn một chú thích khác và thay đổi kích cỡ khác.
Nút tự động thay đổi kích cỡ
Trong hướng dẫn ban đầu, chúng ta đảm bảo rằng các chú thích Action and Label có thể thay đổi kích cỡ lại theo thủ công với các thuộc tính gốc của Sketch. Tuy nhiên, nếu bạn muốn sử dụng plugin tuyệt vời để thực hiện thay đổi kích cỡ cho mình, tôi có thể đề xuất tải và sử dụng Rebel Button hoặc Paddy không?
“How to Use the Page”
Cuối cùng, tôi sẽ thêm một trang cho “How to Use Pages”. Tôi đã bao gồm các hướng dẫn mặc định về cách thêm trang vào bảng vẽ cũng như cách thay đổi văn bản "trang chủ" mặc định.
Mẹo: nếu bạn cần đặt chính xác các yếu tố của mình, hãy chọn một yếu tố và nhấn Option trên bàn phím của bạn. Khi chuột di qua các yếu tố khác trên bảng vẽ, các chỉ báo sẽ đặt lại chính xác các khoảng cách pixel giữa chúng.
Style Guide
Điều tiếp theo chúng ta cần thiết lập là hướng dẫn về phong cách. Tôi đã tạo một trang mới và tôi đã gọi nó là "Style Guide". Giống như bất kỳ hướng dẫn phong cách nào khác, điều này có nghĩa là giới thiệu cho người dùng các phong cách khác nhau được sử dụng trong tập tin đó. Trong hướng dẫn về phong cách, tôi sẽ đề cập về màu sắc, kiểu chữ và các phong cách layer - bao gồm các phong cách đường mũi tên (không đứt nét so với đứt nét).
Màu sắc
Trong thiết kế ban đầu của biểu đồ tiến trình, tôi đã sử dụng chín màu khác nhau, vì vậy hãy tạo một bản vẽ mới chỉ dành cho chúng. Đặt tất cả các màu sắc trên trang này và đặt tên cho chúng. Những thứ tuyệt sẽ xuất hiện sau đây!
Tạo và tổ chức các phong cách màu
Bây giờ tôi sẽ thêm các màu sắc này làm phong cách. Sử dụng trong trường hợp có bất cứ ai muốn tùy chỉnh các màu sắc ưcủa các yếu tố khác nhau mà họ có thể.
Đầu tiên, cú pháp: Styles/Colour/{Colour name}. So, Styles/Colour/Error red hoặc Styles/Colour/Background blue. Khi bạn đã thêm xong, hãy xem và chiêm ngưỡng cách sắp xếp gọn gàng mà các màu đó xuất hiện trong trình đơn Layer Style thả xuống! Ngoài ra, bạn có thể thấy rằng có nhiều phong cách vẫn còn tồn tại từ hướng dẫn gốc. Chúng ta sẽ tổ chức chúng một chút sau này.
Lý do đầu tiên cho tất cả các màu sắc được đặt ra là để hiển thị những gì đang được sử dụng (như hướng dẫn phong cách). Lý do thứ hai là để dễ dàng làm lại màu sắc. Điều đó sẽ không áp dụng cho tất cả các yếu tố khác nhau được sử dụng (chẳng hạn như văn bản) nhưng nó có thể dễ dàng ảnh hưởng đến những yếu tố chỉ có nền, ví dụ như chú thích Yes và No. Chúng ta sẽ cố gắng làm chính xác điều đó tiếp sau.
Tùy chỉnh màu sắc
Quay lại trang các ký hiệu. Tiếp theo, áp dụng cùng một phong cách mà chúng ta vừa tạo cho các yếu tố Action, Label, Yes và No. Bằng cách này, nếu bạn quyết định sẽ không còn muốn Yes có màu vàng mà là màu xanh lá cây, thì tất cả những gì bạn cần phải làm là cập nhật màu trong Style guide và tất cả các màu của Yes trong toàn bộ tập tin Sketch sẽ thay đổi màu sắc.
Màu tài liệu
Để làm cho luồng công việc của bạn dễ dàng hơn một chút, bạn có thể sẽ cần lưu các màu sắc của mình vào màu Document. Điều này sẽ giúp họ dễ dàng truy nhập mọi lúc.
Giữ cho các Artboards và Layers của bạn có tổ chức
Nếu bạn thích có tổ chức, tôi gợi ý bạn hãy tải xuống plugin Sort Me. Nó sắp xếp cả các layer và artboard, theo thứ tự abc và theo số đếm (hoặc ngược lại). Dưới đây là một số nguồn tài nguyên hiệu quả khác cho Sketch:
Efficiency Tips for Working With Sketch Artboards and Layers
Speed Up Your Sketch Workflow With Runner
Typography
Hướng dẫn phong cách tiếp theo mà chúng ta cần tạo là phong cách chữ. Chúng ta muốn hiển thị tất cả các phong cách văn bản trong tài liệu này và tôi muốn chia chúng thành hai loại, văn bản tài liệu (chẳng hạn như trong hướng dẫn sử dụng và hướng dẫn về phong cách ở đây) và những văn bản trong các biểu đồ tiến trình.
Sắp xếp lại các phong cách văn bản
Bây giờ tôi muốn chỉ cho bạn thấy cách tổ chức lại Text Styles hiện tại của bạn và đổi tên chúng (nếu cần). Từ menu Text Style thả xuống, chọn tùy chọn cuối cùng Organize Text Styles… Điều đó mở một cửa sổ mới được lấp đầy với mỗi Text Styles của bạn. Nếu bạn bấm đúp vào một phong cách, bạn có thể đổi tên nó. Tôi muốn bạn đổi tên chúng như sau:
- Default text > Flow diagram texts/Action
- Label text > Flow diagram texts/Label
- Notes > Flow diagram texts/Notes
- Page text > Flow diagram texts/Page
- Manual texts/… > Document texts/…
Tôi cũng muốn bạn đổi tên tất cả ba “Manual texts” thành “Document text”. Chúng ta đã tạo những cái tên ban đầu với ý định chỉ sử dụng chúng trong tài liệu User’s manual, nhưng kể từ đó chúng ta đã thêm hướng dẫn phong cách làm cho quy ước đặt tên không còn chính xác nữa. Như bạn có thể thấy, đổi tên phong cách văn bản rất đơn giản. Nếu bạn viết sai chính tả tên hoặc quy ước đặt tên của bạn cần phải được cập nhật, nó chẳng khó khăn gì đâu!
Mẹo: biểu tượng dấu trừ nhỏ [-] ở góc dưới cùng bên trái sẽ xóa phong cách đã chọn. Nhưng hãy cẩn thận: không thể hoàn tác và nó sẽ không hỏi nếu bạn có chắc chắn hay không.
Cập nhật phong cách văn bản trong hướng dẫn phong cách để cập nhật phong cách chữ trong toàn bộ tập tin (giống như với màu sắc).
Shared Styles trong yếu tố còn lại
Đây sẽ là bản vẽ cuối cùng trong phần hướng dẫn về phần phong cách. Ở đây chúng ta sẽ đề cập về các làm lại màu và xử lý các yếu tố còn lại, biểu tượng trang, và biểu tượng chú thích quyết định. Chúng ta sẽ đề cập về các mũi tên cuối cùng, ngay sau khi hoàn thành phần phong cách được chia sẻ.
Sắp xếp các phong cách layer được chia sẻ
Nếu bạn nhìn lại phần màu sắc, bạn sẽ nhớ rằng chúng ta đã có một vài phong cách bổ sung mà tôi đã nói rằng chúng ta sẽ sắp xếp sau. Vâng, bây giờ chính là lúc đó! Ý tưởng này hoàn toàn giống với việc tổ chức các phong cách văn bản. Chọn để sắp xếp phong cách layer; bạn có thể đổi tên, sắp xếp và xóa tất cả giống như với phong cách văn bản.
Đối với các phong cách layer, tôi muốn bạn giữ lại từng thứ của Style / Color /… mà chúng ta đã tạo trước đây. Sau đó, đổi tên phần còn lại như sau:
- Action bg > Background/Action
- Arrow - Dotted > Arrow line/Dotted
- Arrow - Solid > Arrow line/Solid
- Label bg > Background/Label
- Page > Background/Page
Mẹo: nhấn phím Tab không điều hướng xuống danh sách các tên phong cách giống như nó sẽ đi xuống danh sách lớp. Thay vào đó, trong cửa sổ này, phím Tab làm cho tên của phong cách được chọn có thể chỉnh sửa được hoặc không. Chuyển đổi nó một hoặc hai lần để xem chính xác những gì tôi muốn nói!
Bạn nhớ biểu tượng trừ [-] mà tôi đã đề cập trước đây? Đó là để xóa các phong cách. Tôi cần bạn xóa nền xám Background gray. Đó là một phần còn lại từ lần khám phá thiết kế ban đầu của tôi và không được sử dụng ở bất cứ đâu.
Cuối cùng, đóng cửa sổ lại, chọn nền của Decision Annotation và chọn Create new Layer Style từ menu thả xuống. Đặt tên phong cách mới là “Background/Decision”. Chúng ta sẽ tiếp tục và điều chỉnh các phong cách này ngay bây giờ, quay lại trang hướng dẫn phong cách. Sao chép các hình nền từ Decision Annotation và các yếu tố Page.
Thêm và cập nhật Shared Layer Styles
Quay trở lại trong hướng dẫn phong cách, dán hai hình nền vào Arrows và bản vẽ các yếu tố. (Tôi sẽ chỉ sao chép qua Page và Decision Annotation.)
Chỉ để cung cấp cho bạn một ví dụ thực tế về việc thay đổi phong cách và cập nhật nó một cách phổ thông, tôi muốn chúng ta tiếp tục và thay đổi phong cách nền của Decision Annotation. Đó là lý do tại sao tôi đã tạo một Layer Style riêng cho nó, vì vậy nó sẽ không ảnh hưởng đến Action Annotation. Thay đổi nó thành bất cứ điều gì mà bạn muốn, nó không cần phải phù hợp với thiết kế. Thêm đường viền 1px với màu bạn chọn và màu nền mới.
Khi bạn đã hoàn tất, từ menu Layer Style thả xuống , chọn Update Layer Style. Nếu bạn vào trang biểu đồ tiến trình ví dụ hoặc quay trở lại trang ký hiệu, bạn sẽ thấy các phong cách đã được cập nhật. Đó là một ví dụ tuyệt vời về các phong cách cập nhật đang hoạt động. Đó chính là điều bạn mong đợi sẽ xảy ra nếu bạn cập nhật tài liệu cho phong cách thiết kế mới, chẳng hạn như các màu sắc thương hiệu khác nhau.
Mẹo: nếu bạn thay đổi phong cách của một yếu tố với một phong cách lớp cho nó, bạn có thể đưa nó trở lại phong cách gốc bằng cách chọn Reset Layer Style.
“Arrows, Line Styles, Start and End Points”
Được rồi, chúng ta đang đi qua phần cuối cùng và tất cả về các mũi tên! Tôi để lại điều hay nhất sau cùng. Điều quan trọng sẽ nói trước tiên, chúng ta sẽ cần thêm các mũi tên vào hướng dẫn phong cách của chúng ta. Ngay bây giờ chúng ta chỉ có một loại mũi tên để sắp đặt. Tuy nhiên, nếu bạn nhớ trong quá trình làm sạch phong cách layer, chúng ta đã có một đường liền nét và một đường đứt nét. Hãy thêm các mũi tên đứt nét vào bộ sưu tập của chúng ta.
Tạo Mũi tên đứt nét
Trong trang ký hiệu, tôi muốn bạn sao chép mũi tên đầu tiên, Arrow/Default/Right, và đổi tên nó thành Arrow/Dotted/Default/Right. Chọn dòng của mũi tên và từ Layer Styles thả xuống chọn Arrow line sau đó là Dotted. Và chính là nó đấy! Chúng ta đã có mũi tên đứt nét đầu tiên của chúng ta.
Chúng ta còn hai điều nữa. Đầu tiên, hãy tiếp tục và đến với các mũi tên còn lại. Vào tên quy ước Arrow / Dotted / ... để có menu thả xuống Symbols được tổ chức tốt. Nói về các quy ước và cú pháp tên, điều thứ hai bạn nên làm là đổi tên từng cái một của các mũi tên liền nét ban đầu. Các Symbols thả xuống sẽ bị lộn xộn nếu bạn không làm như vậy.
Sử dụng plugin Rename It Sketch để làm cho nó mượt mà hơn cho bạn! Chọn Plugins > Rename It > Find and Replace Layers/Artboard Names. Hoặc bạn có thể nhấn Control +Option + Command + R để cửa sổ plugin xuất hiện. Ở đó, gõ vào Arrow / Default hoặc Arrow / S-Shape và thay thế bằng Arrow / Solid / Default và Arrow / Solid / S-Shape và cứ tiếp tục như vậy. Đảm bảo rằng Search Scope được chọn vào Current Page thay vì Layer.
Điểm bắt đầu và kết thúc
Điều cuối cùng khi nói đến các mũi tên là điểm bắt đầu và kết thúc. Trong hướng dẫn đầu tiên, tôi đã chỉ cho bạn cách thêm các ví dụ khác nhau, như một đường viền. Thêm bao nhiêu phong cách theo tùy thích của bạn, sau đó, khi bạn đã hoàn tất, đừng quên bao gồm tất cả các điểm bắt đầu và điểm kết thúc mới và tuyệt vời trong hướng dẫn phong cách này.
Và với điều đó, chúng ta đã hoàn thành việc tạo hướng dẫn về phong cách!
Kết luận
Mục đích của hướng dẫn này là phát triển bản gốc và hướng dẫn cho bạn những cách tuyệt vời hơn để sử dụng Sketch. Đồng thời, điều này sẽ cho thấy một số cách thực tế để cải thiện và đính kèm tất cả các tập tin Sketch của bạn để làm cho chúng dễ sử dụng hơn cho các thành viên nhóm và khách hàng.
