《UI设计-AIGC驱动赋能界面完美设计》课件 1.2 不同设备设计标准及规范-新

011.2不同设备设计标准及规范UI设计——AIGC驱动赋能界面完美设计1.2.1iOS设计标准1.2.1iOS设计标准

iOS设计标准及规范是苹果公司为iOS应用量身制定的设计指南，旨在保障iOS应用界面的设计一致性，同时打造优质的用户使用体验。该规范强调简约、清晰的视觉设计原则，要求采用表意明确的图标与视觉元素，搭配适配的色彩及对比度；在布局与排版层面，需遵循标准布局与栅格系统，通过自动布局和响应式设计的方式，让界面适配不同设备及屏幕尺寸，如图1-12所示。1.iOS系统图标设计制作规范

iOS系统的图标设计规范明确要求，图标需采用正方形尺寸与扁平化设计风格，具备清晰的轮廓线条和简洁易懂的细节呈现。同时，图标设计需与应用整体风格保持统一，融入应用标识或核心代表性元素，并通过适度的圆角与边框处理，强化图标的视觉辨识度与精致感，如图1-13所示。图1-12

iOS系统相关界面图标设计图1-13

iOS系统图标设计1.1关于UI设计1.2不同设备设计标准及规范1.2.1iOS图标尺寸

根据苹果公司的要求，所有递交至AppStore的应用，必须提供分辨率为1024

px×1024

px的启动图标，这是目前最大的设计尺寸。事实上，1024

px×1024

px的图标，并没有应用于iPhone内的App，这种大尺寸的图标主要用于适配全新的RetinaMacBookPro。当然，这种大尺寸的图标，也在苹果AppStore以及WWDC（WorldwideDevelopersConference，苹果公司举办的全球开发者大会）的宣传画中使用。

为了方便适配，除了1024

px×1024

px的设计尺寸以外，iOS系统的启动图标还有其他多种设计尺寸，如图1-14所示。图1-14

iOS启动图标的设计尺寸1.2不同设备设计标准及规范1.2.1iOS图标尺寸iOS系统图标的命名与尺寸可参考表1-1。后缀适用机型分辨率/px图标尺寸/px@1xiPhone1/3G/3GS320×48060×60（App）@2xiPhone4/4s/5/5s/5c/SE（第一代）/6/6s/7/8/SE（第二代/第三代）640×960（iPhone4/4s）640×1136（iPhone5/5s/5c/SE第一代）750×1334（iPhone6/6s/7/8/SE第二代/第三代）120×120（App）1024×1024（AppStore）@3xiPhoneX/XS/11Pro/11ProMax/12/12Pro/12ProMax/13/13Pro/13ProMax/14/14Pro/14ProMax/15/15Pro/15ProMax/16/16Plus/16Pro/16ProMax/17/17Plus/17Pro/17ProMax1125×2436（iPhoneX/XS/11Pro）1242×2688（iPhone11ProMax/XSMax）1170×2532（iPhone12/12Pro/13/13Pro/14/14Pro）1284×2778（iPhone12ProMax/13ProMax/14ProMax）1179×2556（iPhone15/15Pro）1312×2904（iPhone15ProMax）1290×2796（iPhone16Plus/17Plus）1206×2622（iPhone16Pro/17/17Pro）1320×2868（iPhone16ProMax/17ProMax）180×180（App）1024×1024（AppStore）表1-1

iOS系统图标的命名与尺寸1.2不同设备设计标准及规范1.2.1iOS图标尺寸iOS系统所有的启动图标，都采用圆角矩形来表现。但是，在实际工作中，UI设计师绘制启动图标时，无须考虑图标的圆角半径。因为，iOS系统启动图标的圆角是在App上线时由iOS系统通过程序实现的。iOS系统图标的栅格系统，是严格按照黄金分割比例进行设计的，如图1-15所示。设计师在绘制iOS系统图标时，为了规范图标的绘制，保证整套图标在视觉占比上达到相对平衡，需要借助iOS系统图标的栅格系统。图1-15

