第290期：【工作流程】产品工作流程总结
推荐理由：适合人群：产品设计师。阅读耗时：字数1245，约3.5分钟。这是多年前的经典文案，现在看来基本的框架逻辑依然适用，新的工具替代了老一点的工具，基本的流程没有太大的变化，对于刚刚转型的你来说真好试用，关键是文案没有那么繁文缛节。

工作内容包括：获取需求、收集资料、结构图、交互设计、视觉设计、切图标注
一、获取需求
工具：只要能记录下需求的载体都可以，最喜欢的是execl。
二、收集资料
1.这个产品依赖的硬件。是客户端还是网页，网页要不要考虑pad端。
2.开发技术上的约束限制。
3.如果是再设计，要熟悉产品的一些特殊限制。
三、结构图
结构图包含概念模型、层级图、流程图等。
1.概念模型就是把这个产品涉及的用户、环境、提供的服务大致画个关系图。

2.层级图就是把产品具体的层级结构规划并画下来。基本遵循由大概到具体的顺序。
先列出大致的几个部分，然后慢慢细化，并增加自己想到的需要注意的点。

3.流程图就是把用户想要完成一个任务的过程一步一步列出来，各种操作的可能性要尽可能多的考虑到。

四、交互设计
交互设计过程中，有两点要尽量遵循，一是要平台的设计规范，二是通用的交互设计原则。
我感觉其实APP的设计会比网页设计要简单。无论是iOS还是Android都有设计模板，拿过来用就能设计个及格的方案。网页面积更大，可以承载的内容功能更多，设计方案的可能性也越多。
我用过mindmanager、omnigraffle、Axure。

mindmanager画层级图比较有优势，但是不能无缝对接交互设计。

omnigraffle、Axure都可以在一个文件里完成结构图和交互原型。omnigraffle画结构图有优势，自带交互设计中用到的各种模板，但是导出的文件不能像axure导出的文件那样有个左边栏的页面导航，动效也很有限。

axure能画结构图，但不能自动排版，另一个缺点用浏览器打开高版本的Axure导出的html文件需要安装插件，除非使用Axure share，优点是有导航、动效丰富。
五、视觉设计、动效
视觉设计开始之前要了解企业的品牌、主色，用户的喜好。无法直接获得用户喜好，那就结合产品提供的服务
特色定义主色调，风格。
看看这个色调的大牛设计的好看的界面是怎么配色的，尤其是各种灰度的高级灰用起来，真比普通灰效果好很多。
色相上不要超过2种，比较难驾驭，目前我的水平是最多两种颜色。当然也可以出现多个色彩，但是除了主色、辅色外的这些色彩占得面积一定要小小小。把这些颜色加到色板中，方便设计过程中取用。
我要安利sketch了。以前我用ps设计，后来试用了Sketch，立马抛弃了ps。sketch可以直接创建各种手机屏幕尺寸和网页的画板，symbol 和shared style 更是好用的不要不要的，特别适合搭配UI kit。再有各种好用到哭的插件，一键生成各种头像、人名、文字等等。重点来了，sketch连接后续动效principle和切图zeplin会极大提高效率
六、切图标注
标注我使用zeplin，在sketch安装插件后，可以直接在sketch里选择想要导入到zeplin的画板，并导出，方便查看绝对尺寸、相对尺寸、字体、颜色等等，还可以自动为色板中的颜色命名、生成代码，复制文字内容，对开发们很友好

读后感

UI发展了很多年，但是基本的内容依然变化不大，期间层出不穷的工具，在骆驼看来最好用的不是思维导图而是execl，因为他可以很整洁的两条轴线延伸。

Powered by Froala Editor