交互KASH系列丨版式設(shè)計(jì)的4大準(zhǔn)則本期《交互設(shè)計(jì)KASH系

本期《交互設(shè)計(jì)KASH系列》分享的是：版式設(shè)計(jì)原理的4大準(zhǔn)則。

古人云：“愛美之心，人皆有之”，更何況在如今這個(gè)動(dòng)不動(dòng)就“顏值擔(dān)當(dāng)”的互聯(lián)網(wǎng)環(huán)境下，產(chǎn)品的「顏值」顯然已成為產(chǎn)品構(gòu)建過程中的關(guān)鍵因素。

對(duì)于交互設(shè)計(jì)師或是產(chǎn)品經(jīng)理來說，雖然產(chǎn)品的顏值并不由我們直接負(fù)責(zé)，但是我們工作的交付物——交互文檔/原型圖，在很大程度上需要一定的「顏值」，以及較好的版式設(shè)計(jì)能力，來保證高效、準(zhǔn)確地向上下游傳遞產(chǎn)品目標(biāo)和交互方案。

所以，我接下來將從「版式設(shè)計(jì)」的角度，先后分享版式設(shè)計(jì)的4大原則和視覺動(dòng)線，幫助大家去構(gòu)建視覺設(shè)計(jì)的基礎(chǔ)知識(shí)框架。

版式設(shè)計(jì)的黃金準(zhǔn)則

版式設(shè)計(jì)的目的是為了向用戶更好地表達(dá)信息，并且將信息以更好地視覺效果呈現(xiàn)出來。版式設(shè)計(jì)原理書籍里有一本經(jīng)典之作——《寫給大家看的設(shè)計(jì)書》。

書中介紹的四大版式設(shè)計(jì)原則（對(duì)齊、重復(fù)、對(duì)比、親密）就是為以上目的服務(wù)的，好的設(shè)計(jì)往往也就是因?yàn)楹芎玫臐M足這四大黃金原則。

對(duì)齊

任何元素都不能在頁面上隨意擺放。每一項(xiàng)都應(yīng)當(dāng)與頁面上的某個(gè)內(nèi)容存在某種視覺聯(lián)系。不同的元素之間可能距離遠(yuǎn)近不同，可以通過為不同的元素制造某種對(duì)齊來實(shí)現(xiàn)整齊有序。

盡管這些孤立元素在頁面上的物理位置可能并不靠近，但是通過適當(dāng)放置，可以讓它們看上去是有聯(lián)系而且相關(guān)的，并且與其他信息統(tǒng)一。一個(gè)精美的設(shè)計(jì)不論最初看上去多么雜亂無章，總能找出其中的對(duì)齊方式。

左邊名片上的元素就好像是隨意扔上去一樣，導(dǎo)致任一元素與名片上其他元素看上去沒有關(guān)聯(lián)。

當(dāng)我們把所有元素都移至右側(cè)，使它們按同一種方式對(duì)齊，現(xiàn)在信息立刻就更有條理了。

盡管在信息元素很多的信息列表頁，我們也能找出很多對(duì)齊方式，這些對(duì)齊方式的組合，可以讓頁面元素更有序高效的傳遞給用戶。例如上圖的知乎APP首頁。

重復(fù)

設(shè)計(jì)元素的表現(xiàn)形式需要在整個(gè)頁面中重復(fù)。重復(fù)元素可能是一種粗字體、一條粗線，某個(gè)項(xiàng)目符號(hào)、顏色、設(shè)計(jì)要素，某種格式、空間關(guān)系等。

重復(fù)有助于組織信息，這可以幫助讀者瀏覽各個(gè)頁面。它有利于將設(shè)計(jì)中單獨(dú)的部分統(tǒng)一起來。即使在一個(gè)只有一頁的文檔中，重復(fù)元素也可以建立一種連續(xù)性，將頁面「有序地組織在一起」。

在天貓APP>我的頁面，我的雙11、我的訂單屬于當(dāng)前頁面信息架構(gòu)的第一層，所以邏輯上是并列的關(guān)系，這導(dǎo)致UI層面的表現(xiàn)形式也極度相似和「重復(fù)」；同時(shí)，我的雙11、我的訂單下包含的信息元素在邏輯上也是并列關(guān)系，所以UI表現(xiàn)形式也是遵循重復(fù)原則。

對(duì)比

頁面上的不同元素之間要有對(duì)比效果，幫助讀者快速捕捉到不同重要性的信息。對(duì)比對(duì)于信息的組織至關(guān)重要，讀者一眼看到文檔就能立即理解文檔的內(nèi)容。要增加有意思的對(duì)比，最容易的方法就是實(shí)現(xiàn)字體對(duì)比，還可以利用線、顏色、元素之間的間隔、材質(zhì)等形成對(duì)比。

還是剛剛的頁面案例，在雙11的產(chǎn)品目標(biāo)下，這個(gè)頁面需要將雙11主題突出顯示，所以我的雙11、我的訂單下的功能圖標(biāo)UI風(fēng)格作了差異化處理，其中雙11的功能圖標(biāo)相比我的訂單更具獨(dú)特性，目的是更好地傳遞功能按鈕入口背后的信息量和優(yōu)惠活動(dòng)信息。

親密

親密原則：將相關(guān)的項(xiàng)組織在一起，移動(dòng)這些項(xiàng)，使它們的物理位置相互靠近，這樣一來，相關(guān)的項(xiàng)將被看作凝聚為一體的一個(gè)組，而不再是一堆彼此無關(guān)的片段。