???

這篇文章的作者 Stef Ivanov 是 Pony Studio 的創(chuàng)始人和首席設(shè)計(jì)師。作者根據(jù)已驗(yàn)證的法則總結(jié)了 16 種能夠幫助產(chǎn)品帶來增長(zhǎng)的設(shè)計(jì)策略，同時(shí)，也可以為解決更復(fù)雜的設(shè)計(jì)挑戰(zhàn)節(jié)省精力。希望通過這篇文章，能夠幫助大家記住要點(diǎn)應(yīng)用在平時(shí)的設(shè)計(jì)中，為更多用戶帶來卓越的產(chǎn)品體驗(yàn)。

用戶體驗(yàn)是一個(gè)發(fā)現(xiàn)探索的過程。并不是在項(xiàng)目的進(jìn)行過程中才有用戶體驗(yàn)，只要產(chǎn)品一直存在，用戶體驗(yàn)就不會(huì)結(jié)束。特別是數(shù)字產(chǎn)品，一直處于迭代狀態(tài)，總會(huì)有改進(jìn)的空間，值得下功夫去探索增長(zhǎng)的機(jī)會(huì)，因此設(shè)計(jì)過程是增長(zhǎng)過程中不可分割的一部分。

在可用性和設(shè)計(jì)原則方面，有一些久經(jīng)考驗(yàn)已經(jīng)沉淀下來的可復(fù)用的規(guī)則，我們可以在項(xiàng)目中應(yīng)用，從而提高設(shè)計(jì)效率。

1 效果最好 CTA 按鈕

CTA，即 Call-to-Action，行為召喚，有時(shí)也被譯為行動(dòng)呼吁，在網(wǎng)站、App 中用于引導(dǎo)用戶自發(fā)完成某種特定行動(dòng)。在形式上也沒有嚴(yán)格的限制，常見的主要是按鈕或是文字鏈的形式。

為了使按鈕可以更好的引導(dǎo)用戶行為，需要完善按鈕上的文字信息。如果在按鈕上添加一些上下文信息，那么按鈕的效果會(huì)更好，但是需要考慮字?jǐn)?shù)是否合適，英文盡量不要超過三個(gè)單詞，中文盡量不要超過 7 個(gè)字?？梢允褂谩讣尤速?gòu)物車」替代「加入」，用「立即購(gòu)買」代替「購(gòu)買」。

2 移動(dòng)端的文本

經(jīng)過了大量的測(cè)試，證明加強(qiáng)移動(dòng)端界面可讀性的最佳可用性原則是每行不超過 9 個(gè)單詞或 50 至 60 個(gè)字符（針對(duì)英文文本，中文文本控制在 20 個(gè)字左右）。

3 移動(dòng)端的 CTA 按鈕

考慮到操作的便利性，移動(dòng)端的主按鈕需要更大一些。麻省理工學(xué)院觸摸實(shí)驗(yàn)室對(duì)人的指尖進(jìn)行研究得出結(jié)論：對(duì)于大多數(shù)成年人，食指的平均寬度為16 - 20毫米，因此，在移動(dòng)端設(shè)備上，理想的按鈕尺寸應(yīng)該為 40 - 50 像素。

4 單選按鈕 or 下拉菜單

不確定何時(shí)使用單選按鈕以及何時(shí)使用下拉菜單。可以參考這一條用戶體驗(yàn)設(shè)計(jì)法則：對(duì)少于 5 個(gè)選項(xiàng)使用單選按鈕樣式，對(duì)超過 5 個(gè)選項(xiàng)使用下拉菜單。

5 分頁(yè)器 or 無(wú)限滾動(dòng)

許多用戶設(shè)計(jì)師試圖使用無(wú)限滾動(dòng)來讓他們的設(shè)計(jì)更加時(shí)尚且具有現(xiàn)代感。但是，這對(duì)于試圖找到正確內(nèi)容的用戶來說，沒有什么用。無(wú)限加載的最佳使用場(chǎng)景是在用戶瀏覽海量的信息流時(shí)（如微博、抖音、Facebook等），這個(gè)時(shí)候用戶沒有明確的尋找目標(biāo)。另外，內(nèi)容的展現(xiàn)形式也可以作為選擇交互方式的參考，如果內(nèi)容多是圖像的話，可以使用無(wú)限加載的方式，因?yàn)橛脩魹g覽圖片的速度比瀏覽文字的速度更快。

6 默認(rèn)選擇

輸入和單擊這兩種操作都具有較高的交互成本。要提高表單的轉(zhuǎn)換率，建議始終提供默認(rèn)選擇，提示最常用的選項(xiàng)，便于用戶進(jìn)行選擇。

7 如何使用圖標(biāo)

過度使用圖標(biāo)是一個(gè) UI 范疇上的錯(cuò)誤，通常會(huì)損害用戶體驗(yàn)。圖標(biāo)的使用應(yīng)具有強(qiáng)烈的含義，強(qiáng)調(diào)用文字無(wú)法表達(dá)的內(nèi)容，不要將功能隱藏在模糊的圖標(biāo)后面。用戶體驗(yàn)設(shè)計(jì)黃金法則：當(dāng)標(biāo)簽不足以說明操作時(shí)，請(qǐng)使用圖標(biāo)來表達(dá)。

8 錯(cuò)誤消息

為了提高轉(zhuǎn)換率，一定要提供糾正錯(cuò)誤的建議（錯(cuò)誤提示），減輕用戶的認(rèn)知負(fù)荷。保持人性化和幽默感，避免用戶面對(duì)錯(cuò)誤頁(yè)面或錯(cuò)誤信息時(shí)產(chǎn)生混亂，從而流失。

9 清單 or 單選按鈕

這里的用戶體驗(yàn)法則很簡(jiǎn)單：需要做多項(xiàng)選擇時(shí)，請(qǐng)使用清單；僅需要選擇一個(gè)選項(xiàng)時(shí)，請(qǐng)使用單選按鈕。

10 使用示例

使用示例可以加強(qiáng)上下文之間的連接，易于用戶理解，增加表單轉(zhuǎn)換率。作為設(shè)計(jì)師應(yīng)該更進(jìn)一步，使用示例，而不是必需的字段名稱。例如，插入示例電話號(hào)碼 “(+86)13719862849“，而不要進(jìn)展示字段 “電話號(hào)碼”；郵件示例可以使用 “ [email protected]” 而不是 “電子郵件”。這是一個(gè)經(jīng)過驗(yàn)證且行之有效的設(shè)計(jì)原則。

11 移動(dòng)端的可點(diǎn)擊區(qū)域

移動(dòng)端設(shè)備的可點(diǎn)擊區(qū)域應(yīng)該更大一些，回到第 3 點(diǎn)里提到的麻省理工學(xué)院對(duì)指尖的研究，移動(dòng)端上較寬的按鈕/可點(diǎn)擊區(qū)域始終比微型 UI 組件具有更好的性能。因此，如果設(shè)計(jì)允許，請(qǐng)使用比 PC 端（如單選按鈕，下拉菜單或復(fù)制鏈接）更寬、更大的設(shè)計(jì)組件。

12 使用顏色進(jìn)行分類

對(duì)標(biāo)簽采用顏色進(jìn)行分類降低了用戶的認(rèn)知負(fù)荷，因此可以在關(guān)鍵的設(shè)計(jì)元素上使用顏色進(jìn)行分類。但是不要過度使用它，因?yàn)檫^于豐富的顏色可能產(chǎn)生相反的效果，擾亂用戶體驗(yàn)的層次結(jié)構(gòu)。