阿里国际站用户体验设计案例精选

简介: 以互联网及IT产品为主打的中国产品,走向全球市场的步伐越来越紧迫。本文选自《国际用户体验设计 : 阿里国际站用户体验设计案例精粹》,看国内第一支数年专攻全球化用户经验设计的资深团队——阿里巴巴UED,如何以商业案例的形式,向国内同行分享跨国设计理念及宝贵经验。

  2014年6月的一个清晨,我照例打开邮箱查看邮件,其中一封邮件引起了我的注意,是国际UED的设计总监傅利民先生发来的。傅先生长期驻扎在阿里美国,如果没有紧急的事情,一般不会单独发送邮件给我们。邮件的内容是关于阿里巴巴本次IPO需要使用到的官方网站Banner的。
 “咦,这个不是已经定稿了吗?”我心里想着,几个月前我和团队里的另外一名同事尹哲提交了官方网站Banner的设计方案,可是我们努力做了几周的方案没有通过,最终选择了美国团队的方案,当时那种沮丧的心情现在都还历历在目。难道这件事情有变?邮件里没有多讲,只是讲明了要和AliExpress的一位同事高令飞合作,后续会再和我们电话沟通。
中午和AE的同事约好了见面,一起和傅利民先生远程进行了电话会议,原来事情的缘由是这样的:上次的方案敲定之后,已经全线完成了,但是在交由马总审核的时候被否决了,马总认为:“作为一家中国的上市公司,之前的风格没有任何中国特色,而且没有展现出阿里未来的方向,在IPO这件事情上,任何事情都希望做到极致,尤其是上市那天会有无数人浏览阿里巴巴的网页,所以这个方案需要重新设计。”而美国团队已数次尝试着修改,都无法达到要求,因此这件事情又交由我们中国设计师来做。
 “Paul(傅利民先生英文名),目前的要求是什么?您能多提供给我们一点信息么?”我问道。像这种无法直接沟通的项目,每一点信息对我们都极其重要。
 “首先要展现出阿里巴巴目前所有的业务,我们希望是用手绘的方式表达,哦,还有,马总说过,阿里巴巴是一家娱乐型的公司。”
  我在纸上记下几个关键字——手绘,娱乐。
 “那时间呢?能给我们多少时间?”
 “上市的时间还不确定呢,大概还有两周吧。”
  电话会议很快就结束了,高令飞看着我,问道:“接下来呢?”
 “先手绘草稿吧,目前还是没办法把握住方向,多画几稿,看看高层的反应。”
我们很快就输出了几幅草稿,因为之前都是由美国团队介入,所以我们还是会先把草稿发送给美国的团队,由美国团队和香港团队沟通,然后反馈给我们。由于地跨三地,还有时差的问题,效率简直差极了,有时候我们白天的时间都一直在等待邮件反馈而无法动手,所以我和令飞决定——开启美国时间模式,每天凌晨和美国团队沟通,得到反馈,这样白天我们就可以动手了。
  没过多久我们就积累了几十张草稿,平均每一天都会有几个方案产出。根据之前的关键词,我们把阿里巴巴比作一个能够给人带来欢乐的游乐场,大家通过带有阿里巴巴字样牌匾的徽派建筑大门,进入到阿里巴巴这个充满阳光和欢乐的地方,我们把每一项业务都比作一个游乐场的设施,共同组成了一幅画。
图片描述
  我们把方案发送给了香港的融资部门,很快就得到了回复:


Hello guys!
We presented the initial drafts to Jack(马云) and Joe(蔡崇信) and they are really happy with the drafts.
They want to go with this concept: 阿里巴巴像一个游乐场,给人们带来幸福。
Great job guys! We have some comments on the design for the next draft.


  邮件里显示我们的方案已经获得了高层的认可,可以继续了,更重要的是通过密切的电话沟通,我们在合作中和多个团队建立了彼此间的信任,而这点也是非常重要的。我们现在可以直接和香港团队沟通,不再需要美国团队这个中间把控环节。看上去似乎是很不错的进展,可是事实上这才刚刚开始。
  我们开始微调画面的每一个元素,1版、2版、3版、4版⋯⋯构图时,因为一直缺少串联所有元素的设定,这么多元素在画面上呈现松散,一直无法达到最好看的构图效果。另外我们目前还只是构图,色彩运用的方式我们完全没有考虑。
