设计师怎么样与开发者合营(二): 从哪里初阶?要求了然开发者的难点

小结

急需支持什么浏览器?

-基于支撑旧版浏览器的急需,设计时有哪些限制?

-考虑渐进增强

在打开设计软件前与付出协会有一个可观的牵连。哪些你不可能操纵的要素会影响到您的设计?扶助您和您的公司得到成功。

俺们期望以何种形式提交成果?

-资产怎么样准备?

-我选用的设计软件会潜移默化开发人士的做事啊?

-最负责最终处理费用?

-我们要未雨绸缪表达文档吗?

标题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可以用吗?

那篇译文来自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中准确地包容。那有利于了所有人,所以尽情使用它们啊!

从哪个地方开首:须要驾驭开发者的难点

巨大的宏图能够在不损坏用户体验的景观下明白各省点的牢笼

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

在这一篇,我们将研究在您从头设计前面可以问问开发协会的求实难点,从而确保你们能更好地同盟。

标题1:你希望以何种形式提交成果?

自家喜爱关注开发者是还是不是习惯于自身的交付物,因为那决定了您使用哪款软件来创立模型。

自己见过太多设计师(包蕴自我要好)达成设计后,被必要回到改为别的一种文件的格式。想想呢,你终于达成了最终稿,充满士气地拿去开发,结果被打回来要求用此外的文件格式来交付设计物。

上边是多少个在起来规划前需要和支付公司交流的难题:

设计师如何与开发者合营(一):什么样是为费用而陈设?

开销须要附带表明文档吗?

您打算怎么记录那么些在你递交的模型中无法直接代表的元素?像颜色代码,高度/宽度尺寸,字体,字体大小,间距,Alpha值,悬停功用,动画和其余数据点等材料务必定义和著录,而不是让开发人士去估量那是怎么样贯彻的。

部分得力的软件:

Omnigraffle。轻松添加箭头,符号和其他按键,来增援分解一个设计的底细。

Avocode。它可以让您从Photoshop和Sketch中导杰出彩,图像资源,字体,文本,CSS,大小和尺寸。可以缓解广大麻烦。

Invision:卓殊完美的立即原型工具,你可以在几分钟内制作可相互的原型,并且符合团队利用。

装有的财力怎样准备?

她们是爱戴您把图切好,把拥有的资本放进一个有层级的文本夹?

抑或说他俩期待获得源文件,然后自己来领取图像?

假诺是后人,他们想哪一种源文件?

PSD?

AI,EPS,PDF?

Sketch?

他俩的软件版本和自身是还是不是一致?(他们是还是不是能开拓这么些文件?)

你须要哪些协会和命名你的图层来接济她们飞速找到他们须求的本金?

他俩盼望您从DW或WYSIWYG编辑器输出HTML吗?

如若前些天你在用DW间接输出HTML,一定要问清楚他俩那是不是是最佳形式。十有八九她俩唯恐不喜欢这种措施。

就自己的经验,从图形用户界面直接扭转的代码往往不够社团且没法用,那种措施日常会同时拖累设计师和开发者,所以尽量幸免通过图形用户界面暴发代码。在您利用那种格局前早晚要出色跟开发者研商一下,

相关文章