前端MVC – PSD设计篇

一般情况下经常发生设计师的稿件由于计算的不够精准,在实现时发生偏差较大。

由于网页设计与网站开发经常需要与人合作,不论是设计师还是策划还是开发人员他们之间的合作往往非常密切。

我们从设计稿开始入手。

没有绝对的自由

完美的精度1px

网页设计与杂志设计不同在于,网页有更多尺寸上的限制,这点跟报纸排版比较相通。

不能凭感觉就堆放与目测,需要精准到1像素的级别。

而设计师也需要对页面的布局相当的了解,商业网站分割区别一般很多,所以需要尺寸灵活把握,这样才能做出更精准的设计。

prefect px

千万不要想着让其他人(制作人员)来想这些计算的方法,每个人都多做些事,合作起来才会更愉快。

Grid

而对于大网站来说,网站页面的数量也是非常庞大的,而制作的人相对较多,这样,要保证每位设计师出来的效果都是可以轻松被制作出来,需要一套标准,一套格(Grid)还是需要的。

grid system

字体

商业网站,由其是大型商城等网站的设计,由于对流量与加载速度的考虑,会少会图片所以其可用字体其实是非常少的,所以设计师的难度也就无形中的增加了,但是可以根据访问流量与用户所用浏览器系统等,用少量特殊字体,增强视觉效果,但是必须要有备选的方案,保证其他人也能正常的浏览。

更多信息

重要的信息指引是快速制作与开发的根基,所以网页设计也一样,设计师应该把一些基础的标准值都标记出来,比如说边框的颜色、边框的种类、应用的场景等进行标注,这样不仅为开发人员提供了良好的可读性,同时也可以大大提高开发效率。

more infomation

先有数据,再有设计

现在一般认为先要出设计稿,然后再往里填充数据,其实是这真是大错特错。我们被模板时代给坑害了,更把模板的感念给误解与曲解,认为一切都可以模板化。

imageimage

而事实是先要进行数据分析,然后再对数据进行可视化,往往连最基本的数据都没有就纸上谈兵,这只会走更多的冤枉路与耗费大家的精力与增加合作之间的摩擦。

image

只有仔细的对数据进行分析,才会发现,原来还有这么多“特殊”的存在。所以预测数据的精准度,将决定着设计稿(PSD)写实际搞(HTML)的偏差值。

虽然不能做到万无一失,但是知己知彼,百战不殆。

同样可以减少摩擦与挫败感,增强合作的愉悦。

没有简单的事情

当需求人员把东西拿过来,永远不要“小看”这些数据,这里需求人员也要注意。

永远不要说“这个很简单,这样,这样,然后这样就行了”… …

这样的后果就是不断的返工与无休止的争论,即使再小的Banner也有他特殊的地方。

先写这么多,想到再写~~

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