度搜索PPT，我們經常能夠看到下面這樣奇丑無比的PPT作品。它們通常有一個通病就是排版混亂。而對于一份PPT作品而言，排版有著極為重要的作用。好的排版可以讓信息更好的被讀者所理解和記憶。即使你是PPT小白，只要掌握了一些排版的技巧，那么你制作出來的作品一定不會太丑。所以我們今天就來聊一聊「如何制作出高質量的PPT排版」看之前有幾個注意事項：1.文章很長，靜下心來讀2.學會這些排版技巧，基本告別丑逼PPT3.用好這些排版技巧，說不定一秒變大神4.可能是史上最全的排版技巧分享，建議收藏下面。

百度搜索PPT，我們經常能夠看到下面這樣奇丑無比的PPT作品。

它們通常有一個通病就是排版混亂。

而對于一份PPT作品而言，排版有著極為重要的作用。好的排版可以讓信息更好的被讀者所理解和記憶。

即使你是PPT小白，只要掌握了一些排版的技巧，那么你制作出來的作品一定不會太丑。

所以我們今天就來聊一聊「如何制作出高質量的PPT排版」

看之前有幾個注意事項：

1.文章很長，靜下心來讀

2.學會這些排版技巧，基本告別丑逼PPT

3.用好這些排版技巧，說不定一秒變大神

4.可能是史上最全的排版技巧分享，建議收藏

下面還是給大家提供一個目錄：

基本原則

首先要給大家分享的是《寫給大家看的設計書》中提到的“排版四原則”——親密、對比、對齊、重復

▼如何理解呢？我們先看一下定義

親密

顧名思義，親密就是要把相關聯的元素放到一起，讓畫面看起來有序并且邏輯關系清晰。其實也就是一個分類的過程，來看下面這個例子。

這樣看是不是非常混亂，完全抓不到重點？而如果我們把相關聯的內容放在一起，整個頁面就會清晰很多。

在實際制作中，我們還可以通過使用表格、形狀，調整顏色，讓同類元素更加親密，邏輯關系更加清楚。

對齊

對齊是指每個元素都應當與頁面上的另一個元素有某種視覺聯系。這句話看似很拗口，其實就是你在排版的時候要注意不能造成閱讀障礙。

在這一點上，其實和親密性類似，就是要做到元素的“有序”。

▼還是舉一個例子

這種排版我們閱讀起來非常累，畫一下線的話，我們可以看到我們的閱讀視角是這樣的

這就在無形中造成了閱讀障礙，而如果這里我們采用對齊的方式，這種障礙就隨之消失了，整個頁面也會更加有序

那么如何實現對齊呢，分享一些常見的對齊類型和對齊方法

對比

對比的目的是為了突出強調重點內容，加深讀者的印象。常見的對比有顏色，字體大小等等。舉個例子，這里用到的是字號的對比

而對于文字比較多的頁面，我們可以使小標題和正文內容產生對比，就比如剛剛的設計四原則

另外還可以通過改變顏色、添加底部色塊等等的變化產生對比效果

當然使用對比一定要徹底，如果對比太小肯定達不到效果。

重復

重復強調的是整個PPT作品的統一性，包括整體的版式、配色、背景等等。

▼舉個例子

通過重復整體版式、配色、背景、字體等等可以讓整個作品具有整體性和連貫性，讓讀者清晰的感覺到，每一頁并不是獨立的存在的。

當然重復不一定局限于整體風格的重復，也可以是每頁文字樣式的重復，統一的段間距、統一的小標題樣式、統一的字體配色方案等等

如果你理解了這四個原則，那么整個排版過程也就非常簡單了。用親密原則對元素進行分類，在組織頁面的時候注意對齊和對比來減少讀者的閱讀障礙，加深閱讀印象，最后記住重復原則，保證頁面與頁面之間，內容與內容之間的統一。

如果大家能夠運用好這四個原則，相信大家的作品一定會有一個質的飛躍。

具體制作

掌握了排版的基本原則之后，來和大家分享一些在具體排版過程中的心得和體會。

文字較少時

先說一種比較容易處理的情況，當文字內容比較少的時候我們可以嘗試居中排版，就像剛剛的“我愛三頓”。

