国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

圖標設計,你需要了解這些...

2021-4-12    ui設計分享達人

本文目錄

  • 圖標風格匯總

  • 圖標設計流程

  • 案例講解

  • 圖標資源輸出



01 常見圖標風格匯總

  • 線性

  • 面型

  • 線面



1、線性

  • 單色

  • 雙色

  • 漸變

  • 不透明度

  • 一筆成形

  • 斷點



1.1單色

單色線性擁有簡潔、清晰的特性,在視覺層級上較低,適用于基礎功能圖標。b端較為常見,移動端常見在設置頁面或導航欄通知、分享等圖標設計上。 


1.2雙色

雙色線性在單色的基礎上豐富配色,解決了單色線性原本過于單調的問題,在提升趣味性的同時,也將視覺層級進行了提高,同樣適用于基礎功能圖標。在使用過程中需要注意的是豐富的配色會偏向年輕化,需要考慮是否符合產品風格及主流目標用戶審美。 



1.3漸變

線性漸變還可以在用色上進行區分,簡潔的用色可以給人帶來科技、炫酷感,在車載ui中較常見。豐富的漸變配色則更適合運營入口設計,有著年輕化、熱烈的氛圍。 



1.4不透明度

線性雙色可以和不透明度風格進行很好的比較,前者視覺更跳躍,個性更鮮明。而后者在使用時普適性更強,即豐富配色細節,又避免視覺過于跳躍(可以把它理解為同類色配色)。所以在大多數使用場景下,不透明度風格都是一個很好選擇。 



1.5斷點

斷點風格有線性單色&雙色該有的個性,并且在線性雙色基礎上繼續提升趣味性,使用需要注意產品目標人群年齡段。 



1.6一筆成型

該風格設計感和個性都極強,很考驗設計師對造型繪制的把控,功底不夠就很容易導致設計后出現識別問題。所以設計難度較大,且延展性較弱,難以表達復雜語義,使用需謹慎。



2、面性

  • 單色

  • 雙色

  • 不透明度

  • 晶白

  • 磨砂玻璃

  • 等軸側(2.5d)

  • 漸變

  • 新擬態

  • 輕質感

  • 明暗質感

  • 寫實

  • 抽象

  • 卡通插畫

  • 像素風格



面性與線性的區別在于前置視覺面積更大,整體視覺層級比線性高。下面部分和線性風格重疊的內容就不贅述。




2.1單色



2.2雙色



2.3不透明度

面型不透明度風格,通過調節前后不透明度可以帶來較強的空間感,使用場景較廣泛。



2.4晶白

晶白嚴格來說也算質感圖標(白色質感)的一種,常見于品類圖標設計,通過透明度、投影、漸變等參數調節,使整體立體感和空間感都很強。



2.5磨砂玻璃

又叫毛玻璃風格,是通過背景模糊,或剪切模糊圖層的技法來表達通透、有層次、精致的視覺感受,但由于容易與淺色背景相融,造成對比度不足難以識別的問題,所以在使用中需要注意無障設計。



2.6等軸側

也叫2.5d,有很強的趣味性,及識別度,適合重要入口或運營設計。但這類風格較為卡通,且表現花哨。使用需要注意應用場景及目標人群年齡段,避免干擾信息閱讀和不符和產品風格。



2.7漸變

這類風格可以很好的吸引用戶注意力,在電商、美食類產品中較常見,主要注意配色干凈協調。



2.8新擬態(Neumorphism)

新擬態圖標色彩相對單一,與背景融合度較高,通過高光、投影表現一定的立體感。通常是整個產品就是新擬態風格時才使用。所以該風格局限性較大,再有這類風格與背景對比較弱,無障設計問題較大。



2.9輕質感

通過大量漸變、投影來表現立體感,整體風格偏年輕化,常見在教育類產品中,使用注意配色干凈和諧。



2.10明暗質感

通過調節同一色相不同明度、飽和度來營造前后空間感,整體風格統一。


2.11寫實

這類圖標特點很明顯,有極高的識別度,目前美團外賣品類區入口就是該風格,整體偏年輕化。主要考驗設計師造型繪制、技法表現能力。



2.12抽象

通過幾何圖形組合、色彩使用來表達美的視覺感受。這類圖標藝術(裝飾)價值更大,不追求識別度,美觀即可。



2.13卡通插畫

這類風格既可以做圖標又可以做空狀態插圖,設計美觀有特色即可。



2.14像素風格

這類移動端界面較少見,目前只在一個海外電商產品(Jollychic)中看過,還有就是一些像素游戲中,比如「泰拉瑞亞」、「我的世界」。



3、線面

  • 線面

  • 描邊插畫



3.1線面

和線性雙色圖標類似,趣味性較強,具備個性化特點,可以做Tab選中狀態。 



3.2描邊插畫

類似卡通插畫,在卡通插畫基礎上加入描邊。同樣顏色,在一些特定的前后交接處利用線條做區分,算是多一種設計表現形式,同樣美觀有特色即可。 




