簡約不簡單！看20個(gè)優(yōu)秀網(wǎng)頁如何善用線性圖標(biāo)

隨著扁平化和現(xiàn)代設(shè)計(jì)風(fēng)格的逐步流行和沉淀，線性圖標(biāo)也迎來了它的黃金時(shí)期?，F(xiàn)在你會(huì)在越來越多的地方發(fā)現(xiàn)它的身影，從傳統(tǒng)的控制面板、導(dǎo)航欄和社交媒體插件，到功能性的列表界面，它無處不在。

　　同時(shí)，線性圖標(biāo)的形態(tài)也是多樣的。從簡約而微妙的小巧圖標(biāo)，到復(fù)雜大膽的響應(yīng)式的版本，線性圖標(biāo)為設(shè)計(jì)師提供了從直觀簡單到繁復(fù)華麗的全方位的解決方案，可以說它們是豐富多態(tài)設(shè)計(jì)美學(xué)的重要呈現(xiàn)形式。線性圖標(biāo)還是界面信息傳達(dá)和用戶體驗(yàn)優(yōu)化的重要組成部分，其細(xì)膩而自然的設(shè)計(jì)、強(qiáng)大的個(gè)性化空間，開始成為網(wǎng)站從普通走上卓越的必備品。

　　今天搜集的案例中，你可以仔細(xì)體會(huì)不同的視覺元素是如何同線性圖標(biāo)有機(jī)地組合到一起的，這些優(yōu)雅的表現(xiàn)方式會(huì)成為你的借鑒對(duì)象。

　　Anchour

　　由于頁面中只使用了四個(gè)線性圖標(biāo)，作為重要的視覺支撐，設(shè)計(jì)師使用了雙股線來提升圖標(biāo)的信息量和豐富度，簡單而不單調(diào)，加上色彩對(duì)比，同整個(gè)主題很好地融合為一體。

　　Uniqlo Airism

　　Uniqlo Airism 的首頁通過線性圖標(biāo)動(dòng)效，賦予頁面以動(dòng)感，加上柔和的色彩和細(xì)密的柵格，整個(gè)頁面雖然內(nèi)容不多但一點(diǎn)也不單調(diào)，反而給人以飽滿的感覺。

　　UXB

　　由于設(shè)計(jì)師采用了大量的留白，UXB 的頁面看起來干凈而清爽。用極細(xì)的線條繪制的大圖標(biāo)柔和而直觀，確保了美觀性又保持了一致的設(shè)計(jì)，相互呼應(yīng)的設(shè)計(jì)元素令頁面的瀏覽體驗(yàn)可以稱得上優(yōu)秀。

　　Brianza Chenutre

　　Brianza Chenutre 頁面中，每一個(gè)分類都擁有一個(gè)超大的線性圖標(biāo)作為內(nèi)容和信息的標(biāo)識(shí)，各不相同但是平易近人。這種生動(dòng)的表達(dá)方式讓內(nèi)容更容易被用戶理解，圖標(biāo)背景采用色彩柔和的幾何形狀來襯托，更加富有魅力。

　　Sponge

　　Sponge 的服務(wù)分類是通過精心設(shè)計(jì)的精致圖標(biāo)來展現(xiàn)的，黑色調(diào)背景的襯托之下，圖標(biāo)的細(xì)節(jié)被襯托得極為突出，個(gè)性與魅力在這種對(duì)比下得到了明顯的強(qiáng)化，也使得高水準(zhǔn)的設(shè)計(jì)被用戶捕捉到。

　　RDT54

　　不同于其他的設(shè)計(jì)，這個(gè)案例中，設(shè)計(jì)師將線性圖標(biāo)應(yīng)用到導(dǎo)航菜單上來，并且讓這個(gè)導(dǎo)航菜單占據(jù)了整個(gè)頁面。等寬的分割之下，整個(gè)頁面呈現(xiàn)出均勻?qū)ΨQ的美感，深色系的背景同樣讓線性圖標(biāo)的纖細(xì)優(yōu)雅之感得到了極大的強(qiáng)化。

　　Pixelneat

　　Pixelneat 對(duì)于線性圖標(biāo)的運(yùn)用也有獨(dú)到之處。線性圖標(biāo)被放大加粗，并施加以不同的色彩，提升了信息層次也達(dá)到了信息分類引導(dǎo)的作用，用戶可以更好地獲取信息了。

　　Postbox Inc.

　　Postbox 公司在線性圖標(biāo)的運(yùn)用上更加獨(dú)到。為了更好的瀏覽體驗(yàn)，設(shè)計(jì)師采用多種色彩來繪制線性圖標(biāo)，或者說線性圖標(biāo)風(fēng)格的插畫，其中額外的弧度和轉(zhuǎn)折賦予了整個(gè)圖標(biāo)以拙稚的美感。

　　Social Blue

