【译文】2015中国网页设计趋势

Data storage concept illustration

翻译:刘海静

从中国互联网令人瞠目结舌的发展速度与网络产业本身瞬息万变的特点中,我们能发现很多相似之处。至少这一点很明显:要对两者做出预测都太难了。但是如果能把它们放在一起考察的话,我们还是可以对中国互联网科技的现状有个大致的了解。假如我们想要理解一个如此变幻莫测的领域,就必须把目光放得尽可能长远,这样才能在潮流即将到来前做好迎接它的准备。

但我必须指出:在中国,网页设计的现状与我们自己的有很大不同 — 这一点至少在两三个方面表现得尤其明显—中国用户的期待与西方用户也存在不少差异。在这篇文章中,我将探讨一些与中国网页设计有关的问题,供那些想涉足中国市场的人士参考,包括纯移动社交平台如何成为当前网页设计的新主流,包括中国网站那些精美的网页都是出自谁人之手等等。

 

一个新的典范

Saber Zou是战斗在移动端网页设计前线的一名设计师。他是Logic Design的创意总监, 这是一家位于北京的跨领域数码工作室。 AnimalsAsia的网站Exploring Moonbear,就是他们的手笔之一。这是中国最具视觉创意的网站之一,也是少数获得过Awwwards每日最佳网站殊荣的中国站点之一。

design-trends-2015-01

Saber Zou在Logic Design总部测试移动端网站

我问他:“你认为中国在响应式设计方面做得怎么样?”

面对我的问题,Saber耸了耸肩,好像我问了一个错误的问题一样。他说:“到目前为止,中国的响应式网站并不是很多。因为大多数客户希望针对不同的设备分别建立不同的网站。而且说到响应式网站,我们有别的应对之道。我们并不会把桌面端网站看成是一个“母站”,或是一个更精简的网站的高级版。事实上,有相当多数量的中国公司干脆绕开了桌面端网站。”

在众多无比清晰的事实面前,放弃以西方思维看待网页设计为何竟然花了我这么多时间,我也不知道,但Saber的话无疑让我最终实现了这个转变。这是关于网页设计标准的转变:在西方,对“移动优先”的设计策略我们尚未适应,而在中国,移动端体验已经是不可逆转的主流趋势,其影响已经超过了桌面端网站。移动端设计从一开始就是独立存在的,到了今天,桌面端网站反而成为设计中一个可有可无的选项。

 

移动第一?拜托,中国早就“移动唯一”了

多年以来我们一直在谈论在中国移动设备用户的数量是如何惊人。早在2012年尼尔森公司(Nielsen)的一份报告就指出“在中国,使用移动设备上网的人数已经超过美国。”现在这个数字还在扩大。The Next Web网站一篇发表于2014年7月的文章也声称:

截止到2014年6月,在中国使用移动设备上网的网民数量已增至83.4%,首次超过了通过PC上网的人数。

你可能会想:“但是在西方,人人都有智能手机啊。”可能你自己就有一部,对吧?要说谁没有智能手机,那才奇怪呢。所以你可能很难想象为何在中国为何用手机上网的人群数量是如此庞大,更难想象中国用户的习惯与其它地区用户的习惯有多大的差异。事实上,不仅在移动端用户的人数上存在差异,更重要的差异在于中国用户对移动端的依赖程度远远高于国外用户。这一点是有数据支持的,但是数据远不如具体的例证来得生动,因此我愿意以我的经验来列举一些形象的例子:

在中国,手机号码的重要程度几乎可以与社会安全号在美国的重要程度一样相提并论。万一你的手机号码无法使用了,这意味着你同时也无法利用网上购物网站,数字钱包,社交网站等一系列服务,因为手机号码是直接与这些网站的账号挂钩的。由于这个原因,遇到需要把手机号码与身份证号码联接的情况,用户会极为慎重,因为这可能会导致身份证被冒用等危险。

多数的中国网站默认手机号而不是电子邮件地址为登录账号及密码寻回工具—或许是因为在中国,电子邮件的使用频率并不如在西方那么高。

design-trends-2015-02

中国最大的网站之一—淘宝网的密码寻回流程:请输入您的手机号/用户名/电子邮件地址

中国的一些电子支付平台允许用户通过扫描QR码的方式来支付从打车,就餐到网上付费电影等一系列的费用。对于三百人民币以下的费用,甚至不需要输入密码或验证身份。这意味一旦用户的手机被盗,无异于私人日记本被盗一样令人惶恐。

世界银行的数据显示,2011年中国平均每1000人保有69量机动车(包括轿车,卡车与公交车)。而同年美国每1000人则保有768量机动车,所以你可以想象,每天乘公共交通工具上下班的中国人有多少—这意味着这些人每天有相当长的时间要盯着移动设备的屏幕。

