-
让品牌有温度、有情感
专注品牌策划15年
Ui设计规范（ui设计规范尺寸）
发布时间：2023-04-04 06:54:56
稿源：
创意岭 阅读：
150
当前文章关键词排名出租
大家好！今天让小编来大家介绍下关于Ui设计规范的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。
创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008
文章目录列表:
一、手机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设计培训
UI设计包括以下几个要素：
想要成为一名及格的设计师并不简单，需要有足够的耐心和兴趣来支持，最好在学习之前先来做一个小测试→点击测试我适不适合学设计
一、色彩
色彩是绝大多数设计给用户传递的最显著的视觉元素之一，是艺术表现的要素之一，不同的色彩对用户有着不同的感受和体验。色彩从来都不是越多越好，通常配色方案当中，色彩数量要控制在3种左右，设计师根据色彩对人们心理的影响，合理地加以运用，通过创建配色方案，系统地对品牌和UI界面的色彩进行管理，这确保了品牌和UI在色彩的运用上保持着高度的一致。
二、速度
或许很多的UI设计师会觉得UI设计知识一种用户界面的问题，与网页的响应速度无关，若你也有这样的想法，就大错特错了，要知道UI的定义就是用户界面英文单词的缩写。UI的最终目标就是提升用户体验，而提升页面相应速度则是用户体验中必须要注意的东西，所以，从某种意义上来说，这种想法是错误的，对UI设计师而言，页面响应速度同样是开发过程中需要考虑的重点。
三、对比度
元素之间的差异往往能够借助对比度凸显，创建富有层次的视觉结构，让内容的可读性更强，让信息更容易被用户所理解和吸收。对比强烈的元素让用户轻松地注意到构成对比的元素，创造自然的视觉模式和用户流程，而对比度的重要性之所以如此之高，很大程度上是因为它广泛的适用性和显著的实用性，在控制对比度时，你需要明确对比度经常所涉及的元素类型和属性。
四、美观
美观，其实也就是整体UI设计的美观程度，整体界面设计的越景美，越好看，用户也就越爱不择手。关于这个问题，天津网站建设认为就如今的形式来说，质感”是提高美观度的一个秘密武器。在UI设计中加入“质感”，这会让你的站点更加不同，更加完美。总之一句话：美好的事物总是会让人心神向往，而如何增加网页的美观度，是UI设计师着重考虑的要点。
五、内容
只有内容还源源不够，内容本身必须要足够的精彩，灵活运用对比与调和、对称与平衡及留白等方法，通过空间、文字、图形之间的相互关系，建立整体均衡状态，产生和谐的美感。如：在界面设计中应用对称原则是，太过均衡有时会使页面显得呆板，但若加入一些富有动感的文字、图形，或采用夸张的手法来表现内容，往往达到意想不到的效果。
六、主体
不同页面设计针对不同的消费群体和对象，因此需要采用不同的形式，通常情况下，好的网页把图形表现手法和有效的布局与通信结合起来。为了做到网页主题鲜明突出，要点明确，设计者需按照客户的要求，以简单明确的画面来体现出网页的主题，使用一切方法和技巧充分表现出网页的个性，从而使网页主题鲜明，特点突出。
七、细节
大量事实证明，一个不注重细节的人往往都是邋遢的，想要成功很难，尤其是UI设计的过程中，不要小瞧一处图片优化的小角，不要小看图片一点点的不清晰，就像人的穿着一样，是会给出印象评分的，所以说细节决定成败的同时也决定了你的流量高低。
天津学习UI设计到天琥教育，天琥教育秉承着“做负责任的教育，实现学员价值”的办学宗旨，依靠设计精英、设计总监、艺术院校讲师等强大师资阵容和研发实力，培养猎才计划、UI设计、室内设计、平面设计、网页电商设计、营销推广、影视制作、C4D设计、PS高级合成等精英人才。
三、UI设计标注有哪些规范?
1.尺寸
我们要将页面上有所需要告知尺寸的内容进行标注，例如图标、图片、头像等等。关于尺寸维度的标注我们需要注意的是：有圆角的地方，需要将圆角半径标出。
对于一些控件，如button、列表，一定要随时问自己有没有特殊状态，如按压状态、无效状态、选中状态等等，如果你不标明，开会就会默认没有这些效果。一般情况下，图片的尺寸是需要告诉比例的，而不是固定的大小，这样开发才能更好的适配，常用的图片比例有4：3、16：9等。
所以正确的标注方法是给出按钮两边的间距，让整个按钮的宽度自适应(当然高度还是要固定的),这样不论遇到哪种分辨率的尺寸，都能够保持相同的视觉效果，扩展性极强。
2.文字
文字，需要标注文字的大小、字体、颜色、透明度、行高等等，当然也可以和开发进行沟通，对一些内容进行删减。关于文字的标注需要注意的事项：文字有一个很特殊的属性，就在某些场景下，文字是动态的，所以这个时候，就需要将极限情况考虑清楚。
3.间距
有人可能会觉得间距和尺寸有些相似，但其实它们有着很大的不同，我们可以这样理解：尺寸是形容容器的大小，而间距是形容容器之间的距离。间距相对比较简单，只要标注清晰就不会有太大问题。
4.颜色
需要标注颜色的内容有分割线颜色、背景色、按钮颜色等等。关于颜色的标注需要注意的事项：切记文字的颜色已经归类到文字属性里面，不用重复标注，思路一定要保持清晰。
以上就是小编关于UI设计中的标注规范的分享，希望对大家有所帮助，想要了解更多UI设计相关内容，请关注本平台，小编会做及时的整理并发布的，大家注意查看哦!
四、UI界面设计规范有哪些？
一、字体
iOS的字体：
中文字体：苹方 / PingFang SC
CSS：Font-Family：PingFang SC
英文、数字：Helvetial
Andioid的字体：
中文字体：思源黑体 / Noto Sans Han
英文、数字：Roboto
二、规范
1、 iPhone界面尺寸
2、 iPhone图标尺寸
3、 iPad的设计尺寸
4、 iPad的图标尺寸
5、 Andioid的图标尺寸
6、Andioid的dp/sp/px换算表
三：小结
iPhone的主流设计尺寸：750x1334 px
1242x2208 px
Andioid的主流设计尺寸：720x1280 px
1080x1920 px
以上就是小编对于Ui设计规范问题和相关问题的解答了，如有疑问，可拨打网站上的电话，或添加微信。
推荐阅读：
赣公网安备 50019002502384号
