本期《交互設想KASH系列》分享的是：版式設想道理的4大準繩。

前人云：“愛美之心，人皆有之”，更況且在此刻這個動不動就“顏值擔任”的互聯網環境下，產物的「顏值」明顯已成為產物構建進程中的關頭身分。

對交互設想師或是產物司理來講，固然產物的顏值并不禁咱們間接擔任，可是咱們任務的托付物——交互文檔/原型圖，在很大水平上須要必然的「顏值」，和較好的版式設想才能，來保障高效、精確地向高低游通報產物方針和交互計劃。

以是，我接上去將從「版式設想」的角度，前后分享版式設想的4大準繩和視覺動線，贊助大師去構建視覺設想的根本常識框架。

版式設想的黃金準繩

版式設想的方針是為了向用戶更好地抒發信息，并且將信息以更好地視覺結果顯現出來。版式設想道理冊本里有一本典范之作——《寫給大師看的設想書》。

書中先容的四大版式設想準繩（對齊、反復、對照、密切）便是為以上方針辦事的，好的設想常常也便是由于很好的知足這四大黃金準繩。

對齊

任何元素都不能在頁面上隨便擺放。每項都該當與頁面上的某個內容存在某種視覺接洽。差別的元素之間能夠距離遠近差別，能夠經由過程為差別的元素制作某種對齊來完成整潔有序。

雖然這些伶仃元素在頁面上的物理地位能夠并不接近，可是經由過程恰當安排，能夠讓它們看上去是有接洽并且相干的，并且與其余信息同一。一個精彩的設想不管最后看上去何等混亂無章，總能找出此中的對齊體例。

左側手刺上的元素就仿佛是隨便扔上去一樣，致使任一元素與手刺上其余元素看上去不聯系干系。

當咱們把統統元素都移至右邊，使它們按同一種體例對齊，此刻信息當即就更有層次了。

雖然在信息元素良多的信息列表頁，咱們也能找出良多對齊體例，這些對齊體例的組合，能夠讓頁面元素更有序高效的通報給用戶。比方上圖的知乎APP首頁。

反復

設想元素的表現情勢須要在全部頁面中反復。反復元素能夠是一種粗字體、一條粗線，某個名方針記、色彩、設想因素，某種格局、空間干系等。

反復有助于構造信息，這能夠贊助讀者瀏覽各個頁面。它有益于將設想中零丁的局部同一路來。即便在一個只要一頁的文檔中，反復元素也能夠成立一種持續性，將頁面「有序地構造在一路」。

在天貓APP>我的頁面，我的雙11、我的定單屬于以后頁面信息架構的第一層，以是邏輯上是并列的干系，這致使UI層面的表現情勢也極端類似和「反復」；同時，我的雙11、我的定單下包羅的信息元素在邏輯上也是并列干系，以是UI表現情勢也是遵守反復準繩。

對照

頁面上的差別元素之間要有對照結果，贊助讀者疾速捉拿到差別主要性的信息。對照對信息的構造相當主要，讀者一眼看到文檔就能夠當即懂得文檔的內容。要增添成心思的對照，最輕易的方式便是完成字體對照，還能夠操縱線、色彩、元素之間的距離、材質等構成對照。

仍是方才的頁面案例，在雙11的產物方針下，這個頁面須要將雙11主題凸起顯現，以是我的雙11、我的定單下的功效圖標UI氣概作了差同化處置，此中雙11的功效圖標比擬我的定單更具怪異性，方針是更好地通報功效按鈕進口面前的信息量和優惠勾當信息。

密切

密切準繩：將相干的項構造在一路，挪動這些項，使它們的物理地位彼此接近，如許一來，相干的項將被看做凝集為一體的一個組，而不再是一堆彼此有關的片斷。

咱們看下面的手刺案例，當你的眼睛看左側的手刺時，是否是停過5次？

這個手刺上安排了5項伶仃的內容。你是從那里起頭的？能夠是從中心，由于中心的短句字體最粗。接上去看甚么?

當咱們將同類信息密切地構造到一路后，瀏覽起來就會更輕松，也會更高效地懂得信息。

密切性的思惟并不是說統統統統都要更接近，其真實的寄義是：若是某些元素在懂得上存在聯系干系，或彼此之間存在某種干系，那末這些元素在視覺上也該當有聯系干系。