帮你梳理:卡片式UI的设计最佳实践

卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。


卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。

帮你梳理:卡片式UI的设计最佳实践

卡片这种UI元素一直是以小巧整齐的内容容器的形式而存在着。当我们探讨清晰平衡、富有美感、简约时尚而又具备良好可用性的设计方案的时候,卡片式设计几乎是不二之选。早年间的Pinterest 和Facebook 是卡片式设计的先驱者,随后Google 通过 Material Design 几乎标准化了卡片式设计,现在你会发现卡片式设计,几乎已经深入到各个行业、领域的UI设计当中。

最佳实践(best practice),是一个管理学概念,认为存在某种技术或者方法使生产管理实践的结果达到最优,并减少出错的可能性。也就是我们常说的“最佳解决方案”。

帮你梳理:卡片式UI的设计最佳实践

最初是 Pinterest 采取了这种使用卡片作为信息组织的基本元素的思路,使得网页中多类型信息组织有了更好的用户体验设计方案,并随后引发了“瀑布流”设计风潮。之后多年的积累和探究,卡片式设计有了长足的进步和相对系统的设计思路,今天的文章,我们将探讨最常见也是最实用的5种卡片式设计的最佳实践。

1、遵循“一卡一概念”的规则

每一个卡片应当承载一种概念,其中内容不应当混搭而复杂。卡片式设计当中,卡片可以橙子啊多种多样的信息和元素,但是单个卡片应当保持其中内容属性的纯粹性和直观性。这样用户会更轻松的选取他们想要的内容,或者分享他们眼中最合适的内容。

帮你梳理:卡片式UI的设计最佳实践

2、让整个卡片都可被点击

根据费茨定律(Fitts’s Law),用户应当可以点击卡片的任何一个部分来触发其中的内容,而不只是图片和文本链接。更大的触摸和触发范畴是卡片本身的优势所在,不论是在移动端的触摸屏上,还是以键盘鼠标为主桌面端上,让整个卡片都可被点击明显拥有更强的可用性。

帮你梳理:卡片式UI的设计最佳实践

小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。

3、让卡片具有视觉愉悦感

好的视觉设计和良好的可用性是卡片式设计的拿手好戏。卡片本身的良好承载性,使得它稍加打磨就可以拥有不错的美学特征,好用和漂亮结合到一起,会让用户对卡片式设计着迷的。

帮你梳理:卡片式UI的设计最佳实践

当你在设计实战当中使用卡片的时候,你应当特别注意下面的几个部分:

图片

卡片是图片的“重度用户”,甚至可以说卡片“特别擅长”展示图片。研究证明,图片本身能够提升设计的质感,而图片和卡片式设计的结合无疑能够让卡片本身对于用户的吸引力,再往上提升一个高度(前提是图得找对)。

帮你梳理:卡片式UI的设计最佳实践

阴影和渐变

阴影和渐变是最能让用户将UI中的卡片和现实中的卡片联系到一起的元素。在设计的时候,你应当仔细观察一下卡片在现实世界中的质感,光影的分布和走向,否则阴影和渐变太假就不好了。

帮你梳理:卡片式UI的设计最佳实践

排版

当然,你还可以借助文本来吸引用户的注意力。卡片中的文本内容应该易于阅读,容易理解,所以,你应当确保它具有最大的可读性:

  • 选择简单的字体和易于阅读的配色方案(文本内容应该是清晰可见的,放置在纯色背景下,拥有足够的对比度)
  • 尝试控制字体的数量,对于绝大多数的情况,单个字体足以应付。

帮你梳理:卡片式UI的设计最佳实践

小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

4、限制卡片中的内容

卡片通常不大,并且大多是作为详细信息的入口而存在的,所以它本身不应当承载太多细节。当你试图向一张卡片中加入太多的内容的时候,会让其变得过于臃肿,不论是太长还是太宽都非常难看,而且会失去它作为一个“卡片”的隐喻。

下面就是一个采用卡片式设计的案例。注意中间的卡片,它的问题在于其中填充了太多的内容,这些内容太难以查看了。

帮你梳理:卡片式UI的设计最佳实践

5、充分利用动效

如果动效用的好,用户体验会有极大的提升。动效能够帮助用户在基于卡片的UI当中更好的定位,并且建立不同卡片状态之间的视觉关联。

视觉提示

视觉提示能够帮助用户更好的了解如何同界面进行交互。当需要为用户展示具体的某个功能如何操作的时候,它就显得颇为有用了。

帮你梳理:卡片式UI的设计最佳实践

视觉反馈

在UI设计当中,视觉反馈是极为重要的组成部分。视觉反馈的工作原理很简单,视觉反馈帮助用户确认他们的交互已经完成。在现实生活中,物品通常会对我们的操作给予回应,比如点击开关会有力量的回馈,以及“喀哒”一声响。在桌面端UI中,鼠标光标悬停在可交互的控件上之时,箭头会变成按钮,这也是UI元素给予的反馈。悬停动画增加了功能的可发现性,同时使得体验更加有意思。在移动端和卡片式设计当中更是如此。

帮你梳理:卡片式UI的设计最佳实践

使用悬停动效触发更多的选项。比如在下面的案例当中,光标悬停之后,用户可以标记、回复、转发或者删除当前信息。

