第255期：用时约3分1140字

[设计心得]产品设计师若干小心得

推荐：从接到需求开始到最后配合研发完成设计制作工作，通过本片和大家分享一些小心得，希望可以对你有所帮助。

一、获取需求

工具：omnifocus：只要能记录下需求的载体都可以

二、收集资料

1.这个产品依赖的硬件。是客户端还是网页，网页要不要考虑pad端。

2.开发技术上的约束限制。

3.如果是再设计，要熟悉产品的一些特殊限制。

三、结构图

结构图包含概念模型、层级图、流程图等。

1.概念模型：把这个产品涉及的用户、环境、提供的服务大致画个关系图。

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

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

四、交互设计

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

我常用的找参考资料的地方：dribble、enhance、Pinterest、calltoidea等等。有条件还是翻墙吧。我用过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的画板，并导出，方便查看绝对尺寸、相对尺寸、字体、颜色等等，还可以自动为色板中的颜色命名、生成代码，复制文字内容，对开发们很友好

Powered by Froala Editor