6個(gè)輸入框 ，47個(gè)設計點(diǎn)

“乍一看到某個(gè)問(wèn)題，你會(huì )覺(jué)得很簡(jiǎn)單，其實(shí)你并沒(méi)有理解其復雜性。當你把問(wèn)題搞清楚之后，又會(huì )發(fā)現真的很復雜，于是你就拿出一套復雜的方案來(lái)。實(shí)際上，你的工作只做了一半，大多數人也都會(huì )到此為止……。但是真正偉大的人還會(huì )繼續向前，直至找到問(wèn)題的關(guān)鍵和深層次原因，然后再拿出一個(gè)優(yōu)雅的、堪稱(chēng)的有效方案。” - 史蒂夫·喬布斯

這篇文字只是描述對于簡(jiǎn)單的三個(gè)界面，我做每個(gè)設計決策的歷程。

設計任務(wù)是對以下注冊過(guò)程的優(yōu)化，目標是降低注冊門(mén)檻，讓過(guò)程高效，平臺為iOS。

設計分兩步走，分別是信息架構設計和細節設計，細節再從默認狀態(tài)、填寫(xiě)狀態(tài)、反饋狀態(tài)三個(gè)角度進(jìn)行設計。

以下是過(guò)程描述：

一、信息架構。

也就是整理信息、規劃步驟，把需要用戶(hù)錄入的信息全部列舉出來(lái)，然后設定到一個(gè)或多個(gè)步驟里，形成整個(gè)注冊過(guò)程。

先列出需要的信息有：[1]

1 通過(guò)驗證的手機(也就是手機號、驗證碼)

2 密碼

3 昵稱(chēng)

4 性別

5 生日

原來(lái)的密碼要填兩遍，手機輸入太痛苦，果斷去掉一遍。

星座本就是由生日推算，放在注冊環(huán)節徒增操作成本，果斷去掉。

技術(shù)及運營(yíng)需求，全部為必要信息(也就是必填)。

接下來(lái)就是組織這些信息，可能的組織方式有：[2]

后選擇了這個(gè)：

具體是這樣：

為什么呢?

從用戶(hù)操作流程考慮，我想讓入門(mén)這一下足夠簡(jiǎn)單[3]，所以用戶(hù)看到的步只有一個(gè)要求，輸入手機號，關(guān)于這個(gè)目標，后續細節分析還有進(jìn)一步的交代。第二步開(kāi)始漸難，第三步相對難，從簡(jiǎn)到繁。

那為什么不每一步只完成一個(gè)任務(wù)，每一步都簡(jiǎn)單呢?這樣會(huì )使得整個(gè)流程變得很長(cháng)[4]。后面適當的復雜我覺(jué)得是可以接受的，這里動(dòng)了一個(gè)邪惡的小心思，關(guān)于沉沒(méi)成本的原理[5]，大致就是對“哥既然已經(jīng)填了兩步了，就再填一步吧，反正只剩一步了”這種心理的利用。

細心的人也許會(huì )問(wèn)，為什么中間一步是密碼和驗證碼，且后一步?jīng)]有返回按鈕呢?其實(shí)這是一個(gè)技術(shù)上的約束造成[6]。先，對于我們系統來(lái)說(shuō)，手機號一旦驗證(驗證碼一旦正確提交)，手機號就不能再被使用，而完成注冊還得搭上密碼，所以驗證碼和密碼得同一個(gè)動(dòng)作提交給系統，不能分成兩步，驗證碼如果單獨作為一步先提交，也就是手機單獨被驗證，中間若發(fā)生非常規退出，密碼還沒(méi)填，下次再想注冊就會(huì )被提示手機已被占用了。其次，在第二步填完驗證碼和密碼后，其實(shí)已經(jīng)注冊成功啦，也就是說(shuō)，用戶(hù)在第三步就把應用強制退出，下次回來(lái)也能夠憑手機號和密碼登錄啦，當然登錄完第三步的基本資料填寫(xiě)還是會(huì )等著(zhù)他，跟他說(shuō)未完待續。這也就是為什么第三步基本資料沒(méi)有返回修改密碼驗證碼的入口，看上去怪怪的，但游戲規則就這樣，如果你有好辦法，記得告訴我。

于是，從用戶(hù)操作流程和系統約束雙線(xiàn)考慮，得到了這么一個(gè)信息架構。因為界面內容不多，無(wú)需框架，直接進(jìn)入細節設計。

