帮助视觉设计师高效工作的三大招

互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。


互联网视觉设计师如何在职业上精深一直是我在思考的,遇到过许多视觉设计师想转行去做交互或者项目经理,找不到视觉设计师的价值和专深入点。我也在思考与探索中,下文是我现在想到的一些点,也欢迎同道中人一同探讨,互相启发。

帮助视觉设计师高效工作的三大招

第一招:标注神器

对于视觉设计师来说,除了设计产品本身占用时间外,对我们设计师自身成长并没有什么意义的工作应该就是“标注”了~在工作中,有些大的功能光标注一般就要占去一天的工作时间,如何即能让前端工程师清晰了解界面内容,又能节约视觉设计师工作时间?最近我们团队就找到了新方法,在实行了一段时间,得到前端小哥的良好反馈后,在此与大家分享,希望能帮助到同有此烦恼的你们。

我们先了解一下过去我们标注方法,我们从凌乱的标注进化到清晰的标注:

帮助视觉设计师高效工作的三大招

帮助视觉设计师高效工作的三大招

这一改变大大的帮助了前端工程师对于设计细节的实现,但这其中不可否认的有两个缺点:

  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

这是我们与工程师的“约定”,俗称Guideline。我们在Guideline中制定了一系列代号,它是由字母加数字组成,用来代替各色值、字号、控件等,工程师依照我们的代号在库中设置好,这样在工作中就不用每一次敲入长长的色号、字大小、控件等,只要输入代号就好,如这里的C是Color,S是Size的缩写。

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

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

我们在遵循视觉Guideline和设计稿规范精细的前提下,利用Sketch Measure这个工具,达到节约视觉设计师大量时间的目的。

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

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

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

第二招:慢动手,先动脑

1. 业务需求

视觉设计师在工作中大多数情况是拿到交互稿,看到不明白的地方问一下交互设计师,了解开发上线时间,给出自己完成的时间,然后就开始着手工作了。

然后会有几种情况出现:

  1. 完美的一次通过(在做梦吧~)
  2. 为了更好的结果,视觉修改(正常,一切为了用户更直观清晰——值得!)
  3. 需求变动了,交互稿随之改变,视觉稿不断的再一次,再一次改动(内心是崩溃的,这才是日常)

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

我的答案是:走向业务!原先没有时间了解业务需求,参与交互讨论的时间通过第一招就可以挤出来了,前期业务的了解非常重要!非常重要!非常重要!(重要的事情说三遍),而前期的了解也是提高效能的重要关键!

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

(1)了解业务需求会让我们知道:为什么要做这个功能,我们终极目是什么。在脑中有清晰的认知,才能在视觉设计时,突出与表明重点。我们容易从美观的角度去布局页面,而交互会从用户功能使用的便捷流畅考虑。我们视觉要谨慎,不要在交互稿上做减法,而是做加法,让用户直击重点。

(2)了解业务需求能有效减少与交互沟通的时间,这里指的是无效沟通——视觉因误解功能而减弱交互的沟通。如能熟悉需求,反而让交互参与到视觉创意,“谋士众多,所谋乃成——圣经箴言15章22节”,也许可以共同创造更好的产品。

(3)了解业务需求能增加我们视觉设计师的宽度,更多了解交互设计与项目经理的工作职能与技能需求。好的视觉设计师就好比一个好演员,一般的小演员,会在意自己能否站在好的光源下,镜头里的自己美不美,是否能站到一个好的位置。而好演员,能整场考虑,自己如果带了眼镜,能在表演的时候不让光反在镜片上,能清楚的知道自己是否出镜,能多一些动作,以便后期剪辑时容易剪…我们就好比一个好演员,我们了解与我们相关的职能越多,在展现出我们设计能力的过程中,才能成为他人的助力,这才是专业的体现。

2. 分析功能

