圖標(biāo)設(shè)計(jì)冷知識(shí)——類型及延展思考

8 評(píng)論 10256 瀏覽 109 收藏 32 分鐘

本文主要對(duì)于圖標(biāo)設(shè)計(jì)的 “類型、風(fēng)格” 進(jìn)行了整理,以及自己對(duì)于每種圖標(biāo)類型的思考觀點(diǎn)。

圖標(biāo)是UI設(shè)計(jì)中極為重要的一個(gè)環(huán)節(jié),我們?cè)谠O(shè)計(jì)每個(gè)界面幾乎都會(huì)設(shè)計(jì)到圖標(biāo)的表達(dá),出色的圖標(biāo)設(shè)計(jì)可以讓界面表達(dá)更加經(jīng)常、精致、有趣。

圖標(biāo)的設(shè)計(jì)往往也體現(xiàn)著設(shè)計(jì)師的基本功,因此除了日常多畫之外(多畫可以提升對(duì)圖標(biāo)造型的把控力),我們也更需要了解和學(xué)習(xí)圖標(biāo)設(shè)計(jì)的趨勢(shì)類型,從而幫助我們提高在設(shè)計(jì)中的效率。

基于自我學(xué)習(xí)的目的,平時(shí)在瀏覽一些設(shè)計(jì)網(wǎng)站時(shí)也會(huì)做相對(duì)應(yīng)的收集。因此本文主要對(duì)于圖標(biāo)設(shè)計(jì)的 “類型、風(fēng)格” 進(jìn)行了整理,以及自己對(duì)于每種圖標(biāo)類型的思考觀點(diǎn)。

圖標(biāo)的類型劃分

設(shè)計(jì)網(wǎng)站上的圖標(biāo)可以說(shuō)是多種多樣,不同類型的圖標(biāo)都有著獨(dú)特的魅力。例如:線形圖標(biāo)-簡(jiǎn)潔輕量、面形圖標(biāo)-厚重直接,當(dāng)然同一種類型的圖標(biāo)也具有很多不同的表現(xiàn)形式。

因此基于本人對(duì)圖標(biāo)的理解,大致劃分為三類:線性、面形、線面結(jié)合。結(jié)合三種基礎(chǔ)類型的表達(dá)方式可以創(chuàng)造出各式各樣的表現(xiàn)形式。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

一、線形圖標(biāo)

使用輕量的線條勾勒的圖標(biāo),整體感受也趨向于精致、細(xì)致而具有銳度感。不同的線條表現(xiàn)具有不同的視覺感受,細(xì)線輕量、直線硬朗、曲線柔美。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

1. 線型圖標(biāo)基礎(chǔ)分析及想法

(1)粗細(xì)對(duì)比

粗細(xì)不同,圖標(biāo)的力度和重量感就會(huì)有差異。粗線的圖標(biāo),視覺關(guān)注力來(lái)說(shuō)會(huì)更加突出,但較于細(xì)線的圖標(biāo)也會(huì)卻顯得粗壯、厚重;細(xì)線的圖標(biāo),精致、透氣、秀美。

但在設(shè)計(jì)時(shí)需要依據(jù) “整體的UI風(fēng)格”來(lái)決定線的粗細(xì),而并非單純的考慮圖標(biāo)的關(guān)注度,反而更需要考慮圖標(biāo)與界面整體的平衡感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)柔度對(duì)比

直角與圓角決定了外形的感知和風(fēng)格的走向,如下圖對(duì)比中看出,圓角越大圖形越趨向于可愛柔美(如下右圖),圓角越小則越直接、硬朗和陽(yáng)剛(如左右圖)。因此剛或柔或中間值完全取決于早期對(duì)于整體風(fēng)格的定調(diào)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)繁簡(jiǎn)對(duì)比

除了輕量化和簡(jiǎn)潔之外,圖標(biāo)的識(shí)別性也是極為重要。如下左圖,“過度簡(jiǎn)潔”導(dǎo)致圖標(biāo)失去該有的識(shí)別度而出現(xiàn)歧義,而下右圖的元素疊加使得圖標(biāo)稍顯復(fù)雜。在繁與簡(jiǎn)的平衡中,應(yīng)該保持:在不影響圖標(biāo)識(shí)別度的情況下,最大限度的提升圖標(biāo)的簡(jiǎn)潔程度。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(4)特征的識(shí)別度

