很多人对APP中的卡片设计习以为常，但对于卡片设计流行的原因，优点，以及如何做好卡片设计却可能不甚了解。关于这些问题，彩云之前也写过一篇非常受欢迎的卡片设计经验原创文章《想做好卡片设计，原来要注意这么多细节》，文章中讲了非常多的卡片设计实用技巧。今天这篇国外大佬写的文章，算是从为什么这样做的角度来分析卡片设计，一起来学习吧。

从Instagram和Facebook这样的社交媒体应用到亚马逊这样的电商平台，卡片设计似乎是无处不在的，这些大厂广泛应用使得卡片设计很快流行了起来。

作为一个信息容器，卡片能承载包括文本、富媒体、按钮等所有UI元素。基于这些内容，卡片设计可以根据不同的设备和屏幕调整其大小，平衡界面视觉和用户体验。

什么是卡片设计？

卡片是一个UI组件，包含了某一个内容的信息和操作。卡片可以包含各种元素，但它们都应该属于同一个主题。

这样做的目的是为了避免冗长的文字，并呈现更多的内容。即使从设计的角度来看，用户可能不熟悉卡片的概念，但他们马上就知道如何使用它们，因为它们与实体卡片是一样的。（彩云注：这个就是用户心理学中隐喻的运用）

为什么它会如此流行？

卡片之所以流行，是因为它们能更好的把控内容。卡片是模块化的，所以不同的内容可以堆叠在一起，而不需要注意它们的差异。

卡片通过强制内容适应卡片边界和卡片布局上的限制来聚焦内容。设计师喜欢通过卡片混排大量内容，而无需担心设计会变得杂乱无章。

卡片可以将内容分解成易于理解的小块，以便用户与之互动。通过给内容一个容器，卡片向用户表明内容是真实和感性的。

卡片 UI 设计流行的原因还有很多：

• 直观：卡片在界面中看起来与现实世界中的卡片相同，它们对用户来说似乎很常见。在卡片成为移动和网络应用中的流行元素之前，它们在现实生活中无处不在：名片、棒球卡、便签。卡片代表了一种有益的视觉类比，它允许我们的大脑直观地将卡片与其所代表的内容联系起来，就像在现实生活中一样。

  
  

• 易于阅读：卡片不占用太多空间，并敦促设计师优先考虑其内容。不同的是，每张卡片都变成了易于阅读的内容。卡片让用户更容易找到他们感兴趣的内容。

  
  

• 有吸引力且对用户更友好：基于卡片的设计通常非常依赖视觉效果（尤其是图片）；就信息架构而言，视觉层次会更加清晰。使用图片有助于使基于卡片的设计比不在卡片中排列的相同内容对用户更具吸引力。

  
  

• 有利于响应式设计：卡片是矩形的，可以平滑地调整大小，以适应不同屏幕的水平和垂直正面，这意味着用户可以在所有设备上获得统一的体验。

  
  

• 便于分享：卡片可以鼓励用户在社交媒体上分享内容，因为它允许用户只分享特定的内容，而不是整个页面。

  
  

什么时候应用卡片设计？

这通常是当你有:

• 基于搜索的界面:  卡片能通过模块的内容快速显示合适的内容，这使得用户可以深入了解自己的兴趣。基于卡片的设计是一种非常适合呈现这类内容的方式。

• 
  

• 信息浏览：当用户浏览信息时，卡片的兼容性更好。

• 
  

• 任务管理：当可以将流程中的单个任务作为卡片进行说明时， 可以轻松组织卡片以获取任务列表。任务管理应用在使用卡片式界面为用户创建仪表板方面做得很好，其中每张卡片代表一个单独的任务。

• 
  

• 类似项目：卡片最适合于异构项目的集合（当并非所有内容都是相同的基本类型时）。

• 
  

• 可视化分析:  仪表板通常在同一页上同时显示各种内容样本。在这种情况下，卡片类比可以帮助在不同物品之间创造出更明显的差异，其中每张卡片可以适应不同的角色。

卡片解构

卡片的布局可以不同，以支持它们包含的内容类别。下面的组件通常可以在多种卡片样式中找到。

(1)富媒体: 卡片可以包含缩略图，以显示图片，插图，头像，Logo，图标或图形。

(2) 标题: 标题文本可以包含相册或文章的名称或标题。

(3) 描述: 支持文本，如文章摘要或简短的描述。

(4) 行动按钮: 卡片可以包含用于操作的按钮。

(5) 副标题: 副标题文本可以包含详细介绍，如文章的署名或标记的位置。

(6) 图标: 卡片可以包含操作图标。

