恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
响应式布局设计
0.0°
2017-03-09 原创文章 经验/观点 举报 2820 21 8 0

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。

一、什么是响应式?

响应式布局是Ethan Marcotte在2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。

响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验,而且随着目前大屏幕移动设备的普及,用“大势所趋”来形容也不为过。随着越来越多的设计师采用这个技术,我们不仅看到很多的创新,还看到了一些成形的模式。

Image title

响应式网页设计考虑到多平台、多种屏幕尺寸的情况,可以为不同终端的用户提供更加舒适的界面和更好的用户体验。当你不知道用户使用什么设备,不知道用户的屏幕尺寸时,又想达到较优布局,那么可以采用响应式设计。响应式网页设计就是一个网站能够兼容多个终端。


二、响应式的技术实现?

响应式网页设计由流体布局、媒介查询、弹性图片三种技术实现。

1、流体布局

原特指以百分比为度量单位的布局技术实现方式。在响应式设计的布局中,不再以像素(px)作为唯一单位,而是采用百分比或者混合百分比、像素为单位,设计出更具灵活性的布局方式。

2、媒介查询

媒体查询可以让你根据在特定环境下查询到的各种属性值——比如设备类型、分辨率、屏幕物理尺寸及色彩等——来决定应用什么样的样式。通过使用媒介查询,可以获取到设备及设备的特性,及时的响应布局方案,从而解决之前在单纯的布局设计中遗留的问题。

3、弹性图片

伴随布局的弹性,图片作为信息重要的形式之一也必须有更灵活的方式去适应布局的变化。扩大研究范围:除了图片,还应该包括图标、图表、视频等信息内容的响应方式。


三、图例展示

Image title

Image title


四、响应式的优缺点

优点:Image title

1、面对不同分辨率设备灵活性强

能够快捷解决多设备显示适应问题

2、开发成本低,门槛低

Native APP:Objective-C or Java – 学习成本高
Hybrid APP: 外壳+Web APP,需安装。
响应式Web APP:HTML5+JS+CSS – 门槛低,极易上手,迭代快

3、跨平台和终端且不需要分配子域

虽然可通过监测用户UA来判断用户终端后做跳转,但它还是分配了多个域,
而响应式无需监测用户UA没有域的切换,只需根据终端类型来适配不同的功能模块与表现样式,
它是跨平台和终端的,1页面适配多终端。

PC – http://qzone.com
Mobile – http://m.qzone.com
响应式:PC & Mobile – http://qzone.com 无需跳转

4、本地存储

Web App可以利用本地存储的特性将重要和重复的数据保存在本地,避免页面的重复刷新,
减少重要信息在传输过程中被泄露,增量传输修改内容。


缺点:

1、加载需要一定的时间 虽然,它不是一个大问题,在响应式设计中,需要下载一些看起来并不必要的HTML/CSS。除此之外,图片并没有根据设备调整到合适大小,而这正是导致加载时间加倍的原因。

2、优化搜索引擎 对于响应式Web设计,为搜索引擎确定关键字不是一件容易的事。因为相比一般桌面用户,移动用户多采用不同的关键字,修改标题及其他事项都比较困难。

3、时间花费 开发响应式网站是一项耗时的工作。如果你计划把一个现有网站转化成响应式网站,可能耗时更多。如果你想要一个响应式网站,最好从草图开始重新设计。


作者信息

本文系力谱宿云LeapCloud旗下UX组成员:王涛【原创】

更新:2017-03-09

收藏

21人已收藏

MaxLeap

以设计为支点,用以解决问题,实现价值,并寻找生活中的美。

  • 6

    作品

  • 363

    粉丝

  • 2

    关注

  • [思路分析]从0到1,如何设计一款产品推广页
  • 以用户体验为导向的设计表现
  • 色彩想象力-迷之渐变色
  • TBCLUB-web6

    猜你喜欢

      2017-03-09 原创文章 经验/观点 举报 2820 21 8 0

      响应式布局设计

      0.0°

      你确定要举报响应式布局设计

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2017年03月07日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      8
      21
      0

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录