B端交互设计之内容太多怎么办

      我们知道B端产品设计场景更复杂，内容更加不可控，再加上电脑屏幕大小适配，页面宽度可自由拉伸，种种因素都要我们更加仔细的考虑页面的各种极限值情况，如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是：这里内容过多怎么展示？虽然我们在设计的时候是按照80%的场景去考虑，但是剩下20%的极限场景也需要我们给出设计规则。我根据工作中遇到的内容过多的情况整理了以下这么多，当然解决办法也可能有更好的方式，都欢迎大家补充～～

【目录】

一、文字过多

1、标题文字过多

       标题因为页面、模块等宽度限制，标题文字超长的极限情况如何显示必然是需要考虑的。

       具体设计和写设计规则时要考虑场景、功能、页面布局等等情况再选择处理方式。

1)只有标题

   a打点:

   注意要根据页面布局结构，给出标题最大宽度，然后标题文字过长打点，hover出tips；优点是保持页面简洁、方便对齐；缺点是无法直观看到全部内容;

   b折行:

   给出标题最大宽度，然后标题文字过长则折行显示；优点是能够直观显示出全部内容，缺点是内容太多的话视觉不友好：

   c先折行再打点:

   给出标题最大宽度，然后标题文字过长则折行显示，折超过(比如2行)再打点。适用于大部分场景下最多2行就能显示全，而且文字内容对用户非常重要

2）有标题还有其他说明文字时

     当分组标题和说明文字结合时，一般要优先显示标题区域；当到达说明文字最小间距（比如40px）时，标题打点，说明文字显示不下也打点；hover时出tips

3）表单的标题

     标题文字较多时一般换行显示，最多显示（比如2）行，更多打点显示，鼠标经过显示tips；换行后算整体高度，距离下面的表单间距保持一致；

4）打点的规则

    也就是从哪里开始打点，也是需要根据场景考虑的：

   a.尾部打点，也是最常用的

   b.中间打点，比如sketch画板的标题展示不全时是从中间开始打点的；

  c.特定位置打点，比如标题里人名字过多时，没办法展示全，但是后边的【等120人打标签】又是极其重要的信息，这时候就需要给定人名称一个最大展示的宽度，超过最大宽度就在最后一个人名处打点显示；

2.文本框内文字过多

   文本框需要考虑单行文本/多行文本、激活态/展示态下文字过多如何显示

1）单行文本

   a有字数限制

   很多场景下，输入框都不是无限输入的，需要产品给出最大范围，这时主要考虑校验报错问题:

   在搜索框，往往会设置最大字数，超过则会截断:

   b无字数限制

   输入状态时，文字过多，光标定位在输入框末尾，可无限输入，输入框头部内容向前隐藏/截断：

   展示态时，内容从头部开始显示，输入框末尾打点，或者渐隐，hover时可以选择出不出tips：

   输入完成后的一些交互：

  还有一种处理方式就是，超过字数限制后直接截断，不让输入。

2）多行文本

   a有字数限制

   b无字数限制

3.介绍/说明文字过多

用按钮，展开收起内容，展开收起可以常驻，也可以设置在鼠标hover时在显示出来。

二、弹层内容过多

1、确认对话框

宽度自适应，文字自动换行，设置最大宽度；设置最大高度，内容过多则出滚动条；还要给出滚动区域，比如标题+内容的区域高度；

2、tips提示

tips宽高根据文字内容自适应，设置最大宽度；文字过长时自动换行，设置最大高度，超过最大高一般多于的数据不展示，因为tips都是比较轻的提示；

3、警告提示

宽度自适应，文字自动换行。设置容器最大高度，标题+内容数据过多，则产生滚动条

4、全局提示

容器宽高自适应，给出最大宽高，大于最高高度时出现滚动条，反馈信息建议精简到一至两行，icon位置固定不变。

5、模式弹层