除了簡(jiǎn)潔程度,也需要考慮圖標(biāo)該有的特征。例如下圖“評(píng)論”圖標(biāo)的案例,當(dāng)我把圖標(biāo)中的“三個(gè)點(diǎn)”去掉時(shí),圖標(biāo)依舊具有 “對(duì)話/評(píng)論”的表意,而當(dāng)我把下面的“箭頭”去掉保留“三個(gè)點(diǎn)”時(shí),則會(huì)出現(xiàn)歧義。它可以被表意為“更多”的意思,因此在設(shè)計(jì)圖標(biāo)時(shí)需要對(duì)于表意做精準(zhǔn)把握,避免歧義出現(xiàn)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(5)保持圖標(biāo)的特征美感

如下面的“心形”圖標(biāo),下左圖為我們具有普識(shí)性的圖標(biāo),與圓形組合之后依然保持著原有的形態(tài)美感。但我們不時(shí)也會(huì)看到第三種設(shè)計(jì),整體外形雖然保持著愛心,但為了與整體風(fēng)格“一致”強(qiáng)行對(duì)外輪廓進(jìn)行切割,與原圖形在美感上則稍微有些出入,這也是我們需要思考的關(guān)鍵點(diǎn)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(6)組合型比例

組合形的比例會(huì)影響到圖標(biāo)的精致程度,準(zhǔn)確的“比例值”能讓整體的造型趨向平衡,更具有美感。如下圖案例嘗試了兩組不同比例的效果,這里以圖標(biāo)窄邊作為“基準(zhǔn)值”進(jìn)行嘗試。

當(dāng)內(nèi)形為外形的1:2時(shí)(下圖2),圖標(biāo)的整體視覺效果較為平衡;當(dāng)大于1:2并接近4:3時(shí),圖標(biāo)內(nèi)部結(jié)構(gòu)會(huì)顯得過于飽滿;而小于1:2并接近4:1時(shí)(下圖3)則會(huì)產(chǎn)生稀疏不緊湊的效果。(這里的比例只是案例需要,實(shí)際設(shè)計(jì)以最終的視覺感知為準(zhǔn))

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

2. 線型類型拓展

基礎(chǔ)的理論,結(jié)合延展的應(yīng)用,可以迸發(fā)出更多的創(chuàng)意想法。線形圖標(biāo)也并非只有一種設(shè)計(jì)形態(tài)。通過以下案例,可以看看線型圖標(biāo)設(shè)計(jì)的類型的多樣性。

(1)極簡(jiǎn)風(fēng)格

整體風(fēng)格極為簡(jiǎn)約,沒有多余的線條交錯(cuò),通過線條還原圖形的本質(zhì),外形“簡(jiǎn)單”卻具有很強(qiáng)的識(shí)別性,在視覺感知上輕松、干凈。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

極簡(jiǎn)的風(fēng)格圖標(biāo)在于對(duì)形的把控,多一筆可能顯得復(fù)雜,少一筆可能影響識(shí)別程度。以上圖為例,圖標(biāo)的組合元素保持在2個(gè)左右,整體較為干凈。

實(shí)際應(yīng)用-Instagram、Airbnb、Facebook、Twitter

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)雙色

相較于“純色的圖標(biāo)”更具表現(xiàn)力,細(xì)節(jié)上也會(huì)更加的豐富,形態(tài)感知上多了一層變化。結(jié)合顏色的疊加、對(duì)比、互補(bǔ)提升了圖標(biāo)的層次感和豐富度。

同色系:同為冷色系、暖色系或某種顏色系統(tǒng)的表達(dá)形式。如下圖案例,以暗色主色-亮色點(diǎn)綴提亮,使得圖標(biāo)具有一種高光提亮的感覺。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

另一組案例是 亮色主色結(jié)合暗色,整體圖標(biāo)效果還算可以,但較亮的顏色沒有應(yīng)用在圖標(biāo)的關(guān)鍵特征上,使得圖標(biāo)第一眼的感知稍有減弱。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

對(duì)比互補(bǔ)色:顏色跨度更大,層次更加分明。如下圖案例,紅色與藍(lán)色的撞色之后相比單色的圖標(biāo)更加出彩和具有記憶點(diǎn)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-騰訊動(dòng)漫我的頁(yè)面

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)透明度變化

