隨著鴻蒙系統的逐漸成熟，似乎大量的產品又將面臨又一輪的應用適配工作。面對越來越復雜的應用功能與界面，越來越多操作系統和多樣化的設備類型，設計師應該如何優化自己的設計思維，才能滿足數字產品未來的發展需要？

前言

“百年未有之大變局”，是中國對當前世界格局的重大戰略判斷。

這個“變”，并非簡單潮流趨勢的變化，而是世界局勢影響所帶來的全方位的秩序變化。隨著國家硬實力已然達到了新的高度，隨之而來必然是國家對于數字安全的逐漸重視。

完全基于國外操作系統的龐大應用生態，顯然不符合未來大國發展的需要。因此，對于中國的互聯網行業的未來，也許鴻蒙系統將會成為行業未來幾年最大的“變量”之一。

鴻蒙系統的存在只是簡單的多適配一套系統嗎？是否會對應用設計的理念產生變化？面對越來越復雜的系統、場景，我們應該如何學習并調整設計思維來應對這些變化呢？

通過對鴻蒙系統的設計理念與規范的初步學習和研讀，以及對主流的 iOS、Android 系統最新設計研究，結合互聯網的發展趨勢，在此為大家提供一些粗淺的總結與學習摘要。

更多干貨：

一、互聯網發展與操作系統的必然演變

1. 互聯網發展與設備形態、設計理念的轉變

從互聯網技術誕生至今，隨著技術的不斷發展，我們所使用的設備與屏幕載體也在不斷地發生變化。

互聯網的每個發展階段都催生了對新的設備與屏幕形態的需求，而每一種新屏幕的出現，又反過來為互聯網開辟了全新的應用場景、交互方式和內容形態，推動其進入下一個階段。我們大體可以將互聯網發展與設備的關系總結為以下幾個階段：

第一階段：互聯網萌芽期（Web 1.0） → 固定顯示器

第二階段：互聯網爆發與交互期（Web 2.0） → 固定顯示器 & 筆記本電腦

第三階段：移動互聯網時代 → 智能手機觸摸屏

第四階段：萬物互聯時代 → 多類型屏幕共存（平板、可穿戴設備、智能家居屏、VR/AR）

從固定到移動，從大到小再到無處不在?；ヂ摼W的發展路徑是從桌面走向口袋，再滲透到我們周圍的每一個角落，而屏幕也隨之經歷了從固定顯示屏，再到觸摸屏，最后碎片化為無數種形態的過程。

而對于設計師來說，除了不斷增加的屏幕尺寸數量，還有一個核心的變化便是職能與理念的轉變。

從最初 Web1.0 的信息排列，到 Web2.0 豐富的網頁設計，讓設計師的角色從“平面設計師”逐漸走向了“網頁設計師”，設計師開始基于虛擬世界進行創新的網頁風格、天馬行空視覺效果與互動形式的設計。而蘋果開創的移動互聯網時代，強調了“用戶體驗”的重要性，并逐漸誕生了“UI 設計師”、“交互設計師”、“動效設計師”等新的設計職能，而后又逐漸演變為更綜合的“體驗設計師”或“產品設計師”。

而我們當下所處的時代，已經經歷了移動互聯網時代的蓬勃發展，并一只腳開始踏入了萬物互聯時代。設計師的核心目標雖然仍舊是以體驗設計為核心，但在未來需要逐漸加入應用的多設備、多場景適配與協同思維。

2. 操作系統的成熟、分化與弊端

互聯網的發展核心推動力，其實就是一個又一個的企業逐漸成長與發展的過程。而伴隨著時代引領全球的巨頭們的發展，數字產品所依存的操作系統，也伴隨著巨頭們的發展逐漸建立生態。從早期微軟的 Windows，到蘋果的 MacOS、iOS 系統，以及 Google 的 Android 系統。

而這些成熟操作系統，又基于不同的類型設備類型衍生出更多設備的獨立操作系統，如蘋果從 MacOS、iOS 到如今 iPadOS、WhatchOS、Apple tvOS、VisionOS 等。

然而，隨著應用和設備豐富程度的不斷增加，單場設計思維逐漸顯示出一些弊端，多平臺、多尺寸的適配設計往往差異極大。各系統之間的底層代碼差異猶如“天塹”，必須由不同的開發團隊進行維護。而設計師每次也需要針對不同的平臺，維護多套不同的規范、組件以及素材等等。

