关于尼尔森原则

「尼尔森十大原则」又称为「用户界面设计的10种可用性启发式」，是由雅各布·尼尔森（Jakob Nielsen）提出的10条交互设计一般原则。之所以将其定义为“启发式”，是因为它们是广泛的经验法则，而不是特定的可用性准则。

在官方2019年的描述视频中将原则定义为「十大UX设计试探法」，运用这些原则有助于我们试探设计的边界，探索设计的可能性，千万不要让原则成为束缚我们设计的枷锁。

原则六：识别而不是回忆

“保证元素对象，操作选项的可见性，以此降低用户的记忆负荷。”

这个原则直译文过来的话有点拗口，其实就是指尽量减少需要用户记忆的东西，特殊情况下提供可选项让用户在此确认信息。特别是在一些较为长流程的页面流转中，一定要注意上下文的关联性，以此协助用户进行回忆，而不是从头开始记忆。

1. 选项可视性

最常见的运用，将选项以用户最能理解的方式呈现出来，不让用户疑惑。

在平常练习的飞机稿或者一些风格独特的产品中我们经常会看到只使用了icon的tab栏，虽然美观，但是当用户量达到一定程度，且用户属性较多的情况下很容易造成识别上的问题。目前市面上较多的产品还是选择了文字+icon的展示形式，通过文字与图形加深用户的识别，高德则选择了使用表意最为明确的文字。

2. 页面可视性

页面标题也是最为常见的运用形式，产品需要清晰的告知用户目前所处的位置。特别是在一些需要长时间停留，存在操作被打断的界面中标题尤为重要。

目前市面上常见的产品都会在用标题来告知用户当前所处页面，有段时间特别流行类似APP Store这种刻意放大来突出页面标题。值得一提的是，在IOS中如果从一个APP跳转至另一个APP左上角则会出现上一个APP的名称，切点击可以快速返回。如上图中的淘宝页面，我是通过微博点击广告链接后跳转进入的。

3. 交互通用性

只要是用户熟悉的交互形式，用户就不用浪费时间去记忆，即使不用文字说明，也能有效的保证用户的识别。

在文字阅读或者编辑的时候，长按可以拷贝/粘贴，即使不用说明，绝大部分用户也能get到，还有就是预览图片时候，使用手指交换进行缩放。

4. 历史记录

提供最近访问项可以帮助用户恢复他们未完成的任务以及难以回忆的任务。

最常见的莫过于浏览器的历史记录，可以帮助用户回忆寻找某个时间节点的内容，微信的聊天记录划分了更多的维度来帮助用户搜索相应的记录。淘宝浏览商品不稳定性较大，有时用户会因为某个宣传而点进某个商品，通过足迹可以查看浏览记录，这样就不用特地去记店铺名称或者加入收藏夹了。

原则七：灵活高效的使用

“用户看不见的加速器（快捷方式）通常可以加快专家用户的交互速度，从而使系统可以同时满足经验不足和经验丰富的用户。允许用户定制频繁的操作。”

系统需要同时适用于新手用户与专家用户，对于新手用户来说，需要尽量降低他们的学习成本，帮助他们快速上手，而对于专家用户来说，他们需要的是快捷以及高效。

1. 千人千面

在注重用户数据分析的今天，很多时候已经不用用户自己手动去设置自己的偏好，产品便能像你所想。

左图的滴答清单是最为常见的为新手用户准备的引导方式，右图支付宝的财富界面，如果是新手用户，那么金刚区下方则展示现金红包，基金推荐等吸新人，如果是基金老用户了，则会展示更加专业的数据字段来帮助用户决策。

2. 重复操作

对于熟悉的产品，一般来说用户更希望一切趋于稳定。

在外卖这种使用频次较高选择项较多的产品中，很大一部分用户不愿意冒着风险尝试新的菜品，或者点餐决策时间较短（比如开会），他们很多时候会选择“再来一单”。

3. 快捷方式

在操作同一款软件时，专家用户的屏幕只有一个预览窗口，而我…恨不得屏幕再大点，塞下所有工具栏。

在各种软件中都会设置快捷键便于专家用户的高效操作，比如专家用户的Photoshop和我的PS。

原则八：美学和简约设计