本質(zhì)上與上面一種為一個(gè)類型的設(shè)計(jì),通過透明度的疊加和變化,提升圖標(biāo)的層次感和空間感,降低圖標(biāo)的壓迫性。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-愛奇藝9宮格圖標(biāo)

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(4)漸變層次疊加

漸變帶出了圖標(biāo)的質(zhì)感,結(jié)合“不同深度”或“不同飽和度”的變化,讓圖標(biāo)更具有細(xì)節(jié)和層次。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(5)黑白+品牌色

黑白色作為主色調(diào),結(jié)合品牌色作為點(diǎn)綴色。與常規(guī)的黑白圖標(biāo)相比,既有產(chǎn)生了變化,同時(shí)兼顧了品牌色的透出。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-大眾點(diǎn)評(píng)攻略頁(yè)面圖標(biāo)

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(6)線形漸變

結(jié)合漸變的顏色,豐富了整個(gè)圖標(biāo)的視覺表達(dá),并提升了圖標(biāo)的視覺沖擊力和設(shè)計(jì)感。案例結(jié)合黑白背景作為嘗試,白底:粗線比細(xì)線的視覺效果相對(duì)較好,漸變也能較為清晰的被表達(dá),黑底:細(xì)線比粗線的視覺效果顯示得更加精致和具有銳度感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-網(wǎng)易考拉/NAVER

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(7)一筆成形

此類圖標(biāo)在視覺表達(dá)上具有較高的線性流暢度和設(shè)計(jì)感,關(guān)注點(diǎn)在于整組的圖標(biāo)的 “開口起始點(diǎn)” 設(shè)定上需保持一致。例如:“從左到右”或“從右到左”形成一體化的連貫線條,開口起始點(diǎn)不一致會(huì)影響整組圖標(biāo)的一致性,應(yīng)用在頁(yè)面時(shí)也會(huì)顯得雜亂。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(8)斷點(diǎn)圖標(biāo)

與上一種較為類似,但沒有連貫度的要求。在線形圖標(biāo)基礎(chǔ)上面,尋找一個(gè)缺口來(lái)打破 “全包邊圖標(biāo)” 的沉悶感。使得圖標(biāo)具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小,另外需要控制開口個(gè)數(shù)避免過多導(dǎo)致圖標(biāo)外形過于零碎。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-騰訊體育/京東

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

二、面形圖標(biāo)

面形圖標(biāo)比線型圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感,比線型圖標(biāo)會(huì)更加容易吸引視覺目光。在識(shí)別度上,面形圖標(biāo)更加依賴于外輪廓的清晰度,因此在設(shè)計(jì)時(shí)對(duì)于外形的打磨是重中之重,清晰的外輪廓可以幫助提高識(shí)別度。圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

1. 面型圖標(biāo)基礎(chǔ)分析及想法

(1)輪廓對(duì)比

輪廓的差異會(huì)提體現(xiàn)出不同的氣質(zhì),如下圖的左邊和右邊的區(qū)別,一個(gè)氣質(zhì)較為直接硬朗,另一個(gè)則較為柔美可愛。流暢的外形可以讓面形圖標(biāo)的整體更加簡(jiǎn)潔、規(guī)整,如下圖中間的圖標(biāo)在輪廓的處理上則顯得比較碎,整體外輪廓造型的連貫度有所欠缺。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)鏤空對(duì)比

適當(dāng)?shù)溺U空除了補(bǔ)充了圖形的識(shí)別度之外,還提升了面形圖標(biāo)的設(shè)計(jì)細(xì)節(jié)。另外需要控制好鏤空部分與整體的外形的比例,過小或過大都可能影響圖標(biāo)的平衡感。如下圖的中間和右邊,鏤空過小對(duì)圖標(biāo)的辨識(shí)度并沒有多大作用,沒有鏤空則少了一些透氣感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)形體對(duì)比

形態(tài)上的差異也會(huì)具有不一樣的視覺感知。以“星”和“心”為案例,單獨(dú)形體與組合之后的形體相比視覺感知更直觀些,而組合形的圖標(biāo)相對(duì)會(huì)精致一些,更多了一份層次。在日常設(shè)計(jì)中的經(jīng)驗(yàn)是:越小的圖標(biāo)形體應(yīng)該越簡(jiǎn)單,因此建議單體出現(xiàn)較好;若圖標(biāo)的尺寸足夠大時(shí)可采用組合形的設(shè)計(jì),補(bǔ)充圖標(biāo)的細(xì)節(jié)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(4)繁簡(jiǎn)對(duì)比

