當(dāng)看到一個(gè)產(chǎn)品的視覺效果時(shí)，我們通常能很快地判斷出它是吸引人的還是哪兒有點(diǎn)不對(duì)勁。但是，很少有人能接著說出來為什么這樣設(shè)計(jì)的原因。

本文定義了影響UX的5條實(shí)用法則：

1. 比例

2. 視覺層級(jí)

3. 平衡

4. 對(duì)比

5.格式塔原則

遵循以下5條設(shè)計(jì)法則可以創(chuàng)造出全面周到的視覺效果，推動(dòng)用戶的參與度并提高可用性。

01 比例

定義：比例原則是指在布局中使用相對(duì)大小來展示設(shè)計(jì)元素的重要性和層級(jí)的優(yōu)先關(guān)系。

正確使用此原理最簡單的方式是，最重要的設(shè)計(jì)元素的尺寸要比不重要的元素大。原因很簡單，大的事物更能引起用戶的注意。在停車場中，當(dāng)前所在停車區(qū)域往往會(huì)突出顯示，這樣做的目的是加深用戶的記憶，方便回來取車。

良好的視覺設(shè)計(jì)通常使用不超過三種不同的尺寸。擁有一系列大小不同的設(shè)計(jì)元素，不僅能在排版上創(chuàng)造出多樣性，而且還能在頁面上建立視覺層級(jí)結(jié)構(gòu)。

確保最大程度地強(qiáng)調(diào)設(shè)計(jì)中最重要的部分，幫助用戶理解如何使用它。例如在Medium中，熱門文章在視覺上比其他文章更大。

02 視覺層級(jí)

定義：視覺層級(jí)的原理是指在布局中，按照元素的重要性排序來引導(dǎo)用戶的注意力。

視覺層級(jí)可以通過比例，顏色，間距，位置和其他各種信號(hào)的變化來實(shí)現(xiàn)。同時(shí)它也控制用戶最終的體驗(yàn)。如果很難確定頁面布局的具體位置，則很可能是其布局缺少清晰的視覺層級(jí)。

要?jiǎng)?chuàng)建清晰的視覺層級(jí)結(jié)構(gòu)，請使用2–3種字體大小來向用戶展示頁面最重要的信息。或者對(duì)重要的內(nèi)容使用明亮的顏色標(biāo)注，對(duì)次要內(nèi)容使用柔和的顏色。在Medium中，標(biāo)題、副標(biāo)題、正文具有清晰的視覺層級(jí)，文章每部分的字體大小都和其重要性相對(duì)應(yīng)。

比例的大小也可以幫助定義視覺層級(jí)，因此可以針對(duì)不同設(shè)計(jì)元素進(jìn)行各種比例的組合，一般的設(shè)計(jì)經(jīng)驗(yàn)是包含大、中、小三種設(shè)計(jì)組件。Uber中的視覺層級(jí)結(jié)構(gòu)就很清晰。地圖和輸入框?qū)Π敕珠_，輸入框上的灰色的背景引導(dǎo)用戶進(jìn)行下一步操作。

03 平衡

定義：平衡原則是指對(duì)設(shè)計(jì)元素進(jìn)行滿意的排列和比例設(shè)置。當(dāng)屏幕兩側(cè)存在分布相同（不一定對(duì)稱）的視覺元素時(shí)，就會(huì)達(dá)到平衡。在設(shè)計(jì)時(shí)元素所占的面積在創(chuàng)建平衡時(shí)也很重要，而不僅僅是元素的數(shù)量。

平衡的布局可以是：

對(duì)稱：元素相對(duì)于中心線對(duì)稱分布

不對(duì)稱：元素相對(duì)于中心線不對(duì)稱分布

徑向：元素從中心的公共點(diǎn)放射分布

在設(shè)計(jì)中使用什么樣的布局取決于想要傳達(dá)的內(nèi)容。對(duì)稱的布局安靜而穩(wěn)定，例如The Hub Style Exploration的界面展現(xiàn)了穩(wěn)定的對(duì)稱布局。

不對(duì)稱的布局是動(dòng)態(tài)的并且引人入勝，創(chuàng)造了一種活力和動(dòng)感。Nike的設(shè)計(jì)布局，顯示出與品牌相稱的具有運(yùn)動(dòng)感的不對(duì)稱的布局。

而徑向的布局始終將用戶的注意力引向視覺中心，Brathwait手表在徑向上保持平衡，所以注意力立即被吸引到表盤的中心。

04 對(duì)比

定義：對(duì)比原理別。是指將視覺上不同的元素并列排布，以傳達(dá)這些元素不同的功能類別。換句話說，對(duì)比為用戶提供了不同對(duì)象在大小或顏色上的明顯差異。

對(duì)比原則通常利用顏色來進(jìn)行分辨。例如，在UI設(shè)計(jì)中紅色通常代表刪除，而綠色代表同意或繼續(xù)。換句話說，對(duì)比為用戶提供了不同對(duì)象在大小或顏色上的明顯差異。

通常在UX中說起對(duì)比度，我們會(huì)想到文字與其背景之間的對(duì)比。有時(shí)設(shè)計(jì)人員會(huì)故意降低文字的對(duì)比度，用來表示不太重要的內(nèi)容。

但是在降低文字對(duì)比度的同時(shí)文字的可讀性也會(huì)降低，這會(huì)導(dǎo)致用戶無法看清文字內(nèi)容。在Greenhouse Juice的包裝上，瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對(duì)比強(qiáng)，可讀性比較好，但是淺色果汁瓶身上的文字幾乎無法識(shí)別。

05 格式塔原理

定義：格式塔原理解釋了人類如何簡化和組織由許多元素組成的復(fù)雜圖像，通過下意識(shí)的將各個(gè)部分安排到一個(gè)有組織的系統(tǒng)中，而不是將它們解釋為一系列不同的元素。

格式塔原理指出了我們傾向于感知整體而不是個(gè)體元素。在NBC徽標(biāo)中，中間空白處并沒有孔雀，但我們的大腦卻能自動(dòng)填補(bǔ)空缺的部分，感覺到孔雀的存在。

在Uber的注冊頁面中，字段標(biāo)簽靠近其相應(yīng)的文本框，這樣能輕松理解需要在哪些文本框中輸入信息。

總結(jié)

除了使某些東西看起來“漂亮”之外，理解和利用這些法則還有助于：

1. 增加可用性。遵循這些視覺設(shè)計(jì)原則能夠設(shè)計(jì)出易于使用的頁面布局。

2. 激發(fā)積極情感。美好的事物會(huì)引發(fā)積極的情緒。美學(xué)-可用性效應(yīng)表明，當(dāng)人們發(fā)現(xiàn)外觀上具有吸引力的設(shè)計(jì)時(shí)，可能會(huì)對(duì)設(shè)計(jì)的可用性更寬容。

3. 增強(qiáng)品牌認(rèn)知度。強(qiáng)大的視覺系統(tǒng)可以幫助建立用戶對(duì)產(chǎn)品的信任和興趣。

文章來源：站酷  作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)( m.wtxcl.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)