天津UID培训
达内天津天大中心

4000178985

热门课程

老外看中国:移动应用UI设计的十大精髓

  • 时间:2016-05-20
  • 发布:Dan Grover
  • 来源:码农网

本文的作者Dan Grover现任腾讯微信产品经理,在学习中文一年左右并在广州工作近半年的时间里,用最直接的方式体会了中国移动互联网的发展。从微博微信到淘宝、各大安全软件、应用商店,他几乎尝遍了所有中国的主流移动App。这是一个外国人眼中的应用UI在中国的趋势,基本反映了当前国内UI设计的状况,从他的所感所想中,认真审视这些在别人看来,我们自己身上所拥有的精髓,以及那些颇具玩味的明潜规则。

以下为译文:

今年夏天,由于工作的原因,我从美国旧金山搬到了中国的南部城市广州,阴差阳错地当上了微信(WeChat)的产品经理。众所周知,微信可以说是中国最风靡的IM应用之一。到一个新的国家就意味着新的生活——习惯新的语言、饮食、消费和出行方式。然而没想到的是,短短几个月的时间,我就融入了这样一个起初让我无所适从的陌生国度!

同样习惯的还有中国的数字生活。学着使用中国用户常用的移动App,不仅仅是出于职业习惯的好奇心,也是为了尽可能地融入本地的氛围。习惯之后,甚至对这些改变都熟视无睹了。一天,闲来无事,我列出了一份长长的清单,来记录我在美国使用和开发过的App,以及在中国使用的应用,并将两者进行对比。清单的长度远远超出我的预想,于是我决定专门写一篇文章,进行一个系统的分析。

1. 复杂的中文输入

拼音模糊匹配

中文的输入法千差万别,从拼音、手写、部首到颇具怀旧风的九宫格输入等,花样百出,尽管不同年代、不同成长环境的用户会选择不同的输入法,拼音输入却还是最为常用的一种。

但在中国的网站和App上,并不需要以上任意一种的输入方式。打开任何操作系统的搜索界面,只需输入拉丁字母,就能得到海量的中文搜索结果,通过智能纠错和模糊音功能,即使有错别字也无伤大雅。一旦适应了这种模式,就会不由得感慨:为什么其他国家的App没有这么人性化呢?

中国的App甚至强大到能处理各种各样的中文输入,真是蛮拼的。但很少支持英文的模糊输入,比如使用词干提取和探测法等便能处理变音符、标点符号和大写等问题,当然,对于这一现状也情有可原。

语音信息、语音搜索和语音助手

如果语音能够简单粗暴地解决问题,那还要打字干嘛?在微信一类的IM应用中,语音信息的使用随处可见,在撇除打字的麻烦之余,也为那些对电脑一窍不通的老一辈人带去了便利,给他们省下了不少力气。其实我个人并不热衷这种交流模式,总觉得停下手头的活儿来听取语音信息远没有浏览文字来得方便,向别人回复语音信息也很不自在,尤其是在公众场合,看起来颇有装腔作势的嫌疑。

不过,在中国,人们似乎很习惯在公共场合发送语音信息。一边用拇指摁着“录音键”一边微微低头对手机说话的人群随处可见。除此之外,很多应用也支持语音搜索。于今年5月加盟百度的人工智能科学家Andrew Ng博士在最近一次访谈中便表示:百度搜索的10%均来自语音输入。

二维码扫天下

在动身前往中国前,我曾在旧金山做过关于美国用户习惯及喜好的调查,并不失时机地亮出二维码,看他们是否知道那是干什么用的。一个女大学生笑道:“这玩意儿是不是那种,用相机照一下就能打开什么神秘网站之类的?”

还有人说他们曾尝试用相机App拍了张二维码的照片,但什么都没有发生,之后就再也没用过。“大概是购物优惠券之类的吧”有人猜,甚至担心手机会因此中病毒什么的。我把这些不同回应的录像拿给我的同事看,大家都更加坚信美国对二维码来说恐怕永远无法成为一片沃土。

