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

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

blob.png

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

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

blob.png

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

2. 响应式设计的slider

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

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

blob.png

blob.png

blob.png

blob.png

blob.png

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/

梨山1.jpg

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

山海1.jpg

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

地球科学1.jpg

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

化院1.jpg

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

青朴1.jpg

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