江苏龙网

  1. 主页 > 生活百科 > >

卡片式布局的优点有哪些，html如何实现卡片布局

UI布局的形式有很多种，卡片作为目前常见的一种，也有其适用和不适用的场景 。
前言:哪些是卡
说到卡片设计，大家的第一反应可能是下面这一页 。
从广义上来说，分隔线划分页面的方式也可以看作是banner card，它本身并不起到表现层的作用，只是在框架层帮助用户对信息进行分类 。
因此，本文讨论的卡片主要分为以下三类:横幅卡片、灰色背景+卡片、白色背景+卡片+投影 。
这次要讨论的场景
首先，卡片只是UI表达的一种，类似的方法还有分割线和空格 。如下图
另一方面，UI界面可以大致分为两种类型:基于信息的页面和基于功能的页面 。
在基于信息的页面中，卡片通常被用作单个信息的载体；在面向功能的页面中，卡片往往作为整个模块的载体 。
这里有两个场景来讨论什么时候卡合适，什么时候不合适 。
一、信息化页面卡片布局
Q1:卡片还是分隔符，这两种形式如何选择
卡片，尤其是横幅卡片，实际上是通过分隔线来区分不同的内容，所以和分隔线有很大的相似性 。MD提到列表类的信息比卡片更适合用分隔线 。如下图
但是如果稍微复杂一点呢？比如知乎中以下四个不同的页面，有的用分割线，有的用卡片，该如何选择？
A1:以下三个方面可以综合考虑
1 。各种信息之间的相关程度
比如电话联系页面，搜索热榜页面等 。，这些页面的信息几乎是不相关的，用户需要快速浏览才能找到自己想看的 。视觉上不显眼的分割线有助于用户快速浏览 。
比如在知乎的答题页面上，每条信息都是相似的(都是同一个问题的答案)，所以用户需要更仔细的看每条信息的内容，筛选出自己感兴趣的内容 。通过采用横幅卡片的形式，用户可以用更明显的分隔线打断自己向下的浏览视觉，让用户更专注于单个卡片的内容 。
2 。信息的复杂性 。
简单的信息意味着单个消息的内容很少，这意味着多个消息可以显示在一个屏幕上 。比如新闻类app，这种情况下分隔线可以用来快速浏览 。
但如果信息比较复杂，一个屏幕只能显示1-2条信息，甚至不到一条信息，那么即使采用分割线，用户也无法快速浏览 。
(PS 。信息的复杂程度其实是可控的，取决于用户希望看到多少信息)
同时，如果单个信息非常复杂，需要在内部用分割线来区分等级，那么信息和信息只能用卡片来区分 。
微博等典型的复杂信息页面，一方面不能在一个屏幕上显示多条信息，另一方面信息需要一条分割线来区分操作和内容，所以整体采用卡片布局 。、
3 。有多少种信息 。
现在的信息流页面往往夹杂着各种各样的信息，比如穿插着推荐人的信息信息，广告等等 。这时候使用横幅卡可以提高版面的灵活性 。
比如知乎的关注页面:下面右下图试图去掉其他所有模块，只留下一种信息，可见分隔线是可以用的 。左图是知乎的风格 。因为有各种模块，所以采用了横幅卡的布局 。
Q2:你如何选择横幅卡还是非横幅卡？
A2:非横幅卡片可以让用户的目光更集中在一条信息上 。
但我个人认为两者差别不大 。下面两张图是复杂的搜索结果 。左图为横幅卡，右图为非横幅卡 。其实左图浏览速度更快，更适合熟练用户快速查找结果 。右侧浏览相对较慢，但可以更好的理解每一条信息，适合不熟悉的用户正确找到自己想要的 。
Q3:您选择何时使用信用卡
A3:卡片一般用来展示单张内容，卡片不是为了浏览效率 。
其实微信改版就是一个极好的例子 。新版订阅号页面突出了一篇文章 。图片+全标题让用户更直观的看到文章内容，但也让用户需要向下滑动更多的页面才能看到其他订阅号的内容 。
二 。面向功能的页面中的卡片布局
Q1:这张卡有什么特点？
1.独立性?自立性
2.同种
Q1:整个页面应该采用卡片风格吗？
A1:就个人而言，暂时来看，卡型用不用没太大区别，也希望可以作为参考 。
下图是天猫个人中心的页面 。左边老版本采用卡片设计，新版本采用标题+分隔符的风格 。从两种效果对比来看，卡片式使模块更加独立清晰，整体有统一感 。标题样式是一个模块，允许用户快速关注他们想看的内容 。
Q2:在页面中混合搭配非横幅卡片和其他UI方法
A2:混搭时，非横幅卡独立性强 。从好的方面来说，可以突出某个模块；负面来说，使用不当会让页面不够均匀 。


推荐阅读


上一篇：创业选什么项目比较好，5个小本创业项目推荐

下一篇：发布外链的平台有哪些，外链在线发布教程