响应式网站页面设计技巧 响应式网站设计与实现

对于每一个响应式网站，图像是一个很关键的元素，不像基于桌面的门户网站，一张很大的图片可以一个很好的指引。下面介绍响应式网站页面设计技巧，希望可以帮助到大家。

1. 确保性能是你主要的目标

不管现在移动设备的网络连接速度有多快，在建立网站时都推荐为设别配备慢的网络连接。例如，由于4G网络在现代国家是受限制的，因此你需要特别注意设计移动友好的网站，能在2G和3G网络上完美的运行。确保网站的加载时间非常迅速。

2. 采用‘图像’方式

对于每一个响应式网站，图像是一个很关键的元素。不像基于桌面的门户网站，一张很大的图片可以一个很好的指引。在移动优化的网站上使用一张这样的图片，对于网站所有者并没有好处。因此，需要裁剪图片或者整个删除图片，原因非常简单，小屏幕的移动设备没有能力按照预期的方式显示图片。在为不同的移动设备设计网站时，采取一个合适方便的图片管理计划并遵守它。有些情况下，你需要为桌面和其它移动访问者创建一个图片的多版本。

3. 避免包含导航菜单

由于响应式网站的目标是类似平板和智能手机的小屏幕，所以建议隐藏主菜单导航。可以选择用图标结合可以提示用户菜单的方式代替。例如，你可以设计一个简单的下拉式菜单，它可以滑下或者扩展到覆盖整个屏幕。这也意味着，如果导航包含的元素超过三个，你可以只设计一个可以打开特定菜单的图标。

4. 试着尝试多个软件程序

对大多数网站设计师，创建一个复杂的响应式web设计可能会从选定的软件程序中得到帮助。例如，使用一个类似‘Moboom’的模板创建一个相当简单的布局是有效的，但是对于复杂的布局，你可以会选择像GoMobi一样的特定软件，对于移动用户，它可以帮助你设计一个极好的网站布局。

5. 简化网站导航

尽管传统的电子商务网站有创建复杂导航方案的方法，你可以更进一步，使用一个可以被可预测的标签提供的健壮的导航菜单。如果在浏览一个最受欢迎的电子商务网站，你会发现它包括了一个简单而清晰的导航系统，从而让访问者能体验公司提供的产品和服务。

6. 充分利用Google网页设计标准

如果你是一个响应式网站开发的初学者或者已经开发了一些响应式网站，但是你不满意，那就有必要去了解一下Google的设计标准。除了获取针对智能手机关于响应式设计的优秀建议和技巧外，你也会了解你需要做的事情—如何使网页在不同的手持设备上快速加载。

7. 让你网站的内容可读

为了阅读特定的文本片段，读者需要对其放大或缩小，这不是一个好的建议。作为一个经验，确保文本大小足够大，因而即使在小的屏幕设备上也是可读的，建议将文本设置成16px、12pt或者1em。

8. 了解网格和断点

当设计响应式网站时，确定你对断点很熟悉。此外，还需要了解网格系统，这允许你在网页设计中实现行和列结构。

9. 对于高分辨屏幕，用两倍大小的图片

按照这个建议，你需要两倍大小的图片，以让图片在高分辨率值的屏幕上看起来很锐利。同时，需要保证不会对网站的加载时间产生负面影响。

10. 考虑屏幕方向

根据数据统计，41%的人使用直式(纵向)定向，59%的人喜欢横向定向。因此，你需要采用某中方式来设计你的响应式网站，让它在横向和纵向看起来都是极好的，特别是横向。

1、考虑高宽比

桌面端的图片浏览体验和移动端是完全不同的，这一点毋庸置疑。对于绝大多数的网站而言，图片展示的位置都很相近，大同小异。而设计师的任务，是要确保网站随着屏幕和设备变化的时候，图片的展示不会在页面布局的伸缩变化过程中变得奇怪和失真。

这个时候，就要始终牢记图片的高宽比，并且始终控制高宽比不会改变。

