UI界面设计尺寸应该是多少？

01、界面设计尺寸及栏高度

创新互联建站是一家集网站建设,宝丰企业网站建设,宝丰品牌网站建设,网站定制,宝丰网站建设报价,网络营销,网络优化,宝丰网站推广为一体的创新建站企业，帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿，时刻以成就客户成长自我，坚持不断学习、思考、沉淀、净化自己，让我们为更多的企业打造出实用型网站。

（1）我们用Photoshop做设计新建画布应该设置多大呢？另外，iOS应用中的栏，包括状态栏、导航栏、标签栏、工具栏等，它们的高度又分别是多少呢？（注意：iOS严格规定了各个栏的高度，这个是必须遵守的）通过下面的表格和图示来为你解答上面的问题。

（2）目前主流的iOS设备iPhone 6s/7/8 Plus和iPhone X采用的是3倍率的分辨率，其他都是采用的2倍率的分辨率，无论是栏高度还是应用图标，设计师提供给开发人员的切片大小，前者始终是后者的1.5倍，并分别以@3x和@2x在文件名结尾命名，程序再根据不同分辨率自动加载@3x或者@2x的切片。

（3）注意：在进行iphone x设计的时候我们依然可以采用熟悉的iphone 7的设计尺寸作为模板，只是高度增加了290px，设计尺寸为750*1624（@2x）。注意状态栏的高度由原来的40px变成了88px，另外底部要预留68px的主页指示器的位置。

手机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设计，必须要要遵守设计规范，这样才能做到设计有道可寻，希望以上回答对你了解手机界面设计规范有所帮助。

华为鸿蒙OS 2.0系统界面曝光：简约风格很惊喜

华为鸿蒙OS从曝光到现在，一直被广大消费者关注，从推行时间确定到现在的系统界面曝光，更是吸引了不少人关注，我们从知名博主@飞谈数码发布的内容可以看到，鸿蒙OS的系统界面以及完全曝光，扁平化的UI界面很吸引人。

我们从曝光的鸿蒙OS的系统界面截图能看到，作为继iOS、Android之后的全新操作系统发生了很大的变化，新系统采用的是全新通知栏和快捷控制中心，控制中心的界面又发生改变，以多个区域分开。比如新系统将WLAN和蓝牙单独划分出来，音乐播放软件单独在一个区域，用户使用时会非常方便。

另外，鸿蒙OS2.0的UI风格也发生了变化，拥有方形与长条形图标尺寸，看起来非常简约。不过，鸿蒙OS2.0最让人惊喜的是其系统流畅度。据说，内测者体验该系统之后，为鸿蒙OS2.0流畅性、功耗以及发热情况感到很惊喜，整体体验非常赞。

总而言之，鸿蒙OS2.0曝光之后很多人都非常期待，此次界面曝光也给广大用户带来了惊喜。你看到这里对该系统有什么看法呢，如果你有不一样的意见，也可以在评论区评论，大家可以一起来讨论！

鸿蒙系统全面解析，诞生背景、技术细节生态圈一文看懂 | 智东西内参

华为6月2日正式发布的鸿蒙系统无疑占据了最近热点话题的C位，虽然不全是赞美的声音，但这种努力打破美国垄断，挑战谷歌、苹果在移动操作系统上垄断地位的尝试必将成为中国 科技 史上的里程碑事件。

本期的智能内参，我们推荐兴业证券的报告《华为鸿蒙深度研究》， 从鸿蒙系统的产生背景、开源技术细节和产业链生态圈全面解析鸿蒙系统。

原标题：

《华为鸿蒙深度研究》

作者： 未注明

鸿蒙产生的时代背景，总体来说有六个：

1、数字化的时代背景：数字化新时代的到来需要新的操作系统；

2、IoT 与 5G：5G物联网时代的到来对操作系统提出了新的要求；

3、中国面临“卡脖子”的挑战：独立自主的研发操作系统是迫切的需求；

4、人工智能的兴起：AIoT场景天然要求多设备智能协同，需要一个适用于各类型机器的操作系统；

5、大数据与云计算：TB、PB级的大数据需要一个能够提供多机互联的操作系统；

6、全球信息安全面临挑战：网络安全威胁呈现多元化、复杂化、频发高发趋势，需要一个足够安全的系统进行保障。

到鸿蒙的出现，操作系统已经经历了四代：分别是Unix、Windows/Mac/Linux、iOS/Android和鸿蒙/Fuchsia。

