App界面元素设计的构成及UI设计组件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
一个设计良好的界面是要组织好用户最常采用的行为; 同时让这些界面元素用最容易的方式获取和使用。APP交互中涉及的界面设计内源自构成公共导航区：01
导航栏(navigation) 状态栏(status bar)
导航设计必须同时完成这三个目标： 1. 提供给用户一种在网站间跳转的方法。 2.导航设计传达出这些元素和它们所包含内容之间的关系。 3.导航设计传达出它的内容和用户及当前浏览页面之间的关系。 状态栏(status bar) 状态指示器。
02 视觉和心理需求
在浏览页面时，我们会根据自己的兴趣对视觉刺激强的事物 首先分配注意力； 在app界面设计时要考虑视觉的需求和心理的需求，随着界 面的即时性改变设计。
App界面元素设计的构成方 法
03 用户的定势和期望
定势指的是某种活动前的心理预备状态; 期望是指对某个事物发展的预设。 在交互设计中，用户更期待高效和降低认知负 荷，扁平化风格应势而起。
App移动端 UI交互设计组件
09 活动视图控制器
（activity view controller）
是一个临时视图，当中罗列了一系列可以针对 页面特定内容的系统服务和定制服务。
App移动端 UI交互设计组件
10 snackbar
是一种针对操作的轻量级反馈机制，通常以一 个小的弹出框的形式，出现在屏幕下方； 图层关系在屏幕所有层的顶层，包括浮动操作 按钮。
知识要点
01 02 03
App移动端 UI交互设计常用组件
常用App UI组件
警告提示
行动列表/动作菜单
标签栏
工具栏
底部动作条
菜单
选择器
下拉菜单
活动视图控制器
toast
App移动端交互设计常用组件
App移动端 UI交互设计组件
01 警告提示（Alert）
用来传达应用或设备某些状态的信息， 常常需要用户来点击操作。
App移动端 UI交互设计组件
02 行动列表（action sheet）
提示与用户触发的操作直接相关的一系列选项， 包含两个或以上的按钮。
App移动端 UI交互设计组件
使用场景
警告提示（alert）： 侧重提示文字；表示提示文字的内容优先级较高； 按钮少于2个时，建议使用警示框；
行动列表/动作菜单（action sheet）： 侧重选择按钮；表示选择按钮的功能优先级较高； 按钮多于2个时，建议使用行动列表；
警告提示和行动列表的区别和用法
App移动端 UI交互设计组件
03 标签栏（tab bar）
选项卡切换组件；让用户在不同的子任务、视 图和模式中进行切换。
App移动端 UI交互设计组件
04 工具栏（tool bar）
展示用于操作当前屏幕中各对象的组件；
App移动端 UI交互设计组件
05 底部动作条（bottom sheets）
App移动端 UI交互设计组件
11 toast
主要用于提示系统消息。
App界面元素设计的构成方法
01、显著性元素
显著性要素主要分为感觉和认知两大类。 感觉类的主要体现颜色、位置、大小等物理特征; 认知类反映出物体与人的关系。 注意：元素不要过多，会造成视觉的复杂感。
App界面元素设计的构成方法
APP交互界面设计
App交互界面设计
选择正确的界面元素。 每一个界面都包含一组不同的界面元素； 在结构层的交互设计中已经决定了哪个功能要在哪个界面上完成； 这些功能在界面上如何被用户认知到，这就是界面设计的范畴。
APP交互界面设计
▲ 界面第一次呈现给用户的时候，要仔细考虑每一个选项的默
认值。 了解用户的任务和目标，如果大多数人都希望在快速搜索的 结果中看到更多筛选参数的话，保持“更多细节参数”复选 框为默认选中状态；就意味着大部分人会对得到的结果感到 满意。
07 选择器
对于互斥选项的情况，使用选择器。 选择器可以来回切换确定，同时由于选择器里 面的内容滚动，所以可以容纳非常多的选项。
App移动端 UI交互设计组件
08 下拉菜单(Dropdown)
将动作或菜单折叠到下拉菜单中，常用于提供 快捷入口；引导用户做其他操作任务。 当页面上的操作命令过多时，下拉菜单组件可 以收纳操作元素。
APP交互中涉及的界面设计内容构成
02 主菜单栏
标签栏（Label bar）
底部标签栏具有很强的包容性，可以形成最基本的信息框架， 然后用其他的导航模式来承载具体的功能和内容。
APP交互中涉及的界面设计内容构成
03 功能操作区 即：内容区域(content)
是软件的核心部分; 也是版面上面积最宽的部分。
从屏幕底部边缘向上滑出的一个面板; 使用这种方式向用户呈现一组功能； 提供三个或三个以上的操作需要提供给用户选 择、并且不需要对操作有额外的解释。
App移动端 UI交互设计组件
06 菜单（menus）
是一个离散的选项或者动作，并且能够影响到 应用、视图或者视图中选中的按钮。
App移动端 UI交互设计组件
导航栏(navigation) 状态栏(status bar)
导航设计必须同时完成这三个目标： 1. 提供给用户一种在网站间跳转的方法。 2.导航设计传达出这些元素和它们所包含内容之间的关系。 3.导航设计传达出它的内容和用户及当前浏览页面之间的关系。 状态栏(status bar) 状态指示器。
02 视觉和心理需求
在浏览页面时，我们会根据自己的兴趣对视觉刺激强的事物 首先分配注意力； 在app界面设计时要考虑视觉的需求和心理的需求，随着界 面的即时性改变设计。
App界面元素设计的构成方 法
03 用户的定势和期望
定势指的是某种活动前的心理预备状态; 期望是指对某个事物发展的预设。 在交互设计中，用户更期待高效和降低认知负 荷，扁平化风格应势而起。
App移动端 UI交互设计组件
09 活动视图控制器
（activity view controller）
是一个临时视图，当中罗列了一系列可以针对 页面特定内容的系统服务和定制服务。
App移动端 UI交互设计组件
10 snackbar
是一种针对操作的轻量级反馈机制，通常以一 个小的弹出框的形式，出现在屏幕下方； 图层关系在屏幕所有层的顶层，包括浮动操作 按钮。
知识要点
01 02 03
App移动端 UI交互设计常用组件
常用App UI组件
警告提示
行动列表/动作菜单
标签栏
工具栏
底部动作条
菜单
选择器
下拉菜单
活动视图控制器
toast
App移动端交互设计常用组件
App移动端 UI交互设计组件
01 警告提示（Alert）
用来传达应用或设备某些状态的信息， 常常需要用户来点击操作。
App移动端 UI交互设计组件
02 行动列表（action sheet）
提示与用户触发的操作直接相关的一系列选项， 包含两个或以上的按钮。
App移动端 UI交互设计组件
使用场景
警告提示（alert）： 侧重提示文字；表示提示文字的内容优先级较高； 按钮少于2个时，建议使用警示框；
行动列表/动作菜单（action sheet）： 侧重选择按钮；表示选择按钮的功能优先级较高； 按钮多于2个时，建议使用行动列表；
警告提示和行动列表的区别和用法
App移动端 UI交互设计组件
03 标签栏（tab bar）
选项卡切换组件；让用户在不同的子任务、视 图和模式中进行切换。
App移动端 UI交互设计组件
04 工具栏（tool bar）
展示用于操作当前屏幕中各对象的组件；
App移动端 UI交互设计组件
05 底部动作条（bottom sheets）
App移动端 UI交互设计组件
11 toast
主要用于提示系统消息。
App界面元素设计的构成方法
01、显著性元素
显著性要素主要分为感觉和认知两大类。 感觉类的主要体现颜色、位置、大小等物理特征; 认知类反映出物体与人的关系。 注意：元素不要过多，会造成视觉的复杂感。
App界面元素设计的构成方法
APP交互界面设计
App交互界面设计
选择正确的界面元素。 每一个界面都包含一组不同的界面元素； 在结构层的交互设计中已经决定了哪个功能要在哪个界面上完成； 这些功能在界面上如何被用户认知到，这就是界面设计的范畴。
APP交互界面设计
▲ 界面第一次呈现给用户的时候，要仔细考虑每一个选项的默
认值。 了解用户的任务和目标，如果大多数人都希望在快速搜索的 结果中看到更多筛选参数的话，保持“更多细节参数”复选 框为默认选中状态；就意味着大部分人会对得到的结果感到 满意。
07 选择器
对于互斥选项的情况，使用选择器。 选择器可以来回切换确定，同时由于选择器里 面的内容滚动，所以可以容纳非常多的选项。
App移动端 UI交互设计组件
08 下拉菜单(Dropdown)
将动作或菜单折叠到下拉菜单中，常用于提供 快捷入口；引导用户做其他操作任务。 当页面上的操作命令过多时，下拉菜单组件可 以收纳操作元素。
APP交互中涉及的界面设计内容构成
02 主菜单栏
标签栏（Label bar）
底部标签栏具有很强的包容性，可以形成最基本的信息框架， 然后用其他的导航模式来承载具体的功能和内容。
APP交互中涉及的界面设计内容构成
03 功能操作区 即：内容区域(content)
是软件的核心部分; 也是版面上面积最宽的部分。
从屏幕底部边缘向上滑出的一个面板; 使用这种方式向用户呈现一组功能； 提供三个或三个以上的操作需要提供给用户选 择、并且不需要对操作有额外的解释。
App移动端 UI交互设计组件
06 菜单（menus）
是一个离散的选项或者动作，并且能够影响到 应用、视图或者视图中选中的按钮。
App移动端 UI交互设计组件