站长之家首页 > 教程 > App设计最新资讯 > 正文

为什么你爱用的 App,都用卡片式设计?

2017-03-27 09:13 · 稿源:爱范儿

A 君导读:之前 AppSo(微信号 appsolution)通过 5 个设计原则和实践案例,分享了「卡片式设计」怎样才能让用户有良好的体验。有些读者表示希望更进一步了解这样的设计风格。

今天这篇文章,将全面介绍「卡片式设计」,看完之后,你会知道为什么爱用的 app 都喜欢用这样的设计。

网页和手机 app 逐渐摈弃了传统单一的页面设计,向完全个性化的用户体验发展。这种发展也是基于大量独立内容模块的流行。其中,卡片就是最新一种独具创新的概念。

不管你怎么看待它,卡片短期之内还不会过时。

一、什么是卡片

卡片是含有图片和文字在内的小矩形模块,它是用户了解更多细节信息的「入口」。要平衡界面的美学和可用性,卡片基本是一个默认选择。因为卡片用起来非常方便,还可以展示包含不同元素的内容。

卡片示例。图片来源:Material Design

1. 完美的拟物

在用户界面加入卡片设计可谓完美的拟物,因为它们看起来就像日常生活中真实存在的卡片。其实早在手机设备出现之前,卡片就已经存在了,比如名片、棒球卡、扑克卡等等。当今,卡片可谓是目前使用较广泛的一种交互模型。因此,对用户而言,其更能凭直觉认识到,这些卡片就代表真实生活中的某物。

此外,就小故事推广而言,卡片也是非常棒的选择,棒球卡就是一个典例。你所需要了解的某运动员基本信息都显示在小卡片的正反面。

每张卡片都代表一个棒球运动员。图片来源:liveauctiongroup

2. 内容架构

卡片将内容划分成多个有意义的部分,这样还节省了一定的屏幕空间。类似于「字词句段篇」的组成形式,卡片也是由最小信息单元组成,并汇总形成连贯的整体内容。

卡片组成示例。图片来源:Material Design

像 Facebook 这类大企业,其采用卡片驱动型的界面用于台式桌面、手机网页及 app 客户端时,卡片布局就被认作设计环节中的核心了。Facebook 充分利用了盒子风格的设计(即卡片——译者注),将信息归类,哪怕是在怎么也滑动不到底端的页面上。

3. 视觉享受

基于卡片的设计通常主要依靠视觉设计,而使用大量图片就是卡片设计的一大亮点。研究发现已证实,图片可以提升网页或 app 的整体设计,因为图片可以快速有效地吸引用户的注意力。所以,加入图片也使得基于卡片的设计更加引人入胜。

比如 Dribble,一个面向设计师等创意类作品的人群,提供作品在线服务,供网友查看的交流类网站。要展示这类内容,基于卡片的设计是再合适不过的选择了。

二、如何设计卡片

在同一页面布局中,卡片宽度应保持不变,但高度可以相应调整。卡片最大高度限于该平台可用空间的高度,但也可以临时延伸。例如,在显示评论框的时候。

卡片高度既可固定,又可调整。图片来源:Intercom

从设计角度来看,卡片各角最好是圆角,并且最好稍有一点阴影。圆角使卡片看起来更像一个内容块,阴影则可以反映出深度。

圆角和阴影。图片来源:Material Design

这些元素在没有分散用户注意力的前提下,能给设计带来一些视觉亮点。另外,还能给人一种卡片像是要从页面中跳出来的感觉。

除此之外,还可以加入动画和动效。

图片来源:Behance

三、卡片的优势

设计恰当的话,卡片可以提升 app 的用户体验感。因为其功能性以及外形的原因,它们成了用户界面的一个增值元素,对用户来说,也更能凭直觉交互。

1. 易于理解的形式

之前 AppSo(微信号 appsolution)灵感早读栏目分享 过「内容至上原则」。卡片是一个可以装入任何内容的设计盒子。将不同内容置于卡片之中,可以方便用户理解。

这样一来,用户可以轻松了解其最关注的内容。这也使用户可以通过各种方式来交互。