回到桌面端网页中，大幅的背景图或者置于页面顶端的图片看起来非常漂亮，可是当它切换到移动端设备中的时候，首先屏幕比例和方向就不同了，那么它是否还那么好看呢?图片被缩小之后，信息的呈现是否会丢失?它是否会被拉伸?

这个时候，图片的高宽比的控制就显得特别重要了。控制原始图片不被拉伸，同时让图片所展示出来的部分的高宽比能够尽可能合理地匹配对应的屏幕，这样也就不必担心响应式断点过多，导致你需要上传过多的图片。

2、尺寸和比例的一致性

响应式设计就不能不说断点。为了照顾不同的屏幕，我们需要将图片裁剪成不同比例不同尺寸的大小，而这也直接影响着整个设计与开发的设计流程。

许多人仅仅只是将图片上传到CMS系统中，就希望它能以完美的样式呈现出来。这不现实。

每张图片都应当被裁剪为合理的尺寸，并且放置在理想的位置上，确保它们会以用户期望的样子呈现出来。后端可能会在这件事情上花费相当的时间和精力，但是这些努力是值得的。

3、使用轮播图或者图库

轮播图控件和图库控件是网站中最常见的图片载体，并且也可以更加自如的管理图片。尤其是当你使用了那些比较著名或者适配范围比较广的第三方控件的时候，控制图片元素的粗活重活基本上都会被这些控件接手过去。

不过，我们之前提到的图片长宽比和尺寸大小的控制同样也是要注意的，否则一样会让网页的展示效果变尴尬。

除此之外，你还需要什么场合使用什么样的控件。如果你拥有若干高品质的图片或者需要推荐特定的文章和专题，那么你需要使用幻灯片轮播图控件。如果你拥有大量有待展示的图片，可以缩小展示也不存在可读性问题的话，不妨使用图库类的控件来展示。许多作品集类的网站常常会使用图库控件。

4、尽量避免使用图片说明(Captions)

虽然图片说明能够让你的图片的信息更加丰富，但是它会非常直接地影响到网页的运作。尽量避免使用它们，如果实在是需要，尽量用其他的方式来呈现。

图片的Caption属性加入之后，确实能在桌面端拥有良好的渲染效果，但是小屏幕上常常问题不断。为了不让这些细小的可用性的问题影响用户体验，尽量避免使用就好了。因为这种小问题而让用户无法忍受并且离去，并不划算。

5、图片和视频混用要小心

如果网站中同时存在图片和视频类的多媒体，用户和设计者应该都是能够接受的，甚至许多用户已经习惯了这样的设计。

但是要注意的是，即便是在同一个页面中，也尽量不要让图片和视频同时存在于同一个控件或者区块中。也许这样看起来很炫酷，也许一部分图片和视频能够搭配起来，但是更多的视频和图片很难在尺寸上保持一致，导致总会有一部分图片或者视频会留下空白和间隙。

最好的方案还是将两者分开展示，避免了媒体属性和尺寸上的差异与冲突。这几乎适用于任何设计元素，而图片和视频尤甚。

6、削减不必要的元素

虽然轮播图和图库控件非常好用，但是许多设计师常常会往其中添加许多垃圾的内容，最常见的就是塞入一堆导航箭头、按钮、文本甚至行为召唤按钮。这样的例子不胜枚举。

一般情况下，用户其实是熟知如何同轮播图这类控件进行交互的。除非你的设计和我们的认知有着巨大的差异，以至于必须使用其他的导航方式来引导用户。

尽量只保留用户需要的元素，把事情简单化，不要给予太多的选择。其实简单化之后的设计可以提升你的转化率。

7、只使用高素质的图片

虽然这个道理不言自明，但是它仍然必须反复提醒。如果你没有高素质的图片，那么还不如干脆不要用图片得了。现在，高素质、高分辨率的图片比以往任何一个时代都显得必需和重要。用户不会花费时间去看一个图片素质低下的网站。大家的屏幕都已经是视网膜屏幕了，低素质的图片在这样的屏幕上显得更加无法直视。既然大家都在追求顶尖的视觉效果，那么高素质图片无疑是必需品。

