Ethan Marcotte http://ethanmarcotte.com
For a Future Friendly Web
Slide 4
设计风格
响 应 式 设 计
For a Future Friendly Web
解决方案
Slide 5
一些历史: 2009, Mobile First 重视移动端体验
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
一些历史: 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
一些历史: 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
一些历史: 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
一些历史: Bootstrap以及栅格系统
http://getbootstrap.com
For a Future Friendly Web
Slide 10
一切都是为了 设备 适应性 Adaptive
Cool
设计开 发成本 Cost
For a Future Friendly Web
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
面向未来的友好设计(FFLY) Since 2011.9
For a Future Friendly Web
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
思路 • 因为 1. 移动设备碎片化 2. 用户场景多样化 3. 未来的移动设备形式和用户场景变化不可 预测
For a Future Friendly Web
Slide 17
思路 • 所以 1. 态度上,拥抱未知 2. 行动上,探索适应未知设备和场景的设计 方法
For a Future Friendly Web
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
设计方法和探索 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
原子设计
设计“系统”,而非页面 比规范化框架的规定性更细 http://www.slideshare.net/bradfrostweb/atomic-design
For a Future Friendly Web
Slide 21
Pixel-Perfect设计方式的革命
告别上面的传统流程,各环节更加密切的合作 http://www.slideshare.net/dmolsenwvu/death-of-lorem-ipsum-and-pixelperfect-content-minnewebconversion
For a Future Friendly Web
Slide 22
FFLY产生的背景 2011.9
For a Future Friendly Web
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
Josh Clark
UX/交互设计师,创业,O’Reilly, Harvard,纽约 https://www.linkedin.com/in/joshclark http://globalmoxie.com
For a Future Friendly Web
Slide 25
Brad Frost
前端设计师(I make websites),响应式设计专家,匹兹堡 https://www.linkedin.com/in/bradfrost
For a Future Friendly Web
Slide 26
Bryan Rieger
交互/开发,天巡网Skyscanner设计总监 https://uk.linkedin.com/in/bryanrieger
For a Future Friendly Web
Slide 27
Jason Grigsby
职业项目管理,密歇根大学公共关系专业 https://www.linkedin.com/in/grigs
For a Future Friendly Web
深入浅出 Mobile Web(中文版)
Slide 28
Lyza (danger) Gardner
深入浅出 Mobile Web(中文版)
Web开发,伯明翰大学计算机科学,俄勒冈 https://www.linkedin.com/in/lyzadanger
For a Future Friendly Web
Slide 29
Jeremy Keith
Web开发者,Clearleft Web咨询公司 Web标准化组织WaSP成员,Brighton, England https://adactio.com
For a Future Friendly Web
Slide 30
Luke Wroblewski
Google产品总监,雅虎设计架构副总裁,Ebay UI设计leader https://www.linkedin.com/in/lukew
For a Future Friendly Web
Slide 31
Scott Jehl
Web设计/开发 佛罗里达 http://scottjehl.com
For a Future Friendly Web
Slide 32
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
Stephanie Rieger
Yiibu产品总监/UX设计 https://uk.linkedin.com/in/stephanierieger
For a Future Friendly Web
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
客串. Stephen Hay
Zero Interface Web/mobile UX咨询,创意总监 https://nl.linkedin.com/in/stephenhay
For a Future Friendly Web
Slide 36
A List/Book Apart Since 1998
For a Future Friendly Web
Slide 37
www.alistapart.com • 探索Web的设计、开发、内容 • 专注于Web标准和实践
For a Future Friendly Web
Slide 38
www.alistapart.cn
For a Future Friendly Web
Slide 39
www.abookapart.com •
•
•
web设计需要一专多能——这是那些以鼓捣互联网为生,手捧我们的精致图 书的人们所具有的特点。我们的图书覆盖web设计和开发领域内最前沿且必 需掌握的内容,以设计风格化,知识点清晰,还有最最重要的简洁为主要特 色,我们深谙简洁对于设计师和开发者的重要性,这些人每天忙得要死,浪 费时间就是浪费生命。 A Book Apart出版高质量,精编辑,细校对,且选题经过层层把关的书籍。 我们认为100页左右的书是最完美的,所以我们尽量做这个尺寸的图书,关于 内容,我们的选题从范围和深度上基本围绕HTML5,CSS3,内容策略,响 应式设计等等来做。 我们的每一本图书都代表一个清晰的领域,你会很清楚你要看什么,看完了 回去工作,一点工夫都不耽误。欢迎提供选题和通过各种方式参与我们所做 的出版事业,我们所做的事,决定web的未来。
For a Future Friendly Web
Slide 40
www.abookapart.com
For a Future Friendly Web
Slide 41
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
Erin Kissane:The Elements of Content Strategy / 内容策略 2014年8月 5. Aarron Walter:Designing For Emotion / 网站情感化设计 2014年8月
For a Future Friendly Web
Slide 43
Ethan Marcotte:Responsive Web Design / 响应式Web设计 2014年11 月 6. Luke W.:Mobile First / 移动优先 2014年11月
For a Future Friendly Web
Slide 44
Mike Monteiro:Design is a Job / 设计工作室生存手册 2015年1月
For a Future Friendly Web
Slide 45
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
常用的结语 • 技术本身没有问题,如何实现才是问题 • 没有固定的方法,只有不断发现新方法 • 拥抱未知,知难而上
For a Future Friendly Web