應(yīng)用UX設(shè)計(jì)原則

設(shè)計(jì)原則

當(dāng)為多種不同的設(shè)備開發(fā)應(yīng)用時(shí)，有如下設(shè)計(jì)原則：

差異性

充分了解所要支持的設(shè)備，包括屏幕尺寸、交互方式、使用場(chǎng)景、用戶人群等，對(duì)設(shè)備的特性進(jìn)行針對(duì)性的設(shè)計(jì)。

一致性

除了要考慮每個(gè)設(shè)備的特性外，還需要考慮不同設(shè)備的共性，并使用通用性設(shè)計(jì)方法提供既符合設(shè)備差異性，又具有跨設(shè)備一致性的設(shè)計(jì)，從而減少用戶學(xué)習(xí)的難度，降低應(yīng)用開發(fā)的成本。

靈活性

在硬件能力、交互方式、使用場(chǎng)景類似的設(shè)備上，應(yīng)主要考慮布局位置、內(nèi)容寬度、橫向組件數(shù)量的調(diào)整，避免出現(xiàn)因橫豎屏切換、窗口尺寸變化造成的界面元素不合理空白、模糊、變形、截?cái)嗟膯?wèn)題。

兼容性

在硬件能力、交互方式、使用場(chǎng)景差異較大的設(shè)備上，除了考慮布局位置、內(nèi)容寬度、橫向組件數(shù)量，還需支持不同的輸入方式、考慮功能架構(gòu)的調(diào)整，避免出現(xiàn)輸入不識(shí)別、功能不可以用、使用困難的問(wèn)題。

開發(fā)前請(qǐng)熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]

設(shè)計(jì)要點(diǎn)

很多用戶的多設(shè)備體驗(yàn)以默認(rèn)設(shè)備為核心或從默認(rèn)設(shè)備往外延伸，因此，圍繞全場(chǎng)景體驗(yàn)的OpenHarmony UX設(shè)計(jì)，將優(yōu)先確保用戶在不同的設(shè)備上獲得跟使用默認(rèn)設(shè)備類似的體驗(yàn)，同時(shí)充分利用設(shè)備的優(yōu)勢(shì)使體驗(yàn)最大化。

在進(jìn)行OpenHarmony的多設(shè)備應(yīng)用設(shè)計(jì)時(shí)，需考慮應(yīng)用以下內(nèi)容：

自適應(yīng)應(yīng)用架構(gòu)

使用自適應(yīng)應(yīng)用架構(gòu)，可以確保應(yīng)用在不同終端上，以最佳的導(dǎo)航形式來(lái)訪問(wèn)應(yīng)用。OpenHarmony 在開發(fā)SDK上提供了便利，開發(fā)者可以通過(guò)簡(jiǎn)單配置輕松完成，無(wú)需從0開始構(gòu)建。

例如：默認(rèn)設(shè)備上的底Tab的結(jié)構(gòu)，在Pad上一般使用側(cè)邊Tab來(lái)代替，在大屏上則是頂部Tab。

應(yīng)用導(dǎo)航結(jié)構(gòu)設(shè)計(jì)要求

應(yīng)用中的導(dǎo)航用于引導(dǎo)用戶在應(yīng)用的各個(gè)頁(yè)面進(jìn)行瀏覽。好的導(dǎo)航讓用戶知道身處何處，去往何方，以及來(lái)自哪里。

導(dǎo)航的原則

導(dǎo)航需要遵循以下原則：

• 一致 ：導(dǎo)航操作的結(jié)果應(yīng)該與用戶的期望保持一致。相同或類似的場(chǎng)景使用用戶熟悉的界面布局和控件，在多設(shè)備上確保一致的應(yīng)用架構(gòu)和導(dǎo)航行為，讓用戶無(wú)論在什么頁(yè)面，都知道如何導(dǎo)航。例如二級(jí)界面使用左上角的返回按鈕來(lái)返回界面的上一個(gè)層級(jí)。
• 清晰 ：導(dǎo)航應(yīng)該提供清晰的路徑。用戶使用的時(shí)候，邏輯關(guān)系簡(jiǎn)單且容易理解，能夠知道當(dāng)前處在界面的什么位置，操作后將會(huì)跳轉(zhuǎn)到什么位置，不會(huì)迷失方向。例如使用底部頁(yè)簽，讓用戶在平級(jí)頁(yè)面之間進(jìn)行切換。

導(dǎo)航要避免以下設(shè)計(jì)：