“对话中不应包含无关紧要或很少需要的信息。对话中每增加一个信息单元都会与相关信息单元竞争，从而降低其相对可见度。”

我们在设计一个页面的时候，如果其中的元素都想突出，最终只会导致没有任何突出的元素。这里可以参考“信噪比”的概念，即相关信息与无关信息的比例，用户的注意力是有限的，降低不必要的视觉噪音，才不会过于分散用户的注意力，提高用户效率。

1. 文字内容

资讯类产品中最为常见，如果一大段文字又臭又长,那么就很容易影响到想要传达给用户的核心思想。

36氪在快讯页面中会将重点资讯标红来突出，此外默认情况下只展示资讯标题，方便用户快速浏览，如果遇到感兴趣的资讯可以再选择展开浏览详细信息。

2. 视觉元素

利用这个原理，现在的产品会在一些视觉元素处理上做出区分，不仅能引导用户快速完成预设的操作路径，且对产品本身业务也是相当有利。

淘宝的结算页面中，为了促使用户剁手不受干扰，会将付款btn与其他做高反差处理，同理Airbnb在首页中将搜索房源作同样的的处理，只要促使用户搜索了，那就提高了剁手的转化率。

原则九：帮助用户识别，诊断错误并从错误中恢复

“错误信息应该使用简单的语言表示，准确指示问题并建设性地提出解决方案。”

原文中特地强调不要用代码去表示错误信息，即用用户能够理解的，通俗的，接地气的词汇，千万不要用一些专业性术语。用语尽量礼貌，不要责怪用户，让他们觉得自己是个傻逼，这样很容易让他们产生挫败感。

得道在使用手机号登录的时候手机号少输入了一位，以至于登录btn一直无法点击，虽然诊断了错误，但是没有明确的告知用户错在哪。Behance在这方面就显得更为完善，会实时判断状态，并且实时告知原因，协助用户进行改正。

原则十：帮助文档

“即使可以在没有文档的情况下使用系统会更好，但可能仍需要提供帮助和文档。任何此类信息都应该易于搜索，着眼于用户的任务，列出要执行的具体步骤，并且信息量不要太大。”

每个用户的背景都有所不同，所以很难确保所有用户都能畅通无阻的使用自己的产品。无论什么类型的产品，都尽量给用户提供一个帮助的途径，对于那些只需要一句话就能概括的，可以考虑在附近进行简短的说明，而对于需要复杂说明的，最好统一一个帮助入口，且放置于用户易于找到的位置。

在IOS的设置中，会在一些设置项下添加简要的说明，以此来帮助用户更好的理解。印象笔记与普遍的产品一样，在菜单栏上有帮助的入口，而且提供精准的搜索功能，帮助用户更快的解决有可能遇到的问题。

作者：CE青年   来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网

筛选可以说是我使用比较频繁的一种交互形式，比如我点外卖，会选择满减优惠力度大，同时我也可以选择在哪一个价格区间内的产品，这就会用到筛选，而到了B端产品上来，一个CRM系统当中，筛选的逻辑也会比移动端的复杂，伴随着：且关系、或关系、大于、小于等等这样复杂的逻辑，也为设计本身增加了很多难度。因此，今天我们就来讨论讨论筛选控件

1、筛选存在的意义

筛选存在的对于整个表单来说是非常重要的，它可以帮助用户，在表单茫茫多的数据当中进行快速的定位；可以对表单进行快速划分，缩短用户对于数据的寻找时间；能够满足用户在工作中，实际业务场景的筛选。

对于实际B端场景来说，筛选是日常数据分类的一个重要途径，我们先来看看实际场景到底有哪些？

用几个我们CRM用户日常使用的场景来说：

比如今天作为一个电话销售人员，想要联系最近注册的用户时，通常会通过筛选来选出最近几天注册过，同时又没有销售更进的客户，进行一个优先级的排布；

再比如说，在销售周报当中，销售主管可以通过筛选得到每个人这周完成的状态，也可以通过筛选得出每个人对于线索的更进情况和对客户的流失状态等等，这些都可以通过各种各样的筛选形式来满足用户对于特定情况下的使用

筛选和搜索、导航的区别？

