大家都知道手机采用的:一个是苹果的ios系统,另一个就是谷歌公司的安卓系统。华为的鸿蒙系统虽然早就上线,但是还没有真正运用在手机移动端上,小阿在这里期待着,希望有一天也能写“华为‘鸿蒙系统’的界面尺寸规范。”
这两者之间有一个明显的区别就是iOS系统是非开源的,简单来说就是不能别随意改动的,连图标都是必须带圆角的,对交互设计师很友好的。
而安卓系统就是开源的,界面可以随意改动,尺寸也没有特别的规范,图标、尺寸成千上万种,根据手机品牌不同,形状也不同,对于交互设计稍微有那么些许不友好。
那我们就来看看安卓和iOS的具体有哪些界面规范。
一、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号。
关于苹果界面的小部分尺寸规范就介绍到这里,下期再做安卓界面的尺寸介绍。
作为UI设计师,一定要具体掌握界面的大小尺寸来适应美学观点,让人感觉协调舒适,能在有效的范围内极快吸引用户的注意力。
二、安卓界面规范
众所周知,安卓系统是开源的,国内又有超多的手机厂商,小米、魅族、华为、oppo、三星等,每一个品牌有属于自己的UI设计规范,但是我们主要分析UI界面尺寸规范。
1、字体
安卓系统中文采用的是思源黑体,英文字体为robot字体。
只使用偶数单位 24 pt,28 pt,36 pt等字体大小
2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思?
讲图标之前先来分析一下一排英文的意思:
mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小,依次数值越大,其分辨率越高。常用的是xxhdpi和xxxhdpi。
dp是安卓系统专用的长度单位,设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用,文字则用sp(放大像素),主要用于字体显示best for textsize。
px是像素的意思, 不同设备显示效果相同。
安卓各屏幕密度关系如下:
3、图标
不同手机品牌的图标的标志是不一样的,对应不同大小屏幕的尺寸如下:
系统图标的尺寸:
快捷图标的尺寸:
应用图标的尺寸:
4、应用栏的尺寸
从左到右依次是:① 应用栏高度:56dp;应用栏左右内边距为16dp;应用栏图标上下左内边距为16dp;应用栏标题左内边距为72dp;应用栏标题下边距:20dp;
②应用栏高度为128dp;
③操作栏高度为56dp;标题栏高度:80dp;标题栏底部内边距:8dp;描述区域高度:72dp;描述区底部内边距:16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③子标题:48dp;④列表项:72dp
垂直边框、水平外边距、边框左右外边距各16dp;带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏:24dp;②工具栏:56dp;③标题和列表项:48dp;④子标题:48dp;⑤内容区域间距离为8dp
6、切图
上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系,而xhdpi的android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系,所以iPhone 6 Plus和xxhdip也可以共用一套切图,掌握好尺寸关系,能让工作变得简单很多。
7、界面适配
安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置,来优化用户界面设计,带来更良好的用户体验。
如何做到安卓界面适配呢?大家一定要很清楚的了解分辨率、屏幕大小、密度的关系;明白实际密度和系统密度的关系,dp、sp、px的区别;明白dp与px的转换。这里不做过多阐述,后期写一篇具体的~
安卓的界面规范就讲到这里,要明白设计界面规范的意义是确保设计的统一性与合理性,规范维护的是项目的统一,为了项目利益最大化,高效化。所以作为UI设计师的我们,如果一点设计规范不遵守,全靠自己想当然,那就别发给前端人员啦,他也看不懂。
所以作为UI设计,必须要要遵守设计规范,这样才能做到设计有道可寻,希望以上回答对你了解手机界面设计规范有所帮助。
一、概念:
1.屏幕大小:指屏幕对角线长度,单位是英寸
2.像素:组成图像的最小点,一个相对大小单位,同屏幕里越小越清晰
3.屏幕像素密度(ppi)=像素总数/屏幕大小(英寸)
4.视网膜屏幕原理:当手机距离你约25-30厘米,如果手机ppi达到300以上,你的眼睛将无法分辨出像素点
5.dpi:平面设计/印刷技术单位,值越大,表明打印机精度越高
dpi=ppi
二、Android屏幕尺寸规范化
1.程序开发统一使用虚拟尺寸单位:dp/dip(除文字外其他)、sp(文字)
2.px~dp转换:
Ldpi:px-->dp 除以0.75
dp-->px 乘以0.75
Mdpi:px-->dp 除以1
dp-->px 乘以1
Hdpi:px-->dp 除以1.5
dp-->px 乘以1.5
XHdpi:px-->dp 除以2
dp-->px 乘以2
XXHdpi:px-->dp 除以3
dp-->px 乘以3
XXXHdpi:px-->dp 除以4
dp-->px 乘以4
3.基准间距原则:
(1)组件最小间距为8dp或10dp,排版/文字最小间隔建议4dp
(2)组件尺寸建议能被4整除
(3)组件尺寸建议为偶数(单数容易出现锯齿)
4.48触摸定律:48dp是物理尺寸大约为9mm左右,是一个用户手指能够准确舒服触摸的最小尺寸
5.常见组件尺寸:
状态栏:24dp
操作栏:44/48dp
侧边导航:286/304dp
悬浮操作按钮:56dp
操作栏+TAB:36+33dp/44+40dp
底栏:44/48dp
6.Android常用字号/行距/颜色: