<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          如何更好的設計圖標?優先注意這些容易被忽略的細節

          2022-5-18    seo達人


          圖片

           

            風格

          常見的圖標風格有線性、面性、彩色、寫實、3D等,圖標的選用因頁面的設計風格、圖標的位置等原因會有所差異,主要的作用是反饋動作和吸引用戶更多注意力。

          線形/面性:最基本也是做常用的風格,廣泛用在頁面設計中。

          彩色:通常用于反饋用戶的操作或者增加用戶的注意力。

          3D/寫實:當頁面中的某哥內容需要引起用戶高度注意時使用,一下抓住用戶的視線。

          圖片

          Tips: 現在字節、百度新推出的一些年輕化產品中,有很多精致的3D寫實圖標,極具個性,很好地迎合了年輕用戶的喜好。在扁平風格流行的當下,這樣的嘗試也是一種突破。

           

          重量

          簡單的線性圖標重量輕,看起來更簡約,不會給頁面帶來太大的視覺負擔。比如當頁面中已經有很豐富的圖片和內容,那么更適合選用簡約的、重量輕的線性/面形圖標,防止頁面過于雜亂。

          相反,如果當前的頁面中只有文字,信息量很少,那么更適合利用重量大的彩色甚至3D圖標來增加頁面的豐富性,讓頁面看起來更有設計感,給用戶帶來視覺上的愉悅,簡約而不簡單。

          圖片

           

          屬性

          構成圖標的元素包括描邊的粗細、端點的方圓、圓角的大小、色彩的輕重等,表達式規則是統一的,以便只給觀看者識別圖標所需的最小更改。

          圖片

          描邊粗細:手機上常用到的描邊粗細有2px、3px、4px。2px的看起來會顯得更加精致,4px的描邊視覺較重,可以用在優先級較高的區域作為功能性圖標,。

          端點/節點:圖標的端點有平頭、圓頭和方頭,圖標的節點有斜接連接、圓角連接、斜角連接,具體使用哪種樣式要根據頁面的情況統一設置。

          圓角半徑:方形的圖標邊角過于鋒利,用戶有時候看起來會不舒服,圓角圖標更圓滑,相對來說更容易讓用戶接受。雖然圓角用的更普遍,但具體使用哪種,還是要考慮頁面的整體風格再決定。

           

          網格

          圖標的外形有圓形、方形、三角形甚至不規則形狀的,所以我們很難將不同形狀的圖標尺寸完全統一。

          這個時候網格就起到很關鍵的作用,有了網格相當于提前將圖標限定范圍,在網格范圍內根據圖標的重量和重心靈活調整大小,這樣會讓不同形狀的圖標看起來更統一。

          圖片

           

          視覺校正

          由于設計軟件的局限性,雖然有些圖形已經居中對齊,但有時候還需要進行視覺校正。

          最典型的圖標案例是“播放”圖標,利用設計軟件對齊中間的三角形后,會發現三角形的位置看起來偏左。

          利用軟件對齊后,我們還需要再用眼睛確認一遍,我們可以將三角形向右移動,保證三角形的重心與圓形的重心一致,這樣整個播放圖標看起來會更舒服。

          圖片

            

          角度

          設計圖標時,我們的第一反應是不帶透視的二維圖形。因為我們觀看手機的視角都是平視,所以大多數的圖標都沒有透視,看起來會更簡潔。

          帶透視的圖標會給用戶營造一種空間感,可能會感到認知失調。雖然這種帶透視的圖標能引發用戶關注,但不建議這么設計。

          圖片

           

          比例

          圖標比例通常使用8的倍數作為基準,例如8px、16px、24px和32px,以便在各種環境中進行流暢地切換。除此之外,在移動端等屏幕尺寸較小的頁面中,還會使用4px的倍數,來實現多功能性。

          圖片

           

          清晰

          圖標的設計要使用用戶能夠快速理解的且最簡潔的元素。圖標的尺寸通常很小,要盡可能做到對用戶友好,可以使用一些簡單的隱喻設計,但含義不能過于復雜。

          一個圖形能說明的問題,沒必要再添加多余的圖形。復雜的圖標可能需要花費用戶很長時間才能理解它們的含義,這樣反而會影響用戶的操作。

          圖片

           

          細節

          這一點和剛才說到的圖標清晰道理一樣。圖標最重要的目標是快速傳遞信息,特別是對于尺寸很小的系統圖標,最好只保留最基本的內容,移除多余的裝飾元素。

          圖片

           

          一致性

          這里說得一致性,并不是指一個產品中所有頁面都只能使用一種圖標風格。一個產品有很多頁面,線性、面性等多種圖標風格可以一起使用。

          但在同一個頁面場景中,執行相同功能的圖標應該保持相同的樣式。

          圖片

           

          熟悉感

          面對不同的操作系統,例如iOS和Android,同一功能對應的圖標也會有差異。針對不同的系統,我們可以選用大多數用戶熟悉的圖標,這樣用戶能更快地理解圖標的含義

          圖片

           

          最后

          以上就是常用卻容易忽略的圖標設計細節,希望通過這些內容能幫助你對圖標設計有更深的認識。

           

          原文地址:Clip設計夾(公眾號)

          作者:Clippp

          轉載請注明:學YUI網》如何更好的設計圖標?優先注意這些容易被忽略的細節

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務、

          UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、UI咨詢、用戶體驗公司、軟件界面設計公司


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合