本節内容不僅适用于鴻蒙UI設計師，也是鴻蒙App開發工程師的必修課。掌握了本節闡述的關鍵設計規範，為開發出标準、優質的鴻蒙App打下必要的理論基礎。本節涉及的很多參數，不用記憶，隻要了解、留下印象即可。後面會提供封裝好的架構環境，直接調用即可。
2.3.1 UX人因研究架構
人因研究通常會從使用者、裝置、使用環境三要素對設計問題進行剖析，并開展相應的人因實驗，促使設計更新疊代，達到相應的使用者體驗目标。
使用者：考慮使用者的基本人口統計特征（年齡、職業等），使用不同裝置時的姿态與視角，使用裝置時對認知資源的占用情況等。
裝置：考慮裝置尺寸，裝置顯示能力（分辨率、顯示色域等），互動方式（觸摸、語音等），互動時長等。
環境：考慮裝置所處的實體環境（環境光、環境音、使用距離等），社會環境（私人或公共裝置）等。
HarmonyOS UX人因研究
已有研究主要從全場景UX人因和多裝置UX人因等領域開展，其中多裝置UX人因研究覆寫裝置：手機、折疊屏、平闆、PC、智慧屏、智能穿戴、耳機、VR&AR等。 通過人因實驗，對不同環境光中、不同模式(深色模式/淺色模式/透明模式)、不同尺寸和分辨率裝置的頁面視覺易讀舒适性，對色彩、對比度、字号、間隔等進行模組化。
HarmonyOS UX設計三要素
HarmonyOS 是一款面向全場景智慧生活方式的分布式作業系統。 當為多種不同的裝置開發應用時，需要從如下三個方面來考慮UX設計：
差異性： 充分了解所要支援的裝置，包括螢幕尺寸、互動方式、使用場景、使用者人群等，對裝置的特性進行針對性的設計。
一緻性：除了要考慮每個裝置的特性外，還需要考慮不同裝置的共性，并使用通用性設計方法提供既符合裝置差異性，又具有跨裝置一緻性的設計，進而減少使用者學習的難度，降低應用開發的成本。
協同性： 當考慮多個裝置之間的互相協同時，需要了解裝置與裝置之間多種可能的協同模式，最大程度地展現 HarmonyOS 上獨特的多裝置無縫流轉體驗。
2.3.2 顔色
宇宙藍
HarmonyOS 采用宇宙藍作為系統的主色調， 為系統帶來宇宙初開的純淨與甯靜。根據人因研究，對藍色的接受度無論是在男性還是女性群體中，比例都是最高的。而在世界地域次元，藍色也是最受歡迎的顔色。更重要的是，對于大多數色覺障礙人士，藍色依然可以被辨識，這滿足了 HarmonyOS 為障礙人群而設計的要求。
在色彩設計上，既保持統一的色彩語言，又根據多端不同的使用場景做了調整，帶來定制化使用者體驗。
雪域灰
自然裡面，沒有絕對的黑也沒有絕對的白，以帶有淡藍色相的雪域灰作為卡片界面的背景顔色來烘托界面的純淨感。 雪域灰可用于卡片界面的底色來襯托卡片層級感，或者可用于深色主題下的前景顔色，使深色場景的前景與背景對比度不會過高，減輕視覺刺激。
根據顔色應用的場景，可以将鴻蒙App開發中用到的顔色分為四類：系統色、控件色、 文本/圖示色和多彩色闆。
系統色： 為其他非控件場景提供的基礎顔色，可配合透明度疊加使用。
控件色：控件背景色、前景色及邊框顔色。
文本/圖示色：提供文本和圖示的顔色層次。
多彩色闆： 提供11種高飽和色和11種低飽和色，用于小面積、高提示性内容；提供11種莫蘭迪色，用于大面積背景色塊内容。另外提供12種智能穿戴裝置專用顔色。
以下每組五種顔色，每種顔色上面标記了該顔色适用的場景和色值。其中：
light：代表該顔色适用于“手機/平闆/折疊屏”的淺色模式；
dark：代表該顔色适用于“手機/平闆/折疊屏”的深色模式；
alpha：代表該顔色适用于“手機/平闆/折疊屏”的透明模式；
tv：代表該顔色适用于智慧屏；
wearable：代表該顔色适用于智能穿戴裝置。
每組顔色之前，有該顔色的命名和使用場景說明。
系統色
控件色
文本/圖示色
多彩色闆
2.3.3 字型字号
全新 HarmonyOS 字型
通過研究使用者在不同場景下對多終端裝置的閱讀回報，綜合考量不同裝置的尺寸、使用場景等因素，同時也考慮使用者使用裝置時因視距、視角的差異帶來的字型大小和字重的不同訴求， HarmonyOS 設計了全新系統預設的字型——HarmonyOS Sans。
統一多語言字形風格
HarmonyOS重新設計了中文、拉丁文、希利爾文、希臘文、阿拉伯文的字形樣式，支援100+語言，讓多語言下閱讀體驗更加一緻。
HarmonyOS 字型特性
動态字重粗細調節： HarmonyOS Sans支援可變特性，讓使用者選擇他們喜歡的字型粗細來進行文本的顯示。
支援更多字重能力： HarmonyOS Sans增加了Thin、Light、Bold、Black的字重能力，開發者可以選擇需要的字重來建構界面的資訊層級。
等寬與變寬數字字型： HarmonyOS Sans支援變寬和等寬兩種樣式。文本混排中使用系統預設的變寬數字，在閱讀文本段落中能讓閱讀體驗更加連貫。而等寬時鐘數字在需要強調數值以及資料需要經常變化的表格和時鐘數字的場景中使用時，可以保持數字字寬的對齊，同時更具圖形化的呈現可以在界面中脫穎而出。
支援時鐘字型特性： HarmonyOS Sans支援時鐘字型特性，冒号格式會根據時間格式自動調整位置。
多裝置字号層級
選擇合适的字号有助于定義内容的資訊層級，以及達到内容的可讀性。通過研究全場景裝置的顯示環境、使用者使用時環境的差異，HarmonyOS為不同裝置形态定義了一套建構資訊層級的字号系統。
在下表中，展示各類裝置的字号和字重，如"96fp / 300"，"96fp"代表字号，“300”代表字重(文字的粗細)。智能穿戴中的“70fp / 400(500)”，其中，400代表正常時的字重，500代表展示運動健康資料時的字重。
vp： 虛拟像素(virtual pixel)是一台裝置針對應用而言所具有的虛拟尺寸（差別于螢幕硬體本身的像素機關）。它提供了一種靈活的方式來适應不同螢幕密度的顯示效果。
fp：中文全稱字型像素，英文為Font pixels，字型像素大小預設情況下與vp相同，但如果開發者在設定中修改了字型顯示大小，就會在vp的基礎上乘以scale系數。
| ID | 手機/折疊屏/平闆/車機 | 智慧屏 | 智能穿戴 | 使用場景 |
|---|---|---|---|---|
| H1 | 96fp / 300 | 96fp / 300 | 70fp / 400(500) | 展示類資料文本 |
| H2 | 72fp / 300 | 72fp / 300 | 52fp / 400(500) | 展示類資料文本 |
| H3 | 60fp / 300 | 60fp / 300 | 46fp / 400(500) | 展示類資料文本 |
| H4 | 48fp / 400 | 48fp / 400 | 36fp / 400(500) | 展示類資料文本 |
| H5 | 38fp / 400 | 40fp / 400 | 30fp / 400(500) | 展示類資料文本 |
| H6 | 30fp / 500 | 36fp / 500 | 24fp / 500 | 大标題/強調型文本 |
| H7 | 24fp / 500 | 30fp / 500 | 19fp / 500 | 二級标題/強調型文本 |
| H8 | 20fp / 500 | 24fp / 500 | 16fp / 500 | 頁簽标題 |
| SubTitle1 | 18fp / 500 | 20fp / 500 | 19fp / 500 | 分組大标題 |
| SubTitle2 | 16fp / 500 | 18fp / 500 | 16fp / 500 | 分組标題 |
| SubTitle3 | 14fp / 500 | 16fp / 500 | 16fp / 500 | 分組小标題 |
| Body1 | 16fp / 400 | 18fp / 400 | 18fp / 500 | 清單正文文本/段落文本 |
| Body2 | 14fp / 400 | 16fp / 400 | 16fp / 400 | 清單輔助文本/段落文本 |
| Body3 | 12fp / 400 | 14fp / 400 | 14fp / 400 | 清單輔助文本/圖文說明 |
| Button1 | 16fp / 500 | 18fp / 500 | 19fp / 500 | 大按鈕文本 |
| Button2 | 14fp / 500 | 14fp / 500 | 16fp / 500 | 小按鈕文本 |
| Caption1 | 10fp / 400 | 12fp / 400 | 13fp / 400 | 隐私說明文本 |
| Caption2 | 10fp / 400 | 10fp / 400 | 10fp / 400 | 最小顯示文本 |
| Overline | 14fp / 400 | 16fp / 400 | 16fp / 400 | 大标題輔助說明文本 |
| Chart | 10fp / 400 | 10fp / 400 | 10fp / 400 | 圖表刻度文本 |
字型規範
中文預設字型為 HarmonyOS Sans，西文預設使用 HarmonyOS Sans Condensed；手表上所有字型優先使用窄體屬性（Condensed）。
2.3.4 間隔
螢幕邊緣間隔
| 螢幕邊緣類型 | 手機/折疊屏/平闆/車機 | 智慧屏 | 智能穿戴 |
|---|---|---|---|
| 上（spaceTop） | 24vp | 27vp | 6vp |
| 下（spaceBottom） | 24vp | 27vp | 6vp |
| 左（spaceLeft） | 24vp | 48vp | 26vp |
| 右（spaceRight） | 24vp | 48vp | 26vp |
注意：如果是手機豎屏觀看時，螢幕上邊緣間隔為48vp，橫屏時螢幕上邊緣間隔為24vp。
文本間間隔
| 間隔方向 | 手機/折疊屏/平闆/車機 | 智慧屏 | 智能穿戴 |
|---|---|---|---|
| 縱向間隔（spaceTextVertical） | 2vp | 8vp | 2vp |
| 橫向間隔（spaceTextHorizontal） | 8vp | 20vp | 2vp |
段落間間隔
| 間隔級别 | 手機/折疊屏/平闆/車機 | 智慧屏 | 智能穿戴 |
|---|---|---|---|
| 一級（spaceTextParagraph_XL） | 48vp | 32vp | 16vp |
| 二級（spaceTextParagraph_L） | 24vp | 24vp | 12vp |
| 三級（spaceTextParagraph_M） | 16vp | 16vp | 6vp |
| 四級（spaceTextParagraph_S） | 8vp | 8vp | 4vp |
| 五級（spaceTextParagraph_XS） | 4vp | 4vp | 2vp |
元素間間隔
| 間隔類型 | 手機/折疊屏/平闆/車機 | 智慧屏 | 智能穿戴 |
|---|---|---|---|
| 卡片間隔（spaceCard） | 12vp | 24vp | 26vp |
| 控件間隔-大（space_L） | 16vp | 24vp | 12vp |
| 控件間隔-小（space_S） | 8vp | 12vp | 8vp |
2.3.5 圓角
圓角的大小會影響使用者的心理感受，越鋒利的角度越具有壓迫感，圓角的使用能夠帶來一定的視覺活力。
智慧屏定義了界面内出現的卡片圓角的參數，視覺系統目前支援五種通用圓角大小，應用于進度條、圖示、宮格、文本框等場景。
通用圓角
| 圓角類型 | 手機/折疊屏/平闆/車機/智慧屏/智能穿戴 |
|---|---|
| 通用超大圓角（radius_XL） | 24vp |
| 通用大圓角（radius_L） | 16vp |
| 通用中圓角（radius_M） | 12vp |
| 通用小圓角（radius_S） | 8vp |
| 通用超小圓角（radius_XS） | 4vp |
控件圓角
| 圓角類型 | 手機/折疊屏/平闆/車機/智慧屏/智能穿戴 |
|---|---|
| 進度條（radiusProgressBar） | 2vp |
| 子頁簽（radiusSubTab） | 4vp |
| 點選效果（radiusClicked） | 8vp |
| 單選框（radiusRadio） | 4vp |
| 網格（radiusGrid） | 12vp |
| 菜單欄（radiusMenuBar） | 20vp |
| 菜單面闆（radiusMenuPanel） | 16vp |
| 橫幅（radiusBanner） | 12vp |
| 圖示（radiusIcon） | 8vp |
| 開關（radiusSwitch） | 10vp |
| 操作塊（radiusChips） | 14vp |
| 新事件标記（radiusBadge） | 14vp |
| 狀态按鈕（radiusStatusButton） | 14vp |
| 卡片（radiusCard） | 16vp |
| 分享（radiusShare） | 16vp |
| 打開方式（radiusOpen） | 16vp |
| 單行文本框（radiusInput） | 20vp |
| 多行文本框（radiusTextArea） | 16vp |
| 搜尋框（radiusSearchBar） | 18vp |
| 提醒（radiusToast） | 18vp |
| 即時回報（radiusDialog） | 24vp |
| 大按鈕（radiusButton_L） | 20vp |
| 小按鈕（radiusButton_S） | 14vp |
| 可滑動面闆（radiusSwipePanel） | 32vp |