我们先了解响应式设计有什么好处?

 

在目前移动为主的互联网环境当中,老式的PC网页没有办法在移动设备中保持优良的体验,需要单独设计移动网页,但这对于版式的统一和日后维护都会衍生许多问题。随着这样的问题的诞生,“响应式网页设计”的解决方案受到了追捧。

响应式设计中的界面设计

 

@media screen and (max-device-width:480px){ selector{ } }

@media screen and (max-width: 300px) {
    body {
background-color:lightblue;
}
}

【media媒体查询代码例子】

随着CSS3规范的推出,@media属性成为“响应式网页设计”的技术支撑,我们可以按照设备的不同的像素宽度区间,来进行CSS布局方案的切换,这样一来,基于栅栏化的布局设计,同样也促成了当前卡片式设计的风潮;用户无论在哪一种宽度的设备中,都有精心设计阅读范围、字号大小、间距大小、图片大小等,并发生流动式的改变,而非断点式的改变,都能保持了优良阅读体验。

 


8个响应式设计的准则

 

段落响应式

内容是固定的,随着屏幕宽度的缩小,内容就会向下挤兑,行数增多,行宽缩小;如果你是依照固定像素来规定元素的位置和大小,那么他将不能流动的改变并会出现显示问题。

 

百分比的相对单位

考虑到不同设备的像素宽度不同,采用百分比的相对单位作为屏幕的比例计算,能够更好的减少工作量以及更好的适应度。

断点的变化

在media中可以设置在什么宽度的断点下进行变化,比如在PC上是两栏,而在手机上则是一栏,中间的变化会在经过一个断点的时候发生变化。但如果是一段文字需要注意语意等的问题,确保在发生变化时不会改变语意。

最大值和最小值

在移动端的显示中,某些元素100%的宽度显示是合理的,但回到PC端后却强差人意,这是我们需要给元素添加Max-width的属性,规定最大不可超过或少于多少像素。

 

嵌套对象与静态单位

在复杂的元素当中,我们可以给元素归类,并放在容器中(相当于视觉软件中的分组),并在元素中可以使用到绝对定位,一些类似Logo和Button也可以设置像素的静态单位,因为这些并不需要随着设备的改变而相对改变。

 

移动优先或是桌面优先

取决于您的项目是由移动过渡到桌面,还是桌面过渡到移动,在布局上,为了保持一致的体验性,这都是首要考虑的问题。

Web字体或系统字体

web字体的好处是多选择,美观度高,但需要加载成本,而系统字体则是美观度不够但速度最快,在装饰的角度上来说,部分Banner艺术字体可以转化为图片,而全局正文使用系统字体,这是折中有效的解决方案。

 

位图,矢量图的图标

在网页元素中的图标,大多为png的切图,这并不利于响应式的缩放;现在偏向流行font-icon的解决方案,把矢量图标打包为字体,在字体中直接调用,既轻便,又清晰。

 

使用AdobeMuse零代码制作一个响应式网站

AdobeMuse 2017版,提供了制作响应式网页设计的功能,方便网页设计师在无代码的前提下,进行网页的响应式布局设计,通过以下简单的制作案例我们可以快速掌握制作的流程,另外,我会提及8个制作流程中需要注意的顺序,这个顺序需要重视。

①先制作好PSD模板,不要直接在Muse当中完成视觉设计

这PSD模板只需要做好桌面版的就可以了,移动端的不需要做,我们在Muse当中完成。

②处理好PSD文件中智能对象的关系以及图层顺序的关系

(需要注意,处理的过程越细致越好,尤其要注意图层顺序关系,一定要分好组)

(另外,图层中含有蒙版和图层效果的图层,需要把他转换成智能对象,并合并蒙版)

③网页内容与背景图片的关系一定要分开

1.进入到Muse中后,新建一个站点,首先我们需要导入PSD,Ctrl(Com)+D。注意勾选Cilp to layer(裁切图层),点击OK后,把布局放在左上角对齐。

2. 导入PSD后,发觉还是容易存在图层先后和背景图片张开的问题,这些问题取决于你处理PSD文件图层顺序和智能对象的细致程度,我们可以通过图层上移下移来进行调整。

3.想这种出框的就是没有去掉蒙版,这时候我们需要画一个矩形,然后把他作为背景图像,裁切进去;另外,banner图也需要画一个矩形,然后设置100%宽度。

③网页内容和北京图片的关系一定要分开

由图知,红框内的是内容,外的是背景区;我们去理解背景是适应浏览器的,浏览器的宽度是会随设备而改变的,但内容是居中不变的;所以在PS设计的时候,内容必须独立开来。

④先做好一个断点布局,然后先做最大的宽度适配。

我们建议把基础断点的宽度设置为1280px,然后设置一个最大的适配宽度,我这里设置的是1600px;在适配的过程中,除了在1600px下调整元素的布局,还可以通过摇杆,左右拖拉,观察过渡的过程是否有问题出现。

⑤做好第一个和最大的适配后,开始调整网页元素的对齐参考点。

我们可以看到,目前这个标题是居中对齐为参考的,那么在页面缩小或者扩大的时候,他就会以网页的中心为参考点,进行缩放;也可以是向左固定,参考元素到网页左边的距离,但左右固定通常是logo和菜单用的。

⑥开始适配768px平板宽度和375px手机宽度的布局

同样是先调整布局,然后缩放元素,设置元素的对齐参考点。

⑦观察内容是否超出当前断点的编辑区域

通常在不同的断点下,由于元素的缩放模式没有选择对,通常都会超出了断点编辑范围内,在超出后需要按照你需要进行调整。

⑧最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。

选择元素后,我们可以在Resize看到,图片的缩放模式,我们可以通过摇杆调整的过程中去观察,选择一种最合适的缩放方式;而类似LOGO之类的,就可以固定不变。

 

最后,提供案例的PSD源文件和Muse源文件给大家参考,下载地址:

链接: http://pan.baidu.com/s/1c2ci5HY 密码: s5sq

案例演示网站网址:http://www.musecn.cn/musecn/responsive/

(不包含交互,仅演示响应式变化)

制作顺序(需要注意)

  1. 先制作好PSD模板,不要直接在Muse当中完成视觉设计。
  2. 处理好PSD文件中智能对象的关系以及图层顺序的关系。
  3. 网页内容与背景图片的关系一定要分开。(后续会细讲)
  4. 先做好一个断点的布局,然后先做最大的宽度适配。
  5. 做好第一个和最大的适配后,开始调整网页元素的对齐参考点。
  6. 开始适配768px平板宽度和375px手机宽度的布局。
  7. 观察内容是否超出当前断点的编辑区域。
  8. 最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。