互聯(lián)網(wǎng)最令人著迷的地方在于它會(huì)不斷地進(jìn)化，每年都會(huì)不斷涌現(xiàn)新的工具和技術(shù)替換過時(shí)者，用新的解決方案來搞定各種問題。

單頁設(shè)計(jì)在前幾年就已經(jīng)出現(xiàn)，并且愈演愈烈直到今年成為當(dāng)仁不讓的網(wǎng)頁設(shè)計(jì)大趨勢(shì)。它已經(jīng)站在流行最前線，今天我們來聊一聊為什么它會(huì)這么火。

什么是單頁式網(wǎng)站設(shè)計(jì)？

界定一個(gè)網(wǎng)站是否是單頁設(shè)計(jì)很簡單，顧名思義，單頁設(shè)計(jì)就是一個(gè)網(wǎng)站僅需一個(gè)URL，進(jìn)入之后只需要縱向或者橫向滾動(dòng)就可以瀏覽信息而無需點(diǎn)擊。看看下面這個(gè)例子：

Terra-digitalis

這是一個(gè)非標(biāo)準(zhǔn)的單頁設(shè)計(jì)，網(wǎng)頁中使用熱氣球元素來引導(dǎo)用戶進(jìn)行瀏覽。

選擇單頁設(shè)計(jì)的原因很多，但是其中有五個(gè)主要的優(yōu)勢(shì)值得設(shè)計(jì)師為之側(cè)目。

1、所有內(nèi)容都在一個(gè)頁面之內(nèi)

一個(gè)單頁網(wǎng)站的頁面空間是有限的，所以其中的內(nèi)容需要足夠有條理，將最希望用戶看到的內(nèi)容呈現(xiàn)在他們面前。單頁式設(shè)計(jì)對(duì)于頁面長度并無限制，即使需要呈現(xiàn)的內(nèi)容很多，也不要急吼吼地將圖文堆砌在一起，合理運(yùn)用留白可以帶來非常不錯(cuò)的視覺效果。

在有限的頁面空間中呈現(xiàn)內(nèi)容是需要講究技巧的，字體、圖像、排版、列表、信息圖等元素的合理使用，都值得仔細(xì)推敲。

當(dāng)你打算將一個(gè)傳統(tǒng)網(wǎng)站重新設(shè)計(jì)成為一個(gè)單頁網(wǎng)站的時(shí)候，情形就變得非常有意思了，因?yàn)檫@意味著你多年以來為這個(gè)傳統(tǒng)網(wǎng)站所添加的內(nèi)容，在這個(gè)時(shí)候都需要進(jìn)行精簡整合了，把亂七八糟一塌糊涂的信息收拾得井井有條。這個(gè)過程就像是從郊區(qū)2層小樓搬到市區(qū)兩居室一樣，不斷去蕪存菁。

重新組織整理網(wǎng)站的另外一個(gè)理由，是用戶喜歡簡約整潔的頁面。通常，用戶為了找到他們需要的產(chǎn)品、服務(wù)或者信息，需要翻閱海量的頁面，瀏覽各種各有的文章和列表。問題在于，用戶沒法仔細(xì)閱讀每一個(gè)字，不停的掃視文章尋找關(guān)鍵詞，最終找到的可能就是一句話、一個(gè)鏈接或者一張圖片。這就是為什么單頁網(wǎng)站流行的原因：用戶不用在頁面、Tab和長篇大論的文章之間來回切換了，鼠標(biāo)滾輪一擼到底，就可以清晰地瀏覽核心內(nèi)容和重點(diǎn)信息，找到想要的信息。

即使你真的有大量的信息，大把的圖片，以及無數(shù)“不得不”置于網(wǎng)頁上的內(nèi)容，你也有必要用心嘗試一下設(shè)計(jì)成單頁網(wǎng)站。為什么不呢？很多時(shí)候你至少要嘗試一下那些讓你感到害怕恐懼或者“看起來不可行”的方案，成功了可以收獲經(jīng)驗(yàn)，失敗了也提升了技巧，不是么？看看下面兩個(gè)案例：

Agencysurvivalkits

這個(gè)單頁網(wǎng)站使用了視差滾動(dòng)式的設(shè)計(jì)，網(wǎng)頁向下滾動(dòng)的過程中使用了很多典型的視差滾動(dòng)網(wǎng)頁的圖片設(shè)計(jì)技巧。

Burkecomfortdental

這個(gè)牙醫(yī)網(wǎng)站使用了綠色的色調(diào)，手繪的效果也拿捏的不錯(cuò)，垂直滾動(dòng)的過程中伴隨著動(dòng)畫效果。和許多同類網(wǎng)站一樣，滾動(dòng)到底部就是分享按鈕了。

