设计师如何跟开发者合作(二): 从何开始?需要了解开发者的题目

当即首译文来自Invision团队免费提供的多如牛毛课程:设计师如何跟开发者合作。本系列之率先篇请查看:

设计师如何和开发者合作(一):哎是吧开使设计?

从何开:需要了解开发者的问题

巨大之宏图能够当非坏用户体验的状下驾驶各方面的封锁

在响应式设计之社会风气,约束来自所有:从现有用户之浏览习惯到技术开发团队的实力。

当当下等同篇,我们拿讨论在公从头设计前面可以问问开发组织的现实问题,从而保证你们会再好地合作。

题目1:你期望因为何种形式提交成果?

本身爱好关注开发者是否习惯于己之交付物,因为这决定了卿下哪款软件来创造模型。

自身表现了极端多设计师(包括自家好)完成规划后,被求回到改吧另外一种文件之格式。想想吧,你终于完成了最终稿,充满气地拿去开发,结果被起回要求用另外的文件格式来交给设计物。

脚是几个在初始计划前面用跟开集团沟通的题材:

所有的血本如何准备?

她们是欣赏你管图切好,把持有的工本放上一个出层级的文件夹?

抑或说他俩期望以到来自文件,然后自己来取图像?

一经是后者,他们感念啊种源文件?

PSD?

AI,EPS,PDF?

Sketch?

他们之软件版本和自身是不是一律?(他们是否会打开这些文件?)

若待什么组织和命名你的图层来帮忙她们迅速找到他们用之本钱?

他俩期待你打DW或WYSIWYG编辑器输出HTML吗?

万一今天而当为此DW直接输出HTML,一定要咨询明了他俩立刻是不是是超级办法。十有八九她们或无欣赏这种措施。

纵使自身之经历,从图形用户界面直接扭转的代码往往不够组织都无奈用,这种艺术时会同时拖累设计师和开发者,所以尽量避免通过图形用户界面产生代码。在公使用这种措施前必定要漂亮跟开发者讨论一下,

资金需附带说明文档吗?

卿打算如何记录那些当您递的模型中无法直接代表的元素?像颜色代码,高度/宽度尺寸,字体,字体大小,间距,Alpha值,悬停功能,动画及其他数据点等资料须定义和记录,而未是受开发人员去怀疑这是何许实现的。

有些中之软件:

Omnigraffle。轻松上加箭头,符号和其它按键,来辅助分解一个计划的细节。

Avocode。它可给您于Photoshop和Sketch中导出色彩,图像资源,字体,文本,CSS,大小及尺寸。可以解决过剩麻烦。

Invision:非常了不起之神速原型工具,你得以几分钟内制作而互相的原型,并且可团队采用。

题材2:网页是为此前端框架构建的也?

今起多开发者和设计师在长久工作备受总结下的框架。了解她,并采用她来修正你的宏图。

无数风靡的框架如Bootstrap何the 960
Grid都施用了12实践布局。为什么是12履布局?12凡不过轻让分解的数字,你可于是基础及统筹12,6,4,3,2或其它等去的行布局,这会被您再次快地做出规划决策。

冲这些框架来设定结构预先设定好尺寸。你得了解您所用框架的各种性能:填充值,列宽。分割线宽度,媒介断点值等等。

我就以规划过程被生过刹车,因为自身于sketch中装置的5px边去比Bootstrap的默认边去要格外。这不是什么好工作。因为此设计得重新编码和安排,来解决这个按照不该出现的题目。所以当统筹前面使知道网页将祭谁框架来构建,并且懂得她于筹划软件中见面是什么体统。

除去网格系统,很多前端框架还有内置的宏图因素,像按钮,表单这些。如果想要修改这些默认样式(我也推荐你从定义来适应品牌调性),一定要包开发者知道就一点。

多每一样坏我设计一个暗含一定颜色、宽度之表单是,开发者最后还是使用了框架默认样式。都是以我没有关系好。

永恒不要期待开发者注意到了您用了2像素的圆角来精细化按钮。他们可是没叫树说只要专注这些。但是她们得以充分精准地遵循指令行事。所以确保与她们关系好。

片现行流行的前端框架:

Bootstrap

Foundation by Zurb

Pure by Yahoo

Skeleton

Semantic UI

…还出为数不少别的。

以开班设计前面一定要弄明白开发者偏好使用谁框架。

绝大多数框架都安排了模版资源。你得生易地找到它们并当ps或sketch中准确地配合。这便于了颇具人,所以尽情使用其吧!

