狠狠撸

H5的类型
建站: 传播留留存
游戏: 传播盈利利
营销: 传播转化

建站 Sample
Ti?any (by Brad Frost)

游戏 Sample
神经猫（by Egret）

营销 Sample
顺?风?车?大电影（by GANG）

各种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./act/a20120511brand/
http://www.antarcticstation.org/
http://www.wm.edu/
http://english.pku.edu.cn/
http://browser./mac/index.html

灵活性
“?网?页和打印介质的不同在于它
具有打印介质没有的灵活性，我
们应该接受这种灵活性并且利利?用
它。”
——John Allsopp, 2000.4.7,
"A Dao of Web Design"

承载媒体 Content
? 1990’s: 纯?文本(超链接) ，图?片(<img>)?
https://www.w3.org/History/19921103-
hypertext/hypertext/WWW/TheProject.html
? 2000’s: Flash(富媒体/视频)
? 2010’s: html5(geolocation/多api/canvas绘图等)
设计是为内容服务的，所以内容比设计更更重要。脱离内容的设
计就不是设计了了，只能称为装饰。?
——Je?rey Zeldman

设计?方法 Method
? 1990’s: ?文档
? 2000’s: PS切图，table布局，imageready, pixel
perfect
? 2010’s: 体现适应性，在浏览器中进?行行设计
“我常常诧异于那些不做设计的?人他们居然有这样的观点：“设计不
就是上上?色、加点装饰吗？”——诚然，有很多的烂设计只是为?页
?面加点装饰?而已，但是好的设计绝非如此，好的设计都在解决问
题。”?
— JEFFREY VEEN

PC - 移动
? Sara Cannon, 2012.5.7, "Responsive Design",?
http://www.slideshare.net/saracannon/responsive-
design-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/expanding-
universe-toolset-managing-screen-resolutions

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/recreate-
nikebetterworld-parallax/
? Ethan Marcotte: 响应式设计（Responsive Web Design）?
http://alistapart.com/article/responsive-web-design/
? Luke W.: 依赖传感器的设计（Designing for Sensors）?
http://www.lukew.com/?/entry.asp?828
? http://matthew.wager?eld.com/parallax/
? …

浏览器 Browser is canvas
IE windows phone, Firefox, Chrome, Opera, Safari,
UC、海?豚、QQ, Webview(主要是X5)

组织内容 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
? .wo?: 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
? 适应性 ?ex, ?uid?
响应式设计
? 视?网膜 retina?
@2x位图、?矢量量图形、无图优化

兼容 Fix
? 透明、圆?角、动画、渐变、变形……

progressive enhancement 渐进增强
Responsive Web Design 响应式设计
Design System 设计系统
?面向未来的友好设计

Benny Chia, Ridea., Aug 4, 2016
Thanks

狠狠撸

The Overview of Web Design

Recommended

More Related Content

Similar to The Overview of Web Design (20)

The Overview of Web Design