做竞品分析时，我们往往会抱怨我们身为设计师，为什么要知道行业趋势？为什么要了解商业模式？认为那是产品经理的工作，其实不然，当我们踏入一个行业，或者在某个行业扎根做大做强，我们是需要一些专业的行业知识的，例如同样是设计一个UGC平台，金融行业和社交行业就会有很多不一样的地方，包括用户习惯和商业模式等。

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端页面，我们一般按常用的场景去设计，但是内容过多的时候如何在页面中更好的显示呢？

任务，到底是怎么来的？是原本就存在的？还是人为设计而来的？

在之前文章的基础上加入了一些图示，可视化自己的理解

写文章来整理自己的思路，再谈谈自己对苹果产品的感受，欢迎一起讨论啊

本篇旨在简明扼要地向大家介绍交互设计中的一些原则，帮助大家理解和真正在工作中应用

随着ChatGPT在23年初的火热，AI热潮已经开始席卷各行各业，人们对于AI的热情就像是看着第一款iPhone发布或者蒸汽机的发明，期待着它带来一场信息时代的工业革命。同时，AI替代60%岗位的口号也足以让相关从业者感到前所未有的压力与焦虑。在各大设计网站上，关于AI的内容肉眼可见的占据了越来越多的比重，包括AI在设计流程中的应用、各种AI最新工具等介绍、AI的使用技巧、AI生成的海报/插画等作品……一瞬间，似乎全民都投入到了AI的浪潮之中。
反过头来看，对于用户体验设计而言，由于产品的底层逻辑被AI改写，产品的生态、单个产品的形态、使用方式等都将发生翻天覆地的变化。连带着的，由于生产工具的变革，产品的设计、开发流程也将随之发生变化，进一步提高效率，对于从业人员的能力要求也在实时更新。
对于这样一种浪潮，埋头当个鸵鸟或者嗤之以鼻是没有意义的，我们需要看到、认识、拥抱它。所以有人笑称：打不过就加入。同时，对于各种所谓干掉各个岗位的宣传，也吸引着、推动着我们去了解将被什么干掉以及怎么被干掉。
从另一方面讲，只有在技术变革的时候，弯道超车才有可能。如果只是沿用之前的经验与技术，那么成熟的企业就会有先发优势。但是当面对新的技术变革时，大家被拉回到同一起跑线上，这个时候，就看谁能够找到正确的方向，率先突围。
所以，不管是被动也好，还是主动也好，面对着新一轮的技术变革，也希望从AI能力本身、所带来的变化、以后的发展等方面全面了解一下这个新的时代宠儿。