iOS系统图标的栅格系统1.2不同设备设计标准及规范1.2.1iOS界面设计8种主要界面组件2.

iOS系统界面设计制作规范iOS界面由导航栏、标签栏、工具栏、列表视图、输入控件、警告框、模态视图、弹出菜单等主要组件组成。这些元素用于展示和操作应用的功能、内容和交互，同时包括图片、文本标题、图标等可视化元素，以提供一致、易用和美观的用户体验。（1）导航栏通常位于页面的顶部，用于展示标题和导航按钮。它可以包含返回按钮、菜单按钮、搜索按钮等。（2）标签栏通常位于页面的底部，用于展示应用的主要功能或页面。用户可以通过点击标签切换不同的内容或功能。（3）工具栏是位于导航栏下方或页面底部的一个水平条，通常用于展示和操作页面中的工具或功能按钮。（4）列表视图用于展示大量可滚动的数据项，例如联系人列表、设置选项等。用户可以通过滚动和点击来与列表中的项进行交互。（5）输入控件包括文本框、选择器、开关、滑块等，用于用户输入信息或选择选项。（6）警告框用于向用户显示重要的信息、警告或确认框，以及请求用户做出相应的操作或决策。（7）模态视图在屏幕中间以浮层的形式显示，通常用于展示特定的任务、工作流，用户需要完成或取消该任务后，才能返回到之前的界面。（8）弹出菜单是在用户点击按钮或其他界面元素后，以浮层的形式显示的菜单，用于提供额外的选项或功能。1.2不同设备设计标准及规范1.2.1iOS界面设计8种主要界面组件界面设计规范主要规定了界面的状态栏、标题栏、标签栏、图标、字体、字号等视觉元素的相关参数。iOS系统界面设计的参数规范如表1-2所示。设备型号分辨率状态栏高度导航栏高度标签栏高度iPhone4/4s640px×960px40px88px98pxiPhone5/5s/5c640px×1136px40px88px98pxiPhone6/6s/7/8750px×1334px40px88px98px设备型号分辨率状态栏高度导航栏高度标签栏高度iPhone6+/6s+/7+/8+1242px×2208px60px132px147pxiPhoneX/XS/11Pro1125px×2436px132px132px147pxiPhoneXR/11828px×1792px132px132px147pxiPhoneXSMax/11ProMax1242px×2688px132px132px147pxiPhone12/13/141170px×2532px132px132px147pxiPhone12ProMax/13ProMax/14Plus1284px×2778px132px132px147pxiPhone15/161179px×2556px132px132px147pxiPhone15Plus/16Plus1290px×2796px132px132px147pxiPhone15ProMax/16ProMax1392px×2992px132px132px147pxiPhone172622px×1206px132px132px147pxiPhone17Air2796px×1290px132px132px147pxiPhone17Pro2848px×1312px132px132px147pxiPhone17ProMax3048px×1412px132px132px147px表1-2

iOS系统界面设计的参数规范1.2不同设备设计标准及规范具体App界面组成如图1-16所示。1.2.1iOS界面设计图1-16

App界面组成示意图1.2不同设备设计标准及规范

在iOS开发中，需要为应用程序准备多个尺寸的图标，以适应不同的设备和显示情况。App图标尺寸一般包括AppStore、程序应用、主屏幕、搜索栏、标签栏、工具栏、导航栏等图标。iOS系统界面图标设计的参数规范如表1-3所示。设备AppStore程序应用主屏幕搜索图标标签栏工具栏/导航栏iPhone4/4s(@2x)1024px×1024px120px×120px114px×114px58px×58px75px×75px44px×44pxiPhone5/5s/5c(@2x)1024px×1024px120px×120px114px×114px58px×58px75px×75px44px×44pxiPhone6/6s/7/8/SE（第二代及以后）(@2x)1024px×1024px120px×120px114px×114px58px×58px75px×75px44px×44pxiPhone6Plus/6sPlus/7Plus/8Plus(@3x)1024px×1024px120px×120px114px×114px87px×87px75px×75px66px×66pxiPhoneX/11-17系列

