2016年网页设计趋势:卡片式设计如何在占尽优势?

在现实生活在,视觉信息总是很吸引人的眼球,卡片设计的应用不仅仅只是一种趋势。

2016年网页设计趋势:卡片式设计如何在占尽优势?

在现实生活在,视觉信息总是很吸引人的眼球,卡片设计的应用不仅仅只是一种趋势。

有数据显示2014年 移动端使用率远远高于桌面端,网页设计都能很好的适应小屏幕。这个结论就是:简单的界面风格,比如:扁平化设计极简设计,尤其是卡片设计比往年都要流行。

2016年网页设计趋势:卡片式设计如何在占尽优势?

图片来源:Formerly Yes

好的卡片设计不会使用太多的加载时间,同时它也能在不同的屏幕上切换自如。小的模块对于用户来说更能吸引注意力(尤其在移动端),它在Pinterest上培养大家的习惯,然后在Facebook和Twitter上面推广,卡片设计能应用于各个领域的网站设计。

在这篇文章中,我们将会探讨卡片设计的崛起:为什么它们有用,它们如何适应于响应设计和material design,在未来又会发生什么?

什么是抽屉式设计?

为了了解抽屉式设计,你首先得先了解卡片是什么。

每一个卡片拥有属于自己的信息。一张卡片能包含所有信息 — 视觉、文本、链接等等— 但是所有这些内容都是一张卡片里面的内容。

这种独立填满整个屏幕抽屉式展现信息的方式 被Guardian 叫做“抽屉模式”。它让用户更加直接清晰的看到整个界面,也有利于用户快速的寻找他们需要的信息。(最重要的是,这种方式能够有利于我们自己控制,下面的文章我会解释为什么。)

让人觉得很有吸引力的是:它们使用的卡片界面是相互叠加的。

2016年网页设计趋势:卡片式设计如何在占尽优势?

照片来源于:Trello

Trello 能让用户创建他们自己想要的任何卡片列表。所有人都能创建“to-do”卡片 ,同时能够按照自己的需求进行分类。

Trello不仅让卡片具有灵活性,而且还能被用户随意摆放。Trello的成功是因为相较于传统列表式布局,它让用户感觉很简单。

UI卡片在移动端和响应式设计中的应用

正如上文提到的,卡片为响应式框架提供了出色的兼容性,因为一些像Des Traynor把他叫做“网页的未来”

这种设计能够在移动端随意很好的转换。

2016年网页设计趋势:卡片式设计如何在占尽优势?

来源于:The Verge

首先,它能够自己扩展或者收缩去适应任何屏幕的尺寸。设计师可以很灵活的控制卡片的比例(几组卡片能够更好的适应彼此)。例如,你可以设计固定的宽度和一致的间距来适应可变动的高度。

比较上面The Verge的网页截图和下面的移动端截图:

2016年网页设计趋势:卡片式设计如何在占尽优势?
来源于:The Verge  (移动端)

注意他们两个的文本信息、图像和颜色的风格都是一致的。卡片设计让用户在不同的设备上有一致性的体验。

你可以看到这个优势在UXPin的e-book里面被利用。注意他们从移动端到全屏的界面是非常清晰的。

UXPin移动端界面:

2016年网页设计趋势:卡片式设计如何在占尽优势?

UXPin全屏的界面:

2016年网页设计趋势:卡片式设计如何在占尽优势?

来源于:UXPin

另外一个优势是如何让卡片适应人们手指操作。在触屏上,操作它就像按动一个按钮一样不需要花费多少精力。这个想法很简单:点击卡片,让它与内容交互。

菲茨定律适应于网页设计展示那样,点击区域越大就越容易相互作用。还记得我们有多少次挣扎在移动设备上点击一些文本链接么?

卡片和Material Design

Material Design很依赖卡片式设计,卡片描述在Material Design指南里值得你去寻找一个好的解释。

2016年网页设计趋势:卡片式设计如何在占尽优势?

照片来源于Google

卡片设计的未来

卡片设计模式不断的重塑自身以适应新的挑战,而响应式和移动端也许会受最大的影响。就像2015&2016网页设计趋势 描述的那样,这种设计流行的转变是因为 Material Design 在安卓系统里面的应用。

