稍后看官们可能会觉得我说的这几点可能你们都见过或者自己也在一些项目中运用起来，没错，没见过就不叫趋势， 哈哈！而将这些东西进行总结然后运用在自己今后的设计中，这样我们才能紧跟潮流并逐渐引领潮流，否则将只是走马观花。

我们通过几个网站以及看官记忆中的网站一起探索吧，虽是管中窥豹，但趋势可见一斑！

一、平面设计在网页设计中的崛起

以前我们可能会觉得平面设计和网页设计以及UI设计有很大的区别，会平面设计的人可能未必能做好网页设计，但这样的观念是时候革新了。实际上好的平面设计师会将自己的平面设计功底融合到网页设计当中，如果我们在学网页设计的时候只是参照网站设计，那我们永远无法突破。

不论是用平面设计作为背景也好，或者是用平面设计的元素作为网页控件或者装饰也好，实际上好的平面设计会大大提高网站的视觉冲击力。所以未来的UI设计师也必须是一个不错的平面设计师了，或者统称为视觉设计师，加油！

GROBA

WIT

二、全屏首页（首页大图、视频背景、特效背景、交互式首页）

全屏首页是一种欢迎页面或者着陆页的形式，当前网站五花八门，能在第一时间内传达网站或企业的精神并吸引用户继续浏览的重任逐渐落在了这个全屏首页 的肩上。不论是图片背景还是视频背景，视觉冲击力和痛点抓取力度成为了首页的重任，这也是筛选潜在客户的一个方式。首屏的文案也尤为重要。

首页大图背景

首页大图的形式相信大家都不陌生了，通常都是高质量的摄影图片，或者在纯色背景上的产品图片等等。优势不言而喻，那就是具有很棒的视觉传达效果和冲 击力。而且随着网速的不断提升，几秒内加载一个百K的高清背景对用户来说不是什么问题。我们曾推荐过许多高清图库站，稍加搜索便可找到。

首页视频背景

使用视频作为首页的背景在视觉上更加具有冲击力，好的视频宣传片更是为网站如虎添翼。但是缺点亦较为明显，目前国内网速相对仍然较慢，（即便是 30M的光纤，在很多地方其实都是共享网速，高峰期看个在线视频都会卡），而视频背景通常都是网页打开即直接播放的，在网速达不到一定标准的情况下，视频 会卡顿播放，体验很差。而且为了让视频播放流畅，实际上很多网站的视频都是压缩成成分辨率比较低的视频，清晰度和图片相差较大。希望以后能出现视频缓冲或 者预加载技术等方式来提升整个浏览效果，关键还是网速。

JONAS ERIKSSON

该网站视频背景就相当具有震撼力，快速将自己的作品展示给观众，让观众充满好奇。

HTML5特效背景

我们以粒子特效背景为例。相对于视频背景而言，使用新的网络语言制作的背景在加载速度、成像质量等方面都优于视频背景，而且特效背景也具有很棒的视觉体验。

FiberSensing

交互式首页

交互式首页指的是在网页上做一些可以用鼠标或者键盘控制的元素来与用户发生互动，这样用户在首页停留的时间会更久，同时却很享受这个过程，提高用户 体验的同时提升网站的趣味性和企业形象。交互式页面设计经常会运用到诸多HTML5或者CSS3技术，比如前面提到的粒子特效。

Suanier

三、全屏富式导航

传统网页设计中，导航菜单一般会放置在页面顶部或者侧面，但越来越多的电脑端网站却将菜单全部隐藏在汉堡图标中。

这种设计起初只是导航，称之为“全屏导航”；而到后期，随着设计的革新和创意的加入，这个页面的内容也越来越丰富，页面加入了社交媒体的链接，加入了联系方式，甚至有的还加入了留言板等等，我们称之为“全屏富式导航”。

这种形式的导航在用户体验上其实还是有些风险的，因为多了一次点击，而且会导致很多用户忽略细节性内容，难以达到最优设计，而这种菜单通常也需要建 立在用户对汉堡菜单的标志具有相当的熟悉程度基础之上。目前，我们建议使用这种菜单的网站会有一个引导性的提示来告知用户更多信息的入口，或者除了菜单一 个入口外增加其他入口。用户体验的一个准则是将用户需要的信息主动呈递给用户或是能让用户在三次点击内找到自己需要的信息，所以这种隐藏在一个图标里的菜 单目前还是略有风险。不过这种风险会随着普及程度降低。

