方寸指间——适配方案

　　适配缘由

　　不同尺寸的屏幕、横屏切换和硬件性能的差异，这些因素决定移动产品需要做好适配方案，这样才能够让app在多种手机平台上

　　完美的展示给用户

　　1、不同尺寸的屏幕：屏幕的尺寸五花八门，现在更是越做越大，显然一套设计稿没有办法满足所有的要求。这时若采用延伸、

　　　　缩放、调距、截取的方法，可以很好的适配屏幕尺寸

　　2、横屏竖屏切换：触摸屏都有横屏竖屏的切换功能，在适配方案上有延伸、模式转换、增加模块、锁定几种方式

　　3、硬件性能：手机因价格因素会在硬件性能上有较大的差距，主要体现在手机处理器的性能、触控的灵敏度等方面。设计师需

　　　　要对方案进行降级处理，以求在多种手机上达到最好的效果

　　

 

　　屏幕适配•延伸

　　屏幕宽度的变化要考虑自适应元素的延伸，以达到满屏内容的布局，也可以让一些隐藏的内容在大屏幕上显示的更加完整。例如

　　列表界面中标题的延伸，可以显示更完整的信息，也可以让界面布局更加完善。自适应元素通常包括文字、背景、文本框、按钮、

　　下拉框，这些都可以做延伸适配

　　

 

　　屏幕适配•缩放

　　缩放的适配方案主要针对图片和以图片为主的整体界面，通常是等比例缩放。出于对品质的考虑，在不同的尺寸的屏幕上可以获

　　取不一样的图片资源，以保证放大后图片的清晰度

　　

　　屏幕适配•调距

　　一些图标或图片不适合拉伸，随着屏幕宽度的改变，可适当调整元素的间距。当超过一定的间距限度时候，可以用延伸的手法

　　，将下一行的元素上提，提高整体界面的利用率。这种适配方案比较节省资源，不需要多套资源的备份。在垂直高度上，有时

　　候追求满屏的设计，调整元素间距也是一种简单的适配方法

　　

 

　　屏幕适配•截取

　　如果界面上的元素只有首屏，不能够上下滑动。在适配更短的屏幕的时候，可以使用截取部分图片的方式，让内容仍然满足一

　　个屏幕的要求。图片可以上下截取，也可以左右截取，留下最主要的部分。一般截取的元素主要针对图片和文字，文字过多的

　　时候可以直接截取，保留 “..........” , 已告知用户还有更多的内容

　　

 

　　适配屏幕•闪屏考虑

　　通常启动页闪屏的适配设计，主要有纯色背景和大图截取两种方式

　　1、纯色背景：图拍按照一定的规则在中间区域显示，背景用纯色，这样在不同的尺寸的屏幕下只需要将边缘纯色延伸就可以

　　　　满足适配需求

　　2、大图截取：当背景不是纯色时考虑做一张大图，这张大图尺寸要能够覆盖主要机型。然后采用截取的方式来适配屏幕

　　

 

　　横竖屏切换•宽高的变化

　　智能手机内置的重力感应器让我们只要简单的旋转屏幕就能够实现横屏竖屏的转换。从竖屏到横屏，屏幕的宽度增加，高度

　　减少，在更宽的界面上，可以使用延伸适配。还有一些场景，比如看小说，用户横屏的目的可能是看到更大的字体，这时候

　　要考虑缩放适配。在更短的界面上，要考虑点击元素是否能够完整的显示

　　

 

　　横竖屏切换•模式转换

　　模式转换是将将原有的界面变成另外一种全新的模式来适配场景的需要。这种转换有时可能带来意想不到的效果，让

　　用户应印象深刻。例如，下厨房应用在横屏时立即切换到简易的卡片模式，用更大的字体和配图，让你可以一边烧菜

　　一边浏览菜谱，更好的满足了用户的场景需求

　　

 

　　横竖屏切换•增加模块

　　切换到横屏之后，横向上就有可能非常的空间。根据场景的需要，可以考虑增减模块来提升使用效率。通常增加的模块

　　元素是导航。在邮件列表中，横向时直接显示列表和内容详情，可以让用户更快的浏览邮件内容。此外，这种设计也有

　　利于双手操作

　　

 

　　横竖屏切换•锁定

　　即设定不能够横屏，锁定为竖屏

　　

　　性能适配•降级处理

　　这是由于各种不同的手机的CPU处理和触屏灵敏度不同，应该做到层层降级，保证在不同的设备上能够正常的运行