中国人绝对不会对二维码感到陌生。实际上,二维码几乎无处不在——广告、宣传册、菜单、名片还有再熟悉不过的优惠券上,甚至会出现在列车的椅子靠背以及洗手间隔间的门后。绝大部分App都有二维码扫描功能。打印在广告、宣传册上的二维码也许只适用于某个特定的App,中国的微信、微博以及其他App上都有与特定链接捆绑的二维码,但如果用外部扫描器的话,很可能无法链接到某个App上。

而二维码的下方往往会出现“扫一扫”三个汉字,也就是扫描的意思。每次看到这几个汉字,我都会联想到三录仪和医疗设备什么的。在这里,二维码不仅仅是一种营销渠道,还可以用于添加好友,支付商品或登陆网站,非常方便。

2. 疯狂的红色小圆点

在中国,众多App的UI往往独树一帜地共用同一种元素——一个代表未读内容的红色小圆点。看起来跟iOS系统UI上那种红色圆点相似,很眼熟,只是没有数字标识。实际上,美国App的UI从未用过这个元素。这些红色的小圆点在App的菜单上随处可见,从左到右、从上至下排列成一道独特的风景。通常,如果用户过一段时间再打开某个App,就会每个页面上都有它们的身影。

红色的小圆点往往意味着:

新内容加载成功:在社交媒体新闻、电影、音乐或购物App中很常见,实际上并不需要用户执行特别的操作,也不必显示具体的数字,只是提醒他们有新的内容出现了而已。

新功能上线:在App中常伴着醒目的红色“New”或“新”的字样。

在用户关闭了App全部或部分通知功能时出现。举个例子,微信在静音时,新消息以红色圆点而不是数字的形式显示。

很多App同时使用红色圆点和数字两种通知模式。App菜单上排列的选项让人目不暇接,用户正需要这样方便的设计来引导他们。实际上,多数开发者都认为数字提醒过于扎眼,因此这种惊喜的绝佳创意也成为了多数App的必备元素。有趣的是,在QQ上,如果拖拽数字标识(而非红色小圆点),它们就会从一小股烟雾中消失不见。

3. 简约美、门户网站、平台

Richard Gbariel的经典论文《“差点的更好”设计理念的兴起》(The Rise Of “Worse is Better”)第一次将软件设计中两种截然相反的观点进行了对比。来自贝尔实验室(Bell Labs)的UNIX操作系统和C语言例证了“Worse is Better”的观点,倾向于简单小巧、原汁原味并能彼此协调的工具。而由麻省理工学院开发的Common Lisp、Scheme和Emacs则例证了相对立的观点——“The Right Thing/Better is Better”,后者更倾向于庞大而全面的综合解决方案。

在美国,App倾向于高度集中和极度精简化,深度诠释了“差点的更好”的观点,但中国的应用却显然是与之背道而驰的。几乎所有的App都集成了越来越多与其本质看似毫无干系的功能,有时候可以作为功能的补充,而“八竿子打不着”的情况也并不稀奇——我想这可能是开发者们想要吸引眼球或扩大目标用户群才出此策。

举几个例子:

微信之于WhatsApp,简直就是Emacs和VIM的差距。除了信息编辑之外,还有视频通话、新闻订阅、在线支付、游戏中心(内置游戏)、搜索附近的人、Shazaam式的歌曲匹配以及类似于“印象笔记”的收藏功能等。美国著名软件工程师Jamie Zawinski认为,邮件是所有程序必备功能之一,否则就会被其他带有此功能的产品所替代,而微信中恰恰有内置的邮件客户端。此外,微信的公众号甚至能实现用户跟服务供应商的对话,而无需另外下载官方App。

百度地图有查询天气、搜索好友、旅行向导以及各式各样的支付服务;腾讯地图则可以发送音频明信片。两个App均有二维码扫描功能,提供类似“高朋团购”的便捷服务。