四、三维视觉效果的崛起

这一点将对网页设计师提出了更高的要求，网页设计中会融入产品的三维动态展示，这可能会要求网页设计中包含UI与交互设计、工业设计与渲染、视频剪 辑、精通HTML5的前端等等。也正是因为这种设计门槛较高，所以增长速度较慢；但随着产品专题站的爆炸式增长，在产品介绍里使用三维已成为越来越多的网 页设计师的选择。

实现三维预览效果的方式很多，有的是通过WebGL技术，有的是通过鼠标控制视频播放的技术，也有许多三维动态展示其实是多张不同角度的图片拼接而成，一帧一帧进行播放。

BLIZEYEWEAR

MAC PRO

五、动效将更加普及和广泛

期初，网站动效会集中在页面内部的元素，而随着网页技术和创意的不断发展，动效在网页中变得无处不在。单页面网站中浏览模块之间的切换不再局限于单 纯的推动切换或渐变切换；而多网页的网站网页之间的切换也变得更加柔和，通过不同页面关闭和打开之间动画效果的衔接，你会以为你从头到尾都在一个网页上。

页面内部元素的动效，大至banner小至一个button，鼠标悬浮或者焦点的改变，这些元素都融入了太多丰富的动效。甚至于GIF动图也在网页中逐渐崛起以补充一些代码难以实现的动效。

前面提到的网站中多数都有精致的动效哦。

DIVI（wordpress）

该网站就是通过GIF实现的一些页面中展示性的动效。

JOHO’s

其实我们提过的很多特效都在该网站得到了体现，运用了大量的网页新技术，比如WebGL技术、SVG动画……尤其在页面切换时的动效。

六、单页网站走势继续上升

同样，随着网速以及网络技术的上升，单页式网站依旧呈现上升趋势，这种网站最显著的优势是信息不容易遗漏，如果访问一个站点通过点击又点出了许多子 站或者网页，而这些网页和主页之间的逻辑比较混乱或者不能一目了然，那这个网站的浏览体验一定是很差的。而单页网站解决了这个问题，你看到的或者跳转的页 面，其实还都是在这一个页面上。而AJAX异步加载等技术也解决了庞大单页网站的加载速度问题。

AQUATILIS

点击页面中的按钮，新的内容将会将原来的页面向左推动，关闭后恢复原来的位置，就好比左侧的页面是一个轴，而你则挨个浏览轴上的内容，用户体验很赞。

七、网页音效

越来越多的网页设计会在页面中加入一些音效，可以是网页背景音效，也可以是页面滚动音效，也可以是焦点改变时元素的音效。而这些音效共同的特点是都 很精致轻微，轻轻点缀，就像转动保险柜旋钮发出的声音一样，清脆悦耳。这样不会给浏览者增加无谓的困扰。而越来越多的浏览器为了防止用户被困扰，增加了关 闭当前页面音效的功能。

MY/STATIC/SELF

不过这个网站的音效并不柔和悦耳，是一种酷酷的恐怖的科技感

八、移动优先的响应式设计继续盛行

响应式设计已经是老生常谈了，相信大家都清楚什么是响应式设计。之前很多人也分析过响应式设计的利与弊，我也不再赘述。

很多国内的网站在建站之初不会选择响应式设计，原因也是比较符合我国国情的，流量少、网速慢、4G普及程度不够等诸多原因，导致我们在手机端浏览一 个响应式的企业网站的时候会耗用较长时间的加载，而根据5秒原则，用户5秒内打不开一个网站，就会选择关闭。目前国内BAT的网站基本还是移动和电脑分开 设计，而国内很多建站公司的响应式企业建站，也含有一部分噱头在内。

不过，响应式设计在国际和国内却依旧稳步上升，随着智能手机技术的不断革新，移动端的上网用户已经逐渐追击电脑上网用户，而中国移动网名的数量在世界上是领先的。移动端网站的设计越来越被重视，而响应式设计正是一个不错的解决方案。

九、中文网站中矢量字体的使用逐渐上升