2、趨勢(shì)

不論如何單頁設(shè)計(jì)是大勢(shì)所趨。潮流和趨勢(shì)來來去去是沒錯(cuò)，但是誰原因蹲在陰影里坐視潮流和趨勢(shì)從眼前溜走呢？喜歡就是放肆，愛就是克制。在你深愛上某種潮流之前，先放肆地試試吧。在單頁設(shè)計(jì)最流行的今年，不要錯(cuò)過。

有些事情并不難，不是么？你所得到的不僅僅是一個(gè)時(shí)尚的單頁網(wǎng)站，簡單愉悅的用戶體驗(yàn)也是你的用戶的訴求，只需要滾動(dòng)就可以完整瀏覽的單頁不會(huì)令人失望的。

Lip Lover Website Design

看看這個(gè)網(wǎng)頁設(shè)計(jì)的案例吧，當(dāng)時(shí)尚和鮮活的色彩與視差滾動(dòng)相遇在單頁網(wǎng)站的時(shí)候，感覺就是這么美妙。

3、故事

與用戶進(jìn)行溝通，最有效的方法之一就是講故事。比起千奇百怪的頁面優(yōu)化，一個(gè)清晰明了恰如其分的故事來的更靠譜。如果你也喜歡用網(wǎng)站講述故事，這篇《網(wǎng)頁設(shè)計(jì)新思路！用故事來吸引用戶》千萬不要錯(cuò)過，戳下圖跳轉(zhuǎn)~

對(duì)于講故事最常見的誤解就是它必須以一段文字、一組圖片或者一個(gè)視頻的形式而存在，與設(shè)計(jì)無關(guān)。但事實(shí)并非如此。單頁式的網(wǎng)頁設(shè)計(jì)本身就是一個(gè)承載一系列內(nèi)容的絕佳載體，流動(dòng)性的頁面與連貫性的內(nèi)容在邏輯上完全相合。接下來，我們看看單頁式網(wǎng)頁設(shè)計(jì)所涉及到的一些網(wǎng)頁元素：

• 圖片：圖片是最重要的元素之一，它能強(qiáng)化網(wǎng)頁視覺的吸引力，推動(dòng)故事的發(fā)展，調(diào)劑視覺讓用戶遠(yuǎn)離沉悶。
• 視頻：視頻是主動(dòng)輸出信息的載體，可以以更清晰更主動(dòng)的方式傳遞信息給用戶。視頻可以承載的信息量非常可觀，同時(shí)占據(jù)版面也不會(huì)太大，越來越多的網(wǎng)站開始選擇使用視頻來直面用戶。
• 音頻：音頻確實(shí)沒有視頻出現(xiàn)的比例高，但是它無疑也是一個(gè)極具潛質(zhì)的載體。用來作為背景音樂的時(shí)候，它可以渲染氛圍，作為單獨(dú)音頻文件播放的時(shí)候，也可以講述故事。
• 排版：排版很重要，它決定了信息要如何在網(wǎng)頁上展現(xiàn)。很多網(wǎng)站并不重視排版，至少不太重視網(wǎng)頁布局、文字、色彩之間的排版關(guān)系。
• 滾動(dòng)：可能你之前未曾仔細(xì)注意過頁面滾動(dòng)，但是它的確是影響講故事的關(guān)鍵因素。多頁式網(wǎng)站在信息呈現(xiàn)上相對(duì)支離破碎，而在單頁設(shè)計(jì)之下，流暢的滾動(dòng)將信息源源不斷地傳遞給用戶，勾起他們的好奇心一直閱讀下去。這就像閱讀一本引人入勝的故事書，“接下來會(huì)怎樣？”簡單的向下滾動(dòng)，答案就在下面，就這么簡單！

The Art of Texture Movie Website

這個(gè)網(wǎng)站充分使用了視頻、圖片和滾動(dòng)效果來呈現(xiàn)故事。

4、輕松導(dǎo)航

導(dǎo)航是網(wǎng)頁瀏覽的基石。不論是商業(yè)項(xiàng)目網(wǎng)站還是作品集展示頁面，導(dǎo)航欄都是最重要的組成部分。復(fù)雜的導(dǎo)航欄不僅需要耗費(fèi)大量的時(shí)間來進(jìn)行設(shè)計(jì)，也會(huì)讓用戶敬而遠(yuǎn)之。這也是為什么單頁設(shè)計(jì)會(huì)逐漸流行甚至占據(jù)主流。

單頁網(wǎng)站讓信息呈現(xiàn)更加扁平，最大化地降低了獲取信息的難度。鼠標(biāo)滾動(dòng)，信息就全部展現(xiàn)在用戶面前，還有什么方式比這個(gè)更加簡單？

