响应式与H5课件.ppt

* * 做电商的基础技术 打开你的电脑上的浏览器，360、IE、FireFox、Chrome… /wangluoyingxiao/ 试一试 看到结果了吗？ 打开手机上的微信 扫一扫，扫右侧的二维码 看到结果了吗？ 试一试 使用PC上的浏览器打开；使用iPhone打开 不同的访问终端，相同的访问体验 页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。 无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。 响应式Web设计 Responsive Web Design 响应式Web设计 Responsive Web Design 页面只有一个，只是针对不同的分辨率、不同的设备环境进行了一些不同的设计，所以在开发、维护和运营上，相对多个版本，能节约成本 移动设备新的尺寸层出不穷，定制的版本通常只适用于某些规格的设备，如果新的设备分辨率变化较大，则往往不能兼容，而开发新的版本需要时间，这段时间内的访问就是个问题，但响应式设计可提前预防 响应式设计是针对页面的，可以只对必要的页面进行改动，其他页面不受影响 开发/维护/运营成本优势 兼容性优势 操作灵活优势 响应式Web设计 Responsive Web Design UI设计师 前端开发工程师 响应式Web设计 Responsive Web Design 尺寸确定 线框原型 测试线框原型 视觉设计 前端实现 通过用户研究，了解用户使用的设备分布情况，确定需要兼容的设备类型、屏幕尺寸。 设备类型：包括移动设备（手机/平板）和PC。对于移动设备，设计和实现的时候注意增加手势的功能。 屏幕尺寸：包括各种手机屏幕的尺寸（包括横屏/竖屏）、各种平板的尺寸（包括横屏/竖屏）、普通电脑屏幕和宽屏。 针对确定下来的几个尺寸分别制作不同的线框原型，需要考虑清楚不同尺寸下，页面的布局如何变化，内容尺寸如何缩放，功能、内容的删减，甚至针对特殊的环境作特殊化的设计等。这个过程需要设计师和前端开发人员保持密切的沟通。 将图片导入到相应的设备进行一些简单的测试，可帮助我们尽早发现可访问性、可读性等方面存在的问题。 完成美化式设计 移动设备的屏幕像素密度与传统电脑屏幕不一样，在设计的时候需要保证内容文字的可读性、控件可点击区域的面积等。 与传统的web开发相比，响应式设计的页面由于页面布局、内容尺寸发生了变化，所以最终的产出更有可能与设计稿出入较大，需要前端开发人员和设计师多沟通。 From：AliUED 对UI/前端有兴趣 潜心研究 来看Html5 你认识Html，但不一定认识Html5 拿出手机，打开微信，点开扫一扫 模拟电话场景 电话场景的逼真，结合当时的热门话题复仇者联盟2“ 标题这个陌生来电你敢接吗，吊足好奇心 王祖蓝，古巨基、叶世荣、井柏然、刘若英、郭采洁、韩庚等这么多明星跟自己聊天，这种受欢迎程度实在是忍不住要截图发个朋友圈来装逼一下下， 凭什么会获得传播过百万，那就要看够不够本事让用户主动分享 互联网大厂招聘：射鸡狮、程序猿、市场运鹰、产品锦鲤，每选择一个职位即出现有趣的答题游戏，脑洞大开，要选出正确答案可不是一件容易的事情哦，可见互联网大厂对人才的要求真不是靠忽悠就能过去的 H5届的洗脑神曲 我们建个站，客户我们一起建个站“ 狗头形象太深刻，画风岂是一个帅字了得，配上酷炸了的一首梦幻H5 2015年夏天被吴亦凡给刷屏了 人们都说，这是H5的又一次创意！ 其实这不是“纯正的” Html5 使用的是HTML5的架构，就是经常在手机看到的可以全屏滑动效果的交互，只是以前都是静态的图片+文字的形式，这个是通过视频+H5交互的形式。整个内容是由2-3个视频素材组成，通过H5架构把这些视频素材衔接到一起。 其中最亮眼的微信视频通话，只是一个视频结束后，设置交互层，点击接通按钮直接播放下一个视频。 整个过程没有任何技术难点，只是每个视频衔接的地方需要前端技术依靠代码进行组合，对于一个了解H5的前端技术人员来说，不超过1天就可以完成整个效果。 PC端 整体效果是通过一个Flash实现，引导到最后扫描二维码进入手机端观看，只是抛砖引玉的作用。 移动端 人们口中的H5，到底是个啥？ Html 超文本标记语言 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素 HTML 4.0：1997年12月18日 HTML 4.01（微小改进）：1999年12月24日 HTML 5：2014年10月28日 人们口中的H5，就是Html的一个版本 什么是Html5？ 互联网上的核心语言——超文本标记语言的第五次重大修改 简单来