圖文排版

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一樣，選中、拖拽、拖拉定界框縮放的方式去設計版式。還有用來導入、創建表格的表格布局，首字下沉布局等等。

學啥專業不都一樣

工作的盡頭必有一個秀米

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