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

“當(dāng)你發(fā)現(xiàn)問(wèn)題時(shí)，你會(huì)發(fā)現(xiàn)它非常簡(jiǎn)單。實(shí)際上，你并不了解它的復(fù)雜性。當(dāng)你弄清楚問(wèn)題時(shí)，你會(huì)發(fā)現(xiàn)它真的很復(fù)雜，所以你會(huì)想出一個(gè)復(fù)雜的計(jì)劃。來(lái)吧。事實(shí)上，你的工作只完成了一半，而且大多數(shù)人都會(huì)在這里停留.但真正偉大的人會(huì)繼續(xù)前進(jìn)，直到他們找到問(wèn)題的關(guān)鍵和根深蒂固的原因，然后想出一個(gè)優(yōu)雅，有效的解決方案?！?- 史蒂夫喬布斯

本文僅描述了為簡(jiǎn)單的三個(gè)接口做出每個(gè)設(shè)計(jì)決策的過(guò)程。

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

設(shè)計(jì)分為兩個(gè)步驟，即信息架構(gòu)設(shè)計(jì)和細(xì)節(jié)設(shè)計(jì)。細(xì)節(jié)設(shè)計(jì)從三個(gè)角度：默認(rèn)狀態(tài)，填充狀態(tài)和反饋狀態(tài)。

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

首先是信息架構(gòu)。

即組織信息，計(jì)劃步驟，枚舉用戶需要輸入的所有信息，然后將其設(shè)置為一個(gè)或多個(gè)步驟以形成整個(gè)注冊(cè)過(guò)程。

首先列出所需信息：[1]

1已驗(yàn)證的手機(jī)（即手機(jī)號(hào)碼，驗(yàn)證碼）

2密碼

3個(gè)昵稱

4性別

5個(gè)生日

原始密碼必須填寫(xiě)兩次。手機(jī)輸入太痛苦，果斷地刪除。

星座是從生日計(jì)算出來(lái)的，在登記過(guò)程中增加了運(yùn)營(yíng)成本，果斷地刪除了。

技術(shù)和操作要求都是必要的信息（即要求）。

下一步是組織這些信息?？赡艿慕M織方法是：[2]

選擇之后：

具體情況如下：

為什么呢？

考慮到用戶操作過(guò)程，我想讓條目足夠簡(jiǎn)單[3]，因此用戶只能看到步驟的一個(gè)要求，輸入電話號(hào)碼以及有關(guān)此目標(biāo)的更多詳細(xì)信息。第二步越來(lái)越難了。第三步相對(duì)困難，從簡(jiǎn)單到復(fù)雜。

那么為什么不一次完成一項(xiàng)任務(wù)，每一步都很簡(jiǎn)單？這將使整個(gè)過(guò)程非常漫長(zhǎng)[4]。我認(rèn)為可以接受適當(dāng)?shù)膹?fù)雜性。這是一個(gè)邪惡的想法。沉沒(méi)成本[5]的原理大致相同，“兄弟已經(jīng)完成了兩個(gè)步驟，然后再邁出一步，無(wú)論如何，只剩下一步了?！边@種心理用途。

細(xì)心的人可能會(huì)問(wèn)，為什么中間步驟是密碼和驗(yàn)證碼，后一步?jīng)]有返回按鈕？實(shí)際上，這是一個(gè)技術(shù)約束[6]。首先，對(duì)于我們的系統(tǒng)，一旦驗(yàn)證了手機(jī)號(hào)碼（如果驗(yàn)證碼正確提交），就不能再使用手機(jī)號(hào)碼了，注冊(cè)后面必須跟密碼，所以驗(yàn)證碼和密碼是在同一行動(dòng)中提交給系統(tǒng)。不能分為兩個(gè)步驟，如果驗(yàn)證碼是單步提交的，也就是說(shuō)，手機(jī)是單獨(dú)驗(yàn)證的，如果中間發(fā)生異常退出，密碼沒(méi)有填寫(xiě)，下次你想要注冊(cè)時(shí)，系統(tǒng)會(huì)提示您手機(jī)已被占用。其次，在第二步完成驗(yàn)證碼和密碼后，注冊(cè)成功。也就是說(shuō)，用戶在第三步中強(qiáng)制退出應(yīng)用程序，并且下次可以用手機(jī)號(hào)碼和密碼登錄。在完成第三步的基本信息后，我仍然會(huì)等他，告訴他沒(méi)有完成。這就是為什么基本信息的第三步?jīng)]有返回修改密碼驗(yàn)證碼的條目，它看起來(lái)很奇怪，但游戲規(guī)則是這樣的，如果你有一個(gè)好方法，記得告訴我。

