美文网首页
用卡片,还是用通栏列表

用卡片,还是用通栏列表

作者: Yc_晨 | 来源:发表于2017-08-17 21:56 被阅读114次

在我想用卡片的时候,我找不到理由去说服,为什么要采用卡片的设计。
不想陷于被动,到底用卡片还是通栏列表?
卡片和通栏的主要区别是模块(指整个块,不是指字/图片)的宽度距离屏幕是否有边距,还有阴影/空间等其他不同,我主要讨论什么样的需求更应当采用卡片式设计。
本文里,我会用推荐,不推荐的词语来表示在特定需求下,哪种方式会更加适合。

卡片的劣势,展示同样信息密度的情况下,卡片需要用户更多的滑动操作。
卡片的优势,兼容不同尺寸,丰富的视觉效果,清晰的内容关系

信息摘要,推荐用卡片

Google Material Design 这样定义卡片,“A card is a sheet of material that serves as en entry point to more detailed information.”我们这样去理解微信支付宝smartisan的列表,这些卡片是一个缩略,可以通过卡片查看详情。


不同类型的模块需要明显区分,推荐用卡片

相比于列表用线和大间距来区隔信息,卡片会带来明显的隔离,我认为聊天中的气泡也是卡片的一种形式,都是用一个块把内容框住,多个块在屏幕中组合。

内容单调需要美化,推荐用卡片

卡片带来具有远景的视觉关系,占据更大的空间,可以优化单调页面的视觉效果,如果有视觉上的需求,在满足功能前提下可以使用卡片来优化视觉体验。
用法:用网格来做规整的卡片,和具有变化的卡片。


快速扫视类(如新闻),不推荐使用卡片

在《When Card UI Design Doesn’t Work》文中详细通过用研的方法阐述了网页和移动端设计中采用卡片展示新闻信息的劣势。

在移动屏幕中,显示同样一个屏幕高度的内容,采用卡片式设计所需的高度是列表式设计高度的115%,用户滚动的更多,但是他们看到的内容却变少了。

所以我们可以反推出第一条,就是卡片适用于查看概括的信息,而不是快速浏览大量信息。

A0031CF1-B794-4878-AFE2-B714F6F8781D.png 93C514F4-7488-4FF9-919F-10CE6F13B35F.png

具体做卡片的技术规范参照material-cards

Reference
《When Card UI Design Doesn’t Work》,Rob Gill

Material Design-Cards

相关文章

  • 用卡片,还是用通栏列表

    在我想用卡片的时候,我找不到理由去说服,为什么要采用卡片的设计。不想陷于被动,到底用卡片还是通栏列表?卡片和通栏的...

  • 2019.4.11工作总结

    图标线性or面性选择:以下比较适用于需要高速效率使用的产品。 通栏or不通栏/卡片间距运用:

  • 设计一种自适应的React卡片列表组件

    本文介绍一种用React实现的自适应的卡片列表组件,该组件根据卡片的宽度与间隔自动适应不同容器的宽度对卡片进行排列...

  • 习题 02:卡片认知:什么是卡片?

    三点纳博科夫使用卡片写作的写法。 1.用卡片插入单词,用卡片写备忘录,用卡片来写一些事后思考。 2.用卡片进行非线...

  • 《卡片笔记写作法》内容概述

    书籍主要内容概要 1.核心方法 1.1卡片笔记法——用卡片来记录阅读重点;用卡片来整理自己的思路 1.2使...

  • W1

    作业2: 该列表为无序列表,其中语言、编辑器用空格进行布局。其中无序列表用 包裹列表有序列表用 包裹列表并都使...

  • Python3 的数据类型3-元组

    元组和列表相似,但元组的元素值不能改变,而列表可以改变。元组用(),列表用[] 1. 元组的创建 元组直接用小括号...

  • 1702

    11 门户 栏目 !首页页首:导航图 天主教北京教区 教会徽章 背景图导航通栏轮播图、最新更新列表、教区动态列表、...

  • 3.Python-列表,元组,字典和集合

    列表 Python中列表是一个有序的序列。空列表 可以用 [] 或者 list() 生成.列表用一对 []生成,中...

  • 迭代列表等时使用enumerate代替range

    用range迭代列表需要先求列表的长度,再使用range,用enumerate可以不需要求列表的长度,而是将列表包...

网友评论

      本文标题:用卡片,还是用通栏列表

      本文链接:https://www.haomeiwen.com/subject/pconrxtx.html