单打独斗的产品设计师工作流程总结

零基础学产品,BAT产品总监带,2天线下集训+1年在线课程,全面掌握优秀产品经理必备技能。了解详情

我从入行开始就在一个做自己产品的小公司工作,到现在已经三年了。刚开始工作的时候什么也不懂,老板说让出效果图,就开始直接上手作图。后来看的内容多了,会的技能多了,慢慢开始改进自己的工作流程。现在已经可以快速并且一步步扎实的完成工作。工作内容包括:获取需求、收集资料、结构图、交互设计、视觉设计、切图标注。希望能和大家交流,进步。

gongzuoliuc

一、获取需求

我所在公司的需求都是老板或者产品经理直接告知,根本没有用户测试部分。而且用户群根本不在同一地点,也不说中文。这种情况下我的处理通常是先看这个需求急不急。

如果这个需求很急,并且老板也明确跟我说要一个什么样的功能。我会直接开始着手,按照老板的要求直接完成设计,出视觉稿。

如果需求不急,而且涉及的内容比较多,我会多问老板以及和客户对接的同事一些客户的反馈,毕竟他们和客户有直接接触,比我自己纯想想更能接近用户。当然最好的还是要做用户测试,这也是我目前尝试的目标,希望能说服与客户对接的同事,进行用户测试。

这个用户测试是指观察用户使用产品的过程,毕竟公司现在已经有线上的产品了。下一步就可以考虑建立人物模型了。这样公司的整个设计流程就能完整了,对产品以后的发展也是有好处的。

工具:omnifocus   只要能记录下需求的载体都可以,最好能保证以后可以查看,留个凭证。

二、收集资料

了解需求后,要整理整合相关信息,尤其是要设计一个完整产品的时候。

这个过程中要明确以下内容:

  1. 这个产品依赖的硬件。是客户端还是网页,网页要不要考虑pad端。这个产品是不是为某种硬件设计的,比如智能手表、智能眼镜等。这些硬件屏幕的分辨率,这个平台有没有设计规范,毕竟后面的设计工作也是自己做,就顺便先了解了。
  2. 开发技术上的约束限制。
  3. 如果是再设计,要熟悉产品的一些特殊限制。比如在日语输入情况下,不能用enter键代替搜索、确认等按钮,因为日语输入时需要enter键确认输入。中英文输入都没有这个问题。那么设计的时候就一定要有个按钮。

以上搜集的资料要列下来,可以放在结构图之前,一是提醒自己,二是做个记录。

三、结构图

结构图这个名字是我自己起的,这个步骤主要是理清思路,为画交互稿做准备。我说的结构图包含概念模型、层级图、流程图等。依据项目的复杂度、时间、团队习惯,自己把握这几种图的精细程度。

要做好结构图的版本管理工作,每次修改更新一个版本,并列出大致的修改内容、时间,如果涉及到多人协作,要把修改人写进去。

如果只是自己看,纸上草图或者用软件画,都可以。如果要和团队成员共享,使用软件是比较好的,画出来好看,而且易修改。

  1. 概念模型就是把这个产品涉及的用户、环境、提供的服务大致画个关系图。具体可以参考《高效沟通设计之道》第4章中的方法,可以参考我的读书笔记http://www.jianshu.com/p/377f60e1e88f。
  2. 层级图就是把产品具体的层级结构规划并画下来。基本遵循由大概到具体的顺序。先列出大致的几个部分,然后慢慢细化,并增加自己想到的需要注意的点。具体可以参考《高效沟通设计之道》第5章中的方法,可以参考我的读书笔记http://www.jianshu.com/p/174a87393d6b。
  3. 流程图就是把用户想要完成一个任务的过程一步一步列出来,各种操作的可能性要尽可能多的考虑到。可以参考http://www.woshipm.com/rp/149653.html这位作者分享的流程图。

做完流程图后,可以在晨会或者专门开个会,把层级图、流程图拿出来跟大家讨论一下,看看自己规划设计的是不是合理,有哪些自己没想到的情况,补充完整。对于大家的意见要站在用户立场有选择的听,设计师是唯一代表用户的人了。

