• 我的订阅
  • 科技

B端设计|卡片设计技巧解析

类别:科技 发布时间:2023-07-21 13:00:00 来源:人人都是产品经理

常见的B端卡片组件,应该怎么设计才可以达成更好的传播效果、传递更清晰、更完善的视觉体验?在本篇文章里,作者就结合具体案例,对B端卡片组件设计进行了技巧拆解,一起来看看吧,或许会对你有所启发。

B端设计的过程中,并不是所有元素抄一抄别人的,从组件库里引用下就完事了,而是要经过具体组织并设计。尤其在一些特殊的组件中,是可以去表现设计水平,提升项目整体视觉质量的,而不是让它们看起来非常的枯燥乏味。

这次,我们的改版主要就围绕在B端常见的卡片组件中,通过3个以前提交过的作业,来分享如何设计B端的卡片。

三个改版案例我们都遵循相同的设计方式和顺序:分析组件包含字段确认组件内部框架完成字段权重表现完成组建视觉样式一、卡片案例1

B端设计|卡片设计技巧解析

在该案例中,卡片作为页面的核心对象,视觉重心不够突出,且内容的权重没有得到有效的表现,订单标识只有一个的情况反复强调对识别卡片没有任何帮助,且卡片占比过大,没必要的浪费页面空间。

所以,重构它的结构时,重点突出标题弱化标签,将卡片拆分成标题、信息、操作三个栏,让信息的呈现更简洁直观。

B端设计|卡片设计技巧解析

然后再具体优化内容和细节,对重要信息突出,固定的标题字段弱化。

B端设计|卡片设计技巧解析

最后,再根据主色的需要填充色彩进去即可。

B端设计|卡片设计技巧解析
B端设计|卡片设计技巧解析

二、卡片案例2

这个案例也是设计得比较有问题的,但是忽略掉全局组件的粗糙,卡片部分的设计也是很多作品案例中的常见问题,要素过多,没有主次,在列表化的展示中,根本没办法很好的识别相关的内容和关注到有效的信息,会被淹没在繁复的字段内容中。

所以,我们用相同的方法作下区分,将内容分为上中下三个栏。

B端设计|卡片设计技巧解析

然后再对字段做权重的划分,虽然字段信息很多,但值得被突出的要素不多,企业名和数据是卡片中最重要的信息,一个用于识别卡片,一个用于查看核心的指标。

B端设计|卡片设计技巧解析

最后,再完成样式的补全即可,只在星级和用户职位上增加色彩。

B端设计|卡片设计技巧解析
B端设计|卡片设计技巧解析

三、卡片案例3

B端设计|卡片设计技巧解析

问题和前面还是一样,内容很零碎,所有要素都强调,于是就没有重点。所以,下面对它们进行改版,这次因为数据项不再是重点,卡片的目标不是用来查看数据而是用于检索进入到下级页面的,所以只分了两栏。

B端设计|卡片设计技巧解析

然后,再对权重进行强调,查看详情是这里面最重要的元素,图片则没有太大的意义仅仅是点缀所以缩小。

B端设计|卡片设计技巧解析

最后,再完成相应色彩的添加和图片的填充,完成最终的视觉效果。

B端设计|卡片设计技巧解析
B端设计|卡片设计技巧解析

这三个改版都用了很简单的修改方式,通过理解卡片的作用、字段信息,对它进行信息分区,然后填入相关的字段并做出权重划分,最后再用颜色为不同的要素加权。

只要掌握这样的设计思路,做绝大多数卡片都不会有阻力,只会纠结于应该用哪套样式更合适。

结尾

因为时间关系只做了很简单的调整,没去做多套大跨度的样式变更,同时套进原图环境没做整体的处理,所以还有很多升级优化的空间,理解这个感觉即可。

作者:酸梅干超人;公众号:超人的电话亭(ID:Superman_Call)

本文由 @超人的电话亭 原创发布于人人都是产品经理,未经许可,禁止转载。

