iOS中註冊功能的體驗探究

一般，移動App的註冊功能一般採用手機號碼註冊或者郵箱賬號註冊。

不過在國內這樣隱私堪憂的環境下，須要手機號來註冊會流失很多用戶。即使是新浪微博這樣的應用，須要綁定手機號也令我不信任。除非是像淘寶、支付寶這樣須要手機號來提升安全等級的服務，才能弱化用戶的心理障礙。

首先，看下手機號碼註冊。

   （註冊湖畔）

對於手機號碼輸入框，咱們固然要默認使用UIKeyboardTypeNumberPad類型鍵盤。不過對於越獄用戶，若是裝了其它輸入法，則有可能使用其它類型鍵盤輸入非數字字符。對此，咱們在客戶端最好進行過濾和檢查。由於客戶端若是發送了包含非數字字符的電話號碼給服務端進行校驗，是沒有意義且浪費流量的。

在用戶的輸入過程當中，咱們能夠經過代理方法來判斷輸入是否合法，從而進一步決定是否接受輸入。

下面是示例代碼片斷：

[cpp] view plaincopy

1. - (BOOL)textField:(UITextField *)textField shouldChangeCharactersInRange:(NSRange)range replacementString:(NSString *)string  

2. {  

3.     return [ValidationHelper validateNumeric:string];  

4. }  

5. ...  

6. + (BOOL)validateNumeric:(NSString *)str2validate  

7. {  

8.     NSCharacterSet *charSet = [[NSCharacterSet characterSetWithCharactersInString:@"0123456789"] invertedSet];  

9.     NSRange range = [str2validate rangeOfCharacterFromSet:charSet];  

10.     return (range.location == NSNotFound) ? YES : NO;  

11. }  

上面只是部分代碼示例，好比還缺乏判斷是否爲退格鍵、對輸入框長度進行限制。

同時，爲了對用戶更友好，咱們能夠對電話號碼進行格式化。好比 採用相似+86 137-5555-6666的格式，或者省略+86。這樣可讓用戶在輸入過程當中清楚地知道本身輸入了多少位數字、輸入了哪些數字，不至於擔憂輸錯號碼或 者多一位、少一位。從這個角度看，對輸入框長度進行必定限制，也是對用戶稍微友好的。

對於獲取驗證碼，這裏是由客戶端來作頻率限制。此處有一個細節：當點擊「獲取驗證碼」按鈕後，焦點應該放在驗證碼輸入框，由於用戶的下一步動做就是輸入驗證碼。我我的比較注意這樣的細節，好比瀏覽器新開一個tab，焦點是否放在地址欄；好比我在羣裏點擊搜索按鈕要搜索羣用戶，搜索框是否處於激活狀態供用戶輸入。這些都是爲用戶，或者說做爲用戶，考慮的細節體驗。我給阿里旺旺和淘寶瀏覽器提過這方面的建議。

除了在用戶輸入過程當中對非法字符進行過濾，提交給服務端時也要再檢查一次。

用戶的任何輸入都是不可信的數據，一樣地，服務端對於客戶端提交的任何數據也要再檢查一次，無論客戶端是否已經檢查過。

好比在提交時，至少要檢查下驗證碼是否爲空。若是爲空，要不要彈窗呢？我以爲沒有必要用UIAlertView來給用戶提示，有點重！在這裏，我採用的是抖動提示，用戶一看就明瞭。

[cpp] view plaincopy

1. //TextField的晃動:Begin  

2. @interface UITextField(shake)  

3.   

4. - (void)shake;  

5.   

6. @end  

7.   

8. @implementation UITextField(shake)  

9.   

10. - (void)shake  

11. {  

12.     CAKeyframeAnimation *animationKey = [CAKeyframeAnimationanimationWithKeyPath:@"position"];  

13.     [animationKey setDuration:0.5f];  

14.       

15.     NSArray *array = [[NSArrayalloc] initWithObjects:  

16.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x, self.center.y)],  

17.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x-5, self.center.y)],  

18.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x+5, self.center.y)],  

19.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x, self.center.y)],  

20.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x-5, self.center.y)],  

21.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x+5, self.center.y)],  

22.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x, self.center.y)],  

23.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x-5, self.center.y)],  

24.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x+5, self.center.y)],  

25.                       [NSValuevalueWithCGPoint:CGPointMake(self.center.x, self.center.y)],  

26.                       nil];  

27.     [animationKey setValues:array];  

28.     [array release];  

29.       

30.     NSArray *times = [[NSArrayalloc] initWithObjects:  

31.                       [NSNumbernumberWithFloat:0.1f],  

32.                       [NSNumbernumberWithFloat:0.2f],  

33.                       [NSNumbernumberWithFloat:0.3f],  

34.                       [NSNumbernumberWithFloat:0.4f],  

35.                       [NSNumbernumberWithFloat:0.5f],  

36.                       [NSNumbernumberWithFloat:0.6f],  

37.                       [NSNumbernumberWithFloat:0.7f],  

38.                       [NSNumbernumberWithFloat:0.8f],  

39.                       [NSNumbernumberWithFloat:0.9f],  

40.                       [NSNumbernumberWithFloat:1.0f],  

41.                       nil];  

42.     [animationKey setKeyTimes:times];  

43.     [times release];  

44.       

