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

2020-12-20 酷扯兒

本文轉載自【微信公眾號:阿門教你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策略。

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

相關焦點

  • 詳情頁設計的邏輯思路
    首先大家了解詳情頁的設計技巧與思路嗎?當我們拿到一個詳情頁設計需求的時候,我們不要急著去做,而是先分析詳情頁的邏輯大框架,詳情頁的邏輯很重要。我們可以先分析產品的定位和賣點(痛點),先進行產品的定位,懂得營銷思路,確定好文案,把文案的主次關係弄清楚,補充促銷的噱頭,提升轉化率。點綴標題,給人一種購買慾。一、寶貝描述頁的框架打造一個詳情頁,前期需要花多點時間去調查,構思,確定好一個方向,再去做設計。
  • 「PPT」PPT模板設計規範以及思路分析
    下面我們仔細分析一下。PPT模板主要由封面頁,目錄頁,過渡頁,內頁和結束頁組成。當然,少數的會有一些前言概要等的頁面。去看,找到一個模板網站,從第一個網頁開始看,就看PPT模板的封面頁標題文案的排版方式。明確了標題文案的排版美化,那麼接下來就是裝飾元素的設計和使用。
  • 淺談啟動頁/廣告頁/引導頁設計思想
    1.啟動頁設計啟動頁設計思想用戶第一次打開APP,第一眼看到的頁面是啟動頁,啟動頁面主要是告訴用戶「我」(產品)是誰,我是做什麼的(一句話告訴用戶產品定位是什麼)。啟動頁配置:由前端載顯示。2.廣告頁設計廣告頁面目前主流顯示方式是加載在啟動頁之後給用戶展示的,優勢自然是爆光率最高。簡單來說下目前啟動頁面與廣告頁面的互動設計(案例分析)。
  • PPT頁面設計總是太單調?優化一份PPT,分享一下設計的思路!
    在設計PPT的時候,大家是不是總是沒有思路,而且設計出來的頁面總是很單一。其實這是大多數PPT設計者的通病,就是沒有靈感,擠破腦袋也只能做出點稍微像樣的效果。其實,要想將PPT設計的更加精緻一點,也沒有想像的那麼難,為了解決大家設計PPT難這個問題。
  • 歡迎頁/新手引導頁設計:建立良好的產品第一印象
    歡迎頁/新手引導頁如何設計,才能建立良好的產品第一印象呢?一、定義Onboarding英文入職指引,個人翻譯成——新用戶歡迎頁(新手引導頁),指的是啟動App的啟動頁(Launch Screen)之後的歡迎頁面,是用戶對產品的第一印象。
  • 滿99減50背後的「套路」和產品設計思路
    真相是41.7元的秋葵為滿99減50那個list頁專屬頻道的產品,滿99減50等同於半價,如果按此算下來這秋葵買的也不算虧,但是並沒有想想中的那麼便宜。穩穩地抓住了用戶「貪」的弱點,其實便宜是佔到了,沒那麼大。所以,去超市看到食品幾包困在一起銷售便宜的時候,也注意看一下,單買到底是多少錢。
  • 不就是一個訂票網站嗎,12306的核心模型設計思路究竟複雜在哪裡?
    每一年的春運都是對12306的一次大考,拋去盲從和偏見,讓我們用工程師的思維重新打量、從業務分析的角度去探討,12306的核心模型設計思路和架構設計到底複雜在哪裡? 為什麼我要研究這個問題? 春節期間,無意中看到一篇文章,文章中講到12306的業務複雜度遠遠比淘寶天貓這種電商網站要複雜。後來自己想想,也確實如此。
  • 計算機畢業設計之全網最好的ssm旅遊網站
    網站系統採用瀏覽器、伺服器的結構設計。該系統的用戶角色分為:遊客、會員、網站管理員。該系統分為前臺的用戶模塊、後臺的管理員模塊。用戶模塊如下:發布遊記、發表評論、點讚遊記、特產預定、個人信息管理、用戶註冊、網站信息預覽。管理員模塊如下:訂單管理、景區管理、特產管理、酒店管理、首頁信息發布管理、遊記管理、評論管理、用戶管理。
  • 十五個國外最佳主機託管網站設計欣賞
    每個網站虛擬主機基本上都託管在一些託管公司的伺服器上。在這裡我給大家帶來的是一批最好的託管網站設計小展示。其中都有出色的設計亮點。希望你會喜歡這個專輯!(點擊圖片進入相關網站)Media TempleEleven 2Sustainable WebsitesThis Web Host
  • 如何設計宣傳單頁?我用燒烤店為例,一步步講解這樣設計才有效!
    兩方面原因,一是從客戶角度,很多的宣傳內容太過虛假,客戶都被坑多了,單頁就是廣告,不太想看廣告,二是從店家角度,9成以上的單頁大同小異,內容空洞喊口號,顏色、排版毫無視覺美感!如果是我做活動宣傳,會把相當一部分的精力放在單頁內容的構思和單頁設計的視覺呈現上,然後才是找到潛在客戶群體,精準投放!
  • 網站日誌的分析目標是什麼?-賓哥網站優化
    賓哥網站優化設計認為:不僅是網站日誌分析,所有的數據分析工作都應該有其目的性,不然就失去了分析的意義。分析網站日誌一般有兩個目標:了解網站內容和連接是否正常、了解搜尋引擎Spider對網站的抓取情況。前者是為了發現網站運行中的問題並加以修復,保證網站的良好運營;後者是為了發現搜尋引擎的抓取規律,並分析是否有優化的空間,引導搜尋引擎多抓取指定重要內容而弱化對無關緊要頁面的抓取,一般會配合搜尋引擎對網站的收錄情況進行分析。
  • 電商大促攻略頁設計指南
    在設計攻略頁時,首先要設計個整體的表現模型,比如「攻略播報電臺」,「內部洩密文件表格」,「新年醒獅送攻略」等會形成具體認知概念的模型,也可以不選擇任何具象的趣味概念,直接以抽象的表現形式承載。但要注意,你選擇的具象概念,不論是從視覺上還是從文字語義上,都要符合用戶的原有認知。
  • 一個旅遊網站日誌的分析指標:網絡數據的背後
    要系統地分析日誌,得到有價值的用戶反饋,主要考慮聚合度量、基於會話的統計、基於用戶的統計和點擊流分析四方面。1. 聚合度量可以理解為將大量網站數據進行合併分析。下面結合某旅遊論壇的日誌數據說明常用的聚合度量指標。特別說明一下,本論壇純屬虛構,數據也是為了說明概念虛構的。(1)網站的瀏覽量。
  • 學員作品欣賞|引導頁,與用戶的第一次親密接觸!
    哈嘍,各位大佬們好啊現在的APP數量越來越多製作也是越來越精美,特別是引導頁每個APP都希望能在設計上與其他APP區分開從而給用戶留下美好的第一印象因此在引導頁的設計上就需要更多的創意今天的學員作品欣賞時間苗苗老師將為大家帶來設計學院學員們的引導頁設計一起來欣賞吧~
  • 分析捷豹XE Landmark Edition的整體設計思路
    分析捷豹XE Landmark Edition的整體設計思路,一個多月之前捷豹才剛剛在18年紐約車展發布了搭載550匹最大馬力5.0升V8機械增壓引擎的性能休閒旅行車捷豹F-Pace SVR,前幾天英國捷豹也替當地市場銷售的捷豹XE增加了名為捷豹XE Landmark Edition
  • 分析上海F1賽車場的整體設計思路
    分析上海F1賽車場的整體設計思路,在前段時間的巴林站夜間比賽之後,這次緊接著的就是在上海賽道舉辦的F1站。此外根據數據分析得到上海賽道有著三個直線衝刺的區域,所以車隊也需要將車輛設定的相當平衡,既要能夠在高速彎道維持足夠的下壓力,在大直線衝刺時又要能夠發揮車輛的極速性能。整圈賽道當中,F1賽車會在7號彎衝出4.5G的最大側向G值,而大約有一半的時間是全油門狀態。上海賽道的Pitlane長度為388公尺,去年最短的進出站時間為17.291秒。
  • 如何從幻燈片第3頁開始編號呢?這裡分享兩個方法
    對於把起始編號編得大一點,可以通過 設計→幻燈片大小→自定義幻燈片大小→幻燈片編號起始值,對起始編號進行修改,最大可設置到 9999,哈哈,這完全能滿足需求了。好,PPT 完成了從第三頁開始編號的處理了。要從第四頁或其他頁開始編號,也是一樣的道理,移動相應的幻燈片頁數,並設置相應的自定義放映即可。當然了,上面操作可以滿足演示上的需求,但如果需要列印,可能還是會有問題。
  • 用做應用題的思路,來設計你的算法
    我們來嘗試一下,用做應用題的思路來設計一下算法。這一系列的解題思路正好適用於我們的算法設計:解讀數據或客戶/老闆的需求,得出算法需要實現的目標,列出算法設計過程中需要考慮的問題;設計算法的計算過程;測試上線後收集相關數據與客戶反饋意見。
  • 分析本田CBR650F的整體設計思路
    分析本田CBR650F的整體設計思路,在小編對車輛開始感興趣的啟蒙階段,是先從摩託車車看齊的,而身為全球摩託車領導品牌的本田車型,更是小編年輕時的目標,但在當時的時空背景下,排氣量超過150cc的機車在很多地區部署是不被允許的。時至今日或許在對車的想法上有所不同,但本田大型摩託車之於小編來說,仍在心中佔有一令人憧憬的地位。
  • 運動還是居家 中谷明彥評價新威馳/致炫(三)
    分頁導航 1運動還是居家 中谷明彥評價新威馳/致炫2B柱之前結構相同 設計細節體現各自特點 本文來源:易車網 責任編輯:王曉易_NE0011