微标
通常出现在图标或文字右上角的红色圆点、数字、文字，表示有新内容或者待处理的信息。
image.png
无数字和有数字的使用场景
如果只需要让用户了解有更新或新内容只有一条时，使用无数字Badge。如果需要让用户精确了解有多少条更新且新内容有多少条，可以使用有数字Badge。
注意
1.有数字的Badge给用户带来的心理压力会更大，也会更吸引用户注意力。
2.对于有数字的Badge，由于界面显示空间有限，要注意场景和信息类型决定数字的长度和上限以及数字达到上限该如何显示。
image.png
3.红色小圆点这个视觉元素已经成为了一种社会性语义符号，即用户看到红色小圆点就会认为这代表着有新内容，因此谨慎在图标内运用红色圆点元素。
魅族社区我的的粉丝会产生新粉丝的误解
衍生：
1.ios最开始没有通知中心（5.0后才有），仅靠桌面图标上的Badge表示App是否有新消息。Android设计之初就有通知中心，可以在通知中心内聚合查看所有APP通知，不需要额外Badge来提示用户有新消息。
image.png
2.手Q一键清除小红点。注意Badge如果非常多出现频次又很高，会对用户产生情绪干扰。
image.png
字母索引导航
最早是字典词典中用这种信息组织方式，将信息以首字母进行分类组织并提供导航。移动UI里，通常以竖向轴出现在地址，姓名等信息聚合页面的右侧，点击字母能将内容滚动到该字母的锚点位置。
image.png
注意
1.index适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航，且用户能对这些数据的首字母进行精确回忆。例如国家、省份或城市的名称、姓名、昵称等。
2.注意非字母开头的内容。社交网络中的emoji表情或数字作为首字母、公司用空格，特殊字符等情况可以通过在A-Z index末尾增加 #，表示非字母开头的内容。若干内容过多可以考虑采用其他数据类型的导航。
image.png
3.增加常用选项导航。A-Z严格按照字母顺序排序在某些实际场景中并不是最高效的。例如外卖平台选择城市的列表中，用户选择当前城市的可能性最大。可以在最前面增加当前GPS定位地理位置的导航。建议根据业务和用户需求增加灵活的常用选项导航（定位、热门和搜索）
大众点评.png
4.注意中文多音字问题。根据数据的使用场景对多音字做一些处理。
image.png
衍生
1.可用性尼尔森认为字母索引过时了。称根据重要性或频次的顺序序列，逻辑结构，时间线或优先级排序通常优于字母索引。
2.smartisan OS3.0将A-Z可以从右至左拉出，扩展单个字母的点击区域，大幅减少因点击区域过小造成的误触。长按字母可以显示该字母下所有姓氏，符合中文首字母多汉字的特性。但是操作较为繁琐，可见性不高
image.png
3.长按字母索引导航，会放大字母，上下滑动切换字母，松手后跳转到对应字母的锚点位置。
image.png
分段控件
image.png
ios原生控件，每一个分段的作用是互斥的，本质上是一个单选组件（像一个按钮）。横向排布所有选项，相比于下拉菜单（drop-down menu）有更好的可见性。
注意
1.通常用于切换不同的视图，或在表单中作为单选组件使用。
image.png
2.为了提高可用性，限制分段数量控制在5个以内，文案长度精简，每个分段控制哎2-4个汉字，较宽的分段更容易点击，不要在同一个segment controls混用文字和图标，尽量保持各分段大小一致。
image.png
衍生
Tabs和Segment区别
1.来源。tabs来自md，在android2.0，官方通讯录app使用顶部tab；segment来自ios
2.操作方式。segment只可以点击控件分段；tabs除了点击还有滑动切换
3.适用场景。segment除了适用于表单的单选组件，作为视图切换控制时，起到的是分割和筛选同类数据的作用。例如App store排行榜，总排行榜这个长列表数据集，通过Segment分割成付费、免费和畅销的几个子列表数据集。设置中的电池用量，筛选出过去24小时和过去4天这一部分数据。所以本质上和下拉菜单一样，只是有更好的可见性。tabs里的tab呈现的内容可以有很大差别，也不能作为表单的单选组件。
image.png
4.数量限制不同。移动端segment分段限制在5个以内，而Tabs可以通过Scrollable tabs，扩展更多的tab数量。
image.png
加载占位图（详见loading）
表现形式是在界面上待加载区域填充灰色的展位图，与线框图效果相似。本质是界面加载过程中的过度效果。
image.png
1.由来-Launch screen启动屏幕
用户启动一个App需要从手机存储器和网络加载所需的控件和多数据，由于手机性能和网络状况的差异，加载需要等待无法避免。为了解决等待加载过程中出现白屏或者界面闪烁造成的割裂感，IOS规范中把界面控件框架的轮廓做成静态图片用在launchScreen（MD中称为placeholderUI），进行启动开始于启动完成之间的过度，给用户一种启动很快的错觉。
非控件轮廓区域变动很大，不是最好的界面加载过度方案.png
2.Progress Indicator进度指示器
如果Launch Screen持续时间很长，虽然app后台正在辛苦的加载最新数据。因此我们需要使用Progress Indicator来告知用户我们的APP并没有出Bug，而是目前正在加载，再过不久就能正常显示内容。progress Indicator分为Activity Indicator（活动指示器）和Progress Bar（进度条）两种。
image.png
注意：Progress Indicator设计出发点是好的，但带给用户的体验未必优秀。Progress Indicator出现意味着需要等待，当用户注意力集中在这个控件时，就好像学生盯着下课前五分钟的钟表，滴答滴答，时间似乎变得更慢。我们不愿意让用户望着Progress Indicator产生焦躁的情绪。
3.skeleton Screen应运而生
如果我们能在加载前把内容的大概轮廓预先展现出来，然后再逐步的加载真正的内容，这样既给用户一种内容正在逐步加载即将呈现的期待，又降低了焦躁情绪，让界面加载过程变得更顺畅，感光上会比其他加载方式更快。
image.png
Skeleton Screen这个概念最早出自Google产品总监，《Web表单设计》作者。目前国内简书领英，新浪微博头条采用这个加载方案。
4.注意
a.Skeleton适用于布局排版固定的内容的区域。
Skeleton Screen所展现的是内容的大概轮廓，如果内容布局排版不固定，那么轮廓和内容布局的巨大差异不仅不能给用户顺畅和期待感，反倒会造成落差。因此适用于布局排版固定的内容区域，例如列表、文章、个人信息。如果内容区域有空页面的情况，也不建议使用Skeleton Screen。
b.建议配合其他加载技术一起使用。用户的网络环境是复杂的，如果加载持续时间很久，单凭Skeleton Screen起不到流畅、过度的效果，建议配合懒加载（先文字后图片）、逐条加载、预加载等技术，已达到更出色的体验。
页面指示器
IOS称为Page Controls是附着在轮播图、一组卡片或者页面底部，用来表示页面总数量和指示当前停留的页面。表现形式是一组等距的小圆点，小圆点数量嗲表页面总数，深色或实心的小圆点代表当前页面。
image.png
用户可以通过左右滑动切换上一个/下一个页面，或者点击Page Indicator本身来切换。移动端点击控件顺序切换上一个/下一个页面，PC端可以精准点击小圆点到达特定页面。
1.如何使用
a.不要显示太多指示点
超过10个很难在一屏内展示，超过20个浏览器来会很耗时，要考虑其他形式或空间展示。
2.注意滑动冲突
一般用户在移动端习惯于使用左右滑动操作Page Indicator，注意同页面内会不会与其他支持左右滑动的控件（顶部Tabs、地图、轮播图）产生手势冲突。反面案例，IOS官方地图可以在锁屏显示地图导航，由于锁屏本身有Page Indicator相应左右滑动切换相机和搜索页面，导致与导航界面内顶部的路线指示Page Indicator还有地图放大缩小产生手势冲突，无法操作。
image.png
3.样式可以特殊化。
如果指示的某个页面较为特殊，可以为其定制特别的样式，如ios锁屏左滑打开相机，相机的指示点设计了特殊样式突出这个功能。天气APP
中第一个指示点是当前GPS定位地址。
image.png
4.注意Page Indicator的层级。
Page Indicator的层级比页面高，单独切图处理，滑动页面时，组件内部进行交互，不跟随页面一起运动。
5.衍生：Page Indicator与Progress Bar结合
一号店的轮播图把这两个控件结合，这样用户既可以知道当前所指示的页面，也能对下一张页面何时轮播有预期，便于用户较为专注的浏览轮播图内容。
image.png
网友评论