设计会转化成计算机能懂的各种元素：输入框、按钮、下拉等；HTML负责骨架CSS负责装饰；JavaScript帮助你可以更加丰富地操作这些元素
我一直笃信不知道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的意义──它帮助你更好地操作这些元素，根据需要改变他们的样式、位置、内容、以及增删。
下面这个例子是一个常见的回到页首交互细节，整个交互过程（在线演示在这里）是：
在第一页下拉；
慢慢浮现出一个按钮；
点击按钮回到页首；
按钮慢慢消失。
这个交互就不是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)等等，你只需要写一点点代码就可以叫到包子，对不起，完成一个交互场景的设计。
本文地址：https://www.pizijiang.com/tougao/101755.html
举报投诉邮箱：253000106@qq.com
微信扫一扫 
支付宝扫一扫 
