技术文章

更新说明：1.增加Windows上的图标管理软件icon8，一拖一拽完成，支持ps，axure，Visual Studio等2.增加Windows上素材图片下载软件zoommy

  设计师的工作流鉴和项目会有所不同，但基本相同，必须执行一些流程。以小公举的日常生活为例:

  产品经理：

初期:需求研究 → 竞品分析 → 产品规划前期:思维导图「功能模块」 → 需求文档「流程逻辑」，原型设计「信息架构」→ 评审；设计师：中期：准备: → UI设计 → 交互原型 → 评审→ 标记切图；攻城狮后期:开发跟进 → 用例 → 上线；这次重点介绍安利日常使用的工具:一、准备工作

  小公通过口头交流 笔 纸张逐一了解需求，了解任务目标。

  思维导图软件MindNode +流程图软件Viso

  逻辑梳理：流程图软件Visio梳理这一需求的过程是非常必要的

夸张地说，在大多数产品团队中，只有互动设计师从头到尾仔细思考产品过程；大多数产品直到完成才发现过程 bug，但此时只能假装没看见。

  只有当设计师了解产品的整体使用过程时，他们才能从度看待设计任务，让设计师从头到尾参与项目，这将降低以后的沟通成本。

二、UI设计

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

三、交互原型

  强烈推荐：主要交互工具：Flinto，它是一个使用图片快速生成移动应用程序的原型，简单而粗糙，只要上传几张设计渲染随意拖动几次，只需几分钟就可以部署到手机上查看真实的交互效果，学习成本非常低，最快乐的是最新版本已经有了中文版本。

  Appstore下载Flinto，可以在手机上实时预览，查看逼真的交互效果，和成品没什么区别。开发再也不用问了这个应该跳到哪个页面，怎么操作？...

  特别是在向老板和客户展示时，货物足够专业（zhuang）业（bi），第二，千言万语不如真机体验。

四、评审

  家庭体验地图：根据「问题」和「惊喜」合理判断每个行为节点的情绪水平，并连接数量和重要性。

  1.看最高点，为它多做点事，把它推到极致。

  2.看最低点，思考是否可以在这里分享其他体验值高的步骤的一部分功能，平衡情感体验。

用户体验地图：如果您参与收费 workshop 或者读过关于设计方法的书，你一定听说过体验地图（Experience Maps）。在一些台版书籍中，也叫用户旅程图（User Journey Maps）。使用帮助：以干货开始，如何有效地制作用户体验地图

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

  体验地图的第二大优势：非常适合当今流行的「情感化设计」。体验地图可以帮助团队准确锁定产品引起强烈情绪反应的时刻，找到最适合重新设计和改进的地图节点，这几乎是用户使用的情感需求。

  体验地图的第三个优势：可以有很多人参与，让每个人都水平梳理产品过程。夸张地说，在大多数产品团队中，只有互动设计师从头到尾仔细思考产品过程；大多数产品直到完成才发现过程 bug，但此时只能假装没看见。

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

  体验地图不是一种独立的设计方法，而是产品用户研究过程中的一个重要组成部分。在我所做的案例中，体验地图通常是最终结束和结论的关键节点——但它不能脱离早期其他设计方法的材料准备。

  专栏：理科生是设计师

  作者：星玫

  作者授权，谢谢@星玫

五、切图标注

  我相信大多数设计师只是想做自己的界面设计，不想浪费太多的时间在切割和标记上，每次标记，心里成千上万的草泥马在奔腾

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

  或者默默地去标注尺寸，心里想如果有一天不能让这个公开切图多好啊！

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

  直到发现了zeplin这个神奇的工具将来不再需要标记和切割。zeplin有以下优点：

  1.需要在那里点击标记尺寸，所有距离相邻元素的尺寸和颜色都很清晰。以前的标记太详细了，ui看不见，标记太少，相当于没有标记

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

  3.支持标记，方便团队合作(可替代)prd文档了）

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

  关于zeplin：

  随着sketch许多团队纷纷推广sketch去年作为设计的主要工具zeplin发布1.0版本时不支持Photoshop cc，一年后，最新版本可以与最新版本兼容ps可喜可贺。还有zeplin客户端在Mac和Windows上面有相应的版本。

  不再需要为了一个zeplin去学习sketch了，ps也支持！毕竟再学一个软件，宝宝好累。（ps：这一年过去了，我几乎可以了sketch用于日常工作)

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

  这里专栏将详细介绍一些tips和使用技巧

  步骤1：安装软件+zeplin插件

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

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

第二步：注册zeplin迭代帐户，邀请项目人员。

  步骤三：把sketch或ps导出文件zeplin

