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

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

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

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

　　Anchour

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

　　Uniqlo Airism

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

　　UXB

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

　　Brianza Chenutre

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

　　Sponge

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

　　RDT54

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

　　Pixelneat

　　Pixelneat 對于線性圖標的運用也有獨到之處。線性圖標被放大加粗，并施加以不同的色彩，提升了信息層次也達到了信息分類引導的作用，用戶可以更好地獲取信息了。

　　Postbox Inc.

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

　　Social Blue

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

　　Oubly

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

　　MyAlbum

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

　　o2Source

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

　　Yama

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

　　Winston Retail

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

　　DWP

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

　　GoodPatch

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

　　Praktiker

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

　　Your Farm

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

　　MotoCMS

　　MotoCMS 橙色的線性圖標讓用戶瀏覽頁面的時候一眼就會注意到。

　　Fineocar

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

　　結(jié)語

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