Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Style Guides
Webdesign

Chỉ dẫn nhanh: Cách sử dụng Zeplin để tạo ra Style Guide

Difficulty:BeginnerLength:ShortLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Trước đây chúng tôi đã khái quát cách các nhà thiết kế có thể cộng tác với nhóm phát triển bằng cách sử dụng Zeplin, nhưng nó còn có nhiều hơn thế; Zeplin còn là một công cụ tuyệt vời để tạo ra Style Guide. Nó đảm bảo nhóm của bạn tạo ra những trải nghiệm thống nhất bằng cách có một Style Guide luôn được cập nhật và mọi người có thể truy xuất từ bất cứ đâu.

Nó cho phép bạn lưu và đổi tên phông chữ và thông tin màu sắc, và thậm chí còn xuất ra CSS. Tính năng Style Guide và Inspect sẽ tiết kiệm rất nhiều công sức khi gần đến giai đoạn QA (Kiểm tra chất lượng). Hãy nhanh chóng xem nó hoạt động như thế nào!

Thêm Style

Đầu tiên, chọn một màn hình từ bảng điều khiển dự án.

Sau đó chọn các phần thử có thuộc tính mà bạn muốn thêm vào Style Guide (ví dụ: chọn tiêu đề H1 để thêm phông chữ, màu sắc và kích thước của nó vào).

Tiếp theo, hãy di chuyển chuột qua công cụ inspector và tìm biểu tượng Aa+, nó sẽ xuất hiện gần các phong cách văn bản để thêm chúng vào tập hợp phông chữ.

selected titles properties in zeplin
Tiêu đề và các thuộc tính của nó được chọn trong công cụ Inspector

Thêm các màu sắc theo cách tương tự. Nhấp vào biểu tượng giọt nước bên cạnh mỗi cái để xây dựng bảng màu của bạn:

same deal with colours
Làm tương tự với màu sắc

Style Guide của bạn

Xem Style Guide hiện tại của bạn, chọn tab thứ hai Styleguide ở trên cùng của trang:

Tất cả các phần tử được thêm vào trước đó sẽ ở đó. Bây giờ bạn có thể vào đó và đặt tên thích hợp cho từng cái. Để làm điều này, di chuyển chuột lên tên của màu mặc định và nhấp vào để thay đổi nó.

Lưu ý: sử dụng tên và quy ước đặt tên quen thuộc với toàn bộ thành viên của nhóm:

Thực hiện tương tự với phông chữ: cập nhật chúng với một tên mà các nhà thiết kế và phát triển thường dùng. Đừng quên là bạn không chỉ đang giúp chuyển giao cho nhà phát triển, mà còn tạo ra một kho lưu trữ cho các nhà thiết kế để sử dụng.

Cuối cùng bạn sẽ có được những thứ như thế này:

Xuất ra

Lúc này, nếu bạn tham gia quá trình phát triển, bạn có thể muốn sao chép mã CSS ở cột phía bên tay phải. Bạn sẽ tìm thấy những cú pháp mà bạn yêu thích; Sass, LESS, Stylus hoặc CSS thuần tuý.

Mỗi luật css có thể được chọn riêng ra để tải về, trong khi đó, nhấn Command + A sẽ chọn mọi thứ để có thể sao chép và dán.

Kết luận

Không còn nữa những Style Guide không được cập nhật được lưu ở một nơi nào đó mà không ai có thể tìm thấy, không còn phải chuyền tay hoặc email để tìm ra màu sắc mới nhất; Zeplin có thể giúp toàn bộ nhóm của bạn thiết kế một cách hiệu quả. Chúc mừng công việc với năng suất cao!

Advertisement
Advertisement
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.