• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 对话腾讯设计师:微信车票背后的设计故事

对话腾讯设计师:微信车票背后的设计故事

作者:腾讯FITdesign 字体:[增加 减小] 来源:互联网 时间:2018-08-23

本文主要包含情感化设计,用户体验,用户流程,腾讯微信,需求等相关知识,腾讯FITdesign希望在学习及工作中可以帮助到您

微信车票的设计师试图通过「微信车票」来收集用户情感,还原用户出行场景,从而打造出一个温暖的产品,重新建立起人与人、人与出行之间的深层联系。

公交车票,对于现在的我们而言或许稍显陌生,但在回忆里,那曾是一代人的情怀,伴随着共同的成长,伴随时光的逝去,让我们品味一路风景与欢乐,到达人生的每一站。

小小的车票虽不起眼,却是历史最忠实的记录者。从1899年中国出现首辆有轨电车,发行弥足珍贵的首套车票,到无人售票公交、BRT快速公交、观光专线的出现,车票的不断变迁见证了中国公交的发展历程乃至中国日新月异的发展进程。

车票上的面值反应了当时的经济状况,公司的名称反映了当时的社会制度,标语口号反映了当时的时代特征,甚至从印刷车票所使用的纸张中也可以看出当时的物质条件情况。

但随着时代的发展,公交车票却渐渐淡出人们的生活。

为了重拾那份遗失的小美好,结合时代发展的步伐,腾讯设计师为用户打造了一系列电子车票,让传统车票以新的生命出现在大众视野中。

今天,你能在手机上收到一张好友赠送的微信车票,小小的票面上或许画着107路公交——那条学生时代上学和放学的必坐线路。看到这么用心的车票,让人倍感温暖。

微信车票的设计师试图通过「微信车票」来收集用户情感,还原用户出行场景,从而打造出一个温暖的产品,重新建立起人与人、人与出行之间的深层联系。

一、设计对话

张贝:在车票原型试着推出之时,其实我们稍有忐忑,担心现在的年轻人不认「车票」这个概念,设计师和产品经理们做了一些用户测试,发现微信车票这个概念受到了很多用户的喜爱,这给了我们很大的信心继续做好这个功能。

Q:怎么想到要设计车票这个功能的?

张贝:微信车票这一个功能其实是在「腾讯乘车码」基础上延展出来的一个情感导向的功能性产品,我们旨在打破乘车这个固有的「体验孤岛」,让车票来串联用户之间的情感传达。

在开会讨论乘车码产品运营时,我们想到其实自己或身边有一部分人其实并不是每天都乘公交车的,但这部分人有乘车的消费能力,比如他要给身边的人,朋友支付车费,月卡等行为,或者当他要告诉朋友如何刷乘车码的时候,我们隐隐感觉到,需要有一个载体来「形象直观」地满足用户之间的这些隐性需求,你说他是强需求么,也不见得,但你总得承认你给别人买过月卡,买过车票吧,而这个「赠予」行为本身是具有强烈情感决策因素的,而单纯的一个二维码,似乎还并不能很好地达成这种用户间情感诉求,所以我们提出了「车票」这个概念,试图解决这些隐隐的痒点。

幸运的是,我们的产品经理动作也很快,第二天就画了个 ppt,来向决策方阐述和推动这个创意的落地,最基础的产品原型我们整合了很多情感进去,比如语音啊,视频啊,但最后发现那些最熟悉的画面和文化元素才是最能被大家认可和传播的体验点,所以才看到了现在的这样一些车票呈现方式。

所以说,在腾讯,我们其实是有这样的习惯性思维和敏感度,即注重发掘用户口碑与营销导向兼备的产品形态,在每个产品上,如果都能设计出类似于下一个红包级别的产品体验,那对于用户和腾讯来说,都是不错的期待。

黎翠霞:乘车码产品的体验目标,即「一种微信用户刷码出行的支付工具」。腾讯乘车码功能其实已经很好地完成了这个体验目标,使用时教育成本低、用户路径短,体验流畅,同时解决了各个利益相关者的问题,对用户层而言,可以获得便捷的支付方式,再也不用操心「没带零钱、没带公交卡、公交卡没充值「的问题,冷静思考一下,我们会发现乘车码并没解决用户之间线上传播的问题,始终看起来很像个高效工具,于是我们就尝试用车票这一概念来给乘车码赋以情感能量。

Q:车票的体验设计定位是什么?

黎翠霞:最初的头脑风暴阶段,我们想到了很多的创意方案,我们发现「以他人代付的形式让用户免费乘车」这一设计机会点最能贴近用户,很好地解决了利益相关者链条中「好友层」的利益。用户通过获得好友赠送的车票,从而接触到乘车码并开始使用。

于是,针对目标用户,我们进行了多次用户调研来验证想法的真伪,发现用户对车票是接受的,并觉得是有意思的,票价的接受区间在10元以内。基于这一次的用研,我们把车票的设计体验目标定位为「便捷、小额、低门槛」,目的是在好友传播当中能卷入更多的利益相关者,以解决体验孤岛。从设计规划上来看,我们一直围绕「用户情感利益互利」这个体验目标在进行设计。

Q:具体设计方案是如何落地的?

黎翠霞:车票的整个设计分为三个结构面。