使用姿势：

  切图神器2：slicy是我测量了几种辅助切图工具后回来使用的神器。「把整个 PSD 扔进去，结束。」简洁利落，不啰嗦。没有它我爱它的程度(哈哈)。

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

  够简单无脑吧？

  使用姿势gif：

「其他」

  1.图标管理工具

  ▌iconjar for Mac：目前支持 SVG、PNG、Gif 三种格式的图片。建议您在官方下载官方资料库资源时尽量导入svg这样，毕竟是矢量.

  选择图标时，侧栏会出现名称和标签。当然，不需要的右栏也可以隐藏在菜单栏中。.

  偷懒姿势：

  1)下载图标并安装:官方资料库

2） 把图标拖进sketch或ps 里。▌Icon8 for Windows：提供客户端（Mac/Windows）为了方便用户搜索和直接下载图标，未付费用户可以使用客户端程序获得50PX（像素）的 PNG 图标颜色可以自定义。在通常的使用中，如果你想进一步获得大尺寸的图标或大尺寸的图标，这些风格统一定制的小图标就足够了。 eps 矢量格式需要付费。

  支持：Photoshop, Axure, Visual Studio 等等，如图所示

  2.字体管理工具：Rightfont

  下面是google自动翻译的大概意思是正确的

  3.GUI 标准化管理与共享(图标/色板) → Lingo 下载

  内部设计师和公共开发GUI使用设计规范，

团队:个人收费:完全免费:

  顶部工具栏可以创建颜色板，吸收颜色后可以直接创建Com ** nd c ** Com ** ndl v粘贴 进sketch或ps 完成取色任务.

  最右边支持HEX RGB HSB 复制和粘贴颜色，同时支持css快速显示颜色代码

  偷懒姿势：

  1） 创建色板

  2）把Com ** nd c ** Com ** ndl v粘贴 进sketch或ps 里。

  4.收集设计材料：Zoommy Inboard

Zoommy （Mac/Windows均可）

  每个设计师都有一个习惯，那就是在设计之前搜索材料。每次找到合适的材料，都需要很长时间。你知道百度的图片质量。问题来了。如何快速获得您想要的图片材料？

  相对来说，我们上高中的时候，找不到自己喜欢的材料。现在比以前好多了，免费材料也多了很多。有些质量很好，高清 ** 大图。

  所以小公用的是多图库源管理应用-Zoommy，有了它，我们可以很容易地关注40多个图库源，大大提高了寻找材料的效率。

妈妈再也不担心我找图了，hiahia~Windows也可以用在上面，不多说，上图:Inboard：比Ember更轻盈

  如果你用过Ember回头再用Inboard，你会发现它的功能真的少了很多。但其优点是应用足够轻，易于使用。Ember我将永远使用的复杂功能只是其中的一小部分。

  1.文件夹和Tag图片素材管理的方式

  2.Chrome、Safari保存全屏截图

  3.Dribbble like关注两个核心功能 延伸阅读 如何成为 Dribbble 的 Player ？

   使用截图

5.收集其他材料

  挖坑，我再整理一下，单独发一篇文章

  在引用之前，作者不接受任何形式的转载，他也隐藏了很多，有时间分享，欢迎拍砖

填坑:设计师日常使用的素材网站有哪些？(附下载地址):

  目录

图片：网站收集 → 2.图标：网站收集 → icon3.字体：字体下载 →4.设计灵感：sketch和 psd下载5.微视频6.音频

  最近的写作预告：

  「 安利小工具设计小公举 」它们都是小工具，非常方便，如压缩图片、图标一键转换各种尺寸等。

  「 图片版本控制工具 」1.满足团队写作 2.满足图片版本记录

  「 omniplan管理项目 」官方用户手册 使用技巧Tips

  题外话：

  首先，感谢您的关注和支持。我会努力写这个专栏。前期主要是分享工具，后面会发一些故事和甲方撕。一个新手刚开始写专栏，很多地方都不太懂。请包容。

  对这些软件感兴趣的学生可以给我发私人信息，分享他们使用软件的经验

  致歉:

5.文章之前引用的材料推荐部分已经删除。作者刚刚发了一封私人信件，我不允许以任何形式转载。我有机会把它整理出来，然后再写一遍。我以前不太了解知乎的引用规则。我不能赔偿伟大的上帝 作者:刘炜 不好意思在问你之前引用了你的电脑照片。另外，其他部分保证原创，认为我文章有问题的朋友可以私信给我

  相关文章：

  设计师日常使用的素材网站有哪些？(附下载地址)

  UI设计师日常使用的工具有哪些？(干货多，篇幅特长)

  不用担心改稿！UI常用的设计师 版本控制工具