網頁設計中使用輪廓框元素的案例不多。但實際上,這些纖細的、整潔的輪廓框效果極佳。為了保證效率的最大化,輪廓框一般采用純色線條,這樣便能產生前景與背景的明顯對照。黑和白,是最傳統的配色,以其對比強烈,效果突出而著稱。因此很多輪廓框采用了白色線條。除了顏色,線條的粗細也是一大考量,纖細的線條讓人感覺精致細膩,粗厚的線條顯得異常醒目。
下面,本文收集了一些網頁設計中輪廓框應用的案例。
Olivier Staub
此網頁設計一反傳統,對菜單采取了簡化設計,蔚為壯觀的全屏圖像滾動。厚重的輪廓狂和粗字體極具視覺沖擊效應。

Flinders Street Station Design Competition
這個網站由一大堆輪廓框組成,線條很厚。輪廓框中填充了柔和的色調,功能為按鈕。

Ola Kvernberg.
干凈整潔,頗具視覺吸引力。設計師成功的融入了個人風格,極具創意和吸引力的主頁。盡管主頁采用了單色設計,但是紫色輪廓框線條很好的進行了調和,讓整體顯得錯落有致。

Romain Briaux
午夜巴黎。醒目而又精致的輪廓框讓整個網站看起來很高端。

Husenbaba
極簡主義,看起來很“新鮮”,非常原創、純凈的網頁設計。設計師很明智的選用了纖細的線條,起到了很好的用戶引導作用。

Mixture
又是一例極簡風格網頁設計,通過對輪廓框的運用,提高了網頁的整潔感和適用性。網站的內容跟原型設計有關,那么使用輪廓框再合適不過了。

Un autre expo.
架構分明,組織有序,信息呈遞高效。設計師利用輪廓框作為導航,剔除了華而不實的裝飾,提供了整潔的即視感。

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

Makers Quarter.
粗厚的有些“肥胖”的輪廓框。白亮的色彩讓輪廓框非常的醒目,與整體頁面也能夠很好的協調。

Pureplexity
精致的條紋風格,非凡的背景圖像,纖細的線條讓視覺效果變得流暢。扁平風格中的質感。

Quechua
頗為有趣的設計,重疊的輪廓線非常的有味。

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

LCDV.
輪廓框和標題緊密結合,超級纖細的字體,和奢華、壯觀的背景相得益彰,營造出淡雅的品味。

Hexaedro
3個六邊形蜂巢輪廓框,與眾不同,內含簡練的圖標,纖細的字體,再加上純黑的背景,嗯,視覺的“美味佳肴”

Exsud Creative.
細線條配粗字體,醒目。

Life of Pi

iPolecat
看看這個網頁的頁底!真的很棒,很簡潔!很贊的輪廓框微件。

iErnest.
左右上角各一個,基本導航,視覺效果也不錯。

Rafal Wasniowski
用戶引導友好,通過線條將用戶的注意吸引至一條一條的輪廓框。很有新意的創意。

BeFIT.
干凈整潔,利用輪廓框來表現鏈接和菜單。

結論
輪廓框就像烹飪中的調味品一樣,能起到化肥膩為鮮美的作用——能夠將復雜精致的背景變得簡約。
而且輪廓框的強烈對照作用也不容忽視,也可起到打造視覺焦點的作用。
這種風格的案例較少,因此如果在設計中采用輪廓框,會非常不拘一格,趕緊“框”起來吧!