滴滴顺风车设计总结(原创文章)

贝尔不等式滴滴顺风设计总结(原创⽂章)
顺风车项⽬初期,产品GM反复和我们强调业务使命,私家车出⾏在滴滴体系中的⾓⾊,私家车市场规模,业务模式概述,业务模式关键词,⽬标体系.
使得我们很快明确了顺风车的产品定义,⽬标⽤户,主要功能,产品场景,产品特⾊和竞品的差异化以及未来顺风车的产品⾛向.
未来它将是⼀个每天改变千万⼈次出⾏的产品,它能让共享私家车成为⼀种连接⼈与⼈的⽣活⽅式.
我在⽹上收集资料,对顺风车已经有了⼀定的了解,当时国内的拼车APP已经有⼀些但还不成熟,我下了⼀些竞品软件,把每个产品的页⾯截图拼凑成流程图,观察总结它们的核⼼功能及业务流程,体验好和不好的地⽅都记录在笔记上.收集问题之后,对问题进⾏分析,最终聚焦在核⼼的问题,并将分析的结果展⽰给团队.
研究思考竞品的主要功能,业务流程和信息布局,以及⽹上和现实中车主乘客对顺风出⾏的⼀些痛点,从⽤户意见中提炼⽤户最本质的需求,需要改善的地⽅.
设计阶段初期,因为没有数据和⽤户反馈做依靠,我们在和PM做需求分析的时候追求本⼼,理解⽤户核⼼问题和解决⽅案,勇敢做.脑暴⼤胆尝试了很多种业务⽅案.
项⽬初期在和产品讨论如果没有⼀套整体的流程图是很难和产品以及技术沟通进展的,于是我们花了1天时间的讨论,把主要功能及业务流程快速梳理了⼀遍,搭建了⼀套顺风车业务流程图.
流程图分为3个部分,1 乘客流程(乘客发单-呼叫等待-车主接单-⽀付评价),2 车主流程(车主选单-车主抢单-送达乘客-等待⽀付-评价乘客),3 公共部分(个⼈主页,个⼈余额,实名认证,车主认证,接单设置等),这样我们在讨论的时候就⽅便很多.前期随着每天的讨论增加删减功能都要确保每天的流程图更新⼀遍,让⼤家的信息能够及时同步,看着挺⿇烦,其实当中⼤部分时间都花在产品讨论上了,⽩天产品和设计⼀起讨论,晚上修改更新邮件.
在项⽬前期没有交互,这时候产品设计就要充当交互的职责,紧跟产品,关于产品讨论的会议都要去参加,积极的去参与,脑暴,在过程中,展现⾃⼰的专业度,获得产品的信任,过程中得到产品等同事的认可,有利于⽅案的执⾏。多数⼈已经认可的⽅案,少数⼈在否定⽅案时会⾮常慎重。和产品在项⽬前期在⽬标上达成⼀致,避免在设计⽅案上发散性讨论.由于前期的产品讨论,每天产出的流程图都会有变化,低保真流程图不需要出到特别细致的阶段,只要把产品思路表达正确即可.
注意流程图不要覆盖,按time line保存,这样⽅便之后的升级改版review之前的想法及功能点.
当我们把整个的产品流程都梳理完成,产品确定之后.就要开始细化页⾯了,我们要保证的是顺风车上线产出⾼质量的设计,重要的页⾯要着重去想去设计,多做尝试,让⽤户体验做到最优,同时要和滴
滴打车平台的设计风格保持⼀致,GUI保持⼀致.本次开发周期⾮常短,细化所有端上效果图的时间仅有⼀周的时间,虽然时间很短,但是前期铺垫时间很长,我们对这个产品流程已经⾮常熟悉,⼀切还算顺利.
拿⾸页为例,当⽤户第⼀次进⼊顺风车最先进⼊的就是⾸页,主要功能会在⾸页展⽰,所以这⾥考虑的⽐较多,我们在⾸页的尝试飞机稿不下10张,经过谨慎的考虑,我们采⽤了现在端上的效果.
制作⾼保真效果图的时候这⾥会思考以下⼏点:
1 与滴滴打车平台整体设计⽓质保持⼀致.相同的功能控件沿⽤平台.
2 ⼀个页⾯⼀个核⼼功能,信息层级,强弱关系的处理.
3 轻便,适当的留⽩,易于操作
4 视觉规范的统⼀性与⼀致性.
5 各个分辨率的适配问题,⼩尺⼨要做单独的处理.
6 Android和iOS的差异性思考.
上位机软件
7 不做跳度特⼤的页⾯,整体保持平稳.让⽤户好理解.
设计的预期:海与毒药
1 车主使⽤顺风车,能够清楚的到乘客和车主在哪⾥切换.
2 保持视觉交互平稳,使⽤过程中轻松流畅并且⾼效.
当我们把所有页⾯⾼保真都做完之后,我的习惯还是拼成视觉流程图.
有⼏点好处:
1 查看有没有遗漏的页⾯.⽐如:异常状态,浮层提醒⼀类.
2 查看有没有视觉该统⼀的地⽅没有统⼀,⽐如:⽂字⼤⼩,颜⾊,按钮⼤⼩,间距都需要整体review.
3 平台的控件开发可以复⽤的标记.
4 顺风车的控件样式在页⾯可以复⽤的标记.
5 开发和测试看起来⼀⽬了然,沟通起来节省成本.
豇豆红瓷器鉴定
6 制作顺风车规范的时候⽅便查看.
当然这个⽅法只适合在新产品业务上线,⼤版本更新以及新功能流程使⽤.
毕竟⼩版本的⼀些视觉改动,如果⼀期迭代是10天,每个版本都出⼀份视觉流程图并保证是最新的太浪费成本了.
⼤⼩版本的改动只做视觉规范的更新就好.
开发环节我认为在产品设计⾥算是最关键的⼀部了,⽤户不可能直接拿着你制作的设计稿去进⾏使⽤,你的设计是需要经过开发实现之后才会到达⽤户⼿中,所以设计和开发的对接,沟通尤为关键.这个时候的设计要跟进开发环节,保证产出物和设计⼀致,交互逻辑及动画展⽰保持⼀致.
好多设计师抱怨明明设计的很好,可实际线上效果却不理想,相差太⼤.
问题出在哪⾥?
1 标注图及切图质量不达标
2 和开发没有直接沟通,把产出交给开发之后就不管了
3 最后开发完成没有进⾏视觉⾛查.
说⼀下我对顺风车⼀期和开发的⼀个产出流程和沟通
1 ⾸先⾃⼰要对这款产品⾜够的熟悉,页⾯逻辑跳转,哪⾥展⽰什么,有哪些种状态要充分了解,不然和开发沟通,⼈家问什么全都解释不清楚,还要去产品确认,耽误时间
2 把所有本期相关的开发拉在⼀起开个会,相同的控件抽离出来,记录下来,和开发沟通的时候避免⼆次开发,因为⼀个产品可能是好⼏个开发⼈员负责的,⼀⼈⼀块,如果没有⾜够充分的沟通,很容易⼆次或者多次开发相同的控件,耽误开发时间⽽且视觉⾛查的时候也会费时费⼒,那时候再想让开发统⼀就不那么容易了,因为相同的控件不同的开发写法可能也会不⼀样.导致⼀个控件视觉联调要调整多次,会吐⾎的.
3 所有页⾯标注切图需要怎么给到开发要过⼀遍,记录下特殊的地⽅,因为有的页⾯需要特殊的动画处理,或者时间成本有限,切图需要特殊处理,如果这个时候不沟通明确了,按照⾃⼰的意思切图标注了,开发⽤不了,还会反过头来再你,浪费⼤家时间.
4 这个时候就可以按照之前和开发沟通之后进⾏标注切图了,这⾥我会产出⼏项给开发.
1) 所有本期相关页⾯效果图
2) 本期效果流程图
3) 相关页⾯标注,页⾯样式重复的就不需要再标注了,这⾥主要标注(⽂字⼤⼩,颜⾊,按钮⼤⼩,按下效果,长宽,动画说明,如果有服务器下发的尺⼨的要做说明,最多显⽰的字数)
4) iOS(@2x,@3x)Android(1080)切图
5) 发送邮件给到开发并抄送相关产品负责⼈,再当⾯和开发沟通确认下标注切图确保没有问题.
马瑞兴设计我是以iPhone6尺⼨进⾏设计的,⼤屏⼿机越来越主流,所以我的标注图就是6为基准,6的切图为iOS@2x图,当@2x图制作完成之后,我会等⽐放⼤150%,⽣成@3x图,这⾥需要注意⼀下,3x图可能会有半像素,所以要⼿动都调整下 .
iOS这块完成之后我会产出安卓的,以iphone6为基准,向上放⼤144,产出安卓1080的进⾏标注,切图只出1080的,向下等⽐进⾏适配.
设计在程序开发阶段,不然就是和产品准备下期需求,不然就是继续优化可优化的页⾯,如果是优化页⾯,这个需求⽆论是设计还是产品提出来的,⼀定要尽早的告知开发,不要耽误时间,不然时间有限,很可能优化的地⽅来不及修改.
如果是纯视觉优化,那还好,只需将需要更改的切图或者⽂字⼤⼩,颜⾊之类的同步到开发即可.
吉祥满族网整理顺风车视觉规范,⼩版本迭代的时候随期更新
开发完成就会进⾏到视觉联调和测试解BUG阶段,由于项⽬周期有限并且紧张.所以视觉联调⼀定要快速进⼊,因为后期BUG的测出,开发没有⾜够多的时间与你进⾏视觉联调.
在这⾥我⼀般是先调iOS的,因为安卓发布审核⽐较快,所以时间会⽐iOS宽裕⼀些.
视觉联调主要调整的是,视觉,状态的展⽰(下拉刷新,点击加载,异常情况),各尺⼨分辨率适配和交互动画.
⼀般iOS是能看虚拟界⾯的,我会让开发挨个把页⾯截图给我,对照设计稿重叠着看,精确到像素,能当时解决的就当时解决,有的调整需要花时间的我会先记录下来,和开发商量下时间,好了再次对照下.
由于前期头开发前的铺垫,相同的控件只需调整⼀遍,相对会节省时间.
因为iOS设计稿做的是iPhone6的尺⼨,所以开发会以iPhone6为基准,我联调的时候也是这样,先调整iPhone6,6全部调整好了之后会再次调整5和plus的尺⼨,因为都是等⽐的,⼀般不会出⼤⿇烦,只是4上有的需要单独处理,因为4的尺⼨⾼度有限,有的页⾯不允许有下拉的状态,这时候就需要单独处理了,图⽚的⼤⼩,间隔的修整以及⼀些展⽰,⽐如评论标签,在5 6 plus上显⽰的是4⾏,在4
上只能显⽰3⾏了.
由于iOS联调只有2天的时间,时间紧迫,这⾥基本完成不了所有的页⾯调整,我将页⾯从头到尾看了⼀遍,按照页⾯的重点优先级排了顺序,将重点必须要保证视觉的页⾯⽤标记标红.然后iOS负责⼈沟通,需要同时和相关RD⼀起调整,这样能保证效率,我将他们做的页⾯按照姓名,把页⾯放到他们相关姓名的⽂件夹中.
安卓是以1080为基准进⾏联调,⼀般1080调整好了720基本过过就还好,480有的地⽅也会单独处理.
当视觉联调完成之后我趁热打铁梳理了⼀遍顺风车的相关页⾯,把平台及顺风车相关的控件抽取出来制作出了顺风车视觉规范⽂档.
制作视觉规范的⽬的是:
1 提升设计效率
2 统⼀设计标准
3 便于后期顺风车加设计⼈员,可以很⽅便了解产品,快速着⼿设计.
4 回顾规范,需要优化改善的地⽅⼀⽬了然
端上视觉规范:
1 ⽂字字号控件
2 颜⾊控件
3 导航相关-通⽤控件
4 顺风车通⽤控件
5 浮层控件
6 按钮控件
7 icon控件
在这⾥顺风车⼀期的设计相关的所有流程就写完了,总结下设计师在这个产品⾥各个时期担当的⾓⾊转变.
1 产品设计初期:设计师主要紧密和产品经理沟通,关于产品讨论的会议都要去参加,通过竞品分析和⽤户反馈采集⽤户需求,因为这⾥还没涉及到设计相关,讨论的同时站在⽤户和产品的⾓度多去考
虑问题,和产品最终达成⼀致.
2 产品设计中期:  这个时候的产品功能,业务流程基本定型,这⾥还是紧密的配合产品,以解决产品需求,减少⽤户理解操作的成本为⽬的,设计草图及低保真流程图.
3 产品设计后期:这个阶段设计偏执⾏的多⼀些,主要负责产出⾼质量的设计,和开发紧密联系,跟进各个开发环节,确保产品能够⾼质量的上线.
从2⽉份开始业务成⽴,我参与了这个产品从0到1的过程,在这⾥我学到了很多东西,忙碌的⼯作让我来不及做沉淀,最近终于把这个总结写好了.
对⾃⼰具体分为三个⽅向的成长,项⽬管理,技能管理以及横向扩展.当然⾃⼰也要勤思考.
项⽬管理:任务优先级,时间节点的把控,产品沟通,技术沟通.⾼质量产出,确保端上效果与设计稿基本⼀致.
技能管理:有关设计的⼀切多去看,多去想去思考(包含平⾯,运营),采集好的设计,勤做练习.专业度的提升.
横向扩展:产品思维,运营知识,时间管理.
以前我会花⼤量的时间去做拟物图标的练习,当时觉得很有成就感,可在⼯作当中很少会有那么长的周期和合适你去做这些东西的⼀个项⽬.更多的时间是花在产品上,思考,讨论,设计,推动,跟进.现在的成就感更在⽤设计解决了产品当中的问题.

本文发布于:2024-09-21 16:48:00,感谢您对本站的认可!

本文链接:https://www.17tex.com/xueshu/603412.html

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。

标签:产品   设计   开发   视觉   顺风   需要
留言与评论(共有 0 条评论)
   
验证码:
Copyright ©2019-2024 Comsenz Inc.Powered by © 易纺专利技术学习网 豫ICP备2022007602号 豫公网安备41160202000603 站长QQ:729038198 关于我们 投诉建议