面向未来的友好设计

A presentation at Sharing Event of Tencent Online Media Group in April 2015 in Beijing, China by DŌNGFĀNG

Slide 1

Slide 1

面向未来的友好设计 Tencent • OMG • NDC网媒设计中心 • bennyzhai • 2015.4.24

Slide 2

Slide 2

响应式设计(RWD) Since 2010.5 For a Future Friendly Web

Slide 3

Slide 3

Ethan Marcotte http://ethanmarcotte.com For a Future Friendly Web

Slide 4

Slide 4

设计风格 响 应 式 设 计 For a Future Friendly Web 解决方案

Slide 5

Slide 5

一些历史: 2009, Mobile First 重视移动端体验

  1. Mobile is exploding 2. Mobile forces you to focus 3. Mobile extends your capabilities Luke Wroblewski, 2009.11.3, “Mobile First”, http://www.lukew.com/ff/entry.asp?933 For a Future Friendly Web

Slide 6

Slide 6

一些历史: 2010, 诞生,理论和实践 Ethan Marcotte, 2010.5.25, “Responsive Web Design”, http://alistapart.com/article/responsive-web-design Alexander Dawson, 2010.8.18, “Mobile Web Design: Best Practices”, http://sixrevisions.com/web-development/mobile-web-design-best-practices For a Future Friendly Web

Slide 7

Slide 7

一些历史: 2011, 注意性能 Luke Wroblewski, 2011.9.12, “RESS:Responsive Design + Server Side Components”, http://www.lukew.com/ff/entry.asp?1392 For a Future Friendly Web

Slide 8

Slide 8

一些历史: 2012, 工作流程的讨论 Mark Boulton, 2012.2.24, “Responsive Summit: Workflow”, http://www.markboulton.co.uk/journal/responsive-summit-workflow For a Future Friendly Web

Slide 9

Slide 9

一些历史: Bootstrap以及栅格系统 http://getbootstrap.com For a Future Friendly Web

Slide 10

Slide 10

一切都是为了 设备 适应性 Adaptive Cool 设计开 发成本 Cost For a Future Friendly Web

Slide 11

Slide 11

核心的核心 设备 适应性 Adaptive For a Future Friendly Web

Slide 12

Slide 12

2015设计趋势 来源一 1. 2. 3. 4. 5. 6. 7. 8. 9. 扁平化和Material Design 背景图和背景视频 移动APP和social sites占主流 交互式信息图表替代了静态信息图表 微交互 代码少少,实现多多 大图片和视频取代了图片轮播 更高性能的响应式设计 发挥字体的功能 10. 11. 12. 13. 14. 15. 16. 17. 18. 卡片式设计 增强现实 微动画 更多的SVG实现 响应式icon 更多的个性化 滚动取代点击 线框icon + 幽灵按钮 改良的视差滚动(less is More) http://justcreative.com/2015/01/02/web-design-trends-predictions-2015/ For a Future Friendly Web

Slide 13

Slide 13

2015设计趋势 来源二 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 响应式设计成为常态 幽灵按钮(和背景融合) 重视字体运用——运用google字体等便宜或免费的字体,让网页字体更灵活 大面积的背景图片和背景视频 内容组织方式由“点击跳转”为主,变为以“滚动唤出”为主(趋势) 瀑布流和卡片式设计依然流行,并且更加完善 扁平化设计继续发展(或许意味Material Design的崛起?) 微交互(细节处的动画等) 有情节(storytelling)的交互 个性化用户体验(依赖大数据分析推送适合用户的内容) http://www.elegantthemes.com/blog/resources/web-design-trends-to-look-out-for-in-2015 For a Future Friendly Web

Slide 14

Slide 14

面向未来的友好设计(FFLY) Since 2011.9 For a Future Friendly Web

Slide 15

Slide 15

http://futurefriendlyweb.com/ http://www.slideshare.net/bradfrostweb/for-a-futurefriendly-web-webvisions-chicago-2012 http://www.slideshare.net/dmolsenwvu/the-future-friendly-campus-12514902 http://www.slideshare.net/lukebrooker/a-future-friendly-workflow For a Future Friendly Web

