• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >心得技巧 > 实战案例!滴滴试驾商业B端App 项目设计经验总结

实战案例!滴滴试驾商业B端App 项目设计经验总结

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

本文主要包含实战案例,经验分享,设计实战等相关知识,希望在学习及工作中可以帮助到您

@Z设团-Z先生 ?:参与整个商业B端app的产品设计,最大的感受除了产品本身界面设计的打磨和探索之外,更多的是与各角色的合作与沟通,并对时间与视觉做出平衡,在有限的时间里产出更好的设计。

界面设计师:李昱翰、张丽丽 、刘悦、刘芸
交互设计:黄雅琪

交互篇

什么是滴滴试驾商业B端平台App

商业B端平台app是滴滴出行旗下试驾针对厂商内部开发的一款app,通过进入试驾B端,厂商能够快速的获取相关数据。app内有滴滴试驾在c端的基本数据和画像分析。合作厂商还可以查询具体与试驾合作项目的基本情况、画像分析、车辆情况等数据。

简单的来说就是从滴滴试驾c端提取数据到B端以供厂商查寻。

需求收集

跟试驾合作的厂商越来越多,我们需要开发一款app方便厂商每天可以查阅合作进度,能够详细的看到我们在合作期间都具体做了哪些运营活动以及合作进度。

产品定位

先说下滴滴试驾的产品定位,滴滴试驾定位于创造以体验为核心的营销方案,整合平台车源、调动车主能力、降低成本,向用户提供高效高质的试驾服务,提高试驾对消费决策的影响力,打造一个“移动4S店”。

逐渐地,以出行为入口,覆盖用户练车、买车、用车、车后、卖车全流程。

未来,综合线上数据、线下行为,提供全面的用户反馈和场景化精准营销方案,为厂商打造产品迭代和推广销售的闭环服务。

试驾B端商业app是根据厂商需求评估去挖掘客户需求,并制定专业方案,精品化运营执行,合作进度数据化报告给厂商。

滴滴试驾B端商业App 产品定义

目标用户

合作厂商用户、 内部运营 、销售 、BD

产品目标

为合作厂商了解项目合作进度以及过程数据提供便捷的查看平台。

用户定性研究

我们明确了目标用户,并对目标用户进行定性研究,以便创建人物角色,研究用户的真实使用场景,以用户为中心创建合理的流程和功能。

以合作厂商用户为例

使用场景(典型)

1. 查看项目进度

场景一:合作厂商用户通过平台查看项目合作进度,核心指标以及真实用户对车型的评价数据
需求点(痛点):直观的项目进度数据呈现,连贯完整的查看体验

2. 查看最关心的数据

场景二:不同用户关心的数据有些不同,在功能层级度的情况下每次都要进来查找
需求点(痛点):在下钻层级多的情况下经常去二,三级找关心的数据

考虑点

根据上述场景分析,此平台设计中应该考虑以下三点:

  1. 数据直观
  2. 查看流程完整
  3. 常用功能外露

基本流程

与产品经理共同分析了典型使用场景之后,我们拆分出主要功能,并参考前期的调研数据,构成了B端商业app业务流程。分为:试驾、项目和个人中心。

确定了主流程之后,再根据产品需求,以页面为单位,对各个流程节点进行细化,产出以页面为单位的功能流程图,并查看各个功能的层级,同时也便于与产品之间的讨论。

滴滴试驾B端商业App产品设计

原型图表达产品思路,便于沟通

我们与产品确认了需求后,同视觉设计师一起协同工作,以原型图的形式产出了关键的功能性页面,确定基本功能点。原型图用来进行详细设计和开发的评审,同时细化功能,每天迭代更新。

高保真原型走查全流程,查缺补漏

将所有的功能点拼接起来,绘制高保真原型。在此阶段的产出,着重于各个功能点是否可以走通,有没有功能的遗漏,操作逻辑是否合理,操作反馈等,并且在原型完成后召集了设计师们进行测评。

设计差异化和一致性

设计过程中,要让用户体验做到最优,保持我们自己独特的功能和使用感受;同时又要和滴滴出行平台的设计风格保持一致。

以首页为例,前文已经说明了从产品角度的规划,设计师们按照需求的优先级,定义了首页的信息架构和排版。除此之外,我们还在一些细节上进行了求同存异的设计,以突出B端商业本身的需求,例如体验的多维度设计,卡片的信息结构,以及项目查看数据的使用等

总结

参与整个商业B端app的产品设计,最大的感受除了产品本身界面设计的打磨和探索之外,更多的是与各角色的合作与沟通,对时间与视觉效果做出平衡,在有限的时间里产出更好的设计。

