整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
站使用单页设计还是多页设计？这篇文章帮你理智分析，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小时内与您取得联系。
