卡片式设计的最佳实践分享
卡片本质上是一个简单的信息容器，信息量有限，但设计干净整洁。现如今，在保证界面具有优秀可用性的同时，卡片式的设计甚至成为了平衡界面美学的默认做法。作为最初由Pinterest和Facebook这样的终端服务引入的一种新的设计方案，今天卡片式设计的影响力正在多个行业蔓延开来。
如果设计合理，卡片式的设计将能够在一定程度上改善应用程序的用户体验。在本文中，我将描述5种有用的卡片设计指南，并提供一些有用的示例。
一、遵循规则“一张卡片一个概念”
一张卡片内所有内容应该只对应同一个要表达的核心主题，不过卡片内可以包含多种设计元素，但是每个元素应该只专注于同一主题下的某一个信息点，能够让用户自主选择他们所关注的信息点或进一步分享。
二、使整张卡片都可点击
要遵循费茨定律，允许用户点击卡片的任何部分，而不只是文本链接或图片。 较大的可点击区域大大提高了触摸屏设备和基于鼠标的设备的可用性。
温馨提示：使用轻微的阴影效果来凸显卡片跟背景之间层级深度是一种常用的设计方法，从视觉上作为卡片可点击的一种隐喻效果。
三、视觉上赏心悦目
是什么使卡片发挥作用？是其优秀的设计样式和可用性。通过赋予卡片一定的美学设计，你的卡片既能让用户感觉到熟悉，又仍然富有创意。
当开始实际设计时，您需要关注以下几方面：
1、图片
图片是基于卡片的设计的一个重头戏。多项研究都已经指出图片确实能够提升网站或应用程序的设计效果和浏览体验。 因此，在卡片中如果能突出使用图片，那自然会对用户产生更强的吸引力。
2、阴影和渐变
阴影和渐变在帮助用户建立起对于卡片式设计和实体卡片的映射关系的认知时有很自然的隐喻效果。但是请务考虑清楚该如何使用阴影和渐变：如果阴影投射到卡片所有的角落和侧面，那么作为实体卡片的隐喻映射被破坏了。
3、排版
您还可以通过使用文本内容来吸引用户的注意力。卡片设计的一切要素都应该易于阅读和理解，要将其可读性做到最大化：
1）选择简单的字体和容易阅读的配色方案（放在一个与文本色有足够对比度的纯色背景上，文本是最具可读性的）。
2）另外，要试着限制字体的数量。对于大多数卡片式的设计方案，使用单个字体就足够了。
温馨提示：具有正常重量的无衬线字体对于卡片内容的拷贝是友好的。
四、限制卡片中的内容
一个卡片通常是短小的，它里面并没有包含所有信息，而是充当着指向更多详细信息的一个入口。当你尝试放太多内容到一张卡片里，以至于卡片本身开始变得太宽或太长，那么它也就失去了它原来的隐喻效果，因为它不再像是一张用户潜意识里认知的卡片样式。
下面你可以看到一个基于卡片的用户界面的实例。请注意位于中心位置的这张卡片，它的问题在于它包含了太多信息使其过长，降低了其可读性。
五、利用动画和动效的优势
如果应用得当，动画可以在很大程度上提升用户体验。它有很天然的代入感，帮助用户适应卡片式的设计，并且为每个卡片建立不同状态之间的视觉关系。
1、视觉提示
视觉提示可以帮助用户更好地理解如何与用户界面进行交互。当你需要向用户演示设计中的某些功能该如何操作时，你可能要考虑使用这种设计。
2、视觉反馈
视觉反馈在UI设计中非常重要。它之所以能起作用是因为它满足了用户的自然意识上对确认的需要。 在现实生活中，物体/对象会响应我们的操作/动作/交互，这也是人们期望事情的工作方式。 对于桌面应用或网站，您可以使用鼠标悬停效果来显示当前元素是可交互的。悬停动画为元素的可发现性提高了一个层级，同时使体验过程更加有趣。
使用悬停效果，您还可以显示原本隐藏起来的可选项。在下面的例子中，悬停效果允许用户进行颜色标记，回复，转发或删除消息。
3、放大切换
这个动画在卡片的预览视图和详细视图之间创建了一个过渡效果：用户选择一项目（卡片）并能立即看到与该选择相关联的详细信息。这种设计的挑战是要确保用户意识到自己是留在给定的上下文场景中的，而没有被带偏。
结论
卡片式设计作为一种新型的（相对的，其实已经流行开来）设计方案，而卡片本身则作为一种新型的创意画布，其创意性不仅仅体现在独特的视觉效果上，更体现在当我们要创建丰富的内容体验时，卡片已经成为最为灵活的布局格式之一。
推荐阅读：
《如何利用“卡片式设计”提升用户体验》
《极简设计的最佳实践》
译自：https://uxplanet.org/best-practices-for-cards-fa45e3ad94dd#.owhqq4xmv（已获得授权）
相关文章：
Arduino 各种模块篇 光敏感应器 简易光敏
这一款是非常简单的光敏感应器 简单到，只对一定光强度有信号感应，输出TTL电平。 此款也是用电位器来调节的。 都是这么简单。 过段时间我为大家奉上数字版的光敏传感器。 ————————————————————————分割线———————————…
vb打开服务器excel文件路径,咨询下VB如何打开EXCEL文件并将内容显示在listbox中
该楼层疑似违规已被系统折叠 隐藏此楼查看此楼 Adodc DataGrid 控件直接连接 Excel 表格， 把 Excel 表格当成数据库。 在窗体中画出 Adodc1 和 DataGrid1 两个控件， 不做任何属性设置，只管大小和位置。 ------------------------------…
iOS动画进阶 - 手摸手教你写ShineButton动画
移动端访问不佳，请访问我的个人博客 前段时间在github上看见一个非常nice的动画效果，可惜是安卓的，想着用Swift写一个iOS版的，下下来源代码研究了一下，下面是我写代码的心路历程 先上图和demo的地址 分析动画过程 刚开…
redis自动过期
我当时设置如登陆自动过期的时间。自己找的做了下。 设置自动过期时间。 public static PooledRedisClientManager poolreds; static RedisPool() { try { poolreds new PooledRedisClientManager(10, new string[] { “101210.212.：1213” }); } catch (Exception…
Java中使用LUA脚本语言
Lua 是一个小巧的脚本语言。是巴西里约热内卢天主教大学（Pontifical Catholic University of Rio de Janeiro）里的一个研究小组，由Roberto Ierusalimschy、Waldemar Celes 和 Luiz Henrique de Figueiredo所组成并于1993年开发。简单介绍可详…
电脑显示服务器地址无法ping通,网关无法Ping通故障及解决方法
很多网络故障是常见问题，一般的三板斧方法就能解决问题，但有些故障容易让我们多走弯路，我们不妨拓宽故障排查范围，换换思路。在与网络亲密接触的过程中，我们或多或少地会遇到一些网络故障，对于许多网络故障…
VVeboTableView 源码解析
原文链接：http://www.jianshu.com/p/78027a3a2c41最近在看一些 iOS 性能优化的文章，我找到了 VVeboTableView 这个框架。严格来说这个不属于框架，而是作者用自己的方式优化 UITableView 的一个实践。 VVeboTableView 展示了各种类型的 cell&a…
人工智能第二次作业
2.9设有如下语句，请用相应的谓词公式分别把他们表示出来 (1) 有的人喜欢梅花，有的人喜欢菊花，有的人既喜欢梅花又喜欢菊花 。 解： P(x)：x是人 L(x,y)：x喜欢y 其中，y的个体域是{梅花，…
Perl 校验命中的脚本
这个脚本无比的重要，虽然代码简单，但是在判断是否准确上，有着很重要的地位。 通过icmp和解析，它有一定意义所在。 mark!.. #!/usr/bin/perl use Net::Ping; sub icmp_domain{$ktrue;local($host)shift;$pNet::Ping->new("…
从基于网络的安装服务器安装操作系统,PXE 概述 - Sun Fire X4800 服务器安装指南（适用于 Linux 操作系统）...
PXE 概述使用 Linux 预引导执行环境 (preboot execution environment, PXE) 可从网络接口而不是本地存储引导服务器。对于 OS 安装，从基于 PXE 的OS 分发映像引导目标服务器就像从 DVD 引导一样，不同之处在于介质位于网络中。要使用 PXE，您需…
下载最新Android代码的方法
之前我是去Android官方网站下载最新Android代码，但是这种方法需要翻墙，而且有时候翻墙又不太方便，今天我发现一个不错的网站，是清华大学搞的，跟Android官方的代码基本保持同步，而且下载方法跟Android官方的…
socket编程缓冲区大小对send()的影响
1. 概述 Socket编程中，使用send()传送数据时，返回结果受到以下几个因素的影响： • Blocking模式或non-blocking模式 • 发送缓冲区的大小 • 接收窗口大小 本文档介绍通过实验的方式，得出（收发）缓冲区大…
不用任何第三方，写一个RTMP直播推流器
2016年是移动直播爆发年，不到半年的时间内无数移动直播App掀起了全民直播的热潮。然而个人觉得直播的门槛相对较高,从推流端到服务端器到播放端，无不需要专业的技术来支撑，仅仅推流端就有不少需要学习的知识。目前大部分直播采用的都是RTMP协…
手机连接服务器数据库文件,手机连接服务器数据库文件夹
手机连接服务器数据库文件夹 内容精选换一换GaussDB(DWS)支持使用gs_dump工具导出某个数据库级的内容，包含数据库的数据和所有对象定义。可根据需要自定义导出如下信息：导出数据库全量信息，包含数据和所有对象定义。使用导出的全量信息可以创…
开源一个上架 App Store 的相机 App
原创 2017-02-21 伯乐专栏/陈浩 iOS大全（点击上方公众号，可快速关注） 来源：伯乐在线 - Hawk0620 如有好文章投稿，请点击 → 这里了解详情 如需转载，发送「转载」二字查看说明 Osho 相机是我独立开发上架的…
WIN7下,联想A30T通过USB连接上网
1.手机连接3G信号 2.手机上在设置里 "设置" |"应用程序" |"USB模式" |勾选"网卡模式" 3.连接上Win7,会出现驱动安装程序,手动安装这里的驱动.(驱动在百度网盘:) 4.在设备管理,网络适配器里查看驱动是否安装成…
在bootstrap ace样式框架上修改的后台管理型模板(Tab页后台管理模板)
后台管理模板开始用frameset布局，但是有时候会遮挡比如上面导航或者左边导航的二级三级弹出菜单，因为宽度被限制了，所以有时候就用easyui或者ext的，但是样式不好看，然后看到了bootstrap ace的后台管理模板，…
文件服务器的内存要多少,文件服务器内存要多大
文件服务器内存要多大 内容精选换一换Windows场景中，当把源端服务器迁移到华为云后，目的端服务器C盘的已用空间比对应源端服务器C盘的已用空间大至少1GB，而不是与源端服务器C盘的已用空间一致，这正常吗？正常现象。您可…
好玩的 RAC
UIControl 监听 control 点击 从此告别 addTarget 和 btnClick 1234[[self.loginBtn rac_signalForControlEvents:UIControlEventTouchUpInside] subscribeNext:^(UIButton *btn) {// btn, 即 self.loginBtn// 这里执行点击之后的操作}];UITextField 监听 textField 的 text 改…
机器学习简单代码示例
机器学习简单代码示例 //在gcc-4.7.2下编译通过。 //命令行：g -Wall -ansi -O2 test.cpp -o test #include <iostream> using namespace std; void input(int &oper,const bool meth) {//meth为true则只判断1，为false则判断1或0while(true){ci…
【2007-5】【素数算式】
Description 在下面的算式中每个“#”都表示一个素数数字。##* #————###请编写程序确定这些数字，输出所有的解。Input Output 依次打印输出每一种解，每行表示一种解，格式为：##*# ###。Sample Input Sample Output HINT Sou…
ubuntu服务器版编辑文件,Ubuntu 服务器版 18.04.4 固定 IP 设置
1、输入命令 su 以root用户权限操作2、找到Ubuntu网络配置文件vim /etc/netplan/50-cloud-init.yaml3、输入 i 让文件变成可编辑状态4、修改内容dhcp4: nodhcp4: noaddresses: [192.168.3.50/24]gateway4: 192.168.3.1nameservers:addresses: [8.8.8.8, 8.8.4.4]如图ÿ…
RACCommand 粗解
前言 学习 RAC 的过程中，RACCommand 是我一直很迷惑的点，感觉一直抓不到它的要点，不明白为何要这样使用。曾经想过用别的方法来替代，只要能找到替代的方法，暂时就没必要死磕，结果发现避免不了，那…
将整数拆分为2的幂次方
任意一个正整数都可以用2的幂次方表示，例如：137＝2^72^32^0，同时约定次方用括号来表示，即a^b＝a(b)。由此可知，137可表 示：2(7)2(3)2(0)。进一步：72^222^0(2^1用2表示)&…
vbs脚本在服务器上虚拟按键,iisvdir.vbs iis虚拟目录管理脚本使用介绍
IIS管理器也是通过调用iisvdir.vbs来实现虚拟目录的创建和删除的。我们可以通过命令行的方式来执行iisvdir.vbs脚本1)创建虚拟目录：cscript c:\windows\system32\iisvdir.vbs [/s server] [/u username /p password] /create [virtualRoot] Alias PhysicalPath2)删除…
Python字典部分源码分析，字典是无序的
1 def clear(self): # real signature unknown; restored from __doc__ 2 """ D.clear() -> None. Remove all items from D. """ 3 pass 1 #练习1、清空字典（置空） 2 li {"key1":"v…
【2011-3】【旋转表格】
Description 小敏是个数学迷，特别擅长加法与除法。老师给他一个问题，有一个22表格，表中有正整数A, B, C 和D，表格和表格值的计算如下：小敏的任务是对给出的表格每次顺时针旋转90度，使旋转后的表格值最大&am…
iOS-FXDanmaku弹幕库介绍、相关技术分享
前言 去年, 2016年, 一大波直播平台在移动端涌出, 直播慢慢步入了人们的视角. 网上如今能够看到各式各样的直播, 如秀场直播、游戏直播、体育直播、娱乐直播等等. 在各种类型的直播中, 弹幕在PC、移动端都几乎成为了标配, 今天在这里主要介绍一下个人开源的iOS弹幕, 以及提前为…
【廖雪峰Python学习笔记】字符串与编码
字符串与编码 三种字符编码 ASCII编码 ：计算机由美国人发明，最早只有127个字符编码—— 大小写英文字母、数字和符号Unicode：把中文、日文、韩文等所有语言统一到一套编码中，2-4byte，现代OS和大多数语言都支持utf-8&a…
application
说明: 进行应用级操作.比如:设置提醒框,打开其他应用,显示联网状态,控制状态栏 单例对象, UIApplication *app[UIApplication sharedApplication];常用方法 方法1:设置app图标数字提示信息//设置app图标数字提示信息app.applicationIconBadgeNumber10;//ios8以后需要实现以下方…