幫你改善產(chǎn)品UX設計的實用準則

比例、視覺層級、平衡、對比和格式塔的原則不僅帶來了精美的設計,在產(chǎn)品設計時也增加了可用性。

實用準則

當看到一個產(chǎn)品的視覺效果時,我們通??梢院芸斓嘏袛喑鏊俏说倪€是感覺有點不對勁。但是,很少有人能說出來為什么這個設計看起來很吸引人。

視覺設計原則告訴我們,線條、形狀、顏色、網(wǎng)格或空間等設計元素是如何結(jié)合在一起創(chuàng)造出全面而周到的視覺效果。

本文定義了影響UX的5條視覺設計原則:

1、比例

2、視覺層級

3、平衡

4、對比

5、格式塔原則

遵循以下5條視覺設計原則可以推動用戶的參與度并提高可用性。

01 比例

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

正確使用此原理最簡單的方式是,最重要的設計元素的尺寸要比不重要的元素大。原因很簡單,大的事物更能引起用戶的注意。

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

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

Medium

在停車場中,當前所在的停車區(qū)域往往會突出顯示,這樣做的目的是加深用戶的記憶,方便回來取車。

Parking Lot

02 視覺層級

定義:視覺層級的原理是指在布局中,按照元素的重要性排序來引導用戶的注意力。

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

要創(chuàng)建清晰的視覺層級結(jié)構(gòu),請使用2–3種字體大小來向用戶展示頁面最重要的信息。或者對重要的內(nèi)容使用明亮的顏色標注,對次要內(nèi)容使用柔和的顏色。

比例的大小也可以幫助定義視覺層級,因此可以針對不同設計元素進行各種比例的組合,一般的設計經(jīng)驗是包含大、中、小三種設計組件。

在Medium中,標題、副標題、正文具有清晰的視覺層級,文章每部分的字體大小都和其重要性相對應。

Medium

Uber中的視覺層級結(jié)構(gòu)就很清晰。地圖和輸入框?qū)Π敕珠_,輸入框上的灰色的背景引導用戶進行下一步操作。

Uber

03 平衡

定義:平衡原則是指對設計元素進行滿意的排列和比例設置。當屏幕兩側(cè)存在分布相同(不一定對稱)的視覺元素時,就會達到平衡。

在設計時元素所占的面積在創(chuàng)建平衡時也很重要,而不僅僅是元素的數(shù)量。

平衡的布局可以是:

對稱的:元素相對于中心線對稱分布

不對稱的:元素相對于中心線不對稱分布

徑向的:元素從中心的公共點放射分布

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

The Hub Style Exploration

不對稱的布局是動態(tài)的并且引人入勝,創(chuàng)造了一種活力和動感,比如Nike的設計布局,顯示出與品牌相稱的具有運動感的不對稱的布局。

Nike

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

Brathwait

04?對比

定義:對比原理是指將視覺上不同的元素并列排布,以傳達這些元素不同的功能類別。

換句話說,對比為用戶提供了不同對象在大小或顏色上的明顯差異。

對比原則通常利用顏色來進行分辨。例如,在UI設計中紅色通常代表刪除,而綠色代表同意或繼續(xù)。

ios

通常在UX中說起對比度,我們會想到文字與其背景之間的對比。有時設計人員會故意降低文字的對比度,用來表示不太重要的內(nèi)容。但是在降低文字對比度的同時文字的可讀性也會降低,這會導致用戶無法看清文字內(nèi)容。

在Greenhouse Juice的包裝上,瓶身上文字的可讀性取決于果汁的顏色。在深色果汁瓶身上文字對比強,可讀性比較好,但是淺色果汁瓶身上的文字幾乎無法識別。

Greenhouse Juice

05 格式塔原理

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

換句話說,格式塔原理指出了我們傾向于感知整體而不是個體元素。

在NBC徽標中,中間空白處并沒有孔雀,但我們的大腦卻能自動填補空缺的部分,感覺到孔雀的存在。

NBC

在Uber的注冊頁面中,字段標簽靠近其相應的文本框,這樣能輕松理解需要在哪些文本框中輸入信息。

Uber

視覺設計原則的重要性

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

增加可用性。遵循這些視覺設計原則能夠設計出易于使用的頁面布局。

激發(fā)積極情感。美好的事物會引發(fā)積極的情緒。美學-可用性效應表明,當人們發(fā)現(xiàn)外觀上具有吸引力的設計時,可能會對設計的可用性更寬容。

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


??????精彩推薦:

1、聊聊卡片式設計的運用

2、請注意:輸入設計需要這些交互反饋

3、產(chǎn)品體驗報告 | “新”當當與“舊”孔網(wǎng)

4、深度解析:服務藍圖的應用邏輯

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容