iOS中登錄功能的體驗探究

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


 

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

(圖片來自知乎iOS客戶端登錄界面) 

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

 

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

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

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


 

扫描二维码关注公众号,回复: 664392 查看本文章

由於我做的效果和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版)

微信一直廣受好評,尤其是最近關於“張小龍”、“微信”、“產品”的熱門詞匯(123),更是將其擁上了另一個高台。

不過,就我淺薄的認知,我認为上面兩張微信截圖的鍵盤布局都應該是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上有一份關於退格鍵檢測的討論

更多可参見官方文檔

猜你喜欢

转载自duchengjiu.iteye.com/blog/1898181