首页

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

资深UI设计者

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

交互思考:怎么设计任务流程

资深UI设计者

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

我理解中的交互设计与浅谈对苹果产品的人机交互与其设计哲学的感受

资深UI设计者

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

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

看懂设计(合集):交互设计原则在设计工作中的理解和应用

资深UI设计者

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

设计师如何做产品需求分析:先聊聊两个“价值”

ui设计分享达人

近两年出现了不少“解放设计师双手”的设计工具、AI工具,我们似乎能很快输出N种流程方案、N种布局方案、N种UI风格等等。问题是:这样穷举设计方案的工作方式当真有效吗?
 
请警惕“莫得感情”的出图机器!具备竞争力的设计师必须有自主意识,包括清晰的思维逻辑、果敢的决策力。而体现这一意识和能力的重要环节之一,就是产品生产链路中的首个环节“需求分析”。
 
需求分析并不仅仅是产品经理的事儿。从共同目标的角度来看,互联网企业在岗位划分上区分了产品经理、设计师、开发工程师等,是顺应人的精力时间有限、术业有专攻的自然规律,但是从业务目标来说,每一个岗位都应该对“最佳用户体验和最大化商业利益的平衡”负责,确保这艘船在正确的航道上。所以,如果每个“船员”都具备主人翁意识和需求分析的能力,航程必然更健康稳健。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
对设计师来说,需求分析不仅仅是“这个功能要不要做”的问题,也会影响后续的设计方案决策。每一次的功能增删或调整,都是在改变用户接收产品界面信息的整体效用,那么每一个产品需求的分析都要评估这个功能在整个信息架构、用户体验链路的位置孰轻孰重,也就必然会影响你的设计方案决策。
 
产品需求从哪里来?
 
“有用户反馈说……"
“国庆节快到了,我们策划了一个活动……”
“这个付费转化率很低,达不到预期。我们想……”
……
产品需求的来源多种多样,可能来自产品经理、用户反馈、产品数据、市场风向、技术革新等等。当然,还有来自作为设计师的”我自己“。当我灵光一闪想到一个很炫酷的小创意,情感上免不了自以为是地想”咱们产品这么不做这个“——这个时候我也会用需求分析的框架来质问自己:
“值不值得做(价值评估)”、“应当先做什么(优先级)”、“用户需求要满足到什么程度(核心体验链路)”这三个问题。
 
做需求分析,要想什么?
我们常说产品需求要“洞察用户真正的需求”,要明确“用户价值”。刚入行的时候,我们都会点点头,心想“对哦”。可是什么是“真正的”、什么是“假的”、什么是“价值”?说实话,这些概念都挺虚的。只有当理论落到某个用户场景去分析,我们才能理解其深意。
 
先说点虚的,什么是“价值”?
 
价值是多维度的概念,在不同的学科中都会在“价值”前加一个表范围的定语,比如“劳动价值”、“经济价值”、”社会价值”。随着互联网的发展,我们出现了两个重要的新词“用户价值”和“产品价值”。
 
对于用户而言,他们购买或使用产品或服务是为了满足特定的需求,比如提升效率、获得愉悦、获取经济收益等。那么我们说这个产品具有“用户价值”。
 
所以需求分析首先是“评估价值”,而价值评估则拆分为“用户价值”和“商业价值”两部分。即使当下的需求目标是提升用户规模(拉新、促活、挽留等),并不需要用户掏钱,也是为了实现长远的商业价值。当然,这仅适用于以盈利为目标的企业,非盈利组织还有“社会影响力”的目标,不在本文讨论范围内。
 
下面我们进一步拆解价值评估:“用户价值评估”和“商业价值评估”。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
1、用户价值评估
解决哪些用户在什么场景下的什么问题?
 
这个问题越具体到“人”,就越容易分析。如果需求来自于用户反馈,我们溯源到具体的用户。
 