(@3x)1024px×1024px180px×180px114px×114px87px×87px75px×75px66px×66px表1-3

iOS系统图标设计的参数规范1.2.1iOS界面设计1.2不同设备设计标准及规范1.2.1iOS界面设计iOS开发中，倍图是指同一个图像在不同像素密度的设备上显示时，需要提供多个分辨率版本的图像。iOS采用了Retina显示技术，设备的像素密度有所不同，所以需要提供不同的倍图来适应不同设备。@1倍图：这是最基础的图像分辨率，用于非Retina设备，像素密度为1x。@2倍图：用于Retina设备，像素密度为2x。图像的宽度和高度分别是1x图的两倍。@3倍图：用于更高像素密度的Retina设备，像素密度为3x。图像的宽度和高度分别是1x图的三倍。

在开发中，通常我们会提供相应像素密度的倍图，以确保图像在不同设备上显示清晰和锐利。iOS会根据设备的像素密度自动加载适合的倍图，这样就能够在不同设备上获得最佳的图像显示效果，如图1-17所示。

图1-17

倍数切图标示意图1.2不同设备设计标准及规范1.2.1iOS界面设计iOS字体规范是苹果推荐的一套准则，用于设计和开发iOS应用中的字体。主要要点包括使用系统提供的字体，如SanFrancisco和HelveticaNeue，选择合适的字体大小，使用粗体和斜体突出重点内容，注意行高和字距，确保可读性和一致性。字体的使用还应该考虑用户偏好设置来调整字体大小及字体的粗细，确保足够的视觉对比，使用适当字体和字号区分标题和段落，选择适合背景的文本颜色。遵循iOS字体规范可以提供一致性的用户体验，并确保文本在不同设备和屏幕尺寸上显示清晰和易读。下面我们通过对比一些用户量比较多、设计比较成熟的头部互联网公司App，来总结字号、字重、字间距的规律，如图1-18、图1-19所示。图1-19

钉钉App文字使用规范示意图1-18

支付宝App文字使用规范示意1.2不同设备设计标准及规范1.2.1iOS界面设计字体体系字号适用场景36px少数标题（导航标题、分类名称）32px少数标题（列表店铺标题）30px较为重要的文字或操作按钮28px段落文字（列表性商品标题）26px段落文字（小标题模块描述）24px辅助性文字（次要标语）22px辅助性文字（次要备注信息）支付宝与钉钉字号规律各模块字号、间距、字重参数均在特定范围内波动导航标题：30-36px列表标题：28-32px正文内容：24-28px辅助信息：22-24px备注说明：20-22px⚠字号必须为偶数！通过上述总结可发现，各应用的字体属性设置存在差异，但能明显看出规律：各模块的字号、间距、字重等参数均在特定范围内波动。需要注意的是，所有字号的设置均需为偶数，具体如表1-4所示。1.2不同设备设计标准及规范1.2.2Android设计标准及规范Android（安卓系统）是一款开源移动操作系统，具备极强的兼容性，可运行于不同品牌、不同型号的手机、平板电脑、智能手表等各类智能设备。开发者基于安卓系统开发的应用程序，能适配不同的屏幕尺寸、分辨率与设备功能并稳定运行，这种广泛的兼容性也让安卓系统成为适配多元设备的开放型智能平台。1.

基础概念（1）DPI。DPI（DotsPerInch，每英寸点数）是衡量空间点密度的单位，本义指屏幕密度，该概念最初应用于打印技术，代表每英寸可打印的墨滴数量，DPI数值越小，打印出的图像画质越模糊。此后DPI的概念也被延伸至计算机屏幕领域，尽管电脑屏幕通常以PPI（PixelsPerInch，每英寸像素数）表示每英寸屏幕的像素点数量，但目前DPI也已被引入该领域使用。（2）PPI。PPI（PixelsPerInch，像素每英寸）是图像分辨率的计量单位，指每英寸图像中包含的像素点数量。该参数常应用于

