HarmonyOS通用設(shè)計基礎(chǔ)---應(yīng)用架構(gòu)

小嵌

HarmonyOS通用設(shè)計基礎(chǔ)---應(yīng)用架構(gòu),   
1.應(yīng)用中的導(dǎo)航結(jié)構(gòu) 應(yīng)用中的導(dǎo)航用于引導(dǎo)用戶在應(yīng)用的各個頁面進行瀏覽。常用的應(yīng)用導(dǎo)航有：
    ·  平級導(dǎo)航
    ·   上下級導(dǎo)航
    ·   混合導(dǎo)航 導(dǎo)航的原則：
    ·   一致。導(dǎo)航操作的結(jié)果應(yīng)該與用戶的期望保持一致。使用用戶熟悉的界面布局和控件，讓用戶無論在什么頁面，都知道如何導(dǎo)航。
    ·   清晰。導(dǎo)航應(yīng)該提供清晰的路徑。用戶使用的時候，能夠知道當前處在界面的什么位置，操作后將會跳轉(zhuǎn)到什么位置。
平級導(dǎo)航 平級導(dǎo)航結(jié)構(gòu)中，頁面均處在同一層級。 使用場景：用于展示同等地位或同等層級的界面。例如以TAB方式組成的頁面。

24.png （43.32 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
上下級導(dǎo)航 上下級導(dǎo)航結(jié)構(gòu)由父頁面和子頁面組成。父頁面可以有一個或多個子頁面。每個子頁面都有一個父頁面。 上下級結(jié)構(gòu)導(dǎo)航適用于多層級的復(fù)雜結(jié)構(gòu)。層級結(jié)構(gòu)深的內(nèi)容，用戶訪問的路徑變長，效率降低，可以通過適當?shù)膶蛹壌┩冈O(shè)計（如快捷方式）解決此問題。 使用場景：頁面存在上下級關(guān)系的應(yīng)用。

25.png （39.94 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
混合導(dǎo)航 在應(yīng)用中，對同等地位或同等層級的頁面使用平級導(dǎo)航結(jié)構(gòu)，對具有復(fù)雜關(guān)系的頁面使用上下級導(dǎo)航結(jié)構(gòu)。

26.png （27.83 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳


2.常用應(yīng)用界面框架 常用應(yīng)用界面框架有：
     ·  啟動頁
     ·   詳情頁
     ·   列表視圖
     ·   宮格視圖
啟動頁 針對內(nèi)容型應(yīng)用，應(yīng)用的首頁內(nèi)容的獲取需要花費一定的時間，此時可以使用啟動頁緩解頁面加載內(nèi)容的等待感。啟動頁可以展示應(yīng)用的品牌形象或者廣告。

27.png （19.94 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
·   
僅針對內(nèi)容型應(yīng)用使用啟動頁。內(nèi)容型應(yīng)用在啟動時，需要花一定的時間獲取內(nèi)         容，因此需要使用啟動頁，減少用戶的等待感。沒有網(wǎng)絡(luò)加載內(nèi)容的應(yīng)用，不需        要使用啟動頁。
·   
避免讓用戶等待過長時間。用戶總是希望第一時間看到應(yīng)用內(nèi)容，因此在頁面加載      完成后，需要及時呈現(xiàn)內(nèi)容。
·   
從后臺加載應(yīng)用時，不應(yīng)該顯示啟動頁。當應(yīng)用被切換到后臺后，再從后臺加載回      來時，不應(yīng)該再次顯示啟動頁。應(yīng)用需要保留應(yīng)用的狀態(tài)，以便從后臺恢復(fù)，方        便用戶繼續(xù)瀏覽。


詳情頁

詳情頁用于展示應(yīng)用的詳細描述和操作。

28.png （25.77 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
列表視圖

列表視圖通常用于文字和數(shù)據(jù)內(nèi)容的展示。

29.png （55.62 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
·   
列表應(yīng)該按照一定的邏輯排序，便于用戶瀏覽和操作。例如：按字母順序排序、按時間排序。
·   
列表應(yīng)該是同類項的集合，應(yīng)該對外呈現(xiàn)一致的布局樣式。常見的是單行列表、雙行列表和三行列表。


·   
列表顯示的內(nèi)容不宜過多。用戶應(yīng)該一眼就能關(guān)注到重要信息和操作。
網(wǎng)格視圖

網(wǎng)格視圖通常用于圖片和視頻內(nèi)容的展示。

30.png （27.13 KB, 下載次數(shù): 0）

下載附件  保存到相冊  

2 小時前 上傳
·   
網(wǎng)格視圖顯示同等重要的項目，具有統(tǒng)一的布局。
·   
網(wǎng)格視圖以圖像為主組織內(nèi)容。例如：圖庫中用網(wǎng)格視圖展示圖片。
·   
網(wǎng)格視圖可以輔以文字和操作。例如：應(yīng)用市場中使用網(wǎng)格展示應(yīng)用程序圖標，簡單描述和下載按鈕。
·   
網(wǎng)格視圖應(yīng)該考慮響應(yīng)式布局。在橫豎屏切換時，網(wǎng)格視圖應(yīng)該能夠按比例縮，內(nèi)容以適配頁面的寬度。