浅谈凹凸租车4.1快捷租车Panel控件设计

为了给大家最极致的阅读体验，每一篇文章的配图都是精心设计过的。但这还远远不够，为了达到极致，每一篇文章的排版一定是独一无二的。

本文首发于老王公众号jobsdesign（不一样的极简设计）

自从4.1新模块快捷租车上线开始，产品新模块的用户活跃度于总交易额大幅度提升。与此同时也有不少小产品开始效仿我们的设计。对比起同行产品的UI，我们也做到了自己的风格，细腻入微，大道至简。今天老王跟大家浅谈分享下4.1背后的设计故事。

功能需求

快捷租车最终目的是为了给用户快速下单租车，基础功能：取车地址、还车地址、取车时间、还车时间、下单。

在我们开始设计UX，UI之前，我们也调研了同行的产品所包含的类似模块：

交互设计

制订需求之后，我们UX交互团队很快根据我们产品自身特性制定了一套高保真线框图：

经过产品部门的数次会议讨论之后，我们一致决定Background一定要大，目的是为了突出我们产品功能的调性，Panel的设计一定要简单易懂，并且要考虑到之后的UE动效设计。

在这里我们也制作了一套静态动画交互过程演示：

Panel设计

交互封板之后，我们很快开始了UI设计，UI设计的需求就几个字：简单大气清爽逼格。在配色设计上，我们采用了品牌色：

设计Panel时，我们明确了各类别字段的字体大小，字体色值：

最终定稿：

Panel子模块搜索页设计

在我们点击选择地址的时候，会打开一个地址搜索输入页，该页面也是我们的核心页面，在设计之前也同样调研了下同类产品的地址搜索输入页：

仔细查看发现，除了滴滴出行设计很nice，其他同类估计都是外包做的吧？经过我们一次次推敲，地址搜索输入页最终很快定稿：

主页弹窗/提示设计

高清大图预览