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

發表於2015-09-21

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

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

今天蒐集的案例中,你可以仔細體會不同的視覺元素是如何同線性圖示有機地組合到一起的,這些優雅的表現方式會成為你的借鑑物件。

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的時代能將這種設計元素的優勢發揮出來,但是如果換成擬物化的設計,情況可能就沒那麼理想了。

相關文章