实战经验！两个大招帮视觉设计师高效完成工作

对于视觉设计师来说，除了设计产品本身所占用的时间外，对我们设计师自己的成长毫无意义的工作应该是“标记”～在工作中，一些大功能标记通常需要一天的工作时间。前端工程师如何清楚地了解界面内容，节省视觉设计师的工作时间？最近，我们的团队找到了一种新的方法。在实施了一段时间后，在得到了前端兄弟的良好反馈后，我想与您分享，我希望能帮助你有这样的麻烦。

点融设计中心DDC微信微信官方账号欢迎关注：「ID：DR_DDC」

第一步：标注神器

让我们先了解一下我们过去的标记方法：一直关注我们DDC的合作伙伴必须阅读我们的文章“无忧无虑的效率！帮助设计师更好地与工程师沟通的三种方法”。其中，我们从混乱的标记演变为清晰的标记：

这一变化极大地帮助了前端工程师实现设计细节，但有两个不可否认的缺点：1。方便工程师，麻烦视觉设计师——标记太耗时；2。在标记过程中，总是有缺陷，以后需要弥补，这也增加了以后沟通和重复的成本。设计师是一群不妥协、不断想要解决方案的人。基于这两点，我们终于找到了解决这两点的有效工具——Sketch Measure。

1. 标注神器：Sketch Measure

上一版Measure只在设计稿中标注各距离的功能：

△ SKETCH MEASURE 1.0版本

而且这个版本有很大的更新，我们来看看菜单:

△ SKETCH MEASURE 2.0版本

两个板块的内容也被添加到原始功能中，这里我们主要介绍“Spec Export此功能。点击“Spec Expor“t出现弹框，显示所有设计画板的名称，在此选择需要导出的画板。

点击“导出”，选择存储地址，自动生成以原Sketch文件名称的文件夹，点击index.html文件将在游览器中显示标记界面 。

操作此界面，前端工程师可以自由查看html中的所有界面标记！

2. 重要注意点

虽然我们有这个神器，但还是有以下几点需要注意:

1. 关于工具：导出后的文件名需要使用英文。在Windows系统中使用中文名称文件下载后，所有画板名称将变成随机代码。Mac系统没有这个问题；

2. 关于设计草案：在设计草案中，每个元素的位置都需要非常仔细和准确，因为工程师将完全按照文件中的标记来实现，这要求设计师在文件管理中更加详细；

3. 视觉规范和手稿管理：遵循视觉规范，并根据规范标记文本。在动态图片中，我们在右侧的信息栏中看到这样一条信息：

这些字母数字是什么意思？让我们看看这两张图片：

△ 点融网产品视觉GUIDELINE

这是我们与工程师的“协议”，通常被称为谷歌。我们在谷歌中制定了一系列代号，它由字母和数字组成，用来取代颜色值、大小、控制等，工程师根据我们的代号设置库，所以在工作中不需要每次输入长色号、大小、控制等，只要输入代号，如C是谷歌，S是谷歌的缩写。

有了Guideline中的代号，我们下一步就需要在Sketch设计文稿中为每一种字体样式“Create new text style"，它明显的优点是:1。前端实现更快 2.当需要修改相同属性元素时，只需修改一个元素，其余元素会自动变化。高效快捷！！

3. 总结:时间是高效的关键之一

在遵循视觉Guideline和精细设计草案规范的前提下，我们使用Sketch Measure是节省视觉设计师大量时间的工具。

具体节省了什么时间？个人认为有三点:

1. 标注设计稿的时间2. 设计稿需要修改时，改稿后需要修改标注时间3. 在后期，缩短修改前端实现的Demo校稿的时间

节省的时间能做什么？

第二步：慢动手，先动脑

在大多数情况下，视觉设计师在工作中获得了互动草案。当他们看到自己不懂的地方时，他们会问互动设计师，了解发展的在线时间，给自己完成的时间，然后开始工作。

然后会出现几种情况:

1.完美的通过(做梦吧)～）2.为了更好的结果，视觉修改(正常，一切都是为了用户更直观清晰——值得！)3.需求变了，互动稿也变了，视觉稿又变了(内心崩溃了，这是日常生活)

对于第三点，我们真的束手无策吗？

我的答案是：做生意！最初，我没有时间了解业务需求。参与互动讨论的时间可以通过第一步挤出。对早期业务的理解非常重要！非常重要！非常重要（重要的事情说三遍），早期的理解也是提高效率的重要关键！

1. 业务需求

了解业务需求的三个好处：

