UI-APP设计最新的规范谁有？
发布网友
发布时间：2022-04-22 01:33
共1个回答
热心网友
时间：2023-12-24 09:46
手机UI设计的基本规范
大家都知道手机采用的：一个是苹果的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设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。
面试必知：UI设计中ui小图标的制作有什么原则
1、简洁的设计形式
在设计图标的时候就要非常注重图形的简洁，避免在小尺寸展示时候不清晰不能被识别的情况，同时简洁的图形设计形式也会提升图标的设计品质。应用图标在手机屏幕的显示尺寸仅为120120px，这个尺寸是最重要的设计尺寸。
2、准确的产品属性传达
一个高品质的应用图标应该能够让用户在第一眼就能够感知到这个应用的属性和功能。另外图标设计应当高度提炼产品特色找到最能代表产品属性的图形元素，并对这个元素进行突出设计。
3、独特的设计语言
要想在众多的应用图表中脱颖而出，设计师在设计图标时就必须强调应用图标的独特性，突出产品的核心特征和属性。
4、艳丽的色彩
鲜亮明快的色彩搭配能够为应用图标带来更多的关注度。其中对比色和互补色的渐变搭配是最有代表性的设计手法。无论是纯色的色彩运用或者是渐变色的色彩运用。
5、品牌形象的延续
在设计应用图标的时候应当充分的利用已有的品牌形象加以运用，让品牌的深厚积淀继续发挥作用并且让品牌形象延续从而赋予品牌更强的生命力。
6、多场景测试
在设计应用图标的时候也要考虑到应用图标的展示场景，避免图标不能完美展示的情况。在不同场景下应用图标需要根据需求做相对应的设计优化，，避免给用户带来简单粗糙的视觉印象。
7、避免使用大量文字
文字太多会导致应用图标看起来拥挤用户也很难看清楚信息。大量使用文字的另一个致命的后果是会大大降低应用图标的设计美感，不仅不能使用户产生好的印象反而会招致用户的反感。
掌握以上原则，你就可以做出好看的图标作品。
安卓手机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是像素的意思， 不同设备显示效果相同。
从左到右依次是：① 应用栏高度：56dp；应用栏左右内边距为16dp；应用栏图标上下左内边距为16dp；应用栏标题左内边距为72dp；应用栏标题下边距：20dp；
②应用栏高度为128dp；
③操作栏高度为56dp；标题栏高度：80dp；标题栏底部内边距：8dp；描述区域高度：72dp；描述区底部内边距：16dp。
5、列表高度
垂直边框、水平外边距、边框左右外边距各16dp；带有图标或者头像的内容有72dp的左边距。
垂直边距
①状态栏：24dp；②工具栏：56dp；③子标题：48dp；④列表项：72dp
app界面设计尺寸规范大全
原型设计尺寸
☆ 状态栏(status bar)：就是电量条，其高度为：20px；
☆ 导航栏(navigation)：就是顶部导航，有线其高度为：45px；没有线高度就是44px；
☆ 主菜单栏(submenu，tab)：就是标签栏，底部导航，其高度为：46px；
☆ 信号格：5 5
☆ wifi 图片：11 9
☆ 锁：11 11
☆ 导航：8 8
☆ 电量：22 9
☆ 闪电：5 8
☆ 状态栏中的文字：10px
☆ 顶部导航栏的图标尺寸为16x16px左右，底部标签栏的图标尺寸为23 x 23px左右。
☆ 导航栏的文字大小最大值是14px，底部标签栏的图标下方的文字大小为10px。
☆ 内容区域的文字大小是：10px, 12px，14px，16px。
① 文字黑色：#282828
② 文字深灰色：#656565
③ 文字浅灰色：#98
④ 边框浅灰色：#C3C3C3
⑤ 背景淡灰色：#f2f2f2
⑥ 按钮背景纯白色：#ffffff
A、疏远距离：比如，所有元素距离手机屏幕最左边的距离。
B、亲密距离：比如，左边图标与右边文字之间的距离。
1、iPhone6手机模型尺寸：429x881px
2、界面尺寸布局：满屏尺寸375x667px
3、高度电量条高度20px，导航栏高度44px，标签栏高度46px；
4、各区域图标大小导航栏图标16px，底部标签栏图标23px；
5、各区域文字大小电量条-文字10px，导航栏-文字14px，标签栏-文字10px；
6、常用的文字大小：16px，14px，12px，10px；
7、常用的颜色：背景浅灰色：#f2f2f2, 文字深黑色： #323232，边框色深灰：#CCCCCC；
8、常用可点击区域的高度（比如搜索区域）：28px；
9、单行文字的背景框的高度：44px，双行则为：88px，三行则为：132px；
10、常用间距：亲密距离：10px；疏远距离：15px，其它距离：5px，22px等；
UI设计中如果图标大小不一致一般怎么处理?
首先，这种方法制作出来的图标大小为48px48px，需要其他尺寸的图标可以做完之后等比放缩即可，放缩过程中可能需要注意半像素（见下文）的问题。
Material Design把图标的形状类型分为三种：圆形、方形和矩形。其中圆形的半径为44px，方形的边长为38px，矩形为44px32px。
怎么判定图标应该套用那种尺寸的？有一种方法是：将图标与上图的模板居中对齐，然后中心不动，放大图标使之图标依次碰到三种形状的边界，填充最满的那个形状的尺寸就是该图标需要规定的尺寸。如下图，依次将设置图标放大并使之接触到不同形状的边界，可以看到在圆形里，该图标最大，证明设置图标最匹配圆形，所以使用圆形的尺寸44px44px。
下面正式定义尺寸部分：
1. 如果形状为方形，则图标大小为38px38px，若只是近似的方形，则取较小的边为38px，等比放缩。
2. 如果形状为圆形，则取图标大小为44px44px，若只是近似的圆形，取较大的边为44px，等比放缩。
3. 如果形状为矩形，先令短边为32px，等比放缩图标，若此时长边大于或者约等于44px，则取长边为44px，等比放缩；否则，令长边为y，取长边为（44y）/2，再向上取整，然后进行等比放缩。
根据以上的规则制定出来的图标，大小就会比较统一。如下图，左边是调整前，右边是调整后。（不过也有人反馈说看不太出来o(╯□╰)o）
顺便把这次整理图标遇到的坑也记录一下：
1. 关于半像素的问题。
半像素的问题主要是在进行Android不同尺寸适配的时候，有时候开发会要求图标不能出现非整数的尺寸，不然可能图标就会糊掉。所以在设计Android端使用的图标时，注意一下这个问题。适当地对尺寸进行四舍五入一下即可。
2. 关于iconfont的问题。
现在大部分团队都会将图标转换为iconfont，这样可以缩小整个项目的大小。图标在转换为iconfont的时候，会忽略所有的线条（包括填充色块的边）。所以，如果图标中有线条，则需要利用高度为1px的矩形代替，色块的边长需要用色块叠加来替代。
3. 关于对齐的问题。
如果有仔细看，我这个方法指定的图标大小为48px48px，但是里面有内容的部分，比如说圆形，就只会占据44px44px，这时候我们当然会希望把图形放置在图标的*。免不了就会使用对齐工具，咻咻两下，一个上下居中对齐，一个左右居中对齐，搞掂。但是，慢着，如果仔细发现一下，你会发现看上去并不是居中的。这是由于人的视觉错觉造成的，这时候就需要进行适当的调整，通过自己的视觉判断来进行对齐。
4. 关于颜色统一的问题。
一般而言，图标设定为同一个色值（比如#999999）就能统一颜色，但是也有遇到过某个图标会显得颜色比较浅，具体原因未知，这时候就需要进行特殊的处理，比如设定更加深的颜色，比如#333333，具体通过自己视觉调整即可。
