作為UI設(shè)計(jì)師，如何讓界面有規(guī)律有節(jié)奏去展示信息內(nèi)容？今天分享你的這6個(gè)技巧或許可以幫助到你！
一.親密原則
設(shè)計(jì)前對(duì)內(nèi)容進(jìn)行信息分層，屬于一個(gè)層級(jí)分為一組，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近，這樣的間距規(guī)律還會(huì)讓我們清晰的區(qū)分開每一條信息，不會(huì)導(dǎo)致信息干擾。
我們很容易將1、2分成一組，而將3、4分成一組，因?yàn)?、2離的更近。
圖中內(nèi)容有三個(gè)模塊：上間距、內(nèi)容區(qū)域、下間距，因此我們可以判斷內(nèi)容區(qū)內(nèi)間距一定小于上下間距，因?yàn)楦鶕?jù)親密性原則，有關(guān)聯(lián)內(nèi)容會(huì)離的更近，標(biāo)題和價(jià)格又分為2個(gè)模塊，其中價(jià)格優(yōu)惠之間信息屬于一個(gè)內(nèi)容，所以他們間距相對(duì)就比較小。
?（左圖）我們就無法弄清楚標(biāo)題是區(qū)分上面圖片還是下面圖片
?（右圖）我們采用親密原則，將1.2放一起，加上間距區(qū)分上下文關(guān)系
二.對(duì)比原則
重要信息和次要信息通過顏色對(duì)比、粗細(xì)對(duì)比、形狀對(duì)比、疏密對(duì)比、大小對(duì)比使我們聚焦在我們需要關(guān)注的信息上，在進(jìn)行對(duì)比排版的時(shí)候，需要多維度考慮，找到合適的解決方案。
這些app都是通過字號(hào)、粗細(xì)以及間距大小通過對(duì)比原則來區(qū)分信息和信息之間關(guān)系,讓整個(gè)頁(yè)面動(dòng)線看起來更加流暢閱讀節(jié)奏舒適。
?（左圖）雖然運(yùn)營(yíng)了親密原則但是看起來還是很混亂。原因是界面信息內(nèi)容看起來對(duì)比不強(qiáng)烈
?（右圖）重要信息和次要信息對(duì)比強(qiáng)烈，通過大小，自重突出標(biāo)題信息讓用戶焦點(diǎn)聚焦在標(biāo)題
三.平衡原則
平衡原則是界面排版布局的首要原則，大到整個(gè)官網(wǎng)，小到一張圖文，都需要我們對(duì)頁(yè)面視覺平衡有一很好節(jié)奏控制。
?Fancy為了避免左側(cè)行動(dòng)點(diǎn)過多不平衡，設(shè)計(jì)師采用分享按鈕放置于頁(yè)面右側(cè)達(dá)到左右平衡
?Pinterest為了保持平衡，Pin在feed設(shè)計(jì)上，保持了頭像左視覺焦點(diǎn)，右側(cè)入口按鈕互相平衡
?ebay為了避免信息過于偏平衡，設(shè)計(jì)師在列表設(shè)計(jì)時(shí)候采用加大右側(cè)信息間距以及顏色自重來保持平衡
?嚴(yán)選在設(shè)計(jì)時(shí)候?yàn)榱吮３衷O(shè)計(jì)平衡在標(biāo)題上面兩側(cè)加上線條讓頁(yè)面更加舒適
四.相似原則
?Fancy在頁(yè)面中所有和點(diǎn)擊相關(guān)的無論氣泡還我按鈕還是鏈接都采用品牌藍(lán)色作為行動(dòng)點(diǎn)
?Airbnb頁(yè)面中，只要是可以點(diǎn)擊的都是綠色文字
?ebay的頁(yè)面中所有能操作的頁(yè)面、按鈕、圖標(biāo)、行動(dòng)點(diǎn)全部采用藍(lán)色做為行動(dòng)點(diǎn)
?Facebook頁(yè)面中，能點(diǎn)擊的圖標(biāo)、文字按鈕都是灰藍(lán)色來協(xié)調(diào)統(tǒng)一
五.簡(jiǎn)單原則
注意sketch中對(duì)齊產(chǎn)生小數(shù)點(diǎn)，尤其是位置，經(jīng)常我們執(zhí)行過程中不愛看圖層和大小，會(huì)導(dǎo)致位置的數(shù)值經(jīng)常出現(xiàn)小數(shù)點(diǎn)或者奇數(shù)，從而使整個(gè)界面元素的間距、位置都不夠規(guī)范，如下圖：
1.數(shù)字簡(jiǎn)單
?（左圖）很容易產(chǎn)生小數(shù)點(diǎn)，間距的小數(shù)點(diǎn)，從而會(huì)讓頁(yè)面不嚴(yán)謹(jǐn)
?（右圖）正確做法對(duì)齊每個(gè)像素，位置
2.規(guī)則簡(jiǎn)單
平面設(shè)計(jì)的經(jīng)驗(yàn)中，一張平面設(shè)計(jì)的字體種類不宜太多、對(duì)齊方式不宜太多.....因?yàn)橐?guī)則太過繁瑣會(huì)讓設(shè)計(jì)變得復(fù)雜，甚至臃腫不堪。而界面設(shè)計(jì)師也是一樣的，能用一個(gè)規(guī)則解決的問題，就盡量不要使用兩個(gè)
?間距規(guī)則簡(jiǎn)單一致，復(fù)用
?間距規(guī)則統(tǒng)一
?由于親密原則，我們知道上下間距（紅色高度）一定大于內(nèi)容區(qū)間距（綠色高度），但是為了規(guī)則的簡(jiǎn)潔內(nèi)容區(qū)的所有間隔（綠色高度）可以采用同一個(gè)規(guī)則，而上下間距（紅色高度）也可以相同，這樣四個(gè)距離，我們僅僅只用了兩個(gè)規(guī)則就解決了問題，F(xiàn)acebook為了保持頁(yè)面關(guān)系簡(jiǎn)潔，間距都采用一個(gè)規(guī)則解決，并且不失美感。
?（左圖）4個(gè)間距規(guī)則,繁瑣缺乏統(tǒng)一
?（右圖）簡(jiǎn)化規(guī)則，從4個(gè)調(diào)整為2個(gè)
?（左圖）優(yōu)化前間距規(guī)則冗余
?（右圖）簡(jiǎn)單規(guī)則優(yōu)化后簡(jiǎn)單統(tǒng)一
3.樣式簡(jiǎn)單
今年流行一個(gè)趨勢(shì)就是“無線化分隔”。將分隔線去掉，這就一種樣式上的簡(jiǎn)潔，這種技法分場(chǎng)景使用。
?韓國(guó)29CM、Airbnb,Pinterest都采取了這種簡(jiǎn)潔的分隔樣式，這樣的排版方法使整個(gè)頁(yè)面看著輕量、干凈、大氣，更加突出內(nèi)容，甚至能夠增加用戶的欣賞時(shí)間。
4.起伏邊緣簡(jiǎn)單
起伏邊是一段文字的邊緣。當(dāng)視線從行尾跳至下一行首時(shí)，大腦最好要能判斷出下一次跳躍的角度和距離把每次跳躍都想象成跑過跳板，如果間距保持一致，就會(huì)快很多。
?在英文的段落排版中，通常是左側(cè)對(duì)齊，而讓右側(cè)自然形成起伏邊（rag）eaby和谷歌做法保持左右邊緣對(duì)齊，方便閱讀，網(wǎng)易新聞也是采用左右兩側(cè)對(duì)齊，比較協(xié)調(diào)。
?（左圖）右側(cè)鋸齒嚴(yán)重
?（右圖）左右兩側(cè)對(duì)齊，減少鋸齒
?（左圖）右側(cè)鋸齒嚴(yán)重參差不齊
?（右圖）左右兩側(cè)對(duì)齊，減少鋸齒
六.封閉原則
將兩個(gè)部分的內(nèi)容用線框封閉起來后，就可以更容易的區(qū)分二者了。在我們的移動(dòng)端界面排版時(shí)，最常使用的封閉表現(xiàn)形式就是“卡片”，用來區(qū)分各部分獨(dú)立的信息
?同一組信息用卡片封閉
?（左圖）這張列表，由于間隔和顏色的原因，導(dǎo)致我們更傾向于縱向閱讀，這時(shí)候我們也可以使用封閉原則，將內(nèi)容封閉起來
?（右圖）使用封閉原則，將內(nèi)容封閉起來（每隔一條信息使用深色背景）這樣，不僅可以讓我們傾向于橫向閱讀，而且可以更好的區(qū)分開每條獨(dú)立的信息內(nèi)容。
設(shè)計(jì)策略
親密原則：先對(duì)內(nèi)容進(jìn)行信息分層，屬于一個(gè)層級(jí)分為一組，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近。
對(duì)比原則：通過顏色對(duì)比、粗細(xì)對(duì)比、形狀對(duì)比、疏密對(duì)比，大小對(duì)比使我們聚焦在我們需要關(guān)注的信息上，在進(jìn)行對(duì)比排版的時(shí)候，需要多維度考慮。
平衡原則：平衡原則是界面排版布局的首要原則，大到整個(gè)官網(wǎng)，小到一張圖文，都需要我們對(duì)頁(yè)面視覺平衡有一很好節(jié)奏控制。
相似原則：對(duì)相似的內(nèi)容賦予相同的屬性，例如同一級(jí)別的標(biāo)題文字大小相同，相同顏色(如藍(lán)色等)的字體都可以點(diǎn)擊等等，相似原則的因素也不只有文字顏色，還有背景色、方向、大小等等。
簡(jiǎn)單原則：對(duì)頁(yè)面所有元素避免小數(shù)點(diǎn)，頁(yè)面間距規(guī)則簡(jiǎn)單通用，視覺樣式輕量化，無線化分割，同時(shí)注意頁(yè)面右邊邊緣對(duì)齊。
封閉原則：用于區(qū)分兩個(gè)獨(dú)立的模塊部分時(shí)候一般采用封閉原則，封閉原則一般使用卡片、線框或間隔的顏色來封閉內(nèi)容。
