很可惜 T 。T 您现在还不是作者身份，不能自主发稿哦～
如有投稿需求，请把文章发送到邮箱tougao@appcpx.com，一经录用会有专人和您联系
咨询如何成为春羽作者请联系：鸟哥笔记小羽毛（ngbjxym）
卡片是移动端产品常见的设计形式，广泛用在各类产品和场景中。卡片自带分割属性，让它成为了页面布局中的利器。但是卡片也并不是万能的，分割带来的间距影响了阅读场景的沉浸式体验，同时也会增加整个页面的长度，因此需要根据场景和内容确定展现形式。
在移动端产品中，承载着图片、文字等内容的矩形区块，就是我们所说的卡片。根据展现形式，卡片基本可以分为3大类。
边距卡片在页面设计中应用更加广泛，通常采用带圆角形式，利用阴影以及四周的边距形成页面留白，从而产生更加强烈的“存在感”，同时增加了页面的层次感，让页面更加灵动。
悬浮卡片主要用于功能集合或者页面内容扩展场景，目的是提升页面的操作效率。例如微信聊天界面下拉出现的小程序卡片，高德地图首页卡片,或者iOS系统随时可以调用的系统控制卡片和消息卡片。
通栏卡片只保留上下边距，通常不会增加阴影，边框线等样式。主要用于页面内容分组，提升内容的可识别性。
卡片可以通过边框线、阴影、背景色等特征形成独立内容结构，通过边距与其他内容区分，从而形成其独有的设计优势。主要包括以下几个方面：
相较于无边框设计或者分割线布局，卡片可以进行信息归纳组合，划分出更加清晰的组织结构，实现复杂内容的简化处理。
例如“我的淘宝”页面，在老版本中采用了通栏卡片，整个页面信息结构已经比较清晰了。但是随着页面内容的增多，在新版本中页面内容全部采用了边距卡片的形式，并且融合了横版卡片和竖版卡片两种方式，增强了内容的独立性，层级更加清晰。
同时边距卡片形式有利于场景的拓展，例如“我的淘宝”频道在618期间，插入了618活动楼层，在视觉表现上毫无违和感。
卡片设计最大的优势就是通过边界塑造出来的整体性。一方面可以让用户感知到内容的归属层级，另一方面，可以通过卡片背景色，加强用户对内容的感知。
例如网易严选、天猫会员店的开卡福利，都采用了更加鲜亮的背景色，相对其他模块更加突出，能够快速抓住用户注意力。
卡片作为一个独立的信息集合容器，具有XYZ三个方向的内容扩展和叠加特性，可以提高空间的利用率。
由于移动端页面设计主要为纵向的信息流，通常卡片主要为X方向的交互操作，例如左右滑动等。Y方向主要为“点击”操作实现卡片内容的扩展，避免与纵向的滑动手势操作产生冲突。
Z轴方向主要是内容叠加展示，用户只能看到一个卡片内容，完成一个卡片操作后，才能查看下方的卡片内容。
例如知乎中“回答问题”中的卡片设计。用户除了按钮操作，可以左右滑动快速忽略卡片内容。交互方式简单有趣，可以带给用户比较强烈的挑选快感，不过卡片内容挑选是一次性的，如果用户选择忽略或者放弃卡片后，内容是无法再次查看的。
因此理论上讲，Z轴的交互形式可以叠加无数的的卡片内容，扩展性更强。但是不可逆的操作方式，需要考虑到对产品目标的影响。
卡片作为独立的模块，可以融入各种交互方式，为用户提供更加快捷的操作。
例如今日头条中的信息卡片，集合了转发、评论、点赞等操作功能。此外卡片本身也可以增加交互操作，例如微信中卡片左滑和长按，可以激活级联操作选项。
卡片内容也支持多种展现方式，能够主动为用户呈现更多的信息，引导用户关注。例如商品横向和纵向的自动滚动、放大展示等。
App Store 中的“今日”频道中的卡片，点击可以直接显示APP详细信息，相比页面跳转方式，给用户带来了更加自然的交互体验。
为了保持整个产品界面一致性，在各个页面中都需要遵循统一的设计规范。我们看到京东最新版本中，在“我的”频道页面，卡片设计采用了通栏圆角式设计，与搜索结果页样式保持一致。
卡片设计会影响到页面整体的信息层级以及视觉动线变化。
例如通过支付宝首页改版前后对比，我们可以看到改版后，金刚区去除了白色背景，提升了icon在整个页面中的视觉层级，从而强化了用户对新增功能的感知。
原来的通栏卡片变成了边距卡片，整个页面层级更加清晰，用户对界面内容定位更加准确，减轻了用户在浏览过程中的认知负担。
在实际设计工作中，我们如何判断是否要采用卡片形式，以及采用何种卡片形式呢？
除了遵守系统设计规范外，最基本的原则就是“形式跟随内容”。
卡片受到形式、尺寸所限，通常只是作为页面组成元素，承载功能入口的作用。在不同的场景中，卡片的表现形式是不一样的，需要依据内容和目标定位来确定表现形式。
我们可以大概总结下主要的形式：
列表式卡片列表式卡片通常用在设置页面或者“我的”页面，主要采用通栏卡片形式。内容大多采用“icon+功能名称“的列表方式。主要目的是引导用户定位功能入口，辅助展示内容状态即可，不需要承载更多的信息。
九宫格卡片九宫格卡片同样采用“icon+功能名称”的形式，通常用在功能数量不多的场景，相比较列表式卡片，信息可读性更强，更容易识别。
该类型卡片并不多见，高度尺寸较小，主要以标题来吸引用户。为了增强用户的感知，通常会出现在页面中识别性较高的位置。
例如喜马拉雅“私人FM”的入口卡片。为什么不采用更有吸引力的展现方式呢？我认为主要是因为内容所决定的。
私人FM栏目中内容并不固定，通常是自媒体的内容集合，类似于榜单，无法保证每条内容对用户的吸引力。所以仅仅作为入口推广给用户。而喜马拉雅中的音频更多的是主题性的内容合集。
例如下方的“猜你喜欢”中内容，图片和标题都可以给用户明确的内容引导，所以更容易吸引用户，因此需要优先保证该栏目内容的露出。
那么为什么不直接放在金刚区呢？可能是因为金刚区内容有限，也可能是激发内容生产者的积极性，采用了引导性更强的展现形式。
同样近期支付宝“财富”频道中上线了直播卡片，也采用了单一列表卡片的形式。所以单一列表卡片形式，适合于既希望增加一定的内容曝光，又不会影响核心内容的露出场景。
内容型卡片包含的信息形式更加多样化，例如文本、图片、动图、视频等，承载的信息量更大。
最为典型的就是今日头条、微博等资讯社交产品，既需要为用户营造出沉浸式的阅读体验，又不能让用户在大量的内容中迷失了方向。因此这类产品主要采用通栏卡片，在内容呈现和浏览体验中做到平衡。
虽然卡片中可以嵌套多个层级的内容，但是为了保证内容展示和浏览体验，需要避免太多内容的嵌套组合。特别是单个卡片中，避免多个卡片并排展示，造成内容展示过于碎片化，增加用户的浏览负担。
由于卡片必须要增加上下间距形成独立空间，会导致页面的长度增加。因此对于内容结构相似的模块，如非必须，不要盲目采用卡片形式。
例如通讯录，微信朋友圈、商品搜索列表页面等，采用了简单的分割线进行内容区分。既避免了页面空间的浪费，又提高了用户的浏览效率。
-END-
本文为作者独立观点，不代表鸟哥笔记立场，未经允许不得转载。
《鸟哥笔记版权及免责申明》 如对文章、图片、字体等版权有疑问，请点击 反馈举报
Powered by QINGMOB PTE. LTD. © 2010-2022 上海青墨信息科技有限公司 沪ICP备2021034055号-6
我们致力于提供一个高质量内容的交流平台。为落实国家互联网信息办公室“依法管网、依法办网、依法上网”的要求，为完善跟帖评论自律管理，为了保护用户创造的内容、维护开放、真实、专业的平台氛围，我们团队将依据本公约中的条款对注册用户和发布在本平台的内容进行管理。平台鼓励用户创作、发布优质内容，同时也将采取必要措施管理违法、侵权或有其他不良影响的网络信息。
一、根据《网络信息内容生态治理规定》《中华人民共和国未成年人保护法》等法律法规，对以下违法、不良信息或存在危害的行为进行处理。
1. 违反法律法规的信息，主要表现为：
1)反对宪法所确定的基本原则；
2)危害国家安全，泄露国家秘密，颠覆国家政权，破坏国家统一，损害国家荣誉和利益；
3)侮辱、滥用英烈形象，歪曲、丑化、亵渎、否定英雄烈士事迹和精神，以侮辱、诽谤或者其他方式侵害英雄烈士的姓名、肖像、名誉、荣誉；
4)宣扬恐怖主义、极端主义或者煽动实施恐怖活动、极端主义活动；
5)煽动民族仇恨、民族歧视，破坏民族团结；
6)破坏国家宗教政策，宣扬邪教和封建迷信；
7)散布谣言，扰乱社会秩序，破坏社会稳定；
8)宣扬淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪；
9)煽动非法集会、结社、游行、示威、聚众扰乱社会秩序；
10)侮辱或者诽谤他人，侵害他人名誉、隐私和其他合法权益；
11)通过网络以文字、图片、音视频等形式，对未成年人实施侮辱、诽谤、威胁或者恶意损害未成年人形象进行网络欺凌的；
12)危害未成年人身心健康的；
13)含有法律、行政法规禁止的其他内容；
2. 不友善：不尊重用户及其所贡献内容的信息或行为。主要表现为：
1)轻蔑：贬低、轻视他人及其劳动成果；
2)诽谤：捏造、散布虚假事实，损害他人名誉；
3)嘲讽：以比喻、夸张、侮辱性的手法对他人或其行为进行揭露或描述，以此来激怒他人；
4)挑衅：以不友好的方式激怒他人，意图使对方对自己的言论作出回应，蓄意制造事端；
5)羞辱：贬低他人的能力、行为、生理或身份特征，让对方难堪；
6)谩骂：以不文明的语言对他人进行负面评价；
7)歧视：煽动人群歧视、地域歧视等，针对他人的民族、种族、宗教、性取向、性别、年龄、地域、生理特征等身份或者归类的攻击；
8)威胁：许诺以不良的后果来迫使他人服从自己的意志；
3. 发布垃圾广告信息：以推广曝光为目的，发布影响用户体验、扰乱本网站秩序的内容，或进行相关行为。主要表现为：
1)多次发布包含售卖产品、提供服务、宣传推广内容的垃圾广告。包括但不限于以下几种形式：
2)单个帐号多次发布包含垃圾广告的内容；
3)多个广告帐号互相配合发布、传播包含垃圾广告的内容；
4)多次发布包含欺骗性外链的内容，如未注明的淘宝客链接、跳转网站等，诱骗用户点击链接
5)发布大量包含推广链接、产品、品牌等内容获取搜索引擎中的不正当曝光；
6)购买或出售帐号之间虚假地互动，发布干扰网站秩序的推广内容及相关交易。
7)发布包含欺骗性的恶意营销内容，如通过伪造经历、冒充他人等方式进行恶意营销；
8)使用特殊符号、图片等方式规避垃圾广告内容审核的广告内容。
4. 色情低俗信息，主要表现为：
1)包含自己或他人性经验的细节描述或露骨的感受描述；
2)涉及色情段子、两性笑话的低俗内容；
3)配图、头图中包含庸俗或挑逗性图片的内容；
4)带有性暗示、性挑逗等易使人产生性联想；
5)展现血腥、惊悚、残忍等致人身心不适；
6)炒作绯闻、丑闻、劣迹等；
7)宣扬低俗、庸俗、媚俗内容。
5. 不实信息，主要表现为：
1)可能存在事实性错误或者造谣等内容；
2)存在事实夸大、伪造虚假经历等误导他人的内容；
3)伪造身份、冒充他人，通过头像、用户名等个人信息暗示自己具有特定身份，或与特定机构或个人存在关联。
6. 传播封建迷信，主要表现为：
1)找人算命、测字、占卜、解梦、化解厄运、使用迷信方式治病；
2)求推荐算命看相大师；
3)针对具体风水等问题进行求助或咨询；
4)问自己或他人的八字、六爻、星盘、手相、面相、五行缺失，包括通过占卜方法问婚姻、前程、运势，东西宠物丢了能不能找回、取名改名等；
7. 文章标题党，主要表现为：
1)以各种夸张、猎奇、不合常理的表现手法等行为来诱导用户；
2)内容与标题之间存在严重不实或者原意扭曲；
3)使用夸张标题，内容与标题严重不符的。
8.「饭圈」乱象行为，主要表现为：
1)诱导未成年人应援集资、高额消费、投票打榜
2)粉丝互撕谩骂、拉踩引战、造谣攻击、人肉搜索、侵犯隐私
3)鼓动「饭圈」粉丝攀比炫富、奢靡享乐等行为
4)以号召粉丝、雇用网络水军、「养号」形式刷量控评等行为
5)通过「蹭热点」、制造话题等形式干扰舆论，影响传播秩序
9. 其他危害行为或内容，主要表现为：
1)可能引发未成年人模仿不安全行为和违反社会公德行为、诱导未成年人不良嗜好影响未成年人身心健康的；
2)不当评述自然灾害、重大事故等灾难的；
3)美化、粉饰侵略战争行为的；
4)法律、行政法规禁止，或可能对网络生态造成不良影响的其他内容。
二、违规处罚
本网站通过主动发现和接受用户举报两种方式收集违规行为信息。所有有意的降低内容质量、伤害平台氛围及欺凌未成年人或危害未成年人身心健康的行为都是不能容忍的。
当一个用户发布违规内容时，本网站将依据相关用户违规情节严重程度，对帐号进行禁言 1 天、7 天、15 天直至永久禁言或封停账号的处罚。当涉及欺凌未成年人、危害未成年人身心健康、通过作弊手段注册、使用帐号，或者滥用多个帐号发布违规内容时，本网站将加重处罚。
三、申诉
随着平台管理经验的不断丰富，本网站出于维护本网站氛围和秩序的目的，将不断完善本公约。
如果本网站用户对本网站基于本公约规定做出的处理有异议，可以通过「建议反馈」功能向本网站进行反馈。
(规则的最终解释权归属本网站所有)