图片来自 小桃《如何成为一名攻城狮体验良好的设计师？》

这一改变对在前端工程师实现设计细节方面起到了极大的助力作用，然而其中存在着两个不可否认的缺点，其一为方便了工程师，却给视觉设计师带来了麻烦——标注耗时过长，其二是在标注过程当中，总会出现存在缺漏之处的情况，而此种情况使得后期还需要再次进行补充，这也致使后期沟通以及反复的成本有所增加，设计师是一群不妥协且持续思索解决办法的人，基于这两点，我们最终找到了能解决这两点的有效工具—— 。

1.标注神器：

上一版本的只有在设计稿中标注各距离大小的功能：

1.0版本

而这一版本就有很大的更新，我们来看一下菜单：

2.0版本

在之前就已存在的功能之上，又增添了两个板块方面的内容，于此处我们着重去介绍“Spec ”此项功能，点击“Spec Expor”t之后会出现一个弹出的框体，其显示出所有设计画板的名称，在这个框体之中选择需要进行导出的画板。

点击“导出”，选定存放地址，会自动生成一个文件夹，其名称为原文件名，点击文件夹里的index.html文件，在游览器中会显示标注界面 。

通过对这个界面进行操作，前端工程师能够随心所欲地查看此html当中的全部界面标注喽！来哦！给予称赞呀！

2.重要注意点

虽然我们有了这个神器，但还有以下几点需要大家注意的：

关于工具，导出后的文件名得用英文，在系统把中文名文件下载之后，所有画板名称皆会变成乱码，Mac系统不存在这个问题。

关于设计稿，在设计稿当中，要极其认真、精准每一个元素所处的位置，由于工程师会依照文件里的标注去完整达成，这便对设计师在文件管理方面提出了更细致的要求 ；

3. 视觉规范以及稿件管理，其中遵循视觉规范，还要依照规范针对文字予以标注，在动图里，于右侧信息栏中，我们看到了如此一条信息：

这几个字母数字是什么意思呢？我们再看这两张图

点融网某产品视觉

这是我们和工程师之间的“约定”，也就是俗称的那种。我们在其中制定了一系列代号，这些代号由字母加数字构成，其作用是用来替代各色值、字号、控件等。工程师会依据我们的代号在库中进行设置，如此一来在工作时就无需每次都敲入长长的色号、字大小、控件等内容，只需输入代号就行，就如同这里的C是Color的缩写，S是Size的缩写 。

有了其中的代号之后，我们接下来就要在设计文稿里针对每一种字体样式“new text style”，它具有明显的好处，一是前端实现更为快捷，二是当需要对同一属性元素作出修改时，只需要修改一个，其余的元素便会自动发生变化，高效且快捷！！

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

在遵循精细的视觉与设计稿规范的前提下，我们利用这个工具，以此达到节约视觉设计师大量时间的目的。

那具体节约了哪些时间呢？个人认为有三点：

1.标注设计稿的时间

2.需要修改设计稿时，改稿后再修改标注的时间

3.后期，缩短与前端实现的Demo校稿修改的时间

那节约出来的时间可以做什么呢？

第二招：慢动手，先动脑

1.业务需求

多数时候在工作里，视觉设计师拿到交互稿于不明白之处询问交互设计师，知晓开发上线时间后给出自身完成时间，随后着手工作 。

然后会有几种情况出现：

1.完美的一次通过（在做梦吧～）

为了能有更好的结果，进行视觉方面的修改，这种修改处于正常状态，一切都是为了让用户能更加直观清晰地看到相关内容，这样做是值得的！

需求发生变动，交互稿跟着改变，视觉稿持续不断地再三进行改动，内心是崩溃是，这才是日常。

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

答案是我给出的：朝着业务方向迈进！起初不存在时间去知晓业务需求，借助第一招就能挤出参与交互讨论的时间，前期对业务的了解极为关键！极其关键！万分关键！（关键之事讲三次），并且前期的了解同样是提升效能的关键所在！

了解业务需求的3点好处：

1. 知晓业务需求能让我们明晰，为何去做此功能，我们最终的目标是啥。在脑海里存有清晰认知，方可在视觉设计之际，凸显并表明重点。我们易于从美观层面去布置页面，而交互会从用户功能运用的便捷流畅性予以考量。我们的视觉需审慎，不在交互稿上实施减法，而是施行加法，使用户径直直击重点。