题目3:开发环境是出于哪语言和库房构建的?它们有啊范围?

不怕你协调无亮怎么形容代码,你得找到有美妙之插件。每个代码有都是现成的。它们叫以公的网站上上加效果转移得比较过去易多。美被欠缺之凡,插件不容许适应所有的事态。

假设你想为祥和之网站寻觅有都构建好的构件,那是可怜正规的心思,也异常有协助。但您当这么做这钱,你待了解使用什么语言来寻觅这些部件。

每一个插件或者有些部件都是由于其的作者用一定的编码语言就的。很多时分,某个部件的编语言与你的网站的开条件是休般配的。这会叫您的开发者大为恼火。

一个用Ruby构建的气象应用程序不见面当PHP上搭建之网页上运行。一个WordPress插件没法使用在于是NET搭建之网站及。角度加载条好就此当Javascript中可是切莫能够因此在Backbone.js中。

若会掌握自己的意吧?

尽管你找到了一个及你的出环境相当的预制构件,并动用它向你的集团说你想实现的效能,如果开发者愿意选择实现其,那是无与伦比不过了。但若尽不用直接发放他们一个代码压缩文件,然后就要求他俩“在咱们的产品里心想事成这职能”。这便像一个客户于你犯了相同堆放100px的缩略图,然后要求而“把其变成高清大图”。这是好自以为是还居高临下的态势。

题材4:我们用支持什么浏览器?

号外:其实浏览器也是匪同等的!

好吧,你也许吗了解,开发者们发出差不多痛恨IE浏览器。

值得庆幸的凡,整个规划出之空气在变好。过去磨开发者的浏览器在便捷回落。及时微软已经放弃了IE,现在出货的微机都来崭新的,有好的正式,但是知道你需要支持什么旧版浏览器会好要命程度达影响而的筹划决策。下面是有纵浏览器不支持的CSS属性列表。看看您是否注意到了即无异主旋律。

Border-radius边界半径: IE8

text-shadow文字阴影: IE8, 9, Firefox 2, 3

box-shadow: IE8, Firefox 2, 3

RGBA (color transparency)颜色透明度: ie8

Flexbox (以后会再度多r): IE8, 9.
同时要调剂有属性来适应Safari和Firefox的一直版

Multiple backgrounds多双重背景: IE8, Firefox 2-3.5

SVG: IE8 (有成百上千实际的界定)

CSS Animation动画: IE8, 9, Firefox 2-4, Safari 3.1 – 3.2

CSS 2D transforms (rotation, scale)旋转缩放变化: IE8, Firefox 2, 3

Media Queries媒体询问: IE8, Firefox 2, 3

你可以当这边翻这卖清单的详细版。

要你发现你得支持IE8还是原本子的Firefox,想想吧,元素的外观将无让影响,你有的圆角,阴影和动画片都以没有。

利用新型功能设计,同时以管其在老浏览器上闹比较好之可用性和视觉效果,被叫作日益进增强(progressive
enhancement)。在您拟时务必考虑到即同一层次。

盼这些题材促进让你以规划过程的发端就是和开发者形成良好的关系。提前领略有安限制能帮而再次好地做出规划决策,并且减轻后期开发成本。前期准备得越来越好,项目后期就见面愈加轻松。

当产同样课,我们拿修有题目同技艺,帮助而在计划过程被与开发者沟通

小结

咱们期望坐何种形式提交成果?

-资产如何准备?

-我选择的计划性软件会潜移默化开发人员的劳作为?

-最当最终处理资产?

-我们若未雨绸缪说明文档吗?

网站是由于前端框架构建的吗?

-如果是,是啊一个框架?

-这个框架提供的外观以及自我想规划之外观一样为?

-设置画板时,尺寸,列数,断点,对旅等框架细节如何考虑?

-图形元素长什么?

-有备的UI Kit可以用吗?

本人待了解关于开发环境的焉要点?

-是啊种语言开发之?

-如果想只要找到确切的构件,我得如何设定搜索条件?

-最后为有关人口演示你想如果的效应,但并非以为她便该让出出放在那里。

欲支持什么浏览器?

-基为支持旧版浏览器的用,设计时起什么样限制?

-考虑逐步进增强

于打开设计软件前与开支团队有一个优秀的沟通。哪些你不能够说了算的因素会潜移默化及公的规划?帮助你及公的集团获得成功。

相关文章