因此，從用戶操作過(guò)程和系統(tǒng)約束雙線考慮，獲得了這樣的信息架構(gòu)。由于界面內(nèi)容不多，不需要框架，直接輸入詳細(xì)信息。

二，詳細(xì)設(shè)計(jì)，注冊(cè)步驟1（手機(jī)號(hào)碼）

每個(gè)界面都設(shè)計(jì)有三個(gè)默認(rèn)值，即輸入和反饋。界面元素少，處理相對(duì)較好。

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

導(dǎo)航欄左側(cè)的按鈕使用X表示注冊(cè)任務(wù)[+7]的取消，這意味著此界面與之前的界面沒(méi)有層次關(guān)系。當(dāng)然，個(gè)人認(rèn)為這不是很重要，即使放置了一個(gè)返回按鈕，用戶也可以完全理解。的。輸入框左側(cè)有固定標(biāo)簽，輸入欄位于設(shè)計(jì)右側(cè)，

因?yàn)橛凶銐虻目臻g，所以不需要集成輸入字段和標(biāo)簽，并且在輸入時(shí)刪除標(biāo)簽，感覺(jué)更穩(wěn)定[+8]。標(biāo)簽很輕（后來(lái)與視覺(jué)設(shè)計(jì)師討論），輸入文字很暗，表示主要和次要[+9]，我還認(rèn)為標(biāo)簽?zāi)J(rèn)為暗，當(dāng)輸入改變時(shí)，它將是打火機(jī)，但總覺(jué)得有點(diǎn)花哨，我放棄了。

提交按鈕以輸入框下方的大按鈕的形式放置。標(biāo)簽是“獲取驗(yàn)證碼”。如果您不使用“下一步”，則希望為用戶提供更清晰的期望[+10]。該按鈕未放置在導(dǎo)航欄的右側(cè)。因?yàn)橛刑嗟膯卧~，你不能把它放下來(lái)，一個(gè)大按鈕也很明顯[+11]。

在原始輸入框中，我取消了提示文本“請(qǐng)輸入手機(jī)號(hào)碼”，并且我還重寫(xiě)了用戶許可協(xié)議的輸入指南。怎么寫(xiě)呢[+12]。

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

填寫(xiě)鍵盤(pán)，默認(rèn)情況下應(yīng)該調(diào)出鍵盤(pán)？從操作效率的角度來(lái)看，最好自動(dòng)調(diào)出，省一步，但我做出了相反的決定，決定不讓鍵盤(pán)默認(rèn)彈出，以便查看整個(gè)界面。夠簡(jiǎn)單。作為一個(gè)步驟，我覺(jué)得簡(jiǎn)單的感覺(jué)比操作的簡(jiǎn)單性更重要[+13]。由于手機(jī)號(hào)碼是一個(gè)數(shù)字，當(dāng)然，數(shù)字小鍵盤(pán)[+14]被調(diào)用。填寫(xiě)電話號(hào)碼，使用自動(dòng)分段顯示方法，如：138 0000 0000，方便用戶閱讀和確認(rèn)[+15]。

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

反饋規(guī)則實(shí)際上是從后臺(tái)接口制作的，因?yàn)楹竺嬗泻芏噍斎腠?xiàng)，可以總結(jié)更適用的規(guī)則，因此規(guī)則將在后面討論。至于該界面的反饋，是判斷輸入手機(jī)號(hào)碼的值，正確傳遞，不提示（或者界面跳轉(zhuǎn)本身是有效的反饋）。如果是錯(cuò)的，則將其分為“是否為空”。正確的“”已被占用“三個(gè)案例對(duì)應(yīng)提示[+16]，文字略顯詼諧，效果也是放松情緒[+17]。

三，詳細(xì)設(shè)計(jì)，注冊(cè)步驟2（驗(yàn)證碼，密碼）

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

還是很簡(jiǎn)單，首先告訴用戶短信驗(yàn)證碼已被發(fā)送到手機(jī)號(hào)碼xxx，故意寫(xiě)更多“短信”字樣使事情清楚，這有點(diǎn)糾結(jié)，看起來(lái)像當(dāng)前用戶的應(yīng)用體驗(yàn)，把這些兩個(gè)Word刪除也沒(méi)關(guān)系[+18]。

密碼下方有一行表示文本“8-20位，無(wú)空格，純數(shù)字9位或更多”，這是密碼的輸入規(guī)則描述。使用大型系統(tǒng)的密碼。大系統(tǒng)的規(guī)則如下。

我做了兩件事，精簡(jiǎn)和口語(yǔ)，特別是“不能是9位以下的純數(shù)字”。這個(gè)句子從程序員的角度來(lái)看是典型的，它是痰，因此它被改為“純數(shù)字”。 9或更多“，如果您只想使用純數(shù)字作為密碼，看，您需要9個(gè)或更多[+19]。這也將用于錯(cuò)誤反饋[+20]。

