手机UI设计的基本规范
两者有一个明显的区别,就是iOS系统是非开源的。简单来说就是不能随意更改。就连图标也必须是圆形的,这对交互设计师来说非常友好。
Android系统是开源的,界面可以随意更改,大小也不是特别规范。图标和大小成千上万,根据手机品牌不同形状也不一样,对交互设计略显不友好。
那么我们来看看Android和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倍。剩下的中间空白,我们可以随意填写内容,横幅或者图标?
关于图标部分。
苹果的图标很有美感,完全符合网格黄金比例,所以看起来很和谐。因为所有的图标都使用网格进行了标准化,所以一整套图标保持了高度的统一性。
整个点击图标至少要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设计师,一定要掌握好界面的大小,以适应审美的角度,让人感觉舒服,能在有效范围内吸引用户的注意力。
二、Android接口规范众所周知,Android系统是开源的,国内有很多手机厂商,比如小米、魅族、华为、oppo、三星等。每个品牌都有自己的UI设计规范,但我们主要分析UI界面尺寸规范。
1,字体
安卓系统中文使用思源粗体,英文使用机器人字体。
仅使用偶数单位字体大小,如24磅、28磅和36磅。
2.mdpi,hdpi,xhdpi,XHdpI,xxxhdpi,DP,px到底是什么意思?
先分析一排英文的意思再来说图标:
Mdpi、hdpi、xhdpi、xxhdpi、xxxhdpi都是屏幕密度,依次数值越高,分辨率越高。常用的有xxhdpi和xxxhdpi。
Dp是Android系统专用的长度单位,意思是设备无关像素。不同的设备有不同的显示效果,这和设备的硬件有关。大部分是图标,文字是sp(放大像素),主要用于best for textsize的字体显示。
Px的意思是像素,不同的设备显示效果是一样的。
安卓屏幕的密度关系如下:
3.核标准情报中心
不同手机品牌的图标有不同的标志,不同尺寸对应的屏幕大小如下:
系统图标的大小:
快捷图标的大小:
应用程序图标的大小:
4、应用栏的大小
从左至右:①应用栏高度:56dp;应用栏左右内边距为16dp;;应用栏图标的上下左内边距为16dp;;应用栏目标题左内边距为72dp;申请栏目标题下边距:20dp;
②应用栏高度为128 DP;;
③操作杆高度为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.界面适应
Android多屏幕支持基于其管理应用程序布局和位图可绘制对象渲染的能力,以适当的方式配置当前屏幕。系统处理的大部分工作由布局进行缩放,以适应屏幕尺寸/密度,缩放位图可以在屏幕密度下绘制,以在每个屏幕上正确显示您的应用程序的配置,从而优化用户界面设计,带来更好的用户体验。
如何适配Android界面?大家一定要清楚分辨率、屏幕尺寸、密度之间的关系;了解实际密度与系统密度的关系,dp、sp、px的区别;了解dp和px之间的换算。这里不做过多阐述,后面写具体文章~
Android的界面规范就这么多了。要明白设计接口规范的意义在于保证设计的统一性和合理性,规范维护项目的统一性,以实现项目的效益和效率最大化。所以作为UI设计师,如果我们不遵守任何设计规范,自己想当然,那就不要发给前端人员,他们也看不懂。
因此,作为一个UI设计者,你必须遵守设计规范,这样才能实现一个合适的设计。希望以上回答能帮助你理解手机界面的设计规范。