中国版的“Twitter”——微博则更为强大,可“发布”长微博,拥有音乐、文件、餐厅美食点评等多达10种不同的内容,当然也支持支付功能。

Yahoo式的门户网站尽管包罗万象,但终究在2000年“命丧美国”。类似的新浪、网易、hao123以及腾讯新闻等同类网站却在中国发展得火热。虽然“常规”App已具备了门户网站的所用功能,但很多门户网站也推出了自己的App,相当一部分都非常受欢迎。

侧边栏“发现”新惊喜

美国App中一些难以分类的条目往往放在同一个类别中(比如“设定”和“帮助”选项等等),形式大同小异。有时候点开右上角的Elipsis图标“更多(More)”,就能找到它们,有时候归类到侧边栏(Hamburger Menu)里,有时候像Facebook一样藏在侧边栏的“更多”标签下。

有些中国App跟美国App相似,将小条目归类到“更多(Even More)”下面,但更常见的是归类至倒数第二、三个选项,以“发现(Discover)”的形式出现。“发现”的图标通常是圆规或指南针的造型,包含更多有趣的内容,尽管没有非得存在的理由,但可以作为App核心功能的有益补充。

五花八门的应用商店

很多App能够跳转到其他游戏或者App的下载界面,比如说链接到iOS的App Store,或者干脆直接下载安装(OTA Install)。这种与流行App合作的模式为很多第三方应用商店增添了不少人气。

Android有超过10家大型应用商店。一款App的上线和升级在每个应用商店里都会显示。甚至在iOS上也有其他选择,比如我曾看到过所谓“苹果助手(Apple Helper)”的广告,下载时得使用自定义配置文件。Cydia也因为越狱iPhone的而得到广泛应用。

4. 帐号和登陆界面

手机号码和验证码登陆

美国网站和App通常采用两种登陆模式,一是传统的E-Mail作为用户名,输入密码登陆;二是采取Facebook或Google等第三方账户授权登陆。最近常见美国一些Facebook类的社交App让用户输入电话号码,通过短信(SMS)获取验证码来登陆。

而在中国,几乎所有App都支持手机号码登陆/注册(还有其他选项)的方式,包括没有开发移动App的网站也支持这种登陆方式。

二维码登陆

许多网站还支持二维码扫描来登陆相应的App。二维码的标示符经过移动App的扫描后,就能自动登陆到账户上。听说过去很多人都是在网吧一类的场所使用公用电脑,遭遇键盘记录器或者间谍软件的风险大大增加,而二维码登陆相比键盘输入密码显然更便捷和安全。

第三方帐号登陆

很多App也支持第三方帐号授权登陆,比如使用微信、QQ、新浪微博和人人网帐号等。手机界面通常会自动跳转至第三方App,经授权之后就可以登陆了。在网站上,传统登陆,第三方账户授权和移动App扫描二维码均可使用。

更多的安全措施

一般的银行网站和支付宝(Alipay)一类的第三方支付平台需要安装一个特别的浏览器插件,从而为密码输入提供保护。很多银行会发给客户一个带秘钥的USB闪存盘,不过我实在琢磨不透这玩意儿到底怎么用,只能将其束之高阁。

美国的App和网站只有在注册时才会要求用户输入验证码,而在中国,通常注册和登陆界面都要求输入验证码,对安全性的要求相对统一,还有一些移动应用甚至本身就含有验证码的输入选项。

5. 聊天的通用UI

公众号

“公众号”跟IRC实时聊天(Internet Relay Chat)、AIM聊天软件以及SmarterChild聊天机器人有些相似,为品牌推广和公众人物提供了与大众交流的平台。它能在中国遍地开花,还得归功于微信。银行、移动运营商、博客、医院、购物中心和政府机构都有公众账号,而很多机构甚至放弃了开发独立App或移动网站,专心经营自己的公众号。

