基础教程：初步认识Hype 4场景和布局（三）

小编在前面两个小节分别介绍了场景的概念和一些操作方法还有布局的概念和一些操作方法，本小节会重点讲解Hype场景与布局的关系以及为什么需要使用布局。

一、Hype场景与布局的关系

• 1、场景是画布上的内容，布局是画布上内容的排版。
• 2、一个场景可以有多个不同布局，但是一个布局只有一个场景。
• 3、场景和布局都可以设置画布的大小，场景和与其对应的布局都在同一张画布上。
• 4、场景超出画布的内容不能被显示；布局的改变与画布的宽度有关，与高度无关。

二、为什么需要布局

小伙伴可以设想下面一个例子：

有六张图片，宽度为250px，在一台屏幕宽度为320px手机显示，一行只有一张图片。

图1：一行一张图片

把图片放在在屏幕宽度为600px的智能手机上显示，如果保持手机显示的方式，一行只有一张图片，在600px屏宽上就显得图片很小，版面很不合理。这时，一行放两张图片，需要三行展示的布局才是合理的。

图2：一行两张图片

把图片放在竖屏iPad上，此时屏幕宽度变为768px，如果还保持一行两张图片，版面又变得不合理了，此时一行应该放三张图片，需要两行展示才是合理的。

图3：一行三张图片

从上面例子小伙伴可以看到，6张图片相当于场景的内容，在不同宽度的设备屏幕显示，布局就会不同：一行有只显示一张图片、有显示两张图片、也有显示三张图片。

像这种根据设备屏幕宽度自动采用不同布局以适应显示的设计，在网页设计中被称为响应式网页设计，Hype的动效网页设计就是通过使用“布局”工具实现响应式设计。

三、如何设置breakpoint

响应式设计跟设备的显示屏幕的宽度有关，也就是说布局要根据显示屏幕的宽度进行设计。但是现在的移动设备很多，屏幕宽度大多也不一样。如果针对每个移动设备的屏幕宽度都要设计一个布局，一方面工作量受不了，另一方面也没有这个必要。

通常的做法是使用归类方法进行区分：手机、智能手机、竖屏Pad、横屏Pad、笔记本、台式机。

根据下图所示，屏幕宽度 <= 320px，看作普通手机，制作一个布局；320px < 屏幕宽度 <= 600，看作智能手机，制作一个布局；600px < 屏幕宽度 <= 768px，都看作竖屏Pad，制作一个布局；768px < 屏幕宽度 <= 1024px，都看作横屏Pad，制作一个布局；1024px < 屏幕宽度 <= 1200 px,都看做台式电脑，制作一个布局。

图4：响应式breakpoint

这里的320px、600px、768px和1024px称为breakpoint（断点），可以看到刚好与Hype的添加新布局的预设是一样的。

最后，小伙伴可以通过下面动态图来体验响应式设计的场景随着屏幕宽度变化而产生的变化。

图5：响应式场景布局动态图

四、总结

很多小伙伴在学习Hype的时候不太会注重场景和布局，但场景和布局是整个设计的基础，是非常重要的。小编用了三个章节讲解场景和布局的内容，特别是响应式设计的场景布局，小伙伴要掌握通过使用breakpoint（断点）来设计场景内容在不同宽度的显示屏的布局。