輸入框的標(biāo)簽和大按鈕繼續(xù)以前的樣式。按鈕標(biāo)簽使用“注冊(cè)”而不是“下一步”，試圖創(chuàng)建一種注冊(cè)的感覺(jué)，并且實(shí)際上已經(jīng)注冊(cè)了[+21]。

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

默認(rèn)情況下仍然沒(méi)有調(diào)出鍵盤(pán)，眼睛看不到網(wǎng)。

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

密碼為英文默認(rèn)鍵盤(pán)[+23]，鍵盤(pán)有另外一個(gè)設(shè)置，右下角有按鈕，“GO”用于指示和執(zhí)行“提交”。要求研發(fā)的學(xué)生雖然是英文鍵盤(pán)，仍然可以用中文顯示。 “走了”，但考慮到英文鍵盤(pán)，“走”可能會(huì)讓人覺(jué)得這是一個(gè)中文鍵盤(pán)，或GO [+24]。

由于密碼只輸入一次，因此手機(jī)的輸入相對(duì)較難。為了確認(rèn)密碼輸入，默認(rèn)以純文本[+25]顯示。我記得輸入密碼時(shí)默認(rèn)情況下也會(huì)顯示亞馬遜Kindle和小米盒子。麻煩，如果你真的想在公眾面前注冊(cè)，輸入框右側(cè)有一個(gè)“隱藏”按鈕可以切換[+26]。

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

在這里，您可以討論反饋規(guī)則。

規(guī)則1.視覺(jué)處理錯(cuò)誤的標(biāo)簽（變紅）[+ 27]。

規(guī)則2，按下提交按鈕[+28]后驗(yàn)證并提供反饋。

輸入字段很少，有兩三個(gè)，沒(méi)有大的定位問(wèn)題。在輸入過(guò)程中，在輸入過(guò)程中，不期望所有正確或非干擾。

規(guī)則3，完全解決輸入，然后轉(zhuǎn)到下一個(gè)項(xiàng)目[+29]。

你什么意思？大部分做法是首先檢查某種類型問(wèn)題的全局問(wèn)題，例如是否為空，然后檢查下一類問(wèn)題，例如格式。結(jié)果是用戶可以為一種類型的問(wèn)題填寫(xiě)表單，并且由于另一種類型的問(wèn)題，它從開(kāi)始到結(jié)束，并且整個(gè)過(guò)程在多個(gè)輸入之間來(lái)回切換。而且我不想切換這個(gè)東西讓用戶來(lái)回聚焦，所以我做出了這樣的決定。首先驗(yàn)證輸入字段，例如此處的“驗(yàn)證碼”，必須是驗(yàn)證碼不為空且正確，然后啟動(dòng)下一個(gè)“密碼”，即：

四，詳細(xì)設(shè)計(jì)，注冊(cè)步驟3（基本信息）

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

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

昵稱作為一個(gè)更靈活的輸入字段，我們希望給用戶一個(gè)很大的自由，就是“只是”輸入[+ 30]，想一想，我真的想不出為什么會(huì)限制字?jǐn)?shù)，在以后的用戶中將根據(jù)昵稱自然顯示效果決定要更改的名稱。你為什么要在你面前添加雙引號(hào)，因?yàn)檩斎肫饋?lái)并不容易，你不能讓你把文章粘貼成昵稱，服務(wù)器必須被昵稱，加載昵稱和帶寬，事實(shí)上，這是默默無(wú)限的。 100個(gè)漢字/200個(gè)字符，當(dāng)輸入溢出時(shí)，不輸入輸入框。但對(duì)絕大多數(shù)用戶來(lái)說(shuō)，這一切都是透明的[+31]。順便說(shuō)一句，直接廢除提示文本“輸入昵稱是.”的原始版本，你會(huì)看到這個(gè)文本嗎？

性別是一個(gè)單一的選擇，一般是提供兩個(gè)選項(xiàng)（也有三個(gè).），為了使注冊(cè)過(guò)程有點(diǎn)有趣，還要識(shí)別一點(diǎn)，用圖標(biāo)替換文本選項(xiàng)，實(shí)際上，復(fù)制到這里忘記哪個(gè)應(yīng)用程序[+32]。

生日是呼氣時(shí)間選擇控制。似乎沒(méi)有什么可考慮的。我已經(jīng)看到使用輸入而不是選擇。沒(méi)有滾動(dòng)它真的很麻煩，但它看起來(lái)很復(fù)雜，我放棄了[+33]。