二、細節設計，注冊第1步(手機號)

每一個(gè)界面都分別對默認、輸入和反饋三個(gè)狀態(tài)進(jìn)行設計。個(gè)界面元素少，相對好處理。

默認狀態(tài)設計如下：

導航欄左側按鈕用X，代表對注冊任務(wù)的取消[+7]，代表這個(gè)界面跟上一個(gè)界面沒(méi)有層級關(guān)系，當然個(gè)人認為這不是很重要，就算是放一個(gè)返回按鈕，用戶(hù)也完全能夠理解的。輸入框采用左邊固定標簽，輸入域在右邊的設計，

因為空間足夠，不需要整合輸入域和標簽，在輸入時(shí)去除標簽，這樣感覺(jué)更穩一些[+8]。標簽用淺色(后面會(huì )跟視覺(jué)設計師探討)，輸入正文用深色，以表示主次[+9]，我也想過(guò)標簽默認用深色，等輸入內容時(shí)，再相應變淺，但總覺(jué)得有些花哨，就放棄了。

提交按鈕用大按鈕的形式放在輸入框下方，標簽是“獲取驗證碼”，沒(méi)有用“下一步”是想給用戶(hù)一個(gè)更清晰的預期[+10]，按鈕沒(méi)有放在導航欄右側，因為字太多，放不下了嘛，而且一個(gè)大按鈕也顯得比較清晰[+11]。

原本輸入框里的提示文字“請輸入手機號碼”這句廢話(huà)被我廢了，同時(shí)也重寫(xiě)了用戶(hù)許可協(xié)議的入口引導，也是怎么簡(jiǎn)單怎么寫(xiě)[+12]。

輸入狀態(tài)設計如下：

填寫(xiě)就要呼出鍵盤(pán)，鍵盤(pán)要默認呼出嗎?從操作效率考慮，自動(dòng)呼出比較好，省一步點(diǎn)擊嘛，不過(guò)我做了一個(gè)相反的決定，決定不讓鍵盤(pán)默認彈出，為的是整個(gè)界面眼看上去，足夠簡(jiǎn)單。作為步，這時(shí)我覺(jué)得感官上的簡(jiǎn)單比操作上的簡(jiǎn)單更重要[+13]。因為是手機號碼是數字，所以當然要調用數字鍵盤(pán)[+14]。填寫(xiě)的是電話(huà)號碼，用自動(dòng)分段的顯示方式，如：138 0000 0000，方便用戶(hù)閱讀確認[+15]。

反饋狀態(tài)設計如下：

反饋的規則其實(shí)是從后面的界面往前做的，因為后面的輸入項多，能概括出更適用的規則，所以規則就后面再說(shuō)吧。至于這個(gè)界面反饋的內容，就是對于輸入手機號的值進(jìn)行判斷，正確直接通過(guò)，不做提示(或者說(shuō)界面的跳轉本身就是有效的反饋)，若出錯，分“是否為空”“是否格式正確”“是否已被占用”三種情況對應提示[+16]，行文稍微詼諧一些，作用也是放松情緒[+17]。

三、細節設計，注冊第2步(驗證碼，密碼)

默認狀態(tài)設計如下：

依然很簡(jiǎn)單，先告訴用戶(hù)短信驗證碼已經(jīng)發(fā)送到手機號xxx，特意寫(xiě)多“短信”兩個(gè)字想把事情說(shuō)清楚，這個(gè)有些糾結，貌似以現在用戶(hù)們的app使用經(jīng)驗，把這兩個(gè)字去掉也是ok的[+18]。

在密碼下方有一行說(shuō)明文字“8-20位，不能有空格，純數字的話(huà)要9位以上”，是密碼的輸入規則說(shuō)明，用的是大系統的通行證密碼規則，大系統的規則是這么說(shuō)明的：

我做了兩件事情，精簡(jiǎn)和口語(yǔ)化，特別是“不能是9位以下純數字”，這句話(huà)是典型站在程序員的角度說(shuō)的，而且拗口，所以改成了“純數字的話(huà)要9位以上”，如果你剛好想用純數字做密碼，看，要9位以上哦[+19]。這也會(huì )被用在后面的錯誤反饋里面[+20]。

輸入框的標簽和大按鈕依然延續之前的風(fēng)格。按鈕標簽用“注冊”而不用“下一步”，試圖營(yíng)造一種這就注冊了的感覺(jué)，實(shí)際上也已經(jīng)注冊了[+21]。