筛选可以通过多个筛选条件进行多维度的寻找，而导航、搜索只能通过单一条件进行指定筛选。

虽然在现在很多搜索都可以支持多维度用空格去进行多字段的关键词搜索，但本质上区别不大

所以在B端项目当中，如果你有表单，那你就需要筛选

2、筛选的类型

我们将筛选分为基础筛选和高级筛选两种，两种筛选会根据业务场景不同，在不同的页面去使用

2.1、基础筛选

基础筛选一般为系统预设好的筛选字段，具有很强的业务和场景的需求。基础筛选一般分为四个部分：

筛选条件：是指用户可以筛选的范围

筛选项：是指用户可以选择的筛选项目

已选项：是指用户已经选中的筛选项

备选项：是指用户还没有选择的筛选选项

基础筛选更多作为用户快捷筛选的一种方式，因为一般使用场景当中用户几个筛选逻辑为“且”

同时筛选的逻辑也为简单筛选，所以在使用场景上只适合在对筛选要求不高的场景下使用。

2.2、高级筛选

高级筛选一般为筛选中含有运算符，同时筛选当中包含条件关系，比如且关系或者否关系。一般高级筛选包含以下几类关键词

筛选关系：是指几个筛选条件之间的关系，一般为 且、或关系，即 且 关系为几个条件之间的交集；或 关系为几个条件之间的联集（并集）

筛选字段：是指在筛选当中，所要的筛选项，一般为表单当中的所有可筛选的字段

筛选操作：是指筛选字段和筛选值之间的关系，常见的筛选操作有：大于、小于、是、否、包含、不包含、为空、不为空等等。

筛选值：你所需要筛选的数值

高级筛选一般满足更多的用户场景，为用户多条件多字段、多个筛选关系、多个筛选操作 提供有利保障。

3、筛选的布局

3.1、上下布局

当在筛选器条件少于5个的情况下，最常使用的就是上下布局，这样筛选能与网站保持统一的情况下，上下布局也更方便用户进行阅读

当筛选器过多的情况下（一般在5-15个之间），筛选器过多，需要滚屏才能看到筛选结果，用户使用起来会很别扭。所以在5-15个的情况下，一般会将筛选项进行收折，这样保证筛选整体面积不会太大，同时将用户常用的筛选放在前面，可以满足用户基本的业务需求和使用场景

3.2、左右布局

左右布局在PC端一般是以字段选择进行筛选，通俗来讲就是将用户可以筛选的所有字段全部罗列出来，然后通过勾选选，择出你需要筛选的字段，进行筛选器的使用

左右布局的好处是能够将筛选的所有条件都直接的展示出来，可以适应很多场景，在筛选器用15个以上时。通过左右布局的方式，能够让筛选条件进行滚动，在最大限度保持用户使用体验

4、筛选的形式

在日常的B端产品中，筛选的形式有哪些？筛选到底应该怎么设计？接下来为大家总结梳理一些在 B端产品 中的筛选玩法，希望为你开启新大陆。

4.1、平铺型

平铺型一般为用户搜索结果数据量过大，使用户搜索出来的结果与其预期差距过大，用户然后可以通过筛选对数据的再一次分类，使用户能够精准寻找其想要的结果。

平铺型一般为筛选条件少于6个，这样能够通过1行或者2行去展示筛选项的结果

多用于信息量大的产品，比如电商、视频网站等等。常见的淘宝、京东、腾讯视频PC端 都采取用这样的方式，将所有的筛选条件列出来。

平铺型的好处是将筛选项的结果全部或者部分放出，能够帮助用户快速理解筛选项以及快读找到自己想要的结果。

缺点也是很明显，平铺型的控件占比大，需要占据大量面积展示平铺出的筛选结果。

比如淘宝PC端，搜索一个产品后花去40%的面积去展示所有的筛选条件，其实就是想引导用户，淘宝搜索过后spu的数量仍然过大，想通过进一步的筛选，让用户明确自己对想要东西。同时因为面积占比大，通常平铺型都是以收折的状态，只有在搜索触发后才会完全展开

4.2、收折型

