立竿見影！掌握單頁網(wǎng)站設(shè)計的5大技巧

的確！單頁設(shè)計已然是網(wǎng)頁設(shè)計的大趨勢了，許多流行的設(shè)計元素和設(shè)計方法都逐漸與這種網(wǎng)頁設(shè)計手法融合到一起，越來越多的設(shè)計師和企業(yè)機構(gòu)開始選擇單頁網(wǎng)站作為他們溝通世界的門戶，而用戶也開始接觸越來越多的形式多樣的單頁網(wǎng)站。

但是在很久之前，在單頁網(wǎng)站還非常簡單的階段，很多人都認(rèn)為這是一種非常Low的網(wǎng)頁設(shè)計方式，直接粗暴如同商業(yè)名片一般的網(wǎng)頁結(jié)構(gòu)怎么看都和高大上沒有血緣關(guān)系，誰又會想到這種設(shè)計方式在今天會如此流行呢？在設(shè)計師們的不懈探究之下，單頁設(shè)計已經(jīng)摘掉了混亂單調(diào)的帽子，構(gòu)建起了一套相對比較完善的設(shè)計體系，保持簡潔而漂亮的設(shè)計，重視內(nèi)容，強調(diào)清晰明了的表達(dá)。從用戶體驗的角度上來看，單頁設(shè)計確實有其優(yōu)勢也有缺陷，但是值得注意的是，用戶的確是喜歡單頁網(wǎng)站的瀏覽方式，這也是單頁設(shè)計流行開來的基石。

ingramcoleland

雖然詳細(xì)的統(tǒng)計數(shù)據(jù)尚未公布，但是許多學(xué)者和專家都認(rèn)為，比起傳統(tǒng)的多頁式網(wǎng)站，單頁網(wǎng)站的轉(zhuǎn)化率更高。著名網(wǎng)站37signals曾經(jīng)公布過這樣一個數(shù)據(jù)，在網(wǎng)站改版成為單頁設(shè)計之后，網(wǎng)站的用戶注冊上升了37.5%，這種提升效率用立竿見影來形容好不為過。

當(dāng)然，這并不奇怪。

·單頁網(wǎng)站導(dǎo)航方式簡單，用戶不易迷路，只需上下滾動。
·單頁網(wǎng)站內(nèi)容更專注，信息傳遞更清晰，更有針對性。
·單頁網(wǎng)站幾乎可以在全平臺設(shè)備上流暢瀏覽，滾動和滑動瀏覽替代了點擊

plannr

而設(shè)計單頁網(wǎng)站最大的挑戰(zhàn)在于讓用戶保持滾動頁面來瀏覽內(nèi)容。大膽的色彩使用和漂亮的排版并不能一直吸引用戶的注意力。這個時候，如果能做好用戶數(shù)據(jù)分析和A/B測試，能幫你距離用戶的心理需求更近，設(shè)計出更貼合需求的網(wǎng)頁。看過無數(shù)的案例和教程，還是做不出好的單頁設(shè)計？你需要的，也許就是把握好下面5條設(shè)計建議，它們就是設(shè)計好單頁網(wǎng)站的精髓。

1、將內(nèi)容分割成塊

當(dāng)你打算通過一個單頁來講述一個故事的時候，千萬要注意一點：不要讓故事太拖沓，不要讓信息過載。所以，合理切割內(nèi)容很重要，不要讓過多內(nèi)容擠壓在一個區(qū)塊。從頭到尾都需要盡量保持媒體內(nèi)容的清晰利落，在設(shè)計內(nèi)容結(jié)構(gòu)的時候，需要保持邏輯通順和順序清晰（what->why->how->where->when），下面的網(wǎng)頁設(shè)計就非常值得借鑒：sdesignawatch.mijlo.com 和 agencysurvivalkits.com.

survival-kit

另外一種保持吸引用戶吸引力的方法，就是使用圖文搭配的方式來講故事。故事會將核心內(nèi)容以跟易于接受的方式表達(dá)出來，它的自然邏輯會吸引用戶讀下去，嚴(yán)格來說，它在內(nèi)容營銷的范疇以內(nèi)。這并不是意味著你需要聘請一個寫手來幫你來寫故事，你需要做的是專注內(nèi)容和它感性的一面，并嘗試讓你的網(wǎng)頁更加人性化。

mijlo

2、設(shè)計快速訪問導(dǎo)航欄

單頁網(wǎng)站通常是用滾動的方式來瀏覽更多內(nèi)容的，很多網(wǎng)站干脆是從頭滾到尾。用戶打開網(wǎng)頁，仿佛潛入內(nèi)容的海洋，壓根不知道網(wǎng)頁的盡頭在哪里，這種設(shè)計的潛在危險在于，它可能會降低用戶心理上的安全感。于是，一種比較合理的解決方案就出現(xiàn)了：將傳統(tǒng)的導(dǎo)航欄設(shè)計融入單頁設(shè)計。導(dǎo)航欄在網(wǎng)頁的頂部或者兩側(cè)常駐停留，隨著滾動而改變，同時提醒用戶TA在什么位置，同時保證了易用性和內(nèi)心的潛在訴求。

