您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)欣賞 >> 瀏覽設(shè)計(jì)教程

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

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

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

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

  Anchour

20個(gè)優(yōu)秀網(wǎng)頁(yè)告訴你如何善用線性圖標(biāo) 三聯(lián)

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

  Uniqlo Airism

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

  UXB

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

  Brianza Chenutre

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

  Sponge

  Sponge 的服務(wù)分類是通過(guò)精心設(shè)計(jì)的精致圖標(biāo)來(lái)展現(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)航菜單上來(lái),并且讓這個(gè)導(dǎo)航菜單占據(jù)了整個(gè)頁(yè)面。等寬的分割之下,整個(gè)頁(yè)面呈現(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ì)師采用多種色彩來(lái)繪制線性圖標(biāo),或者說(shuō)線性圖標(biāo)風(fēng)格的插畫,其中額外的弧度和轉(zhuǎn)折賦予了整個(gè)圖標(biāo)以拙稚的美感。

  Social Blue

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

  Oubly

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

  MyAlbum

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

  o2Source

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

  Yama

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

  Winston Retail

  設(shè)計(jì)師在設(shè)計(jì)這組線性圖標(biāo)的時(shí)候,采用了雙色搭配粗細(xì)對(duì)比,呈現(xiàn)出豐富的細(xì)節(jié)。粗線與字體色調(diào)一致確保了整個(gè)視覺(jué)設(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è)頁(yè)面的視覺(jué)設(shè)計(jì)也非常突出。

  GoodPatch

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

  Praktiker

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

  Your Farm

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

  MotoCMS

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

  Fineocar

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

  結(jié)語(yǔ)

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


[教程作者:@陳子木]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de2902.html
新奇特!48個(gè)有趣的404頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)
一組字體纖細(xì)版式清爽的優(yōu)秀網(wǎng)站欣賞
圖趣網(wǎng)微信
建議反饋
×