在視覺傳達(dá)中，版式設(shè)計(jì)四大原則一直貫穿于我們的工作中。本文詳細(xì)闡述了這四大原則，希望能夠幫助你應(yīng)用于視覺設(shè)計(jì)中。

為了在別人吹牛逼的時(shí)候保持清醒，從2018年開始我整理了100多條互聯(lián)網(wǎng)設(shè)計(jì)方法論。

這些方法論里，我發(fā)現(xiàn)有的借鑒的是工業(yè)設(shè)計(jì)，有的是建筑學(xué)、心理學(xué)的，還有傳播學(xué)，甚至連語義學(xué)都出現(xiàn)了……

然后就想，怎么這么多互聯(lián)網(wǎng)設(shè)計(jì)方法論？每個(gè)方法論如何應(yīng)用？哪些又是瞎扯模型？

把這些分享出來希望能幫到更多的人！

我把這些方法論總結(jié)成了六大類：

版式設(shè)計(jì)四大原則（對比、親密、對齊、重復(fù)）是視覺傳達(dá)中，最基礎(chǔ)也是最重要的設(shè)計(jì)原則，它一直貫穿于我們的設(shè)計(jì)工作，但又經(jīng)常被忽視。

當(dāng)我們在設(shè)計(jì)提升階段中遇到瓶頸的時(shí)候，不妨好好回顧一下夯實(shí)一下版式基礎(chǔ)，基礎(chǔ)決定我們走多遠(yuǎn)。

視覺傳達(dá)其本質(zhì)也是表達(dá)方式的一種，我們需要通過設(shè)計(jì)方法手段，通過將元素建立聯(lián)系有目的得引導(dǎo)用戶視覺流向，將信息在“最短時(shí)間”內(nèi)“快速”傳達(dá)給用戶。

任何元素都不能在頁面上隨意擺放，每個(gè)元素應(yīng)當(dāng)與頁面上另一個(gè)元素有某種視覺聯(lián)系，這樣才能建立一種清晰且輕巧的閱讀邏輯。

所以，我們的設(shè)計(jì)行為，是否讓信息更快速、更直接、更有效得傳達(dá)給用戶了？

對比

無對比，不設(shè)計(jì)。（沒有對比就沒有設(shè)計(jì)可言）

合理劃分好信息層級，來引導(dǎo)用戶視覺流向。

親密

在版式設(shè)計(jì)中，親密和對比是相輔相成的。

彼此相關(guān)的元素應(yīng)當(dāng)靠近，歸組在一起，為讀者提供清晰的閱讀架構(gòu)。

對齊

對齊對比無處不在，對齊是設(shè)計(jì)的標(biāo)配。

我們在做設(shè)計(jì)的過程中，腦海中已經(jīng)養(yǎng)成習(xí)慣得提醒自己“對齊對齊對齊對齊！”

重復(fù)

設(shè)計(jì)的某些元素或手法需要在整個(gè)作品中重復(fù)。降低了用戶的適應(yīng)成本，其本質(zhì)還是讓信息傳遞更快速有效。

一、對比

無對比，不設(shè)計(jì)。（沒有對比就沒有設(shè)計(jì)可言）

對比的目的：

• 使有層級、有主次、有節(jié)奏、有設(shè)計(jì)感
• 使閱讀方便
• 突出重點(diǎn)；強(qiáng)化要點(diǎn)；表達(dá)核心信息

做好對比的前提是我們透徹得理解了業(yè)務(wù)和將要呈現(xiàn)的內(nèi)容。有目的得將元素拉開對比，合理劃分好信息層級，來引導(dǎo)用戶視覺流向，第一視覺、第二視覺、第三視覺…之后讓用戶視線最終又落在哪里。

對比的手法：

形態(tài)：方vs圓、長vs短、粗vs細(xì)、大vs小、高vs矮、胖vs瘦、凹vs凸；

狀態(tài)：動vs靜、虛vs實(shí)、近vs遠(yuǎn)；

色彩：黑vs白、明vs暗、炫彩vs單色、輕vs重色；

二、親密

在版式設(shè)計(jì)中，親密和對比是相輔相成的。

親密的目的：

• 使元素間有關(guān)系成為一個(gè)家族，使有關(guān)聯(lián)
• 合理分組

彼此相關(guān)的元素應(yīng)當(dāng)靠近，歸組在一起，如果多個(gè)項(xiàng)相互之間存在很近的親密性，它們就會成為一個(gè)視覺單元，而不是多個(gè)孤立的設(shè)計(jì)單元，這有助于組織信息減少混亂，為讀者提供清晰的閱讀架構(gòu)。

親密的手法：

親密即編組，將相關(guān)聯(lián)的信息進(jìn)行編組區(qū)分，關(guān)聯(lián)的元素組織在一起，移動元素，使它們的物理位置相互靠近，使其形成閱讀秩序。使之成為整體的一個(gè)組，而不再是一堆彼此無關(guān)的片段。物理位置靠近的，就意味著存在關(guān)聯(lián)。（我們可以把它理解為元素間的父子關(guān)系）

做了8年产品经理后，我是这么看产品经理的

我个人是从非常初级的产品经理做起，再到负责一个大产品的项目管理，现在有幸跳出了日常基础的工作更多的去看产品的PMF，product strategy...

查看详情 >

文字與文字、文字與圖、圖與圖間通過物理距離，控制元素之間的關(guān)系。除了物理距離劃分，也可以用線條色塊切割。

三、對齊

對齊對比無處不在，對齊是設(shè)計(jì)的標(biāo)配。

我們在做設(shè)計(jì)的過程中，腦海中已經(jīng)養(yǎng)成習(xí)慣得提醒自己“對齊對齊對齊對齊！”如果你還沒有養(yǎng)成習(xí)慣，那就逼著自己有目的得時(shí)刻提醒自己。

對齊的目的：

• 對齊讓設(shè)計(jì)變得更有條理
• 對齊讓設(shè)計(jì)變得更有邏輯
• 對齊讓閱讀變得更輕松

對齊的手法：

對齊分為，左右對齊、上下對齊、居中對齊

1. 右對齊——最常見的對齊方式
2. 左對齊——最裝逼的對齊方式
3. 居中對齊——最無能的對齊方式
4. 右對齊不一定非要放右邊

四、重復(fù)

設(shè)計(jì)的某些元素或手法需要在整個(gè)作品中重復(fù)。其本質(zhì)還是讓信息傳遞更快速有效。

重復(fù)的目的：

• 重復(fù)的作用：統(tǒng)一信息、強(qiáng)調(diào)信息、強(qiáng)化信息
• 重復(fù)就是保持設(shè)計(jì)的一致性
• 重復(fù)縮短了我們二次閱讀的時(shí)間（比如在商品詳情介紹中，如果沒有運(yùn)用重復(fù)原則版式不一致的話，用戶在閱讀過程中，需要時(shí)間適應(yīng)、習(xí)慣新的版式）

重復(fù)的手法：

• 標(biāo)題的字體
• 符號
• 圖片的主色調(diào)
• 版面的留白比例
• 標(biāo)題與內(nèi)文的距離
• 內(nèi)文大小統(tǒng)一