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

原创文章 分类: 经验/观点 版权:
294 2 1 0
更新于:2017-08-16
0.7
普通推荐

Image title

Image title

Image title


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


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


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


Image title

Image title



功能需求


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


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


Image title


Image title



交互设计


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


Image title


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


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


Image title



Image title



Panel设计


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


Image title


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


Image title


最终定稿:


Image title

Image title


Image title




Panel子模块搜索页设计


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


Image title


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


Image title


Image title



主页弹窗/提示设计


Image title

Image title

Image title


Image title



高清大图预览


Image title

Image title

Image title

Image title


Image title

Image title

Image title

Image title

Image title

Image title

Image title

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

276粉丝/0关注

原创达人原创小生
iPhoneX Mockup for PSD“动静之美,呼吸之间” — AskWallet设计体验

王涵洋Jobsw

王涵洋Jobsw

微信交流opdatuzki | 老王公众号jobsdesign

原创达人原创小生

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2017 UI.CN