题图来自Unsplash ,基于 CC0 协议返回搜狐,查看更多

责任编辑:

以上内容为资讯信息快照,由td.fyun.cc爬虫进行采集并收录,本站未对信息做任何修改,信息内容不代表本站立场。

快照生成时间:2023-07-21 14:45:13

本站信息快照查询为非营利公共服务,如有侵权请联系我们进行删除。

信息原文地址:

拆解伙伴云在线协作表格
...,除了在表格的表头配置字段外,伙伴云还支持通过表单设计的方式来组织数据表格的字段,这个界面和我们之前拆解过的钉钉 OA 很相似。这种方式所见即所得,和用户填写的表单样式是一样
2023-06-06 13:00:00
组件详解|气泡卡片Popover 和 文字气泡Tooltips,用法有什么区别?
...基础上,合理调整组件的使用方式和样式。组件的规范对设计师来说并不应该是限制或约束,而是一种能够帮助我们快速实现产品设计一致性,保证基础体验的快速方式。专栏作家元尧,微信公众号
2023-06-27 12:00:00
会员卡片,应该如何设计?
...一组件也被广泛应用。那么,你知道会员卡片这一组件在设计时应当遵循哪些策略吗?一起来看看本文的分析和总结吧。一、组件介绍会员卡片是少数几种概念和样式都来源于现实,并且设计上相差
2023-06-25 19:00:00
友商慕了!HarmonyOS 3最新升级进展海报出炉,5年前老旗舰赫然在列
...竟拥有哪些实用功能,下面我们就来一探究竟。全新交互设计,桌面玩法升级在HarmonyOS 2中,可大可小、可藏可显万能卡片成为最受消费者欢迎的功能之一
2023-04-27 17:00:00
用AI做数据分析能否代替运营的工作?用了段时间钉钉AI的亲身感受
...钉AI 的多个方面进行了深入的探索和评估。从直观的界面设计到实用的功能特性,从简洁的操作流程到令人满意的用户互动,每一步都给我留下了深刻的印象,本文我将逐一分享我的体验;无论
2024-04-26 15:00:00
微软推出全新锁屏卡片功能
...日消息,微软目前向Windows11/10全体用户推出了全新的锁屏卡片功能,该功能最早出现在Win11的Build23612版本中
2024-06-12 00:10:00
华为WATCH 4终于升级HarmonyOS 4了,好用高效更智慧!
...,HarmonyOS 4也让华为WATCH 4系列更好看、更精致。全新的XU设计,主题颜色丰富多彩,视觉感受更精彩;杂志化设计让屏幕的显示效果更具时尚气息,数据查看更轻松;卡
2023-09-14 15:41:00
博奥智源,重点项目管理系统开发功能及系统架构分析
...项选择功能等。1.1.8.11系统工作流管理提供图形化的流程设计和建模工具,实现通过图形化的拖拽机制来构造复杂的工作流流程和定义业务过程。1.1.8.12系统用户信息用户信息
2023-02-01 10:00:00
本文转自:廊坊日报(上接第一版)在原有就医购药等基本功能的基础上,第三代社保卡增加社保服务、交通出行、公园年票、金融服务等功能。目前试点换发工作在西城区、石景山区、怀柔区稳步进行
2024-02-12 10:38:00
更多关于科技的资讯:
厦门网讯(厦门日报记者 林露虹)记者昨日从中国移动咪咕公司获悉,该公司打造的“鼓浪屿AI伴游”服务已正式上线。市民和游客只需打开“鼓浪屿元宇宙”微信小程序
2025-10-02 08:57:00
“中国脑机谷”落户新奥新智感知产业园 政企研协同构建脑机接口产业新生态
河北新闻网讯(张新)9月26日,脑机接口产业联盟首届“脑机接口50人论坛”暨天津脑机接口产业创新发展推进会举办。会上,由新奥集团旗下的天津新智感知科技有限公司
2025-10-01 08:40:00
国网三明供电公司:守护灯火庆华诞 主动运维显担当
国网三明供电公司检修人员及时更换损坏器件并调整传动系统并完成设备修复及全套试验。(纪长添 摄)东南网10月1日讯 9月28日
2025-10-01 09:19:00
9月26日,由华东政法大学与上海星瀚律师事务所联合主办的第三届“星瀚杯”走进企业的法律课公益大赛正式启动。腾讯云作为大赛的技术支持单位
2025-10-01 09:56:00
平望实小承办吴江区骨干教师(数学)讲学团活动
为进一步发挥吴江区骨干教师的示范和辐射作用,推进课堂教学改革,有效提升教师教学业务能力。2025年9月24日,由苏州市吴江区教师发展中心主办的2025年吴江区骨干教师(数学)讲学团活动在平望实验小学举行
2025-10-01 09:58:00
AI技术让抗战文物“活起来”,人民日报数字传播联合百度推抗战文物智能体
9月30日,由人民日报数字传播与中国国家博物馆、中国人民大学、百度文心大模型、百度百科联合出品的《80年,80件》智能体和3D文物词条正式上线
2025-10-01 10:00:00
新时达2025工博会圆满落幕 | STEP 2.0战略引领智能制造新篇章
2025年9月23日至27日,第二十五届中国国际工业博览会在国家会展中心(上海)盛大举行。新时达以"智拓无界 共创未来"为主题
2025-10-01 10:00:00
从课堂到产线,河北工大学子开展智慧物流与“地狼”系统自动化技术实训
河北新闻网讯(胡广涛)组装调试机器人、体验智慧仓储系统、探索自动化技术前沿……近日,河北工业大学人工智能与数据科学学院2022级自动化专业全体学生在廊坊分校
2025-10-01 11:12:00
中国青年报客户端讯(中青报·中青网记者 夏瑾)9月30日,由湖州师范学院音乐学院、湖州市音声数据挖掘与智能服务重点实验室主办的“1617系列明代魏氏乐虚拟乐器音源”全球发布会在浙江省杭州市举办
2025-10-01 14:11:00
“智慧武当”给游客带来数字文旅新体验
十堰广电讯(通讯员 汪伟 周琼 耿宇)“一部手机游武当”预约购票、AI导游、《入境武当》VR大空间、问道武当数字客厅……国庆假日
2025-10-01 18:35:00
津云文旅电商版块上线 首发“笑漾海河”优选线路 扫码阅读手机版
10月1日,天津鹏欣水游城14周年庆暨津云新媒体“笑漾海河”文旅电商线路首发仪式成功举办。近年来,随着“文旅+电商”模式的快速发展
2025-10-01 18:55:00
陕西数字贸易闪耀第四届数贸会 数字贸易合作成果丰硕
9月29日,为期5天的第四届全球数字贸易博览会(以下简称“数贸会”)在浙江杭州大会展中心圆满落下帷幕。此次盛会,陕西代表团表现亮眼
2025-10-01 18:58:00
高德扫街榜国庆提醒:全国十大吃货友好高铁站看这里
2025年国庆节与中秋节叠加,全国铁路预计发送旅客2.19亿人次。赶高铁如何吃饱吃好?今天,高德扫街榜发布“十大吃货友好高铁站”
2025-10-01 20:19:00
能效提升15%,山东港口日照港顺岸式全自动化码头再迎新突破
9月29日,在山东港口日照港全自动化集装箱码头,随着A23自动化轨道吊精准将集装箱吊起、转运,标志着日照港研发的新一代双悬臂轻量化轨道吊投产试运行
2025-10-01 23:08:00
健康之旅,“媒”好同行!爱康集团烟威区域媒体开放日圆满结束
为构建与公众的沟通桥梁,让烟威人民更好地了解爱康的医疗品质及优质体检服务,9月25日下午爱康集团烟威区域媒体开放日活动于爱康莱山区分院成功举办
2025-10-01 20:51:00