用户可以向公众号发送文字、图片、语音等任何形式的信息,且一定会收到自动或者人工回复。虽然跟普通聊天时的用户界面相似,但有页面底部的菜单有所不同,那里不但简单明了地列出了该账户所提供的诸多功能,还可以切换到普通的聊天模式。

除此之外,公众号具备所有普通聊天模式下的功能。微信甚至能在公众账号的第三方服务器接受到信息之前自动将语音转化为文字。而媒体借用公众号定期向订阅者推送新鲜内容,对很多用户来说,界面看起来跟RSS阅读器差不多。

公众号的聊天式UI如此成功,引起了新浪微博和QQ的官方账号以及众多App的竞相模仿,只是形式略有不同。不仅如此,很多App里的“用户中心”也能发现它的身影。一家名为Grata的创业公司还开发出白色标签版的UI,可为任何App所用。

App开发者们不但明白,顺水推舟地采用用户熟悉的UI无疑是明智的选择,他们更是将概念付诸实践,一股脑儿地复制了UI的所有元素——页面下的三个菜单选项和定期推送的“多元媒体”新闻的布局都一模一样。

颜文字和表情

在emojis广泛使用之前,大部分西方App可用的表情符号都是直接从传统的文字表情转化过来的,常用的有15个左右。但为中国用户所熟知的QQ在很久之前就已经有了一套标准化的表情,数量达80个之多,丰富多彩且极具表现力,足以跟emojis相媲美。除了一些基础表情外,还有一些像、和这样甚至有各自适用的时间和场所的表情。

在中国,任何具有聊天功能的App都会有相似的表情包。QQ创造的经典表情集为后来出现的微信所沿袭,且被无数App所“借鉴”。后来一些大号的动态表情也早就了一道别致的风景,只是亚洲用户跟美国用户比起来,对动态表情没有我所预想的那么痴迷罢了。

6. App在线购物

中国的在线支付在发展最初由于银行所设定的种种繁文缛节而寸步难行。若要绑定银行卡和某个网站,单单一个信用卡账号是远远不够的——用户得从30多家银行中勾选自己的银行,还得填完纷繁复杂的表格。每家银行明摆着都有自己的一套流程,网站除了被动接受别无他法。而正因如此,财付通(Tenpay)和支付宝(Alipay)等第三方支付平台才如此深得人心。

单点登录的移动支付模式

如今很多移动App在银行和其他App之间充当着桥梁的作用,所以用户就不必为繁杂的绑定流程而烦恼不堪了。

谈到这种支付模式,我在美国只有过一次体验。当时在机场,我正为晚上无处安身而发愁,幸好能用Venmo(美国的移动支付App)在HotelTonight(酒店预订服务App)上预付房费,省去了繁杂的信用卡信息输入和绑定程序。

但在中国,第三方支付却再常见不过了。关键在于,众多App已经有内置的支付功能,所以用户不用费尽周折去下载第三方支付软件。

每个App都有在线支付功能

App中的“钱包”页面包揽了所有支付形式,页面上还有其他选项可供选择:

在App上购买其他服务,比如购买本地服务App的商品。

在现实生活中只需扫描卖家的二维码就能购买商品。或者反过来,让卖家来扫描买家手机上的二维码来完成支付。

为好友派发“红包”,跟中国的传统习俗有异曲同工之妙,只是采取了在线形式而已。

五花八门的支付选项应有尽有。举几个例子,绝大部分有支付功能的App都能用来购买飞机票、彩票、电影票以及打出租车(在美国有Uber,在中国有“滴滴打车”),还能为手机充值,交水电费等等。腾讯App上还有迷你版的京东购物平台(中国著名在线购物网站),还能购买腾讯的虚拟货币Q币。

大多数附带支付功能的App都有相似的三列缤纷多彩的图标,代表不同功能的服务。实际上,很多银行的App也有着类似的布局,用户可以直接为商品支付货款。