Fuchsia是由Google自主开发的基于Zircon微内核的开源系统，它可以运行在手机、电脑、智能家电等硬件产品上。

谷歌公司对Fuchsia的预期发展是让它取代Android和 Chrome OS ,统一两者成为一个操作系统。

和安卓相比，鸿蒙与安卓都是基于Linux开发，安卓是基于宏内核结构设计，而鸿蒙是基于微内核结构设计。鸿蒙系统使用C和C++编写，不需要虚拟机这一中间过程，因此运行效率更高。

和iOS相比，iOS和鸿蒙都是致力于万物互联的操作系统，iOS底层是基于Unix的，并且是闭源的，鸿蒙是基于Lmux的， 是开源的。

全球操作系统格局

2012年，华为出于对谷歌如果对其断供就会难以维持生产的顾忌，开始布局自有分布式操作系统。

2019年5月15日，华为被列入了所谓“实体清单”，谷歌Android 服务GMS对华为禁供。

5G迅猛发展，物联网时代来临，多年前的布局使华为抓住了最佳的发展时期。

鸿蒙发展 历史

总体来说，鸿蒙的技术现阶段优势在于开放，但劣势是生态。系统在分布式部署、时延和流畅性等方面具有优势，但最大短板生态。

构建一个成熟的生态是鸿蒙能否生存下去并取得胜利的关键所在。

技术上，鸿蒙系统使用微内核架构。内核是操作系统内最基础的构件，因此内核的设计对于操作系统的外部特性也有着至关重要的影响。

常见内核结构可以分为宏内核、微内核、混合内核、外内核等。

微内核是较新内核结构，但是它拥有着众多宏内核不具有的优良特性，吸引了很多研究者。

微内核与宏内核对比

微内核架构包含两类组件：核心系统和插件模块。核心系统负责通用功能，不因为业务的变化而变化。

插件模块负责实现具体的业务，可以根据业务的变化而改动和扩展。

微内核架构模式可以将其他应用程序的功能作为插件添加到核心应用程序，从而提供应用的可扩展性、功能分离性和独立性。

微内核架构通常具有以下特征：整体敏捷度高、易部署、可测性高、功能表现优秀、可扩展性强和不易开发。

鸿蒙系统设计

鸿蒙架构的另一个很大优势是依靠分布式软总线、分布式设备虚拟化、分布式数据管理、分布式任务调度等技术，可以实现多种类、多数量的设备之间硬件的互助和资源共享。

分布式数据管理

分布式软总线

分布式设备虚拟化

鸿蒙系统设计初衷是为满足全场景智慧体验的高标准链接要求，可适配手机、平板、电视、智能 汽车 、可穿戴设备等广泛的终端设备, 将在未来万物互联的智能 社会 中打造下一代操作系统。

鸿蒙当前和未来架构

在技术特性上，鸿蒙有着 一次开发，多端部署 的特点。

在鸿蒙OS的框架层提供了用户程序框架、Ability框架和UI框架。它们可以支持多终端设备业务逻辑和界面逻辑的复用，这样应用跨设备的开发效率也就得到了提框架层升。

另一个特点是 统一OS，弹性部署 。鸿蒙os通过组件化和小型化的设计方法，使得针对各种类型的设备可以按需求选择合适的部署方案。

鸿蒙支持多种组件配置方案：1、支持各组件的选择，组件并不是必须被部署，可以按照需要选择合适的部件；

2、支持组件内功能集的配置，可以按照需求选择性的给组件配置功能集；

3、支持组件内功能集的配置，可以按照需求选择性的给组件配置功能集。

除了微内核，鸿蒙的另一大卖点是方舟编译器。方舟编译器可以方便安卓APP移植到鸿蒙系统。

方舟编译器是华为自主研发的编译器平台，它将以前边解释边执行的低效运行方式转变为将Java、C、C++等代码一次编译成机器码的高效运行方式，同时也实现了多语言的统一。

华为官方数据表明，方舟编译器能提升24%的操作系统流畅度、44%的系统响应能力和60%的三方应用操作流畅度。

华为当前的业务可分为四大领域：消费者业务、运营商业务、企业业务和云服务四大业务领域相互协同、共同发展，拼接成华为生态战略布局版图。

华为生态

鸿蒙系统的生态可以概括为1+8+N。1+8+N战略的核心是1 , 即智能手机。智能手机作为鸿蒙生态的核心部分，凭借华为海思自研的麒麟芯片，为其他设备终端提供相应的通信支撑。