• 層級(jí)過(guò)深 ：導(dǎo)航層級(jí)建議在三層以內(nèi)。對(duì)于太深的層次，會(huì)帶來(lái)操作效率的問(wèn)題。如果確實(shí)需要深層級(jí)設(shè)計(jì)，建議使用面包屑設(shè)計(jì)或增加一鍵回到首頁(yè)的功能。
• 導(dǎo)航復(fù)雜 ：在側(cè)邊導(dǎo)航中，使用底部頁(yè)簽，會(huì)讓操作變得復(fù)雜，建議僅使用側(cè)邊導(dǎo)航。

導(dǎo)航的分類

常用的應(yīng)用導(dǎo)航有：平級(jí)導(dǎo)航、層級(jí)導(dǎo)航和混合導(dǎo)航。

平級(jí)導(dǎo)航

平級(jí)導(dǎo)航結(jié)構(gòu)中，頁(yè)面均處在同一層級(jí)。

使用場(chǎng)景：用于展示同等地位或同等層級(jí)的界面。

例如：以Tab方式組成的頁(yè)面。圖中照片、相冊(cè)、發(fā)現(xiàn)為一級(jí)界面，從視頻相冊(cè)進(jìn)入二級(jí)內(nèi)容界面。

多設(shè)備設(shè)計(jì)：可轉(zhuǎn)化導(dǎo)航類控件到符合設(shè)備體驗(yàn)的位置上。默認(rèn)設(shè)備上使用Tab導(dǎo)航，PAD和PC使用側(cè)邊Tab導(dǎo)航，智慧屏使用頂部Tab導(dǎo)航。

層級(jí)導(dǎo)航

層級(jí)導(dǎo)航結(jié)構(gòu)由父頁(yè)面和子頁(yè)面組成。父頁(yè)面可以有一個(gè)或多個(gè)子頁(yè)面。每個(gè)子頁(yè)面都有一個(gè)父頁(yè)面。

層級(jí)導(dǎo)航適用于多層級(jí)的復(fù)雜結(jié)構(gòu)。層級(jí)結(jié)構(gòu)深的內(nèi)容，用戶訪問(wèn)的路徑變長(zhǎng)，效率降低，可以通過(guò)適當(dāng)?shù)膶蛹?jí)穿透設(shè)計(jì)（例如：控制中心中的藍(lán)牙開關(guān)，解決了進(jìn)“設(shè)置-藍(lán)牙”界面設(shè)置操作路徑過(guò)長(zhǎng)的問(wèn)題）解決此問(wèn)題。

使用場(chǎng)景：頁(yè)面存在上下級(jí)關(guān)系的應(yīng)用。

例如：通過(guò)從內(nèi)容進(jìn)入后經(jīng)返回鍵返回之前的頁(yè)面。

多設(shè)備設(shè)計(jì)：可以考慮將上下層級(jí)的界面在同一界面展示。默認(rèn)設(shè)備和智慧屏上使用上下層級(jí)關(guān)系。平板和PC使用上分欄的方式展示內(nèi)容。

混合導(dǎo)航

在實(shí)際應(yīng)用設(shè)計(jì)中，僅使用平級(jí)或?qū)蛹?jí)導(dǎo)航可能無(wú)法應(yīng)對(duì)更復(fù)雜的業(yè)務(wù)結(jié)構(gòu)。此時(shí)需區(qū)分不同頁(yè)面的導(dǎo)航關(guān)系，對(duì)同等地位或同等層級(jí)的頁(yè)面使用平級(jí)導(dǎo)航結(jié)構(gòu)，對(duì)具有復(fù)雜關(guān)系的頁(yè)面使用層級(jí)導(dǎo)航結(jié)構(gòu)。

使用場(chǎng)景：應(yīng)用由幾個(gè)同等級(jí)的模塊組成，每個(gè)模塊又有上下層級(jí)關(guān)系頁(yè)面。

多設(shè)備設(shè)計(jì)：可以根據(jù)平級(jí)導(dǎo)航、層級(jí)導(dǎo)航自身的設(shè)計(jì)規(guī)則綜合運(yùn)用，一般平級(jí)導(dǎo)航優(yōu)先級(jí)比層級(jí)高。

響應(yīng)式界面布局

應(yīng)用會(huì)在不同的場(chǎng)景下使用，常見(jiàn)的有橫豎屏切換、分屏。這些場(chǎng)景會(huì)導(dǎo)致界面的尺寸和長(zhǎng)寬比例發(fā)生變化。因此需要考慮內(nèi)容的響應(yīng)式布局，確保在各種場(chǎng)景下都有最佳的顯示效果。

OpenHarmony 提供了多種布局能力，開發(fā)者通過(guò)組合運(yùn)用使內(nèi)容布局更符合業(yè)務(wù)需要與用戶預(yù)期。

例如：默認(rèn)設(shè)備上的滾動(dòng)banner，在其他設(shè)備上可進(jìn)行延伸，平板上露出更多banner，大屏上完全顯示兩張。

