设计沉思录 | 二手车工具产品设计

0 评论 2775 浏览 3 收藏 11 分钟

编辑导读:二手车工具是为了解决用户在交易二手车过程中产生的问题,促进二手车交易。本文作者通过对线上业务深挖,对客户的问题进行了分析并提炼出设计需求,从品牌提升、体验提升、一致性提升这三个方面进行了改进,与大家分享。

01 介绍

1. 行业痛点

用户对二手车的抗性,主要集中在车况和车价这两大问题上。由于车况不透明,价格不清晰让用户在交易过程中心存顾虑。导致二手车行业潜力没有得到释放。

2. 工具对二手车购买的重要性

在购车流程中浏览车源、联系看车、实地看车这3个环节涉及车况与价格问题,会直接影响用户购买,可能存在比如:是否存在事故、是否合理保养、是否属于合理的市场价格、是否符合迁入地排放标准…等问题。

通过让用户了解真实车况给出合理价格并结合交易相关需求,推动用户进行购车决策。

3. 商家/个人

在二手车工具的场景下,商家与个人因有较高的相似问题,因此取消了B端工具C端工具的差异化设计。

02 背景/痛点

1. 推广

二手车现有23个工具,通过“工具大全”的方式为业务赋能,与竞品工具形成差异,因此对现有工具产品进行了整体思考。

(1)视觉识别

通过归纳工具使用到的色彩、图形、组件及排版等设计特征,将视觉内容定义清晰,从而提升工具产品的视觉识别度。

(2)体验差、不好用

(3)一致性问题

交互形式:主要体现在工具结构上,并非统一从查询页到达结果页到基础结构,以及选项的信息选择方式等。

视觉感受:填选项的外部视觉,配图的视觉,按钮的视觉及颜色上的使用…

2. 节约开发成本

将相似的UI组件进行整合,减少同类视觉样式,将常用的车型选择、里程输入等组件进行复用,避免前端重复开发同类型的视觉组件。

03 设计

1. 设计目标

突出品牌、体验升级、解决一致性。

2. 工具分类

对现有23个工具进行盘点,根据服务内容的方向。将工具分为市场类、车况类、售卖类及信息类。

3. 突出品牌

(1)查询页

1)色彩

根据这4种不同方向的工具类别进行色彩匹配。为了让用户感受工具产品的理性及真实感,低了色彩饱和度。并通过调整色相在色环中的数值延展出更多“邻近色”的色彩方案,丰富工具的色彩系统。

2)图形

不同图形会影响视觉的一致性,因此从2个方向对图形进行了优化

  1. 图标:因为与工具内容需要紧密结合,图标的风格与二手车整体业务进行统一。
  2. 背景图:考虑到背景图主要起到对工具内容进行渲染的作用,因此将主要的图形元素统一处理成渐变的矢量效果。

3)通用表单

依据从左到右的阅读习惯,将表单字体字号、图标样式进行统一,增加表单高度放大点击区域,并增加表单区域的阴影效果让视觉与页面分出层级。

(2)结果页

4)排版

在让内容一目了然,以极简的排版视觉,通过栅格的方式将页面信息规整。增大重要信息字号,减少页面分割线的使用,加强文字分割信息层级,提升可读性。

并结合用户实际使用的操作体验,对特别重要的信息增加阴影的使用。

4. 体验升级

1)数据可视化

市场类工具主要以数据为主,通过数据可视化的方式帮助用户阅读。

使用了一些常用的设计方法,在表格设计时对异常数据进行高亮,在趋势图设计时使用平滑折线让走势更有连续性。

2)即时反馈

由于车险等售卖类工具,用户对价格非常敏感。因此通过将保险内容与价格结果在同一个页面中展现的方式,将价格信息即时反馈给用户,增强用户使用中的互动。

3)付费查询预览样例

付费查询是工具产品进行直接商业变现的方案之一,因此我们希望增强用户使用付费查询的意愿。付费查询功能主要是针对具体车辆进行车况查询,因为用户不清楚车况信息具体包含什么结果,所以通过增加示例让用户能直观的了解到付费后查询的内容,提升用户主动使用付费查询的意愿。

4)层级关系

在查询结果中涵盖了大量车况信息,如果将信息全部平铺页面就会非常的长。如果只是增加导航的话,用户可能会漏掉一些关键节点的信息。因此通过增加概述的方式将信息逐层细化的浏览、对细节内容采用层层展开,方便用户快捷的追溯完整内容细节。

5. 一致性

1)页面结构

为保证工具产品体验的一致性,对工具页面结构的一致性进行了通用,查询页以工具头图、表单、按钮为作为基本机构。结果页以概述、导航条,内容卡片作为基本机构。在不违背页面结果基本原则的基础上,增减页面内容完成页面功能。

2)控件

控件部分主要包含城市选择、区域选择、车型选择及公里输入等控件。以城市选择控件为例,因为二手车政策、交易多集中在一线二线三线城市,因此结合实际情况采用一行4个城市的方式缩短页面长度,让城市选择控件能应用与各种场景下的城市选择功能中。

3)设计基础元素

根据平台提供的SKETCH组件库进行搭建,通过补充工具产品独有的设计元素,完成工具产品的视觉界面。

04 推动力

优先级

23个工具产品对于设计与开发资源的占用还是较为巨大,通过了解用户的使用频率与结合业务的重要度。将这些工具进行优先级排序,对优先完成排序较高的工具产品优先设计开发,保障产品进入有效的迭代过程。

05 总结

本次二手车工具产品的设计过程中,通过寻找行业痛点,结合业务目标。对品牌提升、体验提升、一致性提升这三个方面,进行了有针对的的解决与优化。,以视觉与交互两方面帮助二手车工具增强专业度,提升用户使用的上手程度。

其次了解产品的推广目标以设计与交互为主导,对工具进行增加与迭代的推动,与产品共同完成工具的推广价值。以工具形式解决二手车交易问题,辅助用户进行买卖决策,提升二手车用户完成买卖交易的转化效率。

 

作者:吕志鸿、吴立杰

本文来源于人人都是产品经理合作媒体@58用户体验设计中心(微信公众号@58UXD),作者@吕志鸿、吴立杰

题图来自Unsplash,基于CC0协议

给作者打赏,鼓励TA抓紧创作!
更多精彩内容,请关注人人都是产品经理微信公众号或下载App
评论
评论请登录
  1. 目前还没评论,等你发挥!