1、优先专注“极端”尺寸

当你面对着手机屏幕和桌面端显示器这两种极端的屏幕尺寸之时，疑问会自然而然出现。有的设计师打一开始就从动态的视角开始他们的设计，但是绝大多数的设计师仍然是从静态的页面开始着手设计的：选择一个固定的高度和宽度，绘制相应的草图或者视觉稿。

这样一来，就引出了几个问题：你的开发团队优先考虑什么尺寸?设计团队首先交付的高保真视觉稿是哪个尺寸的?从技术限制的角度出发，你应该优先考虑什么设备。推荐从用户最基本的“极端”尺寸开始考虑，推荐当前(2015年)常用设备中最小和最大的情况：

320568px(前几年的iPhone5，由于它是视网膜屏幕，平时我们是按照72dpi来设计，但是iPhone5的显示实际是144px，所以我们给出了这样的一个设计尺寸。作为UI设计师的你应该很清楚@2x和@3x的问题)1600×1000px(桌面显示器的常见尺寸)。当然，你的用户的实际情况可能略有不同，稍加调查，确定“极端情况”。“刚刚开始响应式网页项目的时候，从用户最常见的最大和最小尺寸设计着手。”

当你面对最小的屏幕的时候，你需要在小屏幕上呈现出最重要的内容，如何选取是一件颇为费神的事情。但是面对大屏幕的时候，你所思考的事情又是截然相反的：怎么展示内容才算是过多分栏是否因太宽降低了易读性?如何选取元素才能避免这样的问题?最后，面对两个不同尺寸的界面，你还要考虑它们所涉及的输入方式，最小的屏幕上通常是触摸屏和虚拟键盘，最大的屏幕上，绝大多数时候是传统的键盘鼠标。这里最重要的事情可能是你需要一次挑选两个界面尺寸来做，而不是传统的针对一个屏幕设计，然后完成剩下的部分。设计师和开发者在这个问题上出现分歧，对后续的影响是非常大的。

2、讨论不同断点之间内容布局

在日常的网页设计中，大家对于静态的线框图投注了如此之多的关注，但是在做响应式设计的时候，应该始终谨记页面内的布局是流动的。这也就意味着，你网页的用户绝大多属时候所体验到的页面其实是它的“中间态”。所以，你必须考虑随着屏幕尺寸大小的转变，布局设计的每一个调整和改变。比如，当屏幕尺寸变小的时候，文本内容需要收缩，并且和混排的图片会与文章缩到一栏中去。这些适配能与不能、该与不该的问题上，尽量不要同你的开发团队去“假设”或者“推测”。积极主动地去确定这些信息，在你负责开发的同事还没有做太多之前，和他们达成共识。对于复杂的布局改变，事先绘制先框图或者草图来单独说明，是非常明智的选择。对于一些不那么重要的特性，通过简短的讨论或者电子邮件通知就足够了。

3、对于图片素材的处理策略早做准备

响应式网页中的图片，通常是由一组多个不同尺寸的图片组成的。比如我的个人网站首页顶部的大图，就是由一组6个图片组成的，分辨率和尺寸各不相同，确保不同的设备都能匹配上对应的图片。图片格式和尺寸通常会让团队内的设计师和开发者之间产生隔阂。你可以用PNG，也可以用JPG，图标字体和SVG也会在网页上很好的运用。也就是说，并没有一个正确的答案：用什么更多是取决于可用的内容和资源本身。但是重要的地方在于，大家要在使用格式上达成共识，并且坚持使用下去。另外，你可能也想钻研出一套通用的图片尺寸体系，运用在不同的项目中。