在不同類型的設(shè)備上，界面的尺寸和比例更為多樣，再加上使用上的差異，導(dǎo)致設(shè)計(jì)上更為復(fù)雜。為此，可以考慮使用分欄布局、重復(fù)布局、挪移布局、縮進(jìn)布局，進(jìn)一步解決內(nèi)容的顯示問(wèn)題。

例如：默認(rèn)設(shè)備上上下排布的大圖與列表，在長(zhǎng)寬比例更大的設(shè)備上可挪移到左右展示。

概述

布局不是靜態(tài)固定的，當(dāng)顯示環(huán)境發(fā)生變化時(shí)，如橫豎屏切換、調(diào)節(jié)字體大小、應(yīng)用分屏，要及時(shí)調(diào)整內(nèi)容的布局方式以適應(yīng)變化。本章提供了布局基礎(chǔ)的概念和介紹。

柵格系統(tǒng)

柵格系統(tǒng)是一個(gè)多設(shè)備下通用的輔助定位系統(tǒng)，適用于應(yīng)用窗口的整體布局，也支持界面局部?jī)?nèi)容使用。柵格系統(tǒng)由 Margin，Gutter，Column 三個(gè)屬性構(gòu)成。Margin是相對(duì)屏幕、窗口等父容器左右邊緣的距離，決定了內(nèi)容可展示的整體寬度；Gutter是每個(gè)Column的間距，決定內(nèi)容間的緊密程度； Column是內(nèi)容的占位元素，其數(shù)量決定了內(nèi)容的布局復(fù)雜度。Margin大小、Gutter大小、Column數(shù)量綜合決定Column的具體寬度。

通過(guò)柵格系統(tǒng)進(jìn)行布局，可以更好達(dá)到多設(shè)備下布局的一致性。

Margin、Gutter的大小、Column的數(shù)量均可自定義，界面內(nèi)容跟據(jù)Column的邊緣定位。通過(guò)采用不同數(shù)值調(diào)整內(nèi)容信息量和緊密程度，一般推薦使用4或8的倍數(shù)。例如Margin 32vp、Gutter 16vp、Column數(shù)量為4，或Margin 40vp、Gutter 24vp、Column數(shù)量為8。

交互歸一

交互歸一描述了在多種交互任務(wù)或場(chǎng)景下，應(yīng)用在觸屏上和其它常用的輸入方式（例如鼠標(biāo)、觸摸板、鍵盤）上分別對(duì)應(yīng)的正確的交互規(guī)則。設(shè)計(jì)師和開發(fā)者應(yīng)保證在當(dāng)前輸入方式下應(yīng)用能夠以正確的、符合用戶習(xí)慣的交互規(guī)則進(jìn)行響應(yīng)。通常情況下，系統(tǒng)已經(jīng)做好了這些事情，開發(fā)者只需正確調(diào)用。如果您的操作比較特別，您需要考慮多端上的交互歸一，以確保用戶體驗(yàn)的一致。

交互基礎(chǔ)

在全場(chǎng)景的數(shù)字體驗(yàn)中，越來(lái)越多類型的智能終端設(shè)備分布在用戶的日常生活中，可交互的用戶界面廣泛存在于默認(rèn)設(shè)備、平板、PC、智能穿戴設(shè)備、智慧屏、車機(jī)、虛擬現(xiàn)實(shí)（VR）和增強(qiáng)現(xiàn)實(shí)（AR）等設(shè)備上。應(yīng)用可能在多種設(shè)備上運(yùn)行或在單一設(shè)備上被用戶通過(guò)多種輸入方式操控，也可能在多種距離上被用戶操控。這需要其用戶界面能夠識(shí)別和支持不同的交互場(chǎng)景，以便用戶以習(xí)慣的、舒適的方法與其進(jìn)行交互。

輸入方式

典型的輸入方式包括但不限于觸屏上手指/手寫筆等直接交互、鼠標(biāo)/觸摸板/鍵盤/表冠/遙控器/車機(jī)搖桿/旋鈕/手柄/隔空手勢(shì)等間接交互、以及語(yǔ)音交互。

設(shè)計(jì)和開發(fā)應(yīng)用時(shí)， 設(shè)計(jì)師和開發(fā)者應(yīng)考慮到應(yīng)用具有使用多種輸入方式的可能性 ，并實(shí)現(xiàn)相應(yīng)的功能，保證在當(dāng)前輸入方式下應(yīng)用能夠以正確的、符合用戶習(xí)慣的方式進(jìn)行響應(yīng)。

交互距離

