當(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)系。

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

良好的視覺設(shè)計(jì)通常使用不超過三種不同的尺寸。擁有一系列大小不同的設(shè)計(jì)元素，不僅能在排版上創(chuàng)造出多樣性，而且還能在頁(yè)面上建立視覺層級(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)。如果很難確定頁(yè)面布局的具體位置，則很可能是其布局缺少清晰的視覺層級(jí)。

要?jiǎng)?chuàng)建清晰的視覺層級(jí)結(jié)構(gòu)，請(qǐng)使用2–3種字體大小來向用戶展示頁(yè)面最重要的信息?；蛘邔?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 格式塔原理

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

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

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

總結(jié)

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

1. 增加可用性。遵循這些視覺設(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)大的視覺系統(tǒng)可以幫助建立用戶對(duì)產(chǎn)品的信任和興趣。

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

當(dāng)你為你的項(xiàng)目創(chuàng)建有效的，可訪問的，漂亮的ui時(shí)，只需要最小的調(diào)整來幫助快速改善你的設(shè)計(jì)。 努力創(chuàng)造。在這篇簡(jiǎn)短且易于理解的指南中，我收集了一些容易放置的內(nèi)容。在實(shí)踐中，這些小技巧可以毫不費(fèi)力地幫助你改善你的設(shè)計(jì)，還有用戶體驗(yàn)。

希望你喜歡！

1·讓你的元素出現(xiàn)更多

用微妙的邊界定義。

使用多重陰影或非常微妙的邊界（只是一個(gè)陰影比你的實(shí)際影子）周圍的某些元素可以使這些元素出現(xiàn)

更清晰，更清晰，幫助你避免那些看起來泥濘的陰影。

2.減少字母間距

標(biāo)題給一個(gè)更好的光學(xué)范圍。減少長(zhǎng)格式正文的字母間距？這是一個(gè)大大的“不”。但對(duì)于標(biāo)題……我要說“是”!

你的標(biāo)題很可能會(huì)比他們的標(biāo)題更大，更重。相比于正文，字母之間的間距有時(shí)會(huì)出現(xiàn)視覺上更大，這并不是你想要的。減少字母間距，只是少量，可以使你的標(biāo)題視覺平衡，更易于閱讀，通常更賞心悅目。

3.圖表一致性

為了一致性，確保你的圖標(biāo)具有相同的視覺風(fēng)格。確保它們擁有相同的視覺風(fēng)格;同樣的重量，要么填滿，要么秒變了。不要混搭。

4.頁(yè)面可以用一種字體

只使用一種字體就很好。在設(shè)計(jì)時(shí)，使用單一字體是絕對(duì)沒問題的，這樣做實(shí)際上可以幫你產(chǎn)生更強(qiáng)、更持久的結(jié)果。忽略“總是使用兩種字體”最小值的人群。使用以下組合重量，大小和顏色，你仍然可以產(chǎn)生完美的可接受的結(jié)果。雖然只有一個(gè)單獨(dú)的字體。

5.適當(dāng)?shù)牧舭?

留白是UI設(shè)計(jì)朋友。大膽的使用。適度的留白，即使是少量的白色物質(zhì)，但要使用得當(dāng)。能讓你的設(shè)計(jì)透氣，而且看起來更光亮。

6.20pt的文字

創(chuàng)建長(zhǎng)篇內(nèi)容？給20 pt試試。對(duì)于長(zhǎng)形式的內(nèi)容（即微博文章，項(xiàng)目描述等等），試著這樣做20pt(甚至更多一點(diǎn))為你的文本字號(hào)。當(dāng)然，這取決于所選擇的字體，但大多數(shù)流行的字體在20pt時(shí)效果得很好，并帶來更好的閱讀體驗(yàn)當(dāng)你的用戶面對(duì)一堵文字墻的時(shí)候。18pt太過時(shí)了。

7.字號(hào)集比例

使用字體比例定義一個(gè)適合的字體大小集。使用字體比例可以幫助您輕松、實(shí)用地定義一組字體大小。顧名思義，Type Scale基于一個(gè)比例因子(比如1.25)工作的。從一個(gè)基本字體大小(18px)和乘(或除)它與縮放因子得到的字體大小要么更高(即;H?，H?等)，或較低層次(即;標(biāo)題、按鈕等)字體比例將幫助你產(chǎn)生看起來和諧的文本字號(hào)集。因?yàn)樗麄兊拇笮「鶕?jù)設(shè)定的固定比例增加和減少。

8.界面顏色定義

選擇一個(gè)基本顏色，然后使用色彩和色調(diào)增加均勻性。你猜怎么著?你不必總是用大量的顏色填充你的設(shè)計(jì)。如果項(xiàng)目允許，簡(jiǎn)單地使用一個(gè)有限的調(diào)色板選擇一個(gè)基地顏色，然后使用你選擇的顏色的色調(diào)和陰影可以增加一致性以最簡(jiǎn)單的方式來改變你的設(shè)計(jì)。

9.登陸用戶體驗(yàn)

改善用戶登錄的體驗(yàn)。記住拇指規(guī)則。允許用戶在任何時(shí)候跳過您的移動(dòng)應(yīng)用程序上線序列，并且放置跳過鏈接在拇指容易觸及的位置。只是一個(gè)簡(jiǎn)單的調(diào)整，可以為你的用戶提供更好的體驗(yàn)……

記住，拇指仍然是主宰！

10.陰影來自一個(gè)光源

你的影子來自其中一個(gè)光源對(duì)吧？確保你的影子總是來自一個(gè)光源。這是一個(gè)簡(jiǎn)單的錯(cuò)誤，但它可以讓你的設(shè)計(jì)看起來更拋光且統(tǒng)一。記住，我們不是生活在一個(gè)擁有一千個(gè)太陽(yáng)的國(guó)度里。

11.建立字體集合

使用更好的字體組合，效率會(huì)很很快。當(dāng)你想要提高你的字體組合技巧的時(shí)候，當(dāng)面對(duì)1000個(gè)字體選擇，只是去尋找對(duì)應(yīng)的自己集合，效率會(huì)快很多。

12.提高你的對(duì)比

文字和圖像與一個(gè)微妙的覆蓋。根據(jù)文本可能放置在圖像上方的位置，您可以選擇嘗試，并測(cè)試完整的圖像覆蓋，或更微妙的(從下到上，或從上到下)漸變疊加，以實(shí)現(xiàn)兩者之間的簡(jiǎn)單對(duì)比。為了在你的文本之間形成良好的對(duì)比，不要太復(fù)雜的內(nèi)容和圖片。

13.使用居中排列文字要有節(jié)制

太多就會(huì)導(dǎo)致用戶體驗(yàn)不合格。盡量只在標(biāo)題和小段落中使用中心文字。對(duì)于幾乎所有其他內(nèi)容，保持文本左對(duì)齊。你的用戶會(huì)感謝你的你。

14.多字重

當(dāng)選擇一個(gè)多用途的文字，盡量找一個(gè)大量權(quán)重。你搜索的字體有很多選擇嗎？重量、風(fēng)格？如果你打算在你的一些項(xiàng)目中使用它，請(qǐng)嘗試并確保它是這樣做的。只有一種重量或樣式。不行的。如果可以的話，我建議你避開這些。當(dāng)然也有例外，某些項(xiàng)目會(huì)要求“只有一種風(fēng)格”

更精致的字體，但對(duì)于絕大多數(shù)項(xiàng)目，你想要的字體再多一點(diǎn)就能…嗯…選擇。即使你決定只使用兩種或三種重量或風(fēng)格，希望你在設(shè)計(jì)過程的后期需要更多的空間。

15.淺色背景不要文本過亮

想要?jiǎng)?chuàng)造更容易理解的界面，對(duì)吧？把你的文字調(diào)暗在光亮的背景上。在淺色背景下工作時(shí)，不要讓你的文本太亮。

16.純黑色文字未必是好

當(dāng)涉及到長(zhǎng)形式的內(nèi)容時(shí)，某些常規(guī)的粗細(xì)字體仍然可以看。但太重了，在屏幕上會(huì)很僵硬。你可以很容易地解決這個(gè)問題，選擇一些像深灰色（即#4F4F4F）的基調(diào)，把文字往下寫，讓眼睛更容易看。

17.通過色彩對(duì)比度作區(qū)分

總是通過icon最突出的內(nèi)容。你認(rèn)為這是常識(shí)，對(duì)嗎？我并不覺得。通過使用色彩對(duì)比度做區(qū)分，尺寸和標(biāo)簽，確保盡可能突出。如果可以的話，不要總是只依賴圖標(biāo)。如果可以使用文本標(biāo)簽，那就使用它們，讓用戶更好地理解。

18.字體越小，行高越大

當(dāng)你的字體變小時(shí)，請(qǐng)?jiān)黾有懈撸赃_(dá)到更好的通用性。這同樣適用于當(dāng)你的字體大小增加。簡(jiǎn)單地降低行高。

19.“Il1”測(cè)試文字可讀性

使用x-height來測(cè)試字體的可讀性?；旧?，x-height是一個(gè)小寫字母' x '相對(duì)于大寫字母高度 (T)的相同字體。如果你的字體有一個(gè)大的x高，通常有助于更好地閱讀，特別是在使用長(zhǎng)形式的正文文本。另一種確定字體可讀性，并縮小范圍的方法如果你有一些無法選擇的字體，可以做這個(gè)測(cè)試，比較來自特定字體的三個(gè)字符：大寫字母I，小寫的L和數(shù)字1。

20.突出實(shí)用動(dòng)作

當(dāng)設(shè)計(jì)一個(gè)在應(yīng)用程序內(nèi)部使用的菜單時(shí)，確保提供最多經(jīng)常使用的動(dòng)作（例如：上傳圖像，添加文件等)最突出的屏幕上。

21.顏色-從你的圖像中選擇

顏色-從你的圖像中選擇，會(huì)給你的產(chǎn)品帶來生命。簡(jiǎn)單地從你的產(chǎn)品圖片中選擇顏色，然后應(yīng)用各種色調(diào)。你選擇的顏色陰影到你的背景，文字，圖標(biāo)或更多，可以添加。你的設(shè)計(jì)具有豐富的視覺趣味和個(gè)性。

22.不同字體，不同行高

基于字體的x坐標(biāo)，設(shè)置您的線高度。不同x高的字體需要不同的行高測(cè)量，實(shí)現(xiàn)文本行之間的正確分隔。即使你可能有兩種字體相同的字體大小(即：18px)它們的x的高度可以有很大的不同，這在選擇正確的線的種類起著很大的作用高度來實(shí)現(xiàn)。

23.突出最重要元素的方式

突出最重要的元素。通過使用字體大小，權(quán)重，顏色和布局的組合，可以很輕松的突出UI中最重要的元素。只是很簡(jiǎn)單，但微妙的調(diào)整，讓用戶體驗(yàn)更好一點(diǎn)。

24.錯(cuò)誤下額外的視覺輔助

操作錯(cuò)誤的時(shí)候，添加一個(gè)額外的視覺輔助。在用戶剛剛采取的操作附近添加一個(gè)錯(cuò)誤消息可以是簡(jiǎn)單的形式，但很有幫助，當(dāng)他們填寫任何形式的表格時(shí)額外的視覺輔助。

25.移動(dòng)端熱區(qū)創(chuàng)建

嘗試在移動(dòng)端創(chuàng)建慷慨的熱區(qū)。當(dāng)為移動(dòng)設(shè)備設(shè)計(jì)時(shí)，嘗試創(chuàng)建足夠大的可點(diǎn)擊區(qū)域，是好的。對(duì)于只包含文本的按鈕和鏈接來說，這是很有挑戰(zhàn)性的，盡可能使用帶有標(biāo)簽的圖標(biāo)。

以下是iOS和Android的最小推薦點(diǎn)擊區(qū)域：

44 x 44pt用于iOS

48x48dp用于Android

26.短標(biāo)題上盡量使用全大寫

在短標(biāo)題上盡量使用全大寫。如果你想在標(biāo)題上使用全大寫，請(qǐng)確保它們?cè)谌魏螘r(shí)候都很短。有可能，最好是一行。將它們用于較長(zhǎng)的文本是不好的。和之前的技巧一樣，在標(biāo)題中添加少量的字母間距。能讓他們呼吸順暢，而且視覺效果更好。

27.保持文字與圖像的對(duì)比度

在輕文本和圖像之間，保持可接受的對(duì)比度。一定要確保淺色的文字在淺色的背景下是清晰的。簡(jiǎn)單地應(yīng)用一個(gè)稍微不透明的背景在你的文本后面將保持這些元素之間的對(duì)比度很好。

28.英文標(biāo)題字體推薦

看看這些很棒的字體，用在標(biāo)題非常好的。發(fā)現(xiàn)他們真的很適合標(biāo)題，設(shè)計(jì)感很強(qiáng)。（我沒有推廣費(fèi)用，請(qǐng)放心用）

29.英文長(zhǎng)文本字體推薦

看看這些很棒的字體，用于長(zhǎng)文本是非常好的，強(qiáng)烈推薦使用。（我仍然沒有任何推廣費(fèi)）。

30.讓垂直節(jié)奏恰到好處

標(biāo)題和正文。當(dāng)你想實(shí)現(xiàn)一個(gè)好的垂直節(jié)奏，以及一個(gè)強(qiáng)大的視覺之間，需要對(duì)文本元素排版、間距作設(shè)計(jì)。我見過許多設(shè)計(jì)，最常見的是在文章列表中，它們已經(jīng)被應(yīng)用標(biāo)題的上下空白相等，這樣就失去了這種聯(lián)系在它下面有正文。在這種情況下，我總是會(huì)給我的標(biāo)題更多的頂部邊距，而在底部，標(biāo)題和下面的內(nèi)容之間的連接是更強(qiáng)，有良好的垂直節(jié)奏，視覺層次保留在所有的文章之間。

31.使用具有信息性的提示符

對(duì)于下載指標(biāo)，試著去做盡可能提供信息。對(duì)于用戶，嘗試使具有信息性的下載指示符對(duì)用戶很友好。你可以通過使用顏色來實(shí)現(xiàn)這一點(diǎn)，用百分?jǐn)?shù)來顯示當(dāng)前進(jìn)度，一個(gè)簡(jiǎn)單的圖標(biāo)，讓他們可以在任何地方取消下載時(shí)間。

32.保持標(biāo)題相對(duì)簡(jiǎn)潔

如果你能保持標(biāo)題簡(jiǎn)短，簡(jiǎn)潔……“想做就做”。

如果可以，如果合適的話，保持標(biāo)題簡(jiǎn)短，時(shí)髦，切中要點(diǎn)。而不是“這是你的風(fēng)格，你的方式”，簡(jiǎn)單地使用像這樣的“你的風(fēng)格。你的方式?！比藗儠?huì)瀏覽，保持這些標(biāo)題簡(jiǎn)短有力有助于他們更快地消化中的信息。

記住，這種方式可能會(huì)讓人感覺很突然，你需要考慮一下你所從事的項(xiàng)目類型，以及目標(biāo)受眾來決定方法是合適的，相對(duì)于更標(biāo)準(zhǔn)的格式。

33.選擇合適的字體

正確的設(shè)計(jì)“聲音”。在項(xiàng)目中處理文本時(shí)，選擇正確的字體將影響就像你說話的聲音一樣。要大聲，要柔和，要友好，要正式，要有趣。每一種字體都有自己獨(dú)特的聲音，關(guān)鍵在于找到合適的字體你正在做的項(xiàng)目的聲音。當(dāng)你剛接觸字體時(shí)，這似乎是一項(xiàng)艱巨的任務(wù)，所以不要害怕從類似的項(xiàng)目中獲得靈感，并從這些項(xiàng)目中汲取靈感它們有助于影響你的決定，并提高你的理解什么是合適的。

34.行長(zhǎng)度的平衡點(diǎn)

你的正文，并提高可讀性處理正文文本，并試圖找到合適的行長(zhǎng)度可能有點(diǎn)平衡。對(duì)于一個(gè)單獨(dú)的列頁(yè)面，45到75個(gè)字符被普遍認(rèn)為是滿意的行長(zhǎng)度，而行長(zhǎng)度為66個(gè)字符(包括字母和空格)被發(fā)現(xiàn)是最佳位置。當(dāng)然，字體大小和行高在決定可讀性時(shí)也起著重要作用，但是對(duì)于行長(zhǎng)，保持在45到75個(gè)字符之間，就會(huì)更好了。

35.幽靈文字提升用戶體驗(yàn)

偶爾使用純裝飾的幽靈文字也可以，但要保留閱讀的問題。屏幕上的大部分文本內(nèi)容應(yīng)該堅(jiān)持可用性最佳的做法是沒有問題的。但有時(shí)，希望添加純出于裝飾目的的文本，我們不希望所有的設(shè)計(jì)都落入乏味。如果沒有元素會(huì)以任何方式影響用戶體驗(yàn)，那么出于裝飾的原因，插入奇怪的元素是可以的。

36.界面元素保證快速區(qū)分

