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

進階閱讀：

輸入前

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

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

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

輸入

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

例 1：微信紅包個數(shù)字段與總金額字段對應(yīng)的鍵盤設(shè)計不同，因為個數(shù)不會有小數(shù)點

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

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

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

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

輸入后

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

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

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

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

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

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

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

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

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