這是很多新手設(shè)計(jì)師容易犯的問題。

從視覺傳達(dá)的角度來講，優(yōu)秀的界面設(shè)計(jì)必須準(zhǔn)確的傳達(dá)信息；傳達(dá)的信息不準(zhǔn)確，觀眾就無法理解我們。
我們做設(shè)計(jì)必須要有明確的目的，必須要準(zhǔn)確的傳達(dá)信息、幫助玩家在界面中找到策劃想突出的內(nèi)容，這才是設(shè)計(jì)的意義。
舉個(gè)例子，如杜尚的《小便池》，好吧其實(shí)這個(gè)作品名叫《泉》，但這玩意就是個(gè)小便池，它出現(xiàn)的意義就是現(xiàn)代派藝術(shù)為了追求標(biāo)新立異，用藝術(shù)形式去表達(dá)他們的態(tài)度；所以這個(gè)“小便池”它是個(gè)藝術(shù)形態(tài)；

看到這里小伙伴們Get到了點(diǎn)沒，也就是說設(shè)計(jì)的意義是滿足需求，在滿足產(chǎn)品最基本功能的基礎(chǔ)上，去做到溢出價(jià)值；而不是孤芳自賞，不要有“不要你覺得我要我覺得”的態(tài)度，最后我們要達(dá)到一定的商業(yè)目的，滿足一定的用戶需求，才是設(shè)計(jì)的本質(zhì)；

一張好看的界面構(gòu)圖是合理的安排視覺元素與美感法則來表現(xiàn)的。其中視覺元素包括色彩，信息，空間和光影等。

界面排版需要處理文字與圖片的關(guān)系。接下來從幾個(gè)方面，我們通過分析一些二次元和扁平的游戲界面強(qiáng)排版的設(shè)計(jì)，讓我們對于界面排版有更深的認(rèn)識(shí)。

一? 圖版率在界面中的運(yùn)用

圖版率，乍一看好像是高深莫測東西，感覺有點(diǎn)意思，有點(diǎn)不明覺厲喲。

但說白了就是，圖片在版面中所占的比例。

再直白點(diǎn)，就是圖片大小。

上面兩張圖，2-1信息比較多，背景圖片也不少；而2-2圖片視覺中心比較明顯，信息主體一目了然。同樣下圖也是：

注意：

圖版率可不是指單個(gè)圖片的占比喲，

而是指，所有圖片加起來的占比。

1.圖版率越大，表現(xiàn)力&親和力就越強(qiáng)。

2.圖版率越小，格調(diào)感&枯燥感就越強(qiáng)。

其實(shí)這兩條，上面的例子已經(jīng)能說明啦。

圖版率增加了，

沉浸感更強(qiáng)烈了，

表現(xiàn)力自然就更強(qiáng)了。

所以這種有格調(diào)的，高冷的，咱就可以用低圖版率。但圖版率越低，版面的枯燥感就會(huì)越強(qiáng)，上圖這個(gè)就有點(diǎn)負(fù)面了。

那么問題就來了：

圖版率很低，怎么搞才能不枯燥呢？

答案是通過不同文字層級、大小對比，不同字體來營造趣味性。

以上界面，都是在圖片較少，以信息為主的功能型界面，但是運(yùn)用“格式塔原理”來讓界面具有秩序和韻律感。

二? 格式塔原理

說到這里，有童鞋會(huì)不明白何為格式塔原理，“格式塔”源自德語“Gestalt”，意即“整體”、“完形”。簡單來講，就是人類的視覺是一個(gè)整體，眼睛所看到的事物都是經(jīng)過大腦整體化處理，所以我們是以整體形式感知事物而不是個(gè)體元素。

而我們通常講的功能成組，界面層次清晰也是基于格式塔原理的。

格式塔原理有以下幾個(gè)：接近性原理、形似性原理、連續(xù)性原理、封閉性原理、對稱性原理、主體/背景原理等。而前三個(gè)在界面中運(yùn)用最廣泛也最基礎(chǔ)。下面將分開闡述：

1.1 接近與信息關(guān)聯(lián)性

何為接近原則？即我們視覺會(huì)把彼此接近的元素看成一個(gè)整體。所以在排版的時(shí)候我們可以將相關(guān)聯(lián)的元素彼此接近，不相關(guān)的元素彼此遠(yuǎn)離，以此來區(qū)分不同的信息集。

