1. 响应式网站设计的源起

  随着电脑屏幕分辨率的多元化，智能终端设备(手机、平板)的普及，在这个强调用户体验至上的时代，普遍使用960px固定宽度的旧版网站逐渐满足不了现在不同设备与不同分辨率需求。根据百度数据流量研究院的数据，2016年1月1日至2016年8月31日，PC端屏幕分辨率占比如下图所示，可以发现移动端的流量不比PC端来的少。

图片来源：http://tongji.baidu.com/data/screen

  因此，作为一个网站能够兼容多个终端的网站设计模式，响应式设计(Responsive Design)正逐渐成为倍受推崇的移动网页优化方式。响应式设计，简而言之就是网页根据屏幕宽度，自动调整界面布局、展示内容、内容大小，力求在不同的设备下，内容都能以最佳的方式展现给用户。响应式设计网站中，内容就像水，设备就像容器，水自动适应各种不同尺寸的容器。

图片来源：http://www.netblade.co.in/blog/responsive-web-design-from-future-standpoint/

2. 响应式设计的slider

  网站首页是浏览最多、用户停留时间最长、价值最高的页面，由于在屏幕上占据了很大空间，slider的品质对于网站用户体验至关重要，响应式设计中通常采用通栏大图作为slider，用于企业形象展示、专题活动宣传、新闻动态推送等。设计规范指的是对色彩、控件样式、文字排版等制定的一系列规定，用于指导之后的设计，控制设计的质量，提高设计的效率，从而传达企业或机构统一品牌形象。

  如梨山宾馆(http://www.lishanguesthouse.com.tw/ )，6张slider均以“见证历史 融入自然 宽心慢活”为基调，文字统一横排位于右上方，文字左右交替出现，飘逸变速，按需加链接，图片淡入淡出，支持触控切换，潜移默化进行品牌文化渗透。

A/尺寸

  响应式设计中的slider宽度通常有2560px、1920px、1200px、960px、720px五种，高度可根据实际需要自行定制，通常PC端高度不小于400px，移动端高度不小于200px，在平板端，由于平板最常见的宽高比为4:3，因此平板横屏时的slider高度要适当增加，从而保障在不同设备上的清晰度与美观。

B/字体

  任何设备中都要保证文字清晰可见，字号PC端不小于18px，移动端不小于28px；字体建议选用微软雅黑，专题活动可根据实际需要选择合适字体，但要注意版权问题。同一栏目的slider字体，字号、对齐方式、间距等统一。

  如下同一栏目中的三张slider，有三处可优化：

  a. 统一标题文字字重 (目前第二张未加粗，第三张加粗)；

  b. 统一正文字体(目前第一张slider使用宋体，后两张使用微软雅黑)；

  c. 使用风格统一图标：

  d. 使用更通透、明亮的照片。

  根据上述规范，对以上三个slider文字部分修改如下：

C/图片

  背景图+文字是最常见的slider模式，图片通常使用高品质的风光、人物或纪实摄影作品，深色背景下文字用白色，浅色背景下文字使用深灰色或者网站主色，也可尝试白色文字添加投影或半透明色块。图片一定要清晰，色彩与网站整体风格匹配，为了加快网站响应速度，图片最好在tinypng或智图等网站压缩后再上传。

D/动效

  生动的交互动画会赋予网站新的活力，有助于用户更好地理解内容并在使用过程中感到愉悦。如山海大饭店(http://www.skk.com.tw/)和厚朴工作室(http://ce.sysu.edu.cn/hope/Culture/index.html), 使用文字左右交替出现、图片淡入淡出的动效。

3. 成功案例分享

  台湾梨山宾馆官网: http://www.lishanguesthouse.com.tw/

  台湾山海大饭店: http://www.skk.com.tw/

  中山大学地球科学与地质工程学院: http://gs.sysu.edu.cn/

  中山大学化学学院: http://ce.sysu.edu.cn/

  广州青朴科技有限公司: http://www.greenhoper.com/

  青朴科技专注响应式设计和开发，更多案例可到http://www.greenhoper.com/WebCase/Index.aspx浏览。