25第五章5-App界面元素设计的构成及UI设计组件

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交互界面设计每一个界面都包含一组不同的界面元素；在结构层的交互设计中已经决定了哪个功能要在哪个界面上完成；这些功能在界面上如何被用户认知到，这就是界面设计的范畴。一个设计良好的界面是要组织好用户最常采用的行为;同时让这些界面元素用最容易的方式获取和使用。▲界面第一次呈现给用户的时候，要仔细考虑每一个选项的默认值。了解用户的任务和目标，如果大多数人都希望在快速搜索的结果中看到更多筛选参数的话，保持“更多细节参数”复选框为默认选中状态；就意味着大部分人会对得到的结果感到满意。APP交互界面设计APP交互中涉及的界面设计内容构成公共导航区：导航栏(navigation)状态栏(statusbar)导航设计必须同时完成这三个目标：

1.提供给用户一种在网站间跳转的方法。

012.导航设计传达出这些元素和它们所包含内容之间的关系。3.导航设计传达出它的内容和用户及当前浏览页面之间的关系。状态栏(statusbar)状态指示器。APP交互中涉及的界面设计内容构成

02底部标签栏具有很强的包容性，可以形成最基本的信息框架，然后用其他的导航模式来承载具体的功能和内容。主