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

•    單(dan)頁網站導航方式簡單(dan)，用戶不易(yi)迷路，只需(xu)上下(xia)滾動。

•    單頁網站內容更專(zhuan)注，信息傳(chuan)遞更清晰，更有針(zhen)對性。

•    單頁網站幾乎可以在全平(ping)臺設(she)備上流暢(chang)瀏(liu)(liu)覽，滾動和滑(hua)動瀏(liu)(liu)覽替代(dai)了點擊。

 而(er)設計(ji)單(dan)頁網站zui大的挑戰在于(yu)讓用(yong)戶(hu)保持滾動(dong)頁面(mian)來(lai)瀏覽內容。大膽的色彩使用(yong)和漂亮的排版并(bing)不能一(yi)直吸(xi)引(yin)用(yong)戶(hu)的注意力。

 這個時候，如果能做(zuo)(zuo)好(hao)用(yong)戶數據分(fen)析和A/B測試，能幫你(ni)距(ju)離用(yong)戶的(de)(de)心(xin)理需求更(geng)近(jin)，設(she)(she)計出(chu)更(geng)貼合需求的(de)(de)網頁(ye)。看(kan)過無(wu)數的(de)(de)案例(li)和教程，還是做(zuo)(zuo)不出(chu)好(hao)的(de)(de)單頁(ye)設(she)(she)計？你(ni)需要的(de)(de)，也許就是把握好(hao)下面5條(tiao)設(she)(she)計建議，它們(men)就是設(she)(she)計好(hao)單頁(ye)網站的(de)(de)精髓。

 1、將內容分割成塊

 當你打算通過(guo)(guo)一個單頁來講述一個故(gu)事(shi)的時候，千萬要(yao)(yao)注意一點：不(bu)要(yao)(yao)讓故(gu)事(shi)太拖沓(ta)，不(bu)要(yao)(yao)讓信息過(guo)(guo)載。

 所(suo)以(yi)，合理切割內(nei)(nei)容(rong)很重要(yao)，不要(yao)讓(rang)過(guo)多內(nei)(nei)容(rong)擠(ji)壓在一(yi)個區塊。從頭到(dao)尾(wei)都(dou)需要(yao)盡量保持媒體內(nei)(nei)容(rong)的清晰利落，在設計(ji)內(nei)(nei)容(rong)結構的時候，需要(yao)保持邏輯通順(shun)和順(shun)序清晰（what->why->how->where->when）。

 另外一種保持(chi)吸引(yin)(yin)用戶(hu)吸引(yin)(yin)力的(de)方(fang)法，就(jiu)是使用圖文搭配的(de)方(fang)式來講故(gu)事。故(gu)事會(hui)將核心內容以跟易(yi)于接受的(de)方(fang)式表達出(chu)來，它的(de)自然邏輯會(hui)吸引(yin)(yin)用戶(hu)讀下去，嚴格(ge)來說(shuo)，它在(zai)內容營銷的(de)范疇以內。

 這并(bing)不是意(yi)味著你(ni)需要(yao)聘請一個寫(xie)手來幫你(ni)來寫(xie)故事(shi)，你(ni)需要(yao)做的是專注內容和它感性的一面，并(bing)嘗試讓你(ni)的網頁更加人性化。

 2、設計快速訪問導航欄

 單頁網站通常是(shi)用滾(gun)動(dong)的方式來瀏覽更多內(nei)容(rong)(rong)的，很(hen)多網站干(gan)脆是(shi)從(cong)頭滾(gun)到尾。用戶打開網頁，仿佛潛(qian)入內(nei)容(rong)(rong)的海洋，壓根(gen)不知道(dao)網頁的盡(jin)頭在(zai)(zai)哪里，這種設計的潛(qian)在(zai)(zai)危險在(zai)(zai)于，它可能會(hui)降低用戶心理上的安全感。

 于是，一(yi)種比較合理的(de)解決方案(an)就出現了：將傳統的(de)導(dao)航欄設計融入單(dan)頁設計。導(dao)航欄在(zai)網頁的(de)頂(ding)部(bu)或者兩 側(ce)常駐停留，隨著滾(gun)動而改(gai)變，同時提醒用戶TA在(zai)什(shen)么(me)位置，同時保證了易用性和內(nei)心的(de)潛(qian)在(zai)訴(su)求。

 當(dang)網頁足夠長的(de)時候，加上導航、回到頂部按(an)鈕甚至滾動條(tiao)都可以強化(hua)用戶體驗。

 3、號召用戶行動

 當你問數字(zi)媒體(ti)營銷(xiao)者影響轉化率(lv)zui重要的(de)(de)因素是什么的(de)(de)時候，答案通常是“號召(zhao)行(xing)動(dong)(dong)起(qi)來”（CTA）。當然，這種精心策(ce)劃(hua)的(de)(de)CTA行(xing)為僅僅只是網(wang)站設計的(de)(de)一(yi)(yi)部(bu)分。為了(le)特定的(de)(de)目標，號召(zhao)用(yong)戶(hu)(hu)行(xing)動(dong)(dong)的(de)(de)CTA行(xing)為其(qi)實無處(chu)不在(zai)，吸(xi)引(yin)用(yong)戶(hu)(hu)下(xia)載(zai)APP，引(yin)導用(yong)戶(hu)(hu)體(ti)驗DEMO，勾引(yin)用(yong)戶(hu)(hu)注冊(ce)、填寫(xie)表格，等(deng)(deng)等(deng)(deng)等(deng)(deng)等(deng)(deng)。這是一(yi)(yi)個酒(jiu)香(xiang)也怕巷(xiang)子(zi)深的(de)(de)時代，會(hui)哭的(de)(de)孩子(zi)有奶吃(chi)，會(hui)吆(yao)喝(he)才能(neng)吸(xi)引(yin)更多用(yong)戶(hu)(hu)。

 好在單(dan)頁網頁中信息和內容更加(jia)集中清晰，所以CTA的使(shi)用(yong)效果也更加(jia)明(ming)顯(xian)。一方面是頁面通常更加(jia)簡約(yue)，各個部分(fen)分(fen)工明(ming)細，另(ling)一方面，當你(ni)使(shi)用(yong)故事來引導用(yong)戶瀏(liu)覽的時候，你(ni)可以微妙(miao)地(di)影響用(yong)戶的心(xin)態，在高潮——或者zui合理(li)的而地(di)方，來引導用(yong)戶進(jin)行操作。

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

 4、保持簡約，避免枯燥

 傳(chuan)統網(wang)頁(ye)(ye)設(she)(she)計(ji)中，很重要(yao)一個組成部分是(shi)(shi)設(she)(she)計(ji)網(wang)站主題，并且為內頁(ye)(ye)準(zhun)備若干模板(ban)，應對不同的(de)需求。設(she)(she)計(ji)單頁(ye)(ye)網(wang)站的(de)時候，你(ni)需要(yao)面(mian)臨更(geng)多的(de)挑戰，但是(shi)(shi)這也意味著(zhu)你(ni)有著(zhu)更(geng)大的(de)創作(zuo)空間(jian)。隨著(zhu)近(jin)年(nian)來CSS3，HTML5和JavaScript的(de)快速發展(zhan)，單頁(ye)(ye)設(she)(she)計(ji)可以在(zai)保持簡(jian)約的(de)同時，還(huan)能引人入勝。那(nei)些靈(ling)動而漂亮的(de)的(de)轉場動畫效果都是(shi)(shi)細(xi)(xi)節(jie)，但是(shi)(shi)哪個體驗(yan)優異(yi)的(de)網(wang)站不是(shi)(shi)這些精致的(de)細(xi)(xi)節(jie)組成的(de)呢(ni)？

 當然(ran)，千萬不要濫用(yong)，過猶不及(ji)，得不償失(shi)。

 5、保持輕量級

 一(yi)個緩慢而(er)加載時間(jian)漫長的(de)單頁(ye)網站是失敗的(de)。由于單頁(ye)網站上的(de)內容都集中在一(yi)個頁(ye)面上，所以通常單頁(ye)網站會(hui)比(bi)其他的(de)網站來的(de)更重，跟將就內容加載的(de)技巧。如此(ci)一(yi)來，你(ni)又需要(yao)精打細(xi)算(suan)了。

 一些不(bu)必要(yao)的(de)(de)動畫效果和無關緊要(yao)的(de)(de)設計元素(su)，你(ni)需要(yao)酌情(qing)移除，這樣可(ke)以顯著(zhu)縮減(jian)加(jia)載(zai)時間(jian)(jian)，提高瀏覽體驗。節(jie)省用(yong)(yong)戶的(de)(de)網(wang)頁加(jia)載(zai)時間(jian)(jian)是(shi)你(ni)的(de)(de)首(shou)要(yao)任務(wu)，加(jia)載(zai)慢不(bu)僅會影響網(wang)站(zhan)的(de)(de)搜索(suo)引(yin)擎優化，還會讓(rang)你(ni)持(chi)續流失目(mu)標用(yong)(yong)戶。所以，保持(chi)用(yong)(yong)戶輕量級是(shi)很(hen)有必要(yao)的(de)(de)。

 結語

 總而言(yan)之，單(dan)頁設(she)計是吸引用戶的(de)重(zhong)要(yao)(yao)方(fang)式，要(yao)(yao)讓它價值(zhi)zui大(da)化，你(ni)不(bu)僅需要(yao)(yao)做好設(she)計，還(huan)需要(yao)(yao)把握上述5個重(zhong)要(yao)(yao)技巧。

 當然，網(wang)站的設計(ji)在很大(da)程(cheng)度上取決于網(wang)站所服(fu)務的企業和(he)機(ji)構的特征(zheng)，這5大(da)技巧(qiao)的使(shi)用(yong)也與(yu)此息息相關。結合經驗，靈活運(yun)用(yong)，相信你能設計(ji)出令(ling)人印(yin)象深刻的優(you)秀網(wang)頁。