Photoshop等设计软件中，用于调整图像的显示清晰度。1.2不同设备设计标准及规范1.2.2Android设计标准及规范2.

Android界面设计规范安卓尺寸众多，设备比较多样化，不能按照每个屏幕去做适配，所以为了解决这个问题，安卓手机屏幕有自己初始的固定密度，安卓会根据这些屏幕不同的密度进行适配。屏幕分为低密度屏（LDPI）、中密度屏（MDPI）、高密度屏（HDPI）、超高密度屏（XHDPI）、超超高密度屏（XXHDPI）和超超超高密度屏（XXXHDPI）。这些屏幕之间的比例关系为3∶4∶6∶8∶12∶16。Android的密度划分以及代表的分辨率如表1-5所示。密度密度数分辨率倍数dp换算市场占比LDPI120240×3200.75x1dp=0.75px—MDPI160320×2801x1dp=1px★HDPI240480×8001.5x1dp=1.5px★★XHDPI320720×12802x1dp=2px★★★★XXHDPI4801080×19203x1dp=3px★★★★★表1-5

Android屏幕的像素密度对照表1.2不同设备设计标准及规范1.2.2Android设计标准及规范153.Android的开发单位Google公司为了方便计算，为Android提供了开发单位，包括长度单位DP和字体单位SP。（1）DP。DP是“密度无关像素（Density-independent

Pixel）”的缩写，是Android开发中用于定义界面尺寸的专用单位。和像素等绝对尺寸单位不同，DP属于相对单位，能够适配不同屏幕的像素密度，是保证安卓应用多设备显示一致性的核心单位之一。在Android系统中，设备屏幕的像素密度会随物理尺寸、分辨率的差异而变化。为了让应用界面在不同规格的设备上呈现出统一的显示效果，开发者可通过DP来设定各类界面元素的尺寸。DP的核心特性在于与屏幕物理像素密度相关联，通过这一相对计量方式，让界面元素在不同像素密度的屏幕上，能以相近的物理大小呈现。比如将按钮宽度设为100DP时，该按钮在不同像素密度的设备上，实际像素尺寸会随屏幕密度自动适配调整，最终保持视觉上的大小一致。（2）SP。SP是“可缩放像素（Scale-independentPixel）”的缩写，是在Android开发中用于表示字体尺寸的一种单位。与其他尺寸单位（如像素、DP）不同，SP考虑了用户设置的字体大小偏好，可以进行自动缩放。在Android系统中，用户可以根据自身喜好和需求调整系统的字体大小设置。SP单位会考虑用户设置的字体大小，并在显示字体时进行自动缩放。这样，无论用户的字体设置是较小还是较大，应用中的字体都能够按比例进行调整，以保持良好的可读性和用户体验。1.2不同设备设计标准及规范1.2.2Android设计标准及规范市场上使用Android的手机机型非常丰富，它们的屏幕尺寸和分辨率也各不相同。从目前的主流Android设备的尺寸来看，设计师可采用1080

px×1920

px作为AndroidApp界面设计稿的标准尺寸，如图1-20所示。以1080

px×1920

px作为设计稿标准尺寸可以从中间尺寸向上和向下适配的时候界面调整的幅度最小，最方便适配。大屏幕时代依然以小尺寸作为设计尺寸，会限制设计师的设计视角。用主流尺寸来做设计稿尺寸，极大地提高了视觉还原和其他机型的适配性。图1-20