收折型筛选是一种简单直接的筛选形式，将用户常用的筛选形式通过下拉框的形式进行筛选。每一个筛选条件就是一个下拉框，这种形式看上去很简单，但是在B端场景中，下拉框对于用户来说认知成本低，操作性也较强，同时在用户重度使用时，又能给用户很好的使用体验的一种方式

优点：

用户可以直接对其常用的字段筛选进行一步操作，并且没有复杂的筛选关系，全部都是“且”的筛选逻辑，能够保证用户进行快速的筛选选择

缺点：

将所有信息全部平铺展开，信息量过于冗杂繁多，同时在做通用性产品时，这种方式很难做到通用性

4.3、单侧筛选

单侧筛选是一种更通用的筛选形式，通过对于你想筛选的字段进行勾选，勾选完成后就会出现筛选条件，然后选择筛选字段、筛选操作、筛选值，一般选择完成所有筛选后，还需要点击查询，筛选操作才算完成。

整个单侧筛选，大量的筛选条件可以放置在表单的左侧或者右侧，通过表单纵向空间，去承载大量筛选条件。

优点：

节省空间、通用性强。因为在很多Saas系统、Paas系统当中，无法针对每一个客户进行设计，就要考虑到系统通用型高，做一些大而全的功能。在每个表单也所需要定制化修改的地方很少，同时能容纳的信息量可以很大。

缺点：

就是在后台系统当中只有这一种筛选形式会面临在我常用的几种筛选的字段中，要通过不断寻找，来满足我的筛选需求，操作麻烦。

我们产品在某一次改版就将筛选由收折式修改为单侧式，因为我们用户使用筛选的场景非常的多，用户每次筛选都要多进行2、3步操作，导致用户进行了大量的吐槽，后来进行修改，将筛选顺序支持手动调整顺序，用户吐槽的次数才慢慢减少。

4.4、表头筛选

表头筛选是一种复杂筛选的形式，其最开始是来源于Excel的筛选形式。点击表单的筛选按钮，可以将表头的筛选字段直接带入，方便用户。之后在后台产品的发展中，得以借鉴过来。

优点：

可以通过表头的点击，使用户更快捷进入到自己的筛选条件，在通常情况下，在表单越左的数据显然是越重要的，也是使用筛选去筛频率最高的，因此高频的筛选场景基本还是得到满足。

缺点：

用户第一次进入系统很难理解这种交互形式，且在每个表头都会有一个icon，影响用户对于表头的识别。

4.5、弹窗式

通过点击筛选按钮，展现出筛选弹窗，进行筛选。这种筛选适合在筛选功能在系统中不是很重要的层级。最常见的就是Tapd，在其中筛选不是很强的一个功能，同时也是系统中十分有必要的。

优点：

是能够在节省面积的情况下，可以进行很复杂的筛选，同时可以支持复杂情况下的筛选

缺点：

弹窗会遮挡一部分表单数据，会影响筛选人的判断，其次筛选条件的添加也相对更加繁琐。

5、选择更合适的筛选

在我们一系列筛选的调整过后，我们团队也总结了对于我们来说更重要的条件和形式，来和大家分享探讨一下。

5.1、使用频率

我们认为影响筛选控件最重要的是用户的使用频率，因为用户的使用频率和使用方式，直接影响到我们筛选是用普通筛选or高级筛选，也会影响到筛选的形式。

5.2、满足实际业务所需

筛选功能的做法，取决于我们产品未来是想往哪一个方向发展，如果想把功能做的强大，就得考虑到筛选的后续扩展性。因此满足实际业务也是十分重要。

5.3、用户认知成本

在B端系统当中，最可能遇见的就是你给用户设计的路径但是其实用户根本没有往你想的方向去操作。我们系统最开始给用户设计好了很多功能点，但是用户对于这个点的认知成本实在过低，也导致了后面系统功能点很多都被埋没。因为在你设计好了一个功能点后，要适当引导用户，解释这个功能的使用场景才不会让你设计的功能被淹没。

作者：CE青年   来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网

树形选择

关于树形选择，我们必须先知道它的基础概念，“树” 究竟是什么？我们先来看看树状结构的定义

树状结构：

树状结构其实是作为一种层次结构化的表达方式，它能够将树的抽象出来表达完整的构造关系，为什么叫做树，是因为它更像是一个上下颠倒的树，根部在最顶端，枝叶反而变为下方。

