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

今天这篇文章,将全面介绍「卡片式设计」,看完之后,你会知道为什么爱用的 app 都喜欢用这样的设计。设计的时候一定要思考用户会如何使用他的拇指在界面上交互。所以,界面内容的大小一定不要让用户在交互时感到不适。——译者注注:Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者 API。


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

为什么你爱用的 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. 易于理解的形式

卡片是一个可以装入任何内容的设计盒子。将不同内容置于卡片之中,可以方便用户理解。

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

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

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

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

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

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

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

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

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

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

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

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

左右滑动。图片来源:Dribble

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

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

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

向下滑动。图片来源:Dribble

四、何时使用卡片

1. 信息流

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

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

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

2. 发现

卡片可以使相关内容自然地呈现出来,让用户发掘其自身兴趣所在。下图中 Tinder 的卡片,向左或向右滑动,系统就会自动推荐可能入你眼的人。

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

Pinterest 在内容架构方面通过图钉将页面设计成类似 masonry 的动态布局,以吸引用户进一步浏览。

注:Masonry 是一个对系统 NSLayoutConstraint 进行封装的第三方自动布局框架,采用链式编程的方式提供给开发者 API。

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

上面两个示例有什么共同之处吗?他们将信息从功能中分离出来,使其与当下情景相关。

3. 对话

因为卡片是内容盒子,所以把它们用作行为号召再适合不过了。卡片最主要的行为其实就是卡片本身。比如苹果设备上的 AirDrop 功能,当收到数据传输的接收请求时,带有通知的卡片会自动跳出,让用户选择接收或拒绝数据传输。

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

无论是哪个选项,你只需要操作一次。图片来源:Apple

4. 工作流程

利用卡片,还可以简单地将一堆任务归类。要说很好的案例不得不提 Trello。在 Trello 看板界面可以添加很多卡片,每个卡片都代表独立的一项任务。

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

五、不适用卡片的情景

1. 同类内容

对于不需要太多用户交互的同类内容,不推荐使用卡片。可快速扫览的列表(或栅格)则是比较合适的选择。

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

左图中,卡片会分散用户注意力,阻碍用户快速扫览。图片来源:Material Design

在图片集或相册中,也不推荐使用卡片。展示图片集,栅格本身就是简洁轻便之选。下图是一个示例。

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

左图:图片中加入卡片。右图:直接使用栅格视图。图片来源:Material Design

2. 大屏幕

基于卡片的信息设计可能在小屏幕上非常适用,但若在大屏幕上,就会感觉像一个无法辨识边界的杂乱组合。从视觉角度来看,看起来还不错。但一些客观指标方面,比如阅读速度或阅读理解方面,就显得十分差劲了。下图是大屏幕上的 Pinterest 页面。

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

3. 再设计现有 app

熟悉并认为某个 app 简单易上手的用户,可能会一时不太愿意接受新的视觉逻辑。一定要从用户角度出发,了解其需求。知道他们的需求后,再可以通过设计测试逐渐地再设计现有 app,到时候你就能看到变化了。

结束语

通过这篇文章,我希望各位读者能明白为什么卡片设计越来越流行。我也相信,卡片设计在短期内还暂时不会被淘汰,毕竟卡片是设计持续用户体验最灵活的布局之一

现如今,用户希望快速地发现有用信息,无论在什么设备上,卡片的反馈总是很好。而且较好的用户体验永远都是「以人为本」。

 

翻译:Jorri

作者:Nick Babich,软件工程师,关注 UI 和 UX

原文链接 Using Card-Based Design To Enhance UX

来源:http://www.ifanr.com/app/797162

本文来源于人人都是产品经理合作媒体@爱范儿,作者@Nick Babich

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/23277/

(0)
CatherineCatherine
上一篇 2017-05-04 17:19
下一篇 2017-05-04 19:20

