1、按钮

https://www.zcool.com.cn/article/ZMTEyNzczMg==.html

聚焦状态 (Focus)：主要是用于展示当前电脑光标所在的具体位置。听起来有点玄乎，我来讲他背后的原理，主要是方便一些键盘使用的用户，可以使用Tab键或者方向键来对网页进行访问输入
比如在Mac OS 以及 Windows的使用中，通过点击Tab，便展示出文件的Focus状态

Focus状态是一个非常重要的交互形式，但是很多设计师都会忽略，甚至在很多网站，直接就是将这个样式所去除，导致使用Tab键无法获取聚焦的反馈，比如常见的百度、Google再到各大操作系统都会有这类反馈，去除这类反馈，会导致用户无法用方向键控制光标位置，在很大程度上降低用户使用的可能性

第一步根据用户浏览模式确定按钮顺序

在桌面端中，浏览模式大致分为两类，F型浏览模式、Z型浏览模式（下方知识拓展会有讲到）
首先，因为导航在整个页面的顶部，结合两种浏览模式在顶部时统一都为从左到右的浏览顺序
因此确定整个导航按钮初步的按钮重要层级排序

**

第二步交互路径优化

我们对于用户的按钮层级有着明显的划分，因为在整个导航右侧，又因为其的特殊性，我们把操作空间分为三部分：

左侧为操作路径最短的区域，因为桌面端的产品需要通过鼠标进行交互操作，而其中移动鼠标的长短直接决定用户是否愿意点击这个按钮，因此，靠左的按钮适合放置用户最常使用的操作
中部为按钮内部区，可以放置一些低频，但是又必须出现在这个区域的按钮操作（比如：帮助中心、通知中心等等…）
右侧为按钮最为重要层级最弱的区域，同时它也有一些特殊性
一般在浏览器的右侧，为用户最容易定位的操作区域，因为靠近边缘导致在用户定位当中能够帮助用户进行快速选择
回到页面中信息层级较高、同时需要精准定位的按钮就会将个人中心放置在最右侧，方便用户进行快速定位
因此我们讲导航当中按钮重要层级进行简单排序，得到下图：

**

第三步信息整合优化按钮结构

通过亲密性原则，我们将除去左右两侧确定好的按钮之外的按钮进行简单分类，将有关联的按钮进行组合，形成较强的关联性～

第四步视觉调整

视觉调整作为最重要的一步，主要是为了在最后的按钮重要层级上，将一部分按钮突出、一部分按钮弱化，达到我们想要的整个层级效果
通过团队内部讨论，将我们的新增按钮定位CTA按钮，因为它关联到我们每个使用系统的人都会用到，属于最高频的操作按钮，也因此将其突出

**

知识拓展：

F型浏览模式：
是新闻平台、博客等文字为主的网站布局所采取的阅读模式
该阅读模式由尼尔森团队的眼动追踪研究结果从而进行普及，在这个研究中记录了超过200位用户浏览网页时，发现用户的主要阅读行为在许多网站和场景中表现得相当一致。这个阅读模式看起来有点像字母F，因此也被叫做F型浏览模式。
首先用户以水平方向进行阅读，通常是在阅读区域的上半部分
接下来，他们在屏幕左侧垂直浏览，寻找段落开篇几句中感兴趣的内容。当他们找到感兴趣的内容时，他们在第二个水平方向上快速浏览，通常这块内容区比上一个内容区更短小、更简洁。这部分元素形成了F的下半部分
最后，用户在垂直方向上浏览内容的左侧区域

2、菜单导航

https://www.zcool.com.cn/article/ZMTEwMTUwMA==.html

导航菜单层级越多，用户体验就会越差，你会发现一些拥有三级导航的菜单，都会通过设计优化来实现隐藏导航的合并，从而减少用户操作负担

比如有赞就是一个典型例子，在有赞零售的导航菜单中其实是有三个层级，但是通过交互层面的优化，将二、三级菜单直接展示出来，形成一个整体，提升了用户体验避免用户层层寻找

同时在交互上，采用 悬停+点击结合的形式，用户即可以通过悬停鼠标进行快捷操作。同时又可以通过点击，确定跳转查看该一级导航下的菜单，能够提高用户的操作效率

鼠标悬停操作

鼠标在悬停时触发的操作时间太短暂，会给用户带来很强烈的挫败感，同时在悬停选择下一级菜单时，鼠标移动悬停也同要会造成这样的结果，因此在设计时，对鼠标悬停时的操作要格外留意。通常在悬停操作当中，只适用于只有一个菜单层级的菜单选项，这样用户在操作时更加方便
鼠标点击操作
鼠标点击操作多发生于多级导航进行操作，同时鼠标点击的形式，会给用户正向的反馈，用户点击后明确知道菜单栏不会隐藏，因此在两个操作之间进行选择操作时一定要多加思考

3、筛选

https://www.zcool.com.cn/article/ZMTA1NjAzMg==.html

高级筛选

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，在其中筛选不是很强的一个功能，同时也是系统中十分有必要的。

优点：

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

缺点：

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