「这个控件叫什么」系列之小红点+索引导航+分段控件优设网

「小红点」是这个控件在国内最通俗的称呼,正式的名称为「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数量。

THE END
1.网网拼音网怎么读网部首网意思网(wǎng)同音字 更多> 罓 ? 罒 网 ? 彺 往 徃 枉 罔 ? 惘 菵 ? ? 暀 棢 蛧 辋 ? ? 網 蝄 誷 輞 ? 瀇 魍网(冂)同部首字 更多> 冂 冈 罓 冃 冇 内 冄 禸 円 冎 冋 冉 网 再 冏 冐 http://zidian.q821.com/%E7%BD%91_zi/
2.網的部首網的拼音網的组词網的意思【未集中】【糸字部】 網; 康熙笔画:14; 页码:页928第01 【廣韻】文兩切【集韻】【韻會】【正韻】文紡切,音罔。【說文】本作网。或作,隷省作?。今文从糸作綱。【易·繫辭】作結繩而爲?罟,以佃以漁。【朱子·本義】?,與綱同。【書·盤庚】若綱在綱。【詩·邶風】魚綱之設。 又https://www.chazidian.com/r_zi_zd7DB2/
3.汉字“网”的文言文意思用法释义出处【未集中】【网字部】 释义〔古文〕【廣韻】文兩切【集韻】【韻會】【正韻】文紡切,音網。【說文】庖犧所結繩以漁。从冂,下象網交文。【註】今經典變隷作罒。【玉篇】羅罟總名。亦作、罔、、。【廣韻】與網同。【篇海】网字有三譌:本作网而譌作,亦作冈而又http://kd.newdu.com/35872.html
4.网字笔顺笔画顺序网字笔顺 网字笔画顺序为:竖、横折钩、撇、点、撇、点,共6画,字形结构为:上三包围结构。以下是网字的笔顺动画、笔顺详解,希望对你有所帮助。 网字笔顺动画 汉字 网(组词) 拼音 wang 部首 冂(同字框) 笔画数 6画 结构 上三包围结构 网字笔画顺序 共6画网笔顺 1竖 2横折钩 3撇 4点 5撇http://mbihua.gei6.com/wangzibishun__qs73gkod.html
5.知识探秘“精品久久久久久无码不卡”:一场网络小说的创新与挑战西安新闻网记者 郑行颍 报道 在当今数字化时代,网络小说已经成为了许多年轻人日常生活的一部分。作为一个广受欢迎的文艺形式,网络小说不仅为读者提供了丰富的娱乐选择,也为作者们提供了展示才华的平台。然而,随着竞争的加剧和市场的饱和,如何在这个领域中脱颖而出,成为了许多作者亟待解决的问题。近日,一部名为“http://www.yw5w.com/tcgx=96604393
6.论文探索“hao”在现代汉语中的多重意义及其文化影响因此,在推广汉语的过程中,我们有必要强调“hao”字的多重意义,使其成为连接中外文化的重要桥梁。 总的来说,“hao”作为汉语中一个简单而又深刻的词汇,承载着丰富的文化内涵和社会意义。它不仅是人们日常交流的重要工具,也是文学创作、教育和人际交往中不可或缺的一部分。在未来的日子里,让我们继续发掘“hao”的http://wap.gzpy120.com/tcgx=20469721
7.绥怎么读?绥这个字是多音字吗?绥这个字是多音字吗? 绥的读音为:suí。绥是指登车时用以拉手的绳索,始见于商代甲骨文。绥作名词时,有借以登车的绳索,上古五服之一,绥江,绥州等意思;绥作动词时,有安抚人心以保持平静,临阵退军,向后撤,制止,止等意思;绥作形容词时,有舒缓的,平安,安好,安泰等意思。http://edu.ddcjw.cn/edu/202302/631041.html
8.草字头加青是多音字吗(草字头加青是什么字)想必现在有很多小伙伴对于草字头加青是什么字方面的知识都比较想要了解,那么今天小好小编就为大家收集了一些关于草字头加青是什么字方面的知识分享给大家,希望大家会喜欢哦。 菁,读音为jīng。 解释如下:的花:“秋韭冬菁”。 古代指“芜菁”(即“蔓菁”)。 https://www.gyscw.com/news/202308/399105.html
9.义不同的同音字近音字多音字合并为一个字,这就影响了词义专指性有些简体字是将繁体字中字不同、义不同的同音字、近音字、多音字合并为一个字,这就影响了词义专指性的表达,简体字“发”,当繁体字书写为 “發”时,表达意思为 。 A、动物皮毛 B、人的头发 C、表达、兴起 D、头发、兴起 点击查看答案手机看题 你可能感兴趣的试题 单项选择题 大豆第三遍中耕要在大豆( http://www.ppkao.com/wangke/daan/df61de1ed35346d58a949f5c65d61cb3
10.三年级下册语文期末基础知识复习(2)会区分“同音字、形近字”,能用“同音字、形近字、多音字”组词。 3 字义:相同的字,在不同的语言环境中,意思就各不相同。因此,学生要学会给词语中加点的字选择正确的解释。 光:①光线 ②只,单 ③一点儿不剩 ④荣誉 ⑤身体露着 ⑥景物 ⑦平滑 https://www.360doc.cn/article/1027190_137044661.html
11.澳声通拼音文楷:免费美观可选多音字的TrueType拼音字型澳声通拼音文楷是一款基于克利Klee One以及霞鹜文楷的制作中文字体,可以搭配免费免安装在线多音字选音工具澳声通使用。「表意文字变体多音字选择器」的概念来自But Ko的「注音IVS字型规格」。关于澳声通的介绍,大家可以参照这篇文章:多音字的使用方式是:先在选音编辑器打字,此编辑器会在瞬间自动帮你选择正确拼音,https://www.maoken.com/freefonts/13007.html
12.2024年初中语文字音字形字义知识梳理字音字形中考对字音考核的要求是:读准字音。考生复习时要根据汉语拼音规则认读汉字,能够准确地选择注音正确或错误的一项,能分辨常见的字音误读类型,如社会因素干扰字、形似误读字、多音误读字等。 中考对字形考核的要求是:认清字形,正确、规范地书写汉字。考生复习时能够从汉字的音、形、义入手,整体把握,能辨别特定语境中的http://www.zhongkao.com/e/20230802/64ca4fe644cc2.shtml
13.网组词大全网字意思网的多音字源瀚汉语网(www.sjzyhxc.com)在线提供网字组词,网的词语,网的多音字组词,网的组词大全,欢迎大家免费查询使用。网组词328个, 其中网开头的词语98个, 网结尾的词语180个, 网在中间的词语50个。网组词 网的意思 网 拼音 wǎng 部首 冂 部外笔画 4 总笔画 6 结构 半包围结构 造字法 象形字 五行 水 http://www.sjzyhxc.com/hzzc/22547.html
14.人教版二年级上册语文教案及反思简短(14篇)1、认识9个字和1个多音字,会写字8个。 2、正确、流利、有感情的朗读课文。 3、了解课文内容,知道马头琴的来历并感受苏和和小白马之间深厚的感情。 教学重点: 1、认识9个字和1个多音字,会写字8个。 2、正确、流利、有感情的朗读课文。 教学难点: http://www.jiaoyubaba.com/yuwen/61549.html