20個優秀網頁告訴你如何善用線性圖標

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

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

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

　　Anchour

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

　　Uniqlo Airism

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

　　UXB

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

　　Brianza Chenutre

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

　　Sponge

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

　　RDT54

　　不同於其他的設計，這個案例中，設計師將線性圖標應用到導航菜單上來，並且讓這個導航菜單占據了整個頁面。等寬的分割之下，整個頁面呈現出均勻對稱的美感，深色系的背景同樣讓線性圖標的纖細優雅之感得到了極大的強化。

　　Pixelneat

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

　　Postbox Inc.

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

　　Social Blue

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

　　Oubly

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

　　MyAlbum

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

　　o2Source

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

　　Yama

　　Yama 借由時間線這種精致優雅的方式來呈現不同的服務，整個設計在頁面裡居中擺放，線性圖標設計圓潤流暢，和整個界面搭配成了一套有趣的組合。

　　Winston Retail

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

　　DWP

　　DWP的網站設計優秀之處在於它的功能實現和用戶體驗，而非它的美學特征。干練的結構，細膩的圖標起到了導航的作用，加上留白，整個頁面的視覺設計也非常突出。

　　GoodPatch

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

　　Praktiker

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

　　Your Farm

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

　　MotoCMS

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

　　Fineocar

　　這個頁面的設計挺大膽的，色調飽和度低，相對其他更加沉穩，線性圖標和幽靈按鈕組合到一起之後，讓整個頁面風格更加一致。大膽的版式和獨特的色調，讓用戶更加專注於內容。

　　結語

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