App界面元素設計的構成方法與UI設計組件天津電子信息職業技術學院0102知識要點APP移動端UI交互設計常用組件APP界面元素設計的構成方法03App交互界面內容構成第一部分App移動端UI交互設計常用組件App移動端交互設計常用組件App移動端UI交互設計常用組件警告提示

行動列表/動作菜單標簽欄

工具欄底部動作條

菜單選擇器

下拉菜單活動視圖控制器

toast常用AppUI組件01警告提示（Alert）用來傳達應用或設備某些狀態的信息，常常需要用戶來點擊操作。App移動端UI交互設計組件02行動列表（actionsheet）提示與用戶觸發的操作直接相關的一系列選項，包含兩個或以上的按鈕。App移動端UI交互設計組件警告提示和行動列表的區別和用法App移動端UI交互設計組件警告提示（alert）：側重提示文字；表示提示文字的內容優先級較高；按鈕少于2個時，建議使用警示框；

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

1.提供給用戶一種在網站間跳轉的方法。

012.導航設計傳達出這些元素和它們所包含內容之間的關系。3.導航設計傳達出它的內容和用戶及當前瀏覽頁面之間的關系。狀態欄(statusbar)狀態指示器。APP交互中涉及的界面設計內容構成

02底部標簽欄具有很強的包容性，可以形成最基本的信息框架，然后用其他的導航模式來承載具體的功能和內容。主