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

2024-6-21    资深UI设计者

 

 

做设计的时候,尤其是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、抽屉收纳

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

 

作者:ZZiUP
链接:https://www.zcool.com.cn/article/ZMTE5NDAzNg==.html
来源:站酷
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
 

蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计B端界面设计桌面端界面设计APP界面设计图标定制用户体验设计交互设计UI咨询高端网站设计平面设计,以及相关的软件开发服务,咨询电话:01063334945。

关键词:UI咨询UI设计服务公司软件界面设计公司、界面设计公司、UI设计公司UI交互设计公司数据可视化设计公司用户体验公司高端网站设计公司

银行金融软件UI界面设计能源及监控软件UI界面设计气象行业UI界面设计轨道交通界面设计地理信息系统GIS UI界面设计航天军工软件UI界面设计医疗行业软件UI界面设计教育行业软件UI界面设计企业信息化UI界面设计、软件qt开发软件wpf开发软件vue开发

 

 

 

 

 

分享本文至:

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档