@十萬(wàn)個(gè)為什麼：文字與背景圖片是每個(gè)現(xiàn)代網(wǎng)站都具有的重要元素,這兩項(xiàng)首先映入用戶(hù)眼簾，使他們熟悉網(wǎng)站標(biāo)志、簡(jiǎn)介和導(dǎo)航。搭配合適的照片或圖畫(huà)，創(chuàng)造所需氛圍。

文字與圖片在網(wǎng)站的視覺(jué)和內(nèi)容方面同時(shí)發(fā)揮作用，它們的組合極為有效，甚至只用這兩種元素就足以建立一個(gè)與眾不同魅力十足的歡迎頁(yè)。它們?cè)谝黄鹂梢源蚱迫魏蜗拗疲擅畹叵嗷ソY(jié)合與補(bǔ)充，腦海中的任何想法，都可以通過(guò)它們實(shí)現(xiàn)。

相關(guān)推薦：
《超贊！高大上的電商網(wǎng)站案例集合》
《獨(dú)辟蹊徑！網(wǎng)頁(yè)設(shè)計(jì)中的框元素運(yùn)用》
《受稱(chēng)贊的35個(gè)簡(jiǎn)約風(fēng)格網(wǎng)頁(yè)欣賞》

今天我考慮嘗試一種更為極簡(jiǎn)主義的方式，讓頁(yè)面除了這兩項(xiàng)基本元素之外再別無(wú)他物。我深入了解收集了一些網(wǎng)站案例，它們的首頁(yè)都只包含背景圖和精巧的文字。

極簡(jiǎn)風(fēng)格歡迎頁(yè)：文字與圖片

Life of Pi

少年派的奇幻漂流冒險(xiǎn)氛圍十足。歡迎頁(yè)面華麗的朦朧風(fēng)格，和粗邊框中的樸素白色文字都令人著迷

Levante

Levante用優(yōu)雅的女性化字體來(lái)裝飾輪播大圖。頂部細(xì)長(zhǎng)的深色導(dǎo)航條，用整齊的淺色字與主頁(yè)相互映襯

Allamardesign

蒙著白色輕紗的城市風(fēng)景圖，是Allamar Design的重要元素，讓網(wǎng)站看起來(lái)干凈整潔。深色的圓形LOGO和標(biāo)題優(yōu)雅結(jié)合，立刻吸引觀眾的注意力，盡管相對(duì)整個(gè)頁(yè)面它其實(shí)很小

Cloudsovercuba

Clouds over Cuba與上個(gè)例子剛好形成鮮明對(duì)比。這個(gè)網(wǎng)站也用深色的城鎮(zhèn)風(fēng)景圖作為背景，白色細(xì)字體標(biāo)語(yǔ)看起來(lái)非常顯眼

Betatakaki

Beta Takaki的動(dòng)態(tài)效果讓人印象深刻，幾張辦公場(chǎng)所的特寫(xiě)交替切換，使得前景元素躍然屏幕上（這條的意思糾結(jié)了好久，打開(kāi)網(wǎng)站一看才明白，原來(lái)背景圖是會(huì)動(dòng)的，用了近年流行的滾動(dòng)視差效果）

Edit

EDIT OpenDay 2013采用了極度銳利的字體和平面構(gòu)成風(fēng)格，簡(jiǎn)單原始的風(fēng)格吸引用戶(hù)

Iuqo

Iuqo用的不單單是背景圖片，而是一段讓用戶(hù)在云中飛行的迷人視頻。緊湊排布的扁長(zhǎng)標(biāo)題、輪廓式LOGO和底部?jī)蓚€(gè)菜單項(xiàng)，使主頁(yè)看起來(lái)極為通透

KIN HR

KIN HR展現(xiàn)了一副團(tuán)隊(duì)工作過(guò)程中的場(chǎng)景，配上相當(dāng)大的標(biāo)題，厚實(shí)的標(biāo)準(zhǔn)字體使頁(yè)面看起來(lái)非常棒

Borgo 27

柔和、光線明亮的背景照片，還有標(biāo)題上那醒目的半透明圓圈，造就了Borgo 27溫暖的氛圍

Deleting Borders

Deleting Borders的顯著特征，是無(wú)出其右的纖細(xì)標(biāo)語(yǔ)，占據(jù)著整個(gè)設(shè)計(jì)的中央部分。暗淡、帶點(diǎn)雜色的背景圖與微微透明的高調(diào)字體完美相配

House