我们经常在国外的网站上看到网站内使用一套字体作为自己的网站字体，即使用户本地没有这个字体，网站也会很轻易加载到字体并在浏览器中运用。而纵观 中文网站，90%以上的网站内字体不是宋体就是微软雅黑，想用几个不一样的字就得做成png图片，原因很简单，中文字库太大。一套Helvetica标准 字体大小是81.68KB，而一套微软雅黑常规体大小是20.5MB，你难道要用户打开网页时加载20.5MB的数据吗？

但是随着中文在线字库的崛起以及在线制作矢量图标字体工具的发展，包括字蛛计划，我们可以使用矢量素材作为我们的字体了，而不仅限于矢量图标。

GOGORO

作者：章萧醇

科学告诉我们，颜色可以引起我们消极的负面感觉。Kissmetrics还表明，对于一个站点来说，访问者只需花费90秒就可以做出判断或者意见。进一步来说,“62％—90％的交互是由产品自己的颜色决定的。”

正如《Web UI Design for the Human Eye》这本免费的书中所描述，颜色在给用户创造强烈的第一印象上扮演了一个不可否认的角色。

颜色的含义是什么

对于每个人来说，每种颜色都意味着些什么，尽管这些意义取决于我们个人的喜好和文化背景。看看下面的色卡，可以作为一个颜色含义的快速参考。

图片来源：UXpin

设计中的色彩心理学不是一门精准的科学，并且研究表明，色彩心理受个人认知影响。社会因素中如社会性别也对颜色如何被感知有影响。进一步研究表明，不仅是颜色自身含义的影响，也是关于在使用中如何让用户恰当的感知到用在品牌上的颜色含义。

图片来源： Kissmetrics

所以，如果你是给女性设计的，那么紫色是一个不错的选择，因为一般来说它是普遍女性喜欢的颜色，但是男性是不喜欢的（当然通常情况下是这样）。在下图中，对巴黎欧莱雅来说是一个很好的效果 。正如你所看到的那样，页眉和页脚都是黑色的，它表明了地位感和优雅感，让你总体感觉到该产品并不便宜，而是高端产品。

图片来源： Kissmetrics

此外，文字用白色的，表示着现代和平静感，然而选定的紫色代表着奢华的，优雅和女人味——所有这些都清晰的适合于一个网站，例如就这个网站。

（如果想要了解更多关于简约设计，并使用空余时间作一个设计工具，可以看看这些免费的电子书《The Elegance of Minimalism 》和《 The Zen of White Spacliae in Web Design》

在下图中，在妇女健康杂志网站上面的横幅是粉红色的，但其他地方避免使用颜色，反而是用图像和粗的导航。这个有趣的设计选择对网站起到了反作用。

首先，当一个网站的目标是针对妇女的时候，粉红色是一个非常老套的颜色， 并且粉色吸引的是爱吃甜食的人群，因此对于网页消息要传达的是女性的健康这一目的就没有了。

图片来源：女性健康杂志

当我们进入到网页的次层级中，那么标题的颜色理所应当使用在每一个页面上。当你快速浏览减肥标签下的页面。如下图。

如你所见，这个页面更是粉红色，这一点可能会给观众带来适得其反的感受。不管怎样，我们刚刚在滑块上看到的那张图，如果你还保留着这张图那么请改掉它。

确定颜色主题

你创建一个网站，这个网站只有一种颜色这是不可能的，除非你打算用纯单色。所以你应该考虑整体的配色方案和使用的每个色彩，以及它们的统一性。另外还要考虑颜色对用户的影响，以及如何让你正在使用的主色和辅助色相匹配。

考虑到这一点,你应该会关心怎样混搭颜色能匹配并且能够帮你解决网站颜色问题。那么你可以了解下面三个颜色混合的基本方法。

1三角色彩计划

这是一个基本的，并且稳定平衡的方法。原理是使用了色彩的活力和互补特性。使用这个12项色环，你可以选择任何三种颜色，这三种颜色的位置关系是彼此是120度的距离，依次作为背景，内容和导航的颜色。

图片来自: Ray Trygstad.维基百科

2复合色（互补色）

第二种方法有一点难并且你可能为了证明它是恰当合适的颜色不得不去做些实验，如果实验做得好，它会是非常有效的。这个概念用了四种颜色，即两组对比色（色环上相邻两个颜色的180度补色）

