5 個單頁應用使用者體驗的最佳實踐

　　每個人都喜歡單頁網站。

　　設計趨勢一定是發生了某些變化。這種現象已經持續了好一段時間，但是依然在增長，並且有太多的網站傾向於採用這種設計。

　　請參閱：Creative Single Page Website Designs, Examples

　　很久以前，擁有一個單頁網站並不是什麼值得驕傲的事情。那樣的網站只是單純的用來提供資訊，“名片”式的網站被認為既廉價又讓人厭煩。

　　但是現在，作為一項設計趨勢，單頁已經完全不同了。它剔除設計中雜亂無章的部分，留下一個整潔，但是優美的使用者介面，其中的內容既簡潔，又重點明確。從使用者體驗（UX）的角度來說，單頁設計既有好的一面，也有壞的一面，但是通常使用者鍾愛於瀏覽這些網站，這就已經是要思考的事情了。

　　儘管幾乎沒有證據，一些專家還是辯稱相比傳統的多頁面導航網站，單頁網站傾向於擁有更高的轉化率。我唯一能找到的研究案例就是37signals。它表明相比原先的多頁面版本，一個長的單頁面著陸頁會多出37.5%的註冊量。

　　好吧，這並不令人震驚。

• 單頁導航更加直觀；瀏覽者不會迷失在網站中，一切僅僅需要轉動幾下滾輪就可以達到。

• 頁面更加專注和整潔，可以更容易的傳遞網站的主要資訊。

• 單頁網站幾乎可以在任何裝置上流暢的執行，因為導航主要通過滾輪或是滑動實現，而不是點選滑鼠或是敲擊螢幕。

　　單頁設計的最大挑戰是如何讓使用者不斷的滾動螢幕。高解析度的圖片，大膽誇張的顏色，優美的樣式都可以吸引注意力，但這些並不是總能夠激發使用者的興趣。通過一些使用者資料分析和 A/B 測試，你能夠找到方法來抓住使用者的心。讓我們來探討一些小竅門，讓你的單頁網站對使用者更加友好。

　1. 將內容分成一些小塊

　　當你只有一頁來講故事，很重要的一點是不要給使用者灌輸太多的資訊。不要害怕把內容摺疊起來變成多個部分。確保訊息和媒體內容自始至終保持乾淨簡潔。更重要的是，單頁網站的內容應該是連續的，並且要順序排列（事情—>原因—>怎麼做—>地點—>時間）。有一些優秀的例子採用了這樣一個平滑和有意義的內容流，包括Mijilo的designawatch.mijlo.com和agencysurvivalkits.com。

　　吸引客戶關注點的另外一種方式是視覺和文字內容雙管齊下，進行故事化的設計.故事化設計 Storytelling 是一種傳遞內容的非常強大的方式，而它實際上是屬於另外一個領域的發展潮流，而這一次則進入了內容市場. Storytelling 的活力深入到了核心資訊，擁有同使用者更加強烈的互動性. 這並不意味著你必須去僱傭一個小說編輯. 你只要更多的專注於內容的情感方面，並嘗試讓你所寫的東西更加的人性化.

　2. 為快速訪問設計備選的導航

　　單頁面網站整個就是一張可以往下滾動的頁面，有時候甚至可以無限滾動. 這就好像是一個不知道到底有多長的內容的海洋. 你要確保使用者在這樣的頁面中體驗舒適，並且其體驗總是可以被追蹤控制的; 你可以嘗試將它同一個傳統的導航系統整合在一起. 通用的實踐方式就是讓它有一個有粘性的導航條，而無論你將頁面滾動到哪裡，這個滾動條都能待在頁面的頂部. 這樣易用性的方面也得到了很好的解決. 粘性的導航可以用一種更加醒目和更具互動性的方式替代更傳統的麵包屑導航.

　　如果你的單頁面應用相當的長，讓頁面有一個“回到頂部”的按鈕，或者一個垂直的滾動條就會很有用，它們能讓使用者快速的訪問頁面的頂部和其它地方.

　3. 在動作上使用強烈的號召性語言

　　如果你問一個數字產品業務員，再一次會談中什麼才是最重要的因素，他的答案几乎總會是使用強烈的號召性語言. 精心製作的CTA就算不代表完成了整個工作，也至少是一大半. 我敢說那些為特定目的設計的網站，它們的情況確實是這樣的, 不管它是移動應用的下載，訂單的放置，demo演示還是簡單的聯絡資訊表單的提交. 除了本身的目的之外，對於使用者動作號召的質量決定了轉換的機會.

　　依據對某人的  KISSMetrics 案例研究, “ 用更醒目的動作號召可以讓轉換的機會增加百分之591.”

　　好訊息是單頁面應用網站變得更加專注和清晰，並可以在精緻的CTA方面做得更好. 在一個單頁面應用中，少有文字和多媒體內容能讓使用者在其訪問的網站的主要目標上分心. 同樣的，擁有好的storytelling，你可以在網站上引導使用者直到最後終點, 在那裡你就應該有一個對動作的強烈號召用語.

　　這裡要再做一次A/B測試，來看看哪一種CTA能在你的網站上運作得更好, 因為有時即使是顏色、位置或者用語上的一點最小改變，都會帶來轉換率的急劇變化.

　4. 保持簡單而不乏味

　　傳統的多頁面網站的設計中，設計的主題，還有幾個起作用的內部頁面模板是相當關鍵的. 設計單頁面應用更具挑戰性，但同時也給與了創造性更大的空間. 隨著近年來 CSS3, HTML5 和 Javascript 的發展，創造一個簡單但卻能引人入勝的網站這一挑戰具有無限多的可能. 加入小動畫以及漂亮靈動的過渡僅僅只是細節，但卻是有關細節的一個好的UX（使用者體驗）?

　　只是，請你不要在CSS的魅力上太得意忘形，也不要在整個頁面上把那些跳躍，浮動，以及翻翻覆覆的元素用得太過了，請適可而止.

　5. 讓頁面變輕

　　單頁面網站最大的一個缺點就是載入慢. 因為只有一個使用者在傳遞內容，網站常常變得更重，需要更多的時間去載入. 按照前面說的觀點，請不要往網站裡塞入不必要的動畫和其它會顯著影響載入時間的設計元素. 節約使用者的時間應該在你那裡應該有最高的優先順序. 拖慢載入可能也會影響你網站的SEO，這顯然是單頁面網站的短板. 你的網站需要更多關注和努力，以使它獲得使用者的認同，當然還有Google爬蟲的認同.

　總結

　　單頁面設計是一種吸引使用者並把他們轉換成商機的最強大方式. 但這嚴重依賴於站點的業務型別及其目標。一般，單頁面設計最適合單一活動的網站，比如應用下載，單一產品的採購，捐贈等等. 但請不要受最佳實踐的限制，因為那些總是別人的經驗，可能並不適合與你.

　　原文地址：http://designmodo.com/ux-single-page-websites/