UI设计师看过来！卡片设计及流行服务介绍，含交互方式揭秘

在这篇文章当中, 我会去说明卡片设计对于UI设计师而言究竟有着怎样的意义, 对三个流行的卡片式服务开展品评。

网页以及手机应用在正彻彻底底地从页面朝着个性化体验转变 , 那些新体验是建立于众多单个内容的聚合之上的 , 可这些内容当下是以能卡的样式来予以呈现的。卡片样式的交互方式正在广泛地进行传播 , 不管是新闻类网站也好 , 又或者是外卖类应用也罢 , 你都能够看到几乎是无处不在的 “电子卡片 ”。

若你对自行设计那种卡片样式的用户界面存有兴趣, 那么能够免费去下载并且体验一下Adobe公司的Experience Design CC。

卡片是什么？

长方形的卡片, 这种卡片通常包含一定内容, 有图片, 有文本信息, 它堪称查看更多详细信息的一个入口。在界面设计里, 卡片因其看起来就跟真实世界中的卡片没两样, 故而具有非常棒的隐喻效果。

早在互联网出现之前, 卡片就在我们身边十分常见, 无处不在了, 商业名片是卡片的一种, 棒球卡片也是卡片的一种, 甚至便利贴同样属于卡片。所以, 对于用户而言, 我们能够更加直观地察觉到这些卡片如同在真实且具体的生活当中一样, 代表着一定的信息。

在现实生活里, 棒球卡片是个很好的例子, 你想了解的关于棒球运动员的基本信息, 全都涵盖于一张小小卡片的正、反两面。

卡片的优点

把卡片式设计应用于各类不同环境之中, 要是能够正确地加以运用, 那么这些卡片式设计就可能够对APP的用户体验起到改善作用。这儿存在着一些诸如下面这样的例子, 它们能够说明卡片式设计为何会对用户界面有益处的原因。

良好的内容组织

卡片于占用较少屏幕空间之际, 将具有组织性的信息划分至不同区域当中。存在用户喜爱此种信息分块之举, 乃是由于其有助于实现快速浏览: 其能够使得用户规避去阅读那些会令他们感觉恐惧且费时的超长段落, 进而让用户得以更迅速地捕捉到自身感兴趣的部分。类似呈现文本段落属于对语句予以组织的成果, 卡片乃是聚集多样的信息从而形成一个连贯的内容体。

卡片上的信息布局整齐简练。

摘要性的格式易于消化

卡片能够被用以容纳近乎任何形式的信息, 其具备的摘要性信息属性, 便于用户迅速消化, 用户借助卡片能够轻易访问他们感兴趣的内容, 从而使得用户乐意参与到对卡片的浏览以及操作之中。

用户可以快速浏览、滑动卡片。

视觉上赏心悦目

通常而言, 基于卡片式的设计, 严重依赖其视觉效果, 而对此卡片本身, 又对图片有很强的依赖性, 多项研究指出, 图片确实能提升网站或应用程序的设计效果以及浏览体验, 这是因为图片能够快速且有效地吸引用户的注意力, 所以, 在卡片之中若能突出使用图片, 自然会对用户产生更强的吸引力。

卡片以视觉信息取悦用户。

易于响应式的设计

关于这卡片, 最为关键重要之处在于, 它们近乎能够实现无限的变形。卡片样式的设计, 在针对桌面电脑以及移动设备时, 均能良好地发挥作用, 缘由在于, 它是以一种更利于用户去进行消化吸收的方式, 向用户呈现相应内容。恰好是由于卡片身为一个内容的容纳载体, 能够十分轻易地实现放大或者缩小操作, 所以针对于具备响应式特性的设计而言, 卡片当属一个极为恰当适宜的选择。卡片在多个不同设备之间, 能够营造创立出一种统一且独立的美学效果, 而这正是它能够在不同设备之间如此轻易去创建达成一致体验的缘故所在。

卡片非常适合响应式和移动端设计。

为手指而设计

卡片对于手指操作而言完全适配, 看上去好像也是专门针对移动端所创制的样式。和现实里的卡片一样, 数字卡片的运用能给用户带来舒适的体验。用户不用去思索该如何进行操作, 很轻易就能明白通过翻转卡片去查看更多信息, 或者滑动来查看更多卡片。

卡片具备着儿乎是没有限制的可操作性, 他们能够将动画以及运动予以充分地运用, （这里是动图）

卡片式设计的最佳案例

卡片式设计的关键所在是桌面端以及移动设备的交集处设计, 于互动性与可用性之间找寻平衡的点。可是成功的卡片式设计得拥有清爽洁净的美学特性, 而且能够让用户直接顺利地交互。

瀑布流

