25第五章5-App界面元素設(shè)計(jì)的構(gòu)成及UI設(shè)計(jì)組件

App界面元素設(shè)計(jì)的構(gòu)成方法與UI設(shè)計(jì)組件天津電子信息職業(yè)技術(shù)學(xué)院0102知識(shí)要點(diǎn)APP移動(dòng)端UI交互設(shè)計(jì)常用組件APP界面元素設(shè)計(jì)的構(gòu)成方法03App交互界面內(nèi)容構(gòu)成第一部分App移動(dòng)端UI交互設(shè)計(jì)常用組件App移動(dòng)端交互設(shè)計(jì)常用組件App移動(dòng)端UI交互設(shè)計(jì)常用組件警告提示

行動(dòng)列表/動(dòng)作菜單標(biāo)簽欄

工具欄底部動(dòng)作條

菜單選擇器

下拉菜單活動(dòng)視圖控制器

toast常用AppUI組件01警告提示（Alert）用來傳達(dá)應(yīng)用或設(shè)備某些狀態(tài)的信息，常常需要用戶來點(diǎn)擊操作。App移動(dòng)端UI交互設(shè)計(jì)組件02行動(dòng)列表（actionsheet）提示與用戶觸發(fā)的操作直接相關(guān)的一系列選項(xiàng)，包含兩個(gè)或以上的按鈕。App移動(dòng)端UI交互設(shè)計(jì)組件警告提示和行動(dòng)列表的區(qū)別和用法App移動(dòng)端UI交互設(shè)計(jì)組件警告提示（alert）：側(cè)重提示文字；表示提示文字的內(nèi)容優(yōu)先級(jí)較高；按鈕少于2個(gè)時(shí)，建議使用警示框；

