A presentation at DiDi Hitch in in Beijing, China by DŌNGFĀNG
Web设计基础
H5
H5的类型 建站: 传播 留留存 游戏: 传播 盈利利 营销: 传播 转化
建站 Sample Tiffany (by Brad Frost)
游戏 Sample 神经猫（by Egret）
营销 Sample 顺⻛风⻋车⼤大电影（by GANG）
H5 ≈ HTML5
各种Web⻚页⾯面 http://coolhomepages.com/Fantastic-Collage-Style-Web-Design-Examples/ blog-267.html http://www.bing.com/ https://vine.co/ http://www.dtelepathy.com/ http://lol.qq.com/act/a20120511brand/ http://www.antarcticstation.org/ http://www.wm.edu/ http://english.pku.edu.cn/ http://browser.qq.com/mac/index.html
灵活性 “⽹网⻚页和打印介质的不同在于它 具有打印介质没有的灵活性，我 们应该接受这种灵活性并且利利⽤用 它。” ——John Allsopp, 2000.4.7, “A Dao of Web Design”
历史 History
承载媒体 Content • 1990’s: 纯⽂文本(超链接) ，图⽚片(<img>) https://www.w3.org/History/19921103hypertext/hypertext/WWW/TheProject.html • 2000’s: Flash(富媒体/视频) • 2010’s: html5(geolocation/多api/canvas绘图等) 设计是为内容服务的，所以内容比设计更更重要。脱离内容的设 计就不是设计了了，只能称为装饰。 ——Jeffrey Zeldman
设计⽅方法 Method • 1990’s: ⽂文档 • 2000’s: PS切图，table布局，imageready, pixel perfect • 2010’s: 体现适应性，在浏览器中进⾏行行设计 “我常常诧异于那些不做设计的⼈人他们居然有这样的观点：“设计不 就是上上⾊色、加点装饰吗？”——诚然，有很多的烂设计只是为⻚页 ⾯面加点装饰⽽而已，但是好的设计绝非如此，好的设计都在解决问 题。” — JEFFREY VEEN
趋势 Trend
PC - 移动 • Sara Cannon, 2012.5.7, “Responsive Design”, • http://www.slideshare.net/saracannon/responsivedesign-12837964?from_search=2 Phone Count, http://phonecount.com/pc/count.jsp
PC - 移动 Luke W. 2016.7.28: https://twitter.com/lukew/status/758433206882361345
PC - 移动 • Andy Gilliland, 2011.4.1, “Pixel Proliferation: A Toolset For Managing Screen Resolutions”, http://punchcut.com/perspectives/expandinguniverse-toolset-managing-screen-resolutions
Web1.0 - 2.0
2015 Trend • 扁平化和Material Design • 背景图和背景视频 • 移动APP和social sites占主流 • 交互式信息图表替代了了静态信息图表 • 微交互 • 代码少少，实现多多 • ⼤大图⽚片和视频取代了了图⽚片轮播 • 更更⾼高性能的响应式设计 • 发挥字体的功能
2015 Trend(续) • 卡⽚片式设计 • 增强现实 • 微动画 • 更更多的SVG实现 • 响应式icon • 更更多的个性化 • 滚动取代点击 • 线框icon + 幽灵按钮 • 改良的视差滚动（less is More） http://justcreative.com/2015/01/02/web-design-trends-predictions-2015/
2016 Trend • 垂直设计和滚动 • 卡⽚片样式的界⾯面 • 视频banner • 微动画 • 注意⻚页⾯面中的交互 • 更更多字体设计 • 插画 • 强烈明亮的颜⾊色，类似80年年代的⻛风格 • 汉堡包导航和icon的运⽤用 • 模糊现实和虚拟之间的差别 http://designmodo.com/web-design-trends-2016/
Web设计的取向 2013 - Present
纯视觉 Visual • 拼贴（Collage） • 轴测（Isometric） • 拟物（Skeuomorph） • ⼤大背景图（Large Background） • 扁平化（纯扁平Metro或物理理扁平Material Design） • …
视觉+技术实现 UI develop • Ian Lunn: 视差滚动（Parallax Scrolling） http://www.ianlunn.co.uk/blog/code-tutorials/recreatenikebetterworld-parallax/ • Ethan Marcotte: 响应式设计（Responsive Web Design） http://alistapart.com/article/responsive-web-design/ • Luke W.: 依赖传感器的设计（Designing for Sensors） http://www.lukew.com/ff/entry.asp?828 • http://matthew.wagerfield.com/parallax/ • …
浏览器 Browser is canvas IE windows phone, Firefox, Chrome, Opera, Safari, UC、海海豚、QQ, Webview(主要是X5)
实操 Practice
组织内容 Copies ⾸首先，Web⻚页⾯面是⼀一份⽂文档。 • 阅读顺序 • 可访问性 • 占位符 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua… http://placehold.it/350x150 • ⼏几个尺⼨寸：1003，960，800，768，750，640 • 栅格化，如 960 Grid System: http://960.gs/
设计资源 Assets • 位图：.png, .gif, .jpg, .webp (https://developers.google.com/ speed/webp/) （canvas） • ⽮矢量量: .svg, font • 字体 • .eot: Internet Explorer • .woff: Chrome, Firefox • .ttf: Chrome, Firefox, Opera, Safari, Android, iOS 4.2+ • .svg: iOS 4.1• https://www.fontsquirrel.com/tools/webfont-generator
动画的选择 Animation • Gif动画 ⼯工具：PS 优点：简单、⻛风格化 缺点：逐帧、256⾊色，无法交互 • CSS或Canvas动画 ⼯工具：css / canvas, HYPE3 (http:// tumult.com/hype/) 优点：web⽀支持最好，最流畅，效果丰富，可交互 缺点：需要写代码或和开发配合
动画的选择（续） Animation • 视频动画 .mp4 ⼯工具：AE、Flash 优点：视频动画，视觉无所不能 缺点：⼿手机端⾃自动全屏，无法交互
多媒体 Multimedia • ⾳音频 audio • 视频 video • Flash和其他
优化 Optimize • 适应性 flex, fluid 响应式设计 • 视⽹网膜 retina @2x位图、⽮矢量量图形、无图优化
兼容 Fix • 透明、圆⾓角、动画、渐变、变形……
⾯面向未来的友好设计 progressive enhancement 渐进增强 Responsive Web Design 响应式设计 Design System 设计系统
Thanks Benny Chia, Ridea., Aug 4, 2016
Considering most designers in DiDi’s design team were more familiar with the mobile platform than desktop, This presentation focus on mobile: how to present a graceful web page on mobile devices? how to take the advantage of adaptivity for web pages? what is the design trend in recent years? In the end, I reviewed some concepts that frequently be discussed by UI developers.
for free. You
can too.