让信息架构，和产品架构，产生“化学反应”

这个信息架构的角度，具体而言，就是只包含一级频道的交互设计。

核心功能、辅助功能、重大功能，作为产品的三大类功能，更多是从发展的角度来划分。

除此之外，大部分 App 都还有一些非常基础的功能，比如“个人资料”、“我的收藏”、“设置”、“搜索”等，此类功能，我们称其为通用功能。

核心功能、辅助功能、重大功能和通用功能，是产品的四大类功能。

总的来说，本文主要以底部 tab 导航的 App 为例，探讨一下，如何在一级频道来落地产品的四大类功能。

01 宏观上讲，怎样更好的摆放四大类功能？

网易云音乐是我个人很喜欢的一款产品，日常用的也比较多。不过，它的新版（6.0 系列）给我的直观感受是，有点复杂了，我甚至在很长时间里找不到“私人 FM”这个以前常用的功能。

给我类似感受的产品，还有 Keep 和知乎。

究竟是什么，让我觉得，这些产品变得有点复杂了？

个人简单总结了一下，最直接的一个原因，是这些 App 都新增了重大功能，并给这个重大功能单独加了一个一级频道。

比如 Keep 的“计划”频道、知乎的“会员”频道、网易云音乐的“视频”和“云村”频道，都分别占用一个一级频道。

企业为什么这么设计？个人的猜测，这些重大功能于企业而言，很重要，要么肩负商业化使命，要么被寄予厚望，所以企业就单独给了一个一级频道。

这是一个相对简单的逻辑。但如果想要更好的去平衡用户体验和商业化之间的关系，那我们就需要考虑更多的因素。

之前在信息架构那篇文章里，个人的建议是，如果想让 App 始终保持简单，那就只保留 4 个 tab，也即只有 4 个一级频道。

如何将产品的四大类功能、以及未来很大概率会不断出现的重大功能，以接近最优的方式，安置在寸土寸金的 4 个一级频道上？

我想，这中间一定有一些原则，值得我们探讨和参考。

1 和重要程度保持一致

通常而言，重要程度越高，分配到的空间就越多。这是一个比较普世的道理。

也就是说，这条原则，主要会影响到，四大类功能，各自占用多少空间比较合适。

我们有 4 个一级频道，每个一级频道代表了 25% 的空间。

再来看四大类功能，按其大概的重要程度，简单的分析一下。

先说核心功能，这个最重要。

核心功能是立足之本和护城河。先换个角度看这个问题，假设有三种可能，即核心功能可以占用一个、两个或三个一级频道。

先用下排除法。三个一级频道难免显得过多，剩余的三种功能挤在一个一级频道里也会显得过分拥挤；一个一级频道的话，倒也可以，但是平分四分之一的空间很难体现出核心功能的重要性。

相比之下，两个一级频道就显得较为合适。

综合考虑到有四大类功能，通常两个一级频道也不会完全给核心功能所用。

所以，核心功能，大概占用一个半一级频道，也即 40% 左右的空间即可。

再说通用功能，这个比较容易。

此类功能通常比较多，重要程度可能不及重大功能，但是又不能没有，所以通常我们也会单独给一个一级频道，就是“我”或者“设置”之类的一级频道，大概占用 25% 的空间即可。

第三，说下重大功能，这个比较重要。

通常而言，重大功能的重要性仅次于核心功能，而且重大功能可以有多个，再考虑到通用功能一般单独占用一个一级频道。

那么，相对而言，重大功能，完全可以单独占用一个一级频道，甚至更多，大概占用 30% 左右的空间即可。

最后，说下辅助功能，这个比较特殊。

首先，很多产品是没有辅助功能的；其次，辅助功能是个小功能；最后，辅助功能的数量一般也不多。

总的来说，辅助功能是没有必要单独给一个一级频道的。再考虑到 4 个一级频道所剩空间已经不多，所以，辅助功能一般和重大功能共用一个一级频道即可，大概占用 5% 左右的空间。

2 和使用频率保持一致

通常而言，用户用的越多的功能，就排的越靠前。

也就是说，这条原则主要决定四大类功能的排序问题。

具体而言，用户用的最多的是核心功能，所以核心功能最靠前。