弹层宽/高度可以给出定值，也可设置占视窗的百分比，设置占视窗的百分比，为了避免在窗口放大和缩小时弹层无限大或者无限小，一般就要同时设置最大最小宽度定值。比如设置弹层最大高度为页面高度90% ，也可以设置100%，即高度全屏的弹层；高度超过页面高度 90%时,则显示滚动条，最小高300px;宽度在600px到1000px之间自适应。

不管是什么弹层，其实都是承载内容的容器，内容很多时，容器不能随内容无限大就需要设置最大最小值或者百分比。

三、选项过多

1、选项较少

当选项较少，空间足够时，可以把选项平铺展示，一方面能让用户直观看到所有选项，另一方面也能减少用户操作步骤；可以设置单选、复选

2、选项较多

当选项很多，空间不够时，需要用弹层把选项收起以节省页面空间；

1）单选下拉选择器

当下拉内容还很多，而且需要分类，那么就需要：分组下拉选择器

2）复选下拉选择器

    a.个数过多

    复选下拉框内选中项【个数】过多时，需要给出下拉框的最大高度，超过最大高度则折行，出滚动条：

    b.字数过多

    选中项【内容】过多，需要给出选中项文字一个最大宽度，超过打点hover时显示tips

   c.弹层规则

  【下拉弹层内】根据下拉选项内容自适应撑开，还需要给出弹层的最大高度为（比如290px），内容过多产生滚动条；

    d.加入搜索功能

    如果下拉弹层内，选项非常多，那么用户应用起来比较费劲，虽然有滚动条能展示全部选项，但是从这么多选项中选出某个选项就比较难了。这时就可以在弹层上加【搜索框】解决，方便用户搜索；也可以在下拉选择框上直接设置检索功能；

四、按钮/标签过多

1、用按钮收起

最常用的解决方法就是用【更多按钮】收起更多不常用的按钮或标签；

比如：

2、箭头切换，轮播

还可以用【左右箭头】的方式进行切换：

3、渐进式设计

预先判断用户的操作，在用户进行特定操作后再出现按钮；渐进式设计是目前比较流行的，也是用户体验比较好的。

1）hover时再出现要操作的按钮：

2）勾选复选框后出现按钮：

如下图，选中选项后，筛选自动收起为一行同时操作区域出现覆盖筛选区，表格随着筛选移动；
取消所有勾选项或是点击关闭按钮，操作区收起恢复成筛选区，筛选恢复成勾选前的状态；

还有teambition的文件库，复选框勾选前：

复选框 勾选后出现行操作按钮，按钮覆盖标题的位置：

3）根据编辑态和展示态进行区分：

  展示态下页面比较整洁，不显示多余的按钮：

编辑内容后，出现操作按钮：

输入完成后的展示依然比较整洁：

五、表格内容过多

B端产品的页面常常会用到表格来承载一条条数据/记录，那最好的情况就是表格列数较少，在最常见尺寸的屏幕下就能够全部展示：

但是，往往表格字段比较多，列数多会出滚动条，行数多出分页；

出现滚动条时为了关键的信息能够一直显示，常常会锁定首列或者操作列：

1、左侧列锁定:

锁定后，滚动数据列表内的滚动条左侧列首位置不动，只滚动右侧的数据，向左滚动的数据会被列首区域遮挡；

2、右侧列锁定:

滚动数据列表内的滚动条右侧列尾位置不动，只滚动左的数据，向右滚动的数据会被列尾区域遮挡；

3、横向滚动条

数据宽度超过屏幕宽度，则显示横向滚动条

4、纵向滚动条

数据高度超过屏幕高度，则显示纵向滚动条；滚动范围为表头与分页之间的内容区域；

六、功能过多

1、用导航划分

页面结构层面上信息过多一般会用一级导航，二级导航的形式划分内容

2、切换页签收纳

页面内容过多还常常用页签来收纳；

3、加入面包屑

当页面层级较多时需要加面包屑引导用户如何返回，告知用户的位置；面包屑不仅能让用户不迷路，还可以用来快速定位内容，便于用户快捷的选择；

4、抽屉收纳

抽屉可以收纳很多内容和操作同时保持页面整洁。