使用戶界面中的元素彼此區(qū)分。按鈕、通知，ui中兩個(gè)獨(dú)立但重要的元素。如果可以的話，總是試著確保你的用戶能夠快速地將它們區(qū)分開來，輕松掃描您的網(wǎng)站或應(yīng)用程序。按鈕，在大多數(shù)情況下，將優(yōu)先，所以確保他們是最突出的。項(xiàng)目在屏幕上，并很容易區(qū)分其他元素。

37.投影的玩兒法

只是一些細(xì)微的陰影，你所需要的。我們都喜歡陰影，對(duì)吧？它們可以作為微妙又很強(qiáng)大的視覺線索，在您的設(shè)計(jì)中使用要適度。現(xiàn)實(shí)世界中的陰影，在大多數(shù)情況下幾乎是不可察覺的，而且所以你應(yīng)該在ui中模仿這種行為。放下沉重和黑暗的陰影并降低不透明度，以實(shí)現(xiàn)一些的東西更微妙和栩栩如生。

38.全大寫文本

使用全部大寫？選擇適合的字體，能夠達(dá)到光學(xué)清晰度。在你的設(shè)計(jì)中適度使用“全部大寫”是很好的。選擇一個(gè)合適的字體與行高和較重的字重，使用戶的光學(xué)清晰度。

39.讓面包屑脫穎而出

讓面包屑脫穎而出，易于為用戶解釋。面包屑無處不在，經(jīng)常用于內(nèi)容豐富的網(wǎng)站，通過最小的調(diào)整，你可以確保用戶能夠快速定位他們?cè)谝粋€(gè)網(wǎng)站上的位置以及他們可能需要去的其他地方。如果用戶已經(jīng)通過使用跳轉(zhuǎn)到網(wǎng)站的某個(gè)深度，這一點(diǎn)尤其有用。

40.嘗試用高飽和顏色

使用高度飽和的顏色?試一試用淺色調(diào)來緩和氣氛或者陰涼處。高度飽和的顏色(明亮的藍(lán)色、紅色、綠色等)可以讓網(wǎng)站看起來很棒，但是當(dāng)過度使用時(shí)，它們會(huì)使使用者的眼睛疲勞，主要是在使用的時(shí)候的文字內(nèi)容。盡可能使用時(shí)要適度，并盡量與柔和的顏色搭配顏色或色調(diào)變化)的飽和顏色，以避免可怕的眼睛疲勞。使用這種方法還可以直接注意到飽和的色彩和使最重要的內(nèi)容前面和中心，與更柔和的顏色采取較少突出角色，讓用戶的眼睛休息一下。記住，在選擇顏色時(shí)，可讀性和可訪問性應(yīng)該是最優(yōu)先的。

41.圖表不要叛逆的使用

在ui中使用已建立的圖標(biāo)，為了避免給用戶造成混淆。在你的設(shè)計(jì)中添加圖標(biāo)時(shí)，試著選擇一個(gè)有代表性的已建立的圖標(biāo)。不要選擇一個(gè)能傳達(dá)正確含義和功能的圖標(biāo)否則會(huì)引起困惑，成為用戶的認(rèn)知障礙。不要在這些圖標(biāo)上過于叛逆。

42.接近原則

在眾多經(jīng)過嘗試和測(cè)試的設(shè)計(jì)原則中，這里有一個(gè)是幫助您為用戶生成更清晰的ui的關(guān)鍵。接近只是確保相關(guān)設(shè)計(jì)元素放置在一起的過程，表明彼此之間的關(guān)系，這有助于加快用戶的認(rèn)知。

43.文本網(wǎng)格

4pt基線網(wǎng)格+ 8pt網(wǎng)格=單一網(wǎng)格。當(dāng)使用類型時(shí)，8點(diǎn)網(wǎng)格旁邊使用4點(diǎn)基線

可以為你的設(shè)計(jì)帶來更和諧的垂直節(jié)奏。您需要對(duì)齊您的類型到基線網(wǎng)格4，使用的行高值為4的倍數(shù)（16、20、24、28等）

為什么4？我發(fā)現(xiàn)在過去使用特定的文本大小時(shí)，按8的倍數(shù)縮放是不太合適。

44.文本建議行高比例

減少標(biāo)題上的行高是很好的。與長(zhǎng)形式的主體文本不同，它需要足夠的行高，以便折行易讀。標(biāo)題的推薦行高通常約為1至1.3倍。

45.顏色選擇

選顏色有困難計(jì)劃嗎？在顏色上進(jìn)行類比論。類似的顏色，也被稱為相鄰或相鄰的色調(diào)，是其中之一最和諧的配色方案，可以大大幫助你，如果你有很難挑選出搭配得很好的顏色。由三原色、二原色和三原色組成的一組相鄰的色調(diào)幫助您創(chuàng)建一個(gè)簡(jiǎn)單的，顏色方案快速。當(dāng)你需要快速將顏色調(diào)和到混合中時(shí)，可以使用類似的方法。

46.提高信噪比

在你的設(shè)計(jì)中盡量提高信噪比。你可以在你的設(shè)計(jì)中通過最大化信號(hào)來實(shí)現(xiàn)清晰和可用性最小化噪聲，從而產(chǎn)生高信噪比。您可以通過確保提供相關(guān)信息(信號(hào))來實(shí)現(xiàn)這一點(diǎn)有效，不相關(guān)的信息(噪聲)被減少或完全刪除。事情更加清晰。提高你的信噪比。

47.圖像文字達(dá)到強(qiáng)對(duì)比

我想用更非正式的方式說話。語氣嗎？嘗試所有小寫字母。使用較重的字體和大寫會(huì)顯得有點(diǎn)正式和夸張。試著選擇全小寫和較輕的字體。在處理特定項(xiàng)目時(shí)，使用類似全小寫的拷貝可以呈現(xiàn)更非正式的、可接觸的信息。記住要在圖像之間使用某種顏色疊加與文字達(dá)到較強(qiáng)的對(duì)比。

48.使用重量、大小和顏色來表示類型中的層次結(jié)構(gòu)

當(dāng)使用類型時(shí)，元素不需要尖叫“看看我!”一直如此但他們確實(shí)需要一個(gè)平衡的等級(jí)制度。只需通過重量、大小和顏色進(jìn)行細(xì)微的調(diào)整就可以實(shí)現(xiàn)這一點(diǎn)。這樣做可以讓用戶掃描并找到必要的元素，避免在過程中產(chǎn)生任何混淆。

49.淺色文字加深色？

養(yǎng)肥了，字體大小為最佳易讀性。當(dāng)設(shè)置暗色文字與淺色背景，選擇一個(gè)更輕的粗細(xì)。但是…反過來說:淺色文字>深色背景。最好是看一下增加一點(diǎn)字體重量，特別是對(duì)于長(zhǎng)表單副本。以最佳的易讀性為目標(biāo)，避免讓用戶的眼睛疲勞。

50. 用你的字體選擇創(chuàng)造正確的情感回應(yīng)

試著為你要呈現(xiàn)的內(nèi)容選擇合適的字體。用戶是精明的，有一種直觀的感覺，當(dāng)內(nèi)容與他們交談當(dāng)它不是。正確的字體選擇是至關(guān)重要的，使您的內(nèi)容講給他們直率和情感的水平。

51.大寫字母+字母間距=更好的易讀性

你是否使用全大寫的短行文本？嗯…這是一個(gè)好主意，增加這些字母之間的間距，以達(dá)到更好的用戶的易讀性。這樣做使單詞更容易閱讀和處理，因?yàn)樽帜父啾舜藚^(qū)分。字母之間的間距只要稍微增加一點(diǎn)就可以。

52.錯(cuò)誤告知

打開這些錯(cuò)誤消息，您的表格有幫助。在使用表單時(shí)，請(qǐng)嘗試并確保錯(cuò)誤消息得到解釋。出了什么問題，如何補(bǔ)救?？偸亲層脩袅私馇闆r，即使是像常規(guī)一樣常見的事情的形式。讓這些錯(cuò)誤消息有用，不要讓您的用戶蒙昧。

53.告知用戶正在發(fā)生什么

試著向用戶保證在加載過程中會(huì)發(fā)生一些的事情你的應(yīng)用程序。顯示應(yīng)用程序元素的框架可以幫助你快速溝通布局和確保用戶正在發(fā)生一些事情。系統(tǒng)狀態(tài)可見性是一個(gè)重要的原則要遵循，并允許用戶知道發(fā)生了什么。不要讓用戶從一開始玩猜謎游戲。

54.不可逆的操作強(qiáng)提醒

告訴用戶將要做什么如果他們應(yīng)用了某個(gè)動(dòng)作。在應(yīng)用特定的操作之前，總是嘗試并詳細(xì)地告知用戶可以有結(jié)果。這尤其適用于具有不可逆轉(zhuǎn)后果的行為，如刪除某些東西。讓用戶知道將要發(fā)生什么，并在此之前要求他們進(jìn)行確認(rèn)。他們就會(huì)按下那個(gè)標(biāo)有“刪除”的紅色大按鈕。

Duoton icon

雙色漸變圖標(biāo)

-

1. 雙色調(diào)多層質(zhì)感(彌散漸變，直投影，混合模式)

2. 雙色調(diào)混合模式疊加

Alpha icon

單色漸變透明圖標(biāo)

-

如下圖左側(cè)大卡片上面圖標(biāo)應(yīng)用思路。

Cascade icon

層疊式圖標(biāo)

-

Brand icon

品牌植入

-

備注（因?yàn)橐曨l比較麻煩，因此省略了）下面是截圖，大家應(yīng)該能大致感受到

同樣多鄰國(guó)在前段時(shí)間更新品牌，并將其LOGO特征符號(hào)植入字體中。

同樣多鄰國(guó)在前段時(shí)間更新品牌，并將其特征元素植入字體中

Motion icon

動(dòng)態(tài)圖標(biāo)

-

動(dòng)態(tài)圖標(biāo)是一個(gè)能提升產(chǎn)品體驗(yàn)的方法之一，也是微交互中的一種，它可以增加產(chǎn)品趣味性，F(xiàn)acebook在評(píng)論入口的表情動(dòng)畫就運(yùn)用了動(dòng)態(tài)圖標(biāo)， 包括蘋果Apple Pay支付成功圖標(biāo)動(dòng)畫，Google Assistant智能助手，Messenger中的打招呼動(dòng)畫等等我們可以逐漸發(fā)現(xiàn)動(dòng)態(tài)圖標(biāo)比靜態(tài)圖標(biāo)的表達(dá)性更強(qiáng)，更受到青睞，隨著硬件升級(jí)，這種動(dòng)態(tài)圖標(biāo)運(yùn)用逐漸在越來越多場(chǎng)景可見到。

備注（因?yàn)橐曨l比較麻煩，因此省略了）

文章來源：優(yōu)波設(shè)計(jì)   作者：設(shè)計(jì)TNT
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

隨著體驗(yàn)設(shè)計(jì)的持續(xù)發(fā)展，行業(yè)內(nèi)各領(lǐng)域的體驗(yàn)設(shè)計(jì)質(zhì)量都有了很大的提升，并且各個(gè)競(jìng)品之間的差距越來越小。而更高的界面細(xì)節(jié)設(shè)計(jì)質(zhì)量不僅是各個(gè)大廠產(chǎn)品體驗(yàn)設(shè)計(jì)的追求，也是我們拉開競(jìng)品差距的關(guān)鍵一環(huán)。我們平時(shí)可能閱讀了很多理論知識(shí)文章，但往往在實(shí)際工作中卻較少運(yùn)用。學(xué)習(xí)掌握理論基礎(chǔ)知識(shí)固然是很重要的，但在設(shè)計(jì)執(zhí)行時(shí)掌握設(shè)計(jì)技巧也更能提升工作的效率和質(zhì)量。那么在設(shè)計(jì)執(zhí)行層遇到問題有沒有一些立竿見影的解決方案呢？本篇文章分別從視覺、內(nèi)容和交互三個(gè)角度總結(jié)了十個(gè)界面細(xì)節(jié)設(shè)計(jì)點(diǎn)，希望可以幫助你遇到問題時(shí)另辟蹊徑，延伸更好的設(shè)計(jì)思路。

在封面和背景圖設(shè)計(jì)的場(chǎng)景中，我們?yōu)榱俗尫饷嫔系男畔⒛軌蚋菀卓辞澹ǔ?huì)在文字下添加一層黑色半透明或者漸變蒙層，但你有想過這個(gè)蒙層可以不止是黑色的嗎？

在設(shè)計(jì)社區(qū)話題詳情頂部背景圖時(shí)，我們采用封面圖模糊處理后作為背景圖的方案，為保證信息能夠清晰顯示會(huì)在背景上加一個(gè)深色半透明蒙層。當(dāng)用純黑色作為蒙層時(shí)淺色背景可能會(huì)顯得很臟，這時(shí)可以改用深灰色讓背景看起來不會(huì)太臟，加入深灰色可以減弱部分背景的黑色讓背景圖看起來更加柔和。下圖左邊是用黑色#000000、30%不透明度，右邊是深灰#333333、30%不透明度?？梢钥闯鲇疫叿桨傅男Ч黠@更清爽一些。當(dāng)然更好的方案是通過客戶端拾取背景圖顏色后生成對(duì)應(yīng)色相的深色蒙層，但這個(gè)方案設(shè)計(jì)相對(duì)比較復(fù)雜。需要制定一系列拾色和生成對(duì)應(yīng)色值的規(guī)范，并且開發(fā)成本偏高。有條件的話也可以考慮應(yīng)用。

界面中使用圓角設(shè)計(jì)更能讓用戶感到親和力和舒適感，所以運(yùn)用場(chǎng)景也非常廣泛。除了比較常見的封面、卡片、按鈕等等圓角的使用場(chǎng)景，在一些細(xì)節(jié)的處理運(yùn)用圓角也能提升設(shè)計(jì)品質(zhì)。比如下圖中頭像和背景圖的銜接處、按鈕和底欄背景的相交缺口處如果運(yùn)用常規(guī)的切割邊角就比較尖銳，會(huì)略顯生硬。

而添加了圓角處理后視覺上會(huì)更加柔和更協(xié)調(diào)，對(duì)比一下前后的方案不難發(fā)現(xiàn)圓角的效果更勝一籌。不要看只是一點(diǎn)很小的細(xì)節(jié)，其實(shí)也體現(xiàn)了設(shè)計(jì)師對(duì)細(xì)節(jié)的細(xì)心追求，用戶看了也會(huì)體會(huì)到設(shè)計(jì)師的用心。

另外再介紹一下我個(gè)人在sketch中快速繪制這類圓角銜接的方法。以下圖為例，首先頭像的圓形描邊需要單獨(dú)畫一個(gè)白色的圓形圖層，而不能直接在頭像上添加描邊。然后把圓形圖層和白色矩形圖層設(shè)為聯(lián)集，再將圖層路徑合并。然后在兩個(gè)銜接處的兩邊各添加一個(gè)錨點(diǎn)，注意兩個(gè)錨點(diǎn)和銜接點(diǎn)的距離一定要相等，這個(gè)距離決定了圓角的大小，可以根據(jù)需要來調(diào)整。之后把銜接點(diǎn)的錨點(diǎn)類型改為“筆直”，再給這個(gè)錨點(diǎn)添加圓角半徑。這樣銜接點(diǎn)的圓角繪制就完成啦。另外運(yùn)用布爾運(yùn)算來畫出圓角也是可以的，具體方法可以根據(jù)個(gè)人習(xí)慣來選擇。

我們?cè)陧?yè)面取色時(shí)經(jīng)常會(huì)給背景色和陰影等結(jié)合場(chǎng)景帶有一些顏色傾向，以達(dá)到更舒適的視覺效果，其實(shí)這個(gè)方法也適用于文字。為了提升效率，我們習(xí)慣了在選擇字色時(shí)使用一套設(shè)計(jì)規(guī)范里的顏色，比如#333333、#999999等等。但是個(gè)別的特殊模塊我們是可以根據(jù)實(shí)際情況調(diào)整以獲得更好的視覺效果的。比如下面這個(gè)案例是一個(gè)熱帖榜單的入口模塊，為了提高信息層級(jí)讓頁(yè)面更有活力，這里選擇用淺黃色作為背景。如果使用規(guī)范的字色與背景的結(jié)合會(huì)相對(duì)不太協(xié)調(diào)，這里選擇字色時(shí)就可以讓文字顏色和背景顏色帶有相同的色相，選用高飽和度低明度的顏色，并且次級(jí)信息同時(shí)可以帶一點(diǎn)不透明度。讓整個(gè)模塊視覺更統(tǒng)一，信息與背景更融合。

類似這樣的場(chǎng)景其實(shí)還有很多，有時(shí)我們也不必拘泥于設(shè)計(jì)規(guī)范中，適當(dāng)?shù)母鶕?jù)模塊定制化一些細(xì)節(jié)可以達(dá)到更好的視覺效果。

