單頁網站如何得到較高的用戶體驗?


我覺得理解用戶才是最重要的,比如hao123的用戶和douban用戶的心理標準不一樣,不能通用。

這個是最近被分享很火熱的荷蘭皇家空軍官網:http://www.luchtmachtbase-x.nl/
主要讓我對官網有了新的認識。


參考一下攜程機票 http://m.ctrip.com/html5/flight/


一是色彩搭配要符合目標受眾喜好;二,結構設計要符合瀏覽邏輯;三,內容組織要鏗鏘有力。


1.美觀,看著舒服是必需的;
2.可用性,滿足訪客某種需求;
3.信任度,不要山寨,不要莫名其妙的各種不知名組織機構。


主要看你的內容吧,UI只是次要的一部分而已!

用戶體驗這個事情其實還是主要的滿足用戶的需求,短時間的滿足用戶需求。

比如說,10年的時候,單頁面很流行,隨便做一個單頁面的排行榜就可以上百度推廣,並且能夠賺的盆滿缽滿。當時應該是充值軟體的淘寶客單頁面更多吧,基本上都是找一些利潤高,買的好的產品去排行榜。現在如果再做排行榜的話最好是能夠權威點,現在的網民又不傻。

至於UI方面,簡單粗暴就可以了。


1,美觀,最好先了解用戶群體的年齡、喜好,設計主色調

2,有用性。有趣性。有價值的內容才值得花費時間

3,易讀性,段落不要太長或太短,太短——凌亂,太長——沒耐心

4,文章具有邏輯性

5,信任,不要太浮誇

6,最好是成交型文案。


大部分的企業站做排名都是用首頁做的,但是首頁的title字數有限,做的關鍵詞數量也是有限的。那麼單個網頁優化可以做排名嗎?當然可以,之前我也很糾結單頁面做排名怎麼做,覺得束手無策,但是經過測試實踐發現了一些很好的技巧,今天分享給大家。

  1、網站首頁的title惜墨如金,字數有限制,要優化的關鍵詞也有限制。

  2、對於比較大的網站,比如商城、論壇,80%的流量都來自內頁的排名(也就是長尾關鍵詞的優化)。

  3、根據公司的發展需求或者熱點及時建設的新單頁來優化排名,不用費事的修改首頁的title,修改不好了還有風險。

  4、轉化高。單頁面是針對某個關鍵詞來展開介紹的,肯定比首頁聚合的內容對用戶幫助大,你可以盡情的發揮做成體驗好的頁面,類似競價的著陸頁,相信轉化率一定很高。

  單頁面SEO有什麼好處

  其實上面已經提到了,單頁面排名能夠補充首頁優化的不足,可以從首頁的主要關鍵詞進行展開,挖掘長尾關鍵詞更具有針對性的來吸引用戶,可以說成是小而美。還有就是單頁面轉化率高,上面已經說過了。

  單頁面SEO如何操作

  1、內鏈:好的東西都是由內到外的推薦,首先是網站內部的推薦也就是內鏈的優化,比如做「單頁面排名優化」這個長尾關鍵詞,把你網站所有關於單頁面優化的網頁做錨文本「單頁面排名優化」鏈接到你要優化的單頁面。

  2、首頁推薦:在首頁友情鏈接處添加「單頁面排名優化」鏈接到你優化的單頁面。

  3、外鏈:做些相關的外鏈,鏈接不是首頁的鏈接而是要做的單頁面。

  一般的競爭不大的關鍵詞利用以上3個方法就能做到首頁了,但是如果你做了以上的方法還是遲遲不到百度首頁,(或者做的長尾關鍵詞競爭比較大)怎麼辦?

  4、絕殺招式:做交叉鏈接,這個是效果最好的了,也是最難做的。


