原型設(shè)計(jì)必備四大排版原則（完整）

原型設(shè)計(jì)必備的四大排版原則

作為一個(gè)產(chǎn)品，似乎我們哪方面都不懂，又似乎但凡有一方面不懂就難以協(xié)調(diào)多方資源順當(dāng)完成工程。產(chǎn)品在不同的階段對(duì)接的對(duì)象不同，所以需要用到的專業(yè)學(xué)問和職場(chǎng)技巧差異也是完全不同的。

那么今日就共享一波設(shè)計(jì)原型排版階段常用到的設(shè)計(jì)原則親切性、對(duì)齊、重復(fù)、比照，接下來給大家展現(xiàn)一張圖片。

圖片1原始圖片看完圖片什么感覺吶？掃一眼得到的信息一些整理的詩句說明和圖片，然后就沒有看下去的欲望了。

一、親切性原則親切性原則是將業(yè)務(wù)規(guī)律相關(guān)的獨(dú)立項(xiàng)物理位置靠近，從而被用戶看起來是一個(gè)整體；業(yè)務(wù)規(guī)律不相關(guān)的獨(dú)立項(xiàng)物理位置遠(yuǎn)離。

通過位置是否靠近表達(dá)獨(dú)立項(xiàng)之間的關(guān)系，有關(guān)聯(lián)的獨(dú)立項(xiàng)視覺效果也讓其靠近，沒有關(guān)聯(lián)的獨(dú)立項(xiàng)視覺效果也讓其分割。最終實(shí)現(xiàn)讓【相關(guān)性的對(duì)象成為一個(gè)組織】的目的。依據(jù)親切性的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下。

圖片2利用親切性原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息相比擬圖片1，即便不看詳細(xì)的文字信息，讀者可以清楚知曉全部的內(nèi)容被劃分為4個(gè)模塊，每個(gè)模塊有對(duì)應(yīng)的文字和圖片。

二、對(duì)齊原則對(duì)齊原則指的是頁面上的任何獨(dú)立項(xiàng)都應(yīng)當(dāng)和頁面上其他的某個(gè)獨(dú)立項(xiàng)存在視覺上的聯(lián)系。我們的眼睛喜愛看看到有序的事物，閱讀舒適且能快速get到信息。

通過不同的對(duì)齊方式或者借助各種幫助線來到達(dá)【使頁面統(tǒng)一而且有條理】的目的。

對(duì)于初級(jí)設(shè)計(jì)者盡量只使用一種對(duì)齊方式：全部左對(duì)齊全部右對(duì)齊全部居中對(duì)齊，避開混合使用多種文本對(duì)齊方式。依據(jù)對(duì)齊的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下。

圖片3利用對(duì)齊原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息相比擬圖片2，同樣能在不看詳細(xì)的文字信息，讀者可以清楚知曉全部的內(nèi)容被劃分為4個(gè)模塊，每個(gè)模塊有對(duì)應(yīng)的文字和圖片。但是卻比圖片2閱讀起來更輕松舒適，讓用戶有深度了解的欲望。

三、比照原則重復(fù)原則比照原則指的是頁面上不同獨(dú)立項(xiàng)之間要有劇烈的視覺比照效果，且能表達(dá)出不同獨(dú)立項(xiàng)之間有組織有構(gòu)造層次的關(guān)系。

最終到達(dá)【增加頁面的視覺吸引力的同時(shí)，更科學(xué)地組織信息構(gòu)造】的目的。比照維度有許多，例如字體，顏色，大小，外形等等。假如使用比照，就要加大比照的力度，例如深灰和淺灰色的比照遠(yuǎn)不如橙紅色和水綠色比照效果好。

重復(fù)原則指的是設(shè)計(jì)的某些方面需要在頁面中重復(fù)，讀者能看到任何方面都可以作為重復(fù)元素，例如顏色、符號(hào)、字體形式等等。重復(fù)可以將一些獨(dú)立項(xiàng)關(guān)聯(lián)起來，從而實(shí)現(xiàn)【統(tǒng)一且增加視覺效果】。

依據(jù)比照重復(fù)的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下：

圖片4利用比照重復(fù)原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息相比擬圖片3，讀者能直接清楚的知道內(nèi)容為春夏秋冬的詩句詩句的說明詩句對(duì)應(yīng)的圖片，并且讀者的焦點(diǎn)直接聚攏在4句詩句上，激發(fā)了用戶的閱讀興趣。

詳細(xì)的調(diào)整是每個(gè)模塊的詩句和下面的說明有字體類型、字體大小、字體顏色的比照，但是不同模塊下詩句的字體類型字體的大小，詩句說明的字體類型字體大小又是重復(fù)的。

利用設(shè)計(jì)的四大原則親切性、對(duì)齊、比照、重復(fù)，從圖1逐步優(yōu)化到圖4，很明顯能感覺到用戶在閱讀舒適的狀況下在極短的時(shí)間內(nèi)快速GET到圖片要表達(dá)的內(nèi)容，激發(fā)了連續(xù)閱讀的欲望。其實(shí)這4大原則在PM設(shè)計(jì)原型時(shí)常常被大家有意識(shí)或者無意識(shí)地用到。

但是為了使我們?cè)O(shè)計(jì)的原型看起來更高大上，和交互設(shè)計(jì)師UI設(shè)計(jì)師溝通起來更順暢，應(yīng)當(dāng)在平常的工作溝通中有意識(shí)地去根據(jù)這4大原則進(jìn)展詳細(xì)的排版工作。假如有想進(jìn)一步深入了解這4大