设计师的工作流程根据公司大小和项目不同有所差异，但基本都是一样的，必要的流程还是要遵循的，就拿我公司小公主的日常为例吧：

产品经理：

设计师：

攻城狮

这次就重点介绍一下小公子日常生活中用到的工具：

1. 准备

小公主会用口头交流+笔+纸的方式来逐一了解需求，明白这次任务的目标。

产品结构及逻辑整理阶段：思维导图软件+流程图软件

逻辑排序：流程图软件把这个需求的流程理顺了，很有必要

夸张的是，在大多数产品团队中，只有交互设计师从头到尾认真思考过产品流程；同时，对于大多数产品来说，流程中的 Bug 都是在完成后才发现的，但此时他们只能假装没看到。

设计师只有了解了产品整体的使用流程，才能以全局的眼光看待设计任务sketch取色快捷键，让设计师从头到尾参与到项目中，后期会减少很多沟通成本。

2. UI 设计

主打设计工具就不用多说了，带有快捷键的无限尺寸画布以及大量第三方模板更利于移动端产品原型的高效输出，如果团队全员配备Mac的话，还能无缝衔接设计与前端项目协作。

3.交互式原型

强烈推荐：主打交互工具，用图片快速生成移动应用的原型，简单粗暴，只需要上传几张设计效果图，拖拽几下，几分钟就可以部署到手机上，查看逼真的交互效果，学习成本极低，最棒的是已经有最新版本了。

下载下来，可以在手机上实时预览，看到逼真的交互效果，跟成品差别不大，开发者再也不用问这个要跳转到哪个页面，这个要怎么操作……

特别是在给老板或者客户展示的时候，一来足够专业，二来千言万语也比不上亲身体验真实的机器。

四、回顾

用户体验地图：基于“问题”和“惊喜”的数量和重要性，合理判断各个行为节点的情感层次，并进行串联。

1、目光瞄准最高点，为之多做一点，将其推向极致。

2.看看最低点，思考能不能把其他经验值高的台阶的部分功能分配到这里，平衡经验情绪。

用户体验地图：如果你曾经上过付费课程，或者看过设计方法方面的书，你一定听说过体验地图，在一些台湾书籍里，它也被称为用户旅程地图。

体验地图的第一个优点：好看。它将用户与产品或服务交互的体验以可视化的方式分阶段呈现，让体验地图中的每个节点都能更直观地被识别、评估和改进。无论是电子版还是贴满便签的一面墙，效果已经充满了形式美。

体验地图的第二大优势：契合了当下“情感化设计”的潮流。体验地图可以帮助团队精准识别产品引发强烈情感反应的时刻，找到最适合重新设计和改进的地图节点。几乎涵盖了用户在使用过程中的情感需求。

体验地图的第三个优势是可以多人参与，所有人都可以横向回顾产品流程。夸张地说，大多数产品团队中，只有交互设计师从头到尾仔细思考过产品流程。大多数产品，流程 Bug 都是在完成后才发现的，但此时我们只能假装没看到。

为什么你认为体验地图没用？因为你不知道：

体验地图并不是一种独立的设计方法，它是产品用户研究流程中的重要一环。在我做过的案例中，体验地图往往是最终得出结论的最关键节点——但它又离不开之前其他设计方法的素材准备。

5. 切割图注释

相信大部分设计师只想做好自己的界面设计，不想在裁剪和标记上浪费太多的时间，每次需要标记的时候心里都感觉千军万马奔腾。

我是设计师，不是裁缝！！！

我只是默默地标记尺寸，想着如果有一天我不再需要剪切图片该有多好！

切削刀具的演变：Mark Eel → →

直到我发现了这个神奇的工具，我再也不用标记和剪切图片了。使用它有以下好处：

1. 需要标注的地方就标注尺寸，所有相邻元素的尺寸、颜色都要清楚。以前的标注太详细，UI 不好读，标注太少，相当于没有标注。

2.支持css/less/saas等css属性，直接粘贴，开发太爽了

3.支持注释，方便团队协作（可替代PRD文档）

4.支持调色板和字体导航，可作为使用规范

关于：

随着的火爆，不少团队也逐渐把它当成了主力设计工具。去年发布1.0版本的时候，还不支持CC，一年过去了，最新版本已经可以兼容PS最新版本了，很棒。而且客户端在Mac以上版本都有对应版本。

不用再学新软件了，PS 也支持！毕竟学新软件很累（PS：经过这一年，我几乎可以在日常工作中用到它了）

这里就不多说了，后面的专栏会详细介绍一些小技巧和使用技巧

步骤 1：安装软件+插件

1. Mac 用户：安装；.app；-插件

只需解压缩并安装

2. 用户：安装；.app；-ps 插件和面板

第二步：注册迭代账号，邀请项目人员。

步骤 3：将文件导出到或 PS

使用姿势：

图片裁剪工具2：Slice是我在测试了几个辅助图片裁剪工具后，重新回归的工具。“把整个PSD扔进去就好了。”简洁而不冗长。我爱它爱到没有它就活不下去的程度。我现在可以裁剪图片了（哈哈）。

1.按规则命名PS图层→2.将文件放入Slicy→3.完成

够简单且无脑了吧？

使用姿势 gif：

“其他”

1. 图标管理工具

▌Mac：目前支持SVG、PNG、Gif图片，建议大家下载官方资源库资源时导入SVG格式，因为它毕竟是矢量图。

选择一个图标，其名称和标签就会出现在侧边栏中。当然，如果你不需要右侧边栏，你可以将其隐藏在菜单栏中。

懒惰姿势：

1）下载并安装图标：官方素材库

2）将图标拖入或ps。

▌：提供客户端（Mac/），方便用户搜索并直接下载图标。未付费用户使用客户端程序即可获得50PX（像素）的PNG图标，并可自定义图标颜色。在正常使用中，这些样式统一、颜色可自定义的小图标已经足够。如果想要获得更大的图标或EPS矢量格式，则需要付费。

支持：Axure等，如图

2.字体管理工具：

以下是自动翻译，大体意思还是正确的

3. GUI 规范管理和共享（图标/调色板）：这是下载链接 → Lingo 下载

这可以作为内部设计人员和开发人员的一套 GUI 设计规范。

顶部工具栏可以创建调色板，颜色创建好后，只需按 +c 复制 +v 粘贴到 中sketch取色快捷键，即可完成选色任务。

最右边支持HEX RGB HSB颜色的复制粘贴，也支持CSS颜色代码的快速显示

懒惰姿势：

1）创建调色板

2）复制 +c 并粘贴 +v 到或 ps 中。

4. 设计素材收集：+

每个设计师都有一个习惯，就是在设计之前先去搜索素材，每次都要花很长时间才能找到合适的素材，百度的图片质量大家都是知道的，那么问题来了，如何快速的获取到自己想要的图片素材呢？

相对来说，高中的时候找了半天也找不到自己喜欢的图片，现在比以前好多了，免费素材也多了很多，有些还是很不错的，有高清的、无删减的大图。

所以小公主使用一款多画廊源管理应用-，有了它我们可以轻松关注40多个画廊源，找素材的效率大大提高。

妈妈再也不用担心我找照片了，~

上面的也可以用，不多说了，上图：

如果你再使用 Ember，你会发现它的功能确实少了点。但好处就是应用程序足够轻量，使用起来也很简单。纵观 Ember 中复杂的功能，我永远只会用到其中的一小部分。

1.通过文件夹和标签管理图片素材

2.保存全屏截图

如有侵权请联系删除！