有一个朋友出去创业,想做一个“找饭搭子”的同城陌生人交友软件。他说,偶尔看到微信朋友圈有人召唤“有没有人一起探店”的动态,去网络社区搜索“饭搭子”、“同城探店”等词汇也能看到不少帖子。而且探店吃饭这件事直接关联消费,商业模式很清晰。他想通过他的产品解决“用户|在探店场景中|无法及时找到饭友”的问题。——“找饭友”是一个行为动作,没有切入到用户的内在需求。
 
定义用户价值不能只停留在“行为上”,可以尝试找到目标用户做定性访谈,进一步深挖问题。比如,我们想进一步把问题下钻,可能会问到这些问题:
 
● 用户为什么要找饭友?不能一个人探店?
● 用户为什么找不到“饭友”?
● ……
 
我们进一步细化“用户-场景-问题”的价值定义:
解决 一线城市年轻用户(尤其是刚迁移新城市的年轻人)|通过约伴探店|解决 同好交友(社群需求)、 “量大”餐馆均摊成本(省钱需求)、获得更愉悦的吃饭氛围 (情绪需求)的问题。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
那有了这个用户价值定义是不是就可以顺利立项呢?——看这个文章的篇幅,你只读了不到一半,当然还有更多需要推敲的问题,请继续阅读。
 
这个需求接触不到真实用户怎么办?
 
有时候我们的需求来源可能是市场风向、技术革新带来的未知变化。我们无法直观地获知“具体的用户是谁”、“TA在什么场景遇到什么问题”。
——这种情况,我们则需要反向思考:这个需求如果做了,获益的用户是谁?满足了他们在什么场景下的需求?如果不做,用户会不会因此弃用我们的产品?可能流失的用户,大盘占比可能是多少?是不是高价值用户?
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
用上面的思路去层层推敲,可能会否定原来的产品策划,可能会挖掘出新的需求,可能会改变需求的优先级。
 
值得一提的是,有时候经过层层推敲,最终得到的决策可能会与市面上的竞品有所雷同。也就是我们经常会问的一个问题:为什么A产品已经做了这件事,B产品还要做同样的事情?
 
有的功能或服务是顺应用户需求而产生的,如果有所缺失,就无法达成用户目标。比如短视频产品都会做点赞和评论,因为视频创作者和消费者分别有“获得认可”的被尊重诉求、”表达意见“的掌控欲等心理需要。而产品则需要这些点赞和评论数据去评判内容热度和丰富个性化标签,以优化内容的推送机制。很多同一赛道的产品会有雷同的功能,虽然常常被调侃为”相互抄“,但是真正做需求分析才能看清“什么是无脑抄”、“什么是必然如此”。
 
2、商业价值评估
用户会为你这个新产品/新功能买单吗?
 
我们找到一个有用的需求点是简单的,因为需求的来源真的太多太多,但是当我们发现,用户不一定会为我们的新产品或新功能买单。
请注意,这里的“买单”不限于用户掏钱,还包括用户决定使用哪个产品的决策成本、用户愿意花费在某个产品的时间和学习成本等。
 
那我们怎么预判用户会不会买单呢?或者,如何提升用户的买单意愿呢?
 
如前面所言,“用户价值”就是通过你的产品获得了预期的效用。效用可以是省了时间、省了钱、省了学习成本、获得情绪价值、获得安全感等。而用户对效用的感知,往往是对比过去经验的解决方案得到的。所以,我们首先要看用户之前是怎么解决这个问题的,然后是用户迁移到新的解决方案(使用新产品或新功能)要付出多少成本。
 
