Biểu tượng thực hành tốt nhất

Các biểu tượng đã có một bản nâng cấp lớn trong Phác thảo 39. Chúng mạnh hơn rất nhiều so với trước đây và tất cả chúng tôi đều cố gắng tìm ra cách sử dụng chúng tốt nhất.

Có một phiên bản cập nhật của hướng dẫn này:

Tại Tradeshift, chúng tôi bắt đầu duy trì một tài liệu Phác thảo trung tâm với tất cả các biểu tượng của chúng tôi. Để được thêm vào tài liệu này, Biểu tượng cần phải vượt qua một vài kiểm tra chất lượng và tính nhất quán. Mọi người thiết kế cho chúng tôi sẽ sử dụng tài liệu này, vì vậy chúng tôi không muốn phân phối bất cứ thứ gì ngoại trừ các Biểu tượng tốt nhất của các thành phần UI chung của chúng tôi. Các biểu tượng nên hành xử theo cách tương tự, đủ nhỏ để được mô đun hóa, đủ lớn để hữu ích và được tổ chức tốt để dễ dàng chỉnh sửa (hoặc nhúng vào tài liệu khi tách ra).

Hy vọng rằng bạn sẽ thấy ý tưởng của tôi để tạo ra các Biểu tượng chất lượng tốt, nhưng đây chắc chắn là một tài liệu sống và tôi sẽ cập nhật nó khi chúng tôi chắc chắn tìm ra những cách tốt hơn để làm những việc phức tạp hơn. Tôi không hoàn toàn chắc chắn đây là cách tiếp cận hoàn hảo, nhưng tôi đã muốn bắt đầu một cuộc trò chuyện xung quanh chất lượng Biểu tượng.

Tạo các thành phần cơ bản nhất

Lý tưởng nhất là bạn không nên tách ra các Biểu tượng thường xuyên, bởi vì điều đó đánh bại mục đích. Tạo phiên bản cơ bản nhất của một thành phần, các Biểu tượng riêng lẻ mà bạn có thể kết hợp sau này để tạo ra một tổng thể dễ bảo trì hơn.

Ví dụ: tại Tradeshift, chúng tôi có một tab biểu tượng trông như thế này, nhưng bạn có thể thấy thành phần của chúng tôi cho phép bạn đặt một biểu tượng lên trên, bên ngoài Biểu tượng, sau đó cho phép bạn dễ dàng chuyển Tab sang chế độ Hoạt động / Không hoạt động mà không cần phải tách ra hoặc tạo quá nhiều biến thể của cùng một biểu tượng.

Thiết lập quy ước đặt tên

Đặt tên cho các lớp của bạn một cách thích hợp. Chúng tôi cố gắng và bám vào tất cả các chữ thường, cách nhau bằng dấu gạch ngang. Phác thảo tự động sắp xếp các Biểu tượng vào các thư mục khi bạn đặt một / trong tên.

Tôi đề nghị một quy ước đặt tên kiểm soát / xác định trạng thái. Các trạng thái mặc định không nên có một trạng thái - tab không hoạt động và tab hoạt động là không cần thiết. tab, tab-active là con đường để đi.

Thí dụ:

  • nút / màu chuột
  • tab / biểu tượng hoạt động

Pete Lacey đã nói rõ rằng những cái tên không nên gắn bó quá chặt chẽ với các thuộc tính vật lý của chúng, vì chúng có khả năng tiến hóa. Đối với chúng tôi, chúng tôi rất nghiêm ngặt màu xanh lá cây và màu xanh lam, vì vậy đó thực sự là tài sản xác định của họ. Nhưng có lẽ tiểu học, trung học, vv sẽ thích hợp hơn.

Khi sử dụng Sketch Runner, thiết lập quy ước đặt tên có nghĩa là bạn sẽ luôn có thể nhanh chóng tìm thấy những gì bạn đang tìm kiếm vì có một mô hình tổ chức phù hợp.

Nói chung, không ai thích thừa hưởng một tệp Phác thảo được tổ chức kém, vì vậy, hãy để Lôi không phân phối các Biểu tượng được tổ chức kém.

Sử dụng văn bản chung

