广州总部电话:020-85564311
广州总部电话:020-85564311
20年
互联网应用服务商
请输入搜索关键词
知识库 知识库

优网知识库

探索行业前沿,共享知识宝库

为啥很多B端设计中看不中用?这个案例讲得明明白白

发布日期:2025-07-09 10:21:11 浏览次数: 820 来源:体验进阶
推荐语
B端设计为何常沦为"花瓶"?资深交互设计师用真实案例拆解三大常见误区,教你打造真正实用的企业级产品界面。

核心内容:
1. B端设计中"中看不中用"的典型表现与根源分析
2. 项目列表设计案例的三层深度改造过程
3. 程序员用户真实行为习惯对设计决策的关键影响
小优 网站建设顾问
专业来源于二十年的积累,用心让我们做到更好!
我前段时间辅导的一位B端UX设计师就是有这个问题,被我抓着改交互细节。对方一开始不理解,感觉这些细节改完之后并没有很大的加分。因为从视觉上看,改完没多大区别,甚至变得更朴素了。后来听我解释了好久,才恍然大悟。
我今天把ta的案例改一改,拿出来给大家分享一下。

改版前
这是一个PC端研发工具的项目列表,为了展示清晰,我就把卡片纵向排列展示了。
你能看出问题来吗?
首先,所有的图文内容都是一模一样,一眼就是复制粘贴的,没有真实感。
这不光是态度问题,做设计不放真实内容的话,你看不出好坏!

第1步|加上真实信息
加上后,很多现实问题就暴露出来了。你看看,能察觉问题在哪吗?

第2步|分析现有问题

问题1:没有考虑信息缺失的情况
首先,以我在国内公司使用B端产品的经验来看,绝大部分人不会主动上传头像,除非领导硬性要求。而这种研发团队,很少搞形式主义,所以大部分用户都没有头像。同样,你又不能要求他们必须上传头像才能创建账号,于是提供默认头像。结果,整个项目列表都是默认头像……
其次,研发工具的用户都是些程序员,平时工作忙,做事讲究效率。
他们创建项目,很可能懒得找一张封面图来上传。但你又不能要求他们必须得上传封面图才能创建项目,那样太傻了。于是只好提供默认背景图。结果,很可能整个项目列表全是默认封面图……
用户不但懒得上传封面图,还可能懒得写说明和标签,于是就难免出现下图这种情况——标题上下都空一大片,不好看也不实用。
问题2:视觉中心混乱
就算信息不缺失,整张卡片也不方便阅读。下图感受下,发现问题了吗?
最抢眼的封面,反而是最没用的信息!
第二抢眼的,有标题左侧的「私有」、右上角的「进行中」,和左下角的头像。这三个东西位置相差“十万八千里”,用户眼睛该从哪里看起?
其实这个那张卡片最最重要的,应该是标题。但是卡片上有太多东西比标题更抢眼了。
也就是说,用户可能得切换五次视线焦点,才能看到标题!
问题3:时间信息不太好理解
之前我发了一篇文章讨论相对时间和绝对时间,发现绝大多数大厂设计体系和看文章的读者,都认为相对时间更好理解:微信被集体控诉,聊天记录该用相对时间还是绝对时间?
如果说开发工具为了严谨选择显示绝对时间,好吧,这个理由勉强接受了。
但是今年的时间,没必要显示年份吧?一般说几月几日不加年份,大家都会默认是今年。
还有几点几分,其实也不用展示。如果好几天,甚至几周才创建1个项目,那么把几点几分展示出来就没什么意义了。实在担心要看时间,可以加个悬停气泡。
问题4:标题空间不够
标题是整张卡片最重要的信息,现在却被加载一个标签和一个图标之间,这待遇有点差呀……虽然不算大问题,但还是希望能多显示几个字是不?
很多设计师的交互能力止步不前,主要还是因为不知道好坏,找不到问题——其实说白了,还是很多底层逻辑没搞清楚。

第3步|梳理展示信息
封面建议去掉。Figma都不要求设计师创建项目时添加封面呢,一个研发工具,真没必要整这种“形式主义”。
现在卡片上最抢眼的是:「进行中」标签 > 头像 > 「私有」标签。
进行中确实是最重要的标签,但放在右上角太就“偏远”了。
不如弱化一点,放在标题附近。这样可以方便用户在读标题时顺便看到,又不至于太抢眼。
「私有」标签怎么办呢?这个东西重要性弱一些,可以放到底部角落:
但这样就显得很拥挤,而且创建人的头像依旧抢眼(如果换成纯色的默认头像更抢眼),怎么办?
干脆去掉头像,并把时间信息简化:
现在整张卡片变成这样了:

第4步|细节调整
标签时有时无的,不好放在顶部。不然像下图这样,标题不齐就太难看了。
只要把标签移到下方,标题就能对齐了:
还可以把「…」图标挪到右下角,给标题更多空间:
为什么「…」图标要改成横向的呢?主要是因为这一排的视觉方向都是横的,如果只有「…」图标是纵向,看起来就没那么和谐:

第5步|效果确认
放入真实信息排列起来,发现一旦没有描述,就显得很空。
可以考虑只保留一行描述:
或者干脆去掉描述:
这个,就需要了解用户实际使用情况了。如果发现用户大多没什么动力写描述,那就干脆别展示描述了。
如果发现连标签都没几个人写的话,也可以考虑去掉标签。但这样信息量就太少了,没必要做卡片样式,不如做成表格。
或者,也可以考虑增加一些有用的信息,让卡片信息更丰富一些:

总结一下
前后对比:
从视觉上看,改版前的卡片确实更亮眼,毕竟有那么多图片和色彩。
但这样的设计只能唬住外行,内行和用户本人都知道那是“中看不中用”。
标准设计流程,都是先定交互,再定视觉。也就是说,要先确保方案上的信息布局足够清晰易懂,再考虑视觉风格的问题。
但是有些B端设计师因为思维转不过来,总是下意识地先考虑审美,再考虑交互。
而考虑交互的时候呢,又不懂底层逻辑。不知道用户最想看的是什么、实际第一眼看的是什么,以及如何让用户一眼看到他们最想看的东西……


优网科技,优秀企业首选的互联网供应服务商

优网科技秉承"专业团队、品质服务" 的经营理念,诚信务实的服务了近万家客户,成为众多世界500强、集团和上市公司的长期合作伙伴!

优网科技成立于2001年,擅长网站建设、网站与各类业务系统深度整合,致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设(品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用(手机站APP开发)、微信定制开发(微信官网、微信商城、企业微信)等一系列互联网应用服务。


我要投稿

姓名

文章链接

提交即表示你已阅读并同意《个人信息保护声明》

专属顾问 专属顾问
扫码咨询您的优网专属顾问!
专属顾问
马上咨询
联系专属顾问
联系专属顾问
联系专属顾问
扫一扫马上咨询
扫一扫马上咨询

扫一扫马上咨询

和我们在线交谈!