單頁還是分頁?理智分析網站設計思路!

2020-12-12 酷扯兒

本文轉載自【微信公眾號:阿門教你PS,ID:meitian_PS】經微信公眾號授權轉載,如需轉載與原文作者聯繫

對於許多網頁設計師而言,是選擇單頁面還是多頁面的設計,可能會非常的棘手。隨著移動端和社交媒體的興起,簡單快速響應迅速的單頁網站,成為了目前網頁設計的趨勢。另一方面,傳統的多頁設計也因其廣泛的認知,而被廣大用戶所認可。

所以,真正要在兩者之間做取捨,並不容易。單頁和多頁式的設計哪個更好,影響因素很多。網站的內容如何鋪排,導航如何運作,整體的策略和需求,出發點,都會影響到選擇的決策。不過,內容始終是最核心的影響因素,從內容入手,分析哪種導航,哪種布局更合適,是一種合理的策略。

當然,具體怎麼做,看下去,這篇文章會給你答案。

一、單頁網站

單頁網站,顧名思義,指的是網站本身並沒有採用多頁式的布局,而是將內容都放置在單個頁面上,諸如我們常見的「關於」「聯繫我們」等分頁都是不存在單獨分頁的。

正如 Awwwards 所解釋的那樣,單頁式網站將內容完全整合在一頁當中,使得整個體驗更加流暢。用戶藉助單頁內的導航同樣可以快速定位,滾動瀏覽也很容易。

單頁網站在為用戶提供內容的時候,其信息和內容都是經過篩選和管控的,確保更適宜閱讀和瀏覽。這也是為什麼絕大多數的產品頁面、作品集和事件相關的頁面會採用單頁設計。在這樣的情況下使用單頁設計能夠最大程度降低信息噪音的影響,讓用戶專注於最重要的內容。

1. 單頁網站設計的優點

為什麼那麼多人會選擇單頁設計呢?的確,單頁網站更容易理解,拆分出來的區塊也不算多,用戶也很容易消化。

單頁設計更容易直觀地呈現整個用戶歷程。不需要額外的頁面加持,訪客可以直觀而清晰地感知到整個信息流,如果呈現故事的話,起承轉合是非常的順暢的呈現。

單頁設計的另外一個優點,是交互足夠簡單。研究表面,單頁網站比多頁網站的轉化率要高37.5%,用戶可以更快地瀏覽,更快地獲取信息,不會因為頁面和複雜的交互而分心。

單頁式網站在移動端上的優勢也更加明顯。在小屏幕匹配上更加精簡直觀的內容,加上簡單而自然的滾動交互,用戶體驗可謂是輕鬆而舒適。

但是,這還不是全部。設計師從中同樣獲得不少好處:再也不用增加來回跳轉的連結和頁面了,工作量沒那麼大,頁面功能也更容易實現,也便於迭代和維護。

2. 單頁網站設計的缺點

單頁網站的缺點和優點同樣突出。單頁網站的缺陷主要體現在幾個不同的方面。

單頁網站在 SEO 上的優勢並不大。事實上,在網站排名這個事情上,單頁網站先天就競爭力不足,這也導致藉由搜尋引擎進入網站的打開率相對較低。由於內容較少,目標關鍵詞在單頁網站上常常會被忽略掉。

另外,單頁網站也不是成長型品牌在設計網站時候的首選,因為它的擴展性是比較有限的。正如同我們所看到的那樣,單頁網站的關注度相對較低,不適合大量內容的、信息結構複雜的網站來使用。因此,如果你正在運營一個不大的網站,但是有計劃進行多方面拓展的話,儘量選擇多頁網站設計。

最後,網站本身通常只會有一個 URL地址。這本身並不存在問題,可是當你需要藉助諸如 Google Analytics 來分析網站數據的時候,內容並不是通過連結來區分的,這使得你所獲得分析數據是非常有限的。

二、多頁網站

多頁網站包含有多個子頁面。與單頁網站不同,多頁網站的設計中需要藉助導航來承載不同頁面的連結。

多頁網站幾乎能夠承載所有類型的網站項目,諸如 Amazon 這樣的電商網站,諸如 Atlassian 這樣的儀錶盤式的網站,也可以滿足 Lynda 這樣的在線學習網站的需求。

