了解这十个差异,出海产品设计不再慌

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:网络   作者:佚名

关键词
时至今日,随着中国互联网产品的飞速发展壮大,越来越多国内产品计划着向海外扩展,远的有早就在布局海外市场的微信,近的也有超人气产品抖音。而阅文集团在最近两年也持续在海外业务上发力,Webnovel 正将中国优秀的小说作品展现给全世界的读者们。那么,当我们在设计服务于海外用户的产品的时候,有没有发现一些国外产品设计和中国不太一样的地方呢?今天我们不妨从品牌视觉、字体、特性功能以及产品细节等多个角度看分析下这些可能存在的区别。

越来越多的中国产品开始走出国门,产品设计方面需要注意哪些差异呢?

索引

品牌视觉 ·3分钟阅读

字体 ·1分钟阅读

特性功能 ·8分钟阅读

产品细节 ·4分钟阅读

品牌视觉

颜色作为用户接触产品时对产品的第一感知,任何产品在对待色彩这个问题上都会非常慎重,大部分的产品色调都是基于品牌主色调或通过情绪板分析得出的。通常一个以女性用户为目标的产品会选用粉色,而一个主打科技概念的产品肯定逃不过蓝色或绿色。

了解这十个差异,出海产品设计不再慌

有人统计了2015年 App Store 免费榜下载的前200个产品的 icon 颜色,将它们分类成红色系、绿色系、蓝色系以及黑白灰色系。可以看出在全世界范围内,和国内一样,红色系和蓝色系的产品依旧是最安全的选择。如果再做细分的话,橙色、黄色、粉色、紫色等颜色也不罕见,这与国内产品纷纷扎堆选择「科技蓝」与「喜庆红」形成了反差,在国内的前100名产品中只有5款绿色产品而根本找不到黑白灰色系的产品。这时不难得出一个结论:倘若你的产品想从 App Store 列表中快速区别于其他产品,选择绿色或者黑白灰色系不失为一个机智的选择。

值得一提的是,极简主义在北美北欧等国家备受推崇,相应的黑白灰或单色调应用会相当常见,但在国内黑白灰可以说是一种禁忌。而在东南亚、南欧以及南美,这些地区有着热情与开放的文化,在钟情丰富多彩的配色同时也并没有那么多的颜色禁忌。

了解这十个差异,出海产品设计不再慌

在国内的「丧文化」与国外的「极简主义」融合之后,年轻人会通过黑白灰配色来标榜个性

建议:如果通过理性分析得出的色彩方案,其实不必太过纠结,在没有过多的视觉禁忌的前提下,海外用户的接受程度是很高的。大家可以尽量大胆的用色,只要符合自己产品的调性即可。同时注意与同类型产品之间的区分与竞争,毕竟在视觉领域,与众不同是一个加分项,更能帮助产品从诸多产品中脱颖而出。

接下来说说吉祥物与标志

了解这十个差异,出海产品设计不再慌

上图是在网上流传很长时间的一张图,充分展现了中日美三国的图形设计特点。不难发现国内的企业对动物或吉祥物有着特殊的钟爱,欧美企业倾向于用各种形状或抽象图形来用作标志,日本企业几乎清一色都是英文字。日本在明治维新后开始大量吸纳西洋技术,其中也包括部分文字和语言,而日本的超级财团或老牌企业大多也是诞生在那段时间,一方面为了响应国内全面西化的号召,另一方面也是相当有国际化视野和前瞻性的考量,所以大部分企业都是用了西文字母来做品牌标志,后来的公司也就延续了这一「国民习惯」。

而欧美其实也并不像上图中所表达出来的尽用图形,也会有西文单词(比如诸多奢侈品牌、可口可乐、乐高等)或动物形象(比如 Twitter、Evernote等)作为标志, 不过最终都会把这些形象图形化,这也正说明这些国家和地区对不同形式的表达接受度更高。

了解这十个差异,出海产品设计不再慌

那为什么中国的互联网产品偏爱使用动物作为标志呢?这大概是因为这些小动物是几乎无人不知的,可爱、亲切的形象更容易被广大的用户群体接受,也更容易被人记住(比如很多国内的互联网产品倾向于用叠词作为品牌,比如探探、陌陌、脉脉等)。而且另一方面可以看出我们有着比较明显的从众心理,当某个产品获得成功,有些产品倾向于学习这款产品成功的模式而非自己另辟蹊径。

建议:当我们需要推广面向世界的产品时,更具国际化、更有通用艺术价值的形象会更容易被最广大的用户群体接受,如果单独从某个具象的角度切入,难免会过于局限,如果造型过于可爱则容易只抓取到喜欢「可爱」这个特点的用户,过于复杂的图形也不利于用户的记忆。

字体排版

文字排版的目的在于提高信息获取的效率,在这方面应该是设计师能够欢欣鼓舞的一个部分,因为西文世界有着比中文多得多的屏显字体可供选择,其字体家族也相应的丰富得多,我们也能更加充分的利用字体的特性去服务于产品,提高信息效率。那么我们在海外产品的文字排版中有那些值得注意的部分呢?

