如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
创意是营销中离消费者最近的环节，同样也是最性感、最直接的部分。但为什么我们都看过杜蕾斯海报却依旧写不出好文案？一个好创意如何诞生？
近日，阿里妈妈发布《美妆行业淘宝首焦创意洞察》（以下简称《报告》），试图通过数据洞察的方式帮助品牌商家更懂创意，探讨什么样的创意真正能被消费者买单，怎样的创意生产能提升运营效率，最终帮助品牌实现生意增长。
如果说创意表现是营销的末端，那么洞察则是营销的起点，在营销媒体「传播体操」看来，创意和洞察更是「术」与「道」的关系。因为有了消费者洞察，才会有推广策略，从而产生许多创意。
创意能让品牌与用户实现更好的沟通，但数字化时代，媒体形态多元化、触点碎片化，对创意提出了更高要求。
以 618 这类大型营销节点为例，阿里妈妈此前洞察到，618 消费者是以女性为主的 1-2 线高学历高消费家庭用户，90 后年轻人群为次主流消费群体。消费人群老龄化与年轻化并行，渠道下沉趋势显现。
因此在创意和营销上，品牌方应重点关注 4 个人群：崛起的新生代，承载主力核心的小镇青年、城市青年，以及正在兴起的中老年人群。懂得消费者需求及市场变化，始终围绕以消费者运营为核心，才能让创意发挥更大的营销价值。
此前，阿里妈妈基于行业推出系列洞察报告，此次首次发布创意领域的营销洞察，则进一步丰富洞察维度，持续输出营销洞察能力。
这或许也让品牌、商家和设计师们曾经的矛盾被解决。此前，在面对销售的需求时，视觉设计的结果需要为用户下单购买、产生交易服务，往往会与审美「打架」。《报告》试图减小品牌方和设计师的认知沟壑，通过解读创意图片背后的运营逻辑，为好的创意提供数据基础。
《报告》聚焦美妆行业的展示类营销创意。通过对海量创意样本的算法支持及数据分析，《报告》分析了淘宝首页焦点图（以下简称「首焦」）这一表现创意的关键区域，挖掘创意特征对点击效果的潜在提升效应。
《报告》发现，淘宝首焦曝光点击后的流量联动效应明显，首焦上的点击进店能够有效提升消费者在其他渠道上的进店概率，而在资源位与定向方式固定的前提下，创意设计往往是影响点击率的第一要素。
从数据上进一步看到，首焦点击人群较非首焦点击人群，在后续其他触点上的进店概率会高出一筹，尤其在美容护肤/美体精油和彩妆类目分别提升了 9.1 倍和 11.2 倍。这意味着，首焦投放有助优化全店流量获取能力。若需完成拉新任务，可以考虑首焦投放与其他营销方式组合。
具体来看，《报告》逐一拆解了首焦图片的创意构成──调性、色调、标示、文本内容、商品数量、人像。在控制创意之外的潜在影响因素下，阿里妈妈透过洞察报告还原创意质量的高低对营销效果的影响差异，从而得出最优的组成方式。
不过，在大家积极探索新内容形态的当下，为什么靠图片传达信息依旧重要？在阿里妈妈营销研究中心高级行业研究专家苏寅看来：「从展现形态上来看，图片创意依旧是品牌方与用户沟通的重要抓手。作为基础的信息媒介，图片与视频类内容深度联动，功能互补，形成品牌与消费者的立体化沟通。」
「互联网女皇」玛丽·米克尔发布的《2019年互联网趋势报告》也佐证，虽然短视频直播增长迅速，但使用图片成为越来越重要的沟通方式，基于图片的通讯也得到计算机视觉及人工智能的推进。而在广告营销领域里，图片创意的价值也正在被逐渐受到关注。
有数据支撑的创意洞察后，数字化营销时代也需要更数字化的创意解决方案。
随着报告的发布，阿里妈妈将携手旗下平台创意中心，为品牌和商家提供数字化的创意解决方案。作为国内领先的提升营销效率的全域创意解决方案平台，创意中心接下来也计划把创意黑科技和创意资产的能力，与生态中的各类伙伴进行合作，赋能整个营销创意行业。
除此，阿里妈妈也从产品功能、营销策略上提供赋能。
旗下展示营销产品智钻在 618 前实现升级，在展现形式上首次突破淘宝首焦静态图片形态，以创意元素组件化的形式，创新支持微动效、倒计时、店铺回头客等组件。品牌商家因此有了更多展示信息增益的可能，可提升创意对消费者的心智传达和沟通效率，同时也能提升转化效果。
附完整版报告内容：
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一、父组件给子组件传值
1、父组件调用子组件的时候，绑定动态属性
/*传值可以是值“title”、是方法“run”、是组件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子组件里面通过props接受父组件传过来的数据
<script>
export default{
props:['title','run','home']
}
</script>
二、父组件主动获取子组件的数据和方法
1、调用子组件的时候定义一个ref
<v-header ref="header"></v-header>
1
2、在父组件里面通过以下方式获取属性和方法
this.$refs.header.属性
this.$refs.header.方法
三、子组件主动获取父组件的数据和方法
this.$parent.数据
this.$parent.方法
四、非父子组建传值
1、新建一个js文件 然后引入vue 实例化vue最后暴露这个实例
VueEvent.js
import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;
2、在要广播的地方引入刚才定义的实例，并进行广播
home.vue
<script>
import VueEvent from './VueEvent.js';
export default{
methods:{
emitNews(){
/*广播数据*/
VueEvent.$emit('to-news',this.数据)
}
}
}
</script>
3、在要接收数据的地方接受广播
news.vue
<script>
import VueEvent from './VueEvent.js';
export default{
/*在生命周期函数里写，编译的时候就调用*/
mounted(){
/*接受广播*/
VueEvent.$on('to-news',function(data){
console.log(data);
})
}
}
</script>
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
一.为什么Bitmap三级缓存？
没有缓存的弊端 ：费流量, 加载速度慢
加入缓存的优点： 省流量，支持离线浏览
二.原理
从内存获取图片, 如果存在, 则显示; 如果不存在, 则从SD卡中获取图片
从SD卡中获取图片, 如果文件中存在, 显示, 并且添加到内存中; 否则开启网络下载图片
从网络下载图片, 如果下载成功, 则添加到缓存中, 存入SD卡, 显示图片
三.代码
(1)添加读写SD卡的权限和网络权限
// //Lrucache存储工具类
public class LruUtils {
private LruCache<String,Bitmap> lruCache;
private long max=Runtime.getRuntime().maxMemory();
public LruUtils(){
lruCache=new LruCache<String,Bitmap>((int)max/8){
@Override
protected int sizeOf(String key, Bitmap value) {
return value.getByteCount();
}
};
}
public Bitmap getBitmap(String key){
return lruCache.get(key);
}
public void setBitmap(String key,Bitmap bitmap){
lruCache.put(key,bitmap);
}
1
2
3
4
5
6
7
8
9
10
11
12
}
//SD卡工具类
public class SDUtils {
public static void setBitmap(String name, Bitmap bitmap) {
if (Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)) {
File file = Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1 = new File(file, name);
try {
bitmap.compress(Bitmap.CompressFormat.JPEG, 100, new FileOutputStream(file1));
} catch (FileNotFoundException e) {
e.printStackTrace();
}
}
}
public static Bitmap getBitmap(String name){
if(Environment.getExternalStorageState().equals(Environment.MEDIA_MOUNTED)){
File file=Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES);
File file1=new File(file,name);
return BitmapFactory.decodeFile(file1.getAbsolutePath());
}
return null;
}
}
//网络
import android.app.AlertDialog;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class NewUtils {
public static Bitmap getBitmap(String url) throws ExecutionException, InterruptedException {
return new MyTask().execute(url).get();
}
static class MyTask extends AsyncTask<String,Void,Bitmap>{
@Override
protected Bitmap doInBackground(String… strings) {
String imageUrl = strings[0];
HttpURLConnection conn = null;
try {
URL url = new URL(imageUrl);
conn = (HttpURLConnection) url.openConnection();
conn.setReadTimeout(5000);
conn.setConnectTimeout(5000);
conn.setRequestMethod(“GET”);
if (conn.getResponseCode() == 200) {
InputStream is = conn.getInputStream();
Bitmap bitmap = BitmapFactory.decodeStream(is);
return bitmap;
}
} catch (Exception e) {
e.printStackTrace();
} finally {
if (conn != null) {
conn.disconnect();
}
}
return null;
}
}
}
//使用三个工具类完成Bitmap的三级缓存
package com.example.administrator.myapplication;
import android.graphics.Bitmap;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.Toast;
import java.util.concurrent.ExecutionException;
public class MainActivity extends AppCompatActivity {
private ImageView imageView;
Button button;
private LruUtils lruUtils= new LruUtils();
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
button=findViewById(R.id.button);
imageView=findViewById(R.id.imageview);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bitmap bitmap=lruUtils.getBitmap(“czn”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存内存”, Toast.LENGTH_SHORT).show();
}else{
bitmap=SDUtils.getBitmap(“czn.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存SD卡”, Toast.LENGTH_SHORT).show();
lruUtils.setBitmap(“czn”,bitmap);
}else{
try {
bitmap=NewUtils.getBitmap(“http://pic1.win4000.com/wallpaper/e/50d80458e1373.jpg”);
if (bitmap!=null){
imageView.setImageBitmap(bitmap);
Toast.makeText(MainActivity.this, “图片存网络”, Toast.LENGTH_SHORT).show();
SDUtils.setBitmap(“czn.jpg”,bitmap);
lruUtils.setBitmap(“czn”,bitmap);
}else{
Toast.makeText(MainActivity.this, “没有找到”, Toast.LENGTH_SHORT).show();
}
} catch (ExecutionException e) {
e.printStackTrace();
} catch (InterruptedException e) {
e.printStackTrace();
}
}
}
}
});
}
}
Bitmap二次采样
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.HttpURLConnection;
import java.net.MalformedURLException;
import java.net.URL;
import java.util.concurrent.ExecutionException;
public class Main2Activity extends AppCompatActivity {
Button bt;
ImageView imageView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main2);
bt=findViewById(R.id.bt);
imageView=findViewById(R.id.mimage);
bt.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
Bitmap bitmap = new MyTask().execute(“https://cdn.duitang.com/uploads/item/201211/24/20121124230042_Bfhim.jpeg”).get();
imageView.setImageBitmap(bitmap);
} catch (InterruptedException e) {
e.printStackTrace();
} catch (ExecutionException e) {
e.printStackTrace();
}
}
});
}
class MyTask extends AsyncTask<String,Object,Bitmap>{
@Override
protected Bitmap doInBackground(String... strings) {
try {
URL url = new URL(strings[0]);
HttpURLConnection urlConnection = (HttpURLConnection) url.openConnection();
if(urlConnection.getResponseCode()==200){
InputStream inputStream = urlConnection.getInputStream();
//将inputStream流存储起来
ByteArrayOutputStream byteArrayOutputStream = new ByteArrayOutputStream();
byte[] bytes = new byte[1024];
int len=0;
while((len=inputStream.read(bytes))!=-1){
byteArrayOutputStream.write(bytes,0,len);
}
//桶：网络的图片都放在数组里面了
byte[] data = byteArrayOutputStream.toByteArray();
//TODO 1：第一次采样：只采边框 计算压缩比例
BitmapFactory.Options options = new BitmapFactory.Options();
options.inJustDecodeBounds=true;//设置只采边框
BitmapFactory.decodeByteArray(data,0,data.length,options);//采样
int outWidth = options.outWidth;//获得原图的宽
int outHeight = options.outHeight;//获得原图的高
//计算缩放比例
int size=1;
while(outWidth/size>100||outHeight/size>100){
size*=2;
}
//TODO 2:第二次采样：按照比例才像素
options.inJustDecodeBounds=false;//设置只采边框为fasle
options.inSampleSize=size;//设置缩放比例
Bitmap bitmap= BitmapFactory.decodeByteArray(data,0,data.length,options);//采样
return bitmap;
}
} catch (MalformedURLException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
return null;
}
}
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
Fragment，在Android中指的是碎片，也就是在不切换Activity时进行页面的切换，这是Android中的一个重点的内容，很多的应用程序中都有这样的功能，所以，接下来让我们具体的学习一下Fragment的使用
首先，要将一个Fragment给创建出来。
新建一个类，让这个类继承Fragment，并重写onCreatView()方法，之后，使用onCreatView中的inflater将一个布局文件转换为视图，并返回这个视图
之后在MainActivity中获得一个Fragment的管理者
之后我们通过这个管理者的beginTransaction()的方法获取事务管理者
然后，我们将之前写好的Fragment类给进行实例化
之后，我们使用事务管理者的replace()方法来给我们需要的控件上将我们的Fragment给显示出来
之后，使用事务管理者提交事务，这样我们的Fragment就完美的显示出来了
碎片可以在不影响Activity时进行一个页面的切换，所以，我们需要把我们需要显示的所有的Fragment都放到FrameLayout布局上
这样就可以实现Fragment的切换了
同时，在进行Fragment可以给Fragment添加一个回退栈的功能，使得每次按返回键是返回的上一个Fragment，而不是直接退出整个程序了
下面我们讲一下Fragment的生命周期
Fragment的生命周期分为11个部分，分别为：
onAttach()
onCreatView()
onCreat()
onActivityCreated()
onStart()
onResume()
onPause()
onStop()
onDestoryView()
onDestory()
onDetach()
Fragment的生命周期和Activity的生命周期一样重要，都是面试时的重点，一定要背下来
其次还要学习关于Fragment的传值
Fragment的传值分为两种方法，分别是Handler传值和接口回调方法，接下来就来学习一下两种不同的传值方式
首先是Handler的传值 ，
第一步是在我们需要拿到值的Fragment中建立一个静态的Handler，之后重写handleMessage()方法
第二步，在传值的Fragment的调用Handler进行传值
这样就可以实现了Fragment的Handler之间的传值
然后我们接着说关于接口回调的传值
首先定义一个外部接口
之后呢，在传值的Fragment里传递数据
然后，我们在接收的Fragment里实现接口并重写方法即可传递数据
这就是接口回调传递数据的方法
好了，关于Fragment的使用简单说到这里
---------------------
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
写在前面
2019年6月18日Material Design更新了设计指南中数据可视化部分，这是谷歌数据可视化团队形成的一套全面的数据可视化指南， 涵盖了设计原则、图表分类、图表的选用、样式设计、交互设计、仪表板设计等方面。个人阅读后进行了翻译，希望能够分享给更多对数据可视化有兴趣的设计同学！
全文章节目录：
原则
类型
选择图表
样式
行为
仪表板
数据可视化
数据可视化就是用图形描绘信息。
原则
数据可视化是一种以图形描绘密集和复杂信息的表现形式。数据可视化的视觉效果旨在使数据容易对比，并用它来讲故事，以此来帮助用户做出决策。
数据可视化可以表达不同类型和规模的数据，包括从几个数据点到有大量变量的数据集。
类型
数据可视化可以以不同的形式表达。图表是表达数据的常用方式，因为它们能够展示和对比多种不同的数据。
图表类型的选择主要取决于两点：要表现的数据和表现该数据的用意。该指南描述各种类型的图表及其用例。
图表类型
1. 随时间变化
随时间变化的图表显示一段时间的数据，例如多个类别之间的趋势或比较。
常见用例包括：
股价表现、卫生统计、年表
2. 类别比较
类别比较图表是多个不同类别数据之间的比较。
常见用例包括：
不同国家的收入、热门场地时间、团队分配
3. 排名
排名图表显示项目在有序列表中的位置。
常见用例包括：
选举结果、性能统计
4. 占比
占比类图表显示了局部与整体的关系。
常见用例包括：
产品类别的综合收入、预算
5. 关联
关联类图表显示两个或以上变量之间的关系。
常见用例包括：
收入和预期寿命
6. 分布
分布类图表显示每个值在数据集中出现的频率。
常见用例包括：
人口分布、收入分布
7. 流程
流程类图表显示了多个状态之间的数据移动。
常见用例包括：
资金转移、投票计数和选举结果
8. 关系
关系图表显示多个项目之间的关系。
常见用例包括：
社交网络、词图
选择图表
面对多种类型的图表，以下指南提供了关于如何选择合适的图表见解。
显示随时间的变化
可以使用时间序列图表来表示随时间的变化，就是按时间顺序表示数据点的图表。表示随时间变化的图表包括：折线图，柱状图（条形图）和面积图。
*基线值是y轴上的起始值。
柱状图（条形图）和饼图
柱状图（条形图）和饼图都可用于显示比例，表示部分与总体的对比。
· 柱状图（条形图）使用共同的基线，通过条形长度表示数量
· 饼图使用圆的圆弧或角度表示整体的一部分
柱状图（条形图），折线图和堆叠面积图在显示随时间的变化方面比饼图更有效地。由于这三个图表都是使用相同的基线，因此可以更轻松地根据条形长度比较值的差异。
面积图
面积图有多种类型，包括堆叠面积图和层叠面积图：
· 堆叠面积图显示多个时间序列（在同一时间段内）堆叠在一起
· 层叠面积图显示多个时间序列（在同一时间段内）重叠在一起
层叠面积图建议不要使用超过两个时间序列，因为这样做会使数据模糊不清。取而代之，应当使用堆叠面积图来比较一个时间间隔内的多个值（横轴表示时间）。
样式
数据可视化使用自定义样式和形状，使数据更容易理解，以适合用户需求。
图表可以从以下方面进行优化：
· 图形元素
· 文字排版
· 图标
· 轴和标签
· 图例和注释
不同类型数据的样式设计
可视化编码是将数据转换为可视形式的过程。独特的图形属性可应用于定量数据（如温度，价格或速度）和定性数据（如类别，风味或表达式）。
这些图形属性包括：
· 形状
· 颜色
· 大小
· 面积
· 体积
· 长度
· 角度
· 位置
· 方向
· 密度
不同属性的表现
多个视觉处理方法可以综合应用于数据点的多个方面。例如，在条形图中，条形颜色可以表示类别，而条形长度可以表示值（如人口数量）。
形状可用于表示定性数据。在此图表中，每个类别由特定形状（圆形，正方形和三角形）表示，这样可以在一张图表中轻松实现特定范围的比较，同时也可以进行类别之间比较。
1. 形状
图表可以运用形状，以多种方式展示数据。形状的设计可以是有趣的、曲线的，或者和高保真的等等。
形状程度
图表可以展示不同精度程度的数据。用于细致研究的数据应该用适合交互的形状（在触摸大小和功能可见性方面）展示。而旨在表达一般概念或趋势的数据可以使用细节较少的形状。
2. 颜色
颜色可用于以四种主要方式区分图表数据：
· 区分类别
· 表示数量
· 突出特定数据
· 表示含义
颜色区分类别
例：圆环图中，颜色用于表示类别。
颜色表示数量
例：地图中，颜色用于表示数据值。
颜色突出数据
例：散点图中，颜色用于突出特定数据。
重点区域
在不滥用的情况下，颜色可以突出焦点区域。不建议大量使用高亮颜色，因为它们会分散用户注意力，影响用户的专注力。
颜色表示含义
无障碍
为了适应看不到颜色差异的用户，您可以使用其他方法来强调数据，例如高对比度着色，形状或纹理。
将文本标签应用于数据还有助于说明其含义，同时消除对图例的需求。
3. 线
图表中的线可以表示数据的特性，例如层次结构，突出和比较。线条可以有多种不同的样式，例如点划线或不同的不透明度。
线可以应用于特定元素，包括：
· 注释
· 预测元素
· 比较工具
· 可靠区间
· 异常
4. 文字排版
文本可用于不同的图表元素，包括：
· 图表标题
· 数据标签
· 轴标签
· 图例
图表标题通常是具有最高层次结构的文本，轴标签和图例具有级别的层次结构。
字重
标题和字重的变化可以表达内容在层次结构中的重要程度。但是应该保持克制，使用有限的字体样式。
5. 图标
图标可以表示图表中不同类型的数据，并提高图表的整体可用性。
图标可用于：
· 分类数据：用于区分组或类别
· UI控件和操作：例如筛选，缩放，保存和下载
· 状态：例如错误，空状态，完成状态和危险
在图表中使用图标时，建议使用通用可识别符号，尤其是在表示操作或状态时，例如：保存，下载，完成，错误和危险。
6. 坐标轴
一个或多个坐标轴显示数据的比例和范围。例如，折线图沿水平和垂直坐标轴显示一系列值。
柱状图（条形图）基线
柱状图（条形图）应从为零的基线（y轴上的起始值）开始。从不为零的基线开始可能导致数据被错误地理解。
坐标轴标签
标签的设计应体现图表中最重要的数据。应根据需要使用标签，并在UI中保持一致性。他们的出现不应该妨碍查看图表。
文字方向
为便于阅读，文本标签应水平放置在图表上。
文字标签不应该：
· 旋转
· 垂直堆叠
7. 图例和注释
图例和注释描述了图表的信息。注释应突出显示数据点，数据异常值和任何值得注意的内容。
1. 注释
2. 图例
在PC端，建议在图表下方放置图例。在移动端，将图例放在图表上方，以便在交互过程中保持可见。
标签和图例
在简单图表中，可以使用直接标签。在密集的图表（或更大的图表组的一部分）中，可以用图例。
8. 小显示屏
可穿戴设备（或其他小屏幕）上显示的图表应该是移动端或PC端图表的简化版本。
行为
图表具有交互模式，使用户可以控制图表数据。这些模式可以使用户专注于图表的特定值或范围。
以下推荐的交互模式，样式和效果（如触觉反馈）可以提高用户对图表数据的理解：
渐进式披露
提供了按需求逐步展示详细信息的明确途径。
直接操作
允许用户直接对UI元素进行操作，最大限度地减少屏幕上所需的操作数量，包括：缩放和平移，分页和数据控件。
改变视角
使一种设计可以适用于不同的用户和数据类型，例如数据控件和动效。
1. 渐进式披露
使用渐进式披露显示图表详细信息，允许用户根据需要查看特定数据点。
2. 缩放和平移
缩放和平移是常用的图表交互，会影响用户对图表数据深入的研究和探索。
缩放
缩放改变界面显示的远近。设备类型决定了如何执行缩放。
· 在PC端，通过单击、拖动或滚动进行缩放
· 在移动端，通过捏合进行缩放
当缩放不是主要操作时，可以通过单击和拖动（在PC端）或双击（在移动端）来实现。
平移
平移让用户能够看到屏幕之外的界面。它应该合理的展示数据的价值。例如，如果图表的一个维度比另一个维度更重要，则平移的方向可以仅限于该维度。
· 平移通常与缩放功能同时使用。
· 在移动端，平移通常通过手势实现，例如单指滑动。
3. 分页
在移动端，分页是一种常见模式，让用户通过向右或向左滑动来查看上一个或下一个图表。
在移动端，用户可以向右滑动以查看前一天。
4. 数据控制
可以使用切换控件，选项卡和下拉菜单筛选或改变数据。
用户调节控件时，这些控件还可以显示指标。
切换控件，选项卡和下拉菜单可以更改或筛选数据。
5. 动效
动效可以强化数据之间的联系，提升交互体验。应该有目的地使用运动（不是装饰性地），表达不同状态和空间之间的联系。
运动应该是合理，平稳，反应灵敏，不会妨碍用户的使用。
在此示例中，图表数据从按天显示动态切换到按周显示。转换期间不会显示所选日期范围之外的数据，从而降低了复杂性。
动画能够体现两个不同图表的相关性。
6. 空状态
图表数据为空的情况下，可以提供相关数据的预期。
在合适的情况下，可以展示角色动画创造愉悦和鼓励。
有特色的动画提升了空状态的效果。
仪表板
在称为仪表板的UI界面中，数据可视化通过一系列图表实现。多个独立的图表有时可以比一个复杂的图表更好地表达故事。
仪表板设计
仪表板的目的应在其布局，样式和交互模式中体现。无论是用来制作演示文稿还是深入研究数据，它的设计应该适合它的使用方式。
仪表板应该：
· 突出最重要信息（使用布局）
· 根据信息层级确定信息的焦点（使用颜色，位置，大小和视觉权重）
应根据对数据的需求确定信息的优先级并进行安排。在此示例中设计仪表板，考虑了以下用户问题：
1. 需要注意的问题
2. 发生问题的时间
3.发生问题的位置
4.受问题影响的其他变量
1. 分析类仪表板
分析仪类表板让用户能够研究多组数据并发现趋势。通常，这些仪表板包含能够深入洞察数据的复杂图表。
用例包括：
· 随时间变化的突出趋势
· 回答“为什么”和“假设”的问题
· 预测
· 创建有深度的报告
分析类仪表板示例：
· 跟踪广告活动的收效
· 跟踪产品在其整个生命周期中的销售额和收入
· 随时间变化的城市人口趋势
· 跟踪随时间变化气候数据
分析类仪表板显示气候数据
2. 操作类仪表板
操作类仪表板旨在回答一组预设的问题。它们通常用于完成与监控相关的任务。
在大多数情况下，这些类型的仪表板具有一系列关于当前信息的简单图表。
用例包括：
· 跟踪目标的当前进度
· 实时跟踪系统性能
操作类仪表板示例：
· 跟踪呼叫中心的活动，例如呼叫音量，等待时间，呼叫长度或呼叫类型
· 监控在云端应用程序的运行状况
· 显示股市情况
· 监控赛车上的遥测数据
操作类仪表板显示设备存储指标
3. 演示类仪表板
演示类仪表板是为感兴趣的主题提供的展示视图。
这些仪表板通常包括一些小图表或数据卡片，用动态标题描述每个图表的趋势和见解。
用例包括：
· 提供关键绩效指标的总览
· 创建高级执行情况的概要
演示类仪表板示例：
· 提供投资账户绩效的总览
· 提供产品销售和市场份额数据的概要
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
「元辰」数据概念控制中心，基于真实的使用场景和概念的表现手法，打造的企业及个人后台数据管理系统。
主要分为首页概览、作品编辑、信息收集、数据统计和常规配置等，简单的动效使操作回馈有了更好的交互体验，且真实可依。
-
「元辰」注重真实的数据体验，致力把数据信息通过大屏实时简洁、有效的传达给使用者。针对精准用户“迅速获取信息、简化操作流程、减少学习成本”，我们将这些问题作为传达的核心要素，一直贯穿始终。
-
欢迎沟通探讨、合作交流。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
for(var i = 0; i < 5; i++) {
console.log(i)
}
这样for循环可打印出 0 - 4的结果
for(var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i)
}, i * 1000)
}
但这样只能间隔一秒打印出5个5
原因在于 setTimeout是异步，等for循环全部完成 i 后才会执行
解决方法可以将 for循环中的var 变成 let
let只作用于for循环内，这样每次付给setTimeout的值都是当前值
或者在setTimeout外再包一层function
for(var i = 0; i < 5; i++) {
(function(i) {setTimeout(function() {
console.log(i)
}, i * 1000)})(i)
}
将 i 作为参数传到setTimeout中运行 这样就可以得到每隔1秒加1的log结果了
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
深入了解色彩理论属性是非常有必要的，可以很好利用一些定式理论和色彩搭配方法应用于你的设计！
本文重点介绍了色彩理论和色彩组合在设计中应用的基础知识: 例如学习更多关于色相环、RGB、CMYK色彩模型的相关知识。
很多人认为UI的色彩选择主要取决于设计师的品味和美感。然而，色彩选择的过程比表面看起来要复杂很多，在设计中起着重要的作用。在我们之前的一篇关于颜色心理学的文章中，我们发现颜色对我们的情绪和行为有很大的影响。这就是为什么产品的成功很大程度上取决于设计所选择的颜色。研究表明，人们只需90秒就能对一种产品做出下意识的判断，而其中62%至90%的判断仅基于颜色。因此，选择合适的颜色对于改进产品的转换率和提高产品的可用性是非常有用的。
为了创造好的设计，更有效地运用颜色，你需要了解颜色是如何形成的，以及它们之间是如何相互联系的。这就是为什么艺术学校、学院和大学的学生学习色彩理论，致力于研究色彩的本质。今天，我们提供给你记住(甚至学习)色彩理论的基础上的颜色组合，可以有效地应用于你的设计创作。
01.色相环/色轮
如果你上过有关绘画的课，你一定见过由不同颜色组成的圆圈。它被称为色相环/色轮，这有助于理解不同的颜色如何相互关联，以及如何将它们组合起来。色相环通常由主色、次色和三色组成。最主要的是这三种色素的颜色不能形成任何其他颜色的组合。把原色结合起来，就得到了第二种颜色，而原色和第二种颜色的混合就得到了第三种颜色，它们通常有两个词的名字，比如红紫。
色相环/色轮是由艾萨克·牛顿于1666年以示意图的方式创建的，从那时起，它经历了许多变换，但仍然是色彩组合的主要工具。主要的想法是，色相环/色轮必须这样做，以便颜色适当地产生混合。
02.颜色模型
在你开始混合颜色之前，你需要了解颜色有两种不同的性质:有形的颜色是物体表面的颜色，其他颜色是由光产生的，比如电视的光束。这些类型创建了两个颜色模型，通过它们可以形成色轮:加法和减法。
加色模型将红、蓝、绿作为原色，因此也称为RGB颜色系统。这个模型是屏幕上使用的所有颜色的基础。在这个系统中，原色以相同比例组合而成的第二种颜色是青色、品红和黄色，但是你需要记住，你添加的光越多，颜色就变得越亮越浅。对于习惯于油漆、染料、油墨和其他有形物体的减色法的人来说，通过混合加色得到的结果往往是违反直觉的。
减色法通过对光的减法得到颜色。它由两种颜色系统组成。第一种是RYB(红、黄、蓝)，也称为艺术系统，常用于艺术教育，尤其是绘画。RYB是现代科学色彩理论的基础，该理论认为青色、品红和黄色是三种颜色中最有效的组合。这就是CMY颜色模型的形成过程。它主要用于印刷，当制版印刷的关键部件为黑色油墨时，该系统被命名为CMYK(青色、品红、黄色和黑色)。如果没有这种额外的色素，最接近黑色的阴影将是浑浊的棕色。
03.色彩的加法与减法
您应该记住这两个系统之间的主要区别:加法用于数字屏幕，减法用于印刷媒体。如果你正在做的设计项目是要打印出来的，不要忘记一个简单但重要的规则:你在屏幕上看到的颜色在打印出来的时候看起来不一样。加色谱比CMYK更宽，这也是为什么建议设计师在打印前把他们的项目转换成减色法，这样他们就可以看到接近他们得到的结果。然而，如果您使用数字产品，RGB颜色系统是明智的选择，因为它允许创建惊人的东西与它的广谱彩色。
04.色彩协调
“协调”这个词通常与有序和令人愉快的事物联系在一起。色彩协调是指在设计中以最吸引人、最有效的方式对色彩进行排列，让用户感知。当色彩有条理的时候，观者会感到愉悦和平静，而不协调的设计则会给人混乱和厌恶的感觉。色彩的平衡在设计中是至关重要的，因为用户对网站或应用程序的第一印象，颜色有很大的影响。设计师区分了有效工作的基本配色方案。
05.单色
它是基于一种颜色与它的各种色调搭配。单色的呈现总是一个胜利的选择，因为它色彩属性单一，容易创造一些简洁的配色方案。
06.类似色/同类色
要创建类似的色彩，您需要使用颜色轮上相邻的颜色。这种类型的配色方案用于不需要对比的设计，包括网页或横幅的背景。
07.互补色
互补的方案是混合的颜色放在彼此前面的色轮上。这个方案与类似的单色相反，因为它的目的是产生高对比度。例如，蓝色背景上的橙色按钮在任何界面中都很难被忽略。
08.分割互补
这个方案与前一个方案类似，但它使用了更多的颜色。例如，如果你选择蓝色，你需要选择另外两种颜色，这两种颜色相邻，意思是黄色和红色。这里的对比度没有互补方案那么鲜明，但它允许使用更多的颜色。
09.三元/三色方案
当设计需要更多的颜色时，您可以尝试三元方案。它基于色轮上等距的三种不同颜色。为了在这个方案中保持平衡，建议使用一种颜色作为主色，另一种颜色作为辅色。
10.四色方案/双互补
四色方案是为经验丰富的设计师，因为它是最难平衡。它采用了四种颜色的色轮，这是互补对。如果你把所选颜色上的点连接起来，它们就形成了矩形。这个方案很难协调，但是如果你做的一切都正确，结果可能会令人惊叹。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
如果您想订阅本博客内容，每天自动发到您的邮箱中， 请点这里
摘要
优秀的项目源码，即使是多人开发，看代码也如出一人之手。统一的编码规范，可使代码更易于阅读，易于理解，易于维护
HTML 规范
缩进
统一两个空格缩进
命名规范
class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；
DOCTYPE 声明
HTML 文件必须加上 DOCTYPE 声明，并统一使用 HTML5 的文档声明：
<!DOCTYPE html>
meta 标签
统一使用 “UTF-8” 编码
<meta charset="utf-8">
SEO 优化
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">
优先使用 IE 版本和 Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">
为移动设备添加视口
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
禁止自动识别页面中有可能是电话格式的数字
<meta name="format-detection" content="telephone=no">
团队约定：
pc 端：
<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
移动端：
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
标签
html 标签分为以下几类：
自闭合标签（self-closing），无需闭合。例如：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、source、track、wbr 等 )
闭合标签（closing tag），需闭合 。例如：textarea、title、h、div、span 等
团队约定：
所有具有开始标签和结束标签的元素都必须要写上起止标签，某些允许省略开始标签或和束标签的元素亦都要写上
自闭合标签不要加上结束标签
自定义标签的名字必须包含一个破折号（-），<x-tags>、<my-element>和<my-awesome-app>都是正确的名字，而<tabs>和<foo_bar>是不正确的。这样的限制使得 HTML 解析器可以分辨那些是标准元素，哪些是自定义元素
自定义标签必须写上开始标签和闭合标签
尽量减少标签数量
元素属性
元素属性值使用双引号语法
推荐：
<input type="text">
不推荐：
<input type=text>
<input type='text'>
代码嵌套
块元素可以包含内联元素或某些块元素，但内联元素却不能包含块元素，它只能包含其它的内联元素
标题和段落中不能包含块，如：h1、h2、h3、h4、h5、h6、p、dt
块与内联不能并列，块级元素与块级元素并列、内嵌元素与内嵌元素并列
有些标签是固定的嵌套规则，比如 ul 包含 li、ol 包含 li、dl 包含 dt 和 dd 等等。
灵活使用伪类
不要让非内容信息污染了你的 HTML，打乱了 HTML 结构。可以使用:before、:after 等伪类元素
推荐：
HTML 代码
<!-- That is clean markup! -->
<span class="text-box">
See the square next to me?
</span>
CSS 代码：
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
1
不推荐：
HTML 代码：
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
CSS 代码：
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
特殊符号必须使用转义符
符号 描述 转义符
空格
< 小于 <
> 大于 >
& 和 &
" 引号 "
纯数字输入框
使用 type=“tel” 而不是 type=“number”
<input type="tel">
类型属性
不需要为 CSS、JS 指定类型属性，HTML5 中默认已包含。
推荐：
<link rel="stylesheet" href="" >
<script src=""></script>
不推荐：
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
注释规范
单行注释
一般用于简单的描述，如某些状态描述、属性描述等
注释内容前后各一个空格字符，注释位于要注释代码的上面，单独占一行
推荐：
<!-- Comment Text -->
<div>...</div>
不推荐：
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
6
模块注释
注释内容前后各一个空格字符
<!-- S Comment Text -->表示模块开始
<!-- E Comment Text -->表示模块结束，模块与模块之间相隔一行
模块注释内部嵌套模块注释，<!-- /Comment Text -->
推荐：
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
<!-- S Comment Text D -->
<div class="mod_d">
...
</div>
<!-- E Comment Text D -->
web前端开发资源Q-q-u-n： 767273102 ，内有免费开发工具，零基础，进阶视频教程，希望新手少走弯路
22
语义化
没有 CSS 的 HTML 是一个语义系统而不是 UI 系统
通常情况下，每个标签都是有语义的
语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图
建议页面中多使用语义化标签，而不是整个页面以 div 构成
常见标签语义：
标签 语义
<p> 段落
<hn> 标题(h1~h6)
<ul> 无序列表
<ol> 有序列表
<nav> 标记导航，仅对文档中重要的链接群使用
<main> 页面主要内容，一个页面只能使用一次。如果是 web 应用，则包围其主要功能
<article> 定义外部的内容，其中的内容独立于文档的其余部分
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框
<footer> 页脚，只有当父级是 body 时，才是整个页面的页脚
<figure> 规定独立的流内容（图像、图表、照片、代码等等）（默认有 40px 左右 margin）
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、网站建设 、平面设计服务。
我们先从真实生活场景中的互动说起。
人与人之间的互动无处不在，它是我们生活中必要的组成部分，也是整个人类社会的基石。从本质上来讲，社交产品要解决的问题就是人们之间互动的问题。那么如何定义互动呢，我们可以从日常的生活场景中窥得一二。
首先，让我们来看一看日常生活中的互动案例：
这是一个很常见的熟人互动案例，我们可以看到，熟人间很容易产生话题，并持续互动下去。但是如果同样的话题发生在不是很熟悉的人之间，可能就会是另一番场景：
在例二中，因为A与B互相不熟悉，所以A没有对B的回复产生进一步互动，对话因此而结束。我们可以进一步推理，其实在这个案例中，不管原因变成什么，只要A没有响应B的反馈，那么A与B的互动就大概率会终止。
这是因为良好的互动行为一定是双方(或多方)的互相行为，一旦因为某些原因导致其中的反馈中断，互动将无法持续。由此可以总结出：
互动在本质上是由一系列的反馈(互动)组成的一条反馈链
但是光有反馈链还远远不够，在社交场景下，我们往往希望反馈链足够长，这样才能让互动双方产生感情升温。在例二中，其实是存在着一条很短的反馈链的，A与B只互动了一个回合。A没有继续响应B的反馈，是因为B的反馈质量较低。试想，当A向B问好时，若B的回复是“早上好，你今天穿的真精神！”，那么A会不会响应B的反馈呢？我想大概是会的。由此可见：
反馈链的长短取决于每次反馈(互动)的质量。
高质量的反馈具备很多特点，其中有三个尤为重要
1 反馈链中的指向性
我们日常生活中的互动行为，一般都会以一个“握手机制”作为开端。这个握手机制可以是显性的（直接喊出对方的称呼，可以是名字、外号，也可以是关系称谓），有时也可以是隐性的（眼光的对视、话题的流转等）。这个握手机制帮助互动双方建立了互动的场景，让双方达成"开始交流"的共识，以便信息的接收者做好倾听并回复的准备，这就是互动中的指向性。
任何互动行为都是发生在两个或者多个明确的对象之间的，因此在良好的互动行为中，指向性显得尤为重要——没有人会去响应别人的自言自语。在互动的过程中，指向性不明确的互动行为是低质量的，不容易获得进一步的反馈，例如评论区中的统一回复、群发的新年问候、领导在台上的讲话等。反之指向性明确的互动是高质量的，比较容易获得反馈，例如群聊中@某个人、收件人为某个人而非邮件组的邮件、多人聊天时眼光的对视等。
2 适度的互动行为
互动行为的适度包含两个方面：信息适度及行为适度。
一方面，由于互动行为本质上是信息的传递过程，因此每次反馈的信息质量会直接影响到反馈的整体质量。好的反馈应该传达适度的信息，让接收者可以对传递的信息进行轻松的接收及处理，降低接收者的反馈门槛。
另一方面，传递信息的行为也应该是适度的。在生活中，不同的场合下，我们会选择不同的行为来表达同样的意思，比如比较正式的场合会选择握手作为问好，而与家人久别后的见面则可能是一个热情的拥抱。
3 反馈的即时性
互动行为是依赖于一定语境的，当语境消失，互动也将停止。在社交产品的互动场景中，互动语境一般会随时间流逝而逐渐减弱直到消失，所以反馈的质量也随时间的流逝而逐渐衰减，若想让反馈链可以得到延续，要尽量保证在语境消失前产生反馈行为，因此即时性的反馈就显得十分重要。
有了以上的理论基础，接下来分析一下Qzone中的互动行为。
Qzone中的互动方式可以归为三类：评论、转发、点赞。其中，评论和转发都可以产生完整的反馈链。针对评论，用户还可以继续通过评论、点赞等方式进行反馈；针对转发内容，用户也可以进行进一步的评论、转发、点赞。而对于点赞行为，反馈链到此戛然而止，用户无法对点赞行为进行直接的反馈。
因此，为了让用户的点赞可以形成完整的反馈链，我们的设计目标就呼之欲出——为Qzone中的点赞行为寻找一个具有指向性的、适度的、具有即时性的反馈行为。互动场景的选择
既然要设计的是一个具有指向性的互动行为，我们就必须在可以接收到赞的场景里去做这件事。所以我们首先遍历了主人态下，所有可以看到别人给自己点赞的场景。
但是以上的场景中，并不是都适合承载点赞的反馈行为。根据用户的行为目的，我们可以把以上场景分为两类：围绕点赞行为的关键行为路径（图c.消息列表、图d.点赞列表）、不以点赞为核心目标的其他场景（图a.好友动态、图b.个人主页）。显然，我们应该把围绕点赞行为的关键行为路径作为主要互动场景。并且所有对于点赞的反馈都是直接依附于点赞行为本身的，使反馈行为具有明确的指向性。
前文提到，适度的互动包含“信息适度”和“行为适度”两个方面，落地到产品里，就是定义互动行为的“语义”和“交互行为”。
关于点赞反馈行为的语义表达，我们列举了很多来自现实社交场景中的备选方案，然后以动作的情感程度和成熟程度划分了4个象限，对这系列动作进行归类。
由于点赞行为本身所传达的情感是比较轻量化的，我们更倾向于选择一个轻量化的情感表达方式作为点赞的反馈；同时由于Qzone的用户群体以年轻用户为主，我们还需要选择一个尽量贴合年轻用户感官的语义。因此我们在象限图中初步选中位于左下角的“击掌”和“剪刀手”两个概念。考虑到“击掌”比“剪刀手”具有更为明显的指向性，所以确定“击掌”为最终的落地方案。
同时，因为点赞行为本身是一个及其轻量化的行为，所以我们也用最轻量的交互操作作为它的反馈，只需要一次点击即可。
用户每次收到针对点赞的反馈，都会收到一条与点赞相同的消息提醒，通过push、首页新消息提醒、红点等让用户第一时间知晓。在消息箱列表中，每一条点赞和回赞都成为单独的一条消息，可以让用户最直观的查看并进行反馈。
综上所述，我们确定了整个反馈链的交互框架：
击掌的视觉设计是一个发现问题到解决问不断循环的过程。在这个过程中，推动解决方案逐步升级的核心方法是情感化设计。
击掌动作本身就带有丰富的情绪，而情感化的设计方法可以让情绪的释放更大化，所以在视觉设计阶段，我们以情感化设计作为方法去推进方案逐步完善，最终建立起用户与产品、用户与用户间的情感连接，加深用户对功能的认可和共鸣，带来更加有趣的体验。
情感化设计具象到击掌这个功能，需要解决两个问题：
1.如何唤起用户在现实场景中的击掌记忆；
2.如何符合空间用户群体的基本调性。
设计之初，我们用平面icon的形式来表现击掌，虽然可以满足基本的功能诉求，但是在视觉体验上乏善可陈，我们又尝试更丰富的各种视觉表现以此引起用户对击掌这个动作的共鸣。
在设计推敲的过程中共经历了三个阶段，在不断发现问题和解决问题的循环中寻找更优的设计方案：
Step 1 | 静态展示到动势塑造
我们用两个手掌叠加的样式构造了击掌icon的基本造型。为了增强用户对于“击掌”的语义感知使用了漫画中常用的动态线条，让用户从视觉上直观感受到这是一个动态的互动行为，而非简单的单方面点亮icon，以此加强用户对击掌这个互动行为的认知。
Step 2 | 2D动画演绎
但是这样的动势表达仍然具有局限性，动态线条的表达方式并不具备普适性，无法保证用户可以理解其中的含义。因此我们在第二个阶段的设计迭代中使用更加直观的动画来帮助用户理解，使其与现实生活中的动作产生呼应。
Step 3 | 3D表现
在解决了语义表达的问题后，我们遇到了一个新的挑战，由于整个动画的展示视范围较小，在视觉表现力上并不理想。因此在第三个设计阶段中，我们通过放大动画、尝试3D表现形式的方法解决上述问题。同时，3D的表现手法还可以通过光影和质感来传达更多信息，更加直观易懂，具有极强的代入感。
空间的主流用户以年轻人居多，为了匹配用户群体的基本调性需要打造一个“年轻”、“有趣”的3D击掌动画。为此，我们以“3D”、“young”、“fun”作为关键词收集参考素材，以此建立情绪版。
1 趣味和轻量的质感
如前文所述，对于击掌反馈行为是一个轻量化的互动，为避免3D表现手法过于写实而带来不必要的厚重感，同时也为了增加动画的趣味性，我们选择卡通的手掌造型进行建模；在材质的选择上我们偏向黏土材质，弱化高光，让视觉上体验更加轻量。
2 弹性曲线让动画更生动
现实生活中的击掌动作是一个减速运动，但是为突出击掌的动势和加强趣味性，我们采用了非写实的弹性曲线来打造这个动画，以此加强动画的趣味性。
3 礼花烘托氛围
在后续的产品迭代优化过程中，我们引入了无限击掌的玩法，用户之间可以无限回赞。这就导致动画被重复播放，会加速用户对动画的审美疲劳。所以为配合产品玩法的升级对动画的设计也进行了迭代，基于击掌次数设计了不同的展示彩蛋——在击掌达到特定次数后，会有彩带礼花蹦出，在烘托多次击掌的热情氛围的同时，给用户带来更多趣味和惊喜。
在击掌功能的设计过程中，我们不断在发现问题、解决问题的循环中不断寻求更优解，逐步把一个不到100像素范围内的击掌icon做到更好，以此来唤起用户的对现实击掌的记忆，建立起与用户情感上的连接。
另外，通过趣味性的视觉表现手法不断推敲动画设计，让Qzone的年轻用户不仅从心理上建立连接，在表现层也能感知到符合自身标签的趣味调性。
除上文提到的彩带礼花以外，在击掌玩法升级过程中，我们也拓展了更多内容：
随着用户间反复击掌次数变多，粒子效果会不断升级，并加入富有层次的入场效果；而且达到关键击掌次数的时候，会展示击掌的次数，通过用户的成就感来刺激其产生更多的击掌行为。
为了丰富手掌样式的选择，给用户提供更多样的体验，我们和增值团队一起设计了更多的手掌形式，同时引入一些IP形象，让击掌更能唤起用户的共鸣，也更加有趣。
击掌这个功能从前期探索到上线和二次迭代经历了很长一段时间，整个项目对设计师来说也是一次收获满满的过程。
创新也可以是从1到N的过程
创新并不都是从0到1从无到有的创新，尤其对于功能和框架体系成熟的产品，盲目的追求创新去改变用户的认知和习惯是不妥的，从小的问题点着手去深挖和思考，找到合适的解决方案并打磨细节给用户创造惊喜，以小博大去做创新也能达到四两拨千斤的效果。
打磨细节创造惊喜
探索和挖掘到一个不错的想法之后，打磨细节也是同样重要的，我们出了各种不同的击掌效果方案，去找到给用户惊喜和操作轻量的平衡，这个功能上线以后我们也一直在关注用户的反馈，从用户反馈中发现还可以做惊喜升级，从一个点出发，把这个点不断的扩充做的更细致和更加闭环。
从生活中来，到生活中去
击掌这个功能之所以有这个好的数据和用户认可度，有一个很重要的原因是因为本身这个行为和现实生活中的场景是相对应的，所以让用户能很快的理解和操作，符合用户真实场景的认知所以学习成本比较低，我们在做设计的时候用生活场景挖掘产品，能达到事倍功半的效果。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务。
蓝蓝设计的小编 http://www.lanlanwork.com