移动界面设计的大小（更新）

UI新手对大小感到头痛，但这并不复杂. 关键是设计本身很难掌握. 以下设计规格是Tiger Brother选择的主要内容，并且对其进行了基本介绍.

有关更详细的规格，请访问“设计规格相册”:

让我们看一下各种iPhone的尺寸和分辨率. 这张照片很清晰.

设备名称屏幕尺寸PPIA设置垂直屏幕点（垂直）屏幕分辨率（像素）

iPhone X

5.8英寸

375 x 812

1125 x 2436

iPhone 8 +，7 +，6s +，6 +

5.5英寸

414 x 736

1242 x 2208

iPhone 8、7、6s，6

4.7英寸

375 x 667

750 x 1334

iPhone SE，5、5S，5C

4.0英寸

320 x 568

640 x 1136

iPhone 4、4S

3.5英寸

320 x 480

640 x 960

iPhone 1、3G，3GS

3.5英寸

320 x 480

320 x 480

iPad Pro 12.9

12.9英寸

1024 x 1366

2048 x 2732

iPad Pro 10.5

10.5英寸

834 x 1112

1668 x 2224

iPad Pro，iPad Air 2，Retina iPad

9.7英寸

768 x 1024

1536 x 2048

iPad Mini 4，iPad Mini 2

7.9英寸

768 x 1024

1536 x 2048

iPad 1、2

9.7英寸

768 x 1024

768 x 1024

最新设计指南推荐:

IOS11设计指南是针对iPhone X设计的超级全面的UI设计规范摘要（包括iPhone X改编版），iOS 11设计指南iOS 11设计值得关注UI设计细节“翻译”苹果公司的官方iPhone X手册-机器界面该指南教您如何从iOS 11改编iPhone X，以了解如何设计APP图标. IOS 11 vs 10: UI和交互的全面比较分析. 最新版本的IOS 11设计规范，官方源文件下载！ Facebook生成的iOS 10 GUI（iPhone）源文件

尽管Iphone X现在已经上市，但我们仍将按照750 * 1334进行设计. Tiger Brother总结了一种简化的设计过程方法. 根据这种方法，我们可以开始工作.

PS，SKetch（Mac计算机）和XD均可用于设计草图. 鉴于大多数人没有Mac计算机，因此许多设计师仍在使用PS. XD可能会出现在爆发之后，XD可以在win10系统上使用.

新建了750×1334，分辨率为72像素/英寸.

24px，26px，28px，30px，32px，34px，36px等. 请记住要均匀. 最小字体为20px.

Pin Fang Hei（中文）和San Francisco（英语），或者Helvetica（如果您不相处）.

下载应用程序使用的字体包（由Tiger Brother组织）

大小为750×1334 1pt = 2px的转换关系，也就是说，程序员以px为单位得到了我们标记的草稿，然后将其除以2为pt.

24px，32px，48px等，请记住4的倍数更好.

请注意，图标的大小应统一，并且用眼睛调整时的大小应相同. 正方形大于圆形，需要调整.

以偶数为单位，您可以使用具有大量屏幕截图的公司的APP界面作为参考.

750 x 1334设计草图尺寸:

状态栏高度: 40像素

导航栏高度: 88像素

标签栏的高度: 98像素

安装Ps镜可在iphone上实时观看效果.

PS Blue Lake插件下载>> SKetch插件下载>> Blue Lake移动预览APP下载>> Blue Lake自动同步网络磁盘团队>>一键注释工件-zeplin

其他注释工具:

Mark Eel PxCook像素厨师Parker选择@ 2x @ 3x与Cutterman一起导出.

大小为1024×1024，通常为正方形，没有圆角. 然后使用IconTemplate自动剪切一组图标资源并将其扔给程序员.

每个接口最好有一个文件夹. 该文件夹包括: 界面渲染，带注释的文件映射和切出的资源文件包.

值得注意的是，指南页面切割图需要单独设计（640×1136、750×1334、1125×2436、1242×2208）. 使用Cutterman剪几套图纸并不尴尬，这很尴尬.

文本流控制的灵活图片缩放

程序实现DEMO版本后，我们必须检查测试机上的接口问题，及时与程序进行通信并进行更改.

facebook生成的iOS 10 GUI（iPhone）源文件

了解三分钟内iPhone X的设计尺寸和移动界面设计的尺寸（淘宝版）iPhone6＆6 Plus视觉设计改编说明，适用于新手福利！超全面的UI设计裁剪规范UI适应策略·教程④具有双平台h5移动终端页面设计学习文档的草案Dribbble 2016十个设计趋势摘要图标设计的三个小原理新的设计趋势来了，对iOS 10设计的诠释有关UI设计字体和排版的详细而全面的指南

如果要使草稿适应ios，则创建一个新的720×1280分辨率，为72（像素/英寸）.

如果Android MD的新规格是单独设计的，则可以创建72像素/英寸的1080×1920新分辨率.

24px，26px，28px，30px，32px，34px，36px等. 请记住要均匀. 最小字体为20px.

Noto / Siyuan粗体字用中文（它是不同名称的字体），而Roboto用英文.

下载应用程序使用的字体包（由Tiger Brother组织）

距离单位为DP

文本单位是SP

720×1280大小的转换关系1dp = 2px，文本1sp = 2px也就是说，程序员得到了我们px单元的带注释的草稿，并将其自身除以2成为dp和sp.

1080×1920大小为1dp = 3px，文本1sp = 3px

24px，32px，48px等，请记住4的倍数更好.

请注意，图标的大小应统一，并且用眼睛调整时的大小应相同. 正方形大于圆形，需要调整.

移动界面设计的大小（淘宝版）

最新标准化MD的做法:

8dp原理网格系统的最小单位为8dp，所有距离和尺寸均应为8dp的整数倍.

常用方法:

直接复制ios设计草稿，但状态栏，导航栏和标签栏遵循Android.

720 x 1280设计草图尺寸:

状态栏高度: 50像素

导航栏高度: 96像素

标签栏的高度: 96像素

安装Ps Mirror可以在Android手机上实时观看效果.

Mark Eel PxCook Pixel Chef Parker标记了标记工件的钥匙-Zeplin geek iDoc

加标签时，如果设计为720×1280尺寸，请选择相应的xhdpi；如果设计为1080×1920移动设计规范，请选择相应的xxhdpi.

使用Cutterman选择以下内容，然后根据需要选择不同的导出分辨率.

主要是一些按钮，单色或半透明背景块. 该图标不需要执行9.

Android的尺寸为1024×1024，不需要图标样式. 您可以制作各种形状. 通常，没有圆角的正方形. 各种手机制造商的定制系统将自己添加圆角.

然后使用IconTemplate自动剪切一组图标资源并将其扔给程序员.

每个接口最好有一个文件夹. 该文件夹包括: 界面渲染，带注释的文件映射和切出的资源文件包.

值得注意的是，指南页面切割图需要单独设计（480×800、720×1280、1080×1920）. 用Cutterman剪几张图片并不尴尬，这很尴尬.

文本流控制的灵活图片缩放

程序实现DEMO版本后，我们必须检查测试机上的接口问题，及时与程序进行通信并进行更改.

解读Android 1080P界面设计规范6条提示，可帮助您将IOS UI转换为Android！ Material Design Android 5.1L（UI工具包下载！）每天高喊着学习UI，您知道Android与iOS之间的区别吗？ UI设计人员必须了解Android屏幕知识

最后说: “对于界面上的字体大小，如果间距不清楚移动设计规范，请拍摄更多屏幕截图，测量出色的APP界面，然后分析并查找规则. ”

虎哥整理.

2016年12月10日更新.

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