對(duì)于我們?cè)O(shè)計(jì)師來(lái)說(shuō)，尤其是現(xiàn)在 B 端設(shè)計(jì)如此流行的情況下，表單設(shè)計(jì)細(xì)節(jié)尤其需要各位設(shè)計(jì)師注意。今天會(huì)分享表單設(shè)計(jì)中那些你不注意的細(xì)節(jié)點(diǎn)，必須先點(diǎn)贊收藏了，這些干貨知識(shí)相信你一定用的上。

比如以登錄為例，當(dāng)你把密碼輸錯(cuò)后，網(wǎng)站清空你剛剛才填好的表單，是不是非常讓你崩潰？刪除所有數(shù)據(jù)對(duì)用戶來(lái)說(shuō)很煩人，這會(huì)讓你必須重新輸入用戶名和密碼，即便只是拼錯(cuò)了密碼而已。

因此，任何專業(yè)的用戶體驗(yàn)設(shè)計(jì)師不僅應(yīng)該考慮順利的流程情況，還應(yīng)該考慮失敗時(shí)應(yīng)該怎么辦。

錯(cuò)誤提示

錯(cuò)誤提示應(yīng)該讓用戶容易找到原因并方便理解。否則，他們可能沒(méi)辦法解決這些錯(cuò)誤。所以對(duì)于設(shè)計(jì)師來(lái)說(shuō)，一個(gè)非常重要的目標(biāo)是要設(shè)計(jì)出一個(gè)易于解決錯(cuò)誤的流程。一個(gè)錯(cuò)誤信息應(yīng)該能清晰的解釋到底發(fā)生了什么，如果可能的話，最好也提供解決方案。

左邊的錯(cuò)誤信息很清晰的解釋了發(fā)生的問(wèn)題，右邊的錯(cuò)誤信息對(duì)用戶來(lái)說(shuō)非常困惑。

1. 什么時(shí)候告知用戶發(fā)生了錯(cuò)誤比較好？

當(dāng)用戶出錯(cuò)后，首先要考慮的事情就是應(yīng)該在用戶填表時(shí)提醒還是最后通知用戶。錯(cuò)誤預(yù)警中有三種常見(jiàn)模式：

內(nèi)聯(lián)/實(shí)時(shí)：在輸入時(shí)或移開(kāi)焦點(diǎn)后立即提供反饋；

提交后/客戶端：當(dāng)用戶點(diǎn)擊提交按鈕之后；

服務(wù)器端：當(dāng)請(qǐng)求發(fā)送到服務(wù)器后再返回反饋給用戶。

這些方法中的每一種都有其優(yōu)點(diǎn)和缺點(diǎn)。

2. 內(nèi)聯(lián)驗(yàn)證

一般來(lái)說(shuō)，當(dāng)表單非常短小時(shí)用內(nèi)聯(lián)驗(yàn)證，因?yàn)樗试S在內(nèi)存中的數(shù)據(jù)仍然最新時(shí)更正錯(cuò)誤。

你可以用內(nèi)聯(lián)驗(yàn)證立即告訴用戶哪里錯(cuò)了。

3. 提交后驗(yàn)證

另一方面，當(dāng)表單很大且需要保持關(guān)注時(shí)，你希望幫助用戶保持專注，而不是通過(guò)不斷顯示錯(cuò)誤來(lái)打斷他們。

4. 服務(wù)器端驗(yàn)證

服務(wù)器端驗(yàn)證是最不友好的方式，但卻為網(wǎng)站提供了很高的穩(wěn)定性。當(dāng)需要二次檢查用戶的數(shù)據(jù)時(shí)，這種方法最有效。

5. 如何提示用戶錯(cuò)誤？

錯(cuò)誤提示告訴用戶他們做錯(cuò)了，但是他們究竟做錯(cuò)了什么，要如何修復(fù)它？很顯然，清楚地說(shuō)明錯(cuò)誤，而不僅僅是顯示 Error:90803，對(duì)用戶有很大幫助。

6. 使用積極語(yǔ)言而不是消極語(yǔ)言

錯(cuò)誤提示措辭要使用積極語(yǔ)言而不是消極語(yǔ)言。例如，如果用戶遺漏了一個(gè)字段，與其說(shuō)”該字段不應(yīng)該是空的“，不如說(shuō)”請(qǐng)?zhí)顚?xiě)此字段“。當(dāng)使用積極語(yǔ)言時(shí)，用戶不會(huì)因?yàn)橐粋€(gè)錯(cuò)誤而受到責(zé)備，這能減少用戶的焦慮感，減少流失。

7. 必要時(shí)提供幫助

在某些情況下，用戶無(wú)法自己修復(fù)錯(cuò)誤，他需要額外的幫助。例如，當(dāng)用戶無(wú)法登錄時(shí)，大多數(shù)應(yīng)用只提供找回密碼，而沒(méi)有找回用戶名。但事實(shí)上，用戶名和密碼都可能會(huì)忘記。因此，在這種情況下，嘗試提供所有必要的操作和信息資源來(lái)幫助用戶解決問(wèn)題。

標(biāo)簽

標(biāo)簽是表單可用性最關(guān)鍵的組成部分。如果標(biāo)簽不清晰，那么其他元素就算把可用性做得再好也沒(méi)意義。所以，不要讓用戶來(lái)猜測(cè)這里面到底要填什么內(nèi)容。

用不要用一些模棱兩可的詞，比如‘?dāng)?shù)字’可能會(huì)讓人感到困惑，一定要明確意思。

1. 將標(biāo)簽放在輸入字段的頂部

許多研究表明，將標(biāo)簽放置在輸入字段的頂部可以幫助用戶更快地填寫(xiě)表單，因?yàn)樗试S用戶遵循一條垂直線而不是 Z 模式。但是，如果它占用太多的垂直空間，您也可以使用浮動(dòng)標(biāo)簽。因此，如果你希望用戶更快地填充表單，請(qǐng)將他們放置在字段的頂部。

將標(biāo)簽放置在字段的頂部和使用浮動(dòng)標(biāo)簽，這兩種方式都很有效

2. 將標(biāo)簽放在輸入字段的左側(cè)

另一方面，當(dāng)你詢問(wèn)用戶比較復(fù)雜的問(wèn)題，用戶需要更多時(shí)間思考問(wèn)題答案的時(shí)候，研究表明將標(biāo)簽放在輸入框的左側(cè)會(huì)比較好。

3. 標(biāo)簽應(yīng)該是可見(jiàn)的，無(wú)論什么輸入狀態(tài)

無(wú)論你用什么方式，確保當(dāng)用戶填完內(nèi)容后，標(biāo)簽是可見(jiàn)的。因?yàn)?，?dāng)用戶需要再次確認(rèn)表單內(nèi)容的時(shí)候，他們不用刪除填好的數(shù)據(jù)來(lái)查看系統(tǒng)需要他們填什么。

4. 減少不必要的輸入項(xiàng)

要填的表單越多，用戶就不愿意填完它。所以盡可能地為用戶減少不必要的輸入項(xiàng)。如果實(shí)在做不到，可以將必填和非必填的字段區(qū)分開(kāi)，減少用戶的負(fù)擔(dān)。

5. 可見(jiàn)性

不管狀態(tài)如何，字段都應(yīng)該是清晰可辨的。此外，活動(dòng)字段和非活動(dòng)字段之間的區(qū)別應(yīng)該要明顯。

用輸入字段應(yīng)該有高對(duì)比度，在所有狀態(tài)下都是可見(jiàn)的

6. 自動(dòng)激活 PC 端表單的第一個(gè)字段

自動(dòng)激活表單的第一個(gè)字段，這可以提高處理效率，避免用戶額外點(diǎn)擊。

7. 幫用戶預(yù)先填好

在某些情況下，你可以幫用戶預(yù)先填好字段。例如，可以很容易地檢測(cè)到郵政編碼，或者某些數(shù)值可能是頻繁的。在這些情況下，為用戶填充字段。

8. 格式

含有大量小數(shù)的數(shù)字很難讀懂。因此，當(dāng)要求較大的數(shù)字時(shí)，需要考慮添加格式以支持可讀性。例如，在詢問(wèn)卡號(hào)時(shí)，使用自動(dòng)格式化:讀取 5678-9876-9738-8394 比讀取 5678987697388394 容易得多。

此外，當(dāng)請(qǐng)求需要特定格式化數(shù)據(jù)時(shí)，要包含一個(gè)實(shí)例，讓用戶準(zhǔn)確理解要填什么。

輸入字段的大小應(yīng)該與他預(yù)期的數(shù)據(jù)大小相對(duì)應(yīng)

10. 為桌面系統(tǒng)設(shè)計(jì)靈活的表單

在鍵盤(pán)和鼠標(biāo)之間切換很煩人。在理想的情況下，用戶應(yīng)該只使用一種媒介來(lái)填寫(xiě)表單，但有時(shí)，這是不可能實(shí)現(xiàn)的。因此，如果用戶需要多種媒介來(lái)填寫(xiě)表單，至少要盡量減少切換。為此，將需要同一種工具的輸入組合在一起。

另外，當(dāng)創(chuàng)建一個(gè)網(wǎng)頁(yè)表單時(shí)，要確保用戶可以只使用鍵盤(pán)來(lái)瀏覽表單——使用TAB和方向鍵。

11. 為移動(dòng)端系統(tǒng)設(shè)計(jì)靈活的表單

當(dāng)在移動(dòng)設(shè)備上時(shí)，將你顯示的鍵盤(pán)與用戶必須輸入的數(shù)據(jù)相匹配。我們經(jīng)?？吹叫枰獢?shù)字鍵盤(pán)的輸入可以很好地實(shí)現(xiàn)這一點(diǎn)，但幾乎很少有 APP 顯示支持輸入電子郵件地址的鍵盤(pán)。

輸支持通過(guò)顯示正確的鍵盤(pán)輸入電子郵件

下拉菜單 vs 單選按鈕

下拉框的使用比單選按鈕更有挑戰(zhàn)性，因?yàn)樗枰~外的點(diǎn)擊來(lái)打開(kāi)它們。此外，用戶無(wú)法提前看到選項(xiàng)，這可能會(huì)讓他們感到困惑。因此，如果你只有少量的選項(xiàng)，使用單選按鈕。如果選項(xiàng)的數(shù)量超過(guò) 4 個(gè)，下拉菜單的效果會(huì)更好。

1. 復(fù)選框