我們經(jīng)常會(huì)遇到一個(gè)頁(yè)面中有多個(gè)同級(jí)圖標(biāo)排列的情況，不管是用宮格排列或是列表排列都需要每個(gè)圖標(biāo)整齊有序、尺寸統(tǒng)一。但實(shí)際情況下不可能每個(gè)圖標(biāo)尺寸都完全統(tǒng)一。一般這種情況我們可以給每個(gè)圖標(biāo)統(tǒng)一添加一個(gè)相同尺寸的矩形圖層作為背景板，將背景板隱藏后再整體編組，這樣一來就能保證每個(gè)圖標(biāo)所在的組都是相同的尺寸就能統(tǒng)一對(duì)齊了。

然鵝，我們有時(shí)會(huì)遇到一些不規(guī)則形狀圖標(biāo)，尺寸是奇數(shù)甚至是帶小數(shù)的。這種情況圖標(biāo)如果要在背景板上完全居中，我們可以打開首選項(xiàng)中的圖層項(xiàng)，關(guān)閉契合像素功能，然后可以拖動(dòng)圖標(biāo)或者用對(duì)齊功能讓圖標(biāo)與背景板對(duì)齊。不要忽略這一兩個(gè)像素的差別，這些微小的細(xì)節(jié)往往決定了界面設(shè)計(jì)的嚴(yán)謹(jǐn)和精致程度。

另外，我們可以根據(jù)情況靈活調(diào)整圖標(biāo)在背景板中的位置，例如左右箭頭圖標(biāo)為了與頁(yè)面其他內(nèi)容邊距對(duì)齊，可以將圖標(biāo)貼合背景板左右兩邊。這樣就能減少后期開發(fā)還原調(diào)整的工作量，提高工作效率。

標(biāo)題信息在界面設(shè)計(jì)中使用頻率非常高，而在設(shè)計(jì)過程中我們可能會(huì)忽略極限字?jǐn)?shù)的情況，導(dǎo)致開發(fā)還原時(shí)實(shí)際效果不理想。下面以一個(gè)案例來分享一下標(biāo)題極限值的處理方法。

在騰訊動(dòng)漫社區(qū)改版中設(shè)計(jì)話題詳情頁(yè)的標(biāo)題時(shí)，產(chǎn)品規(guī)劃標(biāo)題的字?jǐn)?shù)為12個(gè)字符，在右邊有看漫畫按鈕的情況下是顯示不完全的。這個(gè)情況就要考慮設(shè)計(jì)極限值的顯示方案。常規(guī)的方案有：1、顯示不完全時(shí)后面顯示“...”；2、換行顯示。考慮到詳情頁(yè)需要將標(biāo)題完全展示，所以方案一不可行。而方案二在單行和雙行兩種情況下視覺效果不好統(tǒng)一。最終經(jīng)過思考決定使用方案三：標(biāo)題顯示不全時(shí)左右滾動(dòng)展示，可以在保證視覺統(tǒng)一同時(shí)顯示完整的標(biāo)題。

同樣的，在很多情況下我們由于空間受限無法展示完整信息時(shí)，這個(gè)方案也不失為一個(gè)很好的選擇。

在頁(yè)面設(shè)計(jì)工作中我們有時(shí)會(huì)遇到信息容器邊界固定，而容器內(nèi)信息可以滑動(dòng)的情況。例如下圖中頂部導(dǎo)航和音樂播放的歌詞頁(yè)面，這種場(chǎng)景下一般容器邊界不會(huì)做明顯的界限，如果內(nèi)容在邊界處是直接被裁切的話體驗(yàn)的感受就會(huì)比較割裂。我們可以嘗試更好的解決方案，在容器邊界增加漸變過渡，這樣信息在邊緣的過渡就變得柔和，頁(yè)面整體更協(xié)調(diào)。

這種漸變的過渡的應(yīng)用場(chǎng)景還有很多，比如瀏覽簡(jiǎn)介或者文章時(shí)，需要隱藏部分內(nèi)容并提供展開閱讀全文的操作。利用漸變過渡也能隱喻還有未完全展示的內(nèi)容，降低用戶的理解成本并且也能夠讓用戶有心理預(yù)期。

另外在sketch上呈現(xiàn)這種漸變過渡也很方便，如果背景是純色的話可以在邊界處添加一個(gè)與背景色相同顏色的色塊，然后給色塊添加添加不透明度從0～100的漸變，這個(gè)方法比較簡(jiǎn)單。如果遇到背景復(fù)雜的情況，也可以繪制一個(gè)和容器相同大小的矩形，在矩形邊緣添加不透明度從0～100的漸變，然后建立蒙版把信息剪切到矩形中。

至于開發(fā)實(shí)現(xiàn)的方案還是要和開發(fā)哥哥具體溝通，確保用最便捷的方案還原出最好的效果。

動(dòng)態(tài)流是我們非常常見的樣式，是分發(fā)用戶生產(chǎn)內(nèi)容的主要載體之一。主要包含了用戶信息、文字、圖片和視頻等內(nèi)容。一般情況支持九張圖片或一個(gè)視頻，在有多張圖片時(shí)，可以如下圖做成宮格的樣式適配，每張圖片截取中間的正方形部分。

而只有一張圖片或者視頻時(shí)，為了保證圖片和視頻的預(yù)覽效果，通常會(huì)做大尺寸的預(yù)覽圖，而圖片的寬高尺寸并不固定，所以只截取中間方形的方案并不能滿足要求，我們要根據(jù)這個(gè)情況做單獨(dú)的適配方案。首先我們要設(shè)定一個(gè)裁切的比例，比如我們?nèi)∝Q圖最小裁剪寬高比為2:3，橫圖最大裁剪寬高比為3:2（這里的寬高比并不是固定的，可以根據(jù)實(shí)際需要自己定義比例，采用4:3、16:9等比例都是可以的）。這樣當(dāng)圖片寬高比小于2:3時(shí)，我們可以把圖片中間區(qū)域按寬高2:3裁剪出來；圖片寬高大于2:3并且小于3:2時(shí)可以按原圖比例預(yù)覽；而圖片寬高大于3:2時(shí)，把圖片中間區(qū)域按寬高3:2裁剪出來。另外要注意要給圖片設(shè)置最大高度，否則圖片高度太高會(huì)減少頁(yè)面信息承載量，降低閱讀效率，相應(yīng)的也要限制最大寬度，否則會(huì)使圖片規(guī)則不統(tǒng)一，從而頁(yè)面適配效果不協(xié)調(diào)。

同樣的，這個(gè)規(guī)則也適用于視頻，由于全面屏手機(jī)占比越來越高，這些手機(jī)拍攝的視頻大多是19:9、20:9的寬高比例，相比視頻常用的16:9的比例更加細(xì)長(zhǎng)，所以橫屏視頻可以統(tǒng)一裁剪為16:9比例，而豎屏視頻可以裁剪為9:16比例。

動(dòng)態(tài)流圖片適配的核心是制定一個(gè)適配的規(guī)范來保證閱讀的舒適度和效率。而這個(gè)規(guī)范并不是恒定的，可以根據(jù)自身平臺(tái)需要來制定，以上僅作為一個(gè)示例供參考哦。

隨著沉浸式設(shè)計(jì)的趨勢(shì)，很多頁(yè)面會(huì)采用無標(biāo)題欄的設(shè)計(jì)。例如下圖的個(gè)人中心頁(yè)面，頂部利用背景圖來渲染品牌氛圍。但是這類無標(biāo)題欄頁(yè)面的上滑交互普遍有個(gè)缺陷，就是如果未經(jīng)處理上滑后內(nèi)容會(huì)與頂部電池條者是置頂?shù)陌粹o位置重疊。這種類似“穿幫”的情況給用戶的體驗(yàn)就是設(shè)計(jì)處理不夠嚴(yán)謹(jǐn)。然而這種交互細(xì)節(jié)也是可以優(yōu)化改善的。

優(yōu)化的原理也很簡(jiǎn)單，就是在上滑過程中添加一個(gè)標(biāo)題欄來分割頁(yè)面內(nèi)容，從而讓內(nèi)容和頂部元素不重疊。標(biāo)題欄可以隨上滑高度改變不透明度，以達(dá)到柔和的過渡從而實(shí)現(xiàn)絲滑的交互體驗(yàn)。

類似的處理方案在各大平臺(tái)也有較為廣泛的應(yīng)用。

在用戶體驗(yàn)發(fā)展的趨勢(shì)中，無論是交互的反饋或者是圖片、信息等都趨于由靜態(tài)向動(dòng)態(tài)發(fā)展。常規(guī)的靜態(tài)圖片承載的信息相對(duì)有限，所以在有限的載體內(nèi)讓內(nèi)容動(dòng)起來展示更大的信息量不失為一個(gè)很好的選擇。

在舊版本的iOS12系統(tǒng)中有一個(gè)視圖選擇的功能，用戶在這個(gè)頁(yè)面可以選擇標(biāo)準(zhǔn)視圖和放大視圖，并且有三張圖可以滑動(dòng)展示不同場(chǎng)景下兩個(gè)選項(xiàng)的差異，但是這個(gè)方案需要來回切換標(biāo)簽和滑動(dòng)圖片來對(duì)比差異，效率很低。而在之后改版的iOS13系統(tǒng)中，這三張靜態(tài)圖被替換成了兩張動(dòng)圖，輪流切換三個(gè)場(chǎng)景的頁(yè)面，用戶不需要再滑動(dòng)圖片就能更加直觀的對(duì)比兩個(gè)選項(xiàng)的差異。這個(gè)小改動(dòng)不僅可以讓圖片展示更多的信息，還能減少用戶的操作成本提升操作上的體驗(yàn)，讓閱讀效率更高。

類似的延展應(yīng)用場(chǎng)景也有很多，例如新功能引導(dǎo)動(dòng)畫、動(dòng)態(tài)banner等等。其實(shí)原理都是一樣的，在常規(guī)靜態(tài)圖的基礎(chǔ)上優(yōu)化為動(dòng)態(tài)圖，不僅能增加信息的承載量，提高閱讀效率，也能讓頁(yè)面更有活力。

為了滿足運(yùn)營(yíng)的需要，我們有時(shí)會(huì)在多同級(jí)個(gè)圖標(biāo)或者按鈕中突出其中的一個(gè)。例如下圖的分享彈窗，想要在多個(gè)分享途徑中突出微信的圖標(biāo)，但同時(shí)又要保證圖標(biāo)風(fēng)格的一致性，這時(shí)就可以利用微動(dòng)效來達(dá)到強(qiáng)調(diào)的效果。

而微動(dòng)效的落地形勢(shì)也有很多種，下面拋磚引玉介紹幾種簡(jiǎn)單高效的方案。

可以看到添加了微動(dòng)效后不僅可以達(dá)到強(qiáng)調(diào)某一個(gè)對(duì)象的目的，同時(shí)也能保證每個(gè)圖標(biāo)風(fēng)格的統(tǒng)一，微動(dòng)效也讓頁(yè)面更活潑有靈性，不失為一舉多得的方案。

微動(dòng)效的形勢(shì)當(dāng)然不局限于上面幾種，大家也可以發(fā)散思維，創(chuàng)造更多有創(chuàng)意的方案。

文章來源：站酷   作者：騰訊動(dòng)漫TCD
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

如果需要設(shè)計(jì)一個(gè)輪播，我們應(yīng)該考慮哪些因素？如何讓輪播更具有價(jià)值？如何讓輪播的體驗(yàn)更好？如何避免輪播常見的問題。

一、什么是交互設(shè)計(jì)？

先來看一下百度百科的定義

交互設(shè)計(jì)（英文Interaction Design, 縮寫IXD)，是定義、設(shè)計(jì)人造系統(tǒng)的行為的設(shè)計(jì)領(lǐng)域，它定義了兩個(gè)或多個(gè)互動(dòng)的個(gè)體之間交流的內(nèi)容和結(jié)構(gòu)，使之互相配合，共同達(dá)成某種目的。交互設(shè)計(jì)努力去創(chuàng)造和建立的是人與產(chǎn)品及服務(wù)之間有意義的關(guān)系，以“在充滿社會(huì)復(fù)雜性的物質(zhì)世界中嵌入信息技術(shù)”為中心。交互系統(tǒng)設(shè)計(jì)的目標(biāo)可以從“可用性”和”用戶體驗(yàn)“兩個(gè)層面上進(jìn)行分析，關(guān)注以人為本的用戶需求。簡(jiǎn)而言之，交互設(shè)計(jì)是解決特定場(chǎng)景下的人群如何高效使用機(jī)器或軟件的目標(biāo)行為。

為什么要做交互設(shè)計(jì)

在使用網(wǎng)站，軟件，消費(fèi)產(chǎn)品或各種服務(wù)的時(shí)候（實(shí)際上是在同它們交互），使用過程中的感覺就是一種交互體驗(yàn)。隨著網(wǎng)絡(luò)和新技術(shù)的發(fā)展，各種新產(chǎn)品和交互方式越來越多，人們也越來越重視對(duì)交互的體驗(yàn)。當(dāng)大型計(jì)算機(jī)剛剛研制出來的時(shí)候，可能為當(dāng)初的使用者本身就是該行業(yè)的專家，沒有人去關(guān)注使用者的感覺；相反，一切都圍繞機(jī)器的需要來組織，程序員通過打孔卡片來輸入機(jī)器語言，輸出結(jié)果也是機(jī)器語言，那個(gè)時(shí)候同計(jì)算機(jī)交互的重心是機(jī)器本身。當(dāng)計(jì)算機(jī)系統(tǒng)的用戶越來越由普通大眾組成的時(shí)候，對(duì)交互體驗(yàn)的關(guān)注也越來越迫切了。因此交互設(shè)計(jì)作為一門關(guān)注交互體驗(yàn)的新學(xué)科在二十世紀(jì)八十年代產(chǎn)生了。

從用戶角度來說，交互設(shè)計(jì)是一種如何讓產(chǎn)品易用，有效而讓人愉悅的技術(shù)，它致力于了解目標(biāo)用戶和他們的期望，了解用戶在同產(chǎn)品交互時(shí)彼此的行為，了解“人”本身的心理和行為特點(diǎn)，同時(shí)，還包括了解各種有效的交互方式，并對(duì)它們進(jìn)行增強(qiáng)和擴(kuò)充。

通過對(duì)產(chǎn)品的界面和行為進(jìn)行交互設(shè)計(jì)，讓產(chǎn)品和它的使用者之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到使用者的目標(biāo)，這就是交互設(shè)計(jì)的目的。

二、交互設(shè)計(jì)常用原則和定律有哪些？

尼爾森十大可用性原則

1、狀態(tài)可見原則

系統(tǒng)應(yīng)該讓用戶時(shí)刻清楚當(dāng)前發(fā)生了什么事情，也就是快速的讓用戶了解自己處于何種狀態(tài)、對(duì)過去發(fā)生、當(dāng)前目標(biāo)、以及對(duì)未來去向有所了解，一般的方法是在合適的時(shí)間給用戶適當(dāng)?shù)姆答仯乐褂脩羰褂贸霈F(xiàn)錯(cuò)誤。

即在用戶操作界面功能時(shí)給予實(shí)時(shí)反饋，例如：頁(yè)面加載狀態(tài)提示、按鈕點(diǎn)擊后的狀態(tài)變化、進(jìn)度條提示等。

2、環(huán)境貼切原則

設(shè)計(jì)的一切表現(xiàn)和表述，盡可能貼近用戶所在的環(huán)境，將現(xiàn)實(shí)環(huán)境的操作功能巧妙的轉(zhuǎn)化為線上功能，使其貼近用戶。使用用戶能聽懂的專業(yè)術(shù)語，涉及到專業(yè)化語言時(shí)要轉(zhuǎn)化成用戶熟悉的語言。

即模擬真實(shí)的事物，使用戶更容易理解。例如：天氣應(yīng)用中的天氣插圖、音樂播放器的膠片都是生活中熟悉的場(chǎng)景和物品，降低理解成本。

3、操作可控原則

對(duì)于用戶的誤操作，提供二次確認(rèn)或者撤銷的功能，這樣可提高用戶的操作可控性。

例如：刪除聯(lián)系人二次確認(rèn)提示、消息可撤回操作。

4、一致性原則

遵循統(tǒng)一的產(chǎn)品設(shè)計(jì)規(guī)范／邏輯。這里的一致性包含產(chǎn)品和跨平臺(tái)產(chǎn)品之間的一致性。

一致性包含視覺交互、文案描述、組建樣式等，例如：微信小程序設(shè)計(jì)規(guī)范。

5、防錯(cuò)原則

設(shè)置防錯(cuò)的機(jī)制，減少用戶犯錯(cuò)。在用戶選擇動(dòng)作發(fā)生之前，就要防止用戶容易混淆或者錯(cuò)誤的選擇。

例如：用戶名稱校驗(yàn)提示、手機(jī)號(hào)碼位數(shù)限制等。

6、易取原則

減少用戶記憶負(fù)荷，在適合的時(shí)機(jī)給用戶需要獲取的信息。

例如：驗(yàn)證碼讀取、找人轉(zhuǎn)賬提示等。

7、靈活高效原則

提供靈活的操作和高效的獲取信息能力。

例如：手機(jī)號(hào)碼一鍵登錄、消息關(guān)鍵字識(shí)別等。

8、優(yōu)美簡(jiǎn)約原則

保留產(chǎn)品最主要的信息，如果不是優(yōu)先級(jí)最高，要盡一切可能避免去影響產(chǎn)品的簡(jiǎn)潔和美觀。