重大功能和通用功能，有时候很难说哪个使用频率更高，比如微信里的“搜一搜”和“收藏”。但是比较明确的是，很多 App 在诞生之初，并没有重大功能，只有核心功能和通用功能。

所以自然而然，通用功能排在了核心功能后面。

个人有个猜测，一方面，有时候很难说清重大功能和通用功能，哪个使用频率更高；另一方面，通用功能起初是排在最后的。

所以，当重大功能出现时，就延续了旧传统：通用功能依然排在最后。最终结果就是，重大功能和辅助功能排在中间。

值得一提的是，现在市面上开始出现两类现象。

其一是，有一些拥有 5 个一级频道的 App，开始把核心功能放到中间那个频道，比如 Keep 的“运动”频道。

其二是，企业开始人为的控制打开 App 时默认展示哪一个频道，而且默认显示哪一个频道，存在多种情况，例子依然包括 Keep：以前默认显示中间的“运动”频道，现在默认显示“计划”频道。

个人觉得，对企业而言，这两类做法，都是得不偿失的。

因为这样做，会让 “从左起，1、2、3、4”这个排序失去价值。没有这个前提，也就谈不上“和用户的使用频率保持一致。

而且，这种默认不显示左边第一个频道的做法，有时候会让用户产生一种被绑架的感觉（默认显示收费频道），有时会让用户感觉企业在自作聪明（默认没显示收费频道，但也没显示核心频道）。

3 符合用户预期

主要有两个预期，逻辑预期和习惯预期。

3.1 逻辑预期

用户确实很懒，但不代表用户不会思考。

比如前文提到的，网易云音乐的“私人 FM“功能，在我的认知里面，”私人 FM“和”每日推荐“一样，都是个性化推荐，性质极其相似，应该放在一起。

所以，当我在新版里的“每日推荐”旁边找不到“私人 FM”时，心里就觉得很奇怪很不解，心想这么好的功能不会是给删了吧。

后来某一天，当我在第三个一级频道“我的”里面发现“私人 FM“的时候，我又觉很别扭，不好用。

在新版里面，一开始我是去“发现”频道的“动作库”找的，怎么找都找不到，跟找不到网易云音乐的“私人 FM“是一样的心情。

因为我觉得，“动作训练”和“动作库”，是很接近的一对事物，从逻辑上来讲，用户会觉得这俩事物挨在一起，或者会猜他们是不是挨在一起。

3.2 习惯预期

这里的用户习惯，主要有两类。一类是自家产品培养出来的，一类是市面上的产品培养出来的。

通常情况，一级频道的设计，是要符合用户习惯的。

最忌讳的情况是，自己一手培养的用户习惯，到最后自己再一手去打破，这样很容易引起用户的烦躁、不满和失望等负面情绪。

比如 3.1 段的两个例子，同样也没有符合用户的习惯预期。因为在最开始，网易云音乐的“每日推荐”和“私人 FM“是挨在一切的，Keep 的“动作训练”和“动作库”也是融合在一起的。

4 良好的扩展性

就一级频道而言，重大功能和通用功能是最有可能扩展出更多子功能的。所以，就扩展性而言，需要重点照顾到这两类功能。

通用功能大部分都收纳在“我”这个一级频道，通常也是一个列表的样式，天然自带良好的扩展性。所以，扩展性的难点和重点，最后是落在了重大功能这里。

在一级频道，重大功能的展现形式，通常有两种。

一种是像核心功能一样，直接把重大功能的内容铺陈出来，典型代表是网易云音乐的“云村”。另外一种是把各个重大功能都收纳起来，只展示一个入口，典型代表是微信的“发现”频道。

对企业而言，现实问题是，当重大功能的数量上升到两个、三个甚至更多时，如何展示他们？

市面上的常规做法，也是两种。

一种是像网易云音乐和 Keep 这样的，直接开辟一个新的一级频道，供重大功能使用。还有一种是微信这种，把所有重大功能都收纳起来，有新的重大功能出现时，新增一行列表即可。

个人推荐微信这种做法，因为这种做法的扩展性最好，可以应对无穷尽的重大功能。