1. 了解业务需求会让我们知道：为什么要做这个功能，我们的最终目标是什么。只有在大脑中有一个清晰的认知，我们才能在视觉设计中突出和展示关键点。我们很容易从美丽的角度布局页面，交互将考虑用户功能的方便性和流畅性。我们应该在视觉上谨慎，不要在交互草案上做减法，而是做加法，让用户直接触及关键点。

2. 了解业务需求可以有效地减少与交互的时间，这意味着由于误解功能，无效的沟通——视觉削弱了交互的沟通。如果你能熟悉需求，但让互动参与视觉创造力，“有很多顾问，计划成功——圣经谚语15章22节”，你可以一起创造更好的产品。

3. 了解业务需求可以增加我们视觉设计师的广度，更多地了解交互设计和项目经理的工作职能和技能需求。一个好的视觉设计师就像一个好演员。一般来说，小演员会关心他们是否能站在好的光源下，他们在镜头中是否美丽，以及他们是否能站在好的位置。一个好的演员可以考虑整个游戏。如果他戴着眼镜，他可以在表演时防止光线反射到镜头上。他可以清楚地知道自己是否出现在镜头上，并采取更多的行动，以便在以后的编辑中轻松切割。。。。我们就像一个好演员。我们越了解与我们相关的功能，我们就越多

2. 分析功能

一个功能实现一个目标，一个页面突出一个关键点。这是我在设计过程中所坚持的想法。当你得到一份互动手稿时，你应该首先分析互动手稿在说什么，重点是什么，然后与互动设计师确认你的理解是否正确，并确认一切细节。

举个例子：

本交互草案解释了页面交互的关键操作在两个输入框中，视觉设计师需要平衡插图和关键点之间的关键关系，提示用户可以显著阅读文本，单页符合整个应用程序的视觉风格。

然后我们做了几个尝试，如图所示:

左图输入信息和提示信息，信息级别没有打开，用户需要区分自己的信息。右图区分了信息，好多了，但重点还是不够突出。虽然可以，但还是不满意。经过一些尝试，我最终决定了如下图所示:

使用层叠和阴影来突出页面的焦点。辅助插图特别使用黑白图标，只是为了不抓住页面的焦点。在理解了关键点后，视觉设计师可以在有限的时间条件下尝试做到最好。

3. Mind Map

产品的质量与两点有关，一是项目的阶段，二是时间。

设计师应该有一个非常清晰的认知，手头的设计是在MVP版本，或早期版本，或视觉体验优化阶段，每个阶段的设计要求不同，项目给设计师相应的时间也不同。一般来说，早期项目重复较多，给予时间较短，处于试错阶段。此时，视觉不是产品的焦点（通常），而是产品本身的商业定位等。在这个过程中，视觉尽力帮助产品尽快上线，不要太纠结，首先实现功能目标，视觉和体验可以在后续版本中迭代。当然，对于我们的设计师来说，这种妥协是非常不舒服的，我们不想看到我们处理的设计显然可以更好，但我们需要为产品妥协。此时，对产品的宏观理解起着关键作用。

在我们开始设计之前，我们需要了解业务需求，在获得互动草案时分析重点，并清楚地了解团队的阶段。这些条件是为了利用有限的资源来最好地设计设计。它还节省了大量的沟通时间，提高了沟通质量。就像和聪明人说话一样，说他明白，不难。从更宏观的角度来看，我们也可以成为“聪明人”。

在日常工作中，我越来越发现，在开始思考之前，重复越少，效率就越高！想知道真正的技巧，窃听下一个分解。

PS：

我一直在思考互联网视觉设计师在职业生涯中是如何深入的。我遇到过很多想转行做互动或者项目经理的视觉设计师，找不到视觉设计师的价值和深度点。我也在思考和探索。以上是我现在想到的一些点。也欢迎同行讨论，互相启发。

点融设计中心DDC微信微信官方账号欢迎关注：「ID：DR_DDC」

「更高效的好文章」

设计师管理：“你只能用百度吗？让我们来看看帮助您高效工作的信息收集和管理：“慢慢来！快速收集本高效设计师培养指南资源整理：“超高效！帮助您轻松掌握实用设计资源整理的三个步骤”。作者懒惰，没有插入文章中的生产力工具：“效率10前端/设计师必备的生产力工具”

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================优设网==============.com“它是中国最受欢迎的网页设计师学习平台，专注于分享网页设计、无线终端设计和PS教程。设计师需要阅读的100本书：历史上最完整的设计师图书导航：http://hao.uisdc.com/book/.设计微博:拥有190万粉丝的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源，下载顶级设计材料。设计导航：推荐世界顶级设计网站，设计师必须导航：http://hao.uisdc.com