相关推荐

  • 三跨362分考取北邮交互设计,复习经验分享

    2018北京邮电大学交互设计- 连庆欣大家好,我是18年考上北邮艺术专硕的学姐,初试总分362分。回忆过去复习的日子,仿佛刚刚就在眼前。我本科是信息管理与信息系统专业,从一所二本学校三跨考研北邮艺术专硕。我是8月底9月初左右着手开始准备考研的,前后大约准备了4个多月。当时刚刚开始准备复习的时候,也思考了好一段时间,由于自己是跨考的,手绘能力实在太弱,找了好几个学校了解,都是比较偏重手绘能力的,直到我看到了北邮,找了它相关的真题,发现对手...

    2018-05-01
  • 微信竟然有这么多渣到爆的细节,再不知道你就OUT了

    1997年,“码农”张小龙靠一己之力写了Foxmail,但电邮软件是免费的,当时连《人民日报》都在为码农张小龙的生计感到担忧。时隔20年后,张小龙的名字在互联网领域几乎已经无人不知,无人不晓,更多的是因为一款足以彪炳互联网史册的产品——微信。

    2017-05-23
  • 如何正确提示用户进行评价应用

    设计文章 / 交互设计 | 2014-10-15 | 来源:woshipm | 发布者: GUImobile 在App里提示用户“给应用打分”的做法已经相当普遍。但正因为它太普遍了,用户一直被各种评价请求骚扰。我并不认为用户会介意给他们喜欢,并且…

    2014-10-15
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • 2017年交互设计的10大趋势

    UI 设计的趋势是变化非常快的,有的时候我们的脚步总是可能慢了一拍。 随着 2016 年接近尾声,Lin. 为大家整理了外网大牛 Jamie Leeson 总结的 2017 年 UI 设计的 10 个重要的趋势。01. 沉浸式的全屏视频Campos Cof…

    2017-08-02
  • 字体的性格【转】

    任何字体都有其独特的风格,有的让人感觉现代、古典;  柔美、刚毅; 迅速、缓慢;  稳重、轻盈… 在设计时,通常为表达某种情感而选择字体。对字体情感的产生是因为对某种字体的内在韵律,而产生的视觉反应。 另外,…

    2014-09-18
  • 别骂携程了,来看看Booking上如出一辙的“暗黑套路” 【UXRen译#182】

    作者:Roman Cheplyaka   |  翻译:林龙飞,校审:天蛙   近来,有很多网站和应用的设计者会诱导你做他们想做的。以下是来自timewellspent.io的例子: Youtube自动播放更多的视频来把用户留住; Instagram使用无限…

    交互专题 2017-10-25
  • D4-交互设计工作困惑答疑

    作者:飞阿婷(公众号:飞阿婷的交互设计生活)自我成长1.面试攻略为什么强调说,不能把自己的不足归咎于之前公司没给自己带来很大成长?抛开你有推卸责任的人品问题来说,其实还有科学依据证明很多事情都是可以事在人为的。费斯汀格法则:“生活中的10%是由发生在你身上的事情组成,而另外的90%则是由你对所发生的事情如何反应所决定。”我的理解是那10%就是不受我们控制的自然发生的事情,而90%就是我们面对这10%的事情选择接下来要做的事情,而这个选择...

    微信热点 2018-04-12
  • 交互设计规范

    交互设计规范+iPhone界面尺寸:320*480、640*960、640*1136iPhone6:4.7英寸(1334×750),iPhone6 Plus:5.5英寸(1920×1080)设计图单位:像素72dpi。在设计的时候并不是每个尺寸都要做一套,尺寸按自己的手机来设计,比较方便预览效果,一般用640*960或者640*1136的尺寸来设计,现在iphone6和plus出来后有很多人会使用6的设计效果。如果是我来做的话,我会使用...

    2018-03-21
  • 写给初学者:UI、UX、GUI新手科普指南

    这篇文章会跟各位伙伴简单介绍UI、UX跟GUI三者的差异,同时也会根据自身经验说明一些业界实际的需求状况,有任何问题欢迎透过留言一起讨论喔!注:近期的业界趋势就是,不管你是工程师、设计师、BD、PM还是老板,只要会说一句话,「阿,这样设计不够『直觉』啦,使用者OOXX…」,就有种好像很懂UX的感觉呢!(苦笑)为什么使用者会点进「关于我们」注:近期有不少的Landing Page常常都会用无声的影片搭配黑色屏蔽塑造分为,其实营造的感觉真的还不赖。(当然…影片要拍得好)

    2017-05-12