在需要三個(gè)按鈕之后，設(shè)計(jì)的原始版本是，為了高效，默認(rèn)選擇性別和生日，用戶可以直接提交昵稱，你可以提交，但這個(gè)“必需”是沒(méi)有意義的，因?yàn)閷@得一堆毫無(wú)意義的性別和生日。因此未選擇默認(rèn)值[+34]。

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

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

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

性別點(diǎn)擊選擇，這里有一個(gè)操作規(guī)則，以后不能更改性別。因此，在選擇之后，右側(cè)會(huì)出現(xiàn)“此后無(wú)法更改”的動(dòng)態(tài)提示。為什么不默認(rèn)顯示，默認(rèn)的顯示界面復(fù)雜性是一個(gè)點(diǎn)，可能看不到[+37]。點(diǎn)擊后，它會(huì)以動(dòng)態(tài)方式顯示，從頭開(kāi)始，通過(guò)動(dòng)作，用戶的眼睛可以被吸引到過(guò)去[+38]。

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

昵稱不限，性別和生日控件自然是有限的，所以沒(méi)有錯(cuò)誤提示，只有空值提示，仍然使用標(biāo)簽紅色，從上到下，提示規(guī)則逐一解決，提示設(shè)計(jì)是[+39]：

因?yàn)檫@是后一步驟，所以提交的過(guò)程需要很慢，因此需要提示[+40]。提示的組成元素使用我們系統(tǒng)的標(biāo)準(zhǔn)元素，所以我不解釋它。我想說(shuō)的是文字，而不是注冊(cè)。 “，但用戶的昵稱，讓新用戶感到有點(diǎn)小心[+41]。然后，由于昵稱輸入不受限制，而且我們的標(biāo)準(zhǔn)控件有限，它可能會(huì)過(guò)度溢出。對(duì)于昵稱太長(zhǎng)的用戶，根據(jù)我們對(duì)股票用戶的昵稱，他們必須省略[+42]。這里省略的可能性不高。

第四，其他補(bǔ)充

注冊(cè)過(guò)程尚未完成，一步之后是在提交后到達(dá)的地方[+43]。最初由注冊(cè)界面設(shè)置的觸發(fā)時(shí)間是“時(shí)間匯海應(yīng)用程序標(biāo)注”或“使用期間非登錄狀態(tài)調(diào)出”，因此結(jié)論是在何處調(diào)用，在注冊(cè)后返回的位置，并繼續(xù)使用場(chǎng)景。

另外，我錯(cuò)過(guò)了一件事，即所有窗口的轉(zhuǎn)換動(dòng)畫(huà)（輸入模式）[+44]。簡(jiǎn)單處理是各種水平滑動(dòng)，遵循滑動(dòng)臨時(shí)窗口和層間滑動(dòng)的規(guī)律。也就是說(shuō)，步進(jìn)界面從屏幕底部滑出以覆蓋原始界面，第二步和第三步從右側(cè)滑入以推開(kāi)原始界面，提交后，界面滑出底部的屏幕。

另外，輸入期間鍵盤(pán)遮擋的問(wèn)題也被認(rèn)為是[+45]，設(shè)計(jì)時(shí)刻旨在將內(nèi)容放置在屏幕的上部，并且基本上沒(méi)有鍵盤(pán)遮擋。如果它確實(shí)被阻止，它將允許界面在遮擋期間上下滑動(dòng)。滑動(dòng)時(shí)不會(huì)隱藏鍵盤(pán)。這僅適用于第二步或按注冊(cè)按鈕。第三步的最后兩個(gè)條目。這是一個(gè)選擇。完成后，控件消失，無(wú)法阻止。

此外，還有兩個(gè)已注冊(cè)的外部接口，但它們也是作為流程的一部分設(shè)計(jì)的。首先，步驟的協(xié)議細(xì)節(jié)，臨時(shí)窗口，點(diǎn)擊從下面滑入[+46]。另一個(gè)是短信驗(yàn)證碼的內(nèi)容，設(shè)計(jì)為“[app name]驗(yàn)證碼22222，有效期十分鐘”，十分鐘“十”故意使用中文以避免與以前的驗(yàn)證碼混淆阿拉伯?dāng)?shù)字[47]。

以上是整個(gè)過(guò)程的整個(gè)設(shè)計(jì)要點(diǎn)。當(dāng)然，我在設(shè)計(jì)時(shí)想到了更多的解決方案。我會(huì)在分歧的同時(shí)收斂，然后再與PM一起出現(xiàn)原型，然后修改并最終確定草稿。

最后的效果，它必須繼續(xù)觀察，這不是問(wèn)題的答案，我想說(shuō)的是細(xì)節(jié)一遍又一遍地磨光，拋光到自然，這是設(shè)計(jì)的樂(lè)趣。