卡片于瀑布流当现之时, 即可造就一系列契合自然时间轴之事件。如Facebook于news feed里展示最近时段内容之快捷预览。此Facebook之news feed乃以卡片区分内容之无尽瀑布流。卡片在此处之关键在于分解内容, 其把内容析为无尽瀑布流, 且令内容便于分享。这种交互模式致使用户乐于分享平台之信息。

Facebook是卡片式设计易于承载信息的很好案例。

易于发现感兴趣的内容

卡片能够让相关内容自然呈现, 进而让用户发掘自身感兴趣的内容, 设计师无人不晓得的设计创意平台Behance便是如此操作的。卡片式设计作为最适宜艺术创意类平台展示的方式。

Behance采用卡片式布局打造直观的用户界面。

国外有一款手机交友 APP 叫 Tinder, 它利用探索发现机制构造卡片模式, 使使用它的用户习惯去探索更多内容, 进而让 Tinder 成为最流行的移动端应用之一, Tinder 的交互模式是向左滑动表明不感兴趣, 向右滑动意味感兴趣, 这种卡片式交互模式令人好奇还上瘾着, 因为用户只得接继续滑动查看下一个究竟是何种情况。

工作流

卡片能够轻易地把处于一定范围之内的任务予以归类, 有着这样出色表现的是Trello这个任务管理应用, 其专门设置的工作板是呈现为卡片样式的模块, 之中每一张卡片所表征的都是不同种类的任务。

Trello的工作板上充满了卡片。

对话框

内容的承载器是卡片, 所以它对于展现操作行为而言也挺适宜。参照iOS自身的AirDrop服务, 当你收到值得信赖的数据传输请求之际, 桌面就会弹出提示卡片, 向你请求接受或者拒绝传输。苹果的截图针对照片, 然而开发者能够把优惠券、歌曲或者网络连接等诸如此类的任何事物放置在卡片上。

控制面板

当卡片式设计用于组织各异类型的内容之际, 其精确度显著达到极高程度。运用卡片, 你能够把信息整理成契合逻辑的分组, 且能够依据特定的上下文予以排序。对于一个存在分组需求的集合来讲, 合理借助不同类型的卡片相较于传统的列表项搭配分割线和标题, 其视觉效率要高出许多许多。

基于卡片的设计语言

2010年, 微软推出了一种设计语言, 名为Metro, 其一个关键设计原则是, 要更好的去关注应用的内容, 而此原则是通过采用扁平化的元素、排版以及卡片从而得以实现的。有一种卡片, 名为Metro卡片, 它可不单单只是单纯的设计元素这么简单, 它还给提供了必要的内容, 以及交互。

卡片设计的更多细节简约

如果你打算着手开展卡片设计工作, 那么简约务必成为你在整个过程中始终铭记于心的一项准则。Carrie Cousins针对此情形给出了一条颇具价值的建议: 卡片在进行设计时能够涵盖多个不同的元素, 可处于每次的设计操作当中, 最好着重凸显其中的某一个具体的内容或者特定的信息。通过依循这般方式来开展设计工作，能够让用户在进行选择的时候更加具有精准性, 与此同时还使得所要传达的内容能够顺利实现分享。

ReaLync的列表呈现为卡片形式, 通过这种形式去显示最为重要的地方信息。

卡片和响应式设计

我们都清楚响应式设计有着重要意义, 目的在于使自身的应用以及页面于不同尺寸的屏幕上面能够运行得顺畅自如。当我们针对不同屏幕展开设计时, 理应充分去运用屏幕特征以及卡片之中的内容属性, 如此一来才能够按照屏幕的大小从而快速而且轻松地对内容作出调整。卡片式设计跟响应式框架具备良好的兼容性, 它能够轻松去适配不同的屏幕尺寸, 并且自适应地予以展示。

那被数位转化后的卡片, 具备着能够以不一样的方式予以操控这样的特点, 此乃它相当突出的一个优势, 比如说在移动电子设备之上, 卡片能够呈现出横向排列, 并且又能够进行纵向排列。

手机端竖屏的Verge

电脑端的Verge

在同一个布局之中, 卡片一般对宽度予以限制, 然而不会对高度进行限制。其最大高度被限定于展示平台的可视空间所含的高度, 不过有时候也是能够实现扩展的。

卡片和排版

一切关联卡片设计之物都理应易于被阅读理解, 设计师需将可读性视作重要目标:

结语

为啥卡片式设计会这般流行, 盼你能明白, 且要相信这趋势会一直兴盛下去。这趋势不会很快就画上句号, 于APP设计而言, 卡片式设计会是必然趋势。卡片式设计能经久不衰, 是因其具备极佳的可用性。卡片可不只是空有其表, 它属于设计统一体验里极具自由性的布局形式。现在人们获取信息的速度日益加快, 卡片能无视设备差异, 给用户呈上更优质的服务。这同样是以用户体验为核心的设计。

继续浏览有关 卡片设计UI设计 的文章