定制版设计开发vs响应式设计开发

Transcript

1. 响应式VS定制版 13年5月20⽇日星期⼀一
2. 响应式 • 所谓响应式设计，就是能够⽤用⼀一套样式，使 你的⻚页⾯面在不同分辨率的屏幕下都有很好的 表现，⽤用户都能看到相同的内容。 13年5月20⽇日星期⼀一
3. 响应式的理念 • ⼀一个⺴⽹网站能够兼容多个终端，⽽而不是为每个 终端做⼀一个特定的版本 • Content is King（内容为⺩王） • 移动设备优先 13年5月20⽇日星期⼀一
4. 响应式技术要素 • fluid grid（流体⺴⽹网格） • 弹性图⽚片 • Media Queries • 各种保证兼容性的奇技淫巧 13年5月20⽇日星期⼀一
5. 13年5月20⽇日星期⼀一
6. 13年5月20⽇日星期⼀一
7. • 响应式，并不是弹性设计。弹性设计解决了 分辨率的问题，但这是我们强加给⽤用户的。 13年5月20⽇日星期⼀一
8. 我们为什么反对“响应式” • ⼤大多数⼈人错误的理解了响应式，对新技术盲 ⺫⽬目跟⻛风 • 响应式是⽤用户体验的倒退（丢掉了我们的灵 魂） • 技术缺陷 • ⽀支持响应式成本很⾼高 13年5月20⽇日星期⼀一
9. 响应式的定义 • “响应式设计”源⾃自“响应式建筑”。通过配备各种传 感器、摄像头，建筑可以按照不同⼈人群和环境的 需求来调整⾃自⾝身的温度、光照、结构以及功能等 等，这样的建筑就是“响应式建筑”。 • 响应式设计则是把这个思想运⽤用到了web设计上， 让产品可以根据⽤用户、设备和场景的不同⽽而做出 不同的响应。 13年5月20⽇日星期⼀一
10. 响应式是⽤用户体验的倒退 “usability 101（可⽤用性101 ）第⼀一条规则就是满⾜足 最终⽤用户期待，混淆最终⽤用户是Web设计中最⼤大的 败笔。然⽽而，这正是响应式设计所做的。” -- Tom Ewer 13年5月20⽇日星期⼀一
11. 13年5月20⽇日星期⼀一
12. pc pad mobile hover ⿏鼠标 键盘 3g gps ⼩小 touch 省电 流量 性能 ⼤大显⽰示器 文艺 … … 重⼒力 感应 便捷 13年5月20⽇日星期⼀一
13. pc pad mobile hover ⿏鼠标 键盘 3g gps ⼩小 touch 省电 流量 性能 ⼤大显⽰示器 文艺 … … 重⼒力 感应 便捷 13年5月20⽇日星期⼀一
14. 技术缺陷 • 各种兼容性问题 – IE9以下不⽀支持 • 响应式图⽚片 – 背景图⽚片 – Img • Media Query OR Element Query 13年5月20⽇日星期⼀一
15. Media Query or Element 13年5月20⽇日星期⼀一
16. 响应式成本 • 设计成本 – 更多的限制，更少的“素材” • 前端开发成本 • 测试成本 • 维护成本 13年5月20⽇日星期⼀一
17. 我们⽀支持“定制版” • 不是狭隘的按分辨率的定制版，⽽而是按不同 设备的定制版 13年5月20⽇日星期⼀一
18. 什么是“定制版” • 产品的设计与开发应当根据不同类型的设备 和使⽤用场景进⾏行定制，向⽤用户推送不同的版 本，以达到给⽤用户最好⽤用户体验的⺫⽬目的。 13年5月20⽇日星期⼀一
19. 趋势 • ⼿手机，pad,pc机占有率会越来越均衡，这 些不同设备的⽤用户都是我们的主流⽤用户 13年5月20⽇日星期⼀一
20. ⽤用户体验 • 针对不同的设备，才能做出更适合该设备的 交互体验。 • 前端和设计师针对不同设备，有更⼤大的发挥 空间 13年5月20⽇日星期⼀一
21. 关于成本 • 开发成本 – 不⽤用考虑IE系列浏览器，前端开发起来⾮非常⾼高 效。 – 测试能做有针对性的测试 13年5月20⽇日星期⼀一
22. • 我们要站在更⾼高的⾼高度看成本。 • ⺫⽬目前后端架构都⾮非常成熟，我们只⽤用多做⼀一 些view层的东⻄西，就能获得更好的⽤用户体 验，何乐⽽而不为之。 13年5月20⽇日星期⼀一
23. 怎么做 • 桌⾯面端：按照原来的思路，兼容各主流浏览 器。发挥宽屏，⿏鼠标快速操作，键盘快速输 ⼊入的优势。 • Pad:轻便，时尚 • Mobile：content is King/性能/流量/省 电/兼容性 13年5月20⽇日星期⼀一
24. 13年5月20⽇日星期⼀一
25. 13年5月20⽇日星期⼀一
26. 13年5月20⽇日星期⼀一