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

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例欣賞

網(wǎng)頁(yè)設(shè)計(jì)中使用輪廓框元素的案例不多。但實(shí)際上,這些纖細(xì)的、整潔的輪廓框效果極佳。為了保證效率的最大化,輪廓框一般采用純色線條,這樣便能產(chǎn)生前景與背景的明顯對(duì)照。黑和白,是最傳統(tǒng)的配色,以其對(duì)比強(qiáng)烈,效果突出而著稱。因此很多輪廓框采用了白色線條。除了顏色,線條的粗細(xì)也是一大考量,纖細(xì)的線條讓人感覺(jué)精致細(xì)膩,粗厚的線條顯得異常醒目。

下面,圖趣網(wǎng)收集了一些網(wǎng)頁(yè)設(shè)計(jì)中輪廓框應(yīng)用的案例。

 

OlivierStaub

此網(wǎng)頁(yè)設(shè)計(jì)一反傳統(tǒng),對(duì)菜單采取了簡(jiǎn)化設(shè)計(jì),蔚為壯觀的全屏圖像滾動(dòng)。厚重的輪廓狂和粗字體極具視覺(jué)沖擊效應(yīng)。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

FlindersStreetStationDesignCompetition

這個(gè)網(wǎng)站由一大堆輪廓框組成,線條很厚。輪廓框中填充了柔和的色調(diào),功能為按鈕。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

OlaKvernberg.

干凈整潔,頗具視覺(jué)吸引力。設(shè)計(jì)師成功的融入了個(gè)人風(fēng)格,極具創(chuàng)意和吸引力的主頁(yè)。盡管主頁(yè)采用了單色設(shè)計(jì),但是紫色輪廓框線條很好的進(jìn)行了調(diào)和,讓整體顯得錯(cuò)落有致。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

RomainBriaux

午夜巴黎。醒目而又精致的輪廓框讓整個(gè)網(wǎng)站看起來(lái)很高端。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Husenbaba

極簡(jiǎn)主義,看起來(lái)很“新鮮”,非常原創(chuàng)、純凈的網(wǎng)頁(yè)設(shè)計(jì)。設(shè)計(jì)師很明智的選用了纖細(xì)的線條,起到了很好的用戶引導(dǎo)作用。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Mixture

又是一例極簡(jiǎn)風(fēng)格網(wǎng)頁(yè)設(shè)計(jì),通過(guò)對(duì)輪廓框的運(yùn)用,提高了網(wǎng)頁(yè)的整潔感和適用性。網(wǎng)站的內(nèi)容跟原型設(shè)計(jì)有關(guān),那么使用輪廓框再合適不過(guò)了。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Unautreexpo.

架構(gòu)分明,組織有序,信息呈遞高效。設(shè)計(jì)師利用輪廓框作為導(dǎo)航,剔除了華而不實(shí)的裝飾,提供了整潔的即視感。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

HotelLagodiGarda

恬淡的配色,舒適的體驗(yàn),輪廓的加入稍稍收束了整體的輕盈感,加入了一點(diǎn)精致的韻味。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

MakersQuarter.

粗厚的有些“肥胖”的輪廓框。白亮的色彩讓輪廓框非常的醒目,與整體頁(yè)面也能夠很好的協(xié)調(diào)。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Pureplexity

精致的條紋風(fēng)格,非凡的背景圖像,纖細(xì)的線條讓視覺(jué)效果變得流暢。扁平風(fēng)格中的質(zhì)感。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Quechua

頗為有趣的設(shè)計(jì),重疊的輪廓線非常的有味。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

SteveAngello

單色照片背景,以輪廓框作為導(dǎo)航,放置在頁(yè)面的右下角,排列緊密,像是繪畫作品上的署名一般,給用戶帶來(lái)靈活的觸動(dòng)感。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

LCDV.

輪廓框和標(biāo)題緊密結(jié)合,超級(jí)纖細(xì)的字體,和奢華、壯觀的背景相得益彰,營(yíng)造出淡雅的品味。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

Hexaedro

3個(gè)六邊形蜂巢輪廓框,與眾不同,內(nèi)含簡(jiǎn)練的圖標(biāo),纖細(xì)的字體,再加上純黑的背景,嗯,視覺(jué)的“美味佳肴”

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

ExsudCreative.

細(xì)線條配粗字體,醒目。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

LifeofPi

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

iPolecat

看看這個(gè)網(wǎng)頁(yè)的頁(yè)底!真的很棒,很簡(jiǎn)潔!很贊的輪廓框微件。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

iErnest.

左右上角各一個(gè),基本導(dǎo)航,視覺(jué)效果也不錯(cuò)。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

RafalWasniowski

用戶引導(dǎo)友好,通過(guò)線條將用戶的注意吸引至一條一條的輪廓框。很有新意的創(chuàng)意。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

BeFIT.

干凈整潔,利用輪廓框來(lái)表現(xiàn)鏈接和菜單。

網(wǎng)頁(yè)設(shè)計(jì)輪廓框應(yīng)用案例介紹_新客網(wǎng)

結(jié)論

輪廓框就像烹飪中的調(diào)味品一樣,能起到化肥膩為鮮美的作用——能夠?qū)?fù)雜精致的背景變得簡(jiǎn)約。

而且輪廓框的強(qiáng)烈對(duì)照作用也不容忽視,也可起到打造視覺(jué)焦點(diǎn)的作用。

這種風(fēng)格的案例較少,因此如果在設(shè)計(jì)中采用輪廓框,會(huì)非常不拘一格,趕緊“框”起來(lái)吧!

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/de1833.html
10個(gè)國(guó)外非營(yíng)利組織網(wǎng)頁(yè)設(shè)計(jì)欣賞
創(chuàng)意的水平網(wǎng)頁(yè)導(dǎo)航設(shè)計(jì)欣賞
圖趣網(wǎng)微信
建議反饋
×