B端交互设计之内容太多怎么办
ZZiUP
北京
/
设计爱好者
/
3年前
/
10353浏览
版权
私信
关注
B端交互设计之内容太多怎么办
ZZiUP
关注
做设计的时候，尤其是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、抽屉收纳
抽屉可以收纳很多内容和操作同时保持页面整洁。
做设计的时候，尤其是B端页面，我们一般按常用的场景去设计，但是内容过多的时候如何在页面中更好的显示呢？
