2022-5-5 純純
當(dāng)看到一個產(chǎn)品的視覺效果時，我們通常能很快地判斷出它是吸引人的還是哪兒有點(diǎn)不對勁。但是，很少有人能接著說出來為什么這樣設(shè)計的原因。
本文定義了影響UX的5條實(shí)用法則：
1. 比例
2. 視覺層級
3. 平衡
4. 對比
5.格式塔原則
遵循以下5條設(shè)計法則可以創(chuàng)造出全面周到的視覺效果，推動用戶的參與度并提高可用性。
01 比例
定義：比例原則是指在布局中使用相對大小來展示設(shè)計元素的重要性和層級的優(yōu)先關(guān)系。
正確使用此原理最簡單的方式是，最重要的設(shè)計元素的尺寸要比不重要的元素大。原因很簡單，大的事物更能引起用戶的注意。在停車場中，當(dāng)前所在停車區(qū)域往往會突出顯示，這樣做的目的是加深用戶的記憶，方便回來取車。
良好的視覺設(shè)計通常使用不超過三種不同的尺寸。擁有一系列大小不同的設(shè)計元素，不僅能在排版上創(chuàng)造出多樣性，而且還能在頁面上建立視覺層級結(jié)構(gòu)。
確保最大程度地強(qiáng)調(diào)設(shè)計中最重要的部分，幫助用戶理解如何使用它。例如在Medium中，熱門文章在視覺上比其他文章更大。
02 視覺層級
定義：視覺層級的原理是指在布局中，按照元素的重要性排序來引導(dǎo)用戶的注意力。
視覺層級可以通過比例，顏色，間距，位置和其他各種信號的變化來實(shí)現(xiàn)。同時它也控制用戶最終的體驗(yàn)。如果很難確定頁面布局的具體位置，則很可能是其布局缺少清晰的視覺層級。
要創(chuàng)建清晰的視覺層級結(jié)構(gòu)，請使用2–3種字體大小來向用戶展示頁面最重要的信息。或者對重要的內(nèi)容使用明亮的顏色標(biāo)注，對次要內(nèi)容使用柔和的顏色。在Medium中，標(biāo)題、副標(biāo)題、正文具有清晰的視覺層級，文章每部分的字體大小都和其重要性相對應(yīng)。
比例的大小也可以幫助定義視覺層級，因此可以針對不同設(shè)計元素進(jìn)行各種比例的組合，一般的設(shè)計經(jīng)驗(yàn)是包含大、中、小三種設(shè)計組件。Uber中的視覺層級結(jié)構(gòu)就很清晰。地圖和輸入框?qū)Π敕珠_，輸入框上的灰色的背景引導(dǎo)用戶進(jìn)行下一步操作。
03 平衡
定義：平衡原則是指對設(shè)計元素進(jìn)行滿意的排列和比例設(shè)置。當(dāng)屏幕兩側(cè)存在分布相同（不一定對稱）的視覺元素時，就會達(dá)到平衡。在設(shè)計時元素所占的面積在創(chuàng)建平衡時也很重要，而不僅僅是元素的數(shù)量。
平衡的布局可以是：
對稱：元素相對于中心線對稱分布
不對稱：元素相對于中心線不對稱分布
徑向：元素從中心的公共點(diǎn)放射分布
在設(shè)計中使用什么樣的布局取決于想要傳達(dá)的內(nèi)容。對稱的布局安靜而穩(wěn)定，例如The Hub Style Exploration的界面展現(xiàn)了穩(wěn)定的對稱布局。
不對稱的布局是動態(tài)的并且引人入勝，創(chuàng)造了一種活力和動感。Nike的設(shè)計布局，顯示出與品牌相稱的具有運(yùn)動感的不對稱的布局。
而徑向的布局始終將用戶的注意力引向視覺中心，Brathwait手表在徑向上保持平衡，所以注意力立即被吸引到表盤的中心。
04 對比
定義：對比原理別。是指將視覺上不同的元素并列排布，以傳達(dá)這些元素不同的功能類別。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
對比原則通常利用顏色來進(jìn)行分辨。例如，在UI設(shè)計中紅色通常代表刪除，而綠色代表同意或繼續(xù)。換句話說，對比為用戶提供了不同對象在大小或顏色上的明顯差異。
通常在UX中說起對比度，我們會想到文字與其背景之間的對比。有時設(shè)計人員會故意降低文字的對比度，用來表示不太重要的內(nèi)容。
但是在降低文字對比度的同時文字的可讀性也會降低，這會導(dǎo)致用戶無法看清文字內(nèi)容。在Greenhouse Juice的包裝上，瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對比強(qiáng)，可讀性比較好，但是淺色果汁瓶身上的文字幾乎無法識別。
05 格式塔原理
定義：格式塔原理解釋了人類如何簡化和組織由許多元素組成的復(fù)雜圖像，通過下意識的將各個部分安排到一個有組織的系統(tǒng)中，而不是將它們解釋為一系列不同的元素。
格式塔原理指出了我們傾向于感知整體而不是個體元素。在NBC徽標(biāo)中，中間空白處并沒有孔雀，但我們的大腦卻能自動填補(bǔ)空缺的部分，感覺到孔雀的存在。
在Uber的注冊頁面中，字段標(biāo)簽靠近其相應(yīng)的文本框，這樣能輕松理解需要在哪些文本框中輸入信息。
總結(jié)
除了使某些東西看起來“漂亮”之外，理解和利用這些法則還有助于：
1. 增加可用性。遵循這些視覺設(shè)計原則能夠設(shè)計出易于使用的頁面布局。
2. 激發(fā)積極情感。美好的事物會引發(fā)積極的情緒。美學(xué)-可用性效應(yīng)表明，當(dāng)人們發(fā)現(xiàn)外觀上具有吸引力的設(shè)計時，可能會對設(shè)計的可用性更寬容。
3. 增強(qiáng)品牌認(rèn)知度。強(qiáng)大的視覺系統(tǒng)可以幫助建立用戶對產(chǎn)品的信任和興趣。
文章來源：站酷 作者：Clippp
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( www.dzxscac.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
藍(lán)藍(lán)設(shè)計的小編 http://www.dzxscac.cn