當(dāng)網(wǎng)頁足夠長的時候，加上導(dǎo)航、回到頂部按鈕甚至滾動條都可以強化用戶體驗。

3、號召用戶行動

當(dāng)你問數(shù)字媒體營銷者影響轉(zhuǎn)化率最重要的因素是什么的時候，答案通常是“號召行動起來”（CTA）。當(dāng)然，這種精心策劃的CTA行為僅僅只是網(wǎng)站設(shè)計的一部分。為了特定的目標(biāo)，號召用戶行動的CTA行為其實無處不在，吸引用戶下載APP，引導(dǎo)用戶體驗DEMO，勾引用戶注冊、填寫表格，等等等等。這是一個酒香也怕巷子深的時代，會哭的孩子有奶吃，會吆喝才能吸引更多用戶。

cronnection

根據(jù)這個名叫KISSMetrics的案例研究，合理使用CTA行動號召能提高591%的轉(zhuǎn)化率，效果有多明顯就不言而喻了吧。

好在單頁網(wǎng)頁中信息和內(nèi)容更加集中清晰，所以CTA的使用效果也更加明顯。一方面是頁面通常更加簡約，各個部分分工明細(xì)，另一方面，當(dāng)你使用故事來引導(dǎo)用戶瀏覽的時候，你可以微妙地影響用戶的心態(tài)，在高潮——或者最合理的而地方，來引導(dǎo)用戶進(jìn)行操作。

當(dāng)然，還需要補充一句：做好用戶數(shù)據(jù)分析和A/B測試，確定網(wǎng)站適合使用哪種CTA，因為有的時候，即使是字體和色彩的變化，都可能明顯影響轉(zhuǎn)化率。

klyme

4、保持簡約，避免枯燥

傳統(tǒng)網(wǎng)頁設(shè)計中，很重要一個組成部分是設(shè)計網(wǎng)站主題，并且為內(nèi)頁準(zhǔn)備若干模板，應(yīng)對不同的需求。設(shè)計單頁網(wǎng)站的時候，你需要面臨更多的挑戰(zhàn)，但是這也意味著你有著更大的創(chuàng)作空間。隨著近年來CSS3，HTML5和JavaScript的快速發(fā)展，單頁設(shè)計可以在保持簡約的同時，還能引人入勝。那些靈動而漂亮的的轉(zhuǎn)場動畫效果都是細(xì)節(jié)，但是哪個體驗優(yōu)異的網(wǎng)站不是這些精致的細(xì)節(jié)組成的呢？

當(dāng)然，千萬不要濫用，過猶不及，得不償失。

wristim

5、保持輕量級

一個緩慢而加載時間漫長的單頁網(wǎng)站是失敗的。由于單頁網(wǎng)站上的內(nèi)容都集中在一個頁面上，所以通常單頁網(wǎng)站會比其他的網(wǎng)站來的更重，跟將就內(nèi)容加載的技巧。如此一來，你又需要精打細(xì)算了。一些不必要的動畫效果和無關(guān)緊要的設(shè)計元素，你需要酌情移除，這樣可以顯著縮減加載時間，提高瀏覽體驗。節(jié)省用戶的網(wǎng)頁加載時間是你的首要任務(wù)，加載慢不僅會影響網(wǎng)站的搜索引擎優(yōu)化，還會讓你持續(xù)流失目標(biāo)用戶。所以，保持用戶輕量級是很有必要的。

mentor

結(jié)語

總而言之，單頁設(shè)計是吸引用戶的重要方式，要讓它價值最大化，你不僅需要做好設(shè)計，還需要把握上述5個重要技巧。當(dāng)然，網(wǎng)站的設(shè)計在很大程度上取決于網(wǎng)站所服務(wù)的企業(yè)和機構(gòu)的特征，這5大技巧的使用也與此息息相關(guān)。結(jié)合經(jīng)驗，靈活運用，相信你能設(shè)計出令人印象深刻的優(yōu)秀網(wǎng)頁。

單頁網(wǎng)站設(shè)計全記錄：

先學(xué)案例開眼界：
《制造驚喜！15個優(yōu)秀的單頁網(wǎng)站設(shè)計案例》

再看分析漲姿勢：
《I WANT YOU！選擇單頁設(shè)計的五個理由》

再來一發(fā)鞏固設(shè)計：
《學(xué)做減法！來瞧瞧這40個效果驚人的單頁設(shè)計》

原文地址：designmodo
優(yōu)設(shè)網(wǎng)翻譯：@陳子木

本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，請尊重版權(quán)和譯者成果，轉(zhuǎn)摘請附上優(yōu)設(shè)鏈接，違者必究。謝謝各位編輯同仁配合。

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量76萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：