用一個(gè)文本框，讓你學(xué)到交互設(shè)計(jì)師的邏輯思考方法

文本框是設(shè)計(jì)工作中常見的組件之一，無論是PC還是無線，大多僅是樣式上的不同，它們的交互行為上是可以相互參照的。本文想從這一簡單的組件出發(fā)，讓大家看到交互設(shè)計(jì)師在工作中的邏輯思考方法，從而達(dá)到見微知著的直觀感受。

這兒還有一篇網(wǎng)易云音樂資深交互設(shè)計(jì)師分享的實(shí)戰(zhàn)交互案例：《網(wǎng)易實(shí)戰(zhàn)！從一次活動(dòng)設(shè)計(jì)聊聊交互設(shè)計(jì)師的3個(gè)階段》

先來做個(gè)設(shè)計(jì)需求吧！

這個(gè)設(shè)計(jì)需求是：我們需要用戶填寫活動(dòng)的名稱。

第一反應(yīng)，這個(gè)是用來收集信息的，需要用戶填寫內(nèi)容，并提交給系統(tǒng)，應(yīng)該使用文本框。

然后大筆一揮，設(shè)計(jì)如下圖：

這樣就完成了嗎？這個(gè)設(shè)計(jì)能交附程序猿開發(fā)了嗎？答案顯示是：NO。

如何全面地思考？

1. 了解需求背景

首先我們需要了解這個(gè)需求的背景，多問幾個(gè)問題。

• 為什么要讓用戶填寫？這個(gè)信息對我們的業(yè)務(wù)有什么幫助？
• 有沒有辦法通過其他渠道來獲取這個(gè)信息？

2. 考慮組件的基本屬性

文本框是最適合收集用戶輸入信息的組件，用戶按照要求輸入一定數(shù)量的字符。使用這個(gè)組件，要先了解它的基本屬性。

內(nèi)容

• 合法字符：是否支持中文、數(shù)字、下劃線、特殊符號？
• 格式：要填寫的是郵箱、日期、還是密碼？能以數(shù)字或特殊字符開頭嗎？

長度

• 字?jǐn)?shù)：是否有字?jǐn)?shù)的限制？若輸入字?jǐn)?shù)較少，使用文本框。盡量讓文本框的寬度比輸入量稍寬，從而給用戶形成心理預(yù)期，填寫的內(nèi)容很簡單，降低用戶填寫的心理壓力。若輸入字?jǐn)?shù)較多，則使用文本域。

3. 完善流程體驗(yàn)

交互設(shè)計(jì)師在流程中主要承擔(dān)引導(dǎo)用戶前進(jìn)的角色：輸入前，需要先告訴用戶要填寫哪些內(nèi)容，怎么填寫；輸入時(shí)，需要及時(shí)的給予幫助；輸入完成后，若正確給予鼓勵(lì)，若錯(cuò)誤說明原因。

具體可以從下面這些方面來考慮：

預(yù)先提示

• 告訴用戶輸入內(nèi)容是否有特殊要求（如規(guī)定不能使用標(biāo)點(diǎn)符號）。
• 告訴用戶輸入的字?jǐn)?shù)是否有要求（如規(guī)定只能輸入20個(gè)字）。
• 告訴用戶輸入的內(nèi)容是否要具有唯一性（如用戶名）。

合法性提示

• 輸入內(nèi)容出現(xiàn)不合規(guī)的字符提示用戶。
• 輸入的字?jǐn)?shù)超出限定的范圍提示用戶。
• 輸入的內(nèi)容在系統(tǒng)中已存在時(shí)提示用戶。

再深入挖掘的話，還有很多細(xì)節(jié)，如：當(dāng)用戶在輸入的最后多敲擊了一下空格鍵，使得在輸入框中增加了一個(gè)字符，是否要將其自動(dòng)去除，以幫助用戶完成操作。

文章的最后提供具體的案例，設(shè)計(jì)僅供參考，實(shí)際應(yīng)用時(shí)還要基于不同的場景進(jìn)行狀態(tài)的增減。

如何提高全面思考的能力？

設(shè)計(jì)其實(shí)是有“套路”可循的：從小的組控件到大的項(xiàng)目都有相似或相同的流程步驟。深諳套路的設(shè)計(jì)師在這個(gè)過程中可以快速的搭建頁面或理清流程，并在這個(gè)基礎(chǔ)上進(jìn)行不斷的迭代優(yōu)化。快速有效的了解設(shè)計(jì)背后的套路，提升全面思考的能力，可以從以下幾個(gè)方面來進(jìn)行：

1. 平時(shí)多積累收集

多看產(chǎn)品設(shè)計(jì)文檔，多研究動(dòng)態(tài)交互過程，多體會(huì)同類型的組件，從中可以學(xué)到很多同行的設(shè)計(jì)思考。在這個(gè)過程中，督促自己思考為什么他們會(huì)這樣設(shè)計(jì)，試著去找到答案，并將其內(nèi)化為自己的經(jīng)驗(yàn)。嗯，多記錄整理下來，好記性不如爛筆頭！

2. 設(shè)計(jì)過程多體會(huì)

有了平時(shí)的積累，再遇到相似的設(shè)計(jì)需求時(shí)，就會(huì)更容易的從多維度去思考各種可能性。就像上面提到的，首先從用戶角度出發(fā)，思考這個(gè)需求是否必要，用戶是否要為此付出成本。其次從基礎(chǔ)屬性出發(fā)，考慮解決方案。最后融合到流程中，針對用戶操作的觸點(diǎn)，加強(qiáng)引導(dǎo)設(shè)計(jì)，及時(shí)反饋結(jié)果。

3. 設(shè)計(jì)完成多驗(yàn)證

在設(shè)計(jì)完成后，除了上面帶點(diǎn)套路性質(zhì)的設(shè)計(jì)思考過程，我常用的驗(yàn)證方法是加入多方，一起驗(yàn)證設(shè)計(jì)的完整性：與設(shè)計(jì)小伙伴討論，收集問題并持續(xù)優(yōu)化。

當(dāng)然，我們沒有辦法遍歷一個(gè)邏輯的全部，比如有些情況下系統(tǒng)延遲反饋，而在設(shè)計(jì)過程中沒有覆蓋到。解決方法是：與開發(fā)同學(xué)保持良好的溝通，有新增細(xì)節(jié)馬上碰，減少遺漏。

設(shè)計(jì)參考

基于一些背景要求，拋個(gè)設(shè)計(jì)參考。

「交互設(shè)計(jì)實(shí)戰(zhàn)好文」

1. 細(xì)節(jié)設(shè)計(jì)：《案例實(shí)戰(zhàn)！聊聊交互細(xì)節(jié)設(shè)計(jì)的四個(gè)小技巧》
2. 按鈕設(shè)計(jì)：《交互案例實(shí)戰(zhàn)！三個(gè)按鈕背后由小見大的交互思考》
3. 活動(dòng)設(shè)計(jì)：《網(wǎng)易實(shí)戰(zhàn)！從一次活動(dòng)設(shè)計(jì)聊聊交互設(shè)計(jì)師的3個(gè)階段》

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計(jì)師學(xué)習(xí)平臺，專注分享網(wǎng)頁設(shè)計(jì)、無線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書：史上最全的設(shè)計(jì)師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量150萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com