同样在对树状结构的整体命名上，也遵循了与之类似的表达方式：

节点（Node）：是树状结构当中的基本单位，使用节点可以表示 不同数据间的 组成关系（从属关系与并列关系）通常节点会分为几类特殊情况。

1.根节点：整个树状结构的开端被称为根节点。一个树状结构一定只有一个根，在思维导图中，根节点就代表着它的开端，用于延展出更多的树状结构。不过在目前的树形选择当中，因为对易用性的要求，通常会隐藏根节点，只展示子节点。而根节点隐藏在 标题、选项文本 当中。

2.子节点：根节点之外的节点被称为子节点。一个树状结构子节点数量是没有具体限制，在树形选择当中是直接展示出来的部分。

3.叶节点：没有连接到其他子节点的节点。叶节点属于一类特殊的子节点，它是整个树状结构的最末端节点，在树形选择当中是一个重要的概念，下面会展开来讲。

分支（Branch）：节点之间的链接，在我们树形选择当中，分支的线条可以选择显隐。其搭配的使用方式也有所不同

同时我们还会用到节点的几个基础的概念：

节点层级：指当前节点所在的层级，比如根节点为第一层级，根的子节点为第二层级，以此类推；

节点高度：对于某一节点的高度，便是该节点下所有叶节点从上到下的个数；

节点深度：指该节点到根节点的唯一路径长度，深度与层级较为类似。

树状结构究竟出现在生活中的什么地方呢？树状结构对于我们又有什么用呢？大家可能理解上会觉得很枯燥，我给大家举一个例子：

回忆一下我们小学使用字典时的场景，首先我们是先通过声母，去确定这个汉字的大概的页数范围，然后通过韵母去确定这个汉字的详细位置，最后通过音调找到想要寻找的汉字：

其实字典的设计，便是一个典型的树形结构。而在 B端系统中我们常见的公司组织架构、省 市 县 地址选择、在线教育的班级结构 等等，这些都是使用了完整的树形结构。

采用树形可以快速进行结构化的表达，其目的是为了用户能够快速地增删改查，想要更多了解结构化表达的同学推荐大家看一本书《金字塔原理》，里面讲了非常多的逻辑化思维、表达的方法与内容，内容比较多，而这种思维其实在我们工作生活中都能够用到。

树状结构组成：

1.层级缩进

为了将树的整个结构完整的表达出来，会使用层级缩进的方式进行区分，通常会使用 8px 对下一级节点进行缩进，这样能够表达更为完整的层级关系。

这里要注意，如果想要更为强调树形选择的层级关系或者树形内容本身就比较多的情况下，可以见解 Coding 编辑器的思路，即：将缩进内容使用“分支线”进行表达，更明确清晰。 这里使用层级线后，折叠图标也会有所不同，下面有明确解释。

2.折叠图标（节点按钮）

主要是将节点下的所有树叶与子节点进行展示，在整个树的结构中，折叠图标一般分为两种：三角折叠、方形折叠

三角折叠：为页面层级较少时使用。因为在较少的层级下，用户不用特意去思考当前节点所在层级究竟在哪。

方形折叠： 更多与页面层级线进行配合使用，通过层级缩进，将页面层级线标识清楚，能够更好的在多层级情况下进行合理区分。

3.选择控件

整个树形结构依旧是在选择录入框架下，分为单选和多选。因此需要对其类型有所展示，特别是在多选的场景下，一定要标明它的类型，方便用户进行理解使用。

通常这个控件可以在单选的时候进行隐藏，这里先按下不表，我在树形选择的类型当中深入给同学们进行分析理解。

4.选项文本

注意字数限制、超出后如何处理即可，我就不做过多介绍。

树形选择的类型：

在讲树形选择之前，我先为大家讲解关于与其相关的同类型产品，为了方便大家的记忆，我选择出了两类不同的组件进行对比，感兴趣的同学可以关注“CE青年” 后台回复树形对比进行查看。我通过视频的形式为大家进行了讲解，相信大家在看完之后一定会有所收获。

1.单选树

单选树只能选择叶节点，也就是需要将每个树展开过后才能进行选择。

