「小红点」是这个控件在国内最通俗的称呼,正式的名称为「Badge」(徽标),Badge是指通常出现在图标或文字右上角的红色圆点、数字或者文字,表示有新内容或者待处理的信息。
△形态各异的Badge(徽标)
无数字和有数字Badge使用场景
△无数字和有数字
注意数字的长度和上限
对于有数字的Badge,由于界面显示空间有限,因此要注意视场景和信息类型决定数字最长显示多少位,如果数字达到上限该如何显示。
谨慎在图标内运用红色圆点元素
△Flyme社区图标
1.为什么Android官方控件没有Badge?
iOS最开始设计并没有通知中心(iOS5.0之后才有通知中心),仅靠桌面图标上的Badge表示App是否有新消息,而Android设计之初就有通知中心,可在通知中心内聚合查看所有App的通知,所以不需要额外的Badge提示用户有新消息。
△Android的通知中心
A-Zindex(字母索引导航)能将信息以首字母进行分类组织并提供导航。字母索引历史悠久,早在我们的实体书籍如字典、词典等就运用这种信息组织方式。正因如此,A-Zindex是用户非常熟悉的一种导航方式。
△拼音字典
在移动UI里,A-Zindex通常以竖轴形式出现在屏幕右侧,点击字母能将内容滚动到该字母的锚点位置。
△饿了么的A-Zindex
A-Zindex适用于对数据量为几十到几千之间的单词、词组或短语等类型的导航,且用户能对这些数据的首字母进行精确回忆。例如:国家、省份或城市的名称、姓名、昵称等。
注意非字母开头的内容
一些移动社交网络的昵称,可能会使用emoj表情或者数字作为首个字符。在公司黄页里,有公司会采取在名称前加空格或不可见特殊字符获取最先的排名。一般来说可以通过在A-Zindex末尾增加“#”,表示非字母开头的内容。如果首字符非字母的内容太多,可以考虑采用其他数据类型的导航。
△首字符为数字
增加常用选项导航
注意中文多音字问题
汉语特有多音字,例如“解”有(jiě)、(jiè)和(xiè)三个拼音,“覃”有(qín)和(tán)两个读音,可以根据数据的使用场景对多音字进行一些处理,例如锤子科技的SmartisanOS根据联系人列表的需要,去掉了“姓氏读音为主要读音的多音字”和“多个读音都是姓氏但首字母相同的字”。(这句话有点绕...)
1.可用性专家尼尔森认为字母索引过时了
2.锤子科技SmartisanOS对A-Zindex的创新
除了上文中提到的多音字优化,锤子科技SmartisanOS3.0对A-Zindex进行一系列提高效率的创新,例如A-Zindex可以从右至左拉出,扩展单个字母的点击区域,可大幅度减少因A-Zindex点击区域过小造成的误触。长按字母可以显示该字母下所有的姓氏,更符合中文单首字母多汉字的特性。
△锤子科技SmartisanOS
3.飞常准App提升字母点击准确率
字母索引导航单个字母的点击区域非常小,很容易点错,锤子科技SmartisanOS从右至左拉出扩展字母点击区域虽然准确率很高,但是操作较为繁琐,可见性不高。飞常准App提供了另外一种思路,长按字母索引导航,会放大字母,上下滑动切换字母,松手之后跳转到对应字母的锚点位置。
△非常准
△SegmentControls
SegmentControls(分段控件/分段选择器/分段选择控件)是iOS原生控件之一,SegmentControls是一组分段(segment)的线性集合,每一个分段的作用是互斥的,即点击某分段使之处于触发状态,那么同一个SegmentControls的其他分段将恢复正常状态,所以SegmentControls本质上是一个单选组件。横向排布所有选项,相比于下拉菜单(drop-downmenu)有更好的可见性。
SegmentControls通常用于切换不同的视图,或者在表单中作为单选组件使用。
△表单中的SegmentControls
限制分段数量控制在5个以内
较宽的分段更容易点击,为了提高可用性,建议在手机屏幕上每个SegmentControls的分段控制在5个以内。因此分段的文案长度需要精简,建议每个分段控制在2-4个汉字。
不要在同一个SegmentControls中混用文字和图标
一个分段就像是一个按钮,按钮内当然可以使用文字或者图标代表其含义,但是请不要在同一个SegmentControls中混用文字和图标,避免让用户觉得混乱和不一致。
△文字分段和图标分段
尽量保持各分段大小一致
同一个SegmentControls内,所有分段都应该具有相等的宽度。如果其中某些分段比其他分段宽,会让整个控件看起来不协调,缺少一致性。
Tabs和SegmentControls的区别:
△左为Tabs,右为SegmentControls
经常国内发现App把Tabs和SegmentControls弄混的情况,给用户带来困扰,其实这两个控件有诸多不同。
2)操作方式不同
SegmentControls只能通过点击控件本身的分段来进行操作,而Tabs除了点击控件本身外,还可以通过屏幕内左右滑动切换不同的视图。
3)适用场景不同
SegmentControls除了适用于表单的单选组件,其作为视图切换控制时,一般来说,起到的是分割和筛选同类数据的作用。例如AppStore的排行榜,[总排行榜]这个长列表数据集,通过SegmentControls把长列表分割成付费的、免费的和畅销的几个子列表数据集。
△SegmentControls本质是筛选,和下拉菜单一样而Tabs没有这种限制,Tabs里Tab呈现的内容可以有很大的差别,当然Tabs不能作为表单的单选组件。
4)数量限制不同
在手机屏幕里,SegmentControls分段限制在5个以内,而Tabs可以通过Scrollabletabs这种形式,扩展更多的Tab数量。