如何理解布局思維？

我們用這篇3分鐘可以讀完的文章

總結秀米3年來對排版布局的探索

本文的關鍵詞：布局、結構化編輯

當我們談論圖文排版的時候，其實說的就是如何組織內容的邏輯順序，排版布局內容在閱讀媒介上的空間位置，使得信息以最佳的表現方式有效地向讀者傳達。信息量龐大的網站主頁會有大格局的排版布局，而在一個小小的手機屏幕上的微信圖文，也可以通過排版布局，做精緻的閱讀體驗。

為了讓編輯小夥伴們做出精緻的圖文頁面，秀米提供的不僅是龐大的模板素材庫，還有可以用來自製模板樣式的布局功能。布局功能可以讓編輯者自由地排列組織圖文內容，而非依賴編輯器提供的模板樣式。僅僅依賴編輯器提供的模板，往往在尋找模板的過程中，很可能會忘掉內容本身的表達初衷；當找到一個「差不多」的模板用了以後，又覺得好像沒有完全滿足內容的傳達意圖。這恰恰是因為編輯者的腦海里缺乏「布局思維」。

在理解布局思維之前

先理解什麼是布局

秀米圖文排版在眾多編輯器當中的核心優勢，必定是布局。「布局」這個詞不是秀米發明的，布局一直融匯在日常情景中的方方面面。布局的作用，貌似在字面上不好理解，那麼我們不妨來打這樣一個比方：

沒有隔板的衣櫃

有隔板的衣櫃

手機屏幕好比是一個衣櫃，而圖文的內容就是柜子里的衣物。如果一個柜子沒有隔板，那麼衣物可能就會堆放得相當雜亂；相反利用隔板劃分空間區域，不僅可以將衣物擺放整齊，還可以根據生活習慣將不常用的東西便束之高閣，常用的東西伸手就能拿到，另外還可以隨時互換位置。由此看來，布局就如衣櫃里的隔板，先是劃分出各種大小區域，然後圖文內容便可以按照一定的閱讀順序，依次放入到布局劃分出來的大小區域中，也可以隨時拖動置換大小位置。我們把這種靈活編輯方式歸結為結構化編輯方式。

結構化編輯 VS 文字化編輯方式

與結構化編輯方式相對應的便是文字化編輯方式，例如公眾號後台編輯器，或者大家都很熟悉的Word，都是文字化編輯。一開始大家從文字化編輯方式過渡到秀米的結構化編輯方式時就有點水土不服，例如首先第一道難關就是不知道如何添加文字。一般文字化編輯方式是，點擊正文區域直接就可以打字；而在秀米，即使是文字也可以看作是一個模塊，又或者說是一塊積木，所以在秀米圖文排版添加文字時，添加的不僅僅是一段文本，而是一個充滿更多編輯可能性的文字模塊。秀米的所有模板組件都在編輯界面左邊的素材區找到。

既然把文字比喻成小積木，自然可以任意拖動到任何位置當中，無論是拖到布局內排列組合，又或者是正文中的其他地方：

上下滑動圖片

可翻閱秀米各類模板組件

跟文字模塊一樣，秀米的每一個模板組件都可以看作一塊積木，自然可以方便地拖動，單獨調整每個積木的屬性例如顏色、背景、位置等等。所以，相較於文字化編輯，結構化編輯的秀米排版，會非常容易地設置某段內容的各種屬性，以及非常容易地調整版面的組織形式。這個對於用戶，進行內容的再組織再創造，是非常重要的功能。

（對，我還想補充一下，因為有布局功能，秀米的滑動布局才可以隨意設置寬、高度，邊框、陰影樣式以及在文中的位置）

我們不否認文字化的編輯方式，也有它的優點，而秀米也在這方面針對性地優化，以達到兩方面優點都能兼顧的效果。目前針對文字化編輯這方面的功能主要有：快速插入正文、文字分段、導入word、格式刷，這些功能我們會在後續的教程里一一介紹。

如何擁有布局思維

也許剛開始接觸排版，未必立刻就能做出驚艷的設計，可以多參考一些已有的模板。在參考這些模板的時候，腦海裡面能浮現出它的布局框架，就表示你已經具備了布局思維。

我們用幾個模板樣式來舉例，試試看下方的幾個模板，試試看腦海里能不能想像出它的布局結構？

向左滑動向右看這個模板的布局結構

不妨繼續滑動查看內容放入布局的過程

示例1

向左滑動向右看這個模板的布局結構

不妨繼續滑動查看內容放入布局的過程

示例2

向左滑動向右看這個模板的布局結構

不妨繼續滑動查看內容放入布局的過程

示例3

向左滑動向右看這個模板的布局結構

不妨繼續滑動查看內容放入布局的過程

示例4

備註

很多剛接觸布局的小夥伴常常會問，布局分類里提供的布局框架找不到合適的寬度比例怎麼辦呢？其實這個問題很好解決，選中某個布局後，會看到布局工具條上有一個設置寬度的選項，通過這個選項調整寬度就可以了：

另外，在同一行布局中，無論有多少列，彼此寬度比例相加不超過100%就可以了。我們會在之後的教程中介紹布局工具條上的各項功能。

小結

當理解了秀米是結構化的編輯，就能理解為什麼秀米有布局，有定位，有文字的分段，為什麼秀米可以很方便地把內容到處拖動，自由地排列組織圖文內容，不僅僅依賴編輯器提供的模板樣式。通過這種開放式結構化編輯，秀米希望為用戶提供的不只是一些好用的模板，還有創造性思考帶來的成就感。