让H5页面适配移动设备全家~

1. 让H5页面适配移动设备全家
peunzhang 2015/7/2

2. • 如何选择视觉稿尺寸
• 3种响应式设计模式
• PSD稿与重构稿的小秘密
开启适配之路

3. 如何选择视觉稿尺寸

4. 设备名 分辨率 设备高宽比
iPhone6 1334*750 1 78/100
iPhone6 Plus 2208*1242 1 78/100
iPhone5 1136*640 1 78/100
iPhone4 960*640 1 50/100
android 1280*720 1 78/100
android 1920*1080 1 78/100
android 960*540 1 78/100
android 854*480 1 78/100
android 800*480 1 67/100
市场占比前9的移动设备(友盟指数)

5. 且分辨率基本是等比例缩放的
设备高宽比178：100的设备占据市场比例超过60%

6. 但为什么设计师们还是选择iPhone的分辨率为视觉稿尺寸？

7. 选择iPhone的可能原因
iPhone4高清分辨率的带动
用户有钱
性能高
设计资源多
别人都在用
页面体验好
用户高端
用户多

8. 选择iPhone哪个分辨率为基准

9. iPhone5占ios市场比例为46.6%
友盟指数

10. iPhone 5的视觉稿在比它高的分辨率设备下图片失真？
iPhone 5 iPhone 6P
肉眼很难看出它们的差异，对产品的体验几乎没有影响

11. 选择iPhone5的分辨率作为视觉稿尺寸
适配60%以上的移动设备

12. 一套尺寸真的够吗？

13. 案例 – 滑屏页面在iPhone 4 下的重要信息被隐藏

14. 案例 – 滑屏页面在横屏下页面显示错乱

15. 案例 – 页面不会随着设备分辨率的增加而放大

16. 3种响应式设计模式

17. 随着浏览器窗口放大而放大的猫
auto模式
保持页面的宽高比，调整页面的宽度，使页面宽度完全包含在浏览器窗口中

18. auto模式
真实案例 – 联通送话费

19. auto模式
 评分 ☆ ☆ ☆ ☆☆
 一套高清视觉稿能适配所有的移动设备

20. iPhone 6 iPhone 4Nokia lumia 520 模拟设备
保持页面的宽高比，调整页面的宽度或高度（较大者），使页面完全包含在设备窗口中
一张照片在不同手机相册中预览效果
contain模式

21. contain模式
真实案例 - 宝洁达人

22. contain模式
真实案例 - 神还原武媚娘被剪胸真相

23. contain模式
真实案例 - 京东的十大任性

24. contain模式
 推荐星数 ☆ ☆ ☆ ☆ ☆
 一套高清的视觉稿能适配所有的移动设备
 适合滑屏页面、单屏页面
 浏览器窗口可能出现空白，视觉稿背景使用纯色或可复制背景可解决此类问题

25. iPhone 6 iPhone 4
常见的手游界面
cover模式
保持页面的宽高比，调整页面的宽度或高度（较小者），使页面完全覆盖浏览器窗口

26. cover模式
真实案例 – 刻划锋芒

27. cover模式
真实案例 – 滴滴打车

28. cover模式
 推荐星数☆ ☆ ☆ ☆ ☆
 一套高清的视觉稿能适配所有的移动设备
 适合滑屏页面、单屏页面
 超出浏览器窗口的内容会被隐藏，视觉稿边缘无重要内容可使用此模式

29. PSD稿与重构稿的小秘密

30. retina显示屏
与传统PC相比，H5的视觉稿是PC的2倍
苹果的Retina Display
同样大小的屏幕上显示的像素点由1个变为4个

31. retina显示屏
H5页面元素的尺寸一般以视觉稿元素的尺寸除以2来计算
H5页面 PSD稿

32. retina显示屏
不可忽视的3.0时代，3倍的视觉稿？

33. 字体
微软雅黑的故事

34. 字体
H5页面一般使用设备的默认字体

35. 图片
图片变形记：奇数尺寸变偶数尺寸

36. 图片
视觉稿图片使用偶数尺寸更佳

37. 图层
“抠不了”的彩带
温馨提示：黄色彩带在H5中需要添加飞的动画

38. 图层
少用正片叠底等图层模式在单独元素中

39. 网速
使用wifi联网超过70%
android ios

40. 网速
尽情使用图片、音乐、视频吗
结合项目类型 面对的用户群

41. THX