有声,怎样写网络小说,小说网

前面的視覺(jué)體系和大家簡(jiǎn)單提到過(guò)傳統(tǒng)平面排版的四大原則：親密性、對(duì)比、重復(fù)、對(duì)齊。那界面排版有什么原則呢？今天菜心就來(lái)用實(shí)例分享一下界面排版中需要注意哪些原則。

大綱如下：

一、親密原則

二、對(duì)比原則

三、平衡原則

四、相似原則

一、親密原則

空間上接近的內(nèi)容，我們更容易將之歸類到一組，這就是我們所說(shuō)的親密原則?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)站設(shè)計(jì)

如下圖：

我們很容易將唐僧、孫悟空、沙僧分成一組，而將豬八戒單獨(dú)分離出來(lái)，因?yàn)榍叭唠x的更近。

我們來(lái)看下面這張圖：

你能分清標(biāo)題是屬于上面還是下面嗎？

當(dāng)你了解了親密原則后，就知道為什么分不清，這也就是我們學(xué)習(xí)理論知識(shí)的原因，當(dāng)我們看到錯(cuò)誤的設(shè)計(jì)時(shí)，可以說(shuō)出哪里不對(duì)，而不是憑感覺(jué)?！?a href="http://pgwc.com.cn" target="_self">重慶網(wǎng)頁(yè)設(shè)計(jì)

那這個(gè)原則如何運(yùn)用到我們界面設(shè)計(jì)上呢？

看下圖：

上圖是簡(jiǎn)書(shū)文章列表中的一條，我們?cè)谄綍r(shí)工作中也經(jīng)常會(huì)遇到這種信息排版。首先我們需要清楚，上圖的內(nèi)容有三個(gè)：上分割線、內(nèi)容區(qū)和下分割線。此時(shí)我們可以判斷，內(nèi)容區(qū)內(nèi)的所有間距一定小于內(nèi)容區(qū)與分割線的間距，因?yàn)楦鶕?jù)親密性原則，有關(guān)聯(lián)的內(nèi)容會(huì)離的更近，內(nèi)容區(qū)的內(nèi)容相對(duì)分割線來(lái)說(shuō)，就是關(guān)聯(lián)性比較強(qiáng)的，所以它們的間距就會(huì)相對(duì)較小。

這樣的間距規(guī)律還可以讓我們清晰的區(qū)分開(kāi)每一條信息，不會(huì)導(dǎo)致信息干擾。

親密性原則是我們?cè)诮缑媾虐嬷凶畛Ｓ玫脑瓌t之一，大家一定要牢牢的記住并大量實(shí)踐，為我們后期的排版設(shè)計(jì)打下堅(jiān)實(shí)的基礎(chǔ)！——重慶定制網(wǎng)站

二、對(duì)比原則

我們經(jīng)常會(huì)遇到界面看著混亂的情況，但又不知道為什么，其實(shí)大部分情況都是因?yàn)榻缑鎯?nèi)容對(duì)比不明顯而造成的。

例如下圖：

雖然上圖符合親密原則，但似乎看著還是有些凌亂，其中一個(gè)很重要的原因就是因?yàn)榻缑嫘畔?nèi)容的對(duì)比不夠強(qiáng)烈，我們不知道該看哪里！——網(wǎng)站設(shè)計(jì)

而我們來(lái)看一下今日頭條的信息排版：

你會(huì)發(fā)現(xiàn)重要信息和次要信息的大小對(duì)比非常強(qiáng)烈，使我們聚焦在主要信息（標(biāo)題）上，這樣看著就不會(huì)那么散亂。

看完這個(gè)排版后再去解決上面那個(gè)散亂的問(wèn)題，會(huì)不會(huì)更容易些呢？大家不妨自己嘗試排一下，這樣會(huì)讓你的印象更加深刻。

我們平時(shí)也要多去研究一些排版，好的排版你需要去分析它為什么好，不好的排版你需要分析它為什么不好，你能否排的更好，只有通過(guò)這樣不斷地刻意練習(xí)，你才能扎扎實(shí)實(shí)的前進(jìn)。

回到正題，其實(shí)關(guān)于對(duì)比的方式還遠(yuǎn)不止大小層面，還有顏色對(duì)比、粗細(xì)對(duì)比、形狀對(duì)比、疏密對(duì)比等等，所以大家在進(jìn)行對(duì)比排版的時(shí)候，不妨多維度考慮，一定可以找到合適的解決方案。

三、平衡原則

平衡原則是界面排版布局的首要原則，大到整個(gè)官網(wǎng)，小到一張圖文，都需要我們對(duì)視覺(jué)平衡有一個(gè)良好的把控?！?a href="http://pgwc.com.cn" target="_self">定制網(wǎng)站

舉幾個(gè)例子：

看上圖，我們可以發(fā)現(xiàn)，圖片下方的文字是左對(duì)齊，為了達(dá)到視覺(jué)上的平衡，設(shè)計(jì)師將VIP 圖標(biāo)和更新集數(shù)放在圖片右側(cè)?！?a href="http://pgwc.com.cn" target="_self">網(wǎng)站設(shè)計(jì)

再來(lái)看下圖：

我們會(huì)感覺(jué)整個(gè)頁(yè)面怪怪的，好像在向右上角傾斜，就是因?yàn)闆](méi)有遵循平衡原則，而當(dāng)我們將最下方的按鈕移動(dòng)到右側(cè)時(shí)，如下圖：

整個(gè)頁(yè)面看著就會(huì)平衡很多。

這里需要注意一點(diǎn)，一些藝術(shù)類的海報(bào)排版為了達(dá)到某些效果，可能會(huì)有意打破平衡，但那是特殊的平面藝術(shù)設(shè)計(jì)，而對(duì)于我們UI設(shè)計(jì)來(lái)說(shuō)，在進(jìn)行界面排版的時(shí)候，大多數(shù)情況還是要遵循平衡原則，這樣才能讓用戶感覺(jué)整個(gè)界面更加協(xié)調(diào)、舒服。