手机UI设计的基本规范

大家都知道手机用的:一个是苹果的iOS系统,一个是谷歌的Android系统。虽然华为的鸿蒙系统系统已经上线很久了,但是还没有真正应用到手机上。小啊在这里很期待,希望有一天能写出“华为鸿蒙系统系统的接口尺寸规范”。

两者有一个明显的区别,就是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设计者,你必须遵守设计规范,这样才能实现一个合适的设计。希望以上回答能帮助你理解手机界面的设计规范。