编辑导语:响应式设计成为主流设计趋势,为什么所有的web端都需要响应式设计,其目的是什么?作者从其实际角度出发,分享响应式设计思路及方法,供产品和设计同学参考。
响应式设计概念自2010年提出以来,经过十多年的发展与普及,在我国已经有超30%的占有率,且正在以每年5%的速度,逐渐取代传统静态布局网页。经过断断续续近两个月的时间,我把自己在多年产品设计中积累的经验,整理分享如下。本文将从实际应用角度,介绍响应式设计思路及方法,供产品和设计师同学参考。
一、适用范围是不是所有的web端产品都需要响应式设计呢?且看分析。
1.1 响应式设计的意义
响应式设计之所以会成为主流趋势,是因为从各利益相关者角度,皆具有极大的优势。
从公司角度:一次开发成型,节省开发和运维成本,同时能提升品牌一致性。
从产品角度:在不同的用户设备上,保持一致性的使用体验,输出稳定的产品价值。
从用户角度:不限制设备,不限制使用时间和条件,使用更加便捷。
1.2 网页布局设计的分类
按照网页对分辨率的适配程度,把布局设计区分为三类。
A. 固定布局设计
实现方法:内容宽度固定,布局不根据设备分辨率改变。
设计方案:出一套设计方案,以像素做单位。
B. 自适应设计
实现方法:前端写几套代码对应不同类型设备(如pc端、平板、手机),通过检测视口分辨率,来判断当前访问的是哪种设备,从而显示对应的代码。
设计方案:先为每类设备分别出一套设计,然后在一类设备的分辨率范围内指定元素的兼容方式;同一类设备的分辨率差异较小,因此兼容方式相对简单。
C. 响应式设计