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