Muse2018 demo(响应式)
概念:断点值的是浏览器窗口宽度值
为了适应不同宽度而设置不同断点值
不同宽度适应往往有两种网页
响应式网页与自适应网页的区别:
响应式
响应式针对的是不同分辨率设备而进行的适配式设计,以利用@media规则为主要手段
【主要针对web端(电脑),但在移动端显示的时候,能显示主内容,不会显示其他侧栏之类的,把部分内容隐藏掉】
而自适应更多的是在说移动端,
自适应则忽略@media以比例布局为主,目的是适应不同的浏览器窗口大小
【在移动端开发的webapp,内容显示都是一样的,但在不同分辨率的屏幕下,它可以自动满屏显示,不会出现横向滚动条之类的, UI,图片会伸缩,或者有更多的空白区域】
其他固定式网页 宽度都不会变。
制作顺序(需要注意)
1、先制作好PSD模板,不要直接在Muse当中完成视觉设计。
2、处理好PSD文件中智能对象的关系以及图层顺序的关系。
3、网页内容与背景图片的关系一定要分开。
4、先做好一个断点的布局,然后先做最大的宽度适配。
5、做好第一个和最大的适配后,开始调整网页元素的对齐参考点。
我们建议把基础断点的宽度设置为1280px,然后设置一个最大的适配宽度,我这里设置的是1600px;在适配的过程中,除了在1600px下调整元素的布局,还可以通过摇杆,左右拖拉,观察过渡的过程是否有问题出现。
6、开始适配小(不同)宽度的布局
做好第一个和最大的适配后,开始调整网页元素的对齐参考点。
我们可以看到,目前这个标题是居中对齐为参考的,那么在页面缩小或者扩大的时候,他就会以网页的中心为参考点,进行缩放;也可以是向左固定,参考元素到网页左边的距离,但左右固定通常是logo和菜单用的。
7、观察内容是否超出当前断点的编辑区域。
观察内容是否超出当前断点的编辑区域
通常在不同的断点下,由于元素的缩放模式没有选择对,通常都会超出了断点编辑范围内,在超出后需要按照你需要进行调整。
最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。
8、最后检查不断断点缩放的过程中,图片的缩放规则是否恰当。
选择元素后,我们可以在Resize看到,图片的缩放模式,我们可以通过摇杆调整的过程中去观察,选择一种最合适的缩放方式;而类似LOGO之类的,就可以固定不变。
详情调整过程: http://musecn.cn/?p=1872
具体实现:
先制作好PSD模板,不要直接在Muse当中完成视觉设计
这PSD模板只需要做好桌面版的就可以了,移动端的不需要做,我们在Muse当中完成。处理好PSD文件中智能对象的关系以及图层顺序的关系
(需要注意,处理的过程越细致越好,尤其要注意图层顺序关系,一定要分好组)
(另外,图层中含有蒙版和图层效果的图层,需要把他转换成智能对象,并合并蒙版)
运行软件MUSE
网页内容与背景图片的关系一定要分开
1.进入到Muse中后,新建一个站点,首先我们需要导入PSD,Ctrl+D。注意勾选Cilp to layer(裁切图层),找到最后一个图层然后Shift 全部选中。。剪裁到图层内容。。选中点击OK后,把布局放在左上角对齐。
导入后发现比例不一 调整比例(原因是psd大小)
把基础断点的宽度设置为1280px,然后设置一个最大的适配宽度,我这里设置的是1600px;在适配的过程中,除了在1600px下调整元素的布局,还可以通过摇杆,左右拖拉,观察过渡的过程是否有问题出现。
后面就是调整断点和布局调整
通过调整不同断点(缩放)观察大小是否合适调整对齐方式 大小等
同样是先调整布局,然后缩放元素,设置元素的对齐参考点。
最后调整成