設(shè)計(jì)面形圖標(biāo)時(shí),對(duì)于多余細(xì)節(jié)的管理也很重要。隨著細(xì)節(jié)的增加,塊面切割過多,會(huì)使得整體圖標(biāo)變得過于零碎(如下右圖)。保持簡(jiǎn)約的設(shè)計(jì)提高圖標(biāo)的識(shí)別度,在關(guān)鍵的特征細(xì)節(jié)上做補(bǔ)充(如下中間圖的相機(jī)閃光燈點(diǎn))。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

2. 面形圖標(biāo)類型拓展

面形圖標(biāo)在設(shè)計(jì)時(shí)也可以結(jié)合各種不同的表達(dá)方式,來(lái)提升圖標(biāo)的質(zhì)感和創(chuàng)意,而非只是簡(jiǎn)單的填充顏色而已。

(1)單色面+點(diǎn)綴色

整體的外形使用統(tǒng)一的顏色,結(jié)合圖標(biāo)的屬性感知使用不同的顏色進(jìn)行點(diǎn)綴,通過點(diǎn)綴色提亮了圖標(biāo)的視覺效果,達(dá)到既統(tǒng)一又具有差異化。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)多彩雙色

通過對(duì)比色、鄰近色的搭配來(lái)營(yíng)造整體的圖標(biāo)氛圍,提升了圖標(biāo)的層次和豐富度,雙色的表達(dá)也增添了圖形的趣味性。在日常APP中極為常見,簡(jiǎn)單且容易出效果。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)微質(zhì)感漸變

微弱的漸變提升了圖標(biāo)的質(zhì)感。漸變的方向會(huì)影響整體圖標(biāo)的視覺效果,因此可以根據(jù)不同設(shè)計(jì)的需要進(jìn)行調(diào)整。如下圖案例:

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-全民K歌

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(4)透明度/灰度變化

透明度/灰度的變化,讓原來(lái)單色的圖標(biāo)變得更加具有層次感和空間感,設(shè)計(jì)細(xì)節(jié)更加豐富,降低了單色面形圖標(biāo)的厚重感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-企鵝FM我的頁(yè)面

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(5)透明度變化+漸變

漸變的設(shè)計(jì)提升了面形圖標(biāo)的質(zhì)感,從顏色上具有一定的豐富度。在漸變的基礎(chǔ)上對(duì)組合型做透明度差異化,使得圖標(biāo)具有了層次感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

透明疊加的圖標(biāo)+漸變的背景此類圖標(biāo)常常被應(yīng)用在UI界面中的列表或者頂部入口的位置。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-全民K歌點(diǎn)歌頁(yè)面

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(6)顏色疊加穿透

圖標(biāo)透明疊加之后產(chǎn)生了交錯(cuò)的負(fù)形,疊加出第三個(gè)面。雖然整體設(shè)計(jì)依然保持著扁平化,但卻多了一份層次感,并且增加了圖標(biāo)的細(xì)節(jié)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-百度網(wǎng)盤

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(7)漸變層次疊加

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

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-NAVER /掌上生活

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(8)高斯模糊

此類圖標(biāo)基本沒在在APP中看到,與“透明度變化”或“顏色疊加”相比都更具層次感和空間感,同時(shí)圖標(biāo)也具有較強(qiáng)的設(shè)計(jì)感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

三、線面結(jié)合

結(jié)合了線形和面形的優(yōu)點(diǎn),既保持了面形的重量感,同時(shí)具有線形的精致、細(xì)膩。因此在設(shè)計(jì)時(shí)可以根據(jù)圖標(biāo)具體想要表達(dá)的感覺對(duì)線面比例進(jìn)行把控,不同比例可以呈現(xiàn)出不同的視覺感知。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

1. 線面結(jié)合圖標(biāo)的基礎(chǔ)分析及想法

(1)線面比例

線面比例的差異,圖形呈現(xiàn)出來(lái)的張力也會(huì)又不同的感受?;谥虚g填充的圖標(biāo)形態(tài)嘗試了三種不同的比例,從下圖中可以看出,當(dāng)填充與外形窄邊比為1:3時(shí)(左圖)圖標(biāo)呈現(xiàn)往內(nèi)收的感覺,填充與外形窄邊比為1:2時(shí)(中間)圖標(biāo)整體較為平衡,當(dāng)填充與外形窄邊比為2:3(大于1:2)時(shí)(右圖)整體具有外擴(kuò)趨勢(shì)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)組合形式