设计技巧

有一些小的技巧可以快速提高卡片设计细节。

1. 使用相关主题的图片

图片是卡片设计的主角，你需要一个高级的图片来吸引用户对每张卡片的注意。不仅是图像，卡片还可以包含插图、带有浅色背景框的图标或任何其他类型的富媒体，但需要与内容主题相关。 

2. 增加视觉层次

卡片内的层次结构有助于引导用户对重要信息的阅读。将主要内容放在卡片的顶部，并使用排版来强化主要内容。使用空白和对比来分隔需要更多视觉分隔的内容区域。（彩云注：视觉层级对于信息表达至关重要！） 

3. 限制内容长度

一张卡片应该只包含重要的信息，并提出一个相关的观点，以获取额外的细节，而不是完整的细节本身。当我们试图在一张卡片中放入太多内容时，卡片可能会变得很冗长，并失去与卡片类比的实际联系，因为它不再像一张卡片了。 

4. 避免嵌入链接

不要包含内联链接，卡片应该自己链接。嵌入文字链接会让用户误操作。 

5. 区分操作主次

包含不同操作的卡片应该在视觉上形成对比。在下面的例子中，我通过使用一种较轻的色调而不是主要的按钮风格来降低后续操作的视觉强度。 

6. 去掉分割线

对于新手设计师来说，用分割线来区分内容是一种常见的方式，以此定义不同的组。这些边框会造成不必要的视觉干扰，从而影响内容。

如何做到视觉上更美观？

APP中的卡片并不是纯粹的拟物概念，但通常情况下，使用一致的类比和物理原理能帮助用户理解界面并分析内容中的视觉层次。在卡片的情况下，你可以做几件事:

1. 使用圆角

在形态上与真实世界的卡片进行视觉对比。圆角更有效，因为它们让我们的眼睛容易跟随视觉动线，“因为它更适合头部和眼睛的自然运动”。 

2. 增加一个轻微的外边框或者投影

增加一条淡淡的描边框或者增加一个淡淡的投影都是很好的做法。阴影在界面中创造了一个层次，这有助于我们区分UI元素。

然而，在设计中添加阴影并不像听起来那么简单。有时候设计师会过分强化投影效果，让原本看起来不错的设计看起来很廉价。避免使用纯黑色的阴影。

3.注意字体和留白

重要的是要让每一张卡片都能被人看到、阅读和理解。在每个块周围添加大量的空白，让用户有时间处理并进行视觉重置，有精力看完一张卡再到下一张。

选择简单和基本的字体，因为基本的排版最大限度地提高了可读性，并有助于浏览。

一些优秀卡片设计的例子

让我们看看一些真实项目中的卡片设计案例：

信息流中的卡片设计

保持信息流卡片简单是很重要的。它们应该有一个一致的、重复的结构，但是使用不同的图片和字体大小来代表卡片中最重要的和最不重要的元素，以使读卡片的人更容易理解它们。 

由Diseno Constructivo和Webpixels设计

他们突出特色图片和标题作为最突出的元素，这能帮助用户决定文章或发布的内容是否适合他们。

电商卡片设计

产品卡片是一个很重要的东西，它可以帮助你将访问者转化为客户。一张优秀的产品卡片应该能够吸引人们的注意，激发人们获得产品的欲望，激励人们购买，并在搜索结果中得到高效推广。 

由Webpixels设计

产品的名称应该放在最显眼的地方，这样参观者就会立刻明白他来对地方了。一个好的配图能告诉顾客胜过千言万语，所以你需要一个高质量的产品配图来设计完美的产品卡片。

如果产品有特价，不仅要在价格栏中注明促销价格，还要注明常规价格，以及客户可以节省多少钱。

个人中心卡片设计

简介卡已经成为一个应用或网站中的功能模板。随着个人品牌变得比以往任何时候都重要，卡片设计在这里也能发挥重要作用。 

由Neelesh Chaudhary设计

就像每一张卡片一样，配置文件卡片也是一个UI组件，它包含了对它所代表的内容至关重要的信息。为了达到你的目标，你要向其他人推销你自己。

确保只包括必要的信息(例如，照片，名字，职业)，让你的“关于”页面有剩余的细节来完善你的个人资料。

仪表盘卡片设计

仪表板的设计可以有很大的不同。但是所有的仪表盘都是用卡片做的。根据仪表板的类型，每张卡片可能包括概要信息、通知、快速链接或导航设计元素、关键数据、图表和数据表。确保你为每个元素使用了正确类型的卡片。 

由Simmmple设计

