2024-6-21 资深UI设计者
本文的前4步适用于公司没有产品经理的情况下。
【Step 1 讨论 & 草图框架】
所需工具：纸、笔
与客户或产品负责人讨论，了解产品的需求。讨论前带好纸笔，讨论时可以画出大概的框架草图。
若是外包项目的话，会更会费周折一点，因为对方可能只有大概的需求，功能、流程无法很快落实到纸上，因此这样的讨论和沟通需要重复多次。
【Step 2 流程图】
所需工具：Mindnode、百度脑图
Mindnode 下载地址：点击进入下载页面
结合产品需求和框架草图，可以用 Mindnode 画出流程图，把文字需求更清晰、有条理地展示出来。如下：
或者也可以使用百度脑图进行绘制： 点击进入百度脑图
Mindnode 是本地使用的，百度脑图是线上使用的，不过样式多一些，更适合线上协作。两者都可以导出 PDF 文件。
【Step 3 框架图 & 初步原型】
所需工具：Sketch（框架图）、POP（初步原型）
Sketch 这里就不过多介绍了，大家应该都知道了 : P 这里是 Sketch 软件（版本 47.1）下载资源：点击进入下载页面
原型框架素材包：点击进入下载页面
内含网页流程图模板、移动线框包、迷你暗色流程线框图、iPhone框架模板、Apple Watch交互流程包。
在原型框架素材的基础上，用 Sketch 画出符合产品需求的框架图。如下：
POP —— Prototyping on Paper，一款手机 App，把纸上的东西变为原型。拍照后可在手机上编辑热区，手机上快速模拟原型动效。
POP 原是由一个仅有3个人的年轻台湾团队做出，后被 Marvel 收购，可与你的 Marvel 账户打通，Marvel 线上做的原型，这下手机浏览起来更方便啦！
POP 下载链接：点击进入App Store
【Step 4 确定设计稿 & 原型交互】
所需工具：Sketch（设计稿）、Axure（原型交互）、Marvel（原型展示）、Principle（交互动效）
Axure 是产品经理必备工具，主要作用就是用来做原型交互的。在没有设计稿的情况下，可以让客户或团队的其他人了解产品的初步原型。也是产品经理与设计师沟通的主要工具之一。
Axure PR 8 下载链接： 点击进入下载页面
作为设计师，我们或许不必用 Axure 了，可以用 Skecth 设计完后，直接上 Marvel，实现高保真交互展示。且 Marvel 有 Sketch 插件，可以一键导入。
前面讲 POP 时提到的，如果你设计的是手机 App，用 Marvel 后，就可以直接在手机上给别人演示啦。
Marvel 插件下载地址：点击进入下载页面
而 Principle 主要用于实现较复杂的交互动效，操作比 Marvel 难一些，适合有动画基础的人。
Principle 下载地址： 点击进入官网
它有本地软件可提供下载，很多复杂炫酷的原型交互效果都是用 Principle 做出来的。如下：
【Step 5 完成设计 & 待开发】
所需工具：Zeplin（切图、设计稿标注）、阿里妈妈（图标）、Icomoon（图标）
Zeplin 是配合着 Sketch 非常好用的一款插件，设计稿完成后，可以直接从 Sketch 导入到 Zeplin 中。Zeplin 可以帮你自动生成尺码标注、CSS 样式代码、需导出的图片（在 Sketch 中设好切片的设计稿，在 Zeplin 中可以直接导出），以及共享成员间可以备注和评论。
Zeplin 下载地址： 点击进入下载页面
Zeplin 帮我们解决了大部分开发前的准备工作，但有 Icons 的设计稿我们还需要用到 Iconfont 或 Icomoon。
要找 Icons 素材，可以上 Iconfont，由阿里妈妈 MUX 打造，它有许多成套的彩色免费 Icon Set。也可以用作 Icons 转 Font 供程序员使用。
阿里妈妈图标库网址： 点击进入官网
Icomoon 和阿里妈妈是一样的，但更棒的是它的编辑功能，设计师们再也不需要去纠结怎么把 Icon 调到画布居中的问题了，它可以挪动、旋转、放大缩小，居中、去色一个 Icon 等（虽然界面看起来有点挫）。
Icomoon 网址： 点击进入官网
【Tips 进度管理】
所需工具：Trello（任务管理）、Bearychat（团队沟通）
在此过程中，我们或许会需要用到任务管理软件，例如 Trello： 点击进入官网
Trello 是国外非常火的任务管理软件，据说拥有 1900 万注册用户，国际红十字会、谷歌、美国迪尔公司都在使用。
看板样式擅长处理流程化任务，适用于产品研发设计等。如下：
由于是英语界面，若是团队中有人对此不适应则可能无法很好得协作。这种情况可以使用中国版本的类似产品，如 Tower 或 Teambition 。
Bearychat 是中国版的 Slack，聊天群组 + 工具集成，取代 QQ 或微信作为团队工作中的及时聊天沟通工具。有在线版和本地版。下载与具体功能可上官网查看： 点击进入官网 。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
关键词：UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发