The Overview of Web Design

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