02 qq背景圖ins風文字(插畫類圖標-圖標類型和風格總結)

p>漸變帶出了圖標的質感,結合「不同深度」或「不同飽和度」的變化,讓圖標更具有細節和層次。

黑白+品牌色

黑白色作為主色調,結合品牌色作為點綴色。與常規的黑白圖標相比,既產生了變化,同時兼顧了品牌色的透出。

實際案例:大眾點評攻略頁面圖標

線性漸變

結合漸變的顏色,豐富了整個圖標的視覺表達,并提升了圖標的視覺沖擊力和設計感。案例結合黑白背景作為嘗試,白底:粗線比細線的視覺效果相對較好,漸變也能較為清晰地被表達;黑底:細線比粗線的視覺效果顯示得更加精致和具有銳度感。

實際案例:網易考拉、NAVER

一筆成形

此類圖標在視覺表達上具有較高的線性流暢度和設計感,關注點在于整組圖標的「開口起始點」設定上需保持一致。例如,「從左到右」或「從右到左」形成一體化的連貫線條,開口起始點不一致會影響整組圖標的一致性,應用在頁面時也會顯得雜亂。

斷點圖標

與上一種較為類似,但沒有連貫度的要求。在線形圖標基礎上面,尋找一個缺口來打破「全包邊圖標」的沉悶感,使得圖標具有透氣性和線條的變化。缺口的位置盡量保持統一的方向及大小,另外需要控制開口個數避免過多導致圖標外形過于零碎。

實際案例:騰訊體育、京東

面性圖標

面性圖標比線性圖標更能表達出圖標的力量感和重量感,比線性圖標會更加容易吸引用戶目光。在識別度上,面性圖標更加依賴于外輪廓的清晰度,因此在設計時對于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識別度。

1.面型圖標基礎分析及想法

輪廓對比

輪廓的差異會體現出不同的氣質,如下圖的左邊和右邊的區別,一個氣質較為直接硬朗,另一個則較為柔美可愛。流暢的外形可以讓面形圖標的整體更加簡潔、規整,如下圖中間的圖標在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。

鏤空對比

適當的鏤空除了補充了圖形的識別度之外,還提升了面性圖標的設計細節。另外需要控制好鏤空部分與整體的外形比例,過小或過大都可能影響圖標的平衡感。如下圖的中間和右邊,鏤空過小對圖標的辨識度并沒有多大作用,沒有鏤空則少了一些透氣感。

形體對比

形態上的差異也會具有不一樣的視覺感知。以「星」和「心」為案例,單獨形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標相對會精致一些,多了一些層次。在日常設計中的經驗是:越小的圖標形體應該越簡單,因此建議單體出現較好;若圖標的尺寸足夠大時可采用組合型的設計,補充圖標的細節。

繁簡對比

設計面性圖標時,對于多余細節的管理也很重要。隨著細節的增加,塊面切割過多,會使得整體圖標變得過于零碎(如下右圖)。保持簡約的設計提高圖標的識別度,在關鍵的特征細節上做補充(如下中間圖的相機閃光燈)。

2.面性圖標類型拓展

面性圖標在設計時也可以結合各種不同的表達方式,來提升圖標的質感和創意,而非只是簡單的填充顏色。

單色面+點綴色

整體的外形使用統一的顏色,結合圖標的屬性感知使用不同的顏色進行點綴,通過點綴色提亮了圖標的視覺效果,達到既統一又具有差異化。

多彩雙色

通過對比色、鄰近色的搭配來營造整體的圖標氛圍,提升了圖標的層次和豐富度,雙色的表達也增添了圖形的趣味性。在日常使用的APP中極為常見,簡單且容易出效果。

微質感漸變

微弱的漸變提升了圖標的質感。漸變的方向會影響整體圖標的視覺效果,因此可以根據不同設計的需要進行調整。如下圖案例:

實際案例:全民K歌

透明度/灰度變化

透明度/灰度的變化,讓原來單色的圖標變得更加具有層次感和空間感,設計細節更加豐富,降低了單色面性圖標的厚重感。

實際案例:企鵝FM我的頁面

透明度變化+漸變

漸變的設計提升了面性圖標的質感,從顏色上具有一定的豐富度。在漸變的基礎上對組合型做透明度差異化,使得圖標具有了層次感。

透明疊加的圖標+漸變的背景

此類圖標常常被應用在UI界面中的列表或者頂部入口的位置。

實際案例:全民K歌點歌頁面

顏色疊加穿透

圖標透明疊加之后產生了交錯的負形,疊加出第三個面。雖然整體設計依然保持著扁平化,但卻多了一份層次感,并且增加了圖標的細節。

實際案例:百度網盤

漸變層次疊加

整體的效果與透明度變化的圖標較為接近,通過漸變的深淺變化,使得形狀的銜接處出現了明暗對比,因此圖標也具有了厚度感和層次感。

實際案例:NAVER、掌上生活

高斯模糊

此類圖標基本沒有在APP中看到,與「透明度變化」或「顏色疊加」相比都更具層次感和空間感,同時圖標也具有較強的設計感。

線面結合

結合了線性和面性的優點,既保持了面性的重量感,同時具有線性的精致、細膩。因此在設計時可以根據圖標具體想要表達的感覺對線面比例進行把控,不同比例可以呈現出不同的視覺感知。

1.線面結合圖標的基礎分析及想法

線面比例