正是因为万物互联的场景中手机的重要性，华为始终以全球手机市场第一作为目标。

8是指 PC、平板、智慧屏、音箱、眼镜、手表、车机、耳机 ，这8项将由华为公司亲自研发和参与市场，并且会追求市场领先地位。

N是 摄像头、扫地机、智能秤等外围智能硬件 ，涵盖移动办公、智能家居、运动 健康 、影音 娱乐 、智慧出行五大场景模式。

这些领域是与鸿蒙生态的合作伙伴进行共同开发，在合作过程中，鸿蒙生态将会提供HiLink协议标准，HiAI组件，Lite OS等技术平台，同时将鸿蒙操作系统开源。

2019年8月，全球第一款搭载华为鸿蒙系统的荣耀智慧屏正式发布。

荣耀智慧屏作为当时首个搭载鸿蒙系统的终端产品，突破了传统电视的概念，搭载有鸿鹄818智慧芯片等三颗华为自研芯片和升降式AI摄像头，内置华为系统级视频通话功能，开创了大屏和手机的新交互方式，除了可联控智能家居，还能实现智慧双投、魔法闪投、魔法控屏等功能。

鸿蒙OS + 智慧屏

2021年4月，华为的鸿蒙OS智能座舱正式发布。

鸿蒙OS车机操作系统是面向车的操作系统，与手机同平台。鸿蒙OS智能座舱搭载有一芯多屏、多用户并发、运行时确定性保障、分布式外设、车载网络、多部件等多种应用，提供差异化启动恢复、极速启动、多用户切换、声场控制、多部件协同等功能。

鸿蒙OS智能座船可以及时升级应用，基于其HMS-Automotive平台，开发者能够提供更好的服务与应用体验，实现人、车、家的全场景协同。

鸿蒙OS + 智能座舱

同时面向车载场景增量还开发有HOS-A子系统，可实现账号、多模输入、用户程序框架、元能力框架、多媒体、公共通信、车机业务启动恢复等功能，使得自动驾驶、导航、视频、音乐和通话等业务能够在智能座舱和其他设备之间实现无缝切换，让智能驾驶变得简单、有趣、享受。

发布会现场透露，目前智能驾驶生态平台已获得30+硬件生态、50+应用生态合作伙伴支持，未来鸿蒙OS将继续加大与 汽车 及应用领域的开放与合作力度，与产业链一起打造智能驾驶的极致体验。

2020年7月，华为消费者业务CEO余承东，与美的集团董事长方洪波正式签署《战略合作框架协议》，双方在智慧家居领域达成“全方位战略合作关系” 。

2021年4月，作为首批支持鸿蒙系统的家电产品，美的家用智能蒸烤箱S5mini正 式上市，该智能蒸箱搭载了华为鸿蒙系统，同时搭配了鸿蒙系统的一碰连特性，可以快速完成配网。

配网成功后，手机会自动跳转到鸿蒙系统内置的轻量化产品页面，用户可以在页面中获取跟产品搭配的定制食谱，根据菜谱准备食材，即可一键启动机器、机器自动烹饪。

智东西 认为，数字商业的终极竞争，归根到底就是操作系统的竞争，全球市值前3名的苹果、谷歌和微软，他们共同特点就是都具备操作系统。鸿蒙的推出，长远来看决定了能否在异构计算时代中取得第四张操作系统入场券的关键。

鸿蒙OS 3发布升级公告，此次升级将带来哪些亮点功能？

第1点最大的亮点就是他整个系统特别的好用，第2点系统速度非常的快，达到一定的高度，13年整个的系统已经全新的进行更新。

UI出高保真尺寸 要交给开发人员什么尺寸单位 求干货

开发安卓用1280px*720px，开发IOS用1366+750px，如果两个平台都开发用1366+750px，然后去适配安卓（大部分程序员都能将IOS适配到安卓，如果不能就是技术没到家）。

切图你下载一个叫Cutterman的切图插件，最新版可以一键切出安卓和IOS的切图。至于标注，大部分都是标注PX，你可以咨询程序员他要什么单位的。

【一般需要切图的地方占多少】这个问题我有点理解不了。什么叫要切图的地方占多少，如果设计了奇形怪状的图标、按钮、banner、加载动画、这些肯定必须要切图。

设计的时候高度如果是720，那就必须包括状态栏。

新闻标题：鸿蒙ui开发尺寸,鸿蒙是安卓深度定制UI
本文地址：http://pwwzsj.com/article/hojsos.html