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

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


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

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

第一招:标注神器

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

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

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

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

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

  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

相关推荐

  • 6种转化率分析模型,提高产品转化率、用户体验

    在微观层面(实战方法论)通过6种转化率分析模型提高产品转化率、用户体验; 大家如果能掌握好增长方法论和提升转化的秘诀,就一定可以通过实现业务快速增长。以下为数极客CEO @谢荣生 在【起点学院公开课】演讲实录,编辑有修改:1. 为什么转化率越来越重要?1.1 流量红利渐失,竞争日益激烈目前新平台、新应用发展起来的难度比十年前要难数十倍,主要有三方面的原因:增长率下降;流量集中于BAT等少数大平台;同行竞争激烈。根据CNNIC统计报告显示...

    2018-03-28
  • 应届生在简历中如何描述自己的交互设计项目经验?

    应届生和社招的项目展示核心区别在于,应届生的项目大多数是虚拟的、小型的,或者失败的。大部分可能是校园网站项目,公众号运营,轻量化 App 等,用户数量不会太多、很少或基本不盈利。描述、呈现自己项目经历的前…

    2015-10-14
  • 12个很不错的UI交互设计动效灵感

    转自:设计达人(ID:shejidaren888)链接:http://www.shejidaren.com/ui-interactions-01.htmlUI动效设计是每位设计师们的一个进阶技能,我们做动效时,不仅仅要有用,而且还有好看哦,今天达人分享来自muzili整…

    2017-08-02
  • 用讲故事的思维搞定Banner背景的制作,看这篇就够了!~

    鉴于一直有人问banner背景怎么做,所以我就想要不写一篇关于背景的文章吧。

    2017-05-18
  • 用户体验和可用性之间的联系和差异,你都知道吗

    可用性涉及到产品的有效性,效率和满意度,用户可以尽可能简单那地完成某些任务。另一方面,用户体验涉及到用户和网站互动上更为广泛的领域中的方方面面。作者|Amy Smith源自|优设网最近几年来,用户体验设计逐步成为了目前设计圈中广泛认同的重要设计环节。而“可用性”这一词也作为改善用户体验设计的重要度量而发挥着无与伦比的作用。于是乎,除了“用户体验设计师”这一职位,在欧美的产品和设计团队当中还诞生了“可用性工程师”这样的专业职位。另一方面,...

    2018-03-06
  • 抽丝剥茧做设计:结构化思维初体验

    我们面对熟悉的问题能迎刃而解,陌生的问题却无从下手。原因是什么?其实是大脑对熟悉问题有已存在的解决结构,而对陌生问题,需要抽丝剥茧重新建立。结构化思维带你快刀斩乱麻,只需四步,建立清晰结构,完美解决未知问题。结构化思维是指一个人在面对工作任务或者难题时能从多个侧面进行思考,深刻分析导致问题出现的原因,系统制定行动方案,并采取恰当的手段使工作高效地开展,取得高绩效。(引自百度百科)

    2017-04-28
  • 极简主义风格:要讲究四大设计要点

    极简风并不是简单的做减法,这也是极简设计最棘手的地方。想必设计师都明白“少即是多”这个概念,但是要怎么在实际设计中践行这种极简设计的理念呢?今天的文章,就帮你梳理一下基本的法则,帮你在设计之前就理顺思路。“完美的设计是可以实现的,也许你还可以向其中加入更多的东西,但如果想从中移除某些元素,就完全不可能了。”

    2017-05-11
  • 4个关键词总结,如何把用户体验做到极致?

    作者:@烧包鹿全文共 4530 字 6 图,阅读需要 10 分钟———— / BEGIN / ————上周五约了朋友吃晚饭,提前约的顺风车。由于堵车,司机到了办公区的北门。经过沟通,我从定位地点过去找他。四扇车窗都是开的,他坐在驾驶位,烟刚抽了三分之二,后视镜旁还有未散尽的烟雾。他回头看见了我,我朝他微笑示意。确认了眼神,我是他的乘客。他马上把烟灭了,左手在空中挥了挥,右手向左转了一下空调按钮,抬起头在空中胡乱吹了几口气。隔着车窗看见副...

    2018-04-30
  • 交互设计的两个核心问题:用户体验和以用户目标为导向

    设计师和用户如同在跳交际舞,既要顺应着对方的步伐,也要进行一定的引导。对方是一个人,不只是你感受的到他的温度,他也闻得到你身上的味道,对你时时刻刻进行着评价。

    2017-05-21
  • 交互设计GSM数据模型浅析

    交互设计GSM数据模型浅析GSM Data Model Analysis Of Interaction Design你是否记得:“那年那天那间会议室,激情四射,实际是射击狮与产品狗在设计方案上斗的你死我活”你是否还记得:“老板、甲方、PM对你的质疑:设…

    2017-08-04