包含不同内容形式的卡片集。图片来源:Material Design

2. 响应式设计以及移动界面设计

关于卡片,最重要的是它们基本上极度容易被掌控。不管在台式桌面还是手机客户端,加入卡片设计的效果都非常好,因为内容可以通过更易理解的卡片呈现给用户。就响应式设计而言,它是不错的选择,因为以内容盒子呈现的卡片可以方便地扩展或收缩。

最后,加入卡片,在跨平台设备上设计出统一的美感也就不会步步维艰了。这也是为什么通过卡片可以在不同设备上轻松设计出相同的用户体验感。

3. 设计时不要忘了「心中的拇指」

卡片是为拇指而设计。这句话听起来好像卡片是专为 app 设计的一样。手机 app 设计可作为卡片普及的一个核心部分。数字卡片其实和实体卡一样,它还可以给用户带来舒适的体验。

用户也不必太关注于这些到底是怎么做到的。他们就喜欢卡片的简单,并可凭直觉了解相关物理性,比如如何翻转卡片以获取更多信息,或者左右滑动以获取其他卡片信息。

设计的时候一定要思考用户会如何使用他的拇指在界面上交互。所以,界面内容的大小一定不要让用户在交互时感到不适。——译者注

左右滑动。图片来源:Dribble

卡片手势也应该一并考虑并置于卡片集内。在同一页面尽量减少滑动手势的数量,这样就可以减少互相重叠的可能性。

比如,可滑动的卡片不应该包含可滑动的滚动图片,这样就能保证在滑动卡片时只出现一次交互。

向下滑动。图片来源:Dribble

四、何时使用卡片

1. 信息流

卡片以信息流形式呈现,制造了一条自然的事件时间轴。想想 Facebook 如何通过卡片防止用户快速扫览新闻动态里最新事件,错失重点。