如果你是一個(gè)極富創(chuàng)意的設(shè)計(jì)師，或許可以輕松駕馭橫向式的單頁網(wǎng)站設(shè)計(jì)，甚至其他的非標(biāo)準(zhǔn)式滾動(dòng)瀏覽方式——比如頁面滾動(dòng)方向一會(huì)兒向左一會(huì)兒向下——總而言之，單頁網(wǎng)站設(shè)計(jì)的創(chuàng)意空間無限大。

PC Baruk Website

這個(gè)網(wǎng)站設(shè)計(jì)得賞心悅目，用戶可以直接滾動(dòng)，也可以使用點(diǎn)擊來控制瀏覽的節(jié)奏。內(nèi)容被安置在一個(gè)頁面上，但是分組呈現(xiàn)的方式，降低了持續(xù)瀏覽帶來的疲憊。

5、適應(yīng)移動(dòng)設(shè)備

從某種程度上適應(yīng)移動(dòng)設(shè)備和講故事的核心非常接近，導(dǎo)航才是重點(diǎn)。

響應(yīng)式設(shè)計(jì)的優(yōu)勢(shì)相比你已經(jīng)耳朵聽出繭子了，而我想說的是，單頁式網(wǎng)站的設(shè)計(jì)本就是響應(yīng)式設(shè)計(jì)概念的一部分。諸如鼠標(biāo)懸停下拉框這樣的導(dǎo)航欄設(shè)計(jì)，在普通網(wǎng)站中很常見，但是要進(jìn)行響應(yīng)式設(shè)計(jì)中，在移動(dòng)端中正常使用并不方便，如果在移動(dòng)端網(wǎng)頁中將其舍棄又不太合適。所以，要想在多屏幕多設(shè)備上保持體驗(yàn)的一致，單頁式設(shè)計(jì)的很多思路反而比傳統(tǒng)的網(wǎng)站更有優(yōu)勢(shì)，那些簡單直觀的導(dǎo)航更容易遷移到移動(dòng)端頁面上，令體驗(yàn)一致，取悅用戶。

是否應(yīng)該將多頁面的網(wǎng)站重新設(shè)計(jì)成單頁網(wǎng)站？

假使你已經(jīng)擁有一個(gè)現(xiàn)成的網(wǎng)站，它是一個(gè)典型的多頁面式的網(wǎng)站，你需要為之重新設(shè)計(jì)，有幾個(gè)選項(xiàng)可供選擇，一保留現(xiàn)有結(jié)構(gòu)和框架，在網(wǎng)站的設(shè)計(jì)風(fēng)格和細(xì)節(jié)上做文章，另外一種方案是放棄現(xiàn)有的結(jié)構(gòu)和內(nèi)容，重新設(shè)計(jì)成單頁式網(wǎng)站。這兩種選擇要如何取舍，主要取決于網(wǎng)站本身的結(jié)構(gòu)、內(nèi)容和發(fā)展方向。如果網(wǎng)站的結(jié)構(gòu)和內(nèi)容并沒有想象中那么重要的話，那么你是時(shí)候考慮是否跟隨設(shè)計(jì)趨勢(shì)，設(shè)計(jì)屬于自己的單頁網(wǎng)站了。

接下來我們看看案例吧~

案例

Game of Thrones Helper

Happy 25th Birthday Game Boy

World of SWISS

2Complex Designer

CUPS Annual Report

Guillaume JUVENET Portfolio

Kickdrop

Brancott Estate Pioneers

Havoc Inspired Ltd

BrightMedia

Shokunin

Bear On Unicycle

Fap Fapp

Ting

PhotoshopKiller

The Cream of Manchester Portfolio

Sanseveria

The Wedding Of Vanti & Agus

Appliance Tec Limited

Axial Apartments

2014年，值得你細(xì)嚼慢咽的網(wǎng)頁設(shè)計(jì)趨勢(shì)！

先來一碗當(dāng)紅炸子雞Material Design！
《超全面總結(jié)！深聊MATERIAL DESIGN引領(lǐng)的設(shè)計(jì)趨勢(shì)》

再干了這杯口感香醇的響應(yīng)式設(shè)計(jì)！
《干貨！設(shè)計(jì)師必讀的15個(gè)響應(yīng)式網(wǎng)頁設(shè)計(jì)教程》

酒足飯飽在來一盤棒棒噠“幽靈按鈕”！
《網(wǎng)頁設(shè)計(jì)新趨勢(shì)！你聽說過“幽靈按鈕”嗎？》

原文地址：instantshift

優(yōu)設(shè)網(wǎng)翻譯：@陳子木；via：優(yōu)設(shè)網(wǎng)