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

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

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

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

? ? ? ?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個線性圖標清晰地對應著不同的環節和階段，圓潤的邊框和協調的設計令輕松搞明白其中內容，不會有突兀感。

? ?

(編輯：小酷)