帮你梳理:卡片式UI的设计最佳实践

放大

这个放大的动效连接了预览和详情视图:用户选中卡片就可以看到对应的详细信息。这个动效确保了用户能够联系上下文。

帮你梳理:卡片式UI的设计最佳实践

结语

卡片是UI设计师发挥创意的画板,它不仅仅是一个形似卡片的UI控件,它还是创建优质内容,营造优质用户体验的重要布局手段。

 

原文地址:medium

原文作者:Nick Babich

译者:@陈子木

译文地址:http://www.uisdc.com/best-practices-for-cards

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

(0)
CatherineCatherine
上一篇 2017-05-13 13:56
下一篇 2017-05-13 15:56

相关推荐

  • Hello UED!

    今天,UED.xyz正式上线,我们期待能尽快成长,以期能承担帮助国内交互设计师寻找灵感和创意的站点。 我们会专注交互设计,我们的域名是https://www.iamue.com和UED.xyz,请记住我们网站叫艾欧交互学堂。 如果有同学…

    交互设计 2014-09-02
  • 【探索Facebook】Instant Articles 新方法来创建快速、互动、自动播放视频的文章

    文章前面就是演示视频,建议先看视频哦,流量党请找个WIFI,土豪就当我没说~! 我们很高兴地介绍即时文章Instant Articles,快速,互动体验阅读的文章在新闻内容。 使用在Facebook应用程序加载的照片和视频很快相同…

    2016-01-16
  • 让用户“看见”,是一种心机行为哦

    让用户“看见”的手段很多,但没有一种是永远成立的。找到和用户习惯或目标匹配的场景和交互行为,才能获得最好且最有效的体验。

    2017-04-29
  • 如何培养交互设计思维?

    什么是交互思维?上网找度娘会有一堆交互设计的方法,但这里要告诉大家的是,交互设计应具备的思维方式。在国内交互设计并不成熟,未来还有很长的路要走,所以需要我们对其进行了解,首先培养交互思维方式。以下几点可以培养你的交互设计思维:1、设计不能脱离目标交互设计师沟通方式是:“我们需要为想要购买商品的用户提供信息,可选的商品数量有N个,用户最感兴趣的信息有……,有的人不会看但必须附上的信息有……”。不要觉得这样做很矫情,这样可以将不同的信息和重...

    2018-02-01
  • 上海benhealth招聘实习生 150/天

    回复「简历」,送你优秀简历模板。岗位岗位实习生岗位职责参与公司移动端、小程序以及 PC 端 Web 产品的交互设计;与产品经理和开发人员共同完成产品开发。岗位要求1. 平面、视觉传达相关专业本科或以上学历;2. 熟悉 Axure 和 Sketch 等交互设计工具;3. 热衷网络文化,熟悉网络热点和主流 App;4. 良好的沟通学习能力,工作热情高,责任感强。薪资福利150 元/天工作地点上海简历投递投递邮箱:jun.pan@benhea...

    2018-04-08
  • CHI2017 交互设计在较热门的研究领域如何继续创新?

    什么是CHI? 今天跟大家分享一个学术会议SIG CHI,全称Special Interest Group on Computer-Human Interaction,顾名思义,这是研究人与计算机互动的一个学术会议。但希望大家别被「学术」两个字吓到,因为这个会议…

    2017-05-31
  • 一波三折,卢卡斯叙事艺术博物馆方案的前世今生

    📌 编辑 | Ann3月14日MAD建筑事务所卢卡斯叙事艺术博物馆动工卢卡斯叙事博物馆效果图(洛杉矶)©MAD“ 这是一家艺术博物馆,但我更把她定位成关于人类的博物馆。流行艺术可以洞察社会,反映人们想变成什么,要什么,和自己真正是什么——这就是关于人的故事、历史和信仰体系的叙事艺术。我经常笑说,需要有博物馆去支持那些人们少闻但乐见的罕见艺术。这座博物馆就是我达成这个愿望的梦想。谢谢马岩松,我欣赏的天才建筑师。我心里一直想着这应该是一个极...

    2018-03-17
  • 社会化分享按钮:一种糟糕的用户体验

    分享按钮被滥用了吗?“通过我们定期的分析,GOV.UK网址被分享到Facebook和Twitter共有14,078次——只占6,800,000总浏览量的0.2%。”“我们删除了FB按钮,Facebook的使用流量增加了。原因如下:用户在其时间表上分享来替代了“喜欢”文章。

    2017-05-03
  • 「确定」和「取消」按钮哪个该放在左边?

    永恒之战 “确定/取消”党与“取消/确定”党在这场旷日持久的按钮排序之战中,各执己见,至今未能统一。 “确定/取消”党的见解: 符合自然说话/阅读习惯。日常生活中当我们提出问题并伴随肯定与否定的选择时,往往会这样…

    2015-12-10
  • 2014年最佳的十款交互设计工具

    在设计之初,UI设计师所提供的视觉稿和最终的可交互原型之间,需要交互设计师借助工具来补足,让静态的视觉转化为富有生命力的可交互界面。2014年所涌现出来的这些交互设计工具,在不断迭代升级中走向了成熟,易用…

    2015-01-15