6個(gè)輸入框 。47個(gè)設(shè)計(jì)點(diǎn)

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

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

設(shè)計(jì)任務(wù)是對(duì)以下注冊(cè)過(guò)程的優(yōu)化。目標(biāo)是降低注冊(cè)門檻。讓過(guò)程高效。平臺(tái)為iOS。

設(shè)計(jì)分兩步走。分別是信息架構(gòu)設(shè)計(jì)和細(xì)節(jié)設(shè)計(jì)。細(xì)節(jié)再?gòu)哪J(rèn)狀態(tài)、填寫狀態(tài)、反饋狀態(tài)三個(gè)角度進(jìn)行設(shè)計(jì)。

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

一、信息架構(gòu)。

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

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

1 通過(guò)驗(yàn)證的手機(jī)(也就是手機(jī)號(hào)、驗(yàn)證碼)

2 密碼

3 昵稱

4 性別

5 生日

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

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

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

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

后選擇了這個(gè)：

具體是這樣：

為什么呢?

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

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

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

于是。從用戶操作流程和系統(tǒng)約束雙線考慮。得到了這么一個(gè)信息架構(gòu)。因?yàn)榻缑鎯?nèi)容不多。無(wú)需框架。直接進(jìn)入細(xì)節(jié)設(shè)計(jì)。

二、細(xì)節(jié)設(shè)計(jì)。注冊(cè)第1步(手機(jī)號(hào))

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

默認(rèn)狀態(tài)設(shè)計(jì)如下：

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

因?yàn)榭臻g足夠。不需要整合輸入域和標(biāo)簽。在輸入時(shí)去除標(biāo)簽。這樣感覺(jué)更穩(wěn)一些[+8]。標(biāo)簽用淺色(后面會(huì)跟視覺(jué)設(shè)計(jì)師探討)。輸入正文用深色。以表示主次[+9]。我也想過(guò)標(biāo)簽?zāi)J(rèn)用深色。等輸入內(nèi)容時(shí)。再相應(yīng)變淺。但總覺(jué)得有些花哨。就放棄了。

提交按鈕用大按鈕的形式放在輸入框下方。標(biāo)簽是“獲取驗(yàn)證碼”。沒(méi)有用“下一步”是想給用戶一個(gè)更清晰的預(yù)期[+10]。按鈕沒(méi)有放在導(dǎo)航欄右側(cè)。因?yàn)樽痔?。放不下了嘛。而且一個(gè)大按鈕也顯得比較清晰[+11]。

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

輸入狀態(tài)設(shè)計(jì)如下：

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

反饋狀態(tài)設(shè)計(jì)如下：

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

三、細(xì)節(jié)設(shè)計(jì)。注冊(cè)第2步(驗(yàn)證碼。密碼)

默認(rèn)狀態(tài)設(shè)計(jì)如下：

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

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

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

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

輸入狀態(tài)設(shè)計(jì)如下：

還是不默認(rèn)呼出鍵盤。眼不見(jiàn)為凈。

驗(yàn)證碼當(dāng)然還是用數(shù)字鍵盤[+22]。

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

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

反饋狀態(tài)設(shè)計(jì)如下：

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

規(guī)則一、出錯(cuò)的標(biāo)簽視覺(jué)區(qū)分對(duì)待(變紅)[+27]。

規(guī)則二、按下提交按鈕后再驗(yàn)證并作出可能的反饋[+28]。

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

規(guī)則三、徹底解決完一項(xiàng)輸入。再去下一項(xiàng)[+29]。

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

四、細(xì)節(jié)設(shè)計(jì)。注冊(cè)第3步(基本資料)

默認(rèn)狀態(tài)設(shè)計(jì)如下：

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

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

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

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

后這三個(gè)按鈕都是必填。原版本的設(shè)計(jì)是。為了高效。默認(rèn)選擇了性別和生日。用戶直接填個(gè)昵稱。就能提交了。但這樣“必填”就沒(méi)意義了。因?yàn)閷⒌玫揭欢褵o(wú)意義的性別和生日。于是默認(rèn)全部不選[+34]。

按鈕標(biāo)簽是“完成”。因?yàn)檫@是后一步了[+35]。

輸入狀態(tài)設(shè)計(jì)如下：

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

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

反饋狀態(tài)設(shè)計(jì)如下：

昵稱沒(méi)限制。性別和生日的控件又天然限制。所以沒(méi)有出錯(cuò)提示。只有空值提示。依然采用標(biāo)簽標(biāo)紅。從上到下逐個(gè)解決的提示規(guī)則。提示設(shè)計(jì)為[+39]：

因?yàn)槭呛笠徊健Ｓ幸粋€(gè)提交的過(guò)程需要緩緩。于是需要一個(gè)提示[+40]。提示的組成元素用了我們系統(tǒng)的標(biāo)準(zhǔn)元素。就不做解釋。想說(shuō)的是文字。不是“注冊(cè)中”。而是用戶的昵稱。讓新用戶感受一絲關(guān)懷吧[+41]。然后。因?yàn)閯偛诺年欠Q輸入是沒(méi)有限制的。而我們的標(biāo)準(zhǔn)控件有所限制。所以可能超量溢出。對(duì)于太長(zhǎng)昵稱的用戶。只好省略號(hào)啦[+42]。根據(jù)我們對(duì)存量用戶的昵稱觀察。這里被省略號(hào)的幾率并不高。

四、其他補(bǔ)充

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

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

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

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

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

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

本文標(biāo)題：移動(dòng)端交互設(shè)計(jì)-網(wǎng)站建設(shè)
文章URL：http://jinyejixie.com/news41/293291.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供微信小程序、App開(kāi)發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站維護(hù)、品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)