如果有需要突出強調的內容，用改變顏色、字號等方式來實現

我們也可以采用“發布會”式的風格，有需要突出強調的內容可以在文字下面添加一個色塊

文字較多時

還是舉個例子來和大家說，這是一段非常長的文字

我們通常的處理方法是提煉小標題，調整段間距以及字體（建議一般使用微軟雅黑）

這樣一來是不是清晰很多了呢，進一步的我們還可以調整段與段直接的間距，利用線條將3段內容分割開，使邏輯框架更加完整

還能怎么玩？我們不妨為每一段添加小圖標，使內容更加豐富也便于讀者去理解。同時也可以對內容進行精簡，保留重點的內容。

最后，我們還可以為這個頁面添加一層背景，與內容相襯。

圖片排版

如果是圖片較多的情況，我們可以通過剪裁工具調整圖片大小至統一，然后均勻分布在頁面中心即可

當然你還可以使用Smartart工具方便的進行圖片排版，省時偷懶

相關網站

上面這些就是想和大家分享的排版基本原則和在排版過程中需要注意的一些注意事項。

當然排版不可能是千篇一律的，掌握基本的原則之后希望大家去多看一些排版作品，汲取靈感。這里為大家推薦幾個不錯的網站。

▼http://graphicriver.net/

▼http://uehtml.com

▼http://pptstore.net

寫在最后

如果你能掌握我說的這些原則和技巧，平時多去看看好的排版，相信你的排版能力一定會有很大的提升。

當然記不住也沒關系，可以在制作PPT之前看一遍這篇文章，產生一個大致的印象，保證你的PPT不再丑陋！

哨子 www.shaozi.com

中小企業大數據辦公首選平臺

近在做公司的登錄頁，UE同學希望第三方登錄的圖標在hover的時候有一個圓形的縮放效果（原話是波紋效果-_-||），效果參考騰訊新聞和網易新聞的分享按鈕。

• 騰訊新聞的分享按鈕hover效果（新聞頁面）：

• 網易新聞的分享按鈕hover效果（新聞頁面）：

文章分享之前小編推薦一下我的前端學習群：611256580，里面都是學習前端的，如果你想制作酷炫的網頁，想學習前端知識，小編歡迎你的加入。小編會在群中不定期分享干貨源碼，包括我精心整理的一份前端教程。歡迎各位感興趣的的小伙伴。

看了一下這兩個頁面的源碼，主要是用了 transform:scale() 和 transition ，自己的最終的實現效果如下：

實現思路大體是模仿網易新聞的，布局如下：

<a href="" class="third-party third-party-weixin"> <i></i>
<span></span>
</a>

外層的a標簽用于整體容器和跳轉，內層的i標簽使用偽元素::before和::after分別作為背景色和前景色，這兩個偽元素均絕對定位，垂直水平居中，::after設置縮放屬性 transform:scale(0) ,過渡動畫屬性 transition: all .3s ，正常情況下::before可見，當hover的時候::after設置縮放屬性 transform:scale(1) ，兩個相鄰絕對定位元素在不設置z-index的情況下，文檔流在后的元素在上，并且在有過渡動畫屬性 transition 的情況下實現了縮放動畫效果。

span標簽用于展示logo，可以是圖片或者web字體，只要透明就可以，這里用了圖片。 CSS（此處使用的是sass）如下：

.third-party { position: relative; // 為了兼容firefox必須要變成block或inline-block
display: inline-block; width: 48px; height: 48px; margin: {
left: 6%; right: 6%;
}
&:hover { i {
&::after { transform: scale(1);
}
}
} span { // position: relative是為了兼容firefox和IE
position: relative; display: block; width: 48px; height: 48px; background-size: 30px; background-position: center; background-repeat: no-repeat;
} i { position: absolute; top: 0; left: 0; width: 48px; height: 48px;
&::before { content: ''; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0;
}
&::after { content: ''; transition: all .3s; border-radius: 50%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: scale(0);
}
}
&.third-party-weixin { span { background-image: url(../images/login/weixin-64.png);
} i {
&::before { background-color: #20a839;
}
&::after { background-color: #30cc54;
}
}
}
}

這樣這個簡單的圓形縮放動畫就完成啦。