交互设计 VS 前端开发 Alite Yu

哈佛给学生做的 1500 个思维游戏

我是特德 , 我的女朋友凯莉是长发

我是罗兹 , 我的女朋友

是蕾娜 .

我是内特 !

我是埃里克 , 我的 女朋友是

妮娅 .

1 2 3 4

我是艾米 , 我的男友是短

发 .

我的男友带着一个

红心 .

• 网页加载速度 (ie page speed)

• 渐变 PNG 图片和圆角 (PNGs for rounded corners and gradients)

• 渲染时间 (the rendering time )

……

交互设计认为前端开发会关注

网页加载速度Pingdom 工具来比较文件大小和载入时间。

渐变 PNG 图片和圆角

Linear-gradient ( 线性梯度 ) border-radius ( 边界半径 ) radial-gradient ( 径向梯度 ) text-shadow ( 文字阴影 ) box-shadow with RGBa ( 带 RGBa 盒模型阴影 )

渲染时间此代码生成以下输出（添加的标注用于强调 Direct2D 和 GDI 呈现方式之间的差别。）

技术

内容

网站架构

视觉设计层面

交互设计层面

交互设计会关注

交互设计师是怎么样的人

同理心

好奇心专注

杂学家

爱思考

懂逻辑

喜观察

会总结

沟通强

洁癖

交互设计的野心 - 解放设计师的生产力

原有业务的剥离

让 PD 做交互的部分内容 , 让交互做视觉的部分内容 , 让视觉做部分前端的内容 , 让前端做更多工具化的产物 .

交互原则和用户实践的教学 让视觉与前端初步了解 .

创建交互设计模式库 制作一套可复用的构建单元块并帮助设计师开发他们自己的网站和应用 .

原有业务的剥离 说说 PD

需要一个简单处理的搭建快速原型的工具 , 能说明商业意图就好 .

说说 IxD

创建交互设计模式库让 PD, 视觉 , 前端都可以从里面拉单元 , 我们研究交互设计模式的创新 , 研究用户的实践环境

搭交互界面 , 做好标注 !

说说 VD

建立每个产品线的视觉规范库 , 研究品牌视觉传达的衍生产物 ( 素材库 ), 制造阿里视觉自己的产品进行推广和市场化 .

说说 FDE

更多的聚焦在设计工具的开发 , 以及代码规格化 , 创新型技术的探索 .

交互原则和用户实践的教学

交互原则方面 了解最基本的事实、规律或假设。

用户的最佳实践方面 了解做事的惯常行为或方式

涉及的范围是从规定 (你应该遵守的设计规则 )到假设 (默认为正确的一种基本状态 )再到处理方式 (如何思考对待这些概念的方式 ) 。

创建交互设计模式库

模式：标准样式或典型原型

某一已知问题在特定环境下的通用且成功的交互设计组件和设计方案。

反模式的重要性 -案例库

Koeing 为“反模式”定义了两个变量：

• 反模式描述的是导致最差结果的最差解决方案。

• 反模式描述的是如何摆脱最差情形以及如何由最差情形得到最佳解决方案。