它是一个较为传统的选择方式，因为它的选择热区较小并且理解成本较高，因此这种方式不太满足现如今对于B端产品效率提升方面的要求，并且要求十分特殊，因此使用较少，现多以单选节点树为主。

2.单选节点树

单选节点树与单选树最大的区别在于其能够选择子节点，这样可快速选择该子节点以及其各种叶节点。

同时传统的单选节点树中是采取单选按钮的方式，随着对B端要求的不断提高，并且在树的功能越发的复杂过后，几乎取消了 单选按钮 的形式，取而代之的是将整个 文本标签 作为选择的热区，用户点击过后即可进行选择。

因此在树形选择当中，逐渐将单选节点树演变成由两部分热区所组成的一个控件：

在左侧，主要以树类型的展开折叠操作，热区通常就是图标折叠图标这一部分；

在右侧，以选择该选项、节点的操作为主，热区范围以整个选项文本作为基础，进行延展即可。

这里还是提示以下新读者，这类选择一定要进行 Hover 状态处理，不然用户无法根据光标的变化判断是否可点击，当然老读者跳过就行～

3.多选节点树

大家在对比单选与多选时会发现，为什么不会存在多选树？不存在只选择选项的多选呢？

思考时间又到了，别忘下划，自己先想想呢～

虽然在理论上会存在多选树的情况，但是它存在的价值比较诡异。首先在树的节点当中，我选择一个子节点就是选择该节点下的所有。因此可以说是选择了一个节点；或者说它选择了该节点下的多个选项，因此在实际情况中这类场景过于的少，更多会用多选节点树进行代替。

当然，多选节点树与单选节点树在结构上是十分接近的，就是将复选框展示出来，方便大家进行选择。考虑到大家经验不足，建议这里复选框放在折叠图标前侧，原因有二：

• 在树形选择后续的拓展当中，经常会遇到选择增加一些操作功能，比如 新增、删除、复制、粘贴、拖动排序。我看很多设计师最开始因为种种原因将选择组件部分放在后侧，导致之后的操作无法进行更多的拓展，随之崩溃，对树形选择又是一顿乱造～

• 现有的基础架构基本都是沿用了这类设计，可减少前端同学的工作量，同时也减少他 BUG 的产生。

多选节点树的使用场景非常多，我举一个大家在树形选择中都会犯的例子，希望大家能够多理解其中存在的特殊逻辑：

比如在一个大型上市公司当中，我作为老板会去设定整个“设计部”的权限，并且想要得到的效果是之后有任何新员工都是使用这个权限。如果作为一个新人设计师，很容易就会使用多选节点树，将整个组织架构进行选择，但是这样的选择与用户实际想要的内容是存在较大差异的。

在产品设计中，对于上诉的“设计部”这个概念其实是一个动态数据，即在之后新增到“设计部”的所有员工，我不必再去权限管理中重新配置。我们遇到动态数据的情况时，首先不建议大家采取树形选择，因为首先对于这个概念的理解成本很高，无法通过树形选择这样的方式让用户理解；同时系统对于这类动态数据的情况都建议特殊处理，至于怎么处理，大家可以在评论区讨论，我也会在后续文章当中为大家进行讲解。

树形选择的优点

易理解：

因为树状结构本身就已经存在很久，早在 DOS 计算机时代就有它的影子，经过长期累月的发展，用户在理解上也会相对更加容易

快浏览：

在数据量特别大的时候，能够根据子节点优先找到自己想要的叶节点，从而提升选择效率，与《选择录入02》当中讲到的 Tab选择十分类似，没看过的同学建议先去看看。

看结构：

结构，能够辅助人们进行快速记忆，从而对整体框架有着更深了解。而树形选择正是有了这种结构能够更为方便的让更多人熟知，从而更快了解业务。

树形选择常见误区：

数据量

首先对于树形选择本身的控件形式，你就需要去分析其能承载的内容数据量。应该是在什么范围内较为合适。

当数据量过大时一定会出现异步加载、数据分页等诸多情况，因此在设计中，需对这类情况进行设计。

全选功能

全选功能本身较为简答，无外乎就是一个复选框的事情，但是在上面提到的数据量过大 + 全选的存在，会有些问题还需要大家进行留意。

