本文總結(jié)了16種UX和UI的設(shè)計策略，這些策略可對于已上線的產(chǎn)品提供即時的增長效果，可以為更多的用戶帶來更卓越的產(chǎn)品使用體驗。

1、效果最好的CTA（Call-To-Action）

如果您在操作中添加了一些上下文信息，那么號召性用語按鈕的效果將始終更好，但是請盡量不要超過三個字。如上圖案例所示，您可以使用“添加到購物車”來代替“添加”，或者使用“立即購買“按鈕來替代“購買”。

2、移動端字符

針對移動設(shè)備可讀性的最佳可用性原則是每行不超過9個字或50至60個字符，這項設(shè)計規(guī)則已經(jīng)經(jīng)過了大量的測試檢驗。

3、移動端CTA

麻省理工學(xué)院觸摸實驗室對人的指尖的研究得出結(jié)論，對于大多數(shù)成年人，食指的平均寬度為16-20毫米，這使得在移動端設(shè)備上，理想的按鈕尺寸為40-50像素。

4、單選按鈕和下拉清單

不確定何時使用單選按鈕以及何時使用下拉菜單的時候，謹(jǐn)記以下UX規(guī)則：對少于5個選項使用單選按鈕樣式，對超過5個選項使用下拉菜單。

5、分頁或無限滾動

許多用戶體驗設(shè)計師傾向于使用無限滾動來使他們的設(shè)計更加時尚現(xiàn)代。但是，這對于嘗試查找正確內(nèi)容的用戶不起作用。對于電子商務(wù)或數(shù)據(jù)豐富的網(wǎng)站，面向目標(biāo)的UX應(yīng)該使用無限滾動進(jìn)行內(nèi)容探索和分頁。

6、默認(rèn)選擇

鍵入和額外的單擊具有很高的交互成本。要提高表單轉(zhuǎn)換率，請始終給予默認(rèn)選擇選項，以便用戶進(jìn)行最頻繁的交互選擇。

7、適度使用圖標(biāo)

過度使用圖標(biāo)是一個UI錯誤，通常會損害產(chǎn)品的使用體驗。圖標(biāo)的使用應(yīng)始終具有強烈的含義，永遠(yuǎn)不要將功能隱藏在模糊的圖標(biāo)后面。UX黃金法則：如果標(biāo)簽不足以說明操作，請使用圖標(biāo)來代替。

8、錯誤消息

為了提高轉(zhuǎn)化率，請務(wù)必提供糾正錯誤的建議，以減輕用戶的認(rèn)知負(fù)擔(dān)。保持人性化和幽默感，避免在用戶面對錯誤界面或錯誤消息時流失。

9、清單或單選按鈕？

對于多選選擇，請使用清單選項，對單選選擇，使用單選按鈕。

10、使用占位符（Placeholder）顯示示例

使用占位符副本可設(shè)置更好的上下文并增加表單轉(zhuǎn)換。但是您應(yīng)該更進(jìn)一步-使用示例，而不是必需的字段名稱。例如，插入示例電話號碼（+44 757 869…），而不要輸入“電話號碼”或“ hi@pony.studio”而不是“電子郵件”。

11、手機上的可點擊區(qū)域更廣

移動設(shè)備上較寬的按鈕和可點擊區(qū)域始終比微型UI組件性能更好。因此，如果設(shè)計允許，請始終使用比移動設(shè)備上的單選按鈕，下拉列表或復(fù)制鏈接更大的視覺效果。

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

用于重要分類的基于顏色的標(biāo)簽減少了認(rèn)知負(fù)擔(dān)。作為設(shè)計師，我們始終可以在關(guān)鍵設(shè)計屏幕上使用一些顏色，但是不要過度使用它，因為它可能產(chǎn)生相反的效果并弄亂UX的層次結(jié)構(gòu)。

13、表單字段按鈕

始終對文本字段旁邊的按鈕使用不同的顏色，以確保它不會與文本輸入?yún)^(qū)域融合在一起。

14、完美的線條高度

我們都希望字體大小和行距之間能有一個完美的比例，通用UX規(guī)則是-保持行高比字符高20–30％，以提高可讀性。

15、合適的字體大小

界面中的字體大小可以區(qū)分文字內(nèi)容的層次，提升視覺效果。但是，為了避免文字出現(xiàn)模糊混亂的情況，設(shè)計師可以使用行高1.5的16px字體，這是進(jìn)行正文復(fù)制的最安全的選擇。

16、重疊的圖像使外觀更優(yōu)美

如果您想給設(shè)計增添些別致的色彩，請選擇重疊的圖片，尤其是在設(shè)計用戶個人資料頁面或卡片時。為確保視覺平衡，請始終保持圖像邊框與背景色匹配。

這16個有助于提升產(chǎn)品增長的技巧，你get到了嗎？請分享本文給更多小伙伴們一起學(xué)習(xí)吧！

作者 | 美國交互設(shè)計資訊
來源公眾號 | 美國交互設(shè)計資訊