AndroidApp界面设计稿尺寸1.2不同设备设计标准及规范1.2.2Android设计标准及规范5.Android的组件尺寸Android系统的手机界面也包含了状态栏、导航栏和标签栏3个系统组件（见表1-6）。因Android设备的尺寸种类非常多，不同分辨率的设备中的组件尺寸也可能不同。在实际工作当中，通常以1080 px×1920 px为标准尺寸设计界面，界面中各组件的名称与高度如图1-21所示。分辨率DPI状态栏高度导航栏高度标签栏高度720×1280XHDPI50 px96 px96 px1080×1920XXHDPI60 px114 px150 px图1-21

Android界面组件表1-6

界面组件尺寸1.2不同设备设计标准及规范1.2.2Android设计标准及规范156.

Android的图标尺寸安卓系统的图标尺寸在应用设计中十分重要。根据官方推荐，不同的图标应具有不同的尺寸以适应不同的显示场景（见图1-22、表1-7）。（1）启动图标。启动图标是指在安卓应用程序中用于表示应用的图标。它通常显示在设备的主屏幕上、应用列表中、任务管理器中等位置，用于快速识别和启动应用程序。（2）导航栏图标。导航栏图标是指在安卓应用程序中用于导航或操作的图标。它们通常位于应用界面的导航栏或工具栏上，用于提供快速的导航、操作或切换功能。（3）上下文图标。上下文菜单图标是用户与应用程序中的特定元素进行交互时出现的图标，用于提供相关的操作选项。这些图标通常显示在用户长按或点击特定元素（如文本、图像等）之后，弹出的上下文菜单中。上下文菜单图标的目的是提供与所选元素相关的操作，使用户能够对特定的内容进行更多的操作或选择。屏幕大小启动图标尺寸导航栏图标尺寸上下文图标尺寸系统通知图标尺寸最细画笔尺寸320 px×480 px48 px×48 px32 px×32 px16 px×16 px24 px×24 px不小于2 px480 px×800 px480 px×854 px72 px×72 px48 px×48 px24 px×24 px36 px×36 px不小于3 px720 px×1280 px96 px×96 px64 px×64 px32 px×32 px48 px×48 px不小于4 px1080 px×1920 px144 px×144 px96 px×96 px48 px×48 px72 px×72 px不小于6 px图1-22

图标常用尺寸表1-7

不同分辨率下的图标尺寸1.2不同设备设计标准及规范1.2.2Android设计标准及规范156.

Android的图标尺寸安卓系统的图标尺寸在应用设计中十分重要。根据官方推荐，不同的图标应具有不同的尺寸以适应不同的显示场景（见图1-22、表1-7）。（1）启动图标。启动图标是指在安卓应用程序中用于表示应用的图标。它通常显示在设备的主屏幕上、应用列表中、任务管理器中等位置，用于快速识别和启动应用程序。（2）导航栏图标。导航栏图标是指在安卓应用程序中用于导航或操作的图标。它们通常位于应用界面的导航栏或工具栏上，用于提供快速的导航、操作或切换功能。（3）上下文图标。上下文菜单图标是用户与应用程序中的特定元素进行交互时出现的图标，用于提供相关的操作选项。这些图标通常显示在用户长按或点击特定元素（如文本、图像等）之后，弹出的上下文菜单中。上下文菜单图标的目的是提供与所选元素相关的操作，使用户能够对特定的内容进行更多的操作或选择。屏幕大小启动图标尺寸导航栏图标尺寸上下文图标尺寸系统通知图标尺寸最细画笔尺寸320 px×480 px48 px×48 px32 px×32 px16 px×16 px24 px×24 px不小于2 px480 px×800 px480 px×854 px72 px×72 px48 px×48 px24 px×24 px36 px×36 px不小于3 px720 px×1280 px96 px×96 px64 px×64 px32 px×32 px48 px×48 px不小于4 px1080 px×1920 px144 px×144 px96 px×96 px48 px×48 px72 px×72 px不小于6 px图1-22

图标常用尺寸表1-7

不同分辨率下的图标尺寸1.2不同设备设计标准及规范1.2.2Android设计标准及规范7.