典型的設(shè)備交互距離包括但不限于15cm（智能穿戴設(shè)備）、30cm（默認(rèn)設(shè)備）、60cm（桌面設(shè)備）、260cm（大屏），具體距離會(huì)在用戶使用過(guò)程中產(chǎn)生一定范圍的變化。

設(shè)計(jì)和開發(fā)應(yīng)用時(shí)，設(shè)計(jì)師和開發(fā)者應(yīng)考慮到多種距離下使用的可能性，保證界面元素的大小、展示信息的密度符合用戶的預(yù)期。

視覺(jué)參數(shù)化

通過(guò)參數(shù)，方便的調(diào)整各端的視覺(jué)，使得各端具備該設(shè)備特有的風(fēng)格。在OpenHarmony中，邊距、圓角、陰影、字體大小等，都可以通過(guò)參數(shù)來(lái)進(jìn)行調(diào)整。

視覺(jué)基礎(chǔ)

虛擬像素單位：vp

虛擬像素(virtual pixel)是一臺(tái)設(shè)備針對(duì)應(yīng)用而言所具有的虛擬尺寸（區(qū)別于屏幕硬件本身的像素單位）。它提供了一種靈活的方式來(lái)適應(yīng)不同屏幕密度的顯示效果。

相同的vp，在不同像素密度的屏幕上，對(duì)應(yīng)不同px，一般稱px/vp為像素密度比。像素密度比為當(dāng)前設(shè)備屏幕的dpi/160。

在dpi為160的OpenHarmony設(shè)備上，像素密度比為1，則1vp等于1px。

以vp為尺寸標(biāo)注單位，可使相同元素在不同密度的設(shè)備上具有一致的視覺(jué)體量，使用px則容易導(dǎo)致體量不一致的問(wèn)題。

8vp網(wǎng)格系統(tǒng)

基于 8vp 為網(wǎng)格的基本單位可以對(duì)界面上元素的大小、位置、對(duì)齊方式進(jìn)行更好的規(guī)劃，構(gòu)建更有層次感、秩序感，以及多設(shè)備上一致的布局效果。一些更小的控件（例如圖標(biāo)）大小也可以對(duì)齊 4vp 的網(wǎng)格大小。

字體像素單位：fp

字體像素(font pixel) 大小默認(rèn)情況下與 vp 相同，即默認(rèn)情況下 1 fp = 1vp。如果用戶在設(shè)置中選擇了更大的字體，字體的實(shí)際顯示大小就會(huì)在 vp 的基礎(chǔ)上乘以 scale 系數(shù)，即 1 fp = 1 vp * scale。

視覺(jué)屬性：分層參數(shù)

分層參數(shù)是根據(jù)使用場(chǎng)景定義的視覺(jué)屬性ID，通過(guò)在不同色彩主題、多種設(shè)備上配置不同的數(shù)值，實(shí)現(xiàn)多設(shè)備適配的效果。OpenHarmony的分層參數(shù)包含色彩、字體、圓角、間距、陰影、模糊、縮放，并提供了默認(rèn)實(shí)現(xiàn)。設(shè)備、應(yīng)用、服務(wù)均可在此基礎(chǔ)上管理并自定義不同場(chǎng)景的視覺(jué)屬性。

例如，對(duì)于不同場(chǎng)景的主色調(diào)定義了對(duì)應(yīng)的ID與默認(rèn)實(shí)現(xiàn)

多態(tài)控件

應(yīng)用在多設(shè)備上運(yùn)行，設(shè)備也可在不同交互方式下使用?？丶鳛閼?yīng)用的基礎(chǔ)組成部分，需要支持不同的設(shè)備，且在視覺(jué)、交互、動(dòng)效等表現(xiàn)形式上針對(duì)設(shè)備進(jìn)行必要的調(diào)整，達(dá)到最佳體驗(yàn)。因此，同一控件在不同的設(shè)備上會(huì)呈現(xiàn)出不同的形態(tài)，稱為多態(tài)控件。

OpenHarmony默認(rèn)提供支持多設(shè)備的控件，開發(fā)者可以直接使用并對(duì)不同狀態(tài)進(jìn)行自定義。例如平板可以連接藍(lán)牙鍵盤和鼠標(biāo)來(lái)做文字編輯工作，此時(shí)控件需要同時(shí)滿足鍵盤和鼠標(biāo)交互，需要支持獲焦態(tài)和懸停態(tài)。

針對(duì)性優(yōu)化

在上述設(shè)計(jì)內(nèi)容以外，在具體設(shè)備上，推薦針對(duì)性地進(jìn)行特殊的操作和布局優(yōu)化，使之符合當(dāng)前設(shè)備的使用習(xí)慣。

例如：在以鍵鼠操作的界面上，為確保用戶的使用習(xí)慣，需要提供額外的設(shè)計(jì)。

審核編輯 黃宇