与中文不同,同样的内容也许中文两个字的宽度就可以实现了,英文则可能需要很长的宽度,更不提其他小语种了,因此我们要考虑屏幕的宽度以及适配,一行之内不要显示过多的内容或模块

西文的字体排版有相当多的玩法可供尝试,比如作品名通常会使用意大利体( Italic aka. 斜体),小型大写字母的广泛使用( Small Capital ),段落文本首字母下沉等等

注意不同系统对默认字体表现,如果要嵌入第三方字体,确保已经获得授权

充分利用字体家族的字重选择,提高内容的层级划分,提高阅读效率

了解这十个差异,出海产品设计不再慌

Medium 的 Design Lead 通过大量的测试调试出最佳 web 呈现方式的下划线

产品整体质感和品质的提升是积少成多的,而精良的字体排版则是优秀产品的重要组成部分。良好的排版不一定能帮助你更好地理解内容,但确实会让你使用感觉更好,从而能更加积极地对于体验做出响应。

关于字体的选择与使用,可以参考前段时间发布的「」

闪屏

闪屏即是 iOS 人机交互指南(下文简称为 HIG)中提到的「Splash Screen」,不过它出现在 HIG 中是以反面形象出现的,HIG 指出:

Don’t advertise. The launch screen isn’t a branding opportunity. Don’t design an entry experience that looks like a splash screen or an “About” window. Don’t include logos or other branding elements unless they’re a static part of your app’s first screen.

对于产品冷启动之后呈现给用户的界面,Apple 希望这个页面承载的是「缓解用户等候数据加载时的焦虑心情」,建议将 App 首页的骨架结构以图片形式呈现出来,而不要对这个页面进行任何美化、包装、宣传等行为。

然而在国内机智的商人们开始对这块空白区域打起了主意,大家纷纷利用这块区域进行品牌宣传或情怀展示,比如微信的启动页,又比如新浪微博的启动页。更有甚者,也是目前最众所周知的做法,几乎每家国内产品都开始利用启动页进行商业营销,已经成为了很多产品的不可或缺的收入之一。

了解这十个差异,出海产品设计不再慌

海外主流产品会将启动页用于品牌展示,而右边两个 Facebook 家产品都严格恪守着 HIG 规范

在海外的产品中,尤其是欧美主流产品中,尚未见到过利用启动页做营销的案例,绝大部分都是做简单的品牌宣传。一旦应用内容加载完毕就直接进入了产品,而国内大部分产品都需要看这个大概 3 秒左右的「广告」,即便它提供了「跳过」的选项,也是对用户体验的损害,既然可以跳过,说明产品的内容已经加载出来了,这种情况下还需要我多点击一下跳过?不过在国内市场已经形成了这样的氛围,说明这个操作的确是对产品与企业有价值,那么设计师就需要思考如何将商业利益和用户体验之间的平衡拿捏好。

建议:面向海外用户的产品需要在商业利益与用户体验中做个抉择,确保在尽可能的降低对用户使用产品体验的前提下做到利益最大化,减少展示时长或将品牌与营销结合会是个不错的选择。

小红点

相信每个中文互联网的用户对 App 里面的小红点都不会陌生,小红点在国内很多应用中承载着可能与用户关联不大,甚至伴随推送出现的场景,对用户的使用从某些意义上来说是一种打扰。而需要说明一下的是,我们在这里说到的小红点不是 App icon 上的带数字的通知数,而是界面中的一个个小红点,以微信为例,从功能角度来讲,小红点通常被用于提示不重要的新消息以及面包屑引导(引导用户使用指定功能)。而微信已经是产品设计上比较克制的 App 了,你通常不难辨别小红点的意图,但是在其他很多产品中,红点已经被滥用了,大多带有推广以及产品功能曝光的指向性。

了解这十个差异,出海产品设计不再慌

而在海外产品中,要找到我们所指的「小红点」不容易,在带有社交功能的产品中可以常见数字提示的「Badge」,也就是通知数,如果出现了小点点,从产品含义上也很容易直观的了解到它的含义,大部分场景是用于提示有新变化,比如 Twitter 的时间线如果有更新,会有个蓝色的小 Badge,又比如 Youtube 的订阅内容如果有新内容出现,也会有个红色的小 Badge。

了解这十个差异,出海产品设计不再慌

建议:勿滥用小红点,如果要使用,需谨慎考虑使用场景与目的,且无需局限于红色,Badge 的核心作用是将和用户密切相关的内容提示给用户。

权限获取

了解这十个差异,出海产品设计不再慌

而说到中国特色产品设计,相信对产品体验有一定要求的同学会对很多产品的「启动权限三件套」会感到不爽。有没有试过当你下载一款新软件,一打开,它就请求获得你的通知权限,你还没有做出决策它马上又请求你的通讯录权限(这个现象在微信兴起之后逐渐消失),如果你手速够快点击了同意或拒绝,它马上又会要求获取你的地理位置权限。举个令人震惊的例子,假如你听着歌儿点开腾讯投票的小程序,它会将你的音乐暂停了,也说明它取得了你的音频播放权限,你会有点诧异:为什么一个投票程序会需要我的音频权限呢?类似这样的一顿操作之后,如果不是什么非用不可的产品,我除了想删掉它已经没有别的想法了。

 收藏