Android的文字设计规范Android系统的默认英文字体为Roboto，这是一款无衬线字体，专为在不同屏幕分辨率与尺寸下清晰显示文本而设计，Roboto字体共包含6种字重，具体如图1-23所示。Android系统的默认中文字体为思源黑体，该字体由Adobe与Google主导开发，是一款开源字体，支持中文简体、中文繁体、日文及韩文，共包含7种字体粗细（见图1-24）。其字形平稳、易读性佳，能够充分满足不同场景的设计需求。图1-23

Roboto字体的6种字重图1-24

思源黑体的7种字重1.2不同设备设计标准及规范1.2.2Android设计标准及规范

在安卓开发中，建议使用sp（可缩放像素）单位来设置文字字号（见表1-8）。与dp（密度无关像素）相比，sp可以根据用户对设备字体大小的偏好进行自动缩放调整，从而提供更好的可读性和用户体验。例如，安卓设计尺寸为720×1280，这个在安卓分辨率的分类中称为HDPI，在这个尺寸中2PX等于安卓中的1DP，这个时候1DP=1SP，30PX的文字可标注为15SP。常见主流手机尺寸和分辨率见表1-9。文字类型字号超大字号24 sp大字号20 sp标题字号18 sp次要标题字号16 sp正文字号14 sp辅助性字号12 sp设备分辨率尺寸设备分辨率尺寸iPhone162556px×1179px6.1英寸iPhone16Pro2796px×1290px6.3英寸iPhone16ProMax2992px×1396px6.9英寸华为Mate702720px×1260px6.82英寸华为P702760px×1256px6.6英寸小米152712px×1220px6.36英寸小米15Pro3200px×1440px6.73英寸荣耀

Magic72616px×1212px6.81英寸荣耀2002760px×1256px6.59英寸OPPOFindX82772px×1272px6.59英寸OPPOReno132556px×1179px6.59英寸vivoX2002800px×1260px6.59英寸vivoS202556px×1179px6.67英寸一加133168px×1440px6.83英寸三星GalaxyS252340px×1080px6.2英寸三星GalaxyS25Ultra3120px×1440px6.8英寸红米K802712px×1220px6.83英寸realmeGT72720px×1260px6.78英寸表1-8

各部分文字的字号表1-9常见主流手机尺寸和分辨率1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范HarmonyOS的诞生，源于华为对现有操作系统局限性的深刻洞察，以及对未来技术发展趋势的前瞻布局。传统操作系统在实现多设备无缝协同、支撑跨平台应用开发与运行方面存在明显短板，而华为的核心愿景，是打造一套统一的操作系统，让不同设备间能够实现高效的资源共享与协同交互，如图1-25所示。HarmonyOS（见图1-26）采用分布式架构设计，通过分布式技术实现多设备的互联互通与资源共享，让用户能在不同设备上无缝接续使用应用程序，同时达成数据的高速传输与实时同步。HarmonyOS打造了一套统一的开发工具与框架，助力开发者在各类设备上快速开发应用，大幅提升开发效率，同时增强应用的跨平台兼容性。HarmonyOS的研发初衷，是构建一套统一、安全、高效的全场景分布式操作系统。凭借分布式架构、高性能表现、统一的开发生态以及流畅的多设备协同体验等核心优势，为用户带来更优质的使用感受，也为开发者打造了更友好的开发环境。图1-25

HarmonyOS

适配多种终端图1-26

HarmonyOS图标1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范1.

