Blog

Thiết kế giao diện người nhanh hơn với “biểu tượng” và “kiểu mẫu chung” trong Sketch.

Home / Blog / Thiết kế giao diện người nhanh hơn với “biểu tượng” và “kiểu mẫu chung” trong Sketch.

2 years ago Comment!

thiet-ke-giao-dien-trong-Sketch1

Trong bài hướng dẫn này, bạn sẽ sử dụng một thiết kế giỏ hang mua sắm điện thoại di động để thực hành hai tính năng rất quan trọng trong Sketch. Chúng ta sẽ chú ý đến “ biểu tượng “ và “phác thảo chung “.

Sketch biểu tượng

Biểu tượng cho phép bạn sao chép các thành phần thiết kế của bạn và được phép tái sử dụng chúng. Bất kỳ thay đổi nào của bạn sẽ được phản ánh trên tất cả các trường hợp của biểu tượng đó.

Để tạo ra một biểu tượng với một cụm các biểu tượng được chọn. Nhấn vào “ Create Symbol”

thiet-ke-giao-dien-trong-Sketch2

Có hai hướng dẫn quan trọng để sự dụng hiệu các biểu tượng. Đầu tiên, hãy đảm bảo rằng các biểu tượng không quá khó hiểu. Hãy lấy ví dụ về biểu tượng trên phần tiêu đề như hình dưới:

thiet-ke-giao-dien-trong-Sketch3

Bạn sẽ thấy phông nề, thanh trạng trái, các nhãn tiêu đề và biểu tượng, tất cả được hiển thị đầy đủ trong thư mục con trong phạm vị các biểu trượng trên “header-bar”.

thiet-ke-giao-dien-trong-Sketch4

Thanh tiến trình (the progress bar) sẽ không được bao gồm trong các thanh biểu tượng bởi vì thanh trạng thái nó thay đổi trên mỗi màn hình .

thiet-ke-giao-dien-trong-Sketch5

Việc thứ hai là để kiểm tra các tùy chọn không bao gồm các văn bản giá trị từ biểu tượng của mỗi lớp văn bản. Bằng cách này có thể chỉnh sửa văn bản trong những biểu tượng đôi trên nền tảng cá nhân.

thiet-ke-giao-dien-trong-Sketch7

Sketch phác thảo chung

Các “ shared styles” là tính năng thẳng về phía trước như “ biểu tượng”. Nó rất hữu ích về sự thay đổi cho sự xuất hiện của nhiều yếu tố qua biểu tượng khác nhau và các đối tượng chỉ trong lần nhấp chuột duy nhất. Hãy nhìn vào tiêu đề và thanh tiến trình một lần nũa. ở đây bạn có thể thấy thay đổi nền của thanh tiến trình nhưng nó vẫn chưa cân xứng với nền tiêu đề.

thiet-ke-giao-dien-trong-Sketch8

Để tránh việc thay đổi mỗi nền thanh tiến trình đơn bằng tay, có thể thiết lập môt phong cách chung. Ở đây, chúng ta đang áp dung kiểu header-gb mà tôi đã chuẩn bị trước đó, bằng cách nhấn “ create new shared “ cho đến khi thanh nền tiêu đề được chọn.

thiet-ke-giao-dien-trong-Sketch9

Kết luận

Với hai tính năng trên trong bộ công cụ của bạn, thiết kế ứng dụng giao diện người dùng của bạn trên Sketch sẽ tiết kiệm được thời gian hơn rất nhiều.

 

Categorised in:

Leave a Reply

Your email address will not be published.

*

*

Đang tải…