線面可以通過不同的組合形式進(jìn)行繪制?;诓煌慕M合形態(tài)可以設(shè)計(jì)出多種多樣的線面圖標(biāo),不同的組合形式會(huì)體現(xiàn)出不同的設(shè)計(jì)風(fēng)格,因此在設(shè)計(jì)時(shí)盡量多發(fā)散思考,尋找出適合你的組合方式。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)繁簡(jiǎn)對(duì)比

線面結(jié)合本身就由兩種形式組合,因此在設(shè)計(jì)的時(shí)候更需要對(duì)整體造型進(jìn)行把控,單體(線和面)造型必須保持較高的簡(jiǎn)潔程度,這樣最終組合形成的圖標(biāo)才不會(huì)過于復(fù)雜(左圖),若本身形態(tài)過于復(fù)雜,則會(huì)降低圖標(biāo)的辨識(shí)度和視覺美觀度。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

2. 線面結(jié)合圖標(biāo)類型拓展

線面結(jié)合的圖標(biāo)集合了線型和面形的優(yōu)點(diǎn),在設(shè)計(jì)方式上也繼承了兩者的優(yōu)點(diǎn)。因此設(shè)計(jì)方式也是基于以上兩種的結(jié)合,因此可以結(jié)合出更多設(shè)計(jì)的可能性。

(1)黑白線+面形品牌色

與“線形+品牌色”的做法較為接近,統(tǒng)一的線形顏色疊加品牌色的透出。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-好好住/soul

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(2)線面雙色

基于線面的基礎(chǔ)上,在線和面的顏色上做差異。具體做法與線型或面形的雙色接近。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(3)線面結(jié)合-陰陽(yáng)

線和面的按50%的比例進(jìn)行設(shè)計(jì),依據(jù)上下、左右、居中等基礎(chǔ)方式的結(jié)構(gòu)化設(shè)計(jì),整體圖標(biāo)的視覺效果較為跳躍非常規(guī)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(4)線面雙色+錯(cuò)位

在雙色圖標(biāo)的基礎(chǔ)上,線和面按照統(tǒng)一的 “百分比” 進(jìn)行縮放,并進(jìn)行透視和位移的設(shè)計(jì),整體呈現(xiàn)出來(lái)的是一種交錯(cuò)疊加的視覺效果,相比普通的線面雙色更豐富了層級(jí)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-閑魚底部tab、臉球底部tab

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(5)線面錯(cuò)位+漸變

基于上一種風(fēng)格,對(duì)面或者線的顏色進(jìn)行漸變?cè)O(shè)計(jì),除了具有豐富圖標(biāo)的質(zhì)感和顏色更加細(xì)膩。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(6)線面透明度變化

與“線面透明度變化”的設(shè)計(jì)方式大致一樣。如下圖案例,“弱線強(qiáng)面”的第一識(shí)別度較弱,而“弱面強(qiáng)線” 的外形識(shí)別度較高,也更符合圖標(biāo)的表達(dá)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

實(shí)際案例-新浪微博、騰訊新聞

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

基于三種基礎(chǔ)的類型表達(dá),可以拓展出多種多樣的設(shè)計(jì)形式。除了以上的案例之外,還收集了一些其他的設(shè)計(jì),如下:

(7)線面結(jié)合——插畫

整體比較偏向插圖的感覺,細(xì)節(jié)和元素較多,常見與一些APP的空白頁(yè)設(shè)計(jì)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(8)線面結(jié)合——卡通插畫

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

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(9)面形—漸變強(qiáng)質(zhì)感

整體風(fēng)格的光影質(zhì)感會(huì)比較強(qiáng)烈,常見于一些活動(dòng)運(yùn)營(yíng)或小游戲的界面出現(xiàn)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(10)面形-扁平寫實(shí)

整體感覺比較扁平,細(xì)節(jié)的豐富度與現(xiàn)實(shí)感知接近。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(11)線面+漸變插畫

整體風(fēng)格比較偏向絢麗多彩的顏色風(fēng)格,質(zhì)感和細(xì)節(jié)較為豐富。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(12)寫實(shí)風(fēng)格

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(13)3D質(zhì)感圖標(biāo)

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

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(14)等距的線面結(jié)合

