Trong nội dung bài viết trước, bọn họ đã tò mò về hiệu ứng thị giác trong giao diện fan dùng. Ở nội dung bài viết này, glaskragujevca.net sẽ thuộc bạn nghiên cứu và phân tích sâu hơn phương pháp để tạo ra icon tối giản cho giao diện bạn dùng.Cùng bắt đầu nhé!
1. Sử dụng khối hệ thống lưới thị giácIcon hình ảnh thường xấp xỉ bằng một hình cơ bản: hình chữ nhật ngang, hình chữ nhật dọc, hình chữ nhật chéo, hình tròn, hình tam giác, hình vuông.Khi làm mờ đi hầu hết hình này, bọn họ thấy bọn chúng có size bằng nhau.
Bạn đang xem: Icon hướng dẫn sử dụng
Tùy thuộc vào hình trạng icon, chúng sẽ tiến hành đặt vào một khung lưới mắt tương ứng.Ví dụ, các icon hình vuông vắn sẽ bé dại gọn hơn các icon hình tam giác.
Icon càng nhỏ dại gọn thì sẽ càng cần ít không gian.Icon có nhiều cạnh hoặc cụ thể càng nhỏ, thì nên cần nhiều không gian hơn.
Một điều lưu giữ ý, bắt buộc hạn chế nhờ vào vào lưới thị lực – bởi vì nó dùng làm hỗ trợ, chứ không hẳn để hạn chế.Nếu icon có trực quan tốt với một vài yếu tố nổi bật, hãy để chúng xuất hiện.
2. Lưu ý đến lưới pixelĐể làm cho những icon sắc đẹp nét trên màn hình không tồn tại lưới, hãy gắn chúng nó vào lưới pixel và thiết lập đường viền là 2 pixel đối với icon line.Đường viền tất cả 2 pixel và căn giữa sẽ đủ độ dày và sắc nét.
Nếu các bạn chọn mặt đường viền 1 px cho những icon, chúng buộc phải ở bên phía ngoài hoặc bên trong và không được căn giữa.
Vì con đường viền 1 pixel khi căn giữa sẽ khiến cho icon không được rõ ở tỷ lệ 100%, mặc dù nó dường như sắc nét nếu như bạn phóng to.
Đặt điểm bắt đầu và điểm xong của đường chéo theo lưới pixel.Các đường chéo cánh với các góc 45°, 30° và 60° trông sắc đẹp nét hơn đường chéo với các góc ko đồng đầy đủ như 13,7° hoặc 81°.
3. Giữ cụ thể ở một mức tuyệt nhất định
Tốt hơn hết là nên bắt đầu với phần lớn icon phức tạp nhất.Việc này sẽ xác định mức độ cụ thể và làm cho các icon bao gồm cùng trọng lượng thị giác.
Khi các icon có các mức độ cụ thể khác nhau, thì icon nhiều cụ thể sẽ duyên dáng sự chăm chú của người tiêu dùng nhiều hơn.
4. Kiểm soát và điều hành khoảng giải pháp tối thiểu
Khoảng biện pháp giữa những phần tử lân cận của icon ko được quá nhỏ tuổi hoặc mâu thuẫn nhau trong suốt toàn thể icon.Xác định khoảng cách tối thiểu cùng thống nhất để tránh việc đường viền “dính nhau”.
Đối với các icon line, cực tốt là làm cho cho không khí tối thiểu bởi với độ dày của đường line.Các con đường line nên được bóc tách biệt hoặc kết nối đúng đắn và rõ ràng, ko được dính cạnh bên vào nhau.
5. Xóa các thành phần lặp lại
Trong bộ icon, chúng ta có thể lược giảm các cụ thể lặp lại để triệu tập sự chú ý của người xem vào đông đảo gì khác biệt.Việc này y như bài tập buổi tối giản vào toán học.Bạn thấy càng ít chi tiết đồ họa, thì sự tập trung của người tiêu dùng càng rõ ràng.
Nếu bạn đã sở hữu được fan dùng phương châm thì không phải lặp lại điều này nhiều lần.Ví dụ: tránh các icon phong bì, bởi vì nó sẽ khiến cho mọi tín đồ nghĩ đấy là ứng dụng email.
Quy tắc này cũng liên quan đến các yếu tố khác – khung, hình nền – bao bọc icon.Tuy nhiên điều này có hai mặt: hay là đoán được chân thành và ý nghĩa của icon, hoặc là làm khó việc hiểu ý nghĩa sâu sắc mà nhà xây cất truyền đạt.
6. Chọn 1 phong biện pháp nhất định và xuyên suốtTính đồng hóa về phong cách sẽ giúp người dùng phân biệt các icon và hiểu rõ rằng chúng gồm tầm đặc trưng hoặc trạng thái tương tự nhau.
Nguyên tắc này cũng được áp dụng với các icon line với icon solid.Nếu bạn phối kết hợp chúng với nhau, fan dùng rất có thể nghĩ rằng chúng có tầm quan trọng hoặc trạng thái không giống nhau.Tất nhiên, trừ khi chúng ta cố tình mong điều đó.Ví dụ, icon solid là dành riêng cho hiệu lệnh chính, và những icon line là cho những hiệu lệnh khác.
Thật tuyệt nếu tất cả cả hai biến hóa thể của mỗi icon vào giao diện.Icon line – mang đến trạng thái bị loại bỏ hóa hoặc thông thường.Icon solid – đến trạng thái được nhấp.
7. Sử dụng hệ thống 2-based sizing
Lưới 8 pixel và bố cục tổng quan 12 cột được sử dụng cho các giao diện, chúng linh hoạt hơn so với xây đắp dựa trên số thập phân.12 rất có thể được phân chia cho 2, 3, 4 với 6. Vày vậy, các size icon 24 hoặc 48 pixel đã trở thành tiêu chuẩn.Các icon này rất có thể được phóng to nếu cần size lớn hơn.
8. Giữ lại hình dáng rõ ràng và chủ yếu xác
Hoàn hảo không phải là mục tiêu, nhưng vấn đề này rất đặc biệt quan trọng đối cùng với các kiến thiết mang tính thiết yếu xác, nó hỗ trợ cho icon không trở nên bóp méo trong sản phẩm cuối cùng.Hãy ghi nhớ con số các điểm neo (anchors) về tối thiểu với các khoảng cách giữa các phần tử lân cận.
Sẽ thật phiền hà nếu họ đặt icon sinh sống các kích cỡ “8.999 px” hay “100.001 px”.Vì khi những điểm neo của mẫu thiết kế được đặt chính xác, các cạnh của icon sẽ trông sắc nét.Và chúng sẽ bị dư thừa quá nhiều chi tiết và khoảng tầm trống khi chúng ta hợp nhất các hình dạng.
9. Tinh chỉnh và điều khiển SVG
Nhiều phần mềm kiến thiết giao diện như Sketch hoàn toàn có thể tạo SVG với các phần không quan trọng như những nhóm, những lớp màu sắc và những mặt cắt.Còn lại những thứ vào Sketch gần như ổn.
Mở SVG này trong một trong những phần mềm khác (ví dụ, Adobe Illustrator).Bạn sẽ phân biệt các lớp trống, những nhóm và mặt phẳng cắt dư thừa.Tất cả điều này hoàn toàn có thể gây ra vấn đề khi lập trình sẵn viên frontend đổi khác các icon thành iconfont hoặc sử dụng SVG bên trên trang web.
Bạn rất có thể xóa hầu như thứ không quan trọng này và lưu lại.
Bạn sẽ thấy file Sketch SVG (picture.svg) và Illustrator SVG (picture_new.svg) tất cả các phiên bản xem trước khác biệt trong trình coi tệp.Bạn cũng có thể loại bỏ những sản phẩm công nghệ dư thừa của một icon trong phần mềm chỉnh sửa code.Nếu bạn biết code SVG trông như thế nào, thử xóa thẳng chuỗi dữ liệu không đề xuất thiết.
10. Icon không phải với “đũa thần”
Điều hiển nhiên, tất cả các khuyến nghị trên không phải là luật hay là không thể phá vỡ.Hãy bỏ lỡ chúng nếu như bạn biết mình bắt buộc làm gì.Dưới phía trên có tối thiểu hai trường hợp, những icon hình học với tính chính xác sẽ chưa hẳn là lựa chọn giỏi nhất.
Trạng thái trống.Nếu nhiều người đang tạo screen trạng thái trống như “Không tất cả tác vụ nào” hoặc “Tất cả email đã đọc”, tốt hơn là minh họa chúng bằng những icon cảm hứng hoặc chỉ để văn bản.Icon cảm hứng có thể làm cho những người dùng thoải mái, trong khi các icon hình học vô cảm sẽ không thêm bất kỳ giá trị như thế nào vào tương tác.Mascots (linh vật) và minh họa.Nếu giao diện của người sử dụng có linh vật hoặc màn hình ra mắt được minh họa, dạng bối cảnh này sẽ đưa về nhiều cảm xúc.Chúng ta sẽ không còn biết làm nạm nào để một nhà thiết kế hoàn toàn có thể mô tả một nhân vật bởi sự lựa chọn số lượng giới hạn của những thiết kế và đính với một khối hệ thống lưới.Xem thêm: Ý Nghĩa Cây Mộc Hương Phù Hợp Tuổi Phong Thủy Nào? Cây Mộc Hương Phù Hợp Tuổi Phong Thủy Nào
Và một điều nữa.Hãy luôn luôn đặt thắc mắc – liệu bạn thực sự nên icon trong trường hợp ví dụ này?Đó có phải là cách tốt nhất để giải quyết vấn đề không?Cần làm gì để sở hữu một văn bản có ý nghĩa?Nếu không, các icon cân nặng bằng, đáng yêu hay xu hướng sẽ làm đa số người thuyệt vọng và mọi cố gắng nỗ lực sẽ vô ích.