行動(dòng)列表/動(dòng)作菜單（actionsheet）：側(cè)重選擇按鈕；表示選擇按鈕的功能優(yōu)先級(jí)較高；按鈕多于2個(gè)時(shí)，建議使用行動(dòng)列表；使用場(chǎng)景03標(biāo)簽欄（tabbar）選項(xiàng)卡切換組件；讓用戶在不同的子任務(wù)、視圖和模式中進(jìn)行切換。App移動(dòng)端UI交互設(shè)計(jì)組件04工具欄（toolbar）展示用于操作當(dāng)前屏幕中各對(duì)象的組件；App移動(dòng)端UI交互設(shè)計(jì)組件05底部動(dòng)作條（bottomsheets）從屏幕底部邊緣向上滑出的一個(gè)面板;使用這種方式向用戶呈現(xiàn)一組功能；提供三個(gè)或三個(gè)以上的操作需要提供給用戶選擇、并且不需要對(duì)操作有額外的解釋。App移動(dòng)端UI交互設(shè)計(jì)組件06菜單（menus）是一個(gè)離散的選項(xiàng)或者動(dòng)作，并且能夠影響到應(yīng)用、視圖或者視圖中選中的按鈕。App移動(dòng)端UI交互設(shè)計(jì)組件07選擇器對(duì)于互斥選項(xiàng)的情況，使用選擇器。選擇器可以來回切換確定，同時(shí)由于選擇器里面的內(nèi)容滾動(dòng)，所以可以容納非常多的選項(xiàng)。App移動(dòng)端UI交互設(shè)計(jì)組件08下拉菜單(Dropdown)將動(dòng)作或菜單折疊到下拉菜單中，常用于提供快捷入口；引導(dǎo)用戶做其他操作任務(wù)。當(dāng)頁(yè)面上的操作命令過多時(shí)，下拉菜單組件可以收納操作元素。App移動(dòng)端UI交互設(shè)計(jì)組件09活動(dòng)視圖控制器（activityviewcontroller）是一個(gè)臨時(shí)視圖，當(dāng)中羅列了一系列可以針對(duì)頁(yè)面特定內(nèi)容的系統(tǒng)服務(wù)和定制服務(wù)。App移動(dòng)端UI交互設(shè)計(jì)組件10snackbar是一種針對(duì)操作的輕量級(jí)反饋機(jī)制，通常以一個(gè)小的彈出框的形式，出現(xiàn)在屏幕下方；圖層關(guān)系在屏幕所有層的頂層，包括浮動(dòng)操作按鈕。App移動(dòng)端UI交互設(shè)計(jì)組件11toast主要用于提示系統(tǒng)消息。App移動(dòng)端UI交互設(shè)計(jì)組件App界面元素設(shè)計(jì)的構(gòu)成方法01、顯著性元素顯著性要素主要分為感覺和認(rèn)知兩大類。App界面元素設(shè)計(jì)的構(gòu)成方法感覺類的主要體現(xiàn)顏色、位置、大小等物理特征;認(rèn)知類反映出物體與人的關(guān)系。注意：元素不要過多，會(huì)造成視覺的復(fù)雜感。02視覺和心理需求在瀏覽頁(yè)面時(shí)，我們會(huì)根據(jù)自己的興趣對(duì)視覺刺激強(qiáng)的事物首先分配注意力；在app界面設(shè)計(jì)時(shí)要考慮視覺的需求和心理的需求，隨著界面的即時(shí)性改變?cè)O(shè)計(jì)。App界面元素設(shè)計(jì)的構(gòu)成方法03用戶的定勢(shì)和期望定勢(shì)指的是某種活動(dòng)前的心理預(yù)備狀態(tài);期望是指對(duì)某個(gè)事物發(fā)展的預(yù)設(shè)。在交互設(shè)計(jì)中，用戶更期待高效和降低認(rèn)知負(fù)荷，扁平化風(fēng)格應(yīng)勢(shì)而起。App界面元素設(shè)計(jì)的構(gòu)成方法App交互界面內(nèi)容構(gòu)成APP交互界面設(shè)計(jì)選擇正確的界面元素。App交互界面設(shè)計(jì)每一個(gè)界面都包含一組不同的界面元素；在結(jié)構(gòu)層的交互設(shè)計(jì)中已經(jīng)決定了哪個(gè)功能要在哪個(gè)界面上完成；這些功能在界面上如何被用戶認(rèn)知到，這就是界面設(shè)計(jì)的范疇。一個(gè)設(shè)計(jì)良好的界面是要組織好用戶最常采用的行為;同時(shí)讓這些界面元素用最容易的方式獲取和使用。▲界面第一次呈現(xiàn)給用戶的時(shí)候，要仔細(xì)考慮每一個(gè)選項(xiàng)的默認(rèn)值。了解用戶的任務(wù)和目標(biāo)，如果大多數(shù)人都希望在快速搜索的結(jié)果中看到更多篩選參數(shù)的話，保持“更多細(xì)節(jié)參數(shù)”復(fù)選框?yàn)槟J(rèn)選中狀態(tài)；就意味著大部分人會(huì)對(duì)得到的結(jié)果感到滿意。APP交互界面設(shè)計(jì)APP交互中涉及的界面設(shè)計(jì)內(nèi)容構(gòu)成公共導(dǎo)航區(qū)：導(dǎo)航欄(navigation)狀態(tài)欄(statusbar)導(dǎo)航設(shè)計(jì)必須同時(shí)完成這三個(gè)目標(biāo)：

1.提供給用戶一種在網(wǎng)站間跳轉(zhuǎn)的方法。

012.導(dǎo)航設(shè)計(jì)傳達(dá)出這些元素和它們所包含內(nèi)容之間的關(guān)系。3.導(dǎo)航設(shè)計(jì)傳達(dá)出它的內(nèi)容和用戶及當(dāng)前瀏覽頁(yè)面之間的關(guān)系。狀態(tài)欄(statusbar)狀態(tài)指示器。APP交互中涉及的界面設(shè)計(jì)內(nèi)容構(gòu)成

02底部標(biāo)簽欄具有很強(qiáng)的包容性，可以形成最基本的信息框架，然后用其他的導(dǎo)航模式來承載具體的功能和內(nèi)容。主