鴻蒙系統(tǒng)UI標準：HarmonyOS中的標準顏色淺析
上一篇文章中列舉了HarmonyOS中的標準小圖標，這次再來總結下HarmonyOS中的標準顏色。涉及到顏色的使用主要包括：文本的顏色、控件的顏色、前景色、背景色、漸變色，以及不同場景、不同設備中的顏色使用習慣。本篇文章主要是整理官網中描述的所有顏色標準。
在官方提供文檔中，把顏色稱之為色彩，那我們還是遵從官方標準，姑且稱呼其為色彩。色彩能夠賦予應用界面足夠的生動性，并提供用戶在視覺感官上的連續(xù)性。同時，合理的運用色彩可以傳達關鍵的狀態(tài)信息，提供即時的狀態(tài)反饋以及呈現(xiàn)數(shù)據(jù)可視化的解決方式。
HarmonyOS 采用天藍色作為系統(tǒng)的主色調。根據(jù)人因研究，對藍色的接受度無論是在男性還是女性群體中，比例都是最高的。而在世界地域維度，藍色也是最受歡迎的顏色。更重要的是，在視覺障礙的人群中，藍色依然能被清晰的辨識，這滿足了 HarmonyOS 為無障礙人群而設計的要求。
HarmonyOS 在色彩體系中，根據(jù)對色彩的解讀、元素的使用場景來定義系統(tǒng)色板以及多彩色板。保證色彩在使用場景和寓意的一致性，有利于用戶在不同界面中都能清晰地作出判斷和選擇。
1. 系統(tǒng)色
系統(tǒng)顏色是為其他非控件場景提供的基礎顏色，可配合透明度疊加使用。HarmonyOS 的色彩系統(tǒng)包含不同場景下元素的色彩定義(例如前景元素、背景元素、可操作元素等)，以及根據(jù)人因研究結果定義的同一場景下不同設備的色彩值。
2. 文本、圖標、控件顏色
HarmonyOS 中的顏色靈感來自大膽的色調、柔和的環(huán)境、陰影與高光的結合。我們所構建的是一個一致的、有層次的顏色系統(tǒng)。
控件公共色
IoT 設備狀態(tài)文字顏色
控件提供的通用顏色場景，文本、圖標或其他圖形可使用。為了便于顏色的的分辨，外邊框用采用黑色渲染，黑色邊框內部的顏色則為目標顏色。
文本、圖標、控件顏色示例
3. 多彩色板
定義了前景色和背景色，色彩主要使用場景是運動健康的數(shù)據(jù)顏色和App顏色。
系統(tǒng)多彩色板
多彩色板使用示例
4. 運動健康數(shù)據(jù)顏色
定義了各種運動健康數(shù)據(jù)類型的顏色，主要使用在運動健康App。
運動健康數(shù)據(jù)顏色示例
5. 不透明度
配合系統(tǒng)色或控件色使用的不透明度，不同狀態(tài)對應不同的不透明度。
6. 漸變樣式
組件普遍支持的在style或css中設置的 可以平穩(wěn)過渡兩個或多個指定的顏色。
開發(fā)框架支持線性漸變 (linear-gradient)和重復線性漸變 (repeating-linear-gradient)兩種漸變效果。
線性漸變/重復線性漸變
1. 使用漸變樣式，需要定義過渡方向和過渡顏色。
過渡方向：通過direction或者angle指定：
direction：進行方向漸變
angle：進行角度漸變
- background: linear-gradient(direction/angle, color, color, ...);
- background: repeating-linear-gradient(direction/angle, color, color, ...);
2. 過渡顏色：支持以下四種方式：#ff0000、#ffff0000、rgb(255, 0, 0)、rgba(255, 0, 0, 1)。需要指定至少兩種顏色。
參數(shù)
示例
- #gradient {
- height: 300px;
- width: 600px;
- }
默認漸變方向為從上向下漸變(如下圖所示)
- /* 從頂部開始向底部由紅色向綠色漸變。 */
- background: linear-gradient(red, #00ff00);
45度夾角漸變(如下圖所示)
- /* 45度夾角，從紅色漸變到綠色 */
- background: linear-gradient(45deg, rgb(255,0,0),rgb(0, 255, 0));
設置方向為to right為從左向右漸變(如下圖所示)
- /* 從左向右漸變，在距離左邊90px和距離左邊360px (600*0.6) 之間270px寬度形成漸變*/
- background: linear-gradient(to right, rgb(255,0,0) 90px, rgb(0, 0, 255) 60%);
從左向右漸變，重復漸變(如下圖所示)
- /* 從左向右重復漸變，重復漸變區(qū)域30px（60-30）透明度0.5 */
- background: repeating-linear-gradient(to right, rgba(255, 255, 0, 1) 30px,rgba(0, 0, 255, .5) 60px);
