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