|
HarmonyOS通用設(shè)計(jì)基礎(chǔ)---應(yīng)用架構(gòu),
1.應(yīng)用中的導(dǎo)航結(jié)構(gòu) 應(yīng)用中的導(dǎo)航用于引導(dǎo)用戶在應(yīng)用的各個(gè)頁面進(jìn)行瀏覽。常用的應(yīng)用導(dǎo)航有:
· 平級導(dǎo)航
· 上下級導(dǎo)航
· 混合導(dǎo)航 導(dǎo)航的原則:
· 一致。導(dǎo)航操作的結(jié)果應(yīng)該與用戶的期望保持一致。使用用戶熟悉的界面布局和控件,讓用戶無論在什么頁面,都知道如何導(dǎo)航。
· 清晰。導(dǎo)航應(yīng)該提供清晰的路徑。用戶使用的時(shí)候,能夠知道當(dāng)前處在界面的什么位置,操作后將會跳轉(zhuǎn)到什么位置。
平級導(dǎo)航 平級導(dǎo)航結(jié)構(gòu)中,頁面均處在同一層級。 使用場景:用于展示同等地位或同等層級的界面。例如以TAB方式組成的頁面。
24.png (43.32 KB, 下載次數(shù): 0)
下載附件 保存到相冊
2 小時(shí)前 上傳
上下級導(dǎo)航 上下級導(dǎo)航結(jié)構(gòu)由父頁面和子頁面組成。父頁面可以有一個(gè)或多個(gè)子頁面。每個(gè)子頁面都有一個(gè)父頁面。 上下級結(jié)構(gòu)導(dǎo)航適用于多層級的復(fù)雜結(jié)構(gòu)。層級結(jié)構(gòu)深的內(nèi)容,用戶訪問的路徑變長,效率降低,可以通過適當(dāng)?shù)膶蛹壌┩冈O(shè)計(jì)(如快捷方式)解決此問題。 使用場景:頁面存在上下級關(guān)系的應(yīng)用。
25.png (39.94 KB, 下載次數(shù): 0)
下載附件 保存到相冊
2 小時(shí)前 上傳
混合導(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 小時(shí)前 上傳
2.常用應(yīng)用界面框架 常用應(yīng)用界面框架有:
· 啟動(dòng)頁
· 詳情頁
· 列表視圖
· 宮格視圖
啟動(dòng)頁 針對內(nèi)容型應(yīng)用,應(yīng)用的首頁內(nèi)容的獲取需要花費(fèi)一定的時(shí)間,此時(shí)可以使用啟動(dòng)頁緩解頁面加載內(nèi)容的等待感。啟動(dòng)頁可以展示應(yīng)用的品牌形象或者廣告。
27.png (19.94 KB, 下載次數(shù): 0)
下載附件 保存到相冊
2 小時(shí)前 上傳
·
僅針對內(nèi)容型應(yīng)用使用啟動(dòng)頁。內(nèi)容型應(yīng)用在啟動(dòng)時(shí),需要花一定的時(shí)間獲取內(nèi) 容,因此需要使用啟動(dòng)頁,減少用戶的等待感。沒有網(wǎng)絡(luò)加載內(nèi)容的應(yīng)用,不需 要使用啟動(dòng)頁。
·
避免讓用戶等待過長時(shí)間。用戶總是希望第一時(shí)間看到應(yīng)用內(nèi)容,因此在頁面加載 完成后,需要及時(shí)呈現(xiàn)內(nèi)容。
·
從后臺加載應(yīng)用時(shí),不應(yīng)該顯示啟動(dòng)頁。當(dāng)應(yīng)用被切換到后臺后,再從后臺加載回 來時(shí),不應(yīng)該再次顯示啟動(dòng)頁。應(yīng)用需要保留應(yīng)用的狀態(tài),以便從后臺恢復(fù),方 便用戶繼續(xù)瀏覽。
詳情頁
詳情頁用于展示應(yīng)用的詳細(xì)描述和操作。
28.png (25.77 KB, 下載次數(shù): 0)
下載附件 保存到相冊
2 小時(shí)前 上傳
列表視圖
列表視圖通常用于文字和數(shù)據(jù)內(nèi)容的展示。
29.png (55.62 KB, 下載次數(shù): 0)
下載附件 保存到相冊
2 小時(shí)前 上傳
·
列表應(yīng)該按照一定的邏輯排序,便于用戶瀏覽和操作。例如:按字母順序排序、按時(shí)間排序。
·
列表應(yīng)該是同類項(xià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 小時(shí)前 上傳
·
網(wǎng)格視圖顯示同等重要的項(xiàng)目,具有統(tǒng)一的布局。
·
網(wǎng)格視圖以圖像為主組織內(nèi)容。例如:圖庫中用網(wǎng)格視圖展示圖片。
·
網(wǎng)格視圖可以輔以文字和操作。例如:應(yīng)用市場中使用網(wǎng)格展示應(yīng)用程序圖標(biāo),簡單描述和下載按鈕。
·
網(wǎng)格視圖應(yīng)該考慮響應(yīng)式布局。在橫豎屏切換時(shí),網(wǎng)格視圖應(yīng)該能夠按比例縮,內(nèi)容以適配頁面的寬度。 |
|