luda 图形排版
H5
手机版秀美
正文字数：3730个字符
阅读时间：12分钟
本章的教程介绍了上一章的“使用版面，管理版面”的下一篇，内容元素的嵌套规则，版面的四种宽度属性之间的差异，特殊版面特别在哪里，可以创建什么样的版面，本章具体介绍了这些内容。
1.1
更多的风格效果
组件调整栏还提供了其他样式调整选项，包括不透明度、旋转、翻转、反射、缩放等。
步骤1:创建两列布局，分别在左列和右列中添加图片。选择第二列，并将列定位调整为向左-30px。单击左侧图片，然后单击“选项”将不透明度调整到90%，退出布局模式并观察更改
步骤:将不透明度重置为100%，调整旋转，退出选择模式，观察更改后重置。
以同样的方式观察“翻转”、“反射”、“定位组件”、“缩放”和“偏移”的效果
仔细发现了吗？这些效果都会使他堂堂正正。但是，他好像有点太热闹地抢走了主人，本来被遮住的部分也露了露水，他的层次好像提高了吗？他们的级联关系本来是什么，又因为什么关系破裂了？下一节将详细说明。
1.2
重叠定律
我们阅读的word、网络上的文章、大篇幅以文字为主的页面都用流式排版表示。按照阅读顺序，从上到下，从左到右，就像手机屏幕告诉你新消息一样，越来越多的信息总是引人注目的。后来上传的信息甚至会一层一层地掩盖旧信息。我们正在读的文章网络也是如此。底部元素总是隐藏顶部元素，右侧元素隐藏左侧元素。
总之，后浪在前浪。这就是他们之间的基本重叠规律。
步骤1:创建2列布局，在第一列中添加适量的字符，在第二列中添加图片，在2列布局块下添加图片。
将下图中的“组前间距”调整为负数，退出选择模式，检查是否存在重叠的罩。将第二列(即列放置)向左调整为负数，并退出选择模式以查看整个重叠罩的外观
以上的步骤清楚地表明，结构距离变化引起的重叠以后将遵循这一规律。
但是有时候需要打破这个规律，比如聊天界面上的新闻。例如，在上述阶段，如果事实上不希望文字被遮住，那么为了把文字放在最上面，就要给他一些特殊的属性。(约翰f肯尼迪)。
2.2中提到的“不透明度、旋转、翻转、反射、缩放、偏移”效果可以提高水平。上面列的定位部分提到，偏移是位置变换效果，而不是位置变换效果，包括旋转、缩放。当然，不透明度、反射等影响本身显示效果的属性也可以提高他们的层次。
如果顶部内容太多，顶部的他们也会遵循稍后上传的原则。
步骤2:单击文字，将“偏移”设置为1，退出选择模式，观察重叠的选取框。单击第二列中的图片，将“不透明度”设置为99%，退出选择模式，查看重叠罩的外观
如果想在位的阶段提高水平，偏移为1，不透明度为99%，较小的值带来了层次变化，但这种效果很难察觉。
综上所述，结构变化造成的重叠基本上在后来设置为上位，增加效果转换可以像金蝉脱壳一样提升到顶层。但是，当他们在同一高层时，如何调整级联顺序？以下部分对此进行了说明。
1.3
布局的不同宽度和特性
通过前面的学习，我们已经调整了布局的宽度，将制作一些一般的多栏结构。还尝试根据整行的宽度调整百分比宽度的布局，而不影响结构和列宽。
但是，创建一些束带样式并不容易，例如边框包围的小标题。如何匹配标题文字的宽度？大卫亚设，Northern Exposure)那么，版面的宽度取决于内容的扩展宽度。
步骤1:创建布局，向内添加少量文字，设置边框样式“样式：实线”、“尺寸：1”。
单击宽度单位后面的小三角形，然后选择“适应宽度”以观察效果
ex=4" width="549" height="368"/>若继续往该布局内增删文字，宽度依旧会随之增减，形成一种贴身包裹的结构。此时如果想要他款式更加丰富，例如左侧加入小图装饰，可以向左侧拖入一张图片并吸附，再调整图片列的宽度。
步骤②：调整第一列宽度为10%，退出布局模式，点击编辑页面右下角，将页面宽度更改至200%以模拟网页或Ipad等宽屏幕设备，观察效果；
而后将页面宽度重置为100%，设置第一列宽度为“宽度固定像素”40px，退出布局模式后重复刚才的加宽页面操作，观察效果
当图片列的宽度为相对单位——“百分比”时，图片列会随着各种设备屏幕的宽度而变化，也许在微信公众号网页版查看时，就会出现小装饰喧宾夺主、版式出其不意的状况。因此，装饰小组件可以放置在固定的列宽内。
我们知道，多列的宽度总和超过100%后，或者在调整了一定距离列定位后，布局会发生断行。
步骤③：创建一个三列布局并放入内容，将第二列的左右“列定位”更改为正值，观察效果
列定位会造成相互间的距离变化，当距离增加，宽度便超过了组件边界，产生断行。此时我们可以设想一下，如果有一列像弹簧一样能够自动伸缩，他们似乎就可以不再断裂了。
步骤④：任选一列设置为固定宽度200px；任选另一列设置为“宽度自伸缩”；加宽或缩窄页面，观察效果
你会发现，“宽度自伸缩”确实解决了这个断行的问题，他就像弹簧，撑起了整个剩余空间；为什么说是剩余空间呢，因为第一列固定宽度硬要霸占200px，第三列百分比宽度硬要霸占33%，而剩下了多少，或许我们并不知晓，但是作为弹簧的他很清楚自己的份额。
步骤⑤：创建一个二列布局，将第一列宽度更改为“宽度自伸缩”，伸缩比数值为1；第二列也更改为自伸缩，伸缩比为1，观察效果；
将第一列伸缩比更改为2，在其下方添加一个每列等宽的三列布局，观察效果
如果说同一行出现了多个自伸缩列，那么这一组“伸缩比”数值就彰显力量了；既然是弹簧，那么力量大者多吃多占，这很正常。读取该行所有的自伸缩列的数值，以形成宽度的比例。
上述步骤中，当第一列与第二列均为1时，他们的宽度比例为1:1，表现为平分秋色；当第一列为2，第二列为1时，他们的宽度比例为2:1，与下方的三列等宽布局对比，不难看出各自占用的空间分别为2/3与1/3。
不得不说，自伸缩很好地解决了剩余空间分配的问题；除此之外，设置为自伸缩宽度后，工具条也增加了两个选项。在“垂直对齐”按钮下，多出“拉伸对齐”；在“列定位”按钮下，多出“重叠顺序”。
拉伸对齐
重叠顺序
步骤⑥：向第一列内添加图片与文字，设置对齐方式为“整行拉伸”，观察效果
“拉伸对齐”使得列的高度伸展至黑色线框边界。在1.2节末，我们提出了一个问题，若组件都被设置了效果导致置顶，如何再次更改层级？
我们知道，结构默认重叠为后来居上，当每列内元素层级均因特殊效果提高时，我们可以摒弃结构默认的后来居上原则，自主设置结构的层次；这就是“列定位”按钮下“重叠顺序”的作用。
步骤⑦：创建一个三列布局，宽度均设置为自伸缩，每列均插入图片或文字，将第二列“列定位”左右均设置为负数，观察效果；分别将第一二三列的“列定位”“重叠顺序”设置为2、3、1，观察效果
“重叠顺序”值越大，该列层级越高，越居于上方。这不失为任意调整重叠顺序的好方式。
1.4
更多布局类型
学习完上文，其实我们已经可以通过布局构建各种结构与样式、塑造流式版式了。不过还有一些布局，他们可能不善于创造结构，但是通过调整样式或特有属性，可以当作零件版块去使用。
1.4.1
固定布局
在此之前，我们一直在探讨各种宽度，的确，流式排版的一个特点就是高度不固定，页面内容因宽度的变化可能高度就会变化，虽然一般说来，流式页面中元素高度都是放任不管的状态，但是我们对高度也是可以有要求的。
在模板区“布局”标签下，有一个固定布局，可以同时定义宽度和高度。
步骤①：点击“布局”标签下的“基础布局”，点击“固定布局”，向其中加入文字，设置宽度100px，高度100px，填充为背景图，选择填充方式为“被包含”
固定布局不像多列布局那样可以直接增加列或创造结构，因为只保留了他的外观选项，可以调整宽高、边框、阴影、填充与间距，除了填充，这些都与基础布局无异。
填充方式里，对背景图增加了“被包含”选项，背景图能够被完整地不变形地填入布局框，正因为如此，他更适合用来制作装饰性小零件，比如序号。
除此之外，他还有一个特殊点，在于对溢出内容的显示，如果插入过多的文字或者过长的图片，不会显示超出部分。
固定布局的威力其实不容小觑，搭配边框效果，可以制作出各式各样的小部件，三角、圆、线条甚至图形都不在话下。
打开右侧小眼睛“辅助编辑”按钮，可以查看或选中结构组合，会以蓝色线框标注位置。虽然固定布局内不适宜放入过多内容，但是作为装饰等用途时相当实用。
1.4.2
自由布局
在秀米里有没有更方便的，脱离复杂的流式排版的布局方式，像ppt或者ps一样去实现排版设计呢？
在模板区“布局”标签下的“自由布局”，就支持以拖拽的方式进行画面的排布。
步骤①：点击“布局”标签下的“基础布局”，点击“自由布局”，点击布局调整栏中的“编辑”；点击或框选以选中，拖拽移动位置，拖拉定界框手柄可缩放。
往自由布局中添加内容
调整元素的层级关系、预览
回到图文编辑界面
若已有现成ps文件，可以点击下方“导入psd”按钮导入所有图层。
点击蓝色虚线外白色区域或者右方齿轮状按钮可以设置画幅比例。
如果使用过秀米H5，这个界面就再熟悉不过了，进入到这个界面后，虽然页面有变化，但是剪贴板的内容是不变的。
另外，自由布局还可设置动画效果，最终呈现为画幅形式。
1.4.3
表格布局
本节主要讲解表格的快速创建与样式调整，表格的样式设置与之前的基础布局操作相似。
创建时可选择“导入word/excel”按钮快速导入现有表格，也可通过以下步骤在秀米快速创建。
步骤①：选择“基础布局”下的“表格”，放入编辑区，任选一个单元格，点击“快速创建表格”，输入行数列数，键入内容
表格的宽度可调整为百分比，可以点击 按钮合并或分解单元格，间距、对齐与基础布局设置类似。
同样地，表格也可更改其背景填充、边框样式，相比于基础布局少了阴影选项。
步骤②：设置首个单元格样式，点击“向右应用格式”，观察效果；点击“向下隔行应用”，观察效果；点击“向下逐行应用”，观察效果
表格的各行各列因为样式比较统一，所以只需要设置关键起始位置的单元格样式，再向右侧或者下方整行应用样式即可快速完成。
步骤③：点击表格任意单元格，点击“变换表格”，在左侧模板区、剪贴板或者收藏栏选择一个表格样式
若模板本身含有表头样式，会被直接应用，若不需要可以应用后更改，或者自己制作样式模板放入收藏栏或剪贴板进行后续套用格式。
1.4.4
其他特殊布局
在“标题”标签下的“基础标题”内，有首字“下沉”布局，可实现文字环绕包围效果。可打开布局模式自行探索。
除此之外，svg布局、滑动布局会在下一节有关交互的内容中讲解。
1.5
冻结
顾名思义，“冻结”后的布局可塑性更差，需要“解冻”才能调整具体结构或样式；相应的调整选项被隐藏，只显示通用的组件调整栏，但不影响文案的修改。
“冻结”的作用很明显，调整栏更精简清爽，编辑模式下不会误改样式结构；冻结的图片会被标记为装饰性组件而非图片，“一键排版”或“变换组件”时不会被应用图片样式。
1.6
本章小结
排版是一个技能，秀米是一个排版工具，技能+工具必不可少。所以，想要进阶式秀米排版，先来继续搞懂秀米布局吧。
重叠规律元素重叠是遵循后来居上这个规律的，而增加偏移、透明度、旋转等效果，可以改变层级关系。另外，多列布局的列定位“重叠顺序”，可以自主设置结构层次。
布局的宽度宽度自适应属性，取决于内容的宽度。固定宽度属性，一种可固定、不会因为设备屏幕的宽度而变化。而宽度自伸缩属性，它就像弹簧，会自动伸缩其比例。
特殊布局类型固定布局，能够自定义宽度与高度。自由布局，可以像PPT一样，选中、拖拽、拖拉定界框缩放的方式去设计版式。还有用来导入、创建表格的表格布局，首字下沉布局等等。
学啥专业不都一样
工作的尽头必有一个秀米