仪表盘卡设计允许用户决定他们想要关注哪些数据。易于理解的UI，允许用户精确地控制哪些数据需要在仪表板的前端做好。

只包括最相关的信息，为用户使用方便。当你的数据集在一起看更容易理解时，找到在一张卡片上显示它们的方法。但是要小心，不要让用户感到困惑。

日常计划卡片设计

看板任务卡似乎是一件非常简单的事情——拿一张便签，写下你需要做什么，然后把它贴在墙上。这些卡片必须包含需要行动的单位数量。它们还可能包含各种各样的其他信息，清楚地传达了必须做什么。 

由Neelesh Chaudhary设计

卡片上包含的信息包括任务的名称和重要的细节，如任务的类型和谁拥有它。看板卡放在状态类别下。最基本的状态类别是“计划要做”、“正在进行中”和“完成”，但是状态可能因项目而异。

卡片结构最适用于添加或删除任务这样的小改变，而不是改变像你的总体目标这样的大想法。

总结

有几种方法可以使卡片设计更加有效。通过最初定义和观察卡片，我们可以更好地了解跨行业的这种设计模式。这也让我们能够推测用户希望在这些卡片上采取什么行动。卡片在提供许多不同种类内容摘要的环境中尤其有效，而不是简单地作为内容列表的现代替代品。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

编辑导读：在很多设计中，选择录入类组件的理解和使用都比较模棱两可，很多其他产品在实际应用中往往也不够规范，使产品体验的一致性受到影响。本文将具体探究下这几种组件的特性和适用场景，与你分享。

一、前言

不久前在进行一个Web端HRM系统的需求设计，场景是对于从企业离职的员工，HR可以根据员工能力和表现选择是否将其设置为优秀离职人才，对于优秀离职人才将进行定期关怀，以便后续重新返聘的可能。在设计过程中，对于设置优秀离职人才这个交互，感觉使用单选框、多选框、开关都能达到目的，究竟哪一种组件才是最合理的选择呢？

这个问题让我回想起之前在很多设计中对于这几种选择录入类组件的理解和使用都比较模棱两可，很多其他产品在实际应用中往往也不够规范，使产品体验的一致性受到影响。本文将具体探究下这几种组件的特性和适用场景：

二、单选框（Radio）和多选框（Checkbox）

1. 来源

1）单选框

单选框一般被认为来源于收音机(Radio)上的物理按钮，当一个按钮被按下时，另一个按钮将会被弹起，使得永远只有一个按钮处于被按下的状态。

这种说法可能也不够严谨，因为收音机上的按钮在被按下后，不仅呈现出了“按下”的状态，同时也会立马触发收音机的广播，即立即生效。实际上绝大多数UI界面中无论单选框还是多选框一般都是仅作为录入，触发生效往往需要配合“提交”操作来进行。

2）多选框

多选框来源于生活中常见的各种多项选择场景，如饭店菜单、考试多选题等。多选框一般也是作为内容录入的组件，一般在进行选择后同样需要配合后续的“提交”动作，就像选择菜品后下单，选择答案后交卷，这种“选择类”场景多用在表单或者表格中。

多选框还有另一种“设置类”场景，这种场景下多选框用于启用某种模式、应用某项设置，与开关（Switch）非常类似，这也使得多选框在实际产品中的应用要比单选框复杂得多，后文将详细阐述多选框与开关的使用区别。

2. 简单定义及外观样式

1）单选框

可以概括为从最少两个或两个以上的互斥关系选项之中选择一项的组件，外观样式通常由“圆形外框+文字标签”组成，选中时圆形外框样式发生改变表明选中状态。

2）多选框

可以概括为从多个并列关系的选项中选择多个的组件，多选框最少可以一个都不选。外观样式通常由“圆形或方形外框+文字标签”组成，选中时一般在外框中出现√表明选中状态。与单选框相比多选框还有一种特殊的“半选中状态”（half-selected）,一般出现在表格（Table）或者树选择（Tree select）中。

3. 交互细节

1）触发区域

单选框和多选框本身外框尺寸都比较小，因此需要将触发区域增大至整个标签范围，方便用户点击

2）排版

单选框和多选框在B端各类表单中应用较多，在页面空间允许的范围内，最好将选项纵向对齐排列，方便用户直观比较，需要横向排布时，选项间应该设置清晰明显的间隔。

3）单选框的容错机制

单选框在选择过后一定要有一个选中项，因此就不能恢复至“空状态”。在比较典型的社交场景中，一些涉及隐私的信息比如婚姻状态选择，可以给用户提供诸如“保密”“不展示”之类的选项，防止用户在选择之后无法回退。

