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

1、原型設(shè)計(jì)必備的四大排版原則作為一個(gè)產(chǎn)品，好像我們哪方面都不懂，又好像但凡有一方面不懂就難以協(xié)調(diào)多方資源順利完成項(xiàng)目。產(chǎn)品在不同的階段對接的對象不同，所以需要用到的專業(yè)知識(shí)和職場技巧差異也是完全不同的。那么今天就分享一波設(shè)計(jì)原型排版階段常用到的設(shè)計(jì)原則親密性、對齊、重復(fù)、對比，接下來給大家展示一張圖片。圖片1原始圖片看完圖片什么感覺吶？掃一眼得到的信息 一些整理的詩句說明和圖片，然后就沒有看下去的欲望了。一、親密性原則親密性原則是將 業(yè)務(wù)邏輯相關(guān)的獨(dú)立項(xiàng) 物理位置靠近，從而被用戶看起來是一個(gè)整體；業(yè)務(wù)邏輯不相關(guān)的獨(dú)立項(xiàng)物理位置遠(yuǎn)離。通過位置是否靠近體現(xiàn)獨(dú)立項(xiàng)之間的關(guān)系，有關(guān)聯(lián)的獨(dú)立項(xiàng)視覺效果也讓

2、其靠近，沒有關(guān)聯(lián)的獨(dú)立項(xiàng)視覺效果也讓其分割。最終實(shí)現(xiàn)讓【相關(guān)性的對象成為一個(gè)組織】的目的。根據(jù)親密性的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下。圖片2利用親密性原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息 相比較圖片1，即便不看具體的文字信息，讀者可以清晰知曉所有的內(nèi)容被劃分為4個(gè)模塊，每個(gè)模塊有對應(yīng)的文字和圖片。二、對齊原則對齊原則指的是 頁面上的任何獨(dú)立項(xiàng)都應(yīng)當(dāng)和頁面上其他的某個(gè)獨(dú)立項(xiàng)存在視覺上的聯(lián)系。我們的眼睛喜歡看看到有序的事物，閱讀舒適且能快速get到信息。通過不同的對齊方式或者借助各種輔助線來達(dá)到【使頁面統(tǒng)一而且有條理】的目的。對于初級設(shè)計(jì)者盡量只使用一種對齊方式：全

3、部左對齊&全部右對齊&全部居中對齊，避免混合使用多種文本對齊方式。根據(jù)對齊的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下。圖片3利用對齊原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息 相比較圖片2，同樣能在不看具體的文字信息，讀者可以清晰知曉所有的內(nèi)容被劃分為4個(gè)模塊，每個(gè)模塊有對應(yīng)的文字和圖片。但是卻比圖片2閱讀起來更輕松舒適，讓用戶有深度了解的欲望。三、對比原則&重復(fù)原則對比原則指的是 頁面上不同獨(dú)立項(xiàng)之間要有強(qiáng)烈的視覺對比效果，且能表達(dá)出不同獨(dú)立項(xiàng)之間有組織有結(jié)構(gòu)層次的關(guān)系。最終達(dá)到【增強(qiáng)頁面的視覺吸引力的同時(shí)，更科學(xué)地組織信息結(jié)構(gòu)】的目的。對比維度有很多，例如 字體，顏色，大小

4、，形狀等等。如果使用對比，就要加大對比的力度，例如深灰和淺灰色的對比遠(yuǎn)不如橙紅色和水綠色對比效果好。重復(fù)原則指的是 設(shè)計(jì)的某些方面需要在頁面中重復(fù)，讀者能看到任何方面都可以作為重復(fù)元素，例如顏色、符號、字體形式等等。重復(fù)可以將一些獨(dú)立項(xiàng)關(guān)聯(lián)起來，從而實(shí)現(xiàn)【統(tǒng)一且增強(qiáng)視覺效果】。根據(jù)對比&重復(fù)的設(shè)計(jì)原則，經(jīng)過排版的更改，優(yōu)化之后的圖片如下：圖片4利用對比&重復(fù)原則優(yōu)化之后的圖片看完圖片什么感覺吶？掃一眼得到的信息 相比較圖片3，讀者能直接清晰的知道內(nèi)容為春夏秋冬的詩句&詩句的說明&詩句對應(yīng)的圖片，并且讀者的焦點(diǎn)直接聚集在4句詩句上，激發(fā)了用戶的閱讀興趣。具體的調(diào)整是 每個(gè)模塊的詩句和下面的說明有字體類型、字體大小、字體顏色的對比，但是不同模塊下詩句的字體類型&字體的大小，詩句說明的字體類型&字體大小又是重復(fù)的。利用設(shè)計(jì)的四大原則親密性、對齊、對比、重復(fù)，從圖1逐步優(yōu)化到圖4，很明顯能感覺到用戶在閱讀舒適的情況下 在極短的時(shí)間內(nèi)迅速GET到圖片要表達(dá)的內(nèi)容，激發(fā)了繼續(xù)閱讀的欲望。其實(shí)這4大原則在PM設(shè)計(jì)原型時(shí)經(jīng)常被大家有意識(shí)或者無意識(shí)地用到。但是為了使我們設(shè)計(jì)的原型看起來更高大上，和交互設(shè)計(jì)師&UI設(shè)計(jì)師溝通起來更順暢，應(yīng)該在平時(shí)的工作溝通中有意識(shí)地去按照這4大原則進(jìn)行具體的排版工作。如果有