通常，一個單頁多頁面切換網(wǎng)站設(shè)計(jì)比一個多頁面站點(diǎn)需要花費(fèi)更多時間。挑戰(zhàn)在于，要把你想傳遞的內(nèi)容都展示在頁面上，你需要做大量的計(jì)劃。當(dāng)然，你可以隨心所欲地創(chuàng)建一個頁面，但是大多數(shù)訪問者也許在第三次滾動之后就會放棄。更好地構(gòu)建單頁網(wǎng)站的指南圍繞5個關(guān)鍵元素展開。
 

 

　　1、目標(biāo):確定網(wǎng)站的目標(biāo)并朝著這個目標(biāo)努力

　　在你明白你的網(wǎng)站的目標(biāo)之前，就匆忙開始你的設(shè)計(jì)是沒有意義的?；诰W(wǎng)站建設(shè)目標(biāo)，你將能夠更好地計(jì)劃它的結(jié)構(gòu)。你應(yīng)該尋找可能導(dǎo)致訪問者快速退出的原因。這甚至可能發(fā)生在訪客點(diǎn)擊網(wǎng)站行動按鈕之前，比如說網(wǎng)站加載速度過慢。一個單頁的網(wǎng)站需要把用戶的注意力引向一個單一的目標(biāo);這可能是:
 

　　●銷售產(chǎn)品
 

　　●展示作品集
 

　　●發(fā)布活動
 

　　Bistro Agency（http://www.bistroagency.cz/work/skoda-4x4/web/#4x4）
 

　　該網(wǎng)站的折疊切換產(chǎn)品的交互效果并沒有減慢其加載速度。
 

 

　　Be Moving網(wǎng)站（https://themes.muffingroup.com/）
 

　　這個單頁網(wǎng)站的特點(diǎn)是將靜態(tài)圖像展示成動態(tài)的。
 

 

　　Sheerlink（https://sheerlink.audio/）
 

　　這個網(wǎng)站也是一個很好的例子，說明了大型圖像和滑動切換面板在吸引用戶方面所扮演的重要角色。
 

 

　　2、文本:盡量簡化，讓它易于閱讀

　　在單頁網(wǎng)站中，在頁面上方填滿文字，很少有用戶會費(fèi)心向下滾動頁面。相反，你需要通過強(qiáng)調(diào)粗體標(biāo)題將文本數(shù)量保持在最低限度，你可以搭配簡短的段落和項(xiàng)目列表。避免在頁面的任何地方使用大段文本。將文本分成幾個部分，并將它們集成到視覺效果中。你可以通過多種手段，使文本有趣和容易理解。
 

　　Hello Alfred（https://www.helloalfred.com/）
 

　　網(wǎng)站導(dǎo)航位于網(wǎng)站的上方，簡潔突出的標(biāo)題和正文有助于核心信息的傳遞。
 

 

　　Mercedes-Benz（https://www.mercedes-benz.com/en/mercedes-benz/vehicles/passenger-cars/eqc/the-eqc/）
 

　　當(dāng)汽車品牌達(dá)到了奔馳這個品牌的高度，多關(guān)注高質(zhì)量的圖像，極簡化文字就足夠了。該網(wǎng)站的360°旋轉(zhuǎn)背景也讓汽車更加真實(shí)形象，可以讓用戶多角度觀察它。
 

 

　　3、視覺效果:識別正確的模式，巧妙地使用負(fù)空間

　　人們傾向于以F模式閱讀文本，而以Z模式查看圖像。因此，正確放置文本和圖像以保持平衡的視覺流是有必要的。在這個區(qū)域中，大量使用留白有助于分隔各個部分。你可以使文本易于閱讀，讓人們參與其中。
 

 

　　Dribbble’s Year in Review（https://dribbble.com/year/2018/）
 

　　本例子中，設(shè)計(jì)者運(yùn)用幾個不同的設(shè)計(jì)原則，以最大限度地創(chuàng)造一個醒目的視覺主題。
 

 

　　Nasal Drops（https://en.soplyam.net/）
 

　　該推廣頁面可能主題不是特別突出。但是由于巧妙地使用了幻燈片、留白和動畫，設(shè)計(jì)打破了常規(guī)，畫面看起來還是很新穎。