4. 单选框、多选框和下拉选择（Select）的使用辨析

对比单选框、多选框和下拉选择的外观样式不难发现，它们之间最重要的区别在于信息传达效率和包容度的不同。

1）单选框和多选框的特点

单选框和多选框的所有选项信息都是直接暴露出来，如果选项过多将占用较多界面空间并且影响用户的阅读效率和界面整体规整度，信息包容度低但信息传达直观高效；

2）下拉选择的特点

下拉选择则是收在下拉菜单里，只有选择值是用户一眼能看到的，信息包容度高，节省空间，与其他输入类组件并用时能保持整体界面的规整度，但每次都得点开再进行选择也牺牲了一定的信息传达效率和操作便利性。

3）适用单选框和多选框的场景

因此，单选框和多选框更适用于选项数量较少（一般不超过5个），有一定界面编排空间，且用户需要直观看到不同选项内容并进行比较选择的场景，如选择会员购买方案。

4）适用下拉选择的场景

相反，下拉选择更适用于选项数量较多，表单配置复杂、包含各类不同样式组件或界面空间不足，且用户对于被隐藏的选项内容有一定预期的场景，比如选择省份。同时下拉器扩展性更高，下拉菜单可以进行多种类型的变体设计，满足不同业务场景的需求。

三、开关（Switch）

1. 来源

开关（Switch）这个组件就是模仿现实生活中的开关而设计的，现实生活中灯的开关一按，灯马上就亮了，因此开关有一个最大的特征：即时性。这在Ant Design设计系统的全局规则中也给出了注释：“当用户切换「开关」按钮将直接触发状态改变“，因此不同于单选框和多选框这种录入型组件，开关同时兼备录入和触发两种属性。

2. 简单定义及样式

开关是一种特殊的选择组件，只能从“开启/关闭”两种状态选择其一，并且选择的结果会立即生效，通常点击后页面或者开关本身会有加载效果，或者点击后给出反馈，告知用户操作已生效。

3. 开关和多选框的使用辨析

上面提到复选框也经常作为开启某种模式或者应用某类设置使用，在这种场景下它与开关的逻辑十分相似，让人容易混淆。对于这两种组件的使用区别当前已有很多讨论，说法各异，这里根据我自己的探究和经验，从以下几点阐述下自己的看法：

1）开关的即时性

开关的即时性决定了当开关与需要提交的表单一起出现时会存在矛盾，因此在表单中进行状态选择时，尽量选择单选框、多选框，避免使用开关。

2）开关更适合控制一组设置吗

苹果官方人机界面指南中指出“开关比复选框具有更多的视觉权重，因此当它控制的功能比复选框通常更多时，它看起来更好。例如，您可以使用开关让人们打开或关闭一组设置”，然而在复选框的设计指南中又举了用复选框控制一组设置的例子。

再来看一个飞书的例子，飞书管理后台中使用了开关来控制一组设置的开启，而在飞书客户端的设置里用的都是复选框。

对于这个问题，个人认为苹果官方人机指南所说的因为开关比复选框具有更多视觉权重，所以更适合用来控制一组设置的说法并不准确，复选框本身也具有明显的选中和非选中状态，尽管开关组件自身大小以及在视觉效果上可进行设计的空间都更大，但是好像并不足以成为决定性的因素。

同时因为开关的即时性，如果是在需要提交的表单或者模态弹窗中用开关控制一组设置，反而是多选框更合适。

3）从组件的来源分析

从组件的来源及发展历史来看，勾选的交互是基于PC键鼠操作设计的，单选框和多选框组件本身尺寸较小，因而触发区域会扩大至整体标签区域，方便鼠标点击；而开关是诞生于移动设备触控交互的组件，在移动端界面本身配置就比较简化，这时候配合开关自身相对较大的触发区域，用手指点击起来非常方便顺畅。

而在PC端，因为屏幕尺寸更大，同时很多B端系统配置项多、界面布局相较移动端要复杂很多，这时候要把鼠标移至开关热区去点击，反而没有勾选框来得方便，这种操作体验在一个纵列中有多个连续的开关时尤为明显。

4）我的观点

依据开关的即时生效特性，开关更适合用在不需要提交操作的页面中，用来控制功能或设置的开启/关闭，在需要提交操作的表单或者弹窗中，建议使用多选框。

开关和勾选框都可以用来控制一组设置的开启/关闭，使用开关进行控制时，最好将它控制的下属组件都设置为立即生效，这取决于设置本身对于系统的影响，如果设置对于系统重要功能影响较大，则建议改用多选框去控制，让用户多一步“提交”操作进行确认，提升容错性。