建立不同組合的方式有很多種，但是以接近性原則最為基礎(chǔ)和重要。即便每個(gè)元素的顏色形狀不同，但只要彼此接近，也能夠在視覺上形成一組。

那么接近原則在版面中是如何運(yùn)用的呢？其實(shí)就是將相關(guān)聯(lián)的信息彼此靠近，不相關(guān)的信息彼此遠(yuǎn)離的過程。

上圖信息量比較多，但是做到了功能模塊清晰，一目了然，充分運(yùn)用了接近性原理。

1.2 相似與面板統(tǒng)一性

接近性原則強(qiáng)調(diào)的是位置對我們視覺的影響，而相似性原則強(qiáng)調(diào)視覺元素的內(nèi)容對視覺的影響，如顏色、形狀、大小、方向等等。如果其他因素一樣，只有這些內(nèi)容不同，那么我們的視覺會(huì)把相似的內(nèi)容看成一個(gè)整體。

在同一組圖形中，顏色或者形狀相似的元素會(huì)形成一個(gè)視覺單元。

同樣的原理，在一組圖形中大小或方向相似的元素也會(huì)形成一個(gè)視覺單元。

那么相似性原理在界面上是如何去運(yùn)用的？

具體看看界面：

1.3 連續(xù)性原則與視覺邏輯

我們的視覺更容易感知到連續(xù)的事物，使之成為一個(gè)整體。

以上圖而言，雖然全部是虛線的點(diǎn)，但我們依然可以辨認(rèn)出他們的幾何形狀。

就算是分割開的圖片，我們依然能夠識(shí)別其內(nèi)容，所以我們的視覺是連續(xù)性的。

為解決這個(gè)問題，我們可以加入其它元素，建立連續(xù)性。

通過線條的穿插表現(xiàn)，我們的視覺得到了很好的引導(dǎo)，解決了不知按什么順序閱讀的問題。另外線條使四個(gè)點(diǎn)連成了一個(gè)整體，點(diǎn)與點(diǎn)之間具備了連續(xù)性，散亂的問題也得到了很好的解決。
接下來繼續(xù)觀察界面：

線條的走向也會(huì)對我們的閱讀順序產(chǎn)生重大的影響。視覺上我們一般默認(rèn)從左往右閱讀，線條的指向性讓我們的視覺更加集中。

這里最后一張圖，除了明顯的線條指引，界面里還有大量的空間留白，也同樣讓我們的界面信息更加集中。

從這里，我們發(fā)現(xiàn)了留白的好處！

三? 留白的運(yùn)用

先看兩張界面：

從以上兩張界面來看：

留白越小，越活潑，越親和，促銷感越強(qiáng)；留白越大，越安靜，主體信息越突出。

從上面兩張留白較多的界面，我們能看出來適當(dāng)?shù)牧舭滓彩亲尳缑孀兊酶呒壍谋憩F(xiàn)技巧~

四??跳躍率的靈活使用

跳躍率是平面設(shè)計(jì)里比較專業(yè)的一種名詞，具體是指元素之間的大小對比。而界面里的跳躍率具體分為文字跳躍率和圖片跳躍率。

?

4.1?文字跳躍率

文字跳躍率就是界面中最大與最小字體的對比。

繼續(xù)看圖：

上面兩張圖的文字大小差異較大，界面文字較為激烈活潑，給人活力的感覺；第三張界面字體差異不大，更加適合段落文章內(nèi)容性閱讀~

同時(shí)，文字的跳躍率低，也給人以精致，有品質(zhì)的感覺。

4.2?圖片跳躍率

同樣，圖片的跳躍率是指界面里最大圖片與最小圖片的大小差異對比。

圖片跳躍率越高，界面視覺沖擊力越強(qiáng)；圖片跳躍率越低，界面更精致、更穩(wěn)定！

五? 總結(jié)

界面排版不是為美觀服務(wù)，而是為內(nèi)容服務(wù)。

不要為了美觀而忽略了“可讀性”的本質(zhì)問題。

風(fēng)格本身是木有好壞，

根據(jù)項(xiàng)目選擇合適的風(fēng)格，

再根據(jù)風(fēng)格設(shè)置相應(yīng)的圖版率、跳躍率、留白等要素，

才是咱這篇文章的奧義所在。

所以鴨所以，

根據(jù)主觀喜好來爭論界面好壞，Duck不必~