日期：
2023-02-28 15:21:52
来源：CE青年Youthce收集 编辑：CE青年
最近有读者来问这样一个问题：“在 B 端系统当中，不同的箭头到底代表着什么含义？”因为看似它们基本相同，但实际使用差距较大。 今天我们就尝试着来梳理一下系统当中的箭头，方便大家对其有一个了解。 如何去表达页面需要跳转，我相信很多同学都有自己的设计方式。通常我们会给一个链接蓝色，提示用户这里需要跳转。 再者，我们可以考虑给它加上一个美丽的下划线，虽然这种方式看上去有些传统，但仍然是非常有效的方式。
如果还不行？那来一个箭头可能效果也不错。这个箭头可是大有讲究，我打开 Remixicon 关于箭头的图标一共有 18 个，跳转的通常只会有我们这里的右侧箭头，英文备注可以叫做：arrow-right-s、arrow-drop-right
这种形式其实在移动端的设计当中较为常见，因为移动端 hover 状态的缺失，所以很容易就会无法提示，而桌面端就会保留这种交互形式。 因为在 B端产品里面，大多数都是依托于浏览器的系统，我们俗称 BS 架构。因此我们在设计时需要考虑浏览器页签的处理。 其实浏览器的页签，自古以来都是一个难题，我们可以从各大浏览器的设计来看，目前浏览页签的处理主要有几种方式： 分组：以 Chrome 浏览器为主，通过分组能够优化页签过多的情况，同时 Edge 浏览器 等都有类似功能
侧边：Edge 浏览器的通过侧边栏的方式，优化页签过多的情况。
清单：这是以 Safari 浏览器为主的解决方案，主要是通过清单，整理你平时常用的浏览器页签，可以一次打开多个浏览器页签。
我们回到箭头当中，你们可以发现对于浏览器来说都是一个世纪难题，那我们作为 B 端系统，也会遇到同样的问题。 关于 B 端系统，页签的处理方式已经抛弃了之前的 应用页签 的处理办法，确取而代之的是根据场景去做优化。 首先，浏览器本身其实是自带这个功能，我们可以点击 command + 链接，就能够实现“在新标签页中打开链接” 如果不行，你也可以点击右键，选择：在新标签页中打开链接
最后 我们会将选择的权力交还给用户，也就是在 一些 页面里，本身需要多窗口开启的场景时，我们可以常驻 在链接右侧的箭头，提示可以 在新标签页中打开链接 这种做法已经在多个产品当中普及，比如在飞书文档当中，假设我们现在正在阅读一篇文章，也就是进入到文档页内部，这时候我突然想到我要去切换某一篇文章/知识库，我就可以点击 右侧箭头，代表我是 新标签页打开链接，查看新建的标签页。
同样纷享销客也有对应的交互逻辑，在纷享销客的CRM 板块当中，因为很多销售想点击进入其他板块页面简单浏览，因此同样也会有这个功能，来去优化用户的操作流程。
除了上面两个箭头之外，在 B 端系统里面还会存在展开收起的箭头。 展开箭头，顾名思义就是将信息隐藏的部分展开，去实现对应的页面效果。 这种方式在整个 B 端产品里面较为常见，一方面，展开箭头能够帮助视觉去做引导，让我们知道更多内容的信息；同时也帮助整体页面更为简洁的呈现内容。 并且关于展开收起，如果是筛选等场景的箭头，还需要考虑点击前后他们状态的关系，选中为筛选最好能够提示筛选。比如在这个列表当中，我点击了筛选过后就能够展示目前筛选的具体状态。
另一个箭头，主要就是在导航菜单进行收起的操作。在整个管理后台里展开收起非常关键，在很多地方都会用到，因为收起就是大多数导航菜单常见的操作内容，所以这个箭头也不能忘记。
关于箭头，我们一共总结了以上这几种，当然在整个系统当中，箭头的使用远不止于此，在你的系统当中有哪些箭头？不妨评论区一起聊聊~