至此，我们简单总结一下。个人看法，四大类功能，具体咋摆放，并没有标准答案，但是可以参考以上 4 个原则。

02 微观上讲，有没有补充和例外？

有。借这个话题，聊两个比较特殊的问题。

1 顶部标题栏的两侧，适合放什么功能？

先来分析一下这个位置，顶部标题栏的两侧，位于屏幕的左上角或右上角，是个很显眼的位置。

个人认为，有三类功能比较适合这个位置。

第一类，是和当前页面内容有密切关系的功能。比如“编辑”型功能，可参考微信读书“书架”频道的“编辑”。再比如“新增”型功能，可参考 Twitter 首页信息流的发推图标。此类功能，最适合这个位置，而且一般也没有更合适的位置来摆放他们。

第二类，是比较高频的通用功能或重大功能，比如搜索、消息、设置等。

第三类，是某些高频功能的快捷入口，比如微信的扫一扫和收付款。

除此之外，如果是一个比较低频的功能，不管是通用功能、重大功能还是辅助功能，放在这里，都不合适，因为会对用户形成打扰。

2 一个功能，最多可以出现几次？

大部分功能，在 App 里只会出现一次。但在日常使用各种 App 的时候，我们也会多次看到同一个功能，在不同的地方。

有时候，能看到三次，比如搜索，在微信、知乎和网易云音乐都出现了三次，我们也不会觉得哪里不对劲儿。实际上，搜索虽然出现了三次，但也没有引起我们的特别注意。

还有一些功能，是出现了两次。我们在第二次看到的时候，会有点烦躁，心想怎么又来了；有时候会有点困惑，心想下次我该用哪一个，哪一个最快捷。

这中间有什么原则可以参考吗？

先来看下搜索，在微信、知乎和网易云音乐，都是比较高频的功能。换句话说，用户在不同的一级频道，都有可能需要搜索一下，所以搜索出现三次，在不同的一级频道，是有这个需求存在的。

搜索以外的功能，个人认为，只有一类适合出现多次，通常两次足矣。

那就是，此类功能确实比较高频，同时路径又比较长，使用起来不够方便。这时候，就适合给此类功能一个快捷入口。这个快捷入口，一般是出现在标题栏。

一个功能，如果只是单纯的重复出现两次，两次都没出现在标题栏。那给用户的感觉，就是，App 并不是在给我提供快捷入口，而可能只是通过重复的方式来强推这个功能，就容易产生烦躁和困惑的负面情绪。

文章来源：站酷    作者：SnowDesign
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

本文大纲

一、好的收藏体验这么做

二、互动信息隐私的保护

三、确定按钮放左边or右边？

四、手机实体键分布的合理性

五、静音键存在的必要性

六、经典的旋钮式交互

What 是什么

「合理预设」是指系统提供默认选项，这些默认选项不需要用户做任何操作，可以节省用户完成表单的时间和精力。

这些默认选项来的数据源包括: 先前输入的会话数据、来自用户帐户的信息、当前位置、当前数据和时间等等。

案例 钉钉的“代办事项”设置功能，可以自动抓取到语句中的时间信息，自动帮助用户默认填写时间，减少用户的操作时长：

相关模式 ：语句填空

Why 为什么

系统通过提供合理的默认信息和答案，分担了用户思考和输入信息的工作，减少时间，提高效率。

而就算预设信息不是用户想要的，也为用户提供了一个示例来说明答案应该是什么样子的。这一点也可以节约用户几秒的思考时间，或者避免输入错误的信息。

另外，合理的默认值还可以帮助用户应对一些“难题”。如果用户跳过了一块字段，那么可能是这个问题没有引起他的注意。用户可能是不理解这个问题、或是默认值的含义。输入答案，选择值，或单击按钮的动作会迫使用户有意识地面对这个问题。

比如疫情期间，大部分公司都需要做健康打卡，下图中有一些选项是直接填了默认值，但是有些就没有填。比如下图的左图中，有关于“请假未到岗”这些问题，因为没有填默认值，用户就会对这个问题有印象。然后比如“今日是否有发热症状”，“是否有咳嗽”这些，因为被系统默认填了，用户很容易就忽略过去了。