在可見的未來，似乎產品形態的擴張態勢依然在進行，而應用形態的重新設計與適配——是否永無盡頭？即使底層代碼無法統一，設計師是否又有更好的方式，讓多平臺的設計擁有更好的一致性？

作為全應用生態的企業，蘋果一直在嘗試進行多端設備與體驗的融合。從 deck 欄、控制中心、消息提醒等組件的樣式之間統一可以看出，原來更偏擬物化的 MacOS 也逐漸將風格與 iOS 和 iPadOS 的界面風格統一。

然而，作為一個已經具備龐大體量的應用生態來說，想從底層真正地打通應用之間橋梁，可謂是難上加難。因此從芯片到系統代碼都差異巨大，只能通過各種“橋梁”式的連接，來達到設備體驗上的協同，而非真正的融合。

3. 鴻蒙系統的創新與延續：從“設備協同”到“設備融合”

隨著華為 HarmonyOS 的出現，帶著其獨特的“全場景智能操作系統”理念，我們似乎從中看到了操作系統未來的更多可能性。

鴻蒙系統僅僅只是設計師需要多適配一套系統嗎？或者說只是“國產安卓替代”嗎？

作為一個全新的操作系統，HarmonyOS 可以站在前人的基礎上，通過更先進的設計理念進行彎道超車。因此，鴻蒙系統的核心設計理念，之一就是：一次開發、多端部署。也就是說，鴻蒙系統最初的構想，就是將多端應用的開發流程進行底層的打通。

通過分布式軟總線，它打破了設備之間的物理壁壘，讓所有設備像在同一個設備上一樣進行通信。而通過自適應 UI 框架（方舟開發框架），這是實現“一次開發，多端部署”，鴻蒙的 UI 框架會根據當前設備的屏幕尺寸、像素密度、交互方式（觸控、遙控、旋鈕）等，自動應用不同的 UI 布局和交互邏輯。

因此，鴻蒙系統不僅僅是一個新的系統，也算是一個站在成熟經驗之上、更適應未來趨勢的全新系統設計理念，一個以全場景為目標的操作系統。

對于設計師來說，因為技術上擁有了 UI 的跨端自適應能力，鴻蒙系統的設計也對設計師提出了更高的要求，即——全場景設計思維。它要求設計師從應用框架、組件形態、交互方式、反饋形式等不同層面去將多端的設計整合成一套全場景的設計系統。

相對以往的單端的設計系統，全場景設計系統需要以下幾種要素去進行多端規范的整合：

1. 全場景的自適應/響應式布局規范：通過對屏幕比例的抽象，將應用的布局劃分為階梯式的自適應結構，讓產品在不同的屏幕比例中能夠合理、有邏輯地進行適配；
2. 全場景 API 的統一：通過對規范的核心要素統一，讓全局的配色、字體、組件、布局等要素具備統一性和全局可控的能力；
3. 多模態組件庫：綜合考量每個組件在不同設備/場景中的樣式、交互方式、反饋形態等，制定能夠適配全場景的多模態組件庫；
4. 以及基于全場景適配所實踐出的各類成熟經驗與指南。

由于篇幅原因，本文將首先結合鴻蒙系統設計指南與以往的設計經驗，重點為大家總結一下“全場景設計”在框架與布局層面需要注意的幾個重點。

二、全場景布局的基礎要素

1. 基準倍率的統一，vp、dp、pt 的共通理念

首先，如此多尺寸的設備，比例也不統一，如何進行適配設計呢？

大家熟悉的 px 表示像素（Pixel），是最基礎的絕對單位，直接對應設備屏幕上的物理像素點。

然而，作為設備種類與尺寸數量非常龐大的華為，其適配的邏輯除了屏幕的比例，還需要關注像素密度之間的差異。相同尺寸的手機，像素密度可能差異較大，如果僅采用像素密度來當規范的話，同尺寸的手機上看到的元素可能會大小差異巨大。

