申请网站
忘记密码
密 码：
登录名：
建站咨询热线：
0532-88781131
、
15166683288
知识普及 » 网页设计师也该关注页面性能
网页设计师也该关注页面性能
网页设计师
于
2020-04-15 10:50
发表
阅读次数
2199
次
一名
网页设计
师在做具体设计的时候应该考虑的问题有哪些？业务，产品，信息结构，交互，视觉……别忘了还有页面性能。我所崇尚的其实一直都是小作坊似的创业团队协作开发模式，大伙儿能快速沟通，就算设计师没关注到页面性能这一点，前端同学也能迅速提醒他，因为他俩就无时无刻不在一起。而现在在标准项目流程中，大家的沟通成本成倍增加了，除非是与世隔绝的闭关（就算是闭关，前端同学多半也在陪着开发），前端同学很难在页面设计过程中就和设计师沟通页面性能的问题。
页面性能不仅仅是前端同学的问题
页面性能的重要性不再赘述，就我个人而言，能忍受一个网站加载出DOM和css的时间是5秒，否则就会毫不犹豫的关闭网页。上面罗嗦了半天，实际上只想说明一个问题，设计师需要考虑页面性能。实际上设计师就是一种“通才”的角色。在传统设计领域，多数设计大师都是通晓好几个行业，比如科拉尼。在设计过程中充分考虑到各种因素，这是设计的难点，也是成就一个好设计的关键所在。以往那种
网页设计
师做好psd图稿，扔给前端工程师去做DEMO的时代已经过去了，因为互联网进步了，用户进步了。
原生控件的应用——关于页面性能，设计师应首先考虑的
浏览器的原生控件虽然有其不足之处：ie的外观很难控制；不能支持更加丰富复杂的交互等等，但它对浏览器的兼容支持得特别好，在用户需要费力填写表单的地方，原生控件相比非原生控件会提高性能，让用户操作起来很流畅。这也是为什么在一些银行的网站或者客户端上，会用原生的select来代替很多支持复杂的交互控件，比如选择银行。在满足设计需求的前提下，优先考虑原生控件会让你的页面更快，兼容性更好，你的前端同学也会少许多抱怨。设计师应当了解，在写具体应用中控件时，不止是展现出用户可操作的部分就完事了，还有很多事情要做：验证，安全，兼容，框架等等。这里可看财付通的付款页面的js请求数，会吓你一跳的。
我在使用招行专业版客户端的时候，遇到过一个很好的控件交互设计。需求是填写银行卡的开户支行，给用户一个input让他自己去填显然是不靠谱的。招行的做法是先给一个搜索框，让用户输入关键字，比如我住在西湖区，我就输入西湖二字，页面刷新之后返回一个结果列表，从中用户来选择支行，这样搜索过滤之后的结果，只有10条左右，容易辨认。而我只用了两次就学会了这种操作，额外的好处是操作过程中页面反应相当快。而我在其他网站上选择开户行支行的时候，遇到过省市，再选支行联动控件，输入+下拉列表混合控件，选择的时候都能方便且正确的选中，但是我点击控件的时候相应速度却有延迟，心里略有不爽，这就是差别。有关原生控件和复杂控件的应用对比，可见我的一篇旧文：易用且轻量级的交互设计。
而随着html5的标准日益完善，新的原生控件会满足更多的需求，比如外联数据源xml，浏览器内置的不同数据类型的验证，这些会大大减少js的体积。当然这依赖着国内ie6市场份额的进一步下降（目前为60%）。相信未来一些轻量级的非原生控件，也会慢慢纳入到html的标准之中，比如困扰过很多人的日期控件。
页面的框架——设计师也能帮助到前端
我并不完全赞同设计师必须要懂代码，这应是因人而异的。但一个好的
网页设计
师，必须要为页面框架考虑，小到一个页面上的一个控件，大到一个项目。这是经验的积累，并不依靠对代码的理解，和设计原则中的一致性是密切相关的。不仅仅是少两张图片，少两行代码，充分考虑css框架的设计，组件的重用，图片的分割和整合，这些能让页面性能提高不止一个档次，同时保证设计感。
我感于日常工作及学习中，大家讨论设计时设计页面性能的次数十分少，而它又是项目中设计师和前端最主要的分歧点，为了消弭这种分歧，最好的做法就是大家互相增进了解。我在公司里有给设计师分享前端知识，给前端分享photoshop知识，也是为了大家一起进步做出更好的产品和应用。其实在自己的博客上实践提高页面性能的各种方法，是相当轻便且有效的，实践过的常识经过转化再提炼，成为知识，这点我十分认同白鸦和千鸟的看法。
网页设计师也该关注页面性能相关标签：
网站制作方案
，
建网站
，
设计网站
，
企业网站建设
相关热点推荐
网页设计师也该关注页面
外贸网站如何设计网站关
网站设计：如何让交互设
简单分析网站的建设步骤
优化过程中如何快速收录
外贸企业如何做网站推广
6个外贸网站优化技巧
网站优化技巧大全
网站定位，网站类型设想
企业网站推广如何才能做
用户体验公式
网站设计可用性的重要之
如何让baidu天天更
令网站打开提高速度的7
如何进行网络信息检索
友情链接相关名字解释
搜索引擎优化之链接得分
建站知识
新手做SEO经常出现的
微信APP的H5活动页
提高搜索引擎对网站的重
企业为什么要做网站？企
网站被搜索引擎快速收录
学会前期网站推广分析的
网上开店的过程全攻略之
专业信息网站建设的制作
怎么让网站流量自然增长
八个优秀的图片和图标的
青岛做网站多少钱
网站基础优化首先学会s
写给做BBS的新站长
和马云学习如何做网站推
网站建设经验之制版篇—
如何向必应提交网站地图
做站就做自己熟悉的东西
企业建站带来的经济效益
百度权重降低了怎么办
即兴创作需要有效的设计
什么是留言和评论，留言
建站事项2
奈薇建站网青岛网站建设公司/青岛网站制作公司，专业提供"气质"型网站建设及精美网站制作服务，同时欢迎各地网站建设公司、网站制作公司代理我们的奈薇建站系统共同发展
热点地区：
青岛网站建设价格
青岛即墨网站制作公司
开发区信息港
山东在线门户