前端开发手册之设计篇

在做网页设计之前应该先搞明白什么是网页设计,这是个基础概念,是有别于普通打印包装设计与广告传媒设计的。

由于客观的限制条件1.显示器 2.浏览器 3.现代技术的存在所以你必须去迎合这个时代网页设计所具有的特殊情况。

而此篇文章,不是教你如何去做网页设计,而是从合作的角度对分析你在前端开发中的角色。

在充分理解需求之后,完成设计稿。在完成设计稿后,并不是设计师的任务终结(如何去与需求人员交涉自己去搞定,这里咱不谈)!下一步,你需要做的就是把你的设计移交到网页重构师(搭建HTML与CSS的)帮你去实现。

而在这之前,你还有几样工作去做:

详细标注你的设计稿

image

这是一件可以说“繁琐”的过程,因为你也许对这些已经了如指掌,但是并非所有人由其是你下一步合作的人都明白。所以耐心的标注你的细节是非常重要的。由其是字体、字号与颜色值等。

进行简单的描述

image

网页设计与广告媒体的设计的不同之处,就是在于其精细度。又因为在不同浏览器下字体解析会有差别,所以这个精细是有一个范围值的。

简单的计算

这里大家可能注意到了,图片框为什么是99px呢?

99 = 90+3+4+2

width = image width + padding-left + padding-right + border

为什么不是一个双数呢?

image 

我们来看,在整体宽度为960的情况下,想要产品得到最好的展示,而又不能太挤(同时要考虑文字)

这样算下来就是:960 = 52*7 + 99*6 +2

要注意这里的图片与图片之间的间距是双数,主要是为方便padding的拆分。

所以在满足整体宽度的同时也需要对其进行一番计算这样前端开发人员在制作时才能更省时间,更快速。同时也是最大的限度保证你的设计稿与制作出来的产品Pixel Perfect!

在设计的时候需要最大限度的保证可行性,因为一但返工,这就不是一个人的事,所以在把自己应该做好的事情做完,在合作中减少摩擦。

技巧:善于应用切片或者辅助线等(包括置入比例标记与标尺)计算工具可以事半功倍!

image

上图已经是分割的非常精细,包括column width与padding都已经划分完,平时设计时如果非特殊情况,最后这一步设计师应该是可以选择性的制作,重构师也不能太懒了吧,总得做点东西吧,哈哈。

这里推荐一款度量软件,可以快速的度量间距,虽然功能还是很有限,但是相信作者会不断的完善,点击查看

 

虽然上面会耗费很多时间,但是你会发现效果也是很明显。就像写开发文档一样,得到好处不是你一个人的,而是大家的!

相信你会找到合适你自己情况的合作方法。

此条目发表在 UE, 实验室 分类目录,贴了 标签。将固定链接加入收藏夹。