你的所有努力，上天都知道
愿所有的梦想都指日可待
他们有着像素眼/天赋异禀容不得半点瑕疵/偏执却不失热情/怪癖却不失亲和
UI、交互设计
2018年01月26日 天气晴 | 写给设计第22期
“
设计师是这个地球上最有创意的一群人
”
不少刚刚入行做UI、交互设计的朋友，都期待着可以参与公司项目设计的整个流程，但是不同的公司，具体的流程可能是不一样的。对于一些小的公司或者创业型公司，甚至UI、交互设计的流程都是不完整的。
这会让刚入行的UI、交互设计师有些不知所措，困惑。他们特别想具体的了解到UI、交互设计的整个流程。今天呢，我们一起探讨一下。
Step 1 讨论 & 草图框架
所需工具：纸、笔
在一个项目的开始，UI、交互设计师就需要参与到整个项目当中。对于产品需求的了解，不只是产品经理或者项目负责人的事情。所以，需要UI、交互设计师、项目负责人、产品经理和客户一起作出讨论。
这个时候，你就需要画出一个大概的框架草图。
对于一些外包项目，客户的需求很多时候都是模糊的，这个时候，整个产品的功能、结构框架也都是模糊的，所以，可能需要UI、交互设计师积极的与客户或者项目负责人沟通，了解清楚。要不然，你就会抓瞎，没法开始接下来的项目。
Step 2 流程图
所需工具：Mindnode、百度脑图、Xmind、Mindmanager
这个时候，你需要结合开始的产品需求和框架草图，用思维导图工具做出一个具体的流程图，理清你的设计思路。这样你的项目负责人可以直观的看到整个的流程，你在开始设计的时候，也可以依据你做的流程图。
“要不然，无从下手。”
做脑图/思维导图/流程图的工具其实有很多。在这里呢，列举一些常用到的流程图工具，如Mindnode/百度脑图/Xmind/Mindmanager等等。
1.Mindnode
获取地址：后台回复“MN”获取。
Mindnode是在Mac和IOS上的流程图工具，它同时具备专注性和灵活性。是进行头脑风暴和组织规划生活事务的绝佳工具。
2.百度脑图
打开地址：http://naotu.baidu.com/ 或者百度搜索：“百度脑图”即可。
百度脑图是一个线上，云端操作的思维导图工具。即时存取，方便分享\协同，不受终端限制，在任何地方都可以打开。
3.Xmind
后台回复：”XM“,获取该工具。
同样的，Xmind是一款流行思维导图软件，打造易用、美观、高效的可视化思维管理工具。
4.MindManager
后台回复：“MD”,获取Mindmanager工具。
其实，思维导图工具都是大同小异，具体的你用的舒不舒服，需要你亲自实践，你觉得哪个合适你，你就选择用哪一个。
Step 3 框架图 & 原型图
所需工具：Sketch（框架图）、POP(初步原型)、墨刀（高保真原型图和交互）
1.Sketch
后台回复：“sk”，获取sketch文件。
Sketch呢，都知道，是一款轻巧、易用的矢量设计工具。如果你用的是Mac的话，那它就是很合适的。Sketch尤其适合设计师职能不细分的中小团队和个人作品的制作。线框到视觉稿可以在一个软件里完成，能省去不少时间。
原型框架素材包：后台回复：“yx”,下载原型框架素材包。
内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、Apple Watch交互流程包。
在原型框架素材的基础上，用 Sketch 画出符合产品需求的框架图。如下：
2.POP
Prototyping on Paper，一款手机 App，把纸上的东西变为原型。拍照后可在手机上编辑热区，手机上快速模拟原型动效。
你可以在app store下载。
3.墨刀 MockingBot
获取文件：后台回复“墨刀”，获取工具。
墨刀，是一款在线的高保真原型与线框设计交互工具，相信很多设计师都用过。可自动标注、代码样式、下载多倍率切图，解决设计师与多平台开发对接时的交付问题。
Step 4 确定设计稿 & 原型交互
所需工具：Sketch（设计稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互动效）、墨刀（原型交互）
1.Axure
你可以用 Skecth 设计完后，直接上 Marvel，实现高保真交互展示。且 Marvel 有 Sketch 插件，可以一键导入。
如果你设计的是手机 App，用 Marvel 后，就可以直接在手机上给别人演示啦。
2.Marvel
下载地址：https://marvelapp.com/prototype-with-sketch （你可以百度一下）
3.Principle
官网下载地址：http://principleformac.com/
Principle 主要用于实现较复杂的交互动效，操作比 Marvel 难一些，适合有动画基础的人。
4.墨刀
墨刀前面已经介绍了，它呢，是原型工具，也可以实现交互的功能。你比方说，你在墨刀里做了一些原型页面，可以通过交互演示给客户看。这样更直观一些。不多说了。
Step 5 设计 & 待开发
所需工具：PS、AI等（设计）、Cutterman （切图工具）、PxCook（标注、切图工具）、Zeplin（切图、设计稿标注）等。
设计过程就不说了，只要你是一位UI、交互设计师，页面怎么做那你肯定清楚。当你设计完成页面以后，要做的工作就是：标注、切图。
标注、切图的工具有很多，在这里只不过是推荐几款豆豆常用的给你。
1.Cutterman
官方下载地址：http://www.cutterman.cn/zh/cutterman
切图插件，需要你安装到PS插件里。能够自动将你需要的图层进行输出， 以替代传统的手工 “导出web所用格式” 以及使用切片工具进行挨个切图的繁琐流程。 它支持各种各样的图片尺寸、格式、形态输出，方便你在pc、ios、Android等端上使用。 它不需要你记住一堆的语法、规则，纯点击操作，方便、快捷，易于上手。
（温馨提示：需要你安装Adobe Air文件，要不然没有办法安装该插件。）
2. PxCook
官方下载地址：http://www.fancynode.com.cn/pxcook
PxCook既可以标注，也可以切图。是高效易用的自动标注工具, 生成前端代码, 设计研发协作利器。只需点击拖拽, 即可轻松获得间距尺寸, 字体, 阴影圆角等所有信息。PNG, JPG也能手动测量。支持标注单位：PX , PT , DP/SP , REM。还可以生成前端代码，支持Win／Mac, 支持PS／Sketch等。
3.Zeplin
Zeplin 是配合着 Sketch 非常好用的一款插件，设计稿完成后，可以直接从 Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、需导出的图片（在 Sketch 中设好切片的设计稿，在 Zeplin 中可以直接导出），以及共享成员间可以备注和评论。
Step 6 项目进度管理
所需工具：Trello（任务管理）、Bearychat（团队沟通）
项目进度管理的工具也有很多，在这里只是推荐几个。
1.Trello
官网下载地址：https://trello.com/
Trello 是国外非常火的任务管理软件，据说拥有 1900 万注册用户，国际红十字会、谷歌、美国迪尔公司都在使用。
1.Bearychat
官网下载地址：https://bearychat.com/
Bearychat 是中国版的 Slack，聊天群组 + 工具集成，取代 QQ 或微信作为团队工作中的及时聊天沟通工具。
写在最后
对于开发一款产品，如APP来说，是一个漫长的过程，少则一两个月，多则一年半载甚至更长时间。
可能，对UI、交互设计师来说，前期比较的忙。而当你交付到开发，进入开发阶段以后，就是沟通修改的一个漫长过程了。这需要一个团队的良好的协同合作。
所以，一个UI、交互设计师，积极的参与到整个产品项目的设计，在其中成长进步，对UI、交互设计师来说，是非常重要的。
如果喜欢，就分享给你第一个想起的人吧~
评论0