輸入狀態(tài)設計如下：

還是不默認呼出鍵盤(pán)，眼不見(jiàn)為凈。

驗證碼當然還是用數字鍵盤(pán)[+22]。

密碼用英文默認鍵盤(pán)[+23]，鍵盤(pán)多了一個(gè)設定，右下角的按鈕，用“GO”，表示且執行“提交”，問(wèn)過(guò)研發(fā)的同學(xué)，盡管是英文鍵盤(pán)，依然可以顯示成中文“前往”的，但考慮到是英文鍵盤(pán)，“前往”可能會(huì )讓人覺(jué)得這是中文鍵盤(pán)，還是GO吧[+24]。

因為密碼只輸入一次，手機的輸入又相對困難，為了更確認自己的密碼輸入，所以索性默認用明文顯示[+25]，我記得亞馬遜kindle和小米盒子設置密碼的時(shí)候也都是默認顯示，輸入麻煩嘛，如果你真的要在大庭廣眾下注冊，輸入框右邊有個(gè)“隱藏”按鈕可以切換[+26]。

反饋狀態(tài)設計如下：

這里可以說(shuō)說(shuō)反饋的規則了。

規則一、出錯的標簽視覺(jué)區分對待(變紅)[+27]。

規則二、按下提交按鈕后再驗證并作出可能的反饋[+28]。

輸入域少，就兩三個(gè)，沒(méi)有定位的大問(wèn)題，在輸入過(guò)程中，切換輸入域的過(guò)程中，所有的正確與否的干擾我都不希望出現。

規則三、徹底解決完一項輸入，再去下一項[+29]。

什么意思呢?多數做法是，提交時(shí)先針對某一類(lèi)問(wèn)題全局檢查一遍，比如是否為空，等都不為空了，再對下一類(lèi)問(wèn)題檢查一遍，比如格式。這樣的結果就是用戶(hù)可能因為一類(lèi)問(wèn)題，填完一遍表單，又因為另一類(lèi)問(wèn)題，從頭到尾來(lái)多一遍，整個(gè)過(guò)程在多個(gè)輸入項之間來(lái)回切換。而我不想讓切換這個(gè)事情導致用戶(hù)焦點(diǎn)來(lái)回，于是，就做了這么一個(gè)決定。先驗證個(gè)輸入域，比如這里的“驗證碼”，一定是驗證碼不為空且正確了，才開(kāi)始提示下一項“密碼”，也就是：

四、細節設計，注冊第3步(基本資料)

默認狀態(tài)設計如下：

三個(gè)控件是輸入框、單選按鈕和時(shí)間選擇器。

昵稱(chēng)作為比較靈活的輸入字段，我們想給用戶(hù)大的自由，也就是“隨便”輸入[+30]，想來(lái)想去，實(shí)在想不出為什么要限制字數什么的，以后用戶(hù)自然會(huì )根據昵稱(chēng)顯示的效果決定改成什么名字。為什么前面的“隨便”要加雙引號，因為不是真的隨便輸入，總不能讓你粘貼一篇文章來(lái)當昵稱(chēng)吧，服務(wù)器還要裝昵稱(chēng)，load昵稱(chēng)出來(lái)還要帶寬，其實(shí)這里默默地限制了100個(gè)漢字/200個(gè)字符，當輸入溢出，輸入框就會(huì )輸入不了。但這一切，對于絕大多數用戶(hù)來(lái)說(shuō)，是透明的[+31]。對了，原版本的提示文字“輸入昵稱(chēng)是為了……”直接廢掉，你會(huì )閱讀這種文字嗎?

性別是單選，一般就是提供兩個(gè)選項(也有3個(gè)的。。。)，為了讓注冊過(guò)程有意思一點(diǎn)點(diǎn)，也好辨認一點(diǎn)點(diǎn)，用圖標代替了文字選項，其實(shí)這里抄了忘記是哪個(gè)應用的[+32]。

生日是呼出時(shí)間選擇控件，貌似沒(méi)什么好考慮的，有看過(guò)用輸入代替選擇的，確實(shí)是不用滾動(dòng)那么麻煩，但看上去復雜，就放棄了[+33]。

后這三個(gè)按鈕都是必填，原版本的設計是，為了高效，默認選擇了性別和生日，用戶(hù)直接填個(gè)昵稱(chēng)，就能提交了，但這樣“必填”就沒(méi)意義了，因為將得到一堆無(wú)意義的性別和生日。于是默認全部不選[+34]。