線面比例的差異,圖形呈現出來的張力也會有不同的感受。基于中間填充的圖標形態嘗試了三種不同的比例,從下圖中可以看出,當填充與外形窄邊比為1:3時(左圖)圖標呈現往內收的感覺;填充與外形窄邊比為1:2時(中間)圖標整體較為平衡;當填充與外形窄邊比為2:3(大于1:2)時(右圖)整體具有外擴趨勢。

組合形式

線面可以通過不同的組合形式進行繪制。基于不同的組合形態可以設計出多種多樣的線面圖標,不同的組合形式會體現出不同的設計風格,因此在設計時盡量多發散思考,尋找出適合你的組合方式。

繁簡對比

線面結合本身就由兩種形式組合,因此在設計的時候更需要對整體造型進行把控,單體(線和面)造型必須保持較高的簡潔程度,這樣最終組合形成的圖標才不會過于復雜(左圖),若本身形態過于復雜,則會降低圖標的辨識度和視覺美觀度。

2.線面結合圖標類型拓展

黑白線+面性品牌色

與「線性+品牌色」的做法較為接近,統一的線性顏色疊加品牌色的透出。

實際案例:好好住、soul

線面雙色

基于線面的基礎上,在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。

線面結合-陰陽

線和面的結合按50%的比例進行設計,依據上下、左右、居中等基礎方式的結構化設計,整體圖標的視覺效果較為跳躍,非常規。

線面雙色+錯位

在雙色圖標的基礎上,線和面按照統一的「百分比」進行縮放,并進行透視和位移的設計,整體呈現出來的是一種交錯疊加的視覺效果,相比普通的線面雙色更加豐富。

實際案例:閑魚底部tab、臉球底部tab

線面錯位+漸變

基于上一種風格,對面或者線的顏色進行漸變設計,豐富了圖標的質感和顏色更加細膩。

線面透明度變化

與「線面透明度變化」的設計方式大致一樣。如下圖案例,「弱線強面」的第一識別度較弱,而「弱面強線」的外形識別度較高,也更符合圖標的表達。

實際案例:新浪微博、騰訊新聞

基于三種基礎的類型表達,可以拓展出多種多樣的設計形式。除了以上的案例之外,還收集了一些其他的設計。

線面結合C插畫

整體比較偏向插圖的感覺,細節和元素較多,常見于一些APP的空白頁設計。

線面結合_卡通插畫

整體感覺比較可愛、卡通、二次元,常見于一些二次元或漫畫類的APP。

面性_漸變強質感

整體風格的光影質感會比較強烈,常在一些活動運營或小游戲的界面出現。

面性C扁平寫實

整體感覺比較扁平,細節的豐富度與現實感知接近。

線面+漸變插畫

整體風格比較偏向絢麗多彩的顏色風格,質感和細節較為豐富。

寫實風格

3D質感圖標

由于C4D的制作成本相對較高,目前較少在常規的APP中看到。但3D作為一個主流的設計趨勢,在時間和能力允許的情況下需要多做這方面的嘗試。

等距的線面結合

等距的設計,讓原本線面的圖標豐富了層次,并具有立體透視的感覺。

除了以上這些之外,我們在實際場景中也會發現一些較為特別的圖標設計。

APPStore游戲和新APP界面下的類別列表圖標

整體為具象化扁平風格的設計表達,圖標的顏色還原了最基本的現實感知。

iOS系統辦公類軟件的起始頁面圖標

整體風格比較偏商務簡約,具象的圖形表達+輕微的漸變質感。

QQ手機版中延展的功能圖標

整體風格偏向輕寫實+微弱漸變。每個圖標都具有豐富的細節表達,色調方面基于業務屬性結合品牌色進行了區分,整體既統一又具有差異化。

40個自媒體可商用素材網站【視頻+插畫+圖片+圖標】

CreativeCommons(知識共享)簡稱CC協議素材,創作者主動放棄著作的部分權利,還是會有所限制,例如要求標注來源、作者名等,請看到CC協議時看清須知。PD協議證明作品已捐獻給公共領域。

CC0協議意味著創作者主動放棄了著作的所有權利,可以無條件使用包括商用。(但是,不可上傳至其他素材網站、不可聲稱擁有版權,不可用于不法途徑,圖像中所涉及的內容仍有可能涉及商標權和公共及隱私權。

pexels【人物、風景、動物等攝影圖片】

/

沙沙野【高清視頻、圖片(中文網)】

/

unsplash【高清藝術攝影圖片(最多人使用)】

/

visualhunt【人物、風景、動物等攝影圖片】

/

pixabay【照片、插畫、矢量、視頻】

/

買粉絲jpg【色彩靚麗的風景、植物、動物】

/

skuawk【專業攝影師作品】

/

picjumbo【高清靜物、風景圖片】

/

kaboompics【建筑、靜物等小清新高清圖片】

/

gratisography【時尚流行攝影圖庫】

/

foodiesfeed【食物攝影高清圖庫】

買粉絲lyphotos【帶宗教色彩的高清圖片】

/

【唯美冷調風景】

/

streetwill【自然風光、街頭建筑】

/

【ins風圖片、靜物】

/

polayoutu【旅行高清圖片】

lifeofpix【風景、食物圖片】

/

lifeofvids【唯美的風景視頻】

/

fancycrave【靜物、建筑,復古風】

/

mmtstock【花卉植物較

很赞哦!（1）