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

推薦閱讀：
《超獨(dú)特！優(yōu)秀網(wǎng)格布局網(wǎng)頁(yè)20例》
《超個(gè)性！30個(gè)引人入勝的產(chǎn)品展示網(wǎng)頁(yè)設(shè)計(jì)》
《免費(fèi)下載！25款精致的WordPress模板》

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

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

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

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

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

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

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ò)了。

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

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

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

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

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

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

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

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

Exsud Creative.
細(xì)線條配粗字體，醒目。

Life of Pi

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

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

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

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

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

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

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

原文地址:?designmodo
優(yōu)設(shè)網(wǎng)翻譯:@MartinRGB

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量60萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：