键盘映射

在树形选择当中，都可以采取键盘操作从而提高效率。基本规则是：

↑键：向上切换同级节点；从第一子节点，顺序返回父节点；

↓键：向下切换同级节点；顺序进入已展开的第一子节点；

←键：关闭当前级别节点；返回上一级父节点；

→键：展开子节点列表；顺序进入已经展开的第一子节点；

回车键：提交当前 foucs 的节点选项；

树形选择是较为常见的一类方式，但由于大家对 基本的树形结构 认识不足，导致对其设计会有许多误区。

作者：CE青年    来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网

最近看到很多美妆博主都在出什么红黑榜，其实就是在说哪些产品是有问题，不推荐大家使用，有哪些东西是可以安利的好物。
想着B端设计当中，也会存在这一情况。然后我在打开 Ant Design ，浏览完所有的组件，你会发现：“组件当中也会存在红黑榜~”
今天就趁着 618 刚过的这个时间节点，我也来“带带货”，说说B端组件当中的红黑榜

首先我先说一下关于红黑榜的定义
1.使用频率高：也就是这个组件我们平时会频繁的使用
2.黑榜：在使用过程中，会遇到诸多问题，导致无法正常使用
3.红榜：往往会更满足B端产品的实际需求，对于组件有更深的认识

通过我的分享能够给大家有一个初步的认识，当然整个组件都是基于我平时的设计观察与使用，目的也是想和大家分享、避避坑，如果有什么疑惑，欢迎在评论区我们一起讨论~

树形选择

树形选择在B端系统当中的出现频率非常高，比如我们常见的：表格、表单、各类详情页，只要涉及到 层级结构的选择，都会有它的身影（注意，这里主要说的是树状的选择类组件）但是作为设计师，树形选择在使用的过程当中，会出现很多意想不到问题

尺寸无法确定

因为树形选择本身这个组件的特殊性，它的大小需要通过内容当中的高度与宽度共同决定，而在设计过程当中，高度与宽度究竟为多少就要仔细的考虑
因为在使用树形选择时，需要思考每一个内容的具体尺寸，太高太低都不行
如果太低，展开树形选择就会非常的麻烦；如果太高，则在数据量较少的时候，会给人数据很空
横向空间也是同理，也就造成了在设计时，需要深入思考

适用性太低

树形选择，作为基础组件，在应付复杂的选择需求时，很明显的会感到“力不从心”，无论是从它显示选中时的内容，还是大量的数据时的选择难度，树形在适用性上，都会大大降低，当遇到这类情况时，建议采取更多 “业务组件” 的方式来对选择进行优化

分类表单

分类表单（也可以叫Tab表单，不过只是代称而已~）在B端产品当中也非常常见，它出现在复杂的表单当中，但是作为设计师，在真正去使用分类表单时，你就会发现会有非常多的问题需要我们去处理

效率低

对于用户而言，分类表单不能够完整的查看表单信息，每一个都需要来回切换。也就意味着填写表单的时候，我们不能通过滚动查看所有数据，而是要去点击每一个单独的分类里面，通过分类了解具体的表单内容
同时必填项的提示，在分类表单也非常难以处理，因为其每一个独立，而作为用户，其实是不清楚具体哪一个分类里面有必填项，也会导致填写的效率过于低下（其实会有处理的办法，只是大家对于这类提醒都不太满意）

编辑模式不易处理

分类表单在编辑状态时，同样难以处理。当提交完分类表单后，我们还需要考虑数据在详情页里的展示形式，因为表单与详情页的映射关系，这时候在设计时，应该提供某一分类下的数据编辑，还是整个分类表单的数据编辑？
其实这种情况，特别是初级B端设计师，处理起来也是非常棘手

顶部导航

顶部导航非常特殊，虽然在我之前 导航菜单 的文章当中提到过，但在使用顶部导航的过程当中，还是会面临很多问题

顶部导航最大的局限性便是展示数量太低，毕竟在空间布局当中，横向空间与纵向空间的差异其实是非常大的，顶部导航的高度设定不能过高，同时 二级、三级菜单 只能够使用下拉菜单，也就导致在导航菜单的设计当中局限性过大，并且项目一旦发展过后，不容易解决问题
当然，顶部导航并不是一无是处，在许多工具型产品、官网 当中，顶部导航都有着它的一席之地，其实这类形式，更多是以内容为主的网站结构，才会采取顶部导航，也就是上下结构会更加合理

