2024-6-21 资深UI设计者
做设计的时候,尤其是B端页面,我们一般按常用的场景去设计,但是内容过多的时候如何在页面中更好的显示呢?
我们知道B端产品设计场景更复杂,内容更加不可控,再加上电脑屏幕大小适配,页面宽度可自由拉伸,种种因素都要我们更加仔细的考虑页面的各种极限值情况,如何写全面设计规约是难点。相信在设计评审会上开发和测试最常问到的一个问题也是:这里内容过多怎么展示?虽然我们在设计的时候是按照80%的场景去考虑,但是剩下20%的极限场景也需要我们给出设计规则。我根据工作中遇到的内容过多的情况整理了以下这么多,当然解决办法也可能有更好的方式,都欢迎大家补充~~
【目录】
标题因为页面、模块等宽度限制,标题文字超长的极限情况如何显示必然是需要考虑的。
具体设计和写设计规则时要考虑场景、功能、页面布局等等情况再选择处理方式。
1)只有标题
a打点:
注意要根据页面布局结构,给出标题最大宽度,然后标题文字过长打点,hover出tips;优点是保持页面简洁、方便对齐;缺点是无法直观看到全部内容;
b折行:
给出标题最大宽度,然后标题文字过长则折行显示;优点是能够直观显示出全部内容,缺点是内容太多的话视觉不友好:
c先折行再打点:
给出标题最大宽度,然后标题文字过长则折行显示,折超过(比如2行)再打点。适用于大部分场景下最多2行就能显示全,而且文字内容对用户非常重要
2)有标题还有其他说明文字时
当分组标题和说明文字结合时,一般要优先显示标题区域;当到达说明文字最小间距(比如40px)时,标题打点,说明文字显示不下也打点;hover时出tips
3)表单的标题
标题文字较多时一般换行显示,最多显示(比如2)行,更多打点显示,鼠标经过显示tips;换行后算整体高度,距离下面的表单间距保持一致;
4)打点的规则
也就是从哪里开始打点,也是需要根据场景考虑的:
a.尾部打点,也是最常用的
b.中间打点,比如sketch画板的标题展示不全时是从中间开始打点的;
c.特定位置打点,比如标题里人名字过多时,没办法展示全,但是后边的【等120人打标签】又是极其重要的信息,这时候就需要给定人名称一个最大展示的宽度,超过最大宽度就在最后一个人名处打点显示;
文本框需要考虑单行文本/多行文本、激活态/展示态下文字过多如何显示
1)单行文本
a有字数限制
很多场景下,输入框都不是无限输入的,需要产品给出最大范围,这时主要考虑校验报错问题:
在搜索框,往往会设置最大字数,超过则会截断:
b无字数限制
输入状态时,文字过多,光标定位在输入框末尾,可无限输入,输入框头部内容向前隐藏/截断:
展示态时,内容从头部开始显示,输入框末尾打点,或者渐隐,hover时可以选择出不出tips:
输入完成后的一些交互:
还有一种处理方式就是,超过字数限制后直接截断,不让输入。
2)多行文本
a有字数限制
b无字数限制
用按钮,展开收起内容,展开收起可以常驻,也可以设置在鼠标hover时在显示出来。
宽度自适应,文字自动换行,设置最大宽度;设置最大高度,内容过多则出滚动条;还要给出滚动区域,比如标题+内容的区域高度;
tips宽高根据文字内容自适应,设置最大宽度;文字过长时自动换行,设置最大高度,超过最大高一般多于的数据不展示,因为tips都是比较轻的提示;
宽度自适应,文字自动换行。设置容器最大高度,标题+内容数据过多,则产生滚动条
容器宽高自适应,给出最大宽高,大于最高高度时出现滚动条,反馈信息建议精简到一至两行,icon位置固定不变。
弹层宽/高度可以给出定值,也可设置占视窗的百分比,设置占视窗的百分比,为了避免在窗口放大和缩小时弹层无限大或者无限小,一般就要同时设置最大最小宽度定值。比如设置弹层最大高度为页面高度90% ,也可以设置100%,即高度全屏的弹层;高度超过页面高度 90%时,则显示滚动条,最小高300px;宽度在600px到1000px之间自适应。
不管是什么弹层,其实都是承载内容的容器,内容很多时,容器不能随内容无限大就需要设置最大最小值或者百分比。
三、选项过多
当选项较少,空间足够时,可以把选项平铺展示,一方面能让用户直观看到所有选项,另一方面也能减少用户操作步骤;可以设置单选、复选
当选项很多,空间不够时,需要用弹层把选项收起以节省页面空间;
1)单选下拉选择器
当下拉内容还很多,而且需要分类,那么就需要:分组下拉选择器
2)复选下拉选择器
a.个数过多
复选下拉框内选中项【个数】过多时,需要给出下拉框的最大高度,超过最大高度则折行,出滚动条:
b.字数过多
选中项【内容】过多,需要给出选中项文字一个最大宽度,超过打点hover时显示tips
c.弹层规则
【下拉弹层内】根据下拉选项内容自适应撑开,还需要给出弹层的最大高度为(比如290px),内容过多产生滚动条;
d.加入搜索功能
如果下拉弹层内,选项非常多,那么用户应用起来比较费劲,虽然有滚动条能展示全部选项,但是从这么多选项中选出某个选项就比较难了。这时就可以在弹层上加【搜索框】解决,方便用户搜索;也可以在下拉选择框上直接设置检索功能;
四、按钮/标签过多
最常用的解决方法就是用【更多按钮】收起更多不常用的按钮或标签;
比如:
还可以用【左右箭头】的方式进行切换:
预先判断用户的操作,在用户进行特定操作后再出现按钮;渐进式设计是目前比较流行的,也是用户体验比较好的。
1)hover时再出现要操作的按钮:
2)勾选复选框后出现按钮:
如下图,选中选项后,筛选自动收起为一行同时操作区域出现覆盖筛选区,表格随着筛选移动;
取消所有勾选项或是点击关闭按钮,操作区收起恢复成筛选区,筛选恢复成勾选前的状态;
还有teambition的文件库,复选框勾选前:
复选框 勾选后出现行操作按钮,按钮覆盖标题的位置:
3)根据编辑态和展示态进行区分:
展示态下页面比较整洁,不显示多余的按钮:
编辑内容后,出现操作按钮:
输入完成后的展示依然比较整洁:
五、表格内容过多
B端产品的页面常常会用到表格来承载一条条数据/记录,那最好的情况就是表格列数较少,在最常见尺寸的屏幕下就能够全部展示:
但是,往往表格字段比较多,列数多会出滚动条,行数多出分页;
出现滚动条时为了关键的信息能够一直显示,常常会锁定首列或者操作列:
1、左侧列锁定:
锁定后,滚动数据列表内的滚动条左侧列首位置不动,只滚动右侧的数据,向左滚动的数据会被列首区域遮挡;
2、右侧列锁定:
滚动数据列表内的滚动条右侧列尾位置不动,只滚动左的数据,向右滚动的数据会被列尾区域遮挡;
3、横向滚动条
数据宽度超过屏幕宽度,则显示横向滚动条
4、纵向滚动条
数据高度超过屏幕高度,则显示纵向滚动条;滚动范围为表头与分页之间的内容区域;
六、功能过多
1、用导航划分
页面结构层面上信息过多一般会用一级导航,二级导航的形式划分内容
页面内容过多还常常用页签来收纳;
当页面层级较多时需要加面包屑引导用户如何返回,告知用户的位置;面包屑不仅能让用户不迷路,还可以用来快速定位内容,便于用户快捷的选择;
4、抽屉收纳
抽屉可以收纳很多内容和操作同时保持页面整洁。
蓝蓝设计(www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。
关键词:UI咨询、UI设计服务公司、软件界面设计公司、界面设计公司、UI设计公司、UI交互设计公司、数据可视化设计公司、用户体验公司、高端网站设计公司
银行金融软件UI界面设计、能源及监控软件UI界面设计、气象行业UI界面设计、轨道交通界面设计、地理信息系统GIS UI界面设计、航天军工软件UI界面设计、医疗行业软件UI界面设计、教育行业软件UI界面设计、企业信息化UI界面设计、软件qt开发、软件wpf开发、软件vue开发