以文本框?yàn)槔?,了解交互設(shè)計(jì)師在工作中的邏輯思考方法
文本框是設(shè)計(jì)工作中常見的組件之一,無論是PC還是無線,大多僅是樣式上的不同,它們的交互行為上是可以相互參照的。本文想從這一簡(jiǎn)單的組件出發(fā),讓大家看到交互設(shè)計(jì)師在工作中的邏輯思考方法,從而達(dá)到見微知著的直觀感受。
先來做個(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è)信息對(duì)我們的業(yè)務(wù)有什么幫助?
- 有沒有辦法通過其他渠道來獲取這個(gè)信息?
2. 考慮組件的基本屬性
文本框是最適合收集用戶輸入信息的組件,用戶按照要求輸入一定數(shù)量的字符。使用這個(gè)組件,要先了解它的基本屬性。
(1)內(nèi)容
- 合法字符:是否支持中文、數(shù)字、下劃線、特殊符號(hào)?
- 格式:要填寫的是郵箱、日期、還是密碼?能以數(shù)字或特殊字符開頭嗎?
(2)長(zhǎng)度
- 字?jǐn)?shù):是否有字?jǐn)?shù)的限制?若輸入字?jǐn)?shù)較少,使用文本框。盡量讓文本框的寬度比輸入量稍寬,從而給用戶形成心理預(yù)期,填寫的內(nèi)容很簡(jiǎn)單,降低用戶填寫的心理壓力。若輸入字?jǐn)?shù)較多,則使用文本域。
3. 完善流程體驗(yàn)
交互設(shè)計(jì)師在流程中主要承擔(dān)引導(dǎo)用戶前進(jìn)的角色:輸入前,需要先告訴用戶要填寫哪些內(nèi)容,怎么填寫;輸入時(shí),需要及時(shí)的給予幫助;輸入完成后,若正確給予鼓勵(lì),若錯(cuò)誤說明原因。
具體可以從下面這些方面來考慮:
(1)預(yù)先提示
- 告訴用戶輸入內(nèi)容是否有特殊要求(如規(guī)定不能使用標(biāo)點(diǎn)符號(hào));
- 告訴用戶輸入的字?jǐn)?shù)是否有要求(如規(guī)定只能輸入20個(gè)字);
- 告訴用戶輸入的內(nèi)容是否要具有唯一性(如用戶名)。
(2)合法性提示
- 輸入內(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í)還要基于不同的場(chǎng)景進(jìn)行狀態(tài)的增減。
如何提高全面思考的能力?
設(shè)計(jì)其實(shí)是有“套路”可循的:從小的組控件到大的項(xiàng)目都有相似或相同的流程步驟。深諳套路的設(shè)計(jì)師在這個(gè)過程中可以快速的搭建頁面或理清流程,并在這個(gè)基礎(chǔ)上進(jìn)行不斷的迭代優(yōu)化??焖儆行У牧私庠O(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ā),考慮解決方案。最后融合到流程中,針對(duì)用戶操作的觸點(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ì)參考。如下圖:
原文:http://www.uisdc.com/interaction-design-text-box
3s后消失可以參考一種場(chǎng)景,即用戶已經(jīng)輸入了符合要求的昵稱,但是用戶可能又想到另一個(gè)自己更喜歡的昵稱,此時(shí)用戶進(jìn)行刪除并修改,如果提示沒有消失可能會(huì)給用戶帶來錯(cuò)誤的提示。這種提示是簡(jiǎn)單的toast提示,一般都是會(huì)自動(dòng)消失,主要是為了避免出現(xiàn)下一個(gè)情形時(shí),文案的變化不狗明顯給用戶帶來的誤解。個(gè)人觀點(diǎn)。
用戶想更換字段的話,在光標(biāo)進(jìn)去輸入框的同時(shí),原有的綠色正確提示應(yīng)該消失或置灰,等待輸入完畢后,光標(biāo)離開輸入框,再次移動(dòng)校驗(yàn)
打個(gè)勾就可以了,非要寫一句話……而且專門們弄個(gè)字?jǐn)?shù)顯示也很怪
同問,為何要三秒后消失,這樣不會(huì)增加開發(fā)成本嗎
想的都是好的,只不過有時(shí)候程序員會(huì)嫌你設(shè)計(jì)的麻煩,還有可能就是時(shí)間問題
最后的那個(gè)設(shè)計(jì),為什么要設(shè)定3秒后自動(dòng)消失?能說說你的原因嗎?
表示看的有點(diǎn)懵??