Your SlideShare is downloading. ×
交互设计Vs前端开发
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

交互设计Vs前端开发

1,977
views

Published on

Published in: Design, Technology, Business

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,977
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
49
Comments
0
Likes
4
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

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

    • 1. 交互设计 VS 前端开发 Alite Yu
    • 2. 哈佛给学生做的 1500 个思维游戏 我是特德 , 我的女朋友凯莉是长发 我是罗兹 , 我的女朋友是蕾娜 . 我是内特 ! 我是埃里克 , 我的 女朋友是妮娅 . 1 2 3 4 我是艾米 , 我的男友是短发 . 我的男友带着一个红心 .
    • 3.
      • 网页加载 速度 (ie page speed)
      • 渐变 PNG 图片和 圆角 ( PNGs for rounded corners and gradients)
      • 渲染 时间 (the rendering time )
      • ……
      交互设计认为前端开发会关注
    • 4. 网页加载速度 Pingdom 工具 来比较文件大小和载入时间 。
    • 5. 渐变 PNG 图片和圆角
      • Linear-gradient ( 线性梯度 )
      • border-radius ( 边界半径 )
      • radial-gradient ( 径向梯度 )
      • text-shadow ( 文字阴影 )
      • box-shadow with RGBa ( 带 RGBa 盒模型阴影 )
    • 6. 渲染时间 此代码生成以下输出(添加的标注用于强调 Direct2D 和 GDI 呈现方式之间的差别。)
    • 7.
      • 技术
      • 内容
      • 网站架构
      • 视觉设计层面
      • 交互设计层面
      交互设计会关注
    • 8. 交互设计师是怎么样的人 同理心 好奇心 专注 杂学家 爱思考 懂逻辑 喜观察 会总结 沟通强 洁癖
    • 9. 交互设计的野心 - 解放设计师的生产力
      • 原有业务的剥离
      • 让 PD 做交互的部分内容 , 让交互做视觉的部分内容 , 让视觉做部分前端的内容 , 让前端做更多工具化的产物 .
      • 交互原则和用户实践的教学
      • 让视觉与前端初步了解 .
      • 创建交互设计模式库
      • 制作一套可复用的构建单元块并帮助设计师开发他们自己的网站和应用 .
    • 10. 原有业务的剥离
      • 说说 PD
      • 需要一个简单处理的搭建快速原型的工具 , 能说明商业意图就好 .
      • 说说 IxD
      • 创建交互设计模式库让 PD, 视觉 , 前端都可以从里面拉单元 , 我们研究交互设计模式的创新 , 研究用户的实践环境
      • 搭交互界面 , 做好标注 !
      • 说说 VD
      • 建立每个产品线的视觉规范库 , 研究品牌视觉传达的衍生产物 ( 素材库 ), 制造阿里视觉自己的产品进行推广和市场化 .
      • 说说 FDE
      • 更多的聚焦在设计工具的开发 , 以及代码规格化 , 创新型技术的探索 .
    • 11. 交互原则和用户实践的教学
      • 交互原则方面
      • 了解最基本的事实、规律或假设。
      • 用户的最佳实践方面
      • 了解做事的惯常行为或方式
      涉及的范围是从规定 ( 你应该遵守的设计规则 ) 到假设 ( 默认为正确的一种基本状态 ) 再到 处理方式 ( 如何思考对待这些概念的方式 ) 。
    • 12. 创建交互设计模式库
      • 模式:标准样式或典型原型
      • 某一已知问题在特定环境下的通用且成功的交互设计组件和设计方案。
      • 反模式的重要性 - 案例库
      • Koeing 为“反模式”定义了两个变量:
      • 反模式描述的是导致最差结果的最差解决方案。
      • 反模式描述的是如何摆脱最差情形以及如何由最差情形得到最佳解决方案。

    ×