1.技术

卡片不可能永远是静态的。随着网络性能的提高,也能够支持更丰富的多媒体内容。你可能会看到更多细节的元素,比如自动更新内容但是不会影响整个用户体验。

2016年网页设计趋势:卡片式设计如何在占尽优势?

图片来源于:Use Your Interface

视频能更换图片(设计师思考这个问题很多年了)也许会变得很流行。Use Your Interface(上图),这些GIF动画功能让整个页面体验非常愉悦。

2.深度的交互

在不久的将来,卡片也许能够变得更加的有创意。就像我们看见 Material Design,它非常依赖个人的交互,随着自动排序和实时更新等功能的更新(比如天气预报)。

2016年网页设计趋势:卡片式设计如何在占尽优势?

图片来源:Google

Windows手机里面已经开始应用卡片式自动分类方式,很有可能其他移动手机也会使用这种方式。

3.尺寸

图片并列的布局趋势,也让卡片更好的使用大尺寸屏幕。

大卡片上能布局更多的细节和复杂的字体,它从视觉上让用户感觉很舒服。大小卡片交替的时候,大卡片在视觉上更让人感觉舒服。

2016年网页设计趋势:卡片式设计如何在占尽优势?

图片来源:How Arkitekter

Arkitekter(如上图)是怎样应用大尺寸和中等尺寸作为信息布局的。有些卡片有链接,有些卡片是静态的信息。大小不同的卡片呈现方式,让整个页面更有呼吸感。

4.可穿戴的

多亏了谷歌眼镜,它让卡片的UI设计在穿戴设备上奠定了基础。

2016年网页设计趋势:卡片式设计如何在占尽优势?

图片来源Google

尽管有很多人认为谷歌眼镜会失败,但是也有一部分人认为它有市场。不管怎样,穿戴设备的UI设计必须要很好的利用空间来设计,而卡片设计是它最实用的选择。

要点

在所有的媒介和设备上,卡片设计已经成为设计常用的一种方式。他们当前的形式可能会随着技术的发展有所改变,但是他们确实是存在的。

毕竟,这些布局并不是一个表格。别忘了,在不久前卡片只是一张包含内容的纸片而已。

 

作者:

原文链接:http://designmodo.com/web-design-cards/

译者:设计师Minz(微信号Designer_Minz),一枚成长中的设计师,点滴积累,人人都能成为设计师。

本文由 @Minz 翻译发布于人人都是产品经理 ,未经许可,禁止转载。

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

(0)
CatherineCatherine
上一篇 2017-05-26 04:44
下一篇 2017-05-26 06:54

