设为首页 - 加入收藏 东莞站长网 (http://www.0769zz.com)- 国内知名度站长资讯网站,提供最新最全的站长资讯,创业经验,网站建设等!
热搜: 2015 域名 美国 教程
当前位置: 首页 > 运营中心 > 网站设计 > 教程 > 正文

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

发布时间:2017-03-28 23:16 所属栏目:[教程] 来源:爱范儿
导读:副标题#e# A 君导读:之前 AppSo(微信号 appsolution)通过5 个设计原则和实践案例,分享了「卡片式设计」怎样才能让用户有良好的体验。有些读者表示希望更进一步了解这样的设计风格。 今天这篇文章,将全面介绍「卡片式设计」,看完之后,你会知道为什么爱

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

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

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

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

一、什么是卡片

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

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

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

1. 完美的拟物

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

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

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

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

2. 内容架构

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

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

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

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

3. 视觉享受

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

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

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

二、如何设计卡片

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

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

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

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

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

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

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

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

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

图片来源:Behance

三、卡片的优势

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

1. 易于理解的形式

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

【免责声明】本站内容转载自互联网,其相关言论仅代表作者个人观点绝非权威,不代表本站立场。如您发现内容存在版权问题,请提交相关链接至邮箱:bqsm@foxmail.com,我们将及时予以处理。

网友评论
推荐文章