由于这种牢固的移动设备文化,如此多的公司放弃桌面端而专注于移动端的做法也就不奇怪了。这种现象被称为“轻应用(light apps)”—它自诞生之日起,很快便成为与客户互动的普遍方式。

 

轻应用

多数桌面端网站依然停留在2010年的水平。可以预见,2015年许多中国公司将会重点开发轻应用(light apps)。轻应用是一种不提供下载内容,定位高度精准的微型网站,通常基于HTML5构建。当然,它们也有固定的网址(URL),如果你一定要坚持的话,也可以用桌面方式打开它,但它们在桌面端的显示效果十分糟糕。有时候甚至根本无法使用,因为某些网站的导航仅支持触屏操作。

轻应用需要用户关注的时间极短。它们一般只有一个页面,传递的信息也很单一,默认为只供一次浏览。换句话说,用户可能只是打开一个轻应用,随便翻翻之后,便通过移动设备将它分享给朋友,之后便再也不会看它一眼。

 

轻应用风头正劲

Live App是一家致力于轻应用开发的中国公司,该公司承接的类型多样的项目也证明了轻应用的灵活性。

下面的另一个示例轻应用也是由中国公司开发的。把轻应用下载到你的手机上有两种方式:一种是中国方式,使用移动设备直接扫码即可自动下载,另一种是陈旧的非中国方式,你必须在你的手机上打开一个URL链接才行。如果你非要在桌面端打开这些轻应用,或许下载还可以,但很可能无法使用。但我鼓励你使用任何一款桌面端浏览器,通过输入URL的方法来打开一个轻应用试试,这样你就能更直观地感觉到中国的开发者对桌面端App的忽视程度。知名公司甚至会利用轻应用来分享年度财报,就像下面给出的Cheetah Mobile(猎豹移动)的例子一样。

design-trends-2015-03

Cheetah Mobile(猎豹移动)利用这款轻应用将其财务情况分享给用户

而新兴的移动设备制造商Xiaomi(小米),则用它来发布招聘信息(扫二维码或直接访问网址):

design-trends-2015-04

小米公司利用轻应用来招聘合格员工。

另一些公司,如联想,利用轻应用来发布庆祝信息(直接访问网址):

design-trends-2015-05

联想庆祝“三十年的记忆”

还有一些公司利用轻应用为即将上映的电影宣传造势(直接访问网址)

design-trends-2015-06

这款轻应用的主题是“你真的懂姜文吗”?

它还可以用来发布新闻特写,例如 NetEase(网易)对2014年空难的回顾):

design-trends-2015-07

网易发布的这款轻应用回顾了2014年触目惊心的空难

 

分享而非买卖

开发者发布一款轻应用的目的通常只是鼓励用户将它分享给他人—直接收费或间接收费的情况非常少。但是与西方用户分享至某个社交媒体的方式不同,在中国典型的做法是鼓励用户在同一个网络平台上分享:这个平台吸引了83%的中国手机上网者,在西方却很少被提及。

 

微信:每月五亿活跃用户参与的轻应用革命

根据CNNIC公布的数据,中国目前有“5.27亿人应手机上网,其中4.38亿是微信用户。”.这个数字比推特的活跃用户足足多出一倍。

对来自中国之外的用户,你或许会问他们在 email, Google+, Twitter, Facebook和SMS中更偏爱哪种联系方式,从时间上看,社交媒体并非起源于中国,“通过哪个社交平台联系你”显然也不是个中国式的问题。当然,在中国也并非是只有一种网络社交平台,但不论有多少平台,在某个时期内总有一个占据绝对优势的平台,吸引着全国大多数的用户。

目前,这个平台是腾讯公司的QQ。其次就是新浪微博(中国版推特)。

design-trends-2015-08

QQ国际版界面

但是Saber告诉我说:“新浪微博现在已经成为一个阅读和传播新闻的平台,不再像之前那么侧重于社交功能了。”

今天中国最大的社交平台是腾讯公司旗下的WeChat,中文名叫做微信。微信诞生于2011年,是一款仅限于在移动设备上运行的工具,它综合了文本短信,群聊和类似于facebook的分享功能,另外,微信的“附近的人”这一功能还根据用户所处的位置列出了一定范围内的所有微信用户。不仅如此,它还支持自己的浏览器且为开发者提供API。

design-trends-2015-09

我在在微信“朋友圈”中向朋友抱怨北京的空气质量。
 
design-trends-2015-10
 
微信钱包

 

轻应用与微信

微信是如此受欢迎,以至于多数轻应用会专门为微信而做优化,而“分享到微信朋友圈”则是很多轻应用唯一的互动选项。

Thomas Graziani是一个微信专家,他创建了总部位于北京的基于网络社交的商业公司Walk the Chat, 他说:“我读过许多中国以外的移动应用程序开发者写的文章,他们必须在不同的浏览器中测试自己的程序。但如果是在中国,我们只需在微信浏览器中测试轻应用,如果在微信中没问题的话,那就是没有问题。这说明了微信有多么深入人心。”

 

