网页设计师也该关注页面性能

一名">网页设计师在做具体设计的时候应该考虑的问题有哪些?业务,产品,信息结构,交互,视觉……别忘了还有页面性能。我所崇尚的其实一直都是小作坊似的创业团队协作开发模式,大伙儿能快速沟通,就算设计师没关注到页面性能这一点,前端同学也能迅速提醒他,因为他俩就无时无刻不在一起。而现在在标准项目流程中,大家的沟通成本成倍增加了,除非是与世隔绝的闭关(就算是闭关,前端同学多半也在陪着开发),前端同学很难在页面设计过程中就和设计师沟通页面性能的问题。

页面性能不仅仅是前端同学的问题

页面性能的重要性不再赘述,就我个人而言,能忍受一个网站加载出DOM和css的时间是5秒,否则就会毫不犹豫的关闭网页。上面罗嗦了半天,实际上只想说明一个问题,设计师需要考虑页面性能。实际上设计师就是一种“通才”的角色。在传统设计领域,多数设计大师都是通晓好几个行业,比如科拉尼。在设计过程中充分考虑到各种因素,这是设计的难点,也是成就一个好设计的关键所在。以往那种网页设计师做好psd图稿,扔给前端工程师去做DEMO的时代已经过去了,因为互联网进步了,用户进步了。

原生控件的应用——关于页面性能,设计师应
首先考虑的

浏览器的原生控件虽然有其不足之处:ie的外观很难控制;不能支持更加丰富复杂的交互等等,但它对浏览器的兼容支持得特别好,在用户需要费力填写表单的地方,原生控件相比非原生控件会提高性能,让用户操作起来很流畅。这也是为什么在一些银行的网站或者客户端上,会用原生的select来代替很多支持复杂的交互控件,比如选择银行。在满足设计需求的前提下,优先考虑原生控件会让你的页面更快,兼容性更好,你的前端同学也会少许多抱怨。设计师应当了解,在写具体应用中控件时,不止是展现出用户可操作的部分就完事了,还有很多事情要做:验证,安全,兼容,框架等等。这里可看财付通的付款页面的js请求数,会吓你一跳的。

我在使用招行专业版客户端的时候,遇到过一个很好的控件交互设计。需求是填写银行卡的开户支行,给用户一个input让他自己去填显然是不靠谱的。招行的做法是先给一个搜索框,让用户输入关键字,比如我住在西湖区,我就输入西湖二字,页面刷新之后返回一个结果列表,从中用户来选择支行,这样搜索过滤之后的结果,只有10条左右,容易辨认。而我只用了两次就学会了这种操作,额外的好处是操作过程中页面反应相当快。而我在其他网站上选择开户行支行的时候,遇到过省市,再选支行联动控件,输入+下拉列表混合控件,选择的时候都能方便且正确的选中,但是我点击控件的时候相应速度却有延迟,心里略有不爽,这就是差别。有关原生控件和复杂控件的应用对比,可见我的一篇旧文:易用且轻量级的交互设计。

而随着html5的标准日益完善,新的原生控件会满足更多的需求,比如外联数据源xml,浏览器内置的不同数据类型的验证,这些会大大减少js的体积。当然这依赖着国内ie6市场份额的进一步下降(目前为60%)。相信未来一些轻量级的非原生控件,也会慢慢纳入到html的标准之中,比如困扰过很多人的日期控件。

页面的框架——设计师也能帮助到前端

我并不完全赞同设计师必须要懂代码,这应是因人而异的。但一个好的网页设计师,必须要为页面框架考虑,小到一个页面上的一个控件,大到一个项目。这是经验的积累,并不依靠对代码的理解,和设计原则中的一致性是密切相关的。不仅仅是少两张图片,少两行代码,充分考虑css框架的设计,组件的重用,图片的分割和整合,这些能让页面性能提高不止一个档次,同时保证设计感。

我感于日常工作及学习中,大家讨论设计时设计页面性能的次数十分少,而它又是项目中设计师和前端最主要的分歧点,为了消弭这种分歧,最好的做法就是大家互相增进了解。我在公司里有给设计师分享前端知识,给前端分享photoshop知识,也是为了大家一起进步做出更好的产品和应用。其实在自己的博客上实践提高页面性能的各种方法,是相当轻便且有效的,实践过的常识经过转化再提炼,成为知识,这点我十分认同白鸦和千鸟的看法。

源地址:http://www.shimuuu.com/blog/web-designer-should-focus-on-page-speed?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+ShimuBlog+%28shimu+%C2%BB+blog%29

时间: 2024-10-13 05:19:50

网页设计师也该关注页面性能的相关文章

网页设计师更需要注意页面的阅读性和可操作性

