为什么你爱用的 App，都用卡片式计划？

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)灵感早读栏目分享 过「内容至上原则」。卡片是一个可以装入任何内容的计划盒子。将差异内容置于卡片之中，可以利便用户领略。

（编辑：厦门网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!