本期《交互設(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)鍵因素。

對于交互設(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è)計(jì)的黃金準(zhǔn)則

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

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

對齊

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

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

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

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

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

重復(fù)

設(shè)計(jì)元素的表現(xiàn)形式需要在整個(gè)頁面中重復(fù)。重復(fù)元素可能是一種粗字體、一條粗線，某個(gè)項(xiàng)目符號、顏色、設(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ù)原則。

對比

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

還是剛剛的頁面案例，在雙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)的片段。

我們看上面的名片案例，當(dāng)你的眼睛看左邊的名片時(shí)，是不是停過5次？

這個(gè)名片上放置了5項(xiàng)孤立的內(nèi)容。你是從哪里開始的？可能是從中間，因?yàn)橹虚g的短句字體最粗。接下來看什么?

當(dāng)我們將同類信息親密地組織到一起后，閱讀起來就會(huì)更輕松，也會(huì)更高效地理解信息。

親密性的思想并不是說所有一切都要更靠近，其真正的含義是：如果某些元素在理解上存在關(guān)聯(lián)，或者相互之間存在某種關(guān)系，那么這些元素在視覺上也應(yīng)當(dāng)有關(guān)聯(lián)。

微信讀書APP的發(fā)現(xiàn)頁，在「朋友們在讀」卡片UI表現(xiàn)形式上，書籍類信息被「親密」地組織到了上方，朋友/社交類信息被「親密」地組織到了下方。

寫在最后

1. 版式設(shè)計(jì)原理源于平面設(shè)計(jì)，但仍然適用于互聯(lián)網(wǎng)產(chǎn)品的UI設(shè)計(jì)，因?yàn)槎咴O(shè)計(jì)的目的都是將信息有效、有序、快速地傳遞給讀者和用戶。
2. 本文分析的版式設(shè)計(jì)原理的四大原則（對齊、重復(fù)、對比、親密），在實(shí)際運(yùn)用中并不是獨(dú)立的，而是需要互相配合，方可設(shè)計(jì)出不錯(cuò)的頁面。所以，如果我們多去觀察身邊的版式設(shè)計(jì)（雜志、網(wǎng)頁、APP…），你會(huì)發(fā)現(xiàn)這四大原則無處不在。

感謝你的閱讀，我們下期再見。

小插曲

我在參加人人都是產(chǎn)品經(jīng)理2019年度作者評選，希望喜歡我的文章的朋友都能來支持我一下~

點(diǎn)擊下方鏈接進(jìn)入我的個(gè)人參選頁面，點(diǎn)擊紅心即可為我投票。

每人最多可投10票哦，登陸了之后就有5票，投完之后可以點(diǎn)擊主頁的“再投5票”就有機(jī)會(huì)增加5張選票～

投票即有機(jī)會(huì)獲得百萬驚喜禮品&起點(diǎn)學(xué)院千元豪禮哦！

投票傳送門：http://996.pm/7d1vV

#專欄作家#

王晗陵，微信公眾號：設(shè)計(jì)意志（ID：D-Minder），人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注交互/UI設(shè)計(jì)領(lǐng)域及職場能力，擅長需求分析、用戶體驗(yàn)和原型設(shè)計(jì)。

關(guān)注公眾號「設(shè)計(jì)意志」，即可查看交互KASH全系列文章。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Unsplash，基于 CC0 協(xié)議