<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>

          首頁

          創造出眾的UI圖標:點亮你的界面

          天宇 圖標設計文章及欣賞

          在做產品設計的時候,UI界面更多是由設計師完成,產品僅是提供界面元素和布置,其他的由設計師發揮。但如果產品能了解更多設計相關的知識,在和設計師探討、分析時會更有針對性,也會讓產品的工作顯得更為專業。

          在當今數字化時代,我們與各種移動應用、網頁和軟件界面打交道,圖標就像是這些界面的明星。它們小巧玲瓏、獨具特色,扮演著連接用戶與界面的重要角色。本文將帶您深入了解UI圖標的定義、作用以及在用戶界面中的重要性。

          一、UI圖標的定義和作用

          A. UI圖標的定義

          UI圖標是指用簡潔明了的小型圖形符號來表示特定功能、操作或信息的設計元素。圖標通過簡單的形狀和圖像,向用戶傳遞信息和功能,并在界面中起到重要的導航和標識作用。

          B. UI圖標的作用

          • 提供快速識別:UI圖標能夠以簡單直觀的方式展示功能和操作,使用戶迅速識別界面元素,快速完成操作。
          • 提升用戶體驗:UI圖標能夠使界面更加直觀、友好和易于使用,用戶無需過多猜測,更加自信地與界面互動。
          • 增加品牌識別度:UI圖標承載著品牌形象,設計合理的圖標能夠提升品牌的識別度和記憶性,促進用戶與品牌的情感連接。

          C. UI圖標在用戶界面中的重要性

          UI圖標在用戶界面設計中扮演著不可或缺的角色,其重要性體現在以下幾個方面:

          • 導航和標識功能:UI圖標通過視覺上的差異化,幫助用戶快速識別和定位所需的功能模塊,提供直觀導航,減少操作復雜度。
          • 美觀和統一性:精心設計的UI圖標能夠增加界面的美感,提升用戶體驗。通過一致性的圖標設計,整個界面呈現出協調統一的視覺效果。
          • 信息傳遞效果:UI圖標通過形狀、顏色和圖像等視覺元素,能夠傳達具體的信息和功能,使用戶更容易理解界面的意圖和操作方式。
          • 增強品牌形象:UI圖標能夠將品牌形象融入到界面中,形成獨特的品牌風格和個性,幫助品牌建立與用戶的情感聯系。

          二、設計原則和要素

          UI圖標設計是用戶界面的重要組成部分,它們不僅可以幫助用戶更快地理解和使用應用程序或網站,還可以增強整體視覺效果。為了設計出高質量的UI圖標,設計師需要遵循一些基本原則和要素。

          A. 獨特性和可識別性

          設計具有獨特特征的圖標 UI圖標應該具有獨特的特征,使其能夠與其他圖標區分開來。設計師可以通過使用不同的形狀、顏色和風格來實現這一目標。同時,圖標的形狀和顏色也應該與應用程序或網站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          避免與其他圖標混淆 為了避免UI圖標與其他圖標混淆,設計師應該確保圖標的形狀、顏色和風格與其他圖標有足夠的區別。如果圖標的形狀和顏色與其他圖標過于相似,用戶可能會難以區分它們的功能和意義,從而影響用戶的使用體驗。

          B. 簡潔性和清晰性

          追求簡潔的圖標設計 簡潔的圖標設計可以幫助用戶更快地理解和使用圖標。設計師應該盡可能地簡化圖標的形狀和顏色,避免使用過多的細節和復雜的形狀。簡潔的圖標設計還可以幫助應用程序或網站的整體視覺效果更加統一和和諧。

          避免過度復雜化的細節 過度復雜化的細節可能會使圖標變得過于復雜和難以理解。設計師應該避免使用過多的細節和復雜的形狀,以確保圖標的簡潔性和清晰性。同時,設計師也應該確保圖標的形狀和顏色足夠明確,以便用戶能夠輕松地識別和理解圖標的功能和意義。

          C. 一致性和統一性

          維護整個UI界面的一致性風格 UI圖標應該與整個UI界面的風格保持一致。設計師應該確保圖標的形狀、顏色和風格與應用程序或網站的主題和品牌形象相一致。這樣可以幫助用戶更快地識別和理解圖標的功能和意義,同時也可以增強應用程序或網站的整體視覺效果。

          使用相似的線條、顏色和風格 為了實現一致性和統一性,設計師應該使用相似的線條、顏色和風格來設計圖標。這樣可以使圖標與整個UI界面的風格保持一致,同時也可以使圖標的形狀和顏色更加和諧統一。

          D. 可視化傳達

          明確圖標所代表的含義和功能 為了確保用戶能夠輕松地理解和使用圖標,設計師應該確保圖標的形狀和顏色能夠明確地傳達

          使用適當的形狀、符號和顏色傳達信息 為了確保圖標能夠明確地傳達信息,設計師應該使用適當的形狀、符號和顏色。

          例如,一個圖標可能需要使用一個圓形作為基本形狀,同時使用一個代表性的符號來表示它的功能和意義。

          同時,設計師也應該確保圖標的形狀和顏色與應用程序或網站的主題和品牌形象相一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          E. 可縮放性和適應性

          使用矢量圖形實現圖標的可縮放性 為了確保圖標在不同屏幕和設備上的可用性,設計師應該使用矢量圖形來實現圖標的可縮放性。

          矢量圖形是一種基于數學公式的圖形,它們可以在不失真的情況下進行任意大小的縮放。

          這意味著:即使圖標被放大或縮小,它們的形狀和顏色也不會發生變化。

          確保在不同屏幕和設備上的可用性 為了確保圖標在不同屏幕和設備上的可用性,設計師應該考慮圖標在不同分辨率和屏幕尺寸下的表現。

          例如,設計師應該確保圖標的大小和形狀適合不同屏幕和設備的顯示。

          同時,設計師也應該確保圖標的顏色在不同的屏幕和設備上都能夠保持一致,以幫助用戶更快地識別和理解圖標的功能和意義。

          三、設計流程和技巧

          UI圖標設計需要遵循一定的流程和技巧,以確保圖標的高質量和可用性。

          以下是一些常用的設計流程和技巧:

          A. 需求分析和功能定義

          在開始設計之前,設計師需要了解UI圖標的使用場景和目的。這可以幫助設計師確定圖標所代表的含義和功能,以確保圖標的準確性和可用性。

          B. 創意和草圖階段

          在進行創意和草圖階段,設計師應該進行創意思維和頭腦風暴,以產生出多種不同的設計方案。同時,設計師也應該從簡單的草圖開始構思圖標設計,以確保圖標的可行性和可實現性。

          C. 細化和完善設計

          在細化和完善設計階段,設計師應該使用矢量工具進行圖標設計,并重點關注細節和清晰度的提升。這可以幫助設計師創建出具有獨特特征的圖標,并確保圖標的可縮放性和適應性。

          D. 反饋和優化

          在反饋和優化階段,設計師應該向用戶和團隊收集反饋,并根據反饋進行圖標的優化和調整。這可以幫助設計師確保圖標的準確性和可用性,并根據用戶的需求和期望進行調整和優化。

          四、設計最佳實踐和案例研究

          UI圖標設計是一個重要的設計領域,它可以幫助用戶更快地理解和使用應用程序或網站。以下是一些成功的UI圖標設計案例和分析。

          A. 探索成功的UI圖標設計案例

          成功的UI圖標設計案例可以幫助設計師了解和學習一些設計最佳實踐和技巧。成功的圖標有很多以下只列舉兩個圖標設計案例:

          1. Airbnb圖標:Airbnb是一個在線旅行房屋租賃平臺,它的圖標設計非常簡潔和具有代表性。Airbnb的圖標設計使用了一個圓形的形狀,并使用了一個代表性的符號來表示它的功能和意義。同時,Airbnb的圖標設計也非常簡潔,它只使用了少量的顏色和形狀,這使得圖標非常易于理解和使用。
          2. Apple的App Store圖標:Apple的App Store圖標采用了一個簡單明了的大字母”A”,代表了應用程序。這個圖標的設計借鑒了蘋果公司的品牌風格,采用了簡潔、現代的風格,使其在界面中易于辨認。

          B. 分析圖標設計背后的原理和決策

          成功的UI圖標設計案例背后都有一些共同的原理和決策。

          以下是一些分析圖標設計背后的原理和決策的方法:

          • 了解用戶的需求和期望:設計師應該了解用戶的需求和期望,并根據用戶的需求和期望進行圖標設計。這可以幫助設計師創建出更加符合用戶需求和期望的圖標,從而提高圖標的可用性和易用性。
          • 遵循一致性和統一性原則:設計師應該遵循一致性和統一性原則,使用相似的線條、顏色和風格來設計圖標。這可以幫助設計師創建出具有一致性和統一性的圖標,從而提高圖標的可視化傳達和可用性。
          • 避免過度復雜化的細節:設計師應該避免過度復雜化的細節,追求簡潔的圖標設計。這可以幫助設計師創建出更加簡潔和易于理解的圖標,從而提高圖標的可用性和易用性。

          五、最后

          A. 總結UI圖標設計的重要性和原則

          UI圖標在用戶界面中扮演著重要的角色,它們不僅能夠傳達信息和功能,還能夠增強用戶體驗和界面的美感。以下是一些重要的UI圖標設計原則:

          • 簡潔明了:使用必要的元素和形狀,避免過度復雜化的細節。
          • 可識別性:使圖標獨特、清晰、易于辨認,以便用戶快速理解其含義。
          • 一致性:與品牌風格相匹配,確保整個界面的視覺統一性。
          • 可擴展性:使用矢量圖形制作圖標,以便在不同尺寸和分辨率下保持清晰度。
          • 用戶反饋和測試:收集用戶的意見和建議,進行測試和調整,以提升圖標的質量和效果。

          B. 鼓勵設計師繼續探索和發展圖標設計技能

          圖標設計是一個不斷發展和演進的領域。鼓勵設計師們繼續學習、實踐和探索,通過不斷嘗試新的技術和方法,提升自己的設計能力。以下是一些建議:

          • 深入研究:學習不同的圖標設計風格和趨勢,深入了解各種設計工具和技術,保持對設計領域的持續學習。
          • 觀察和啟發:注意身邊的圖標設計,從成功的案例中汲取靈感,拓寬自己的設計思維。
          • 反饋和合作:與團隊和用戶溝通交流,接受他們的反饋和建議,與其他設計師合作分享經驗和知識。
          • 認識目標用戶:了解目標用戶的需求和偏好,將其融入到圖標設計的決策中。

          UI圖標設計在用戶界面中起著重要的作用。通過掌握設計原則和實踐技巧,繼續學習和發展設計技能,我們將能夠創造出令人印象深刻的UI圖標作品,提升用戶體驗和界面美感。不斷探索和挑戰自己,成為一名卓越的圖標設計師!

          本文由 @Esc 原創發布于人人都是產品經理,未經許可,禁止轉載

          題圖來自 Unsplash,基于 CC0 協議

          該文觀點僅代表作者本人,人人都是產品經理平臺僅提供信息存儲空間服務。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan

          畫圖標,我是認真的

          天宇 圖標設計文章及欣賞

          對于 UI 設計師來說,圖標設計的能力至關重要,也是提升感官體驗的重要方向。對于一些初入行業的設計師,習慣下載圖標素材應付項目需求,失去了動手能力培養的機會。甚至一些多年工作經驗的老司機,依然還擺脫不了使用素材的習慣,稍微復雜一點的技法就會難以駕馭。

           

          1. 切勿過度素材化

           

          對于初入職場的設計師來說,偶爾運用素材可以理解,但是一定要學會拆解和分析,掌握還原設計的技巧和能力。

           

           

          過度依賴素材容易導致思維固化,不愿意去創造,失去創新設計的能力;也容易導致眼高手低,有想法卻實現不出來,極容易萌生放棄的念頭;素材拼貼形式完成的設計,在規范性和細節性上面也是大打折扣的,導致設計作品不夠精細化和規范性。

           

           

           

           

           

          2. 刻意練習強化

           

          我們需要通過刻意練習來提升圖標設計的能力,根據一萬小時定律,技法層面的提升都是通過反復磨練達到的。

           

           

           

           

           

           

          3. 擺脫素材才能規范化

           

          圖標設計從素材習慣過度到設計動手其實很容易,但是從會畫到畫好之間看似簡單卻很難掌握。擺脫素材是圖標設計規范化的關鍵,然后再統一風格和細節規范,掌握數字化關系也是需要我們反復研究的課題。

           

           

           

           

          比如以這個天氣圖標來舉例,相信很多同學都能畫出來,但是有沒有把控里面的數字關系就難說了。通過以下示意圖我們可以看出來,大圓和小圓之間的比例關系是 4:3,而間距的關系也與圓形的大小有著數字關系。這些數字關系可以使得圖標設計更加精細化,也能引導我們去探索設計背后量化的標準和關系。

           

           

           

           

           

           

          4. 質感的層層強化

           

          當我們繪制完圖標的造型之后,運用合適的風格進行質感強化也是尤為重要的。這里我先運用其中的一個風格來完成,選擇了磨砂玻璃質感的效果。為了質感和層級關系更加明顯,這里單獨對局部進行了光影強化和邊界處理,看看以下步驟拆解圖感受一下。

           

           

           

           

          備注:運用的軟件功能是背景模糊,Sketch 或者 Figma 等軟件皆可實現。

           

           

           

          5. 延展界面場景

           

          為了進一步強化圖標練習,延展了一個簡單的界面場景,一個由宮格布局組合成的界面設計。為了填充所需的內容,先把之前的一些圖標作品放進去占個位置。雖然都是質感一類的圖標,但是由于透視、配色、風格和細節規范等不一致,整體還是存在一定的排斥感。

           

           

           

           

           

           

          6. 根據界面環境重新調整

           

          由于界面設計屬于深色主題,之前練習的天氣圖標放入場景中顯得過于突出,而且玻璃質感的通透性沒有得到很好的發揮。于是根據界面環境對天氣圖標進行了重新調整,以深色關系調整了云朵部分,針對太陽的配色和尺寸比例也進行了調整,如以下效果圖。

           

           

           

           

           

           

          7. 延續風格補全設計

           

          以調整后的天氣圖標作為風格規范,延續了其它業務場景的圖標設計,在透視關系、細節規范、配色比例和光影效果等方面進行了直接延續。在光影方向上面選擇了縱向區分,左邊三個選擇左上角打光,右邊三個選擇右上角打光。(當然也可以統一一個方向設置光影)

           

           

           

           

           

           

          8. 統一性還是差異化

           

          完成的整體設計視覺風格雖然比較統一,但是也有一些問題存在。圖標之間缺少差異化,過度統一容易視覺疲勞,于是在統一性和差異化上面開始糾結了。

           

           

           

           

          為了既保障圖標設計表達的統一性,又能形成視覺感的差異化,做出了調整配色關系的決定。根據天氣圖標的配色關系延續出了其它色系,看看最終的效果如何。

           

           

           

           

           

           

          你喜歡哪一版?

           

          關于統一性和差異化因人而異,在朋友圈征集意見也是各有差異,那么你會喜歡哪一版呢?歡迎留言區一起互動交流。

           

           

           

           


          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTQyOTA5Ng==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          常見的 10 大圖標設計風格

          天宇 圖標設計文章及欣賞

          圖標是產品中不可或缺的部分,隨著設計趨勢的不斷變化,圖標設計風格也在不斷豐富。在產品中會出現哪些常見的圖標設計風格呢?結合產品案例體驗,今天黑馬哥為大家簡單梳理一下,列舉出常見的 10 個圖標設計風格。
          常見的 10 大圖標設計風格
           
           
           
           
          1. 線性功能圖標
          線性功能圖標是產品中最常見的風格,設計時控制好圖標規范即可。常見的多為單色(無彩色系、品牌色等),也有用品牌色作為點綴色的案例。
          常見的 10 大圖標設計風格
           
           
           
           
          2. 面性功能圖標
          面性功能圖標與線性風一樣,也是產品中最常見的風格。有單色單圖形、多色疊加風、微漸變風格等表達形式。
          常見的 10 大圖標設計風格
           
           
           
           
          3. 磨砂玻璃質感圖標
          磨砂玻璃質感圖標是輕質感的表達形式之一,也是近些年較為流行的趨勢??梢员馄揭部梢晕①|感,在立體感圖標上面也可以運用這類效果。
          常見的 10 大圖標設計風格
           
           
           
           
          4. 微質感圖標
          微質感圖標相較于扁平化設計而言,更能突出細節的深入和真實感的體現。微質感圖標的層次感也更豐富,該技法也是設計師的必備技能。
          常見的 10 大圖標設計風格
           
           
           
           
          5. 晶白風圖標
          晶白風圖標常用于金剛區欄目,利用白色不透明度關系和背景色關系進行圖標設計,圖標質感、層次感、空間感等都能得以體現。
          常見的 10 大圖標設計風格
           
           
           
           
          6. 立體感圖標
          立體感圖標分為 2.5D、偽 3D、3D 建模等形式,特別是隨著三維設計趨勢的普及,立體感圖標的運用也逐步普及,也可以利用 AI 工具完成該類型圖標。
          常見的 10 大圖標設計風格
           
           
           
           
          7. 插畫風圖標
          插畫風圖標是插畫風格的簡化融入,以此提升圖標設計的特征感,使得圖標具備差異化的視覺效果,也能烘托出整體設計的質量。
          常見的 10 大圖標設計風格
           
           
           
           
          8. 主題化圖標
          主題化圖標設計風格多樣,會結合活動主題或者節日慶典等內容,根據主題設計圖標更能體現產品溫度。
          常見的 10 大圖標設計風格
           
           
           
           
          9. 寫實類圖標
          寫實圖標是以技法表現實物特征,比較考驗質感表現、透視光影等技法能力。隨著扁平化趨勢,寫實類設計逐步被淡化,但是也有部分產品會局部性運用。
          常見的 10 大圖標設計風格
           
           
           
           
          10. 實物圖圖標
          直接將產品實物圖作為圖標相對較少,但是依然有產品會選擇使用,還原其內容表達的真實性。
          常見的 10 大圖標設計風格
           
           
           
          以上為產品中常見的圖標設計風格,根據不同需求采用。對于設計師而言,這也是首先需要掌握的圖標技能。
           
          本文由 @黑馬青年(heimaui)原創發布。未經許可,禁止轉載。

          作者:黑馬青年
          鏈接:https://www.zcool.com.cn/article/ZMTYzMDg3Mg==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          圖標設計能力怎么提升?

          藍藍設計的小編

          原創能力的提升,就是創建一個場景給自己出題再反復驗證自己的過程。而訓練和真實項目不同的是,真實項目往往操心的事情太多,時間還少,會造成很多思想上的負擔,所以兩者都有提升但類型不同。
          只有認識到圖標的重要性,并有自我驅動力去制定訓練的計劃,才能真正提升這部分能力。而它的附帶價值遠遠不止畫好圖標……

          超全!APP 圖標設計指南:從創意構思到視覺呈現的完美轉化

          藍藍設計的小編

          APP 圖標設計從創意構思到視覺呈現是一個系統而細致的過程,需要設計師充分理解應用的內涵與目標受眾,挖掘獨特的創意元素,并運用精湛的設計技巧將其轉化為具有強大視覺吸引力和品牌傳達力的圖標作品。只有這樣,才能在競爭激烈的移動應用市場中,讓我們的 APP 圖標成為吸引用戶的第一道亮麗風景線,為應用的成功推廣和用戶留存奠定堅實的基礎。

          一篇文章帶你秒懂圖標設計

          藍藍設計的小編

          從1973年第一代圖形用戶界面的呱呱落地到今天百家爭鳴,圖形用戶界面竟然已經走過了50年的發展歷程,更神奇的是,原來UI設計這個職業的起源也是因圖標的起源而起,后來圖標成了UI設計中最重要的視覺元素之一,接下來,我們一起走進圖標的世界,了解它神秘背后的故事。
           
           
          一篇文章帶你秒懂圖標設計
           
           
           
          目錄
          一、 圖標的起源
          二、 圖標設計的定義
          三、 圖標的種類
          四、 圖標設計8大原則
          五、 圖標的6大作用
          六、 提升圖標設計的4個小技巧
          七、 5個圖標網站推薦
          八、圖標的命名規范
           
           
           
          一、圖標的起源
          在計算機發展的早期,用戶界面主要是基于命令行的,由字母和數字組成,操作復雜且對普通用戶不友好,用戶需要記住大量的命令和參數才能使用計算機系統。
           
          隨著計算機技術的發展,為了使計算機更易于使用和理解,程序員開始開發圖形化的元素來代表各種操作和功能,圖標概念由此誕生。最初的目的是幫助新手用戶能夠更方便地組織文件和執行任務,而無需記住復雜的命令。
           
           
          1.施樂公司的開創性工作
          1973年,美國施樂公司推出了第一批真正意義上具有圖形用戶界面的個人電腦——Xerox Alto。雖然這款電腦僅生產了約 2000 臺,但它為后來的計算機圖形界面發展奠定了基礎。它的界面中已經出現了一些簡單的圖標,如垃圾桶、計算器、打印機、文件和文件夾等,這些圖標成為了后來圖標設計的雛形。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2.蘋果公司的推動
          1979年,史蒂夫·喬布斯參觀了施樂公司的原型機后,深受啟發,決定開發自己的圖形界面計算機。1983 年,蘋果公司推出了Apple Lisa,這是蘋果首臺圖形界面計算機,其界面中的圖標設計得到了進一步的發展。
          在這一時期,現代圖標設計之母蘇珊·卡爾擔任蘋果的創意總監,她設計的像素風格圖標簡潔、清晰、易于理解,具有很高的視覺平衡性,即使在今天看來也顯得活潑有趣。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3.微軟的跟進與發展
          1985年,微軟發布了 Windows 1.0操作系統,這是微軟在圖形用戶界面領域的重要嘗試。該系統中的圖標設計也借鑒了蘋果的一些理念,但也有自己的特點。隨著 Windows 操作系統的不斷發展和普及,圖標設計也逐漸成為了用戶界面設計中不可或缺的一部分。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          二、圖標設計的定義?
          圖標設計是一種設計活動,主要是創造出用于代表物體、動作、概念等各種元素的圖形符號。
           
          這些圖形符號具有簡潔性,讓人能快速識別。比如手機桌面上的微信圖標,用兩個對話氣泡的簡單圖案就代表了這個軟件,讓人一眼就能明白。圖標設計在很多領域都有應用,像軟件界面、網站、移動應用等,能夠為用戶提供視覺引導,方便用戶操作。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          三、圖標的種類
          圖標在提升產品氣質上起著不可估量的地位,在界面中往往起著畫龍點睛的作用,無法想象在一個產品中,沒有圖標,界面會顯得多么的無聊和乏味,但是圖標也不能總用一種形式的圖標,這樣也會百看讓人生厭,因此也就衍生了圖標的多樣性,以下是我整理的常見圖標類型:
           
          1、從視覺表現上,有以下12大類圖標
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、從功能上,有以下6大類圖標
          ?工具圖標
          工具圖標在B端項目中應用很廣泛,幾乎每個組件中都會包含這類圖標;比方說騰訊文檔上方的文檔編輯圖標就是屬于這種類型,它的裝飾性很小,更多是功能的承載。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ?裝飾圖標
          在一些軟件產品中,會重點強調品牌、情感化設計,大量啟用3D化的裝飾圖標來提升界面的質感。
          比方說騰訊電腦管家下面的這個界面設計,它就運用了大量具有裝飾性的圖標來傳遞信息表達品牌,并且中央還采用騰訊電腦管家的IP形象作為切入點,萌萌的形象無形中拉近了與受眾之間的距離。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ?啟動圖標
          在項目中,當用戶想表達品牌時,經常會把LOGO圖標做成動態圖,來更好的傳遞品牌理念,比方說聯想電腦管家,在啟動頁時,就運用了動態啟動圖標,同時下面還附帶了一個slogan的文字動效,很好的向用戶傳遞了安全的理念。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 進程提示圖標
          在軟件界面中,經常也需要進程的提示,這時候圖標就可以起到這樣的作用,比方說騰訊電腦管家在清理垃圾時,圖標里面的風扇就一直在轉,寓意當前清理工作正在進行中。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 狀態提示圖標
          軟件在運行過程中難免會出現bug或者內容為空的時候,這時候狀態提示圖標就尤為重要,可以大大減輕人們的焦慮情緒。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          ? 增加界面趣味性的圖標
          圖標不僅在理解和使用上給人們提效了,而且有時添加動效的圖標還能給人帶來絲絲驚喜和愉悅。
          比方說聯想的這個動態加載圖標,看著就很有趣,讓人忍不住多欣賞一下。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          四、圖標設計8大原則
          雖然現在AI盛行,很多酷炫的效果可以用AI實現,但是一些讓圖標看起來更加專業精致、耐看的秘密我們還是需要知道的,了解這些設計原則,我們可以事半功倍,當AI生產有偏差時,我們自己可以優化、修復和調整。
           
           
          1、大小統一
          圖標大小統一,就是一組圖標放置在一起,圖標大小要看起來差不多,不能忽大忽小,比方說這組圖標的第三個圖標,電腦圖標明顯過高,跟其他圖標放在一起就顯得不是那么的協調美觀和統一。
          一篇文章帶你秒懂圖標設計
           
           
          在大小統一這方面,我們記得就是幾何圖形它們有視覺差,有的時候并不是說尺寸一樣,大小就一樣了,比方說下面這組圖形,左邊的這組它們高度一樣,可是看起來大小并不太一樣,明顯中間的三角形顯得小;右邊的這組,三角形比左右兩邊的都要高,可是它們放在一起看起來大小就是差不多的,這就是幾何圖形帶來的視覺差,就是我們在做圖的時候,要記得多去感受,設計中的美很多不是用1+1=2能解釋清楚的,它就是一種感受,放下心中的浮躁,我們還是能感受到它們之間的區別,這種美也沒那么玄乎,只要用心,一定可以做出大小一致的圖標。
           
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
           
          2、圓角統一
          圓角統一,就是圖標之間有相同造型,然后又都有圓角的,那么他們就要保持相同的圓角曲度,比方說下面這組圖標,圖標的外形都是正方形且它們都帶有圓角,可是它們的圓角曲度卻明顯不一樣,這樣就看起了不夠規范和專業。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、風格統一
          界面中同樣功能的圖標,樣式和風格需要保持一致,比方說這組圖標樣式,風格就保持著高度的一致,都是用的玻璃質感的磨砂材質。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、角度統一
          這組扁平化圖標,在右邊相似的角度都疊加了一個小色塊,增加了圖標的層次感,相同的角度也增加了圖標的一致性和系列感。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、粗細統一
          圖標的粗細要統一,這樣圖標就會看起來比較精致,比方說下面的這組圖標,圖標外框線都是用的3px,圖標里面的線都是用的2px,圖標的粗細都保持一樣的粗細規律,這樣的圖標看著也是同樣的美觀和一致。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          6、疏密統一
          下面是一組類似于插畫風格的圖標,圖標的風格是布線比較密集飽滿,而三個圖標都遵循了這樣的原則,看起來出奇的統一,所以它們看起來像是一組成套圖標。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          7、透視統一
          當設計的圖標是立體時,要注意它們的透視要統一,就像下面的這組2.5D圖標,它們的設計透視就保持著高度的一致。
          一篇文章帶你秒懂圖標設計
           
           
           
          8、易識別
          圖標的優劣首先取決于其能否讓用戶一目了然地理解其代表的意義,這是很重要的圖標設計原則。
          下面的這組手機主題圖標,識別性就非常的高,簡潔且好理解。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          五、圖標的6大作用
          圖標在界面設計中扮演著至關重要的角色,它們遍布于應用程序的各個角落。無論是導航欄、工具欄還是標簽欄,亦或是首頁、詳情頁、個人中心頁,功能圖標都隨處可見。圖標的主要作用在于傳達信息,相比文字,它們能更直接地傳遞概念,并且能夠為用戶的視覺體驗增添樂趣。
           
          1、提升界面的使用效率
          功能圖標常以簡潔的圖形呈現,它們便于用戶識別和記憶。這種設計讓用戶能夠迅速定位到所需的功能,無需耗費時間閱讀文字說明或瀏覽冗長的菜單選項,大大提升了界面的使用效率。
           
          華為云的這個界面,文字信息很多,因為有了圖標的存在,人們尋找起來特別高效,能高效定位到想要的信息。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、增加用戶的滿意度
          圖標不僅可以提升界面使用效率,還能提升用戶的體感和滿意度,精美的圖標讓人看著都是賞心悅目的,就像我們在大街上看到一個美女,都忍不住多駐留一伙一樣。
           
          華為云這組精美的圖標動效就給了我很大的視覺享受,圖標設計精致,配色舒適,還有動效,給足了用戶滿足感。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、減少人們認知的成本
          圖標很多的造型都來源于生活,來源于我們熟悉的事物,在界面中運用我們熟悉的圖形會大大降低人們的認知成本,也會讓更多人產生共鳴,它的傳達作用不受語言和國界的束縛,是一種高效的界面表達語言。
           
          華為云的這組圖標就是運用了人們日常生活中非常熟悉的元素,共鳴感很強,人們學習和理解的成本很低。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4.提升品牌形象
          仔細觀察會發現,在生活中有很多的軟件產品,會把企業的LOGO融入到日常產品的圖標設計中,大大提升了品牌的一個曝光度。
           
          騰訊云就有這樣的小心思,它會把騰訊云LOGO融入到banner圖標設計中,傳遞了信息,同時也加強了品牌的曝光。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、圖標可以增加界面的豐富度
          有圖標的界面,頁面看起來豐富度更高,層次感更強,信息表達上也會更加的清晰整潔。
           
          360AI辦公這個界面之所以看起來這么豐富,很大原因是在于圖標的應用,界面中有大圖標、小型面圖標,還有線性小圖標,有對比,整個頁面就看起來豐盈了不少。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          6、減少界面的枯燥感
          千篇一律的文字,難免會產生枯燥感,讓人不愿多駐留;圖標多彩的配色以及Q萌的造型會讓人心生愉悅。
          佐糖的這個界面,若不是有圖標的潤色,光只有功能點和文字介紹,估計會乏味不少,但是有了多彩圖標的加入,瞬間氛圍感都熱鬧了不少。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          六、提升圖標設計的4個小技巧
          1、大量臨摹,刻意練習
          任何一項技能的獲得,最開始都離不開臨摹,作為剛接觸UI設計的職場新人,可以先從臨摹入手,先臨摹簡單的,然后循序漸進,臨摹難度大點的,這樣圖標設計能力也會慢慢提升。
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、多積累好的樣本
          想要繪制好看的圖標,首先要見過好看的圖標,所以我們日常要養成多收集好圖標好設計的習慣,這樣當面臨新的需求設計時,也不至于手忙腳亂,不知如何下手。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、學會分析
          看到好看的圖標設計時,我們要學會分析,這組圖標好,它好在哪,哪里打動了你,你分析了這些,你自己在設計的時候也會不自覺的運用到其中的智慧和思路,這樣我們就可以隨時原創出符合自己需求的圖標設計來。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、明確目標與受眾
          目標受眾不同,他們對圖形的期望也會不一樣,比方說在設計兒童產品界面和B端產品界面時,所用的顏色和形狀都是有考究的。
           
          兒童類產品的圖標設計,形狀會比較圓潤,色彩也比較多彩;但是B端類產品的圖標設計用色就會很克制,形狀也不會過于圓潤。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          七、5個圖標網站推薦
          1、Iconfont
          (https://www.iconfont.cn/)
          iconfont是阿里巴巴的圖標庫,應該也是受眾最多的一個圖標下載網站,給我們平時工作提效不少,造福了不少的設計師。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          2、IconPark
          (https://iconpark.oceanengine.com/)
          IconPark是字節跳動旗下的一款圖標下載網站,它可以在線把一個圖標實現多種風格的切換,線性、面線、線面結合,并且線的粗細大小可以調節,非常的方便。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          3、Ikonate
          (
          https://ikonate.com/
          )
          Ikonate是一款可以在線編輯的圖標網站,涵蓋了常用的一些圖標,可以調節線條的粗細和大小,導出的格式是SVG。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          4、Iconfinder
          (https://www.iconfinder.com)
          Iconfinder的優點,我覺得是造型夠豐富,滿足你有時候無法腦補的痛點。
          一篇文章帶你秒懂圖標設計
           
           
           
           
          5、Iconduck
          (https://iconduck.com/)
          Iconduck的優點是有273,858個免費的圖標庫和插畫庫供大家選擇,儲備夠豐富。
          一篇文章帶你秒懂圖標設計
           
           
           
           
           
          八、圖標的命名規范
          圖標一般有四種狀態,正常normal (nor)、高亮highlight (hig)、選中selected (sel)、不可用disable (dis)四種狀態,一個好的命名習慣會給自己的合作搭檔帶來很好的體驗,通常在寫界面的時候,前端都是用英文對元素進行命名的,這里我列舉一下我經常合作同事的一個命名規范,供大家參考:
          模塊-類別-功能-狀態
          例如:Nav_button_message_sel
           
          一篇文章帶你秒懂圖標設計
           
           
           
           
          總結:
          在深入探索了圖標設計的豐富世界之后,我相信大家未來能夠根據不同的場合挑選出恰當的圖標風格和樣式。通過持續的總結和歸納,我對圖標設計的理解也變得更加深刻。雖然這份總結可能還有待完善之處,請大家多多海涵,期待在下一篇文章中再次與大家相見。


          作者:姝斐suphie
          鏈接:https://www.zcool.com.cn/article/ZMTY0MDI2MA==.html
          來源:站酷
          著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。

          蘭亭妙微(www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢高端網站設計、平面設計,以及相關的軟件開發服務,咨詢電話:01063334945。我們建立了一個微信群,每天分享國內外優秀的設計,有興趣請加入一起學習成長,咨詢及進群請加藍小助微信ben_lanlan。

          優化UI設計規范:海外項目與國內產品設計規范及組件庫對比

          藍藍設計的小編

          基于海外組件庫的核心設計原則和特性:交互與反饋,視覺層次與信息密度,簡潔與功能性。我們為《myCommunity》項目的制定專屬規范,涵蓋按鈕,輸入框,卡片樣式,列表,圖標及主題定制換膚等相關組件庫。顏色的價值在于傳達品牌和情感,并增強可讀性。
          文字是信息傳遞的主要載體,標準化的文字設計有助于提升可讀性和一致性。
          我們不僅制定了文字規范,還升級了字體規范,新增了客戶指定的字體,并加入了沙特當地的阿拉伯語字體。

          超全面陰影設計指南

          藍藍小助手

          陰影設計在界面設計中扮演著至關重要的角色,它不僅能夠增強設計的立體感和層次感,還能有效地引導用戶的注意力,提升用戶體驗。
          陰影向左:
          當元素(如導航欄、抽屜組件或固定表格欄)位于屏幕右側時,向左的陰影能夠突出這些元素,并暗示它們是可交互或可擴展的。
          陰影向右:
          對于位于屏幕左側的元素(如導航欄、抽屜組件或固定表格欄),向右的陰影能夠吸引用戶的注意力,并強調這些元素的存在和重要性。
          陰影向下:
          陰影向下通常用于組件內部或組件本身,以營造立體感和層次感,這是界面設計中比較常規且有效的視覺處理方法。

          UI 設計的 10 個細節

          藍藍小助手

          俗話說:“細節決定成敗”,細節的把控至關重要,這也是設計師能力的代表。隨著項目經驗的積累和專業能力的成熟,我們對于設計原則、設計細節和設計經驗的沉淀也會越來越多,設計輸出也會因為這些細節而顯得更優秀。

          探究UI設計中形狀的創意與應用

          藍藍小助手

          在UI設計中,精美形狀設計的關鍵是深入理解用戶需求,注重細節,保持一致性,勇于創新,不斷提高技能水平。這樣才能創造符合用戶口味的界面,提升用戶體驗。簡潔地說,好的形狀設計來源于用戶需求、細節、一致性、創新和自我提升。

          日歷

          鏈接

          個人資料

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

          存檔

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