当遇到这样的瓶颈时,我认为最主要的原因还是信息不足,我们需要更多的信息。这时候,信息就是画面的元素,我们要和需求方直接沟通!
  马总?蔡崇信?武卫(CFO)?IPO阶段每个人都忙得满天飞,根本联系不到他们。我们能找到的最接近他们的就是Cecilia——一个非常可爱的香港女孩,她是武卫的助手,武卫让她来负责这件事情。另一个好消息是:我们的团队又增加了一名新的成员——谢易慧,她是一个非常擅长水彩画的女孩,有了她的帮助,我们两个人可以全身心地投入到创意和构图当中去了。
  Cecilia每次都会非常负责地标注出老大的意见,里面的每一件物品都有着自己的含义,代表着阿里巴巴的业务重点和方向,位置体量都根据这些来进行安排。
  通过Cecilia,我们了解到了一个非常重要的细节,也是阿里巴巴的整个大策略——生态圈。整个集团围绕支付宝所建立的生态圈系统,这个概念一直处于保密的阶段。
  可不可以用支付宝的Logo串联阿里巴巴的所有服务?
  有了这个思路,一切瞬间变得豁然开朗。我们把画面分成了左右两个部分——国内与国际,这两部分分别代表着阿里巴巴的国内和国际业务,而支付宝成为了串联两者的一条路。在这条路上,有代表阿里巴巴国际业务的Alibaba.com、AliExpress以及菜鸟物流。整个画面中的元素因为这条路变得符合逻辑且井然有序。
  这时候色彩部分也有了重要进展。考虑到运用中国元素表达公司风格,我们以水墨展现的方案也获得了允许。这时离最终IPO的倒计时只有3天,整个项目进入了最后的冲刺阶段。
  因为在我们完成构图及色彩方案后,高管对于画面给予了非常高的评价,希望不仅仅用于集团网站,更能用作全球重大的路演背景,因此画面的尺寸变得非常巨大,这使我们的工作量有一些增加,特别是在着色部分。
着色远比我们我们想象中的还要复杂,之前给出的方案只是部分上色,所以还好控制,但是现在这么多的元素都上色之后,我们感觉非常糟糕,总觉得整个画面厚重得无法呼吸。另外这幅画谢易慧和我已经连续修改了十几个小时,反复且高强度的工作让我们陷入麻木,导致我们完全无法判断出怎样才是好的。
 “哇,好漂亮,不过前面这个地球的颜色是不是太深了呢?”站在身后看到我们这幅画面的安婴说道。
真的是一下被点醒。地球在画面的前部,而且体量大,用明度这么低的色彩,使得整个画面都透不过气来,这样修改了一下后,一切变得豁然开朗。接下来我们核对了画面的每一处细节,每一个细节都需要最后的完善,包括里面人物的头发颜色。
最后冲刺的过程中,我们每完成一点修改就会和香港总部确认,不落下每一处的细节。Cecilia、谢易慧、高令飞和我,每个人都在期待着最终完成的消息。
  8月25日20:46 ,Cecilia给我们发来了一封短信:“可以完成了!!!!!!”,短信充斥着激动之情。
  此时,我们已经不知道说什么好,这一串叹号有完成的激动,也有感叹过程的不易。
图片描述
图片描述
  在IPO的时候,当我看到这幅插画在华尔道夫的路演中作为马总演讲的背景板、路演的封面、以及阿里巴巴官方网站的首页时,作为其中的参与者,总是有点小自豪,想到整个的过程,还是记忆犹新。
  本文选自《国际用户体验设计 : 阿里国际站用户体验设计案例精粹》。
                 图片描述
  想及时获得更多精彩文章,可在微信中搜索“博文视点”或者扫描下方二维码并关注。
                    图片描述