能够对业务需求予以了解，这能够有效地减少与交互开展沟通所需要耗费的时间，此处所提及的沟通乃是无效沟通，这样的无效沟通为视觉由于误解功能从而致使交互方面的沟通被减弱的沟通；要是能够熟悉业务需求的话，反而能够让交互参与进视觉创意当中，“谋士众多，所谋乃成——圣经箴言15章22节”，如此一来或许能够共同创造出更好的产品。

3. 了解业务需求，这会增加我们视觉设计师的设计范畴，能让我们更多知晓交互设计相关情况，以及项目经理的工作职能与技能需求。好的视觉设计师犹如一个好演员，普通的小演员，会关注自己能不能处于良好的光源之下，镜头里自身美不美观，可不可以站到一个适宜的位置 。好演员，会整场去考量，自身要是戴了眼镜，于表演之际不让光反射在镜片上，能清晰晓得自己有无出镜，会增添些动作，为的是后期剪辑时便于剪辑。我们恰似一个好演员，我们对与自身相关的职能了解得越多，在展现自身设计能力进程中，方能成为他人的助力，这才是专业的呈现。

2.分析功能

达成一个目的借助一个功能，突出一个重点依靠一个页面。这是我于设计进程中秉持的理念。当拿到一份交互稿之际，首先要自行剖析交互稿所讲的内容，重点究竟是哪一个，接着与交互设计师核实自身的理解是否无误，确认所有细节。

举个例子：

这张交互稿，指明了页面交互重点操作所在之处，是两个输入框，视觉设计师需完成的工作是，平衡插图与重点的轻重关系，让提示文字，能醒目地被用户阅读，还要确保单个页面，符合整个App的视觉风格。

接着我们做了几种尝试，如图：

左图之中，输入信息跟提示信息处于一处，信息的那么一个层级并未被拉开 ，用户是需要自己去分辨那些信息。右图呢，区分了信息，已然是好多了 ，但重点依旧是不够突出，虽说如此这般也还可以，可终究还是不满意 。在再次去做了好些尝试之后，最终做出了这样的决定，就如同下面这个图所呈现的这般：

针对页面重点sketch measure，进行了层叠与阴影的运用，以此突出重点，辅助插图特意采用黑白色调的图标，目的在于不抢夺页面重点，视觉设计师在知晓重点后，于有限时间条件下，能够有多种尝试从而做到最好， 。

3.Mind Map

出产物的质量与两个点有关，一是项目所处的阶段，二是时间。

设计师脑子里得有特别清楚的认知，手上的设计究竟处于MVP版本，还是早期版本，又或是视觉体验优化阶段，每个阶段对于设计的要求都是不一样的，项目给到设计师的相应时间也是不一样的。通常来讲，早期项目反复的次数更多，给到的时间还短，处于试错的阶段，在这种情况下产品里视觉一般不是重点，更多的是产品自身的商业定位之类的。在这个进程当中，视觉要尽最大努力帮产品尽快上线，别太过于纠结，先达成功能目标，视觉和体验能够在后续的版本里进行迭代。对于我们设计师而言，这种妥协的确是很让人感到不舒服的，我们极其不愿意看到自己所经手的设计明明具备能够更好的条件，然而却因为产品的需求而不得不做出妥协sketch measure，在这个时候，对于产品的宏观认识便起到了关键作用。

我们在动手做设计之前，要先去了解业务需求，拿到交互稿的时候要分析重点，还要清晰地了解团队所处的阶段所有这些条件，都是为了我们能够利用有限的资源使设计达到最优其中，也节省了许多沟通的时间，提高了沟通的质量就如同和聪明人交谈，说一句话他就明白，不费力气站在更宏观的角度，也能够让我俩变成“聪明人”。

于日常工作期间，我愈发发觉，动手之前多些思考，动手进行时反复的情形就会越少，并且能够更具效率，若想知道在真正动手之际还有哪些小技巧，且听下回分解 。

PS：

一直以来我都在思索，互联网视觉设计师怎样在职业方面做到精深，不少视觉设计师遇到过这样的情况，他们想转行去做交互或者项目经理，却寻觅不到视觉设计师的价值以及专深入点。伴随而来的，我也处于思考与探索进程里，上面所讲的是我当下想到的部分要点，同时也欢迎同行者一起探讨，彼此启发。

注：DDC隶属于点融技术部—点融黑帮，点融黑帮微信

关注『UI设计达人』

如有侵权请联系删除！