相关推荐

  • 用户体验再度升级,共享租车现里程碑式进步

    近日,国内共享租车领导品牌凹凸租车发布最新APP 4.0版本,该版本通过优化匹配算法和系统功能,在业内首度实现共享租车平台零拒单,免除了用户交易后租不到车的后顾之忧。同时,新版凹凸租车上线了“精选优车”频道,全面提升用户的租车体验。零拒单,用户所租即所得在共享租车行业,用户租车后遭遇车主临时拒单或取消的现象成为一大痛点。在凹凸租车4.0新版本中,平台通过车源端优化、车辆接单标准化、智能推荐匹配算法和系统功能升级,实现了工作时段的无拒单、...

    2018-02-01
  • 蔚来ES8正式上市 | 重新定义汽车用户体验

    就在刚才,首届NIO Day蔚来日在北京五棵松体育馆圆满结束。蔚来ES8也正式上市并开启预订。近万名蔚来好友相聚于此今晚,这些信息你不容错过:蔚来ES8正式上市 公布售价蔚来ES8售价公布ES8基准版补贴前售价44.8万起,限量1万辆创始版补贴前售价54.8万,用户也可以选择电池租用方案,车价比常规购买低10万,每月支付1,280元电池月费,同时可享受电池升级服务。ES8上台亮相源于赛道冠军的极致性能4秒SUV俱乐部最大功率480千瓦(...

    2018-02-02
  • 搜索结果页优化的10条最佳实践方法【UXRen译#175】

    作者:Nick Babich   |  翻译:猫猫DE爪,校审:兔兔瑶   搜索就像是用户和系统之间的对话:用户键入他们的信息需求作为问询关键词,系统则展现出它的回答作为一组结果。搜索结果页是搜索体验的一个重要部分:它提…

    交互专题 2023-03-03
  • 页面停留时间和网站停留时间详解

    摘要:一、页面停留时间与网站停留时间是如何计算出来的? 假设用户访问了网站的主页(Home)。分析工具将这个访问者标记为一个Visit,接着这个访问者又浏览了另外两个页面(Page2和Page3),然后他离开了你的网站…

    2014-12-16
  • 项目管理能力提升四要素

    摘要:企业在应对快速发展的经营活动时有两个管理将起到关键性作用,一个是战略管理,一个是项目管理。战略管理立足于企业的长远和宏观,考虑的是核心竞争能力,而项目管理是实现战略并支持企业快速健康发展的手段和保障。认识项目管理美国项目管理协会主席保罗说:“在当今社会,一切都是项目,一切也将成为项目。”项目,是在一段时间内为完成某一独特的产品或提供独特的服务所进行的一次性努力的过程。只要有目标和过程,就可以成为一个项目。譬如:设计开发某一产品功能...

    2018-03-25
  • 交互设计与服务设计视角下,谁才是用户,什么又是产品?

    服务设计,是2017-2018比较火热的一个专业了,相比于交互设计或工业设计,服务设计更关注与利益相关者之间的关系。今年的Aalto New Media 专业的申请中,有明确要求需要根据两篇文章的读后感写一篇Essay(1),其中一篇是“How to Fix Facebook—Before It Fixes Us(2)”,深入阅读之后,有一个明确的观点想和大家分享一下。之前从交互式设计角度或者用户研究角度对于 Facebook 的分析文...

    2018-05-02
  • 增强现实正在提升用户体验

    当苹果的CEO Tim Cook在一次季度财报电话会议上,向分析师说出“增强现实将会改变一切”这句话时,人们都感到了一丝震惊。而现在看来,库克对增强现实(AR)的评价似乎并没有过分夸大。事实上,增强现实技术正在为各种应用创造出一个全新的范例。毕竟,我们已经很快地从在电脑键盘上打字,“进化”到了用智能手机打字或滑动屏幕,又或者是用语音来告诉Alexa或Siri来帮我们做什么事。现在AR把我们带到了全息计算时代。Animoji、Pokémo...

    2018-03-28
  • 用户体验设计与创新怎么做?首期高端讲座,听世界知名企业用户体验设计总监为你答疑

    4月28日一大早海信学院的阶梯教室就已经满!满!都!是!人你看,现场是这样的还有这样的大家聚精会神,全神贯注地在做什么?原来,咱们首期高端讲座开讲啦!大家都知道,做高质量好产品一直是咱们集团的重点战略在高端讲座的首期,我们就邀请到了世界知名企业用户体验设计总监现任韩国某体验设计公司总裁Yoo老师给大家进行分享三个小时的讲座中,Yoo老师阐明了他对用户体验设计创新的理解他提到,大部分大企业往往就问题而直接解决问题,而忽略了去进行充分调查,...

    2018-05-05
  • 未来交互:Facebook首次公开内部机器学习平台,启动AI帝国

      Facebook 现在在信息推荐、过滤攻击言论、推荐热门话题、搜索结果排名等等已经使用了大量人工智能和深度学习的技术。在Facebook上,还有许多试验能够从机器学习模型中获利,但是目前,对于很多没有深厚机器…

    2016-05-11
  • 深入智能商业用户体验 —— 艺土咨询(ETU)

    4月10日下午,本协会会长王日华和副秘书长王索飞等一行前往位于长宁区凯旋路166号上的本协会理事单位上海艺土界面设计有限公司走访,该公司董事长林钦、资深用户体验设计师梁雯琦热情接待了王会长一行。在该公司的会议室,林总首先用PPT形式向王会长一行简单介绍了艺土公司的发展情况。她说,艺土(ETU)自2004年成立以来,深耕用户体验行业14载,通过与160多个知名企业进行760多个项目的深度合作探讨,帮助企业通过洞察市场价值、理解用户价值需求...

    2018-04-12