整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
站使用單頁設計還是多頁設計？這篇文章幫你理智分析，enjoy~
對于許多網頁設計師而言，是選擇單頁面還是多頁面的設計，可能會非常的棘手。隨著移動端和社交媒體的興起，簡單快速響應迅速的單頁網站，成為了目前網頁設計的趨勢。另一方面，傳統的多頁設計也因其廣泛的認知，而被廣大用戶所認可。
所以，真正要在兩者之間做取舍，并不容易。單頁和多頁式的設計哪個更好，影響因素很多。網站的內容如何鋪排，導航如何運作，整體的策略和需求，出發點，都會影響到選擇的決策。不過，內容始終是最核心的影響因素，從內容入手，分析哪種導航，哪種布局更合適，是一種合理的策略。
當然，具體怎么做，看下去，這篇文章會給你答案。
單頁網站，顧名思義，指的是網站本身并沒有采用多頁式的布局，而是將內容都放置在單個頁面上，諸如我們常見的「關于」「聯系我們」等分頁都是不存在單獨分頁的。
正如 Awwwards 所解釋的那樣，單頁式網站將內容完全整合在一頁當中，使得整個體驗更加流暢。用戶借助單頁內的導航同樣可以快速定位，滾動瀏覽也很容易。
單頁網站在為用戶提供內容的時候，其信息和內容都是經過篩選和管控的，確保更適宜閱讀和瀏覽。這也是為什么絕大多數的產品頁面、作品集和事件相關的頁面會采用單頁設計。在這樣的情況下使用單頁設計能夠最大程度降低信息噪音的影響，讓用戶專注于最重要的內容。
為什么那么多人會選擇單頁設計呢？的確，單頁網站更容易理解，拆分出來的區塊也不算多，用戶也很容易消化。
單頁設計更容易直觀地呈現整個用戶歷程。不需要額外的頁面加持，訪客可以直觀而清晰地感知到整個信息流，如果呈現故事的話，起承轉合是非常的順暢的呈現。
單頁設計的另外一個優點，是交互足夠簡單。研究表面，單頁網站比多頁網站的轉化率要高37.5%，用戶可以更快地瀏覽，更快地獲取信息，不會因為頁面和復雜的交互而分心。
單頁式網站在移動端上的優勢也更加明顯。在小屏幕匹配上更加精簡直觀的內容，加上簡單而自然的滾動交互，用戶體驗可謂是輕松而舒適。
但是，這還不是全部。設計師從中同樣獲得不少好處：再也不用增加來回跳轉的鏈接和頁面了，工作量沒那么大，頁面功能也更容易實現，也便于迭代和維護。
單頁網站的缺點和優點同樣突出。單頁網站的缺陷主要體現在幾個不同的方面。
單頁網站在 SEO 上的優勢并不大。事實上，在網站排名這個事情上，單頁網站先天就競爭力不足，這也導致借由搜索引擎進入網站的打開率相對較低。由于內容較少，目標關鍵詞在單頁網站上常常會被忽略掉。
另外，單頁網站也不是成長型品牌在設計網站時候的首選，因為它的擴展性是比較有限的。正如同我們所看到的那樣，單頁網站的關注度相對較低，不適合大量內容的、信息結構復雜的網站來使用。因此，如果你正在運營一個不大的網站，但是有計劃進行多方面拓展的話，盡量選擇多頁網站設計。
最后，網站本身通常只會有一個 URL地址。這本身并不存在問題，可是當你需要借助諸如 Google Analytics 來分析網站數據的時候，內容并不是通過鏈接來區分的，這使得你所獲得分析數據是非常有限的。
多頁網站包含有多個子頁面。與單頁網站不同，多頁網站的設計中需要借助導航來承載不同頁面的鏈接。
多頁網站幾乎能夠承載所有類型的網站項目，諸如 Amazon 這樣的電商網站，諸如 Atlassian 這樣的儀表盤式的網站，也可以滿足 Lynda 這樣的在線學習網站的需求。
和單頁網站相比，多頁面的網站的優點主要體現在三個方面：
首先，多頁面網站有著明顯更強的拓展性。根據需求創建幾乎任意數量的子頁面，設計師能夠通過整合來創造出可用的導航系統。諸如電商網站，會采用一個大型的自定義導航菜單，搭配上搜索框，用戶可以借此抵達幾乎每一個頁面和產品。當然，值得注意的是，導航的設計應該取決于網站的縱深，這個需要設計師仔細衡量和把控。
其次，多頁面網站的導航流程，更容易遵循。多頁面的網站設計早在90年代就已經形成了，用戶對于這類網站的使用方式早已熟悉，它們的使用已經成為一種約定俗成的模式，遵循即可。
最后，多頁面的站點在 SEO 上有著更多的功能和突出的優勢。我們都能確定，多頁面的網站比單頁網站更容易承載更多的內容，在搜索引擎優化上也有更多的潛能可供挖掘，可以承載更加多樣的營銷策略。
事物總是具有兩面性的。多頁網站的缺點也是不能回避的問題。
多頁面網站需要更加頻繁、工作量更大的維護，這無論是對于設計團隊、開發團隊還是內容團隊而言，都是頗為繁重的工作。在選擇單頁面還是多頁面的網站的時候，需要考慮內容的體量和工作量，作出合理的衡量。正如同 Undsgn 所說：「更新和維護單個頁面比處理多個頁面要容易得多，基本的數學規律你是違反不了的！」尤其重要的是，追求數量而輕視質量對于企業而言是極為不利的。
另外一個需要注意的問題就是網的跳出率。根據《Search Engine Journal》的統計，擁有大量內容的網站相對而言加載速度會更慢，用戶注意力更容易被分散，這會導致網站的跳出率提升。雖然并非每個多頁面網站都會被內容所拖累，但是內容和信息量的增加是必然會帶來注意力的分散，這個是需要注意的。
最后，多頁面網站設計在移動端上，也沒有單頁設計那么友好。和單頁不同，多頁面網站即使是通過響應式設計在移動端上呈現，在交互和界面上所耗費的時間也是更長的，所達到的效果卻不一定理想。你會為了移動端上的一致性，而犧牲桌面端上的一些設計么？
其實今天的文章，我們的目標是通過闡述單頁設計和多頁面設計之間的差異，讓你能夠在設計上作出更好的決策。簡單總結一下：當你的網站功能比較集中，關注度也較低的時候，單頁設計會非常有用，它也是移動端網頁的首選方案。如果你需要復雜的、多功能、可拓展式的網站，那么還是采用傳統的多頁式設計，結合合理的導航設計，并且加入可靠的 SEO策略。
選擇單頁還是多頁，很多時候需要靈活應變，因地制宜，內容始終是網站的靈魂，多考慮用戶打開網站時候的使用場景，也許整個局面就很明朗了。
原文作者 : Justinmind
譯者/編輯 : 陳子木
譯文地址：https://www.uisdc.com/single-page-vs-multi-page
本文由 @陳子木 授權發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自 Pexels，基于 CC0 協議
天我們學習的內容有：過渡，動畫，轉換，伸縮盒子。
可以說今天學習的內容都是重量級的大佬，學好了，使用css3做出酷炫的效果 So Easy！~~
1.過渡
在css3中，有一個屬性可以設置過渡效果。
它就是transition，所謂的過渡效果，指的就是以動畫的形式慢慢演化樣式屬性變化的過程。
A.案例：通過transition設置焦點過渡效果
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{width: 200px;height: 200px;margin:200px;background: url(girl.jpg);border-radius:50%;transition:all 1s linear 0.3s;cursor: pointer;}div:hover{box-shadow: 0px 0px 20px blue;}</style></head><body><div></div></body></html>
注意頁面中的代碼：
第一，我們給div添加了一個hover偽類樣式，當我們鼠標懸停在div上方的時候，會給div盒子添加一個藍色的盒子陰影。
第二，我們給div盒子添加了一個transition樣式，設置的值為：all 1s linear 0.3s;
這四個數據分別對應
transition-property(需要過渡的屬性)：如果設置為all表示所有樣式屬性都需要過渡。
transition-duration(過渡的時間):以秒作為單位，設置過渡的時間
transition-timing-function(過渡的方式):常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等
transition-delay(延遲的時間):以秒作為單位進行延遲，延遲之后開始進行過渡效果。
所以，我們通過transition這個復合屬性設置的過渡效果為：
all:需要過渡所有的屬性
1s:過渡的時間為1秒
linear:勻速過渡
0.3s:在延遲0.3秒之后開始過渡動畫。
如果大家理解了上面的描述，那么也就不難理解咱們鼠標放到div上之后，為啥會慢慢出現藍色的光暈了，就是因為咱們添加了過渡，所以，慢慢的就會給盒子添加陰影效果。
2.動畫：
在學習完了過渡之后，發現咱們可以使用transition去以動畫的形式展示樣式的改變以及變化的過程，這可以幫助我們來實現一些過渡的動畫。
但是，有的時候，我們的需求會更加的復雜，要求會更加的多變，那么，transition可能就無法滿足我們的需要了，我們需要有更加炫酷，復雜的效果呈現。
那么，動畫animation就可以滿足我們的需要。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>@keyframes moveAndChange{0%{left:0px;top:0px;}25%{left:200px;top:200px;background:green;border-radius: 0;}50%{left:400px;top:200px;background:blue;border-radius: 50%;}75%{left:400px;top:0px;background:#ccc;border-radius: 0;}100%{left:0px;top:0px;background:red;border-radius: 50%;}}div{margin:200px;width: 200px;height: 200px;position: absolute;background:red;border-radius:50%;animation: moveAndChange 5s linear 0.5s infinite normal;}</style></head><body><div></div></body></html>
代碼效果如下：
同樣，讓我們來關注編寫的代碼：
1.在樣式中，首先我們使用@keyframes 來定義了一個復雜的動畫，在css3中，新增了@keyframes可以來幫助我們添加動畫。代碼如下：
/*動畫的名字叫做moveAndChange*/
@keyframes moveAndChange{
/*動畫最初的時候，將left設置為0px，top設置為0px*/
0%{
left:0px;
top:0px;
}
/*當動畫進行到25%的時候，使用動畫將left過渡到200px，top過渡到200px，
背景顏色過渡為綠色，圓角過渡為0(無圓角)*/
25%{
left:200px;
top:200px;
background:green;
border-radius: 0;
}
/*當動畫進行到50%的時候，使用動畫將left過渡到400px，top過渡到200px，
背景顏色過渡為藍色，圓角過渡為50%(正圓)*/
50%{
left:400px;
top:200px;
background:blue;
border-radius: 50%;
}
/*當動畫進行到75%的時候，使用動畫將left過渡到400px，top過渡到0，
背景顏色過渡為灰色，圓角過渡為0(無圓角)*/
75%{
left:400px;
top:0px;
background:#ccc;
border-radius: 0;
}
/*當動畫結束的時候，使用動畫將left過渡到0x，top過渡到0px，
背景顏色過渡為紅色，圓角過渡為50%(正圓)*/
100%{
left:0px;
top:0px;
background:red;
border-radius: 50%;
}
}
這是一個比較復雜的動畫效果，可以發現，它通過百分比的形式將一個完整的動畫拆分成了5個部分，每個部分都有不同的樣式效果，而當我們采用該動畫的元素就會按照設置的順序和樣式效果進行動畫的過渡和展示。
2.上面我們只是通過@keyframes創建了一個動畫，我們還需要通過特定的語法來使用這個動畫。
就是下面這句代碼了：
animation: moveAndChange 5s linear 0.5s infinite normal;
它是一個復合屬性，設置了6個值，分別對應：
animation-name(設置動畫的名稱)：用來設置動畫的名字，我們這里寫的是moveAndChange ，也就是說我們就是要使用我們剛剛創建的動畫。
animation-duration(設置整個動畫的時間):以秒作為單位，我們這里寫的是5s，表示整個動畫的時間為5秒
animation-timing-function(設置播放動畫的方式)：播放動畫的方式，常用的有linear(勻速)，ease(先慢后快)，ease-in，ease-out，ease-in-out等，我們使用的是linear勻速播放動畫。
animation-delay(設置動畫的延遲):以秒作為單位，我們寫的是0.5s，表示延遲0.5秒之后開始播放動畫。
animation-iteration-count(設置動畫播放的次數):播放動畫的次數，我們這里寫的是infinite ，表示動畫將會被播放無限次，如果寫數字，那么就會播放數字對應的次數。
animation-direction(設置是否反向播放動畫)：我們寫的是normal，表示正常播放動畫，如果寫的是
alternate則表示要反向播放動畫，大家也可以自己試一試這個效果。
最終，我們通過@keyframes創建動畫，通過animation設置動畫，成功完成了這個復雜的動畫效果。
3.轉換
在css3中，我們通過transform屬性可以設置元素的轉換效果，具體的效果如下：
A.平移
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body{background:pink;}div{width: 200px;height: 200px;position: absolute;background: green;left:0px;top:0px;transform: translate(300px,300px);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子的位置是left:0,top:0;
但是我們通過transform: translate(300px,300px);將盒子進行了偏移，所以，盒子的位置發生了改變。
B.旋轉
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: rotate(45deg);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來div盒子應該是四四方方的。
但是，經過我們的代碼transform: rotate(45deg); //deg為單位，表示度數。
進行了45度的旋轉之后，呈現出來的就是一個菱形的盒子了，旋轉的正方向為順時針，負方向為逆時針。
C.縮放
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>body {background: pink;}div {width: 200px;height: 200px;margin: 200px;position: absolute;background: green;left: 0px;top: 0px;transform: scale(0.5,0.25);}</style></head><body><div></div></body></html>
代碼效果如下：
如上圖所示，本來盒子的寬高為200*200,而我們通過transform: scale(0.5,0.25);進行的縮放
scale的第一個參數為0.5,表示橫向縮小為0.5倍
scale的第二個參數為0.25，表示縱向縮小為0.25倍。
scale的參數如果為1，則表示不進行任何縮放，小于1就是做縮小，而大于1表示做放大。
小結：transform轉換中其實還包含了skew(傾斜)，matrix(矩陣轉換)，相對來說用到的不是特別多，所以在本文中我們便不再做介紹。
4.flex布局
Flex布局，可以簡便、完整、響應式地實現各種頁面布局。
Flex是Flexible Box的縮寫，翻譯成中文就是“彈性盒子”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex布局。
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: flex-start}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
代碼效果如下：
如圖所示，咱們通過display:flex將.parent元素設置為了flex盒子，那么子元素將會按照justify-content設置的方式進行元素的排列，目前看來，和我們沒有設置flex盒子的效果是一致的。
接下來我們更改一下，將justify-content設置為flex-end，效果如下圖所示：
所以我們就應該發現，flex-start是讓所有的子元素從父元素的左側開始排列
而flex-end是讓所有的子元素從元素的右側開始排列。
我們再來更改一下，將justify-content設置為center，效果如下圖所示：
更厲害了，子元素在父盒子的中央位置排列顯示了。
然后，我們再將justify-content設置為space-around，效果如下圖所示：
它是平均分配的形式為每一個子元素設置了間距，但是看起來有點變扭。
所以我們推薦將justify-content設置為space-between，效果如下圖：
我們還可以通過flex-wrap來設置子元素是否換行顯示，以及flex-direction設置子元素排列的順序。
這兩個屬性可以設置的值如下：
flex-wrap: nowrap;//不換行，會自動收縮
flex-wrap: warp;//換行，會自動收縮
flex-wrap: warp-reverse;//反轉，從默認的從上到下排列反轉為從下到上。
flex-direction:row; //從左至右一行一行進行子元素的排列
flex-direction:column; //從上到下一列一列進行子元素的排列
flex-direction:row-reverse; //從右至左一行一行進行子元素的排列
flex-direction:column-reverse; //從下到上一列一列進行子元素的排列
案例代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;flex-wrap: nowrap;flex-direction: row-reverse;}.parent div{width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body></html>
我們設置了flex-wrap: nowrap;（不換行，壓縮所有的子元素在一行中顯示），以及flex-direction: row-reverse;（反向排列）
代碼效果如下：
如果設置為flex-wrap: warp（換行顯示無法在一行顯示的子元素），則效果如下：
如果將flex-direction: column;,則會縱向排列元素，效果如下圖：
除了上面的這些給伸縮盒子父元素設置的樣式之外，我們還可以可以伸縮盒子的子元素設置flex屬性，用來設置平均分配整個父盒子的空間。
代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div{flex:1;width: 20%;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下：
如上圖所示，每個盒子平均分配了父盒子的空間，原本寬度為20%，現在被拉伸了。
除此之外，咱們還可以使用flex屬性進行進一步的設置，代碼如下：
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Document</title><style>div{box-sizing: border-box;}.parent {width: 600px;height: 200px;margin: 100px;position: absolute;background: green;left: 0px;top: 0px;display: flex;justify-content: space-between;}.parent div:nth-of-type(1){flex:1;border:1px solid #ccc;background:red;}.parent div:nth-of-type(2){flex:2;border:1px solid #ccc;background:green;}.parent div:nth-of-type(3){flex:2;border:1px solid #ccc;background:blue;}.parent div:nth-of-type(4){flex:1;border:1px solid #ccc;background:pink;}</style></head><body><div><div>1</div><div>2</div><div>3</div><div>4</div></div></body></html>
效果如下圖：
我們分別給四個子盒子設置了flex:1 , flex:2, flex:2 ,flex:1.
這是什么意思呢？
四個flex加起來一共是6.那么第一個盒子就占據整個父盒子的1/6寬度。
同理，另外三個盒子分別占據2/6,2/6,1/6的寬度，所以就形成了我們現在看到的效果。
原文來源于：黑馬程序員社區
學習資源：
想學習css，可以關注：黑馬程序員頭條號，后臺回復：css
用TRS WCM制作網站的時候，遇到一個欄目有多個子欄目的情況，該如何配置模板呢？信和網站維護中心，在建站過程中遇到了類似的情況，于是挑選了幾個用trs wcm制作的網站，分析了下其他網站的模板配置方法。
從中科院和長沙市政務門戶兩個網站，經過分析兩個TRS 內容協作平臺用戶的站點欄目結構，發現可以對含有多個子欄目的父欄目，進行跳轉到默認的第一個子欄目。
TRS WCM內容協作平臺 7.0
具體有看的兩家，分別采用了javascript跳轉和meta refresh跳轉兩種思路。突然感覺這種解決思路好靈活。
中科院TRS WCM父欄目模板設置案例：
欄目結構
->資源條件
---->出版物（要設置模板的父欄目）
-------->期刊
-------->專著
-------->電子雜志
出版物頁面地址：www.cas.cn/zy/cb/
打開后，服務器響應html代碼
中科院TRS WCM父欄目跳轉子欄目實現效果截圖
頁面通過javascript跳轉到出版物的第一個子欄目期刊（http://www.cas.cn/zy/cb/qk/）
而上面獲取出版物第一個子欄目顯示名稱和欄目文件夾名稱都可以通過相應的置標獲得到。
思路很妙。
另一種實現思路來看長沙市TRS內容協作平臺設置多個子欄目的父欄目模板案例：
欄目結構
->信息公開目錄
---->工作動態（要設置模板的父欄目）
-------->政務動態
-------->部門動態
-------->區縣動態
工作動態頁面地址：www.changsha.gov.cn/xxgk/szfxxgkml/gzdt/
打開頁面后，服務器響應代碼為
長沙市TRS內容協作平臺某含有子欄目的欄目跳轉規則截圖
通過meta refresh到默認的第一個子欄目政務動態欄目。
思路是一樣的，只是更妙。
如果父欄目要設置專門的欄目頁面，那么就不存在上面的情況了。
由此延伸想到，很多其他平臺建設子欄目的時候，也可以采用類似的思路。之前見過很多不同的cms系統，類似這種結構的欄目，有不少都是父欄目錄入子欄目第一個的內容，然后子欄目再重復錄入一遍。而TRS wcm模板制作的這種解決思路，很好的避免了文章多次錄入的問題，省去了后期調整需要要修改多個地方的麻煩。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