按鈕標簽是“完成”，因為這是后一步了[+35]。

輸入狀態(tài)設計如下：

昵稱(chēng)是中文鍵盤(pán)，右下角按鈕用中文“完成”，點(diǎn)擊是關(guān)閉鍵盤(pán)[+36]。

性別單擊選擇，這里有一個(gè)運營(yíng)規則，性別以后不能再改了。于是在選擇后有這么一個(gè)動(dòng)態(tài)提示“此后不可更改”出現在右側。為什么默認不顯示，默認顯示界面復雜度多一分，且可能沒(méi)人看[+37]。單擊后以動(dòng)態(tài)的方式出現，從無(wú)到有且帶動(dòng)作，用戶(hù)的眼神就能被吸引過(guò)去[+38]。

反饋狀態(tài)設計如下：

昵稱(chēng)沒(méi)限制，性別和生日的控件又天然限制，所以沒(méi)有出錯提示，只有空值提示，依然采用標簽標紅，從上到下逐個(gè)解決的提示規則，提示設計為[+39]：

因為是后一步，有一個(gè)提交的過(guò)程需要緩緩，于是需要一個(gè)提示[+40]，提示的組成元素用了我們系統的標準元素，就不做解釋?zhuān)胝f(shuō)的是文字，不是“注冊中”，而是用戶(hù)的昵稱(chēng)，讓新用戶(hù)感受一絲關(guān)懷吧[+41]。然后，因為剛才的昵稱(chēng)輸入是沒(méi)有限制的，而我們的標準控件有所限制，所以可能超量溢出，對于太長(cháng)昵稱(chēng)的用戶(hù)，只好省略號啦[+42]，根據我們對存量用戶(hù)的昵稱(chēng)觀(guān)察，這里被省略號的幾率并不高。

四、其他補充

注冊流程還沒(méi)有走完，還差后一步，就是提交后到達哪里[+43]。注冊界面原本設定的觸發(fā)時(shí)刻是“次啟動(dòng)應用呼出”或者“非登錄狀態(tài)使用過(guò)程中呼出”，所以結論是在哪里呼出，注冊后就回到哪里，延續使用場(chǎng)景。

另外，漏講了一件事，所有窗口的轉場(chǎng)動(dòng)畫(huà)(進(jìn)入方式)[+44]。從簡(jiǎn)處理，就是各種橫滑，遵循臨時(shí)窗口上下滑、層級之間左右滑的規律。也就是步的界面從屏幕下方向上覆蓋原界面滑出，第二、三步就從右邊滑進(jìn)來(lái)推走原界面，后提交后，界面向屏幕下方滑出。

另另外，關(guān)于輸入時(shí)鍵盤(pán)遮擋的問(wèn)題也考慮了[+45]，設計時(shí)刻意把內容往屏幕上半部分布局，基本不會(huì )出現鍵盤(pán)遮擋現象。如果萬(wàn)一真的遮擋了，在遮擋時(shí)是允許界面上下滑動(dòng)的，滑動(dòng)時(shí)鍵盤(pán)不隱藏，這一招也只對第二步填密碼或者按注冊按鈕有效，第三步的后兩個(gè)輸入項是單選，完成時(shí)控件早已消失，不可能遮擋。

另另另外，還有兩個(gè)注冊外部界面，但也作為流程的一部分被設計。先是步時(shí)的協(xié)議詳情，臨時(shí)窗口，點(diǎn)擊從下方滑進(jìn)就好[+46]。另外一個(gè)是短信驗證碼的內容，從簡(jiǎn)設計為“[app名稱(chēng)]驗證碼22222，十分鐘有效”，十分鐘的“十”特意使用中文，避免跟前面的驗證碼阿拉伯數字混淆[+47]。

以上就是整個(gè)過(guò)程的全部設計點(diǎn)，設計的時(shí)候當然想過(guò)更多的解決方案，自己一邊發(fā)散一邊收斂，后出來(lái)原型再跟PM過(guò)一遍，再修改，終定稿。

終效果如何，還得持續觀(guān)察，這也不是問(wèn)題的答案，我想說(shuō)的只是，把細節一遍遍打磨，打磨到自然，正是設計的樂(lè )趣所在而已。

http://ezekroy.com/jianzhanzhishi/7790.html 移動(dòng)端交互設計-深圳網(wǎng)站建設