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

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

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

OlivierStaub

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

FlindersStreetStationDesignCompetition

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

OlaKvernberg.

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

RomainBriaux

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

Husenbaba

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

Mixture

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

Unautreexpo.

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

HotelLagodiGarda

恬淡的配色，舒適的體驗，輪廓的加入稍稍收束了整體的輕盈感，加入了一點精致的韻味。

MakersQuarter.

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

Pureplexity

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

Quechua

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

SteveAngello

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

LCDV.

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

Hexaedro

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

ExsudCreative.

細線條配粗字體，醒目。

LifeofPi

iPolecat

看看這個網(wǎng)頁的頁底!真的很棒，很簡潔!很贊的輪廓框微件。

iErnest.

左右上角各一個，基本導(dǎo)航，視覺效果也不錯。

RafalWasniowski

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

BeFIT.

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

結(jié)論

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

而且輪廓框的強烈對照作用也不容忽視，也可起到打造視覺焦點的作用。

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