第一层是底层的基础支付功能,融合了车票元素和二维码功能,让用户能够对车票进行购买、支付、赠送和使用。利用社交关系链,在好友当中实现传播。玩法上我们不仅仅允许用户能一对一地赠送车票,还能一对多地赠送,发到群里让好友一起抢,增加车票的娱乐性。

第二层是设计层,车票+支付=票面玩法。在车票购买页,我们抛弃了传统冷冰冰的表单做法,采用票面与金额结合的方式来强化车票,让用户直观感受到车票独有的设计 DNA。

同时,通过对传统纸质车票的研究,我们提取了三个重要的设计元素:

  • 城市,用来强化用户的地域民俗认可;
  • 编号系统,为后期的运营做了扩展性准备,也更加符合车票调性;
  • 留言祝福,祝福的加入增添了票面的情感温度;

第三层是呈现层,在票面表现上,我们的灵感来源于美丽中国、美丽城市,我们更希望用户看到车票时能想到幸福时光,想起他小时候拿车票坐公交的美好时光,看到车票时能想起跟这个城市的一些感情,他跟这个城市一起成长、一起进步的一些经历,从而有所触动。

司徒:票面设计过程中,我们一直思考从哪个视角切入更能打动用户?一开始,我们从美观的角度出发,设计出来的效果还不错,画面也很精美,但看久了会发现这样的插画缺乏情感链接,无法勾起用户深层的记忆或情感上的共鸣。用户会因为设计好看而赠送一次,但之后赠送动力会持续减弱,所以这不是一个好的方向,我们开始寻求新的突破点。

在跟用户进行多次深入交流后,我们发现,捕捉日常生活场景元素能勾起他们记忆深层的回想,从而拉近车票与用户之间的距离感。于是我们就开始往这个方向发展,在票面上进行文化植入,最终打造出一套套能戳中用户回忆杀的票面。

Q:这一波回忆杀是如何跟票面紧密结合的?

司徒:我们希望把用户很有回忆的车票重新呈现屏幕上,它是带有质感和厚度的,所以在 UI 的设计上,主基调是偏拟物为设计风格,符合用户心理对传统车票的认知,熟悉的视觉元素可以激发用户的兴趣,而被唤起内隐记忆的用户是最乐于接受相关信息的。

有了上述文化植入的设计思路,我们开始和当地城市的设计师进行合作,由他们先推荐人文风情,城市生活缩影地等当地特色,我们再联合用插画的手法进行创造,描绘出能产生共鸣的画面。

另外,我们还和一些 IP 进行合作,描绘出用户心中的美好生活,希望通过不同角度击中用户,在情感层面吸引用户,加强对我们产品的认知。

事实证明,这一做法是正确的,在构思广州票面时,广州的设计师认为这是一项很有意义的工作,投入了很多心思,共享了许多好的点子。内测时,当我们把「艇仔粥」、」青云书院「、「虾饺点心」等票面发到群里,大家的反响很好,反应能从车票中读出广州的城市风貌和人文内涵。我们也得到了老板的高度认可

您可能想查找下面的文章:

  • 交互基础小课堂!从五个维度全面分析「下拉刷新」功能
  • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
  • 高手进阶技巧!6招帮你用设计抓住用户的心
  • 写给UI新手的APP结构指南:闪屏
  • 这些设计细节,决定了谁月薪5000谁月薪50000!
  • 618前夕,来看京东设计师是如何用场景化让你买买买的
  • 网易实战案例:教你五步打造APP节日主题设计
  • 对话腾讯设计师:微信车票背后的设计故事
  • 看似最简单的空白页,腾讯微云的高手是如何设计的?
  • 交互基础小课堂!如何利用 “峰终定律” 改善用户体验?

相关文章

  • 2017-08-06网站界面设计中为网站创建风格指南的方法(图文)
  • 2018-08-23超全面!腾讯出品的交互微动效设计指南
  • 2018-08-23「这个控件叫什么」系列之Popover/气泡弹出框/弹出式气泡
  • 2018-08-23网易设计师:6个技巧让用户参与到你的设计里
  • 2018-08-23学会CTA 设计方法后,按钮的点击率高了49%!
  • 2017-08-06flex程序Firefox下中文输入乱码的bug
  • 2018-08-23网易资深设计师:新人该如何提升设计思维?
  • 2018-08-23想让你的网页设计脱颖而出,可以从这5个维度入手
  • 2018-08-23高手的后期课堂!聊聊人像磨皮的基础原理
  • 2018-08-23氛围独特情绪深沉的深色系网站,设计上有什么讲究?

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 为了拖尾款,甲方竟然要当我的男朋友…
    • 对淘宝网站的宝贝详情描述页页面设计的分析与看法(图)
    • 如何将页脚固定在页面底部(多种方法实现)
    • Airbnb 用这个流程,大幅提高了开发和设计的协作效率
    • 打包 React 项目
    • div 盖在flash上面 flash透明方法实现将DIV层放在flash上面
    • 专家的言传身教:LOGO的外形设计与技巧
    • 从2009年到2017年,按钮设计发生了哪些变化?
    • 想要提升用户体验,这6种使用插画的方法颇为不错
    • 优设网投稿规范

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有