这部分用到的软件和交互设计部分用到的软件放在一起讨论。

四、交互设计

有了结构图后,我会根据层级图先在纸上快速画一画,然后结合流程图,多想几个能让流程更顺畅的方案,而不是拘泥于层级关系。没思路的时候要多找些参考启发下,也可以先把问题放放,过段时间再来想会有新的更好的想法。时间允许的话,可以一直想到自己满意这个方案,不觉得好像差在哪里为止。但是这样效率不高,而且后面还是自己进行设计,到时候有想法再改也可以。

交互设计过程中,有两点要尽量遵循,一是要平台的设计规范,二是通用的交互设计原则。在没有更好的解决方案之前,遵循以上两点不会出错。当然也不能为了不出错而不追求出彩。我的经验是,通常一个产品里出彩的地方有1、2个就可以了,处处出彩会让用户无法专注自己的任务。

我感觉其实APP的设计会比网页设计要简单。无论是iOS还是Android都有设计模板,拿过来用就能设计个及格的方案。网页面积更大,可以承载的内容功能更多,设计方案的可能性也越多。

如果平台规范和通用原则都无法让我想出设计方案,那就是时候拿出大招–找参考资料了。找的资料不必局限于想设计的部分,比如我想设计登陆,不一定只找登陆,也可以找一些表单的页面,“跨界”擦出的火花也不错啊。找参考要明确自己的目的,我是为寻找什么来翻看这些参考资料的,不能迷失在参考资料里,那样会降低效率、浪费时间。找参考不要抄袭,别人的产品这样做放在自己产品身上未必合适,就像一件衣服穿在名模身上是爱马仕,穿在黄渤身上就是水管工一样(不是黑黄渤,其实我是青岛贵妇的粉)。

我常用的找参考资料的地方:dribble、enhance、Pinterest、calltoidea等等。有条件还是翻墙吧。

交互原型完成后,要听听大家的意见,对于大家的意见要有选择的听,有的程序员会为降低自己的工作量说这个方案不好之类的,或者有的程序员会过度考虑边缘情况,这时候要站在用户立场坚持自己的设计。如果程序员说这个方案开发起来要很久,发版本之前根本来不及,这时候还是要妥协的,商量出一个用户体验不会太差又能来得及的方案。做设计一定要以open mind的心态来听意见,大姨妈大姨夫期间讨论之前先念三遍open mind,再进行讨论。如果团队改需求之风盛行,拿出交互稿让老板拍板也是不错的选择。

接下来结合上一部分说说软件。我用过mindmanager、omnigraffle、Axure。mindmanager画层级图比较有优势,但是不能无缝对接交互设计。omnigraffle、Axure都可以在一个文件里完成结构图和交互原型。omnigraffle画结构图有优势,自带交互设计中用到的各种模板(APP和网页),但是导出的文件不能像axure导出的文件那样有个左边栏的页面导航,动效也很有限。axure能画结构图,但不能自动排版,另一个缺点用浏览器打开高版本的Axure导出的html文件需要安装插件,除非使用Axure share,优点是有导航、动效丰富。  这两个软件各有利弊,看自己习惯吧。

对于APP的草稿交互,我用过pop这个APP,先打印纸质模板,把纸上的图拍照,使用pop简单制作个可点击的原型。有了这个原型,讨论起来会更加方便,而且说不定能再点击过程中发现问题或者想出新方案。

具体指导交互设计的内容我推荐《about face 4》的二、三部分,看完绝对能让自己的知识形成体系,摆脱知其然而不知其所以然的窘境。

五、视觉设计、动效

有了交互原型,完成视觉设计还是比较省心的。千万不要同时设计交互和视觉,哪怕只是简单地在纸上画画交互,不然效率低、易出错,自己也特别累。

视觉设计开始之前要了解企业的品牌、主色,用户的喜好。无法直接获得用户喜好,那就结合产品提供的服务特色定义主色调,风格。比如餐饮常用红色、黄色。也可以考虑老板的喜好(通稿率会比较高,这个不是正途啊,有的老板以自己的喜好判断用户的喜好)。

