指尖上跳舞!聊聊拇指码字那点事儿 - 优设网 - UISDC

指尖上跳舞!聊聊拇指码字那点事儿

2015/04/12 6730评论区

talk-about-input-and-thumb-1

编者按:什么样的登录过程不会让人厌烦?今天@ME网易移动设计 的同学从手机码字这件小事上,聊聊他观察到的那些优雅的登录体验,以及一些反人类的糟心过程,以此对照 >>>

wy20150412 (1)

如果说互联网改变了人类的生活,那么移动互联网则改变了人类的习惯,它让用户扔掉键盘和鼠标,随时随地在一个巴掌大的屏幕上聊天、视频、订机票酒店、购物等。如今的移动互联网已经把用户惯坏了,随着功能的增多和用户体验的增强,想象着一个阳光明媚的周日,拇指族们足不出户的窝在床上和朋友聊天、看电影、订餐、购物甚至收发邮件和工作,懒惰让他们的脾气越来越浮躁,会因为一个细节的体验不好而分分钟吐槽你的设计。他们懒得输入太多内容,因为手机屏幕实在是太小了,小到他们只愿意点击和滑动,好像这样就能不消耗卡路里一样,也许他们的未来和下一代已经不会记得如何打字,那时候的高科技手机也许成为了一个彻头彻尾的秘书,动动嘴巴就能帮你做好你想要的一切,这并不是一个遥不可及的梦想。

不可否认的是,科技的发展和用户体验的改善确实是让用户沉迷和依赖移动互联网的原因,也是设计师们工作的动力。但移动端因为屏幕尺寸受限以及交互方式的差别,使得其一些功能还远不如在PC端更方便,其中最大的一项就是输入,今天我们通过分析一些在输入上体验良好的设计来给我们今后的工作一些参考。

登录的必要性

登录就好比一个APP大门外的守卫,如果你真的有公事要办,那么进门查岗和登记是有必要的;可你要是憋了一泡尿,只想进去上个厕所,此时守卫还要你出示身份证,你恨不得直接撒在他身上然后再暴打他一顿。登录的目的基本上有两种:①需要帐号来获取用户数据并使用一些基本功能如跟贴、评论等(例如Facebook、新浪微博、网易新闻)②需要将数据同步到不同设备和平台(例如印象笔记)。说到这儿,就不得不说说有些个产品经理,为了那点可怜的KPI和用户数据,硬将自己的产品加上登录的功能,殊不知因为登录将多少用户阻挡在你的产品之外。很多APP的开机引导页最后一帧,都是大大的一个登录按钮,有些稍微有点良心的APP会把“直接进入”显示出来,不过是小到肉眼难见、手指难点击,这种感觉就好像去政府办事被官员们耍了一样。

当一个产品成熟了之后,登录是必不可少的功能,此时登录出现的时机就很重要,如果你的APP没有牛到像Facebook和Twitter账号人人都熟知,也没有像微信和QQ那种有着非登录不可的功能,那就在用户有需求的时候再登录吧,少一个页面的输入就减少了一道门槛,也留住了更多的用户。

被迫害妄想症的发明 —— 输入两次密码

最初PC端的帐号注册都是需要输入两遍密码的,因为密码都是隐藏的,担心因为不小心按错键而导致输入和心中记忆的不同,就输入第二遍进行确认,这样确实能避免手误,不过由此带来的问题是,没有手误的人要输入两遍相同的密码,真正手误的人不知道是第一遍不对还是第二遍不对,只能无比抓狂的删掉密码,重新小心翼翼的输入两遍密码。

wy20150412 (2)

我没有翻看历史,不知道这种两遍密码的功能是谁因为什么原因发明的,我猜想是一个有被迫害妄想症的人,担心他输入密码的时候旁边有人偷窥,于是把密码隐藏,然后因为看不到密码怕自己输入错误,顺手加了两遍验证……这功能一定是电脑还没有在家庭普及的时代发明的,人们在公共场所使用电脑,不可避免会担心陌生人的偷看。可如今电脑是一个多么隐私的物品,无论是家庭还是办公室,大家都有自己隐私空间,已然不需要如此隐藏密码,更何况是手机,手机本身隐私性就更高,屏幕大小也有限,不想被人看到就用手挡一下或者躲开他们,也就是被迫害妄想症的人才会在手机端也要坚持两遍验证密码的功能。每每看到这些APP的注册需要输入两遍密码,我的狂躁症简直要犯了!

wy20150412 (3)

一个好的设计并不是完全照搬PC端的功能和设计,而是要考虑适合移动端应用的场景,如上述所说,在移动端使用两遍验证密码是没有必要的,无疑增加了移动端输入的成本。苹果iOS系统的输入键盘会在点按下后变大,这本身就能让用户感知输入的正确性,同时在输入密码的时候先显示输入的字母再快速转换成隐藏的黑点,也能帮助用户检查输入的正确性;而一些体验更优雅的APP则会为用户提供显示密码的功能,默认不显示,当用户需要确认密码是否输入正确的时候再点击显示,这样即避免了偷窥,又防止了输错,也减少了两次输入的成本。一些APP甚至在此功能上做了很好玩的隐喻,例如tumblr用睁眼和闭眼的icon来表示显示和隐藏密码,bingo!向一切美好的细节体验设计致敬。