所以一些刻意希望被关注的问题，其实最好不要提供预设值，这样可以让用户感知到这个重要信息的存在，进而加深对内容的认知。

When 什么时候使用

当产品要求用户提供类似表单的信息输入（例如文本框或单选按钮），并希望减少用户填写时长时，可以使用提供默认设置。

但是当问题的答案会很敏感或是与政治相关时，最好不要提供默认值，例如密码、性别或公民身份等。最好也不要为用户擅自订阅非必要的内容信息，如“请给我发送广告邮件”等。

使用条件

· 用户需要做类似表单的信息输入操作；

· 系统希望减少用户需要做的工作；

· 系统希望确保用户填写的准确性和一致性；

· 可能用户并不知道或者不关心答案，不需要引起用户的重视；

· 问题的答案不属于敏感信息或是与政治无关。

How 如何使用

设定「合理预设」有两种普遍的用法：

1、使用一个通用的、常识性的、满足大部分用户需求的默认值，预先填写输入框；

2、可以调用用户早些时候提供给系统的信息来动态地设置默认值。例如，某个用户提供了一个中国的邮政编码，系统可以从这个编码推导出用户所在的省，甚至市和区的名称。

除此之外要注意几点应用原则：

· 使用预设的默认值不仅仅是为了防止用户留下空白的输入区域；

· 要充分的了解你的用户，默认值的设定要有绝对合理的理由 —— 否则，系统会给所有人带来额外的工作量。

Example 案例

案例一：唯品会小程序在购买服饰类选择 SKU

用户需求：购买服装时需要选择尺码

唯品会小程序在购买服饰类选择 SKU 时，每个尺码点击后会显示对应的衣服参数，用户不再需要去商品描述中的尺码表格中再找，也可以是设置好自己的身材数据，平台会默认选中适合你的尺码。

案例二：蚂蚁链实人认证表单

用户需求：需要根据表单内容填写和上传文件

蚂蚁链实人认证在上传证件时会根据用户所在国家和地区，帮助用户默认选择概率最大的选项，不需要用户自己操作。

案例三：Photoshop 创建新文件

用户需求：创建新文件，调整画布大小

在 Photoshop CC 中创建新的图像文件时，默认情况下会从操作系统剪切板开始。这里的假设是用户刚刚创建了一个屏幕截图，并且正在编辑该图像。因此，Photoshop 在剪贴板中获取图像的宽度和高度，并使用它们来预先填充创建新文件的尺寸，这是一种节省时间的聪明方法。不用担心图像和画布会有尺寸不匹配的情况。

当用户想要调整画布大小时，原先画布的长宽尺寸会预设出现在新的画布大小里面，方便用户进一步进行尺寸调整。

文章来源：站酷  作者：Ant_Design
分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

What 是什么

简介： 按钮组是把相关的动作组织成一组按钮的设计模式。按钮组的内部内容彼此水平或垂直对齐，并采用相似的视觉设计。如果超过三个或四个动作，往往会采取多个分组。

例子： 语雀编辑器的顶部工具栏

Why 为什么

按钮组可以让界面不言自明。在复杂的布局中，被精心安排过的按钮组会很容易被用户感知和使用。一方面，它们在界面上往往非常明显，用户能够一眼看到有这些功能可以进行相关操作。

大家所熟知的格式塔原则（Gestalt principles）也在这里起作用。彼此相邻的按钮往往暗示着这些按钮的功能相近，因此会让用户感觉到这一组按钮可以完成类似的功能。相对的，不同的按钮分组往往暗示着不同的功能类型，因此彼此间应该保持间距，或用不同的形状，或用分割线进行区分。

When 什么时候使用

如果你需要在界面上展示许多操作按钮，且需要确保它们随时在界面上可见。但同时，你又需要用图形化的方式组织它们，以使它们看起来不会特别散乱。

这些动作中有许多是彼此相似的 —— 它们有相似或互补的效果，比如，它们的功能语义相类似 —— 由此它们可以三五成组地放在一起。

按钮组可以用在对产品全局有效的操作上（例如「打开」和「选项」操作），或特定的一些通用操作（「保存」、「编辑」和「删除」），或特定的某些操作（例如布局的「对齐」、「分布」）。不同范围的操作不应当被到一个组中。