HarmonyOS单位（1）vp。vp（virtualpixel，虚拟像素）是设备面向应用呈现的虚拟尺寸单位，与屏幕硬件本身的物理像素相区别。它为适配不同屏幕密度的显示效果，提供了灵活的实现方式（见图1-27）。相同的vp，在不同像素密度的屏幕上，对应不同px，二者的比值px/vp被称作像素密度比。该比值的计算方式为当前设备屏幕的dpi除以160：在dpi为160的OpenHarmony设备上，像素密度比为1，即1vp等同于1px。以vp作为尺寸标注单位，能让同一界面元素在不同像素密度的设备上呈现出一致的视觉大小；若使用px作为单位，则易出现元素视觉体量不一致的问题。（2）fp。fp（Fontpixel，字体像素）是在数字字体（digitalfont）或计算机字体中使用的基本像素单位，也是用于定义和描述字符形状的最小单元。fp大小默认情况下与vp相同，即默认情况下1

fp=

1vp。如果用户在设置中选择了更大的字体，字体的实际显示大小就会在vp的基础上乘以scale系数，即1

fp=

1vp×scale。图1-27

同一元素在不同像素密度设备上显示效果1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范2.

HarmonyOS组件尺寸HarmonyOS是一种面向多设备的操作系统，其界面设计尺寸根据不同设备类型和屏幕尺寸而变化。无论是手机、平板电脑、智能手表还是智能电视，设计师需要根据设备的屏幕尺寸来合理布局界面元素。（1）常见的手机屏幕尺寸包括5.5英寸、6.0英寸、6.4英寸等，设计师通常会针对不同屏幕尺寸进行适配，具体的设计尺寸可以根据目标用户群体和应用需求来确定。（2）平板电脑通常具有较大的屏幕尺寸，例如10.1英寸、12.6英寸等，设计师在进行HarmonyOS平板电脑界面设计时需要考虑屏幕的大尺寸优势，充分利用屏幕空间呈现更丰富的内容和功能。（3）智能电视通常具有较大的屏幕尺寸，例如55英寸、65英寸等，设计师可以利用大屏幕的优势来展示更丰富的内容、更复杂的操作和交互。1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范3.

HarmonyOS文字设计规范华为通过研究用户在不同场景下使用多终端设备的阅读反馈，综合考量各类设备的屏幕尺寸、实际使用场景等因素，同时兼顾用户因视距、视角差异产生的字体大小与字重需求，为HarmonyOS设计了全新的系统默认字体——

HarmonyOSSans，该字体有6种字重（见图1-28），向所有用户免费开放使用。字体直接影响界面的展示效果和用户的阅读效率。优秀的字形设计、统一的多语言字形风格、正确的字体排版，能有效地提升应用使用体验，并传递品牌连续性。通过研究全场景设备的显示环境、用户使用时环境的差异，OpenHarmony结合分层参数为不同设备形态提供了一套构建信息层级的字号系统（见图1-29）。图1-28

HarmonyOSSans的6种字重图1-29

HarmonyOSSans为不同设备构建信息层级的字号系统1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范3.

HarmonyOS文字设计规范华为通过研究用户在不同场景下使用多终端设备的阅读反馈，综合考量各类设备的屏幕尺寸、实际使用场景等因素，同时兼顾用户因视距、视角差异产生的字体大小与字重需求，为HarmonyOS设计了全新的系统默认字体——

HarmonyOSSans，该字体有6种字重（见图1-28），向所有用户免费开放使用。字体直接影响界面的展示效果和用户的阅读效率。优秀的字形设计、统一的多语言字形风格、正确的字体排版，能有效地提升应用使用体验，并传递品牌连续性。通过研究全场景设备的显示环境、用户使用时环境的差异，OpenHarmony结合分层参数为不同设备形态提供了一套构建信息层级的字号系统（见图1-29）。图1-28

HarmonyOSSans的6种字重图1-29

HarmonyOSSans为不同设备构建信息层级的字号系统1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范4.

HarmonyOS图标设计规范HarmonyOS的系统图标遵循精致简约、独特考究的设计原则，以几何形态构建图形基底，精简线条结构并精准把控比例关系；同时，在造型与隐喻表达中融入年轻化设计语言，让整体风格更具年轻时尚感；设计上摒弃尖锐直角的使用，从视觉情感层面为用户传递出亲近、友好的使用体验（见图1-30）。HarmonyOS中的功能图标通常使用24

