原始transition组件和CSS
定义transition的最简单方法是使用transition·或transition-group 组件。这需要为transition定义一个name`和一些CSS。
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle
</button>
<transition name="fade">
<p v-if="show">hello</p>
</transition>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
show: true
};
}
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
图片描述
看起来容易,对吧?然而，这种方法有一个问题。我们不能在另一个项目中真正重用这个transition。
封装transition组件
如果我们将前面的逻辑封装到一个组件中，并将其用作一个组件，结果会怎样呢？
// FadeTransition.vue
<template>
<transition name="fade">
<slot></slot>
</transition>
</template>
<script>
export default {
};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
<template>
<div id="app">
<button v-on:click="show = !show">
Toggle transition
</button>
<fade-transition>
<div v-if="show" class="box"></div>
</fade-transition>
</div>
</template>
<script>...</script>
<style>...</style>
图片描述
通过在transition组件中提供一个slot，我们几乎可以像使用基本transition组件一样使用它。这比前面的例子稍微好一点，但是如果我们想要传递其他特定于transition的prop，比如mode或者一些hook，该怎么办呢
封装的包装器transition组件
幸运的是，Vue 中有一个功能，使我们可以将用户指定的所有额外props和监听器传递给我们的内部标签/组件。 如果你还不知道，则可以通过$attrs访问额外传递的 props，并将它们与v-bind结合使用以将它们绑定为props。 这同样适用于通过$listeners进行的事件，并通过v-on对其进行应用。
// FadeTransition.vue
<template>
<transition name="fade" v-bind="$attrs" v-on="$listeners">
<slot></slot>
</transition>
</template>
<script>
export default {};
</script>
<style>
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
opacity: 0;
}
</style>
// App.vue
...
<fade-transition mode="out-in">
<div key="blue" v-if="show" class="box"></div>
<div key="red" v-else class="red-box"></div>
</fade-transition>
...
图片描述
完整事例地址：https://codesandbox.io/s/yjl1...
现在，我们可以传递普通transition组件可以接受的任何事件和支持，这使得我们的组件更加可重用。但为什么不更进一步，增加通过 prop 轻松定制持续时间的可能性。
显式持续时间 prop
Vue 为transition组件提供了一个duration prop，然而，它是为更复杂的动画链接而设计的，它帮助 Vue 正确地将它们链接在一起。
在我们的案例中，我们真正需要的是通过组件prop控制CSS animation/transition。 我们可以通过不在CSS中指定显式的CSS动画持续时间，而是将其作为样式来实现。 我们可以借助transition hook来做到这一点，该transition hook与组件生命周期 hook 非常相似，但是它们在过渡所需元素之前和之后被调用。 让我们看看效果如何。
// FadeTransition.vue
<template>
<transition name="fade"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</transition>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
}
},
computed: {
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
</style>
图片描述
完整事例地址：https://codesandbox.io/s/j4qn...
现在，我们可以控制实际的可见过渡时间，这使我们可重用的过渡变得灵活且易于使用。 但是，如何过渡多个元素（如列表项）呢？
Transition group 支持
你想到的最直接的方法可能是创建一个新组件，比如fade-transition-group，然后将当前transition标签替换为transition-group标签，以实现 group transition。如果我们可以在相同的组件中这样做，并公开一个将切换到transition-group实现的group prop，那会怎么样呢?幸运的是，我们可以通过render函数或component和is属性来实现这一点。
// FadeTransition.vue
<template>
<component :is="type"
:tag="tag"
enter-active-class="fadeIn"
leave-active-class="fadeOut"
move-class="fade-move"
v-bind="$attrs"
v-on="hooks">
<slot></slot>
</component>
</template>
<script>
export default {
props: {
duration: {
type: Number,
default: 300
},
group: {
type: Boolean,
default: false
},
tag: {
type: String,
default: "div"
}
},
computed: {
type() {
return this.group ? "transition-group" : "transition";
},
hooks() {
return {
beforeEnter: this.setDuration,
afterEnter: this.cleanUpDuration,
beforeLeave: this.setDuration,
afterLeave: this.cleanUpDuration,
leave: this.setAbsolutePosition,
...this.$listeners
};
}
},
methods: {
setDuration(el) {
el.style.animationDuration = `${this.duration}ms`;
},
cleanUpDuration(el) {
el.style.animationDuration = "";
},
setAbsolutePosition(el) {
if (this.group) {
el.style.position = "absolute";
}
}
}
};
</script>
<style>
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.fadeIn {
animation-name: fadeIn;
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.fadeOut {
animation-name: fadeOut;
}
.fade-move {
transition: transform 0.3s ease-out;
}
</style>
// App.vue
...
<div class="box-wrapper">
<fade-transition group :duration="300">
<div class="box"
v-for="(item, index) in list"
@click="remove(index)"
:key="item"
>
</div>
</fade-transition>
</div>
...
图片描述
完整事例地址：https://codesandbox.io/s/pk9r...
文档中介绍了一个带有transition-group元素的警告。 我们基本上必须在元素离开时将每个项目的定位设置为absolute，以实现其他项目的平滑移动动画。 我们也必须添加一个move-class并手动指定过渡持续时间，因为没有用于移动的 JS hook。我们将这些调整添加到我们的上一个示例中。
再做一些调整，通过在mixin中提取 JS 逻辑，我们可以将其应用于轻松创建新的transition组件，只需将其放入下一个项目中即可。
Vue Transition
在此之前描述的所有内容基本上都是这个小型 transition 集合所包含的内容。它有 10 个封装的transition组件，每个约1kb(缩小)。我认为它非常方便，可以轻松地在不同的项目中使用。你可以试一试:)
总结
我们从一个基本的过渡示例开始，并最终通过可调整的持续时间和transition-group支持来创建可重用的过渡组件。 我们可以使用这些技巧根据并根据自身的需求创建自己的过渡组件。 希望读者从本文中学到了一些知识，并且可以帮助你们建立功能更好的过渡组件。
今日头条作为资讯阅读类产品，Feed流场景是资讯类产品的核心场景之一，关于Feed流的改版尝试一直在进行，针对本次优化，多次在线上进行验证后，得到一个满意的结果，也将我们关于「头条首页改版」运用到的设计方法进行分享。
观点-实验-规则
项目前期提出设计论点，通过方案和实验去验证可行性，最后结合案例形成符合当前场景的设计规则，这也是本次设计探索所运用到的论证方法。
1. 什么是阅读需求？
一组信息通过不同的字号反差组合来满足不同场景下的文字阅读需求，这称之为阅读需求，阅读需求一般可以归纳为以下3种类型：快速定位型、浏览型、阅读型。
△ 三种阅读需求
2. 今日头条首页的阅读需求是什么？
今日头条Feed的阅读需求，我们定义为快速定位型和浏览型之间。原因是在阅读Feed时，用户有获取标题关键信息的强定位属性，同时也有浏览feed信息的浏览诉求；从Feed阅读习惯的分析，我们提到两个关键词，信息的定位和浏览，后面的探索也会围绕这两个关键词展开。
△ 首页的阅读需求
1. 信噪比与界面
「信噪比」（Signal-to-Noise Ratio）原本是用在声音和图像领域的概念，指在声音传播过程中信号和噪音的比例。这个理论也可以运用在页面中，如果要将讯息完整地传递给使用者，可以选择强化原有的讯息，或是降低多余的杂讯，来提高「信噪比」（Signal-to-Noise Ratio）以增加讯息成功被判读的机率，也让使用者能更轻松地阅读资讯。
一组信息是否更好的兼容定位与浏览属性，在于信息本身是否足够强调与清晰；「信噪比」理论是帮助我们理解「信息清晰度」的存在。
简而言之，「信噪比」理论通指有效信息和次级信息的比例，控制平衡这个比例，可以有利于信息完整的传递给用户，也能更轻松的获取资讯。
通过强化页面内的有效资讯，降低多余杂讯，从而提升页面内的「信噪比」，以达到提高有效资讯传递，帮助用户能更轻松获取资讯的目的。「信噪比」理论是非常通用、使用广泛的指导理论，对信息流页面设计有明确的指导作用；
△ 提升「信噪比」的目的
2. 视觉搜寻实验
△ 视觉搜寻实验
在视觉搜寻的实验里，让受试者从许多个「X」里面挑出1个「O」，然后再让他们从「┸」里面挑出一个「┼」。我们把所有的视觉元素称作刺激总量，大部分的元素（「X」和「┸」）称为干扰物，唯一不一样的那个元素（上面例子的「O」和「┼」）称为目标物。而实验的目的，就是要检测在干扰物增加和同等情况下，受试者会不会需要花费更多时间才能找到目标物。
当我们的视觉系统在辨识影像时，有一些影像的属性很容易被大脑处理，我们的视觉系统可以很快过滤辨识这些基础特征，让我们的大脑分辨这些影像属性更容易一些。因此我们涉及到大量信息的设计时，如果能够善用这些基本特征，便可以提高用户的阅读效率。
那么，什么样的特征能够帮助讯息更快，更有效的被用户判读和接收呢？在视觉搜寻实验中，有一些基础特征很容易被我们的视觉系统所辨识出来，其中主要有4种不需注意力介入便能轻易分辨的基本特征：
△ 4种基础特征
强化信息的基本特征是增强信息被判读最有效的方式，我们可以根据场景和用户诉求，选取最合理的方式来对信息进行处理；这4个基础特征，通过反差来增强核心信息的突出程度，辅助信息更好的传递给用户。
通过「视觉搜寻实验」，我们可以得到两点结论：
这两点结论是对于」信噪比「理论的补充，处理好信息的」信噪比「关系，强化有效资讯，弱化次要杂讯，帮助用户有效接收资讯，更轻松获取资讯。
3. 首页目标的变化
资讯的生命周期中，包括了产生、传递、接收这三个重要的阶段，而每个阶段都有可能造成信息的损耗；
信息产生是源头，这里的损耗在所难免，我们所要做的，是尽可能控制」传递「和」接受「阶段的损耗；早期的头条首页承载大量信息，目的是为了让用户可以接受到更多信息，这时「效率」会是第一位。
但在承载大量信息的同时，页面信息过多，容易造成信息对比弱、布局密集，从而导致信息 」传递「 阶段的损耗，同时用户在」接受「信息时，看到拥挤的信息布局，接受信息的」效率「被降低，被迫造成损耗。
为了更好的提升首页阅读效率，我们重新审视当前的设计目标，通过对不同组合的空间调整，平衡展示效率以及阅读识别性，控制「传递」和「接受」中不必要的信息损耗；将设计目标从过去的「效率最大化」，调整为「有效，轻松的阅读」
对于这个目标，我们结合之前抽离的」信噪比「理论，进行更为细致的拆解，确保能落实到后续的设计方案中。
△ 设计目标转变
4. 回顾信噪比
「信噪比」理论可以平衡页面内有效信息和次级信息，在这样理论的引导下，提供的方案其实更具备说服力。
和图片噪点一样，噪点越低，清晰度越高，映射到页面也是如此，页面内的杂讯过多，影响到有效讯息的传递，我们需要做的，就是给页面进行「降噪」处理。
1. 文字的反差比
根据前期的」信噪比「论点和」视觉搜寻实验「，我们得出两个核心观点：
两个论点其实都提到了信息对比强弱对于用户判读的影响，由此可见，不同信息的反差关系,是增强信息传递，缩短用户接受信息耗费时间的关键指标。
如果说「信噪比」是信息流优化的理论依据，那么「反差比」则是验证页面信息反差关系的手段。
调整页面内文字反差，一般通过三种方式来提升或调整
△ 提升文字反差方式
让我们来看首页中Feed流的标题字号，我们通过 iOS 和 Android 的通用文字规范可以发现，最小阅读文字为12号字（10号字用在标签，9号字用在数字提醒，都不适合作为阅读文字），Material design中正文内容默认字号为16px，iOS规范中则定义了7个正文字阶（14、15、16、17、19、21、23)，综合多方因素，我们选取了16号字、17号字为主要验证目标.最后形成16/12 17/12这两组组合来验证线上Feed信息流。
「信噪比」和「视觉搜索」理论中，多次提到增强元素反差比，用户能越快获取资讯；所以我们也尝试了加粗字体和加大文字的实验尝试，用于验证文字反差比的上限。
△ iOS/Android 通用文字
2. 反差比公式
为了更好的验证和观察Feed流中的不同文字字号的反差关系范围，我们提出了一个坐标公式用于验证，可以直观的观察字号，字色，字重三组信息间的关系。
Y轴代表字号，X轴是不同灰阶文字颜色，我们可以将Feed信息组合中的字号放入表格中，通过科学方法检验反差范围。
关于这套验证公式，是我们为了验证文字反差比所提出的检验方法，通过不同实验组中字号的反差范围来验证哪组更适合Feed场景，最后输出成符合当前场景的通用规则。
△ 文字/灰阶反差比推导图
最后，我们选择4组方案进行首页反差比验证，同时将比字号放入坐标轴中,可以看出以下文字的反差范围
△ 在反差比范围内，选取的四种字体组合
上面4个表格分别对应4组反差比验证的字号组合，不同字号组合的反差比范围，我们都可视化出来，以便于更好验证哪个信噪比范围更合理；每组方案的反差比范围都不一样，我们会通过线上实验，选取最适合当前场景的反差比范围，并形成适用于Feed的反差比规则。
这里也是验证首页Feed反差比的上限和下限范围，有时主体并不是反差越强越好，反差也是有阈值范围，超过这个阈值范围，会导致信息展示比例不协调，用户侧也会起到反作用。
目前对于坐标公式验证文字反差比的理论还处于实验理论阶段，我们认为对于字号和灰阶之间，有合理的规则存在，单独对于规则的抽离和梳理，还需要大量样本去实验论证，后续有新的结论产出和模型迭代。
目前线上首页存在以下问题：
为了解决这些问题，我们对于首页的视觉语言进行了优化，通过」信噪比「理论，我们了解到平衡有效信息和杂讯的比例，是保持信息干净清晰，更好触达用户的保证；因此我们重新梳理不同题材的结构，确保核心信息在首页展示的唯一性，去掉了对于用户阅读过程中可能造成阻碍的信息。
△ 首页前后对比
这样，首页上核心信息的展示层级得到统一，保证了信息干净清晰，能够更好触达用户。
在「信噪比」理论和「反差比」实验的基础上，输出了用于线上测试的设计方案，为了验证首页中不同变量的影响，我们把头部，字号，字重，间距这些可能影响首页的因素都拆分验证对于首页影响；同时，根据前面」反差比「的验证理论，我们把」字号加大「和」文字加粗「也放进实验中进行验证，为后续实验积累数据样本。
△ 线上验证首页方案
综合前面的实验结果，最终我们选择了两组这两组方案，目前线上在进行最后实验。在实验中，我们也提取到几点关键指标：
用户对于灰头样式并未特别排斥，这个对于过去头条顶部必须是红色的认知有些挑战；其实当下设计趋势是在减少用户阅读的信息干扰，灰头更符合这一趋势，同时使用灰头也会提升头条整体计品质感，对于后续设计拓展有很大帮助。
加粗字体上，男性用户比较偏好加粗字体，但是女性用户和年轻用户较为反感。
增大Feed字号，信息展示确实更突出，但是影响到整个首页的感官，而且违背了我们的设计目标，同时也不利于后续设计拓展。部分用户手机的展示情况和特殊字体设置都会受到大字体影响，需慎重考虑。
前面有谈及18号字的问题，字号增大确实能增强视觉感官，但要考虑到头条用户比较喜欢运用特殊字体，特殊字体对比通用字体更加个性化，但是字体大小，展示高度并不可控，当字号比较大的情况下，再加上手写字体，效果不可控。
△ 线上手写字体情况
线上实验后，我们也进行了一次线下用户调研，用研结果中用户对新版满意度高于旧版，其中有一个点多次被用户提及到，就是调整后的全圆角搜索框。相比过去的方形搜索框，调整后的全圆角搜索框是能给用户留下深刻印象的视觉记忆。
回顾整个首页改版过程，我们总结了项目中的流程和思考，希望能帮助大家：
1. 定义当前使用场景的阅读需求：
阅读Feed的时候，用户有获取关键信息的强定位属性，同时也兼顾feed信息的浏览属性。
2. 通过「信噪比」理论，明确设计方向：
强化页面内的有效资讯，降低多余杂讯，提升页面内的」信噪比「，达到用户有效接受资讯，轻松获取资讯的目的。
3. 运用「反差比」手段，提升信息反差比，增强信息传递：
文字可以通过字号，字色，字重调整反差关系，并且通过「文字反差验证表」进行反差比范围验证，推导出更适合首页的反差范围，形成首页反差比规则。
4. 线上拆分验证，量化首页影响指标：
线上验证方案，把字号、字重、间距疏密，头部颜色多个维度拆分验证，观察不同个指标对首页影响。
5. 抽离项目中有价值的信息，后续形成统一规则：
间距样式和信息层级统一的feed模块；从矩形到全圆角的搜索框这些知识点都可以沉淀成信息流场景的认知规则，并且给予其它业务和项目理论和实践支持，将理论和线上验证相结合，形成真正有价值的设计方法。
「信噪比」理论可以广泛运用到页面信息设计中，帮助大家合理的梳理核心信息与次要信息关系，并且通过」反差比「手段，增强有效信息或弱化次要信息；保障页面内层级的合理布局，帮助用户更有效的判读信息；这次改版也是对目前认知基础上进行的一次拆解与构建，过去我们所认知的基础目前可能处于变化阶段，这也为我们后续方向探索提供更多可能性。
希望这些能为后续设计起到帮助，给予大家思路与灵感，更好的服务用户。
文章来源：优设 作者：今日头条UED
设计总是在变化。在过去一年里，我们不仅看见了五福的C4D运用，双11的动效插画运用，以及大量AR/VR智能的设计，还有苹果黑暗模式的普及，新技术带来新的体验和解决方案。2020年，关注研究新兴的用户体验趋势，前段时间，在我星球里，我带着设计师一起来研究关于2020界面设计趋势，希望能帮助大家是设计中有所启发。
研究背景
随着UI/UX领域人工智能的发展，和虚拟现实等新技术的变革，从前单一的内容很难满足用户的诉求，用户的诉求也变得千人前面，所以在研究趋势之前，我基于这些关键词，来分析2020的设计趋势。
色彩趋势
1.彩虹渐变
这两年来，彩色渐变一直是设计趋势，设计师将大胆的渐变，饱和度更高的渐变运用在设计中去，让整体的色彩感觉，更加年轻化与活跃。
▲ Apple一直是这个领域的引领者，随着当年iPhoneX的发布，彩虹的渐变色，大胆的渐变风格瞬间成为设计师笔下的弄潮儿。
▲ 这组插画中，作者就运用了大面积的渐变，两种颜色的运用，通过重叠，明度变化，丰富了整个设计层次。
▲ 不仅在平面设计中，在网页设计中，也是被大量运用，SWATCH的官网，清新的渐变配合动感的模特照片，以及和产品的完全结合，让页面充满着活力。
▲ 在移动端也是如此，金融产品的背景设计，银行卡面的设计，可视化图表的运用，都能看出大胆渐变还是很受欢迎。
2.黑暗模式
随着google和facebook以及instagram这些知名应用都开始提供黑暗模式，国内微信也开始黑暗模式，2020黑暗模式设计，一定是需要设计师去关注的。
黑暗模式，除了在黑暗中提高内容可读性以外，还能减少用户疲劳，还可以节约电池，所以黑暗模式在今年将是所有应用程序必不可少的一个功能。
▲ Google的黑暗模式运用，通过一个简单的按钮开关就可以切换，也可以根据系统定义切换。
▲ 黑暗模式未来会成为一种标配，一个软件设计在刚开始的时候就必须考虑进来。
▲ 关于黑暗模式，正向当年iOS扁平化刚出来的时候，国内的很多产品都还没有准备好，但是相信过不了多久，黑暗模式一定会普及开来，所以2020大家都应该提前去了解黑暗模式的，设计规范和细节。
3.更大胆的一种颜色
▲ 除了渐变色，那么大胆的单色在设计中运用也会越来越多，整个设计就一套色彩体系贯穿，大多时候以品牌色的形式去运用，配合留白，对比明显的字体，整体给人印象深刻。
▲ 在韩国的应用中用的比较多，它的优势是色彩干净，品牌整体感强，但是对设计师驾驭页面能力也要求很高，因为大面积的单色，如果用不好就会很刺眼。
▲ Naverpay的设计，整个界面就是用的绿色渐变，清新同时也能很好和Naver品牌色进行结合。
▲ 在它的很多页面中，很多控件这个绿色运用的很巧妙，不会给人很刺眼的感觉，所以大胆的一种颜色运用在2020页将是设计师值得去关注的一个方向。
▲ 扫码加入知识星球，了解更多
插画趋势
在过去几年里，插画是一种新的表达方式，越来越多的设计师，插画师通过插画表达产品的情绪，个人的情绪主张，那么在2020插画的运用就得和品牌很好的融合起来，如果你的插画是和品牌割裂的，需要注意。
1.和品牌结合
▲ wibbite的插画，标志性欧美的风格，除了插画本身手法比较简约模块，插画中运用的色彩和内容本身也很产品定位匹配。
▲ 插画对于品牌来说也是非常重要的一个因素，无论在界面设计，还是在品牌营销很多场景都需要插画去营造产品氛围和气质，插画有助于将我们的品牌故事讲述给听众听，所以在构建一个品牌时候，插画是非常重要的点之一，但是做之前一定要尽量多去了解我们为客户提供的设计价值，只有了解了用户价值，才能去定义去特色的故事，帮助产品。
▲ Uber系列插画提供暖色，以及安全蓝的运用，突出打车服务中安全的关键要素。
▲ Google的插画系统也是如此，没有很华丽的炫技，有的是对于多元文化的思考，设计场景的融合贯通。
所以不难看出，插画的方向一定是和品牌结合的，不会为了趋势而趋势，一定是围绕内容去设计。
2.3D插画
▲ 如果说这2年，各种各样的插画手法百花齐放，那么随着人们的审美变化，趋势也从静态变成动态，从平面变成3D，从今年的支付宝五福设计中大家应该能感觉到2020的插画设计一定是往着3D方向，而且是动态3D方向演进的。
▲ 谷歌一组插画，结合与大脑、团队合作、想法、密码箱为图形进行创意设计，人物造型可爱好玩，凸显年轻化潮流。
▲ Apple在中国区App Store 的一组设计，整体设计以红色为主，运用了象征中国元素的龙、红包、灯笼、福字、纸牌作为设计元素，整体运用3D表达，凸显年轻和趣味性。
3.等距插画
等距插画这两年已经是一个主流风格之一，在未来还会接着流行，但是等距插画未来或许和场景联系在更紧密，在每年天猫双11设计中，互动城的设计每年基本都是等距插画风格，它的故事感和画面感，都能让人眼前一亮，所以电商的设计，在短时间内，大型活动场景基本都离不开这个风格。
▲ 这组等距插画场景故事感很强，建立了一个空间世界，作为网站主风格非常的吸引人。
▲ 除了这种大的场景，等距插画，在小的场景中，作为插画规范也是运用比较多，它风格可轻可重，随着5G时代到来，静态可能会逐步演进成动态插画。
4.根据内容定制的插画
随着内容的升级，对内容的表达也会被越来越重视，那么如何更好的把内容更生动表达出来，插画就是很好的一个形式，根据内容定制的插画，在很多产品中被运用到，互联网教育，IT等领域。所以专门针对内容去设计插画，在今年或许是一个趋势，插画不再是孤零零只是为了情感化而存在。
▲ Crowdrise的产品设计，整体就是运用作为整体设计语言，风格统一，内容突出，画面效果好。
▲ 插画的形态终于不再是孤零零的只是用户情感的表达，而是随着内容的升级变化，在产品中发挥的重要性也越来越大。
3.3D黏土插画的运用
3D设计因为今年设计师很喜欢用的样式之一，我们将尽管3D已经存在了一段时间，但最近我们看到了很多模仿粘土样式效果的3D插图的兴起。这将成为今年流行的设计趋势，我们甚至还会看到很多艺术家在电影，插画和广告中结合了2D和3D风格。
▲ 在instagran的一组设计中，设计师运用这种黏土和3D的方式设计，画面充满了生活感和温暖。
▲ 谷歌也在它们的项目中大量运用这种黏土风格设计，会显得更加的现代和活泼，黏土的设计相对3D插画区别在于更加细腻，线条上更加柔和。
字体趋势
这几年越来越多的公司，开始定制字体，根据自己的品牌特质去做一些独特的字体，从国外到国内，品牌定制字体未来或许还会越来越多，对于设计师好处来说，这些品牌字体很多都是免费开放给设计师用，会形成一个很高的商业环境。
1.定制字体
▲ 锤子发布了他们的Smartisan T黑字体。
▲ 腾讯发布了定制的“腾讯字体”，相比原来倾斜的黑体字，腾讯的新字体更现代、更协调、更动感。运用起来也非常有力量感。
▲ 阿里普惠体，随着集团业务庞大，字体使用场景多且复杂，包括各产品客户端、营销设计、操作系统、硬件设备、建筑空间及公关传播等等。决定以现代为核心设计理念，以可靠、明快为设计切入点，将阿里精神融入到字体当中。最终一款拥有现代感满足全场景黑体诞生了，而且商用免费。
▲ 除了前面的阿里，腾讯，锤子，小米OPPO，京东也都发布了自己的专属品牌字体，所以在2020年，品牌字体或许是每个公司的一个标配了，我们拭目以待。
▲ 国外其实是最早开始为品牌定制字体的，三星手机虽然销量消化，但是他们品牌字体：SamsungOne，设计风格，很强的现代感，而且，这个字体有不同粗细的笔画字重，适用面很广。
▲ IBM的字体名称：IBM Plex Sans Text，这款字体设计比较简洁，干净，没有多余的笔画，这个字体很良心免费商用的。
2.粗体的运用
纵观2020的一些设计，留白越来越大，边距越留越多，字体也变的很粗，粗的字体和正文普通字体形成了明显的对比，再加上网格的布局，让页面内容更加凸显。
▲ 大字体的运用，字体就是内容，重复运用内容元素作为排版手段，对于内容组织和平面要求较高。
▲ 在UI设计中，大字体的设计也很常见，苹果商店，苹果官方应用都是大字体的推崇者，随便5G的来临，对于内容的追求也会越来越高，那么除了大字体，视觉元素减少，内容本身质量要求也越来越高。
▲ 粗的字体常用语大标题，或者页面导航性指引作业，帮助用户更好去理解功能本身，上面这个页面粗的字体就是导航，告诉用户这一页，你需要去完成什么动作指引。
▲ 扫码加入知识星球，了解更多
最后
设计趋势必然与技术发展紧密结合，作为设计师我们需要了解，以及平时和我们设计进行结合，下期将带来，2020的UI设计趋势下部分，看看还有哪些需要我们去关注的。
转自：ui中国-skys
XSS
跨站脚本攻击（Cross Site Script）,本来缩写是 CSS, 但是为了和层叠样式表（Cascading Style Sheet, CSS）有所区分，所以安全领域叫做 “XSS”；
XSS攻击，通常是指攻击者通过 “HTML注入”篡改了网页，插入了恶意的脚本，从而在用户浏览网页时，对用户的浏览器进行控制或者获取用户的敏感信息（Cookie, SessionID等）的一种攻击方式。
页面被注入了恶意JavaScript脚本，浏览器无法判断区分这些脚本是被恶意注入的，还是正常的页面内容，所以恶意注入Javascript脚本也拥有了所有的脚本权限。如果页面被注入了恶意 JavaScript脚本，它可以做哪些事情呢？
可以窃取 cookie信息。恶意 JavaScript可以通过 ”doccument.cookie“获取cookie信息，然后通过 XMLHttpRequest或者Fetch加上CORS功能将数据发送给恶意服务器；恶意服务器拿到用户的cookie信息之后，就可以在其他电脑上模拟用户的登陆，然后进行转账操作。
可以监听用户行为。恶意JavaScript可以使用 "addEventListener"接口来监听键盘事件，比如可以获取用户输入的银行卡等信息，又可以做很多违法的事情。
可以修改DOM 伪造假的登陆窗口，用来欺骗用户输入用户名和密码等信息。
还可以在页面内生成浮窗广告，这些广告会严重影响用户体验。
XSS攻击可以分为三类：反射型，存储型，基于DOM型(DOM based XSS)
反射型
恶意脚本作为网络请求的一部分。
const Koa = require("koa");
const app = new Koa();
app.use(async ctx => {
// ctx.body 即服务端响应的数据
ctx.body = '<script>alert("反射型 XSS 攻击")</script>';
})
app.listen(3000, () => {
console.log('启动成功');
});
访问 http://127.0.0.1:3000/ 可以看到 alert执行
反射型XSS1
举一个常见的场景，我们通过页面的url的一个参数来控制页面的展示内容，比如我们把上面的一部分代码改成下面这样
app.use(async ctx => {
// ctx.body 即服务端响应的数据
ctx.body = ctx.query.userName;
})
此时访问 http://127.0.0.1:3000?userName=xiaoming 可以看到页面上展示了xiaoming，此时我们访问 http://127.0.0.1:3000?userName=<script>alert("反射型 XSS 攻击")</script>, 可以看到页面弹出 alert。
反射型XSS2
通过这个操作，我们会发现用户将一段含有恶意代码的请求提交给服务器，服务器在接收到请求时，又将恶意代码反射给浏览器端，这就是反射型XSS攻击。另外一点需要注意的是，Web 服务器不会存储反射型 XSS 攻击的恶意脚本，这是和存储型 XSS 攻击不同的地方。
在实际的开发过程中，我们会碰到这样的场景，在页面A中点击某个操作，这个按钮操作是需要登录权限的，所以需要跳转到登录页面，登录完成之后再跳转会A页面，我们是这么处理的，跳转登录页面的时候，会加一个参数 returnUrl，表示登录完成之后需要跳转到哪个页面，即这个地址是这样的 http://xxx.com/login?returnUrl=http://xxx.com/A，假如这个时候把returnUrl改成一个script脚本，而你在登录完成之后，如果没有对returnUrl进行合法性判断，而直接通过window.location.href=returnUrl，这个时候这个恶意脚本就会执行。
存储型
存储型会把用户输入的数据“存储”在服务器。
比较常见的一个场景就是，攻击者在社区或论坛写下一篇包含恶意 JavaScript代码的博客文章或评论，文章或评论发表后，所有访问该博客文章或评论的用户，都会在他们的浏览器中执行这段恶意的JavaScript代码。
存储型攻击大致需要经历以下几个步骤
首先攻击者利用站点漏洞将一段恶意JavaScript代码提交到网站数据库中
然后用户向网站请求包含了恶意 JavaScript脚本的页面
当用户浏览该页面的时候，恶意脚本就会将用户的cookie信息等数据上传到服务器
存储型XSS
举一个简单的例子，一个登陆页面，点击登陆的时候，把数据存储在后端，登陆完成之后跳转到首页，首页请求一个接口将当前的用户名显示到页面
客户端代码
<!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>XSS-demo</title>
<style>
.login-wrap {
height: 180px;
width: 300px;
border: 1px solid #ccc;
padding: 20px;
margin-bottom: 20px;
}
input {
width: 300px;
}
</style>
</head>
<body>
<div class="login-wrap">
<input type="text" placeholder="用户名" class="userName">
<br>
<input type="password" placeholder="密码" class="password">
<br>
<br>
<button class="btn">登陆</button>
</div>
</body>
<script>
var btn = document.querySelector('.btn');
btn.onclick = function () {
var userName = document.querySelector('.userName').value;
var password = document.querySelector('.password').value;
fetch('http://localhost:3200/login', {
method: 'POST',
body: JSON.stringify({
userName,
password
}),
headers:{
'Content-Type': 'application/json'
},
mode: 'cors'
})
.then(function (response) {
return response.json();
})
.then(function (res) {
alert(res.msg);
window.location.href= "http://localhost:3200/home";
})
.catch(err => {
message.error(`本地测试错误 ${err.message}`);
console.error('本地测试错误', err);
});
}
</script>
</html>
服务端代码
const Koa = require("koa");
const app = new Koa();
const route = require('koa-route');
var bodyParser = require('koa-bodyparser');
const cors = require('@koa/cors');
// 临时用一个变量来存储，实际应该存在数据库中
let currentUserName = '';
app.use(bodyParser()); // 处理post请求的参数
const login = ctx => {
const req = ctx.request.body;
const userName = req.userName;
currentUserName = userName;
ctx.response.body = {
msg: '登陆成功'
};
}
const home = ctx => {
ctx.body = currentUserName;
}
app.use(cors());
app.use(route.post('/login', login));
app.use(route.get('/home', home));
app.listen(3200, () => {
console.log('启动成功');
});
点击登陆将输入信息提交大服务端，服务端使用变量 currentUserName来存储当前的输入内容，登陆成功后，跳转到 首页， 服务端会返回当前的用户名。如果用户输入了恶意脚本内容，则恶意脚本就会在浏览器端执行。
在用户名的输入框输入 <script>alert('存储型 XSS 攻击')</script>，执行结果如下
存储型XSS
基于DOM(DOM based XSS)
通过恶意脚本修改页面的DOM节点，是发生在前端的攻击
基于DOM攻击大致需要经历以下几个步骤
攻击者构造出特殊的URL，其中包含恶意代码
用户打开带有恶意代码的URL
用户浏览器接受到响应后执行解析，前端JavaScript取出URL中的恶意代码并执行
恶意代码窃取用户数据并发送到攻击者的网站，冒充用户行为，调用目标网站接口执行攻击者指定的操作。
举个例子：
<body>
<div class="login-wrap">
<input type="text" placeholder="输入url" class="url">
<br>
<br>
<button class="btn">提交</button>
<div class="content"></div>
</div>
</body>
<script>
var btn = document.querySelector('.btn');
var content = document.querySelector('.content');
btn.onclick = function () {
var url = document.querySelector('.url').value;
content.innerHTML = `<a href=${url}>跳转到输入的url</a>`
}
</script>
点击提交按钮，会在当前页面插入一个超链接，其地址为文本框的内容。
在输入框输入 如下内容
'' onclick=alert('哈哈，你被攻击了')
执行结果如下
基于DOM型XSS
首先用两个单引号闭合调 href属性，然后插入一个onclick事件。点击这个新生成的链接，脚本将被执行。
上面的代码是通过执行 执行 alert来演示的攻击类型，同样你可以把上面的脚本代码修改为任何你想执行的代码，比如获取 用户的 cookie等信息，<script>alert(document.cookie)</script>，同样也是可以的.
防御XSS
HttpOnly
由于很多XSS攻击都是来盗用Cookie的，因此可以通过 使用HttpOnly属性来防止直接通过 document.cookie 来获取 cookie。
一个Cookie的使用过程如下
浏览器向服务器发起请求，这时候没有 Cookie
服务器返回时设置 Set-Cookie 头，向客户端浏览器写入Cookie
在该 Cookie 到期前，浏览器访问该域下的所有页面，都将发送该Cookie
HttpOnly是在 Set-Cookie时标记的：
通常服务器可以将某些 Cookie 设置为 HttpOnly 标志，HttpOnly 是服务器通过 HTTP 响应头来设置的。
const login = ctx => {
// 简单设置一个cookie
ctx.cookies.set(
'cid',
'hello world',
{
domain: 'localhost', // 写cookie所在的域名
path: '/home', // 写cookie所在的路径
maxAge: 10 * 60 * 1000, // cookie有效时长
expires: new Date('2021-02-15'), // cookie失效时间
httpOnly: true, // 是否只用于http请求中获取
overwrite: false // 是否允许重写
}
)
}
HttpOnly
需要注意的一点是：HttpOnly 并非阻止 XSS 攻击，而是能阻止 XSS 攻击后的 Cookie 劫持攻击。
输入和输出的检查
永远不要相信用户的输入。
输入检查一般是检查用户输入的数据是都包含一些特殊字符，如 <、>, '及"等。如果发现特殊字符，则将这些字符过滤或编码。这种可以称为 “XSS Filter”。
安全的编码函数
针对HTML代码的编码方式是 HtmlEncode（是一种函数实现，将字符串转成 HTMLEntrities）
& --> &
< --> <
> --> >
" --> "
相应的， JavaScript的编码方式可以使用 JavascriptEncode。
假如说用户输入了 <script>alert("你被攻击了")</script>，我们要对用户输入的内容进行过滤（如果包含了 <script> 等敏感字符，就过滤掉）或者对其编码，如果是恶意的脚本，则会变成下面这样
<script>alert("你被攻击了");</script>
经过转码之后的内容，如 <script>标签被转换为 <script>，即使这段脚本返回给页面，页面也不会指向这段代码。
防御 DOM Based XSS
我们可以回看一下上面的例子
btn.onclick = function () {
var url = document.querySelector('.url').value;
content.innerHTML = `<a href=${url}>跳转到输入的url</a>`
}
事实上，DOM Based XSS 是从 JavaScript中输出数据到HTML页面里。
用户输入 '' onclick=alert('哈哈，你被攻击了')，然后通过 innerHTML 修改DOM的内容，就变成了 <a href='' onclick=alert('哈哈，你被攻击了')>跳转到输入的url</a>, XSS因此产生。
那么正确的防御方法是什么呢？
从JavaScript输出到HTML页面，相当于一次 XSS输出的过程，需要根据不同场景进行不同的编码处理
变量输出到 <script>，执行一次 JavascriptEncode
通过JS输出到HTML页面
输出事件或者脚本，做 JavascriptEncode 处理
输出 HTML内容或者属性，做 HtmlEncode 处理
会触发 DOM Based XSS的地方有很多，比如
xxx.interHTML
xxx.outerHTML
document.write
页面中所有的inputs框
XMLHttpRequest返回的数据
...
项目中如果用到，一定要避免在字符串中拼接不可信的数据。
利用CSP
CSP (Content Security Policy) 即内容安全策略，是一种可信白名单机制，可以在服务端配置浏览器哪些外部资源可以加载和执行。我们只需要配置规则，如何拦截是由浏览器自己实现的。我们可以通过这种方式来尽量减少 XSS 攻击。
通常可以通过两种方式来开启 CSP：
设置 HTTP Header 的 Content-Security-Policy
Content-Security-Policy: default-src 'self'; // 只允许加载本站资源
Content-Security-Policy: img-src https://* // 只允许加载 HTTPS 协议图片
Content-Security-Policy: child-src 'none' // 允许加载任何来源框架
设置 meta 标签的方式
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src https://*; child-src 'none';">
这周我们进行下一步讨论：如何对分析结果进行选择。
首先我们需要了解互联网产品研发团队的各个角色分工。
对于初期的产品研发，可能公司没有团队概念，所以从想法到设计到开发，都由一个人搞定；
等到公司发展差不多，自己成了领导，就可以对各个角色和分工有所分组，也就是大多数初创公司的分配情况：
随着公司业务的发展，产品经理需要处理越来越多的业务规划任务，所以从业务视角和用户视角将之前的产品经理岗位职责进行划分：
所以最终的角色分配是：
再大一点的公司，会增加项目经理岗，把之前产品经理负责的职责拆出一部分，这部分职责就是项目管理。所以角色分配最终是：
了解了团队角色分工，只是让产品得到了更专业的技术支持，接下来我们需要切入正题：对交互方案进行评价筛选，筛选的标准可以围绕：有用性、易用性和吸引力展开。
1. 有用性：
方案是否同时满足业务目标与用户体验目标，为了更好理解，大家可以看下如下事例：
如果所有的线上商品都发顺丰快递，对于用户来讲，用户体验当然很好：够快。但是从业务目标来讲，这是不可取的，毕竟快递不能独顺丰一揽。所以这个想法没有顾及到业务目标，是不可行的；
很早之前，有过 Open ID 的概念：用一个 ID 就可以登录多个网站。但是接入了 Open ID 的网站，对于自身产品的登录注册就会有一定影响，所以这个想法不了了之。
后来 Facebook 和 Twitter 开放了自己 ID，可用这两个账号进行其他网站登录。于是国内很多网站也开始支持微博、微信、QQ 账号登录。
这样降低了用户注册成本，而且也获得了一定收益。所以这是个不错的想法，但是对于一些需要获得用户信息的产品可能不太适合，所以视情况而定。
总结来说，有用性就是要满足产品利益与用户利益。毕竟如果只是很好看，最多也就只能被称作一个艺术品。
2. 可用性
所谓可用性就是用户容易理解，使用起来没有障碍，并且感受良好。
关于产品可用性，大家可以去了解下鼎鼎有名的尼尔森十大可用性原则。
3. 吸引力
所谓吸引力就是产品有打动人、超越用户期望值的细节。
关于吸引力设计，大家可以了解一下 KANO 模型，KANO 模型定义了三个层次用户需求：
基本型的需求：用户认为产品必须有的功能属性，如果没有，用户会不满意；如果有，用户会觉得理所当然。这个层次的需求，还谈不上用户满意与否；
期望型的需求：不是产品必须的功能属性，可能用户自己也不清楚一些功能，但是又恰恰是用户希望看到的。如果这种需求实现得越多，用户会越满意；如果没有满足用户这种期望值，用户会不满意；
兴奋型的需求：对于一些无关紧要的功能需求，如果产品满足了这些需求，用户会非常满意，从而提高用户忠诚度，最后把它推荐给好友。
通过以上标准对方案进行分析，最后涉及到决策，不管哪种类型的角色分配，都需要进行决策，这里可分为以下两种：
个人决策：对于最后的方案选择，由一个人进行「拍板」，这种决策方式速度快，容易抓到事情本质；但是缺点是缺少了团队氛围，不太建议这种一人说了算的决策方式；
群体决策：这种决策方式团队氛围会好很多，通过发表每个人的看法，最后得到合理的、正确的、富有创造力的解决方案；但是缺点就是因为参与者多，需要比较长的时间进行决策，即使这样，也建议使用这种决策方式，不过前提是需要事先确定一个明确的负责人，这样可以对决策后果进行负责。
从小的方面来讲，决策也可分为：
内部 review：设计的作品先在团队内部进行过稿，然后修改，切忌全部做完才进行 review，需要做完一步就进行内部讨论；
外部评审：以会议的形式展开，召集大家对作品进行讲解。
确定了最终方案后，我们需要把它推销出去，具体有以下几种方法：
将思考过程可视化：可以采取上一篇文章的表格分析方式，让设计更有说服力；
自己人效应：对自己人说的一些建议方法更加信赖；
准备一份PPT：展示设计思路；
讲一个故事：以用户的某个使用场景开头，一步步讲解用户的使用情况，慢慢过渡到产品功能设计；
掌握必要的演讲技巧和表达能力：包括口头和文字表达能力，通过这两种表达理清思路，也更好让别人进行反馈。
最后想说的一些话：
作为交互（设计）专业人士，我们需要把握好一个尺度：什么该坚持，什么不该坚持，对于一些专业方面的东西，我们需要团队内部人员都坚持，这样目标会更清晰；但是对于一些比较小的设计细节，有时候可以适当妥协。
如何对设计需求分析结果进行选择：
文章来源：优设 作者：Pony欧尼的日常
以下是百度网盘UE团队近期对会员中心体验进行优化，希望对大家做商业化产品有所帮助。
会员中心是承载着产品增值权益展示、购买、管理的「集合地」。自2016年起推出会员和超级会员两项增值服务至今已有4年时间，随着时间推移，用户对网盘会员的诉求越来越多样，会员中心也不仅仅承载着支付能力，更多地是获取福利信息和情感上的尊享感知，同时在产品框架上的拓展性和效率也有待提升，因此有了本次会员中心改版项目。
对于设计师而言，我们发起这个项目所面临的挑战，不仅停留在用户体验的优化还需要兼顾商业转化。接下来将从确定目标、会员中心框架重构、视觉语言升级、沉淀通用组件等方面，跟大家分享下改版背后的设计思考。
在着手推进项目设计前，我们通过定性和定量的分析，并组织多角色对本次升级的目标进行确认，本次升级的目标是：提升用户决策效率；提升用户尊享感；沉淀设计组件库。
1. 为什么要提升用户决策效率？
会员中心是价值与信息的洼地，用户需要在众多特权、优惠信息中做出决策。整个框架清晰、直观、易懂，是提升用户决策效率及满意度的关键所在。
我们通过支付转化漏斗分析并结合用户反馈发现，改版前，会员中心信息架构比较扁平和单一，缺乏关键性信息的直观展示，比如：优惠信息、会员服务信息，导致部分用户无法在付费过程中更好地做决策。
此外，在支付流程上，操作链条较长，容易引起用户厌倦，导致用户流失。基于这些考虑，我们将对现有框架进行升级，以提升用户的决策效率。
2. 为什么要提升用户尊享感？
会员中心也是用户感知身份变化、感知会员尊享的第一步。改版前，不同身份用户（未开通/会员/超级会员）看到的会员页面却是相同的，无法直观感受到不同身份的差异。
通过UER的用户访谈我们也发现，很多用户出现以下场景：
购买会员后用户，产生疑惑「是否购买成功了吗？」；身为超级会员用户，「感受不到任何尊享感受」；快过期的会员用户，「对会员/超级会员快过期的也感知不到，导致特权中断，影响使用体验」…
因此，我们需要对整体身份的感知进行升级，让用户更清晰地感知到自己身份的层级。
3. 为什么要沉淀设计组件库？
对于产品而言，会员中心也是会员类活动的主要运营渠道。
在日常「小步快跑」迭代需求中，为了提升项目组的开发效率以及更好地实现产品侧多场景模块灵活调用的诉求，需要对复用率较高且灵活多变的模块（尤其是支付模块、特权模块）进行组件化。因此我们也对多个模块进行组件沉淀，提升产品迭代效率。不仅于此，组件化也能给用户提供更加统一的认知，做到产品体验上的统一和规范化。
明确了目标后，我们从以下维度进行设计升级，解决现存问题：懂你所想，会员中心框架重构；凸显尊享感知，视觉语言升级；提升迭代效率，通用组件沉淀。
我们本次框架重构的关键词就是「懂你所想」，只有更了解用户，才能提供更符合用户的选择，从而提升用户决策效率。因此，我们在交互框架层面上，做了以下几件事：打造分层布局；强化关键信息；缩短支付步长；智能化推荐。
打造分层布局
进入会员中心的用户，根据会员成长周期可被划分为：历史未付费用户、会员开通中用户、会员即将过期用户、会员已过期用户。
因此，在这次框架设计中，我们根据身份、动机、行为的差异进行分层布局。改变以往的「多人一面」的布局架构，打造出新的「多人多面」的灵活分层页面布局。
当用户是历史未付费用户时，我们更加突出用户的特权介绍和商品支付，便于用户了解会员服务和商品信息；当用户是开通中的用户，我们更加突出用户可尊享的福利信息，突出尊享感；当用户为即将过期用户或已过期用户时，我们展示用户常用特权信息，唤醒用户付费意愿，并为用户提供便捷的续费能力。
下面是改版前后效果对比，从单一身份感知到多元分层处理。
强化关键信息
关键信息也是用户更为「关心」的信息，通过调研发现，网盘用户更加关注会员优惠活动信息、服务到期提醒以及会员之间的差异性，因此在本次升级中，我们对用户所关心的决策信息进行强化，恰如其分地展示便于用户决策，同时提升用户的付费意愿。
新增运营渠道
通过用户访谈，了解到很多用户总是错过网盘的福利活动，不知道在哪里能接受到一手信息。
因此，本次升级我们在会员中心中新增了运营位，增加用户关注的优惠活动的曝光。
服务到期提醒
针对即将过期或已过期的用户，我们会展示用户常用特权功能的即将到期的信息，避免用户特权功能到期后，给用户日常使用带来困扰，比如使用视频原画备份等功能，我们也会提前告知给用户：「3天后即将到期，将不再享有视频原画备份和在线解压等11项特权」，让用户提前做决策。
强化特权的差异对比
此外，我们还强化了特权对比的差异，分别展示了普通用户、会员用户、超级会员用户拥有特权功能的差异性，便于用户根据自身需求选择对应更为合适的会员服务，避免买错等一系列不便或者多花冤枉钱的行为。
缩短支付步长
为了更方便用户进行支付，让用户付费行为更加顺畅丝滑，我们摒弃以往全页面跳转形式，采用了浮层收银台的方式，减少用户在页面间的跳转而带来的迷失感，达到简化支付路径的目的。
也在用户即将过期等状态，保留了原有前置展示商品和支付操作的方式，让用户一键完成续费，方便又快捷。同时，也会在用户选择商品支付时，展示用户帐号信息，避免用户买错的问题。
智能化推荐
与以往不同，我们不局限于通过理性的信息展示，让用户自己搜寻信息、被动匹配，同时我们也在不断尝试采用更加拟人化、对话感的方式触达用户，推送给用户更为关注的信息，更加精细化地探索多样的运营场景。
比如：针对已付费用户，结合用户的使用场景，更多展示特权信息，如：「周末看视频，2倍速、2K、极速加载缺一不可」；
当我们上了会员新特权的时候，也会及时告知用户，让他们享受更加丰富的权益。
本次对会员中心的视觉呈现也做了全新升级，不仅凸显会员的尊享感、情感化，同时兼顾用户的识别效率及后续拓展性，针对这一目标，我们做了以下优化：卡面升级，提升身份感；品牌色优化，确保拓展性；icon重塑，强化识别性；惊喜彩蛋，提升情感化。
卡片升级，提升身份感
会员身份卡片是用户直观感受身份变化的第一步。本次卡片设计中，在卡片比例上，尽可能接近于实物卡片，并在卡面肌理表达上，采用磨砂质地，更贴合用户自然认知，卡片颜色结合会员品牌色进行设计。同时结合网盘品牌基因中的logo的「云」，提升品牌差异化。
当用户进入会员中心时，采用光影动效，同时描绘「云」型，提升视觉层次感，同时加深用户认知。
品牌色优化，确保拓展性
我们还重新定义了会员体系的品牌色，超级会员选用黑金配色来突显最高级别身份。
主题色延续了网盘会员色系，超级会员为金色，会员为红色，在此基础上调整色彩明度。新配色在产品界面和运营活动上，能给用户带来更加直观的身份感知。
辅助色为黑白，因为它是色彩世界中的 「 经典 」 ，给人以简洁、纯粹的审美感受和视觉享受。以黑白色作为会员体系的辅助色，可以衬托出黑金配色的尊享感。
icon重塑，强化识别性
在特权icon设计中，强化识别性是本次优化的重点，因为图标的目的是用来辅助用户识别，帮助用户做决策的。
我们在icon表现手法上，从「线性」改成「面性」，增强视觉比重；去除底部圆形衬底，采用异型图标，强化icon之前的差异化，同时异型的icon在占比较小的区域里使用更加节省空间，提升拓展性。
比如，当用户是未付费时，特权icon仅作为辅助图形，因为在这种场景下，icon远没有文案更能帮助用户清晰理解，避免用户买错。
因此异型、面性、无衬底的icon处理手法，也是在拓展方面较优选择。
以下是icon优化后的整体效果。
惊喜彩蛋，提升情感化
尊享感，不仅体现在功能、视觉层面，还体现在情感化关怀，因此我们通过彩蛋式翻卡的触发形式，采用对话的方式，展示互动文案。
当用户首次进行翻卡时，它会贴心问候：「很高兴你与你相遇，愿美好时光与你相伴。」；当用户日常互动时，它风趣幽默：「据说超级会员，法力无边！」「你喜欢的样子超级会员都有~」；当有用户关注的重要消息时，它会及时预告式通知：「4.11日即将有一大波优惠福利袭来，超级会员最高5折哦」，从而营造一个风趣又贴心的小管家，也让我们的网盘会员服务变得更加贴心。
会员中心包括个人信息展示、身份卡片、商品和支付、尊享特权、尊享福利、成长体系、专属内容、积分兑换等模块。
其中有多种模块会在多场景中进行复用，为了节省开发及设计成本，同时保证体验一致性，我们本次也沉淀出能够灵活调整各个模块的位置的组件，来提升产品及运营效率。
比如：支付模块；特权展示模块。
支付模块
支付模块承载了会员类商品信息的展示，会在多个场景出现，比如：浮层收银台、会员中心页面、全端收银台，以及会员类运营活动。为了保证支付体验的一致性，我们优先对支付模块进行统一和规范，包括其中的商品展示、优惠展示、以及支付按钮的规范化。
为了便于用户感知到会员与超级会员之间的差异，避免错误购买带来的困扰，我们通过品牌色（超级会员的金色，会员的红色）进行区分。
支付模块的统一和差异，既能保持支付体验的一致性，也能避免用户对会员权益产生误解，为用户带来了更规范的支付体验。
特权展示模块
对于特权展示模块进行特权展示的优化，针对以往特权数量多占用空间大，以及特权展示信息过少用户看不懂的问题，不再采用平铺的方式，而是采用利用横向空间的侧滑方式展示，节省更多空间；不再采用原有的特权图标+特权名称的方式，而是同时展示辅助特权信息，便于用户更加了解特权内容。
并将特权展示方式进行组件化，当有新特权上线时，可直接通过后台配置进行上线，无需进行开发，提升效率。
同时，我们还完成了运营位、专享内容、专属推荐等多个模块的组件化，也根据会员商业化的设计规范，形成会员中心的组件库，提升合作效率及用户统一的认知体验。
以上就是本次会员中心改版项目的全过程，从前期用户调研、目标确定（1.提升用户决策效率；2.提升用户尊享感；3.提升迭代效率），到通过多维度地将目标落地（1.懂你所想，会员中心框架重构；2.凸显尊享感知，视觉语言升级；3.提升迭代效率，通用组件沉淀），不仅优化了体验、提高了效率，也对付费转化率有所提升。
本次会员中心改版，是网盘所有同学的共同努力，同时也是会员中心提供给用户更多选择、更率、更多服务的第一步，它不再是机械的信息展示和冰冷的支付平台，而是更懂用户、提供给用户更多元服务的聚集地。
目前还有很多不足和待完善的地方，我们也在尽最大努力为用户提供更好更有价值的服务，感谢大家一致以来的支持与陪伴 。
文章来源：优设 作者：百度UE团队
我最近一直在想自己要写什么，不如这次就来说说我最近在项目中遇到的问题吧~
再给大家看看我的解决方案，如果大家有更好的方案欢迎留言，我们一起探讨啊~
最近一两年我所涉及的项目都是有关于将网页的功能系统改成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 的提升。
简单来说，过程中需要考虑到平台因素所产出的图片尺寸/比例/精致度/是否统一等，与文案搭配所呈现的是否适用当前消费场景及用户心智，是否可以提升用户的转化率，是否可以提升平台的下单率。
单元的架构是多样且复杂的，就像一块七巧板。重点就在于对于产品属性和用户行为、场景、心理等特征的分析，需要权衡各个关键点的重要性，把用户需要看到的信息、我们想让用户看到的信息、用户希望看到的信息以合适的结构状态呈现给他。
我们将大体架构搭建好之后，剩下的就是要把细节元素给点亮，让他们起到一个点睛的效果。
细分一下，其中涉及到的细节元素大致为活动标签、折扣标签、跳转按钮等常规的分子部件，在结构中，图片、商品名称、价格是用户关注的重点，其他的部件则起到辅助刺激的作用。图片和商品名称的大体结构我们在上一步已搭建了，剩下来我们看看这些小部件该如何合理归置。
先从标签说起。整体框架出来了，用户所需要了解的商品信息就已经基本呈现了，这个时候用户心智上更多的主观意向，寻找合适的商品，而标签的出现，更像是一剂兴奋剂，强烈告诉用户：「这个品热度第一！」、「这个品是款！」等我们刺激用户的声音，增强用户查看的欲望。
这个时候疑问来了，那放哪里合适呢？
活动标签，多为显示该商品的热度、促销主题、排名等一些大的状态性的信息，为的是在用户心理层面给这个商品带来更多的好感度，放置的位置可以结合具体场景去分析，可以考虑与商品图进行结合放置。
遵循由上而下滑动的交互原理，我们可知在每个单元的顶部会是滑动浏览时第一被眼睛识别的信息，而且可以利用这个心理去给还没看到具体商品的用户进行一个心理铺垫，比如商品的品质、权威性等，先入为主的进行心理建设，再结合视觉浏览模型，合适的位置就出来了。
次要信息比如倒计时、商品折扣、商品特点等辅助信息，结合布局场景考虑，有的可与图片一起放置增强品质感，有的可与文案一起放置增加决策信息，有的可与价格一起放置，刺激用户进行决策，是很有灵性的一个点睛之笔。
最后是按钮，在这里的按钮可以理解为浏览过程的一个闭环节点，也是一个操作的终结点，是最后的临门一脚。位置当然是在右侧最为合适，降低操作难度，同时也是整个单元的一个视觉终结点，浏览完流程之后决定是否点击跳转。当然，你可以利用你的方式去引导或刺激用户点击，你可以的。
文章来源：优设 作者：阿类杂碎面
蓝蓝 http://www.lanlanwork.com