四、总结

回到开头设置优秀离职人才场景中的组件问题，这个需求流程涉及到的不只是在离职人员的编辑弹窗中操作，还涉及到在离职人员表格中的状态展示和设置优秀人才的单独操作。首先弹窗中的编辑操作是需要提交的，用开关比较矛盾；单选框和多选框在弹窗中都可以适用，但考虑还需要在离职人员表格中的状态展示和单独编辑，为了保持整体的交互一致性，最后选用了单选框。

总的来说，这几种选择录入类组件在B端系统中应用非常广泛，可能正是因为太司空见惯了，所以容易忽略它们细节上的特性和区别。尽管有时候这些组件的使用问题并不会对用户体验产生决定性的影响，但对细节的探究正是设计师严谨的工作态度和工匠精神的体现，只有秉持着这种对细节的打磨和追求才能不断提升产品的用户体验。

另外虽然文中做了一些各个组件的特性和适用总结，但可能在不同产品和系统中情况会更加复杂，需要设计师根据实际情况灵活处理。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一个优秀的设计不仅要解决正确的问题，同时也是给用户创造积极的情感。在过去，实体产品可以通过人类的五感来创造情感体验，但对于如今的数字化产品来说，这似乎很难达到，因为只是在屏幕上进行枯燥的交互来获取服务。

所以，数字化产品设计师们需要更深入的理解每种类型的情感，以及创造它们的心理学原则。

根据唐.诺曼（Don Norman）的研究，人们对一个物体产生情感有三个层次：本能、行为和反思。

• 本能层: “用户想要的感觉是什么”

• 行为层: “用户想要做什么”

• 反思层: “用户想成为什么样的人”

在第一层，用户将通过视觉和与产品的交互设计中产生情绪。因此，这是UI设计师擅长发挥的地方。除了美学和基本的平面设计原则外，下面是我在工作中经常应用到设计中的心理学原则。

格式塔原理

相似律

人类的眼睛倾向于将相似的元素连接成一个组，而大脑会认为这些元素都有相同的目的。 

因此，在设计具有相同功能和内容的界面元素时，就应该要保持一致性。（彩云注：这也是为什么要保持一致性的理论解释）

应用场景: 导航、控件、卡片、banner、内容、分页

连续律

人眼会将连续的元素视为一组。这一定律与对称性和相似性非常相关，通过在一个序列上设计相似和重复的元素，我们可以将用户的视线引导到我们想要的方向，它能使得阅读信息更加连贯和清晰。

一点点的切割是在暗示用户，这里还有更多的内容等待你去查看。

应用场景: 菜单、列表、排序、轮播、服务进度

封闭律

当看到一幅不完整的图像时，大脑会依赖之前的经验进行填充。 

这是图形和logo设计中常用的规则，但是在产品设计中，我们也经常把它用在图标和Loading设计中。

应用: 图标、loading、数据可视化

相近律

这是UI设计中的一个基本规则，因为人眼会将任何相邻元素视为一个组。 

在设计的时候，我非常注重使用间距来将元素组合在一起。我通常使用大空间来分隔大内容组，然后使用小空间来分隔大内容组中的小内容组。

应用场景: 导航、控件、卡片、banner、内容、分页

对称律

我们的大脑喜欢看到对称和平衡的东西。它是所有设计领域中使用最频繁、最安全的法则。它帮助我们创造一种稳定和秩序的感觉。 

当设计需要简单和谐可视化的产品时，我经常使用对称律。当用户需要关注重要的事情时，它也能让他们感到更舒服。缺点是，如果过度使用，产品会变得乏味和单调。通常，我用标题或CTA按钮来更好地强调和号召行动，打破画面的单调格局。（彩云注：CTA是call to action的缩写，中文通常翻译为行为号召。可以理解为引导用户点击的行为都算是行为号召）

应用场景:控件，banner，强调内容，产品显示，清单，导航。

背景分割

这个定律是关于人眼倾向于注意脱离背景或组合的事物。 

我使用这个规则引导用户的眼睛看到重要信息。它通常是一个卡片设计与一个轻投影在背景之上的层。此外，构建整体也是应用这一规则的一种方式。

应用场景：卡片、内容、列表、服务、摘要

共同命运法则

在同一方向上移动的元素被认为比固定的元素或在另一个方向上移动的元素更相关。这个规则应用帮助我们建立组和状态之间的关系。 

在制作动画时，我经常更明确地使用这个规则。然而，我们仍然可以适用于许多不同的因素。

