老外看中国：移动应用UI设计的十大精髓（上）

3顶
1踩

2014-12-04 11:23 by 正式编辑 cao345657340 评论(2) 有9439人浏览

移动开发 UI 设计微信趋势

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

摘要：本文作者Dan Grover用最直接的方式体会了中国移动互联网的发展。这是一个外国人眼中的应用UI在中国的趋势，基本反映了当前国内UI设计的状况，从他的所感所想中，认真审视这些在别人看来，我们自己身上所拥有的精髓。

本文的作者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合作的模式为很多第三方App Store增添了不少人气。

Android有超过10家大型App Store。一款App的上线和升级在每个App Store里都会显示。甚至在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所“借鉴”。后来一些大号的动态表情也早就了一道别致的风景，只是亚洲用户跟美国用户比起来，对动态表情没有我所预想的那么痴迷罢了。

查看图片附件

来自: CSDN

分享到：

3
顶

1
踩

评论共 2 条请登录后发表评论

2 楼 ZZX19880809 2014-12-09 10:37

zhoujiansong 写道

登陆。。。

这种习惯就好。。自己搞的网站中很多也是登陆。。。

1 楼 zhoujiansong 2014-12-08 12:34

登陆。。。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

http://www.csdn.net/article/2014-12-03/2822932-chinese-mobile-app-ui-trends/4

《iOS7 by Tutorials》系列：iOS7的设计精髓(下)

我们继续上篇的内容四、聚焦于内容在iOS7里，强调的不是眼花缭乱的装饰效果，而是最重要的内容本身。下面我们来探讨这个主题： 1.删除不必要的内容伟大的设计更多是减法和加法的组合...

【转】《iOS7 by Tutorials》系列：iOS7的设计精髓(下)

伟大的设计更多是减法和加法的组合。虽然很酷的想法是很重要，但还有更重要的 ————杀死那些很酷的想法，以保持应用程序的重点。 1.1.不再强调chrome chrome是指您的应用里不是内容本身的一部分，如导航栏...

UI设计思想灵感汇总

如何设计受欢迎的APP引导页？ http://jingyan.baidu.com/article/9113f81b24049a2b3214c793.html 3秒即灭，APP引导页如何闪亮 http://www.zcool.com.cn/article/ZMTE3OTA0.html 移动端...

[iOS翻译]《iOS7 by Tutorials》系列：iOS7的设计精髓(下)

我们继续上篇的内容四、聚焦于内容在iOS7里，强调的不是眼花缭乱的装饰效果，而是最重要的内容本身。下面我们来探讨这个主题： 1.删除不必要的内容伟大的设计更多是减法和加法的组合。虽然很酷的想法...

iOS7的设计精髓(下)

伟大的设计更多是减法和加法的组合。虽然很酷的想法是很重要，但还有更重要的——杀死那些很酷的想法，以保持应用程序的重点。 1.1.不再强调chrome chrome是指您的应用里不是内容本身的一部分，如...

软件设计师复习资料

从大禹治水看构件与集成大禹治水　在远古的尧、舜时代，黄河流域经常发生了大水灾，洪水横流，五谷不收，家破人亡。所以尧派鲧去治水，鲧沿用了过去的传统法子，水来土挡，用土筑堤，堵塞漏洞。但由于洪水凶猛，...

设计模式

设计模式第1章代码无错就是优？—代码无错未必优—简单工厂模式 1.1 面试受挫1.2 初学者代码毛病1.3 代码规范1.4 面向对象编程所有编程初学者都会有这样的问题。就是碰到问题就直觉地用计算机能够理解的...

前端技能汇总知识结构

★越少越简单,越适合入门,★多的要么是难度比较高,要么是比较适合在后面看,比如讲性能之类的书. CSS Eric Meyer 谈 CSS（卷二） ★★★ CSS权威指南（第3版） ★★ 精通CSS ★★★ HTML & CSS...

AI时代的产品管理：产品经理需要具备的5项技能

巧合的是，前几天看了老外的一场分享，产生了诸多共鸣，因此迫不及待的翻译给大家。 2020年1月25日, 在曼彻斯特产品思维大会上，Salesforce 爱因斯坦系统的产品总监马尤克·博瓦尔做了个分享，探讨了在人工智能...

