電子產(chǎn)業(yè)一站式賦能平臺

PCB聯(lián)盟網(wǎng)

搜索
查看: 673|回復(fù): 1
收起左側(cè)

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

[復(fù)制鏈接]

2607

主題

2607

帖子

7472

積分

高級會員

Rank: 5Rank: 5

積分
7472
跳轉(zhuǎn)到指定樓層
樓主
發(fā)表于 2020-9-15 17:56:22 | 只看該作者 回帖獎(jiǎng)勵(lì) |倒序?yàn)g覽 |閱讀模式
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)容以適配頁面的寬度。

發(fā)表回復(fù)

您需要登錄后才可以回帖 登錄 | 立即注冊

本版積分規(guī)則


聯(lián)系客服 關(guān)注微信 下載APP 返回頂部 返回列表