交互設(shè)計(jì)師畫(huà)稿時(shí)需要充分考慮輸入輸出（反饋）的狀態(tài)，保證輸入無(wú)障礙、反饋清晰易懂，使整個(gè)交互體驗(yàn)流暢。剛好近期做了一些表單的優(yōu)化設(shè)計(jì)，整個(gè)優(yōu)化過(guò)程中就疏忽了很多細(xì)節(jié)體驗(yàn)，今天做個(gè)復(fù)盤(pán)，以表單舉例來(lái)聊聊設(shè)計(jì)時(shí)應(yīng)該如何拆解完善細(xì)節(jié)體驗(yàn)。

進(jìn)階閱讀：

輸入前

輸入前的頁(yè)面重點(diǎn)是傳達(dá)需要做什么、一般達(dá)成傳達(dá)的目的有兩種形式，一種是通過(guò)標(biāo)題文字+輔助文字來(lái)說(shuō)明，比如：需要輸入文字、數(shù)字、需要點(diǎn)擊、需要上傳圖片...；另一種是直接將輸入控件直接采用特定的控件，比如：郵箱輸入框、電話輸入框...，這類控件一看就知道要填入啥信息。

輔助說(shuō)明更多是為了幫助用戶提前了解，減少出錯(cuò)率，如：需要上傳 png 格式圖片

幫助用戶做決策，如：微信紅包的群人數(shù)就是為了幫助用戶輸入紅包個(gè)數(shù)，避免用戶需要確認(rèn)人數(shù)而返回看群人數(shù)，也算是一種提醒信息

輸入

輸入部分除了常見(jiàn)的快捷輸入、輸入聯(lián)想、自動(dòng)識(shí)別等方式幫助用戶快速輸入外，在涉及輸入數(shù)字的時(shí)候，需要關(guān)注數(shù)字鍵盤(pán)上的輸入行為可能會(huì)有哪些情況，而這些情況同時(shí)也需要和我們的輸入項(xiàng)字段要求有關(guān)。舉個(gè)例子：

例 1：微信紅包個(gè)數(shù)字段與總金額字段對(duì)應(yīng)的鍵盤(pán)設(shè)計(jì)不同，因?yàn)閭€(gè)數(shù)不會(huì)有小數(shù)點(diǎn)

根據(jù)特定的字段信息屬性提供相應(yīng)的數(shù)字鍵盤(pán)，減去多余內(nèi)容，干擾、造成錯(cuò)誤輸入

例 2：能夠根據(jù)輸入要求智能判斷，當(dāng)總金額輸入 0 后在此輸入其他數(shù)字，自動(dòng)去 0；首次輸入小數(shù)點(diǎn)，則默認(rèn)為 0.

這就是能夠根據(jù)用戶輸入的內(nèi)容結(jié)合輸入項(xiàng)的輸入要求，智能判斷，呈現(xiàn)最終合理結(jié)果

例 3：實(shí)時(shí)判斷輸入內(nèi)容，有問(wèn)題即時(shí)報(bào)錯(cuò)反饋，微信紅包通過(guò)頂部常駐提示及表單標(biāo)紅高亮展示錯(cuò)誤

輸入后

到這一步表示前幾部輸入行為已完成，但還存在用戶需要重新調(diào)整輸入的可能，這里就需要考慮修改的交互方式，考慮如何幫助用戶更順暢的對(duì)已輸入字段的重新調(diào)整。

例 1：很多輸入框當(dāng)用戶重新觸發(fā)后會(huì)有“一鍵刪除”的按鈕，這就是為了方便用戶快速修改，提高效率，有時(shí)候這種短字符的輸入項(xiàng)一鍵刪除重新輸入比找到問(wèn)題點(diǎn)刪除再輸入快許多。

例 2：QQ 紅包這邊，當(dāng)點(diǎn)擊已輸入完成的個(gè)數(shù)、金額時(shí)，就會(huì)默認(rèn)選中已有內(nèi)容，重新輸入直接是覆蓋輸入，相信這邊也是考慮到在這么小的區(qū)域用戶很難精準(zhǔn)將光標(biāo)插到數(shù)字中間吧

例 3：為了幫助用戶拖動(dòng)光標(biāo)，蘋(píng)果的原生鍵盤(pán)就支持長(zhǎng)按鍵盤(pán)后移動(dòng)，直接將移動(dòng)熱區(qū)從小小的輸入框的面積擴(kuò)大到整個(gè)鍵盤(pán)，真的是非常巧妙與貼心的設(shè)計(jì)

像以上說(shuō)了這些都是非常細(xì)節(jié)的點(diǎn)，這些細(xì)節(jié)的點(diǎn)都是要基于大框架，大流程沒(méi)問(wèn)題的前提下我們要去花時(shí)間去思考，去改善的點(diǎn)，可能很多人會(huì)說(shuō)這些細(xì)節(jié)其實(shí)對(duì)大框架的使用影響很小，事實(shí)確實(shí)如此，但我要表達(dá)的是我們可以將這種關(guān)注細(xì)節(jié)的喜歡，考慮多重場(chǎng)景放到我們平時(shí)框架、流程的設(shè)計(jì)中可以讓我們發(fā)現(xiàn)更多設(shè)計(jì)需要思考的延伸點(diǎn)，只有這樣不斷的考慮場(chǎng)景、用戶可能發(fā)生的行為、可能面臨的問(wèn)題可以幫助我們畫(huà)稿過(guò)程中養(yǎng)成主動(dòng)去思考更多，推敲更多的習(xí)慣，這樣方案會(huì)在日積月累的鍛煉中畫(huà)的越來(lái)越好。

所以要逐漸養(yǎng)成這樣的習(xí)慣的方法是多問(wèn)，盯著頁(yè)面多看，看看競(jìng)品。

• 這樣設(shè)計(jì)能滿足需求嗎？
• 符合用戶使用場(chǎng)景嗎？
• 用戶可能會(huì)怎樣操作？是否都能滿足？
• 別人是怎么做的？
• 這個(gè)步驟我是否有缺了什么頁(yè)面或規(guī)則沒(méi)想清楚？

養(yǎng)成這樣的習(xí)慣，慢慢的就會(huì)讓自己一點(diǎn)點(diǎn)的考慮地更加深入，做出的方案也會(huì)更加完整。

歡迎關(guān)注作者微信公眾號(hào)：「小發(fā)的設(shè)計(jì)筆記」