使用条件：

· 存在大量操作按钮；

· 希望用图形化的方式组织这些按钮；

· 操作按钮间存在功能相关性和差异性；

How 如何使用

这个模式的总结简单到像是一句废话：把相关的操作按钮分成一组。

但如果详细展开就会有更多的介绍。比如：

· 如果需要包含文本说明，尽量使用两个字或三个字的动词短语，不要使用专业术语。

· 不要把不同功能范围的按钮放在一个组，应当将它们分成不同的分组。

· 同一组的按钮应该有同样的视觉设计：边框、颜色、高度或宽度、图标风格、动态效果等。

· 在空间排布上，可以将它们并排起来作为横排放置，如果空间不太适用的话，也可以考虑一列纵列放置（例如Photoshop的左侧工具栏）。

· 如果某一个动作是核心动作，可以将其区别对待。例如网页表单中的“提交”按钮。核心动作是希望大部分用户都需要（或期待）执行的动作。让这个按钮拥有更加强烈的图形或视觉风格来让它在显得更为突出。

· 如果按钮足够多，而且它们都有小图标，你也可以把它们放在工具条或者像工具条那样的狭长条上，放置在页面的顶部。

通过使用按钮组可以避免界面上按钮或链接过于拥挤混乱，也可以避免一长串冗长的动作列表看起来毫无关联或区别。

通过这一模式，你可以创建一个较为清晰的元素层级结构：用户可以一眼看出哪些动作是彼此相关的，哪些是重要的。

Example 案例

案例一：Sketch 的顶部按钮工具区

用户需求：编辑设计文件中的对象

Sketch 也是个很典型的应用了按钮组的设计工具。Sketch顶部的按钮不少于15个， 有很多要理解和追查。 但是得益于精心的视觉和语义组织，界面按钮始终保持一定的可理解性。

案例二：macOS Finder

用户需求：按自己需求对文件进行显示修改和操作

这个案例显示了来自 macOS 的 Finder 窗口的顶部按钮组。 秉承其设计传统，按钮风格明显。 导航组是放置在左侧中的按钮组。 布局相关的按钮组放在了中间，文件操作相关的按钮组放在了右侧。这样的设计使得界面变得易于理解和使用。

案例三：WebStorm 顶部操作区

用户需求：项目执行相关操作

这个案例显示了 Webstorm 的顶部功能操作区。WebStorm 采用了按钮组的模式，将项目执行的相关操作和Git相关的操作聚合在一起，中间使用了分割线进行了区分。

文章来源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我遇到的这个例子，和“概念模型”有关，在这里分享给大家。

这个酒店房间的开关是这样的：

酒店床头开关

酒店客厅开关

这个开关是触控式的，开关本身有亮/暗两个状态；大家迅速看一眼，我想请问大家，你们认为，亮着的开关（图1的5个灯，图2的右上、左下2个灯）对应的状态应该是打开的还是关闭的？

如果心中有了答案了，继续往下看。

之前在文章从交互维度量化用户体验中我说过一次我个人理解的最小交互模型，大概是下面这段话：

狭义的交互（Interaction）定义交互主体必须是人本身，而客体可以是产品，环境，服务等等，且不论交互客体是什么，只要主体是人，人和客体去进行交互的时候，一定是人带着一定的心理预期施加一个行为，然后客体会根据这个行为给与一个反馈（没有反馈本质也是一个反馈），而人会根据这个反馈是否符合预期去进行心理修正。如下图所示（红先黑后）：

那随之而来的另一个问题就产生了，人进行交互行为时的心理预期是从哪儿来的？

人初生的时候都是一张白纸，每天重复的交互行为产生的心理预期会随着不同的教育、家庭进行变化；今年我们家在广州过年，我第一次见到两岁的小侄子，通过这一周对小侄子的观察更能体会出人其实是有某些说不清的潜能在里面的，举个例子，有一天小侄子生病了，要吃两种药，一种是甜的，一种是苦的；吃甜药的时候小侄子很开心，愉快的呀呀的说这药是甜的，而吃苦药的时候小侄子也是皱着说这药好苦，关键的问题是，出生两年来，家人从来没有对他描述过苦味是什么，也没有明确告诉他这两种药有一种是“苦味”的，但是两岁的小孩子就能尝到苦味的药在没有接触过“苦”这个词的时候就讲得出来这是“苦”。

