雙擊安裝字體，安裝后重啟PPT請安裝字體山東科技職業(yè)學院交互界面設計UIdesignUI設計UIdesign山東科技職業(yè)學院4.2APP頁面構成元素講課人：田雨學習目的1.了解APP頁面構成2.了解常見的6種導航形式APP頁面構成4.2.1APP頁面構成基礎的APP頁面由欄和內(nèi)容視圖兩大部分構成，而欄又由狀態(tài)欄、導航欄和標簽欄3部分構成，如下圖所示。一、欄4.2.1APP頁面構成一、欄1.狀態(tài)欄位于頁面頂部，高為40像素，用來顯示通知、時間、信號和電量等常規(guī)信息。無論是iOS系統(tǒng)還是Android系統(tǒng)，狀態(tài)欄一般都是透明的，其中的圖標和文字會根據(jù)當前頁面的顏色更改為白色或黑色，如下圖所示。狀態(tài)欄在制作時符合視覺習慣即可。4.2.1APP頁面構成一、欄2.導航欄位于狀態(tài)欄下方，高為88像素，用于管理屏幕信息，以及頁面層級結構間的導航。導航欄左側為后退按鈕，中間顯示當前頁面的內(nèi)容標題，右側為當前頁面的操作按鈕。欄內(nèi)的按鈕可以是文字，也可以是圖標。導航欄添加按鈕，可用加號或其他表示可展開的圖標代替。4.2.1APP頁面構成一、欄3.標簽欄標簽欄是APP的全局導航，用戶可點擊此欄中的功能圖標快速切換頁面。標簽欄一般位于頁面底部，高為98像素，欄內(nèi)圖標分為選中和未選中兩種狀態(tài)，通常使用剪影圖標加文字描述的方式表示。欄內(nèi)圖標以3～5個為宜，且文字要通俗易懂，精煉概括，盡量不超過4個漢字寬度，如下圖所示。4.2.1APP頁面構成二、內(nèi)容視圖1.表格視圖內(nèi)容視圖包括APP的主要內(nèi)容信息和交互行為，是視覺設計的主要區(qū)域。適合展示數(shù)量較多，級別相同的信息。在等高的單元格中，標題信息默認左對齊，副標題、按鈕右對齊。4.2.1APP頁面構成二、內(nèi)容視圖2.文本視圖內(nèi)容視圖包括APP的主要內(nèi)容信息和交互行為，是視覺設計的主要區(qū)域。一個能顯示多行文本的區(qū)域。當內(nèi)容太多而超出顯示范圍時，頁面還可支持滾屏，將文本內(nèi)容顯示完整。4.2.1APP頁面構成二、內(nèi)容視圖3.臨時視圖內(nèi)容視圖包括APP的主要內(nèi)容信息和交互行為，是視覺設計的主要區(qū)域。在內(nèi)容視圖中占位較小，是向用戶提供額外功能和選項的視圖。例如，點擊加號后出現(xiàn)的下拉列表，在刪除APP時彈出的提示對話框等，都屬于臨時視圖。常見導航形式4.2.2常見導航形式1.卡片式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。通過卡片對信息進行歸納，可以增加頁面的層次感，讓信息有更明顯和更規(guī)矩的區(qū)分，給用戶很好的視覺感受。但卡片周圍都要保留一定間距，這會占用屏幕空間，導致一屏內(nèi)無法呈現(xiàn)較多信息。因此，這類導航不適合用于閱讀或新聞等以文字為主的APP中。使用該類導航的APP有米家、英語流利說和愛彼迎等，如右圖所示為學習強國和愛彼迎APP頁面的卡片式導航。學習強國愛彼迎4.2.2常見導航形式2.舵式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。舵式導航能較大限度地引導用戶，其標簽欄中通常有3或5個導航項，中間的導航項是重要且需要頻繁點擊的功能圖標。舵式導航重點突出了核心功能，并放進了一些常用的功能?？梢蕴岣邔Ш綑谌の缎?，讓用戶貢獻更多的內(nèi)容。不足之處是將多個功能在+號里，增加了點擊的層次。使用該類導航的APP有美拍、小紅書、開源中國和映客直播等，如右圖所示為使用舵式導航的喜馬拉雅和閑魚APP頁面。喜馬拉雅閑魚4.2.2常見導航形式3.列表式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。層次清晰，易于理解，可展示內(nèi)容較長的標題，配合下拉列表還可展示次級內(nèi)容。但列表式導航的靈活性較差，只能通過順序或顏色來區(qū)分入口級別，同級標題過多時，會使用戶產(chǎn)生視覺疲勞。使用該類導航的APP有微信、網(wǎng)易新聞、每日瑜伽和簡書等，如右圖所示為使用列表式導航的微信APP頁面。微信4.2.2常見導航形式4.抽屜式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。也稱側滑式導航，用戶可通過左右滑動頁面，或點擊頁面左上角的展開按鈕，控制當前頁面的顯隱。抽屜式導航適合作為產(chǎn)品的輔助導航，一般用來放置需要但是不常用到的功能，例如設置、當前用戶等信息其缺點是：功能容易被忽視。另外，操作效率低，用戶需要雙手操作，然后等待菜單展開數(shù)據(jù)，再點擊功能。使用該類導航的APP有手機QQ、滴滴出行、網(wǎng)易郵箱和酷狗音樂等，如圖所示。手機QQ滴滴出行4.2.2常見導航形式5.瀑布式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。目前比較流行的導航形式。其特點是隨著頁面向下滾動，內(nèi)容會不斷加載，直至窮盡。適合展示以圖片或視頻為主的信息，如圖所示為使用瀑布式導航的微博APP。根據(jù)APP的版式需求，內(nèi)容視圖中的模塊也可用雙排平齊或錯位排列，如圖所示為雙排平齊的優(yōu)美圖APP頁面。瀑布式導航的缺點是不適合層級架構復雜的產(chǎn)品，容易發(fā)生空間位置迷失；容易產(chǎn)生疲勞感。使用該類導航的APP還有花瓣和騰訊視頻等。微博優(yōu)美圖4.2.2常見導航形式6.宮格式導航此處的導航區(qū)別于前面所說的導航欄，它是對頁面中各元素的整合設計。優(yōu)秀的導航設計能更好地引導和幫助用戶使用APP的各項功能。將功能入口等距分布在頁面中，便于用戶查找所需功能。一般橫向不超過5個圖標，超過時可將設置為左右滑動形式。缺點在于：一旦進入某個頁面后，需要返回主頁才可進入其他功能入口，形