应用场景：导航/下拉菜单，折叠，手风琴，工具提示，产品滑块，视差滚动和指示器。

2. 焦点原则

当我们看东西时，我们的眼睛倾向于首先关注最突出的元素。理解这种行为将帮助我们在设计中创建一个“锚点”，从而推动用户查看我们的场景之后的内容。

应用场景:内容、落地页、价格、产品页、banner 

3. 雷斯多夫效应

（彩云注：维基百科解释为指个人对学习材料或所见所闻的资讯，容易记住最特殊的部分的现象。例如：有一些参考书将重要的资料，以不同颜色或特殊的字体标示出来，就是利用雷斯多夫效应来加深读者的印象。）

这也被称为隔离效应，它表明人们倾向于注意并记住与其他部分不同的部分。这条规则很容易与焦点定律混淆。不同的是，应用此规则的元素通常是独立的，没有为用户导航更多信息的额外功能。 

应用场景：定价表、促销banner、不同会员介绍 

4. 本能反应

基于现实世界打造的视觉体验。比如，当我们看一个视频，每个高潮笑话时都有旁白跟着一起笑时，我们会更容易发笑（彩云注：想想《快乐大本营》）。用户会喜欢我们的设计，如果它让他们感觉良好和舒适。

（彩云注：这个理论的意思是说尽可能让用户产生沉浸感，把产品用到真实的环境上，比如大家平时使用的手机样机，把设计的界面放到这些样机中就能够给人直观的感受到应用后的效果，也是这个理论的运用）。 

应用场景：产品配图、插图、摄影 

5. 色彩心理学

有很多研究表明颜色对我们的潜意识有特别的影响。对颜色的看法也因性别、宗教和文化而异。这张彩色心理学海报就足够了（彩云注：感兴趣的可以自行翻译研究下）。

此外，我们不要忘记从早期到现在一直在广泛使用的颜色，这些颜色的使用更符合用户习惯：

红色：错误

绿色：成功

蓝色：进行中

黄色：警告

6. 形状心理学

就像颜色一样，人类的潜意识对不同的形状也有不同的反应。例如:

圆形、椭圆形：传递积极的信息，通常与社区或关系有关。

方形和三角形：带有强烈的信息，通常与力量和稳定联系在一起。

竖线：代表强度、力量或攻击性。

横线：表示平静、相等、安静。

7. 双码理论

这一理论解释了人类需要视觉和语言信息来尽可能快地处理信息。此外，人类是视觉动物，我们的大脑处理图像的速度是处理文本的6万倍。为了最大化设计的有效性，我们不应该去掉解释性的文字。

（彩云注：根据这个理论，在做作品集时，就应该尽可能的多用视觉化语言，文字作为辅助，对于视觉设计师来说，能用图表达的就尽量减少文字的比重。） 

 一个很明显的例子就是导航栏。大多数新的应用或具有复杂功能的应用都同时设计了图标和文字标签。 

8. 并行设计

人类的眼睛倾向于看到平行因素比其他因素更相关。我经常使用这一原则对同一屏幕内的两组不同内容进行分类。最容易看到的例子可能是Facebook messenger界面，当帖子并排排列时，消息是平行的。 

9. 共同区域

这一原则类似于格式塔原则中的相似定律，但它并不是完全相似。共同区域原则是通过我们使用分隔线、形状或颜色的方式创建的。 

如果一个界面需要用户滚动更多来查看内容，我们应该有一些方法来更清楚地划分它，而不仅仅是使用间距。

应用场景：列表清单、信息流

10.扫描图形

根据NNGroup UXPin等组织或团体的各种研究，两种最常用的扫描模式是“F”和“Z”。

• F的使用最为广泛，尤其是对于内容量大的网站。

• Z用于不太注重文本的网站，通常强调在最后的号召行动。

一旦我们理解了如何使用这些模式，我们就可以选择布局并有效地安排元素来实现我们的设计目标。 

总结

第一印象是最令人难忘的，积极的体验可以在用户和产品之间创造持久的关系。如果能让用户在一开始就喜欢上我们的设计，就能为我们的产品创造了一个很好的优势。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是视觉层次

视觉层次不仅仅包含文字有关，它还包含我们的图片，视频按钮以及文字以外的视觉元素。所以当你设计一个网页时候，除了网站整体的颜色，排版，图片也能够影响视觉层次。那么如何让设计的层次更清晰，常用方法有哪些，今天我们一起来聊聊关于设计层次，希望可以帮助到你。

运用尺寸大小建立层次

