秀米手机版登录（流水的工作铁打的秀米）

图文排版

H5

手机版秀米

正文字数：3730字

阅读时间：12分钟

本章教程，是上章节的【使用布局，驾驭版式】的下篇，内容元素的重叠规律是怎样的规则，布局的四种宽度属性有何区别，特殊布局特殊在哪里，又能做出什么样的版式，本章会具体讲解。

1.1

更多样式效果

在组件调整栏里，还集结了其他的样式调整选项，包括不透明度、旋转、翻转、倒影、缩放。

步骤①：创建一个两列布局，左右两列各添加一张图片；选择第二列，调整“列定位”左为-30px；点击左侧图片，点击“···”选项，调整不透明度为90%，退出布局模式，观察变化

步骤②：将不透明度重置为100%，调整旋转，退出选中模式，观察变化后重置。

以相同方式观察“翻转”、“倒影”、组件定位中“缩放”、“偏移”的效果

细心的你发现了吗，这些效果都会让他变得气宇轩昂；不过，他好像有点过分喧宾夺主了，原本被遮挡的部分也显山露水起来，貌似他的层次提高了？他们的层叠关系原本是什么，又因为什么而关系破裂？下一节将会详细介绍。

1.2

重叠规律

我们阅读的word、网络上的文章、以大篇幅文字为主的页面，都是以流式排版呈现的；按照阅读顺序从上到下、从左到右，正如手机屏幕通知新消息一样，越后到来的信息总是越醒目，后来居上的信息甚至会一层一层遮盖住旧的信息；我们在阅读的网络文章也是如此，下方的元素总是会遮挡上方的元素，右边的元素遮挡左边的元素；

总而言之，后浪拍打着前浪。这就是他们之间默认的重叠规律。

步骤①：创建一个二列布局，第一列添加适量文字，第二列添加一张图片，并在该二列布局块下方添加一张图片；

调整下方图片的“组前距”为负数，退出选中模式，观察其重叠遮盖情况；调整第二列“列定位”左为负数，退出选中模式，观察整体重叠遮盖情况

上述步骤能够清晰地呈现，结构距离变化引起的重叠是遵循后来居上这个规律的。

但是有时候需要打破这个规律，就比如聊天界面的消息置顶。比如上述步骤中，其实并不希望文字被遮挡，那么为了把文字置顶，就需要给他一些特殊属性。

正如2.2中提到的“不透明度、旋转、翻转、倒影、缩放、偏移”效果，都能够让他提高层级。在上文列定位部分我们也提到，偏移属于位置变换效果而非结构变化，包括旋转、缩放；当然，不透明度、倒影这类影响本身显示效果的属性也能将他们层次提高。

如果置顶的内容太多，那么在顶层的他们也会遵循后来居上的原则。

步骤②：点击文字，设置“偏移”为1，退出选中模式，观察重叠遮盖情况；点击第二列内图片，设置“不透明度”为99%，退出选中模式，观察重叠遮盖情况

正如上述步骤中，想要提高层级，可以巧妙使用这几类效果，比如偏移1、不透明度99%，微小的数值带来了层级改变，但这个效果难以察觉。

综上，结构变化带来的重叠默认为后来居上，增加效果变换可以让他金蝉脱壳般晋升顶层。但是，当他们同处高层，又该怎么调整层叠顺序呢？下一节便会提及。

1.3

布局的各种宽度及其特点

通过前文学习，我们已经会调整布局的宽度，搭建一些常用的多列结构；并且，我们也尝试调整了百分比宽度的布局，他取决于整行的宽度，调整内容时不影响结构和列宽度。

但是这样并不方便我们制作一些束身的样式，比如有边框包围的小标题，如何做到和标题文字的宽度一致呢？那么就需要布局的宽度取决于内容的伸展宽度。

步骤①：创建一个布局，向内添加少量文字，设置其边框样式“样式：实线 ”、“尺寸：1”；

点击宽度单位后方小三角，选择“宽度自适应”，观察效果

若继续往该布局内增删文字，宽度依旧会随之增减，形成一种贴身包裹的结构。此时如果想要他款式更加丰富，例如左侧加入小图装饰，可以向左侧拖入一张图片并吸附，再调整图片列的宽度。

步骤②：调整第一列宽度为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一样，选中、拖拽、拖拉定界框缩放的方式去设计版式。还有用来导入、创建表格的表格布局，首字下沉布局等等。

学啥专业不都一样

工作的尽头必有一个秀米

,