消息通知

RWD响应式网页设计的介绍

我们常常说:内容就像水,可适应于各种各样的媒介。

    作为设计师,刚接触多媒介的页面设计时,很容易对内容如何在媒介与媒介之间流动无从下手、阅读了大量的资料也很难抓住重点。所以今天我根据自己的实战经验,帮助大家理解和制作响应式网页。

响应式网页设计是什么?

    响应式网页设计,通常缩写为RWD(Responsive Web Design)。

    响应式网页设计是一种网页设计的技术,这种设计可使网站在不同的设备(从桌面电脑显示器到移动电话或其他移动设备)上浏览时对应不同分辨率皆有适合的呈现,减少用户进行缩放、平移和滚动等操作行为。

RWD实现的原理是什么?

    网页的页面由 1. APP bar、2. Navigation、3. Body 组成。

cr: Google material design

    当每个部分都有相应的响应规则时,就可以保证页面的流动性。例如在保持在屏幕里的占比恒定、不同范围内对应不同的恒定值。

网站界面设计

设计师如何设计RWD规则?

1、选定解析度

    在设置规则之前,我们首先需要确定承载我们产品的大多是哪些载体,是移动手机?还是网页?确定好主要载体之后,就可以选择一些该载体的常见解析度做图。

    该网站提供当今最常用的解析度的统计数据:

    pc端:1920*1080(21.7%)、1366*768(20.1%)、1536*864(9.7%)

    移动平板端:768*1024(43.6%)、1280*800(7.2%)、800*1280(5.7%)

    移动手机端:360*640(11.3%)、414*896(7.8%);360*780(6%)

2、设计节点和规则

    了解常用解析度之后,并不需要将所有常用尺寸都画一遍,只需要根据业务需要来设计节点和规则即可:

     节点

     有两个比较重要节点:pc尺寸减小到移动平板尺寸的节点、移动平板尺寸减小到移动手机尺寸的节点。

     规则

    根据网页的内容,设置规则。例如页面的边距:

    设置固定边距,中间的内容随屏幕尺寸变化而变化

     又或者设置内容在屏幕里的百分比,内容的布局大小随屏幕尺寸的变化而变化