再举个例子，还是我的小侄子，我们贵州人过年一般都会真金白银的打麻将，小侄子目睹了几天我们在麻将桌上用大把的零钱来支付，有一天我们去公园玩，遇到一个熟人给小孩子了一个红包，我们就问他“钱是干什么的呀”? 我小侄子脱口而出：“钱是用来打麻将的呀！”

为什么会发生这样的现象呢？

大概是现在的人买东西都用微信支付宝支付，所以对于小孩子的认知来说，他们由于没有见到过纸币参与交易的行为，而这几天不断被我们麻将桌上的现金冲击视觉，才会突然脱口而出这句话。

可能在我小侄子的认知里，手机才是用来买东西的。

我们互联网圈的设计行业其实能形成理论的东西不多的，大多数时候为了佐证某些东西，我们需要从心理学、社会学、行为学中找到一些理论支撑。我在做产品设计的过程中，最长这么时间一直使用的一种方法是思考用户在这个页面的心理预期。（比如在商品详情页，业务目标肯定是引导用户购买，但是用户心理上之所以点进了这个商品的详情，无非是在有购买意愿的基础上，需要一些信息去辅助决策，这时候如果你仔细思考并模拟一下你自己在购买时候点击详情页的行为，其实会发现其实影响决策的信息大多不是价格（因为价格在上一级的列表页已经标明了），更多的可能是产品描述和用户口碑等等）

在做尤其是app设计的时候，能明确每一个页面的业务目标和用户点进来的预期，其实是一件非常重要的事情，大家可以多留心在这两点上。

好的扯远了，回到状态开关的事情上来，还记得刚刚的那个图么？

酒店床头开关

酒店客厅开关

我相信绝大对数的人第一反应都是，亮着的开关对应的灯应该是亮的，因为这个符合常识，但是如果这个酒店也是这样的话，我就不会举这个例子了，没错，上面开关亮着的灯是关的，没有亮的开关对应的灯是打开状态。

我相信设计这个开关的人是为了让用户在夜晚起夜的时候使用方便，但是他完全可以用更加高明的办法，比如换成夜光材质之类的。这种设计师很愚蠢的，我观察这么多天下来，我们所有亲戚每次开关灯几乎都会误触，因为我们的心智一直一直认为的是亮着的开关亮着的灯。

这里就牵扯出一个问题，我们在app设计中如何去设计状态开关的问题。

首先需要明确，最无歧义的状态开关一定是需要具备两个意符：

其一是表征当前状态

其二是表征用户点击之后的状态。

而现在市面上很多app在这两个意符上是混的，一般都知道用icon的样式来表征当前状态，但是下面的辅助文字则是表征当前状态的和点击之后状态的都有。

这就会让用户很蒙。

比如相机app、短视频app、K歌app中就比较明显会有很多状态按钮，如下图所示是某相机app的截图，这样的设计就是“有歧义的设计”，比如“延时关闭”和“补光灯关闭”这两个文案，会很容易让人困惑这文案指代的是当前状态呢还是点击之后的状态呢？

给大家提供一个我个人的小tips：

设计状态按钮，尽量把当前状态和点击行为拉出两个层级关系来设计。

当前状态可以体现在icon上，但是不能只体现在icon上（比如他这个延时关闭的图标有一个x，但是补光灯关闭又没有x，这就更加歧义了）

比如如果是我去设计它这个按钮，我会这么设计：

这样的话，确实，用户操作复杂度上会多一级（之前直接点icon，现在点icon之后需要再点开关），但是用户完全没有认知成本。

这就是我说的把当前状态和点击行为拉出两个层级关系来设计。其实这个牺牲交互成本减少用户认知成本的方法在交互设计工作中经常被我们使用，当我们遇到一个问题实在是一步很难理清的时候，不妨可以多尝试这种思路。不过这种提高复杂度的减少认知的方法，不适用于业务强指引型页面（比如购买、导航之类）

文章来源：站酷   作者：Seany

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务