继续用上面“饭搭子”的案例:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
——我们从这个案例可以看到,当我们做成本对比,不能简单地说新旧方案哪个成本更高。用户付出的“成本”是多维度,包括“时间成本”、“经济成本”、“安全风险”等维度。
“饭搭子”这个新方案,对比旧方案,并没有没有压倒性的成本优势。我们虽然可以通过产品设计和运营降低当中的用户成本,比如通过用户历史参与数据(参与饭局次数、饭友评价、真实职业信息等)提供用户靠谱度评分,以降低安全成本。但消除用户成本,需要花费较大的资源投入,我们可以预判这不是一个高ROI的产品项目。
有趣的是,人不是完全理性的。有的场景,只要其中一项成本感知强烈,人就可能选择弃用这个产品。比如“饭搭子”这个案例中,女性用户对安全风险更为敏感,女性用户更不愿意尝试陌生社区。
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
如果我做的是一个非常创新的项目,真的没办法找到“旧方案”做对比呢?或者我无法获知旧方案的用户成本呢?——我们依然建议尽可能地接近用户、收集足够多的信息,以辅助判断。如果依然非常不明朗,可以通过MVP的方案去预估。关于MVP实践的书籍和网络资料很多,大家可以自行搜索。
 
多少用户会买单呢?
✅ 确认了这个需求有用户价值
✅ 确认了有XX需求的用户很可能会买单
——接下来可以开干了吗?
 
不够,还需要
预判收入规模
。因为:收入=客单价x支付用户数=客单价x访问用户数x支付转化率。
这个等式适用于一般的to C产品,不同的产品可能有差异,比如视频用户的使用时长可能与产品收入挂钩,那么用户时长也需要作为一个变量放入到你的产品收入公式中。
当我们要开发一个新的付费互动功能,我们需要做数据预估:这个互动功能放在这个位置,每天的曝光可能是多少?按照此页面同样位置的点击转化和其他功能的付费转化,能否预估这个新功能的收入?这个收入规模值得投入X天的开发人力吗?
如果这个需求的直接目标不是收入,而是获取更大用户规模。我们也同样用“等式”这个思考方式来去做数据估算,只是把“收入”理解为用户量或其他目标数值、而非金钱收入。
当然,通过历史数据估算收入是比较理想的情况。如果身处一个数据体系建设落后的企业中,我无法获取足够的数据支持,怎么办呢?或者,这是一个绝对的革新体验(比如AI辅助内容创作),我无法用过往的数据或经验评估收入规模,怎么办呢?
那么,至少解答“解决哪些用户在什么场景下的什么问题”,来看看这个需求的用户场景覆盖是否足够广;再权衡为了获得这个新产品/新功能带来的新体验,用户要投入哪些成本,以此做需求的排除法——跟创业一样,做产品本身就存在了诸多不确定性,并非所有的决策都能通过公式去论证。
我们只能在有限条件下尽量选择做正确的事
,排除那些大概率不能成功的事。然后尝试MVP,或直接交给市场和时间验证。
此外,如果设计师想作为初创成员加入新产品,还要跑通可持续的盈利模式。这里又是一大块学问,比如了解这个企业做这件事的资源优势等等,本文作者的知识域和本文篇幅都有限,建议感兴趣的朋友翻看商业分析相关书籍。但是新旧方案的用户成本对比、收入公式的拆解,依然是重要且可行的商业价值视角。
 
3、优先级
“优先级”可以分为两层理解,一层是产品需求之间的优先级排序,另一层则是功能范围层的优先级,也就是我们聊需求经常会问的问题:我们明确了这个产品需求当下就要启动,但是当前要做到什么程度呢?
前者,对比不同需求的产品价值大小,再结合开发实现成本和耗时、是否需要追赶某个时间节点等,产品需求之间优先级不难得出。而设计师更多要思考的是后者。
举个例子:开学季马上要到了,产品经理了解到学校有类似“语文朗诵作业打卡”的作业打卡诉求。我们希望抢时间窗去满足这个大规模的家校场景,即“如何最快地满足每日/周重复的信息收集需求”?作业打卡场景可否
延伸
到其他打卡场景,不同的打卡有何共性或差异?
其中“最快”暗含的意思是“
这个功能至少要做到什么程度才能满足最核心的用户需求
”。这个时候,我们拉了一个表格,快速梳理不同用户角色(比如区分“打卡创建者”和“参与打卡者”)的体验链路,再决策
各个体验环节的功能复杂度要到哪里。
从全盘中抽取出体验闭环的最小集
从全盘中抽取出体验闭环的最小集
 
