Android设备的界面适配设计
1个回答
展开全部
Android设备App设计中有一个问题可能会被设计师忽略，在各种分辨率各种尺寸“杂屏”的界面适配。可能产出的界面稿在常用的720*1280的分辨率中是完美，但一到各个不同分辨率不同尺寸的设备后
这里就谈谈适配，了解适配让设计从PS、sketch到移动设备上都能完美呈现。
如此繁杂的安卓设备，采用哪个标准设计呢？
1.选择一种尺寸一种分辨率作为基准。
2.选择2-3款主流的Android设备，制定一套适配规则。（国内主流设备、分辨率可参考友盟指数）
3.部分极端效果特别注释说明。
目前移动端设计师多采用iPhone 5与6的分辨率设计，这两个分辨率也最接近Android xhdpi的720*1280，设计之后再做等比适配（不做设计元素等比适配会导致Android设备上视觉呈现较小）。
我则倾向于选取720*1280的分辨率设计。优点是处于常用分辨率的中间值，对小分辨率大分辨率调整也较容易。另外iOS@1x的320与720刚好是2.25的倍率关系，使用sketch等比输出快捷多了。（如果时间成本允许的话可以将Android的标注单位用dp，具体的设备尺寸、分辨率知识这里不详描述，可见文章最后面的“Android基础知识”）
案例说明：
雅虎新闻为各个dpi做了优化，图片等比缩放，文字区域等比缩放，并且考虑到在低dpi下会被推移至第二屏，就减小图片了高度，保持文字区域最小高度。
老司机都不会忘记的，仅提醒下新手，每个图标记得输出多个比例。并且记得查看各个比例下图标的显示效果。
案例说明：
还是拿一个雅虎新闻的例子，大家感受下。
Android设备的系统各个厂商都做了定制化，默认的字体库可能不同，且字体占空间大小可能不同。不同设备显示文字会出现不同效果。设计时考虑3点：
多采用流式布局，不对单行做字数限制（如“单行显示多少个字”“文本宽度多少”），而是定义文本容器的高宽，超出则用“…”“渐隐”或者“遮挡”等方式省略。
若较长的文本需要完整显示，设计时预留换行空间。
若文本需要在单行完整显示（如提示类文字），尽量控制字数（建议16字内），避免小屏不够放置。
案例说明：
图文混排同一行显示时，图片等比固定在右侧显示，文字部分区域宽度会因设备不同出现较大的差异，预留文字多行高度。如下图不同设备下文字的展示空间有差异，需要考虑小分辨率下预留多行文字空间。如图2第二条新闻标题文字溢出的丑陋展示，建议设定一个文字区域最大高度，超出部分则隐藏。
单行出现多个文字元素时，注意元素在低dpi下的显示层级，提前说明好该情况的覆盖或者隐藏规则。如下图第一个用户名称，在低dpi下，避免各元素交错，而省略了超出的用户名称。
图片常用的方式有固定宽度dp等比缩放高度（用于非通栏图片）；固定高度dp等比缩放宽度（用于横向滚动图片，如全屏相册中的纵向图片）；根据屏幕宽度等比缩放（横向通栏图片）。设计时考虑3点：
注意图片占用的宽高比，避免大屏设备上占据大量空间，导致内容比例不协调同时降低了屏幕利用率。
考虑到设备屏幕密度不同，输出图片时别忘了输出多个分辨率。
考虑图片宽高比过大的缩略图处理（最常见的处理方式：高度远大于宽度时，是给出最大区域，让图片等宽居中填充该区域，只显示该区域；宽度远大于高度时，与展示区域等高居中取部分显示。当然也可能出现特殊显示要求，需要根据具体情况具体处理。）
案例说明：
网易游戏相册的全屏浏览中，大于设备宽高比的宽图按照最大宽度放置，小于设备宽高比的高度按照最大高度放置。
一行多张图片要考虑图片的在不同设备下等比缩放带来显示效果的差异。排列时会有两种情况：
1.要求在一行内显示完，根据图片的显示效果决定放置的数量，超过则不显示（如下图1第二条新闻）
2.流式布局，当图片宽度小于设定值时自动换行（如下图2相册展示，低dpi低分辨率设备一行显示3张，高的显示4-5张，且按比例撑满屏幕宽度）。
宽高比超出设计区域时的处理，如百度贴吧中列表的小图模式，给出了正方形区域，当图片非正方形时，根据宽高中的短边等比撑满正方形区域后，截取了图片居中的部分显示。
在固定区域内多元素混合放置时，文字一般采取流式布局，图片多采用等比缩放，图标元素多采用 弹性布局，即元素内容本身规格不变，考虑水平、垂直方向的间距做相应扩展。设备屏幕越大，在扩展方向上可以显示更多内容，发挥了大屏幕的优势。
弹性布局需要给出哪一个元素dp不变，哪一个元素缩放的策略。
弹性布局下部分距离标注采用百分比标注。
当有两个等比缩放元素时考虑避免重叠的情况。
案例说明：
网易游戏的新闻列表样式，每一条新闻区域，要求图片dp不变，而文字区域进行弹性缩放。
下图网易游戏专区中间的幽灵按钮图标为确保点按效果，按照固定dp显示，中间间隔的宽度按照设备宽度的百分比来确定
网易游戏求交往的界面，中间卡片区域大小根据设备等比缩放，如中间用户头像与“同喜欢2款游戏”的文字，在设计时需要考虑产品的目标设备中最小设备下的布局显示效果，避免出现重叠的情况。而纵向的元素数量也需要如此考虑。
Android界面适配的案例说明就写到这里啦。
设计时多考虑各个元素（图标、文本、图片、区域）在不同设备的情况。当然，做设计时也不是死板的按照建议来实现，特别是固定区域下的元素放置，根据实际情况来处理即可。
Android系统的UI也在不断进化完善，随着设计趋势的改变，Android除了常见的卡片、列表、浮层外，可能会有更多的展示方式，而Android设备也是逐渐淘汰ldpi与mdpi，设备的分辨率逐渐变大。也就要求我们需要不断的去了解尝试新的设计趋势，产出最好的方案。
这不是彩蛋哈，仅仅补充安卓设备的基础知识，老司机完全可以忽略，供新手参考阅读。
为展示设备的多样化，贴出Android屏幕尺寸示意图（蓝色矩形的大小代表不同尺寸，颜色深浅则代表所占百分比的大小。）
屏幕大小以屏幕尺寸来衡量，指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
目前的主流尺寸：5.0" ~ 5.5" (有继续往更大尺寸发展的趋势，但趋于稳定)
常见的设备尺寸： 4" ~ 10" 。
手机适配参考尺寸： 4" ~ 6"
手机 + 平板适配参考尺寸： 4" ~ 10”
屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素，如1960*1080。
屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。目前每个屏幕像素可以认为就是一个“点”。
屏幕 dpi 的计算方式:
Android 设备中 dpi 分几个段：
•ldpi：~ 120 dpi (几乎绝迹)
•mdpi：~ 160 dpi (罕见)
•hdpi：~ 240 dpi (逐渐减少中)
•xhdpi：~ 320 dpi
•xxhdpi：~ 480 dpi
•xxxhdpi：~ 640dpi (目前较少)
dp(与 dip 同义) 是在 160dpi 下每个像素对应的物理尺寸，可近似理解为:
•160 dp = 1 inch
•1 dp = 1 / 160 inch = 0.15875 mm
•1 dp = 1 px (160 dpi 屏幕下)
•1 dp = 2 px (320 dpi 屏幕下)
Android的屏幕适配指标都基于物理尺寸（即屏幕的物理大小），而非像素（分辨率）。为什么呢？这里根据dp与px适配出两种效果来说明。
按 dp 适配不同屏幕的效果如下，内容的物理尺寸变化不大:
若直接按照像素适配，出现以下情况，高像素密度的设备内容显得特别小，影响布局与可用性：
屏幕长边和短边的比例。
目前手持设备的 长边 dpi 和 短边 dpi 普遍非常接近，可认为屏幕比例和屏幕水平、垂直像素比例一致
屏幕比例目前趋于 16:9 ~ 16:10 (8:5)
因不少设备使用了虚拟按键，所以通常非全屏的 app 可用面积略低，屏幕比例更接近 16:10
这里就谈谈适配，了解适配让设计从PS、sketch到移动设备上都能完美呈现。
如此繁杂的安卓设备，采用哪个标准设计呢？
1.选择一种尺寸一种分辨率作为基准。
2.选择2-3款主流的Android设备，制定一套适配规则。（国内主流设备、分辨率可参考友盟指数）
3.部分极端效果特别注释说明。
目前移动端设计师多采用iPhone 5与6的分辨率设计，这两个分辨率也最接近Android xhdpi的720*1280，设计之后再做等比适配（不做设计元素等比适配会导致Android设备上视觉呈现较小）。
我则倾向于选取720*1280的分辨率设计。优点是处于常用分辨率的中间值，对小分辨率大分辨率调整也较容易。另外iOS@1x的320与720刚好是2.25的倍率关系，使用sketch等比输出快捷多了。（如果时间成本允许的话可以将Android的标注单位用dp，具体的设备尺寸、分辨率知识这里不详描述，可见文章最后面的“Android基础知识”）
案例说明：
雅虎新闻为各个dpi做了优化，图片等比缩放，文字区域等比缩放，并且考虑到在低dpi下会被推移至第二屏，就减小图片了高度，保持文字区域最小高度。
老司机都不会忘记的，仅提醒下新手，每个图标记得输出多个比例。并且记得查看各个比例下图标的显示效果。
案例说明：
还是拿一个雅虎新闻的例子，大家感受下。
Android设备的系统各个厂商都做了定制化，默认的字体库可能不同，且字体占空间大小可能不同。不同设备显示文字会出现不同效果。设计时考虑3点：
多采用流式布局，不对单行做字数限制（如“单行显示多少个字”“文本宽度多少”），而是定义文本容器的高宽，超出则用“…”“渐隐”或者“遮挡”等方式省略。
若较长的文本需要完整显示，设计时预留换行空间。
若文本需要在单行完整显示（如提示类文字），尽量控制字数（建议16字内），避免小屏不够放置。
案例说明：
图文混排同一行显示时，图片等比固定在右侧显示，文字部分区域宽度会因设备不同出现较大的差异，预留文字多行高度。如下图不同设备下文字的展示空间有差异，需要考虑小分辨率下预留多行文字空间。如图2第二条新闻标题文字溢出的丑陋展示，建议设定一个文字区域最大高度，超出部分则隐藏。
单行出现多个文字元素时，注意元素在低dpi下的显示层级，提前说明好该情况的覆盖或者隐藏规则。如下图第一个用户名称，在低dpi下，避免各元素交错，而省略了超出的用户名称。
图片常用的方式有固定宽度dp等比缩放高度（用于非通栏图片）；固定高度dp等比缩放宽度（用于横向滚动图片，如全屏相册中的纵向图片）；根据屏幕宽度等比缩放（横向通栏图片）。设计时考虑3点：
注意图片占用的宽高比，避免大屏设备上占据大量空间，导致内容比例不协调同时降低了屏幕利用率。
考虑到设备屏幕密度不同，输出图片时别忘了输出多个分辨率。
考虑图片宽高比过大的缩略图处理（最常见的处理方式：高度远大于宽度时，是给出最大区域，让图片等宽居中填充该区域，只显示该区域；宽度远大于高度时，与展示区域等高居中取部分显示。当然也可能出现特殊显示要求，需要根据具体情况具体处理。）
案例说明：
网易游戏相册的全屏浏览中，大于设备宽高比的宽图按照最大宽度放置，小于设备宽高比的高度按照最大高度放置。
一行多张图片要考虑图片的在不同设备下等比缩放带来显示效果的差异。排列时会有两种情况：
1.要求在一行内显示完，根据图片的显示效果决定放置的数量，超过则不显示（如下图1第二条新闻）
2.流式布局，当图片宽度小于设定值时自动换行（如下图2相册展示，低dpi低分辨率设备一行显示3张，高的显示4-5张，且按比例撑满屏幕宽度）。
宽高比超出设计区域时的处理，如百度贴吧中列表的小图模式，给出了正方形区域，当图片非正方形时，根据宽高中的短边等比撑满正方形区域后，截取了图片居中的部分显示。
在固定区域内多元素混合放置时，文字一般采取流式布局，图片多采用等比缩放，图标元素多采用 弹性布局，即元素内容本身规格不变，考虑水平、垂直方向的间距做相应扩展。设备屏幕越大，在扩展方向上可以显示更多内容，发挥了大屏幕的优势。
弹性布局需要给出哪一个元素dp不变，哪一个元素缩放的策略。
弹性布局下部分距离标注采用百分比标注。
当有两个等比缩放元素时考虑避免重叠的情况。
案例说明：
网易游戏的新闻列表样式，每一条新闻区域，要求图片dp不变，而文字区域进行弹性缩放。
下图网易游戏专区中间的幽灵按钮图标为确保点按效果，按照固定dp显示，中间间隔的宽度按照设备宽度的百分比来确定
网易游戏求交往的界面，中间卡片区域大小根据设备等比缩放，如中间用户头像与“同喜欢2款游戏”的文字，在设计时需要考虑产品的目标设备中最小设备下的布局显示效果，避免出现重叠的情况。而纵向的元素数量也需要如此考虑。
Android界面适配的案例说明就写到这里啦。
设计时多考虑各个元素（图标、文本、图片、区域）在不同设备的情况。当然，做设计时也不是死板的按照建议来实现，特别是固定区域下的元素放置，根据实际情况来处理即可。
Android系统的UI也在不断进化完善，随着设计趋势的改变，Android除了常见的卡片、列表、浮层外，可能会有更多的展示方式，而Android设备也是逐渐淘汰ldpi与mdpi，设备的分辨率逐渐变大。也就要求我们需要不断的去了解尝试新的设计趋势，产出最好的方案。
这不是彩蛋哈，仅仅补充安卓设备的基础知识，老司机完全可以忽略，供新手参考阅读。
为展示设备的多样化，贴出Android屏幕尺寸示意图（蓝色矩形的大小代表不同尺寸，颜色深浅则代表所占百分比的大小。）
屏幕大小以屏幕尺寸来衡量，指屏幕的对角线的长度，单位是英寸，1英寸=2.54厘米
目前的主流尺寸：5.0" ~ 5.5" (有继续往更大尺寸发展的趋势，但趋于稳定)
常见的设备尺寸： 4" ~ 10" 。
手机适配参考尺寸： 4" ~ 6"
手机 + 平板适配参考尺寸： 4" ~ 10”
屏幕分辨率是指在横纵向上的像素点数，单位是px，1px=1个像素点。一般以纵向像素*横向像素，如1960*1080。
屏幕像素密度是指每英寸上的像素点数，单位是dpi，即“dot per inch”的缩写。目前每个屏幕像素可以认为就是一个“点”。
屏幕 dpi 的计算方式:
Android 设备中 dpi 分几个段：
•ldpi：~ 120 dpi (几乎绝迹)
•mdpi：~ 160 dpi (罕见)
•hdpi：~ 240 dpi (逐渐减少中)
•xhdpi：~ 320 dpi
•xxhdpi：~ 480 dpi
•xxxhdpi：~ 640dpi (目前较少)
dp(与 dip 同义) 是在 160dpi 下每个像素对应的物理尺寸，可近似理解为:
•160 dp = 1 inch
•1 dp = 1 / 160 inch = 0.15875 mm
•1 dp = 1 px (160 dpi 屏幕下)
•1 dp = 2 px (320 dpi 屏幕下)
Android的屏幕适配指标都基于物理尺寸（即屏幕的物理大小），而非像素（分辨率）。为什么呢？这里根据dp与px适配出两种效果来说明。
按 dp 适配不同屏幕的效果如下，内容的物理尺寸变化不大:
若直接按照像素适配，出现以下情况，高像素密度的设备内容显得特别小，影响布局与可用性：
屏幕长边和短边的比例。
目前手持设备的 长边 dpi 和 短边 dpi 普遍非常接近，可认为屏幕比例和屏幕水平、垂直像素比例一致
屏幕比例目前趋于 16:9 ~ 16:10 (8:5)
因不少设备使用了虚拟按键，所以通常非全屏的 app 可用面积略低，屏幕比例更接近 16:10
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
