UI设计师日常使用的工具会有哪些？

Date 2025-02-27 18:52:44

鉴于不同规模的公司和项目，设计师的工作流程会有所不同，但基本相同，必须执行一些流程。以我公司目前的小型公开活动为例

鉴于不同规模的公司和项目，设计师的工作流程会有所不同，但基本相同，必须执行一些流程。以我公司目前的小型公开活动为例：

产品经理：

初期:需求研究 → 竞品分析 → 产品规划；

早期阶段：思维导图「功能模块」 → 需求文档「流程逻辑」，原型设计「信息架构」→ 评审；

设计师：

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

攻城狮

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

这次重点介绍小公举安利日常使用的工具:

一、准备工作

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

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

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

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

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

二、UI设计

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

三、交互原型

强烈推荐：主要互动工具Flinto，是一个使用图片快速生成移动应用程序的原型，简单粗糙，只要上传几张设计效果图拖动几次，只需几分钟就可以部署到手机查看现实的互动效果，学习成本很低，最高兴的是最新版本有中文版本。

下载Flinto后，Appstore可以在手机上实时预览，查看逼真的交互效果，与成品没有太大区别。开发不再需要问，这应该跳转到哪个页面，如何操作...

特别是在向老板和客户展示时，货物足够专业（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官方安装帮助

以下专栏将详细介绍一些提示和使用技巧

第一步：安装软件＋zeplin插件
1.Mac用户：安装sketch；Zeplin.app；zeplin-直接解压安装sketch插件
2.Windows用户：安装Photoshopp CC2015；Zeplin.app；zeplin－ps插件&面板
第二步:注册zeplin迭代账号，邀请项目人员。
第三步:将sketch或ps中的文件导出到zeplin

使用姿势：

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

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

够简单无脑吧？

使用姿势gif：

「其他」

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

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

偷懒姿势：

1. 下载图标并安装：官方资料库

2. 将图标拖入sketch或psch 里。

2.字体管理工具：Rightfont

以下是谷歌自动翻译，大概意思还是正确的。

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

可作为公司内部设计师和开发公用GUI设计规范使用，

团队:收费

个人:完全免费

顶部工具栏可以创建颜色板，吸收颜色创建后，直接复制Command+c Commandl+v粘贴进入sketch或psetch 在里面，完成着色任务.

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

偷懒姿势：

1. 创建色板

2. 复制Command+cc Commandl+v粘贴进入sketch或psetch 里。

4.收集设计材料：Zoommy+Inboard

Zoommy

每个设计师都有一个习惯，那就是在设计之前搜索材料。每次找到合适的材料，都需要很长时间。你知道百度的图片质量。所以问题来了。如何快速获得您想要的图片材料？
相对来说，我们上高中的时候找图片，很久都找不到自己喜欢的材料。现在比以前好多了，免费材料也多了很多。有些质量很好，高清五码图。
所以小公用的是多图库源管理应用-Zoommy
不多说，上图。
妈妈再也不担心我找图了，hiahia
Zoommy，有了它，我们可以很容易地关注40多个图库源，大大提高了寻找材料的效率。