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

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

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

設(shè)計(jì)任務(wù)是優(yōu)化以下注冊過程，目標(biāo)是降低注冊門檻，使過程高效，平臺(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)。

以下是該過程的描述：

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

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

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

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

2密碼

3個(gè)昵稱

4性別

5個(gè)生日

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

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

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

下一步是組織這些信息。可能的組織方法是：[2]

選擇之后：

具體情況如下：

為什么呢？

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

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

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

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

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

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

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

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

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

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

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

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

填寫鍵盤，默認(rèn)情況下應(yīng)該調(diào)出鍵盤？從操作效率的角度來看，最好自動(dòng)調(diào)出，省一步，但我做出了相反的決定，決定不讓鍵盤默認(rèn)彈出，以便查看整個(gè)界面。夠簡單。作為一個(gè)步驟，我覺得簡單的感覺比操作的簡單性更重要[+13]。由于手機(jī)號(hào)碼是一個(gè)數(shù)字，當(dāng)然，數(shù)字小鍵盤[+14]被調(diào)用。填寫電話號(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ì)，注冊步驟2（驗(yàn)證碼，密碼）

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

第四，其他補(bǔ)充

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

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

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

此外，還有兩個(gè)已注冊的外部接口，但它們也是作為流程的一部分設(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è)過程的整個(gè)設(shè)計(jì)要點(diǎn)。當(dāng)然，我在設(shè)計(jì)時(shí)想到了更多的解決方案。我會(huì)在分歧的同時(shí)收斂，然后再與PM一起出現(xiàn)原型，然后修改并最終確定草稿。

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