图片来自: Ray Trygstad.维基百科

3近似色

这个方法仅侧重于互补色，当决定你想要的计划要去传达给用户的时候，你可以考虑这个方法。它强调了选择颜色的活力，当这些色彩被夸大后就可能太多了。

图片来自: Ray Trygstad.维基百科

因此考虑色彩心理学时，重要的是你应该把所有色彩作为一个整体去考虑，它们在一起怎么工作，而不是只选一个颜色，还有希望颜色要与其它的内容如背景，文本等这些按钮起到作用。

看看下面的这张图片，并且考虑下它向用户传达了什么内容。

图片来自Codementor

1背景颜色——黑色的背景展现了网站的优质，精细，正式和统一的企业形象。显然，当考虑网站提供辅导的时候，你应该会想传达卓越，精益求精这些东西。网站的形式上表明，当和学习相关的这些企业社团表明用户可能不是作为一种爱号学习代码，而是作为他们未来职业生涯中的一种技能来学习的。

2按钮的颜色——该网站使用了红色的按钮作为交易按钮。和黑色的背景形成了鲜明的对比，鼓励更多用户去注册。对于不太重要的按钮则使用白色描边，与整体方案一致。

3文本颜色——对于文本，白色规定了所有重要的对比度，同时和整体颜色方案相匹配。白色的线性图标(白色半透明的按钮）被放在了下面来鼓励用户在必要的时候向下滚动来获取更多内容。

总体来说，设计工作做得很好——我们都知道黑色和白色搭配在一起能够协调，在这种情况下，这个网站感觉优雅和相对正式。红色，如果使用过度，可能会使网站的取意远离整个信息的传达，所以它在使用时非常的谨慎，只是为了突出并让它清楚的表达所需的动作是去注册这个功能的目的就好了。

避免一些颜色

棕色在设计中通常会唤起自然感，但是这个颜色是大多数男性最不喜欢的颜色，但它确实在某些情况下工作使用，因为用它来表示可靠性。

图片来自: Color Matters

因此对ups来说棕褐色作品是当它的公司想要传达它可以依靠的强烈信息时候，棕色也可以使用。但是，作为一个运动套件，它被形容为有史以来最差的大学橄榄球,感谢图中显示的这张示例图片，这属于美国怀俄明大学队的。有趣的是，棕褐色也被认是推动“强度，耐用性”，所以当配上这样的积极运动你会想到它会起到这样的作用，但它不会在这种情况下发生因为正常情况下男性不喜欢棕色。

当谈到女性的时候，橙似乎是最不喜欢的颜色，所以记住这一点，如果你设计的主要人群是女性用户群，不要用橙色。

当然，请记住，这些只是指导原则（他们总是依赖于文本内容），其实更重要的是所有的颜色相得益彰，创造和谐。

一些工具来帮助你选择正确的颜色

当然，你可以使用现成的调色板，你的选择色彩的时候来帮助你。当涉及到网页UI设计，你不需要重新发明色轮。下面一些颜色色卡资料分享给大家。

1Adobe Color cc –为所有adobe用户值得信赖的供应商

2Paletton –简单颜色拾色器，适合初学者

3Flat UIColor Picker – 用于创建丰富多彩的扁平设计

4Mudcube Color Sphere – 提供主题选择和十六进制数字

5Check MyColours –用于检查前景和背景的颜色组合，并且它具有正确的对比度，供人用色盲。

6Color– 允许你通在屏幕滑动鼠标选色，设置饱和度，然后你可以得到十六位进制代码。

通过实例学习

有成千上万的网站在那里用颜色带来很大的影响，以及大量不这样做的网站。下面的图片awwwards站点靠色彩区分，而且我们很容易明白为什么这么做。

图片来自: AWWWARDS

背景是均匀的浅灰色它与自行车的灰色搭配起来很好看。简单的设计，用大字体是非常有影响力的，并立即传达出这个含义：它是一个快速的小自行车，会让你爱上骑行。利用灰色让其他颜色凸显出来的特质，并且灰色是一个中性色，当它变亮变轻，照亮了页面并让页面活跃了起来。灰色也给我们一种稳定感（对于一个伟大的自行车广告），同时营造安静和沉稳的感觉。

在图片中字“GO”使用的颜色鲜亮活泼，体现了活力和现代的设计感。主要是蓝色调，因为这个颜色男性和女性都会喜欢，它可以确保页面没有性别区分。少量的加入绿色，暗示了环保的含义，这样做法很聪明，因为自行车和汽车比起来更好，不会污染空气。众所周知这一点对于宣传来说是很有力量的。

总体而言，这个页面告诉你踏板车是多么的完美，并且它会是现代都市人的生活方式之一。

最后注意事项

色彩是设计的一个重要组成部分，也是整个品牌重要的一部分。所用的颜色所传达的意义必须喝品牌个性和品牌故事一致。通常情况下，设计师有时不得不用现有的艺术作品，如 logo，并且不得不再此基础上选择颜色。然而这过程似乎是被完全压缩了的，但调色板的实用性也许可以让你在做的过程中比较容易些。要了解更多关于视觉设计如何给用户上最强的第一印象，看看这个免费书《 Web UI Design for the Human Eye》。这是我们分析了33个公司，包括Tumblr,Etsy,Google,Facebook, Twitter, Medium, Intercom,和Bose。

作者：Jerry Cao

根据网页设计心理学最新研究成果，要让访客执行动作，首先必须了解他们的心理。人脑做决策时大多是仓促的，未经过深思熟虑。Malcolm Gladwell说过，“成功的决策是权衡理性思维与感性思维的结果。”当访客面对众多选择时，最重要的是从感性层面吸引他们，但你只有几秒时间来完成这一步。关于劝导式网页设计，以下有五个建议：

一、清晰明确
人脑是善问的器官。初次见到某个事物时，人想到的第一个问题是：这是什么？所以，在访问网站时，访客首先会想：这个网站有什么用？在这儿能做什么？是否有必要在此停留？还有最重要一问，即是否能找到所需信息？设计网页就应避免使用大量术语或复杂措词。可以模仿下面这样：网站所售何物、如何购买、如何获取其他信息都一目了然。

二、视效突出
研究表明，96%的人访问网站时首先关注视觉设计，只有6%注意到网站内容。第一印象可持续数年。视觉感受比用户体验更容易在第一时间形成。以下是Simple在线银行的网站。简洁明了的首页与网站宗旨完全契合，这也是利用大幅白背景引导注意力的典例。

三、层次明晰
在网页中，元素越大越重要。如下图所示四个圆，人们往往会认为蓝色最重要，因为它最大。
所以，在设计网页时，应把网页中最重要的元素设计得最大。

四、锁定注意力
80%的注意力产生于首页第一屏，69%的注意力产生于页面左侧。据神经科学研究显示，捕捉注意力的最佳方式是使用超大、惹眼的图片，例如，在登陆页面使用大背景图。
人物图最能拉近与购物者间的距离。若图片中的人面带微笑，目视前方，使用开放式肢体语言，有如真实购物者则能产生最佳效果。

以下为eBay最新产品页布局：eBay声称采用大图并减少文字减慢了用户滚屏速度。关于产品页，应放大产品图片。例如，可以减少每行产品数量以使每张图显得更大，这样可使收益提升25%。

五、每页一个首要动作
网站每个页面都有特定功能。在设计时，应使每个页面功能清晰明确，避免过早出现过多行动召唤。“免费注册”是最常见的首页行动召唤，但访客的注册目的、效用和意义何在？因此，最佳的方式是先向访客展示产品及服务信息，待时机到来时再出现行动召唤。

你几乎每天都可以见到这些网站，每次看到他们，你都会感慨到：“多希望我当初能够想到这个点子。”设计师们正在完成一项了不起的工作，设计出一系列精美的网页元素并将其组合在一起，这些网页不但具备可用性，同时又富有新鲜感和原创味道。

奇特的造型、颜色的组合搭配和新颖的导航工具可以设计出那些最富有趣味又令人着迷的网站。

这些网站也同样难以设想和构建。

但是你永远不知道什么可能会引领一场新的趋势，带来大量的点击或者以一种你无法想象的方式“工作“。对于设计师和开发人员而言，在网页设计中最需要记住的是无论外观多么富有吸引力，一定要保证可用性及效率。在设计过程中结合创造性的思考，仔细分析关键因素，这样每天都会产生新奇而吸引人的好点子。

跳出框架思考

第一个问题：为什么？

勾画网站草图时，我们为什么总是用矩形？为什么总是用某类特定的颜色或字体？为什么照片都是同样完美的4*6的长宽比？

第二个问题：怎样与众不同？

越来越多的网站通过选择富有趣味的创新的布局来回答第二个问题，使用带有圆角的形状、富有戏剧效果的图像、可能并不显眼的颜色，以这种新的方式来进行页面的导航和滚动设计。

基本概念

当我们发展一些新的概念时，打破既有模式的关键点在于牢记基本概念。无论网站看起来有多么酷炫，一定要满足可读性和可用性，否则用户无法浏览访问网站并与内容产生互动。

设计过程中要时刻思考用户的行为，想想他们是如何理解和使用网站的。如果你的用户是超级技术达人，那么导航或者滚动设计只要有一点点的小问题就会被凸显出来。但是如果你的用户是电脑小白，那么你可能只需要关注最基本的导航工具。

用户访问你的网站是有目的性的。当他们进入网站时，他们想要的一定要表现的足够突出。确保你的设计可以表达出网站的真正用途-提供信息咨询、娱乐、商业等等。

不要尝试做很多。挑选一个有趣的想法然后做下去，但是不要尝试同时做很多事情。记住，如果你的网站上有太多的东西的话，用户不会在上面逗留的。找到一条有趣而独特的方式与他们沟通互动。

五个网站实例

那么怎样可以把创造性、可读性和可用性这些特性完美的组合在一起？我们可以看看下面这些网站、他们在做一些新颖的、意想不到又相当精彩的事情。

Lowdi正在做一件了不起的工作，通过一些不同寻常的图形打造视觉的趣味性。每个色块不仅有一些特定形式的圆角（或是反向的圆角），同时这些色块的形状也和公司所销售的产品相似。即使你不去看屏幕上的Lowdi盒子，你也会想到他。通过滚动，这个盒子（实际上是一个扬声器系统）通过一系列弹出式气泡与你进行交流。这个想法有趣、新鲜，引人入胜。

网站地址：https://lowdi.com/

Steve Vorass在他的个人作品网站上采用了流行的 “隐藏式导航“ 进行设计。网站在屏幕的顶部简单的展示了项目、作品、联系方式几个模块的导航，但是页面中的图片也同样具有导航功能。每张不同的图片都会跳转到不同的项目。更为重要的是，当你的鼠标悬停在图片上方时，每张图片都会提示点击后打开的内容。整个网站的设计十分简洁，这些意想不到的动画效果同样如此。

网站地址：http://stevevorass.com/

Caava Design在图片的选择和图形的趣味化上都有出众的表现，但更富具创意之处在于滚动的设计。整个网站的设计基于时间轴这一表现形式。点击每张图片都会展示另一维度的信息内容。其特别之处在于你甚至不需要通过时间轴来进行导航和了解网站。网站结构清晰，设计精良。

网站地址：http://www.caavadesign.com/

Joint自身定位为创新的商业设计。而他的网站说明了这一点。每个页面都提供了可点击的选择区域来进行导航。设计简洁，仅仅使用了灰白色系（不包括博客中的彩色照片），但是鼠标悬停动画效果和网站的可读性是令人惊叹的。当你在选择如何浏览网站时，这会令你想要不断地进行点击。

网站地址：http://www.jointlondon.com/

Ballantyne将精美的图片、有趣的图形和酷炫的滚动效果结果在一起，来吸引用户的注意。这个时尚零售网站的案例告诉我们在展示海量产品的同时如何有趣的展示公司信息。每次向上滚动三张图片时，下方会展示一张新的图片。滚动会持续在几屏内，让你忍不住去看接下来会出现什么。除此之外，这种富有个性的斜边造型令整个图片流的呈现更具有线性，也更有趣味。

网站地址：http://www.ballantyne.it/

总结

多年以来，我一直听到设计师在说：不会再有什么原创理念了。这种想法很糟糕。每一天，新的技术和设备都在改变着我们对于网页设计和设计流程的思考。离开舒适的位置，走出去来一场头脑风暴，然后把想法带回到工作中，要确保包含可用性所必不可少的全部元素。

另外要记住，一些“疯狂”的想法可能会失败。那没什么大不了。归纳总结、不断学习，然后开始下一个伟大的想法。

RWD目前已经成为业界兼容移动终端的事实上的网页设计标准，根据MeidaPost，有三个原因让RWD变得迅速流行：
1 RWD的优势使其成为主流
在不到两年的时间里，RWD几乎被所有想针对移动优化的网站所采用，现在这个设计思路已经整合在网站开发的流程中
2 RWD对SEO支持最为良好
因为同样的链接对应的是同样的内容，在SEO方面具有天然的优势，而且Google推荐采用这种设计标准
3 RWD也是移动受众需求的必须
Google最近的研究发现67%的手机用户表示更乐意从移动优化的站点购买产品，3/4 的用户表示他们更喜欢回访这类网站。随著移动变成越趋流行的网站内容消费方式，针对移动终端进行优化已经成为一种必须

这个故事的寓意就是说，从项目一开始就要将各式各样的移动设备考虑在内，而且要意识到未来的不可预测性并且具有前瞻性，因为老一套的东西总是要被淘汰的，新事物总会不断涌现。

那么是选择设计响应式网站还是打造专门的移动网站？

其实这个话题几乎已经盖棺定论了，随着3G的普及，越来越多的人使用手机上网。移动设备正超过桌面设备，成为访问互联网的最常见终端，响应式网站设计已经成为大势所趋。但我还是想对两者进行简单的比较，建设响应式网站是不是比移动网站成本要来得低？起初，建设移动网站和响应式网站花费的成本可能差不多，但是因为移动网站存在N多不同的版本，后续的数据更新和设备维护需要大量的费用投入，而响应式网站则不存在这样的问题。另外，像Galaxy Note这样的小平板或者是大屏幕的手机仍然处于灰色地带，它们到底是显示移动版本的页面还是显示桌面版本的页面 ，真的是让用户左右为难。

建设响应式网站需要考虑的预算因素

相比单独的移动网站，虽然响应式网站后续的维护成本会比较低，但这并不代表响应式设计就是完美无缺的。而且涉及到预算问题，每一分钱都很重要，所以作好有效的预算也是很有必要的，下面是建设响应式网站需要需要考虑的一些因素：

1.与时俱进，掌握最新动态

让每个人都掌握业内的最新动态，确保团队里的每一个人都了解响应式设计是什么。如果不了解当下的最新情况，花点时间去了解，看看当下的趋势是什么，然后一起讨论如何去开展工作。

2.足够的时间来应对突来起来的变化

这很可能是财政预算需要考虑的最重要因素。很多开发人员一定很熟悉典型的“瀑布模式”的开发过程，“瀑布模式”只按照标准的桌面浏览器进行设计，除此之外，几乎没有考虑任何其它的设计开发环境，随着问题的不断积累，不得不放慢脚步，来应付各种棘手的问题。这是它最大的缺点。跨平台同步进行的响应式设计的出现让那些呆板的线性过程在多屏幕时代显得一无是处。

当然，因为响应式设计是跨平台同步进行，相对“瀑布模式”的开发过程而言，密切合作对于一个成功的响应式设计项目来说是绝对必要的。而在整个开发过程中，要给团队足够的时间来分类整理那些不可避免的、棘手的设计问题。

3.更多的测试和QA时间

只按照标准的桌面浏览器进行网页设计的的时代已经一去不复返，随着工作量的加大，测试和QA时间也相应增加，所以在作预算的时候，时间问题也是需要考虑的因素。另外，整个网页将会支持哪些设备、将针对那些设备进行优化也是需要事先考虑好，因为“支持”和“优化”两者之间还是有区别的。如果要针对每种设备进行优化，这是不可行的。鉴于预算有限，包容性并且前瞻性的解决方案就显得尤为重要了。

4.购买测试设备

在设备上进行实际操作和测试是非常有必要的，这就意味着在测试设备方面又要投入一笔预算。

5.了解渠道策略

有许多项目规划者在进行响应式网站设计的时候喜欢将整个项目细分，先是开发桌面版，再接着是手机版，最后是平板电脑版，其实这已经脱离响应式设计的本质。真正的响应式设计从一开始就考虑到这些跨平台问题，从而进行更详细的前期框架构图，设计和测试。

Via Bradfrostweb

来源：.leiphone.