本文總結(jié)了16種UX和UI的設(shè)計(jì)策略，這些策略可對(duì)于已上線的產(chǎn)品提供即時(shí)的增長(zhǎng)效果，可以為更多的用戶帶來更卓越的產(chǎn)品使用體驗(yàn)。
1、效果最好的CTA（Call-To-Action）
如果您在操作中添加了一些上下文信息，那么號(hào)召性用語(yǔ)按鈕的效果將始終更好，但是請(qǐng)盡量不要超過三個(gè)字。如上圖案例所示，您可以使用“添加到購(gòu)物車”來代替“添加”，或者使用“立即購(gòu)買“按鈕來替代“購(gòu)買”。
2、移動(dòng)端字符
針對(duì)移動(dòng)設(shè)備可讀性的最佳可用性原則是每行不超過9個(gè)字或50至60個(gè)字符，這項(xiàng)設(shè)計(jì)規(guī)則已經(jīng)經(jīng)過了大量的測(cè)試檢驗(yàn)。
3、移動(dòng)端CTA
麻省理工學(xué)院觸摸實(shí)驗(yàn)室對(duì)人的指尖的研究得出結(jié)論，對(duì)于大多數(shù)成年人，食指的平均寬度為16-20毫米，這使得在移動(dòng)端設(shè)備上，理想的按鈕尺寸為40-50像素。
4、單選按鈕和下拉清單
不確定何時(shí)使用單選按鈕以及何時(shí)使用下拉菜單的時(shí)候，謹(jǐn)記以下UX規(guī)則：對(duì)少于5個(gè)選項(xiàng)使用單選按鈕樣式，對(duì)超過5個(gè)選項(xiàng)使用下拉菜單。
5、分頁(yè)或無(wú)限滾動(dòng)
許多用戶體驗(yàn)設(shè)計(jì)師傾向于使用無(wú)限滾動(dòng)來使他們的設(shè)計(jì)更加時(shí)尚現(xiàn)代。但是，這對(duì)于嘗試查找正確內(nèi)容的用戶不起作用。對(duì)于電子商務(wù)或數(shù)據(jù)豐富的網(wǎng)站，面向目標(biāo)的UX應(yīng)該使用無(wú)限滾動(dòng)進(jìn)行內(nèi)容探索和分頁(yè)。
6、默認(rèn)選擇
鍵入和額外的單擊具有很高的交互成本。要提高表單轉(zhuǎn)換率，請(qǐng)始終給予默認(rèn)選擇選項(xiàng)，以便用戶進(jìn)行最頻繁的交互選擇。
7、適度使用圖標(biāo)
過度使用圖標(biāo)是一個(gè)UI錯(cuò)誤，通常會(huì)損害產(chǎn)品的使用體驗(yàn)。圖標(biāo)的使用應(yīng)始終具有強(qiáng)烈的含義，永遠(yuǎn)不要將功能隱藏在模糊的圖標(biāo)后面。UX黃金法則：如果標(biāo)簽不足以說明操作，請(qǐng)使用圖標(biāo)來代替。
8、錯(cuò)誤消息
為了提高轉(zhuǎn)化率，請(qǐng)務(wù)必提供糾正錯(cuò)誤的建議，以減輕用戶的認(rèn)知負(fù)擔(dān)。保持人性化和幽默感，避免在用戶面對(duì)錯(cuò)誤界面或錯(cuò)誤消息時(shí)流失。
9、清單或單選按鈕？
對(duì)于多選選擇，請(qǐng)使用清單選項(xiàng)，對(duì)單選選擇，使用單選按鈕。
10、使用占位符（Placeholder）顯示示例
使用占位符副本可設(shè)置更好的上下文并增加表單轉(zhuǎn)換。但是您應(yīng)該更進(jìn)一步-使用示例，而不是必需的字段名稱。例如，插入示例電話號(hào)碼（+44 757 869…），而不要輸入“電話號(hào)碼”或“ hi@pony.studio”而不是“電子郵件”。
11、手機(jī)上的可點(diǎn)擊區(qū)域更廣
移動(dòng)設(shè)備上較寬的按鈕和可點(diǎn)擊區(qū)域始終比微型UI組件性能更好。因此，如果設(shè)計(jì)允許，請(qǐng)始終使用比移動(dòng)設(shè)備上的單選按鈕，下拉列表或復(fù)制鏈接更大的視覺效果。
12、使用顏色進(jìn)行分類
用于重要分類的基于顏色的標(biāo)簽減少了認(rèn)知負(fù)擔(dān)。作為設(shè)計(jì)師，我們始終可以在關(guān)鍵設(shè)計(jì)屏幕上使用一些顏色，但是不要過度使用它，因?yàn)樗赡墚a(chǎn)生相反的效果并弄亂UX的層次結(jié)構(gòu)。
13、表單字段按鈕
始終對(duì)文本字段旁邊的按鈕使用不同的顏色，以確保它不會(huì)與文本輸入?yún)^(qū)域融合在一起。
14、完美的線條高度
我們都希望字體大小和行距之間能有一個(gè)完美的比例，通用UX規(guī)則是-保持行高比字符高20–30％，以提高可讀性。
15、合適的字體大小
界面中的字體大小可以區(qū)分文字內(nèi)容的層次，提升視覺效果。但是，為了避免文字出現(xiàn)模糊混亂的情況，設(shè)計(jì)師可以使用行高1.5的16px字體，這是進(jìn)行正文復(fù)制的最安全的選擇。
16、重疊的圖像使外觀更優(yōu)美
如果您想給設(shè)計(jì)增添些別致的色彩，請(qǐng)選擇重疊的圖片，尤其是在設(shè)計(jì)用戶個(gè)人資料頁(yè)面或卡片時(shí)。為確保視覺平衡，請(qǐng)始終保持圖像邊框與背景色匹配。
這16個(gè)有助于提升產(chǎn)品增長(zhǎng)的技巧，你get到了嗎？請(qǐng)分享本文給更多小伙伴們一起學(xué)習(xí)吧！
作者 | 美國(guó)交互設(shè)計(jì)資訊
來源公眾號(hào) | 美國(guó)交互設(shè)計(jì)資訊