4性格

  • 粗線

  • 細線

  • 圓角

  • 直角



4.1粗線

力量感、穩重、男性等感受



4.2細線

品質感、精致、女性化 



4.3圓角

安全、親和、年輕



4.4直角

嚴謹、正式、果斷利落 

由于圖標風格繁多,所以以上列舉并不包含所有圖標風格。



02 圖標設計流程

  • 明確語義

  • 關鍵詞詳解發散

  • 確定風格

  • 提取造型

  • 創意輸出



1、明確語義

圖標存在的目的是起引導作用,在豐富頁面視覺的同時,幫助用戶更快的獲取信息(當然圖標的使用意義還有很多)。設計師在將文字翻譯成圖標前,必須先理解其文字含義。因為最終呈現的圖標,需要用戶一眼能準確反翻譯其中含義(藝術抽象、裝飾類圖標除外)。

在C端設計中,以Tab為例,一些常見文案:首頁、分類、發現、我的,這類語義還算比較清晰的。但在B端設計或工具類APP中就會遇到一些復雜語義。以我的工作來說,目前在做一款網站搭建工具,后臺常會需要設計組件及對應的圖標,比如:滑動商品、多圖列表、上拉圖文列表這些語義比較復雜的圖標,在一定程度上會比較難精準傳達文案。



2、關鍵詞詳解發散

這一步有點類似情緒版使用,但不同的是:我們需要將確定的詞(A)進行詳細解釋,再將解釋文案中關鍵的詞語進行發散,得出一系列相關聯的詞(A1、A2、A3…)。有時間還可以根據這些詞找到對應的圖片,再看在這些相關聯的圖片中,有哪些細節可以傳遞最開始我們確定的那個詞(A)的意思。



3、確定風格

我們可以借助情緒版,根據產品定位和目標用戶描述,再結合應用場景,在目前已有的風格中找到符合產品氣質,符合當前模塊視覺層級的圖標風格。

前面我們已經了解了目前常見的圖標風格有三大類:線性、面型、線面,其中還有很多細分,比如在線性中又分粗線(沉穩、力量)、細線(品質)、曲線(女性化),還有圓角、直角,每種類型所傳遞的感受都不同。在創意前期,我們將每個點合理進行隨機組合(如下圖)即可創造一種更新穎的風格。



4、提取造型

經過關鍵詞詳解發散,其實我們已經獲得了很細節點,接下來將這些細節點進行合理融合后,就可以得到代表同一語義但形式各異的基礎圖標樣式(此時還只是想法階段,可以通過手繪方式記錄組合形式,不用特別精細化)。




5、創意輸出

在設計執行前我們需要先了解兩個大知識點: 
  • 圖標設計規范

  • 圖標設計注意點


5.1圖標設計規范

  • 常見圖標尺寸

  • 圖標盒子使用


5.1.1、常見圖標尺寸

在界面圖標設計中最常用尺寸:12x12、16×16、24×24、32×32、48×48(其他尺寸:64×64、96×96、128×128、256×256、512×512)



5.1.2、圖標盒子使用

什么是圖標盒子?其作用是什么?

圖標盒子即圖標約束網格,來源于Material design。使用圖標盒子有利于使我們創造的系列圖標保持規范與統一。



5.2圖標設計注意事項

  • 簡潔美觀

  • 易于識別

  • 細節統一

  • 像素對齊

  • 視覺大小一致

  • 飽滿透氣

  • 融入品牌基因



1、簡潔美觀

圖標是否美觀,會受設計師對圖標造型把控、圖標構成元素比例、配色等設計能力影響。在UI界面功能圖標設計中,通常會盡量減少不必要的細節,降低圖標復雜度,來幫助用戶快速識別。當然圖標也有豐富細節的做法,常見在一些重要運營入口上。



2、易于識別

識別度的問題,在最前面明確語義中就有提到過,這里就不贅述。



3、細節統一

在細節中包含:表現風格、描邊粗細、端點類型、圓角大小、斜角角度、配色、投影參數等(不同風格圖標的細節不同,這里只是列舉部分),上述細節在系列圖標中都應保持一致。



4、像素對齊

在圖標繪制中,需盡量避免坐標位置xy或寬高參數出現小數點,以此保證最終導出的圖標是清晰的。



5、視覺大小一致

由于不同圖標外輪廓不同,就會導致哪怕在物理大小上相同的圖標(假設都是24x24),但視覺上可能還是會給人大小不一致的感受,因此我們需要借助前面提到的圖標盒子進行約束調整。


6、飽滿透氣

圖標的飽滿透氣,不一定需要加入很多筆畫(描邊、裝飾等)細節。而是盡可能在形成風格的同時,簡化能影響識別度的關鍵筆畫,通過調節筆畫大小、長短、位置使圖標達到一個最平衡狀態。


以如下途牛_我的頁面_功能區圖標為例:

