如何用好容器组件



容器是个很方便的组件,灵活用好容器,可以提高你的页面设计效率,那么下面我们用示例来看下如何操作。


一、容器内的组件可以随容器一起被复制。比如:容器内有文字、图片等组件,复制容器时,文字和图片组件也会同时被复制。那么我们可以利用这个特性做很多事情。

比如页面上有很多类似的标题





那么 我们可以先在容器内做一个出来


d4d247d0-42df-46aa-b53e-8422fc86e83d.png



然后复制,容器内的文字都会随着容器被一起复制过来,那么剩下的只需要修改里面的文字就可以很快速的做出多个标题来。


同理,在内页上我们会有很多类似的二级栏目和导航标题以及其他一些相同的内容,也可以放在容器中,通过复制,修改相关内容达到快速实现效果的目的。




只需在容器内做一个列表出来,剩下两个复制粘贴,修改图片和列表的来源就可以得到相同的设计效果了。


这里在告诉大家一个小窍门,当复制出三个列表容器以后,将最边上的两个贴到系统辅助线的边上。


40749ade-8658-4b3c-af95-4abaa5ecb618.png


然后,在没有选中任何组件的情况下,按住Ctrl键,逐一选中三个列表容器,然后点击上面工具栏的上对齐



然后点击横向等间距对齐



那么三个列表项就很轻松的对齐了


2c869a72-169c-43b4-af9a-6d52c618aef8.png


二、用容器组合多个组件。下面的图上就是利用容器做的色块,透明的背景都是用一个很小的透明背景png图片来做的,里面的人物和文字按照需要放入到容器内,拖动容器,就可以很轻松的将里面的内容一齐拖到想要的地方。轻松的移动也会大大提高你的设计效率。