下面开始找参考资料,看看这个色调的大牛设计的好看的界面是怎么配色的,尤其是各种灰度的高级灰用起来,真比普通灰效果好很多。看的过程中,找个合适的辅色,色相上不要超过2种,比较难驾驭,目前我的水平是最多两种颜色。当然也可以出现多个色彩,但是除了主色、辅色外的这些色彩占得面积一定要小小小。把这些颜色加到色板中,方便设计过程中取用。

基本确定好颜色和风格,就可以画起来了。根据交互原型想表达的意思,了解信息从高到低的重要程度。重要的内容要突出出来,通过面积、颜色等,不重要的内容弱化,该小的小,该灰的灰。画完一张图,试着眯眼看这张图,能一眼看到想突出的内容,基本就算成功了。画的过程中,颜色不够用,可以继续加。

目前我在尝试建立产品的UI kit,将设计拆解为一块块可重复使用的模块。这样开发后期想加功能,可以先从模块下手,提高效率,不用等着出设计稿了。初步的经验是,一块模板可以是2、3条内容组成的表单,确定取消按钮组合、弹框等等。做这些UI kit时候,里面的文字内容最好用不明确含义的字,比如lorem。要跟开发们特意说这件事,不然他们会忘,因为公司以前没有这样的习惯。

关于动效,我的体会一定要结合产品功能,不能为了加动效而去硬加,要关注产品整体。特别炫的效果的不要太多,1、2个够了,多了眼花。润物细无声动效要有,比如页面跳转、折叠收起等等,可以极大的提升产品逼格。常规的动效一定要找参考,不能整太多的幺蛾子,设计的太跳会让用户“出戏”。但是条件允许条件下,那一两个特别炫丽的,可以设计得特别一些,目的就是让用户“出戏”,形成记忆点。

现在说说软件,我要安利sketch了。以前我用ps设计,后来试用了Sketch,立马抛弃了ps。sketch可以直接创建各种手机屏幕尺寸和网页的画板,symbol 和shared style 更是好用的不要不要的,特别适合搭配UI kit。再有各种好用到哭的插件,一键生成各种头像、人名、文字等等。重点来了,sketch连接后续动效principle和切图zeplin会极大提高效率。

principle据说可以直接接受sketch拖动来的图层,但是我还没成功过,所以我使用复制黏贴也基本能满足需要。principle可以自动生成过渡效果,对生成的动效不满意,还可以自由调整。

六、切图标注

准备切图的时候,我会把需要切图的图标们,单独放在一个画板中,避免重复切图。

对于APP的切图,我会对复制过来的按钮、背景尺寸比较大的图进行压缩。比如100px宽的按钮,除了圆角部分,中间的区域可以调整为10px宽,方便Android开发们绘制.9格式。sketch可以一次导出所有需要的尺寸,并命好名。

标注我使用zeplin,在sketch安装插件后,可以直接在sketch里选择想要导入到zeplin的画板,并导出,方便查看绝对尺寸、相对尺寸、字体、颜色等等,还可以自动为色板中的颜色命名(Android开发很喜欢)、生成代码,复制文字内容,对开发们很友好。Zeplin每个账户可免费创建一个项目。可以把sketch的画板命好名,几个产品都导入到一个项目里,但是我不推荐这样做,会很容易混乱。还有一个方法是多注册几个账号,需要邮箱的话,可以去outlook多注册几个,不需要手机号。

总结

说了这么多从知识、工具到职场体会的零碎内容,一是希望能帮到需要的人,二是想请大家批评指正。单打独斗最大的坏处是同行交流少,我写文章也是为了能弥补这些不足。以上说的这些都是建立在对产品有了解的基础上。如果是新接触项目的产品设计师,我建议先从了解产品开始。

 

本文由 @darcy  原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 可以加你QQ 请假一些问题吗

    回复
  2. 属于交互型产品考虑的东西

    回复
  3. 多谢!结构图的整理帮助很大!

    回复
  4. 这应该是产品助理的工作吧?

    回复
加载中