SlideShare a Scribd company logo
1 of 152
安卓
样式
斯凯统一系统部UE内部分享资料
秦瑜 整理
目录 Catalogue
数据处理 Dealing with Data
获取输入 Getting Input
导航 Navigation
通知 Notifications
个性化 Personalize
屏幕交互 Screen Interactions
社交 Social
数据处理 Dealing with Data
Part 1
● 改变视图-选择菜单
Change view – Options menu查看
搜索
分类
展示
浏览
查看案例
1、通过点击硬件按钮(hard key)来呼出选择菜单…
2、…选择项图标菜单从底部滑入,触摸相应项目来改变查看方式
3、…改变了数据查看的方式
数据处理 Dealing with Data
返回目录
查看 ● 改变视图-选择菜单
Change view – Options menu
一组数据能以各种方式查看,比如,在一个列表中、在一个栅格上或者在一张地图上。用户可能希望能够在不同的查
看方式中切换。大多数情况下从列表查看转向地图查看,或者从列表查看转向图标查看。当没有足够的空间放置一个
专门的按钮或者文件切换栏,改变查看方式可以作为主菜单中的一项。
何时使用
优点 缺点
● 焦点会指向屏幕:改变查看方式的入口只在必
需的时候才可见。
● 不占用屏幕空间。
● 查看方式更改是个低频操作。
● 使用者不能直接看到更改查看的选项是否可用。
● 使用者在更改查看前必需进行两步操作。
● 如果菜单项具有关联关系,改变取决于用户当
前的屏幕,这样会增加混淆度因为用户必需要记
住哪个是哪个。
数据处理 Dealing with Data
● 改变视图-特定按钮
Change view – Dedicated button
1、一定量的数据,在这个例子中一组搜索结果,显示在一张地图上,屏幕右上方的按钮
显示用户可以同样以列表的方式去查看。点击这个按钮…
2、…将地图视图转换成列表视图。
3、通过再次点击右上角的按钮,用户又能重新回到地图视图。
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 改变视图-特定按钮
Change view – Dedicated button查看
一组数据能够通过多种方式查看,例如,以列表方式或者地图方式。用户可能希望在各种视图中切换,看数据以另外
一种排列方式呈现。绝大多数情况下,从列表视图到地图视图,从列表视图到图标视图。按钮能包含文字、图标、文
字和图标、或者它能看上去像是在两个图标中切换的样子。这个按钮不一定必需在每个视图的固定位置上,但是这做
可能会让用户感到混乱迷惑。但是,推荐一直提供让用户进行前后视图切换的选择按钮。
当你总是希望能有提供给用户切换视图的选择,那么你需要提供一个指定的按钮。当你的屏幕不允许你有这样一个指
定按钮时,你就需要考虑将更改视图的选项放入文件切换栏或者选择菜单中。
何时使用
优点 缺点
● 用户能直接看到能获得哪些不同的视图
● 用户只需点击一次就能更改视图
● 如果结果很多(大于10),列表视图更有利于
用户搜索。
● 按钮一直可见,甚至在不需要它的时候
● “map”按钮看上去更像是搜索按钮,因为它
的位置紧接着文字输入区域。
● 改变视图-标签条
Change view – Tab bar
1、一个标签条显示包含几个标签在其中,它也可以标签“视图”(例如,列表视图和地
图视图)。标签条的使用就像在标签条模型的解释中那样,当用户选择一个视图标签,例
如,地图视图…
2、 …这个标签高亮显示…
3、 …相应的视图就会打开,数据就会呈现在这个视图中。用户能够切换回前一个视图,
通过点击相应的视图标签。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 改变视图-标签条
Change view – Tab bar查看
一组数据能以各种方式查看,比如,在一个列表中、在一个栅格上或者在一张地图上。用户可能希望能够在不同的查
看方式中切换。大多数情况下从列表查看转向地图查看,或者从列表查看转向图标查看。当查看视图是你的应用中的
一个主要功能是,或者如果你期望频繁使用这个选择,各标签对应相应视图能够放在标签栏上。
假如屏幕中没有划拨给标签栏的“地产” ,也没有给指定按钮的,或者更改视图是一个二级功能,考虑把它放入选
择菜单中。
何时使用
优点 缺点
● 快速点击切换视图
●说有视图形式一次直接呈现给用户(没有隐藏在选择
菜单中)
●适合数量少的标签(3-5个)。如果超过了5个,其他
标签对用户将不可见。
●有稳定的导航,保证用户在应用中的方向感。
● 占用屏幕的“不动产”资源
● 标签一直可见,即使不需要它的时候
● 搜索-搜索条
Search-Search bar
搜索条嵌在屏幕顶端并替代动作和
标题栏。它包含三个元素:让用户
输入搜索内容的文字输入框,一个
位于右边点击开始搜索的搜索按钮
和一个放在左边的弹出选择按钮,
用来选择一个搜索模式。弹出选择
按钮一般以一个向下指示箭头的形
式出现。
数据处理 Dealing with Data
查看案例
查看
搜索
分类
展示
浏览
返回目录
● 搜索-搜索条
Search-Search bar
1、当搜索条启动或激活,文本区被
选中,出现一个光标,提示用户可
以开始输入。
2、同时键盘从底部滑出来。随着搜
索条和键盘的启动,先前搜索过的
与弹出选择器选中的图标相关的项
目列表显示出来。提示紧接着标签,
项目有间接相关的信息。点击弹出
选择器的图标切换搜索模式。
3、打开弹出选择器,用户可以选择
想要的搜索模式。当弹出选择器被
打开时文字输入区域不会被聚焦。
点击不同的按钮…
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 搜索-搜索条
Search-Search bar
4、 …打开相关的搜索模式。文字输
入区域再次被聚焦。当用户开始输入,
相关搜索建议显示出来。用户点击搜
索按钮开始询问…
5、…或者通过点击“enter”按钮,
通常以文字“搜索”,或“Done”
显示
6、当问题被提交,结果以列表方式
呈现出来。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
搜索
对于所有的搜索来说,搜索条应该是一致的,比如,搜索条在屏幕顶部一个固定的位置,但同时搜索页来自于动作条
上某个指定的按钮,一个硬件按钮,或者在选择菜单图标中的一个选择。他们必须用起来一致
如果在应用中用户经常在大量内容中搜索相关项目,那么就需要使用一个位于屏幕顶部的特定搜索条。
何时使用
优点 缺点
● 容易识别,因为在每个应用中使用起来是一样的。
● 提供多重搜索模式,让过滤成为可能
● 提供多重搜索模式功能不明显,用户必需注
意到指示按钮。
● 有些设备没有一个特定的搜索按钮(比如,
国际版的Galaxy S)
● 搜索-搜索条
Search-Search bar
● 搜索-主菜单(搜索项)
Search – Main menu
1、用户按下硬件菜单按钮,选择菜单滑入屏幕
2、用户点击选项“搜索”…
3、 …搜索条出现在屏幕顶部,在左边显示应用LOGO(当支持多重搜索模式的时候,应用
logo会被相应图标和所选的搜索模式所代替,同时伴随一个指示箭头)文本区域被选择,
右边的搜索按钮显示,同时键盘从底部滑出。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 搜索-主菜单(搜索项)
Search – Main menu查看
在一个应用中,搜索内容经常是一个重要的功能,但是当屏幕的空间有限并且用搜索条去取代有特定按钮的动作条是
不可取的,这时你就应当把选项放在选择菜单中。选择菜单中的搜索能够很好地与特定搜索条一起使用(在一个固定
于屏幕上方的地方)。这个通常发生在当搜索选项非常重要的时候。
何时使用
优点 缺点
● 与指定搜索条相比,节约屏幕的位置 ● 需要点多下,达到搜索选项。
● 搜索的位置经常不够清晰(整个应用或者只是
这一屏?)
● 搜索-指定项
Search – Dedicated item
特定搜索项是指一个按钮能够在你的应用中发起一次搜索。这个按钮能被放置在一个标签
条中位于顶部,或者在页面的底部,或者在一个仪表板中,就像一个表单项在表单中一样,
或者在一个动作条中。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 搜索-指定项
Search – Dedicated item
1、项目被点击…
2、…一个搜索条或者搜索窗口就会出现,在这里用户能够输入搜索项目。
3、当点击软键盘的“enter”或者点击搜索图标后,搜索结果列表出现。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 搜索-指定项
Search – Dedicated item搜索
搜索功能在你的应用中能变得至关重要,例如,当你提供大量的内容,而用户需要能够迅速找到。当你的屏幕布局不
适合一个动作条,而搜索选项又太重要以至于放入选择菜单中,你应该考虑一个特定的搜索按钮在标签条中、仪表板
或者在一个列表导航中。
何时使用
优点 缺点
● 对用户来说容易获取 ● 占用宝贵的屏幕空间
● 分类-拖&放
Sort – Drag & drop
1、用户按下硬件菜单按钮。
2、选择菜单从屏幕底部滑出。当
“重排”功能在主菜单中被点击…
3、 …拖放功能被启动,它可以通过
加在每个表单项上得视觉对象来分
辨且…
4、 …有一个包含确定和取消动作按
钮的按钮条,在屏幕的底部。
5、用户能点击并按住目标, 并且拖
动它到屏幕中一个不同的位置。
6、当释放的时候,项目被放置在了
特定的位置。用户可以点击“OK”
或者“取消”完成动作。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
分类
当一个列表的顺序非常重要并且能够被自定义的时候,你的应用能够使用拖&放分类功能。为这个手势提供一个清晰
的视觉对象。这个对象通常位于列表项的右边。显示项目实际的运动,让用户能够清楚发生了什么。如果你希望你的
类目能够通过某个分类关键词(例如名字和尺寸)自动分类,那么考虑使用一个分类关键词对话框来分类。
何时使用
优点 缺点
● 允许简单并直观地对列表项进行分类。 ● 在实际的重新排列前要操作许多步骤
● 重排的触摸对象很容易被忽视
● 只可用于触屏
● 分类-拖&放
Sort – Drag & drop
● 分类-分类关键词对话框
Sort-Sort key Dialog
1、分类通常应用在一个长的表单项
中,在这里项目具有多重属性。
2、用户能够通过主菜单来找到分类
选项
3、用户能够点击选择菜单中的一个
分类选项…
4、 …且一个包含可选的分类关键词
对话框显示出来。
5、当用户选择一个关键词,对话框
关闭…
6、 …表单按照所选关键词进行了重
新排列。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
● 分类-分类关键词对话框
Sort-Sort key Dialog分类
当你的应用显示许多项目时并且项目具有多重特性(例如,名称、尺寸和日期)时,分类是很适用的。用户必需扫描
他们感兴趣的特征,或者需要对吧某个特性的不同项目。因此,可以使用一个分类选项进行重新排列。很完美!每个
特性都是一个分类关键词,但是需要提供至少两个关键词,如果你希望用户能够做他们自己的重排,除了依靠分类关
键词,还需要考虑使用拖&放进行分类。
除了分类,整个系列的项目对用户都是可见的。如果你希望显示与用户选择相关的某个特定的类目或项目组群,还可
以考虑使用过滤选项。
何时使用
优点 缺点
● 通过分类关键词自动分类给用户创造了关联信息
的捷径
● 增加了创建不同状态列表的自由度
● 如果有一个按钮切换视图,而不用选择分类选项。
点击一次是分类1,点击第二次是分类2 依此类推。
● 为了对一个列表进行分类需要许多步骤
● 所有项目依然可见,为了查看需要的那一项,
滚动是在所难免的
● 在分类选项间快速切换时,不能看见表单的变
化
● 可扩展列表
Expandable list
项目以组(通常是类目)的方式组织起来放在一个两级列表中。组能单独扩展,用来展示
它的子项目。可扩展列表能在每个条目旁边显示一个指示按钮,指出当前项目的状态:收
缩状态或者展开状态。
注意,指示按钮的位置放置在列表项的左边或右边是取决于设备,收缩状态的指针指向下
或者右方。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
展示
当内容需要在同一屏幕中可见,可扩展列表时非常有用的。内容能被组织进类目覆盖两个层级。当一个组有许多子类,
考虑使用下拉,防止多余的滚动。
何时使用
优点 缺点
● 信息能更简单地被对照起来
● 节约空间,并聚焦第一级的信息。虽然很难与第
二级别的信息对照
● 许多信息显示在一个屏幕上,滚动是无法避免
的。
● 信息不是立即能够看见的,除非列表被展开。
因此很难方便地与第二级信息对照。
● 可扩展列表
Expandable list
● 静态列表
Static list
1、当加载一个静态列表时,有必要显示一个进程对话框,让用户知道内容正在被加载。
当内容加载了x秒钟后基本上就完成了。
2、内容以列表方式显示。项目包含一个标题和通常伴随一个图标或者图片。附加信息也
是可能的,只要它看上去还是一个列表。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
3、当用户想滚动屏幕时,他用手指在某个方向上移动(比如向上),列表就会通过屏幕
向上滚动,新的项目变得可见。
4、当屏幕还在滚动,一个指示器会显示看到的项目在整张列表中的位置。当用户停止滚
动,列表停止移动。指示会逐渐淡出。
● 静态列表
Static list
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
展示
列表在大多数情况下非常有用,因此经常被使用。列表视图是种简单且直接的方式用来显示导航类目,特别是当项目
的数量不是太大量并且你希望你的内容能在一屏之中被查看。列表项都被放在一个单一层级中,垂直的可滚动的列表。
将项目归组的二级标题能够用来简化导航。
当你有一个非常可观的项目导航,考虑使用可扩展列表,一个挖掘列表,或者让列表项动态加载。一个好的解决方案,
在这个情况下,可以使用一个滚动图标,但是项目必须按照字母顺序排列。
何时使用
优点 缺点
● 所有内容同时呈现在屏幕上,无需等待或点击看
更多内容
● 需要时间加载
● 比起页面内容需要更多滚动
● 静态列表
Static list
● 分段(区块)控制
Segmented control
一个分段的控制是一系列水平排列的区块,包含2-5个按钮,通过选择他们可以起到过滤
一系列数据的作用
1、当一个用户点击一个按钮…
2、…被点击按钮依旧高亮显示并且…
3、…数据相应变为所显示片段相关的。
数据处理 Dealing with Data
查看
搜索
分类
展示
浏览
查看案例
返回目录
展示
当你希望不改变当前页面查看或隐藏特定数据是,分段控制会非常有用。如果在同样一组数据中控制不起作用,那么
你需要考虑使用一个状态条。当内容覆盖某个类目,但是需要拆分成不同的分类,你需要使用模块标签。
何时使用
优点 缺点
● 处理大量相似数据的便捷方法。 ● 不同区块中的两个项目很难做比较。
● 分段(区块)控制
Segmented control
● 数据挖掘
Data drill down
1、信息组织在包含多个层级的列表中。点击列表中的某一项…
2、 …打开下一个层级,再次点击该层级列表中的某一项…
3、 …打开,这次,是最后一级。
数据处理 Dealing with Data
查看案例
查看
搜索
分类
展示
浏览
返回目录
展示
通常情况下,信息会被拆分放入多层级的列表中,点击一项让用户进入更多细节的下一级,因此层次结构越深入,信
息越细节。用户能够通过挖掘一系列文件夹来找到某一个特定的文件,最后一级的项目能够被编辑。
当信息需要在同一屏幕中显示,考虑使用一个可扩展列表。当信息需要同时对照或查看时,不要使用挖掘列表。也不
应该在挖掘层级结构中放入太多的级别。
何时使用
优点 缺点
● 你能在某个内容上提供非常详细的信息
● 整个屏幕都可以用来显示详细信息
● 详情只有在发起请求的时候才能看到,因此用户
只能通过请求才能看详情。(隐藏用户可能不会直
接感兴趣的详情)
● 信息不容易比对
● 用户可能会在多层级的信息中迷失(提供面包
屑)
● 数据挖掘
Data drill down
● 动态加载列表
Dynamic loading of a list
1、在列表中,一小部分的项目会被预载。
2、当用户滚动列表时,可以到达最近预载的项目…
3、…一个“loading”的信息和一个活动指示会出现在屏幕的底部,提示项目正在加载中。
当完成的时候,加载信息位置会被最后一条列表项替代。
数据处理 Dealing with Data
查看案例
查看
搜索
分类
展示
浏览
返回目录
● 动态加载列表
Dynamic loading of a list浏览
内容列表项可以非常长,不建议一次加载所有项目。仅加载列表的最靠前的部分,节省了大量用户等待整个列表的时
间。
何时使用
优点 缺点
● 展现方式更好,因为不是所有的列表项在同一时
间加载
● 用户无需点击去看更多的内容
● 用户不知道多少内容被加载了
● 用户每次要在列表中看更多的项目时,要先等
一下
● 如果没有分页提示,用户可能会在浏览中迷失
方向
获取输入 Getting Input
Part 2
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
● 滑块
Slider
在一个滑块显示的范围之间,用户可以选择一个值。 最左边的值是最低值,在最右边的是
最大值。
1、控制条将范围分为两部分,有一个水平控制带左侧控制条所在的高亮部分是当前数值。
右边部分显示用户还有多少数值的调整空间。
2、当用户向右滑动控制条,左侧的高亮部分增加...
查看案例
返回目录
3、...且相应的数值会显示出来(这是可选的),或当这个数值关联到音量调节时,可以播
放声音
4、确认新的数值后点击“确定”键
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
● 滑块
Slider
查看案例
返回目录
输入值
某些选择余地大的选项,在输入数值的时候,通常使用滑块形式呈现,比如距离或音量,这使用户他们能够在一个比
较宽泛的数值范围中进行选择。
当只有几个少量可供选择的选项时,可以考虑使用单选按钮或微调。
何时使用
优点 缺点
● 这中数值输入方式非常非常直观且容易理解
● 快速
● 有趣
●当数值的范围比较大时,很难进行确切的数值
设置。
● 滑块
Slider
获取输入 Getting Input
● 微调控制项
Spinner
1、微调控制项类似于下拉菜单,它包含有一组项目列表,用户一次只能选择其中一项。
被选项会出现在文字框中。微调控制项右边显示一个选择器,通过它用户可以识别出微调
控制项。当用户点击微调控制项…
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
2、 …当前屏幕会出现一个对话框,显示这个选项列表中所有的子项,这些子项都为单选。
3、之前的选择或默认选项被选中,也可能出现没有选项被选中的情况
4、当新选项被选中时,对话框消失
5、 …新选的项目出现在微调控制项中
获取输入 Getting Input
● 微调控制项
Spinner输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
输入值
这类微调器适用于用户从预定义选项列表中选择项目时使用。当没有足够的空间显示完整的选项列表时,可以考虑这
种形式。微调控制项往往用于设置页面,并经常结合单选按钮、复选框、时间日期选择器等输入方式。当在微调控制
项中只能选择单一项目时,使用单选按钮
何时使用
优点 缺点
● 节省了宝贵的屏幕空间
● 介绍预定义内容,帮助用户作出选择
● 能够快速精准地输入数据
● 微调控制项选项只有点击后才能显示
● 微调控制项的对话框会遮挡屏幕和背景,会干
扰用户
● 不允许输入自定义值
● 在某些情况下,该微调控制项的控制框使用起
来比较棘手
● 微调控制项
Spinner
● 软键盘-提取
Soft keyboard-Extract
1、键入文字的弹出模式常见于手机
横屏时
2、当点击输入框时…
3、整个输入框被弹出来且满屏显示,
仅留空间给软键盘
4、文字使用软件盘键入,输入框高
亮。当软键盘隐藏时…
5、屏幕显示上一页内容,且之前键
入的文字出现在对应的输入框内
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
输入文字
少数模式被用来组织应用程序和软键盘之间的可用空间。当软件盘出现,会有一些可用空间非常小,以至于无法利用,
这时,就需要使用键入文档的弹出模式。这种情况通常出现在横屏的情况下。当你的手机处于竖屏时,应考虑全屏扫
描这种输入模式
何时使用
优点 缺点
● 在横屏时,有足够的空间输入文字 ● 输入框从应用程序弹出,用户可能看不到对应
的上下文
● 软键盘-提取
Soft keyboard-Extract
● 软键盘-全景与扫描
Soft keyboard-Pan&Scan
1、当输入框被选择后
2、屏幕整屏上移,将输入框的下方空间腾给软键盘
3、输入框高亮,文字可以通过软键盘键入输入框内
4、当软键盘隐藏时,屏幕回到原来位置,刚才输入的文字显示在输入框内
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
● 软键盘-全景与扫描
Soft keyboard-Pan&Scan
输入文字
少量的模式可以将应用程序和软键盘之间的可用空间组织起来。在目前现有的应用程序中,使用软键盘输入文字的默
认模式是全景扫描,因为它最安全。当您的应用程序输入框在屏幕的中下方时,使用全景扫描模式
何时使用
优点 缺点
● 屏幕只须进行些微的调整(相对于“调整大小”模
式)
● 应用程序和软件盘都能被看见:输入上下文清晰
● 屏幕需要整体移动,可能会混淆用户
● 内容无法适当滚动,页眉部分会移出屏外,有
时看起来会像全屏,但它可能并不是
● 多重选择-复选框
Multiple select-Check box
试用复选框,你能使用户一次执行多个项目的操作
1、每个项目都带一个复选框
2、用户可以点击相应项目列表的复选框进行选择。再次点击复选框,可以取消
该项目的选择
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
3、勾选一个复选框时,就会出现一个按键栏或工具栏。栏内包含的按钮可以为
所选的项目执行一个或多个操作,另外还有一个取消按钮。
4、当用户点击操作按钮,被选项目将执行所需的操作
● 多重选择-复选框
Multiple select-Check box
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
● 多重选择-复选框
Multiple select-Check box
选择多项
你想让用户选择多个具有相同操作的项目。当用户选择的项目很多时,可以添加一个全选和反选的勾选项
何时使用
优点 缺点
● 这是一个快速执行多个项目的方法,但是这些项目
只具备单一操作
● 用户可能很难觉察到这是一个多选项
● 日期时间选择器-加减
Date and Time picker – Plus minus
获取输入 Getting Input
1、点击指定的目标后(通常为一个显示时间的触摸目标),一个时间选择器的
弹出框出现在当前屏幕的前端,至少它能对时间或日期进行设置,包含了可调控
的时间设置,执行确认和取消的两个按钮。此外,还提供了能够轻松切换
AM/PM上/下午的按钮。即时钟就是用这种方式设置
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
2、用户可以通过“加”、“减”控制键,设置所需的时间。每点击一次控件,
数值就随之增减。长按控件,数值可以快速增加或减少
3、弹框顶部的的数值,是通过用户使用控件所设置的数值而产生变化的
4、用户点击”OK”键,确认并设置时间
● 日期时间选择器-加减
Date and Time picker – Plus minus
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
时间加减选择器在用户设置时间或日期的情况下都是有效的。除了运用此种方法来添加所需的时间或日期,你还可以
通过键盘进行操作。你也可以选择用时间或日期设置转盘,但并不是所有安卓设备上都有这样不标准的时间选择工具
何时使用
优点 缺点
● 用户非常熟悉它,很容易理解它的工作原理,
因为它与数字时钟的设置有很多共同点
● 使用转盘设置时间缺少乐趣
● 根据时间格式,弹框宽度随着数值的改变而改
变,因而造成每个部位的跳动
● 当增加数值(即推动顶部的按钮)数值可能会
被用户的手指遮挡
● 日期时间选择器-加减
Date and Time picker – Plus minus
设置
时间日期
● 日期时间选择器-转轮
Date and Time picker – Wheel
1、点击指定的目标后(通常是一个显示时间的触摸目标),一个时间选择器的
弹窗在当前屏幕打开。时间选择器至少包含了两个转轮,两个执行“确定”和
“取消”的按钮。除此之外,额外添加的转轮可以用来输入“年”或者进行“上
/下午”的切换。选中转轮中的数字时,数字高亮显示
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
2、滑动转轮,使它缓慢自转,用户可以由此进行时间设置,用力转动转轮,可
以让它快速旋转。转轮在用力转动后,将慢慢停下
3、点击“OK”键,设置好时间,点击“取消”按钮放弃该设置。时间选择器窗
口关闭并返回到原来页面
4、这种模式是HTC所特有的,并不是安卓系统的标准组件
● 日期时间选择器-转轮
Date and Time picker – Wheel
获取输入 Getting Input
输入值
输入文字
选择多项
设置
时间日期
查看案例
返回目录
设置
时间日期
每种情况下,当用户设定时间或日期时,日期转轮和时间选择器都是适用的。但转轮比标准的用加减数字去设定时间
和日期要有趣得多。如果你想你的用户能使用键盘设定时间,可以用加减数字的时间日期选择器
何时使用
优点 缺点
● 比传统的加减数字的时间日期选择器更有趣
● 提供了令人熟悉的交互,对用户而言更简单易懂
● 为触摸屏提供了很好的体验,比加减选择器更好
● 用户无法使用键盘去控制转轮
● 设置分钟的转轮只能停止在59分上,而 无法循
环前进至0分,所以必须从59分向前滑动很多回
到0分
● 使用转轮输入要比使用键盘输入耗费更多的时
间
● 用户无法从日历中挑选日期,其难度如同在一
个月中找第二个周五一样困难
● 日期时间选择器-转轮
Date and Time picker – Wheel
导航 Navigation
Part 3
突出重点
找路
内容导航
● 动作条
Action Bar
导航 Navigation
动作条
1、坐落在屏幕顶部的支持导航和突出重要的
功能
2、取代标题栏(通常被动作条包含在内)
3、最好是使用贯穿你的应用的动作,例如搜
索,刷新和撰写
4、可以提供一个回到应用首页的链接,通过
点击应用的LOGO
5、最好是没有上下文,但动作可以每页不同
切换
快捷入口
当前
操作入口
查看案例
返回目录
突出重点
你希望把关键动作放在屏幕上,这样它们就可以被看到。你不想把它们藏在菜单按钮下。动作条最好用在普通的动作,
如搜索,刷新和撰写。当屏幕空间和珍贵的时候,考虑将动作放入选项菜单中。
何时使用
优点 缺点
● 轻松访问关键功能
● 在您的应用程序中为用户提供了一个锚点
● 提供了烙印让用户知道他们在哪里
● 比放置在选项菜单中,需要更多的空间
● 在横屏模式中,屏幕跨度很远才能到达
● 没有视觉文案用户需要事件了解你的Logo是去
“主页”的链接或者仅仅只是一个Logo
● 动作条
Action Bar
● 仪表盘-类目
Dashboard – Categories
导航 Navigation
1、仪表盘是你应用的欢迎页面。它提供给用户一个起点,仪表盘可以是动态的或静态的,例
如你可以包含动态壁纸或变化内容例如新闻标题。
2、在类目仪表盘中,以多个类目的形式显示通往内容的入口。类目以一个图标加一个标题来
呈现,并以网格方向排满整屏。这个排列允许用户更快找到内容。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 仪表盘-类目
Dashboard – Categories
突出重点
你的应用为内容聚焦型且你的内容可以被分成类目时可以使用类目仪表盘。为了提升可搜索性,搜索条也需要包含在
仪表盘中。仪表盘也可以与一个动作条一起使用。
何时使用
优点 缺点
● 对应用的内容有一个好的概览
● 对于在海量内容中导航来说,是个简单的
起点
● 如果用户能够自定义仪表盘的类目顺序会
更好。它帮助用户快速到达最常用的项目。
● 仪表盘占用大量屏幕空间
● 对需要的内容来说意味着多一步导航
● 对某些应用来说,直接登录应用比通过一个仪表盘来的
更有用。
● 定义一系列类目可能给用户这种概念,该应用仅限于这
些特定类目。而情况可能并不是这样。
● 可能会让初学者迷惑,例如他们可能会说“从哪里开始
呢?”
● 仪表盘-功能
Dashboard – Feature
导航 Navigation
1、仪表盘是你应用的欢迎页面。它提供给用户一个起点,仪表盘可以是动态的或静态的,
例如你可以包含动态壁纸或变化内容例如新闻标题。
功能仪表盘满屏列出了你的应用中的关键功能。它为重要任务和功能提供了简单的入口。
这些功能以网格方式排列,显示一个图标加一个标题。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 仪表盘-功能
Dashboard – Feature
突出重点
当你的应用时任务聚焦型并支持多项任务和功能,可以使用功能仪表盘。如果你想为好玩、新的或频繁使用的任务提
供一个快速的概览,那么功能仪表盘是一个理想选择。仪表盘可以搭配一个动作条,例如,提供一个搜索选项给用户。
何时使用
优点 缺点
● 用户可以很容易到达最重要的任务
● 仪表盘为应用的功能提供一个概览
● 如果自定义能够成为用户可以快速到达的一个
一系列功能中的一个…
● 对中级到高级的用户来说很好,因为他们大致
知道在登录应用后该做什么。
● 仪表盘占用大量屏幕空间
● 显示在仪表盘中的功能可能被预期为应用的仅有
的一些功能。
● 仪表盘可以显示一个额外的点击来到达真实的数
据。
● 以栅格视图来开发类目不容易
● 减慢任务间切换的导航。需要去到仪表板中然后
选择需要的任务/视图。应用需要以最常用的视图
开始。
● 向下钻取式导航
Drill Down Navigation
导航 Navigation
1、信息被组织在一个多级别列表中。点击列表中的项目…
2、…打开下一级。在该项目上再点一次…
3、…打开,在这种情况下,最后一级。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
● 向下钻取式导航
Drill Down Navigation
找路
通常信息分成列出了多层次。点击一个项目,使用户移动到一个水平更详细,所以到更深的层次,更详细的信息。用
户还可以钻通过一系列的文件夹中找到一个特定的文件。可编辑的最后阶段。
当信息需要显示在同一屏幕上,可以考虑使用一个可扩展的列表。
信息需要相比,或同时观看,不适用。
不要放太多的步骤层级。
何时使用
优点 缺点
● 可以提供非常详细的信息在某些内容
● 整个屏幕可以显示详细的信息
● 信息不能比较
● 用户可能会迷失在多层次的信息(提供面包)
● 列表导航
List Navigation
导航 Navigation
1、内容显示在列表中,列表项包含一个标题,通常还伴随一个图标或图像。只要它还
是一个列表,有可能有附加信息。
2、当用户按自己想滚动的方向移动手指(本例中是向上移动)列表就向上穿过屏幕,
新的列表项可见。
3、当屏幕还在移动,一个指示标志显示已查看项目在整个列表中的位置。当用户停止
滚动,列表就停止移动,指示标志渐渐淡出。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
找路
列表在大部分时间都非常有用,因此也最常得到应用。列表视图是一个简单和直接的显示导航项的方式,特别是当项
目数量不是特别多的时候。它们被放入一个单独的层级,垂直可滚动的列表中。二级标题可以把项目拆分成组,用来
让导航更加简单。
当你考虑大量导航信息项时,考虑使用一个可扩展列表,或者一个数据挖掘列表。
何时使用
优点 缺点
● 用一种直接的方式提供导航 ● 当列表太多用户会失去他的全局意识。
● 列表导航
List Navigation
导航 Navigation
● 分段(区块)控制
Segmented control
见 数据处理 Dealing with Data
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
导航 Navigation
● 可扩展列表
Expandable list突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
见 数据处理 Dealing with Data
返回目录
导航 Navigation
● 模式选择器
Mode selector
1、用户正在查看内容,这里显示的是一个列表。
2、紧贴着动作条或标题条的是模式选择器。它包含一个指示箭头,这样用户就知道它可
以在模式或区块(由模式选择器定义的元素)中切换了,且区块名称当前可见。这个区块
或模式的名称也可以在动作条或标题条中显示出来。
模式选择器也可以放置在动作条或标题条里面的左侧或右侧。点击模式选择器…
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
导航 Navigation
● 模式选择器
Mode selector
3、 …包含所有区块的面板滑入屏幕中。
4、面板可以通过点击指示箭头来关闭,或者点击面板外屏幕。
5、当用户点击面板中的另外一个区块…
6、…那个包含相应内容的特定区块,显示出来…
7、…且模式选择器显示这个区块被选中。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
● 模式选择器
Mode selector找路
模式选择器可以在当你有大量内容需要发布的时候,它可以被分成不同模式或区块,在大量的内容面前,选择器工作
像是一个过滤器。保证你拆分的内容彼此间相似。不要在选择器中额外增加动作。当你希望用户在不同动作间跳转,
请用标签条代替。
当你不希望内容转换到另一部分来加载,那么你可以使用分段控制。
何时使用
优点 缺点
● 你能分散大量内容
● 用户对可供内容一目了然
● 在不同区块之间触发对用户来说是很有吸引力的
事。
● 指示箭头通常很难注意到。
导航 Navigation
● 标签
Tabs
在某个特定主题下,内容被分成3个标签页。每个标签代表主题的一个方面或部分。
1、在这里第一个标签被选中。它现实与主题相关的信息。当第二个标签被点击…
2、 …这个标签被高亮显示且与这方面相关的内容会显示出来。当最后一个标签被点…
3、 …它被选中,相关内容被显示出来。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
找路
标签在这样的情况下使用,当你希望大量信息被放在一个主题下且分为不同部分。这些部分以水平一行2个到5个标
签的方式显示。每个部分的标签文字就显示在标签中。
标签在希望帮助用户找到部分数据而无需改变当前窗口的情况下类似于分段控制,但是分段控制用起来更像是过滤器,
而标签是将数据分成不同部分。当你希望用户在不同组数据中切换,你可以使用一个标签条。
何时使用
优点 缺点
● 从几个不同部分划分数据的直接方式。
● 直接来自网页界面,因此用户非常熟悉规则。
● 当应用还包含一个标题条,或者动作条,以及
一个标题的时候,它会占用大量屏幕资源(空间)
● 当有超过3个标签被使用,那么就没有地方给标
签文字。
● 标签
Tabs
导航 Navigation
● 窗口遮挡(窗帘)
Window shade
1、窗口遮挡控制在这里位于屏幕底部,它通常是一个水平条,也可以被认为是一个视觉
暗示,这里有三条水平线。当用户点击并按住这个控制(在有些情况下,当他点一下
它)…
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
2、 …并将控制条拉起来(这里不需要点击),与它相关联的窗口遮挡滑入屏幕,用户可
以放开控制条当它到达某个特定的位置。窗口遮挡会滑回它的最初位置,取决于拖动手势
的速度和控制所释放的屏幕位置…
导航 Navigation
● 窗口遮挡(窗帘)
Window shade突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
3、 …或者它会覆盖整个视图,显示与它相关的内容或功能。
4、窗口遮挡能够再次关闭通过把窗口遮挡控制条拉回去,点击返回按钮,或者通过点击
控制条,当它是以此方式打开的。
导航 Navigation
● 窗口遮挡(窗帘)
Window shade突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 窗口遮挡(窗帘)
Window shade
找路
通过可以从状态条向下拉出来的通知遮挡(窗帘),所有安卓用户都知道窗口遮挡模式。窗口遮挡运行方式与此一模
一样,但是它应用在不同的情况下。
窗口遮挡主要用来提供导航选择。你可以让窗口遮挡包含你的应用中受欢迎的部分的图标,或者设置,或者你可以用
它让用户在不同的分区中跳转,较常见于一些新的应用中。这个选项看起来很像模式选择器,但是后者并不可占据整
个屏幕空间,你也可以用窗口遮挡让用户轻松到达该应用中任何地方都能到达的功能。
何时使用
优点 缺点
● 让用户去不同内容的一种有吸引力的方
式。与现实生活中的窗帘有相似的方式,
需要向下啦或向上啦,让它变得很好玩,
且看上去也不错。
● 不占用太多屏幕空间,只需窗口遮挡控
制条需要显示出来。
● 窗口遮挡控制条如果不给予正确的视觉暗示则很容易被忽视。
● 被窗口遮挡覆盖的视图将不可见。这会让用户感觉迷失。
● 用户突然试图滚动列表或滚动视图都有可能触发它。
● 有些设备将触摸控制放在紧挨屏幕底部的地方,因此用户可能会
突然触发一个毁灭性的动作。
导航 Navigation
● 可滑动顶部导航
Slideable top navigation
1、在屏幕顶部放置有一系列水平排列的按钮,标签或标记,每个都代表在应用中的一部
分内容。默认,通常最左边的按钮被选择。只有一个小部分适合屏幕…
2、…因此用户可以将它抛向或滑向左侧来揭开剩余的部分。
3、被选中部分在移动中保持选中状态,甚至当移动距离过远时,不可见。
4、用户选择另外一个部分…而相应的内容被加载然后显示出来。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
● 可滑动顶部导航
Slideable top navigation
找路
当你的应用发布大量的信息且内容被分成多个部分,你可以选择将这些部分整合成顶部导航的类目,这样当他们不合
适屏幕尺寸时可以水平滚动。
重要的是这些类目彼此相似。顶部导航并非意味着包含任何动作。若要那样,你可以使用一个标签条。
可滑动顶部导航可以和模式选择器在相同情况下使用。同样,窗口窗帘也能在相似情况下使用,但是在这里功能可以
被占用,而在顶部导航中是不存在这种状况的。
何时使用
优点 缺点
● 可以在顶部导航中使用多类目。
● 很容易扫到不同的分区。不需要额外点击来显示
各部分(像在模式选择器中那样),只需轻轻一扫
的手势就可以显示位于屏幕以外的部分了。
● 水平扫描分区并不容易(和模式选择器相比,它
是垂直显示分区)
● 当一个区域被选择且被移动,当它还在选中状态
时,它很容易不可见。
导航 Navigation
● 滚动条
Scroll thumb突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
见 屏幕交互 Screen Interactions
返回目录
导航 Navigation
● 分页步骤
Stepping
1、分页步骤让用户同时处理同一页/项数据。 每个屏幕都有上一页和下一页
按钮用来通过屏幕分页,除了第一屏。在这一屏中上一页按钮不可用。
2、当用户点击下一页按钮…
3、…下一屏内容下载…
4、…现在上一页按钮可点了。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
● 分页步骤
Stepping
内容导航
分页步骤在用户需要以线性方式扫描屏幕的时候使用(例如,多页教程,不同文章)。它确保用户能够将注意力集中
在每一屏上。
当用户要在众多屏中找到一个项,不推荐使用分页步骤。如果情况就是这样,那么考虑使用页码或增加一个搜索选项
帮助找到那个特定项。
何时使用
优点 缺点
● 引导用户在一系列数据中线性穿梭,因此每个项
目都会得到关注。
● 导航到某个特定项需要花费许多步。
● 用户在经过许多下一屏后迷失焦点。
导航 Navigation
● 圆盘传送带
Carousel
1、项目以线性或环形方式组织起来(从1到号码X)。
2、焦点(选择)通过高亮或增加选项的尺寸凸显于屏幕中。
3、用户可以通过左右滑动屏幕来滚动项目。项目沿着手指的方向滚动。取决
于手指的方向或者是传输带的设置,一个或多个项目穿过屏幕移动。当某项被
聚焦,传输带停止移动。所有项目通常都是可点的。
查看案例
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
返回目录
● 圆盘传送带
Carousel
内容导航
当你希望为目标选择(使用了图片的目标)提供一个有亲和力的方法时可以使用圆盘传输带。当你在有限的屏幕空间
提供多项导航时候,它也很好用。不要使用传输带,当需要让用户一次看到所有导航项的时候。当屏幕的空间确实有
限,考虑在选项菜单中使用导航项。
传输带导航可以以不同的形状和尺寸出现,取决于可供用户体验需求的屏幕空间的大小。两个频繁使用的选项是:作
为你的应用开始点的全屏传输带和一个位于屏幕顶部,包含多项高频使用的菜单项的传输带。
何时使用
优点 缺点
● 聪明利用屏幕空间
● 传输带让目标选择成为一个有吸引力的体验
● 用户需要滚动查找需求项
● 当空间有限的情况下,传输带会占据可观的屏幕
空间。
导航 Navigation
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
● 改变视图-标签条
Change view – Tab bar
查看案例
见 数据处理 Dealing with Data
返回目录
导航 Navigation
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
● 模式选择器
Mode selector
查看案例
见 导航 Navigation
返回目录
● 窗口遮挡(窗帘)
Window shade
查看案例
导航 Navigation
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
见 导航 Navigation
返回目录
导航 Navigation
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
● 可滑动顶部导航
Slideable top navigation
查看案例
见 导航 Navigation
返回目录
导航 Navigation
● 相关菜单
Context Menu
1、当用户在视图中长按某特定项…
2、…一个相关菜单,或者也被称作长按菜单,以浮层列表的形式打开,从这
里用户可以选择一个动作进行操作…
3、…或者点击返回按钮取消。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 相关菜单
Context Menu
快捷入口
相关菜单就像是windows操作系统下的右键快捷菜单一样。它包含的功能用户也可以在其他地方找到。当你希望为
用户提供对某个项进行操作的常用命令一条捷径,你可以将这些命令放入相关菜单。
只有在所点项目上有命令应用的时候使用相关菜单。命令项会按关联度从上到下排列,从顶部以最密切相关的项目开
始。通常是直接点击该项所触发的操作。
当每项有多个视觉目标你想做选择,考虑使用快速动作。
何时使用
优点 缺点
● 为常用选项提供捷径
● 操作直观:对该特定项目操作动作
● 用户需要发现这里有一个相关菜单,对此没有视
觉暗示
● 当前行为焦点被转移——可能让用户迷失
● 相关菜单会占用大的动作列表
导航 Navigation
● 快速动作
Quick Actions
1、用户点击一个特别的视觉对象…
2、一个快速动作弹层浮在当前屏幕上方,包含可以操作的最重要和明显的动作。
3、用户选择一个动作,会被立即执行,或者之后会有一个确认对话框。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 快速动作
Quick Actions
快捷入口
一个快速动作弹层可以使用在当你想要提供动作给那些有内部竞争的目标。它需要被一个特别的视觉对象触发,因此
用户知道在那里可以做些事。确保弹层不像传统的对话框那样遮挡屏幕,但是弹在项目的上方或下方。在快速动作弹
层中仅使用最重要和最明显的动作。其他相关联动作你可以选择加入到一个快捷菜单中。
不要在支持多重选择情况下使用快速动作,像Gmail。在那种情况下取而代之使用一个按钮条。
何时使用
优点 缺点
●对屏幕内容的破坏降至最低程度
●快
●有趣
●视觉目标很难被注意
●可显示的项目数量有限
导航 Navigation
● 轻扫调取动作
Swipe for action
1、用户在某个列表项上演示轻扫手势,这里他是向右扫。
2、列表中该项被一个层覆盖,这个层沿着手势的方向快速地滑入屏幕中。
3、很快地,当项目被覆盖, 一些图标显示出来,这些图标可被点击用来调取与该项
目相关的行为。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
● 轻扫调取动作
Swipe for action
快捷入口
“轻扫调取动作”模式目前已在许多应用中使用,它提供了一个很好、很快捷的途径让用户选择一个他可以直接对某
个项进行操作的动作。这些占用的动作是这个项目中可供操作动作中最重要且明显的那些。
这个样式能以两种形式存在。第一种是在以上线框图中解释的:轻扫过后,用户可以点击某个图标来发起一个动作。
第二种是当动作直接发生在扫过项目之后。第二组截屏案例显示这种是如何工作的。
用户可以从两个方向上来扫该项。也可以这么思考,在两个方向上扫过的动作操作都是不同的。
由于这种样式的上下文关联的特性,你也可以用一个长按手势来替代扫的手势,呼出动作按钮层。
这些动作可以被轻扫呼出,需要与所选项目具备上下关联,且不能与当前屏幕成为一体。因此你需要将动作放入选择
菜单中,或者当项目被点击并显示在详情页面中,动作可以加在一个工具条上。
除了轻扫调出动作,你也可以使用快速动作,或者一个快捷菜单,但是后者显然缺少“乐趣”或速度。
何时使用
● 轻扫调取动作
Swipe for action
快捷入口
优点 缺点
● 快
● 有趣
● 当用户已经了解它的用法,他会很忙碌且不停地
使用这个手势
● 很难发现,因为缺乏一个视觉暗示
● 项目被扫过后被一个图层覆盖,因此会让用户困
惑于哪个项是他刚才选择的
● 它需要花费用户好一会儿来认识它
● 用户在扫过该项前不知道能操作哪些动作
目标得够大才能使用轻扫的操作
● 关闭快捷菜单不是件无关痛痒的小事,你必须通
过点击返回键(来关闭它)
导航 Navigation
● 改变视图-选择菜单
Change view – Options menu
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
见 数据处理 Dealing with Data
返回目录
导航 Navigation
● 扩展选项菜单
Expanded options menu
1、当用户点击菜单按钮,选项菜单会从屏幕底部滑出。选项菜单包含对当前行为的命令,
或者可以触发另外行为。
2、选项菜单由1到6个包含一个标题和图标的按钮组成。图标是用来识别选项的,标题是
辅助。选项根据相关性分类,从左到右&从上到下,在最前面提供关联性最强的选项。菜
单中的图标可以以2乘3的栅格或3乘2的栅格排列。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
导航 Navigation
● 扩展选项菜单
Expanded options menu
3、当你有6个以上的选项分布在选项菜单中时,产生出第六个按钮,例如在右下角,一个
“更多”按钮。
突出重点
找路
内容导航
切换
快捷入口
当前
操作入口
查看案例
返回目录
当前
操作入口
● 扩展选项菜单
Expanded options menu
你的选择菜单可以为当前行为分配6个以上的选项。
何时使用
优点 缺点
● 避免较少使用的选项弄乱屏幕界面。 ● 需要多一步到达扩展菜单选项。
● 用户需要猜哪些选项会在扩展菜单中
通知 Notifications
Part 4
通知 Notifications
动作通知
请求反馈
1、面包块信息能够被用户的一个行为触发,或者被应用触发。
2、面包块信息在当前屏幕上自动淡入淡出并且只根据消息长度所需的空间进行填充。面
包块信息不允许用户输入。当面包块消息弹出的时候用户当前的行为依然可见和可交互。
即使应用不可见面包块消息依然可以出现。
● 面包块信息
Toast message
查看案例
返回目录
● 相关菜单
Context Menu
动作通知
面包块消息最好用在短的文字消息上,比如“文件已保存”当你相当确定用户正在注意屏幕。面包块消息在你的应用
不活动的时候也能使用,但是由于它天生简短的特性,可能会被错过。一个面包块是不接受用户输入的;如果你希望
用户有所反馈并有所行动,考虑使用一个状态条通知或者一个对话框来替代。
何时使用
优点 缺点
●当用户已经注意到屏幕时,会是非常有效的消息
●最低程度破坏屏幕内容
●当用户不注意屏幕时,会错过通知
●面包块不能接受用户的交互事件
通知 Notifications
1、进度条对话框能被用户行为触发,或者被应用自身触发。例如,启动。
2、进度条对话框至少包含一个标题,通常包含一个对于事件的描述和一个伴随百分比的
进度条。进度条对话框通过实时填充一个条状物来显示进度。此外,可以增加额外的文字
或按钮,比如取消下载。
3、当事件完成后,对话框能自动取消。或者用户点击“取消”按钮手动取消。
● 进度条对话框
Progress bar dialog
动作通知
请求反馈
查看案例
返回目录
● 进度条对话框
Progress bar dialog
动作通知
一个对话框通常是一个小窗口出现在目前活动页面的前面,让下层的活动失去焦点。进度对话框主要用于指示应用的
(下载)加载项目。如果你希望告知你的用户应用正在进行的进程,就可以使用进度条对话框。进度条对话框将进度
量化。
假如你希望显示不确定的进度,你可以使用一个进度圈对话框。当你希望显示正在后台运行的一个事件,你可以使用
当前状态条通知。
何时使用
优点 缺点
● 用进度的方式给用户提供简洁、量化的信息
● 这个对话框能够有取消进度的选择
● 将注意力带离应用,因为它强制用户等待对话框
的关闭。
通知 Notifications
1、进度圈对话框可以应用在许多任务和情景中。在这个线框图中,用户正在登陆到一个
应用。他首先填写好他的用户名和密码,然后点击登录按钮。
2、登录细节需要认证。在这个过程中一个进度圈对话框出现了,意味着用户不知道这个
任务完成需要多久时间。
3、当登录过程结束,用户进入应用到打开的页面,这里是一个仪表盘。
● 进度圈对话框
Progress wheel dialog
动作通知
请求反馈
查看案例
返回目录
● 进度圈对话框
Progress wheel dialog
动作通知
对话框通常是一个位于当前行为前的小窗口,让底层行为失去焦点。进度对话框主要用于指示应用正在(下载)加载
项目。如果你希望向你的用户显示应用正忙于某个行为并正在产生进度,然而你又不能确定到底有多少进程已被完成,
就可以使用进度圈对话框。
如果你想显示量化的进程,你应该使用一个进度条对话框。当你希望显示某个事件正在后台运行的进度,那么你应该
使用正在进行状态条通知。
何时使用
优点 缺点
● 行为正在发生的消息非常清晰
● 进度正在进行时用户在应用中不能进行任
何操作。这样很好,例如应用使用前的验证。
● 用户能够在任何时候取消它(如果强迫那
样)
● 用户不知道多久才能将内容加载完毕。
● 用户对于进度还需要多少时间没有线索
● 进度正在进行时用户在应用中不能进行任何操作。他必
须等待,或者跳到另外一个应用
● 当显示进程圈对话框时,这里没有按钮能够取消
● 对用户来说怎样取消对话框并不总是显而易见的
通知 Notifications
1、用户点击某项将其触发…
2、一个带有进度圈的空白页面显示出来,告诉用户内容正在被加载…
3、当加载完毕,内容显示出来
● 进度圈
Progress wheel
动作通知
请求反馈
查看案例
返回目录
● 进度圈
Progress wheel
动作通知
进度圈用来指示一个应用正忙于加载用来显示的内容。当整屏内容需要被加载时它能被用于一个整屏,或者只有页面
的一部分,例如,在一个模式标签中的内容需要加载。此外,在标题栏和动作栏上可以加一个小的进度圈。
进度圈是在当前屏幕当中显示的。因此它既不会在一个对话框中显示,也不会因为用户的特定行为而被触发,不像进
度圈对话框以上两种情况都可以使用。它只在当用户从一个应用、屏幕、或者标签到达另一个,同时页面需要一些时
间去加载。进度圈不能量化这些所产生的进程。对于这个情况你应该使用进度条…
如果你希望为用户触发的某个动作显示量化的进程,你需要使用一个进度条对话框。当你希望显示后台运行事件的进
程,你需要使用当前状态栏通知。
何时使用
优点 缺点
●用户知道目前正在加载
●因为加载内容是在屏幕内完成的,而不是在它的上层(就
像进度圈对话框那样在上层加载),用户可以很容易地去应
用的其他部分
● 用户不知道多久才能将内容加载完毕。
通知 Notifications
1、用户正在浏览包含特定内容的详情页面。他点击硬件菜单键。
2、选项菜单滑入屏幕中,用户选择“删除”项。
3、一个提示对话框出现在暗调的屏幕中,询问用户他是否确认希望删掉该项。
4、用户可以选择取消或点击OK按钮继续删除项目。
● 提示对话框
Alert dialog
动作通知
请求反馈
查看案例
返回目录
通知 Notifications
5、用户回到项目来源列表中(或者去设置中项目的前一项)。
6、一个面包块消息确认项目已被删除。这个面包块是可选的,但是推荐当自然动作发生
在询问确认的时候。
● 提示对话框
Alert dialog
动作通知
请求反馈
查看案例
返回目录
● 提示对话框
Alert dialog
请求反馈
对话框通常是一个出现在当前动作前的小窗口,让底层动作失去焦点。一个提示对话框时那种让用户注意到当前动作
相关的通知的对话框,需要对它做出反馈。可以是所有种类的操作,不可逆的包括删除或琐碎如“你想在Twitter上
粉我们吗?”这个操作需要用户的输入,否则动作不能发生。为得到反馈,提示对话框可以包含0个,1个,2个或3
个按钮,或者一个包含复选框或单选框的可选列表项。
一个提示对话框通常伴随一个面包块消息,确认用户的行为已经发生。当选择的动作无需确认反馈,你可以放出一个
面包块消息。
当有一个事件发生在后台,并且当你想提供得到来自用户给予的反馈(通常只需让其注意到)的可能时,你应该使用
一个事件驱动型通知。
何时使用
优点 缺点
● 让用户不会错过提示对话框,因此它是一个防止用
户犯错的好办法
● 它意味着多一步操作,当它是一个小操作是,它
会很烦人。
通知 Notifications
1、一次性事件例如收到一封邮件可以通过事件驱动状态条通知来让用户注意到。当一个
通知来了,图标和标题在状态条上闪一次。
2、此后图标就显示在状态条上。
3、状态条可以被拉下来显示窗口遮挡。通知相关的信息都被显示出来。事件驱动型通知
(例如邮件)都显示在通知条下,当当前通知也出现的时候。
● 状态条-事件驱动型通知
Status bar – Event-driven notification
动作通知
请求反馈
查看案例
返回目录
通知 Notifications
4、一个扩展信息可以被点击,同时与它相对应的应用被打开,或者…
5、 …用户可以点击“清除”按钮来清理通知。
6、当通知被清退,窗帘被关闭且图标也从状态条中清除。
● 状态条-事件驱动型通知
Status bar – Event-driven notification
动作通知
请求反馈
查看案例
返回目录
● 状态条-事件驱动型通知
Status bar – Event-driven notification
请求反馈
当你的应用需要提示用户关于一个需要反馈的事件时,你可以使用事件驱动型通知。通知需要被累积,例如大量邮件
需要显示在通知中,而不是每增一封邮件就增加一个单独的通知。如果你的应用没有启动,可以使用状态条通知。当
你的应用是打开的,如果需要一个即时反馈,考虑使用一个提示对话框。如果你需要一个不能忽略的通知,考虑使用
一个当前通知。
何时使用
优点 缺点
● 用户不会从当前操作中分离
● 为不在运行的应用提供通知用户的方法
● 为应用提供一个直接的快捷方式
● 可能不会(立即)让用户注意到
不读的话就可能被清理掉
通知 Notifications
1、当前时间例如USB连接类型可以通过一个当前状态条通知来引起用户注意。当一个事件
开始,一个图标会加入到状态条中。这个通知会一直呆在状态条中持续整个事件过程。
2、一个当前通知可以显示状态条中事件的版本更新。
● 状态条-正在进行中的通知
Status bar – Ongoing notification
动作通知
请求反馈
查看案例
返回目录
通知 Notifications
3、状态条可以被拉下显示窗口遮挡。通知的扩展信息被显示。当前通知显示在窗口遮挡
的顶部。
4、点击一个扩展消息,与之相关的应用同时被打开。“清空”按钮对当前通知不起作用。
5、就算是消息被点击,相应应用被激活,图标会一直在状态条上直至事件停止。
● 状态条-正在进行中的通知
Status bar – Ongoing notification
动作通知
请求反馈
查看案例
返回目录
● 状态条-正在进行中的通知
Status bar – Ongoing notification
请求反馈
当你的应用需要全程通知到用户某一个事件,你可以使用当前状态条通知。当前状态条通知可以在状态条上直接为事
件提供升级(例如,安装一个应用,或者播放一首歌)。如果你希望让你的用户注意到一个一次性事件,考虑使用一
个事件驱动型状态条通知。状态条通知可以在你的应用未被激活的情况下使用。当你的应用被激活且需要一个即时反
馈,考虑使用一个提示对话框。
何时使用
优点 缺点
● “清除”按钮不起作用,增加了用户阅读通知的机
会。
●可以为在状态条上的某事件提供升级,让用户知道。
●如果你的应用不是那么重要,可能会被看成是
多余的。
个性化 Personalize
Part 5
个性化 Personalize
账户管理
收藏
当一个应用给大量需要安全保护的个人数据提供入口,就要用到登录过程。为了能够登录,
用户必须先注册。
1、登录屏幕显示两个区域,一个是用户名或邮箱地址,另一个是密码。还有一个登录的
确定按钮。当任意一文字输入区域被点击…
2、 …软键盘会从屏幕底部滑出,用户能够输入他们的信息。
● 登录
Login
查看案例
返回目录
个性化 Personalize
3、密码是以点来显示的。
4、登录按钮是可见的,虽然只有一部分。用户可以通过选择点击按钮来登录,或者…
5、他能点击进入按钮,让软键盘退出屏幕。这时登录按钮就全部能够点击了。
6、通过点击登录按钮,一个进度圈对话出现,提示用户他们的用户名和密码正在被认证。
如果这个组合是正确的,那么用户就登录了。
账户管理
收藏
● 登录
Login
查看案例
返回目录
● 登录
Login
账户管理
你的应用处理了大量的个人信息。例如名称,邮件地址,消息,参数,账单信息,信用卡数字等等。登录可以是独立
平台,与PC,网页和手机分享相关数据。
如果用户没有账户,登录表单可以提供一个连接给注册账号。此外,它提供一个记住用户的checkbox,当用户可能
再一次登出。可能且方便的话,让用户只登录一次,让他在未来的访问中处于登录状态。这样可以节约他们每次打开
应用登录的大量时间。
何时使用
优点 缺点
● 登录过程实际上总是相同的,因此用户知道该怎么
做。
● 当用户忘记他的密码,他需要在应用的网站上去
重新找回密码。
个性化 Personalize
1、当第一次启动应用的时候,
用户进入欢迎页面。在那他可
以选择创建一个账户,当他从
来不注册这个应用时,后面会
有选项来选择。
2、用户被要求给出 一个用户名
和密码。当他完成时,它点击
回车键,这个键可能也会以文
字“done”来显示,让键盘滑
出屏幕…
● 创建账户
Create Account账户管理
收藏
查看案例
返回目录
3、…让“创建账户”和“取消”
按钮显示出来,用户点击第一
个…
4、…一个进度对话框出现,说
账户正在创建中。
5、当这些完成的时候,一秒钟
的对话显示注册完成。
个性化 Personalize
● 创建账户
Create Account账户管理
收藏
查看案例
返回目录
● 创建账户
Create Account
账户管理
你的应用处理了大量的个人信息。例如名称,邮件地址,消息,参数,账单信息,信用卡数字等等。让用户开始使用
你的应用,他需要先注册,进入一个只有他才能去的安全环境,并编辑他的个人信息。注册的过程对每个用户来说只
发生一次。登录可以是独立平台,与PC,网页和手机分享相关数据。
通过注册你的应用,用户可以登录。此外,当用户可能再次登出时,你可以显示一个勾选框用来记住用户。
何时使用
优点 缺点
● 注册过程实际上总是相同的,这样用户才知道怎么
去做
● 通过注册各项应用和服务,用户不得不管理所有
的用户名和密码,这样导致困难重重
1、在账户预览页面,这里现在
有两个账户已在列,用户可以
点击“增加账户”按钮。
2、用户名和密码已输入,点击
“登录”按钮登录。
3、进度对话框显示账户正在被
认证。
4、当认证完成,第三个账户在
列了。
5、且弹出一个面包块消息确认
账户已经被添加。
● 增加账户-指定按钮
Add account – Dedicated button
个性化 Personalize
账户管理
收藏
查看案例
返回目录
● 增加账户-指定按钮
Add account – Dedicated button
账户管理
增加账户选项可以用在能够管理多个账户的应用中。取代退出,且使用另一个用户名和密码登陆,两个甚至更多账户
挨个共存。用户也可在这些账户中切换,创建和删除账户。
在一些应用中也可以使用选项菜单增加账户。
何时使用
优点 缺点
● 这是增加账户非常直接的方式,因为按钮在屏幕中
可见。
● 到达填写账户详情页面只需要一步。
● 这个按钮占用了屏幕的资源。
个性化 Personalize
1、当用户点击硬件菜单按钮…
2、选项才滑入屏幕,点击“增
加账户”
3、用户输入用户名和密码,并
点击“注册”按钮
4、然后账户被认证…
5、 …当认证完毕后加入到账户
列表中
6、一个面包块消息确认账户已
增加。
● 增加账户-选择菜单
Add account – Options Menu
查看案例
账户管理
收藏
返回目录
● 增加账户-选择菜单
Add account – Options Menu
账户管理
增加账户选项可以用在能够管理多个账户的应用中。取代退出,且使用另一个用户名和密码登陆,两个甚至更多账户
挨个共存。用户也可在这些账户中切换,创建和删除账户。
当在屏幕中某处使用特定按钮来增加一个账户并不重要时,你应该把它放入选择菜单。你也可以考虑将选项都放入屏
幕和选择菜单中。
何时使用
优点 缺点
● 不用占用任何屏幕资源 ● 用户需要找到选项是可以可选的
● 需要多一步点击到达“增加账户”项
个性化 Personalize
● 收藏
Favorites
分配偏爱是一个将普通内容和中意内容相分离的快速方法。偏爱在列表视图中或在项目的
详细视图(不推荐)中完成。
1、快速收藏链接的缩略图(通常是一个星星)可以在项目的顶部某个角上可见。
2、当收藏链接被点击…
3、…它被高亮,项目被收藏。
查看案例
账户管理
收藏
返回目录
● 收藏
Favorites
账户管理
当你的应用提供大量的内容项并且你希望用户能够区别对待这些项的时候使用。提供一个快速收藏链接,在列表视图
中把它放在项旁边。这个链接通常用一颗星的形状代替。此外,你可以单独提供一个收藏项列表,通过菜单项可以到
达。
不要在你希望识别多目录的时候使用收藏。你可以使用标签或文件夹代替。
何时使用
优点 缺点
●简单一步对大量项目进行区分的方法 ●只有一级区分(开-关)
●不可能对收藏添加元数据
个性化 Personalize
● 书签-选项菜单
Bookmark – Options menu
1、用户点击硬件“菜单”按钮…
2、 …选项菜单从底部滑入屏幕,在这里包含了加入收藏选项。
3、在点击“收藏”选项,项目被加入到收藏列表中。
4、一个面包块消息(可选,但是推荐)确认该操作。
查看案例
账户管理
收藏
返回目录
● 书签-选项菜单
Bookmark – Options menu
账户管理
当用户可能在某时回到这个内容上时,可以在你的应用中增加保存和书签内容选项。无需考虑他们把它放在哪里,例
如所有浏览器都有收藏网页的选项。通常浏览器支持多重途径增加书签。考虑在通常可调用的选项菜单中加入收藏选
项是一个明智的做法,因为用户指不定就在那里寻找可能。
何时使用
优点 缺点
● 因为用户对网页书签的概念非常熟悉,他们可能不
自觉地在选项中寻找选项。
● 用户需要寻找是否提供该选项
屏幕交互 Screen Interactions
Part 6
屏幕交互 Screen Interactions
1、用户在屏幕中的某项上长按
2、该项被选中,且用户可以按住它随意拖动
3、当用户在一个空位释放该项目,该项就放置在此。而项目之前放置的位置,现在空
了。它也可能与其他项目交换了位置。
● 拖动
Drag to Move移动内容
滚动内容
放大内容
查看案例
返回目录
● 拖动
Drag to Move
移动内容
拖拽手势可以在用户需要在屏幕中移动物体位置的时候使用。例如改变一个音乐列表,重新排列主页屏幕,或者使用
滑动来输入一个值。
何时使用
优点 缺点
●有趣
●是与物体交互的直观方式:点击并按住不放然后拖
动。
●直接的操作,给用户控制感。
●用户通过尝试才能知道该项目可以被移动
●如果空出来的位置自动被紧挨着的项目填充会更
好。
屏幕交互 Screen Interactions
1、内容在列表中被查看。
2、需要查看更多内容,用户把他的手指放在屏幕上,把它往上刷。屏幕与手指朝着同
一个方向向上移动。用户也可向相反方向刷。
3、一个指示器显示还剩多少内容。
4、当用户放手让屏幕自己走,它会沿着同一个方向。
● 滑动滚动
Slide to scroll
查看案例
移动内容
滚动内容
放大内容
返回目录
● 滑动滚动
Slide to scroll
滚动内容
当内容与屏幕不符,用户需要能够滚动。为了能够控制屏幕的运动,用户可以使用“滑动”手势。这个方法他能控制
速度以及屏幕向上滚动的距离多远。滑动滚动手势经常使用在阅读中。它是一个标准手势,因此它通常是可以实现的。
当用户希望向上滚动的快一点,他可以使用抛滚动手势(这种选择也是通常来说可以实现的),或者使用滚动条。
何时使用
优点 缺点
● 用户可以控制他滚动内容需要多快的速度 ● 每一个滑动运动,用户只能移动如手指经过每屏
的速度相当
屏幕交互 Screen Interactions
1、用户用他的手指在屏幕上做了一个即刻、快速的向上抛。
2、依靠手指的速度,内容在屏幕中以相同的方向移动。
3、一个指示器显示剩余还有多少内容
4、屏幕的运动速度会慢慢衰减直至最后它会停止运动。
5、指示器也同样停止运动,且将慢慢淡出屏幕。
● 抛滚动
Fling to scroll移动内容
滚动内容
放大内容
查看案例
返回目录
● 抛滚动
Fling to scroll
滚动内容
当内容与屏幕不符,用户需要能够滚动查看。当用户希望快速滚动到达屏幕某个部分,他可以使用“抛”手势。它让
内容快速在屏幕中移动,这些取决于该手势的速度有多快。慢慢地它会停下来。这种滚动可以向上也可向下,但是通
常在垂直方向上。抛滚动手势是一个标准手势。与滑动滚动手势相结合。当你希望用户能够快速控制滚动,你可以考
虑增加一个滚动条。
何时使用
优点 缺点
● 仅需一抛,用户即可移动大量内容。 ● 用户不能准确控制滚动停止的位置,因为内容在
屏幕中移动得太快了。
屏幕交互 Screen Interactions
1、用户正在查看一个列表。
2、当他开始向上滚动时…
3、…一个滚动条出现在右边屏幕边缘处。它是一个指示器,指出页面中哪个位置可以
找到自己。
4、当用户放开滚动条,它会在两秒后滑出屏幕,让列表呆在它在的位置。
● 滚动条
Scroll thumb
查看案例
移动内容
滚动内容
放大内容
返回目录
● 滚动条
Scroll thumb
滚动内容
滚动条可以在用户需要处理一个长的类目列表的时候。用户需要向下滚动查找他们感兴趣的那一项,但是为了达到页
面的底部就意味着做许多的抛滚动。滚动条帮助用户更快的在类目列表中移动。
这些列表可以包含以字母方式排序的项,例如就像联系人列表。在这些情况下,结合一种叠加了当前字母的滚动条会
非常有用(参考Facebook和联系人截屏图例)。
何时使用
优点 缺点
● 更快的滚动
● 让长列表可以管理
● 由于列表移动太快,用户失去了方向(当项目没
有按字母排列,且用户不知道该仔细看哪里)
● 滚动条滚动与抛滚动的方向相反
屏幕交互 Screen Interactions
1、双击在可缩放的内容上起作
用,就像一个网页、图片或地图。
内容通常全屏显示
2、用户可以双击屏幕上某个特
定目标来放大那个目标。
3、放大级是固定的。屏幕内容
适应放大率。(例如,文字自动
换行以适应屏幕宽度)
4、如果用户再次双击…
5、 …内容会缩小回原尺寸
● 双击缩放
Double tap to zoom移动内容
滚动内容
放大内容
查看案例
返回目录
● 双击缩放
Double tap to zoom
放大内容
如果你的应用所显示的内容能够被缩放,你可以使用双击,就像一个网页、图片或地图。双击让用户放大一个特定目
标来增强它的可看性(例如,某部分文字,或地图上的某条街)。放大级别是固定的,屏幕内容与放大率级别相适合,
如果你想实现平滑放大,或者没有特别目标需要放大,考虑使用缩&放。理想情况是,两种放大方法都使用,让用户
使用自己选择的方法。
何时使用
优点 缺点
● 在某个特定目标上缩放-无需放大后扫视。
● 固定放大率让放大更快(相比缩&放)
● 屏幕内容即可自适应-提高可读性
● 不允许平滑放大-只有一个固定级别。
屏幕交互 Screen Interactions
1、缩&放手势可以分别用来扩大
(放大)和收缩(缩小)一个物
体。缩&放能在可放大的内容上
使用,就像网页一样,图片或地
图。内容通常满屏显示。
2、用户可用两个手指触摸屏幕,
张开手指来放大某个特定目标。
放大的级别是平滑的且取决于手
指张开的距离。
● 缩&放
Pinch & Spread移动内容
滚动内容
放大内容
查看案例
返回目录
屏幕交互 Screen Interactions
3、在大多数手机型号中内容不
适用放大(例如,文字没有自动
换行)HTC型号是个例外,当使
用放大时文字会自动换行。
4、想要缩小,用户用两个手指
触摸屏幕并将它们收缩起来,同
样,放大级别是平滑的,且取决
于手指收缩得有多近。
5、不能查看比原尺寸更小的你
内容。
● 缩&放
Pinch & Spread移动内容
滚动内容
放大内容
查看案例
返回目录
● 缩&放
Pinch & Spread
放大内容
当你希望用户能够平滑地放大你的内容,使用缩&放。缩&放允许用户放大一个特定目标,然而,通常屏幕内容部不
适用于放大级(例如,文字不会换行)。通常使用两个手势互相补充,以防止放大方法让人产生的疑惑。
如果你希望一个固定的放大级,或者希望确定放大的文字自动换行,考虑使用“双击放大”。
何时使用
优点 缺点
● 允许平滑放大
● 在特定目标上放大-放大后无需移动扫视。
● 很难找到对的放大级。
● 屏幕上的内容通常不适用于放大级。(除了在
HTC型号上)
● 不是所有设备都支持多点式触摸(例如 华为
ideos)
Part 7
社交 Social
社交 Social
1、用户可以点击一个目标开始提交评论(可以是一个按钮,或如上图所示,是一段文本
2、然后软键盘进入屏幕
3、将文本输入框上推。用户开始打字,接着,当他结束时……
4、点击评论按钮提交评论(或者按返回键取消)
5、当评论提交后,它们将出现在原始正文的下面。新添加的评论将会出现在前一条评论
之后,依此按照每条提交的时间顺序排列在评论列表的底部
● 评论
Comments内容反馈
查看案例
返回目录
● 评论
Comments
内容反馈
如果你的应用内容能够共享或可以被其他用户查看的话,比如照片、视频、音频文件或文本,你可以为它们添加评论
功能
何时使用
优点 缺点
● 评论输入框直接可见 ● 评论输入框太小
● 不像评论或比较像分享按钮
社交 Social
1、每个项目都显示有星级(通常是5颗),这个评级显示的是针对该项目所有评分的
一个平均值
2、在该项目的详情页,可能会展示评级。从左到右将星星高亮显示。值得一提的是
不可能有满分星的出现,但是有半颗星高亮的情况,以此来增加评级的细分。当用户
点击星星……
3、项目评级的对话框出现。用户通过给点击星星的方式来给予分数,并保存评分
● 评级-星星
Rating-stars内容反馈
查看案例
返回目录
● 评级-星星
Rating-stars
内容反馈
当你想要知道用户对内容质量的评价,评级可以告诉你。星级评价是由那些已经下载或打开项目的用户来打分的。高
分评级将促使更多用户来下载。通常,5星评级来自于大量的打分。正如上文所解释,评级同样还能显示半星。不要
忘记打分,这正是评分的价值所在。喜欢、不喜欢、评论也是让用户对项目提意见的办法。
何时使用
优点 缺点
● 可以让用户快速打分
● 为你的应用内容增值,因为用户已参与提供了他的
意见。
● null
社交 Social
1、用户查看带有拇指朝上和拇指朝下的按钮的某部分内容。
2、用户点击拇指朝上/拇指朝下按钮。
3、所选拇指被高亮用来显示哪项被选中了。
● 大拇指朝上/朝下
Thumbs up/down内容反馈
查看案例
返回目录
● 大拇指朝上/朝下
Thumbs up/down
内容反馈
拇指朝上/下是经典的用来给内容评级的方式。你要么喜欢要么不喜欢。一个二进制的选中。假如你想需要更多准确
的评级时可以使用评级。你可能需要让用户先登录,此外很难储存评级和阻止误用。
何时使用
优点 缺点
● 很容易了解的隐喻,绝大部分用户无需解释即可理
解。
● 你包含否定和肯定的评价,如果你不想加强负面
评价,考虑使用一个“喜爱按钮”。
Thank You
To be Continue……

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Andriod pattern