45.     [self.layeraddAnimation:animationKey forKey:@"TextFieldShake"];  

46. }  

47.   

48. @end  

49. //TextField的晃動:End  

上述代碼來源於互聯網，應該是StackOverflow吧？忘記了。

   （註冊微信）

上面討論到經過客戶端來對驗證碼請求頻率作限制，除此以外，還能夠經過服務端來作限制。

微信應該就是經過服務端來作限制的，由於我殺掉進程等了很久，而後從新嘗試註冊，還一直提示我「發送請求太快，稍後再試」，嘗試了好幾回都是這樣的提示，感受體驗很差。我Google了一下這個提示，發現有很多用戶有相同困惑。

Server端永遠不要信任Client端（包括Browser）的數據。但如微信這樣的產品，在註冊獲取驗證碼環節上，對交互的把握，仍然會讓用戶以爲不爽。

因此，在驗證碼獲取上，我我的傾向客戶端控制或者C/S結合。由於至少客戶端控制能夠讓用戶有個心理預期，好比60秒的時間。而像微信這樣，我根本不知道「休息一下」是休息多久！我嘗試了1分鐘、5分鐘甚至10分鐘後再次操做過，仍是遇到這個提示。

除此以外，還有一些我我的認爲的不足之處：

• 手機號碼沒有作長度限制。或許各個國家號碼長度不一，但如上圖，未免也太長了吧？並且微信的大多數用戶都來自大陸，徹底能夠爲「+86」的用戶作下體驗優化。我認爲服務了80%用戶的功能是十分有價值的。

• 驗證碼長度沒有限制。若是說電話號碼長度不可控，那麼驗證碼的長度應該是可控的吧？這個「休息一下，稍後再試」的提示在獲取驗證碼時會有，再校驗驗證碼時也會有！有點煩。若是說控制獲取驗證碼頻率能夠節約短信費用，那麼校驗驗證碼的頻率控制又是爲什麼？

• 驗證碼連基本判空都沒有。我沒有輸入驗證碼，直接點擊下一步，獲得如上「驗證碼不正確」的彈窗提示。若是說發生了服務端驗證，那不該該把空串交給服務端驗證；若是說客戶端驗證通不過，那提示有點冗餘，並且不精準。

 （短信註冊新浪微博）

若是說控制驗證碼發送頻率是節能環保省錢的考慮，那麼新浪微博直接把這個問題交給用戶了。

說實話，當我看到這個webview加載出來的內容時，一股有 關部門氣息迎面撲來。何時，在（大陸）互聯網應用上註冊賬號還要花錢了？雖然只是一毛錢短信費用。但就這一毛錢，也能夠感覺到新浪微博並無足夠爲用 戶考慮。（固然，這裏要強調下，應該支持正版，要有消費服務的意識。插曲。)

尤爲是，這個接收號碼還這麼長，足足12位！

就很少吐槽了。

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

再看看郵箱賬號註冊。

 （註冊湖畔）

郵箱註冊過程當中可關注的兩個基本點是：

• 鍵盤應設置爲UIKeyboardTypeEmailAddress類型。

• 對郵箱格式進行檢查。

下面是一段檢查郵箱的示例代碼：

[cpp] view plaincopy

1. + (BOOL)validateEmail:(NSString *)str2validate  

2. {  

3.     NSString *emailRegex = @"[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\\.[A-Za-z]{2,4}";  

4.     NSPredicate *emailPredicate = [NSPredicatepredicateWithFormat:@"SELF MATCHES %@", emailRegex];  

5.       

6.     return [emailPredicate evaluateWithObject:str2validate];  

7. }  

  （註冊知乎）

我在以前說過知乎的登陸模塊在剛開始的時候也沒有爲郵箱輸入框設置UIKeyboardTypeEmailAddress類型鍵盤，從註冊界面咱們也能夠發現知乎改了登陸界面，不過漏了這裏。

或者，是故意地？

那麼，不妨再比較一下默認中文鍵盤和郵箱鍵盤，仍然能夠發如今這個註冊流程中，仍是郵箱鍵盤更方便。

 （註冊新浪微博）

新浪微博的郵箱註冊界面仍然是一個webview，而且從加載出來的頁面仍然能夠感覺到：新浪微博並不怎麼爲用戶考慮！

爲何？

先不說那張驗證碼，就看下面兩點：

• 須要用戶點擊按鈕來發送激活郵件。當用戶註冊成功了爲何不自動發激活郵件呢？這讓我想起前幾天我第一次在萬達官網上買電影票的經歷，我輸入了打折卡號和密碼，網頁上已經顯示出折扣價了，因而我就繼續支付，結果沒有打折！！！由於我沒有點擊折扣價附近的「使用」按鈕。那時候折扣價是紅色字體突出的，吸引了個人注意力，並且我之前在其它網站買電影票都很順利，有點大意。不過，若是真心爲用戶考慮，折扣價都已經算出來了，說明打折卡有效，爲何不默認使用呢！？過後，我打了好多個電話要投訴，都沒人接。幸好那次只能省10塊錢。

• 須要查收激活郵件進行激活，才能登陸。這點簡直沒有點移動App的意識嘛！我用手機註冊，你還要我去郵箱查收激活郵件！？且不說你這是否是把手機當PC，就這注冊流程，徹底被一封激活郵件打斷了！

簡短吐槽。結束。