Slide 16

Slide 16

思路 • 因为 1. 移动设备碎片化 2. 用户场景多样化 3. 未来的移动设备形式和用户场景变化不可 预测 For a Future Friendly Web

Slide 17

Slide 17

思路 • 所以 1. 态度上,拥抱未知 2. 行动上,探索适应未知设备和场景的设计 方法 For a Future Friendly Web

Slide 18

Slide 18

面向未来的友好设计的原则 1. 内容策略 Jeremy Keith:https://adactio.com/journal/4523 让用户更快地获取需要的内容,而尽量少的受非内容因素的干扰 2. 移动优先 Luke W.:http://www.lukew.com/ff/entry.asp?933 移动设备爆发、移动设备拓展了交互场景 3. 内容以用户为中心 Cameron Koczon:http://alistapart.com/article/orbital-content 用户可能会在不同时间通过不同设备获取同一内容,不应让用户在切换使用场景时存在获取内容 的障碍 For a Future Friendly Web

Slide 19

Slide 19

设计方法和探索 1. 适应性设计 含响应式设计 Responsive Web Design http://www.slideshare.net/bienfantaisie/webrebuild-as-design 2. 原子设计 Atomic Design http://www.slideshare.net/bradfrostweb/atomic-design 3. Pixel-Perfect 设计方式和流程的革命 http://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-contentminnewebcon-version For a Future Friendly Web

Slide 20

Slide 20

原子设计 设计“系统”,而非页面 比规范化框架的规定性更细 http://www.slideshare.net/bradfrostweb/atomic-design For a Future Friendly Web

Slide 21

Slide 21

Pixel-Perfect设计方式的革命 告别上面的传统流程,各环节更加密切的合作 http://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebconversion For a Future Friendly Web

Slide 22

Slide 22

FFLY产生的背景 2011.9 For a Future Friendly Web

Slide 23

Slide 23

2011年9月21日的之前一周… 田纳西州 某森林里的小房子里 10人轰趴 提出“Future Friendly Design” http://globalmoxie.com/blog/future-friendly-mobilewood.shtml http://userfirstweb.com/558/mobilewood-and-futurefriendly For a Future Friendly Web

Slide 24

Slide 24

  1. Josh Clark UX/交互设计师,创业,O’Reilly, Harvard,纽约 https://www.linkedin.com/in/joshclark http://globalmoxie.com For a Future Friendly Web

Slide 25

Slide 25

  1. Brad Frost 前端设计师(I make websites),响应式设计专家,匹兹堡 https://www.linkedin.com/in/bradfrost For a Future Friendly Web

Slide 26

Slide 26

  1. Bryan Rieger 交互/开发,天巡网Skyscanner设计总监 https://uk.linkedin.com/in/bryanrieger For a Future Friendly Web

Slide 27

Slide 27

  1. Jason Grigsby 职业项目管理,密歇根大学公共关系专业 https://www.linkedin.com/in/grigs For a Future Friendly Web 深入浅出 Mobile Web(中文版)

Slide 28

Slide 28

  1. Lyza (danger) Gardner 深入浅出 Mobile Web(中文版) Web开发,伯明翰大学计算机科学,俄勒冈 https://www.linkedin.com/in/lyzadanger For a Future Friendly Web

Slide 29

Slide 29

  1. Jeremy Keith Web开发者,Clearleft Web咨询公司 Web标准化组织WaSP成员,Brighton, England https://adactio.com For a Future Friendly Web

Slide 30

Slide 30

  1. Luke Wroblewski Google产品总监,雅虎设计架构副总裁,Ebay UI设计leader https://www.linkedin.com/in/lukew For a Future Friendly Web

Slide 31

Slide 31

  1. Scott Jehl Web设计/开发 佛罗里达 http://scottjehl.com For a Future Friendly Web

Slide 32

