分享一个冷门的设计系统

设计系统对于很多设计师来说非常熟悉，因为我们经常使用设计系统来搭建自己的页面，但是大家在聊设计系统时，都只会说 Ant Design 、Element ，并且再去设计页面时，你会发现你的页面总会有点相似。

我们经常在课程当中说，你的页面有 Ant Design 的感觉，那究竟应该怎么调整。我们就必须寻找一些更为冷门的设计系统，因为冷门也就意味着很多设计师并不知道，并且可以运用这些小众的系统类型，来去做更多的差异化。

今天要给大家推荐的便是小米旗下的 HiUI，我相信很多设计师都不知道。因为他们的官网地址换了又换，同时也不像 Ant Ele 那样非常出名，我都是苦苦寻找很久，最后我在 Github 上重新找到。

先来说说我认为 HiUI 的几个优点：

1.更新频率高

能够在 Github 的维护记录上发现这个设计系统一直在不断地更新，并且已经是 4.0 版本。

一个成熟的设计系统就需要不断地维护和时间的检验，至少我觉得 HiUI 算是从自己的业务抽象出来的。

2.风格独特

设计风格这一件事已经非常同质化，有的时候我们确实是在不断的去尝试各种差异化的情况。

3.十分落地

这个询问过小米中后台系统内部的同学，从他的口吻中询问到内部对这个系统的评价很不错，能够同时落地因为感觉十分落地。

我们再来看看设计系统里有哪些亮点的内容：

在 HiUI 叫做 CheckSelect 多项选择器，不过叫什么已经不重要了~

其实传统的下拉多选已经非常成熟，迭代改动的空间并不大。但是由于是多选，会导致我们在选择时出现一些特殊情况。比如当选择的数量过多导致输入框撑开。

在 小米设计系统当中给出的方案非常特别，它通过右侧的 数字指示器 ，呈现了目前已选择的内容数量。

同时在规则上还进行相应的优化，因为在多选的场景当中除了单一层级的数据选择之外还会包含层级结构的数据选择，即：树形选择、级联选择…

而 数字指示器的出现，会出现一个问题，当你选择了父节点后，再选择子节点，那你的数据究竟会如展示？

这里面其实涉及到的逻辑情况就会更加的复杂，我大致罗列：

至于实现效果如何，大家可以自行访问，了解结果~

因此虽然是一个小的功能，但是实现起来的设计成本可一点也不低。

其次在导航菜单的设计上，也会有新颖的设计点。

我在翻阅 HiUI的 Sketch 源文件时，发现导航菜单给出了一种全新的类型：大数据量导航

在大数据量导航当中，主要针对的就是导航菜单数据过多时，应该如何呈现数据。

传统的做法就是在菜单部分增加滚动条，但很明显处理方式过于简单，不适合大量使用。因此使用一个巨型菜单容器，里面呈现所有的数据内容，这种方案会更加易用。

同时在很多产品当中都会发现类似的影子，比如 腾讯云、阿里云、老版本的飞书后台

并且在去设计次方案时，设计师还会考虑到导航菜单数据量过大，我们需要检索的场景，在顶部增加了搜索入口优化组件方案，因此觉得非常不错。

接着浏览发现在小米设计系统当中还会包含一个特殊的组件：筛选

筛选本身其实非常常见，其实是一个较为通用的业务形式。但将其抽象成为设计系统当中的基础组件后，能够发现其实就是包含 分类 以及对应的筛选项。

将所有的筛选项平铺展示开，并且在描述时讲到，「是因为用户搜索结果数据量过大，使用户搜索出来的结果与预期差距过大，用户然后可以对数据进行再一次分类」

代表着筛选就是搜索场景下再进行使用的组件，至于落地如何，目前没有看到相关产品进行使用，没办法做出太多评价。

最后看到了一个非常新颖的组件，禅模式

当我第一次看到这三个字的时候完全不知道究竟会是什么功能，打坐??？

深入使用后发现，其实禅模式的主要功能就是将局部的页面内容进行放大。参考下图动效

这种形式很多同学可能见得比较少，我对于一个产品的印象非常深刻就是 ONES

在 ONES 产品里面，可以在工作台当中点击全屏播放，我们就能够沉浸在每一个小模块当中，进行快速的预览显示。

这种方式我认为就是禅模式的使用场景，很新奇也很独特，不过可以和同学们分享分享~ 了解一些新的组件形式

而我们作为一个设计师，要研究的不是那些不光是哪些热门的设计系统，还会包含很多冷门的系统。因为冷门我们就可以深入拆解，分析他们的新奇之处，了解这些内容内容为什么要这样设计。这样此样可以看看我们系统有没有可以值得借鉴的点。

你还知道哪些冷门的组件，我们一起讨论讨论~

我们第八期的 B 端交互设计训练营的课程现在已经开始报名了，如果目前求职受阻、如果想要系统的提升 B 端设计能力，可以咨询了解课程内容。

本篇文章来源于微信公众号: CE青年Youthce