以文本框為例,了解交互設計師在工作中的邏輯思考方法

7 評論 20968 瀏覽 186 收藏 7 分鐘

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

先來做個設計需求吧!

這個設計需求是:我們需要用戶填寫活動的名稱。

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

然后大筆一揮,設計如下圖:

uisdc-24-2016092417

這樣就完成了嗎?這個設計能交附程序猿開發(fā)了嗎?答案顯示是:NO。

如何全面地思考?

1. 了解需求背景

首先我們需要了解這個需求的背景,多問幾個問題。

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

2. 考慮組件的基本屬性

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

(1)內容

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

(2)長度

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

3. 完善流程體驗

交互設計師在流程中主要承擔引導用戶前進的角色:輸入前,需要先告訴用戶要填寫哪些內容,怎么填寫;輸入時,需要及時的給予幫助;輸入完成后,若正確給予鼓勵,若錯誤說明原因。

uisdc-24-2016092418

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

(1)預先提示

  • 告訴用戶輸入內容是否有特殊要求(如規(guī)定不能使用標點符號);
  • 告訴用戶輸入的字數(shù)是否有要求(如規(guī)定只能輸入20個字);
  • 告訴用戶輸入的內容是否要具有唯一性(如用戶名)。

(2)合法性提示

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

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

文章的最后提供具體的案例,設計僅供參考,實際應用時還要基于不同的場景進行狀態(tài)的增減。

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

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

1. 平時多積累收集

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

2. 設計過程多體會

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

3. 設計完成多驗證

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

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

設計參考

基于一些背景要求,拋個設計參考。如下圖:

11

原文:http://www.uisdc.com/interaction-design-text-box

更多精彩內容,請關注人人都是產品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 3s后消失可以參考一種場景,即用戶已經(jīng)輸入了符合要求的昵稱,但是用戶可能又想到另一個自己更喜歡的昵稱,此時用戶進行刪除并修改,如果提示沒有消失可能會給用戶帶來錯誤的提示。這種提示是簡單的toast提示,一般都是會自動消失,主要是為了避免出現(xiàn)下一個情形時,文案的變化不狗明顯給用戶帶來的誤解。個人觀點。

    來自廣東 回復
    1. 用戶想更換字段的話,在光標進去輸入框的同時,原有的綠色正確提示應該消失或置灰,等待輸入完畢后,光標離開輸入框,再次移動校驗

      回復
  2. 打個勾就可以了,非要寫一句話……而且專門們弄個字數(shù)顯示也很怪

    回復
  3. 同問,為何要三秒后消失,這樣不會增加開發(fā)成本嗎

    回復
  4. 想的都是好的,只不過有時候程序員會嫌你設計的麻煩,還有可能就是時間問題

    來自安徽 回復
  5. 最后的那個設計,為什么要設定3秒后自動消失?能說說你的原因嗎?

    回復
  6. 表示看的有點懵??

    回復