所以需要首先通過虛擬像素 vp，將所有的設備的設計尺寸進行歸一。虛擬像素 (virtual pixel) 是一臺設備針對應用而言所具有的虛擬尺寸 (區別于屏幕硬件本身的像素單位)。vp 是靈活的單位，它可在任何屏幕上縮放以具有統一的尺寸體量。它提供了一種靈活的方式來適應不同屏幕密度的顯示效果。

VP 的概念，本質上也學習了 Android 系統對于碎片化尺寸的適配經驗。因此，1vp ≈ 1px在160dpi屏幕上的物理尺寸，跟安卓的dp算法也基本一致。當前鴻蒙API接口數值不帶單位時，默認單位都為vp。

需要注意的是，從 px 到 vp 的具體倍率，而因為屏幕尺寸的多樣化，沒有辦法像蘋果的 pt 那樣都是 2x、3x 這樣完全的整數。所以不同設備具體的 vp 數值，還是建議查看對應的官方文檔進行適配。

2. 屏幕尺寸的抽象與歸納：斷點系統

通過 vp 的虛擬像素尺寸，我們就可以首先將所有設備的設計稿基于同一個比例進行設計。那么在進行跨設備適配性設計的時候，下一個問題就是——屏幕布局何時要進行變化？

斷點（Breakpoint）是響應式布局的核心概念。斷點是以應用窗口寬度為切入點，將應用窗口在寬度維度上分成幾個不同的區間，每個區間對應不同的設備類型和屏幕尺寸。

1. 橫向斷點以窗口寬度值區分，代表窗口寬度實際大小，會影響用戶使用和觀看的物理尺寸。
2. 縱向斷點以窗口寬高比區分，代表窗口相對高度，表示橫向比例、方形或縱向比例窗口。

HarmonyOS 通過橫向和縱向兩個維度，將屏幕的尺寸大致歸納為以下幾種比例。

1. XSmall：智能手表、小屏穿戴設備
2. Small：手機、豎屏折疊屏
3. Medium：橫屏手機、小平板、展開折疊屏
4. Large：平板設備、車機
5. XLarge：PC、智慧屏

當然，作為“碎片化系統的先驅”，Android 也有類似的斷點規范，只是尺寸會略有差異，并且因為較少考慮可穿戴設備，也沒有“小方形闊折疊”這種概念，所以適配的范圍上考慮的沒有 HarmonyOS 那么廣泛。

1. Compact：手機豎屏
2. Medium：縱向平板電腦、縱向可折疊（展開）
3. Expanded：橫向手機 橫向、平板電腦、橫向折疊屏（展開）、臺式機
4. Large：桌面
5. Extra-large：桌面、超寬顯示器

3. 基礎布局與秩序的建立：柵格系統

在單設備場景設計中，因為布局很少進行大幅度的動態調整，所以很多應用的設計并不一定要使用上柵格系統，而在多設備的場景設計中，柵格系統則是重要通用的輔助定位系統。

柵格給布局提供一種可循的規律，解決多尺寸多設備的動態布局問題。保證各模塊各設備的布局一致性。柵格會跟隨屏幕尺寸、窗口尺寸、子容器尺寸的變化而動態變化。

柵格構成

1. Margins (邊距)：元素相對窗口左右邊緣的距離，決定了內容可展示的整體寬度，可根據不同的窗口容器尺寸定義不同的邊距數值。
2. Gutters (間距)：每個柵格的間距，控制元素和元素之間的距離關系，可根據不同的窗口容器尺寸定義不同的間距值，為了保證較好的視覺效果，間距通常的取值不會大于邊距的取值（格式塔原理）。
3. Columns (柵格)：內容的占位框架，其數量決定了內容的布局復雜度，柵格的寬度根據實際窗口的寬度和柵格數量自動計算。不同的不同的窗口容器尺寸匹配不同的柵格數量來輔助布局定位。

窗口柵格

窗口柵格系統是系統提供的一種面向多設備高效適配的輔助布局的定位工具。

此處的設計原則，HarmonyOS 與 Androdi 的開發規范也基本一致。如圖所示，通過斷點系統抽象出的將根據窗口容器的水平寬度區間，再結合柵格系統匹配最佳的柵格數量，就可以達到內容布局的最佳適應。

因此，未來我們在跨端設備設計時，也需要將這幾個梯度的柵格邊距、間距和數量進行定義（寬度自動計算）。

