状态栏:24dp
APPBAR（导航栏）最小高度:56dp
菜单栏高度（包含底部）:48dp
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
a、启动图标（home页或app列表页）整体大小为48 x 48 dp 没有空白的区域的7”完整图标。 当然也可以是包含空白区域的图标等于48dp。
b、 *** 作栏图标，代表用户在app中可以使用到的最重要的图标整体大小为32 x 32 dp ，图形实际区域为 24 x 24 dp。
c、小图标/场景图标，提供 *** 作或特定项目的状态。
比如gmail app的星型标记、一些内容展开收起用到的向下向上的图标等。整体大小为16 x 16 dp ，图形实际区域为 12 x 12 dp 。
d、通知图标
如果app有通知，要提供一个有新通知时显示在状态栏的通知图标。整体大小为24 x 24 dp ，图形实际区域为 22 x 22 dp 。
对图标尺寸进行分类整理，便于界面整体调一致。
第三部分、android的按钮和d出层的设计规范参考。
在720 x 1280 px 的设计稿上，有两个按钮（比如登录、注册）并排一行放置，按钮尺寸最小范围均为240 x 80 px ，换算为android开发单位就是 120 x 40 dp 。
Android APP设计字体单位： Sp 与 Px 的换算
sp与px的换算公式：sp*ppi/160 = px
ldpi（240*320）:120
mdpi（320*480）:160 倍率为1
hdpi（480*800）:240
xhdpi（720*1080）:320
xxhdpi（1080*1920）:480
xxxhdpi:640（1440*2560）:4
字体规范
注释最小字体12sp
文本字体14sp
文章标题/图标名称18sp
导航标题22sp
ppi为240时字体高度:
注释最小字体:18sp
文本:21sp
文章标题/图标名称:27sp
导航标题:42sp
字体:
Android 系统默认的英文字体 Roboto，默认中文字体都是droid sans fallback、思源黑体
material design字体规范:英文字体使用Roboto，中文字体使用Noto。
Roboto有6种字重：Thin、Light、Regular、Medium、Bold 和 Black。
Noto有7种字重：Thin, Light、DemiLight、Regular、Medium、Bold 和 Black。
字体配色:
颜色不宜过多，选择一种主色、一种辅助色。在此基础上进行明度和饱和度的变化，构成配色方案。
appbar背景使用主色，状态栏背景使用深一级的主色或20％透明度的纯黑。
小面积需要高亮显示的地方使用辅助色
其余颜色通过纯黑#000000与纯白#ffffff的透明度变化来展现（包括图标和分隔线），而且透明度限定了几个值。
黑色：[87% 普通文字] [54% 减淡文字] [26% 禁用状态/提示文字] [12% 分隔线]
白色：[100% 普通文字] [70% 减淡文字] [30% 禁用状态/提示文字] [12% 分隔线]
行距
用sp与px之间的关系进行换算。
元素之间间距间距:
所有可 *** 作元素最小点击区域尺寸：48dp X 48dp。
栅格系统的最小单位是8dp，一距离、尺寸都应该是8dp的整数倍。以下是一些常见的尺寸与距离：
顶部状态栏高度：24dp
Appbar（导航栏）最小高度：56dp
底部导航栏高度：48dp
悬浮按钮尺寸：56x56dp/40x40dp
用户头像尺寸：64x64dp/40x40dp
小图标点击区域：48x48dp
侧边抽屉到屏幕右边的距离：56dp
卡片间距：8dp
分隔线上下留白：8dp
大多元素的留白距离：16dp
屏幕左右对齐基线：16dp
文字左侧对齐基线：72dp
另外注意56dp这个数字，许多尺寸可变的控件，比如对话框、菜单等，宽度都可以按56的整数倍来设计。
还有非常多规范，不详细列举，遵循8dp栅格很容易找到适合的尺寸与距离。平板与PC上留白更多，距离与尺寸要相应增大。
单行、多行间距要控制下，做出规律。
标题42点（14sp） 副标题36点（12sp）
主标题与副标题间距12sp
注释:多行主标题行间距为8sp
标题48点（16sp） 副标题42点（14sp）
主标题与副标题（单行）间距8sp
标题42点（16sp） 副标题42点（14sp）
主标题与副标题（单行）间距10sp
带分割线的列表上下间距等分，距离为16sp
不带分割线的列表上下间距为32sp。
解释说明类的列表项上下间距为22sp。
悬浮按钮距离底部的距离为:18sp
文字排版
常用字号：
。12sp 小字提示14sp（桌面端13sp）
。正文/按钮文字16sp（桌面端15sp）
。小标题20sp Appbar文字24sp
。大标题34sp/45sp/56sp/112sp 超大号文字
长篇幅正文，每行建议60字符（英文）左右。短文本，建议每行30字符（英文）左右。
心得与体会:设计时，可参照设计规范进行设计，具体到项目时可根据项目的具体情况制定规范。
尝试8的倍数，如果不合适，在3的倍率中能够被3整除。
设计来源于细节，再小的细节中也要分等级。
ps cc 2017
adobe xd 交互设计神器。
adobe stock?
svg格式字体
.9图片最小点击区域不足48dp*48dp
OriginOS基于安卓系统，是一套基于安卓系统进行深度定制的系统，支持安卓应用。未来将会支持大部分vivo和iQOO的手机。
OriginOS最大的特点，就是采用了全新的华容网格界面，拥有很高的自定义化程度，页面和App图标可以由用户自由设定，并且采用了全新的交互界面，用户日常在浏览手机、移动支付、拍照的时候，都会更加的方便。
简约是OriginOS的一个亮点，不仅设计风格大胆，更是突破了传统安卓系统的限制，在图标调整、深层优化方面更突出。
相关介绍：
OriginOS行业首发“华容网格”，它是针对桌面的底层框架，设计的一套全新的桌面网格体系，桌面上图标和组件具有很高的自由度，间距、大小和所占空间等都可以自主调整，只要发挥想象力，审美就可以自己做主。
现在大多数人手机里安装的APP多达上百个，APP散落于各个界面，信息的呈现就显得很臃肿。OriginOS新桌面打破了这种旧思路，原子组件让我们不用进入APP，像查看行程、日历、图库以及当前天气状况，在桌面就能完成想要，方便快捷的解决问题。
大家都知道手机采用的：一个是苹果的iOS系统，另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线，但是还没有真正运用在手机移动端上，小阿在这里期待着，希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的，简单来说就是不能别随意改动的，连图标都是必须带圆角的，对交互设计师很友好的。
而安卓系统就是开源的，界面可以随意改动，尺寸也没有特别的规范，图标、尺寸成千上万种，根据手机品牌不同，形状也不同，对于交互设计稍微有那么些许不友好。
今天我们的主题就是探讨iOS的界面尺寸规范。首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是plus版本，这种一般切图命名为@3X。
今天我们的主题就是探讨iOS的界面尺寸规范。
首先苹果分为两种尺寸，一种是中码比如6s、7、8等，这种我们一般切图命名为@2X。还有一种就是Plus版本，这种一般切图命名为@3X。
苹果6s 的尺寸750px * 1334px，6s plus的尺寸就是1242px * 2208 px。两者之间的关系就是1.5倍，怎么说呢，就是6s之类的手机想要变成Plus，我们设计师稍微想要偷懒一下设计，只需要整体扩大1.5倍，比如图标。
来分析一下界面的尺寸规范：
首先是状态栏，就是信号电池栏的高度为40px。导航栏部分，就是“设置”栏高度为88px。
而下边的底部栏（导航栏）高度则为98px。
注意这三种尺寸是规定比较死的。我们做开发遇到Plus版把以上尺寸等比例扩大1.5倍就可以了。剩下的中间空白部分，我们就可以任意填充内容，Banner或者图标？
☆ 关于图标部分
苹果的图标极具有美感，完全符合栅格黄金比例，所以看起来十分协调。因为都是使用的网格进行规范化设计，所以一整套图标都保持着高统一性。
整个点击图标最小不能小于44px，一般大小为58px，圆角为12px,但是我们习惯取为整数60Px,就会非常的标准。为什么一定有最小的控制呢？因为我们手指有一个触碰面呀~低于上述的宽度，就可能碰不到。一定要非常注意用户的使用感受哦。
☆ 关于分割线部分
注意分割线不是一条线，是一个宽度为1px的矩形，而且颜色多为灰色。
☆ 关于板块与板块之间
板块与板块之间的灰色条间隔是30-70之间，一般来说取整数。iOS系统采取了70 px,有利于减轻用户的阅读负担。列表的高度一般高于88 px，列表与列表之间的距离是10px-30px,太小会有碰撞。作为UI设计师，这一点是要考虑的是吧？
☆ 关于列表中的尺寸规范以及字体要求
☆ 关于左右间隔的安全区域
这个安全区域又称之为留白边距，iOS的原生态页面【设置】页面的边距是30px,根据不同产品有不同的调整，宽度一般在16px--30px浮动，最大的特点就是数值全是偶数。
☆ 关于切换按钮的尺寸
☆ 关于字体
iOS系统的字体是苹方字体，字体的颜色和粗细也大有讲究，标题等文字就是粗体，一些说明文字等就是浅色非加粗体。常常用文字的粗细体来区分重要信息和次要信息，进行信息层级的划分。字体颜色很少采用纯黑色，一般用的是深灰色和浅灰色。
主标题的字体大小设置一般是32-36左右，加粗居中。列表中的文字就要小一些，字体大小为30，不会加粗。辅助性字体大小一般24-26。说明文字一般不会小于22，最小设置为20，再小就看不到啦。
另外需要注意的一点是所有的字号设置都必须为偶数，上下级内容字号极差关系为2-4号。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）