SlideShare a Scribd company logo
1 of 11
交互设计 VS 前端开发   Alite Yu
[object Object],[object Object],[object Object],[object Object],交互设计认为前端开发会关注
网页加载速度 Pingdom 工具 来比较文件大小和载入时间 。
渐变 PNG 图片和圆角  ,[object Object],[object Object],[object Object],[object Object],[object Object]
渲染时间 此代码生成以下输出(添加的标注用于强调  Direct2D  和  GDI  呈现方式之间的差别。)
[object Object],[object Object],[object Object],[object Object],[object Object],交互设计会关注
交互设计师是怎么样的人 同理心 好奇心 专注 杂学家 爱思考 懂逻辑 喜观察 会总结 沟通强 洁癖
交互设计的野心 - 解放设计师的生产力  ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
原有业务的剥离 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
交互原则和用户实践的教学 ,[object Object],[object Object],[object Object],[object Object],涉及的范围是从规定 ( 你应该遵守的设计规则 ) 到假设 ( 默认为正确的一种基本状态 ) 再到 处理方式 ( 如何思考对待这些概念的方式 ) 。
创建交互设计模式库 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]

More Related Content

More from fangdeng

Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
fangdeng
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
fangdeng
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
fangdeng
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
fangdeng
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
fangdeng
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
fangdeng
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
fangdeng
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
fangdeng
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
fangdeng
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探
fangdeng
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocket
fangdeng
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
fangdeng
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)
fangdeng
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
fangdeng
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
fangdeng
 
移动的前端技术架构和性能优化
移动的前端技术架构和性能优化移动的前端技术架构和性能优化
移动的前端技术架构和性能优化
fangdeng
 

More from fangdeng (20)

Java script测试之js unit ut
Java script测试之js unit utJava script测试之js unit ut
Java script测试之js unit ut
 
2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖2011年方凳年度总结及颁奖
2011年方凳年度总结及颁奖
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
产品线中的思考
产品线中的思考产品线中的思考
产品线中的思考
 
Postoffer前端架构设计
Postoffer前端架构设计Postoffer前端架构设计
Postoffer前端架构设计
 
Varnish简介
Varnish简介Varnish简介
Varnish简介
 
Websocket
WebsocketWebsocket
Websocket
 
Let's talk about date in javascript
Let's talk about  date  in javascriptLet's talk about  date  in javascript
Let's talk about date in javascript
 
Test driven-frontend-develop
Test driven-frontend-developTest driven-frontend-develop
Test driven-frontend-develop
 
方凳良品1期
方凳良品1期方凳良品1期
方凳良品1期
 
方凳良品2期
方凳良品2期方凳良品2期
方凳良品2期
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
Datalazyload
DatalazyloadDatalazyload
Datalazyload
 
Request animateframe初探
Request animateframe初探Request animateframe初探
Request animateframe初探
 
简鲜侠Websocket
简鲜侠Websocket简鲜侠Websocket
简鲜侠Websocket
 
魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式魏琪君-重构-关于可读性、原则和模式
魏琪君-重构-关于可读性、原则和模式
 
方凳激励体系(试行)
方凳激励体系(试行)方凳激励体系(试行)
方凳激励体系(试行)
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
 
高性能Javascript
高性能Javascript高性能Javascript
高性能Javascript
 
移动的前端技术架构和性能优化
移动的前端技术架构和性能优化移动的前端技术架构和性能优化
移动的前端技术架构和性能优化
 

交互设计Vs前端开发

Editor's Notes

  1. 唠叨下:技术层面 参考了 12 个颇受欢迎的网站的解决方式。其中它们都有一些共同几点原则: 在不同的浏览器,不同的显示器,不同的系统中,色彩和字体显示出不同的效果。 不能保证页面上的元素都按特定尺寸显示。 大多数新的品牌计算机没有显示在最佳或最高的设置 因此,你根本不可能准确地预知访问者的系统设置。实际上,所见即所得,应该是所见不一定所得。 唠叨下:内容层面 如果页面的内容不值得展示,那么,展示这些内容的方式,也就无关紧要了。如何赢得更多忠实的访问者?如何增加网站的粘和度?内容为王。也就是说,如果网站没有好的内容就不会有访问者。 唠叨下:网站架构层面 Web 站点开发生命周期中:可行性—分析—设计—构建 & 测试—投入运行—维护,遵循着这瀑布模型。其中在设计之前的阶段网站架构就基本形成,在迭代的可用性测试中不断完善。网站架构,不过是将信息架构应用于网站而已。网站架构的许多任务,与用于图书馆的信息架构,具有相同的任务:分类,归类,组织网站要提供的零碎信息。目的只有一个,使访问者轻松地找到自己需要的信息。 唠叨下:视觉设计层面 美学,为什么那么重要呢?因为事实上我们就是通过封面,判断一本书;通过外观,判断一家餐馆;通过视觉设计判断一家网站。如果访问者正在寻找精美的服饰或儿童玩具,他们或许不会在一家满眼望去都是灰色调,视觉设计不鲜明的网站上花费时间。我们努力提升访问者美妙的体验,并不是放弃可用性的标准,我们一直在谋求利用 Web 这种媒介的独特性,刺激,吸引,迷惑,愉悦,迷住访问者。出色的视觉设计,能够赋予意义,提供语境,唤起情感。 Web 页面怎么吸引访问者?如果表达不清楚,受众就不可能理解你的内容。如果表达没有吸引力,受重就不可能有兴趣尝试。 因此,让我们尽全力平衡形式与功能。创造视觉情感化设计的同时,使用可用性原则平衡弥合差距。如果说,可用性因素使网站具有功能性,视觉设计使网站令人难忘,那么,我们的目标是,二者兼具。 唠叨下:交互设计层面 交互指的是,需要访问者做出某种动作,比如点击按钮,链接,填写一份表单等,作为实现目标的方法,或进入下一个任务的方法。交互设计,超出了视觉设计的范畴,我们希望访问者不在是看客,而是主动的参与者。什么才叫好的交互设计呢?或许,大多数易于使用的产品,都是那些你没有注意过的产品。针对访问者而言,设计就像是透明的,看不见的。他在不知不觉中成功完成操作任务,证明设计的界面是标准的成功界面。界面是如此自然,直观,以至于用户都没觉察到它的存在。就好比好莱坞的科幻大片,让观众看不出用过电脑特技,也不会用特技作为宣传的卖点;相反国内的一些大片,不管拍的怎样,先把电脑特技搬出来做宣传。好的设计是透明的,好的交互设计不证自明。
  2. 以前每天我都在想 , 当我接到新需求的时候 , 都会条件反射般的参考我曾经见到的网站样式 , 从中找到和我所设计的东西的契合点 . 一开始我所能接触到的就是国内的几个大型网站什么淘宝啊腾讯啊等等 . 慢慢的开始研究国外的网站 , 觉得国外的用户体验设计 , 比我们久远 , 沉淀比我们丰富 . 短时间内 , 我觉得我可以满足自己的求知欲望 . 但是我发现 , 一旦有一天我成为国外某大型公司的设计师的时候 , 我应该要仿效谁 , 我又该抄袭谁 ?