恭喜你成为UI中国推荐设计师 (详情)

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
为何连“阿里、腾讯、美团”等大厂都选择了卡片设计
68.2°
原创文章 / 经验/观点 / / 举报
13435 128 252 7

2020-06-02

为何各个大厂都将卡片设计纳入自己的设计语言,为何连你都频频使用卡片设计,如果你心怀疑问?那么请跟我来到……


1.前言


前几日好友吐槽卡片设计流行到“烂大街”,一时间各大 App 的改版中都将卡片设计纳入自己的设计语言当中。当然卡片设计的流行绝非偶然,从最早的 Palm WebOS 再到 Material Design,卡片设计的优点得到了充分的认证,接下来和大家分享一下卡片设计的定义以及为何如此流行的原因。





2.卡片设计的定义


早在2009年 Palm 公司在拉斯维加斯电子展销会上发布了 Palm WebOS 系统应用了卡片设计,后来到2014 Google I/O 开发者大会上发布了量子纸(Quantum Paper)的概念,对卡片设计有了初步的概念,在后续的 Material Design 中物质是隐喻的设计理念对齐进行了更加系统的解释。



2.1 Material Design 的卡片定义


在 Material Design 中对卡片做出了明确定义: 

卡片设计是包含有关单个主题的内容和动作。 



单个主题的内容包括文本信息和图形或图形元素,动作则是指交互操作。




2.2.卡片设计设计原则


优秀的卡片设计首先要保证信息层级(图像、文本信息、功能按钮等)的清晰,保证用户易于扫描以获取相关可操纵的信息。

 

对于卡片设计大家可以参考 Material Design 提出了卡片设计的三原则:




a.承载性


卡片可以作为独立承载内容的单元。例如我们日常见到的 feed 流或瀑布流的中应用的卡片都是独立承载内容的表现

 



b.独立性


卡片可以独立放置,而不必依赖周围的元素作为背景。 仔细观察我们能发现卡片往往能够被应用于多场景中,正是因为卡片的独立性,不必依赖于周围的元素。

 



c.个体性


卡片是一个独立的个体,一张卡片不能和另一张卡片合并,同时也不能分成多张卡片。

 

卡片无法像细胞一样分裂或者融合,每张卡片所独立承载的内容无法与其他卡片融合,也无法拆分成多张卡片。



3.卡片的优势


3.1.隐喻性


在用户的认知中大部分卡片是可点击的,借助 Material Design 物质是隐喻的设计概念,我们现实生活常常用到卡片(例如名片、银行卡、会员卡等等),所以在用户潜意识中认为卡片是可操作的,降低了用户的认知成本。




3.2.组织信息 划分页面


a.组织信息


借助卡片的承载性,可以将零散的信息根据产品的业务逻辑组织到一起,形成相对独立的各业务模块,卡片的独立性能够很好的将各业务模块进行划分,使页面形成一定的秩序。




b.划分内容


卡片设计能很好的划分页面的信息层级、建立页面内的秩序,这依赖于卡片的独立性。卡片设计具有明显的边界,借助圆角可以加强卡片与周围环境的差异性,促使用户更易识别。



许多产品中经常会借鉴卡片设计来划分内容,例如我们经常看到在 Feed 流、瀑布流等场景,



3.3.交互


卡片设计之所以在交互上如此受欢迎,除了在交互上能够帮助设计师对信息进行很好的归纳,更多是源自卡片设计低门槛的交互成本和在交互形式上极强的可塑性。


a.低门槛的交互成本


隐喻性


卡片来源于现实世界,借助 Material Design 物质具备隐喻性的概念,卡片设计在潜意识上给用户的感觉是可点击、可操作性的,无形之中降低了卡片的交互成本。




简易性


一张卡片只能被分配执行一个交互动作,且卡片内部不能在添加交互动作。例如在 Material Design Cards 中移动案例。


图片源自 Material Design


一张卡片只能分配一个滑动动作,卡片中不得包含其它可滑动内容(例如图像轮播或分页),滑动手势也不应导致部分卡在滑动时脱落。



关联性


卡片在交互时具备关联性,当卡片在执行交互动作时会影响到周边其他卡片。例如在 Material Design Cards 中移动案例,用户在移动卡片时其他卡片会自动排序。


图片源自 Material Design



b.交互可塑性强


卡片设计借助父子集的概念和 Material Design 中物质的空间属性造就了卡片在交互设计上的极强的可塑性

 

父子级


卡片可以借助父子级的概念,通过卡片的扩展转场显示或隐藏更多信息。




空间属性


卡片附带空间属性,首先卡片设计来源于现实物理世界,所以在设计当中除了对 X 、 Y 轴的表达意外,还有对 Z 轴-空间纵深的表达。



例如豆瓣的影音档案则是利用 Z 轴的空间纵深来隐藏显示用户历史影音。



其次在  Material Design - Cards 中也提到 - “海拔”的属性,即高度。在移动设备上,卡片的默认高度为1dp,抬高的拖动高度为8dp。比较常见的场景就是我们在自定义页面拖动某一模块的时候,可以看到该模块明显高于其他模块。




4.划重点


  1. 卡片设计是包含单个主题的内容和动作

  2. 卡片设计的三原则是:承载性、独立性、个体性

  3. 卡片设计的优势:卡片具备隐喻性、低门槛的交互成本、极强的交互可塑性



参考链接

http://33s.co/tYeL
http://33s.co/tYe2
http://33s.co/tYeq

Powered by Froala Editor

ui设计规范海盐社

创建于:2020-06-02
收藏

128人已收藏

评分:

完整度:4星

启发性:4星

勤奋性:4星

排版布局:4星

推荐:
为何各个大厂都将卡片设计纳入自己的设计语言,为何连你都频频使用卡片设计,如果你心怀疑问?那么来看看这篇文章
  • 15

    作品

  • 738

    粉丝

  • 57

    关注

  • 你必须知道的 5种搜索页面的样式设计
  • 3步极速制定设计风格-思路篇
  • 你必须了解的七大交互心理学
  • 你必须了解的色彩变量 - “饱和度&亮度”

猜你喜欢

    姜正_

    姜正_

    老马识途小有名气砖家一鸣惊人首页新秀
    • 738

      粉丝

    • 70.2

      人气

    • 3782

      颜值

    作品

      GDC Award 2021启航

      推广

      最新推荐

      什么是设计师的用户思维?

      50 0 1

      相关佳作
      换一换

        姜正_

        点赞:252

        收藏:128

        评论:7

        为何连“阿里、腾讯、美团”等大厂都选择了卡片设计

        你确定要举报为何连“阿里、腾讯、美团”等大厂都选择了卡片设计

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

        0/200

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

        点击上传附件

        对谁可见:

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

        您确认要推荐?

        该作品发布时间:2020年06月02日

        评分

        完整度

        启发性

        勤奋性

        排版布局

        推荐心得

        建议20-200字以内

        0/200

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

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

        登录

        账号或密码错误

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

        登录