Slide 32

  1. Scott Jenson Google产品经理, Frog Design创意总监, Apple UI设计师 https://www.linkedin.com/in/scottjenson http://designmind.frogdesign.com/blog/author/beyond-mobile/ For a Future Friendly Web

Slide 33

Slide 33

  1. Stephanie Rieger Yiibu产品总监/UX设计 https://uk.linkedin.com/in/stephanierieger For a Future Friendly Web

Slide 34

Slide 34

客串. Ethan Marcotte 响应式设计创始人 Web设计/开发 波士顿 http://alistapart.com/article/responsive-web-design http://ethanmarcotte.com/ http://unstoppablerobotninja.com/about/ For a Future Friendly Web

Slide 35

Slide 35

客串. Stephen Hay Zero Interface Web/mobile UX咨询,创意总监 https://nl.linkedin.com/in/stephenhay For a Future Friendly Web

Slide 36

Slide 36

A List/Book Apart Since 1998 For a Future Friendly Web

Slide 37

Slide 37

www.alistapart.com • 探索Web的设计、开发、内容 • 专注于Web标准和实践 For a Future Friendly Web

Slide 38

Slide 38

www.alistapart.cn For a Future Friendly Web

Slide 39

Slide 39

www.abookapart.com • • • web设计需要一专多能——这是那些以鼓捣互联网为生,手捧我们的精致图 书的人们所具有的特点。我们的图书覆盖web设计和开发领域内最前沿且必 需掌握的内容,以设计风格化,知识点清晰,还有最最重要的简洁为主要特 色,我们深谙简洁对于设计师和开发者的重要性,这些人每天忙得要死,浪 费时间就是浪费生命。 A Book Apart出版高质量,精编辑,细校对,且选题经过层层把关的书籍。 我们认为100页左右的书是最完美的,所以我们尽量做这个尺寸的图书,关于 内容,我们的选题从范围和深度上基本围绕HTML5,CSS3,内容策略,响 应式设计等等来做。 我们的每一本图书都代表一个清晰的领域,你会很清楚你要看什么,看完了 回去工作,一点工夫都不耽误。欢迎提供选题和通过各种方式参与我们所做 的出版事业,我们所做的事,决定web的未来。 For a Future Friendly Web

Slide 40

Slide 40

www.abookapart.com For a Future Friendly Web

Slide 41

Slide 41

  1. Jeremy Keith:HTML5 For Web Designers / HTML5 网页设计入门必读 2014年11月 2. Dan Cederholm:CSS3 For Web Designers / CSS3 网页设计入门必读 2014年11月 For a Future Friendly Web

Slide 42

Slide 42

  1. Erin Kissane:The Elements of Content Strategy / 内容策略 2014年8月 5. Aarron Walter:Designing For Emotion / 网站情感化设计 2014年8月 For a Future Friendly Web

Slide 43

Slide 43

  1. Ethan Marcotte:Responsive Web Design / 响应式Web设计 2014年11 月 6. Luke W.:Mobile First / 移动优先 2014年11月 For a Future Friendly Web

Slide 44

Slide 44

  1. Mike Monteiro:Design is a Job / 设计工作室生存手册 2015年1月 For a Future Friendly Web

Slide 45

Slide 45

  1. Karen Mcgrane:Content Strategy for Mobile/ 移动内容策略 9. Erika Hall:Just Enough Research / 用研,够用就好 10. Dan Cederholm:Sass For Web Designers / CSS的SASS管理方式 11. Jason Santa Maria:On Web Typography / Web字体 12. Mike Monteiro:You‘re My Favorite Client / 你是我最体贴的甲方 13. Scott Jehl:Responsible Responsive Design / 负责任的响应式设计 For a Future Friendly Web

Slide 46

Slide 46

常用的结语 • 技术本身没有问题,如何实现才是问题 • 没有固定的方法,只有不断发现新方法 • 拥抱未知,知难而上 For a Future Friendly Web

Slide 47

Slide 47

THANK YOU! Tencent • OMG • NDC网媒设计中心 • bennyzhai • 2015.4.24