“这是什么控件”系列中的小红点+索引导航+分段控件

@龙爪淮守守者: 鉴于国内交互设计术语的混乱和不一致，许多设计师不知道如何使用术语来指代控件，因此我打开了主题“这是什么？控制？”很重要，我希望对交互式设计的发展做出一点贡献.

“小红点”是此控件在中国最受欢迎的名称. 正式名称是“徽章”（徽标）. 徽章是指通常出现在图标或文本右上角的红点，数字或文本. 有新的内容或信息要处理.

△不同形状的徽章（徽标）

有数字和无数字的场景使用情况

徽章可以分为两种类型: 无数字和数字. 一般来说，如果您只需要让用户知道有更新，或者只有一个新内容，请使用无数个徽章，例如微信公众号更新和App版本更新. 没有数字类型. 如果需要让用户确切知道有多少更新，并且有很多新内容，则可以使用数字徽章，例如IM未读邮件，邮箱中未处理的邮件. 带数字的徽章将给用户带来更大的心理压力，并吸引用户的注意力.

△没有数字而有数字

注意数字的长度和上限

对于带有数字的徽章，由于界面的显示空间有限，因此有必要注意场景和信息类型，以确定最长显示多少位数字，以及如何显示数字. 达到上限.

在图标中小心使用红点元素

红点的视觉元素已成为一种社会语义符号，即用户在看到红点时将其视为新内容，因此图标设计中谨慎使用了红点，例如魅族Flyme In社区应用中的“我的粉丝”图标，红色心形元素和图标主体之间存在空白. 用户会错误地认为这意味着有新的粉丝. 实际上，没有图标的原始元素.

△Flyme社区图标

相关信息

1. 为什么没有Android官方控件的徽章？

iOS的初始设计没有通知中心（通知中心仅在iOS5.0之后可用）. 仅桌面图标上的徽章会指示应用程序是否有新新闻，而Android设计的开头有一个通知中心，可以在通知中心中找到该通知中心. 查看聚合中的所有应用程序通知，因此无需其他徽章即可提示用户输入新消息.

△Android通知中心

2. 手机QQ一键清除小红点功能

如果徽标频繁出现且频繁出现，将会对用户造成情感干扰. 例如，许多强迫症使用者每次遇到徽章都会尝试消除它. 移动QQ以此为起点，创造性地设计了按键. 拖放小红点的功能已为用户所接受.

△一键清除小红点演示的具体设计过程和摘要，请阅读: “放开创造力！QQ手机版5.0”一键搞定“设计摘要”

A-Z索引（字母索引导航）可以按首字母组织信息并提供导航. 字母索引历史悠久. 这种信息组织方法已在我们的物理书籍（例如字典和词典）中使用. 因此，A-Z索引是用户非常熟悉的导航方法.

△拼音词典

在移动用户界面中，A-Z索引通常以垂直轴的形式出现在屏幕的右侧. 单击字母可将内容滚动到字母的锚点位置.

△您饿了A-Z指数

A-Z索引适用于导航数十到数千个数据量的单词，短语或短语，并且用户可以准确地调用这些数据的前几个字母. 例如: 国家，省或城市的名称，名称，昵称等.

请注意以非字母开头的内容

某些移动社交网络昵称可能使用emoj表情符号或数字作为第一个字符. 在公司的黄页中索导航，某些公司会在名称的前面加上空格或不可见的特殊字符，从而占据第一位. 一般而言，在A-Z索引的末尾添加“#”表示内容以非字母开头. 如果第一个字符中的非字母字符过多，则可以考虑使用其他数据类型进行导航.

△第一个字符是数字

添加常用选项导航

A-Z索引严格按字母顺序排列，但是在某些情况下，这不是最有效的. 例如，在外卖应用选择的城市列表中，用户最有可能选择当前城市，因此可以将当前GPS位置的导航添加到A-Z索引的顶部. 建议根据业务和用户需求添加基于A-Z indx的常用选项导航（例如定位，热门和搜索）.

△受欢迎的评论增加了人气

注意中文的复音字符问题

汉语具有独特的和弦字符，例如，根据数据使用情况，“解决方案”具有（jiě），（jiè）和（xiè）三个拼音，“ qin”具有（qín）和（tán）两个发音一些和弦字符被处理. 例如，Hammer Technology的Smartisan OS根据联系人列表的需要，删除了“以姓氏发音为主要发音的多个字符单词”和“多个发音均为姓氏但具有相同的首字母”. （这句话有点圆...）

△Hammer Technology的Smartisan OS相关信息

相关信息

1. 可用性专家尼尔森认为字母索引已过时

Jakob Nielsen（Jakob Nielsen），可用性专家，著名的Nielsen十个可用性原则. 尼尔森（Nielsen）发布了一份文件，称按重要性或频率顺序排列，逻辑结构，时间轴或优先级通常比字母索引好.

