iOS中登錄功能的體驗探究

登錄功能是我在​​湖畔​​做的第一個需求。

當時PD给我的草圖和下圖類似：

（圖片來自知乎iOS客戶端登錄界面） 

不過需求中要求用戶名或者密碼錯誤時，輸入框要抖動（類似Mac登錄密碼錯誤的抖動效果）。

如果實現上圖的UI布局，那麼輸入框抖動是上下單元格獨立抖動還是整體抖動？

• 獨立抖動：會出現上下單元格邊界不齊的斷裂效果，破壞美感。
• 整體抖動：只是用戶名錯誤，密碼框为什麼抖動？给用戶的提示不清晰。

我個人不希望给用戶不友好的信息，所以我做成了下面的效果：

由於我做的效果和PD想要的不一致，所以還產生了一番討論。

为此，不得不向PD普及一下網站登錄檢查的基本流程，讓他知道會先檢查用戶名是否存在，才會進一步判斷用戶名和密碼是否匹配。

我是以前寫過一段時間PHP做網站，自然而然就這麼想了。那麼，PD同學不了解相關知識，是否可以理解呢？

突然有疑惑，一畢業就在互聯網行業當產品經理的同學，大多是什麼專業畢業，應該具備哪些專業背景呢？我個人認为核心素質之一是站在用戶的角度思考問題。​​這裏​​是知乎的一份討論。

最後，PD同學在被服務器端同學鄙視了一下的情況下，也贊同了該方案。

在這個模塊中，主要涉及到​​UITextField​​​以及一些​​用戶輸入交互特性​​。

以用戶名輸入框为例，上面兩張登錄圖都可以輸入Email，那麼此時的鍵盤應該呈什麼布局呢？

不妨看下幾個客戶端的登錄界面：

 （湖畔iOS版登錄界面）

剛開始做登錄模塊時，我將鍵盤設置为UIKeyboardTypeEmailAddress類型，不過後來PD一直強調要改回英文鍵盤（即UIKeyboardTypeAlphabet類型）。因为對於中文用戶來說，EmailAddress類型鍵盤默認是中文的，輸入過程中會有中文提示產生，如下面第二張知乎截圖。

不過我們來認真探究下用戶的輸入體驗，以[email protected]为例：

• UIKeyboardTypeAlphabet：用戶在輸入點號或者@符號時需要進行鍵盤切換，所以在輸入上述郵箱時一共要切換6次鍵盤類型。
• UIKeyboardTypeEmailAddress：看起來在輸入過程中會產生中文字符，不過該類型的鍵盤布局包含了 @ 符號和 . 圓點符號。當輸入@符號或者點號時，用戶輸入的所有字符會作为英文字母放進輸入框中，只需要在最後敲一下“確認”鍵。

所以，就我個人的體驗來說，我認为是UIKeyboardTypeEmailAddress類型是更友好的。

 （知乎iOS版登錄界面）

當我为湖畔用戶名輸入框設置为UIKeyboardTypeEmailAddress類型時，我特地看了下知乎登錄界面的用戶名輸入框，那時候知乎采用的是UIKeyboardTypeAlphabet類型。當時我沾沾自喜了下，沒想到現在顛倒過來。誰在進步，誰在退步？

（新浪微博iOS版登錄界面）

新浪微博的鍵盤默認也是UIKeyboardTypeEmailAddress類型的，更進一步說明了問題。

其實，蘋果本身特地提供了UIKeyboardTypeEmailAddress類型鍵盤就很說明問題了。

 （微信iOS版）

微信一直廣受好評，尤其是最近關於“張小龍”、“微信”、“產品”的熱門詞匯（​​1​​​，​​2​​​，​​3​​），更是將其擁上了另一個高台。

不過，就我淺薄的認知，我認为上面兩張微信截圖的鍵盤布局都應該是UIKeyboardTypeAlphabet類型的。

首先看“修改微信號”界面。微信號只能包含字母、數字、下劃線和減號，那麼設置UIKeyboardTypeEmailAddress鍵盤類型並沒有为用戶提供便利，且由於上面提過的默認中文鍵盤問題，用戶在輸入過程中會有中文字符產生，相較於流暢的純英文輸入，會有“阻礙感”和“不爽感”。我個人覺得這是正常的用戶心理，當然，也有可能我不是正常的用戶？

另外，登錄界面就多了QQ號和手機號兩種账號類型，且都是純數字的，所以這裏的帳號約等於微信號。那麼，這裏的鍵盤布局为什麼和“修改微信號”的鍵盤布局不一致，使用默認的中文鍵盤呢？

所以，我個人認为，在這兩個界面中，中文鍵盤對用戶來說都是一種阻礙，應該設置为UIKeyboardTypeAlphabet類型。

騰訊是很追求產品細節和用戶體驗的，微信更是騰訊產品中的佼佼者，为何會存在這样的細節問題？或者是由於我視野太局限，看不懂？

 （QQ登錄界面）

QQ的新界面還是令人耳目一新，頗有檔次的。而鍵盤布局也沒什麼特別好說的，就是純數字。

--------------------------------------------------

除了​​鍵盤類型​​的使用：_usernameText.keyboardType = UIKeyboardTypeAlphabet;，UITextField還涉及了其它一些細節處理：

• 設置邊框類型：[_usernameText setBorderStyle:UITextBorderStyleRoundedRect];。關於邊框類型，​​這裏​​有詳細說明。
• 設置默認文案：_usernameText.placeholder = TEXT_LOGIN_NAME_PLACEHOLDER;，给用戶友好提示。
• 設置控件內容的對齊方式：_usernameText.contentVerticalAlignment = UIControlContentVerticalAlignmentCenter;，​​這裏​​有詳細說明。
• 設置首字符是否默認大寫：_usernameText.autocapitalizationType = UITextAutocapitalizationTypeNone;。
• 設置是否開启糾錯提醒：_usernameText.autocorrectionType = UITextAutocorrectionTypeNo;。
• 設置何時提供clear按鈕：_usernameText.clearButtonMode = UITextFieldViewModeWhileEditing;，​​這裏​​有相關說明。
• 設置成为焦點：[_usernameText becomeFirstResponder];。當界面中除了輸入框和登錄按鈕外，最好一開始就讓輸入框成为響應者，好讓鍵盤遮掉空白部分。
• 設置是否密文顯示：_userpwdText.secureTextEntry = YES;。如果是密碼輸入框，當然要了。
• 設置回車鍵類型：_usernameText.returnKeyType = UIReturnKeyNext;，​​這裏​​有更多說明。通常，輸入完用戶名，我們還需要輸入密碼，所以設置为UIReturnKeyNext類型；而輸入完密碼，就完成輸入要進行登錄了，所以要設置为UIReturnKeyDone類型。

最後，我們還要設置代理：_usernameText.delegate = self;。

通過代理方法，我們可以進行更多的控制，比如：

• - (BOOL)textFieldShouldReturn:(UITextField *)textField：響應回車鍵處理。
• - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string：做一些過滤處理。比如SO上有一份​​關於退格鍵檢測的討論​​。

更多可参見​​官方文檔​​。