640.webp

QQ20150412205936

谁说登录非要输入

当你的APP需要登录,但你恰好没有公众认知的一套账号体系时,拉下脸授权接入下那些熟知的第三方帐号不代表降低了你的登录和注册数,反而会让用户更加快捷的完成登录并开始使用你APP的功能。不要觉得委屈,因为你不够牛逼,用户从来没在你这儿注册过,他们也不需要再多记一个帐号,有更好的选择谁不愿意呢?!

第三方帐号登录的好处是你的手机中已经有一些现成的登录信息,你只要获取授权就可以,不用输入任何用户名和密码,有些权限高的可以将你在其他APP中的昵称头像生日学校血型等一并拿过来,这些个人资料要是自己填可真令人讨厌啊!

那么问题来了,登录页面到底要怎么布局?如何在突出自己帐号系统的同时展示第三方登录按钮?答案是,将用户最想要的信息呈现在最重要的位置。有些APP扭扭捏捏,用第三方登录还要弱化显示,恨不得让自己的帐号登录亮瞎用户的眼,快选我快选我(⊙o⊙),事实上你是否做过用户调研,是否能理直气壮的证明这样第三方登录的点击率就降低了?相比之下我更喜欢直接凸显第三方登录的设计方案。

QQ20150412210034

QQ20150412210052

既然有登录,就会有退出登录的需求。大部分APP退出登录后再次登录的页面和最初登录一样,没有帮助用户记录用户名,这着实是一个不能称作好的设计,不管你是什么原因,减少用户信息的输入会让用户觉得再次登录好像没有那么困难,尤其是中国的用户,他们的用户名可能是不好打出来但自己觉得酷酷的中文,也可能是国际范儿的中英文结合,更有可能是一些90后流行的颜文字等,没有人想再重新输入一遍。而且对于大部分非社交APP来说,账号并没有非常重要的隐私性,登录主要是为了方便使用其中某些功能,这时候哪怕记住用户名和密码都不为过。例如雅虎新闻APP,退出登录后,会记住所有在该设备上登录过的用户名和密码,再次登录只要选择想要登录的帐号就行,十足方便。

wy201504121 (1)

目前很多主流的国外APP都已经接入了1password登录,1password是一个帮助你管理所有账号密码的APP,它的好处是在你重装APP或者多设备登录的时候帮你一键登录,前提是你将该网站的帐号密码存入1password。

wy201504121 (1)

注册是在考验用户的耐心

如果你真的不接入授权第三方帐号,或者你的用户是个死忠,他非要注册你的产品,那么首先得恭喜你!但是不要觉得用户走到了这一步就能妥妥的注册成功,也许下一步他就会发怒卸载掉你的APP,简单且体验良好的注册页面非常重要。试问看到如下behance的注册页面,不管他的APP里面内容有多么好,我都进行不下去,而且会抓狂。暂不说Adobe的帐号有多么小众,这么多的表单是在查我的户口吗?!

wy201504121 (2)

注册的目的是建立一个帐号,这个帐号是以后你使用网站或者APP的凭证,简单来说,用户名(邮箱)和密码就够了,先让用户成功的注册,能够正常使用功能,至于什么昵称头像生日,用户想完善他自己就去找了,用不着你来操心,如果你不是社交类型APP,这些完善功能你甚至都不需要。下图中Booking的注册界面非常干净简洁。

wy201504121 (3)

当然如果是社交网站,是需要填写一个用户名或者昵称的,这时候对于昵称重复性的检测也是必不可少的,大部分产品只会提示“昵称被使用”,用户能做的是换一个昵称,非常不幸的是可能昵称仍旧被使用,因为对一个有成千上百万用户的产品来说,你所想到的昵称别人也早想到了,与其这样不停的试,倒不如给用户一个参考,因为有些用户对名字无所谓,他们想要的是快速注册完成。

Flickr的注册页面在我填完姓名之后自动匹配给我用户名(暂不说为毛要填这么多表单),如果不喜欢,可以点击左右按钮去更换;输入密码的时候会实时提示我密码的强度,这样的好处是及时反馈及时修改,不会等到所有都填写完成点击注册时再告诉我一堆错误。

wy201504121 (4)

【有哪些值得推荐的高端字体?】

高端中文字体:
《超实用!有哪些活泼而高端且不俗套的中文字体?》

UI设计字体:
《新手进阶宝典!UI实战指南之留在电脑里的字体(一)》

高端英文字体:
《永不过时!有哪些值得推荐的经典款英文字体?(已打包)》

作者:方圆的形状  @ME网易移动设计

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量93万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/talk-about-input-and-login

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 设计师 扁平化设计 交互设计师 界面设计 优设专访 排版布局 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 设计师专访 字体下载 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 图标设计 logo设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里