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

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

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

页面性能的重要性不再赘述,就我个人而言,能忍受一个网站加载出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

时间: 2024-08-02 23:03:20

网页设计师页面设计过程中也要注意页面性能的相关文章

高级网页设计师在设计中的手绘应用

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 不论是平面设计领域还是网页设计领域,随着设计资源的日益增多和设计软件功能的日益强大,设计师们越来越依赖于现成的资源和技术.比如网页设计当中,大到页面设计的布局,小到一个icon的设计,都几乎是沿用前辈们的'结晶'.虽然说很多时候这些既有的资源是免费共享的,而且对于手头需要快速完成的任务,很难花费时间再去精心设计.因此,设计师的个性被逐渐磨灭,

交互设计经验:设计过程中存在太多的矛盾

文章描述:交互设计经验:设计过程中存在太多的矛盾. 在产品团队中经常听到有人表态:"我们要做简洁的用户界面",同时又有另外一种声音传来:"我们要做功能强大的产品".乍一听,简洁意味着用户界面控件精炼,然而少数的交互方式如何表达各类强大的功能?反之,强大意味着功能丰富强劲,必然拥有错综复杂的联系,如何让其界面保持简洁?两者似乎无法共存,这让我突然想到自相矛盾的故事,楚国商人夸耀自己的矛锐利万分,同时自己的盾又坚固无比, "以子之矛,陷子之盾,何如?"

图标设计过程中需要注意的问题

文章描述:那么怎么样才能做出一套好的图标?在图标设计过程中需要注意哪些问题? 图标在生活中运用是显而可见的.例如:男女厕所标志和各种交通标志等.在计算机系统或软件方面的应用也是很广泛.例如:程序标识.数据标识.命令选择.模式信号或切换开关.状态指示等.下面的例子更形象的说明这个问题. (图片来源:九铭)外国人A与中国人B,两人在语言上存在差异对文字的认识是不同的,用图标来表示,会缩短语言描述的距离.所以图标更具有快捷传达信息.便于记忆的特性.那么图标被广泛使用的时候,什么样的图标才是好图标呢?好

数据库设计过程中一些命名规范

规范|过程|设计|数据|数据库|数据库设计 数据库设计过程中命名规范很是重要,命名规范合理的设计能够省去开发人员很多时间去区别数据库实体. 数据库物理设计包括:表设计,视图设计,存储过程设计,用户自定义函数设计等等. 1.  表设计命名规范:表使用t开头最好能将表根据属性分类并作好编号. 如:编码表可写为tBM001Something  t为表开头,BM为业务类型,001为该类别中的第几个表something是表的名称注释. 2. 视图设计命名规范:视图设计过程中使用v开头,视图命名以制作视图的

网页设计过程中应该注意的十个问题

1.不要滥用Flash Adobe公司的这项动画技术让互联网变得更为强大,从Nike公司非常夸张的首页动画到众多广告商使用的网页Banner.但是这项技术非常容易被滥用,过多的动画不仅没有实用性而且还会拖慢用户的网页浏览器. 2.不要让广告遮挡了网站内容 的确,广告对网站的生存来说是至关重要的,但研究表明,弹出广告和整页的广告一旦遮挡了网站内容,那它们的效用会大打折扣,同时也会影响读者是否会再来光顾.一个能够根据读者的要求进行伸缩的广告会更合适一些. 3.不要让网页看起来杂乱无章 网页是一个大杂

交互设计过程中如何思考

这两天的状态很好,人在什么都不在乎的情况下越是能完全放空自己.可以从业务.原型中抽离出来,重新审视自己的作品.当然,交互原型不能作为评判一个设计师的标准,它们只是在项目过程中辅助表达设计的产物.最有价值的是,在线稿背后形成一套思考方法,指导你去做设计.之后便是有自己的评判标准,帮助你去衡量设计的优劣.所谓的设计有理有据,大致如此.下面是一些输出,来消灭那些"我觉得-" 1 思考的过程 做一个设计或者重新设计时,应该从哪里开始 首先,从设计目标开始,确定用户最想看到的是什么. 然后,将信

企业网站建设过程中网站栏目和页面的策划

网站建设需要"以人为本".只有准确把握住用户的需求,才能建设一个用户真正喜欢的网站.如果不考虑用户需求,网站的页面设计的再漂亮,功能再强大,也只能作为摆设,无法吸引到用户,更谈不上将http://www.aliyun.com/zixun/aggregation/8331.html">网站用户变为你的客户. 网站栏目策划 相对于网站页面及功能模块规划,网站栏目规划的重要性常被忽略.其实,网站栏目规划对于网站的成败有着非常直接的关系,网站栏目兼具以下两个功能,二者不可或缺.

在产品设计过程中描述一个完整的需求场景

编者按]本文作者朱晨,供职腾讯CDC.对于交互设计师而言,描述应用场景是在对产品需求进行分析时最简单直接的阐述方式. 在文中,作者将应用场景描述为需求场景,这种讲法更加形象.因为对场景的描述就是一个分析用户需求的过程,解读这个过程可以更容易的对用户需求做出分解并从中找到吸引用户的关键. 需求场景是一种更接地气的分析和描述用户需求的方法(个人偏爱"需求场景"这个词).它应该拥有这样的结构: "在某某时间(when),某某地点(where),周围出现了某些事物时(with wha

小新Air12触控板使用过程中容易出现IE页面缩放的解决方案

故障现象: 在使用触控板进行IE网页浏览时,容易产生IE页面的缩小或者放大. 原因分析: 触控板里的双指缩放功能,容易导致在使用触控板浏览网页时造成缩放. 解决方案: 1.桌面状态下按win+x组合键选择"控制面板":   2.选择"硬件和声音":     3.选择"鼠标":   4.选择"装置设定值",点击"设定值"进入:   5.选择"多指",取消"启用缩放"前面