9、容錯(cuò)原則

用戶在使用產(chǎn)品過程中出現(xiàn)了問題，及時(shí)準(zhǔn)確的告知用戶出現(xiàn)問題的原因。

例如：信息輸入提示、搜索無結(jié)果等。

10、提供人性化幫助

在用戶需要的時(shí)候提供必要的幫助說明。

例如：新功能引導(dǎo)、解釋說明文案等。

七個(gè)交互設(shè)計(jì)定律

1、菲茲定律

點(diǎn)擊一個(gè)目標(biāo)的時(shí)間同以下兩個(gè)因素有關(guān)：

（1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長(zhǎng)，所用時(shí)間越長(zhǎng)；

（2）目標(biāo)的大?。⊿）。目標(biāo)越大，所用時(shí)間越短。

該定律經(jīng)常運(yùn)用于鼠標(biāo)從點(diǎn)A到點(diǎn)B的運(yùn)動(dòng)。

例如常用按鈕的尺寸設(shè)計(jì)等。

2、?？硕?

一個(gè)人面臨的選擇（n）越多，所需要作出決定的時(shí)間（T）就越長(zhǎng)。

交互設(shè)計(jì)中要合理設(shè)置選項(xiàng)，以免用戶使用中決策時(shí)間過長(zhǎng)，降低使用效率。

3、米勒7±2定律

喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7（±2）項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。

例如：手機(jī)號(hào)碼的分位顯示、應(yīng)用中標(biāo)簽欄數(shù)量等

4、鄰近性法則

人們通常將距離近的事物劃分為一組。

界面設(shè)計(jì)中可以用對(duì)象間的相對(duì)距離來區(qū)分信息層級(jí)。

5、復(fù)雜性守恒定律

每個(gè)應(yīng)用程序都具有其內(nèi)在的、無法簡(jiǎn)化的復(fù)雜度。無論在產(chǎn)品開發(fā)環(huán)節(jié)還是在用戶與產(chǎn)品的交互環(huán)節(jié)，這一固有的復(fù)雜度都無法依照我們的意愿去除，只能設(shè)法調(diào)整、平衡。

例如：在智能手機(jī)出現(xiàn)之前，手機(jī)上的操作按鈕都是實(shí)體按鈕。在智能手機(jī)出現(xiàn)手，手機(jī)被整個(gè)屏幕占據(jù)后，所有的操作都集合在了手機(jī)系統(tǒng)之中，等于把物理操作轉(zhuǎn)移到了系統(tǒng)操作中，其本身的功能復(fù)雜程度并沒有發(fā)生改變，只是轉(zhuǎn)移了而已。

6、防錯(cuò)原則

大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。因此，在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制；在此，特別要注意在用戶操作具有毀滅性效果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤。

例如：登錄時(shí)用戶名校驗(yàn)，手機(jī)號(hào)碼位數(shù)限制等。

7、奧卡姆剃刀原則

“切勿浪費(fèi)較多東西去做，用較少的東西，同樣可以做好的事情。

”這個(gè)原理稱為“如無必要，勿增實(shí)體”，即“簡(jiǎn)單有效原理”。

在設(shè)計(jì)中可以使用戶關(guān)注最主要的信息而非其它無關(guān)緊要的事物，從而提升使用效率。

三、交互設(shè)計(jì)如何開展工作

首先在交互設(shè)計(jì)師拿到需求后不要急著打開軟件開始繪制線框圖，而是要先分析需求，了解產(chǎn)品的戰(zhàn)略層和范圍層的業(yè)務(wù)目標(biāo)。把握產(chǎn)品設(shè)計(jì)大方向，只有方向?qū)α撕竺娴墓ぷ鞑攀怯袃r(jià)值的。

把握了產(chǎn)品方向，下面就該進(jìn)行需求的分析，

首先針對(duì)需求考慮5個(gè)問題：

1、為什么要做這個(gè)功能？（業(yè)務(wù)需求）

2、產(chǎn)品期望得到怎樣的成果？（業(yè)務(wù)目標(biāo)）

3、誰來使用？（目標(biāo)用戶）

4、他們要怎樣使用？（用戶需求）

5、如何讓他們都來使用？（將業(yè)務(wù)目標(biāo)轉(zhuǎn)化為用戶行為）

清楚這5個(gè)問題后，再根據(jù)交互設(shè)計(jì)流程進(jìn)行一步一步的進(jìn)行

這實(shí)際上就是對(duì)需求的戰(zhàn)略層分析。

我們進(jìn)一步分析業(yè)務(wù)需求（業(yè)務(wù)目的、業(yè)務(wù)目標(biāo)）和用戶需求（目標(biāo)用戶、用戶體驗(yàn)?zāi)繕?biāo)），把握關(guān)鍵因素（用戶的動(dòng)機(jī)、擔(dān)憂和影響目標(biāo)達(dá)成的障礙）。

歸納這些需求，明確設(shè)計(jì)策略。

將“業(yè)務(wù)目標(biāo)”轉(zhuǎn)化為“用戶行為”，通過引導(dǎo)用戶的使用來幫助產(chǎn)品實(shí)現(xiàn)目標(biāo)。

從設(shè)計(jì)“用戶行為”到設(shè)計(jì)“用戶界面”，用戶行為決定了用戶界面，用戶界面也導(dǎo)致了用戶會(huì)出現(xiàn)什么樣的行為。

設(shè)計(jì)需求分析方法就是要幫助用戶創(chuàng)造動(dòng)機(jī)、排除擔(dān)憂、解決障礙。

四、如何進(jìn)行用戶研究，方法有哪些

評(píng)估的形式及方法

常見的評(píng)估形式分為三類：

1、評(píng)估主體：根據(jù)評(píng)估的主體不同來進(jìn)行區(qū)分，即誰來做評(píng)估。

按照評(píng)估主體來區(qū)分主要有兩個(gè)主體：用戶和專家

用戶評(píng)估主要靠收集用戶使用數(shù)據(jù)，也就是用戶測(cè)試，它的數(shù)據(jù)相對(duì)客觀，但時(shí)間和費(fèi)用較多，評(píng)估范圍較窄。

專家評(píng)估是讓工程師及設(shè)計(jì)師等專家基于自身的專業(yè)知識(shí)和經(jīng)驗(yàn)進(jìn)行評(píng)估的一種方式。專家評(píng)估相對(duì)主觀，但費(fèi)時(shí)少、費(fèi)用少、評(píng)估范圍窄。

兩種評(píng)估方法可以相互補(bǔ)充，并結(jié)合使用。

2、評(píng)估性質(zhì)：例如定性評(píng)估、定量評(píng)估或著其它方式。

按照評(píng)估的性質(zhì)來區(qū)分可以分為定量評(píng)估和定性評(píng)估。

定量評(píng)估是指對(duì)可以計(jì)量的部分進(jìn)行評(píng)價(jià)，如點(diǎn)擊量、使用率等，可以用數(shù)據(jù)來說明。

定性評(píng)估是指對(duì)非計(jì)量性的部分進(jìn)行評(píng)價(jià)，如流暢度、舒適性、創(chuàng)造性等進(jìn)行評(píng)價(jià)。它只能表示一個(gè)度，無法準(zhǔn)確用數(shù)據(jù)來說明問題。

3、評(píng)估過程：按照評(píng)估的過程來進(jìn)行區(qū)分。

從評(píng)估的過程來區(qū)分可以分為理性評(píng)估和感性評(píng)估。

理性評(píng)估相對(duì)客觀，從客觀的角度出發(fā)判斷客觀事物。

感性評(píng)估更為主觀，評(píng)估結(jié)果并沒有客觀規(guī)律。

在實(shí)際應(yīng)用中也需要將理性評(píng)估和感性評(píng)估結(jié)合使用，才能完整的完成我們的任務(wù)，達(dá)到我們的目標(biāo)。

常見的評(píng)估方法有四種：

1、原型評(píng)估方法：在產(chǎn)品研發(fā)過程中，對(duì)于界面設(shè)計(jì)以及程序的測(cè)試來獲得用戶的反饋是至關(guān)重要的。以用戶為中心和交互式設(shè)計(jì)的重要因素之一就是原型方法，原型方法的目的是將界面設(shè)計(jì)與用戶的需求進(jìn)行匹配。

一般來說原型評(píng)估方法分為三大類型：

（1）快速原型：原型迅速成型并分配實(shí)施，在原型實(shí)驗(yàn)收集的信息基礎(chǔ)上，系統(tǒng)從草案中得以完善。

（2）增量原型：應(yīng)用與大型系統(tǒng)，從系統(tǒng)的基本骨架開始，需要階段性的安裝，及系統(tǒng)的本質(zhì)特征是在初次安裝完成后允許階段性測(cè)試，以減少遺漏的重要特征。

（3）演化原型：對(duì)前期的設(shè)計(jì)原型不斷進(jìn)行補(bǔ)充和優(yōu)化，直到成為最后的系統(tǒng)。

2、簡(jiǎn)易測(cè)試評(píng)估方法

在條件不允許的情況下，可以采取簡(jiǎn)易的方法來對(duì)用戶體驗(yàn)進(jìn)行評(píng)價(jià)。步驟是：

（1）實(shí)驗(yàn)室環(huán)境準(zhǔn)備：準(zhǔn)備好測(cè)試用的電腦或其他媒介。兩個(gè)房間，房間1用來對(duì)被測(cè)試者進(jìn)行測(cè)試，房間2用于設(shè)計(jì)師和工程師的觀察。

（2）被試選擇：分為用戶組和專家組。

（3）進(jìn)行測(cè)試：房間1中被試者根據(jù)自己的選擇進(jìn)行操作和測(cè)試，同時(shí)說出自己的內(nèi)心想法，觀察員在調(diào)查表上記錄被試者的每一次的操作情況，包括出錯(cuò)情況和被試者的口語描述，當(dāng)被試者在測(cè)試過程中遇到困難或操作無法進(jìn)行時(shí)，觀察員要給予一定的客觀提示。房間2中通過相關(guān)設(shè)備將房間1的情況傳輸?shù)椒块g2，設(shè)計(jì)師和工程師實(shí)時(shí)觀察和記錄被試者的情況，以便今后對(duì)產(chǎn)品做進(jìn)一步的修改和完善。

（4）結(jié)果分析：通過多次測(cè)試后，將測(cè)試結(jié)果匯總，提取出交互設(shè)計(jì)中存在的問題，以及對(duì)交互設(shè)計(jì)有益的建議形成測(cè)試報(bào)告。

3、眼動(dòng)評(píng)估方法

眼動(dòng)追蹤可以用來評(píng)價(jià)對(duì)產(chǎn)品（包括硬件產(chǎn)品和軟件產(chǎn)品）設(shè)計(jì)的感性意象，評(píng)測(cè)產(chǎn)品設(shè)計(jì)特征。眼動(dòng)評(píng)估的主要指標(biāo)有注視熱點(diǎn)圖、搜索過程測(cè)量指標(biāo)、興趣區(qū)域即用戶視覺注意的焦點(diǎn)區(qū)?？梢越Y(jié)合口語分析法了解用戶的所想 和所做。

4、腦電評(píng)估方法

通過對(duì)腦電信號(hào)的分析，研究者可以探索大腦的認(rèn)知加工過程和受試者的心理狀況。近年來腦電評(píng)估方法在人機(jī)交互心理學(xué)等領(lǐng)域應(yīng)用廣泛，被用來評(píng)估交互設(shè)計(jì)、人機(jī)界面、產(chǎn)品設(shè)計(jì)等方面的內(nèi)容。但是腦電評(píng)估也有一定的缺陷，例如空間分辨率上的局限性，因而對(duì)某些認(rèn)知過程和腦區(qū)的定位并不是很準(zhǔn)確。第二，在許多相似的實(shí)驗(yàn)研究中，由于研究者采用了不同的實(shí)驗(yàn)材料和方法等，實(shí)驗(yàn)結(jié)果也存在差異性。第三 ，由于采集記錄時(shí)間的滯后性，腦電所記錄的并不一定是當(dāng)下被試者所想到的內(nèi)容。

采取哪種方法來開展用戶測(cè)試和評(píng)估，要根據(jù)不同的任務(wù)結(jié)合不同的環(huán)境來開展，比如：時(shí)間、成本、資源等。

啟發(fā)式評(píng)估法

是專家評(píng)估法的一種，也被稱為經(jīng)驗(yàn)性評(píng)估，最初由Nielsen博士提出。簡(jiǎn)單來說，啟發(fā)式評(píng)估是一種簡(jiǎn)易的可用性評(píng)估方法，使用一套相對(duì)簡(jiǎn)單、通用、有啟發(fā)性的可用性原則，讓幾個(gè)評(píng)審根據(jù)專業(yè)知識(shí)和經(jīng)驗(yàn)來進(jìn)行評(píng)估，發(fā)現(xiàn)產(chǎn)品潛在的可用性問題。

啟發(fā)式評(píng)估的兩大要素：評(píng)估者和評(píng)估參照的原則。   

對(duì)評(píng)估者的要求主要有四個(gè)方面：

（1）人數(shù)：推薦3-5人，有時(shí)會(huì)更少

（2）知識(shí)：最好同時(shí)具有可用性知識(shí)及設(shè)計(jì)知識(shí)

（3）身份：最好是非設(shè)計(jì)者本人，否者不具有客觀性

（4）崗位：設(shè)計(jì)師或用戶研究員

評(píng)估參照的原則有：尼爾森十大可用性原則、八項(xiàng)黃金法則、首頁(yè)可用性指南、ios設(shè)計(jì)指南、拓展原則、HHS網(wǎng)頁(yè)設(shè)計(jì)與可用性指南等。具體需要根據(jù)實(shí)際項(xiàng)目來選擇，常用的是尼爾森十大交互原則。

什么時(shí)候適合使用啟發(fā)式評(píng)估法？

交互設(shè)計(jì)和UI設(shè)計(jì)階段、測(cè)試優(yōu)化和產(chǎn)品發(fā)布后的階段。

啟發(fā)式評(píng)估的優(yōu)缺點(diǎn)有哪些？

優(yōu)點(diǎn)：成本低、效率高、發(fā)現(xiàn)大多數(shù)可用性問題，甚至是用戶測(cè)試時(shí)不會(huì)出現(xiàn)的問題。

缺點(diǎn)：不能代表真實(shí)用戶，相對(duì)主觀、有時(shí)候發(fā)現(xiàn)問題過多、對(duì)評(píng)估人員知識(shí)背景要求較高。

什么時(shí)候適用？

（1）適合時(shí)間、資源有限的情況下快速發(fā)現(xiàn)可用性問題，降低風(fēng)險(xiǎn)及成本。

（2）版本變動(dòng)不大的情況下，小成本檢驗(yàn)。

（3）作為可用性測(cè)試的之前準(zhǔn)備。

啟發(fā)式評(píng)估流程是什么？

（1）準(zhǔn)備階段：確定范圍、背景調(diào)查、參考評(píng)估原則、評(píng)委邀約、材料準(zhǔn)備

（2）執(zhí)行階段：任務(wù)走查、整體走查、結(jié)果記錄

（3）分析階段：匯總討論、報(bào)告總結(jié)、優(yōu)化方案

可用性測(cè)試

先來看一下我們?cè)谄綍r(shí)工作中常常會(huì)聽到這樣的問題

產(chǎn)品經(jīng)理：我們的用戶覺得產(chǎn)品好不好用？使用過程中會(huì)不會(huì)遇到問題？他們是否滿意？

設(shè)計(jì)師：設(shè)計(jì)的過程有一些糾結(jié)的地方，不知道實(shí)際用戶是怎么理解和操作的怎么辦？

產(chǎn)品開發(fā)后：想在大推前檢驗(yàn)一下產(chǎn)品是否靠譜，適不適合大推？

當(dāng)我們遇到這樣的一些問題時(shí)，如何找到方法快速得到答案呢？

那就是接下來要介紹的可用性測(cè)試方法。

可用性測(cè)試是一種常用的、高效的方法。

它的定義是：通過觀察具有代表性的用戶，完成產(chǎn)品的典型任務(wù)，從而找出產(chǎn)品可用性問題并解決，目的是為了改善產(chǎn)品，讓產(chǎn)品更容易使用。

什么時(shí)候適合做可用性測(cè)試呢？

一般是在：交互設(shè)計(jì)或UI設(shè)計(jì)、測(cè)試優(yōu)化、正式發(fā)布三個(gè)階段來做。當(dāng)然是越早做越好，可以盡早發(fā)現(xiàn)問題并及時(shí)調(diào)整。

類型分為兩種：形成式和總結(jié)式

形成式特點(diǎn)：小樣本、發(fā)現(xiàn)問題為主、不能做定量對(duì)比。

總結(jié)式特點(diǎn)：大樣本（30人以上）、定量的評(píng)估、可以做對(duì)比評(píng)估

可用性測(cè)試可以解決什么樣的問題？

1、發(fā)現(xiàn)問題，產(chǎn)品在體驗(yàn)上是否存在問題

2、檢驗(yàn)實(shí)現(xiàn)，期望的設(shè)計(jì)目的有沒有達(dá)成，是否滿足了用戶的期望