不同的應用對于界面風格、信息密度的需求是不一致的，因此，每個應用可能有各自專屬的柵格系統組合方式。比如 8 間距的緊湊型，或者 16 間距的寬松型，或者 12 間距的通用型等。

最大使用寬度為 2220vp，當窗口不斷拉寬大于 2220vp 時，柵格內的內容區范圍不再變化，多出的區域左右留白。

三、應用級自適應布局架構

在不同的設備與場景中，信息展示的空間與大小，決定了用戶的操作方式與頁面的排布方式均會存在差異性。通過前文中的斷點系統+柵格系統，我們已經解決了多設備應用的基礎布局樣式問題。

但是，想要讓應用在多設備中獲得最佳的體驗，還需要讓其中的組件、頁面分割方式等，也能夠跟隨斷點的變化進行響應的變化，達到最合理的應用框架布局。

1. Tab 欄響應架構

應用的底部 Tab，是頁面最終要的全局導航控件，通常也處于頁面最上層的位置。當屏幕達到一定寬度時，底部 Tab 就會被拉長并且占用過多的屏幕空間。

因此，當窗口寬度達到對應的斷點值，底部 Tab 可以結合挪移布局的方法，把 Tab 組件挪移到左側。在大尺寸設備上提高交互易用性。

HarmonyOS 建議的是窗口寬度 ≥ 840vp，建議使用側邊 Tab，但這個并非通用的原則，一切還需要看應用本身對于空間的需求。

同時，因為大屏設備擁有更大的屏幕空間，在挪移后可以在側邊 Tab 中融合更多的選項，或者其他全局操作元素，如原本放在頁面頂部的菜單欄、頭像信息等。

2. 分欄布局

更大的顯示空間，不僅僅只是帶來空間的變化。在大屏場景中，原來的父子層級便可以拆分為平行顯示，讓應用在大尺寸設備上充分發揮屏幕的顯示優勢。

HarmonyOS 建議當窗口寬度 ≥ 600vp，建議使用分欄布局。默認兩欄寬度比例為 4:6，特定場景下可支持配置為 5:5 或 6:4 。

但是，是否分層具體取決于對應用閱讀效率上的需求，如果該頁面更多的是以展示內容或者商品為主，則可以在更寬的屏幕時再出現分欄，或者不采用分欄形式。

3. 懸浮式側邊導航欄

在空間相對有限的豎屏手機場景或雙折疊場景中，側邊導航通常作為臨時層級，采用蒙版+左側喚起形式進行展示。這樣可以讓用戶更好地理解層級關系，并且不占用核心場景的閱讀空間。

4. 嵌入式側邊導航欄

在空間充裕的大屏場景中，側邊導航也可以采用嵌入式的布局，通過向右擠壓布局，從雙欄模式切換至三欄的布局模式。這樣技能提升操作效率，又可以給用戶提供更多的布局選擇。

5. 側邊面板

在寬屏的沉靜式場景中，原本通過底部浮層的操作，如評論、信息面板等，均可以通過側邊面板的方式來實現便捷任務處理的輕交互體驗。

6. 跟手半模態

在移動端設備中，因為單手幾乎可以覆蓋完整屏幕，彈窗通常出現在屏幕中間區域。但是在雙折疊或者更大的屏幕空間中，就需要重新考慮用戶手指的人體工學設計。

因此，當設備在雙折疊或者更大的平板場景中使用時，為了保證用戶可以更容易通過手指進行操作，操作彈窗可以嘗試設定出現在更符合人體工學的位置，如靠近右手的邊緣位置等。

7. 半彈窗與彈窗變化

在常規的豎屏手機場景中，為了盡可能減少頁面的跳轉，一般內容型的頁面將會臨時的底部半彈窗進行實現。而讓此類頁面出現在雙折疊屏場景或平板場景中時，可以將半模態頁面自適應成為臨時的窗口模式。

四、模塊級響應式布局方法

除了上述基于不同屏幕的應用級架構外， 設計師還需要注意單個模塊的布局自適應模式。當模塊的容器因為操作或者屏幕尺寸發生變化時，模塊需要實時進行計算并通過過渡動畫進行變化，讓整個界面的過渡更加自然。

1. 橫向等距自適應