二维码无处不在

二维码:开始用着有趣,以后问题多多? 在其他地方,或许如此,但在中国,二维码就像钢铁侠一样顽强。它最初的时候是受了些挫折,但现在却雄心回归,打下半壁江山。在中国,二维码几乎无处不在,不仅在印刷品中,在桌面端页面和电视广告中也十分普遍。

design-trends-2015-11

只需用手机扫描一下二维码,便可以使用这款圣诞节贺卡轻应用

扫描桌面端设备屏幕中的二维码听起来也许很怪,但是在中国却是非常普遍的做法。由于微信用户众多,二维码通常会指向某个微信账户或某个在微信浏览器中可以打开的轻应用。即便是非移动设备,如纸质广告,名片等,也可以通过二维码为其用户提供了微信入口。

谈到微信对二维码在中国兴起所做的贡献,怎么强调都不过分。许多商业广告甚至连网址都省了,而只有一个与公司页面联接的二维码。

 

更多示例

design-trends-2015-12

淘宝网登录界面中的二维码

design-trends-2015-13

支付宝页面中的二维码

design-trends-2015-14

中国最大保险公司之一—平安保险官网页面中的二维码

design-trends-2015-15

连中海油这样的公司页面上都有微信二维码
 

中国在网页排版上仍有优势

在以往,由于标准的中文网页字体只有四种,使中文网页的美化在一定程度上受到影响。如果你想详细了解这个问题的话,不妨读读我的这篇控诉,简单来说,主要问题在于中文包括成千上万个字符,而3到7M大的字体文件嵌入起来相当困难,因为它们会极大地延长加载时间。好在现在已经有了Youziku这样的字体服务商, 这是一家位于台湾,致力于提供汉字解决方案的网站。

design-trends-2015-16

有字库

我自己也曾体验过有字库的服务。总的来说它非常棒,即使用鼠标选捡不规范的汉字也轻松自如。但这种服务毕竟才刚刚起步,我至少就发现了三个不足之处:

  1. 笔画较细的中文字体渲染效果不佳,在Chrome浏览器中简直是支离破碎。如果中文字体很细的话,渲染之后有些笔画几乎都看不到了。对于较粗的字体就没有这个问题,在Firefox浏览器中也一切正常,但这仍然是个亟需改进的缺憾。
    design-trends-2015-17
  2. 加载页面与加载字体时存在一定的时间间隔。其结果就是页面加载时闪烁不定,然后加载字体时又会闪烁一次。
  3. 目前有字库的页面和安装说明只有中文版。而另一家字库Justfont, 则有英文的说明,但可供选择的字体少了很多。

 

一些精美的桌面端网站

SIXPENCE

当Seah向他那可爱的妻子求婚的时候,他开发了一个个性化的苹果手机App,只有一个人能打开它,那就他的妻子。后来,当他妻子的时装设计工作室开张的时候,他用尽全部心思为她设计下面这个获奖网站。

design-trends-2015-18

Sixpence 商店

 

EXPLORING MOONBEAR

这个美丽的网站是为一个美丽的目的而创建的。好吧,事实上是两个目的:首先,Exploring Moonbear主要是AnimalsAsia为了提高公众对黑熊取胆这种残酷行为的认识而创建的, 它的另一个功能是展示IE 11的众多特色选项。

design-trends-2015-19

Exploring Moonbear

 

WORDS CAN BE WEAPONS

这个网站由Ogilvy Asia为沈阳心理研究中心创建, 意在提醒公众注意负面言语对儿童造成的伤害。网页展示的由中文里的粗鲁言语组成的刀枪和其他武器。

design-trends-2015-20

Words Can Be Weapons

 

30ML

这个获得过FWA大奖静帧动画网站是中国的一家创意机构30ml创建的,居然动用了粘土模型。

design-trends-2015-21

30ml网站
 
ADIDAS ORIGINALS

同样由30ml创建, Adidas Originals网站的成功也证明了中国的网页设计已经达到了国际水准。

design-trends-2015-22

Adidas Originals China

 

DASHILAR(大栅栏)

G_Lab创建的Dashilar网站是北京复兴传统文化的一部分, 政府,设计师,建筑师与投资者一道,致力于让这一曾经兴旺的区域重获新生。

design-trends-2015-23

大栅栏

 

结语

对那些想进入中国市场的外国公司,我的建议只有一个:本地化并不是将桌面端网站翻译成中文便万事大吉。听起来不那么顺耳,但却是一个事实。按中国的方式做,否则不如不做。你必须了解中国用户的特点及他们的习惯,并尽力利用他们熟悉的渠道(如微信,轻应用,二维码等等)与他们交流。

 

文章编译来源:视觉中国
顶部图片来源:http://bwekl5gwew43yjddqozlr2y.wpengine.netdna-cdn.com

 

 

 

发表评论

您的电子邮箱地址不会被公开。