圖文排版

H5

手機版秀米

作為一個文字工作者，我們從文章中提取結構輕而易舉，根據大綱，能夠迅速為内容設置導語、主标題、次标題…而這些文字、圖片本身就是文章重要的視覺要素，按照中心主題合理排列組合這些元素，使得視覺形式與内容本身相互強化，準确傳遞文章信息，才能給讀者提供一個獨特的思維空間。

因此，元素之間的位置、大小、形狀等組合關系是創造版式的重點。而在文章中，内容元素是以行的形式緊密組合的，這便限制了我們創造另一個方向的排列結構。秀米的“布局”解鎖了這個限制，通過創造一行多列的結構成功把元素并列組合。試想一下，在word裡使用複雜的分欄工具，在秀米裡隻需要“布局”便可輕松創造各類結構，無疑秀米更香。

可以看到，無論是标題樣式、圖片組合，還是複雜的多元素版式，都能通過布局的并列結構進行創造。

秀米的“布局”功能是怎樣創造繁雜的排版結構呢？首先我們需要了解兩個概念。

01 “組件”概念及理解

組件是獨立成行的塊狀組合；在編輯界面中任何可拖動的單元都是組件，例如文字、圖片、各種小零件等。

注意觀察，被黑色外框包圍的結構即為“組件”，左側為隻選中組件，右側為激活組件内元素，組件調整欄會在内容被選中後出現。組件總會占滿整行，因此被稱為獨立成行的塊狀組合。

02 “布局”概念及理解

布局是用于限制内容寬度的單列或多列容器；可以在每列中添加各種組件，但是内部的所有組件寬度都會受制于該容器，同時每列容器都可以設置單獨的樣式。

也就是說，布局可以創造多列的結構，基于布局本身是可以拖拽的組件，可以在組件嵌套後産生更複雜結構，這便是秀米作為一款“結構化”排版編輯器的亮點。

因此，創造結構後，将組件拖拽放入，便可以産生各類版式。

03 理解“布局思維”

現在，框選以選中這幾個組件。這個框選是在編輯區空白區域，摁住鼠标拉出藍色選框，即可選中所需組件。

仔細觀察選中的三個組件，組件1與組件3都沒有左右并列結構，組件2明顯使用了左右并列結構，那麼使用兩列的布局，分别塞入相應的内容，就完成了這個版式。

能夠把視覺形式上的并列組合轉為秀米布局的并列結構，就是“布局思維”。結合上述的操作與思路，思考下列樣式該如何組合呢？

相信這個已經不是難事了，右滑看看答案吧。

04 本章小結

要想理解秀米“布局思維”，首先需要理解“組件”、“布局”這兩個概念。

組件是獨立成行的塊狀組合，在編輯界面中任何可拖動的單元都是組件。組件總會占滿整行。

布局是用于限制内容寬度的單列或多列容器；可以在每列中添加各種組件，但是内部的所有組件寬度都會受制于該容器，同時每列容器都可以設置單獨的樣式。

布局思維能夠把視覺形式上的并列組合轉為秀米布局的并列結構。

小白适用

系統介紹秀米的基礎操作

☚☚☚ 向左滑動

秀米有那麼多騷技能

不來學幾招？

當你理解了布局思維

你會發現……

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!