Cung cấp cho các lớp văn bản giữ chỗ chung - không chỉ văn bản bạn đang sử dụng trong trường hợp sử dụng cụ thể mà bạn có khi bạn tạo Biểu tượng này. Văn bản giữ chỗ của chúng tôi cho các nút là HOẠT ĐỘNG HÀNH ĐỘNG NỀN TẢNG như một lời nhắc nhở thụ động về cách bạn nên diễn đạt vi mô của mình.

Đặt tên lớp thích hợp

Đặt tên cho các lớp thích hợp và phù hợp. Hình nền phải luôn được gọi là nền và không được trộn lẫn với bg, v.v. Hãy nguyền rủa bạn nếu bạn để nó có tên là Hình chữ nhật 100! Nếu bạn tách Biểu tượng, nó sẽ vẫn là một đối tượng gọn gàng và khép kín.

Văn bản đặc biệt quan trọng. Đảm bảo rằng các Biểu tượng mà bạn sẽ thường xuyên thay thế (nghĩa là với các Biểu tượng tương tự của các trạng thái khác nhau) có cùng tên lớp văn bản. Bạn có thể chỉnh sửa văn bản trong Biểu tượng trong trình chỉnh sửa ghi đè - nếu bạn thay thế Biểu tượng, nó sẽ duy trì văn bản trong Biểu tượng mới nếu nó có chung Tên lớp văn bản. Nó cũng hiển thị tên của lớp Văn bản, không phải nội dung, như định danh trường.

Thực hiện một hệ thống phân cấp sạch sẽ và nhất quán

Đặt bất kỳ văn bản có thể chỉnh sửa lên trên.

Nhóm gọn gàng và đảm bảo không có nhóm hoặc thành phần bổ sung nào không phục vụ mục đích (điều này có thể xảy ra nếu bạn dán vào biểu tượng, v.v.).

Các biểu tượng sẽ được tái sử dụng, tách rời và phối lại - chúng phải được tổ chức thực sự tốt, vì vậy bất cứ ai cũng có thể nhanh chóng hiểu được những gì diễn ra khi họ nhìn dưới mui xe.

Đảm bảo thay đổi kích thước chính xác

Chơi với các Biểu tượng của bạn, kiểm tra chúng và cố gắng phá vỡ chúng. Bạn nên đặt mục tiêu xây dựng một cái gì đó chống đạn. Thêm một vài phút thời gian của bạn để hoàn thiện Biểu tượng sẽ giúp giảm đau đầu và khiến các nhà thiết kế phải duy trì các tệp Phác thảo & Biểu tượng của bạn hài lòng.

Kiểm tra Peter Nowell từ thay đổi kích thước Cheat Sheet

Văn bản nên được sửa

Văn bản phải được cố định và căn chỉnh chính xác, để khi bạn thay đổi kích thước một biểu tượng, nó sẽ duy trì đúng vị trí và phần đệm của nó. Văn bản nên có một thuộc tính thay đổi kích thước đối tượng Thay đổi kích thước đối tượng.

Thiết kế phiên bản nhỏ nhất của Biểu tượng

Nó dễ dàng thiết kế xung quanh các biểu tượng kéo dài hơn là nén chúng.

Đối với chúng tôi, chúng tôi muốn tab có chiều rộng tối thiểu 99px, bất kể văn bản là gì. Vì vậy, phiên bản nhỏ nhất của tab rộng 99px và chúng tôi biết không làm cho nó nhỏ hơn nữa.

Đảm bảo các Biểu tượng bạn sẽ thay thế có cùng kích thước bản vẽ

Phác thảo sẽ thay thế một Biểu tượng bằng một Biểu tượng khác và nén / kéo dài Biểu tượng để phù hợp với cùng kích thước. Có lẽ điều này là có chủ ý, có lẽ nó là một lỗi - nhưng cuối cùng, bạn nên thử và tạo các Biểu tượng mà bạn sẽ thường xuyên trao đổi cùng kích thước. Nếu nó kéo dài chúng ra, bạn có thể sử dụng nhấp chuột phải-> Đặt thành Kích thước gốc để sửa nó.

Đánh tôi với ý tưởng và phản hồi! Tôi không hoàn toàn chắc chắn đây là cách tiếp cận hoàn hảo, nhưng tôi đã muốn bắt đầu một cuộc trò chuyện xung quanh chất lượng Biểu tượng.