1. 多頁網站設計的優點

和單頁網站相比,多頁面的網站的優點主要體現在三個方面:

首先,多頁面網站有著明顯更強的拓展性。根據需求創建幾乎任意數量的子頁面,設計師能夠通過整合來創造出可用的導航系統。諸如電商網站,會採用一個大型的自定義導航菜單,搭配上搜索框,用戶可以藉此抵達幾乎每一個頁面和產品。當然,值得注意的是,導航的設計應該取決於網站的縱深,這個需要設計師仔細衡量和把控。

其次,多頁面網站的導航流程,更容易遵循。多頁面的網站設計早在90年代就已經形成了,用戶對於這類網站的使用方式早已熟悉,它們的使用已經成為一種約定俗成的模式,遵循即可。

最後,多頁面的站點在 SEO 上有著更多的功能和突出的優勢。我們都能確定,多頁面的網站比單頁網站更容易承載更多的內容,在搜尋引擎優化上也有更多的潛能可供挖掘,可以承載更加多樣的營銷策略。

2. 多頁網站設計的缺陷

事物總是具有兩面性的。多頁網站的缺點也是不能迴避的問題。

多頁面網站需要更加頻繁、工作量更大的維護,這無論是對於設計團隊、開發團隊還是內容團隊而言,都是頗為繁重的工作。在選擇單頁面還是多頁面的網站的時候,需要考慮內容的體量和工作量,作出合理的衡量。正如同 Undsgn 所說:「更新和維護單個頁面比處理多個頁面要容易得多,基本的數學規律你是違反不了的!」尤其重要的是,追求數量而輕視質量對於企業而言是極為不利的。

另外一個需要注意的問題就是網的跳出率。根據《Search Engine Journal》的統計,擁有大量內容的網站相對而言加載速度會更慢,用戶注意力更容易被分散,這會導致網站的跳出率提升。雖然並非每個多頁面網站都會被內容所拖累,但是內容和信息量的增加是必然會帶來注意力的分散,這個是需要注意的。

最後,多頁面網站設計在移動端上,也沒有單頁設計那麼友好。和單頁不同,多頁面網站即使是通過響應式設計在移動端上呈現,在交互和界面上所耗費的時間也是更長的,所達到的效果卻不一定理想。你會為了移動端上的一致性,而犧牲桌面端上的一些設計麼?

三、最佳解決方案

其實本篇文章,我們的目標是通過闡述單頁設計和多頁面設計之間的差異,讓你能夠在設計上作出更好的決策。簡單總結一下:當你的網站功能比較集中,關注度也較低的時候,單頁設計會非常有用,它也是移動端網頁的首選方案。如果你需要複雜的、多功能、可拓展式的網站,那麼還是採用傳統的多頁式設計,結合合理的導航設計,並且加入可靠的 SEO策略。

選擇單頁還是多頁,很多時候需要靈活應變,因地制宜,內容始終是網站的靈魂,多考慮用戶打開網站時候的使用場景,也許整個局面就很明朗了。