栅格

栅格严格意义上来讲不算是组建，但是由于很多设计师 误用、乱用，导致设计师为了栅格而栅格

因为在常见的移动端设计当中，是不存在栅格（主要是移动端横向空间小，使用不频繁）
在桌面端的设计当中，并不是说栅格不好，而是很多时候设计师使用栅格往往会非常盲目，举一个简单的例子，在表格当中是否需要使用栅格？

答案是：“不用使用栅格”，其实这类问题就是目前很多设计师的问题，因为会盲目使用，也就导致了我在做设计的过程当中，出现很多为了栅格而栅格的现象。后面有时间单独总结一下栅格主要运用在哪些地方，希望大家别盲目使用
至于栅格应该如何使用，在我之前的文章当中都有提到，可以自行点击历史记录查看

滑动输入条

滑动输入条在很多概念设计当中都会经常出现，特别是在 Dribbble 上的桌面端设计当中，是每一个设计师的标配，但是在实际的B端项目中，特别是桌面端的B端系统当中，滑动输入条是非常不合理的一个组件

因为B端产品当中，大多数的产品都是需要精准录入，并且数据的区间非常大，因此也就造成了滑动输入条，使用起来给用户的感受是非常糟糕的，并且由于大多数用户的预期还是以直接输入为主，这也就造成了现如今B端产品很见到滑动输入条的原因

面包屑

面包屑导航在实际工作当中经常使用，因为在常见的B端系统当中，导航菜单以及信息结构，一定是非常复杂的（除非你的系统里面就只有一级导航菜单，并且没有其他的页面层级逻辑）

因此通过面包屑导航，能够让我们清晰知道整个页面的信息结构，通过面包屑又因为其 小巧、灵活，无论你是在一个完整大页面当中，又或者是一个小的气泡卡片当中，面包屑都能进行承载，并且它还能够起到 返回 的作用，又能够清晰的展示页面的路径信息，是一个可以一举多得的组件

穿梭框

穿梭框相比大家的不会陌生，在设计B端产品的时候，或多或少都会有所涉及，与此同时，由于穿梭框本身复杂，再加上很多设计师会觉得它占比过大，因此不会去使用

今天安利穿梭框，其实是想安利这一类的穿梭类的组件，你会发现其实很多业务选择类的组件都会通过穿梭框的形式进行演变，比如我们常见的“国家城市选择、部门成员选择” 甚至表格当中的字段显示隐藏设置，这些都是传统的数据选择过后一步一步演变而来，因此这类穿梭框型的数据选择
其实更加体现的是设计师基于目前的组件所进行的优化，而分析它为何这样做，这样做的原因，成为了穿梭框上榜的理由

折叠面板

折叠面板就像一个大的“盒子”，当产品经理在你的身后说着：“这个信息我要放，那个信息也不能落下的时候”，拖出一个折叠面板来解决这个问题

其实在折叠面板的使用过程中，主要是在详情页以及表格当中，因为折叠面板本身可以容纳很多信息，并且能够交代具体的层级关系，因此使用折叠面板能够有更多展示数据的可能性，即插即用，非常方便

气泡卡片

在页面当中的任何地方，蹦出一个气泡卡片你都不会感到奇怪。其实气泡卡片我在日常设计当中，经常使用的一个组件，因为它能够容纳下任意的内容，小到一串文字、大到一个视频，都能够在气泡卡片当中进行使用

并且在信息当中，气泡卡片作为一个信息补充的组件，因此在系统当中，需要展示但是又不是那么重要的信息，使用气泡卡片，就会更加的方便

锚点导航

最后一个，自然逃不掉我们的锚点导航。感觉在我的疯狂安利下，越来越多的产品都开始使用锚点导航。因为B端产品必定是复杂且多的信息，自然而然我们在使用的过程当中要更多考虑信息的承载

作者：CE青年   来源：站酷
蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码蓝小助，报下信息，蓝小助会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

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

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 

ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网