圖中標紅圖標就存在飽滿度不足,及內部較擁擠的情況,第一感受是看起來不舒適,品質感比較低。除此外,還存在如下問題:


  • 圖標大小很明顯不一致

  • 設計語言不統一,有圓角有直角

  • 圖標風格不一致,有透明度+分割形式(我的保單)、有純透明度形式(專屬顧問、我的收藏)、還有其余單色實心形式



7、融入品牌基因

在圖標中融入品牌基因可以有效的提升產品品牌感,作為高階設計師必備技能之一,常見提取維度:

  • 顏色

  • 設計語言

  • Logo輪廓 


以我之前的豆果美食項目為例,提取到如下細節:

顏色:提取黃色、綠色兩類顏色 
曲率(設計語言):品牌Logo走線順滑、自然、圓潤,個性鮮明 
分離(設計語言):黃色區域與綠色區域雖不相交,但存在聯系。(分離間留白) 


根據提取到的基因,最終得到如下兩套風格不同,但語言相同且都具備品牌感的圖標。


Logo輪廓:在圖標中融入品牌logo外輪廓(Google Play),或根據logo輪廓結合應用特性進行延展(Microsoft)。



03案例展示

就以途牛為例,對我的頁面功能圖標進行優化。 


1、明確語義

根據文案進行詳細翻譯,幫助我們充分理解文案。



2、關鍵詞詳解發散

以「專屬顧問」為例:

釋義:有專門的知識或經驗,受聘為機關團體或單獨個人提供專門咨詢的人。

提取釋義中關鍵信息,生成關鍵詞:專業專人,再根據關鍵形容詞發散一系列具象名詞。



3、確定風格

根據產品調性和模塊視覺層級以及考慮延展性,初步確定如下風格組合起來是比較適合:


線性:雙色、不透明度、斷點 
面性:單色、雙色、不透明度、輕質感、明暗質感 
線面:線面 


在實際查看中,發現Tab的風格為單色+不透明度+斷點風格。

為了和Tab拉開差異,最終確定以如下風格進行組合表現比較符合產品調性:

線性:雙色

面性:單色、雙色、不透明度、輕質感、明暗質感

線面:線面



4、提取造型

通過手繪或大腦想象進行造型構思,這里我就不展示手繪過程(行吧,我承認就是畫的太丑了不敢放)。



5、設計執行

由于不同風格對圖標造型構思有所影響,且圖標類型很多,不同特點組合起來樣式更多。案例精力有限,所以只以線性雙色風格做演示,希望大家靈活使用。


這一步就是將手繪圖形矢量化,在矢量化創意過程中,我們可能會對手繪的圖形進一步簡化細節或新增造型,這都很正常。只需注意在整個繪制過程中遵循圖標設計規范,以及注意圖標設計注意事項即可。

圖標盒子使用


創意輸出


Tips

在繪制造型時需注意,圖標文案詳解中的關鍵詞也有優先級,以如下「禮品卡」圖標為例,是表達禮品的意思多?還是表達卡的意思多?這個會影響圖標中相關元素的面積大小。站在商業角度看可能會更傾向于方案2,突出禮品,來吸引用戶。站在入口文案清晰傳達的角度,可能我會更傾向于方案1。 

1or2?


最后對專屬客服進行多風格嘗試,最終效果如下:


附上部分繪制過程中的淘汰稿:



04圖標資源輸出

在將圖標輸出給前端前,需要溝通好使用何種格式,目前常用圖標格式分為兩大類: 


矢量格式

  • SVG:縮放無損、體積小、支持前端樣式修改參數、單色情況下方便前端修改顏色來表達圖標狀態,減少重復上傳。


位圖格式

  • PNG:支持透明格式

  • JPG:兼容性強,適合大尺寸高飽和度圖像

  • GIF:動態圖標使用,缺點是透明情況下邊緣容易出現鋸齒。



這里主要介紹靜態圖標中,svg格式在工作中如何輸出給前端同學使用(借助iconfont)。


svg圖標交接方式:

1、圖標資源優化

在iconfont官方繪制指南中有描述,在導出前需要按如下規則優化圖標資源:



2、選中圖標導出svg格式

以Figma為例,優化圖標資源后,選中圖標將輸出格式選擇為導出svg。



3、上傳iconfont

在資源管理下,選擇需要上傳的位置。


選擇上傳圖標 



4、選擇顏色提交模式

去除顏色并提交:適合單色圖標,去除顏色提交可以方便前端使用代碼修改參數,減少不同狀態圖標重復上傳。

保存顏色并提交:適合多色圖標(注意:在單色情況下,選擇保留顏色提交,前端則無法通過代碼修改圖標顏色)。



最后當我們把圖標都上傳好后,就可以將前端同學拉入團隊項目中開心進行玩耍。

文章來源:站酷  作者:幺零三

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


日歷

鏈接

個人資料

藍藍設計的小編 http://paul-jarrel.com

存檔