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

相关推荐

  • 【交互设计】怎么让引导页不再是无用小透明?

    前言在接触一款新应用的时候用户常常会看到一些引导页,但在操作的时候直接当透明的就快速滑过或跳过了,这种时候,大家一定会有“这些引导好无用啊”的无力感,目前甚至有着“如果一个产品需要引导,说明该产品缺乏友…

    2017-08-04
  • 美国交互设计综合类&艺术类院校申请侧重点有哪些?

    回复【交互】,获得专业老师一对一专业指导随着现今数字智能等高科技的发展,交互设计成为近些年众多艺术留学生的热门首选专业。但热门并不代表很多同学都对交互设计有所了解,比如,根据向汉艺咨询的学生情况分析,90% 的同学都分不清什么是到底什么是交互,只是很表面的认为交互就是各种“APP”、“UI设计”或者VR/AR。实际上,即使国外最顶级的院校,你也找不到一所专门设立“APP”的专业,“UI设计”严格上来说只能算是“平面设计”,而设立VR/A...

    2018-04-13
  • 读书会第一期:《简约至上-交互设计四策略》

    你有多久没有静下心来好好读一本专业书了?谁都知道读书重要,然而“工作忙没有时间”、“不知道该看什么“常常成了借口,读书还是一再被耽搁。本周起,集创堂推出“设计经典书籍阅读”系列,每周解析一本设计类好书,深入浅出,提炼精华。也许,看完简介之后,你就有了读原著的欲望,那么我们做这件事的目的就达到了。《简约至上-交互设计四策略》这本书是我罗列的推荐书单里专门描写信息架构的书籍,书籍作者Giles Colborne是物理学出身,参与过航空航天项...

    2018-04-07
  • 看世界之Google对话式交互设计规范

    目录序言1.对话式用户界面及其重要性2.建立友好用户界面的关键-理解对话如何进行设计实践3.设计原则与方法论4.设计走查5.设计检查表6.用户界面工具包最佳实践7.像你的用户一样...有合作精神(待翻译)8.解锁口语的力量(待翻译)9.通过确认逐渐给用户信心(待翻译)10.对话中是没有错误的(待翻译)1.对话式用户界面及其重要性我们已经进入全新并且充满希望的计算机时代,机器学习和人工智能的进步使得对话式界面和自然语言处理得以兴起,通过技...

    2018-02-24
  • APP切图命名规范:介绍一种通用的命名规则

    今天菜心要分享的内容是关于切图命名的规范,由于最近正在总结这一部分内容,所以拿出来和大家一起分享探讨一下。组件_类别_功能_状态@2x.png模块_类别_功能_状态@2x.png

    2017-05-10
  • 2018年04月04招聘岗位

    招聘服务员工资底薪2500加提成收银员2700元加提成招聘电话:8663888,15750516333 13948455099促销员20名,要求:年龄20-40岁,时间15-20天,底薪(80一120),提成+提成工资多劳多得!加微信15849572346了解工作内容,今日下午3点面试掌上明珠全体员工欢迎你的到来!招聘电话:158495723468876688内蒙古泽强医药有限公司招聘职位及岗位需求:一、人力资源专员具体要求:1、年龄2...

    2018-04-08
  • 总结:常见的4条用户体验误区

    近年用户体验的概念越来越火热,从事互联网人张口闭口就谈用户体验,用户体验的概念离我们每个人那么的近。但是用户体验是人人都可以做好的吗?答案是否定的,就像人人都是产品经理一样,能做产品经理的依旧是少数,把产品经理做好的更是凤毛麟角。本篇文章总结4条我遇到的用户体验误区。如果一个流程的信息量是12个单位。x*y=12(x=单位页面的信息量  y=路径深度)例如微信发朋友圈即使断网情况下,当用户在点击发送时,朋友圈立刻就显示数据,给用户反馈是动态发送成功,其实是假数据显示,在这个时候后台还在上传。断网场景极少,朋友圈这个设计满足绝大部分用户的操作顺畅,用户体验良好。不为了极少数使用场景而做真数据展示给用户,那样的话给绝大部分用户感觉加载过慢导致不好的体验。

    2017-04-29
  • 用户体验丨有一点,我特别不服:我一向健康,这本“生命说明书”却告诉我,风险无处不在!

    我与优福的故事聚 集 幸 福 之 因[图片]癌症,是人们的恐惧中心。很多人平时身体棒棒,突然就倒下了,永远的离开。比如我婆家的姑爷,发现时已经晚了,无力回天[图片][图片][图片]。2013年,安吉丽娜·朱莉检测了自己的基因,发现乳腺癌症易感基因患癌率是87%!她提前知道,提前预

    微信热点 2018-02-01
  • 动画进度指示器的最佳实践:好的交互设计会提供反馈

    系统状态的可见性是用户交互设计最重要的原则之一。在使用系统时,用户想要感觉一切都在掌控之中,这意味着在任何特定时间下,他们想要知道并了解他们当前的处境,尤其是在系统正处于繁忙状态时。当系统在处理或者加载进程时,一个等待动画进度指示器是向用户展示系统状态最为常见的形式。

    2017-05-03
  • 交互设计中如何求最优解?来看这篇超全面的分析!

    hey熙:今天想探讨的主题有三个关键字:交互设计、最优解、理性。设计就是解决问题——原研哉《设计中的设计》

    2017-10-20