恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
通栏卡片和留边距卡片的区别
0.0°
2018-09-22 原创文章 经验/观点 举报 10044 132 53 2


Image title


卡片设计想必大家都不陌生,它能够将信息整合在卡片内,其内容以卡片为载体,化作更容易为用户所消化的内容。用户可以更为轻松方便地选取并获得他们想要的信息。同时整合后的卡片将内容形成块,不仅更利于阅读,同时让界面看上去也比较统一,但是你知道卡片设计又分通栏卡片和留边距卡片,你知道他们分别是什么吗?它们在运用上又有什么区别呢?


一、通栏卡片


通栏卡片,简单来说就是将相同的维度信息整合到一起,将不同维度的信息用分隔栏进行分割,左右都无间距。


Image title


上图可以看到,支付宝、Keep、in都采用的这种通栏卡片的方式。通栏卡片的优势就是能够在分割模块的同时,能够承载更多的内容,缺点就是样式单一,界面风格主要由图片和图标决定,不容易出彩。


二、留边距卡片

留边距卡片,顾名思义就是把图片或文本信息,包含到这个矩形方块中,卡片四周都留有边距。该设计也是目前比较流行的设计方式。

Image title


比如下图App Store、小红书、Dribbble就是采用这种留边距的方式。留边距卡片优势样式更加多变,多用于同一模块下的不同信息的表达。


三、通栏卡片和留边距卡片的区别

1、应用的类型不同

留边距卡片多用于例如App Store、花瓣、追波、社交动态等这类同类型的,不同内容信息的整合,其形式也多采用瀑布流的形式,数量不限可随时增加。

通栏卡片多用于不同类别的形式布局中,整个界面类别较多,信息量大,例如头条新闻、in、支付宝、微信等这些内容较多的APP。

Image title


App Store就是采用留边距卡片的形式, 将信息以卡片的新式整合在一起,能够让人很快清楚该页面的重点,这种留边距卡片形式多用于同类信息,不同内容的整合,最终以瀑布流的信息展现,其缺点就是,卡片内如果信息过多,卡片过长,就达不到信息整合的效果了。

in就是采用通栏卡片形式,例如推荐主题,它也是将几个相关整合在一起进行展示,但是和留边距卡片对比,其优势就是,如果信息过多,也不会影响其信息的传达。

2、通栏卡片承载的信息量更大

往往,留边距卡片由于上下左右都会留出一定的距离,因此在相同界面的空间,留边距卡片可装载的信息,远不如通栏卡片装载的信息多,对于信息量较大的页面往往也还是会考虑用通栏卡片的信息,这也是为什么我们现在看到的大部分APP仍然采用这种设计的原因。


Image title


以左图豆瓣和右图为例,他们都是展示信息的卡片,从图就可以看出,采用通栏卡片的豆瓣和右图采用留边距卡片,豆瓣展示的信息信息量更多。

3、留边距卡片设计,在设计样式上更加多样化

上面都是说了通栏卡片的好处,但是在现在手机上所有APP都是通栏卡片的形式下,你有没有觉得所有APP都长一个样子,没有新意,视觉疲劳了,因此一些APP或者概念稿跳出常规,尝试更加新颖的留边距卡片。其在设计样式上多种多样,给人的感觉活泼,有趣。它多用于展示图片内容或一些个性化设计中。

Image title


以上均是我在花瓣上找的一些概念稿,我们可以看到,其展示效果打破了通栏卡片的沉闷,样式更加新颖有趣,现在线上的一些产品也开始向留边距卡片发展,例如我们现在知道的App Store、探探、花瓣、追波等。


总结:


通栏卡片就是整个卡片左右无间距,不同类别的信息由一条灰色的背景栏进行分割,其优势就是可展现的信息量更大,多用于体量比较大的APP中,目前我们常见的APP均采用这种信息,例如支付宝、微信、Keep等。


留边距卡片就是卡片上下左右都有间距,多用于相同类别不同信息的整合,其优势就是样式新颖,界面效果更加活泼有趣,打破了通栏卡片的沉闷感,目前多用于图片展示类和特殊类别的APP,例如App Store、花瓣、追波、探探等。


参考

http://www.ui.cn/detail/310640.html关于卡片设计、分割线、无框设计的思考

http://www.woshipm.com/pd/393424.html什么是卡片式设计?








微信公众号:设计早8点

更新:2018-09-22

收藏

132人已收藏

风筝KK

微信公众号:设计早8点

  • 39

    作品

  • 5366

    粉丝

  • 59

    关注

  • 以字段映射为例,带你了解B端页面该如何设计!
  • 【B端】字段映射如何设计?别被大厂方案禁锢了
  • 小团队有必要建立完善的设计体系吗?
  • 如何提升B端界面的精致度,做到这两点就够了!

    猜你喜欢

      2018-09-22 原创文章 经验/观点 举报 10044 132 53 2

      通栏卡片和留边距卡片的区别

      0.0°

      你确定要举报通栏卡片和留边距卡片的区别

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年02月11日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      53
      132
      2

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录