移动应用程序界面设计的大小设置和规格

1，Android分辨率

Android的多分辨率一直是设计师和开发人员的头疼问题. 尽管如此，我们必须优先解决由多分辨率引起的复杂问题. Android支持许多不同的dpi模式: ldpi，mdpi，hdpi，xhdpi，xxhdpi，xxxhdpi

请注意，ppi和dpi是密度单位，而不是测量单位:

* ppi（每英寸像素数）: 图像分辨率（在图像中，每英寸像素数）

* dpi（每英寸点数）: 打印分辨率（每英寸可以打印的点数，即打印精度）

dpi主要用于输出，重点是打印设备； ppi应该是设计师所熟悉的，Photoshop canvas的分辨率通常设置为72像素/英寸，此单位实际上是ppi. 尽管概念不同，但是对于移动设备的显示屏，可以将其视为ppi = dpi.

ppi的计算方法为: PPI =√（长像素²+宽像素²）/屏幕的对角英寸. 即: 长与宽的平方和的平方除以屏幕对角线的英寸数.

以iphone5为例，其ppi =√（1136px²+640px²）/ 4 in = 326ppi（视网膜视网膜屏幕）

对于android手机，不精确的划分是720 x 1280手机可能接近320 dpi（xhdpi模式），480 x 800手机可能接近240 dpi（hdpi模式）和320 x 480手机非常接近160 dpi（mdpi模式）.

2014年3月的友盟（）指数数据:

480 x 800手机最多占31.9％，720 x 1280手机占总数的16.5％，240 x 320手机至少占1.0％. xxdhpi模式下的高分辨率1080 x 1920手机的比例也在增加，目前为6.1％.

2. 单位换算方法

在Android开发中，文本大小的单位是sp，非文本大小的单位是dp，但是我们在设计草案中使用的单位是px. 如何转换这些单位是设计人员和开发人员理解的关键.

* dp: 与密度无关的像素，以160PPI屏幕为标准，然后1dp = 1px. dp和px的转换公式: dp * ppi / 160 = px. 对于320ppi的屏幕，1dp x 320ppi / 160 = 2px.

* sp: 独立于比例尺的像素，是Android的字体单位，当字体大小为100％，1sp = 1px时，以160PPI屏幕为标准. sp和px之间的转换公式: sp * ppi / 160 = px. 对于320ppi屏幕，1sp x 320ppi / 160 = 2px.

简单地说，我们的UI设计人员在PS中使用px（像素），并且也将其显示在手机屏幕上. dp是开发版面时使用的尺寸单位.

为什么用px替换sp和dp？原因是它们不会因为ppi的改变而改变. 在相同的物理尺寸和不同的ppi下，它们呈现的高度是相同的. 换句话说，它更接近物理表示，但px则不然.

根据单位转换方法，我们可以总结:

以mdpi运行时，1dp = 1px: 也就是说，设计人员在PS中定义了一个高度为48px的项目，开发人员将定义一个高度为48dp的项目；

以hdpi模式运行时，1dp = 1.5px: 也就是说，设计人员在PS中定义了一个高度为72px的项目，而开发人员将定义一个高度为48dp的项目；

以xhdpi模式运行时，1dp = 2px: 换句话说，设计人员在PS中定义了一个高度为96px的项目，而开发人员将定义一个高度为48dp的项目；

当您的应用需要适应多种dpi模式时，请参考图1的比例进行转换.

3. 设计草案基本要素的大小设置

为了适应多分辨率手机，理想的方法是为每种分辨率制作一组设计草图，包括所用的图标，设计草图注释等. 但是在实际开发中，这种方法很费时间. 耗费人力. 所以通常选择折衷方法.

方法一: 以标准方式（例如xhdpi）开始，然后放大或缩小以适合其他尺寸. 缺点是，对于更高分辨率的手机，放大图标后图标会被放大，从而导致质量降低.

方法2: 基于最高分辨率进行设计，然后缩小以适合所需的小分辨率. 缺点是，如果图标全部都是最大的，它们加载速度很慢并且消耗大量流量，并且对于分辨率较低的用户来说还不够好.

结合Youmeng的分辨率比例数据，为方便在Android开发中转换为尺寸单位，建议设计稿的画布尺寸为720X1280，分辨率仍为72ppi（像素/英寸） ）.

在Android规范中，对于导航栏，工具栏等的大小没有明确的规则. 但是，根据48dp原理和一些主流android应用程序的屏幕截图分析，总结了大小要求:

状态栏高度: 50像素

导航栏和操作栏的高度: 96 px = 48dp x 2

主菜单栏高度: 96像素

内容区域高度: 1038像素（1280-50-96-96 = 1038）

最近，Android手机几乎移除了物理键，将功能键移到了屏幕上，并且高度与菜单栏相同: 96像素

4. 图标和字体大小（来自官方规格文件）

a. 开始图标（主页或应用列表页面）

整体尺寸为48 x 48 dp

b. 操作栏图标代表用户可以在应用程序中使用的最重要的图标

整体尺寸为32 x 32 dp，图形的实际面积为24 x 24 dp

c，小图标/场景图标，提供操作或特定项目的状态.

例如，gmail应用程序的星标，用于扩展和折叠某些内容的向下和向上图标等. 整体大小为16 x 16 dp，图形的实际面积为12 x 12 dp.

d. 通知图标

如果应用有通知，请提供一个通知图标，当有新通知时，该图标会显示在状态栏中. 整体大小为24 x 24 dp，图形的实际面积为22 x 22 dp.

注意: Android规范提供的尺寸单位是dp. 如果设计草图尺寸设置为720 x 1280，则图标尺寸需要乘以规范要求的尺寸编号中的2. 例如，操作栏图标为32 x 32 dp，设计草稿应为64 x 64 px.

e，字体大小

Android规范中的要求如下:

如前所述，Android开发中字体大小的单位为sp，转换关系为sp * ppi / 160 = px. 因此，在720 x 1280大小的设计草图中，字体大小可以选择为24px，28px，32px移动设计规范，36px，主要根据文本的重要性进行选择. 在特殊情况下，可以选择更大或更小的字体.

f，其他尺寸要求

48dp通常用作可触摸UI组件的标准.

为什么要使用48dp？通常，将48dp转换为大约9毫米的物理尺寸. 通常建议目标大小为7-10毫米，以便用户的手指可以准确舒适地触摸目标区域.

如果您设计的高度和宽度至少为48dp的元素移动设计规范，则可以保证:

（1）不管显示在什么屏幕上，触摸目标都不会小于建议的最小目标（7毫米）.

（2）在总体信息密度和触摸目标的尺寸之间取得了很好的平衡.

此外，每个UI元素之间的间距通常为8dp.

5. 一个讨论的小问题

在720 x 1280像素的设计草图上，有两个按钮（例如登录，注册）并排放置，大小为320 x 80像素，转换为android开发单位为160 x 40 dp.

根据以前的计算方法，如果将其显示在480 x 800手机上，则转换为px的大小为240 x 60 px. 此时，两个按钮排成一行，正好是480px =屏幕的水平尺寸. 在整行之后，显示效果显然不合适.

如果发生这种情况，我该怎么办？请教android开发工程师，答案是可能需要进行自适应处理，但是目前他们正在编写固定的dp值. 因此，我认为设计人员是否还需要考虑-是否可以在其他分辨率下优雅地显示基本分辨率下设置的尺寸转换？

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-260217-1.html