3、產(chǎn)品評(píng)估，用戶是否會(huì)滿意

4、理解用戶，了解用戶行為習(xí)慣，了解用戶認(rèn)知，找到某些問題的原因

測(cè)試流程是什么？

整體上分為4個(gè)階段：1、準(zhǔn)備  2、測(cè)試  3、分析  4、優(yōu)化

1、準(zhǔn)備階段要做的有哪些？

確定目標(biāo)：確定測(cè)試目標(biāo)決定了后面測(cè)試過程要怎樣去設(shè)計(jì)

常見的測(cè)試目標(biāo)有：

·對(duì)整個(gè)產(chǎn)品做可用性評(píng)估

·對(duì)新增的功能模塊進(jìn)行評(píng)估

·提前觀察新方案對(duì)新老用戶有怎樣的影響

·提前檢測(cè)改版是否達(dá)到預(yù)計(jì)目標(biāo)

·設(shè)計(jì)時(shí)存在爭(zhēng)議，如何選擇解決方案

·某個(gè)環(huán)節(jié)流失率較高，檢測(cè)是否為設(shè)計(jì)原因?qū)е?

·需要拓展某一類特殊用戶，測(cè)試針對(duì)這類用戶在設(shè)計(jì)上是否需要作出調(diào)整

準(zhǔn)備測(cè)試方案

方案中應(yīng)當(dāng)包含以下內(nèi)容：

·測(cè)試目的：明確測(cè)試的目的及范圍，測(cè)試目的決定了測(cè)試方案

·測(cè)試關(guān)注點(diǎn)：與負(fù)責(zé)的設(shè)計(jì)師一起梳理測(cè)試中要關(guān)注的問題

·用戶招募：招募要求，樣本配比，招募渠道

·經(jīng)費(fèi)預(yù)算：獎(jiǎng)勵(lì)的形式和額度

·時(shí)間計(jì)劃：用于把控時(shí)間計(jì)劃

撰寫測(cè)試腳本：設(shè)計(jì)測(cè)試任務(wù)，通過用戶行為去觀察提問來獲得我們想要的內(nèi)容

基本的流程有：

·暖場(chǎng)：3min，簡(jiǎn)單聊天，消除用戶的緊張情緒

·測(cè)試說明：2min，對(duì)測(cè)試內(nèi)容規(guī)則做說明

·測(cè)試前訪談：10min，了解用戶基本信息

·簡(jiǎn)單試用：3min，讓用戶熟悉產(chǎn)品

·測(cè)試執(zhí)行：30-45min，提示任務(wù)并觀察

·事后訪談：15min，針對(duì)疑點(diǎn)問點(diǎn)追問，填寫評(píng)價(jià)表

·道別：5min，支付禮金，送用戶離開

招募用戶

招募什么樣的用戶呢？

·根據(jù)測(cè)試目的來定，找出與測(cè)試目標(biāo)有關(guān)的篩選緯度

·特別考慮用戶使用行為相關(guān)的特征，例如競(jìng)品使用經(jīng)驗(yàn)，使用產(chǎn)品的目的，用戶的活躍度等

·挑選最核心的緯度，轉(zhuǎn)化成用戶招募的條件，并盡量客觀化，具體化，可衡量

·避免設(shè)置交叉條件過多，導(dǎo)致樣本代表性降低

·學(xué)會(huì)辨別真假的用戶信息

招募多少用戶合適？

·以發(fā)現(xiàn)問題為目的快速可用性測(cè)試，6-8名即可

·考慮產(chǎn)品的復(fù)雜性，覆蓋人群差異性，適當(dāng)做調(diào)整，拓展到10-15名

招募渠道有哪些？

·公司內(nèi)部

·現(xiàn)有產(chǎn)品用戶庫(kù)

·公司其他產(chǎn)品用戶庫(kù)

·熟人，朋友等

·推廣渠道：官微、公眾號(hào)、門戶網(wǎng)等

·社區(qū)，論壇，qq群等

·第三方調(diào)研公司

準(zhǔn)備測(cè)試素材：低保真或高保真原型，或線上已經(jīng)可以使用的產(chǎn)品，也可以準(zhǔn)備一些量表工具來輔助測(cè)試。在測(cè)試

過程中需要用到的電腦或手機(jī)設(shè)備，攝像頭，紙，筆，桌椅等。

測(cè)試場(chǎng)地選擇：

·專業(yè)可用性測(cè)試實(shí)驗(yàn)室：一般對(duì)測(cè)試質(zhì)量要求較高，旁聽人數(shù)較多且需要采集豐富的數(shù)據(jù)的時(shí)候采用此方法。實(shí)驗(yàn)室有兩個(gè)房間，一個(gè)測(cè)試間，一個(gè)觀察間，中間有單向玻璃分隔。測(cè)試間中有多角度的攝像頭，用來記錄測(cè)試過程，觀察間可以同步看到測(cè)試間里的情況，

·普通測(cè)試環(huán)境：在觀察人數(shù)較少（小于3人），條件有限時(shí)使用。

預(yù)測(cè)試階段：正式測(cè)試前進(jìn)行預(yù)測(cè)試，保證測(cè)試流程通暢

·走查：記錄可能出現(xiàn)的問題

·預(yù)測(cè)試：找人先測(cè)試一下

·調(diào)整：調(diào)整測(cè)試流程

正式測(cè)試階段

測(cè)試參與人員有

·主持人：引導(dǎo)整個(gè)測(cè)試流程

·記錄員：記錄操作行為，訪談內(nèi)容，發(fā)現(xiàn)問題等

·產(chǎn)品團(tuán)隊(duì)：參與旁聽，觀察，結(jié)束后交流

·用戶：完成測(cè)試及訪談任務(wù)

測(cè)試過程中需要觀察的要點(diǎn)：

·用戶是否獨(dú)立完成了任務(wù)

·是否存在無效操作或不知所措的情況

·用戶是否滿意

結(jié)果分析

邊測(cè)試邊總結(jié)，越及時(shí)越好

·測(cè)試完一個(gè)用戶，做一次小結(jié)

·測(cè)試結(jié)束當(dāng)天寫小結(jié)，與設(shè)計(jì)師當(dāng)場(chǎng)討論

·重要問題反饋后再總結(jié)分析報(bào)告

·邊測(cè)邊改，邊改邊測(cè)

結(jié)果分析4個(gè)步驟：1、對(duì)發(fā)現(xiàn)分類  2、整理不確定項(xiàng)  3、評(píng)定優(yōu)先級(jí)  4、結(jié)果記錄

撰寫報(bào)告

從4個(gè)方面來寫：

·總體如何

·有哪些問題

·嚴(yán)重程度如何

·建議是什么

·除此之外，還可以圍繞關(guān)注的問題，未滿足需求補(bǔ)充分析

優(yōu)化跟蹤

在測(cè)試之后需要出優(yōu)化的方案，測(cè)試優(yōu)化的過程是循環(huán)的。

測(cè)試之后如果還有其他問題沒有得到解決，可以結(jié)合其他的一些測(cè)試方法來得到。

問卷調(diào)研

問卷調(diào)查法是以書面提出問題的方式搜集數(shù)據(jù)的一種研究方法，研究者將所要研究的問題編制成問題表格，讓受訪對(duì)象以郵寄、當(dāng)面作答、在線作答或追蹤訪問的方式填寫，從而了解被試者對(duì)某一現(xiàn)象或問題的看法和意見。問卷調(diào)研可以用于需求挖掘階段，也可以用于產(chǎn)品上線后的評(píng)估階段。

如果是想了解用戶對(duì)產(chǎn)品上線后的滿意度，可以使用問卷調(diào)研的方法。它比較適合去了解用戶的認(rèn)知態(tài)度，也可以附帶了解用戶的行為習(xí)慣，

問卷調(diào)研的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：統(tǒng)一性、靈活性、量化性、匿名性

缺點(diǎn)：（1）只能獲得書面的信息，而不能了解到生動(dòng)、具體的情況。（2）缺乏彈性，很難做深入的定性調(diào)研。（3）調(diào)查者難以了解被調(diào)查者是否認(rèn)真作答，是不是自己填寫的。（4）填寫問卷比較容易，有些別調(diào)查者會(huì)隨意選擇，或者按照社會(huì)主流觀點(diǎn)選擇，這樣會(huì)使調(diào)查失去真實(shí)性。（5）回復(fù)效率低，對(duì)無回答者的研究比較困難。

問卷調(diào)查的使用場(chǎng)景

適用于：（1）需要進(jìn)行定量分析的調(diào)研。（2）需要匿名進(jìn)行調(diào)研的問題。（3）對(duì)已有假設(shè)進(jìn)行檢驗(yàn)。（4）尋找問題隱藏的關(guān)聯(lián)。（5）對(duì)產(chǎn)品設(shè)計(jì)用戶認(rèn)知及態(tài)度的評(píng)估。

不適用于：（1）發(fā)現(xiàn)和描述具體問題。（2）探索受訪對(duì)象的模糊態(tài)度。（3）獲取創(chuàng)新想法。（4）獲取精確的行為數(shù)據(jù)。

問卷調(diào)研流程

1、確定目標(biāo)：確定調(diào)研目的、對(duì)象、分析目的和應(yīng)用對(duì)象。

2、調(diào)研方案：通過訪談、經(jīng)驗(yàn)、理論等，確定調(diào)研框架，題目選項(xiàng)，分析思路，投放渠道，相本配比等。

3、問卷設(shè)計(jì)：?jiǎn)柧碓O(shè)計(jì)，問題美化，投放渠道。

4、問卷測(cè)試：多人測(cè)試，確保問卷的可讀性，邏輯通暢

5、問卷投放：按照計(jì)劃好的投放渠道進(jìn)行投放，回收數(shù)據(jù)，數(shù)據(jù)清洗

6、問卷分析及填寫報(bào)告：分析及報(bào)告填寫，調(diào)研結(jié)果落地

數(shù)據(jù)分析

概述：通過在網(wǎng)站或應(yīng)用中進(jìn)行數(shù)據(jù)埋點(diǎn)，獲取用戶對(duì)產(chǎn)品的使用和行為數(shù)據(jù)，并進(jìn)行基于產(chǎn)品體驗(yàn)優(yōu)化的數(shù)據(jù)進(jìn)行分析。

數(shù)據(jù)分析可以做什么？

1、可以做到用戶從哪里來，來了多少

2、獲取用戶屬性，用戶地域，用戶設(shè)備

3、訪問了哪些頁(yè)面，使用了哪些功能，消費(fèi)了多少錢，消耗了多少時(shí)間

4、哪些流量可能存在問題，忠誠(chéng)度如何，活躍度如何，有沒有達(dá)到目標(biāo)，和行業(yè)相比如何

5、流失情況如何，離開之后是否還回來

可以作為產(chǎn)品的眼鏡和大腦，提供客觀衡量的依據(jù)，可以持續(xù)優(yōu)化改進(jìn)。

數(shù)據(jù)獲取方式的對(duì)比

日志文件：優(yōu)勢(shì)，完整的服務(wù)端請(qǐng)求記錄。

                  缺點(diǎn)，日志的獲取和清洗有過濾成本，許多頁(yè)面操作無法記錄。

JS頁(yè)面標(biāo)記：優(yōu)勢(shì)，數(shù)據(jù)獲取可控、靈活，可以對(duì)頁(yè)面操作記錄進(jìn)行記錄，獲取數(shù)據(jù)比較完整豐富。

                      缺點(diǎn)，需要在頁(yè)面植入JS標(biāo)記代碼，某些情況下無法獲取，如當(dāng)用戶禁用JS功能時(shí)。

常用的數(shù)據(jù)監(jiān)控平臺(tái)

1、第三方監(jiān)控平臺(tái)：如Google Analytics、百度統(tǒng)計(jì)、騰訊云分析等

2、自研平臺(tái)

數(shù)據(jù)分析流程

1、監(jiān)控  2、定義  3、埋點(diǎn)  4、測(cè)量  5、分析  6、優(yōu)化

Web分析常用的指標(biāo)

PV：是指頁(yè)面瀏覽量，網(wǎng)頁(yè)瀏覽數(shù)實(shí)施評(píng)價(jià)網(wǎng)站流量最常用的指標(biāo)之一，用戶每一次訪問網(wǎng)站中的頁(yè)面均被記錄，對(duì)統(tǒng)一頁(yè)面多次訪問，訪問量累計(jì)

UV：是指獨(dú)立訪客，是通過互聯(lián)網(wǎng)訪問、瀏覽這個(gè)頁(yè)面的自然人

UPV：是指唯一身份綜合瀏覽量

訪問：是指在一定時(shí)間范圍內(nèi)，網(wǎng)站所有訪問者對(duì)網(wǎng)站發(fā)起訪問的總次數(shù)，從訪客來到網(wǎng)站到最終關(guān)閉網(wǎng)站所有頁(yè)面，記為一次訪問

識(shí)別用戶的方式：IP、IP+User Agent、cookie、User ID、設(shè)備ID、其他

復(fù)合指標(biāo)

跳出率：指用戶來到網(wǎng)站，只瀏覽了一個(gè)頁(yè)面就離開的訪問次數(shù)，占全部訪問次數(shù)的百分比，簡(jiǎn)稱“來了就走”。跳出率可以被用來衡量流量和頁(yè)面質(zhì)量，高跳出率表示訪問者對(duì)著陸頁(yè)面不感興趣，沒有繼續(xù)訪問更深入的頁(yè)面。也可能頁(yè)面設(shè)計(jì)存在問題，也可能是導(dǎo)入的用戶不匹配。跳出率可以通過調(diào)整廣告渠道，優(yōu)化頁(yè)面內(nèi)容來降低。

退出率：訪問者離開網(wǎng)站一次被記錄為一次退出，某一范圍內(nèi)退出的數(shù)量/該范圍的綜合訪問量就是退出率。如果關(guān)鍵流程中的某一頁(yè)面退出率高，代表某一頁(yè)面可能出現(xiàn)了問題。

訪問時(shí)長(zhǎng)：網(wǎng)站停留時(shí)長(zhǎng)，頁(yè)面停留時(shí)長(zhǎng)，應(yīng)用使用時(shí)長(zhǎng)。訪問量是訪問質(zhì)量的一個(gè)衡量指標(biāo)，較長(zhǎng)的訪問時(shí)間說明用戶與產(chǎn)品進(jìn)行了較多的互動(dòng)。

訪問深度：可以理解為單個(gè)用戶平均訪問的頁(yè)面數(shù)，是PV/UV的比值。訪問深度也是訪問質(zhì)量的一個(gè)衡量指標(biāo)，可以考察用戶是否和網(wǎng)站進(jìn)行了較多互動(dòng)。這個(gè)比值越大，代表網(wǎng)站的粘性越高。

轉(zhuǎn)化率：指在一個(gè)統(tǒng)計(jì)周期內(nèi)，完成轉(zhuǎn)化目標(biāo)行為的次數(shù)占總訪問次數(shù)的比率。根據(jù)設(shè)置不同目的進(jìn)行計(jì)算，例如注冊(cè)轉(zhuǎn)化率、付款轉(zhuǎn)化率等，是一個(gè)重要的分析指標(biāo)。

移動(dòng)端基礎(chǔ)指標(biāo)

移動(dòng)端的基礎(chǔ)指標(biāo)監(jiān)測(cè)與web端略有不同，但分析思路大致相同。指標(biāo)分為：新增設(shè)備、累計(jì)設(shè)備、啟動(dòng)次數(shù)、單詞使用時(shí)長(zhǎng)。

常見分析內(nèi)容

流量分析（哪里來？）、用戶分析（什么樣的用戶？）、行為分析（如何使用的？）、路徑轉(zhuǎn)化（表現(xiàn)如何？）、流失分析（粘性如何？）

A/B test

A/B測(cè)試是一種幫助網(wǎng)頁(yè)優(yōu)化實(shí)驗(yàn)的方法。A/B測(cè)試的目的在于通過科學(xué)的實(shí)驗(yàn)設(shè)計(jì)和采集數(shù)據(jù)的方式，來獲得具有代表性的實(shí)驗(yàn)結(jié)論，從而尋找到更好的產(chǎn)品策略。

簡(jiǎn)單來說，就是為同一目標(biāo)制定兩個(gè)方案，讓一部分用戶使用A方案，另一部分使用B方案，記錄用戶的使用情況，對(duì)比兩個(gè)方案的結(jié)果，選擇更符合的方案。

A/B test一般會(huì)在產(chǎn)品改版正式上線之前使用，來驗(yàn)證新的設(shè)計(jì)是否可以提高產(chǎn)品的表現(xiàn)。

A/B test可以測(cè)試的元素有：標(biāo)題、圖片、顏色、社交元素、段落文本、按鈕、導(dǎo)航、任務(wù)流程、頁(yè)面布局、價(jià)格、視頻等?？梢淮沃桓淖円粋€(gè)元素或一次改變多個(gè)元素的方式來測(cè)試，這就是兩個(gè)測(cè)試類型單變量測(cè)試和多變量測(cè)試。

A/B test工具

