
发布时间:2020-08-06 11: 01: 24
小编在前面两个小节分别介绍了场景的概念和一些操作方法还有布局的概念和一些操作方法,本小节会重点讲解Hype场景与布局的关系以及为什么需要使用布局。
小伙伴可以设想下面一个例子:
有六张图片,宽度为250px,在一台屏幕宽度为320px手机显示,一行只有一张图片。
把图片放在在屏幕宽度为600px的智能手机上显示,如果保持手机显示的方式,一行只有一张图片,在600px屏宽上就显得图片很小,版面很不合理。这时,一行放两张图片,需要三行展示的布局才是合理的。
把图片放在竖屏iPad上,此时屏幕宽度变为768px,如果还保持一行两张图片,版面又变得不合理了,此时一行应该放三张图片,需要两行展示才是合理的。
从上面例子小伙伴可以看到,6张图片相当于场景的内容,在不同宽度的设备屏幕显示,布局就会不同:一行有只显示一张图片、有显示两张图片、也有显示三张图片。
像这种根据设备屏幕宽度自动采用不同布局以适应显示的设计,在网页设计中被称为响应式网页设计,Hype的动效网页设计就是通过使用“布局”工具实现响应式设计。
响应式设计跟设备的显示屏幕的宽度有关,也就是说布局要根据显示屏幕的宽度进行设计。但是现在的移动设备很多,屏幕宽度大多也不一样。如果针对每个移动设备的屏幕宽度都要设计一个布局,一方面工作量受不了,另一方面也没有这个必要。
通常的做法是使用归类方法进行区分:手机、智能手机、竖屏Pad、横屏Pad、笔记本、台式机。
根据下图所示,屏幕宽度 <= 320px,看作普通手机,制作一个布局;320px < 屏幕宽度 <= 600,看作智能手机,制作一个布局;600px < 屏幕宽度 <= 768px,都看作竖屏Pad,制作一个布局;768px < 屏幕宽度 <= 1024px,都看作横屏Pad,制作一个布局;1024px < 屏幕宽度 <= 1200 px,都看做台式电脑,制作一个布局。
这里的320px、600px、768px和1024px称为breakpoint(断点),可以看到刚好与Hype的添加新布局的预设是一样的。
最后,小伙伴可以通过下面动态图来体验响应式设计的场景随着屏幕宽度变化而产生的变化。感兴趣的小伙伴们可以在中文站上进行Hype下载试用。
很多小伙伴在学习Hype的时候不太会注重场景和布局,但场景和布局是整个设计的基础,是非常重要的。小编用了三个章节讲解场景和布局的内容,特别是响应式设计的场景布局,小伙伴要掌握通过使用breakpoint(断点)来设计场景内容在不同宽度的显示屏的布局。
作者:东佛
展开阅读全文
︾
读者也喜欢这些内容:
利用Hype制作汽车驾驶的动态路线图
在一些电视节目里,为了保护隐私,经常会使用动画来展现当前地点与目的地的行走路径,比如图1所示的简单汽车驾驶路径。...
阅读全文 >
Hype 4多条时间线的轮播图(二) 设置第1张图片
在上一章节中,已经做好了轮播图设置的前期工作,把所有图片放在一个符号里,并且把002至004三张图片移到到符号外。接下来选择符号,在“度量”面板中,“内容概览”选项中选择“隐藏”,把符号外的图片隐藏起来,从而使图片的轮播只出现在显示窗口里。...
阅读全文 >
不会浪漫不懂表白?一款软件让你轻松浪漫表白
这年头,表白方式标新立异,画家会用手中神奇的画笔、音乐家会用独特嘹亮的嗓音、程序员会用花式炫酷的代码,不同的人有不同的浪漫。表白的成功率与用心的程度息息相关,关键在于表白的方式,而不在于成本的高低。...
阅读全文 >
收好!这款超强大、上手超简单的H5制作工具
那有什么功能齐全又易上手的H5离线制作软件吗?我给好朋友安利了一款Mac系统专用的工具—Hype,不仅支持静态的H5制作,还支持各种交互效果和物理引擎,可用于制作网页菜单、网站主页、网页游戏等,当然贺卡请柬这种分分钟的事。...
阅读全文 >