大家都知道手机用的:一个是苹果的iOS系统,一个是谷歌的Android系统。 华为的鸿蒙系统虽然早就推出了,但是目前还没有应用到手机上。 小A很期待,希望有一天自己也能写出《华为‘鸿蒙系统’接口尺寸规范》。
两者一个明显的区别是iOS系统是非开源的。 简单的说,不能随意改变。 就连图标也要有圆角,这对交互设计师来说是非常友好的。
Android系统是开源的,界面可以随意更换,大小没有特殊规定。 图标和大小有几千种,根据不同的手机品牌形状也不同。 对交互设计有点不友好。
那么我们再来看看Android和iOS具体的接口规范。
一、iOS接口规范
首先,苹果分为两种大小,一种是中等大小,比如6s、7、8等,我们通常称之为@2X。 还有一个Plus版本,命名为@3X。
Apple 6s尺寸为750px * 1334px,6s Plus尺寸为1242px * 2208 px。 两者的关系是1.5倍。 怎么说呢,6s等手机要变成Plus,我们的设计师想在设计上偷懒一点,只需要将整体尺寸扩大1.5倍,比如图标。
下面分析一下接口的尺寸规格:
首先是状态栏,也就是信号电池栏的高度是40px。 对于导航栏游戏ui切图命名规范,“设置”栏的高度为 88px。
下方底栏(导航栏)的高度为98px。
请注意,这三种尺寸都比较刚性。 我们在做开发的时候,遇到Plus版本的时候,可以把上面的维度扩大1.5倍。 剩下的空白,我们可以填什么内容,Banner 还是icon?
☆ 关于图标部分
苹果的图标非常有美感,完全符合网格的黄金比例,看起来非常和谐。 由于使用了网格进行标准化设计,整套图标保持了高度的统一性。
可点击图标最小不能小于44px,一般尺寸为58px,圆角为12px,但我们习惯取整数60px,会很标准。 为什么必须有最低限度的控制? 因为我们的手指有一个触摸面~低于上述宽度,我们可能无法触摸到它。 我们必须非常重视用户体验。
☆ 关于分割线部分
注意分割线不是直线,而是一个宽度为1px的矩形游戏ui切图命名规范,颜色多为灰色。
☆ 关于板间
板间灰条间隔为30-70,一般为圆形。 iOS系统采用70px,有利于减轻用户的阅读负担。 列表的高度一般高于88px,列表与列表之间的距离为10px-30px,太小会出现碰撞。 作为 UI 设计师,这是需要考虑的事情,对吧?
☆ 关于列表中的尺寸规格和字体要求
☆ 关于左右区间的安全区域
此安全区域也称为空白边距。 原iOS页面【设置】边距为30px,可根据不同产品调整。 宽度一般在16px--30px之间波动。 最大的特点是数值全是偶数。
☆ 关于切换按钮的大小
☆ 关于字体
iOS系统的字体是苹方字体,字体的颜色和粗细也很有讲究。 标题等文字为粗体,部分说明文字为浅色非粗体。 文字的粗细常用来区分重要信息和次要信息,划分信息层次。 字体颜色很少采用纯黑色地图场景,一般采用深灰色和浅灰色。
主标题的字号设置一般在32-36左右,粗体居中。 列表中的文本会更小,字体大小为 30,并且不会加粗。 辅助字号一般为24-26。 说明文字一般不少于22,最小设置20,再小也看不出来。 还有一点需要注意的是所有字号设置必须是偶数,上下级字号相差2-4。
苹果界面尺寸规格的一小部分就介绍到这里,安卓界面尺寸将在下一期介绍。
作为UI设计师,必须详细了解界面的大小,以适应审美观点,让人感觉协调舒适,能够在有效范围内快速吸引用户注意力。
2.安卓界面规范
众所周知,Android系统是开源的,在国内有很多手机厂商,比如小米、魅族、华为、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是Android系统专用的长度单位,表示与设备无关的像素。 不同的设备有不同的显示效果,这与设备硬件有关。 多用于icon,sp(enlarged pixels) 用于text,主要用于字体显示,最适合textsize。
px表示像素,不同设备显示效果相同。
Android屏幕密度之间的关系如下:
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安卓手机屏幕和xxdpi屏幕的关系正好是1.5倍,所以iPhone 6 Plus和xxhdip也可以分享一组切图,高手它的大小关系可以使工作变得容易得多。
7.接口适配
Android 多屏幕支持的基础是它能够以适合当前屏幕配置的方式管理应用程序的布局和位图可绘制对象的呈现。 系统通过缩放布局以适应屏幕尺寸/密度以及将可绘制位图缩放到屏幕密度以在每个屏幕配置上正确呈现您的应用程序来处理大部分工作,以优化用户界面设计以获得更好的用户体验。
如何适配Android界面? 大家一定要清楚的了解分辨率、屏幕尺寸、密度之间的关系; 了解实际密度与系统密度的关系,dp、sp、px的区别; 理解dp和px之间的转换。 这里就不多说了,后面会写一篇具体的文章~
Android 接口规范到此结束。 需要明白设计接口规范的意义在于保证设计的统一性和合理性。 规范维护了项目的统一性,以最大限度地提高项目的效益和效率。 所以,作为UI设计师,如果我们不遵守一些设计规范,认为是理所当然的,那就不要发给前端人员,他也看不懂。
所以,作为UI设计师3D角色,一定要遵守设计规范,这样设计才能跟得上。 希望以上回答能帮助大家了解手机界面的设计规范。