Google Website Optimizer：搜索巨頭提供的免費(fèi)A/B test工具，一個(gè)很好的入門級(jí)工具，但是沒有一些先進(jìn)的功能。

Visual Website Optimizer：一個(gè)易于使用的A/Btest測(cè)試工具，包含功能有所見即所得的編輯器，單機(jī)地圖，訪問者分割和標(biāo)簽等。

Unbounce and Performable：集成著陸設(shè)計(jì)的A/B測(cè)試工具。

Vertster,SiteSpect,Webtrends Optimize and Omniture's Test&Target：企業(yè)級(jí)測(cè)試工具

App Adhoc Optimizer：國(guó)內(nèi)A/B Test工具，同時(shí)支持前端（Web/H5、IOS、Android）及后端（Node.JS、PHP、Java）AB測(cè)試服務(wù)的專業(yè)Saas平臺(tái)

Optimizely：是網(wǎng)上現(xiàn)有的最專業(yè)的AB測(cè)試工具之一，它的價(jià)格要比其他的工具高很多（也可以免費(fèi)使用一個(gè)月），它提供了一些非常好的功能。

Unbounce：對(duì)于登錄頁(yè)面的測(cè)試來講非常不錯(cuò)，而且它不僅僅是個(gè)測(cè)試工具，還可以在無需自己編寫任何代碼的情況下來創(chuàng)建登錄頁(yè)面。

如何做A/Btest

1、確定目標(biāo)，例如提高網(wǎng)站的付費(fèi)轉(zhuǎn)化率，降低跳出率等

2、測(cè)試方案，建立假設(shè)：購(gòu)買按鈕的顏色會(huì)影響點(diǎn)擊率？縮短流程可以提高復(fù)費(fèi)率？改變導(dǎo)航可以降低跳出率等？

3、創(chuàng)建相比較的兩個(gè)版本，改變其中的變量

4、發(fā)布測(cè)試，將部分流量導(dǎo)向B方案，但不一定是5：5

5、數(shù)據(jù)分析，收集數(shù)據(jù)，對(duì)比AB版本的轉(zhuǎn)化率、跳出率、留存率等

感謝閱讀！

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

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

于B端，我想剛開始很多同學(xué)就直接拿Ant Design套套界面，因?yàn)楣疽蟛⒉桓?，隨后字節(jié)Arco Design也推出了對(duì)應(yīng)的模版和規(guī)范，能讓我們快速作出一個(gè)不出錯(cuò)的方案。

但是隨著公司對(duì)B端越來越重視，這些模版顯然就太爛大街了。公司、市場(chǎng)的要求顯然不止于此，我們的設(shè)計(jì)追求也不止于此。 

那么我們?nèi)绾尾拍軘[脫套模版，提高界面的精致度，提升界面的交互體驗(yàn)?zāi)兀?

其實(shí)很簡(jiǎn)單，王陽(yáng)明先生告訴我們知行合一，知是行之始行是知之成。我們?nèi)绾尾拍芴嵘鼴端界面端精致度？

第一，需要知道什么是好的設(shè)計(jì)；

第二，需要不斷的去實(shí)踐去練習(xí)，缺一不可。

本文先和大家談?wù)勚膶用?，提高我們的眼界，下面就和大家分享一些不錯(cuò)的B端產(chǎn)品，大家有時(shí)間可以去慢慢體驗(yàn)。 

PS：作為B端設(shè)計(jì)師，一定要去多拆解競(jìng)品，多研究好的產(chǎn)品，別面試的時(shí)候，面試官問你研究的B端產(chǎn)品是什么，你只知道阿里云、騰訊云、百度云哦！ 

1、Hubspot

做B端的同學(xué)，尤其是做CRM的同學(xué)應(yīng)該都知道Salesforce，他是全球最大的 CRM（客戶關(guān)系管理） 工具公司。 

Hubspot同樣是提供客戶管理相關(guān)的應(yīng)用，雖然成立相對(duì)Salesforce晚，但是在市場(chǎng)上也占有一席之地。

從設(shè)計(jì)的角度來看，他的界面風(fēng)格更加簡(jiǎn)潔舒適，從體驗(yàn)上來看和國(guó)內(nèi)的CRM系統(tǒng)完全不同，其體驗(yàn)更加自然和舒適。 

這種風(fēng)格大家看了有沒有覺得很熟悉呢？

大家在去看看 GoDoddy , Airbnb ，Zillow,是不是發(fā)現(xiàn)風(fēng)格有一點(diǎn)類似，大家可以對(duì)比國(guó)內(nèi)產(chǎn)品去拆解下他們的交互細(xì)節(jié)有什么不同，完成同樣的任務(wù)他們采用的方案有何不同，相信你會(huì)有很多的收獲。 

國(guó)外的界面看著總讓人覺得很舒適，僅僅是因?yàn)榭酥频脑O(shè)計(jì)、中性灰使用得好嗎？當(dāng)然不是，是因?yàn)橛⑽谋旧砭褪菆D形化的文字。

如果翻譯成中文，你會(huì)發(fā)現(xiàn)好像不是特別理想。 

這個(gè)樣子拿給領(lǐng)導(dǎo)過稿，怕是分分鐘被拍死，因此我們還是需要多看看國(guó)內(nèi)優(yōu)秀的產(chǎn)品。

2、神策

神策的設(shè)計(jì)，我想B端的朋友不陌生吧，國(guó)內(nèi)產(chǎn)品中他的設(shè)計(jì)一直是我們的參考對(duì)象。

不同于其他產(chǎn)品，他的體驗(yàn)門檻比較低，注冊(cè)后就可以去體驗(yàn)他的demo，也沒有試用期限，參考對(duì)象從可視化報(bào)表，到界面交互均能找到參考。

不過當(dāng)你參考一次后發(fā)現(xiàn)，做出來的界面怎么還是少了一些靈魂，雖然界面風(fēng)格上了一個(gè)臺(tái)階，但為什么用戶還是覺得產(chǎn)品難用。

3、項(xiàng)目管理類

這里不得不和大家推薦項(xiàng)目管理類產(chǎn)品了，這類產(chǎn)品是專門給互聯(lián)網(wǎng)公司的開發(fā)團(tuán)隊(duì)使用，他們都是專業(yè)用戶，同時(shí)這些都是提高他們工作效率的工具，因此這些產(chǎn)品投入的成本更高，優(yōu)化得更好，拆解他們的產(chǎn)品，就是直接觀看高手的成長(zhǎng)之路。

Jira

Jira是Atlassian公司出品的一款事務(wù)管理軟件，JIRA的界面效果交互都非常不錯(cuò)。大型互聯(lián)網(wǎng)公司如LinkedIn、Facebook、eBay等內(nèi)部都在使用Jira。

同時(shí)他也是國(guó)內(nèi)項(xiàng)目管理類產(chǎn)品的學(xué)習(xí)研究對(duì)象，因此大家可以通過文章、B站、界面截圖，自己申請(qǐng)?bào)w驗(yàn)等方式全面的進(jìn)行體驗(yàn)。

同時(shí)也可借助群的力量，調(diào)研下有使用Jira的小伙伴，看看他們?cè)谑褂弥杏惺裁磫栴}，下面是我收集Jira網(wǎng)頁(yè)版和本地配置版的問題截圖，這些都來自不同角色的真實(shí)體驗(yàn)，會(huì)更有分析的價(jià)值。（這部分截圖涉及到公司的數(shù)據(jù)，同時(shí)數(shù)量多不太方便打碼，就不分享給大家了。）

當(dāng)然國(guó)內(nèi)的項(xiàng)目管理類產(chǎn)品也得去看，我們要對(duì)比哪里做得好，哪里還需要改進(jìn)。國(guó)內(nèi)的有Worktile、Gitee、Tower、Ones、PingCode、TAPD、Teambition，這些產(chǎn)品不管從視覺還是體驗(yàn)都非常不錯(cuò)，大家一定要去體驗(yàn)。

5、文檔管理類產(chǎn)品

通過不斷對(duì)競(jìng)品進(jìn)行拆解，你已經(jīng)不是當(dāng)初那個(gè)小白了，你的行業(yè)認(rèn)知，方案設(shè)計(jì)能力應(yīng)該趕超了一大波人。

成長(zhǎng)的同時(shí)，又發(fā)現(xiàn)你設(shè)計(jì)的界面，不太精致，少了些溫度，這時(shí)候推薦你看文檔管理類產(chǎn)品。

WPS

第一個(gè)和大家推薦的是WPS，界面簡(jiǎn)潔，配色舒適。 

飛書

在管理類的軟件中，不得不提飛書的管理界面，從設(shè)計(jì)到使用體驗(yàn)，他給我的感覺終于不是那么千遍一律，用組件庫(kù)搭建起來的感覺。

他開始有了溫度，開始注重品牌感的打造，用戶的引導(dǎo)，符合品牌調(diào)性的插畫。 

對(duì)一些體驗(yàn)的細(xì)節(jié)進(jìn)行優(yōu)化，比如傳統(tǒng)的編輯都是放在頁(yè)面頂部，它采用了離光標(biāo)更近的位置。 

根據(jù)菲茲定律，光標(biāo)當(dāng)前的位置和目標(biāo)位置的距離D越短，所用的時(shí)間越短，具體好不好用，歡迎大家在評(píng)論區(qū)留言哦。 

6、概念稿

到這時(shí)候如果你覺得線上的產(chǎn)品太禁錮思維，那么推薦你看看dribbble、behance，搜索data、web、dashboard等關(guān)鍵詞，去看看有沒有新的靈感。

我的花瓣收集了一部分，如果不嫌棄，可以去看看，順藤摸瓜應(yīng)該可以找到很多不錯(cuò)的設(shè)計(jì)。

圖片標(biāo)題

7、畫重點(diǎn)

如何提升B端界面的精致度？

第一，要知道什么是好的設(shè)計(jì)，多拆解國(guó)內(nèi)外優(yōu)化的B端產(chǎn)品。

第二，多在工作中時(shí)間，有時(shí)間多做ABC方案，鍛煉自己的方案設(shè)計(jì)能力，多踩一些坑，時(shí)刻保持學(xué)習(xí)能力，慢慢就成長(zhǎng)了。

文章來源：UI中國(guó)   作者：風(fēng)箏KK
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

從挑選出的828件作品中，排名前十的作品中9件為B端設(shè)計(jì)，另一件作品也是B端產(chǎn)品C端化的產(chǎn)物。其中：

B端界面設(shè)計(jì)占比476/828，57.4%；

C端界面設(shè)計(jì)占比180/828，21.7%；

視頻動(dòng)效作品占比223/828，26.9%；

能看出其中的比重關(guān)系，B端設(shè)計(jì)再次大火，為什么是再次？因?yàn)锽端設(shè)計(jì)之前火過，只不過沒有趕上一個(gè)好的時(shí)代，在C端設(shè)計(jì)風(fēng)光的十年里而忽略了其存在。隨著C端市場(chǎng)飽和與數(shù)字化的浪潮下，實(shí)體經(jīng)濟(jì)、To B 、To G的產(chǎn)業(yè)再次迎來了它的曙光。視頻動(dòng)效的作品占比也已超過C端界面設(shè)計(jì)，相信今年視頻動(dòng)效作品占比還會(huì)再次提升。

追波年度最佳作品

追波年度最佳作品來自大家最熟悉的UI8團(tuán)隊(duì)中的Tran Mau Tri Tam ，作者來自越南西貢，最佳作品截止目前355K瀏覽量，2933個(gè)贊。

為什么看似平平無奇的作品卻能獲得追波年度最佳作品呢？既不是C端也不是純B端的作品，更像一個(gè)網(wǎng)頁(yè)與平面的結(jié)合體。如果去掉搜索圖標(biāo)、分類圖標(biāo)和按鈕，你可以理解它就是一個(gè)平面作品，一個(gè)字體加幾何形體構(gòu)建的作品，為了豐富畫面的層次，讓畫面更加的活潑采用了多彩加幾何色塊，讓標(biāo)題閱讀有停頓感和呼吸感。faster底部的橫線讓它從標(biāo)題文字中脫穎而出，這種使用線條突出重要信息的設(shè)計(jì)也是今年追波設(shè)計(jì)流行趨勢(shì)之一。

MetroUI是Windows8的界面設(shè)計(jì)語言，在2010年至2013年間曾經(jīng)風(fēng)靡一時(shí)，那也是移動(dòng)互聯(lián)網(wǎng)的發(fā)展元年，現(xiàn)在國(guó)家推行實(shí)體經(jīng)濟(jì)、數(shù)字化帶動(dòng)To B 、To G 的發(fā)展元年，通過幾何色塊（MetroUI）實(shí)現(xiàn)B端產(chǎn)品與C端設(shè)計(jì)風(fēng)格的傳承與銜接，你會(huì)發(fā)現(xiàn)歷史總是驚人的相似。最后背景結(jié)合今年最流行的微軟風(fēng)，毛玻璃的多彩高斯模糊漸變風(fēng)，年度作品當(dāng)之無愧。

最后來看下按鈕的設(shè)計(jì)，正常的按鈕要么文字加色塊，要么左圖標(biāo)加右文字，它設(shè)計(jì)成左文本加右圖標(biāo)，更加注重信息的可讀性和易讀性，也體現(xiàn)B端設(shè)計(jì)重功能和交互體驗(yàn)，視覺點(diǎn)到為止的設(shè)計(jì)理念。

下面我們來欣賞年度最佳作品里面的流行趨勢(shì)吧。

易讀性（停頓感）

字體三原則：可讀性、易識(shí)性、易讀性。當(dāng)你同時(shí)讀一篇文言文和一篇設(shè)計(jì)文章，肯定設(shè)計(jì)文章的內(nèi)容可讀性更好。易識(shí)性是用在字體設(shè)計(jì)上，不能過于浮夸的改變字體骨架、形體而不易識(shí)別。易讀性和每位設(shè)計(jì)師都息息相關(guān)，因?yàn)槲覀兌夹枰幣盼谋?。?dāng)我們小時(shí)候?qū)懽魑臅r(shí)，不會(huì)寫的文字可以用拼音代替。這時(shí)候讀者讀到拼音時(shí)會(huì)有停頓感，更加適合用戶閱讀。

通過給用戶制作停頓感來增加用戶的易讀性?？梢栽谙嚓P(guān)聯(lián)文本后面添加圖片、表情、圖標(biāo)來更好的理解文本內(nèi)容，豐富文本內(nèi)涵。比如情侶間表達(dá)愛意時(shí)會(huì)輸入文本，“我愛你”、“我Love你”、“我ai你”、哪個(gè)更加會(huì)有情感共鳴呢？不言而喻，相信你心中已經(jīng)有答案了。

曲線

在標(biāo)題文字上添加曲線來突出重要文案是2021追波最流行的趨勢(shì)之一，第一個(gè)設(shè)計(jì)目的就是突顯文字，其次就是想表現(xiàn)鉛筆真實(shí)書寫的感覺。之前很多帶有簽名的設(shè)計(jì)中，簽字的文本都是手寫體的感覺，手寫體對(duì)比電腦的機(jī)械字體會(huì)帶有一種人文氣息，也會(huì)讓兩者之間產(chǎn)生一種對(duì)比、矛盾。

除了突顯文本外，曲線還有視覺引導(dǎo)的作用。通過視覺引導(dǎo)讓用戶按照設(shè)計(jì)師編排的順序進(jìn)行瀏覽界面。當(dāng)然還有比這更科學(xué)的工具就是眼動(dòng)儀測(cè)試，通過真實(shí)用戶眼睛瀏覽界面顯示對(duì)應(yīng)的熱點(diǎn)圖。

多彩高斯?jié)u變風(fēng)

多彩高斯?jié)u變風(fēng)是從色彩的角度來傳達(dá)和豐富畫面的，多彩高斯?jié)u變風(fēng)其實(shí)是從制造矛盾到平衡矛盾的過程，多彩漸變多為冷暖對(duì)比來制造畫面的沖突，需要控制冷暖畫面的大小來實(shí)現(xiàn)平衡。主流的還是以暖色突顯為主。多彩漸變主要起到活躍氣氛、吸引目光、平衡畫面的作用。

多彩高斯?jié)u變還可以結(jié)合輕擬物、幾何圖形、三維等新的組合方式去創(chuàng)新，給用戶呈現(xiàn)一種更加新穎的視覺表現(xiàn)形式。最后我們還是要回歸到內(nèi)容上，為了更好的傳達(dá)信息需要去設(shè)計(jì)與內(nèi)容相匹配的視覺風(fēng)格。

B端界面設(shè)計(jì)

側(cè)邊欄Sidebar

B端設(shè)計(jì)的火爆帶動(dòng)了B端相關(guān)模塊設(shè)計(jì)，更多的人也愿意嘗試B端相關(guān)模塊設(shè)計(jì)，側(cè)邊欄作為產(chǎn)品架構(gòu)中重要的導(dǎo)航系統(tǒng)，好的側(cè)邊欄設(shè)計(jì)能為用戶帶來更好的效率。主流側(cè)邊欄都做了展開、收起、拖拽等交互效果，也是受限于PC屏幕為展示更多數(shù)據(jù)而騰空間。側(cè)邊欄主要承擔(dān)的功能有導(dǎo)航、分類、自定義篩選、共享、新增等。追波的B端產(chǎn)品設(shè)計(jì)已經(jīng)不再是假大空概念設(shè)計(jì)，而是一套實(shí)用美觀可落地的設(shè)計(jì)。

儀表盤設(shè)計(jì)

儀表盤設(shè)計(jì)是一個(gè)很好的隱喻，想象一下開摩托車或汽車主駕駛前面的屏幕，汽車儀表有燃油表、車速表、里程表、水溫表、轉(zhuǎn)速表、故障指示燈等。B端類產(chǎn)品后臺(tái)界面的儀表盤設(shè)計(jì)也需要展示一些重要的數(shù)據(jù)和各種狀態(tài)，大體分為側(cè)標(biāo)欄、導(dǎo)航欄、待辦任務(wù)、個(gè)人信息、報(bào)表數(shù)據(jù)、消息中心、快捷入口等。當(dāng)然最重要的就是報(bào)表數(shù)據(jù)，團(tuán)隊(duì)收益、任務(wù)進(jìn)度、轉(zhuǎn)化比例、新增、存量、團(tuán)隊(duì)工作時(shí)長(zhǎng)等都是老板或領(lǐng)導(dǎo)關(guān)心的內(nèi)容。每個(gè)公司業(yè)務(wù)不同、每個(gè)人員權(quán)限不同，自定義的儀表盤也各有差異。重要的是突顯數(shù)據(jù)和業(yè)務(wù)狀態(tài)，需要分層級(jí)系統(tǒng)性去思考和設(shè)計(jì)。

流程設(shè)計(jì)

復(fù)雜的事情簡(jiǎn)單化，簡(jiǎn)單的事情標(biāo)準(zhǔn)化，標(biāo)準(zhǔn)的事情流程化，流程的事情自動(dòng)化。流程設(shè)計(jì)是每一個(gè)企業(yè)核心功能和業(yè)務(wù)，可自定義的管理流程系統(tǒng)搭建也是B端產(chǎn)品設(shè)計(jì)的難點(diǎn)，需要對(duì)業(yè)務(wù)高度抽象，讓每一個(gè)業(yè)務(wù)人員可自定義的流程才是好的流程設(shè)計(jì)。

B端C化

B端C化是B端產(chǎn)品設(shè)計(jì)的視覺表現(xiàn)力慢慢往C端產(chǎn)品設(shè)計(jì)的視覺靠齊，國(guó)內(nèi)B端產(chǎn)品界面設(shè)計(jì)視覺水平還有很大的提高空間。除了視覺上的提升外，由于業(yè)務(wù)的發(fā)展，B端產(chǎn)品也開始移動(dòng)化、智能化，國(guó)內(nèi)主流還是通過小程序、H5來實(shí)現(xiàn)B端產(chǎn)品C端化。

輕代碼化

輕代碼化是一種低代碼賦能無代碼的方式，彌補(bǔ)無代碼拓展性差、覆蓋場(chǎng)景少的問題。在保有無代碼靈活、易用、快捷的同時(shí)，又能覆蓋低代碼使用場(chǎng)景。簡(jiǎn)單理解就是無需代碼開發(fā)即可如搭積木般快速、靈活地創(chuàng)造屬于你的個(gè)性化管理系統(tǒng)，輕松實(shí)現(xiàn)多元業(yè)務(wù)場(chǎng)景的數(shù)字化管理。

輕代碼化將功能進(jìn)行打包，升級(jí)成全局可以用的配置，技術(shù)人員配置好后，業(yè)務(wù)人員在應(yīng)用編輯時(shí)直接選擇使用模版，綁定對(duì)應(yīng)的變量即可使用。

界面設(shè)計(jì)技巧

人文氣息

為什么人加色塊的組合方式能流行起來？還是B端行業(yè)流行帶動(dòng)的。B端講的更多的是企業(yè)對(duì)企業(yè)。企業(yè)對(duì)企業(yè)除了講行業(yè)解決方案外，還需要傳達(dá)公司的價(jià)值觀、使命、愿景。人加色塊的組合方式非常適合體現(xiàn)公司的企業(yè)文化。對(duì)于一家全球化的公司不同膚色的人物組合在一起，這種人文氣息和價(jià)值觀已經(jīng)就不言而喻了。

當(dāng)然企業(yè)也需要進(jìn)行營(yíng)銷，抓人眼球。幾千年來的遺傳證明了，人的大腦對(duì)食物、性、動(dòng)的東西、人臉和眼睛、危險(xiǎn)的動(dòng)物很敏感。人加色塊的組合方式也具有抓人眼球營(yíng)銷的功能。真可謂一舉兩得。

這種風(fēng)格更適合大公司，國(guó)內(nèi)的一些手機(jī)廠商OPPO、VIVO等也會(huì)通過手機(jī)+背景+人物來體現(xiàn)科技與人文的結(jié)合，而對(duì)于中小型公司產(chǎn)品差異化和行業(yè)解決方案展現(xiàn)應(yīng)該還是重中之重。

毛玻璃效果

毛玻璃效果加大了模糊程度，透明效果更加扁平，很好的順應(yīng)當(dāng)下UI扁平化的設(shè)計(jì)趨勢(shì)。蘋果Mac OS Big Sur系統(tǒng)的圖標(biāo)、界面中運(yùn)用了大量毛玻璃和半透明元素，界面更扁平。至于C4D三維彩色玻璃的視頻教程可以在B站搜索“透光藝術(shù)-C4D創(chuàng)建彩色玻璃的4個(gè)技法”，完全能滿足UI設(shè)計(jì)師。當(dāng)然還有一個(gè)好消息就是Mac用戶可以享有OC一年免費(fèi)的使用權(quán)，具體安裝購(gòu)買方法可以上“某寶”就可以輕松搞定，真香。

輕擬物

輕擬物這幾年一直流行，在UI設(shè)計(jì)中趨于穩(wěn)定的位置。從寫實(shí)到扁平再到輕擬物，其實(shí)是設(shè)計(jì)師們一路不斷探索的結(jié)果。本質(zhì)就是光影對(duì)形體產(chǎn)生的視覺感受。在色彩中對(duì)高光、亮面、明暗交界線、暗面、反光（環(huán)境光）五個(gè)部分的處理。寫實(shí)三維的圖標(biāo)等設(shè)計(jì)更適用于簡(jiǎn)潔的畫面中，扁平等設(shè)計(jì)更適用于復(fù)雜一點(diǎn)的界面中，比如B端產(chǎn)品界面中的功能圖標(biāo)。輕擬物可使用的范圍更廣，效果更佳。Sketch、Figma軟件對(duì)于漸變、高光、投影、高斯模糊處理已經(jīng)非常簡(jiǎn)單且出彩。

簡(jiǎn)潔設(shè)計(jì)

簡(jiǎn)潔設(shè)計(jì)遵從了密斯·凡德羅的“少即是多”的設(shè)計(jì)原則，在B端產(chǎn)品界面中更加需要簡(jiǎn)潔設(shè)計(jì)，我們最熟悉的Sketch軟件界面已經(jīng)是相當(dāng)?shù)暮?jiǎn)潔了。回到現(xiàn)實(shí)當(dāng)需求功能不斷增加，產(chǎn)品界面的編排如何取舍，如何保證界面的簡(jiǎn)潔是設(shè)計(jì)師需要深度思考的問題？如何與上級(jí)溝通？該功能是否可做可不做？是否需要埋點(diǎn)用數(shù)據(jù)說話？如果只是一味競(jìng)品有我們就需要有，功能不斷累加只會(huì)讓界面越來越重。

幾何圖形

幾何圖形和幾何插畫有異曲同工之妙，幾何圖形多為產(chǎn)品界面和宣傳內(nèi)容的抽象，產(chǎn)品界面的幾何圖形多為占位符形式，加上色彩和幾何色塊讓其成為一個(gè)整體。B端產(chǎn)品視覺設(shè)計(jì)C端化的進(jìn)程中，幾何圖形、幾何色彩不失為最好的突破口，相信今年追波B端產(chǎn)品的視覺設(shè)計(jì)一定會(huì)更上一個(gè)臺(tái)階。

幾何圖形另一個(gè)場(chǎng)景化的地方就是品牌，作為一名UI設(shè)計(jì)師一定會(huì)經(jīng)歷從圖標(biāo)到幾何圖形到品牌設(shè)計(jì)的過程，品牌設(shè)計(jì)的技巧基本還是以幾何圖形為主，至于品牌的內(nèi)涵需要更深層次的解讀。掌握主流品牌設(shè)計(jì)的技巧對(duì)產(chǎn)品定位、品牌宣傳打下扎實(shí)的基礎(chǔ)。

暗黑設(shè)計(jì)

暗黑模式的設(shè)計(jì)是解決在微弱環(huán)境下內(nèi)容也可以有更高的可讀性。隨著用戶夜晚及深夜使用電子設(shè)備時(shí)長(zhǎng)增大，如何在夜晚這個(gè)特定場(chǎng)景下使用更加舒適。合理使用暗黑模式可以減輕眼睛疲勞，提高在夜間使用的可讀性。

在設(shè)計(jì)暗黑主題時(shí)，不能為了突顯視覺上的逼格，而去使用高飽和度鮮艷的色彩來突顯界面的品質(zhì)感。而應(yīng)該把舒適度、可讀性作為設(shè)計(jì)的衡量指標(biāo)。Material Design給出了暗黑主題的設(shè)計(jì)準(zhǔn)則，即正文和背景之間的對(duì)比度應(yīng)至少為15.8:1。按照此標(biāo)準(zhǔn)設(shè)計(jì)，可讀性都還不錯(cuò)。這里介紹一個(gè)插件“Stark”（Figma、Sketch、XD、Chrome插件）用來測(cè)試界面的對(duì)比度。

模塊化（組件化）

為什么叫模塊化，而不叫組件化，組件化更多的利用原子系統(tǒng)從原子、分子、組織、模版、頁(yè)面來快速的搭建界面，但在B端產(chǎn)品設(shè)計(jì)中基礎(chǔ)組件和業(yè)務(wù)組件的搭建是以提高工作效率為前提，是否有從0到1搭建B端產(chǎn)品組件的經(jīng)歷是設(shè)計(jì)師一生中最寶貴的經(jīng)驗(yàn)之一，它能提高設(shè)計(jì)師的系統(tǒng)化思維、邏輯思維和抽象思維能力。

產(chǎn)品模塊化設(shè)計(jì)就是將產(chǎn)品分成幾個(gè)部分，也就是幾個(gè)模塊，每一部分都是具有獨(dú)立功能，具有一致的連接接口和一致的輸入、輸出接口的單元，相同種類的模塊在產(chǎn)品族中可以重用和互換，相關(guān)模塊的排列組合就可以形成最終的產(chǎn)品。通過模塊的組合配置，就可以創(chuàng)建不同需求的產(chǎn)品，滿足客戶的定制需求 。

插畫

插畫作為設(shè)計(jì)的一大品類，不同的插畫師都有自己擅長(zhǎng)的風(fēng)格，本質(zhì)是都有自己的個(gè)性，但是在產(chǎn)品設(shè)計(jì)中更多是需要共情、共性來講故事，表達(dá)產(chǎn)品理念和價(jià)值觀。這就需要插畫師去嘗試并探尋出適合互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)類的插畫風(fēng)格。設(shè)計(jì)的本質(zhì)是舊元素的重新組合，插畫不會(huì)過時(shí)，而是需要結(jié)合當(dāng)下和產(chǎn)品找到最匹配的設(shè)計(jì)風(fēng)格。

幾何插畫

幾何插畫算是插畫簡(jiǎn)化的一種表現(xiàn)形式，人和物的形態(tài)不再寫實(shí)，而是抽象成幾何圖形拼湊的感覺，同時(shí)保留人物形態(tài)的神韻。加上幾何色塊與人物交互形態(tài)的表現(xiàn)，傳達(dá)出簡(jiǎn)潔、科技的現(xiàn)代感。難點(diǎn)還是在人物形態(tài)的表現(xiàn)上，平時(shí)多練習(xí)練習(xí)速寫還是很有必要的。

線面插畫

線面插畫最近一兩年非常流行，準(zhǔn)確的說是非常適合。首先線面插畫主要是由線條和塊面組合而成，用塊面表現(xiàn)人物形態(tài)時(shí)某些結(jié)構(gòu)會(huì)表現(xiàn)不出來，這時(shí)候用線條簡(jiǎn)單勾勒后，結(jié)構(gòu)就會(huì)清晰明了。其次當(dāng)線面插畫運(yùn)用在界面上時(shí)，可以打破界面純文字或組件化的機(jī)械和沉悶感。線面插畫的風(fēng)格提升畫面熱鬧感的同時(shí)，還能保持界面的干凈整潔。

動(dòng)效

微交互

界面微交互動(dòng)效會(huì)讓用戶的體驗(yàn)更加精致到位。想要打造優(yōu)秀的產(chǎn)品設(shè)計(jì)，微交互和動(dòng)效設(shè)計(jì)是繞不開的，UI界面設(shè)計(jì)通過微交互反饋告知用戶當(dāng)前正在發(fā)生的事情，所處的狀態(tài)。細(xì)微的動(dòng)效更能調(diào)動(dòng)用戶情緒，取悅用戶。C端產(chǎn)品微交互和動(dòng)效已經(jīng)很成熟了，一部分功勞來自iOS系統(tǒng)原生自帶的效果。B端產(chǎn)品的微交互和動(dòng)效更多還是在學(xué)習(xí)海外產(chǎn)品，還需要給前端工程師灌輸微交互和動(dòng)效的設(shè)計(jì)價(jià)值，共同打造產(chǎn)品體驗(yàn)細(xì)節(jié)。

Mg動(dòng)畫

Mg動(dòng)畫需要很好的節(jié)奏感、韻律，每一個(gè)場(chǎng)景動(dòng)畫都需要其中的元素進(jìn)行連接變化，讓轉(zhuǎn)場(chǎng)動(dòng)畫更加自然，MG人物動(dòng)畫通過點(diǎn)線面的動(dòng)效變化讓畫面更加有趣、自然，通過粒子效果讓特定場(chǎng)景無限循環(huán)會(huì)讓人更加印象深刻。

三維

三維圖標(biāo)

MacOS Big Sur系統(tǒng)圖標(biāo)的更新帶動(dòng)了三維圖標(biāo)的流行，三維圖標(biāo)的應(yīng)用場(chǎng)景還是需要有較大留白空間的界面，因?yàn)槿S圖標(biāo)太小后就看不到更多細(xì)節(jié)。三維圖標(biāo)感覺又回到了擬物化和扁平化哪個(gè)更好的問題上？設(shè)計(jì)師應(yīng)該保持開放多元的視角。設(shè)計(jì)本身也在不斷的演化融合，存在即合理。合適最重要，它們都會(huì)有適合自己的場(chǎng)景和設(shè)計(jì)價(jià)值。

輕三維

為什么輕三維在界面設(shè)計(jì)中占有一席之位？一個(gè)是設(shè)計(jì)師不斷追求差異化的產(chǎn)物。另一個(gè)是更好的表現(xiàn)內(nèi)容，并與用戶產(chǎn)生共鳴。輕三維的基礎(chǔ)模型都是來自手機(jī)界面中的各種元素，比如組件、開關(guān)、按鈕、占位符、圖表、幾何圖形、圖標(biāo)、進(jìn)度條等，這些都是用戶日常使用系統(tǒng)軟件常見的元素，通過簡(jiǎn)單的幾何形體建?！驘艄狻硬馁|(zhì)—渲染—PS調(diào)色。難度系數(shù)不大但效果很出彩。第一個(gè)出彩點(diǎn)是模型帶有厚度的倒角，結(jié)合燈光渲染的光澤是二維軟件不能比擬的。第二個(gè)出彩點(diǎn)就是材質(zhì)自由添加，特別是當(dāng)下流行的毛玻璃效果，玻璃材質(zhì)渲染效果更佳。第三個(gè)出彩點(diǎn)就是可以加局部燈光，局部的漸變色或環(huán)境光更加出彩。

P4D（PS+C4D）

P4D是PS加C4D的設(shè)計(jì)表現(xiàn)技法，也是視覺設(shè)計(jì)的最后一個(gè)環(huán)節(jié)，通過PS對(duì)C4D的渲染圖片進(jìn)行調(diào)色，利用PS的調(diào)色技巧可以很好的解決C4D打燈光的瑕疵，還可以利用PS強(qiáng)大的合成功能，將渲染圖片與圖片素材進(jìn)行合成，來表現(xiàn)畫面的視覺度，當(dāng)然三維軟件比較難實(shí)現(xiàn)的水、粒子、煙花等效果，也可以通過PS的后期合成來實(shí)現(xiàn)，這也是P4D的強(qiáng)大之處。

卡通IP

卡通IP設(shè)計(jì)最近三四年技術(shù)的迭代已經(jīng)慢慢的走上成熟，卡通IP也從傳統(tǒng)的純PS手繪技法，轉(zhuǎn)到C4D建?！巧壎ā狹D衣服制作—OC渲染—PS（靜態(tài)）/AE（動(dòng)態(tài)）調(diào)色。

