首页 > 视觉设计 > 移动端H5适配的几个概念与建议

近两年,移动大潮席卷全球,H5发展和推广的速度着实令人咋舌。映射到设计领域,越来越多的设计师开始接触移动端项目,但对于移动端硬件的基础概念仍存模糊,面对越来越多的硬件尺寸,该如何有效适配?以及H5应用在设计中应该注意些什么?带着这些疑问,本篇文章将结合搜集的多种资料和工作中的摸索,来尝试给出一些可以遵循的简易法则,希望能给移动端新手设计师些许指引。

 

一. 几个基础概念与原理

1.分辨率:

1

图注:现实世界中的分辨率

先来看上面这张图,对比其中A、B的效果可以看出,在西瓜单位面积不变的情况下,即使增加整体面积与单位西瓜数量,对于画面的精细程度并没有提升。再对比B与C,在相等的整体面积情况下,把西瓜换为橙子,缩小单位面积并增加单位数量,对整体的画面精细程度确有很大改善。这个现象说明了什么呢?其实这里面涉及到一个分辨率的概念。

分辨率:也叫解析度、解析力、解像力。分辨率决定了位图图像细节的精细程度。结合到上面的实例中,其实就是因为在固定面积中提升单位面积的数量,也就是提升了分辨率,最后造成视觉细腻的结果。所以说,研究分辨率这个概念,对我们视觉设计工作有很大意义。让我们来多了解一些关于分辨率的知识。

分辨率主要包含两方面概念,分别是显示分辨率和图像分辨率。

a. 显示分辨率:是指显示器能显示的像素的多少。比如我们常说的1920px*1200px、1024px*768px等等,是一项评估显示器硬件的物理指标。

b. 图像分辨率:是指单位英寸包含的像素点数,更趋于分辨率本身的概念。在不同应用领域,又包括DPI和PPI等说法。

2

图注:对比DPI与PPI

很显然,在我们日常移动端设计中,PPI的概念与我们联系更为紧密。接下来我们看一下PPI对实际生活的意义:

对电脑显示器硬件:非视网膜屏幕电脑屏幕分辨率为72PPI-120PPI之间,使用72-120之间的PPI进行设计基本可以保证作品尺寸在大多数情况下看起来差不多。

对手机显示器硬件:手机屏幕距离眼睛10-12英寸(约25-30厘米)时,它的分辨率只要达到300PPI(每英寸300个像素点)以上,人类的视网膜就无法分辨出像素点了,这也就是传说中的“视网膜屏幕”,这种技术具备超高的像素密度,因此屏幕显示异常清晰,锐利。

2.3P

3P是指PT、DP、SP,是用来定义应用在不同设备、不同DPI下的标准单位,俗称像点。 在IOS开发中,像点单位是PT,在android开发中,文字大小的单位是SP,非文字的尺寸单位用DP,而我们在日常设计稿中所用的单位是PX。

3

简单理解的话,PX(像素)是我们UI设计师在Photoshop里使用的,同时也是手机屏幕上所显示的,像点是工程师开发写layout的时候使用的尺寸单位。

为什么用3P概念代替PX? 原因是他们不会因为PPI的变化而变化,在相同物理尺寸和不同PPI下,他们呈现的高度大小相同。也就是说更接近物理呈现,而PX则不行。

4

图注:英寸、像点、像素之间的关系

这3种单位如何换算,是设计师、开发者需要了解的关键。 特别是像点与像素之间的缩放比,这个倍率关系到设计与开发能否顺利开展,是设计师更应该学习的一个概念。

5

图注:像点与像素的关系和缩放比

不同的手机硬件设备,像点与像素的缩放比也不尽相同,如早期iphone3GS缩放比为1:1,而发展到如今的iphone6 plus,缩放比则高达1:3,所以,了解不同设备的缩放比,我们才能对如何预设画布,如何适配机型有概念。

6

图注:几代iphone终端参数对比

了解像点与像素的缩放比,我们就拿到了移动适配的一把钥匙,可以说是工程师与设计师进行交流的一个中转概念。

 

二. 移动端H5适配流程

由于手机生产商越来越多,不同手机的硬件尺寸又不尽相同,这就给我们的设计适配造成很大困扰。但我们可以围绕从基准分辨率设计,上下进行兼容适配的原则来进行快捷操作。以IOS阵营为例:

7

图注:移动适配流程

1. 将iphone6分辨率作为基准分辨率,以750px*1334px进行设计,设计定稿后在750px的设计稿上做标注,输出标注图。同时等比放大1.5倍生成宽度1125px的设计稿,在1125px的稿子里切图。

2. 输出两个交付物给开发工程师:一个是程序用到的@3x切图资源,另一个是宽度750px的设计标注图。

3. 开发工程师拿到750px标注图和@3x切图资源,完成iPhone 6(375pt)的界面开发。此阶段不能用固定宽度的方式开发界面,得用自动布局(auto layout),方便后续适配到其它尺寸。

4. 适配调试阶段,基于iPhone 6的界面效果,分别向上向下调试iPhone 6 plus(414pt)和iPhone 5S及以下(320pt)的界面效果。由此完成大中小三屏适配。

 

三. 移动端H5的局限于建议

虽然移动端H5应用越来越受追捧,但由于其本身的技术限制和网络环境等因素,也会带来很多困扰和问题。总结下来,主要以以下几点:

1. 网络环境

问题:H5对网络环境的依赖性较大,当网络缓慢时,会出现不流畅,断断续续的不良感受。同时,H5技术自身渲染性能较弱:对复杂的图形样式,多样的动效,自定义字体等的支持性不强。

建议:

•  简化不重要的动画。

•  简化复杂图形文字样式。

•  减少页面渲染的频率和次数。

•  增强Loading时的趣味性等。

2. 浏览器

问题:H5应用的宿主通常是浏览器。不同的浏览器自身的属性不尽相同,如:浏览器自带的手势,页面切换方式,链接跳转方式,版本兼容问题等等。

建议:

•  减少手势避免与浏览器手势冲突。

•  减少页面跳转次数,尽量在本页显示。

3. 系统限制

问题:H5应用无法调用系统级别的权限。例如,系统级别的弹窗,系统级别的通知,通讯录,语音等等。且与系统的兼容性也会存在一些问题

建议:

多利用H5本身的技术优势,如重力感应、摇一摇等。

 

浏览:0 喜爱:
分享到: