日期:2013-08-01  浏览次数:20698 次

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

页面功用不只仅是前端同学的问题

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