商务周刊：别了，摩托罗拉

阅读之前做好准备,文章超长... ...汽车电子——这些业务在它的手上陷入困境,它一旦撒手往往又起死回生.而最新的迹象显示,摩托罗拉很可能要放弃它的手机业务.如果这个令人遗憾的消息真的变

商务周刊封面：别了，摩托罗拉

技术上逊于CDMA的GSM最终在中国、欧洲等全球市场占了压倒性优势，到2007年1月，世界上有82%的手机在使用GSM网络。　尽管我们不能以事后诸葛亮的眼光去评断摩托罗拉面对不确定性时的选择，但今天的人们仍然可以从...

2020java面试必问，找不到工作你找我（一）

(2017-11-14-wl) 39 2.switch 是否能作用在 byte 上，是否能作用在 long 上，是否能作用在 String 上?(2017-11-14-wl) 39 3.数组有没有 length() 方法？String 有没有 length() 方法？(2017-11-14-wl) 39 4.String ...

2013总结-2014计划

在正式进入开发的时候，以前不会C# 没用过数据库的两个人，已经明数据库的一些知识了，大概清楚了该怎么设计数据库，以前书上1234范式和bc范式也清楚是啥东东了。在接下来几个月的时间里，我负责质量把关和系统重...

凌晨起来肝的一篇 Java 学习路线，保证学弟学妹们大三大四的时候顺利找到实习 Offer

13 年 Java 编程经验的老油条了，拒绝过阿里，在日企搬砖过 5 年，Java 领域的优质创作者，说实话，如果是单纯奔着...C 程序设计语言，为什么学 Java 要学 C 语言呢？这也是我最近才想明白的一个问题，因为 C语言是其

chromedriver-win64_121.0.6123.0.zip

Chekiang Shu Ke Sung-mianfeiziti字體下載

中国科学院大学22-23秋季学期《程序设计基础与实验（C语言）》课程大作业——基于Min-Max搜索策略的五子棋对战程序

C语言是一种广泛使用的编程语言，它具有高效、灵活、可移植性强等特点，被广泛应用于操作系统、嵌入式系统、数据库、编译器等领域的开发。C语言的基本语法包括变量、数据类型、运算符、控制结构（如if语句、循环语句等）、函数、指针等。在编写C程序时，需要注意变量的声明和定义、指针的使用、内存的分配与释放等问题。C语言中常用的数据结构包括： 1. 数组：一种存储同类型数据的结构，可以进行索引访问和修改。 2. 链表：一种存储不同类型数据的结构，每个节点包含数据和指向下一个节点的指针。 3. 栈：一种后进先出（LIFO）的数据结构，可以通过压入（push）和弹出（pop）操作进行数据的存储和取出。 4. 队列：一种先进先出（FIFO）的数据结构，可以通过入队（enqueue）和出队（dequeue）操作进行数据的存储和取出。 5. 树：一种存储具有父子关系的数据结构，可以通过中序遍历、前序遍历和后序遍历等方式进行数据的访问和修改。 6. 图：一种存储具有节点和边关系的数据结构，可以通过广度优先搜索、深度优先搜索等方式进行数据的访问和修改。这些数据结构在C语言中都有相应的实现方式，可以应用于各种不同的场景。C语言中的各种数据结构都有其优缺点，下面列举一些常见的数据结构的优缺点：数组：优点：访问和修改元素的速度非常快，适用于需要频繁读取和修改数据的场合。缺点：数组的长度是固定的，不适合存储大小不固定的动态数据，另外数组在内存中是连续分配的，当数组较大时可能会导致内存碎片化。链表：优点：可以方便地插入和删除元素，适用于需要频繁插入和删除数据的场合。缺点：访问和修改元素的速度相对较慢，因为需要遍历链表找到指定的节点。栈：优点：后进先出（LIFO）的特性使得栈在处理递归和括号匹配等问题时非常方便。缺点：栈的空间有限，当数据量较大时可能会导致栈溢出。队列：优点：先进先出（FIFO）的特性使得

高级信息通信运行管理员第七套试卷

这是高级信息通信运行管理员考证试卷

3顶1踩