中文字幕一区二区三区在线中文-日本中文字幕 在线观看-欧美日韩国产亚洲综合-性色AV一二三天美传媒

廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
廣州總部電話:020-85564311
20年
互聯(lián)網(wǎng)應(yīng)用服務(wù)商
請(qǐng)輸入搜索關(guān)鍵詞
知識(shí)庫 知識(shí)庫

優(yōu)網(wǎng)知識(shí)庫

探索行業(yè)前沿,共享知識(shí)寶庫

為啥很多B端設(shè)計(jì)中看不中用?這個(gè)案例講得明明白白

發(fā)布日期:2025-07-09 10:21:11 瀏覽次數(shù): 816 來源:體驗(yàn)進(jìn)階
推薦語
B端設(shè)計(jì)為何常淪為"花瓶"?資深交互設(shè)計(jì)師用真實(shí)案例拆解三大常見誤區(qū),教你打造真正實(shí)用的企業(yè)級(jí)產(chǎn)品界面。

核心內(nèi)容:
1. B端設(shè)計(jì)中"中看不中用"的典型表現(xiàn)與根源分析
2. 項(xiàng)目列表設(shè)計(jì)案例的三層深度改造過程
3. 程序員用戶真實(shí)行為習(xí)慣對(duì)設(shè)計(jì)決策的關(guān)鍵影響
小優(yōu) 網(wǎng)站建設(shè)顧問
專業(yè)來源于二十年的積累,用心讓我們做到更好!
我前段时间辅导的一位B端UX设计师就是有这个问题,被我抓着改交互细节。对方一开始不理解,感觉这些细节改完之后并没有很大的加分。因为从视觉上看,改完没多大区别,甚至变得更朴素了。后来听我解释了好久,才恍然大悟。
我今天把ta的案例改一改,拿出来给大家分享一下。

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

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

第2步|分析现有问题

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

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

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

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

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


優(yōu)網(wǎng)科技,優(yōu)秀企業(yè)首選的互聯(lián)網(wǎng)供應(yīng)服務(wù)商

優(yōu)網(wǎng)科技秉承"專業(yè)團(tuán)隊(duì)、品質(zhì)服務(wù)" 的經(jīng)營理念,誠信務(wù)實(shí)的服務(wù)了近萬家客戶,成為眾多世界500強(qiáng)、集團(tuán)和上市公司的長期合作伙伴!

優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設(shè)、網(wǎng)站與各類業(yè)務(wù)系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(shè)(品牌展示型、官方門戶型、營銷商務(wù)型、電子商務(wù)型、信息門戶型、微信小程序定制開發(fā)、移動(dòng)端應(yīng)用(手機(jī)站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應(yīng)用服務(wù)。


我要投稿

姓名

文章鏈接

提交即表示你已閱讀并同意《個(gè)人信息保護(hù)聲明》

專屬顧問 專屬顧問
掃碼咨詢您的優(yōu)網(wǎng)專屬顧問!
專屬顧問
馬上咨詢
掃一掃馬上咨詢
掃一掃馬上咨詢

掃一掃馬上咨詢