手机页面和安卓设计规范.pdf

本文整理汇总了一些界面设计（ iOS 系统）中常用的一些尺寸规范和方法，如控件间距、 适配、标注、切图等，设计师在设计时并不一定要严格遵守，但对这些规范应有所了 解，并融会贯通。 目录 o 界面设计尺寸及栏高度 o 边距和间距 o 内容布局 o 界面图片设计比例 o 建立统一风格的图标 o APP 版式设计规范 o 界面文字设计规范 o 设计适配 o 切图规范 o 设计稿标注 一、界面设计尺寸及栏高度 目前主流的 iOS 设备主要有 iPhone SE （4 英寸）、 iPhone 6s/7/8 （4.7 英寸）、 iPhone 6s/7/8 Plus （5.5 英寸）、 iPhone X （5.8 英寸），它们都采用了 Retina 视网膜 屏幕，其中 iPhone 6s/7/8 Plus 和 iPhone X 采用的是 3 倍率的分辨率，其他都是采用 的 2 倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小， 前者始终是后者的 1.5 倍，并分别以 @3x 和 @2x 在文件名结尾命名，程序再根据不同分 辨率自动加载 @3x 或者 @2x 的切片。 通过上面的讲解和图示我们了解了 iPhone 不同设备的物理尺寸，那么他们的像素分辨 率又是多少呢？也就是说我们用 Photoshop 做设计新建画布应该设置多大呢？另外， iOS 应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少 呢？（注意： iOS 严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图 示来为你解答上面的问题。 1 / 74 注意：在进行 iphone x 设计的时候我们依然可以采用熟悉的 iphone 7 的设计尺寸作为 模板，只是高度增加了 290px ，设计尺寸为 750*1624 （@2x ）。注意状态栏的高度由原 来的 40px 变成了 88px ，另外底部要预留 68px 的主页指示器的位置。 2 / 74 3 / 74 二、边距和间距 在移动端页面的设计中，页面中元素的边距和间距的设计规范是非常重要的，一个页面 是否美观、简洁、是否通透和边距间距的设计规范紧密相连，所以说我们有必要对它们 进行了解。 1. 全局边距 全局边距是指页面内容到屏幕边缘的距离，整个应用的界面都应该以此来进行规范，以 达到页面整体视觉效果的统一。全局边距的设置可以更好的引导用户竖向向下阅读。 在实际应用中应该根据不同的产品气质采用不同的边距，让边距成为界面的一种设计语 言，常用的全局边距有 32px 、30px 、24px 、20px 等等，当然除了这些还有更大或者更 小的边距，但上面说到的这些是最常用的，而且有一个特点就是数值全是偶数。 以 iOS 原生态页面为例，「设置」页面和「通用」页面都是使用的 30px 的边距。 再以微信和支付宝为例，他们的边距分别是 20px 和 24px 。 4 / 74 通常左右边距最小为 20px ，这样的距离可以展示更多的内容，不建议比 20 还小，否则 就会使界面内容过于拥挤，给用户的浏览带来视觉负担。 30px 是非常舒服的距离，是绝 大多数应用的首选边距。 还有一种是不留边距，通常被应用在卡片式布局中图片通栏显示，比如站酷 APP （当然 站酷 APP 也进行了改版，首页已