您的位置:首页> 日志> 前端技术 正文

最近设计部进行大的动作,成立了各专业的委员会。有的同事有困惑,什么是前端,什么是交互。这些问题值得我们思考。经过一通百度和谷歌,得到以下结论。

什么是交互设计(Interaction Design)
在使用网站,软件,消费产品,各种服务的时候(实际上是在同它们交互),使用过程中的感觉就是一种交互体验。随着网络和新技术的发展,各种新产品和交互方式越来越多,人们也越来越重视对交互的体验。当大型计算机刚刚研制出来的时候,可能为当初的使用者本身就是该行业的专家,没有人去关注使用者的感觉;相反,一切都围绕机器的需要来组织,程序员通过打孔卡片来输入机器语言,输出结果也是机器语言,那个时候同计算机交互的重心是机器本身。当计算机系统的用户越来越由普通大众组成的时候,对交互体验的关注也越来越迫切了。

因此交互设计(Interaction Design)作为一门关注交互体验的新学科在二十世纪八十年代产生了,它由IDEO的一位创始人比尔•莫格里奇在1984年一次设计会议上提出,他一开始给它命名为“软面(Soft Face)”,由于这个名字容易让人想起和当时流行的玩具“椰菜娃娃(Cabbage Patch doll)”,他后来把它更名为“Interaction Design”――交互设计。

从用户角度来说,交互设计是一种如何让产品易用,有效而让人愉悦的技术,它致力于了解目标用户和他们的期望,了解用户在同产品交互时彼此的行为,了解“人”本身的心理和行为特点,同时,还包括了解各种有效的交互方式,并对它们进行增强和扩充。交互设计还涉及到多个学科,以及和多领域多背景人员的沟通。


界面设计
界面是一个静态的词,当进行界面设计的时候,我们关心的是界面本身,界面的组件,布局,风格,看它们是否能支撑有效的交互,但是,交互行为是界面约束的源头,当产品的交互行为清清楚楚地定义出来时,对界面的要求也就更加清楚了,界面上(如果存在可视界面的话)的组件是为交互行为服务的,它可以更美,更抽象,更艺术化,但不可以为了任何理由破坏产品的交互行为。


什么是前端工程师
前端开发工程师,简单的说就是将设计师的图稿变成在浏览器里真真正正呈现的 HTML 页面供用户点击操作交互,这个工作可以简单到用 Photoshop Fireworks 点几下鼠标直接导出页面;也可以复杂到考虑每个标签的语义,整体的性能,浏览器的兼容,用户的交互,搜索引擎的优化等等等等;技能的基本要求是熟练使用图形图像处理工具,精通 HTML CSS JavaScript 前端语言,最好了解一种服务器端语言如 PHP 等等;

我们知道互联网产品在用户体验上有两个非常重要的基本要求即 交互 和 速度 当然还有设计和其他的要素。

交互:对于互联网产品来说用户首先所接触到的就是前端页面而不是服务器端冷冰冰的程序,任你有再强大的功能如果用户操作使用起来非常复杂肯定留不住用户。最贴切的例子就是拥有全球最多访问量的 Google 谷歌搜索引擎,谷歌在全球有成千上万台服务器集群但前端也仅仅是一个简简单单的文本搜索框,再者就是目前众多类似于桌面应用的 WEB 应用之所以能够营造良好的用户交互体验很大程度上依赖于 JS HTML CSS 三种技术的紧密结合如 AJAX 技术而整个交互过程中我们需要服务器端提供一定格式的数据即可,更多的是依靠优秀的前端工程师多年的经验和对于这三种技术的结合应用,当然这并不是故意去贬低服务器端的重要性谁离开谁肯定都不能成功,正是这种 把复杂留给自己 把简单留给用户 的交互模式为优秀的互联网产品赢得了用户和价值,在国内互联网产品严重同质化的时候任何对于用户体验和交互所做的努力都将使你的产品大大超越对手;

速度:长期以来我的很多客户都存在一种误解即网站要想提速会从这些方面考虑:服务器端代码优化(代码)增加服务器配置(硬件)购买分布式网络(网络)等等;但就我个人目前的经验来说这些做法对于超过 99% 的网站来说收效甚微:就代码和硬件上来说除非是极其复杂的应用型网站否则单程序和数据库对于网站速度的影响并不大因为多数门户网站通常都已经静态化了;至于网速我们目前仍旧困扰在“最后一公里”还有“运营商互通”问题上即使服务器端有 1TB 的带宽对于绝大多数用户也只有 80Kbps 所以作用甚微。但如果是从前端代码优化就可以很容易起到事半功倍的效果,据一篇分析报告称,开心网(KaiXin.com)首页可以压缩精简将近 300KB 仅仅一个简单的首页这 300KB 每年可为开心网节省 5-8 万人民币的流量费用想想开心网有多少个这样的页面。与其一些企业把大量的钱花在购买大服务器高带宽和 CDN 分布式网络流量上不如花点小钱请一位优秀的 WEB 前端工程师,因为你的服务器再快带宽再高用户的带宽是不变的,如果超过用户的带宽上线任何努力都是毫无意义的;

其他:当然除了交互和速度以外互联网前端开发工程师还可以为你带来很多附加的价值其中最为吸引的就是 SEO 搜索引擎优化,对于网站用户首先接触的是前端页面搜索引擎也不例外,没有经验的美工会大量使用 DIV 或 TABLE 标签排版导致整个页面内容没有主次轻重之分,你可以模拟搜索引擎爬虫在禁用 CSS 和 JS 之后如果看起来一塌糊涂没有主次那么对搜索引擎来说也是如此,一名优秀的网站前端工程师需要考虑到每一个 HTML 标签的语义合理的使用 Hx 标签 ul ol dl 标签等等让你的页面即使禁用 CSS 也能保持良好的结构,同样是两栏的页面将重要的内容放到页面靠上的位置,准备参与交互的页面元素如何放置可以结构最优化,甚至是浏览器对于 CSS 渲染性能的考虑等等,这些小的细节累加起来将对网站整体起着重要的作用。