單頁導航更加直觀;瀏覽者不會迷失在網站中,一切僅僅需要轉動幾下滾輪就可以達到。
頁面更加專註和整潔,可以更容易的傳遞網站的主要信息。
單頁網站幾乎可以在任何設備上流暢的運行,因為導航主要通過滾輪或是滑動實現,而不是點擊滑鼠或是敲擊屏幕。
上面是優勢,目的不有分析,網頁設計的目的還是在於引導用戶瀏覽內容。
所以說——
單頁設計的最大挑戰是如何讓用戶不斷的滾動屏幕!
單頁設計的最大挑戰是如何讓用戶不斷的滾動屏幕!
單頁設計的最大挑戰是如何讓用戶不斷的滾動屏幕!

(重要的事情說三遍,嗯)

互聯網 | 代碼上有篇文章總結了幾點,我覺得很好,這裡搬運過來。

1. 將內容分成一些小塊
當你只有一頁來講故事,很重要的一點是不要給用戶灌輸太多的信息。不要害怕把內容摺疊起來變成多個部分。確保消息和媒體內容自始至終保持乾淨簡潔。更重要的是,單頁網站的內容應該是連續的,並且要順序排列(事情—&>原因—&>怎麼做—&>地點—&>時間)。有一些優秀的例子採用了這樣一個平滑和有意義的內容流,包括Mijilo的http://designawatch.mijlo.com和http://agencysurvivalkits.com。
吸引客戶關注點的另外一種方式是視覺和文字內容雙管齊下,進行故事化的設計。故事化設計 Storytelling 是一種傳遞內容的非常強大的方式,而它實際上是屬於另外一個領域的發展潮流,而這一次則進入了內容市場。Storytelling 的活力深入到了核心信息,擁有同用戶更加強烈的互動性。這並不意味著你必須去僱傭一個小說編輯。你只要更多的專註於內容的情感方面,並嘗試讓你所寫的東西更加的人性化。
2. 為快速訪問設計備選的導航

單頁面網站整個就是一張可以往下滾動的頁面,有時候甚至可以無限滾動。這就好像是一個不知道到底有多長的內容的海洋。

你要確保用戶在這樣的頁面中體驗舒適,並且其體驗總是可以被追蹤控制的; 你可以嘗試將它同一個傳統的導航系統整合在一起。通用的實踐方式就是讓它有一個有粘性的導航條,而無論你將頁面滾動到哪裡,這個滾動條都能待在頁面的頂部。這樣易用性的方面也得到了很好的解決。粘性的導航可以用一種更加醒目和更具交互性的方式替代更傳統的麵包屑導航。

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


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

這是轉化的關鍵。
精心製作的CTA就算不代表完成了整個工作,也至少是一大半. 我敢說那些為特定目的設計的網站,它們的情況確實是這樣的, 不管它是移動應用的下載,訂單的放置,demo演示還是簡單的聯繫信息表單的提交. 除了本身的目的之外,對於用戶動作號召的質量決定了轉換的機會。
依據對 KISSMetrics 案例研究, 「 用更醒目的動作號召可以讓轉換的機會增加百分之591」。

單頁面應用網站專註而清晰,可以在這方面做得更好。在一個單頁面應用中,少有文本和多媒體內容能讓用戶在其訪問的網站的主要目標上分心。同樣的,擁有好的storytelling,你可以在網站上引導用戶直到最後終點, 在那裡你就應該有一個對動作的強烈號召用語。
這裡要再做一次A/B測試,來看看哪一種CTA能在你的網站上運作得更好, 因為有時即使是顏色、位置或者用語上的一點最小改變,都會帶來轉換率的急劇變化。
4. 保持簡單而不乏味

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

只是,請你不要在CSS的魅力上太得意忘形,也不要在整個頁面上把那些跳躍,浮動,以及翻翻覆覆的元素用得太過了,請適可而止。5. 讓頁面變輕單頁面網站最大的一個缺點就是載入慢。

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

