編輯導語：一個好的排版頁面可以有效提升使用者的體驗感和平臺的曝光度，本文作者分享了原型設計中必備的四大排版原則，介紹了親密性、對齊、重複、對比四大排版原則，一起來學習一下吧。

作為一個產品，好像我們哪方面都不懂，又好像但凡有一方面不懂就難以協調多方資源順利完成專案。產品在不同的階段對接的物件不同，所以需要用到的專業知識和職場技巧差異也是完全不同的。

那麼今天就分享一波設計原型排版階段常用到的設計原則——

親密性、對齊、重複、對比

，接下來給大家展示一張圖片。

圖片1——原始圖片

看完圖片什麼感覺吶？掃一眼得到的資訊 —— 一些整理的詩句說明和圖片，然後就沒有看下去的慾望了。

一、親密性原則

親密性原則是將 業務邏輯相關的獨立項 物理位置靠近，從而被使用者看起來是一個整體；業務邏輯不相關的獨立項物理位置遠離。

透過位置是否靠近體現獨立項之間的關係，有關聯的獨立項視覺效果也讓其靠近，沒有關聯的獨立項視覺效果也讓其分割。最終實現讓【相關性的物件成為一個組織】的目的。根據親密性的設計原則，經過排版的更改，最佳化之後的圖片如下。

圖片2——利用親密性原則最佳化之後的圖片

看完圖片什麼感覺吶？掃一眼得到的資訊 —— 相比較圖片1，即便不看具體的文字資訊，讀者可以清晰知曉所有的內容被劃分為4個模組，每個模組有對應的文字和圖片。

二、對齊原則

對齊原則指的是 頁面上的任何獨立項都應當和頁面上其他的某個獨立項存在視覺上的聯絡。我們的眼睛喜歡看看到有序的事物，閱讀舒適且能快速get到資訊。

透過不同的對齊方式或者藉助各種輔助線來達到【使頁面統一而且有條理】的目的。

對於初級設計者儘量只使用一種對齊方式：全部左對齊&全部右對齊&全部居中對齊，避免混合使用多種文字對齊方式。根據對齊的設計原則，經過排版的更改，最佳化之後的圖片如下。

圖片3——利用對齊原則最佳化之後的圖片

看完圖片什麼感覺吶？掃一眼得到的資訊 —— 相比較圖片2，同樣能在不看具體的文字資訊，讀者可以清晰知曉所有的內容被劃分為4個模組，每個模組有對應的文字和圖片。但是卻比圖片2閱讀起來更輕鬆舒適，讓使用者有深度瞭解的慾望。

三、對比原則&重複原則

對比原則指的是 頁面上不同獨立項之間要有強烈的視覺對比效果，且能表達出不同獨立項之間有組織有結構層次的關係。

最終達到【增強頁面的視覺吸引力的同時，更科學地組織資訊結構】的目的。對比維度有很多，例如 字型，顏色，大小，形狀等等。如果使用對比，就要加大對比的力度，例如深灰和淺灰色的對比遠不如橙紅色和水綠色對比效果好。

重複原則指的是 設計的某些方面需要在頁面中重複，讀者能看到任何方面都可以作為重複元素，例如顏色、符號、字型形式等等。重複可以將一些獨立項關聯起來，從而實現【統一且增強視覺效果】。

根據對比&重複的設計原則，經過排版的更改，最佳化之後的圖片如下：

圖片4——利用對比&重複原則最佳化之後的圖片

看完圖片什麼感覺吶？掃一眼得到的資訊 —— 相比較圖片3，讀者能直接清晰的知道內容為春夏秋冬的詩句&詩句的說明&詩句對應的圖片，並且讀者的焦點直接聚集在4句詩句上，激發了使用者的閱讀興趣。

具體的調整是 每個模組的詩句和下面的說明有字型型別、字型大小、字型顏色的對比，但是不同模組下詩句的字型型別&字型的大小，詩句說明的字型型別&字型大小又是重複的。

利用設計的四大原則—親密性、對齊、對比、重複，從圖1逐步最佳化到圖4，很明顯能感覺到使用者在閱讀舒適的情況下 在極短的時間內迅速GET到圖片要表達的內容，激發了繼續閱讀的慾望。其實這4大原則在PM設計原型時經常被大家有意識或者無意識地用到。

但是為了使我們設計的原型看起來更高大上，和互動設計師&UI設計師溝通起來更順暢，應該在平時的工作溝通中有意識地去按照這4大原則進行具體的排版工作。如果有想進一步深入瞭解這4大原則的小夥伴，可以去閱讀《寫給大家看的設計書》（第4版）。

本次的分享就到這啦~希望此篇文章能在大家設計原型或者其他的排版工作時有些許幫助~

本文由 @Grace 原創釋出於人人都是產品經理，未經許可，禁止轉載。

題圖來自Unsplash，基於 CC0 協議。