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