目前的设计趋势流行浅色导航，有几个产品的WEB端进行了一系列的大改，YouTube、Twitch、Twitter都进行了重新设计，他们不约而同地将块面去除，去掉多余的的灰色，通过留白和空间将页面拉开。这否是是下一个WEB端所要追寻的趋势，我还不得而知，但是对于导航层级多的侧边栏导航，我仍然建议使用深色背景区分导航栏。

文章插图

文章插图
有一个细节，在页面背景有一个以登录的用户名形成的一个背景水印，在B端的页面中，对信息的保密程度要求很高，这里是为了防止公司核心数据资料泄露，在截图的时候会有水印的存在，增强了信息的保密级别，这是一个很好的设计洞察点。

文章插图
2. 表格1）表格样式
表格作为组织整理数据的手段，可以有效地向用户展示数据信息，是B端产品中出现最高频的模块之一。
用户主要通过表格浏览获取信息、对数据进行筛选、排序以及相关业务处理等更多复杂操作、对比数据的差异与变化（关联和区别）。好的表格信息展示设计，应当是能够辅助用户高效便捷地实现以上场景中的诉求。
Arco和Ant的表格设计样式与市面上多数产品都类似，采用表格列无分割线条、表头与内容左对齐、数字右对齐的方式。

文章插图
合格的表格设计要定义合理的表格行高，在具体设定表格行高时，由于表格中以文字信息为主，我认为可以参考文字排版的常用做法，将整个表格的行高分成文字行高、文字与分割线间距离，即上下间距两部分来考虑。
文字行高可以设定为字号的1.2~1.8倍，文字与分割线间距离可以设定为字号的1~1.5倍。

文章插图
2）信息展示
表格行高决定屏幕内能呈现的行数，即用户在一屏内能获取信息的数量，主要影响用户纵向对比数据的效率。
在B端用户使用场景中，数据量极大的表格的展示问题是体验优劣的关键因素。对于1920*1020（包含该分辨率）以上的大屏用户，对于一屏显示行数的感知不强，但对于1366×768、1280*720等这类小屏，显示行数有限，用户进行纵向数据对比的效率就会有所降低。在设计前，应当充分了解目标用户的行为诉求，了解目标用户设备屏幕分辨率的占比分布情况，有针对性的设置行高。
B端产品的特点之一是通用化，覆盖用户角色多样。然而用户个体对于表格信息呈现密度的诉求经常是有所差异的。产品为了让不同用户都能获得较好的体验，可以考虑把表格疏密度的设置开放给用户，建议不是完全开放给用户去调整尺寸，而是给出一定阶梯度的快速选项，例如舒适、标准、紧凑三种高度来满足用户需求。
Ant的表格功能很齐全，很多功能都是B端产品的痛点，例如表格可以通过调整单元格行高来调整密度，紧凑模式下可以显示更多的数据。

文章插图
3）操作路径
作为一个查询表格，我不是很理解为什么Arco将查询条件放置在表格右上角这么隐秘的位置，而将明显的左上角放一个添加按钮，如果存在多个查询条件是不是要从右往左放置呢？这里我不是很理解，大家也可以说一下自己的想法，相互探讨一下。

文章插图

文章插图
Ant的表格使用路径符合F型视觉动线布局，在B端的市场中这种表格的设计方式已经符合用户的操作习惯了。

文章插图
在2006年时候，尼尔森诺曼发表了一篇人们如何扫描和阅读网站习惯的分享，他们通过研究发现，用户倾向于一种F模式去查看网站。F模式，能很好地帮我们创建好的视觉层次结构设计，因为这是人们可以轻松扫描设计一种布局，它能让大多数用户感到舒适，因为我们用户一直从上到到下，从左到右阅读。
在设计之前，我们先要去确定哪些内容最重要，明确信息的优先级，只有清楚知道你希望用户看到什么，才能将它们放在用户视线热点中。
个人认为在表格设计的完整度和设计的合理性方面来看，阿里的Ant系统做得比字节的Arco更好。

稿源：(人人都是产品经理)

【傻大方】网址：/c/1122a13W2021.html

标题：B端设计师必看：聊聊B端两大设计系统典型页面( 二 )