APPUI设计规范

IOS AndroidAPPUI设计规范 iOS篇 点击添加文本 点击添加文本 点击添加文本 点击添加文本 iOS界面尺寸 ppi pixelsperinch 即每英寸像素 也叫像素密度 图标尺寸 Iphone6图例 状态栏规范 用户依赖于状态栏的重要信息 如信号 时间和电池 文本和图标可以是白色或黑色 但背景可以被设计成任何颜色 并与导航栏合并 pt point 是印刷业上长使用的单位 磅的意思 是一种固定的长度单位 可以用测量设备测量的单位 pt px 3 41pt 1 72英寸 导航栏规范 导航栏是用于屏幕的快速信息 左边部分可用于配置文件 菜单按钮 而右边的部分是一般用于动作按钮 如添加 编辑 完成 请注意 如果您使用这些系统图标 您不需要为它们单独设计 搜索栏 工具栏 Stepper控件 提示框 提示对话框是用于输送关键信息和提示快速操作 提示应保持最少文字 退出一定是明显 分段控制框 滑块 开关 布局标准控件 布局原理 8px原理由来 由于ios技术开发是以320 x640px为标准开发的 所以此设定尺寸为1 算出各个尺寸的比例 然后乘以4 各个尺寸都能满足是整数 可以保证开发时不会模糊 2px 视网膜屏的到来 切图设计稿尺寸是640 x960px 所以设计时最小的单位尺寸是8px 使用8px原理的目的保证在双平台上大部分机型开发中不会出现模糊的变形的问题 而且只需设计一套设计稿 减少设计师的工作量 提高工作效率 ios1334x750pxIphone6 6s 点击添加文本 点击添加文本 点击添加文本 点击添加文本 图标网络 Apple使用黄金分割在它们的一些图标上 这让图标保持良好的比例 同时确保了美感 虽然这是一个很好的规范 但它不是严格要求 甚至Apple在很多图标上也省略了它 点击添加文本 点击添加文本 点击添加文本 点击添加文本 标准色 点击添加文本 点击添加文本 点击添加文本 点击添加文本 字体大小 规格 一般的规范是按钮用44pt 小文字用12pt 正文文本用17pt和标题用20pt IOS9中文字体 苹方 PingFangSCIOS8中文字体 常州华文的黑体 简 在macosx系统中选择黑体 简IOS英文 数字 Helvetial 点击添加文本 点击添加文本 点击添加文本 点击添加文本 间距和对齐方式 一般的规范最低要求8pt空白或边距 这将有足够留白空间 使得布局更容易扫描和文本更具可读性 而且在此基础上 UI元素应对齐 文本应该有相同的基线位置 点击添加文本 点击添加文本 点击添加文本 点击添加文本 Android篇 点击添加文本 点击添加文本 点击添加文本 点击添加文本 Android界面尺寸 点击添加文本 点击添加文本 点击添加文本 点击添加文本 界面尺寸 1280 x720px 状态栏高度 50px导航栏高度 96px标签栏高度 96pxAndroid最近出的手机都几乎去掉了实体键 把功能键移到了屏幕中 当然高度也是和标签栏一样的 96px内容区域高度为 1038px 1280 50 96 96 1038 常用尺寸 一般把48dp作为可触碰UI原件的标准 48dp 72px 9mm 这是一个用户手指能够准确舒适触碰的最小尺寸 Android界面默认list的高度是 48dp 72px Android界面每个元素之间最小的间距是 8dp 12px Android界面默认btn的高度是 40dp 60pxpx ppi 160 dp 常用屏幕尺寸 240 x320ldpi 低等屏幕 320 x480mdpi 中等屏幕 480 x800hdpi 高清屏幕 720 x1280 xhdpi 超高清屏幕 相应的图片资源尺寸的比例关系为1 1 5 2也就是第一套图为mdpi的资源图片 hdpi可调整到150 xhdpi可调整到200 点击添加文本 点击添加文本 点击添加文本 点击添加文本 双击添加标题文字 字体规范 大小 5 X版本 思源黑体 NotoSansHan5 0以下版本 DroidSansFallback 可用文泉驿微米黑代替英文 数字 Roboto标题 58px或60px 二级标题 44px或48px 正文字体 32px或36px 英文最小字号22px 中文最小字号 SP与DP介绍 dp deviceindependentpixels 设备独立像素 sp scaledpixels 放大像素 主要用于字体显示bestfortextsize 由此 根据google的建议 TextView的字号最好使用sp做单位 而且查看TextView的源码可知Android默认使用sp作为字号单位 sp和dp一样 是android开发里特有的单位 设计师在做UI设计的时候通常最初是建立320 480这个尺寸的画布开始的 这个尺寸的画布在android分辨率的分类中称为mdpi 在这个尺寸下 ps里的1px就等于android中的1dp 同样 这个时候1点的字就等于android中1sp 举个例子 你建立画布的尺寸是320 480 里面的文字是30点 那么它就是30sp 一般android设置长度和宽度多用dp 设置字体大小多用sp 在屏幕密度为160 1dp 1px 当屏幕密度为240时 1dp 1 5px 48DP定律 48dp作为安卓可触摸的UI元件的标准 一般来说 48dp转化为一个物理尺寸约9毫米 建议的目标大小为7 10毫米的范围 这是一个用户手指能