vpX24

vp作为标准尺寸，为了保证图标的美观性及切图的考虑，上下左右各留1vp的边距，实际图标绘制区域为22

vpX22

vp，换算成像素为44

pxX

44

px，如图1-31所示。不同形状的图标绘制尺寸规范也会有所差别，图标切图大小为24

vpX24

vp，具体内容需要按照图形特性，如图1-32所示。图1-31

图表绘制区域及留1vp边距图1-32

不同形状图标绘制尺寸图1-30

HarmonyOS应用图标总览1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范17如果图标形状特殊，需要添加额外的视觉重量实现整体图标体量平衡，绘制区域可以延伸到空隙区域内，但图标整体仍应保持在24

vp大小的范围之内，如图1-33所示。绘制时找准图标视觉重心，使其在图标区域中心，HarmonyOS允许在保证图标重心稳定的情况下，图标部分超出绘制活动范围，延伸至间隙区域内，如图1-34所示。HarmonyOS中的图标在绘制时，默认描边粗细为1.5 vp，终点样式为圆头，外圆角半径为4 vp，内圆角半径为2.5 vp，端口宽度为1 vp，如图1-35所示。图1-33

特殊形状图标的尺寸范围图1-34

图表重心对比图1-35

图标图形的绘制特征1.2不同设备设计标准及规范1.2.3HarmonyOS设计标准及规范17如果图标形状特殊，需要添加额外的视觉重量实现整体图标体量平衡，绘制区域可以延伸到空隙区域内，但图标整体仍应保持在24

vp大小的范围之内，如图1-33所示。绘制时找准图标视觉重心，使其在图标区域中心，HarmonyOS允许在保证图标重心稳定的情况下，图标部分超出绘制活动范围，延伸至间隙区域内，如图1-34所示。HarmonyOS中的图标在绘制时，默认描边粗细为1.5 vp，终点样式为圆头，外圆角半径为4 vp，内圆角半径为2.5 vp，端口宽度为1 vp，如图1-35所示。图1-33

特殊形状图标的尺寸范围图1-34

图表重心对比图1-35

图标图形的绘制特征1.2不同设备设计标准及规范1.2.4B端设计标准1.2.4B端设计标准及规范B端即商业（Business）端，特指面向企业与各类机构的市场及服务领域。该领域的产品与服务核心受众为企业、机构及专业从业者，供需双方的合作关系具备更强的专业性与复杂性。B端设计则是商业场景下，针对企业和机构用户的产品与服务设计工作，其核心目标是满足商业用户的专业需求，同时助力企业提升商业运营效率，如图1-36所示。C端设计指的是针对普通消费者（Consumers）的产品和服务设计。它着重于创造愉悦、易用和吸引人的用户体验，以满足个人用户的需求和期望，如图1-37所示。B端和C端产品在需求上最大的不同，就是所解决问题的主体对象不同：C端产品是为了解决用户的需求，从功能的制定到交互和设计都围绕目标用户展开；而B端产品要解决的是企业运营的问题，以可以完整地实现目标功能为核心。图1-37

C端界面设计1.2不同设备设计标准及规范1.2.4B端设计标准1.B端设计的内容B端产品是一套综合性商业系统，系统内包含大量信息与操作功能，设计的核心任务之一，便是搭建标准化布局框架，将各类信息与操作功能整合其中，以此实现有序、统一的操作体验。B端系统的用户主流使用分辨率为1920x1080、1366x768、1440x900，部分系统还会适配1280系列显示设备，需通过动态适配布局，保障内容在不同分辨率下的正常展示。B端界面的常规布局模块包含导航栏、工具栏与内容区，主流布局形式分为上下布局、左右布局两类。其中左右布局的常用设计方案为：左侧导航栏设置固定宽度，顶部栏（如有）设置固定高度