卡通IP火的本質(zhì)更適合做營(yíng)銷，相比于品牌或Slogan，卡通IP具有親和力和畫面感。隨著各種手辦行業(yè)大熱，受互聯(lián)網(wǎng)大廠影響下，卡通IP已經(jīng)是互聯(lián)網(wǎng)B輪以上公司的標(biāo)配了。如果團(tuán)隊(duì)中沒有這樣能力的人，也可以通過繪制好二維，一套三維IP可以選擇外包完成。

對(duì)于UI設(shè)計(jì)師來說學(xué)習(xí)是有成本的，暫時(shí)并不是必備技能，如果喜歡完全可以學(xué)習(xí)，從設(shè)計(jì)差異化的角度來看三維視覺確實(shí)有一定的競(jìng)爭(zhēng)力。

三維動(dòng)畫

C4D三維場(chǎng)景動(dòng)畫通過構(gòu)建實(shí)物和場(chǎng)景模擬生活中的現(xiàn)實(shí)場(chǎng)景，會(huì)讓用戶體驗(yàn)真實(shí)感，三維軟件制作動(dòng)效的最大優(yōu)勢(shì)是通過動(dòng)力學(xué)和表達(dá)式來模擬真實(shí)感，未來在AR/VR領(lǐng)域會(huì)有更好的發(fā)展。相對(duì)于界面動(dòng)效學(xué)習(xí)成本難度也相對(duì)較大。在三維動(dòng)畫中C4D軟件對(duì)于域、動(dòng)力學(xué)還是有一定的優(yōu)勢(shì)。

文章來源：UI中國(guó)   作者：RaDesign
分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

藍(lán)藍(lán)設(shè)計(jì)( m.yvirxh.cn )是一家專注而深入的界面設(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ù)

本文從What和How兩個(gè)部分闡述如何輸出清晰有效的設(shè)計(jì)方案，為大家建立系統(tǒng)的設(shè)計(jì)思路提供幫助。

很多初入職場(chǎng)的設(shè)計(jì)師在審美和平面圖形基礎(chǔ)上都比較扎實(shí)，對(duì)軟件的操作也出神入化，單個(gè)方案的界面視覺表現(xiàn)完成度和細(xì)致度也沒有太大問題。但卻往往在實(shí)際輸出項(xiàng)目方案的時(shí)候碰到瓶頸，方案反復(fù)地修改還不盡人意，設(shè)計(jì)能力無法得到質(zhì)的提升，晉升的腳步也從而停滯。

本文從What/How兩個(gè)部分循序漸進(jìn)地闡述如何輸出清晰有效的設(shè)計(jì)方案，希望給大家一些建立系統(tǒng)性設(shè)計(jì)思路的啟發(fā)，幫助大家更好地輸出設(shè)計(jì)方案，為決策設(shè)計(jì)方案提供更有力的參考。

 WHAT: 什么是清晰有效的設(shè)計(jì)方案

首先我們需要對(duì)清晰有效有一個(gè)整體的認(rèn)知。所謂清晰，從字面上理解是指看得很清楚、明朗，設(shè)計(jì)層面來說就是方案能做到方向明確，方案明了。而有效字面上指的是有效果，有效力，從設(shè)計(jì)層面來說就是輸出的方案可以解決存在的問題，能達(dá)到設(shè)定的目標(biāo)以及可以切實(shí)落地。

清晰和有效的考量維度是不一樣的：清晰更多是針對(duì)設(shè)計(jì)這一環(huán)節(jié)，在于不同方向/方案的差異度和側(cè)重點(diǎn)；而有效則更多需要聯(lián)合設(shè)計(jì)上下游（用戶/產(chǎn)品/開發(fā)）。對(duì)于優(yōu)秀的設(shè)計(jì)方案來說兩者相輔相成，缺一不可。

接下來我們來詳細(xì)拆解什么是清晰和有效。

1.清晰 - 方向明確，方案明了

——————————

很多設(shè)計(jì)師對(duì)方案輸出的數(shù)量有個(gè)認(rèn)知誤區(qū)，認(rèn)為設(shè)計(jì)方案越多越好，可以給老板、合作方更多選擇，往往不假思索地用大量的時(shí)間輸出所有可能的方案，并拿出來讓別人評(píng)審，認(rèn)為把所有的可能性列出來就不會(huì)錯(cuò)，這正是對(duì)方案清晰性缺乏認(rèn)知的表現(xiàn)。

在設(shè)計(jì)最初期，不要著急動(dòng)手輸出界面，先結(jié)合目標(biāo)（近期目標(biāo)和遠(yuǎn)期目標(biāo)）綜合考量，系統(tǒng)性地思考有哪些途徑達(dá)到目標(biāo)，確保所有實(shí)現(xiàn)手段的方式都有考慮到，并且可以整合途徑一致、方向近似的方案。對(duì)差異性不大的方案進(jìn)行合并劃歸，才能在合理范圍內(nèi)整理出具有不同思考維度與目標(biāo)側(cè)重的提案方向。前期規(guī)劃思考的深度決定了方案的廣度，只有清晰的思考方案才會(huì)創(chuàng)造無限的可能。

 用案例來讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知：

相冊(cè)小程序Logo這個(gè)需求的目標(biāo)是需要突出相冊(cè)元素，并強(qiáng)化品牌識(shí)別度。

這是設(shè)計(jì)師輸出的Logo提案初稿，雖然輸出了28個(gè)方案之多，但沒有設(shè)計(jì)思路的規(guī)劃，想到哪就畫到哪，很多方案是重復(fù)的，還有一些方案在設(shè)計(jì)初期就應(yīng)該P(yáng)ass，設(shè)計(jì)的整個(gè)細(xì)致度也不夠充分。

于是設(shè)計(jì)師對(duì)設(shè)計(jì)方向重新進(jìn)行規(guī)劃整合，按照輸出形式重新規(guī)劃了分類。

按照分類篩選出四個(gè)可以繼續(xù)優(yōu)化的方案。并且拿著四個(gè)不同方向的方案去匯報(bào)。最終確定D方案。

我們重新回顧一下這個(gè)需求，28個(gè)方案 VS 4個(gè)方案，設(shè)計(jì)師需要的不是盡可能輸出多方案的能力，方案越多可能表示你在錯(cuò)誤的道路上越走越遠(yuǎn)，需要的是通過前期系統(tǒng)的思考能一次把方案做對(duì)的能力。

2. 有效 - 解決存在的問題、能達(dá)到設(shè)定的目標(biāo)、可以落地的方案

——————————

很多設(shè)計(jì)師拿到產(chǎn)品需求會(huì)立即動(dòng)手，認(rèn)為滿足了產(chǎn)品這個(gè)角色提的需求便是好的設(shè)計(jì)輸出，或者把方案出的天花亂墜，當(dāng)產(chǎn)品或者其他角色提出不同意見就會(huì)覺得他們不懂什么是好的設(shè)計(jì)。這些現(xiàn)象大多是因?yàn)樵O(shè)計(jì)師在項(xiàng)目前期沒有正確思考和評(píng)估這個(gè)需求本身需要解決什么問題、方案能否達(dá)到團(tuán)隊(duì)共同設(shè)定的目標(biāo)，以及方案是否能平穩(wěn)落地這三個(gè)維度。

解決存在的問題—從問題出發(fā)

我們?cè)趯?shí)際輸出方案的時(shí)候，不能從產(chǎn)品經(jīng)理的需求文檔開始，而是要把考量維度更前置，從項(xiàng)目現(xiàn)有的問題出發(fā)。這個(gè)問題的搜集包括外部用戶的反饋，內(nèi)部團(tuán)隊(duì)的聲音，但需要注意的是用戶的反饋不一定是真正的問題，需要做到篩選和甄別。比如新發(fā)布一個(gè)版本可能會(huì)碰到的一個(gè)情況是很多用戶打一星反饋說界面太難看太丑，這種屬于用戶感受，我們可以再深挖一下用戶覺得丑的原因，是不是改變了太多用戶習(xí)慣，但又沒有給用戶真的帶來更好的體驗(yàn)和更多的收益。

能達(dá)到設(shè)定的目標(biāo)—從目標(biāo)啟動(dòng)

問題還需要結(jié)合目標(biāo)一起考慮，解決問題的思路并不完全等同于目標(biāo)，目標(biāo)是大家一起制定的未來產(chǎn)品的發(fā)展方向。比如我們新發(fā)布的版本里面新加了一個(gè)Tab改變了用戶習(xí)慣，大批用戶投訴，但如果這個(gè)新Tab是符合我們目標(biāo)的，我們不能為了短期解決用戶投訴把這個(gè)Tab下掉，應(yīng)該繼續(xù)觀察用戶在這個(gè)使用過程中碰到了什么問題，解決實(shí)際操作中碰到的問題。

用案例來讓大家對(duì)問題和目標(biāo)有更具象的認(rèn)知：

我們需要優(yōu)化QQ空間的為空界面，首先我們梳理下現(xiàn)網(wǎng)存在的問題，風(fēng)格整體比較老舊，很多圖形表意不明確，新出模塊就會(huì)有新風(fēng)格，所以存在很多不統(tǒng)一的地方，空間整個(gè)業(yè)務(wù)有一百多個(gè)為空界面，導(dǎo)致開發(fā)也不清楚到底應(yīng)該怎么用，用什么，所以很長(zhǎng)一段時(shí)間是處于亂用的狀態(tài)。

接著我們梳理了這次優(yōu)化的目標(biāo)：

1 界面統(tǒng)一，用戶能對(duì)表意感知明確（解決現(xiàn)網(wǎng)問題）

2 強(qiáng)化QQ的品牌

3 做成基礎(chǔ)組件，保證復(fù)用性

4 低成本開發(fā)

確定了優(yōu)化目標(biāo)以后我們沒有馬上急于嘗試風(fēng)格，而是先遍歷了所有為空異常頁(yè)，整合了所有場(chǎng)景最后梳理出八種情況，這八種情況可以覆蓋所有的為空?qǐng)鼍?，梳理整合?chǎng)景是目標(biāo)1、3、4能實(shí)現(xiàn)的前提。

然后我們基于這八個(gè)場(chǎng)景來輸出設(shè)計(jì)風(fēng)格，要低成本開發(fā)，所以這里沒有考慮加動(dòng)畫，用企鵝剪影結(jié)合具體的場(chǎng)景來表意，不僅強(qiáng)化了品牌，也能做到表意清晰明確。圖形定好以后我們馬上也輸出了規(guī)范，Push給對(duì)接的開發(fā)同學(xué)方便調(diào)用。

在輸出方案過程中，始終都要緊緊貼合問題和目標(biāo)，避免無效設(shè)計(jì)。

能落地的方案—技術(shù)可以實(shí)現(xiàn)

在輸出設(shè)計(jì)方案的時(shí)候，設(shè)計(jì)師需要考慮到開發(fā)成本是什么，需要消耗多少資源去實(shí)現(xiàn)這個(gè)需求，最低成本達(dá)到目標(biāo)的路徑是什么。如果有些方案開發(fā)成本很大卻收益價(jià)值卻很小，我們就需要斟酌它是否仍有執(zhí)行的必要。避免一味的追求設(shè)計(jì)效果不去對(duì)齊成本、人力，最后也只會(huì)是設(shè)計(jì)的自嗨。

用案例來讓大家對(duì)清晰這個(gè)定義有更具象的認(rèn)知：

產(chǎn)品提了好友生日推送禮物的需求，目標(biāo)是想用生日這一比較溫情的場(chǎng)景去設(shè)計(jì)專門的祝福頁(yè)，用來提升寫操作和大盤活躍。我們需要設(shè)計(jì)送給用戶的禮物卡片，從實(shí)現(xiàn)手段的難易規(guī)劃了三個(gè)方向：

A 手勢(shì)交互但開發(fā)難度大: 3D手勢(shì)交互動(dòng)畫

B 趣味動(dòng)圖且開發(fā)成本適中：局部小動(dòng)畫

C 靜態(tài)但開發(fā)成本低：全靜態(tài)視覺，復(fù)用已有開發(fā)流程

最后團(tuán)隊(duì)對(duì)齊了人力成本，決定采用方案C，把設(shè)計(jì)精力放在本身卡片的表現(xiàn)上。

HOW: 如何輸出清晰有效的設(shè)計(jì)方案

那如何才能輸出清晰有效的設(shè)計(jì)方案呢？設(shè)計(jì)方案歸根結(jié)底是思維方式的具體體現(xiàn)，輸出清晰有效的設(shè)計(jì)方案最核心的點(diǎn)在于體系化的思考方式，我總結(jié)了一下幾點(diǎn)：

1 拓寬邊界

——————————

拓寬邊界需要設(shè)計(jì)師站在更高的視角和有更廣的視野，把設(shè)計(jì)從表現(xiàn)和執(zhí)行抽離往前后延展，在整個(gè)設(shè)計(jì)過程中往前去挖掘需求和規(guī)劃產(chǎn)品結(jié)構(gòu)，往后做到把控和沉淀，能站在上下游各維度去Review整個(gè)項(xiàng)目，只有站在更全局的視角審視，才能跳出片面設(shè)計(jì)的維度。

2 轉(zhuǎn)換視角

——————————

從不同的視角看待問題，學(xué)會(huì)拆解問題和解決問題，從產(chǎn)品/開發(fā)不同的角度來全盤看整個(gè)產(chǎn)品，分析這個(gè)需求的投入產(chǎn)出比是不是足夠，是不是能達(dá)到目標(biāo)（包括設(shè)計(jì)目標(biāo)和產(chǎn)品目標(biāo)）。設(shè)計(jì)、產(chǎn)品、開發(fā)從來都不是對(duì)立的，都是不同角色為了整個(gè)產(chǎn)品發(fā)力。

舉個(gè)例子，產(chǎn)品同學(xué)覺得輸出的方案不好看，是在用感性表達(dá)，我們可以嘗試?yán)^續(xù)拆解不好看背后的原因，比如是不是核心內(nèi)容不夠突出、擔(dān)心按鈕轉(zhuǎn)化率等，一開始就抱著產(chǎn)品不懂設(shè)計(jì)這種想法是沒有辦法解決問題的。

還有一個(gè)就是用戶同理心，很多時(shí)候我們不能只站在設(shè)計(jì)師和產(chǎn)品的角度看待用戶反饋的問題，比如新功能內(nèi)部團(tuán)隊(duì)覺得很厲害，但實(shí)際門檻太高，用戶根本不知道怎么操作，而我們長(zhǎng)期體驗(yàn)這個(gè)產(chǎn)品反而忽略了產(chǎn)品的易用性。

3 結(jié)構(gòu)思維

——————————

我們?cè)趩?dòng)項(xiàng)目的時(shí)候，不要單點(diǎn)去看要在某個(gè)頁(yè)面要做什么改動(dòng)，而是從問題入手，和產(chǎn)品同學(xué)對(duì)齊好目標(biāo)，結(jié)合設(shè)計(jì)理念，最后找到發(fā)力點(diǎn)在哪里，循序漸進(jìn)，這樣很大程度上能避免項(xiàng)目的反復(fù)，對(duì)設(shè)計(jì)流程的準(zhǔn)確把控也是輸出優(yōu)秀設(shè)計(jì)方案的基礎(chǔ)。

舉一個(gè)日常生活的例子幫助大家理解，比如我的問題是長(zhǎng)得丑，我的目標(biāo)是要變得更年輕漂亮，我的理念就是改善體型和優(yōu)化五官，最后找到具體的發(fā)力點(diǎn)比如晚上不吃晚飯，去美容院打美容針、學(xué)會(huì)怎么化妝等。

4 認(rèn)知?jiǎng)?chuàng)新

——————————

有些新設(shè)計(jì)師對(duì)設(shè)計(jì)創(chuàng)新的認(rèn)知還停留在是去做一些創(chuàng)造世界、改變世界的事情，認(rèn)為創(chuàng)新就是把原項(xiàng)目進(jìn)行翻天覆地的改變，初入職場(chǎng)會(huì)覺得負(fù)責(zé)的業(yè)務(wù)和項(xiàng)目都很小，沒有什么意思，其實(shí)創(chuàng)新的維度有很多，包括設(shè)計(jì)工作流程的優(yōu)化、還有從小的問題點(diǎn)著手去深挖和思考，找到合適的解決方案并打磨細(xì)節(jié)給用戶創(chuàng)造驚喜。擺正心態(tài)才能做對(duì)事做好事。

5 及時(shí)復(fù)盤

——————————

完成項(xiàng)目以后需要不斷的總結(jié)方法，遇到的問題，除了技法層面的提升，更重要的還包括思考層面的提升。學(xué)會(huì)去總結(jié)之前踩過的坑，避免重復(fù)性的問題，比如你的輸出一直存在層級(jí)不清晰的問題，那么你需要關(guān)注后續(xù)輸出的界面里大模塊之間以及元素之間的層次是否還存在這個(gè)問題?？梢苑稿e(cuò)誤，但是盡量避免總是犯同樣的錯(cuò)誤，這樣才能加速成長(zhǎng)的腳步。

寫在最后