一个功能达成一个目的,一个页面突出一个重点。这个是我在设计过程中秉承的理念。在拿到一份交互稿时,先要自己分析交互稿在说什么,重点是哪个,再与交互设计师确认自己的理解是否正确,确认一切细节。

举个例子:

帮助视觉设计师高效工作的三大招

这张交互稿交代了页面交互重点操作在两个输入框,而视觉设计师需要平衡插图与重点之间的轻重关系,提示文字能醒目被用户阅读,并且单个页面符合整个App视觉风格。

接着,我们做了几种尝试,如图:

帮助视觉设计师高效工作的三大招

左图输入信息与提示信息在一起,信息层级没有拉开,用户需要自己分辨信息。右图区分了信息,已经好多了,但重点还是不够突出,虽然这样也可以,但还是不满意。再做了一些尝试后,最终决定了这样,如下图:

帮助视觉设计师高效工作的三大招

运用了层叠与阴影,突出页面重点。辅助插图特意用黑白色调的图标,就是为了不抢页面重点。视觉设计师在了解重点后,可以有多种尝试,在有限的时间条件下,做到最好。

3. Mind Map

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

设计师脑中要有很清晰的认知,手上的设计是在MVP版本,还是早期版本,还是视觉体验优化阶段,每个阶段对设计的要求是不同的,项目给予设计师相对应的时间也不同。一般而言,早期项目反复更多,给予的时间也短,处于试错的阶段,此时产品中视觉不是重点(通常情况下),更多的是产品本身商业定位等等。在这个过程中,视觉尽全力帮助产品尽快上线,不要太纠结,先达成功能目标,视觉与体验可以在之后的版本中迭代。当然,对于我们设计师来说,这种妥协是很不舒服的,我们很不愿意看到自己经手的设计明明可以更好,但为了产品需要妥协。此时,对于产品的宏观认识就起到了关键作用。

我们在动手开始做设计前,需要先了解业务需求,拿到交互稿时分析重点,并清晰的了解团队所处的阶段。这些条件都是为了我们能利用有限的资源,让设计做到最优。其中也省去了许多沟通的时间,提高沟通质量。就好比与聪明人说话,说一句他就懂了,不费劲。站在更宏观的角度也能让我们变成“聪明人”。

在日常的工作中,我越来越发现,动手前多思考,动手做时的反复也就越少,也能更高效!想要了解在真正动手还有什么小技巧,窃听下回分解。

 

作者:Kana@点融设计中心DDC,微信公众号:「微信ID:DR_DDC」

本文由@点融设计中心 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23372/

(0)
CatherineCatherine
上一篇 2017-05-05 04:32
下一篇 2017-05-05 06:44