有关详细信息，请阅读:

2. Hammer Technology Smartisan OS向A-Z索引的创新

除了上面提到的多音节优化外，Hammer Technology Smartisan OS 3.0还为AZ索引引入了一系列提高效率的创新. 例如，可以从右到左拉出AZ索引以扩展单个字母的点击区域. 减少由于AZ索引单击区域过小而引起的误触摸. 按住一个字母可显示该字母下的所有姓氏，这更符合单个中文字母中多个汉字的特征.

△Hammer Technology Smartisan操作系统

3. Feichangzhun App提高了信件点击的准确性

字母索引导航中单个字母的点击区域很小，很容易出错. Hammer Technology Smartisan OS将扩展的字母单击区域从右向左拉. 尽管精度高，但是操作麻烦并且可见度不高. 飞仓准应用程序提供了另一种思维方式. 长按字母索引进行导航，它将放大字母，上下滑动以切换字母，然后在放开手之后跳到相应字母的锚点位置.

△非常准确

△段控制

细分控件（细分控件/细分选择器/细分选择控件）是本机iOS控件之一. 段控件是段的线性集合. 每个细分市场的角色都是互斥的. 是的，也就是说，单击一个段使其处于触发状态，然后同一段控件的其他段将返回到正常状态，因此段控件本质上是一个组件. 水平排列所有选项，这比下拉菜单具有更好的可见性.

段控件通常用于在不同视图之间切换，或用作表单中的组件.

△段控制形式

将段数限制为少于5

更宽的细分更易于点击. 为了提高可用性，建议在手机屏幕上将每个细分控件的细分控件设置为小于5. 因此，需要简化该段的副本的长度，建议将每个段控制为2-4个汉字.

请勿在相同的细分控件中混合文字和图标

段就像一个按钮. 当然索导航，可以使用文本或图标来表示按钮的含义，但是请不要在同一“分段控件”中混合使用文本和图标，以免造成混淆和不一致.

△文本分割和图标分割

尝试保持每个段的大小相同

在相同的细分控件中，所有细分都应具有相同的宽度. 如果这些部分中的某些部分比其他部分宽，则会使整个控件看起来不协调且缺乏一致性.

标签和细分控件之间的区别:

△标签位于左侧，细分控件位于右侧

在中国经常发现App混淆了选项卡和细分控件，这对用户来说是一个问题. 实际上，这两个控件是完全不同的.

1）不同的来源

标签来自Android规范. 早在Android 2.0时代，官方地址簿应用就使用了顶部的Tab导航. 以前的Android 4.0规范和最新的Material Design都使用Tabs作为推荐的导航形式. 段控制来自iOS规范.

2）不同的操作方法

段控件只能通过单击控件本身的片段来进行操作，除了单击控件本身以外，选项卡还可以通过在屏幕上左右滑动来在不同的视图之间切换.

3）不同的适用场景

段控件，除了适用于表单的组件之外，通常在用作视图切换控件时，还起到分段和过滤相似数据的作用. 例如，App Store的排行榜[total排行榜]是一个长列表数据集，而段控制用于将长列表分为付费，免费和最畅销子列表数据集.

再举一个例子，在启动后，Segment Controls在“设置”中的电池使用情况会选择[过去24小时]和[过去4天]的数据作为[始终耗电的应用程序]的一部分. 因此，细分控件与下拉菜单基本相同，但是具有更好的可见性.

△Segment Controls本质上是过滤. 像下拉菜单一样，选项卡没有此限制. 选项卡中选项卡的内容可以有很大的不同. 当然，制表符不能用作表单的单选组件.

4）不同的数量限制

在手机屏幕上，“段控件”限制为5个段，“选项卡”可以“可滚动”选项卡的形式扩展“选项卡”的数量.

△滚动标签

在本部分中，我们将首先更新三门小型流行科学，之后我们将继续更新优秀的设计. 那些想提前学习的人可以关注作者的微信公众号:

交互式原型丨“小型科普术语！谈论线框草稿，视觉草图和原型之间的区别“移动终端尺寸丨”易于理解！超全面的移动终端尺寸基础知识科普指南“字体规格丨”界面设计必须！全面科学中常用的标准字体（带有人工制品）“

【Youshe.com原创文章提交电子邮件: yuan@uisdc.com】

================关于Youshe Network ===============

“ Usdc.com”是中国最受欢迎的网页设计师学习平台，专注于共享网页设计，无线设计和PS教程.

【精选推荐】

设计师需要阅读的100本书: 历史上最完整的设计师书籍导航: .

设计微博: 受欢迎的微博，拥有190万@Excellent Web Design受众，欢迎关注以获得Web设计资源并下载顶级设计材料.

设计导航: 在世界顶级设计网站的推荐下，设计师必须导航:

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-187377-1.html