盾牌当道,安全支付

任何涉及支付功能的App都在交易安全上紧绷着一根弦。App中通常会有一个标志性的大盾牌图标,赫然立于“安全中心”的页面之上。美国的在线购物网站也曾采用类似的模式,但2000年之后(还记得“Hacker Safe(黑客安全技术)”吗?)就改用了更加隐蔽的方式。

其实有相当一部分专门给手机加速、清理缓存、提高安全性,甚至能抵抗恶意攻击的App……多多少少让人联想起Window XP曾经为反抗恶意软件攻击所开发的那些玩意儿。当然了,由于“盾牌”无处不在,此类App便少了些用武之地。

7. 定位、定位、定位!

不论是自动填写“你所在的城市”,显示本地天气或打开本地服务页面时,很多App从来都是“面不改色心不跳”地索要用户的地理位置,几乎到了无孔不入的地步。

在中国,联系附近的陌生人是诸多App常用的功能之一。实际上,Highlight和Skout等美国本土的App曾推出过这个功能,但并不像在中国一样大获成功——文化态度、人口密度和城市化水平等都可能是印象因素。不管如何,此功能在中国如此广泛地使用,这已经是不争的事实。

专门结交陌生人的App

陌陌就是一个专门结实陌生人的App,月活跃用户超过6000万人,该公司即将上市。陌陌上不但能联系附近的陌生人,还可以发现有趣的活动、讨论、游戏等等。类似的App还包括微聚和比邻。

日常使用的App

此类独立App风靡当下,但最值得一提的还是每一个中国人日常使用的App都包含这个功能。

微信和QQ是中国使用最广泛的两种社交App,且都能搜索“附近的人”。用户会看到一个附近陌生人的名单,还能浏览他们发送到新鲜事里的照片。当然了,你也可以选择或者不选择出现在他人的清单上。用户只要还在浏览陌生人清单,就能接受好友请求。

微博跟Twitter的不同点在于,它可以看到附近的用户发送的内容,流行的音乐、电影和TV App,还可以找到很多热门账号和群组。

百度地图里的“云图”也很赞——实时更新,能显示不同街区的人口密度,由用户向服务器发送的实时地理位置信息绘制而成。

直觉告诉我,如果美国的主流App全部或者仅仅是部分添加上述功能的话,肯定会为一些利益集团利用,成为晚间新闻广播上恐怖故事和发泄不满情绪的借口罢了。

8. 下载无处不在

很多公司的App都支持离线使用,像是音乐App(QQ音乐、多米、百度音乐等),还有视频App(爱奇艺、腾讯视频、百度视频等)。随时在地铁上都能看见一些人拿着手机看视频、听音乐……这样的风景在美国却是少见,主要是因为在美国,人们无法享有中国用户那样的下载权限。

主流的新闻App同样能提前下载多达几百篇文章,用户可以挑有空的时候看;主流的地图App也能下载用户所在城市,甚至整个国家的离线地图;百度翻译、有道词典之类的中英翻译App也可以下载离线词典和资料,让查询变得更加快速便捷,只是翻译质量略微逊色些。

离线下载功能成为诸多App的卖点之一。在中国,下载一部电影或一首歌时,用户可以对画质和音质进行设置,可以看到下载占用的流量和内存,数字精确到以KB计算,还可以了解设备内存剩余的空间;相比之下,美国的App就最多显示一个模糊的进度条,或者干脆什么都看不到。

9. 朋友圈里别有天地

探讨App UI在中国发展的大趋势之际,不得不提一下微信的“朋友圈”或者“新鲜事”板块。当我第一次看到它的时候,感觉就像是Facebook的动态消息被生搬硬套进了毕加索式的怪异图标。但使用之后我惊喜地发现,朋友圈堪称是绝佳的创意,跟Facebook的动态消息相比颇有独树一帜的风范。

