斷層卡片設計，簡約且有設計感

今天推薦的是小夥伴一粒簡子的《隨筆丨森林中的小樹屋》是一篇隨筆，編者在文字卡片上的設計很有想法，利用布局+間距設計出的「斷層」卡片，簡單也很有設計感：

版式參考

斷層卡片樣式設計

編者在文章上排版實行簡約原則，讓讀者視覺專註在文章上；但文字卡片的設計，有點獨特，文字邊框的線條沒有相交，就像斷裂了一樣：

我們打開布局糢式，能清楚的看出編者是添加了兩層布局，然後設定了布局邊框制作而成的：

• 打開布局糢式，添加一個空白布局，到編輯區域中；

• 設定布局左邊邊框樣式為實線，尺寸1px，顏色rgb(71, 193, 168)；

• 設定這個布局的左右間距為10px；

• 然後再拖一個空白布局到這個卡片框中，設定布局段前距為10px；

• 然後設定布局上邊邊框樣式為實線，尺寸1px，顏色rgb(71,193,168);

• 設定布局上邊的間距為10px；

• 最後拖入文字就好

「斷層」卡片就是這樣做出來的，後邊的放在右邊的線條，就是將外層布局的邊框從左邊換成右邊就好：

多圖旋轉樣式

編者在文章配圖上，使用了秀米現有的糢板，但因為利用到了布局與旋轉元素，讓文章變得有趣起來：

• 打開布局糢式，添加一個二列布局，到編輯區域中；
• 設定布局寬度均為45%，設定布局為居中對齊；左右布局邊距均為10px；

• 然後拖入圖片糢板，調整圖片糢板的旋轉角度；
• 因為這個是組合糢板，小夥伴們要註意辨認清楚，哪一層布局是圖片糢板的布局；然後點擊它，再設定旋轉角度就好：

文章格式參數

標題字型大小

18

正文字型大小

14

文字間距

1.8倍

配色方案

標題

rgb(71, 193, 168)

正文

rgb(62,62,62)

其他配色參考

rgb(13, 136, 70)

  更多咨詢請瀏覽：http://www.designnow.com.hk/