相關焦點

  • 分頁功能的分析與設計
    編輯導語:我們在網頁上瀏覽內容時,劃到最下面時經常需要進行翻下一頁查看新的內容,也可以選擇跳轉到其他頁數;讓我們在瀏覽信息是更加清晰,以免當前頁太多信息造成混亂;本文作者詳細介紹了分頁功能的分析與設計,我們一起來看一下。
  • @創交互 如何設計體面的分頁控制項
    視覺君今天跟大家一起來分享的是,互動設計師技能之分頁控制項的設計。只要是有list pages就會遇到分頁的設計。很多情況下,設計師和開發者在產品上線後才認真考慮分頁設計。事實上,分頁是很容易就設計的,但是,不是大多數網站和app都有一個體面的分頁。
  • 資料庫分頁查詢的幾種實現思路
    當系統中的數據超出一定數量時,給展示端展示列表性的數據時,一般不會把所有的數據一次性全部顯示到展示端,體驗良好的互動設計一般是一次只展示一部分數據,通過上下翻頁或指定頁碼的方式查看其它頁的數據,就像翻書一樣。另一方面當數據量大時,伺服器的資源也限制了一次查所有數據,如果一次查詢的數據量過多,資料庫和應用伺服器的內存都有可能被撐爆。
  • 【第570期】無限滾動與分頁設計的優缺點及應用場景分析
    正文從這開始~「應該使用無限滾動還是分頁的方式來展現內容?」,這是一些設計師在做具體的項目時經常需要去抉擇的問題。實際上他們各有優缺點,在本文中,我們將概述這兩種方法的適用場景並分析哪類項目適合用哪種方式。無限滾動無限滾動技術,簡單地向下滾動就可以不斷刷新頁面加載更多的內容,現在很多移動端使用的方式。
  • 詳情頁設計的邏輯思路
    首先大家了解詳情頁的設計技巧與思路嗎?當我們拿到一個詳情頁設計需求的時候,我們不要急著去做,而是先分析詳情頁的邏輯大框架,詳情頁的邏輯很重要。我們可以先分析產品的定位和賣點(痛點),先進行產品的定位,懂得營銷思路,確定好文案,把文案的主次關係弄清楚,補充促銷的噱頭,提升轉化率。點綴標題,給人一種購買慾。一、寶貝描述頁的框架打造一個詳情頁,前期需要花多點時間去調查,構思,確定好一個方向,再去做設計。
  • 網站欄目分類SEO優化詳細方法,欄目分頁收錄收錄實現引流教程
    欄目的SEO優化主要是對於分頁,一般來說分類頁面第一頁(首頁)幾乎都會填寫tdk和相關關鍵詞的布局,不過對於分頁,很多的網站都是沒有做的。比如欄目分頁從第二頁開始,後面的分頁網址url、tdk等都是和首頁是一樣的,這樣一來即使有很多的分頁,搜尋引擎其實都只會收錄第一頁,有的分類下面其實有很多的分頁,如果不做SEO優化,這樣會非常的浪費,要是能夠實現分類頁的分頁也被收錄,那麼這對於提升關鍵詞流量又增加了更多的機會。
  • UX設計細節:無限滾動VS分頁
    本文共 2566 個字,預計閱讀 7 分鐘,記得點擊上面的 藍字 關注我哦~在頁面內容過多時,很多設計師不清楚應該選擇無限滾動還是分頁設計?
  • 怎樣給wordpress網站分類目錄頁面,添加文章列表和分頁效果?
    在前面的章節中,我們完成了wordpress網站首頁模板數據的調用,也創建好了wordpress網站的公共模板。今天,我們再來給wordpress網站的分類目錄頁模板archive.php文件添加左側數據的調用。
  • API 分頁設計與實現探討
    對於設計和實現 API 來說,當結果集包含成千上萬條記錄時,返回一個查詢的所有結果可能是一個挑戰,它給伺服器、客戶端和網絡帶來了不必要的壓力,於是就有了分頁的功能
  • Excel數據透視表自動生成分頁報表與解決顯示報表篩選頁呈灰色
    在 Excel 數據透視表中,可以按照某個指定欄位自動生成分頁報表,例如按照月份或分類生成分頁報表,從而便於查看或分析某個月或某分類的數據。自動生成分頁報表由篩選器和顯示報表篩選頁共同實現,如果某個功能不可用將無法完成,經常會遇到就是顯示報表篩選頁呈灰色不可用。
  • Excel分頁列印技巧,強制分頁,小技巧解決大問題
    今天跟大家分享如何Excel中強制分頁,實現個性列印。【最近真的有點忙,年底了有時顧不上,大家諒解下!】覺得幫幫還不錯的,分享分享朋友圈呀,親們^^<——非常重要!!!大家請看範例圖片。我們列印表格,往往要根據自身條件進行單頁列印,今天跟大家分享設置分頁符。多頁表格記住先在頁面設置——列印標題——頂端標題行中,將每頁的標題添加進去。
  • 無限下拉滾動還是分頁滑動?一篇文章讀懂二者優缺點
    應該是使用無限下拉滾動還是分頁的形式來展現內容?究竟那一個更好?相信這是一些設計師經常需要去思考的問題。其實任何事物都有優缺點,無限下拉滾動和分頁也不例外。本文將兩種方法的適用場景並分析哪類項目適合用哪種方式,相信對你有一定的幫助。
  • Linux 內存尋址之分頁機制
    最後,64位系統使用三級還是四級分頁取決於硬體對線性地址的位的劃分。總結這裡我們不討論代碼實現,只關注原理。從上面的討論可以看到分頁機制主要依賴硬體的實現。Linux採用的四級頁表只是為了最大化兼容不同的硬體實現,單就IA32架構的CPU來說,就有多種分頁實現,常規分頁機制,PAE機制等。
  • 乾貨:PHP基礎之分頁原理+分頁代碼+分頁類製作
    [分頁要發出兩個sql語句,一個是獲得$rowCount,一個是通過sql的limit獲得分頁結果。  分頁 (四個值 兩個sql語句)。]  $pageSize=3;//每頁顯示多少條記錄  $rowCount=0;//共有多少條記錄  $pageNow=1;//希望顯示第幾頁  $pageCount=0;//一共有多少頁 [分頁共有這個四個指標,缺一不可。
  • 「PPT」PPT模板設計規範以及思路分析
    下面我們仔細分析一下。PPT模板主要由封面頁,目錄頁,過渡頁,內頁和結束頁組成。當然,少數的會有一些前言概要等的頁面。去看,找到一個模板網站,從第一個網頁開始看,就看PPT模板的封面頁標題文案的排版方式。明確了標題文案的排版美化,那麼接下來就是裝飾元素的設計和使用。
  • 【每日一擼--Day92】在PPT中封面頁的創意思路分析
    又回到封面頁的製作,封面頁是永恆的話題,每一次製作,都會有新的思路和思考。有時候,我們可能會沒有思路,這個時候不要就停下不做了,先打開軟體,動手弄一弄,或者去網上看一看。漸漸的,你可能就會有思路了。整體來說,還是不錯的。如果進行一下拆解,拆分成一個一個的小部分元素,就會發現,其實很簡單的。下面我們就進行一下拆解。
  • MySQL的limit用法和分頁查詢的性能分析及優化
    二、Mysql的分頁查詢語句的性能分析MySql分頁sql語句,如果和MSSQL的TOP語法相比,那麼MySQL的LIMIT語法要顯得優雅了許多。使用它來分頁是再自然不過的事情了。最基本的分頁方式:SELECT ... FROM ... WHERE ... ORDER BY ... LIMIT ...
  • 真實案例,設計PPT目錄頁沒思路,這樣做超有設計感!
    今天跟大家分享幾個比較實用的小技巧,能讓單調的PPT目錄頁做的更加有設計感。對於目錄頁的設計,大家也不能太小覷,畢竟這是展示PPT的主要框架內容。所以不能像下面這種設計的效果,非常之單一。那麼,如何設計PPT的目錄頁才能讓頁面更加的有職場氣質呢?其實使用PPT中最為常見的元素即可搞定,下面分享3個方法。1、用形狀設計目錄頁首先看一下,如何用形狀設計PPT目錄頁,一旦掌握這個技巧,設計出來的頁面絕不會很單一。
  • 【每日一擼--Day35】全文字的PPT內頁處理思路分析
    做 PPT 經常會遇到有很多文字的內頁, 也是很多做 PPT 的小夥伴所討厭的,不知道怎麼處理多文字的 PPT 內頁。今天製作一下多文字的 PPT 內頁,給大家提供一些製作的思路和想法。我們來分析一下這種較多文字的內頁處理。▋對文字進行分段處理。多文字的內頁一般都是一整段話。如果只將一整段話放在 PPT 上,那麼會沒有重點,別人不知道看哪,不知道哪一條信息是重要的。
  • Mysql跨庫分頁查詢方案總結
    本文將分析如何解決不同資料庫實例上的數據分頁解決方案。現假設有N個資料庫實例,按照時間time排序,查詢偏移量為X,查詢數據量為Y。全局視野法全局視野法是通過將每一個資料庫實例上的分頁數據查詢到內存中,然後在服務層進行內存排序,得到分頁數據。