1. 做減法:要把挺多信息一下子放到一個頁面里,這本身就意味著用戶體驗降低了,這個時候需要花時間去把不是太重要的東西出去,另外,還要把留下來的東西進行更好地整理(也就是接下來的第二點)
2. 引導:因為單頁面只有一個頁面,如果從最開始的時候通過文字和圖片來引導訪問者瀏覽就變得很重要。不要讓訪問者去猜,而是你來引導。這也是提高用戶體驗的一個途徑。

總結來說,單頁面設計是一種吸引用戶並把他們轉換成商機的最強大方式。但這嚴重依賴於站點的業務類型及其目標。一般,單頁面設計最適合單一活動的網站,比如應用下載,單一產品的採購,捐贈等等。

還是要根據自己產品的內容發揮優勢,提高轉化率,這才是單頁設計的意義所在


從用戶的角度來分析
1.在網站的頁面標題和頁面描述做優化,這是別人在看到你的網站的第一印象,非常的重要,你要寫出你的網站或產品最吸引人的地方。在html文件裡面修改就行了。下圖就是知乎的頁面標題和頁面描述。

2.假設這個時候我已經對你的網站感興趣並點進去了,這個網站裡面的內容滿足了我的需求嗎?是否和網站頁面描述相符?這個時候網站裡面的內容應該詳細的介紹自己的產品和服務,你的所有的內容製作都應該以你的目標用戶的喜好為準,同時在網頁上也應該有一個在線客服的鏈接解決用戶的疑問。
3.在用戶已經動心了的時候,我們必須有一個便捷的支付方式才能不前功盡棄,所以支付頁面請盡量方便,支付寶和微信支付都是一個不錯的選擇。


人的視覺需求是第一位的 先不說內容


@X xxx 的回答,基本是從設計師的角度講述一個 Landing page 的注意事項,

不知道樓主說的 單頁網站,是指 Single Page Application(SPA),還是 Landing page;

Landing page
純粹考驗設計師的創意能力和前端開發的技術水平

Single Page Application
叫單頁應用應該比單頁網站更合適

如何得到較高的用戶體驗?
幾個點:

  • 結構清晰 合理的網站導航:

需注意主功能入口的在 UI 上的優先順序
多頁面切換時能很容易識別頁面的前後關係,推薦遵循 RESTful 規範設計 URL 和頁面關係

  • 響應

任何操作都必須有響應,比如點擊按鈕後跟使用 Ajax 跟後台交互時在合適的地方顯示 Loading,結果必須在某些地方體現,比如創建成功時需實時顯示出創建的對象,刪除成功後需從當前操作除移出這個對象...

  • 數據同步

同一組數據,很有可能會在不同地方顯示,比如一些 Todo 應用,一個 Task 會在列表中顯示,也會在詳情頁顯示,單頁應用,除非用戶刷新頁面,應該盡量減少從後端載入數據的次數,這時就需要在多個模板中同步數據

  • 等等

以前分布在多個頁面的功能,現在要在一個頁面實現,其中非常重要的就是第一點中提到的頁面結構

剩下的都是細節了,各種動畫切換,適當出現的提示信息等等...

可以使用一些比較成熟的框架,比如 Ember.js,Angular.js 等


就一句話:你解決了什麼人的什麼問題?

解決了人家的問題,自然對人家有極大的吸引力了。。。


首先要知道單頁面,要展示什麼,獲取什麼?而不是一上來就扯用戶體驗。
連方向都不說,怎麼回答?
先學習怎麼提問吧,記得以前很多BBS都有專門固定貼,「提問的智慧」,就是針對你這類型用戶的。


推薦閱讀:

最近傳的文章「HTML6 展望」中的命名空間有什麼意義?
你最喜歡的 Web 開發框架是什麼?
老師說我抄代碼,心裡超委屈,內心無法平復怎麼辦?

TAG:Web開發 | 搜索引擎優化SEO | 網頁遊戲 | 網站運營 | 網站 | 網站架構 | Web20 | 網站推廣 | 網站分析 | 計算機網路 |