网页制作Webjx文章简介:设计师的作用不仅仅是使页面看上去美观.吸引用户的眼球,更需要注意页面的阅读性.可操作性等,要为扫描而设计. 当我们设计一个页面或者一个banner的时候,往往挖空心思去想创意,或者把效果做得很炫,却忽略了一些用户习惯.我这里所说的只是一些大家都知道,却往往容易忽略的--为扫描而设计. 用户善于扫描,且勤于扫描.WHY? 1.忙碌--大部分用户会花极少的时间来阅读极多的页面,为了提高效率,他们对于大部分的页面会采取扫描的方式,匆匆掠过.他们不可能也没有时间去阅读互联网带

资深的网页设计师主要优势还是在于细心

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 很多的网页设计师在工作了几年后,感觉自己在技术上已经十分完美,在工作上也表现出了兢兢业业的态度,可是设计出的作品很难打动同仁和客户,缺乏艺 术上的魅力和完全贯彻客户思路的执行力,这导致他们很少有机会被考虑升职或加薪,并不被视为"资深设计师",这是什么原因呢?实际上,他们离"资深"设计 师的距离只有一步之

网页设计师页面设计过程中也要注意页面性能

一名网页设计师在做具体设计的时候应该考虑的问题有哪些?业务,产品,信息结构,交互,视觉--别忘了还有页面性能.我所崇尚的其实一直都是小作坊似的创业团队协作开发模式,大伙儿能快速沟通,就算设计师没关注到页面性能这一点,前端同学也能迅速提醒他,因为他俩就无时无刻不在一起.而现在在标准项目流程中,大家的沟通成本成倍增加了,除非是与世隔绝的闭关(就算是闭关,前端同学多半也在陪着开发),前端同学很难在页面设计过程中就和设计师沟通页面性能的问题. 页面性能不仅仅是前端同学的问题 页面性能的重要性不再赘述,就

网页设计师采用的响应式页面设计工具

文章描述:随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境 随着便携设备用户的指数级增长,网页设计师采用响应式设计作为多平台布局解决方案,不但节省了设计师的时间,而且从长远角度来讲,响应式设计能够为用户提供更舒适的操作环境. 如果你毫无经验,不知从何开始,那么这份工具列表将大大的帮助你,能够让你的布局更有"弹性". Simple Grid Simple Grid是难以置信的

网页设计师的字体替换方法指南

写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍;更深一层的原因是,根本就没有几种可用的好字体. 一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来说很难承受.另一方面,制作中文字体是吃力不

中文网页字体:网页设计师的字体替换方法

文章描述:网页设计师的字体替换方法指南. 写在这篇文章之前:中文网页字体的窘境 在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中文世界的网页字体窘境,不仅仅是由于中文符号过多造成的字体文件过大这样的技术阻碍:更深一层的原因是,根本就没有几种可用的好字体. 一方面,尽管一些中文字体提供商也在致力于提供不同平台的解决方案,字体价格还是贵得令人乍舌,方正字库的年费高达万元,这对普通设计师来

网页设计师的素质

设计|素质|网页|网页设计 网页设计是一门新兴的边缘性的行业,在网络产生以后应运而生.网页如门面,小到个人主页,大到大公司.大的政府部门以及国际组织等在网络上无不以网页作为自己的门面.当点击到网站时,首先映入眼帘的是该网页的界面设计,如内容的介绍.按钮的摆放.文字的组合.色彩的应用.使用的引导等等.这一切都是网页设计的范畴,都是网页设计师的工作. 作为一名网页设计师,首先要具备审美的能力,而网页设计就相当于平面设计,网页设计师可以将平面设计中的审美观点套用到这上面来(其区别是动态网页的制作是平面

网页设计师真的尴尬吗?

我现实中的朋友大多是从事JAVA方向的程序开发,但在网络上我却有非常多的朋友是从事美术设计,网页开发这类的工作,不过,大多数因为不被重视.干杂活.薪水低等原因,觉得选错了行当,又停止了在这个方向上的努力学习.其实看上去这个行业入门很低,从业者又多,有的时候我们担心是个没有发展的行业,是的,我也这样想过.不过这些年,我把自己在这里领域的经验结合到了这个职位中--WEB前端工程师.      先给前端工程师的工作下个一句话定义:运用前端技术,实现体验的良好传达.如果在前面加上 Web,那么是针对 W

网页设计师应该具有的素质和能力水平

网页设计是一门新兴的边缘性的行业,在网络产生以后应运而生.网页如门面,小到个人主页,大到大公司.大的政府部门以及国际组织等在网络上无不以网页作为自己的门面.当点击到网站时,首先映入眼帘的是该网页的界面设计,如内容的介绍.按钮的摆放.文字的组合.色彩的应用.使用的引导等等.这一切都是网页设计的范畴,都是网页设计师的工作. 作为一名网页设计师,首先要具备审美的能力,而网页设计就相当于平面设计,网页设计师可以将平面设计中的审美观点套用到这上面来(其区别是动态网页的制作是平面设计不能达到的,它是一种审美