不过对于现代的响应式网站设计，这仅仅只是一个起点。现在要做你至少需要两套图片素材，一种是给普通PPI的屏幕所设计，一种是给高PPI的视网膜屏所准备的。更完备的响应式网页，对于图集和素材的要求更高，细分更多，针对性更强。尽量避免将响应式图片格式的筛选决策留到项目后期。最起码，你得针对不同像素密度的屏幕作出基本的区分。仔细读一下这篇关于srcset的文章，或者使用Picturefill这样的工具来确保跨浏览器支持。如果你觉得整个方案不堪重负，那么不妨从小的部分开始做起。逐步调整图片元素的srcset属性就是一个不错的开始，在这个过程中，你会逐步看到网页的响应越来越靠谱。

4、从基础元素开始思考，使用模块化设计

响应式网页设计流程深深地受到了Brad Frost的Atomic Web Design和Jonathan Snook 的SMACSS的影响。两个框架都依靠小而可复用的基础组件来实现强大的网络架构。

所以，在与开发者交接的过程中，我会优先专注小而可复用的组件，因为它们能给不同平台不同设备带来相同的用户体验和视觉效果。这种一致性会更容易为开发团队所消化吸收。而且，小组件在不同页面之间的复用性也非常强，所以，如果你设计出了一套高效的方案，今后还会有用武之地。想象一下，你正在设计一个带有大标题、高清大图和表单的注册页面。由于网页是响应式的，所以所有这些元素都会随着设备和屏幕的转换而变化尺寸。那么在项目研发早期，应该同开发团队一起钻研，敲定页面所涉及的各个细节。它看起来应该是什么样子?用什么样的验证机制?如果要输入表单，如何配合触摸屏和传统的键鼠。

5、让开发者给视觉和体验设计做反馈

有些设计师在产品设计会议、可用性设计环节和其他的沟通环节不让开发者参与或提供反馈。这种放任和封闭是错的。要知道，经验丰富的开发者在产品、体验和设计领域同样有着极为丰富的知识。让他们参与到这些环节中，能让产品更加成熟。前端和设计师在技能上的重叠就更多了。

网页设计的老方法已倒在路旁让路给HTML5/CSS3设计了。不幸的是，当你已经熟练了根深蒂固的旧的设计技术，它很难摆脱过时的工作方式。现在网站建设中围绕响应设计需要更多的关注细节。

任何人都熟悉Web可用性设计的概念，下面分享一些完美的设计技巧。一些设计师甚至认为，响应网页设计是一个过时的术语–现在就称为“网页设计”。目前任何网站，应以响应的方式制作，以支持更多设备上尽可能多的观众。响应的技术已变得更为容易，新的进步应该使这个过程变得更快和更愉快。

1、清晰的字体

页面上的文字也许是网站最大的指向标。字体大小，对比度，行高和空白段落之间将在文本的易读性中发挥作用。字体应清晰，而较小设备上的字体应调整到适合小屏幕的大小。但要记住，太小的字体永远不会为布局添加价值。

这个登陆页面使用了大量的图像和宽的水平页面。当你调整网页的一些字体将调整规模较小但其他文本块仅仅是重新定位。这是一个伟大的技术，如果你想在不同的元素保持一个一致的大小，尝试将浮动元素分解成块级内容。甚至尝试调整文本块之间的白色空间值。

2、常见的互动

大多数人已经熟悉了传统的现代智能手机的互动。触摸，刷卡和点击。虽然响应性的网站不是本地移动应用程序，他们仍然可以复制类似的行为。这是一个好主意，工艺响应的网站，坚持相同页面的交互功能，无论是滑动菜单，可选择的文本，或响应的图像。

浏览器支持与否可能是任何响应布局的最大威胁。当一个网站原型出来后一定要检查尽可能多的浏览器。目的是创建一个无缝的界面上尽可能多的适应各种浏览器。

3、无关紧要的东西

响应的可用性是关于速度，效率和清晰度。这就是为什么真正可用的网站响应应该彻底删除不需要的内容。想想所有额外的领域，移动用户可能不关心。这可能包括侧边栏，额外的页脚栏，社会共享的链接，或超大的横幅在页眉。授予这些内容可能是必要的，使响应的布局尽可能简单。