Facebook 的信息动态(News Feed)是一条无穷尽的信息流,而卡片则是独立的信息流集合。卡片的作用就在于分散信息流,它们将事件从无穷尽信息流中分离出来,打包后再共享出去。

  • 大家在看
  • 相关推荐
  • 网页设计有哪些技巧,鱼爪设计来助你

    当我们打开一个网页的时候,相信很多人对于这个网页的美观度都会有一个基本的评价,有的网页设计的十分大气,有的网页设计的杂乱无章,同样都是网页,但是带给用户的视觉体验却是大不相同的,一个新奇且具有创意的网页可以让整个网站都散发出一种活力,能吸引用户在网站上花费更多时间去驻足浏览,那么如何才能做好网页设计呢?网页设计有哪些技巧?一、选择合适的配色方案色彩带来的视觉体验是非常直接的,强烈的色彩可以给人的眼球

  • 谷歌正在向一些安卓用户推出一款重新设计的Podcasts app

    谷歌已经开始向一些安卓用户推出重新设计的Podcasts app,并且似乎至少解决了该产品当前的一些问题。主要吸引人的是一个新的三标签界面,它大大简化了当前的体验。主“Home”选项卡不再强调可发现性,而是关注当前的收藏夹。新的图标可以让你下载和排列剧集,而不需要点击特定的剧集。

  • ​凉幂凉皮,凭借品牌形象设计拉进距离感|许可餐饮设计

    疫情期间,全国人民过上了足不出户的居家生活,时间久了难免会出现无聊、烦躁的情绪。为了排遣这些负面情绪,追剧、数瓜子、立扫把、做手工、做料理……只要是可以用来打发时间的活动人们都参与过了,但在众多活动中,最风靡的一项活动还是在家尝试做小吃。那段时间里,朋友圈和微博热搜上充斥着油条、电饭煲蛋糕、凉皮、珍珠奶茶等各种小吃甜点,成功做出一张凉皮也成为了令人羡慕的炫耀资本。只有真正尝试制作过凉皮的人才知道,

  • 华为获得梯形设计的智能扬声器专利

    华为曾于 2020 年 2 月 2 日向世界知识产权组织申请了一款新型扬声器的外观设计专利,并于 4 月 9 日公布。从专利图片上看,这款音箱采用了椭圆形设计,顶部为喇叭,正面有电源开关机、音量上下、蓝牙和一个圆形按钮,推测是为了更换曲目。左侧有用于充电的USB端口和一个microSD卡插槽。

  • 简约至上的产品设计(1)简单的哲学

    “设计”从来都不是一个狭隘的概念,也从来都不是设计师的专属名词。一个产品固然需要专业的设计,但例如我正在写的这篇文章,运营着的微信公众号,或者是我们工作中准备的一次演讲,整理的一个PPT,乃至于我们出门之前的梳妆打扮,等等,难道这就不属于“设计”的范畴了吗?

  • 极简设计如何能与精致生活共存?

    逛博物馆的时候感触最深的就是古人的精细劲儿,富贵闲人的生活充斥着各种美丽的雕花与纹饰,从生活用具到家居装修,华丽肉眼可见。尽管随着经济的发展,我们也与老祖宗一样追求精是极简设计成为了大势。无论是风靡的苹果系列产品,流行的北欧风、MUJI风,亦或是各种高端家用电器,“少即是多”的设计理念越来越深入人心。虽然简洁的设计让人们得以从嘈杂的信息流和浮躁的情绪中获得片刻解脱,但与此相对的是,也产生了一个问题,对

  • 智米3款电器获得2020年红点设计大奖

    近期, 2020 年德国红点设计奖评选结果正式公布。由小米生态链企业智米科技研发设计的智米新风系统、智米加湿器、智米智能暖风机三款产品斩获三项大奖。德国红点设计大奖(Red dot)由德国著名的设计协会Design Zentrum Nordrhein Westfalen设立,是以“工业设计”为评选标准而举办的国际奖项,迄今已有近 50 年的历史,与德国iF、美国IDEA、日本G-Mark并称为世界四大设计奖。今年,共有来自全球 60 个国家,超过6, 500 件产品参?

  • 福特汽车依照中国速度、中国设计、中国智造,加速前行

    时下消费者随着对车的了解,除了油耗这种硬指标,越来越看重配置这些软性指标。福特作为一个老牌的汽车品牌,福特汽车推出的产品总是结合了技术、实用性和经济性,使之成为一种广受欢迎的车型。2018 年,福特汽车宣布了“中国 2025 计划”。该计划包括到 2025 年底,在中国推出超过 50 款新车型,其中包括 8 款全新SUV车型,至少 15 款福特和林肯品牌电动车型;聚焦加速产品本地化进程;快速提升在中国的工程及研发能力;以及进一?

  • 千图网七周年:感谢爱设计的你

    有人说 7 是一个很特别的数字,是一个完美的节点,也是一场全新的起航。7 周年,对于千图网而言注定也是意义非凡的一年,它是一种坚持、一种信念、更是一种对未来的笃定!2013 年 4 月 3 日,国内优秀的“设计&办公”创意服务平台——千图网正式诞生。转眼间,千图网已经七岁了。在过去的七年里,千图网始终秉承着‘做人人用得起的创意版权服务’的发展使命,不断丰富网站正版创意素材,素材涵盖:平面广告、元素背景、创意插画、电?

  • 全国餐饮策划设计专业公司再添新力量!

    北京时间 2020 年 3 月 29 日 12 时 00 分,集美山田组第一分公司揭幕仪式正式开始。集美山田组创始人 吴宗建先生等人共同为集美山田组第一分公司揭幕。这标志着集美山田组拔锚启航,推动服务全国餐企的重要举措,在秉承着为客户做一家旺一家的使命,开启为更多餐企服务的新征程。集美山田组第一分公司揭幕仪式出席本次揭幕仪式的嘉宾有:集美山田组创始人 吴宗建先生、山田集团总经理 吴祖斌先生、集美山田组 常务副总经理 刘津先

  • 骚操作!苹果计划为Mac系列添加FaceID和刘海设计

    继iPhone之后,苹果公司也要给Mac系列电脑加刘海了!据外媒报道,苹果公司计划将iPhone的Face ID面部识别系统引入其Mac系列电脑中,包括笔记本和台式机。

  • iOS 14 代码显示苹果 iPhone 12 或采用无刘海设计

    据 svetapple.sk 报道,有开发者在 iOS 14 的代码中发现一份疑似 iPhone SIM 卡安装指南,指南的示意图显示 iPhone 12 将采用无刘海设计。

  • 苹果向洛杉矶捐赠16万个面罩 由苹果设计和生产

    美国洛杉矶港于当地时间周五宣布,通过捐赠计划,该机构收到了 16 万个苹果公司内部设计和生产的医用面罩。现在,其中 16 万个面罩已经交付给Logistics Victory Los Angeles,这是一家将个人防护设备供应商与需要它们的组织联系起来的机构。

  • Jya两款美学家电荣获2020红点设计大奖

    Jya今年再得佳绩,旗下两款美学家电产品—— 「Jya新光台灯」 「Jya对流电暖器」 斩获 2020 年德国红点设计优胜奖 红点设计大奖(Red dot design award)是由德国著名设计协会Design Zentrum Nordrhein Westfalen于 1955 年创立,借由对产品设计(product design),传达设计(communication design)以及设计概念(design concept)的竞赛,每年吸引了超过 60 个国家, 1 万件作品投稿参赛,有着「设计界的奥斯卡」的美誉。 Jya

  • 打破获奖纪录 华硕荣获26项2020年红点设计大奖

    产品设计奖项数量屡创新高,这是华硕对创新、卓越设计信仰的不懈探索 华硕在产品设计类奖项中赢得了 26 个 2020 年红点奖,打破了一家公司在一届中赢得最高红点奖数量的记录 获奖产品的类别包括笔记本电脑,迷你电脑,显示器,独立显卡,主板,电脑机箱和多款专业游戏产品 由国际顶级设计专家组成的独立评审团,从来自 60 个国家的 6500 个参赛作品中选出优胜获奖作品 2020 年 4 月 6 日,华硕在德国埃森举办的红点大奖上一举斩获

  • 小米智能扬声器曝光!圆形设计具备360度环绕发声?

    ​4 月 8 日,外媒91mobiles爆料称,有新专利信息显示,小米正在打造一款具备 360 度环绕立体声效果的智能音箱产品。同时,它们还公布了小米智能音箱的外观专利图片。

  • 华为新款真无线蓝牙耳机专利曝光,采用入耳式设计

    3月19日消息,华为已经向世界知识产权组织申请了一个新的真无线耳机的专利。本次曝光的图片来看,华为TWS真无线蓝牙耳机采用了入耳式设计,类似三星Galaxy Buds + 设计,耳机里一侧有多颗传感器。主体采用了圆形设计,预计耳机表面支持触摸操控,可以用来控制音量大小、切换歌曲等。这款华为全新TWS真无线耳机有望在 3 月 26 日跟华为P40系列手机一同发布。

  • 动物之森地图编辑器分享 设计让玩家满意的村庄

    集合啦动物之森是一个经营类的游戏,但同时玩家们自助创造的空间十分巨大,尤其是对于庄园的设计可以有非常多的选择,那么如何设计出完美符合自己需求的村庄呢,这里来分享一个地图编辑器,让你可以更好的设计自己的村庄地图。

  • 为何重启AirPower?苹果正设计疯狂的iPhone 干掉一切接口

    对于苹果来说,其实他们一直都在推动终端产品摆脱线缆的计划,所以明白了这点也就该明白,他们不可能真正意义上放弃AirPower。

  • 特斯拉德国工厂建设再遇麻烦,地基建设将重新设计

    4月10日据electrek报道,特斯拉德国超级工厂将停止建设工作,原因是发现建造工厂地基的土壤是沙质的,现在特斯拉必须想出一种新型地基。据悉在更改地基后,特斯拉还不得不提交新的监管审核,这又将影响到德国工厂的建设工作。在此之前,特斯拉将美国驻派到德国的员工撤回到美国本土,已经一定程度影响到了这座工厂的建设。

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议