相关文章
|
物联网 开发者
阿里云开发者 DevUP 沙龙 -成都站 -阿里云企业AIOT技术与解决方案沙龙邀你参加啦
9月10日,阿里云计算有限公司诚邀您参加在成都蚂蚁C空间举办的阿里云企业AIOT技术与解决方案沙龙,共同探讨如何快速打造企业级物联网技术平台和应用,实现数字化转型。
1297 0
阿里云开发者 DevUP 沙龙 -成都站 -阿里云企业AIOT技术与解决方案沙龙邀你参加啦
|
开发者 云栖大会
云栖大会 | 阿里云招募各大技术领域开发者讨论学习
阿里云智能在2019年5月31日正式上线了阿里云开发者社区,为开发者提供包含博客、问答、在线学习、MVP专家、上云工具、开源软件、创业扶持、技术公益等一系列服务,以满足大家学习、交流、云上工作的需求。云栖社区也会同步转型,升级为阿里云内容平台,打开开发者的外延,纳入更多内容与策划。
1393 0
|
异构计算 开发者 编解码
精华来了(含PPT) | 淘系技术嘉年华-杭州站
2019年8月3日,「淘系技术嘉年华-杭州站」移动端的技术创新和实践,在阿里巴巴西溪园区举办,38 度的高温也挡不住大家对技术的热情,170 位开发者齐聚,进行了一次面对面的技术交流。线上直播在线观看达 38000 余人次。
8835 0
精华来了(含PPT) | 淘系技术嘉年华-杭州站
|
前端开发 JavaScript 存储
《阿里云前端技术周刊》第十期
作者:@南逸(chuck.ql))校对:@染陌(ranmo.cy)) 知乎:阿里云中台前端/全栈团队专栏Github:阿里云前端技术周刊 给我们投稿:传送门[链接]()参与交流:传送门 前端速报 Jetbrains,发布了2019年开发者报告,可以去看看有多少人跟你习惯一样;了解一下 Ap...
1329 0
《阿里云前端技术周刊》第九期
作者:灵沼校对:染陌 知乎:阿里云中台前端/全栈团队专栏Github:阿里云前端技术周刊 给我们投稿:传送门参与交流:传送门 前端速报 拒绝重复造轮子!GitHub推出新功能repository template,帮助开发者在所有项目中重用代码 WHATWG 击败 W3C,赢得 HTML 和 ...
1333 0
《阿里云前端技术周刊》第八期
作者:若欢校对:染陌 知乎:阿里云中台前端/全栈团队专栏Github:阿里云前端技术周刊 给我们投稿:传送门参与交流:传送门 前端速报 Angular 8 发布,想知道新版本都有哪些特性,快来戳我瞧瞧吧。
9078 0
《阿里云前端技术周刊》第七期
作者:联民 校对:染陌 知乎:阿里云中台前端/全栈团队专栏 Github:阿里云前端技术周刊 给我们投稿:传送门 参与交流:传送门 前端速报 微软官方放出针对 Mac OS 用户的 Microsoft Edge Canary 预览版本,它基于开源的 Chromium 打造, 在 Tab 切换和媒体播放上, 针对 Touch Bar 做了特定支持,下载地址 Node 12.
7015 0
|
JavaScript 算法 前端开发
《阿里云前端技术周刊》第六期
作者:靖鑫校对:染陌 知乎:阿里云中台前端/全栈团队专栏Github:阿里云前端技术周刊 给我们投稿:传送门参与交流:传送门 前端速报 V8引擎7.5版本发布,最新的V8引擎带来的新特性可以让我们预知未来Node及Chrome将会拥有的能力,本次它主要带来了WebAssembly的隐式缓存能力...
2036 0
|
前端开发 JavaScript 开发者
《阿里云前端技术周刊》第二期
作者:也树 校对:染陌 素材:也树、英布 《阿里云前端技术周刊》由阿里云智能商业中台体验技术团队整理编写。 知乎:阿里云中台前端/全栈团队专栏 Github:阿里云前端技术周刊 给我们投稿:传送门 参与交流:传送门 前端速报 本周 Node.js 12 发布第一个 Current 版本,包括 V8 引擎升级、ES 新特性支持、启动及解析速度提升,以及诊断工具的优化升级等,官方原文介绍请看 Node.js 12 值得关注的新特性。
2532 0