　　Social Blue 的網(wǎng)頁在精致細(xì)膩的線性圖標(biāo)襯托之下顯得尤為突出。左側(cè)一列菱形的標(biāo)識(shí)采用的是單頁設(shè)計(jì)中典型的滾動(dòng)導(dǎo)航方式，而頁面中的線性圖標(biāo)無疑也是用來標(biāo)識(shí)不同類別的信息。

　　Oubly

　　Oubly 試圖省略同用戶溝通中過多的文字表述，轉(zhuǎn)而采用標(biāo)識(shí)性極強(qiáng)的線性圖標(biāo)。頁面中嵌入的5個(gè)線性圖標(biāo)清晰地對(duì)應(yīng)著不同的環(huán)節(jié)和階段，圓潤的邊框和協(xié)調(diào)的設(shè)計(jì)令輕松搞明白其中內(nèi)容，不會(huì)有突兀感。

　　MyAlbum

　　單純的黑白色調(diào)和大量留白讓頁面干凈清爽，整潔干練的線性圖標(biāo)保持了項(xiàng)目的趣味性，使得頁面鮮活了起來。

　　o2Source

　　o2Source 用一套略顯古怪粗糲的線性圖標(biāo)來作為導(dǎo)航菜單，彩色插畫作為背景，消減了頁面整體的單調(diào)性。

　　Yama

　　Yama 借由時(shí)間線這種精致優(yōu)雅的方式來呈現(xiàn)不同的服務(wù)，整個(gè)設(shè)計(jì)在頁面里居中擺放，線性圖標(biāo)設(shè)計(jì)圓潤流暢，和整個(gè)界面搭配成了一套有趣的組合。

　　Winston Retail

　　設(shè)計(jì)師在設(shè)計(jì)這組線性圖標(biāo)的時(shí)候，采用了雙色搭配粗細(xì)對(duì)比，呈現(xiàn)出豐富的細(xì)節(jié)。粗線與字體色調(diào)一致確保了整個(gè)視覺設(shè)計(jì)的重量，作為提亮的紅色用的是細(xì)線，起到了點(diǎn)綴的作用，但又不會(huì)喧賓奪主。

　　DWP

　　DWP的網(wǎng)站設(shè)計(jì)優(yōu)秀之處在于它的功能實(shí)現(xiàn)和用戶體驗(yàn)，而非它的美學(xué)特征。干練的結(jié)構(gòu)，細(xì)膩的圖標(biāo)起到了導(dǎo)航的作用，加上留白，整個(gè)頁面的視覺設(shè)計(jì)也非常突出。

　　GoodPatch

　　賞心悅目的配色和充滿呼吸感的版面設(shè)計(jì)，令GoodPatch整個(gè)網(wǎng)站顯得非常的實(shí)在。藍(lán)色的線性圖標(biāo)提亮了頁面，灰色的圓形邊框劃分出圖標(biāo)的邊界，顯得整飭而富有條理。

　　Praktiker

　　Praktiker 用密集的內(nèi)容構(gòu)建出復(fù)雜而富有沖擊力的視覺效果。也正是在這種高信息量的布局中，設(shè)計(jì)師讓圖標(biāo)和文字結(jié)合起來設(shè)計(jì)導(dǎo)航，強(qiáng)化了它的存在感。

　　Your Farm

　　Your Farm 網(wǎng)頁中充滿生機(jī)和活力的色彩來展現(xiàn)它的性格，雖然細(xì)膩的線性圖標(biāo)被淹沒在相對(duì)復(fù)雜的布局當(dāng)中，但是當(dāng)你使用或者仔細(xì)查看，會(huì)注意到它們的優(yōu)秀之處。

　　MotoCMS

　　MotoCMS 橙色的線性圖標(biāo)讓用戶瀏覽頁面的時(shí)候一眼就會(huì)注意到。

　　Fineocar

　　這個(gè)頁面的設(shè)計(jì)挺大膽的，色調(diào)飽和度低，相對(duì)其他更加沉穩(wěn)，線性圖標(biāo)和幽靈按鈕組合到一起之后，讓整個(gè)頁面風(fēng)格更加一致。大膽的版式和獨(dú)特的色調(diào)，讓用戶更加專注于內(nèi)容。

　　結(jié)語

　　線性圖標(biāo)其實(shí)非常能夠呈現(xiàn)網(wǎng)頁細(xì)膩優(yōu)雅的一面，細(xì)膩的線條軌跡讓頁面更加鮮活，也更值得回味。當(dāng)然，線性圖標(biāo)的使用對(duì)于風(fēng)格是有一定要求的，也正是目前扁平化2.0的時(shí)代能將這種設(shè)計(jì)元素的優(yōu)勢(shì)發(fā)揮出來，但是如果換成擬物化的設(shè)計(jì)，情況可能就沒那么理想了。