▲如上图插画的比重很大，在设计这种大的元素时，你的每个元素比例和细节处理都被同时放大了，我们可以看见这副插画四周还运用了很多元素，让页面达到平衡，同时这个画面和旁边的文字场景也很好融合在一起。一个好的设计一定是通过视觉手段让用户理解信息更加准确，在看完页面文字和图片后，很自然的引导到底部的按钮，这才能算是一个很引人注目的设计。

运用色彩建立层次

运用文字大小字重建立层次

运用视觉重量建立层次

▲设计师熟悉的medium官方App设计，在正文阅读时，同样采用不同的视觉重点来突出重要信息，比如左边通过字重以及文字背景绿色底色和正文对比，非常醒目。右侧通过浅绿色作为背景强调突出。

▲同样在一些重要位置，Medium也是运用视觉重量处理，如左图通过顶部提示条提示可以通过语音播放，在右侧付费文章通过行动按钮引导用户升级付费。

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

Vue中的基本动画实现

直接一点，基本动画的步骤

1. 在需要加动画的地方，加入transition

<transition> <P v-if="isNum">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

在style中写vue已定义好的类名

 进入前和结束后的状态
    .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .v-enter-active,.v-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

这样就已经完成了基本动画了，上完整代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="../node_modules/vue/dist/vue.min.js"></script> <style> 进入前和结束后的状态 .v-enter,.v-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段 .v-enter-active,.v-leave-active{ transition: all 0.5S ease } </style> </head> <body> <div id="box"> <button @click="tags">显示/隐藏</button> <transition> <P v-if="isNum">我是一只小小鸟</P> </transition> </div> <script> new Vue({ el:'#box', data:{ isNum :true }, methods: { tags(){ this.isNum=!this.isNum; } }, }) </script> </body> </html>  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

    

        23
    

    

        24
    

    

        25
    

    

        26
    

    

        27
    

    

        28
    

    

        29
    

    

        30
    

    

        31
    

    

        32
    

    

        33
    

    

        34
    

    

        35
    

    

        36
    

    

        37
    

    

        38
    

    

        39
    

    

        40
    

    

        41
    

    

        42
    

    

        43
    

    

        44
    

    

        45
    

    

        46
    

    

        47
    

    

        48
    

    

        49
    

    

        50
    

动画类名的重定义

只需要在transition标签上添加一个name属性，然后把类名中v改成你定义的类名就可以了

<transition name='my'> <P v-if="isNum">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

 进入前和结束后的状态
    .my-enter,.my-leave-to{ opacity: 0; transform: translateX(80px); } 进入和离开的动画时间段
    .my-enter-active,.my-leave-active{ transition: all 0.5S ease }  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

使用第三方的动画库

第三方的动画库有很多
Animate、Anicollection、Cssshake、Animatable、Hover、Animations、JXAnimate、Spinkit、Velocity动画、AlloyStick骨骼动画引擎、Rocket、Cssynth、Stylie、Dynamicsjs、Anijs、Animsition、Parallax、Wow、Bouncejs、Easie、Greensock

我就选择其中一个库做示范其他都一样

1. 在使用第三方库之前，需要在，你要做动画的标签上加个基本类
   animated，这个基本类是根据每个库不一样而定的，
   我们要用Animated，所以需要加

<transition name='my'> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    

接着就是引入第三方库，你们可以下载。
我比较懒，我就直接npm下载了。

npm install animate.css --save  


    

        1
    

然后引入文件

<link rel="stylesheet" href="../node_modules/animated/lib/Animated.js">  


    

        1
    

写上类名，就行了，，提示，千万别下错文件，不然动画也无法实现

 <!-- 进入用lightSpeedIn    离开用 lightSpeedOut --> <transition enter-active-class="lightSpeedIn" leave-active-class ="lightSpeedOut"> <P v-if="isNum" class="animated">我是一只小小鸟</P> </transition>  


    

        1
    

    

        2
    

    

        3
    




     

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：csdn

分享此文一切功德，皆悉回向给文章原作者及众读者. 免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