无过滤和重新排序:朋友圈里的好友状态不受过滤或者重新排序的限制。当然,用户可以屏蔽那些惹人恼火的“状态狂人”,被屏蔽人的状态将不再出现。

更多私密空间:当你评论或者为某个好友的状态点赞时,除了你们俩和共有的好友之外,其他人都是看不到的,这跟Facebook很像。这一设定意味着只有发状态的人才清楚到底有多少人为他们的状态点赞或评论,从而提供了更多私密空间。

不显示公众账号的新闻推送:当你关注某个公司或者新闻网站的公众账号时,他们推送的内容并不会出现在朋友圈里。当然,通讯录好友也可以有意在朋友圈里转发这些推送的链接。

第三方App发送状态需经过用户许可:第三方App可以向朋友圈发送状态,但必须要经过用户的许可。通常手机会自动跳转到微信的界面,得到用户许可后,状态才会显示在朋友圈里。

没有游戏:Zynga(美国社交游戏公司)式的社交媒体游戏让腾讯赚了个盆满钵盈。但在微信上,他们明智地选择了将所有游戏都收录在“游戏中心(Game Center)”中,照顾到了非玩家用户的感受。

没有照片滤镜:尽管朋友圈可以发送各式各样的状态,但唯独没有Instagram那种照片滤镜——这是为了让用户能够快速、即时地发送最原创的照片。

这些独具创意的设计元素与微信的完美融合让大众对朋友圈情有独钟了。查看消息和刷新朋友圈,评论点赞和发状态……这就是中国微信用户的日常。

10. 其他

Assistive Touch

差不多一半的iPhone用户都开启了Assistive Touch。虽然这漂浮在屏幕上的小方块有时候挺烦人的,但是也很有用——比如充当虚拟的Home键以及实现多点触控功能等,后者让原本需要多个手指完成的操作只需一根手指就能完成,让伤残人士也能做到无障碍操作。

但是,为什么那些四肢健全、大脑正常的人也会选择启用Assistive Touch这种模棱两可的设定呢?没人能果断给出一个答案来,也许人们的想法各不相同吧……有人害怕用坏了手机下方的Home键,有人也许仅仅是闲得没事做而已。

各种可爱的卡通形象

在不同App的加载和错误提示界面上,都会出现各式各样可爱的卡通造型。

污染系数小工具

一些App还包含了快速查询和更新当地环境污染指数的功能。

广告闪屏

相当一部分的App在打开之前会出现无需提前加载的全屏广告,它们在应用打开之前就在后台自动加载好了,甚至内置在了App中。有时候是程序内购买的广告,有时候则是推广或宣传特别的活动等等,还有就是一些在公告板或者地铁站随处可见的普通广告。

App主题缤纷多彩

主流App为用户提供多种多样的主题/皮肤选择已经成为一种趋势。实在不能想象美国的iOS应用也会走这样的套路。

Android ROM

虽然Google在中国被屏蔽了,但是对于中国用户来说,搞一台Nexus设备,享受什么纯白无暇Google体验实在是多此一举。但在中国,官方原版ROM和其他地方一样匮乏,为了弥补这样的空缺,一些基于Android原生系统的替代产品出现了,比如小米的MIUI、阿里的YunOS以及锤子科技的Smartisan等。


【免责声明】部分信息转载自各类纸媒、网媒之所有作品,版权归作者本人所有,转载文章目的在于分享信息、提供阅读,不代表本站赞同其观点和对其真实性负责!若作者或版权人不愿被使用,请即与我方联系,如有侵权本站将迅速给您回应并做处理。

上一篇:如何让产品设计“简洁大气”?
下一篇:2016年Web设计的10大趋势

0基础学习UI必看的知识体系!

学习UI设计的4个小技巧

UI设计师都做些什么呢?

设计师最关注的28个问题,有你想问的么?

选择城市和中心
贵州省

广西省

海南省