通過(guò)勾選復(fù)選框，用戶應(yīng)該是同意某些內(nèi)容。我的意思是，他們應(yīng)該說(shuō)，“是的，我想要這個(gè)”，而不是，“是的，我不想要這個(gè)”。不幸的是，我經(jīng)?？吹接姓`導(dǎo)性的復(fù)選框試圖在創(chuàng)建賬戶時(shí)欺騙人們訂閱他們的產(chǎn)品。當(dāng)你不想訂閱他們的通訊時(shí)，你又必須勾選復(fù)選框，像這樣的伎倆對(duì)信譽(yù)是不合適的，所以不要?jiǎng)有氖褂盟鼈儭?

通過(guò)勾選復(fù)選框，用戶應(yīng)該同意某些內(nèi)容，而不是確認(rèn)他們不同意。

結(jié)構(gòu)

一個(gè)結(jié)構(gòu)充分的表單就像一個(gè)與用戶的良好對(duì)話。所以記住這一點(diǎn)，仔細(xì)規(guī)劃結(jié)構(gòu)。

1. 從簡(jiǎn)單的問(wèn)題開(kāi)始

從簡(jiǎn)單的問(wèn)題開(kāi)始，從用戶已經(jīng)很清楚知道答案的問(wèn)題開(kāi)始，像名字、郵件這類。然后再循序漸進(jìn)問(wèn)稍微復(fù)雜的問(wèn)題，像賬戶信息之類的。

首先，一個(gè)很自然的順序，當(dāng)你第一次見(jiàn)某些人的時(shí)候，你會(huì)找一些比較好切入的問(wèn)題，比如叫什么名字啊之類的。其次，當(dāng)用戶已經(jīng)填了一些字段之后，那么之后會(huì)增加他填完表單的機(jī)會(huì)。

2. 創(chuàng)建邏輯信息塊

將不相關(guān)的信息按邏輯分組。例如，你可以將結(jié)帳表單分為“個(gè)人信息”和“帳戶信息”組，將信息分組可以幫助用戶一次只考慮一個(gè)主題。

通過(guò)對(duì)相關(guān)信息進(jìn)行分組，使表單可被快速掃描

3. 單步 VS 多步表單

當(dāng)你有很多問(wèn)題要問(wèn)的時(shí)候，你可能想知道哪一個(gè)最有效：?jiǎn)尾搅鞒踢€是多步流程。一般來(lái)說(shuō)，單步表單的轉(zhuǎn)化率更高，因?yàn)樗雌饋?lái)更小，而且不會(huì)勸退用戶。如果你詢問(wèn)基本信息并希望用戶快速填寫(xiě)表單，單步表單就非常不錯(cuò)。

當(dāng)用戶被要求必須填寫(xiě)更多復(fù)雜信息時(shí)，多步表單會(huì)更好。為了幫助用戶在進(jìn)行多步驟填寫(xiě)時(shí)不至于失去耐心，可以給到進(jìn)度條，提示還剩多少步。

4. 單列 vs 多列布局

一般來(lái)說(shuō)，用單列布局會(huì)更好，因?yàn)榭梢詭椭脩舾玫貟呙?，也可以盡量減少用戶遺漏填寫(xiě)。

但當(dāng)用戶多次填寫(xiě)同一個(gè)表單時(shí)，他們更喜歡多列表單，因?yàn)檫@樣不會(huì)浪費(fèi)時(shí)間滾動(dòng)。一般來(lái)說(shuō)，在 B 端應(yīng)用中這種多列表單會(huì)比較合適。

按鈕

設(shè)計(jì)可用的按鈕對(duì)提高轉(zhuǎn)化率至關(guān)重要。如果按鈕上的文字內(nèi)容比較模糊，會(huì)容易勸退新手用戶。

根據(jù)用戶按下按鈕會(huì)發(fā)生什么來(lái)命名按鈕

1. 提高用戶的容錯(cuò)率

對(duì)于更復(fù)雜的表單來(lái)說(shuō)，按鈕最重要的一點(diǎn)是，應(yīng)該有提交和取消表單的單一方法。用戶應(yīng)該至少有補(bǔ)救的機(jī)會(huì)。舉個(gè)例子，如果用戶點(diǎn)了在線幫助時(shí)，他已經(jīng)填好的數(shù)據(jù)不應(yīng)該被丟失?；蛘?，如果用戶由于意外點(diǎn)擊了按鈕，請(qǐng)求不應(yīng)該被提交。

2. 主要按鈕和次要按鈕應(yīng)該很容易區(qū)分

為了避免點(diǎn)擊錯(cuò)誤的按鈕，用戶應(yīng)該能比較容易地區(qū)分主要和次要按鈕。另外，最好不要只依賴顏色，樣式上最好有比較大的差異。

讓主要和次要的按鈕樣式上有比較大的區(qū)分度

3. 正確的標(biāo)簽按鈕

按功能明確地標(biāo)注按鈕。例如，如果按一個(gè)按鈕可以創(chuàng)建一個(gè)賬戶，在按鈕上的文案叫”創(chuàng)建賬戶”要好過(guò)“提交”。

總結(jié)

當(dāng)用戶打開(kāi)表單時(shí)，他首先肯定是想要填完它的。嘗試幫助他們而不是用糟糕的設(shè)計(jì)給他們?cè)O(shè)置障礙。

不幸的是，這里面提到的許多錯(cuò)誤，并不需要多么高級(jí)的技巧，而是因?yàn)樵O(shè)計(jì)沒(méi)有同理心。仔細(xì)思考你的設(shè)計(jì)流程，檢查是否能讓所有內(nèi)容對(duì)不同背景和專業(yè)知識(shí)的人都是清晰的。

通常來(lái)說(shuō)，一般要達(dá)到以下目的，大多數(shù)指導(dǎo)原則都來(lái)自這些規(guī)則：

用戶應(yīng)該只輸入一次數(shù)據(jù)

用戶應(yīng)該填盡可能少的信息

用戶應(yīng)該只需要記住少量的信息

用戶檢查和恢復(fù)錯(cuò)誤內(nèi)容應(yīng)該要很容易

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：nanaOMO   來(lái)源：站酷

譯者推薦 | 著名的諾貝爾獎(jiǎng)獲得者赫伯特·西蒙在對(duì)當(dāng)今經(jīng)濟(jì)發(fā)展趨勢(shì)進(jìn)行預(yù)測(cè)時(shí)也指出：“隨著信息的發(fā)展，有價(jià)值的不是信息，而是注意力?！?/span>

在互聯(lián)網(wǎng)中，設(shè)計(jì)師多是處在執(zhí)行層。通常我們會(huì)去追尋做這個(gè)項(xiàng)目的原因和目標(biāo)，那對(duì)于整個(gè)互聯(lián)網(wǎng)時(shí)代，設(shè)計(jì)師如何通過(guò)設(shè)計(jì)手段緊緊抓牢人類最有限卻最有價(jià)值的注意力呢？這篇文章就是一個(gè)向?qū)?，幫助你找到方向?/span>

摘要：電子產(chǎn)品正在爭(zhēng)奪用戶有限的注意力。現(xiàn)代經(jīng)濟(jì)學(xué)越來(lái)越關(guān)注人類的注意力以及產(chǎn)品如何吸引用戶的關(guān)注。

注意力是數(shù)字時(shí)代最有價(jià)值的資源之一。在人類主要?dú)v史進(jìn)程中，獲得的信息是有限的。幾個(gè)世紀(jì)以前很多人不識(shí)字，教育是一種奢侈。如今我們可以大規(guī)模獲取信息。任何有互聯(lián)網(wǎng)連接的人都可以獲取事實(shí)、文學(xué)和藝術(shù)（通常是免費(fèi)的）。我們面對(duì)的是豐富的信息，但我們的大腦處理信息能力和以前一樣。每天仍然只有24小時(shí)。今天，注意力成為了限制因素，而不再是信息。

什么是注意力？

在深入討論注意力經(jīng)濟(jì)之前，我們首先需要把注意力的定義闡明清楚。注意力的正式心理學(xué)定義和大多數(shù)人對(duì)注意力概念的看法是重疊的。

注意力：選擇性地專注于我們目前正在感知的一些刺激，而忽略來(lái)自環(huán)境的其他刺激。

在平常的話中，我們經(jīng)常說(shuō)“請(qǐng)注意”。這個(gè)表達(dá)意味著注意力的兩個(gè)重要特征：有限的注意力和有價(jià)值的注意力。當(dāng)我們“關(guān)注”一件事，我們會(huì)消耗精神資源的預(yù)算，相應(yīng)的我們會(huì)減少消耗在其他地方的注意力。關(guān)于人類注意力的理論都認(rèn)為注意力的能力是有限的。心理學(xué)家兼經(jīng)濟(jì)學(xué)家 Herbert A. Simon 將注意力描述為人類思想中的“瓶頸”。他也提到“豐富的信息造成了注意力不能集中”。一心多用的自負(fù)是一種謠言：人們不能同時(shí)一心多用。比如，人們可能會(huì)在看電視時(shí)拿出手機(jī)，但是如果他們將注意力轉(zhuǎn)移到手機(jī)上，他們就會(huì)錯(cuò)過(guò)電視節(jié)目中發(fā)生的一些情節(jié)。

我們的注意力市場(chǎng)

注意力是我們個(gè)人的寶貴資源。這個(gè)資源同樣受到商業(yè)、政治運(yùn)動(dòng)、非營(yíng)利組織、還有無(wú)數(shù)其他組織的重視，他們都在試圖吸引我們?nèi)セㄥX(qián)或者花費(fèi)時(shí)間。在1997年，Michael H. Goldhaber 寫(xiě)道，全球經(jīng)濟(jì)正在從物質(zhì)經(jīng)濟(jì)轉(zhuǎn)為基于人類注意力的經(jīng)濟(jì)。例如很多在線服務(wù)是免費(fèi)提供的，但在注意力經(jīng)濟(jì)中，注意力經(jīng)濟(jì)是資源更是一種貨幣：用戶用他們的注意力為服務(wù)付費(fèi)。今天，注意力經(jīng)濟(jì)的動(dòng)力促使企業(yè)吸引用戶在應(yīng)用程序和網(wǎng)站上花越來(lái)越多的時(shí)間。創(chuàng)建網(wǎng)站和應(yīng)用程序的設(shè)計(jì)師明白，他們的產(chǎn)品是在競(jìng)爭(zhēng)激烈的市場(chǎng)中爭(zhēng)奪有限的用戶注意力資源。吸引注意力的目標(biāo)導(dǎo)致了很多不同設(shè)計(jì)趨勢(shì)的普及，例如：

• 引人注目的動(dòng)畫(huà)可以引起用戶對(duì)一段內(nèi)容的關(guān)注
• 在繁忙擁擠的設(shè)計(jì)中，會(huì)同時(shí)顯示大量信息，希望其中的一個(gè)圖像或短語(yǔ)能夠吸引用戶的注意。 

• 廣告活動(dòng)吸引或強(qiáng)迫用戶將注意力集中在廣告上。iPhone 的 GameCenter 上提供一些包含廣告的免費(fèi)游戲。在廣告剛播放的一段時(shí)間，廣告中不會(huì)顯示關(guān)閉圖標(biāo)。這種設(shè)計(jì)迫使用戶在返回他們正在玩的游戲之前需要觀看完整的廣告。

• 網(wǎng)站和應(yīng)用旨在通過(guò)頻繁發(fā)送不必要的通知信息，以提高參與度。注意力經(jīng)濟(jì)如何影響用戶通常，設(shè)計(jì)師們會(huì)忽略用戶在使用系統(tǒng)時(shí)需要關(guān)注的許多不同刺激，并且可能會(huì)無(wú)意中設(shè)計(jì)了很多需要用戶過(guò)多關(guān)注的設(shè)計(jì)。

在我們最新的語(yǔ)音助手研究中，我們發(fā)現(xiàn)當(dāng)用戶在開(kāi)車(chē)，亦或是他們的手或眼鏡很忙碌的時(shí)候，經(jīng)常用到手機(jī)語(yǔ)音助手的功能。一個(gè)常見(jiàn)的抱怨是，Siri 或者谷歌助手在手機(jī)屏幕上顯示結(jié)果而不是大聲讀出內(nèi)容。比如，即使是簡(jiǎn)單而常見(jiàn)的問(wèn)路任務(wù)，也可能要求司機(jī)將注意力分散在屏幕信息和道路之間。

配文：在 iPhone 上問(wèn) Siri 得到的查詢結(jié)果是展示在屏幕上的，用戶需要將注意力分散到任務(wù)和屏幕的信息上。

同樣，智能手機(jī)用戶的注意力也經(jīng)常被當(dāng)前使用的應(yīng)用程序、網(wǎng)站、電視節(jié)目或其他外部刺激所分散。這就是為什么手機(jī)上的會(huì)話往往比在臺(tái)式機(jī)上的會(huì)話短：中斷的可能性很高。

為了理解一個(gè)設(shè)計(jì)是否超出了用戶的注意能力，需要在上下文中進(jìn)行研究。實(shí)地研究、日記研究和訪談都可以用來(lái)了解人們?cè)诂F(xiàn)實(shí)生活中是如何使用該系統(tǒng)的。

許多用戶都知道網(wǎng)站和應(yīng)用程序在努力吸引他們的注意力。在最近的可用性測(cè)試中，一個(gè)用戶在 AllRecipes 網(wǎng)站上看一個(gè)關(guān)于“如何做煎餅”的視頻，當(dāng)這個(gè)視頻播完后，網(wǎng)站會(huì)在自動(dòng)播放列表中加入相關(guān)視頻，我們的測(cè)試者沒(méi)有發(fā)現(xiàn)暫停該視頻的選項(xiàng)。在視頻上出現(xiàn)的唯一選項(xiàng)是重新播放，或開(kāi)始觀看播放列表中下一個(gè)視頻。

配文：AllRecipe 網(wǎng)站設(shè)計(jì)了自動(dòng)播放視頻列表，旨在保持用戶對(duì)網(wǎng)站的關(guān)注

當(dāng)播放列表在排隊(duì)時(shí)，用戶評(píng)論到“這似乎讓我看電腦的時(shí)間比我實(shí)際需要的時(shí)間更長(zhǎng)了”。播放列表在每一個(gè)食譜視頻播放之前展示一個(gè)廣告——該網(wǎng)站有明確的經(jīng)濟(jì)激勵(lì)措施，可以將訪問(wèn)者的注意力集中在連續(xù)的視頻上。一些用戶對(duì)于無(wú)法控制花費(fèi)在設(shè)備上的時(shí)間感到無(wú)助。數(shù)字產(chǎn)品的設(shè)計(jì)越來(lái)越吸引人，經(jīng)常讓用戶上癮。對(duì)父母來(lái)說(shuō)，花太多時(shí)間在科技上的影響尤其令人擔(dān)憂。吸引人眼球的設(shè)計(jì)可能會(huì)讓年輕人養(yǎng)成習(xí)慣，當(dāng)設(shè)備被拿走時(shí)，他們可能會(huì)經(jīng)歷“戒斷”。有些用戶會(huì)調(diào)整自身的行為。其中一些調(diào)整是有意識(shí)并采取了行動(dòng)的，以限制在線時(shí)間。經(jīng)過(guò)深思熟慮的調(diào)整包括設(shè)置上網(wǎng)時(shí)間限制、卸載某些應(yīng)用程序或使用家長(zhǎng)控制。用戶還學(xué)會(huì)以微妙的方式保護(hù)他們的注意力。條幅盲目性（Banner blindness）是對(duì)大量信息做出反應(yīng)而產(chǎn)生適應(yīng)性反應(yīng)的一個(gè)例子。條幅盲目性指的是當(dāng)廣告放在右邊欄或頁(yè)面頂部時(shí)，用戶往往會(huì)忽略廣告。這點(diǎn)就很好的說(shuō)明了用戶是如何適應(yīng)大量信息的。用戶也已經(jīng)適應(yīng)了移動(dòng)設(shè)備上常見(jiàn)的通知轟炸：他們已經(jīng)學(xué)會(huì)忽略其中的許多通知。在最近的一次可用性測(cè)試中，我看到一位女士在她的 iPhone 上瀏覽新的博客。當(dāng)會(huì)話的第一個(gè)通知消失時(shí)，她向我道歉并問(wèn)道：“你還用這個(gè)錄音進(jìn)行研究嗎？”在我向她確保這不是個(gè)問(wèn)題之后，她繼續(xù)了這個(gè)測(cè)試任務(wù)。在整個(gè)會(huì)話期間，還有幾個(gè)通知從這個(gè)用戶的手機(jī)上發(fā)出，但沒(méi)有一個(gè)通知打斷她的思路。

注意力經(jīng)濟(jì)的未來(lái)

我們根據(jù)目前觀察到的未來(lái)預(yù)測(cè)，為注意力而設(shè)計(jì)的趨勢(shì)將會(huì)繼續(xù)演變。很多企業(yè)將會(huì)選擇創(chuàng)造更多抓住用戶注意力的廣告。自動(dòng)播放視頻和不可跳過(guò)的廣告幾乎普遍不受用戶歡迎，但它們將繼續(xù)作為設(shè)計(jì)特色。在搶奪用戶注意力的軍備競(jìng)賽中，廣告將會(huì)變得越來(lái)越身臨其境。主流的社交媒體平臺(tái)，如 Facebook、Instagram 和 Snap 都在測(cè)試增強(qiáng)現(xiàn)實(shí)廣告。

一些企業(yè)將會(huì)持續(xù)研究形成習(xí)慣的設(shè)計(jì)，來(lái)吸引用戶越來(lái)越多的關(guān)注他們。注意力經(jīng)濟(jì)擁有一個(gè)樂(lè)觀的未來(lái)也是可能的：最近的發(fā)展為更公平的注意力經(jīng)濟(jì)帶來(lái)了希望。越來(lái)越多的廣告采用了分成收入模式，這使得用戶可以用他們的注意力（觀看廣告）或金錢(qián)（保持他們的注意力）來(lái)支付。

配文：Spotify 允許用戶在其廣告贊助的服務(wù)上免費(fèi)聽(tīng)音樂(lè)，如果用戶希望避免令人分心的廣告，他們可以直接為這項(xiàng)服務(wù)付費(fèi)

一些企業(yè)已經(jīng)回應(yīng)了用戶關(guān)于分散注意力設(shè)計(jì)的抱怨。Apple 最近更改了通知的設(shè)計(jì)，可以在 iPhone 上快速連續(xù)刪除多條通知，還引入了屏幕時(shí)間統(tǒng)計(jì)功能，允許用戶監(jiān)控他們對(duì)點(diǎn)子設(shè)備的使用情況。

結(jié)論

數(shù)字經(jīng)濟(jì)的某些事實(shí)可能不會(huì)改變。在可預(yù)見(jiàn)的未來(lái)，廣告將為一些免費(fèi)內(nèi)容提供資金，應(yīng)用程序?qū)?zhēng)奪新用戶的注意力，而人們的注意力仍然有限。但是，設(shè)計(jì)師在注意力經(jīng)濟(jì)中有一個(gè)選擇：他們可以平衡業(yè)務(wù)需求——— 比如對(duì)新用戶、廣告收入和利潤(rùn)的需求——同時(shí)尊重用戶的最大利益。

原文標(biāo)題：The Attention Economy

原創(chuàng)作者：Lexie Kane

原文鏈接：https://www.nngroup.com/articles/attention-economy/

翻譯作者：櫻桃小丸子

授權(quán)獲取：張聿彤

文章審核：王翎旭

文章編輯：王鴻飛

該譯文并非完整原文，內(nèi)容已做部分調(diào)整。如在閱讀過(guò)程中發(fā)現(xiàn)錯(cuò)誤與疏漏之處，歡迎不吝指出。如需轉(zhuǎn)載，請(qǐng)注明來(lái)自 三分設(shè)

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：三分設(shè)   來(lái)源：站酷

用戶體驗(yàn)（用戶使用產(chǎn)品，系統(tǒng)或服務(wù)過(guò)程中的主觀感受）

用戶在使用產(chǎn)品過(guò)程中建立起來(lái)的一種純主觀感受。用戶體驗(yàn)這個(gè)詞最早被廣泛認(rèn)知是在上世紀(jì)90年代中期，由用戶體驗(yàn)設(shè)計(jì)師唐納德.諾曼（Donald Norman）所提出和推廣。對(duì)于一個(gè)界定明確的用戶群體來(lái)講，用戶體驗(yàn)的共性是能夠經(jīng)由良好設(shè)計(jì)實(shí)驗(yàn)來(lái)認(rèn)識(shí)到。用戶體驗(yàn)并不是指一件產(chǎn)品本身如何工作的，更明確的是指“產(chǎn)品如何與外界發(fā)生聯(lián)系并發(fā)生作用”，也就是人們?nèi)绾巍佑|’和‘使用’。無(wú)論什么產(chǎn)品，用戶體驗(yàn)總是在細(xì)微之處，往往細(xì)節(jié)最能打動(dòng)人心。用戶體驗(yàn)通常要解決的是用戶具體的使用場(chǎng)景，要兼顧視覺(jué)和功能兩方面的因素，同時(shí)解決產(chǎn)品所面臨的其他問(wèn)題。

產(chǎn)品的邏輯簡(jiǎn)易程度對(duì)于用戶體驗(yàn)是一個(gè)反向指標(biāo)，產(chǎn)品越復(fù)雜用戶體驗(yàn)會(huì)越發(fā)困難。往往產(chǎn)品后期更新迭代中，每新增一個(gè)特性，功能或者步驟，都會(huì)增加導(dǎo)致用戶體驗(yàn)不順暢或者失敗的機(jī)會(huì)。用戶體驗(yàn)的每一個(gè)流程，對(duì)開(kāi)發(fā)者而言都要經(jīng)過(guò)慎重的考慮和驗(yàn)證。實(shí)際上設(shè)計(jì)出一個(gè)最優(yōu)的解決方案需要更多的時(shí)間和精力，往往不得不在各個(gè)方面作出妥協(xié)。但是一個(gè)以用戶為中心的設(shè)計(jì)流程保證來(lái)這些妥協(xié)不是隨機(jī)決定的。

為什么每個(gè)產(chǎn)品都在強(qiáng)調(diào)‘站在用戶的角度，提升產(chǎn)品的用戶體驗(yàn)’，因?yàn)閮?yōu)秀的用戶體驗(yàn)就是商機(jī)，良好順暢的用戶體驗(yàn)會(huì)極大的提升用戶轉(zhuǎn)化率，增加用戶的留存率。好的的用戶體驗(yàn)主要體現(xiàn)在兩種形式：“幫助人們工作更快”和“減少他們犯錯(cuò)幾率”。牢記“以用戶為中心的設(shè)計(jì)”在開(kāi)發(fā)產(chǎn)品的每個(gè)流程都要把用戶列入考慮的范圍，每一個(gè)流程步驟都要代入用戶的使用場(chǎng)景中體驗(yàn)，想用戶所想。提供優(yōu)質(zhì)的用戶體驗(yàn)是一個(gè)重要的，可持續(xù)，良性的競(jìng)爭(zhēng)優(yōu)勢(shì)，用戶體驗(yàn)形成用戶對(duì)企業(yè)的整體形象，并以此來(lái)界定來(lái)與競(jìng)品的差異。

在產(chǎn)品的整個(gè)開(kāi)發(fā)流程中都要考慮用戶有可能采取每個(gè)步驟的可能性，并且理解整個(gè)流程中每一個(gè)步驟用戶的期望值。

表現(xiàn)層：視覺(jué)設(shè)計(jì)，我們使用無(wú)論任何設(shè)備的產(chǎn)品最先看到的就是表現(xiàn)層，內(nèi)容、功能和美學(xué)匯集到一起來(lái)產(chǎn)生一個(gè)最終設(shè)計(jì)呈現(xiàn)；

框架層：界面設(shè)計(jì)、導(dǎo)航設(shè)計(jì)和信息設(shè)計(jì)，框架層用于優(yōu)化設(shè)計(jì)布局，以達(dá)到界面中元素的最大效果和效率；

結(jié)構(gòu)層：交互設(shè)計(jì)和信息架構(gòu)，相對(duì)于框架層更加抽象，框架是結(jié)構(gòu)的具體表達(dá)方式，明確來(lái)元素應(yīng)該出現(xiàn)在哪里；

范圍層：功能規(guī)格和內(nèi)容需求，結(jié)構(gòu)層明確了產(chǎn)品的各種特性和功能最優(yōu)的展示組合方式，這些內(nèi)容構(gòu)成了產(chǎn)品的范圍層；

戰(zhàn)略層：產(chǎn)品目標(biāo)和用戶需求，成功的用戶體驗(yàn)，其基礎(chǔ)是一個(gè)被明確表達(dá)的“戰(zhàn)略”。知道企業(yè)與用戶雙方對(duì)產(chǎn)品期許和目標(biāo)，有助于確立用戶體驗(yàn)各方面戰(zhàn)略的制定；

在五個(gè)層面應(yīng)該是自下而上的建設(shè)，戰(zhàn)略 — 范圍 — 結(jié)構(gòu) — 框架 — 表現(xiàn)；不同的層面位置考慮的方向和側(cè)重點(diǎn)是不一樣的，隨著層面的上升我們考慮的決策變得更加具體，并且涉及越來(lái)越精細(xì)的細(xì)節(jié)表現(xiàn)。每一個(gè)層面都是根據(jù)下面層面來(lái)決定的，每一個(gè)層面的決定都會(huì)影響上層的可用選擇，表現(xiàn)層由框架層決定，框架層是建立在結(jié)構(gòu)層的基礎(chǔ)上，結(jié)構(gòu)層是具有范圍層，范圍層是根據(jù)戰(zhàn)略層制定的。

按照產(chǎn)品不同屬性分為兩大類：功能性產(chǎn)品/信息型產(chǎn)品；針對(duì)不同的類型將五要素細(xì)分展示，功能型產(chǎn)品更加關(guān)注的是任務(wù)，去思考用戶如何完成這個(gè)過(guò)程，用戶使用該產(chǎn)品完成一個(gè)或多個(gè)任務(wù)的工具；信息型產(chǎn)品關(guān)注的則為信息，產(chǎn)品應(yīng)該提供哪些信息，并且方便用戶快速尋找，理解，創(chuàng)建一個(gè)富信息的用戶體驗(yàn)；這種把用戶體驗(yàn)劃分為各個(gè)模塊和層面的模式，更有利于我們?nèi)タ紤]用戶體驗(yàn)中可能出現(xiàn)的麻煩。所有處在同一層面的要素都會(huì)決定最終的用戶體驗(yàn)效果。

優(yōu)秀的用戶體驗(yàn)基礎(chǔ)是要有明確的“戰(zhàn)略”立意，知道企業(yè)和用戶對(duì)產(chǎn)品的期許和目標(biāo)，才能更好的促進(jìn)用戶體驗(yàn)各方面的完善和優(yōu)化。我們要用過(guò)產(chǎn)品獲得什么？用戶通過(guò)產(chǎn)品可用得到什么？回答這兩個(gè)問(wèn)題有助于我們更好的明確產(chǎn)品目標(biāo)和用戶需求，結(jié)合兩者我們組成戰(zhàn)略層。

產(chǎn)品目標(biāo)：目標(biāo)的制定切記不要太過(guò)具體或太寬泛我們需要在這之間找出一個(gè)平衡點(diǎn)，為了更好的用戶體驗(yàn)我們需要保證所作出的決策都不是頭腦發(fā)熱拍腦門(mén)定出來(lái)的，每一個(gè)決策，都應(yīng)該建立在我們確切了解他所帶來(lái)的聯(lián)動(dòng)影響效果。明確的定義出成功的條件而不是定義成功的路徑，有時(shí)候跑的慢一定不一定就是落后者。既然是賽跑肯定會(huì)有終點(diǎn)有結(jié)果的產(chǎn)出，我們要明確“成功的標(biāo)準(zhǔn)”制定可追蹤的指標(biāo)，成功的標(biāo)準(zhǔn)不僅僅影響各階段的決策，也是衡量用戶體驗(yàn)工作的具體依據(jù)，埋點(diǎn)數(shù)據(jù)采集，上線后的客戶流存率，轉(zhuǎn)化率，新用戶的增長(zhǎng)率，老客戶的使用反饋等等。對(duì)驅(qū)動(dòng)用戶體驗(yàn)的決策而言有意義的成功標(biāo)準(zhǔn)，一定是可用明確與用戶行為綁定的標(biāo)準(zhǔn)，而這些用戶行為一定是可以通過(guò)設(shè)計(jì)來(lái)影響的。

用戶需求：明確正確的用戶需求是復(fù)雜不易的，因?yàn)橛脩羧后w存在很大差異性，確定大致目標(biāo)用戶后我們還需要精細(xì)化的區(qū)分，將用戶分成較小的，有共同特性的以此來(lái)助力我們更好的明確用戶需求，通過(guò)不同的角色群體使用產(chǎn)品來(lái)分析他們的需求。在針對(duì)用戶需求研究時(shí)我們還可以使用一些市場(chǎng)調(diào)研（將你想要的信息通過(guò)具體，有效的公式化問(wèn)題，讓用戶提交你正確的答案）；現(xiàn)場(chǎng)調(diào)查（完整的，有效且全面的方法，了解與產(chǎn)品使用生活場(chǎng)景最匹配的用戶行為）；創(chuàng)建人物角色（模擬真實(shí)用戶使用場(chǎng)景更加貼近用戶，再產(chǎn)品思考中和用戶更感同身受）。戰(zhàn)略應(yīng)該是用戶體驗(yàn)中的起點(diǎn)，但并不意味著項(xiàng)目開(kāi)始之前戰(zhàn)略就完全確定下來(lái)，它是可以在整個(gè)工作中演變和改進(jìn)的。

當(dāng)我們明確了解戰(zhàn)略層后，我們就知道產(chǎn)品應(yīng)該為用戶提供什么功能和服務(wù)，這些也就逐步演變?yōu)榉秶鷮?。我們要做兩個(gè)事情來(lái)定義范圍層 —過(guò)程和產(chǎn)品。過(guò)程的意義在于當(dāng)產(chǎn)品還在一個(gè)雛形時(shí)，可以帶動(dòng)我們?nèi)ニ伎剂鞒讨锌赡艽嬖诘膯?wèn)題，功能實(shí)現(xiàn)的優(yōu)先級(jí)；產(chǎn)品的意義在于明確最終產(chǎn)出的結(jié)果，團(tuán)隊(duì)有明確的目標(biāo)。在這其中文檔的輸出是必不可少的，有計(jì)劃性說(shuō)明性的文檔輸出可以讓我們的工作更加有條不紊的推進(jìn)下去。我們可以從戰(zhàn)略層抽象出來(lái) — “我們?yōu)槭裁匆_(kāi)發(fā)這個(gè)產(chǎn)品？”轉(zhuǎn)而到范圍層變?yōu)?— “我們要開(kāi)發(fā)的是什么？”在軟件開(kāi)發(fā)過(guò)程中，范圍層確定的是全部功能需求和功能規(guī)格。

功能規(guī)格：功能規(guī)格說(shuō)明不需要包含產(chǎn)品的每個(gè)細(xì)節(jié)，只需要包含在設(shè)計(jì)或開(kāi)發(fā)過(guò)程中可能出現(xiàn)混淆的功能定義。同時(shí)功能規(guī)格說(shuō)明也不需要展望產(chǎn)品未來(lái)理想狀態(tài)，只需要記錄在創(chuàng)建產(chǎn)品時(shí)確定下來(lái)的決議。換句話說(shuō)，文檔不能解決問(wèn)題，但是定義可以，我們需要不是文檔多么詳細(xì)厚重，而是要足夠的清晰和準(zhǔn)確。功能說(shuō)明要明確具體避免主觀語(yǔ)氣，避免出現(xiàn)歧義，盡可能用量化的可檢驗(yàn)的標(biāo)準(zhǔn)來(lái)定義功能有助于我們的驗(yàn)收。

內(nèi)容需求：很多時(shí)候我們說(shuō)到的內(nèi)容指的是文本。但是圖像，音頻和視頻有時(shí)候比文字還要重要。這些不同類型的內(nèi)容結(jié)合到一起，相互協(xié)作去滿足某一個(gè)需求。內(nèi)容特性想要達(dá)到的規(guī)模，將對(duì)你所做的用戶體驗(yàn)產(chǎn)生極大的影響，內(nèi)容需求應(yīng)該提供每一種特性規(guī)模的大致預(yù)估，以便在設(shè)計(jì)過(guò)程中作出最為明智的決策。盡可能早的確定某個(gè)人來(lái)負(fù)責(zé)每一個(gè)內(nèi)容元素也是非常重要的，避免后期開(kāi)發(fā)實(shí)現(xiàn)達(dá)不到我們預(yù)期的效果。內(nèi)容清單的輸出也是重要的，究其原因這樣團(tuán)隊(duì)中的每個(gè)人都會(huì)清楚知道自己負(fù)責(zé)的哪些部分，明確責(zé)任，提高協(xié)同效率。

學(xué)會(huì)確定需求優(yōu)先級(jí)，了解“不需要做什么”也就意味的我們知道哪些是必須要“馬上去做的”，把那些需求點(diǎn)梳理出來(lái)，找到一種適宜的方式，讓它們符合你長(zhǎng)期的規(guī)劃，這才是真正的價(jià)值所在。確定具體，系統(tǒng)的發(fā)展要求，并將任何不符合這些要求的想法作為潛在未來(lái)功能的囤積，只有通過(guò)這種更慎重的途徑，才可以真正的管理起整個(gè)項(xiàng)目過(guò)程。

在羅列出項(xiàng)目需求優(yōu)先級(jí)，梳理出大致的流程，我們對(duì)于產(chǎn)品將會(huì)包括什么主要內(nèi)容已經(jīng)有了清晰的構(gòu)想。然而，這些需求沒(méi)有進(jìn)行全面的整合還是碎片化的存在。而結(jié)構(gòu)層要做的就是整合這些創(chuàng)建一個(gè)概念性的結(jié)構(gòu)。結(jié)構(gòu)層適當(dāng)?shù)膶⑽覀冴P(guān)注點(diǎn)從抽象的決策和范圍問(wèn)題，轉(zhuǎn)移到更能影響最后的用戶體驗(yàn)具體因素。但是這里的交互設(shè)計(jì)和信息架構(gòu)所產(chǎn)出的東西大部分還是概念性的內(nèi)容。這兩項(xiàng)內(nèi)容并不完全是技術(shù)，它要求開(kāi)發(fā)者要有共情能力去理解用戶，理解用戶行為操作習(xí)慣，使用場(chǎng)景，思考方式等。將了解的這些知識(shí)代入我們開(kāi)發(fā)過(guò)程中，這樣會(huì)使那些不得不使用我們產(chǎn)品的用戶帶來(lái)更好的用戶體驗(yàn)。

交互設(shè)計(jì)：關(guān)注于影響用戶執(zhí)行和完成任務(wù)的元素，即關(guān)注用戶所有操作，同時(shí)定義“系統(tǒng)如何配合與響應(yīng)”這些用戶行為。任何一個(gè)交互設(shè)計(jì)的項(xiàng)目都有很大部分牽涉處理“用戶錯(cuò)誤”當(dāng)用戶發(fā)生錯(cuò)誤時(shí)產(chǎn)品要給出什么提示，并且對(duì)于錯(cuò)誤發(fā)生時(shí)，如何防止用戶再次發(fā)生錯(cuò)誤？第一個(gè)也是最好的防止錯(cuò)誤的方法，就是將產(chǎn)品設(shè)計(jì)為不可能犯錯(cuò)的。第二個(gè)避免錯(cuò)誤的方法就是使錯(cuò)誤難以發(fā)生，即使一些錯(cuò)誤發(fā)生，產(chǎn)品也應(yīng)該幫助用戶改正錯(cuò)誤。有效的錯(cuò)誤信息和容易自我解釋的界面可以在錯(cuò)誤發(fā)生之后幫用戶糾正。當(dāng)用戶完成一些操作后無(wú)法糾正的錯(cuò)誤，產(chǎn)品就該提供從錯(cuò)誤中恢復(fù)的方式。對(duì)于那些不可恢復(fù)撤銷的錯(cuò)誤，提供大量警告就是產(chǎn)品唯一可以預(yù)防的方法。

信息框架：研究人們?nèi)绾握J(rèn)知信息的過(guò)程，對(duì)于產(chǎn)品而言信息架構(gòu)關(guān)注的就是呈現(xiàn)給用戶信息是否合理并卻具有意義。在以內(nèi)容為主的網(wǎng)站上，信息架構(gòu)主要工作就是設(shè)計(jì)組織分類和導(dǎo)航的結(jié)構(gòu)，讓用戶可以高效率，有效的瀏覽網(wǎng)站的內(nèi)容。信息框架與信息檢索和分類體系密布可分，針對(duì)分類體系我們可以從上到下或從下到上這兩種方法來(lái)建立。

從上到下的信息架構(gòu)從戰(zhàn)略層考慮，先從最廣泛的，有可能滿足決策目標(biāo)的內(nèi)容與功能開(kāi)始進(jìn)行分類，然后再依據(jù)邏輯細(xì)分出次級(jí)分類；從下到上根據(jù)對(duì)“內(nèi)容和功能需求分析”而來(lái)，從已有的資料開(kāi)始，先把他們分為最低級(jí)別的分類，然后再歸納到高一級(jí)分類，從而逐步構(gòu)建出反應(yīng)我們產(chǎn)品目標(biāo)和用戶需求的結(jié)構(gòu)。這兩種方法各有弊端，從下而上容易將內(nèi)容的重要細(xì)節(jié)忽略，從下而上使架構(gòu)過(guò)于精準(zhǔn)的反應(yīng)內(nèi)容，對(duì)于后期的維護(hù)變動(dòng)不是很靈活。因此我們要盡可能的從兩種方式中尋找一個(gè)平衡點(diǎn)。一個(gè)高效結(jié)構(gòu)的優(yōu)點(diǎn)就是具備“容納成長(zhǎng)和適用變動(dòng)”的能力。一個(gè)適應(yīng)性強(qiáng)的信息架構(gòu)體系，既可以把新內(nèi)容作為現(xiàn)有結(jié)構(gòu)的一部分容納進(jìn)來(lái)也可以當(dāng)成一個(gè)新的部分加入。

在充滿概念型的結(jié)構(gòu)層牽引出大量需求后，這些需求都是來(lái)自我們戰(zhàn)略目標(biāo)的需求。在框架層我們要更進(jìn)一步的提煉這些需求結(jié)構(gòu)，確定詳細(xì)的界面外觀，導(dǎo)航和信息設(shè)計(jì)，這樣才能使結(jié)構(gòu)變得更加豐滿。框架層需要處理更為細(xì)節(jié)問(wèn)題，在結(jié)構(gòu)層我們建立了一個(gè)框架和交互設(shè)計(jì)。在框架層我們關(guān)注點(diǎn)就是界面的元素以及它們之間的關(guān)系。當(dāng)我們提供用戶做某些事情的能力是，屬于界面設(shè)計(jì)；當(dāng)我們提供用戶去某個(gè)地方能力，則屬于導(dǎo)航設(shè)計(jì)；當(dāng)我們要傳達(dá)想法給用戶時(shí)，那就是信息設(shè)計(jì)。

界面設(shè)計(jì)：成功的界面設(shè)計(jì)就是要讓用戶一眼就看到“最重要的東西”，而另一方面，不重要的東西，不應(yīng)該被注意有時(shí)候則它們根本就沒(méi)有出現(xiàn)在那。設(shè)計(jì)界面，平面最大的挑戰(zhàn)之一就是弄清楚用戶不關(guān)注的東西并減少他們的比重。將第一要表達(dá)的要素快速傳遞到用戶。

導(dǎo)航設(shè)計(jì)：任何一個(gè)網(wǎng)站的導(dǎo)航設(shè)計(jì)必須同時(shí)完成三個(gè)目標(biāo)：1.它必須要提供用戶在網(wǎng)站的跳轉(zhuǎn)方式；2.導(dǎo)航設(shè)計(jì)必須傳達(dá)出這些元素和它們所包含內(nèi)容的關(guān)系；3.導(dǎo)航設(shè)計(jì)必須傳達(dá)出它的內(nèi)容和用戶當(dāng)前瀏覽頁(yè)之間的關(guān)系；這三個(gè)目標(biāo)就是必須要納入考慮的范圍，清晰的告知用戶“他們?cè)谀睦铩币约啊八麄兡苋ツ睦铩卑延脩舢?dāng)成是“傻瓜上帝”。

習(xí)慣和反射作用是我們與這個(gè)世界交互時(shí)的基礎(chǔ)，我們?cè)谑褂没ヂ?lián)網(wǎng)產(chǎn)品這么多年的時(shí)間中，絕大部分的操作效果和下意識(shí)的操作方式已經(jīng)被養(yǎng)成，所以要讓你的界面與用戶早養(yǎng)成的習(xí)慣保持一致是很重要的，界面要與它自身保持一致。這并不是說(shuō)，每一個(gè)界面問(wèn)題的解決方式都必須毫無(wú)條件的死守這些習(xí)慣。當(dāng)某種不同的方式有明顯的益處時(shí)，你反而應(yīng)該嘗試謹(jǐn)慎的違背一些習(xí)慣，到那時(shí)需要我們做的每一個(gè)決定都要有充分的，明確的理由。有效的使用比喻，就是減少用戶在“理解和使用你的產(chǎn)品功能”是的猜忌，讓用戶第一眼就知道你的圖標(biāo)表達(dá)的是什么意思，要有強(qiáng)指示性質(zhì)。

內(nèi)容，功能和美學(xué)匯集的地方，完成其他四個(gè)層面的所有目標(biāo)并同時(shí)滿足用戶的感官感受。在框架層，我們主要解決放置的事情；在界面設(shè)計(jì)考慮可交互的元素布局；導(dǎo)航設(shè)計(jì)考慮在產(chǎn)品引導(dǎo)用戶移動(dòng)元素安排；而信息設(shè)計(jì)考慮傳達(dá)給用戶的信息要素的排布；在向上就是表現(xiàn)層，我們這里要解決的就是彌補(bǔ)“產(chǎn)品框架層邏輯排布”的感知呈現(xiàn)問(wèn)題。我們每一次經(jīng)歷最終都是由我們的感覺(jué)器官來(lái)進(jìn)行的。在設(shè)計(jì)的過(guò)程中這是用戶體驗(yàn)的最后一站：決定我們?cè)O(shè)計(jì)最后被哪些（視覺(jué)/聽(tīng)覺(jué)/嗅覺(jué)/觸覺(jué)/味覺(jué)）感受器官受到呢？

嗅覺(jué)和味覺(jué)對(duì)于用戶體驗(yàn)設(shè)計(jì)師是很少考慮的范圍；觸覺(jué)更多的用于工業(yè)設(shè)計(jì)領(lǐng)域，關(guān)注用戶和產(chǎn)品之間的物理接觸；聽(tīng)覺(jué)可以應(yīng)用到不同類的產(chǎn)品中，如開(kāi)機(jī)/新消息提示等；視覺(jué)：這是用戶體驗(yàn)師最得心應(yīng)手餓領(lǐng)域，幾乎所有的產(chǎn)品都會(huì)涉及視覺(jué)設(shè)計(jì)。代替用“什么具有美感”來(lái)評(píng)估一個(gè)視覺(jué)設(shè)計(jì)方案，應(yīng)該吧注意力集中在他們能否“良好運(yùn)作”，對(duì)于那些上層決定的目標(biāo)，設(shè)計(jì)能否賦能幫助企業(yè)更好的變現(xiàn)，設(shè)計(jì)的本質(zhì)就是用合適的方式幫助用戶/企業(yè)完成需求目標(biāo)；

忠于眼睛評(píng)估一個(gè)產(chǎn)品視覺(jué)設(shè)計(jì)最簡(jiǎn)單的方式，就是你的視覺(jué)首先落在什么地方？哪個(gè)設(shè)計(jì)要素第一時(shí)間吸引注意力？它們對(duì)于戰(zhàn)略目標(biāo)是最需要表現(xiàn)的東西嗎？用戶第一時(shí)間接受的信息是你想要表達(dá)的嗎？設(shè)計(jì)還是要把握4大基本原則：對(duì)比；重復(fù)；對(duì)齊；親密性；

不管你的產(chǎn)品多復(fù)雜，用戶體驗(yàn)都是一樣的，創(chuàng)建良好的用戶體驗(yàn)最重要的工作內(nèi)容就是大量收集解決細(xì)微的問(wèn)題。“成功的方法”和“注定失敗的方法”歸根究底就是：1.了解你正在試著去解決的問(wèn)題；2.了解這些解決辦法所造成的后果；必須要同時(shí)考慮五個(gè)層面的全部因素，這對(duì)于創(chuàng)建成功的用戶體驗(yàn)至關(guān)重要。

提成正確的問(wèn)題，面對(duì)那些用戶體驗(yàn)需要解決的糾纏不清的問(wèn)題，要抱有一種正確心態(tài)，不要以“節(jié)約項(xiàng)目時(shí)間或金錢(qián)”名義對(duì)用戶體驗(yàn)問(wèn)題敷衍了事。

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)加ben_lanlan，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系

作者：許小鵬   來(lái)源：站酷

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(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.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ù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

呼吸感

這里指的頁(yè)面之間的呼吸感，比如模塊之間的間距，柵格的間距等，在2020年之前很多App在設(shè)計(jì)側(cè)邊欄的時(shí)候大多都是在留12px（1倍圖）的間距，但是隨著現(xiàn)在業(yè)務(wù)的不斷拓展， 產(chǎn)品內(nèi)可能會(huì)出現(xiàn)很多業(yè)務(wù)模塊我們?nèi)绻^續(xù)留12px就會(huì)造成沒(méi)有張力。

隨著ios15系統(tǒng)的到來(lái)，蘋(píng)果設(shè)計(jì)系統(tǒng)也對(duì)頁(yè)面進(jìn)行了大間距、大留白的定義，因此我們未來(lái)設(shè)計(jì)時(shí)可以適當(dāng)?shù)募哟箜?yè)面的側(cè)邊距。

收起標(biāo)題

一般在頁(yè)面首屏無(wú)任何操作時(shí)頂部都會(huì)具有標(biāo)題，當(dāng)用戶進(jìn)行操作時(shí)候，我們可以進(jìn)行縮小或者隱藏，這樣的話在交互過(guò)程中增加頁(yè)面展示空間，并營(yíng)造出呼吸感。

卡片圓角

我們?cè)诟陌婊蛘邇?yōu)化頁(yè)面時(shí)，都會(huì)卡片的角度，不同的度數(shù)能傳達(dá)出不同的感覺(jué)，像直角卡片傳遞的感知正向?yàn)椋簢?yán)謹(jǐn)、沉穩(wěn)、高級(jí)，反向：危險(xiǎn)、尖銳，而圓角則傳遞出柔和、安全、輕量，不同的產(chǎn)品在定義風(fēng)格時(shí)需要慎重考慮，這與后續(xù)的設(shè)計(jì)聯(lián)動(dòng)較大。

直角卡片風(fēng)格適合金融理財(cái)、高端制造、珠寶方向等價(jià)值上較高的產(chǎn)品

而圓角卡片大多能兼顧很多產(chǎn)品風(fēng)格，只需要調(diào)整圓角的大小，如餐飲、工具、教育等等，例如產(chǎn)品是針對(duì)的兒童圓角可以進(jìn)行加大處理。

多利用配圖

人是視覺(jué)動(dòng)物，UI設(shè)計(jì)中的圖像可以分為兩種，照片和插圖，在設(shè)計(jì)中我們可以盡可能的使用插圖傳達(dá)信息，插圖的視覺(jué)效果大于純文字和圖標(biāo)，并且插圖的信息傳達(dá)效率也大于文字。

動(dòng)效

動(dòng)效可以在信息傳達(dá)上更加直觀，并且能夠展示出產(chǎn)品頁(yè)面之間的細(xì)節(jié)，一個(gè)好的動(dòng)效在情感化上也可以觸動(dòng)人心，在設(shè)計(jì)的過(guò)程中如果可以添加動(dòng)效，我還是建議使用一些微動(dòng)畫(huà)去表現(xiàn)，如加載、空狀態(tài)等無(wú)聊的頁(yè)面，就可以通過(guò)動(dòng)效方式減少用戶枯燥的感知。

作者：愛(ài)吃貓的魚(yú)___   來(lái)源：站酷
藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(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.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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司

用戶體驗(yàn)設(shè)計(jì)師經(jīng)常需要兼職各個(gè)角色職責(zé)，除了線框圖和原型制作之外，還有可能與團(tuán)隊(duì)一起研究、寫(xiě)作等問(wèn)題。這樣的例子不勝枚舉，用戶體驗(yàn)是一個(gè)不斷發(fā)展的多學(xué)科領(lǐng)域，因此優(yōu)秀的 UX 設(shè)計(jì)需要廣泛的技能開(kāi)發(fā)，UX寫(xiě)作位居榜首。

一、內(nèi)容策略簡(jiǎn)介

關(guān)注用戶從內(nèi)容開(kāi)始，內(nèi)容策略是所有產(chǎn)品信息的制作和開(kāi)發(fā)。用戶體驗(yàn)（UX）寫(xiě)作是該學(xué)科的專長(zhǎng)，它專注于幫助用戶用語(yǔ)言實(shí)現(xiàn)他們的目標(biāo)。

語(yǔ)言幫助用戶到達(dá)他們想去的地方，通過(guò)關(guān)注用戶想要實(shí)現(xiàn)的目標(biāo)，內(nèi)容策略可以建立忠誠(chéng)度和信任度。

UX設(shè)計(jì)師思考頁(yè)面上的信息層次結(jié)構(gòu)，然后，這將指導(dǎo)用戶操作。UX與研究人員一起測(cè)試有關(guān)語(yǔ)言的假設(shè)并提供專業(yè)的見(jiàn)解。

當(dāng)您擁有 UX 寫(xiě)作的基礎(chǔ)，并參與品牌建設(shè)時(shí)，就會(huì)發(fā)生驚人的事情，用戶體驗(yàn)寫(xiě)作可以讓品牌茁壯成長(zhǎng)。

二、用戶體驗(yàn)寫(xiě)作最佳三個(gè)原則

1.清晰

通常在產(chǎn)品中，使用的詞是軟件操作，請(qǐng)用動(dòng)詞，它往往是句子中最有力的部分。它將與用戶的某些操作有關(guān)，

保障用戶使用中清楚，需要?jiǎng)h除技術(shù)術(shù)語(yǔ)并將操作置于用戶的上下文中。

2.簡(jiǎn)潔

簡(jiǎn)潔不僅意味著簡(jiǎn)短，還意味著簡(jiǎn)單高效。當(dāng)我們寫(xiě)作時(shí)，需要查看我們的信息每個(gè)詞語(yǔ)都有不同的工作。

以上是產(chǎn)品寫(xiě)作中的常見(jiàn)問(wèn)題，在這里不需要標(biāo)題。在系統(tǒng)接口中很常見(jiàn)，研發(fā)提供一種狀態(tài)，我們通過(guò)這種狀編寫(xiě)文案。我們應(yīng)該確保內(nèi)容優(yōu)于設(shè)計(jì)，視覺(jué)效果與要表達(dá)的內(nèi)容一致。盡量不要把信息塞進(jìn)不適合的盒子（代碼）里。

在這里，我們刪除了標(biāo)題。正如研究表明，大多數(shù)人不會(huì)閱讀屏幕上出現(xiàn)的每個(gè)詞語(yǔ)，用戶傾向于掃描。他們的眼睛會(huì)遵循 F 形圖案。閱讀第一行，第二行，然后開(kāi)始向下跳過(guò)頁(yè)面，只捕捉每個(gè)句子的第一個(gè)或第二個(gè)詞。出于這個(gè)原因，保持我們的文本不僅簡(jiǎn)潔而且前置。將重要概念放在首位，這樣做是為了讓人們?cè)跒g覽頁(yè)面時(shí)能看到那些重要的詞。

這個(gè)原則永遠(yuǎn)適用，將最重要的文本放在前面，然后無(wú)情地編輯后面的內(nèi)容。

3.有用

號(hào)召性用語(yǔ) (CTA) 引導(dǎo)人們進(jìn)行下一步，您希望引導(dǎo)用戶到達(dá)他們想去的地方，號(hào)召性用語(yǔ)需要與用戶想要做的事情產(chǎn)生共鳴，這里的“好的”不是一個(gè)好的行動(dòng)號(hào)召。

“再試一次”是一個(gè)不錯(cuò)的選擇，這不是全部場(chǎng)景，如果用戶忘記了密碼，而唯一的按鈕只有“再試一次”，用戶可能會(huì)感到沮喪，我們需要給用戶多一個(gè)選項(xiàng)「忘記密碼」。

注意寫(xiě)作時(shí)需要結(jié)合使用場(chǎng)景，它可能需要提供的一些基本功能，但可以提升產(chǎn)品的用戶體驗(yàn)。

4.最佳實(shí)踐總結(jié)

如果您注意這三個(gè)原則，您將更好地與用戶建立聯(lián)系。

這三個(gè)原則并不總是協(xié)調(diào)一致的，他們之間有一種張力在互相競(jìng)爭(zhēng)。

當(dāng)我們使文本清規(guī)則時(shí)，文案仍然很長(zhǎng)，而且不太好閱讀。當(dāng)我們使文本簡(jiǎn)潔規(guī)則時(shí)，它使文案更短，但可能犧牲一些清晰度為代價(jià)。最后，當(dāng)我們使文本有用規(guī)則時(shí)，它變得更長(zhǎng)且更不易閱讀。

三、建立產(chǎn)品品牌文案

1.品牌原則

從一個(gè)品牌中，我們可以篩選出 3 或 4 個(gè)形容詞，以及希望用戶如何看待它。提取這些形容詞，可以采用頭腦風(fēng)暴練習(xí)。

想象一下，如果要設(shè)計(jì)一個(gè)約會(huì)產(chǎn)品

您會(huì)在產(chǎn)品資料中加入什么詞或信息？讓它在眾多產(chǎn)品中脫穎而出，是什么讓用戶覺(jué)得它最有趣？

是什么讓用戶想要點(diǎn)擊并想要了解更多信息？

然后，您可以將這些品質(zhì)提煉成描述性詞語(yǔ)，這些將成為您的品牌原則。

Google Pay 的原則是：新鮮、善解人意、平易近人。 

2.語(yǔ)氣

想想您在不同的環(huán)境或情緒中聽(tīng)到聲音是什么樣，這是語(yǔ)氣。

聲音和語(yǔ)氣之間差異，是聲音傳播手段，語(yǔ)氣是根據(jù)情況或內(nèi)容而不斷調(diào)整的。在一個(gè)產(chǎn)品中，就像在不同的情況下以不同的方式與用戶交談，語(yǔ)氣的利用容易帶用戶進(jìn)入情感化的設(shè)計(jì)。

例如：

• 抱歉，網(wǎng)絡(luò)連接失敗，請(qǐng)重新連接
• 暫無(wú)內(nèi)容，請(qǐng)刷新試試

3.音譜（產(chǎn)品階段）

將不同的階段映射到用戶旅程中，可確保用戶在整個(gè)產(chǎn)品體驗(yàn)中以一致的方式使用產(chǎn)品文案。

對(duì)于產(chǎn)品，您的文案寫(xiě)作可能從信息豐富到鼓舞人心或者幽默風(fēng)趣。創(chuàng)建產(chǎn)品開(kāi)端與終端后，您需要確定要映射的用戶旅程中的哪些時(shí)刻，考慮用戶體驗(yàn)中不同的里程碑或交互，如注冊(cè)、引導(dǎo)、或錯(cuò)誤提示之類。

為了幫助您確定這些將落在頻譜中的哪個(gè)位置，您可以考慮：

• 用戶的目標(biāo)是什么？
• 那一刻他們可能有什么感受？
• 你希望他們有什么感覺(jué)？ 

四、我們做一些寫(xiě)作練習(xí)

現(xiàn)在，我們將前面講的內(nèi)容，融合在一起做一次UX 寫(xiě)作練習(xí)

UX寫(xiě)作原則

舉個(gè)例子，第一次使用 Android Pay 時(shí)需要對(duì)用戶說(shuō)什么？

第1步

在流程開(kāi)始時(shí)，從以下描述性內(nèi)容開(kāi)始：

第2步

思考良好的用戶體驗(yàn)寫(xiě)作的三個(gè)原則，文本清晰有用，但并不簡(jiǎn)潔。讓我們查看看哪些信息是必不可少的，哪些部分可以使用視覺(jué)效果？最后編輯為如下所示：

Google Pay 的原則是：新鮮、善解人意、平易近人。

第 3 步

文案已經(jīng)清楚，簡(jiǎn)潔和有用，現(xiàn)在需要考慮語(yǔ)氣詞，還有就是“這段文字是否傳達(dá)了品牌？”不多，感覺(jué)很一般。

因此，回到品牌原則，需要考慮如何讓它更新鮮、更令人興奮，因?yàn)檫@可能是用戶的第一印象。

五、你的用戶體驗(yàn)寫(xiě)作清單

有了這份清單，您就可以讓產(chǎn)品在語(yǔ)言上脫穎而出：

• 用戶至上：關(guān)注您的用戶
• 清晰：用沒(méi)有行話的語(yǔ)言和上下文寫(xiě)作
• 簡(jiǎn)潔：以高效且可掃描的風(fēng)格書(shū)寫(xiě)
• 有用的：以指導(dǎo)下一步行動(dòng)的方式寫(xiě)作
• 關(guān)于品牌：定義品牌的聲音并應(yīng)用適當(dāng)?shù)恼Z(yǔ)氣

行業(yè)對(duì)設(shè)計(jì)師的要求?直都在不斷革新，只有「?技之?」的設(shè)計(jì)師已經(jīng)很難滿??業(yè)需要，產(chǎn)品分析已經(jīng)不僅僅是產(chǎn)品經(jīng)理的工作內(nèi)容，對(duì)于 UI 設(shè)計(jì)師來(lái)說(shuō)，也是必備技能之一了，尤其是對(duì)于 B 端領(lǐng)域的設(shè)計(jì)師來(lái)說(shuō)，更需要拓寬視野，思維前置。

那么，該如何去做產(chǎn)品分析呢？本文將從產(chǎn)品分析是什么，如何做兩個(gè)方面來(lái)講述，為大家提供思路，做真正落地的對(duì)設(shè)計(jì)有幫助的產(chǎn)品分析，提高自己理解業(yè)務(wù)、處理業(yè)務(wù)、解決問(wèn)題的能力，體現(xiàn)出設(shè)計(jì)師的價(jià)值。

1.1 產(chǎn)品分析定義

1.11 B端產(chǎn)品是什么

對(duì)于 B 端產(chǎn)品來(lái)說(shuō)，它只有一個(gè)目標(biāo)，就是解決問(wèn)題，通過(guò)對(duì)問(wèn)題的分析得出解決方案，而任何一個(gè)問(wèn)題都不會(huì)只有一種解決方案，在權(quán)衡利弊后得出了最終的解決方案，產(chǎn)品就是解決方案的表現(xiàn)形式和實(shí)際載體。

1.12 產(chǎn)品分析是什么

從設(shè)計(jì)師的角度來(lái)說(shuō)，產(chǎn)品分析通常是挖掘產(chǎn)品缺陷，優(yōu)化產(chǎn)品體驗(yàn)，為產(chǎn)品迭代提供依據(jù)，比如：通過(guò)深度體驗(yàn)產(chǎn)品，挖掘產(chǎn)品的在功能、交互體驗(yàn)方面的不足，并通過(guò)分析制定產(chǎn)品優(yōu)化方案。一款產(chǎn)品從淺至深擁有無(wú)數(shù)的可被挖掘的信息，這些信息本身是龐雜冗余無(wú)意義的，只有通過(guò)分類和清洗才能得到對(duì)人有意義的信息，本質(zhì)上來(lái)說(shuō)，產(chǎn)品分析就是在做信息分類和清洗的工作。

1.2 產(chǎn)品分析與市場(chǎng)分析、競(jìng)品分析

1.21 市場(chǎng)分析

市場(chǎng)分析是對(duì)產(chǎn)品所在的市場(chǎng)進(jìn)行宏觀的競(jìng)爭(zhēng)態(tài)勢(shì)和市場(chǎng)規(guī)模的分析。市場(chǎng)分析主要包括行業(yè)背景、市場(chǎng)現(xiàn)狀和商業(yè)模式三部分?？梢钥吹?，市場(chǎng)分析其實(shí)是從很宏觀的一個(gè)角度來(lái)切入，更偏向于戰(zhàn)略層內(nèi)容，因此市場(chǎng)分析也是三者中距離設(shè)計(jì)師最遠(yuǎn)的一個(gè)概念。用通俗的話來(lái)說(shuō)，市場(chǎng)分析最主要的目的就是分析產(chǎn)品是否賺錢(qián)。

1.22 競(jìng)品分析

廣泛意義上說(shuō)，競(jìng)品分析就是根據(jù)分析目的，找到切入角度，對(duì)競(jìng)爭(zhēng)對(duì)手或市場(chǎng)進(jìn)行客觀分析，找到競(jìng)品或自己的優(yōu)勢(shì)與不足，為下一步?jīng)Q策提供科學(xué)依據(jù)，其實(shí)就是「知己知彼」的過(guò)程。對(duì)于設(shè)計(jì)師而言，競(jìng)品分析的目的更傾向于尋找解決方案，比如：通過(guò)競(jìng)品分析來(lái)尋找參考從而解決自己當(dāng)前遇到的問(wèn)題。

1.3 產(chǎn)品分析對(duì)設(shè)計(jì)師的意義

• 1. 設(shè)計(jì)：幫助設(shè)計(jì)師理解產(chǎn)品的歷史和現(xiàn)狀，避免設(shè)計(jì)時(shí)天馬行空無(wú)法落地
• 2. 業(yè)務(wù)：幫助設(shè)計(jì)師快速理解業(yè)務(wù)和融入新團(tuán)隊(duì)
• 3. 溝通：可以幫助設(shè)計(jì)師同產(chǎn)品經(jīng)理更好地進(jìn)行對(duì)話，降低溝通成本

1.4 難點(diǎn)——業(yè)務(wù)難以理解

不同于 C 端，B 端往往有很堅(jiān)固的行業(yè)壁壘，所涉及業(yè)務(wù)也非常難以理解，究其原因，來(lái)自以下兩個(gè)方面：

• 1. 業(yè)務(wù)邏輯復(fù)雜
• 2. 遠(yuǎn)離日常生活

1.41 業(yè)務(wù)邏輯復(fù)雜

B 端產(chǎn)品很多時(shí)候，都是在原有線下業(yè)務(wù)的基礎(chǔ)上進(jìn)行數(shù)字化。邏輯的復(fù)雜度本質(zhì)上是來(lái)源于這個(gè)行業(yè)多年來(lái)積累的足夠成熟的業(yè)務(wù)流程與規(guī)范，而這些東西沒(méi)有辦法速成，只能靠不斷地積累來(lái)增進(jìn)理解。

1.42 遠(yuǎn)離日常生活

C 端產(chǎn)品的設(shè)計(jì)中，設(shè)計(jì)師大部分情況下都或多或少地就是用戶本身，或者帶有用戶屬性，比較容易產(chǎn)生同理心，去發(fā)現(xiàn)問(wèn)題解決痛點(diǎn)。

而 B 端產(chǎn)品不是給普通用戶使用的，是給特定群體使用的，這種特質(zhì)就決定了設(shè)計(jì)師很難去真正地理解用戶的處境，設(shè)計(jì)師最厲害的特質(zhì)——同理心也很難派上用場(chǎng)。

1.5 誤區(qū)

有的設(shè)計(jì)師同學(xué)，一接到產(chǎn)品分析的任務(wù)，到手就是先去網(wǎng)上看看別人是怎么做的，然后按著人家的結(jié)構(gòu)對(duì)自己的產(chǎn)品進(jìn)行一通分析，其中不乏用到了「用戶體驗(yàn)五要素」、「SWOT分析」等看起來(lái)高大上的方法論。

按這樣做，產(chǎn)出的分析報(bào)告不能說(shuō)錯(cuò)，但是最起碼是不恰當(dāng)?shù)模瑢?duì)設(shè)計(jì)上的幫助微乎其微。其中有這樣兩個(gè)問(wèn)題：

• 1. 與產(chǎn)品經(jīng)理邊界混淆
• 2. 注重方法論，流于表面

1.51 與產(chǎn)品經(jīng)理邊界混淆

產(chǎn)品經(jīng)理是產(chǎn)品的第一負(fù)責(zé)人，需要對(duì)產(chǎn)品的整個(gè)生命周期負(fù)責(zé)，說(shuō)人話就是產(chǎn)品經(jīng)理負(fù)責(zé)產(chǎn)品做什么不做什么，該什么時(shí)候做，而設(shè)計(jì)師關(guān)注的是產(chǎn)品的用戶體驗(yàn)。產(chǎn)品是商業(yè)的代言人，而設(shè)計(jì)師是用戶的代言人，二者本質(zhì)上的不同，就決定了在做產(chǎn)品分析時(shí)關(guān)注點(diǎn)必然不同。如果按著產(chǎn)品經(jīng)理的思路來(lái)做產(chǎn)品分析，得出大環(huán)境之類的太過(guò)于泛化的結(jié)論對(duì)設(shè)計(jì)沒(méi)有什么實(shí)質(zhì)性的幫助。

1.52 注重方法論，流于表面

用戶體驗(yàn)五要素，swot，等等這些高大上的方法論看起來(lái)非常有用，從多個(gè)維度把一款產(chǎn)品分析得非常清楚?？烧鎸?shí)的情況時(shí)，往往新手設(shè)計(jì)師同學(xué)既不懂方法論的本質(zhì)，也不懂使用場(chǎng)景，只是盲目地套用，導(dǎo)致產(chǎn)出的是一篇「八股文」一般的產(chǎn)品分析報(bào)告，過(guò)于全面但沒(méi)有重點(diǎn)，什么都是點(diǎn)到為止，對(duì)自己理解業(yè)務(wù)和輔助設(shè)計(jì)沒(méi)有實(shí)質(zhì)性的幫助。

我認(rèn)為，「方法論」本質(zhì)上是經(jīng)驗(yàn)主義，使用過(guò)去解決問(wèn)題的方式來(lái)解決新的問(wèn)題。在一定程度上，方法論是有用的，一些簡(jiǎn)單的問(wèn)題，確實(shí)是有固定解法的，而且，解決問(wèn)題也更快。但是在更難更特殊的場(chǎng)景下，方法論不再管用了。很多時(shí)候，問(wèn)題表面上看起來(lái)一樣，可是由于問(wèn)題的背景不同，所以解法也是不一樣的，這時(shí)候再采用方法論，就會(huì)產(chǎn)生思維固化，強(qiáng)行去套方法流程，得到的一定不是最正確的答案。

在確定了目標(biāo)和分析重點(diǎn)之后，我們就可以開(kāi)始進(jìn)行分析產(chǎn)出產(chǎn)品分析報(bào)告了，在這里我整理了幾個(gè)撰寫(xiě)時(shí)的原則供大家參考：

• 1. 避免主觀
• 2. 思考要全
• 3. 自上而下

2.1 避免主觀——不要把自己當(dāng)成使用者

第一點(diǎn)是我們要避免去主觀臆斷功能的合理性。正如我上面提到的一樣，我們并非 B 端產(chǎn)品的核心用戶，有些我們感覺(jué)反常的地方，但是其實(shí)有它的合理性，因?yàn)?B 端用戶的痛點(diǎn)往往是在特定的工作場(chǎng)景下產(chǎn)生的。因此，在不了解真正用戶和場(chǎng)景的情況下，僅憑經(jīng)驗(yàn)下的結(jié)論往往是錯(cuò)誤的。

我之前的一個(gè)項(xiàng)目的設(shè)計(jì)中，在給圖表配色時(shí)，我最初的一個(gè)版本是用的近似色去完成的，在發(fā)給產(chǎn)品經(jīng)理初審時(shí)被打回來(lái)了，理由是這種配色不夠明顯。我追問(wèn)原因后才知道，我們的一部分用戶是年齡比較大的用戶，對(duì)比度足夠高才能方便他們看清楚。最后出的一個(gè)版本是對(duì)比度非常高的配色，盡管從設(shè)計(jì)的角度來(lái)看這種配色美觀度不足，但是能夠讓用戶看得清楚。

在這個(gè)例子中，用戶對(duì)于美觀度并沒(méi)有很高的要求，反而對(duì)于數(shù)據(jù)的識(shí)別度要求更高。我們常聽(tīng)的一句話是「己所不欲，勿施于人」，然而在B端的設(shè)計(jì)中，我們更要做到「己所欲，亦勿施于人」。

2.2 思考要全——使用者和決策者都要考慮

B 端產(chǎn)品有一個(gè)很重要的特點(diǎn)，購(gòu)買(mǎi)決策者與使用者的割裂。我們?cè)谒伎家粋€(gè)功能時(shí)，不能僅僅考慮使用者的體驗(yàn)，也要考慮決策者的想法。

比如釘釘?shù)摹敢炎x未讀」這個(gè)功能，相信大家對(duì)這個(gè)功能是槽點(diǎn)滿滿。但是在 B 端產(chǎn)品中，決策鏈上游是購(gòu)買(mǎi)決策者即老板，因此就有了這個(gè)功能。如果只考慮到用戶體驗(yàn)，這個(gè)設(shè)計(jì)從一開(kāi)始就不該出現(xiàn)。但是，與 C 端產(chǎn)品的流量思維不同，B 端產(chǎn)品不是靠體驗(yàn)來(lái)吸引用戶存活的，而是靠滿足決策者的需要來(lái)活下去的。很多大家感覺(jué)不好用或者體驗(yàn)很差勁的 B 端產(chǎn)品，仍然活得很好，就是這個(gè)道理。

說(shuō)句題外話，釘釘已經(jīng)注意到了這個(gè)細(xì)節(jié)，在去年的一個(gè)演講上，釘釘總裁也提到了對(duì)這個(gè)功能點(diǎn)的考慮，他舉了一個(gè)場(chǎng)景，在不改變現(xiàn)有設(shè)計(jì)的情況下解決了這個(gè)問(wèn)題，通過(guò)智能手表等外設(shè)來(lái)預(yù)覽消息，而手機(jī)和電腦依然顯示未讀，自己考慮好了的時(shí)候再去回復(fù)。

2.3 自上而下——從宏觀到微觀

從戰(zhàn)略層到功能架構(gòu)，再到每個(gè)功能細(xì)節(jié)，采用金字塔原理去遍歷，避免遺漏的同時(shí)層層深入。

在此處，我介紹一下我認(rèn)為一份合格的產(chǎn)品分析報(bào)告應(yīng)該包含的部分，各位設(shè)計(jì)師同學(xué)可以根據(jù)自己的需要進(jìn)行適當(dāng)調(diào)整。

3.1 文檔說(shuō)明

3.11 版本說(shuō)明

因?yàn)楫a(chǎn)品分析是有一定的時(shí)效性的，且是針對(duì)某一個(gè)具體版本去進(jìn)行分析的，所以在文檔開(kāi)頭要列出自己所分析產(chǎn)品的版本，例如（飛書(shū) V5.6.9，釘釘 6.3.35）。

3.12 分析時(shí)間

即設(shè)計(jì)師進(jìn)行產(chǎn)品分析的時(shí)間，留檔以供以后查看。

3.2 產(chǎn)品概述

此處要回答的問(wèn)題是，產(chǎn)品是用來(lái)干嘛的，給誰(shuí)設(shè)計(jì)的以及怎么賺錢(qián)的。

3.21 產(chǎn)品定位

即產(chǎn)品是用來(lái)干嘛的，不需要特別具體，只需要在大方面上對(duì)產(chǎn)品進(jìn)行概括即可。舉個(gè)栗子，抖音定位是一款短視頻消費(fèi)型產(chǎn)品，以“內(nèi)容”的新鮮有趣為主，強(qiáng)調(diào)分享和信息獲取，滿足幸?？鞓?lè)的美好時(shí)刻需要。

3.22 目標(biāo)用戶

即產(chǎn)品是給誰(shuí)設(shè)計(jì)的，在此處需要對(duì)客戶和用戶做區(qū)分?？蛻粢话闶侵钙髽I(yè)的 CEO/管理者，他們來(lái)決定是否要斥「巨資」購(gòu)買(mǎi)一款軟件。比如說(shuō)某公司的 CEO 最終決定買(mǎi)釘釘還是飛書(shū)作為辦公協(xié)同軟件。而用戶一般是企業(yè)內(nèi)的員工，他們使用軟件來(lái)完成一些日常工作。分析目標(biāo)用戶的意義是，在之后的分析中，我們都要以用戶為落腳點(diǎn)，去分析功能的合理性。

需要注意的是，此處并不需要去做一套完整的用戶畫(huà)像，只需要大概描述一下是產(chǎn)品的客戶和用戶的職位和核心需求即可。

舉個(gè)栗子，對(duì)于某客服工作臺(tái)產(chǎn)品，

• 用戶：客服，主要職責(zé)是接受用戶咨詢，幫助顧客解答疑惑。
• 客戶：公司 CEO，目標(biāo)是對(duì)業(yè)務(wù)情況進(jìn)行把控，提高客服效率。

3.23 商業(yè)模式

即產(chǎn)品如何賺錢(qián)，在這里，我們并不需要用各種很高端的工具——比如商業(yè)模式畫(huà)布，去分析商業(yè)模式，我們僅需要知道產(chǎn)品的賺錢(qián)方式即可。作為設(shè)計(jì)師，我們不需要有產(chǎn)品經(jīng)理那么專業(yè)的商業(yè)思維，但是我們也一定要能夠從商業(yè)角度理解產(chǎn)品的價(jià)值，一款產(chǎn)品最健康的狀態(tài)一定是用戶價(jià)值與商業(yè)價(jià)值并存。因?yàn)楸举|(zhì)上而言，用戶體驗(yàn)也是商業(yè)價(jià)值的一部分。

對(duì)于B端產(chǎn)品而言，有兩種最常見(jiàn)的售賣(mài)方式：

• 1. 本地部署模式
• 2. SaaS 模式

1. 本地部署 —— 按軟件數(shù)量售賣(mài)

本地部署是指產(chǎn)品的應(yīng)用、數(shù)據(jù)都存儲(chǔ)在一臺(tái)計(jì)算機(jī)中，這臺(tái)計(jì)算機(jī)不與其他任何服務(wù)器、計(jì)算機(jī)相連。21世紀(jì)之前的傳統(tǒng) IT 公司大部分都屬于這類，比如 Adobe 旗下的產(chǎn)品（盡管他們也在做云，但是更多情況下我們還是把 PS 當(dāng)做本地產(chǎn)品來(lái)使用），那時(shí)候 B 端企業(yè)的商業(yè)模式是：主要服務(wù)于大企業(yè)客戶，通過(guò)與頂級(jí)的合作伙伴合作，推出頂級(jí)的產(chǎn)品，提供一整套軟硬件解決方案，并進(jìn)行深度服務(wù)，一次性收取高昂的軟硬件費(fèi)用，并且每年加收不少服務(wù)費(fèi)。

2. SaaS —— 訂閱制

21 世紀(jì)后，隨著云計(jì)算技術(shù)的發(fā)展，越來(lái)越多的產(chǎn)品開(kāi)始部署在云上，也就逐漸發(fā)展成了現(xiàn)在的 SaaS 產(chǎn)品，從這個(gè)角度來(lái)講，我們通常所說(shuō)的 SaaS 產(chǎn)品其實(shí)就是將本地部署變?yōu)樵贫瞬渴鸬漠a(chǎn)品服務(wù)。

這時(shí)候 B 端企業(yè)的主要商業(yè)模式是：不僅服務(wù)于大型企業(yè)，也服務(wù)于中小企業(yè)。以訂閱制的方式，定期收取費(fèi)用，并且提供不同的版本，進(jìn)行差異化定價(jià)，實(shí)現(xiàn)收益最大化。

舉個(gè)例子，藍(lán)湖就是提供了四個(gè)版本并且以季付或年付的方式進(jìn)行收費(fèi)。

3.3 功能架構(gòu)

3.31 什么是功能

將需求轉(zhuǎn)化為對(duì)應(yīng)的軟件層面可實(shí)現(xiàn)的能力，即功能，功能可以實(shí)現(xiàn)需求所期望達(dá)成的目標(biāo)。

3.32 什么是功能架構(gòu)

一個(gè)完整的 B 端產(chǎn)品包含若干功能，將一套功能依據(jù)業(yè)務(wù)進(jìn)行分類整合，形成的抽象化業(yè)務(wù)模型即功能架構(gòu)。

3.33 功能架構(gòu)與信息架構(gòu)

功能架構(gòu)指的是產(chǎn)品是如何由這些功能組成的。我們?cè)诜治龉δ芗軜?gòu)時(shí)實(shí)際上更偏向于產(chǎn)品的實(shí)現(xiàn)模型。

信息架構(gòu)是包括組織系統(tǒng)、標(biāo)簽系統(tǒng)、導(dǎo)航系統(tǒng)、搜索系統(tǒng)在內(nèi)的綜合系統(tǒng)。我們?cè)诜治鲂畔⒓軜?gòu)時(shí)，分析的是這個(gè)產(chǎn)品是如何將不同的功能組合在一起展現(xiàn)在用戶面前的，分析的是產(chǎn)品的呈現(xiàn)模型。

3.34 為什么要分析功能架構(gòu)

一個(gè)成熟的 B 端產(chǎn)品甚至?xí)猩踔習(xí)腥陌賯€(gè)功能，我們?cè)诜治龉δ芗?xì)節(jié)前，必須要先厘清架構(gòu)，以一種抽象的框架視角來(lái)全局思考，而不是也僅僅以用戶的視角來(lái)看產(chǎn)品的表象。

3.35 如何分析功能架構(gòu)

收集

真正地去使用產(chǎn)品，并將產(chǎn)品的所有功能與模塊收集到一起。

整理

以模塊作為分類依據(jù)，將所有功能分到不同的模塊里，必要的話，可以繼續(xù)細(xì)分子模塊。

在這里要注意，一個(gè)功能是否屬于某一個(gè)模塊，不能以這個(gè)功能是否在某個(gè)頁(yè)面為依據(jù)。一個(gè)頁(yè)面出現(xiàn)了某個(gè)功能，只是因?yàn)檫@個(gè)場(chǎng)景下用戶需要這個(gè)功能，而不是這個(gè)功能屬于這個(gè)頁(yè)面。

以飛書(shū)后臺(tái)為例，很多人在分析時(shí)會(huì)把首頁(yè)也作為功能架構(gòu)圖中的一個(gè)節(jié)點(diǎn)去分析，這是錯(cuò)誤的。

首頁(yè)只是功能的聚合，而非功能模塊，例如「添加成員」這一功能應(yīng)該屬于「組織架構(gòu)」模塊中，如果將首頁(yè)也加入分析，勢(shì)必會(huì)出現(xiàn)功能的重復(fù)。

3.4 功能分析

在分析完整個(gè)功能架構(gòu)之后，我們可以深入到每個(gè)功能的細(xì)節(jié)了。其中包括以下兩點(diǎn)：

• 1. 功能使用流程
• 2. 功能背后的需求

3.41 功能使用流程

通過(guò)繪制功能的使用流程，我們可以模擬用戶在使用產(chǎn)品時(shí)的流程，發(fā)現(xiàn)一些從宏觀角度上忽略的點(diǎn)。在繪制時(shí)，要注意的是，要控制在頁(yè)面 & 操作維度，避免拔高到功能維度甚至業(yè)務(wù)維度。

3.42 背后的需求

我們除了要知道這個(gè)功能該怎么用之外，還要知道功能與業(yè)務(wù)的關(guān)系 —— 功能背后的需求。

3.43 需求分析

在分析背后的需求時(shí)，除了知道這一需求是什么，如果可以多走一步，對(duì)需求進(jìn)行分類，那對(duì)于我們了解產(chǎn)品時(shí)大有裨益的。

3.44 馬斯洛模型的局限性

關(guān)于需求的分級(jí)，在 C 端中常用的模型是馬斯洛需求模型，但是這一理論并不適用于 B 端，主要是由于以下原因：

• 1. 馬斯洛需求研究的是人，而 B 端產(chǎn)品面向的是企業(yè)和組織
• 2. B 端系統(tǒng)一般復(fù)雜度較高，除了業(yè)務(wù)目標(biāo)之外，還要考慮軟件架構(gòu)、體系構(gòu)建等問(wèn)題。

3.45 B 端產(chǎn)品的需求劃分

一般而言，我們可以將需求劃分為功能性需求與非功能性需求。非功能性需求，指的是隱藏在功能需求背后以及開(kāi)發(fā)需要考慮的的需求，也叫作“跨功能需求”。最常見(jiàn)的非功能性需求就是產(chǎn)品的響應(yīng)時(shí)間，一般非功能性需求是由開(kāi)發(fā)和測(cè)試同學(xué)考慮的。

而對(duì)于功能性需求，有三大類：業(yè)務(wù)需求、功能需求、產(chǎn)品需求。而這三類需求也有比較立體的層次關(guān)系：

業(yè)務(wù)需求，提出者是業(yè)務(wù)范圍、業(yè)務(wù)模式和業(yè)務(wù)規(guī)則的制定者，一般是指業(yè)務(wù)方的高層人物，比如 CEO、高級(jí)經(jīng)理等。產(chǎn)品設(shè)計(jì)是服務(wù)于業(yè)務(wù)定位的，進(jìn)而使得產(chǎn)品戰(zhàn)略遵循于企業(yè)的發(fā)展戰(zhàn)略，只有這樣產(chǎn)品方向才不至于發(fā)生偏差，因此，他們提出的需求一般不能違反，換句話說(shuō)，他們提出的需求是整個(gè)系統(tǒng)設(shè)計(jì)的最高綱領(lǐng)。

用戶需求，提出者是基層管理者和執(zhí)行者。他們關(guān)心的是如何使用產(chǎn)品完成自己的工作，提出的需求相對(duì)細(xì)節(jié)，例如對(duì)操作、流程上的訴求。

產(chǎn)品需求，由于 B 端產(chǎn)品的復(fù)雜性，在建設(shè)時(shí)需要考慮到功能復(fù)用問(wèn)題，以及與其他系統(tǒng)的架構(gòu)交互問(wèn)題。舉個(gè)例子，語(yǔ)雀 App 是阿里旗下的產(chǎn)品，在開(kāi)發(fā)登錄界面時(shí)，沒(méi)有重新開(kāi)發(fā)，而是集成了阿里云的 SDK。產(chǎn)品需求本身對(duì)業(yè)務(wù)實(shí)現(xiàn)沒(méi)有價(jià)值，它的價(jià)值體現(xiàn)在節(jié)省人力和優(yōu)化軟件架構(gòu)上。

三者雖然并沒(méi)有絕對(duì)意義上的優(yōu)先級(jí)順序，但是一般而言，B 端產(chǎn)品時(shí)優(yōu)先考慮業(yè)務(wù)需求，其次關(guān)注用戶體驗(yàn)，滿足用戶需求，最后才是考慮產(chǎn)品需求。了解了這一點(diǎn)，我們對(duì)功能背后的需求進(jìn)行分類后，就可以從更高的視角來(lái)分析功能的設(shè)計(jì)邏輯，而不僅僅是停留在好不好看的層次上對(duì)功能進(jìn)行分析。

3.5 交互設(shè)計(jì)

3.51 交互設(shè)計(jì)是什么

在《交互設(shè)計(jì)原理》中是指：對(duì)于交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的設(shè)計(jì)，定義人造物的行為方式，即人工制品在特定場(chǎng)景下的反應(yīng)。

在《交互設(shè)計(jì)精髓4》定義為：設(shè)計(jì)交互式數(shù)字產(chǎn)品、環(huán)境、系統(tǒng)和服務(wù)的設(shè)計(jì)，聚焦于如何設(shè)計(jì)行為。

而在《超越人機(jī)交互》中則是指：設(shè)計(jì)交互式產(chǎn)品來(lái)支持人們?cè)谌粘９ぷ魃钪薪涣骱徒换サ姆绞剑瑒?chuàng)造用戶體驗(yàn)以增強(qiáng)人們工作、生活以及通信的方式，聚焦在實(shí)踐上，即怎樣設(shè)計(jì)用戶體驗(yàn)。

交互設(shè)計(jì)即行為設(shè)計(jì)，關(guān)注于如何設(shè)計(jì)系統(tǒng)如何幫助用戶更高效愉快地達(dá)成目標(biāo)。

3.52 怎么分析交互設(shè)計(jì)

僅僅知道是什么遠(yuǎn)遠(yuǎn)不夠，我們更要知道如何去分析一個(gè)產(chǎn)品的交互設(shè)計(jì)好壞。在這里，我提供兩個(gè)思路供大家參考：

• 1. 從行為維度拆分
• 2. 十大可用性原則

從行為維度拆分

上文提到，交互設(shè)計(jì)的對(duì)象是行為，而這里的「行為」可以拆分為 3 個(gè)部分：導(dǎo)航，輸入和展示。

導(dǎo)航系統(tǒng)：即用戶在哪里和去哪里

設(shè)計(jì)要點(diǎn)：

• 1. 導(dǎo)航不能是一個(gè)頁(yè)面上可以鏈接到其他所有頁(yè)面，而是要有的放矢，選擇用戶關(guān)心的，更想要去的頁(yè)面添加導(dǎo)航。
• 2. 導(dǎo)航要顯示出來(lái)導(dǎo)航本身與所包含內(nèi)容的關(guān)系
• 3. 導(dǎo)航要顯示所包含內(nèi)容與當(dāng)前頁(yè)面的關(guān)系

例如：掘金的頂部導(dǎo)航，既體現(xiàn)出來(lái)了導(dǎo)航本身與包含內(nèi)容的關(guān)系（導(dǎo)航的標(biāo)簽是當(dāng)前內(nèi)容的概括），又體現(xiàn)出來(lái)了內(nèi)容與當(dāng)前頁(yè)面的關(guān)系（當(dāng)前頁(yè)面是首頁(yè)下的一個(gè)子頁(yè)面）。

輸入系統(tǒng)：即用戶向系統(tǒng)提供信息

這里的輸入不僅僅指我們?nèi)粘Ｖ械妮斎?，而是一個(gè)廣義的概念，將所有用戶向系統(tǒng)提供信息的方式統(tǒng)稱為輸入。輸入可以通過(guò)多種方式完成，包括輸入命令、按下按鈕、快捷鍵、甚至打手勢(shì)、語(yǔ)音等方式。

設(shè)計(jì)要點(diǎn)：

• 1. 高效，例如絕大多數(shù)的產(chǎn)品都提供了快捷鍵提高用戶的操作效率。

• 2. 準(zhǔn)確，例如 sketch 里方向鍵的作用是移動(dòng) 1 像素，使用戶在使用鼠標(biāo)快速移動(dòng)的基礎(chǔ)上，也可以準(zhǔn)確操作。
• 3. 防錯(cuò)，例如大部分的產(chǎn)品都會(huì)在危險(xiǎn)操作前二次確認(rèn)。

• 4. 符合預(yù)期，例如在「幕布」中，在畫(huà)布區(qū)和在滾動(dòng)條區(qū)都向下拖動(dòng)鼠標(biāo)，操作結(jié)果是相反的，但卻符合用戶的預(yù)期。
• 5. 適當(dāng)隱喻，隱喻是指提供熟悉的實(shí)體，是人們能夠容易地理解底層概念模型并知道在界面上做什么。例如我們所熟悉的購(gòu)物車(chē)就是現(xiàn)實(shí)世界中購(gòu)物車(chē)的隱喻，幫助用戶快速理解軟件的使用邏輯。

展示系統(tǒng)：即系統(tǒng)向用戶提供信息

設(shè)計(jì)要點(diǎn)：

• 1. 突出重點(diǎn)。用戶的瀏覽動(dòng)作不是讀，不是看，而是掃。設(shè)計(jì)中應(yīng)該突出重點(diǎn)，弱化和剔除無(wú)關(guān)信息。
• 2. 保持一致性。樣式規(guī)范一致性給用戶帶來(lái)品牌信賴感的同時(shí)，還能夠通過(guò)一致的重復(fù)降低用戶反復(fù)學(xué)習(xí)成本。
• 3. 及時(shí)反饋。系統(tǒng)應(yīng)該讓用戶知道目前的狀態(tài), 并及時(shí)給予相對(duì)應(yīng)的反饋。

十大可用性原則

尼爾森十大原則由畢業(yè)于哥本哈根的人機(jī)交互學(xué)博士 Jakob Nielsen 發(fā)表，他提出十大可用性原則，用來(lái)評(píng)價(jià)用戶體驗(yàn)的好壞，我們也可以以此為依據(jù)來(lái)分析一個(gè)產(chǎn)品的交互設(shè)計(jì)好壞。具體的內(nèi)容網(wǎng)上有很多資料，筆者就不再贅述。

3.6 視覺(jué)設(shè)計(jì)

3.61 概念

視覺(jué)設(shè)計(jì)即 UI 設(shè)計(jì)，負(fù)責(zé)產(chǎn)品的圖形、圖標(biāo)、色彩、視覺(jué)風(fēng)格等，從視覺(jué)層面把控產(chǎn)品界面設(shè)計(jì)，決定營(yíng)造出什么樣的視覺(jué)體驗(yàn)。

3.62 分析內(nèi)容

視覺(jué)設(shè)計(jì)的分析內(nèi)容可以拆分為形、色、字、構(gòu)、質(zhì)、動(dòng)。在分析時(shí)，如果是網(wǎng)頁(yè)端，可以借助瀏覽器的開(kāi)發(fā)者模式或者谷歌瀏覽器的插件「VisBug」來(lái)詳細(xì)查看各個(gè)維度屬性細(xì)節(jié)。

形

圖標(biāo)的圓角，卡片的圓角，icon 的風(fēng)格與統(tǒng)一度（包括：視覺(jué)大小，線段粗細(xì)，端點(diǎn)類型、拐點(diǎn)類型等）

例如，同樣是頭像卡片，QQ采用了圓形來(lái)體現(xiàn)靈動(dòng)輕盈的風(fēng)格，而主打熟人社交的微信則采用了小圓角。

色

色彩分析包括用色規(guī)范、色彩搭配、層級(jí)等。在 B 端產(chǎn)品中，色彩在使用時(shí)更多的是基于信息傳遞、操作引導(dǎo)和交互反饋等目的。

字

字體的屬性有字號(hào)、行高、字體、字重等。通過(guò)合適字號(hào)和字重可以對(duì)界面元素劃分視覺(jué)層級(jí)，幫助用戶識(shí)別。而在一些特殊的場(chǎng)景下，可以運(yùn)用特殊字體來(lái)提高識(shí)別度和增加頁(yè)面美觀度。

例如：支付寶使用了常用的 Din pro 作為其數(shù)字字體，其他 APP 廠商也分別使用了特殊的數(shù)字字體。

構(gòu)

此處的構(gòu)是指頁(yè)面結(jié)構(gòu)，分為層級(jí)和間距兩大部分。合適的層級(jí)和間距可以幫助用戶理解頁(yè)面，并給予界面呼吸感和通透感。

質(zhì)

質(zhì)感與風(fēng)格、界面風(fēng)格，投影數(shù)值，扁平還是擬物。

比如說(shuō)相比普通的單層陰影， Ant Design 采用了三層陰影的表達(dá)方式，讓陰影更柔和，更符合真實(shí)狀態(tài)。具體可查看 https://ant.design/docs/spec/shadow-cn

動(dòng)

最近幾年，越來(lái)越多的公司和團(tuán)隊(duì)已經(jīng)意識(shí)到動(dòng)效在產(chǎn)品用戶體驗(yàn)中的重要性，動(dòng)效設(shè)計(jì)已經(jīng)成為產(chǎn)品設(shè)計(jì)語(yǔ)言的重要構(gòu)成之一。

動(dòng)效設(shè)計(jì)并不只是為了修飾，使用動(dòng)效不僅可以更清晰地體現(xiàn)內(nèi)容元素之間的邏輯和層級(jí)關(guān)系，還可以提供當(dāng)前的狀態(tài)反饋，加強(qiáng)用戶對(duì)操作行為的感知，給用戶以可控的感覺(jué)。

除了上述內(nèi)容之外，我們?cè)诜治鲆粋€(gè)產(chǎn)品時(shí)還可以做以下兩件事：

4.1 用戶體驗(yàn)自查

4.11 為什么要做體驗(yàn)自查？

在被問(wèn)到「你覺(jué)得這款產(chǎn)品的用戶體驗(yàn)好嗎？」時(shí)，我想大部分設(shè)計(jì)師同學(xué)即使做完了產(chǎn)品分析，也很難回答這個(gè)問(wèn)題。那么，我們?cè)撊绾巫霾趴梢暂^為準(zhǔn)確地回答這一問(wèn)題呢？

基于這個(gè)問(wèn)題，我們從用戶體驗(yàn)的定義出發(fā)，ISO 對(duì)用戶體驗(yàn)的定義有著如下解釋：

用戶體驗(yàn)，即用戶在使用一個(gè)產(chǎn)品或系統(tǒng)之前、使用期間和使用之后的全部感受，包括情感、信仰、喜好、認(rèn)知印象、生理和心理反應(yīng)、行為和成就等各個(gè)方面。

從定義可以看出，用戶體驗(yàn)不僅是主觀的，而且范疇非常廣，所以在描述時(shí)，我們不能僅僅用好/不好來(lái)概括。要解決這個(gè)問(wèn)題，要點(diǎn)在于建立一個(gè)清晰合適的標(biāo)準(zhǔn)來(lái)量化用戶體驗(yàn)，體驗(yàn)自查就是在做這樣一件事 —— 度量體驗(yàn)。

通過(guò)做體驗(yàn)自查，可以達(dá)成以下效果：

• 1. 將用戶體驗(yàn)量化，探索設(shè)計(jì)破局點(diǎn)
• 2. 幫助設(shè)計(jì)師更全面地審視產(chǎn)品設(shè)計(jì)
• 3. 將產(chǎn)品體驗(yàn)上的問(wèn)題可視化，更直觀地展示體驗(yàn)問(wèn)題

4.12 工具 —— 設(shè)計(jì)走查表

本質(zhì)上，設(shè)計(jì)走查表通常是設(shè)計(jì)師在完成設(shè)計(jì)稿后，用于快速遍歷方案、修正遺漏或不周的工具。在產(chǎn)品分析中，我們使用這個(gè)工具也可以達(dá)成體驗(yàn)自查的目標(biāo)。通常，我們是需要根據(jù)產(chǎn)品建立一套適合自己的交互設(shè)計(jì)自查表的。如果暫時(shí)沒(méi)有，也可以暫時(shí)使用網(wǎng)上成熟的自查表來(lái)進(jìn)行。

4.13 步驟

收集

字段說(shuō)明

問(wèn)題位置：

即體驗(yàn)問(wèn)題發(fā)生的位置。

類別：

不同自查表對(duì)問(wèn)題的分類不同，例如用戶體驗(yàn)五要素、可用性原則等。

重要程度：

如果采用正向思考，很容易陷入“都很重要”的困境，所以這里一般采用反向分析法，也就是如果不解決這個(gè)體驗(yàn)問(wèn)題，會(huì)造成多大的影響。我這里將重要程度分成了三個(gè)等級(jí)，分別是：

• 1. 基本沒(méi)有影響，有替代功能
• 2. 不解決也可以用，但不太好用
• 3. 不解決基本/完全不能用

發(fā)生頻率：

同樣是三個(gè)等級(jí)，需要注意的是，這里不是以時(shí)間頻率來(lái)定義的，而是以「每經(jīng)歷 n 次業(yè)務(wù)節(jié)點(diǎn)就會(huì)出現(xiàn)這一問(wèn)題」的方式來(lái)定義的，如果不好量化，也可以使用每次，經(jīng)常，偶爾這樣的詞來(lái)代替。

嚴(yán)重程度：

嚴(yán)重程度 = 重要程度 * 發(fā)生頻率

這里要注意的是，我們作為設(shè)計(jì)師，提出嚴(yán)重程度的判斷僅僅是作為優(yōu)先級(jí)參考，但是真正的優(yōu)先級(jí)和排期還是需要產(chǎn)品經(jīng)理來(lái)做。

問(wèn)題描述：

即對(duì)體驗(yàn)問(wèn)題的詳細(xì)描述。

整理

首先，對(duì)問(wèn)題進(jìn)行重新審查和校驗(yàn)，去掉非體驗(yàn)問(wèn)題、重復(fù)問(wèn)題、補(bǔ)充不完整的問(wèn)題描述等，然后整理到一起，這就是整個(gè)產(chǎn)品存在的大大小小、各種各樣的問(wèn)題了。

然后，我們通過(guò)圖表對(duì)數(shù)據(jù)進(jìn)行二次加工，一般采用雷達(dá)圖或柱狀圖。

示例 - 雷達(dá)圖的使用方式

嚴(yán)格意義上說(shuō)，這并不是標(biāo)準(zhǔn)的雷達(dá)圖，只是使用了雷達(dá)圖的圖表背景。

外圈：上述表格中的「分類」

數(shù)值：上述表格中的「重要程度」

為每個(gè)模塊/流程各制作一張表，然后將每個(gè)問(wèn)題都以點(diǎn)的形式置于圖中，哪個(gè)分類問(wèn)題最多，哪個(gè)模塊/流程問(wèn)題最多？哪些問(wèn)題較為嚴(yán)重亟待解決？一目了然。

4.2 專業(yè)名詞庫(kù)

設(shè)計(jì)的本質(zhì)是為了更好的解決問(wèn)題，了解業(yè)務(wù)是解決問(wèn)題的基礎(chǔ)，也是溝通順暢的利器。但是想要成為一個(gè)業(yè)務(wù)專家，沒(méi)有長(zhǎng)時(shí)間的沉淀上是不太可能的，但是公司一般不會(huì)給很長(zhǎng)的時(shí)間去學(xué)習(xí)業(yè)務(wù)，那我們?cè)撊绾卧诙唐趦?nèi)快速掌握業(yè)務(wù)知識(shí)呢？

在理解業(yè)務(wù)時(shí)遇到的最大挑戰(zhàn)就是那些晦澀難懂的特殊名詞，如 json 文件，API 等開(kāi)發(fā)中特定的術(shù)語(yǔ)。

針對(duì)這個(gè)問(wèn)題，在產(chǎn)品分析的過(guò)程中，我們可以同步建立一個(gè)專業(yè)名詞庫(kù)，來(lái)記錄這些特殊名詞，并將這些概念用自己的語(yǔ)言進(jìn)行描述。這樣，在了解產(chǎn)品的同時(shí)也對(duì)業(yè)務(wù)有了一定程度的了解。

對(duì)設(shè)計(jì)師而言，相比 C 端的各種炫酷效果，B 端設(shè)計(jì)很難做的出彩，設(shè)計(jì)的價(jià)值更多是隱形的價(jià)值，基本不存在會(huì)有人因?yàn)槟惆岩粋€(gè)按鈕做得好看夸你。從這個(gè)角度來(lái)說(shuō)，確實(shí)成就感比較低。

但是，通過(guò)自己的設(shè)計(jì)讓幫助用戶更有效率地完成工作，這何嘗不會(huì)帶來(lái)滿滿的成就感？B 端產(chǎn)品一般是用戶不得不使用的產(chǎn)品，作為設(shè)計(jì)師的我們更應(yīng)該對(duì)自己所設(shè)計(jì)的產(chǎn)品有著敬畏之心。

最后，給大家分享我很喜歡的一段話，與大家共勉。

本次的分享到這里就結(jié)束了，希望可以對(duì)大家有幫助。由于文章字?jǐn)?shù)較多，筆者幾經(jīng)修改，仍不免有疏漏錯(cuò)誤之處，如發(fā)現(xiàn)錯(cuò)誤，請(qǐng)讀者于評(píng)論區(qū)或私信指出，不勝感激。

在快節(jié)奏的洪流中，保持設(shè)計(jì)的初心，做有靈魂的設(shè)計(jì)，我們下篇再見(jiàn)~

作者：靳凱杰ah

轉(zhuǎn)載請(qǐng)注明：站酷

藍(lán)藍(lán)設(shè)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(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.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ù)、

UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司