1. 我要软文网首页
  2. 软文发布

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

UI布局有许多种形式,而卡片式作为目前比较常见的一种,也有着它适用和不适用的场景

前言:哪些是卡片

说到卡片式设计,大家的第一反应可能是下面这样的页面。

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

而从广义上来说,以分隔条分割页面的方式也可以算作通栏卡片,本身并没有表现层上的作用,只是在框架层帮助用户信息分类。

因此,此次讨论的卡片主要是以下三类:通栏卡片、灰底+卡片、白底+卡片+投影。

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

此次要讨论的场景

首先,卡片只是UI表现手法的一种,同类的方法还有分隔线和留白。如下图

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

另一方面,UI界面又可较笼统地分为两种:以信息为主的页面,和以功能为主的页面。

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

在以信息为主的页面中,卡片往往作为单条信息的承载;而以功能为主的页面中,卡片往往是作为整个模块的承载。

以下就按这两个场景讨论哪些时候适用卡片,哪些时候不适合。

一.在以信息为主页面中的卡片式布局

Q1:卡片与分隔线,这两种形式如何选择

卡片,尤其是通栏卡片,其实就是通过分隔条来区分不同内容,因此与分隔线有很大的相似度。MD规范中提到,列表类的信息更适合用分隔线而不是卡片。如下图

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

但如果是复杂一点的情况呢?举个例子,知乎里的以下4个不同的页面,有些采用了分割线,有些采用了卡片,具体如何选择?

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

A1:可以从以下3个方面综合考虑

1.各信息之间的关联度

比如电话联系人页面,搜索热榜页面等等,这些页面的各信息之间几乎没有关联,用户需要快速浏览来找到哪条才是自己想看。而采用视觉上不显眼的分隔线,有助于用户快速浏览。

而比如知乎的答案页,各条信息之间比较类似(都是对同一问题的回答),用户需要更仔细的看每条信息的内容才能筛选出自己感兴趣的。采用了通栏卡片的形式,可以用更明显的分隔条打断用户向下浏览的视线,让用户更聚焦于单个卡片的内容。

2.信息的复杂度。

简单的信息意味着单条信息内容很少,也就意味着在屏幕上,一屏可以显示多条信息。比如新闻类APP,这种情况下采用分隔线才能起到快速浏览的效果。

而如果信息比较复杂,一屏只能显示1-2条,甚至不到一条的信息,那么即使采用分隔线,用户也无法快速浏览。

(PS.信息的复杂度其实是可控的,取决于希望用户看到多少信息)

同时,如果单条信息复杂到需要内部使用分隔线来区分层级,那么信息与信息之间也只能采用卡片来区分。

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

典型的复杂信息页面比如微博,一方面单屏常常显示不下一条信息,另一方面信息内需要分隔线来区分操作和内容,因此整体采用了卡片式布局。、

3.信息种类的多少。

现在的信息流页面往往会混入多种信息,比如资讯类信息中穿插一下推荐关注的人,穿插一下广告等等。这种时候,采用通栏卡片,可以提高布局的灵活性。

例如知乎的关注页面:下右图尝试将其他模块全部去掉,只留一种信息,可以看出采用分隔线即可。而左图为知乎的样式,因为有各种模块,所以采用了通栏卡片的布局。

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

Q2:通栏卡片与非通栏卡片,这两种形式如何选择

A2:非通栏卡片可以让用户的视线更加聚焦在单条信息内。

但个人认为这两者相差不大,如下两图,均为复杂的搜索结果。左图为通栏卡片,右图为非通栏卡片。实际感受,左图浏览更快速,更适合熟练用户快速找到结果。右侧浏览相对较慢,但是能更好的的了解每一条信息,适合不熟悉的用户正确找到自己想要的。

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

Q3:什么时候选择使用卡片

A3:偏向展现单条内容的一般采用卡片,偏向浏览效率的不采用卡片。

其实微信的改版是一个极好的例子。新版订阅号页面更加突出了单条文章,配图+完整标题让用户更直观的看到文章内容,但也让用户需要下滑更多页才能看到其他订阅号的内容。

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

二.在以功能为主页面中的卡片式布局

Q1:卡片的特点是什么

1.独立性

2.同类性

Q1:页面整体是否要采用卡片式的风格?

A1:个人暂且认为是否采用卡片式并没有太大的却别,也希望能抛砖引玉。

下图是天猫个人中心页面,左图旧版采用了卡片式设计,而新版采用了大标题+分隔线的风格。从两者的效果对比来看,卡片式让模块更独立清晰,整体也比较有统一感。而大标题风格则是让用户快速聚焦到自己想要的看的模块。

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

Q2:页面中非通栏卡片与其他UI方式的混搭

A2:混搭时,非通栏卡片有着极强的独立性,从好的一面看,可以突出某个模块;从不好的一面看,用的不当会使得页面不够统一。

例如下图。图1为原设计,纯采用非通栏卡片,而另两张只有签到采用了非通栏卡片。可以看到,图1在视觉上,三个模块整体统一,而图2图3的三个模块割裂成了两部分,视线会更多地被签到模块吸引,而减少对下方模块的关注。

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

1.重要级别相差不大的模块,即使内容不相同,也尽量采用相同形式。

如下图左为盒马生鲜的个人中心页,采用了非通栏卡片和通栏卡片混搭的形式,虽然突出了个人信息,但是视觉上不够统一。个人尝试如下图右,均调整为非通栏卡片,并不会对个人信息有太多的弱化,反而让界面整体更加统一。

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

当然,如果模块类型完全不同,也不用强行统一为卡片式,例如大众点评的个人中心页,底下的列表功能并不适合转化为卡片形式。

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

2.若页面整体采用分隔线/空白/分隔条的风格来区分模块,那么可以将装饰性强的卡片作为辅助插入其中

如下图为马蜂窝的页面,可见主要的模块采用的是大标题+空白来分隔,而“推荐景点”(图中的金鸡湖卡片)和“玩乐热销榜”采用了卡片的形式。在架构层上,很明显的表现出了从属关系,但在表现层上,又适当的突出了营销内容。

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

——END——

本文链接:https://www.yaoruanwen.com/n/46250.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 yaoruanwen@qq.com 举报,一经查实,本站将立刻删除。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

Copyright© 2009-2020 我要软文网