如果使用得當,圖標會為您的UI 設計添加形式和功能。它們可以通過立即識別來加速用戶交互,還可以為您的用戶界面設計添加風格和視覺趣味。
使用圖標不需要很復雜。如果做得正確,即使是幾個放置得當的圖標也可以改善您的用戶體驗。在您的下一個UI 設計中實施它們之前,具有更高能力的上海企業vi設計公司為您準備的10個圖標設計規則。
1.保持圖標簡單
不要使您的圖標設計過于復雜。使它們盡可能簡單,尤其是在較小的尺寸時。最好的圖標是用戶可以立即識別的簡單形狀和象形圖。
2. 讓它們可識別
圖標應立即可識別。如果讓用戶想知道圖標的含義,它就違背了他們的目的。不要讓用戶想知道圖標應該是什么,因為這只會導致他們想知道圖標的目的是什么,從而損害整體用戶體驗。
3.賦予圖標意義
用于圖標的圖像應該具有易于理解的含義。含義應該與圖標的功能直接相關,例如主頁的房屋圖標。雖然隱喻有時很容易被用戶破譯,但更多文字圖標通??梢愿斓刈R別。
4.確保它們是可擴展的
圖標通常以小尺寸使用,但您可能偶爾會發現想要使用更大版本(甚至更小版本)的用例。出于這個原因,請確保您的圖標看起來不錯,無論它們顯示的大小如何。隨著尺寸變大,您可以逐漸使用更復雜的圖標,但請確保不要讓它們變得過于復雜。
5. 使圖標易于訪問
如果您沒有使用文本標簽來伴隨您的圖標,請確保您實現了正確的alt 標簽,以便使用屏幕閱讀器的人仍然可以訪問它們的功能。
與此類似,請確保您的圖標具有足夠的對比度并且尺寸足夠大以便可以訪問。您還應該確保圖標周圍的觸摸目標足以讓可能有精細運動控制問題的用戶仍然點擊預期區域。
6.注意顏色
作為一般經驗法則,圖標應該是單一顏色。此外,不要為每個圖標使用不同的顏色,除非它直接有助于使它們更有用。在大多數情況下,您可能會使用不同的顏色來指示活動圖標,而其余的則是另一種顏色。
7. 始終使用向量
具有更高能力的上海企業vi設計公司創建自定義圖標時,您應該始終以矢量圖像格式創建它們。這樣,它們可以輕松縮放而不會失去清晰度或脆度。保存它們以用于數字產品時,SVG 文件類型是最佳選擇,因為它保留了圖標的可伸縮性和透明度。
SVG 的下一個最佳替代方案是將它們保存為無損PNG 文件,因為它們將保持透明度并且質量不會下降。
8. 保持圖標統一
你的圖標在樣式和大小上應該是統一的。使用風格不一致的圖標會使用戶感到困惑,并使您的界面看起來很混亂。使用大小不同的圖標會產生類似的效果。
在尺寸方面,視覺重量比精確的像素尺寸更重要。
然而,在尺寸方面,視覺重量比精確的像素尺寸更重要。為此,您可以設計視覺權重較低的圖標,比較重的圖標稍大一些。
例如,比較星形和方形圖標。如果使它們具有完全相同的像素尺寸,則由于其更堅固的外觀,正方形實際上會顯得更大。通過將星星的手臂稍微延伸到正方形的尺寸之外,您可以創建看起來相同大小的圖標。請務必將它們放在相同尺寸的容器中,以便保持適當的放置和間距。
9. 優先考慮清晰
用戶不應該想知道圖標是什么,更不用說它代表什么了。確保您使用的圖像可以立即被用戶識別,并且他們不會試圖弄清楚您的圖標應該是什么。
您還需要確保您的圖標所代表的功能清晰。每當您使用通用圖標以外的任何東西時(我們稍后會介紹),請考慮添加文本標簽來解釋圖標的作用。它對新用戶非常有幫助,并確保用戶不會對不同圖標的作用感到困惑。
10.使用通用圖標
談到圖像學,不要試圖重新發明輪子。當然,獨特的創意圖標可以為您的用戶界面增添視覺趣味。但是,如果用戶不理解它們或它們難以破譯,那么您將損害整體用戶體驗。
對于常用功能,堅持使用人們識別的圖標。以下是具有更高能力的上海企業vi設計公司推薦的圖標示例:
主頁的房子圖標
三條水平線表示漢堡菜單
用于搜索的放大鏡
用于編輯或修改內容的鉛筆
豎起大拇指或喜歡某事的心
喜歡某事的心或星星
保存書簽的書簽
一個箭頭從廣場頂部出來,分享一些東西
向下指向正方形以下載內容的箭頭
用于設置的齒輪或齒輪
顯示某事的鎖定圖標是安全的
總監微信
復制成功
業務咨詢 何先生
業務咨詢 何先生