不要忽视商业竞争中的时间差,因为抢先占领市场的产品实际上是提升用户迁移到竞争对手的成本。过去我们提倡匠人精神,不放过每一个细节。而当前激烈的市场竞争环境下,“有的放矢”比“抠细节”更加重要。
 
小结
我们归纳一下需求分析的思路,多问问这些问题:
设计师如何做产品需求分析:先聊聊两个“价值”
 
 
需求分析是比较考验全局观、逻辑性、数理分析和共情能力的。工作中可以通过拉表格、思维导图、白板等工具梳理思路。如果你喜欢写文字,那就用写的方式。总之,切忌接到产品需求就动手出界面方案。


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

 

空间用户体验 101:Vision OS 初体验入门

ui设计分享达人

用户体验(UX)开始进入一个全新的时代, 3D 世界。虚拟世界正在不断与现实世界融合。改变永不停止。

今天,我们一起体验来自苹果的新产品 Vision Pro,感受一下以虚实融合的 3D 空间,全新的空间体验概念,是如何整合到消费者使用场景之中?我们在未来设计中,需要注意哪些的重要事项?带着无限的好奇,戴着 Vision Pro…

 

掌握响应式布局:打造无缝跨平台用户体验,让你的网站在任何设备上都能闪耀

ui设计分享达人

随着科技的不断进步,用户对于在线体验的需求也日益增长在这个数字化时代,我们生活的每一个角落都充满了屏幕一从智能手机到平板电脑,再到大型显示器和电视,这些屏幕的尺寸和分辨率各异,要求我们的设计必须能够灵活适应各种设备和环境。这就是响应式设计的魅力所在,它为我们提供了一个全新的视角,让我们能够创造出更加流畅、统一且个性化的用户体验

深度解析体验设计_从了解到运用

ui设计分享达人

1988年美国认知心理学家唐纳德·诺曼 (Donald Arthur Norman) 在他出版的The Psychology of EverydaThings (1990年再版时书名为The Design of Everyday Things,中文版译为《设计心理学》) 一书中已经提出了设计的概念模式应由“设计模式”转变为“用户模式”,设计要站在用户体验的角度思考问题,用户体验这个概念被正式提出和获得广泛认同。
1995年(唐·诺曼)创造了“用户体验”了这个术语,用来描述他在苹果公司时他的团队从事的广泛活动。

析用户习惯-让你的产品更懂用户

ui设计分享达人

用户习惯的重要性
为了设计出用户易于接受的产品,进行用户调研以了解其习惯变得尤为重要。在设计过程中,产品易用性是一个关键指标,它反映了产品是否易于使用。用户往往会基于他们的“惯性认知”,即其他产品培养出的使用习惯,来判断一款产品的易用性。因此,一个符合用户习惯的产品往往被认为易用性较好,而不符合用户习惯的产品则可能面临用户流失的风险。

深度解析体验设计_从了解到运用

ui设计分享达人

用户体验并不是指一件产品本身是如何工作的,用户体验是指“产品如何与外界发生联系并发挥作用”,也就是人们如何“接触”和“使用”它。当人们询问你的某个产品或服务时,他们问的是使用的体验。它用起来难不难?是不是很容易学会? 使用起来感觉如何?
“用户体验”是全链路的,绝不仅仅止于外观,不是说你把页面设计得好看、icon画得逼真就是一个好的体验。它不仅包含“框架层”和“表现层”,还包含着战略层(我们想得到什么和用户能得到什么) 、范围层(我们做什么和不做什么) 、结构层 (信息怎么归纳更合理)。

日历

链接

个人资料

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

存档