相关推荐

  • 如何设计可交互的email,调动用户的参与感?

    Email营销通常与市场推广活动挂钩,是帮助你达到推广目标的最有效途径之一。但如何确保你的营销邮件的内容与品牌紧密相连?这一直是营销人员面临的一个挑战。用来克服这一挑战的战术多如牛毛,而可交互的email正迅速崛起为最具创新性、动态性和最流行的方式,他们让用户深深着迷、参与其中,相关设计师和开发人员都应该引以为豪哦!

    2017-05-17
  • 网页设计中的极简风格—无的力量

    作为设计师,我们都知道极简的设计效果的确非常出彩。然而,在设计过程中,我们往往会由于使用较少元素而感觉缺了什么,或是让最终成品看起来仿佛没有完成。

    2017-05-25
  • 干货!如何做一个让人闻风丧胆的Html5页面

    Specifies the initial zoom factor for the window or viewing area. This is a magnifying glass type of zoom. Interactively changing the zoom factor from the initial zoom factor does not affect the size of the initial or the actual viewport.A two-dimensional transformation is applied to the coordinate system an element renders in through the ‘transform’ property. This property contains a list of transform functions. The final transformation value for a coordinate system is obtained by converting each function in the list to its corresponding matrix (either defined in this specification or by reference to the SVG specification), then multiplying the matrices.The value of the transform property is a list of applied in the order provided. … specifies a scale operation using the [sx,1] scaling vector, where sx is given as the parameter. … specifies a scale operation using the [1,sy] scaling vector, where sy is given as the parameter.

    2017-06-03
  • 最浓缩的概念:交互是什么?交互的本质及如何理解

    在使用一种产品或东西的整体过程。而无论这个使用行为是有无目的导向。本身这个过程,即是交互的本质。而任何一个交互的过程中必定存在交互对相,及交互的媒介。在这里,我先声明一下哦。以下的分析过程可不那么容易跟得上,思维与对生活细节观察力不够的,请直接跳过。但,以下的内容是当年我在新加坡修用户体验时,在交互过程一环中的必修环节。做好心理准备,那就开始看吧。题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余软件操作环节。3,有无改变硬软件间关系的其它模式?题外话:而如果想改进这一环节,那么在提升交互环节的效率方式手段上,也无非只能是,1,提升硬件能力来加速。2,减少多余渠道操作环节,如展开一个个目录,或通过其它模式打开。3,提升系统本身效率。产品设计的体验层级关系:
    核心层:产品本质体验层。---这产品是为达成什么用户目的而生的。
    中间层:产品使用过程中的体验层。---这就是我们所有产品中的交互层。
    最表层:产品的视觉体验层。---这部分就是UI〜我们也知道约炮软件其实并没有什么用,但为什么能相对留存久呢?也就是在于用户在心理层上有侥幸心理。同时加上其在媒体上潜意默化的某某成功的宣传。所以,让用户的心理否定延后。所以,相对来说,知道没什么用,但还是久留一下看看。但大多有头脑的。基本上也在一段时间后最终放弃。

    2017-05-25
  • 初级用户体验设计师可以向其他合作伙伴学习什么?(前端 & 开发篇)

    承接上一篇文章《初级用户体验设计师可以向其他合作伙伴学习什么?(运营 & PD 篇)》,今天写写前端 & 开发们值得我们这些初级用户体验设计师去学习的地方。

    2017-05-25
  • 设计心得:浅析Chatbot聊天机器人界面交互设计

    最近在做智投app的机器人Neo的原型设计,是一个chatbot聊天机器人。整理了一下关于聊天机器人设计的一些心得。

    2017-04-28
  • 做好这4个细节设计,让你的移动APP 用户体验脱颖而出

    启动页、空状态、动画反馈、框架界面… 今天提到的这4种状态,都是容易被忽视,而又能让移动App 脱颖而出的细节。如何做好这4个细节的用户体验设计?今天这篇好文总结了关键的几个原则。

    2017-05-18
  • apple watch 中文手册:Apple Watch Xcode项目 配置过程

    Xcode会将Watch应用和WatchKit应用扩展打包,然后放进现有的iOS应用包中。Xcode提供了一个搭建Watch应用的模板,其中包含了创建应用、glance,以及自定义通知界面所需的所有资源。该模板在现有的iOS应用中创建一个…

    2015-06-15
  • 作为体验或界面设计师,你可知什么时候、什么地方用动效来提升可用性?

    本文将表述我对这个问题的回答——“作为体验或界面设计师,如何得知什么时候、什么地方用动效来提升可用性?”Z Yuhan:这篇文章真的超级难翻译啊,原文的描绘非常细腻隐晦,大部分句子根本没法直译,只能理解后用中文的表达方式重新造句,幸好我的翻译水平也有进步啦~大家要是发现有什么问题,不论是翻译还是错字,欢迎评论我指正 : )

    2017-08-04
  • 一对一提问!设计师应该如何切入产品设计工作?

    呆呆:经常会收到一些小伙伴提的问题,大部分也都不怎么去回复,除了个别比较值得讨论的我会仔细解答一下。所以就想把那些好问题拿出来,不是对一个人解答,而是与大家一起做一个讨论。

    2017-08-29