093602mkm24gvcefi4fvi6.jpg

093602mkm24gvcefi4fvi6.jpg

FEVTE编注:更多平面设计理论学习请访问实例平面设计理论知识栏目,地址:
万事开头难,做设计也是如此。
今年3月,在大家的共同期待下,滴滴快的代驾业务正式启动。半年时间,产品经历了从0到1的跨越,从1到1.1的蜕变,并在不断打磨中前进,努力为代驾司机创造出更优质的体验。
在无数次的加班改稿后,终于有时间做一些沉淀和总结,希望这些分享可以帮助同样需要经历从0开始的设计师们。
  
一,  前期准备
1,项目介绍
滴滴代驾司机端是一款针对平台代驾司机的app,主要用于帮助他们完成接单、抢单、接送乘客的日常工作流程,并辅以订单记录,费用明细,乘客评价等其他功能。
2,竞品分析
在国内市场,代驾绝非新品。早在滴滴代驾之前,就已经出现了一批较为成熟的代驾产品,如e代驾,爱代驾,安师傅等。对他们的界面分析必不可少。

093602cphhnzpa7mzn7ipo.jpg

093602cphhnzpa7mzn7ipo.jpg

通过分析我们发现,国内大部分代驾产品将主要精力放在乘客端设计上,司机端界面设计较为粗放。而滴滴快的作为国内最大的出行平台,如果想在代驾市场中占据一席之地,不仅需要争取更多的乘客资源,同时也应该更好的体现对司机群体的关爱。
3, 了解用户
唐.诺曼说过,如果在用户界面设计和人机交互领域中有任何神圣的原则,那必然是"了解你的用户"。
设计前期,我们根据调研结果制作了一系列的用户画像,以便更好的根据用户实际需求找到适合他们的设计语言。

093602eb47ykow5j87gfhz.jpg

093602eb47ykow5j87gfhz.jpg

通过这些用户画像我们总结出代驾司机的几个特点:
a, 工作时间晚;
b, 接单地点环境嘈杂;
c, 追求高效,快速的工作效率;
基于以上特点,我们最终提炼出如下设计关键词:

093602u77k7blbgghu03u3.jpg

093602u77k7blbgghu03u3.jpg

二,定义色彩


色彩在视觉界面中扮演着非常重要的角色,通过定义色彩,可使界面主次分明,节奏感强烈;不仅如此,主色辅色的合理搭配,还能用来提升产品氛围,增强产品情感化。
1,主色
由于代驾为快的旗下产品,项目初期,我们决定以快的品牌色-绿色为基础进行延展。
考虑到代驾司机实际使用场景为夜间,而快的原有品牌色较鲜亮(左),容易在夜间对眼睛造成刺激,我们在原有品牌绿的基础上进行了明度的减法,得出了代驾司机端的主色(右):

093602uwva1yy1s5t2uvsv.png

093602uwva1yy1s5t2uvsv.png

2,辅助色及点缀色
除主色,还需要一系列辅色来表示产品中需要强调、警示的部分,该部分内容需要与主色形成强烈对比,以便用户识别。基于该点考虑,我们在定义辅助色的时候,选取了与主色在色环角度相差较大的颜色(经常有人问我配色的方法,这里再次推荐下kuler)。

093602jo2tw82wtwk1du8w.jpg

093602jo2tw82wtwk1du8w.jpg

最后,在不影响品牌主色的基础上,又另外选取了一系列明度,饱和度相似的其他颜色作为点缀色,必要时用于图标,文字等。

093602b4k7wz41mk7fmfxj.jpg

093602b4k7wz41mk7fmfxj.jpg

三,定义结构
对界面信息的合理划分,是确保用户操作准确舒适的第一步。
1,整体结构
依据产品经理给出的原型图,我们将代驾司机端归纳为如下三种主要布局模式:
A, 顶部导航+内容区+底部操作按钮
B, 内容区+底部操作按钮
C, 顶部导航+内容区
其中A,B两种结构主要用于司机主任务流程,C结构主要用于其他辅助功能及相关信息展示。

093602hzuaijmumjtjibij.png

093602hzuaijmumjtjibij.png
回复

使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    Powered by shiliapp.com   © 2019-2020