iOS中登录功能的体验探究

登录功能是我在湖畔做的第一个需求。

当时PD给我的草图和下图类似:

(图片来自知乎iOS客户端登录界面) 

不过需求中要求用户名或者密码错误时,输入框要抖动(类似Mac登录密码错误的抖动效果)。

如果实现上图的UI布局,那么输入框抖动是上下单元格独立抖动还是整体抖动?

  • 独立抖动:会出现上下单元格边界不齐的断裂效果,破坏美感。
  • 整体抖动:只是用户名错误,密码框为什么抖动?给用户的提示不清晰。

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

由于我做的效果和PD想要的不一致,所以还产生了一番讨论。

为此,不得不向PD普及一下网站登录检查的基本流程,让他知道会先检查用户名是否存在,才会进一步判断用户名和密码是否匹配。

我是以前写过一段时间PHP做网站,自然而然就这么想了。那么,PD同学不了解相关知识,是否可以理解呢?

突然有疑惑,一毕业就在互联网行业当产品经理的同学,大多是什么专业毕业,应该具备哪些专业背景呢?我个人认为核心素质之一是站在用户的角度思考问题。这里是知乎的一份讨论。

最后,PD同学在被服务器端同学鄙视了一下的情况下,也赞同了该方案。

在这个模块中,主要涉及到UITextField以及一些用户输入交互特性

以用户名输入框为例,上面两张登录图都可以输入Email,那么此时的键盘应该呈什么布局呢?

不妨看下几个客户端的登录界面:

  (湖畔iOS版登录界面)

刚开始做登录模块时,我将键盘设置为UIKeyboardTypeEmailAddress类型,不过后来PD一直强调要改回英文键盘(即UIKeyboardTypeAlphabet类型)。因为对于中文用户来说,EmailAddress类型键盘默认是中文的,输入过程中会有中文提示产生,如下面第二张知乎截图。

不过我们来认真探究下用户的输入体验,以jasonlee.ljp@gmail.com为例:

  • 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上有一份关于退格键检测的讨论

更多可参见官方文档

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

Jason Lee @ Hangzhou

2012.08.05 晚

时间: 2024-10-29 14:30:43

iOS中登录功能的体验探究的相关文章

iOS中注册功能的体验探究

通常,移动App的注册功能通常采用手机号码注册或者邮箱帐号注册. 不过在国内这样隐私堪忧的环境下,需要手机号来注册会流失不少用户.即便是新浪微博这样的应用,需要绑定手机号也令我不信任.除非是像淘宝.支付宝这样需要手机号来提高安全等级的服务,才能弱化用户的心理障碍. 首先,看下手机号码注册.    (注册湖畔) 对于手机号码输入框,我们当然要默认使用UIKeyboardTypeNumberPad类型键盘.不过对于越狱用户,如果装了其它输入法,则有可能使用其它类型键盘输入非数字字符.对此,我们在客户

iOS中 语音识别功能/语音转文字教程详解 韩俊强的博客

原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:最近研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人针对两者的看法,讯飞毫无疑问比较专业,识别率也很高真对语音识别是比较精准的,但是很多开发者和我一样期望离线识别,而讯飞离线是收费的:请求次数来讲,两者都可以申请高配额,针对用户较多的几乎都一样.基于免费并且支持离线我选择了百度离线语音识别.比较简单,UI设计多一点,下面写一下教程: 1.首先:需要的

iOS中 语音识别功能/语音转文字教程详解

版权声明:本文为博主原创文章,未经博主允许不得转载. 每日更新关注:http://weibo.com/hanjunqiang  新浪微博 原文地址:http://blog.csdn.net/qq_31810357/article/details/51111702 前言:最近研究了一下语音识别,从百度语音识别到讯飞语音识别:首先说一下个人针对两者的看法,讯飞毫无疑问比较专业,识别率也很高真对语音识别是比较精准的,但是很多开发者和我一样期望离线识别,而讯飞离线是收费的:请求次数来讲,两者都可以申请高

iOS简单登录LoginViewController、注册RegisterViewController等功能实现方法_IOS

一.个人中心未登录 方法:       加判断登录状态直接打开个人中心页面4,否则出现上面引导登录或注册入口显示 代码如下:    #pragma mark addView - (void)addView { //背景图 [self.view setBackgroundColor:[UIColor whiteColor]]; UIImageView *loginImgTips = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"l

微信ios新版本更新:新增声音登录功能

微信日前上线 iOS 新版本,增加声音登录功能,微信团队将其命名为「声音锁」.据腾讯称,「声音锁」的原理是由微信模式识别中心语音技术组开发的声纹识别技术.用户需要在设置中开启该功能,并按系统要求读出随机数字若干次,便于微信提取用户声音特征参数.此后再次登录账号只需读出相应数字,无需输入密码便可进入.目前该功能仅对部分用户开放.微信同样考虑到了安全问题,用户只能在曾经登录过的设备上使用该功能.

曝iOS版微信新功能:新增声音登录功能

据 腾讯科技介绍,微信近日上线iOS新版本,新增声音登录功能,用户在设置里开启该功能后,退出账号再登录时,只要读出相应的数字,无需输入密码就能进入微信.不过遗憾的是,或许只是小范围测试,笔者在最新的 微信6.0.2版中并没有发现该功能,其更新说明中也没有提到,或许会在近日正式上线.据官方讲,声音锁功能背后的技术原理是声纹识别,想要开启声音锁功能,用户需要多次读出随机分配的一段数字,这个过程将帮助微信提取并制成与说话人相关的声音特征参数.当用户使用声音锁登录微信时,读出的数字若与此前声音特征参数匹

ios-需要在IOS中设置延迟功能

问题描述 需要在IOS中设置延迟功能 需要一个延时器,进行23秒的延迟然后执行函数.应该怎么实现?用不用NSTimer? 解决方案 performSelector: withObject: afterDelay: 解决方案二: 简单点的话,使用performSelector: withObject: afterDelay: 方法 [self performSelector:@selector(delayMethod:) withObject:nil afterDelay:23];

Python的Flask框架中实现简单的登录功能的教程

  Python的Flask框架中实现简单的登录功能的教程,登录是各个web框架中的基础功能,需要的朋友可以参考下 回顾 在前面的系列章节中,我们创建了一个数据库并且学着用用户和邮件来填充,但是到现在我们还没能够植入到我们的程序中. 两章之前,我们已经看到怎么去创建网络表单并且留下了一个实现完全的登陆表单. 在这篇文章中,我们将基于我门所学的网络表单和数据库来构建并实现我们自己的用户登录系统.教程的最后我们小程序会实现新用户注册,登陆和退出的功能. 为了能跟上这章节,你需要前一章节最后部分,我们

java struts2-怎样利用Java 中的struts2框架实现数据库中用户登录功能?

问题描述 怎样利用Java 中的struts2框架实现数据库中用户登录功能? 在Action中LoginAction怎样写? 配置文件中怎样写? 总体实现能够使数据库中已经存在的用户凭自己的密码与用户名登录成功呢?数据库是Oracle数据库.