等距的設(shè)計(jì),讓原本線面的圖標(biāo)更加豐富了層次,并具有立體透視的感覺。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

除了以上這些之外,我們?cè)趯?shí)際場(chǎng)景中也會(huì)發(fā)現(xiàn)一些較為特別的圖標(biāo)設(shè)計(jì),如下:

(15)Facebook更多頁(yè)面——列表圖標(biāo)

整體風(fēng)格偏向插畫風(fēng)+漸變質(zhì)感。由于更多的頁(yè)面為純列表的設(shè)計(jì),因此整個(gè)頁(yè)面在圖標(biāo)的設(shè)計(jì)上做了很大膽的嘗試,與常規(guī)的單色圖標(biāo)相比更具又吸引力。區(qū)別與如此業(yè)務(wù)的業(yè)務(wù),系統(tǒng)性質(zhì)的功能圖標(biāo)做了色調(diào)的區(qū)分。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

APP Store游戲和新APP界面下的類別列表圖標(biāo)

整體為具象化扁平風(fēng)格的設(shè)計(jì)表達(dá),圖標(biāo)的顏色還原最基本的現(xiàn)實(shí)感知的識(shí)別。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(16)iOS系統(tǒng)——辦公類軟件的起始頁(yè)面圖標(biāo)

整體風(fēng)格比較偏商務(wù)簡(jiǎn)約,具象的圖形表達(dá)+輕微的漸變質(zhì)感。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(17)QQ手機(jī)版——加號(hào)圖標(biāo)

整體風(fēng)格偏向輕寫實(shí)+微弱漸變。每個(gè)圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá),色調(diào)方面基于業(yè)務(wù)屬性結(jié)合品牌色進(jìn)行了區(qū)分,整體既統(tǒng)一又具有差異化。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(18)大眾點(diǎn)評(píng)——頂部入口

整體風(fēng)格偏向?qū)憣?shí)+強(qiáng)漸變+炫光感,每個(gè)圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá)。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(19)旅法師營(yíng)地

游戲、二次元類的APP,因此在圖標(biāo)的設(shè)計(jì)上也偏向細(xì)節(jié)較為豐富的插畫風(fēng)格。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

(20)嗶哩嗶哩動(dòng)漫

圖標(biāo)風(fēng)格偏向卡通插畫,選中態(tài)與默認(rèn)態(tài)的設(shè)計(jì)較為巧妙。

圖標(biāo)設(shè)計(jì)冷知識(shí)—類型及延展思考

總結(jié)

本文的重點(diǎn)在于透過這些設(shè)計(jì)類型或者技法的了解,幫助我們?cè)谟谌粘TO(shè)計(jì)中的提升輸出效率。圖標(biāo)雖然作為UI設(shè)計(jì)的基礎(chǔ),但卻有很深的學(xué)問,精致的圖標(biāo)更是可以起到點(diǎn)睛的作用,提升界面的質(zhì)感和氛圍。

圖標(biāo)的種類肯定遠(yuǎn)遠(yuǎn)不止本文所提到的這些內(nèi)容,但是萬(wàn)變不離其中——“線形、面形、線面結(jié)合”再結(jié)合“透明度、漸變、顏色疊加、質(zhì)感、多維空間”,等等的表達(dá)方式。

我們除了需要掌握了解這些內(nèi)容之外,還需要提升圖標(biāo)設(shè)計(jì)的造型能力,更需要日積月累的練習(xí)和思考,從量到質(zhì)的變化。

 

作者:IDfor,公眾號(hào):IDfor(ID:IDfor_all)

本文由 @IDfor 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

本文部分截圖來(lái)自dribbble.com和APP截圖

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 挺好

    來(lái)自四川 回復(fù)
    1. 謝謝

      來(lái)自廣東 回復(fù)
  2. 人才

    回復(fù)
    1. 這里的個(gè)個(gè)都是人才

      來(lái)自廣東 回復(fù)
  3. 不錯(cuò),超級(jí)棒

    來(lái)自廣東 回復(fù)
    1. 喜歡就好

      來(lái)自廣東 回復(fù)
  4. 好詳細(xì)啊 ??

    來(lái)自內(nèi)蒙古 回復(fù)
    1. 希望對(duì)你有幫助

      來(lái)自廣東 回復(fù)