<p style="box-sizing:border-box;margin-top:0px;margin-bottom:1rem;font-size:16px;font-variant-ligatures:no-common-ligatures;white-space:normal;background-color:#FFFFFF;text-align:justify;color:rgba(0, 0, 0, 0.84);font-family:&quot;letter-spacing:0.1px;">
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><i style="box-sizing:border-box;"><a href="http://www.lanlanwork.com/blog/admin" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;">蓝蓝设计</a>(&nbsp;<a href="http://www.lanlanwork.com/" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#0C386E;transition:all 0.5s ease 0s;vertical-align:baseline;background-position:0px -60px;padding:0px;margin:0px;text-indent:34px;">www.lanlanwork.com&nbsp;</a>)是一家专注而深入的<a href="http://www.lanlanwork.com/index.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">界面设计公司</a>，为期望卓越的国内外企业提供卓越的UI界面设计、<a href="http://www.lanlanwork.com/bs.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">BS界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">cs界面设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/scjm.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">ipad界面设计</a><a href="http://www.lanlanwork.com/csjm.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/baozhuang.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">包装设计&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/icon.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">图标定制&nbsp;</a>、&nbsp;<a href="http://www.lanlanwork.com/yhty.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">用户体验 、交互设计、&nbsp;</a><a href="http://www.lanlanwork.com/web.html" target="_blank" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">网站建设</a><a href="http://www.lanlanwork.com/WEB.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">&nbsp;</a>、<a href="http://www.lanlanwork.com/xz.html" style="box-sizing:border-box;text-decoration-line:none;color:#886353;transition:all 0.5s ease 0s;background-position:0px -60px;padding:0px;margin:0px;">平面设计服务</a></i></b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</p>

<div>
    <strong style="box-sizing:border-box;font-size:14px;font-family:微软雅黑, Arial, Helvetica, sans-serif;color:#323232;"><b style="box-sizing:border-box;widows:1;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="font-family:&quot;font-size:14px;background-color:#FFFFFF;white-space:normal;widows:1;line-111111111111111111111:20px;color:#3e3e3e;box-sizing:border-box !important;"><strong style="box-sizing:border-box;font-family:微软雅黑, Arial, Helvetica, sans-serif;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><strong style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"><b style="box-sizing:border-box;"> </b></b></b></b></b></b></strong></b></strong></b></strong></b></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></strong></b></b></strong> 
</div>

效果：

HTML：

 


    


        


            


            

        

        


            

                <div class="sel01"> 
            

        

    

    


        


            


            

        

        


            

                <select v-model="selectClassEnd" @change="selectClass($event)"> 
            

        

    

    


        


            


            

        

        


            

                <option value="NONE">未选择</option> 
            

        

    

    


        


            


            

        

        


            

                <option v-for="(options,id) in selectClassData" :key="id" :value="options.id"> 
            

        

    

    


        


            


            

        

        


            

                {{options.title}}
            

        

    

    


        


            


            

        

        


            

                </option> 
            

        

    

    


        


            


            

        

        


            

                </select> 
            

        

    

    


        


            


            

        

        


            

                </div> 
            

        

    

CSS：

 


    


        


            


            

        

        


            

                .sel01{display:inline-block;position:relative;z-index:2;font-size:1.6rem;height:3.6rem;line-height:3.6rem;width:8rem;flex:1;background:#fff;box-sizing:border-box;border-radius:.5rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01:before{content:"";position:absolute;width:0;height:0;border:.5rem solid transparent;
            

        

    

    


        


            


            

        

        


            

                border-top-color:#e92f26;top:50%;right:1rem;cursor:pointer;z-index:-2;margin-top:-0.25rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select{width:100%;border:none;height:3.6rem;background:transparent;background-image:none;-webkit-appearance:none;-moz-appearance:none;vertical-align:top;padding-left:1rem;}
            

        

    

    


        


            


            

        

        


            

                .sel01 select:focus{outline:none;}
            

        

    

JS：

 


    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                name:"Name",
            

        

    

    


        


            


            

        

        


            

                data(){
            

        

    

    


        


            


            

        

        


            

                return{
            

        

    

    


        


            


            

        

        


            

                selectClassData:[ //类别选择数据或者从后台获取数据 
            

        

    

    


        


            


            

        

        


            

                {id:1,title:"科普类"},
            

        

    

    


        


            


            

        

        


            

                {id:2,title:"亲子类"},
            

        

    

    


        


            


            

        

        


            

                {id:3,title:"制作类"},
            

        

    

    


        


            


            

        

        


            

                {id:4,title:"创意类"}
            

        

    

    


        


            


            

        

        


            

                ],
            

        

    

    


        


            


            

        

        


            

                selectClassEnd:"NONE",//类别默认选择 
            

        

    

    


        


            


            

        

        


            

                select_class_id:"",//类别id提交报名需要 
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            

                //类别选中 
            

        

    

    


        


            


            

        

        


            

                selectClass(event){
            

        

    

    


        


            


            

        

        


            

                this.select_class_id = event.target.value; //获取option对应的value值 select_class_id是后台约定的提交数据的名称 
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


                

                    


                

                

                      
                

            

        

    

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务