超全面！聊聊UI设计师的工作流程和高频使用工具

@枫之醉语 ：设计师的工作流程鉴于不同规模的公司和项目会有所差异，但基本大同小异，必须有的流程还是要执行的，今天就拿目前我所在的公司的日常举例，顺便推荐一下UI设计师日常使用的工具，干货较多，篇幅较长，强烈推荐。

产品经理：

1. 初期：需求调研 → 竞品分析 → 产品规划；
2. 前期：思维导图「功能模块」 → 需求文档「流程逻辑」，原型设计「信息架构」→ 评审；

设计师：

1. 中期：准备工作 → UI设计 → 交互原型 → 评审→ 标注切图；

攻城狮

1. 后期：开发跟进 → 用例测试 → 上线；

这次重点介绍给设计师小公举安利过日常用的工具：

一、准备工作

小公举会通过口头交流+笔+纸把需求都逐个了解清楚，明白本次的任务目标。

产品结构和逻辑梳理阶段：思维导图软件MindNode ＋流程图软件Viso

逻辑梳理：流程图软件Visio对本次需求的流程进行梳理，这步是很有必要的

很夸张的是，大多数产品团队中，往往只有交互设计师认真从头到尾思考过产品流程；同时大多数产品，直到完成后才发现流程上的 bug，但此时只能假装没看见。

只有设计师明白产品整体的使用流程，才能站在全局的角度去看待本次的设计任务，让设计师也从始至终参项目，这在后面会减少很多沟通成本。

二、UI设计

主力设计工具 Sketch，不用多说，无限尺寸的画布配合快捷键和庞大的第三方模版更利于高效输出移动产品原型。如果在团队全 Mac 的配置下，还可以无缝衔接设计与前端的项目协作。

三、交互原型

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

功能介绍见：《SKETCH绝佳搭配！30秒制作交互原型的次时代神器FLINTO》

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

尤其是给老板，客户展示的时候，一来这货够专（zhuang）业（bi），二来千言万语不如真机来体验一下。

四、评审

用户体验地图：把根据「问题」和「惊喜」的数量情况，和重要性程度，理性地判断每个行为节点的情感高低，并连线。

1、看看最高点，为它多做一点事情，将它推到极致。

2、看看最低点，思考能不能把其它体验值高的步骤，分摊一部分功能到这里，均衡体验情感。

用户体验地图：如果你参加过收费的 workshop 或者看过讲设计方法的书，你一定听过体验地图（Experience Maps）。在一些些台版书籍里也叫使用者旅程图（User Journey Maps）。

体验地图第一大优势：好看。它以视觉化的方式，将用户与产品或服务进行互动时的体验分阶段呈现出来，让体验地图中的每一个节点都能更直观地识别，评估和改善。不论是电子版还是满墙的便利贴，在效果上已经充满了形式美。

体验地图的第二大优势：非常贴合时下流行的「情感化设计」。体验地图能协助团队精准锁定产品引发强烈情绪反应的时刻，同时找到最适合重新设计与改进的地图节点，这一切都几乎用户使用中的情感需求。

体验地图的第三大优势：能够多人参与，并且让所有人都横向梳理一遍产品流程。很夸张的是，大多数产品团队中，往往只有交互设计师认真从头到尾思考过产品流程；同时大多数产品，直到完成后才发现流程上的 bug，但此时只能假装没看见。[br]
为什么你觉得体验地图无用？因为你不知道：

体验地图并不是一个独立的设计方法，它是产品用户研究过程中重要的一部分。在我做过的案例中，体验地图往往是最终收尾、拿结论的最关键节点——但是不能脱离了前期其它设计方法的材料准备。

本小节来自：《为设计加分：手把手教你有效地做用户体验地图》

五、切图标注

相信大多数设计师只希望做好属于自己的界面设计，不想在切图和标注这上面浪费太多时间，每次一到要标注的时候，心中就万头草泥马在奔腾：

劳资是一个设计师，不是切图仔！！！

还是默默地去标注尺寸去了，心里想如果有一天能不在让本公举切图该多好!

切图工具演变路径：马克鳗 → Pxcook→ Zeplin

直到发现了zeplin这个神奇的工具，以后再也不用标注和切图了，使用zeplin有以下好处：

1.标注尺寸那里需要点那里，距离相邻元素的所有尺寸和颜色清晰明了，之前是标注太细致，ui没法看，标太少，相当于没标注

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

3.支持标注，方便团队协作（可以替代prd文档了）

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

实战运用见：《UI设计师怒转！如何做一份让工程师泪流满面的标注？》

随着sketch的普及，好多团队都陆陆续续把sketch作为设计主力工具，去年zeplin发布1.0版本时候还不支持Photoshop cc，一年过去了，最新版本已经可以兼容最新版的ps了，可喜可贺。并且zeplin客户端在Mac和Windows上面都有对应的版本。

再也不需要为了一个zeplin去学习sketch了，ps也支持啦！毕竟再重新学一个软件，本宝宝心好累（ps：经过这一年，我差不多也可以将sketch用于日常工作当中了）

安装步骤：zeplin官方安装帮助

这里不展开讲，后面专栏会详细介绍一些tips和使用技巧。

步骤一：安装软件＋zeplin插件

1. Mac用户：安装sketch；Zeplin.app；zeplin-sketch插件[br]
   直接解压安装即可

2. Windows用户：安装Photoshop CC2015；Zeplin.app；zeplin－ps插件&面板

步骤二：注册zeplin迭代帐号，邀请项目人员。 步骤三：把sketch或ps里的文件导出到zeplin

使用姿势：

切图神器二：Slicy是我测过几种辅助切图工具后又回来使用的神器。「把整个 PSD 扔进去，结束。」简洁利落不啰嗦。我爱它的程度已经到了没有它我就不会切图了（哈哈）。

1. PS 图层依规则命名→2. 把档案丢进 Slicy 里→ 3.完成

具体教程见：《“没有它我就不会切图！”省时省力的切图神器SLICY下载》

够简单无脑了吧？

使用姿势gif：

原文地址：zhuanlan.zhihu

关键字：PS教程, 设计文章, zeplin, sketch

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！