在产品设计的前半段,交互设计师就是半个产品经理,参与产品需求的讨论,研究竞品,提炼功能。

在确定了需求和相关流程之后,接下来的设计阶段,设计师加入了理性的用户体验分析,并站在公共规范的立场上,去审视一些新的功能。

在设计的后期,是参与人员最多的阶段,从产品经理到设计师,再到开发,同一件事,不同的人往往有不同的角度去看待,吸收不同人员的看法,并站在自己专业的角度去分析和解决问题,是合作的最优结果。

到了开发阶段,由于需求的不断优化和开发中遇到的一些困难,设计师需要评估不同的方案,选取最适合当前排期和目标的解决办法,并协调相关人员,跟进各个开发环节,确保产品能够高质量的上线。

界面篇

设计一款app,第一步就是定主色调。

到底如何来选择APP的主色调?

  • 从目标用户的角度选取
  • 从公司或品牌企业文化的角度选取
  • 从产品特有属性来选取

依照以上三条我们定下了#6480d3为app的主色调,蓝色系代表着商务,冷静,庄重,专业,服务等。

界面设计初期

设计师拿到交互稿应该把?己的想法加入产品设计中。那怎么加入想法?怎么体现设计师的价值?笼统的说,交互的?作重点表现在前期制定产品大框架的布局及功能模块的复?和扩展。相比交互,设计师更需要用视觉语言去表现一个?面的重点,信息的层级和整体风格。设计师产?所有设计想法的来源有三点:

  • 对产品和交互方案有足够的了解。
  • 花时间不断打磨设计。
  • 大量设计案例的积累。

交互输出低保真原型图后,界面设计师需要从整体到细节仔细的分析。

整体,指哪些模块或者信息和按钮是复用的,在设计过程中就要保持他们的统一性。

细节,指每一个模块的信息都要做到足够清楚的了解,包括文字限定的字数,最好以限定内最多文字进行排版。

高保真设计设计产出

以iPhone6尺寸做设计。

直观数据可视化。

界面设计中含有很多数据可视化的图例设计,整个项目开发时间特别短,所以界面设计师需要平衡开发成本和视觉效果,所以设计的图例都以简约为主。

整理成一个整张的流程页面,审查视觉元素是否同意。并且方便后续沟通。

输出的过程:

  • 输出效果图的切图及标注

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

  • 腾讯实战案例!设计师如何从零开始做一款H5?
  • 高手实战!腾讯公益设计改版项目总结
  • 滴滴新推出的青桔单车,背后的设计过程是怎样的?
  • 上亿人使用的起点读书APP,背后的改版设计实录!
  • 如何高效完成表单输入?来看这个实战案例!
  • 设计冲刺法:5天搞定2018俄罗斯世界杯主题设计
  • 实战案例!网易考拉品牌升级全过程实录
  • 看似简单的喜马拉雅FM主播等级体系,是如何做改版设计的?
  • 实例解析!如何成为有交互和视觉思维的UI 设计师?
  • 网易实战案例:教你五步打造APP节日主题设计

相关文章

  • 2017-08-06手机网页wap用Bootstrap还是jQuery Mobile
  • 2018-08-23深度长文!为什么很多炫酷的产品没能流行起来?
  • 2017-08-06页面包含img src时的重复载入问题
  • 2017-08-06前端开发工程师和美工对于网站开发所掌握的知识的区别
  • 2018-08-23Facebook设计师:从VR设计实战中总结的5个设计思路
  • 2018-08-23设计师没原创灵感?试试这个方法!
  • 2018-08-23借鉴别人的海报?得先学会这个平面构成分析法!
  • 2018-08-23抢先来看!2018年UI设计的9个新趋势
  • 2018-08-23提升细节体验!移动应用的弹窗设计指南
  • 2017-08-06最短JS判断是否为IE6(IE的写法)

文章分类

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

最近更新的内容

    • 关于自适应布局的处理(利用浮动和margin负边距实现)
    • 提高网站可用性和转化率的25个工具
    • 让网站图片生成灰色效果的三种方法
    • 汉堡图标不好使?这5个替代方案帮你搞定移动端导航
    • 超全面!移动端响应式的7种UI布局解析
    • Facebook设计师:从VR设计实战中总结的5个设计思路
    • 熟练设计师的七原则(1):字体设计
    • 数据分析学习笔记(1):数据分析的思维模式
    • div 超出隐藏 文字超出div部分隐藏css代码
    • 2018 阿里巴巴 UCAN 回顾!张晶华:用户研究在产品定义上的新影响力

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

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