咋样接纳“卡片式设计”进步用户体验

一、卡片是咋样?

卡片平时是指这么些含有一定图片和文书音讯在内的一个长方形,作为针对更多详细信息的一个输入。现近期,在确保界面具有能够可用性的同时,卡片式的规划甚至变成了平衡界面美学的默认做法。因为卡片很有利的来得出界面中的内容由不同的要素构成的。

1、特出的隐喻效果

因为看起来似乎真实世界中的卡片一样,在界面设计中的卡片具有异常棒的隐喻效果。其实,在运动设备现身在此以前,卡片已经遍布我们周身——商业名片、棒球卡片、扑克牌等等,它决定成为一个行使及其广大的实业性质的互相模型。因而,对于用户来讲,他们能更直观地觉察到界面设计中的那个卡片如同实体卡片一样都表示一定的音讯。

在高速的传递信息时,卡片是一个卓绝的工具。拿棒球卡片来讲,你需要驾驭的棒球选手的着力音信就隐含在一张小卡片的正反两面。

2、优良的内容协会

卡片在挤占较少屏幕空间的事态下将音信有社团的剪切到不同的区域中。类似于文本段落是对讲话的团社团结果,卡片聚集多样的信息形成一个贯通的内容体。

Facebook充分利用卡片式的统筹将各样事件的大概新闻打包到卡片中。卡片式的布局规划正是在比如
非死不可 这样的大亨的引领下变得流行开来。

3、视觉上舒心

遵照卡片式的宏图一般都严重看重于其视觉效果。而卡片本身又对图片有很强的依赖。多项探究都早就提议图片真的能够提高网站或应用程序的筹划功用和浏览体验,因为图片能够快捷有效地掀起用户的注意力。由此,在卡片中倘诺能出色使用图片,这自然会对用户暴发更强的重力。

不妨看看
Dribble——一个出名的注意于显示设计师随笔的社区网站,不得不说,卡片式的统筹真正是表现这类音信的最合适的法子。

二、如何设计卡片?

在同样的布局下,卡片应该保障小幅不变,但可观可以不同。其最大惊人受限于所在阳长沙可用空间的最大低度,不过那多少个惊人也可临时扩张(比如,扩大展现出评论区)。

卡片可以是一定低度或可变中度

从统筹美学的角度来看,卡片应该有所自然的圆角和影子。因为圆角使得卡片看起来更像是一个情节块,而阴影则能展现出层级深度的效劳。

这个元素在不分流用户注意力的前提下为设计增加了一些桂冠,它们也使得卡片跟页面间看起来有层次感。

除此以外,我们也可以采纳动画和动态设计。

三、卡片的助益

一经应用得当,卡片可以在肯定方面提升应用程序的用户体验。因为它们的效率特色和形象,它们自己成为一种采用上更具直观性的诱惑人的界面元素。

1、摘要性的格式易于消化

你应当已经知晓现目前是一个情节为王的一世,而卡片几乎可以被用来兼容任何情势的信息,其摘要性的音信属性也容易用户神速消化。
就那点而言,用户通过卡片可以很容易地访问到他们感兴趣的情节。进而让用户愿意参与到对卡片的浏览和操作中来。

卡片集带有不同品类内容的卡片

2、可面向响应式的设计

有关卡片最重点的业务是它们几乎是可以无限变形的。卡片式的统筹在桌面电脑和运动设备都干活可以,因为它以更便于用户消化的点子向其显示内容。正因为卡片作为一个内容容器,能很容易的放手或缩短,所以对于响应式的筹划来说,卡片是一个特别合适的抉择。 

末段但一样任重而道远的少数是,卡片在多设备间能创建出一个一律独立的美学成效,这就是怎么它能在不同的设备间这么容易的创始出一致的体验的缘由。

3、直观的可操作性

卡片的动作应该是面向手指的。对于活动端的应用程序来说,这是卡片之所以流行起来的一个重中之重原因。这多少个卡片跟实体的卡片遵照同样的主意起效果,让用户感受到很清爽的感受过程。用户不需要再去考虑究竟该如何操作卡片。
他们欣赏卡片的这种简洁性,并可以直观的知道出翻阅一张卡片就是查看更多信息,滑动则是切换不同的卡片。

四、在啥地方使用?

1、信息流

卡片现身在一个消息流中时,便能够创制出一多级符合自然时间轴的风波。想想看
Facebook在新的音信流中是怎么着行使卡片来描述一个轩然大波概述的。虽然总的音讯流是无界限的,可是每一个卡片都是彼此独立,且含有了自然的可供操作的始末。

2、用于发现感兴趣的始末

卡片允许相关的情节显著,允许用户发现她们感兴趣的内容。看看 Tinder
的卡片情势:你在向左滑动或向右滑动的时候,其实就是在检索适合您尝试的人。

Pinterest
在音信的动态中行使到大头针(用户找到自己感兴趣的内容可以贮藏),吸引用户在不停的浏览中上瘾。

3、对话框

既然卡片就是一个情节容器,那么它们也可以很好的意味动作。一个卡片里面的着力动作就是卡片本身。
想想看 Apple 设备上的 AirDrop
,当你收到一个数码传输请求的时候,一个卡片会弹出来指示您是允许或者拒绝。

www.316.net亚洲必赢,任凭你挑选哪一项,都只有一个动作

4、工作流

卡片很容易将早晚限制的任务拓展归类。拿 Trello 来举例表达再适合可是,从
Kanban
里面看,所有的管制项都是一点一滴遵照卡片的,每一个板子了都填充着卡片,而各类卡片都代表一个独自的职责。 

五、不要采纳卡片的地点

1、同种(同类)内容

对此这些没有太多动作的同种(同类)内容而言,比较于卡片式的统筹,使用列表(网格)的表现格局是更合适的不二法门。

左:在此处运用卡片分散了用户连忙浏览的注意力

在图片库中采纳卡片也是不必要的,此时选拔网格这种彻底轻量的法门会是更好的选料,如下例中:

2、大的屏幕尺寸

卡片式的音信展现格局可能在小屏幕上会异常正确,在大屏上的话单就其视觉效果来讲,也如故很棒,然而对于用户的阅读精晓速度就会带来很不佳的熏陶了。比如大屏上的
Pinterest :

3、重新规划现有的应用程序

比方按着文中那一个新的视觉角度来看,那个原本认为您的应用程序还挺易用的用户可能就不会买你的账了。
你应有尝试从用户这里获取反馈,搞领会他们想看到的东西。有了禀报后,你可以展开设计修改甚至重新规划,然后看看在用户这里带来的变动。

六、结论

自我期待通过本文,你能够知情到何以卡片式的宏图会越加流行开来。而且我深信这一趋势在长时间内不会消失。因为卡片不光浏览起来不难于,它们更是在开创一致的用户体验时最为灵活的布局情势之一。现如今,人们在情节消费面前更注重神速的找到满足的情节,而卡片既然能很好的起到效益,且不受设备影响,难道不是很好的挑选吧?

假诺喜欢自己的篇章,请点个;假诺有任何意见或意见,请留下您的评论。更欢迎各位持续的珍重,谢谢!

译自:https://uxplanet.org/using-card-based-design-to-enhance-ux-51f965ab70cb\#.2uys07u81