设计

当页面设计遇到前端重构

1、页面设计师拿着自己满意的设计稿给前端重构工程师,得到的回答是哎呀,这个没法做,怎么能设计成这样。
2、页面设计师想知道前端重构工程师是怎么工作的,网页切图到底是什么意思?

这篇文章主要是回答这两个问题。(以下设计师指页面设计师,前端指前端重构工程师。)
首先得吹一次牛,无论设计稿是什么样前端都能做出来。前端抱怨的根源是工作量,没有给他安排足够的时间。通常前端比设计师多考虑两点:一是可复用性,一是动态性。

可复用性,设计师也考虑可复用性,但前端对复用的要求更高。写代码的都希望”写的少,做的多”,”修改一处,全局生效”。在ps里复用的概念指的是复制出来一个图层,挪到别处去用,之后这两个图层毫无关系,为了美观复制出来的图层可能根据周围元素的情况稍微改动一下,比如颜色稍稍变淡变深直角改为圆角长宽改变背景加了花纹。前端眼中的复用更局限,不是克隆出来的图层副本,更类似镜子,新加一面镜子照出景象,如果这个景象有变化,那所有镜子中的景象都有变化,如果保持其他镜子中的景象不变,需要单独写代码。代码的复用被打破。

动态性,设计稿就像一张照片映出的是网页最美的瞬间,可前端眼中的网页是动态的,他能根据数据的不同看到网页种种不美的瞬间。设计师为了页面美观可以把模拟数据掐头去尾,但前端展现的时候,必须保证各种数据都不会破坏布局,布局得适应各种数据,文字的折行、省略号,中英文、数字。动态性还表现在用户交互行为上,比如用户点了一个按钮,页面产生了相应变化。设计师眼中是两张类似但独立的设计稿,变化后为了页面美观,有可能稍微改变一下元素大小布局位置,虽然只有几个像素的变化,甚至肉眼看不出来,但前端知道如果两张设计稿叠加起来看是有差别的,前端实现的时候要把这差别计算进去。有时候实现这种差别付出的工作量远大于你的想象,甚至前端要为此调整整个页面布局方式。

还有一点是前端必须考虑的,那就是浏览器的兼容性。设计稿就是张图,在所有看图软件中都显示一致。但浏览器不是这样的,浏览器分为IE,火狐,谷歌等等,IE又有6、7、8、9之分。即使完全一样的代码在不同的浏览器显示的可能完全不一样,需要前端利用某种技术去实现兼容。这对设计师可能非常难理解,但事实如此。还有一点请设计师特别注意,你用的设计软件通常都是最新版能设计出特别美观的图,但IE67是10年前的浏览器,让黑白电视放高清电影,这太吃力了,但偏偏它在中国的市场占有率还很高。(有部IE6 获得终身成就奖应该退役的视频链接贴在文章后面。)圆角、阴影、艺术字体在现在的网页设计中很常见,火狐谷歌等浏览器已经可以使用CSS3技术轻松实现,但IE8以下的浏览器不支持CSS3所以只能做成死图片贴到网页上。死图片改起来必然没有代码容易控制。

说说前端技术。前端网页布局大概可分为两种方式,一是栅格化布局,一是响应式布局。

栅格化布局,算是一种经典布局方式,顾名思义网页被栅格化了,网页中的各个元素都有指定的大小和位置。比如下面这张图:
栅格化布局

套用到实际的网页效果:
栅格化布局

细节展示:
栅格化布局

响应式布局,是最近流行的一种布局方式,他优于栅格布局的地方是能够解决多设备间不同分辨率的适配。 只用一套代码可以就可使同一个页面根据浏览终端的不同(PC,平板,手机)显示出不同的布局。比如 http://www.microsoft.com/,改变浏览器大小试试看。

————————————————-

《IE6获得终身成就奖》 http://v.youku.com/v_show/id_XMjc4MzYxMTY0.html
《网页的栅格系统设计》http://ued.taobao.com/blog/2008/09/grid_systems/
设计团队推荐:
《淘宝UED》 http://ued.taobao.com/blog/
《微博UDC》 http://udc.weibo.com/
《腾讯TGideas》 http://tgideas.qq.com/
《网易用户体验设计中心》 http://uedc.163.com/
《腾讯CDC》 http://cdc.tencent.com/
《搜狐媒体设计中心》http://mdc.sohu.com/
《19楼UED》 http://blog.19ued.com/
《迅雷CUED》 http://cued.xunlei.com/
《全球设计精享站》http://designlol.net/
《飞鱼的声纳》 http://startwmlife.com/


折角+网易视频背景

最近看网上折角比较流行,就实验了下;另外顶部背景色调变化直接用的新版的网易视频的背景。悲哀的是直接被否掉了。


两张设计

两张以前设计的网页,风格还真是迥异,不过应该还是能看出出自一人之手。设计这种奇妙的东西,就像听背后的脚步声也能辨别对方一样。静下心手撑在桌上托着脸来审视这个世界,眼前的一切也许随之有所不同,观察世界的方法有太多太多种,描述世界则是这太多太多种观察结果的集合,最终的作品就应该有共通的地方吧。

儿童玩具

真空机械


联想春晚小调查

第一稿—————————————–

第二稿—————————————–

第三稿—————————————–


网页截屏3

ciudadesycostas.com

ciudadesycostas.com

ciudadesycostas.com

ciudadesycostas.com


Copyright © 2008-2012 Chesanqi's Web World. All rights reserved.
Jarrah theme by Templates Next | Powered by WordPress