House有著格調(diào)迷人的清新夏日風(fēng)格。白色樸素的字體設(shè)計(jì)LOGO和lomo風(fēng)格全屏背景圖極好地搭配

Basader

Basader又是個(gè)非常棒的全屏視頻背景案例。碩大的黑色傾斜文字，與力量十足的憤怒海洋景象完美匹配

Epok Design

Epok Design基于各種視差效果，很好地在歡迎頁(yè)表現(xiàn)了公司信息，還有與之相配的照片和有趣的介紹

Le Rockwood

Le Rockwood被設(shè)計(jì)成常用的黑白色調(diào)，它非常依賴(lài)這張情感強(qiáng)烈的照片，照片刻意加深處理過(guò)，還有厚實(shí)奪目的字體

Web Akademie

Web Akademie使用了非常朦朧的背景照片和與眾不同的圓潤(rùn)字形，為網(wǎng)站營(yíng)造出精致時(shí)尚的外觀

Samaritaine

Samaritaine的手法是使用引人入勝的視頻簡(jiǎn)介，以迷人的屏幕保護(hù)結(jié)束。后者依賴(lài)柔和的顏色組合，和輪廓圓潤(rùn)的巨大粗字體，來(lái)增加額外的沖擊力

Wearegoat

Wearegoat把屏幕分為兩部分，并且將用戶(hù)注意力集中在主要方面。第一部分用于自我介紹（通過(guò)一小段描述文字呈現(xiàn)），第二部分直觀展現(xiàn)日常工作場(chǎng)景

Digital Park

Digital Park以與眾不同的三維多邊形為亮點(diǎn)，這必然為中央部分的設(shè)計(jì)增加了一點(diǎn)縱深。除此之外，巨大的黑色非正式字體和單調(diào)的灰色背景看起來(lái)很協(xié)調(diào)

Papercutart

Papercutart. 灰色與黑白照片、大量留白，還有一小段有活潑手寫(xiě)體的文字，給網(wǎng)站一種高雅的感覺(jué)

Demi Creative

溫暖的圖片、極度突出的標(biāo)題，Demi Creative漂亮地將兩者結(jié)合起來(lái)，為網(wǎng)站注入象征主義

Mountain Standard Vail

在復(fù)古導(dǎo)航和頗具創(chuàng)意的LOGO支持下，Mountain Standard Vail展示出令人印象極為深刻的風(fēng)格

Swedish Seasons

Swedish Seasons展現(xiàn)一副華麗的風(fēng)景圖，覆蓋著的深色半透明三角形上，排列著菜單與網(wǎng)站標(biāo)題?？傮w來(lái)看，這個(gè)網(wǎng)站有著精致高雅的外觀

My life in 20 years

My life in 20 years真是個(gè)與眾不同概念獨(dú)特的網(wǎng)站。首頁(yè)上包含了抽象線條背景和巨大簡(jiǎn)單的字體，直接將作者的想法擺在最顯要位置

Loft City Church

Loft City Church包含一個(gè)全屏圖片輪播，向用戶(hù)展示教堂活動(dòng)信息。一組完美排列的巨大標(biāo)題，清晰明了闡述這個(gè)網(wǎng)站的設(shè)計(jì)美學(xué)

Moio

Moio用了令人驚奇的單色矢量LOGO和粗獷字體，為網(wǎng)站注入運(yùn)動(dòng)風(fēng)格的調(diào)調(diào)

Aguru Digital Agency

Aguru Digital Agency給人藝術(shù)性的印象。深色的繪畫(huà)背景、微妙精致的菜單，還有優(yōu)雅卻有些許歡快的字體設(shè)計(jì)LOGO，傳遞出很棒的平衡感

反思

通常設(shè)計(jì)師更喜歡用激動(dòng)人心的背景圖片，再稍稍加暗處理，可以避免對(duì)比不夠明顯。近乎純白的亮色在任何此類(lèi)背景上都華美清晰可辨，所以你有機(jī)會(huì)一箭雙雕。首先，你不用浪費(fèi)時(shí)間制作非凡的字體——常規(guī)字體就可以了，你要做的只是選擇正確的粗細(xì)和尺寸；第二，你也能在不降低可讀性的情況下，用一張別致的背景圖迷倒用戶(hù)。

原文地址：designmodo
譯文地址：colachan
譯者：@十萬(wàn)個(gè)為什麼

 
================關(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ì)微博：擁有粉絲量62萬(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ò)掃描下方二維碼快速添加：