UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南

　　在移動(dòng)互聯(lián)網(wǎng)時(shí)代發(fā)展的今天，場(chǎng)景思維對(duì)于用戶體驗(yàn)設(shè)計(jì)的影響不言而喻。提升體驗(yàn)的一個(gè)核心命題就是如何簡(jiǎn)化任務(wù)與交互，提高用戶完成任務(wù)的效率，之后才是愉悅感乃至其他情感化內(nèi)容。大道理在此不多說，大家都懂。今天AAA教育郭老師就針對(duì)UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南進(jìn)行簡(jiǎn)單的說明。
 

一、UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南：在功能性 APP 的設(shè)計(jì)上盡可能的簡(jiǎn)潔
 

　　因?yàn)楣δ苄?APP 主要以操作為主，且用戶操作的目的性會(huì)比較強(qiáng)。為了方便用戶操作，APP 頁(yè)面的展示信息需要經(jīng)過提煉。給用戶展示當(dāng)下操作需要的信息，減少甚至刪除不必要的信息。這樣一來能降低頁(yè)面噪音，方便用戶聚焦。
 

　　舉個(gè)例子：在點(diǎn)融貸款 APP 的綁卡流程中，想要綁定成功銀行卡，需要提供用戶姓名、身份證號(hào)、銀行卡號(hào)和銀行預(yù)留手機(jī)號(hào)這四項(xiàng)要素。因?yàn)閷?duì)于后臺(tái)來說，用戶的姓名和用戶身份證號(hào)是對(duì)應(yīng)的。也就是說，后臺(tái)運(yùn)行的時(shí)候會(huì)把用戶姓名和用戶身份證號(hào)一起傳輸，而對(duì)于用戶來說，只用知道自己的姓名就好了，沒必要同時(shí)看見自己的身份證號(hào)。出于以上考慮，為了讓用戶在這個(gè)流程聚焦，我對(duì)信息展示做了選擇，省去了與持卡人姓名相對(duì)應(yīng)的身份證號(hào)的信息。如下圖所示：
 

二、 UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南：在設(shè)計(jì)簡(jiǎn)潔的基礎(chǔ)上，要更注意設(shè)計(jì)細(xì)節(jié)，將場(chǎng)景思維落實(shí)到每個(gè)細(xì)節(jié)點(diǎn)中
 

　　設(shè)計(jì)要注意細(xì)節(jié)，設(shè)計(jì)要注意細(xì)節(jié)，設(shè)計(jì)要注意細(xì)節(jié)。重要事情說三遍。大家可以看下圖的栗子，下面的圖是點(diǎn)融借款 APP 的界面，右邊是支付寶的頁(yè)面。點(diǎn)融借款頁(yè)面中“持卡人姓名”這一項(xiàng)是不能被用戶編輯的，所以現(xiàn)設(shè)計(jì)把這塊的灰掉，暗示用戶此區(qū)域不能被編輯。右圖中“支付寶智能加密，保障你的用卡安全”這行說明文字也是為了告訴用戶輸入信息安全，打消用戶綁卡時(shí)候的顧慮。
 

　　這些都是非常細(xì)節(jié)的設(shè)計(jì)小點(diǎn)，但是運(yùn)用在用戶使用場(chǎng)景里面能傳遞更加友好的信息。
 

三、UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南：對(duì)于給用戶的錯(cuò)誤提示，應(yīng)該更加場(chǎng)景化
 

　　很多 APP 的做法是在用戶已經(jīng)操作錯(cuò)誤之后給用戶錯(cuò)誤提示，這需要用戶返回重復(fù)操作。如果用戶在這一階段反復(fù)幾次還未能完成操作，很容易產(chǎn)生不耐煩的情緒。從更好的體驗(yàn)的角度來說，處理這個(gè)問題一般有兩步驟。首先，需要設(shè)計(jì)師分析清楚這個(gè)錯(cuò)誤提示是否必要以這種方式出現(xiàn)。是否可以通過流程上的改進(jìn)或是頁(yè)面細(xì)節(jié)的改進(jìn)來降低甚至避免用戶出錯(cuò)的概率。其次，如果用戶操作錯(cuò)誤，能否盡早盡可能準(zhǔn)確的提示用戶。
 

　　下圖所示的是微信和支付寶的“選擇卡類型”的流程對(duì)比。二者都能基于銀行卡號(hào)自動(dòng)識(shí)別出對(duì)于銀行，不同之處在于，微信允許用戶自主修改卡類型，如果用戶自主選擇結(jié)果有錯(cuò)誤再給用戶錯(cuò)誤提示的彈框。支付寶自動(dòng)識(shí)別出銀行卡類型之后不允許用戶自主修改。

　　因?yàn)椴磺宄纱缶揞^在這一功能點(diǎn)設(shè)計(jì)背后的技術(shù)限制問題，所以很難說誰好誰壞。如果在信任自動(dòng)識(shí)別技術(shù)的基礎(chǔ)上來說，盟主個(gè)人偏向支付寶的處理辦法。支付寶不允許用戶自主選擇卡類型，可以減少用戶自主選擇錯(cuò)誤的可能性。這就是盟主在上段所說的，通過改進(jìn)流程來減少(或避免)錯(cuò)誤。
 

四、UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南：設(shè)計(jì)遵從用戶的普遍認(rèn)知
 

　　對(duì)于大多功能性APP 的設(shè)計(jì)而言，遵從用戶的普遍認(rèn)知能降低用戶的學(xué)習(xí)使用 APP 的成本，一定程度上提升了 APP 的用戶體驗(yàn)。簡(jiǎn)單來說，就是在為功能性 APP 做設(shè)計(jì)時(shí)，采用的設(shè)計(jì)樣式啊交互方式啊一定程度的跟隨市場(chǎng)上的通用做法。這樣雖然從表面上看，APP 的設(shè)計(jì)個(gè)性會(huì)減弱，卻能在易用性方面得到大幅提升。
 

　　上面我詳細(xì)的講解了UI設(shè)計(jì)中交互細(xì)節(jié)設(shè)計(jì)指南，相信同學(xué)們對(duì)交互細(xì)節(jié)設(shè)計(jì)有一定了解了，希望我的文章能夠幫助到你，郭老師之前也分享過《UI設(shè)計(jì)中下拉刷新設(shè)計(jì)使用技巧》、《UI設(shè)計(jì)中節(jié)日閃屏設(shè)計(jì)指南》、《如何做好UI底部導(dǎo)航欄圖標(biāo)設(shè)計(jì)》、《如何做好UI詳情頁(yè)設(shè)計(jì)》等，如果你有更多的知識(shí)解答，就找在線小姐姐留言，我會(huì)一一的給你解答，郭老師最近接到很多同學(xué)的問題，我也進(jìn)行了詳細(xì)的整理，后續(xù)會(huì)更新上來，敬請(qǐng)關(guān)注AAA教育網(wǎng)站。