最基礎的布局方式之一，模塊中的元素保持左右間距不變，而整個模塊的寬度基于容器的寬度發生等值變化。

2. 橫向均分自適應

容器組件尺寸發生變化時，將空間平均分配到元素之間的空白空間中。如果變化的幅度較大，在該模塊內也可以設定斷點進行元素數量與尺寸的變化，以適應不同的設計目標。

3. 等比縮放

最基礎的縮放模式，通常直接與長寬綁定并進行等比縮放。

4. 占比縮放

更常用的元素布局模式，元素的尺寸可以通過比例與某一容器或區域的尺寸進行綁定。比如下圖中的圖形元素，設定為與頁面上半部分的高度進行等比縮放。相對等比縮放，占比縮放可以更穩定的對布局和元素進行分配。

5. 自適應延伸

元素的間距與大小不變，僅通過容器改變顯示或隱藏更多的內容。此布局方式需要注意隱藏的內容是否為高頻/必要元素，盡量保證重要元素能夠保證持續的露出。

6. 自適應隱藏

不同的用戶場景，空間的容納程度是有限的，越小的屏幕越要聚焦核心操作。因此，相比自適應延伸，自適應隱藏更適合核心場景的操作布局。

比如在音樂播放器中，播放/暫停永遠都是核心操作，并且需要位于正中間區域。其次是上下首歌曲的切換，最后是喜歡等其他操作。

同時，對于更多的低頻操作，在空間相對有限的場景中，可以將其整合在“更多”操作的按鈕中。

7. 自適應折行

常規的容器尺寸適應布局方式，通常用于層級相同的內容展示。所有內容均不做隱藏處理，而是伴隨容器寬度的變化，進行折行顯示。

8. 重復布局

利用屏幕的寬度優勢，將相同屬性的組件橫向并列排布。

重復布局適用于對寬高比敏感的圖片和及組合內容，當內容放大以后導致原圖放大超過 150% 的場景。

五、空間哲學的變革趨勢

首先要承認的是，華為的 HarmonyOS 雖然擁有操作系統設計的后發優勢，但在設計風格與趨勢上，目前蘋果仍舊是需要尊敬的設計引領者之一。

蘋果最新的 iOS26 除了“玻璃”這個概念，最為重要的革新就是更多的“空間”與“容器”這個概念的具像化，并將導航以及操作按鈕放到了一個個進行獨立的懸浮空間。

以往的導航、操作按鈕等往往融合在頁面或者分割后的空間中，但這種方式顯然會占用更多的顯示空間，特別是在大寬屏中。而 iOS26 則將“空間”與“容器”這個概念的具像化，并將導航以及操作按鈕放到了一個個進行獨立的懸浮空間。

其實在蘋果的 VisionOS 設備中，很早就采用了類似的設計。因此，蘋果此番變革，除了跨端設備更容易適配之外，可能也是希望用戶能夠提前對 Vision 設備的視覺風格與操作邏輯作進行適應。

除此之外，安卓也有類似的設計趨勢。在 Material Design 3 的設計規范中，也能夠很明顯地感受到導航與操作容器化的趨勢。

而容器與導航/操作的融合，顯然在跨端適配中確實也有更好的效果。 在未來的操作界面中，我們可以不必為導航刻意劃分出獨立的空間，而是懸浮于內容之上。這樣在跨端的適配中，導航與內容的布局適配將變得更容易。

在可見的未來，也許 HarmonyOS 的設計也會融合這一設計趨勢·。因此，提前適應并嘗試應用這種空間層面的布局創新，有利于產品與設計師對未來的跨端適配擁有更多主動權。

結語

形式追隨功能，更取決于底層技術的發展。從 PC 與移動互聯網時代，到如今萬物互聯的時代，不管是應用的形態、底層系統，還是設備的種類，大家都在“復雜化”的道路中一路狂奔。而隨著鴻蒙系統的到來，似乎多端一體化設計有了真正實現的可能性。

如何在復雜中尋找簡潔？如何在多設備中提供豐富功能和連續性體驗的同時，還能讓用戶感受到秩序與統一？如何降低多場景多設備的開發成本？也許全場景設計思維，將會是數字產品由復雜走向簡潔的鑰匙之一。

感謝觀看，歡迎大家隨時交流，下次見～