我最近一直在想自己要写什么，不如这次就来说说我最近在项目中遇到的问题吧~
再给大家看看我的解决方案，如果大家有更好的方案欢迎留言，我们一起探讨啊~
最近一两年我所涉及的项目都是有关于将网页的功能系统改成APP，而针对的用户就是公司的业务经理，是金融公司的业务经理们，我们的甲方爸爸！
当然这就意味着网页的产品，会有大量的数据，而且由于网页产品的信息处理还没有太与时俱进，所以大量的数据都是文字和数字的组合，因此要将这些数据改成APP时，就觉得好难啊。
其实表单在APP上并不好放，最好的解决方法就是设计成图表，而现在市面上图标样式不管是网页的还是APP一搜一大把，Ant Design有专门的数据网站，如下图所示：
什么样的都能找到，那么我为什么会觉得好难呢？因为数据超多der~考虑的内容又有很多，难免忧愁。
一、为什么要设计图表？
因为数据表单在手机上并不好展示，同时从用户体验的角度上来考虑，数据本身都是数据组成，可读性就不太好，因此如果把这些“数字”从商业目的、用户动机进行有机组合、关联或定义就使得数据变得有意义（价值），图表只是最终的表现形式。
二、图表由哪些元素构成？
一张标准样式的图表基本上是如下图所标示的几种元素组成，如下图所示：
当然这只是最基础的一种图标形式，对于别的形式就不多介绍了，大家都有基础知识，本文将尝试从图表设计动机的角度和大家一起探讨如何更好的进行图表设计。
三、图表设计？
1、明确数据指标
首先，我们得先搞明白这些数据是怎么来的、干嘛的，尽可能要求他们给到你的是尽可能精准的数据，否则会导致接下来的工作前功尽弃。就举我前几天的例子来说吧，产品给了我这样一张图，如下图所示：
我没有仔细的去问一些具体的信息，比如数据最多的时候会是什么样、业务想在这个表里看到什么信息、想要解决的问题什么？这些我都没有问！
上来就是一顿设计操作，把表单设计成了这样，如下图所示：
结果在走查的时候，业务很明确的指出数据信息不够多，他们想要在页面上将所有的数据信息都能看到，而数据最多的情况，数据表单是长这样的，如下图所示：
就是因为一开始在拿到表单的时候没有仔细去分析，才会导致这种情况的发生，因此要如何改进呢？
2、明确设计目的
其实图表设计跟产品设计的思路有点类似，一开始要先明确的就是设计目标，但这个很容易被设计师所忽略，因此前期在缺少设计目标支撑的情况下，设计师就会像一个没有指挥的小乐手，闭着眼睛乱弹，没有方向感。
就像我之前设计方案被推翻，就是因为思考不明确导致的，定义设计目标的过程需要站在业务的角度和数据的角度进行综合分析从而进行构建，一方面需要考虑业务如何更简单的分析、理解数据从而提高决策效率；一方面又需要考虑数据本身如何更加精准、一目了然的传达给用户。
3、规划设计方案
我在写这篇文章的时候，看了很多相关的图表文章，很多都是分析哪些不同类型的图表，配色上要怎么处理，或者哪些图标是用在什么地方的，对我都没有太大帮助，因为图表设计并不是普通的只是要好看的图表而已。
4、解决问题
重新设计之前，我去找业务很详细的了解了他们对于数据的需求，想要一目了然的看到所有的数据对比信息，数据在表单中要全部展示出来，数据后台每天都会刷新，针对的场景是来自在去拜访客户路途中查看客户目前的信息，我就将图表改成了下图所示：
由于面对的数据信息比较多，条纹图比较符合多数据的信息，当然这是数据最多的时候出现的情况，每家公司出现的数据是根据业务所提交的信息展现的。
在功能确定了之后，就是我们的细节问题，不是说我们在750*1624的画布上设计好了图表就行了，我们还要考虑到适配的问题，如下图所示：
屏幕较窄的时候，将X轴的标签文字打斜，保证数据正常阅读的同时也不影响美观度。还有一种解决方案就是有连续的数字时，可以有简写。
四、如何选深色底和浅色底
我们可以先来一个对比图，同样的数据在深色背景和浅色背景下的图表可读性做对比，如下图所示：
很显然浅色背景下的图表阅读效率更高，那么面对复杂数据的时候，情况是否一致呢？如下图所示：
很显然，深色更适合展示信息比较多的，突出重点信息的页面，因此我们在找数据页面参考，在选择深色和浅色背景里犹豫的，可以参考一下。
五、划重点
这里讨论的只是我在公司项目中的其中一个图表设计，不能说做的很多，只是分享一下自己在试错的过程中的成长，从web端改到APP，都会说减少一些功能，让产品更好用，但是总有不想砍功能的需求方，如何满足这些需求，是需要我们一直都在思考的事情。
转自：ui中国-潘团子
分享火爆Dribbble和Ins的设计趋势
相信最近很多小伙伴在逛Dribbble时候，发现最近流行一波新的设计风格，和以往不同的是，这次趋势又回到之前拟物化了，但它与纯拟物化还是有区别的，现在它有一个流行词语叫“新拟态”，今天就和大家分享下国外一位设计师对这个趋势的看法！
虽然UI以各种拟态化的形式存在（例如，您的桌面OS垃圾桶），现在这种风格的趋势更加明显。正如卡米尔·法拉纳（Kamil Falana）指出的那样，从无生命的“表达”到现实主义的过渡开始出现。
不久前，我们还观察到，这种变化开始在我们身边发生，苹果（IOS13系统）就是一个很好的例子。向最小化设计和轻拟物化发展，最终带来了无纹理3d视觉感官。受到了大家的喜欢，来看一张高清图。
如下图设计风格，在dribbble上获得认可度比较高！
Dribbble用户alexplyuto的作品获得了四千多次赞，并带动了这一趋势。
备注：可看出目前扁平化设计过于雷同，用户审美疲劳。偶尔出现新设计趋势风格，反而更个给各位设计师们带来新鲜感！
新风格的特征点
-
由于按钮的视觉表现看着变化不大（因为小了一些，不直观），因此我们将重点放在实际的卡片概念上，以使这种视觉表现更能直观感受出来
-
这种风格的主要好处是“新鲜”（至少持续很长时间）。它为界面带来了“新感觉”，并使其脱颖而出。它也可以与其他样式混合使用，这样就避免很呆板整个画面变成这种柔软凸起的效果。
到目前为止，有一些问题需要解决。我们发现了两个主要问题：
1. 可见性
2. 易用性
- 可见性
图形与背景对比度的主要问题是，当它们都是相同的颜色时，就没有可测量的对比度；客观上存在阴影，因此我们可以近似并尝试测量其外部的第一个像素。在上面的示例中，我们得出了这些对比度值。
而且由于几乎没有人会尝试使用如此强烈的阴影，这意味着其余UI元素必须可访问。这种假设得出的结论是，如果我们通过版式，相近度和与重要元素的对比来进行正确的层次划分，那么这些卡片/凸起的塑料卡片并不那么重要。
尚未对此进行测试（我将尝试找到时间做这件事），但现在我们假设下面元素的两个“版本”均为“确定”。即使有些人看不到阴影，也有足够的对比度让他们看到图标并“使用它”。
- 易用性
仅仅是卡片吗？
但是，如果我们决定将组件用作按钮而不是卡片，则会出现可访问性的主要问题。
我们可以像下面的示例一样轻松创建带有内部阴影的按下状态。
对比度测试
此按下状态的对比度太小，不足以表示差异。是否可以通过改变的其余部分来表达按钮的状态，这里有一些想法，例如使用轮廓和填充图标，下划线或甚至用颜色填充按下状态。
开发实现其实它比我们认为的在CSS中实现“软阴影”外观要容易。我们尚未研究Swift和Kotlin，但我认为这不应该成为问题。
https://neumorphism.io/#55b9f3（实现新拟态效果CSS代码）
您可以轻松地将可开发的设计与这些卡片形状组合在一起（新拟态卡片），从而获得很好的效果。
-
尽管这一新趋势影响了许多设计师，但对比以前使用的卡片组件可访问性问题相比，它的问题并不那么严重。
所以去疯狂的顺应这一趋势，并对其进行调整以使其成为您的趋势。UI设计师的工作就是需要不断来回挑战自我，探索潮流，以符合产品审美。如果没有这种不断的探索的精神，所有产品将再次看起来相同，同质化严重。
-
本篇文章，作者通过对新拟态设计趋势分析，在文中提及“新拟态”和以前材料卡片的区别，同时证实了新拟态风格优势！但也存在一定的弊端！如何去权衡与设计的把控，需要设计师们多去研究探索！
如今新拟态才初出茅庐，还未被广泛使用，需要有先驱者引领。毕竟国内的环境大家都不敢冒险去尝试运用到线上！
css 伪类是用于向某些选择器添加特殊的效果，是动态的，指当前元素所处的状态或者特性。只有一个元素达到一个特定状态时，它可能得到一个伪类的样式；当状态改变时，它又会失去这个样式。
这篇文章在一定程度上鼓励你在构建UI时使用更简单的CSS和更少的 JS。熟悉 CSS 所提供的一切是实现这一目标的一种方法，另一种方法是实现最佳实践并尽可能多地重用代码。
接下介绍一些大家可能还不熟悉的一些伪类及其用例，希望对大家日后有所帮助。
::first-line | 选择文本的第一行
::first-line 伪元素在某块级元素的第一行应用样式。第一行的长度取决于很多因素，包括元素宽度，文档宽度和文本的文字大小。
::first-line 伪元素只能在块容器中,所以,::first-line伪元素只能在一个display值为block, inline-block, table-cell 或者 table-caption中有用。在其他的类型中，::first-line 是不起作用的。
用法如下：
p:first-line {
color: lightcoral;
}
::first-letter | 选择这一行的第一字
CSS 伪元素 ::first-letter会选中某块级元素第一行的第一个字母。用法如下：
<style>
p::first-letter{
color: red;
font-size: 2em;
}
</style>
<p>前端小智，不断努，终身学习者！</p>
clipboard.png
::selection| 被用户高亮的部分
::selection 伪元素应用于文档中被用户高亮的部分（比如使用鼠标或其他选择设备选中的部分）。
div::selection {
color: #409EFF;
}
clipboard.png
:root | 根元素
:root 伪类匹配文档树的根元素。对于 HTML 来说，:root 表示 <html> 元素，除了优先级更高之外，与 html 选择器相同。
在声明全局 CSS 变量时 :root 会很有用：
:root {
--main-color: hotpink;
--pane-padding: 5px 42px;
}
:empty | 仅当子项为空时才有作用
:empty 伪类代表没有子元素的元素。子元素只可以是元素节点或文本（包括空格）,注释或处理指令都不会产生影响。
div:empty {
border: 2px solid orange;
margin-bottom: 10px;
}
<div></div>
<div></div>
<div>
</div>
clipboard.png
只有第一个和第二个div有作用，因为它们确实是空的，第三个 div 没有作用，因为它有一个换行。
:only-child | 只有一个子元素才有作用
:only-child 匹配没有任何兄弟元素的元素.等效的选择器还可以写成 :first-child:last-child或者:nth-child(1):nth-last-child(1),当然,前者的权重会低一点。
p:only-child{
background: #409EFF;
}
<div>
<p>第一个没有任何兄弟元素的元素</p>
</div>
<div>
<p>第二个</p>
<p>第二个</p>
</div>
clipboard.png
:first-of-type | 选择指定类型的第一个子元素
:first-of-type表示一组兄弟元素中其类型的第一个元素。
.innerDiv p:first-of-type {
color: orangered;
}
上面表示将 .innerDiv 内的第一个元素为 p 的颜色设置为橘色。
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:last-of-type | 选择指定类型的最后一个子元素
:last-of-type CSS 伪类 表示了在（它父元素的）子元素列表中，最后一个给定类型的元素。当代码类似Parent tagName:last-of-type的作用区域包含父元素的所有子元素中的最后一个选定元素，也包括子元素的最后一个子元素并以此类推。
.innerDiv p:last-of-type {
color: orangered;
}
上面表示将 .innerDiv 内的的最后一个元素为 p 的颜色设置为橘色。
clipboard.png
nth-of-type() | 选择指定类型的子元素
:nth-of-type() 这个 CSS 伪类是针对具有一组兄弟节点的标签, 用 n 来筛选出在一组兄弟节点的位置。
.innerDiv p:nth-of-type(1) {
color: orangered;
}
<div class="innerDiv">
<div>Div1</div>
<p>These are the necessary steps</p>
<p>hiya</p>
<p>
Do <em>not</em> push the brake at the same time as the accelerator.
</p>
<div>Div2</div>
</div>
clipboard.png
:nth-last-of-type() | 在列表末尾选择类型的子元素
:nth-last-of-type(an+b) 这个 CSS 伪类 匹配那些在它之后有 an+b-1 个相同类型兄弟节点的元素，其中 n 为正值或零值。它基本上和 :nth-of-type 一样，只是它从结尾处反序计数，而不是从开头处。
.innerDiv p:nth-last-of-type(1) {
color: orangered;
}
这会选择innerDiv元素中包含的类型为p元素的列表中的最后一个子元素。
<div class="innerDiv">
<p>These are the necessary steps</p>
<p>hiya</p>
<div>Div1</div>
<p>
Do the same.
</p>
<div>Div2</div>
</div>
clipboard.png
:link | 选择一个未访问的超链接
:link伪类选择器是用来选中元素当中的链接。它将会选中所有尚未访问的链接，包括那些已经给定了其他伪类选择器的链接（例如:hover选择器，:active选择器，:visited选择器）。
为了可以正确地渲染链接元素的样式，:link伪类选择器应当放在其他伪类选择器的前面，并且遵循LVHA的先后顺序，即：:link — :visited — :hover — :active。:focus伪类选择器常伴随在:hover伪类选择器左右，需要根据你想要实现的效果确定它们的顺序。
a:link {
color: orangered;
}
<a href="/login">Login<a>
clipboard.png
:checked | 选择一个选中的复选框
:checked CSS 伪类选择器表示任何处于选中状态的radio(<input type="radio">), checkbox (<input type="checkbox">) 或("select") 元素中的option HTML元素("option")。
input:checked {
box-shadow: 0 0 0 3px hotpink;
}
<input type="checkbox" />
clipboard.png
大家都说简历没项目写，我就帮大家找了一个项目，还附赠【搭建教程】。
:valid | 选择一个有效的元素
:valid CSS 伪类表示内容验证正确的<input> 或其他 <form> 元素。这能简单地将校验字段展示为一种能让用户辨别出其输入数据的正确性的样式。
input:valid {
box-shadow: 0 0 0 3px hotpink;
}
clipboard.png
:invalid | 选择一个无效的元素
:invalid CSS 伪类 表示任意内容未通过验证的 <input> 或其他 <form> 元素。
input[type="text"]:invalid {
border-color: red;
}
:lang() | 通过指定的lang值选择一个元素
:lang() CSS 伪类基于元素语言来匹配页面元素。
/* 选取任意的英文（en)段落 */
p:lang(en) {
quotes: '\201C' '\201D' '\2018' '\2019';
}
:not() | 用来匹配不符合一组选择器的元素
CSS 伪类 :not() 用来匹配不符合一组选择器的元素。由于它的作用是防止特定的元素被选中，它也被称为反选伪类（negation pseudo-class）。
来看一个例子：
.innerDiv :not(p) {
color: lightcoral;
}
<div class="innerDiv">
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<div>Div 1</div>
<p>Paragraph 3</p>
<div>Div 2</div>
</div>
clipboard.png
Div 1 和 Div 2会被选中，p 不会被选 中。
原文：https://blog.bitsrc.io/css-ps...
代码部署后可能存在的BUG没法实时知道，事后为了解决这些BUG，花了大量的时间进行log 调试，这边顺便给大家推荐一个好用的BUG监控工具 Fundebug。
今年已经是 2020 了，各位作为时代的弄潮儿，上网冲浪是生活中的不可或缺，丰富的冲浪生活中必不可少的当然是买买买，面对琳琅满目的商品图与文案，用户怎样才能快速抓到重点？或者说，怎么样才能让信息出现在合适的位置？
首先我们要了解浏览信息这个动作的本质和特征，浏览的本质就是大脑通过眼睛去提取信息，是一个传达→解码的过程，在这个过程中又存在一些特性，我们可以利用这些特性去进行一些更的信息传达。
受阅读习惯影响，人们阅读的起始端都是在左侧，结合依据尼尔森等老前辈发布的眼球轨迹研究报告可知，视觉浏览习惯呈「F」型且是不受控的潜意识习惯；同时可以延伸出例如「E」、「Z」等浏览模型，我们可以根据这些视觉模型的特性，结合产品的战略层目标，将信息放置在合适的位置，已达到信息传达率的最大化。
了解了基本的视觉浏览模型，那我们的地基就已经搭建好了，接下来我们来看看地基搞定之后的结构要怎么去布局。
首先我们需要清晰产品的属性，电商平台的本质是物品的交易，因为线上的特殊性，产品中图片与文案对于平台的 GMV 就存在最直接的关系。这个时候，单元布局的轮廓就出来了，就是「商品图+关键词文案」。
同时，不同平台战略方向、发展阶段、团队规模等因素的不同，所针对的用户群体、消费阶层、心智、审美等各个因素都会大不相同，有时候甚至在同一平台中针对不同的活动、不同的品类进行细致的场景划分，产生不同的单元结构以满足商业目的上的需要。
720° 全方位了解平台的属性特征后，我们就可以开始利用这么信息来搭建基本的单元结构了。
例如平台主攻下沉市场，用户群体多为三四线，这个时候用户吸引点在于商品的价格与卖点关键词，这时候我们就可以拉大关键词文案的占比，缩小图片的占比，让他们关注的内容尽可能多的进入他们的眼睛，吸引购买意向模糊的用户点击，增加购买意向明确的用户匹配商品的速度，已达到 GMV 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
为什么大爷大妈们总对排队情有独钟，为什么平常不想要的东西一打折就买一堆……震惊！原来套路你的竟然都是自己的大脑！
如今想要成为一名合格的用户体验设计师，首要就是对目标用户的理解和把控。而为了实现这一目标，掌握一些心理学知识就显得尤为重要。当我们能在设计中合理利用心理学的时候，就离创造出让用户感慨「深得朕心」的体验不远了。
这次要介绍的是设计心理学中与我们日常生活密切相关的认知偏差 (Cognitive bias) ，了解它的基本定义之后再结合相关案例探讨如何在设计中利用认知偏差来创造更好的用户体验。
网络上的定义是这样的：人们在知觉自身、他人或外部环境时，常因自身或情境的原因使得知觉结果出现失真的现象。
简单来说，就是大脑创造了一些快捷方式，在处理信息时自然地去调用这些快捷方式，只是这种操作在快速的同时，也会对我们的决策过程产生危害，比如我们会选择性忽略一些信息，或是自发地对信息进行脑补。这样的认知模式导致我们产生了非理性的偏差。
△ 图：大脑的操作
认知偏差种类丰富，已经被提出的就有几百种，有很多尚未被完全验证。下图总结了现有的认知偏差，它们大概可以分为四类：信息过载，信息的意义不明确，大脑来不及认真作出反应以及大脑存不下所有的记忆。通过这张图，我们可以更清晰地了解不同认知偏差背后的成因。
△ 图：认知偏差宝典
那我们该怎么在设计中利用认知偏差呢？我根据日常工作中经常接触的消费场景和学习场景总结了以下几个方面：
△ 图：章节概览，也叫懒人速读版
作为体验设计师，我们需要为用户的决策创造合适的环境，来引导其按照我们设计的方向去达成他们的目标。
锚定效应
锚定效应（Anchoring）是比较常见的一个被利用在消费场景中的认知偏差。它指的是人在做决定的时候，会在很大程度上依赖于其接触到的信息。
比如商场里原价 2000 现价 500 的商品，原价的存在会让人觉得这件商品的价值就是 2000，现在 500 简直是捡了大便宜。
在体验设计中可以借鉴这种做法，通过前后对比放大来优惠感知，进而促进用户做出有利于我们的决策。
△ 图：利用锚定效应推荐会员套餐，对比差价确实诱人
从众效应
从众效应（Bandwagon Effect）是另外一个常见的用于消费场景的认知偏差，指的是人们做决定时通常会和他人保持一致。
下图是售前页一般的设计技巧，通过展示购买人数和滚动播放购买信息来体现出该商品的热门，让正在犹豫的用户「随大流」下单购买。
基于此，我们在设计中可以营造出一种群体选择的效果来吸引更多的用户。
△ 图：这么多人选择，跟随大家不会错，买它
内群体偏差
前面提到的认知偏差之外，内群体偏差 (ingroup bias) 也一般被用来引导用户决策，它是指人们会在认知上倾向于自己所属的群体。
比如 Booking 在查看评论的区域加入了筛选评论语言这一按钮，虽然设计的本意可能是为了方便用户更好地理解评论内容，但是在真实的使用过程中可以发现，用户更加信任自己所选标签内的评论内容，因为同语言往往意味着来自相同的国家或者相近的文化背景，用户通过这种方式找到一个小群体，然后被影响进而做出与群体内人们更为相似的决策。
△ 图：同胞的评价更可靠
因此在体验设计中利用内群体偏差的关键点在于打造群体归属感，借由小群体的力量影响用户的决策。
引导用户做出于我们有利的决策之外，同样，我们可以利用认知偏差提高用户粘性，增强用户和产品之间的联系，使他们对产品「爱不释手」。
宜家效应
宜家效应 (The Ikea Effect) 是指消费者对于自己投入劳动、情感而创造的物品的价值产生高估的价值判断偏差的现象，消费者对于一个物品付出的劳动（情感）越多，就越容易高估该物品的价值。利用宜家效应提高用户粘性的核心是创造低投入、高回报、高贡献价值的任务，保证用户能够完成任务的基础上贡献自己的价值。
在学习场景中我们可以利用宜家效应提高用户粘性，将用户留下来坚持学习。
首先需要保证用户能够完成任务。懂你英语 ®A⁺ 产品中，我们会在用户设置目标时描述该目标的表现，用户以此选择自己的目标。这种方式下的用户对于任务结果的预见性提高，能清楚的知道如果完成任务会达到什么效果，更能被促使顺利地完成任务。
△ 图：目标展示与贡献积累
其次，用户对产品粘性增强需要能够感知到自己所做出的投入，学习场景下这种投入感知更多体现在知识的累积上。在懂你英语 ®A⁺ 课程中，我们将用户与目标之间的距离设计为学习路径，用户每完成一个阶段的学习便会在路径上明显前进，日积月累下来用户能看到自己前进的印记，清晰感知到自身知识的累积，也就因此对产品有更高的价值感受。
负向偏见
由于学习的「反人性」，学习场景下的用户在体验流程中产生消极情绪的概率要大于其余场景，比如学习效果不好，难以坚持等。此类消极情绪对于学习产品影响很大，是因为负向偏见 (negativity bias) 的存在，人们对不好的事情的记忆比快乐的记忆更加清晰，更经常回忆。
因此在学习场景下我们需要给用户更多的正面积极的反馈来抵消掉负面体验的影响。在懂你英语 ®A⁺ 课程设计中，我们在学习结果页根据用户不同的学习表现给出不同的反馈，即使是偏低的成绩，也依然会给出一个较为积极的反馈，以期鼓励用户坚持学习。
△ 图：做得不好也不要灰心
除了简单抵消掉用户的负面偏见，我们甚至可以通过设计去完全扭转局面，变困境为有趣的体验。最经典例子便是谷歌断网时的小恐龙游戏，不知道有多少人会故意关掉网络来玩这个游戏。
△ 图：谷歌的断网小恐龙
作为设计师我们可以通过了解和利用认知偏差来创造既让用户满意又平衡商业的双赢体验。但由于设计师本身也是人类，与用户拥有同样的思考机制，因此在日常的调研分析和设计的过程中也要警惕认知偏差的影响，不断深入了解用户以及使用科学的测试方法来完善自己的设计，持续迭代反思，不因为某个方案自己倾注了很多心血，就觉得它是最好的。用户可能并不买账呢。
最近设计项目中涉及到「瓷片区」，于是和一些设计伙伴请教了解了一下，在此记录总结一下，也希望可以对大家有些小小的帮助。
听说：美团内部将首页的运营广告位模块称为瓷片位，其可以根据需求变动灵活调整，就像瓷片一样灵活适用，顾名思义，瓷片区也就被叫开来了。
根据下图我们可以了解到，瓷片区在产品中的应用。
瓷片区作为与 Banner、金刚区并行的三大运营板块，都负责着导流的功能。瓷片区较两者更便于在页面中进行布局，可以灵活复用。
在电商产品中，导流指的是通过某种形式，增加对商品/功能的曝光，使自己的用户群去购买或了解感兴趣的商品/功能。导流简化流程：导流入口 → 落地页 → 转化率，设计师需要通过在这个流程中收集的数据，进行复盘反思优化设计。
瓷片区属于运营区，在页面中通常位于用户容易点击的区域。通常为图文混排，常见的类型有：实物类、插画类。
1. 实物类
应用场景：需要对商品/服务有高曝光度的产品类型，如外卖、电商、旅游类等，通过对自有商品/服务的直观展示，达到吸引用户的目的。
优点：识别度高、适配千人千面、元素更换灵活；
缺点：图片质量要求较高；
2. 插画类
应用场景：常见于金融类、虚拟类产品。
优点：高度概括主题的图形，通过插画增加产品的调性和趣味性；
缺点：针对性比较强，难复用，花费时间；
1. 排版
瓷片区常见排版方式：左右排版、上下排版和对角线排版。设计师可以将三种排版方式组合设计，使页面更具有节奏感；
2. 图片
对于电商或商城类产品来说，配图的好坏是影响用户点击率最直观的元素；设计瓷片区时需要考虑全局配图和局部配图的情况：
3. 文字
4. 背景
瓷片区背景常见类型：白色/浅色背景、渐变色背景；设计师根据产品调性及业务需求对背景进行灵活使用，但要遵守以下原则：
文中从四点对瓷片区进行了一个概括性的了解总结，设计要点的话在排版设计中都是需要注意的基础知识所以未多加赘述，以此为自己在项目中遇到的知识点做一次沉淀。
文章来源：优设 作者：木子的小千世界
一转眼，夏天就来了，设计中需要清新又抓人眼球的图片，老板又要求使用各年龄段都喜欢的插画风格，应用场景要广，但是预算又没有那么多，该怎么办呢？这也不是熬夜就能熬出来的，不要烦恼，下面这个网站立马解决你上面所有需求的同时，还能帮助提升你的工作效率，延缓你秃头的时间。
这个创造性超强的插画制作网站就是 BLUSH ，你可以根据自己的想法进行元素的替换，也可以直接使用 8 位网站合作设计师的现有作品，超清新的颜色和多样的搭配空间，绝对会让你十分满意的，无论是做 Banner、海报还是用作文章中的插图都十分合适。最重要的是，可以免费商用！接下来就跟着我一起，走进这个网站吧。
网站内拥有 12 大种类的插画图库，包含人物、城市风景、植物、甜点、涂鸦等等。选择你喜欢或者需要的一类，就可以开始你的创作。操作类似于换装游戏，在各个你需要改变的地方更换你喜欢的元素就可以。如果你要摸清整个网站可以产生多少种搭配的话，可能需要花上你不止一天的时间哦。
从上图可以看出，单在人物上，网站就提供了不同的风格，有像儿童形象的「Friendly ones」，也有极简线条的「Big Shoes」，还有夸张超炫的「Power Moves」等等。接下来，为了更好的理解网站提供的服务和操作的方式，我选取实用多变的「Croods」来演示。
首先在栏目左侧选择「Croods」，就会看到下面这样的界面。最上面是设计师的作品，下面则是可以由你自由创造作品的入口，造型可以选择站着或者坐着，场景可以选择谈话、聚会、公园等等，整体的背景也有五大类供你选择。
这里我选择点击「Peaceful Place」。网站出现的作品很符合现在多数人在家办公的状态，如果你不想自己动手，那直接选择这张图片或者点击「Randomiza」再随机生成一张图片，自己满意之后，点击「Download」便可以获取 PNG 格式的图片，不过，高品质 PNG 和 SVG 格式则需要付费。
当然，你也可以通过改变图片上的各个元素，生成你所需要的场景插画。例如想要一个盘着腿坐在沙发上发消息，和朋友聊天聊的很开心的一个形象，就可以通过下方给予的元素进行个性化定制，把表情改成开心，电脑换成手机，右上方替换成聊天框，最后导出为下图的样子。如果想要多人的场景，在上一步选择多人的场景进入就可以了。
同时，网站也支持下载插件，方便众位设计师在 Figma 中更好的运用。在首页点击右上角的「Get Plugin」进入页面，注册账号就可以顺利安装插件。大家可以根据自己的需要选择下载插件或者直接在网站上在线制作。
最后，不得不提的一点是，网站图库在兼顾多样性和平等性上做了很大的努力，人物的肤色可以随你改变，残疾人也有一席之地，可以选择为人物匹配轮椅，或者给人物戴上假肢，涵盖尽可能多的人物情况和场景。相信这样的网站一定能满足你丰富的设计需求，快去使用吧！
文字来源：优设 作者：山楂
在教程开始之前，我先说一下今天的教程我们会讲哪些部分。首先我们会分析儿童风格的特点、然后在这些特点之上给大家演示绘制一些插画小元素。
我们先来看一下这些海报里，是不是很容易就能分辨出，哪一个是关于儿童主题的画面？
可能刚刚的会比较明显，那这组是不是也同样可以分辨出哪一个儿童感比较强的画面？儿童感它既然能够在这些风格里凸显，它一定有一些特点。那么接下来我会通过几个方面去分析这些特点。
我们要选用一些符合儿童风格的元素。植物是儿童画里出现最常用的元素，动物作为自然界的一份子，当然也非常适合。一些儿童属性的物品。比如书本、棒棒糖等。还有天空的云朵、房子这些儿童画画的时候经常出现的元素，都非常适合儿童画面。
但是一些明显不属于儿童用品的元素就不合适了。比如说口红，口红不会让人联想到儿童，更多是成年女性。骷髅头这种恐怖的物体也不能出现。
那我问一下，眼镜适合吗？如果是这种尖锐的眼镜的话可能不太适合。
但是一旦它的外形变得圆润可爱，就很合适。很多物品也像眼镜一样，只要把外形改变得更符合儿童的气质，就不会显得突兀。
假如某一些物体儿童化特征不明显，而又想让它有儿童感，那应该怎么做呢？加入表情，表情简单可爱，就能表现儿童感的情绪。
每个物体加上表情就会变得可爱。但也正因为这些表情加在了本身没有表情的物体上，所以风格里有一种搞怪感。
我把随机下载的儿童海报拼接在一起，整体分析它们的特点。
儿童插画的海报元素使用的色相比较多，这里随机抽取的海报里，画面都是使用了比较多的颜色，红、黄、蓝、绿基本都用上了。
在饱和度上都偏高，一般保持在 70% 以上。
明度方面，把画面模糊再变黑白，我们可以看到整体画面给我们的感觉是比较亮的，就连中间用了大色块的海报的明度也在 50% 以上。而存在的一些深色也是作为画面的点缀。
那么总结起来，一般是色相选取的颜色比较多、饱和度比较高、明度比较高。我们以这张图为例。
当它的颜色种类变少的时候，画面的活泼程度就会降低。
而饱和度变低后，不仅活泼度降低，这种颜色的风格会趋向于成人化。
画面的颜色变深之后，画面就没有透气感。有一个很合适的成语形容，叫「老气横秋」。就是缺乏朝气的感觉。
那么儿童插画的形体有什么特点？总结起来有两个特点，简单和随意。首先儿童对世界的理解还不够深，能力也不足，往往画岀来的东西都是以概括的形式。
比如儿童画一颗真实的树的时候，去掉很多细节，把一个物体比较有特征的外形表现出来。比如儿童画一颗树可能是这样画的。
其次儿童的能力和经验不够，画画的时候边缘都是比较不平滑的，看起来比较随意。
而且就算本来在他眼中是对称的物体，因为手绘的感觉而看起来歪歪扭扭。
当一个物体简单成平滑的几何形的时候，它是偏向于设计感和现代感的。当它越来越接近于随意感觉的时候，它的儿童特征会更强，同时更亲切。
就像这些作品，虽然是插画师画的，但是却有很强的儿童感，就是这种简单和随意再加上插画师的审美形成的画面。
要注意的是简单和随意的把握，太过随意，商业化的价值就不高了。
儿童海报里的插画虽然每个元素比较简单随意，但是要保持画面比较完整，是需要很多元素的拼凑的。
就像这个幼儿园品牌的元素都特别随意，但是最后呈现的效果却也不错，除了在延伸上花了很多心思之外，还因为它的元素比较多，看起来不至于太单薄。
而这些元素的摆放可以不遵循严格的透视和逻辑，这种方式体现了儿童绘画和成年人严格的绘画原理的不同。
能满足上面的特点的儿童风格有很多，在这里我打算用一种比较简单的绘制风格，来进行操作的演示。
首先我们画一颗简单的树，来看一下这个风格。外形不会追求非常的对称。
就连树干我也是用「画笔工具」和鼠标画的。营造一种随意感。
在这里调整一下最后整体的外形后，我们会发现它的边缘和线条都太顺了。没有手绘的自然感。
所以我们要用到「变形工具」，对边缘进行推拉，这样它的边缘就不会特别光滑了。
最后调整一下尖锐的锚点，树就这么简单地完成了。
大家可能会觉得这个风格过于简单了，我用画动物，去讲解一下其中的细节。首先还是用「钢笔工具」，把形体轮廓和主要部位画出来。 大家是不是觉得画到这里就完成了？其实这个风格比较简单，如果没有一些装饰感的细节的话就会显得太过随意了。所以在这只鸟里，要去想怎么添加一些细节。
首先可以加个腮红。腮红的颜色不一定是红的。像鸟的身体色块面积太大了，需要有装饰，所以画几条羽毛。羽毛的形状太过规矩了，还是需要转曲用「变形工具」调整。
还有尾巴的部分也是需要用线的形式让整体更有细节感。最后都是要用「变形工具」让它的线条有种随意感。
最后的细节在嘴巴上添加，直接画一条直线。其实添加细节就是不要出现一整大块的纯色色块。
对于物体的简化不用太过于死板，比如我们现在看到的这个植物，它可以直接简化成圆形和密集的点的组合。
一开始我是直接用「剪切蒙板」的，但是这样边缘过于光滑了，而且里面的点也被框住，不够美观。于是就把点的分布超出圆形一点。这样看起来就比较有细节了。
而我们通过改变形体，就可以演变出很多种不一样的形态。比如这个物体，我在做的时候想能不能把中间的圆缩小一点 。黑色的点占比再大一点。这样就产生了另外一种植物。
甚至还可以直接去掉中间的圆，把点再放大作为主体。原本的点放大会变得太过随意。所以只能通过画圆形和「变形工具」调整。
这样又可以得到不一样的一颗植物了。这样的演变可以根据画面的需求选取不一样的植物。
所以在这里我已经画好一套常用元素的素材了。以植物动物为主，基本能满足日常设计中的需求了。这套素材会分享给大家，在我们的订阅号后台回复「儿童节素材」就可以下载。这套素材是允许大家商用的。有了素材后，怎么用呢，接下来我将用这套素材演示它能怎么使用。
这些素材可以在画面作为点缀营造气氛。
直接使用这些素材，堆叠成完整的画面。
也可以和图片中的人物或者产品做穿插。
接下来用一个案例演示一下，我是怎么用素材的。这个是学而思的手机端海报的文案，主要有标题部分、课程内容、和二维码等。
首先建立一个手机端尺寸。设置好版心的大小。在这里我做的是下方卡片式的结构。（白色色块部分是海报）
可以先把文案编排进来。首先安排好大的元素，二维码和活动价格。主讲老师和上课时间的小标题，字号大小要保持一致。卡片里的信息就编排完了。
标题是画面最大的字号放在上方，副标题和补充信息和大标题居中。接下来就是要在画面中添加我们的素材了。那么怎么选择呢？首先要定好你要选择的元素范围，不要同时出现太多种类的元素。以植物为主、再加上几个元素点缀是一般不会出错的选择。
首先添加的是面积比较大、块面化比较明显的元素。这里就加了三棵简单的树。
接下来就是添加一些更有装饰感的花花草草。
在添加元素的时候也要注意画面点、线、面的结合。就比如现在我们添加的元素主要是以面和点为主。
虽然树的树干也有线，但是轮廓的线条太「顺」了。
所以要添加「线」的特征更明显一点的元素。
在画面的上方加上适合存在画面上方的元素、比如长颈鹿因为本身比较高，所以没问题。把标题移到适合的位置，加蒲公英作为点缀。最后只剩下中间的部分怎么做出和主题相关联的画面了。
我们还有一个信息可以放在人物的手上。最后一个元素就从海报的主题出发。既然是学习的内容，可以画一本书，放在背影上。元素的拼凑完成了，最后就是细节的添加。
现在画面下方的信息不够突出，是因为卡片和背景都是白色的，所以下方加上一个深色的色块，让信息更显眼。
突出的信息可以变颜色。
背景变成黄白色，最后加上 logo。现在画面好像完成了，但是我最后还发现了一个问题，画面上的颜色饱和度都很高，各种颜色之间碰撞，看起来有点透不过气的感觉。
是因为画面缺少浅色。所以我选了两个花把它变成白色。
现在这个素材使用的案例就完成了。
最后要说明，这一套素材它只是一种风格，我们教程前面有说到的任何一个因素的改变都可以演变成无数的风格。
比如它的颜色搭配也可以变，变成一种更亮眼的颜色。或者说它变得更随意，有笔触的自然感。甚至还可以是画画技法风格变化。也可以为每一个元素都加上眼睛，一种搞怪感就出现了。所以是有无限的可能性的，最重要的是要学以致用。
做好画面还不够，我们画面选择的字体也是很重要的，那么我觉得这几款字体做得都不错。
文章来源：优设 作者：研习设
什么是图片懒加载
当我们向下滚动的时候图片资源才被请求到，这也就是我们本次要实现的效果，进入页面的时候，只请求可视区域的图片资源这也就是懒加载。
比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。
这个功能非常常见，你打开淘宝的首页，向下滚动，就会看到会有图片不断的加载；你在百度中搜索图片，结果肯定成千上万条，不可能所有的都一下子加载出来的，很重要的原因就是会有性能问题。你可以在Network中查看，在页面滚动的时候，会看到图片一张张加载出来。
lazyLoad
为什么要做图片懒加载
懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载出来用户也早就走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。
总结出来就两个点：
1.全部加载的话会影响用户体验
2.浪费用户的流量，有些用户并不像全部看完，全部加载会耗费大量流量。
懒加载原理
图片的标签是 img标签，图片的来源主要是 src属性，浏览器是否发起加载图片的请求是根据是否有src属性决定的。
所以可以从 img标签的 src属性入手，在没进到可视区域的时候，就先不给 img 标签的 src属性赋值。
懒加载实现
实现效果图：
imgLazyLoad
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
display: flex;
flex-direction: column;
}
img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div>
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657907683.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657913523.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657925550.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657930289.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657934750.jpeg">
<img data-src="https://cdn.suisuijiang.com/ImageMessage/5adad39555703565e79040fa_1590657918315.jpeg">
</div>
</body>
</html>
监听 scroll 事件判断元素是否进入视口
const imgs = [...document.getElementsByTagName('img')];
let n = 0;
lazyload();
function throttle(fn, wait) {
let timer = null;
return function(...args) {
if(!timer) {
timer = setTimeout(() => {
timer = null;
fn.apply(this, args)
}, wait)
}
}
}
function lazyload() {
var innerHeight = window.innerHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(let i = n; i < imgs.length; i++) {
if(imgs[i].offsetTop < innerHeight + scrollTop) {
imgs[i].src = imgs[i].getAttribute("data-src");
n = i + 1;
}
}
}
window.addEventListener('scroll', throttle(lazyload, 200));
可能会存在下面几个问题：
每次滑动都要执行一次循环，如果有1000多个图片，性能会很差
每次读取 scrollTop 都会引起回流
scrollTop跟DOM的嵌套关系有关，应该根据getboundingclientrect获取
滑到最后的时候刷新，会看到所有的图片都加载了
IntersectionObserver
Intersection Observer API提供了一种异步观察目标元素与祖先元素或文档viewport的交集中的变化的方法。
创建一个 IntersectionObserver对象，并传入相应参数和回调用函数，该回调函数将会在目标(target)元素和根(root)元素的交集大小超过阈值(threshold)规定的大小时候被执行。
var observer = new IntersectionObserver(callback, options);
IntersectionObserver是浏览器原生提供的构造函数，接受两个参数：callback是可见性变化时的回调函数（即目标元素出现在root选项指定的元素中可见时，回调函数将会被执行），option是配置对象（该参数可选）。
返回的 observer是一个观察器实例。实例的 observe 方法可以指定观察哪个DOM节点。
具体的用法可以 查看 MDN文档
const imgs = [...document.getElementsByTagName('img')];
// 当监听的元素进入可视范围内的会触发回调
if(IntersectionObserver) {
// 创建一个 intersection observer
let lazyImageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach((entry, index) => {
let lazyImage = entry.target;
// 相交率，默认是相对于浏览器视窗
if(entry.intersectionRatio > 0) {
lazyImage.src = lazyImage.getAttribute('data-src');
// 当前图片加载完之后需要去掉监听
lazyImageObserver.unobserve(lazyImage);
}
})
})
for(let i = 0; i < imgs.length; i++) {
lazyImageObserver.observe(imgs[i]);
}
}
源码地址-codePen点击预览
vue自定义指令-懒加载
Vue自定义指令
下面的api来自官网自定义指令：
钩子函数
bind: 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted: 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update: 所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新
componentUpdated: 指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind: 只调用一次，指令与元素解绑时调用。
钩子函数参数
指令钩子函数会被传入以下参数：
el：指令所绑定的元素，可以用来直接操作 DOM。
binding：一个对象，包含以下 property：
name：指令名，不包括 v- 前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1" 中，绑定值为 2。
oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。
expression：字符串形式的指令表达式。例如 v-my-directive="1 + 1" 中，表达式为 "1 + 1"。
arg：传给指令的参数，可选。例如 v-my-directive:foo 中，参数为 "foo"。
modifiers：一个包含修饰符的对象。例如：v-my-directive.foo.bar 中，修饰符对象为 { foo: true, bar: true }。
vnode：Vue 编译生成的虚拟节点。
oldVnode：上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用。
实现 v-lazyload 指令
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
img {
width: 100%;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<p v-for="item in imgs" :key="item">
<img v-lazyload="item">
</p>
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
Vue.directive("lazyload", {
// 指令的定义
bind: function(el, binding) {
可视化是利用计算机图形学和图像处理技术，将数据转换成图形或图像在屏幕上显示出来，再进行交互处理的理论、方法和技术。面对医疗行业，如何将行业数据，转化为视觉可视化中的点线面，是在这个项目中需要思考的问题。
本文将带来设计师在医疗院感可视化项目中的设计过程及思考，讲述如何在业务场景下对数据进行抽取表达。通过可视化打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求。同时院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。
本项目以浙江省建德市第一人民医院为案例，地理数据以建德医院坐标为准。
项目背景
院感是什么？院感为医院感染，入院48小时内都有可能感染到院感细菌。在医院里有专门的院感医生职位，对医院感染进行有效的预防与控制。而传统院感管理的工作流：医护人员及院感医生 > 院感系统分析疑似病例 > 得出结论预防或治疗。这种偏人工的方式数据获取方式，无法更的获取院感发生的原因、定位、以及未来的院感预测。
P1 因此我们通过对医院数据的整理，抽离出影响院感的数据，将院感发生、发展、管控、治疗、预测全流程进行整合。
P2 通过医院>楼层>人员三个层面，空间和时间两个维度对院感展示。打破传统院感系统的表单呈现，使院感场景具备互动性、观赏性，满足不同角色的使用需求：如院长的展示性需求。院感医生通过可视化的解决方案能清晰直观的了解到院感发生分布、病例分析，从而控制院感发生和预防。
P3 同时在这样的设计场景下，可以覆盖的医疗业务场景和数据单位也会更多元，具有一定的商业化价值。
P4 设计流程
整个项目的设计流程可以分为4个阶段：信息收集、可视化、线上搭建、效果调试。在此项目实践中，重点投入在前三大部分。
P5 Part1信息收集
我们基于项目背景，梳理要展现的数据指标，对整体业务场景进行故事脚本的规划（即如何展现前期的数据收集，并把其串联在整体业务场景中），设定动作摄像机语言，同时也需要了解最终呈现的硬件设备与使用环境。
P6 Part2可视化
1.交互信息框架
首先梳理院感的信息框架和交互方式。
整个大屏分为院楼层，呈现整体院感数据的统计；楼层屏，作为重点病区的监测预测；个人屏，分析病例回溯病程，从而预测院感。三屏之间相互跳转， 交互演示方式从医院的外部跳转内部结构、再到患者的个人维度，三屏都分别展示相关的数据指标。
P7 2.视觉风格
在大屏视效风格探索上，期初的目标是希望可以打造不一样行业视觉语言，所以选择不同于以往的设计大屏风格，选择白色的风格，符合大家对医护行业的认知。但到中期发现，在硬件设备上展示发是过曝的。因此对设计风格进行调整改为X光片的风格，色系上偏冷绿的感觉。这是在这个项目中的试错经验之一。
P8 3.建模设计
在可视化部分中遇到的难点：建筑模型的高还原。下图为建德第一人民医院实拍图。在大屏项目中，必须真实还原地理位置。而在此医院没有清晰的CAD图纸提供的；在Google的卫星地图下也没有的建筑结构的，所以我在建模的过程中，是踩了坑的，先盲画了一版，但是精细度不够，过于粗糙。
P9 因此我反复看得到的资料，通过在确定地理氛围内，去丰富场景。这样的好处是使业务场景更加丰富，包括扩展到院外的车流数据，为业务场景提供更多可能性 当然后期也摇到了建筑内部的消防图，根据消防图绘制内部结构。
P10 4.数据面板
对可视化组件的组件进行设计：时间筛选、数据统计、占比关系、趋势分析。设计之前也参考了很多概念版的可视化设计，希望在院感屏上可以呈现一种科技概念的感觉。
P11 Part3线上搭建
1.获取地理数据
这部分是非常耗时的，datav是数据驱动的可视化产品，在搭建部分，是全程依靠datav平台的。
首先需要明确地理数据，通过高德数据通过点线成面，可以作为场景定位，也就是物理模型的经纬度数据 后面还原数据效果，造虚拟数据，是非常依赖于这个坐标数据的。
119.291724 , 29.472365
这是建德医院的坐标，医院在地图上的数据是很简化的，颗粒度很大，具体位置无法显示。
P12 因此我们需要建立与地理数据绑定的建模，先对位置。
P13 在这个过程中我发现，如果最开始没有对准位置，也不用紧张，可以在DATAV平台增加hook数据过滤器，解决地理数据与世界坐标无法对齐的问题。
2.线上场景还原
根据对确定过位置模型进行烘焙还原。这个过程中遇到了一些不知名的原因烘焙失败，原因可能是命名有中文/位置数据错误/模型块面复杂等，遇到这样的问题就需要重新从头检查烘焙流程每一步。
P14 3.数据维度展示还原
这一步我们需要把前期做好的数据可视化效果，还原到线上模型中。在这一步我遇到的问题是因建德医院内部具体结构的缺失，使一些可视化效果无法精准匹配到模型上。所以设计过程中只能依赖于在对的地理位置上丰富的场景内造数据，这个过程是比较吃力的。
P15 这个问题的解决办法是通过开发工具和导出的结构俯视图，对位置，然后转化出LEGO的数据
P16 在数据效果还原的过程中，也发现我在前期设计的数据效果，不能全部实现，有些是依赖于开发的 。这时可以通过其他组件效果代替尝试，比如热力的效果用粒子放大，通过参数调节得到热力 再比如局部房间的扫管，通过设计部分多次烘焙模型，不断叠加扫光层，得到房间监测的效果
P17 设计小结
综合以上的经验，院感可视化从设计到落地，整体结构应该是这样从物理基础坐标的获取、到场景搭建、再到数据展示的过程。在这个过程中会用到DATAV、C4D、数据库、简单的代码等技术来实现。
P18 这个项目虽然这只是医疗行业中一个小的业务场景，但我们的业务数据提取及可视化设计思路，他不仅限于医疗行业，同时也可以成为场馆类大屏解决方案的一部分，是具有一定商业化价值的。同时在这过程中沉淀下来的人体结构模型，和一些设计经验，是可以复用到对应行业解决方案中，达到提效。
转自：
蓝蓝设计的小编 http://www.lanlanwork.com