移動(dòng)端頁面信息規(guī)范

1颊糜、結(jié)構(gòu)

1.1拨与、頁面結(jié)構(gòu)

頂欄導(dǎo)航根據(jù)固定高度x1.2.3適配即可稻据；內(nèi)容區(qū)域根據(jù)不同手機(jī)分辨率進(jìn)行等比縮放。

2买喧、導(dǎo)航

2.1捻悯、抽屜導(dǎo)航（應(yīng)用主導(dǎo)航）

抽屜導(dǎo)航為應(yīng)用主導(dǎo)航，方便擴(kuò)展導(dǎo)航選項(xiàng)淤毛；隱藏式處理可以為內(nèi)容區(qū)域留有更多的展示空間今缚；其它場景下不建議使用。

2.2低淡、分段導(dǎo)航

分段導(dǎo)航用于比較高的層級(jí)來組織信息姓言，是兩個(gè)或多個(gè)標(biāo)簽的集合；每個(gè)標(biāo)簽間互斥蔗蹋，通常用于顯示不同視圖之間的切換何荚。

分段導(dǎo)航一般出現(xiàn)頁面的頂部或者頁面中，讓用戶可以在頁面內(nèi)的不同內(nèi)容之間快速切換猪杭。

突出顯示當(dāng)前選項(xiàng)餐塘，讓用戶知道所處的位置。

最多設(shè)置 5 個(gè)選項(xiàng)皂吮，超出的選項(xiàng)可以滑動(dòng)展示戒傻。

2.2.1税手、固定分段導(dǎo)航

適用于標(biāo)簽的數(shù)目2-5個(gè)的情況，每個(gè)標(biāo)簽位置固定需纳，有利于用戶的記憶：

2.2.2冈止、非固定分段導(dǎo)航

適用于標(biāo)簽數(shù)量比較多（大于5個(gè)）或標(biāo)簽數(shù)量不固定的情況。

3候齿、應(yīng)用區(qū)域分割

在應(yīng)用使用過程中熙暴，出現(xiàn)最多的就是頁面之間的相互切換；切換頁面后慌盯，通常有一個(gè)數(shù)據(jù)請(qǐng)求的過程周霉，為降低這一過程中用戶等待的混淆和沮喪感；需要進(jìn)行加載頁面的動(dòng)態(tài)效果設(shè)計(jì)亚皂；以下我們針對(duì)原生應(yīng)用及H5頁面分別進(jìn)行了區(qū)分俱箱。

3.1、狀態(tài)欄

狀態(tài)欄與導(dǎo)航欄為組合使用方式灭必，背景不可存在差異化（特定手機(jī)除外）狞谱，包括自定義顏色、圖片等沉浸式用法禁漓。

3.2跟衅、導(dǎo)航欄

導(dǎo)航欄與狀態(tài)欄為組合使用方式，背景不可存在差異化（特定手機(jī)除外）播歼，包括自定義顏色伶跷、圖片等沉浸式用法。

導(dǎo)航欄分為導(dǎo)航區(qū)域秘狞、標(biāo)題區(qū)域以及操作區(qū)域叭莫。其中導(dǎo)航區(qū)控制程序頁面進(jìn)程。

導(dǎo)航區(qū)： 通常只有一個(gè)操作烁试，即返回上一級(jí)界面雇初。當(dāng)用戶進(jìn)入H5頁面以后，同時(shí)顯示“返回”和“關(guān)閉”按鈕减响，關(guān)閉則離開H5頁面靖诗，回到發(fā)起頁；

標(biāo)題區(qū)： 可以為每個(gè)頁面定義標(biāo)題辩蛋，標(biāo)題的文字展示區(qū)域固定呻畸，超出長度則會(huì)被省略。

操作區(qū)： 操作區(qū)可根據(jù)具體需求選擇有無悼院。

3.3伤为、內(nèi)容區(qū)

內(nèi)容區(qū)分展示類和操作類兩部分；

3.4、工具欄

用于操作當(dāng)前頁面的置底功能绞愚，通常最多不超過5個(gè)功能叙甸；可根據(jù)頁面需求配置是否需要工具欄。

工具欄在設(shè)計(jì)過程中可根據(jù)具體需求逐步設(shè)計(jì)并歸類入庫位衩。

總結(jié)

以上為本次針對(duì)“移動(dòng)端界面信息規(guī)范”做出的歸類和總結(jié)裆蒸；

在整理公司移動(dòng)端交互規(guī)范指南時(shí)，突發(fā)奇想發(fā)篇文章與大家進(jìn)行交流糖驴；如有不足僚祷，還請(qǐng)各位看官加以指正；

后續(xù)小編將持續(xù)更新關(guān)于贮缕，交互設(shè)計(jì)指南用戶交互章節(jié)的相關(guān)設(shè)計(jì)要點(diǎn)辙谜。

注：圖片資源來源于網(wǎng)絡(luò)，設(shè)計(jì)資料內(nèi)容來自于個(gè)人的相關(guān)看法及一些相關(guān)資料的總結(jié)感昼。