首页 > 网页教程 > 设计分享 > 分享:体验设计师需要学习的一些前端技术

分享:体验设计师需要学习的一些前端技术

时间:2012-07-07    来源:一只土贼

我一直笃信不知道HTML和CSS的体验设计师是连砖头和钢筋都没有摸过的建筑师,因此在以往的十几个项目里虽然总是进行策略层的设计,但也不忘记锻炼自己HTML和CSS能力,只有手够脏才能成为一位好的设计师。

最近的讨论里,我们总在纠结于设计师和开发人员无法相处的话题,其实答案很简单──当你没有我的生活体验,你如何让我理解你。在开发人员那个充满逻辑、过程、抽象、定义的世界里,到底哪个部分是曾涉足,决定了你是不是一个足够理解开发人员的设计师。

于是,我尝试用一个设计师的语言讲前端技术──计算机是如何将你的设计转化成计算机语言的。

设计会转化成计算机能懂的各种元素

你在用Photoshop制作界面时,会使用层的概念给例如输入框、按钮、下拉等元素进行分拆,这些存在于PSD文档中的元素到了浏览器那里,会被前端工程师变成一个个标准的元素,这些元素的组合就形成了DOM结构(Document Object Model),浏览器通过读取DOM结构生成最后的页面。

HTML负责骨架CSS负责装饰

这些元素的定义由HTML完成,长什么样子,由CSS完成,下面这个例子里,没有经过CSS修饰的DOM结构只剩下HTML构成的"骨架",而加上CSS修饰以后就会变成设计师想要的效果。

你的设计就是这样被使用HTML和CSS变成一个浏览器可以读取的页面的,如果你注意到上面的下拉菜单,作为一个设计师你可能不喜欢这种风格,想变成下面这样的风格:

这就会使CSS渲染很麻烦,因为CSS的原料只有那么多种布料和装饰,你设计的东西超过了CSS能够提供的效果,就会增加开发过程。但随着前端技术的发展,也不是完全不可能,可是浏览器又拖了后腿,各个版本和"品牌"支持的CSS渲染效果都不一样,他们要花大量的时间让它们所有的表现保持一致,你倒是很轻松的使用你mac上的PS做效果。你知道为啥你的程序员背后抱怨你了吗?

JavaScript帮助你可以更加丰富地操作这些元素

这样你就可以生成一个静态的页面了,在以前,这就足够了,通过一个静态页面就可以跟后台进行交互;但现在,前端的交互行为越来越丰富,很多交互都放在前台进行,而不需要到后台去。

这就像你买个包子,你问服务员有没有白菜的,服务员直接告诉你没有,她不用跑到厨房去问厨师。前台交互当然不像买包子这样简单,有很多细节的交互行为都是由JavaScript完成──这就是JavaScript的意义──它帮助你更好地操作这些元素,根据需要改变他们的样式、位置、内容、以及增删。

下面这个例子是一个常见的回到页首交互细节,整个交互过程(在线演示在这里)是:

  1. 在第一页下拉;
  2. 慢慢浮现出一个按钮;
  3. 点击按钮回到页首;
  4. 按钮慢慢消失。

这个交互就不是HTML和CSS能够完成的了,当然也不是Photoshop能完成的,细致的设计师会在文档里写清楚这个部分的交互行为,或者使用Axure做一个原型,但是如果掌握一点点前端技术,你完全可以把这个效果写出来,前端代码是与程序员沟通最天然的工具,同时在Agile UX的环境里我们鼓励设计师和前端开发人员结对,一起把这个交互效果表达出来。

在以前,学习这些知识确实很难,但是前端技术的发展使得我们现在可以只掌握一些基础就能写出流畅的前端代码,这就是各种前端框架的兴起,比如HTML和CSS的Less、960.gs等,JavaScript里的jQuery、YUI、Prototype,此外,有越来越多整合的框架将HTML、CSS和JavaScript整合在一起,使设计师可以轻松的使用制作高保真原型,例如Twitter推出的Bootstrap以及Zurb的Foundation。

这些框架的存在就是把一些前端交互的现有模式用代码包装起来,就跟你在包子店点包子要3号套餐一样,不需要再跟人说要什么馅喝什么粥,就说"3号"搞定。这些模式包括:弹出对话框(Dialog)、标签页(Tabs)、下拉(Dropdown)、表单(Forms)、提醒(Tooltips)、警告(Alert)、翻滚(Scroll)、收放(Collapse)、走马灯(Carousel)、按钮(Button)、自动补全(Auto Complete)等等,你只需要写一点点代码就可以叫到包子,对不起,完成一个交互场景的设计。

相关推荐
网页交互设计的一些理解
深挖交互设计的细节提升用户满意度
8个原则打造优秀的用户体验
交互设计中6个通用原则的介绍
如何杜绝网页设计中视噪对用户的影响
电子商务网站如何设计高效易用的网站左侧导航树
网页视觉设计如何针对用户有效表达信息
交互设计之浅谈下意识设计
前瞻:2012年Web设计和开发的15个最新趋势
用户体验评估之用户心理负荷的测量
百度统计流量研究院设计过程及思路详解
给不完整视觉信息寻找最简单直接的解读办法
移动应用开发:无线终端用户理解工作方法分享
分享:5招助你打造更加简洁的用户界面
浅谈界面UI设计中的包容性设计
仿生设计—让互联网产品更易用
浅谈交互设计中的默认值对用户的影响
深入分析网页栅格系统的规范制作
深入谈交互设计之人人都懂交互设计
移动应用设计的横竖屏切换中的界面设计与体验提升
交互设计:移动应用与PC应用的交互差异浅析
交互设计师应该如何设计直观且有说服力的作品集
移动设备动画设计的12个原则分享
分析用户界面中扁平化设计的优缺点
分享淘宝购便利交互设计心得
富有灵感和创意的web布局及交互设计赏析
符合用户操作习惯的网站界面设计分享
18个超棒的响应式Web设计前端开发教程
在视觉设计中对像素的深度解析
网页设计中创新式布局与交互设计思考
换汤不换药?看应用们如何“为iOS 7设计”
产品设计:万水千山总是情 不要图片行不行
APP浏览体验设计的思考:如何理解用户的眼?
网页设计怎么破?创新式布局与交互的设计
四大网页设计秘诀:让用户第一眼就爱上你的网站
2014年Web网页设计的10大发展趋势前瞻

精彩推荐

热门教程