首页

ECharts中dataZoom组件及散点图的绘制

前端达人

ECharts中dataZoom组件及散点图的绘制

dataZoom 组件是对 数轴(axis) 进行『数据窗口缩放』『数据窗口平移』操作。

可以通过 dataZoom.xAxisIndex 或 dataZoom.yAxisIndex 来指定 dataZoom 控制哪个或哪些数轴。



dataZoom 组件可同时存在多个,起到共同控制的作用。控制同一个数轴的组件,会自动联动。下面例子中会详细说明。



dataZoom 的运行原理是通过『数据过滤』来达到『数据窗口缩放』的效果。



dataZoom 的数据窗口范围的设置,目前支持两种形式:



百分比形式:参见 dataZoom.start 和 dataZoom.end。



绝对数值形式:参见 dataZoom.startValue 和 dataZoom.endValue。



dataZoom 组件现在支持几种子组件:



内置型数据区域缩放组件(dataZoomInside):内置于坐标系中。



滑动条型数据区域缩放组件(dataZoomSlider):有单独的滑动条操作。



框选型数据区域缩放组件(dataZoomSelect):全屏的选框进行数据区域缩放。入口和配置项均在 toolbox中。



在代码中加入dataZoom组件

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>代码加入dataZoom组件</title>

    <!--引入Echarts文件-->

    <script src="js/echarts.min.js"></script>

</head>

<body>

<div id="main" style="width: 800px;height:400px;"></div>

<script type="text/javascript">

    var dom=document.getElementById("main");

    var myChart=echarts.init(dom);

    var app={};

    var option=null;

    //先只在对单独一个横轴,加上 dataZoom 组件,代码示例如下:

    option = {

        tooltip:{},//提示框

        xAxis: {

            type: 'value'

        },

        yAxis: {

            type: 'value'

        },

        dataZoom: [

            {

                type: 'slider', //这个dataZoom组件是slider型dataZoom组件

                xAxisIndex:0,   //dataZoom-slider组件控制第一个XAxis

                start: 10,       //左边在10%位置

                end: 60         //右边在60%位置

            },

            {

                type: 'inside', //这个dataZoom组件是inside型dataZoom组件

                xAxisIndex:0,   //dataZoom-inslide组件控制第一个XAxis

                start: 10,       //左边在10%的位置

                end: 60         //右边在60%的位置

            },{

                type:'slider',

                yAxisIndex:0,   //dataZoom-slider组件控制第一个yAxis

                start:30,

                end:80

            },{

                type:'inside',

                yAxisIndex:0,   //dataZoom-inside组件控制第一个yAxis

                start:30,

                end:80

            }

        ],

        series: [

            {

                name: 'scatter',

                type: 'scatter',

                itemStyle: {

                    normal: {

                        opacity: 0.8

                    }

                },

                symbolSize: function (val) {//控制点的大小,(参数为data中第三列的数据)

                    return val[2] * 40;     //用回调函数控制点的大小(请查看官方文档)

                },

                data: [//data中第三个参数控制点的大小

                    ["14.616","7.241","0.896"],

                    ["3.958","5.701","0.955"],

                    ["2.768","8.971","0.669"],

                    ["9.051","9.710","0.171"],

                    ["14.046","4.182","0.536"],

                    ["12.295","1.429","0.962"],

                    ["4.417","8.167","0.113"],

                    ["0.492","4.771","0.785"],

                    ["7.632","2.605","0.645"],

                    ["14.242","5.042","0.368"]

                ]

            }

        ]

    }

    if (option && typeof option === "object") {

        myChart.setOption(option, true);

    }

</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

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

可以通过滑动滑轮实现图形的缩放



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

截屏2021-05-13 上午11.41.03.png


部分借鉴自:csdn  

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

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

openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解

前端达人

1. 写在前面

本问下面有矢量图层设置的区域,和热力图层设置的热力图的效果,区域绘制效怎么设置详细内容可以访问 openlayers6【十七】vue VectorLayer矢量图层画地图省市区,多省市区(粤港澳大湾区)效果详解,主要讲解的是热力图层效果实现。区域绘制只是为了效果更好看。好了,继续往下看

在 openlayers 中,图层是使用 layer 对象表示的,主要有 WebGLPoints Layer热度图(HeatMap Layer)图片图层(Image Layer)切片图层(Tile Layer)和 矢量图层(Vector Layer)五种类型,它们都是继承 Layer 类的。

前面两篇文章 我们讲了矢量图层 VectorLayer的常用的场景,这篇我们写一篇 HeatMapLayer 的使用。可以看下图所示的热力图实现效果。 放大缩小地图热力图效果。
在这里插入图片描述

2. Heatmap 类实现热力图

2.1 Heatmap 参数

var heatmapLayer = new ol.layer.Heatmap({ source: source,//热力图资源 opacity:1,//透明度,默认1 visible:true,//是否显示,默认trur zIndex:1,//图层渲染的Z索引,默认按图层加载顺序叠加 gradient:['#00f','#0ff','#0f0','#ff0','#f00'],//热图的颜色渐变 blur: 15,//模糊大小(像素为单位) radius: 8,//半径大小默认为8(像素为单位) extent:[100,30,104,40],//渲染范围,可选值,默认渲染全部 }); 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

2.2 实现热力图

2.2.1 addHeatMap()方法详解:

  1. 准备热力图需要的初始化数据,colors 热图的颜色渐变,hatmapData 表示值数量越多显示到页面的热力图颜色越深。codeList 准备的数据的城市对应的经纬度坐标。
  2. 创建热力图图层 HeatmapLayer
  3. 把热力图图层添加到 map 中
  4. 调用添加热力图要素的方法 AppendFeatures()

2.2.2 addHeatMap()方法代码:

/**
 * 添加热力图
 */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, 
  • 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

2.2.3 AppendFeatures()方法详解:

  1. 遍历hatmapData和points数据根据名称一致的 循环创建要素 new Featurenew Point信息
  2. 把要素添加到热力图层的数据源中

2.2.4 AppendFeatures()方法代码:

/**
 * 增加要素到热力图
 */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

3. 完整代码

<template> <div id="app"> <div id="Map" ref="map"></div> </div> </template> <script> import "ol/ol.css"; import VectorLayer from "ol/layer/Vector"; import VectorSource from "ol/source/Vector"; import { Tile as TileLayer, Heatmap as HeatmapLayer } from "ol/layer"; import Proj from "ol/proj/Projection"; import XYZ from "ol/source/XYZ"; import { Map, View, Feature, ol } from "ol"; import { Style, Stroke, Fill } from "ol/style"; import { Polygon, Point } from "ol/geom"; import { defaults as defaultControls } from "ol/control"; import { fromLonLat } from "ol/proj"; // 四川的边界数据文件 import areaGeo from "@/geoJson/sichuan.json"; export default { data() { return { map: null }; }, methods: { /**
         * 初始化地图
         */ initMap() { this.map = new Map({ target: "Map", controls: defaultControls({ zoom: true }).extend([]), layers: [ new TileLayer({ source: new XYZ({ url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}" }) }) ], view: new View({ center: fromLonLat([104.065735, 30.659462]), zoom: 6.5, maxZoom: 19, minZoom: 5 }) }); }, /**
         * 设置区域
         */ addArea(geo = []) { if (geo.length == 0) { return false; } let features = []; geo.forEach(g => { let lineData = g.features[0]; let routeFeature = ""; if (lineData.geometry.type == "MultiPolygon") { routeFeature = new Feature({ geometry: new MultiPolygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } else if (lineData.geometry.type == "Polygon") { routeFeature = new Feature({ geometry: new Polygon( lineData.geometry.coordinates ).transform("EPSG:4326", "EPSG:3857") }); } routeFeature.setStyle( new Style({ fill: new Fill({ color: "#4e98f444" }), stroke: new Stroke({ width: 3, color: [71, 137, 227, 1] }) }) ); features.push(routeFeature); }); // 设置图层 let routeLayer = new VectorLayer({ source: new VectorSource({ features: features }) }); // 添加图层 this.map.addLayer(routeLayer); }, /**
         * 添加热力图
         */ addHeatMap() { let colors = [ "#2200FF", "#16D9CC", "#4DEE12", "#E8D225", "#EF1616" ]; let hatmapData = [ { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "成都市" }, { name: "绵阳市" }, { name: "广安市" }, { name: "雅安市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "自贡市" }, { name: "宜宾市" }, { name: "甘孜藏族自治州市" } ]; let codeList = { 成都市: { center: { lng: 104.061902, lat: 30.609503 } }, 广安市: { center: { lng: 106.619126, lat: 30.474142 } }, 绵阳市: { center: { lng: 104.673612, lat: 31.492565 } }, 雅安市: { center: { lng: 103.031653, lat: 30.018895 } }, 自贡市: { center: { lng: 104.797794, lat: 29.368322 } }, 宜宾市: { center: { lng: 104.610964, lat: 28.781347 } }, 甘孜藏族自治州市: { center: { lng: 101.592433, lat: 30.426712 } } }; this.layer = new HeatmapLayer({ source: new VectorSource(), blur: 30, radius: 15, gradient: colors }); this.map.addLayer(this.layer); this.AppendFeatures(hatmapData, colors, codeList, 50); }, /**
         * 增加要素至热力图
         */ AppendFeatures(hatmapData, colors, points, max) { for (var i in hatmapData) { if (points[hatmapData[i].name]) { var coords = points[hatmapData[i].name]; this.max = max; var f = new Feature({ geometry: new Point( fromLonLat([coords.center.lng, coords.center.lat]) ) }); this.layer.getSource().addFeature(f); } } } }, mounted() { this.initMap(); //初始化地图 this.addArea(areaGeo); //添加四川省的边界描边和填充 this.addHeatMap(); //添加热力图数据 } }; </script> <style lang="scss" scoped> // 此处非核心内容,已删除 </style> 
  • 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
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177

4. 添加删除map图层的方法

//添加热力图层 this.map.addLayer(this.layer) //删除热力图层 this.map.removeLayer(this.layer) 
  • 1
  • 2
  • 3
  • 4

5. 热力图自身的get,set方法

//获取-设置,模糊大小 heatmapLayer.getBlur() heatmapLayer.setBlur(15) //获取-设置,渲染范围 heatmapLayer.getExtent() heatmapLayer.setExtent([100,30,104,40]) //获取-设置,热力图渐变色 heatmapLayer.getGradient() heatmapLayer.setGradient(['#00f','#0ff','#0f0','#ff0','#f00']) //获取-设置,最大级别 heatmapLayer.getMaxZoom() heatmapLayer.setMaxZoom(18) //获取-设置,最小级别 heatmapLayer.getMinZoom() heatmapLayer.setMinZoom(2) //获取-设置,透明度 heatmapLayer.getOpacity() heatmapLayer.setOpacity(0.5) //获取-设置,半径 heatmapLayer.getRadius() heatmapLayer.setRadius(5) //获取-设置,热力源 heatmapLayer.getSource() heatmapLayer.setSource(source) //获取-设置,是否可见 heatmapLayer.getVisible() heatmapLayer.setVisible(true) //获取-设置,图层的Z-index heatmapLayer.getZIndex() heatmapLayer.setZIndex(2) //绑定事件-取消事件 type事件类型,listener函数体 heatmapLayer.on(type,listener) heatmapLayer.un(type,listener)



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

截屏2021-05-13 上午11.41.03.png


部分借鉴自:csdn  

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

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


如何建立产品设计中的“安全感”

seo达人



根据马斯洛需求层次理论,安全需求位于第二层,属于低层次需求,反映了人们对稳定、安全、受到保护、有秩序、免除恐惧和焦虑的需求。所以在产品设计中需要保护用户的隐私信息,让用户时刻掌握系统状态,从而减少用户焦虑,提升产品体验。今天我们就聊一聊如何在产品设计中建立用户“安全感”。

 

文章主要分为3部分:

  1. 用户为什么会产生不安全感
  2. 安全感的设计方法
  3. “不安全感”的应用

 

01 用户为什么会产生“不安全感”

马斯洛指出:心理的安全感(psychological security)指的是“一种从恐惧和焦虑中脱离出来的信心、安全和自由的感觉,特别是满足一个人现在(和将来)各种需要的感觉”。也就是说,缺乏安全感是因为用户陷入恐惧和焦虑中。

 

1、不安全的层级

我个人将缺乏安全感分为了3个层次:

图片

1)精神层面——焦虑无助

现实生活中,当我们遇到紧急问题又无法解决时,通常会感觉到焦虑无助。使用信息产品时,如果缺乏有效的指引和出口,我们同样会感到焦虑。例如公司内部通讯产品,密码必须要在内网OA系统中才能重置。如果重装App又忘记了登录密码,而上班进出园区和考勤又必须使用该产品,造成了死循环,用户必然要“出离愤怒”了。

2)信息层面——个人空间

微信已经成为了社交必备产品,很多人都会在朋友圈中秀出生活的日常信息。但有些“好友”关系是临时性的,并非生活中的真实好友,用户并不希望将个人信息曝光展示给他们,所以微信增加了好友关系分级功能,增加用户的安全感。

同样浏览记录、购买记录、搜索记录等都属于用户的个人行为数据,需要赋予用户删除权限,防止隐私信息泄漏。

图片

3)物理层面——生命财产

手机号码、身份证、银行卡等都是非常重要的个人信息,这些信息泄露之后可能会给我们带来财产损失,因此产品在获取这些信息时需要征得用户同意,同时也要为用户保护好隐私信息。

图片

 

2、不安全感的原因

1)信息未知

恐惧和焦虑更多的是因为对信息的“未知”,尤其是涉及金钱、健康的场景下,当用户对信息不理解或者不熟悉时,就很难产生信任感,更不会有安全感。

例如用户对于长串数字的量级识别效率会降低,当进行大额转账时,为了防止出错,我们会反复确认数字。于是很多支付工具增加了汉字来展示金额量级,帮助用户快速识别输入的量级,从而增加用户的安全感、提高操作效率。

图片

虽然电商平台带来了购物的便捷,但是用户无法亲身感受商品质量,担心购买后发生扯皮和退货难等问题。于是就有了运费险和7天无理由退货等保障措施,消除用户担忧,从而提高用户的购买意愿。

2)认知偏见

正如我们对美女总是抱有莫名的好感,我们对于不美观或者丑陋的事物也存在认知偏见。如果产品视觉效果粗制滥造,用户更容易产生不信任感。

 

02  安全感的设计方法

用户交互过程大致可以分为“认知-行动-反馈”3个阶段,在不同的阶段都需要带给用户“安全感”。

图片

 

认知阶段

1、消除未知

1)更熟悉的信息

人们在熟悉的环境中会更有安全感,本质上是因为对信息的了解和掌控。所以对于用户不熟悉或不易理解的功能,需要进行一定的包装,便于用户理解。

例如支付宝股票中将大盘的涨跌,通过天气晴雨表的形式来展现,让普通用户轻松理解大盘的状态。淘宝搜索列表中,专门将用户“曾经买过的店”展示出来,可以唤起用户的购物记忆,增强用户对商品的信心。

图片

2)更真实的信息

高德地图利用AR技术直接将导航与实景相结合,用户看到的不再是系统处理过的地图,而是真实环境的直观体验,从而更好的提升用户使用过程中的安全感。

图片

3)更充分的信息

让用户获得更多的信息可以增强用户的掌控感,从而建立用户安全感。

高德地图导航在可选择的条件下,默认提供3条可选路线。有些路线明明又远又耗时间,为什么还要呈现给用户呢?一方面更多的信息方便用户选择,带来掌控感。更重要的是如果只显示一条路线,用户可能会产生疑问和不信任感,不确定系统给出的路线是不是最好的选择。

图片

 

2、增加未来的预期

除了让用户熟悉当下信息,还需要通过足够的信息让用户建立对未来的信心。

1)信用背书

拼多多为了增加“百亿补贴”的可信度,减少用户对商品“假货”、“非正品”的担忧。专门引入了中国人保保险为活动承保。1号会员店作为京东的子产品,则借用更有品牌影响力的“京东”为其代言。

图片

2)达人带货

网红直播带货已经成为了重要的营销方式,一方面网红产生的超高流量,同时用户对他们更加信任,认为他们的推荐更有保障。

另外熟人关系也会带来更强的信任感,所以拼多多建立了拼小圈,淘宝建立了淘友圈,通过好友关系相互影响,带给用户更强的购买信心。

3)承诺保障

正如上文所说,七天无理由退货、假一赔四逐步成为了电商的标配。而为了减少用户对付费会员能否“省回会费”的担忧,电商平台增加了“不回本退差价”的玩法。除此之外,双11等大促活动电商平台还会着重强调“价保”、“全年最低价”等信息,消除用户的后顾之忧。

图片

 

3、视觉带来的情感

1)产品IP形象

IP形象实际上是产品拟物化的表现,可以增加亲和力,拉近用户和产品之间的距离。例如天猫猫头设计已经成为了一种符号和载体,在双11期间既传递了商品品牌,又让平台更加深入人心。

图片

2)视觉效果

视觉表现力已经成为了产品改版迭代重点发力方向,希望通过高品质的界面效果和视觉品牌形象,增强用户对产品的信心。旧版的建行App简直就是灾难,我第一次打开的时候真的想立马删掉,但是迫于转账需要只好硬着头皮使用。好在新的版本总算是进步了。

图片

 

行为中

1、掌控感

在高德地图中提供了丰富的信息,例如经常拥堵的时间点,拥堵状态,拥堵距离和市场等,甚至包括了未来不同时间点的行车时长等等,帮助用户合理的安排出行计划。

图片

 

2、行为过程中的信息反馈

开车时最怕遇到堵车,一旦堵车用户就会想“有没有更好的路线呢”。高德地图除了提醒拥堵信息之外,还附加了“虽然前方拥堵,但您依然在最优路线上”话术,让用户安心驾驶,不需要二次确认路线。

此外防错、容错等基础设计原则都可以帮助用户建立很好的安全感。

 

行为后

1、信息可跟踪

用户在使用支付宝转账后,会展示转账的节点信息,用户可以随时跟踪转账的进程,特别是大额转账时间较长时,可以更好地减少用户等待的焦虑。

图片

 

2、稳定性

如果用户在使用产品时经常遇到bug,用户很容易对产品产生怀疑。而对于付费会员类产品,同样需要保持权益的稳定性,反复的权益变更也会造成用户的不信任。

 

03 “不安全感”的应用

安全感是用户需要的,但是有时候“不安全感”是商家需要的,因为可以产生一定的激励作用。

 

1、不确定性

很多活动都是打着“数量有限,先到先得”的玩法,不明确告知数量,不展示进度,增加了购买的不确定性,对有需求的用户可以产生一定的压力,让其尽快下单。或者采用预约玩法,通过预约人数的曝光给用户带来一定的压力。

图片

 

2、损失玩法

很多游戏化产品都加入了互偷玩法,为避免能量损失,用户不得不定时收取能量或者设置保护罩。

往年的618、双十一、双十二期间,天猫养猫游戏都会推出团队PK玩法,将“不安全感”发挥到了极致。为了保住胜利果实,用户每天在对战结束前都不敢丝毫松懈。

所幸今年天猫官方已经宣布618期间,养猫不再设定PK玩法了,大家可以“佛系养猫”了。

图片

 

以上就是我总结的体验设计中“安全感”的设计方法。

 

原文地址:子牧UXD(公众号)

作者:子牧先生


转载请注明:学UI网》如何建立产品设计中的“安全感”


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

                                                            微信图片_20210513163802.png

 

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

 

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



设计系统指南——搭建你的专属色彩系统

seo达人


想要搭建一套完整的设计系统,颜色是你需要最优先考虑的,我浏览了大量设计系统相关外文也下载了各类搭建完毕的设计系统文件,颜色永远是排名第一的考虑项。至于原因,就要提到颜色(后面会统称为色卡系统)在设计系统中所担任的角色及其意义。

另外,我基于figma搭建了个人博客,以期以更灵活的方式展示和分享内容,后续文章、设计系统资源都会在上面进行发布,大家可以收藏一波。

博客链接 点击此处

 

原文地址:UI中国

作者:南山可

 

转载请注明:学UI网》设计系统指南——搭建你的专属色彩系统


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

                                                            微信图片_20210513163802.png

 

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

 

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


全局性设计思维 | 让设计创造更大价值

分享达人

导读


你的设计是否能被理解?为什么设计的价值总是不被人认可?


设计不仅仅只是带来美感,好的设计能够为产品、公司甚至整个社会创造巨大的价值。而在创造好的设计这个过程中,最重要、也是最容易被人忽视的,便是设计思维。


何为全局性设计思维?它能够为设计师带来哪些价值?本文将从设计的本质出发,结合设计的发展趋势,带你了解全局性设计思维的真正力量。




目录


写在前面

一个习惯性的序

一、我们为什么需要设计思维?

二、下一个时代在哪里?

三、互联网“下半场”,从大势中看变化

四、设计思维的转变,差异与融合

五、探寻全新的思维方式

六、全局性设计思维概述

七、如何运用全局性设计思维?

八、以全局性设计思维,构建设计体系

九、文章预告

-



写在前面


这篇文章的主要内容,来自我在19年底的一个沙龙分享。整个分享以设计思维的角度入手,讲述了全局性设计思维的来源和重要性,以及我是如何在不同产品线上去运用这种设计思维的。


何为全局性设计思维?为什么要讲这种思维方式?


这是我一直在探索并实践的一种设计思维。从最开始的理论雏形,到各种项目的实践,不断进行修正和完善,最终形成了一套卓有成效的思维方式。通过这种思维方式,我逐步帮助产品解决了许多长期性的问题,并最终构建了各种不同类型的设计体系。最终,随着品牌矩阵与产品体系的落地,形成了一个完整的网易智慧企业设计体系。

网易智慧企业设计体系


因为篇幅原因,本篇文章将重点从理论层面阐释全局性设计思维的导论、价值及使用方式。而具体的实战案例,我之后将会以另外几篇单独文章的形式进行展现,并详细讲解在设计过程中的一些细节与过程。希望能够帮助大家更深入地去理解如何根据不同的场景正确地去使用这种思维方式。


未来可能会包含以下几篇文章:


全局性设计思维 | 如何打造强大的品牌体系

FishDesign组件库 | 从零到一构建企业级UI组件库

全局性设计思维 | 如何构建事业部级大型设计体系


当然,目前的设计体系仅仅只是一个开始,未来还有很长的路要走。


希望本文能够给为你带来小小的启发,让设计思维帮助你更好地发挥设计的价值。如果你对某一方面特别感兴趣,可以直接跳到这一章进行阅读,无需浪费过多时间。如果你有任何疑问,也欢迎随时与我交流。




一个习惯性的序

-


“喵呜~”   我又出现了,那个爱写序的装逼作者。


这次把序放在了第二段,这样子看上去就不那么不务正业了哈哈。当然,写序更多的是为了记录生活,希望每一篇文章不仅仅只是传递知识,更是一篇有温度的文章。


经历了风风雨雨的2019,又度过了魔幻版的春节,我终于又开始正式地写文章了。但这次不同,我拥有了两只可爱的小伙伴——汽水和芬达。汽水8月18出生,芬达8月20出生,现在都已经是肥肥壮壮的两大只了。。


汽水总是在我码字的时候,睡在我的键盘上,或者以各种姿势吸引我的注意力。。  为啥拖了这么久才写写完文章,除了懒以外,汽水大概也要背点锅,哈哈。


整个2019年中,经历了很多事情,人生观也随之发生了些许变化。


从并肩作战的同事的不断离去,到逐渐需要考虑团队的发展。从单打独斗闯天下,到思考如何让整个团队更加优秀、如何建立完善的设计体系等等。


角色、心态、责任,以及如何坦然地面对自己。


活在当下,用心生活。这是我一直当作座右铭的语录,也是我希望给自己的承诺。总是试图去尝试这种状态,但却异常艰难。像我这样的人,看上去总是“积极向上”,总是“规划未来”,总是希望事事完美,强迫着每个细节的完善。但不知不觉中,人生好像开始进入了“自动驾驶”的模式,活在了过去的思索中,活在了未来的规划中,唯独对于当下异常麻木。


这并不是我想要的生活,我开始尝试做出改变。


偶然间,通过一些书籍,我开始尝试正念禅修。感受每个呼吸中空气的流动、感受身体的每个部分、感受当下空间发生的每一件事情。虽然只是很浅显的境界,但正念依然对我产生了巨大的影响。我开始重新地审视自己的人生,审视自己的生活状态。

网易蜗牛图书馆:与快乐的小伙伴们


这种感觉,就像再次地呼吸了新鲜空气一样。


我们其实只存在于当下的时空中,过去和未来,并非真实存在的事物。回想一下,我们有多久没有像小时候一样,完完全全、毫无杂念地享受在当下的时光中了?


用心活在当下,平静地接纳一切发生的事物,这种感觉真是太美好了~




一、我们为什么需要设计思维?

-


对于设计师来说,什么能力更为重要?是设计这门“技术”本身,还是思考如何去设计的“思维”能力?


对于不同的设计师来说,一定会有不同的答案。


这两种能力本身并不矛盾,他们相互影响,互相促进——就像“术”与“道”之间的关系。设计能力决定了设计作品的输出质量,而设计思维则决定了你思考问题、解决问题的能力。


然而,在现实的大环境下,“术”的重视程度远高于“道”,造成了很多设计师与日常业务的“分离感”。以至于,多数的设计师,无法将自己的设计能力有效地用于日常业务中;抱怨他人不理解设计,也因此错失了许多机会。


重视设计美感,其实并没有问题。视觉是最直接的表现方式,我们从最初开始喜欢这个行业,并最终成为设计师,大概都是因为如此。包括我个人,也是美感的极致追求者,常常为了几像素的细节,调整无数稿。也常常沉浸于自己的作品无法自拔emmm…


但是,美感之后,设计还需要什么?


路易斯·沙利文曾讲过:“形式追随功能”。而功能存在的意义,则在于解决问题。视觉的形式、美感,很多时候只是包裹在外侧的表层,而解决问题才是设计真正的核心。视觉的表现,一定要遵循解决问题的方式,向用户传递恰当的信息,最终引导用户以此来解决问题。


因此,我更希望更多的设计师,在追求美感的同时,能够重拾设计思维本身,寻找设计最根本的价值。


我们其实可以站得更远一些。学会去理解事物,学会用设计去解决问题。再以此为基础,通过你的设计能力去塑造它、点亮它,让它成为一个真正美好而又有价值的设计。


而设计的价值,将会成为你的价值。




二、下一个时代在哪里?

-


互联网时代中的数字产品设计,需要什么样的设计思维?或者说,当下我们需要什么样的设计思维?


这个问题的答案,好像一直在变。


互联网本身便是一个新的形态,1989年“万维网”发明,1996年中国引入互联网,到今年已经有大约24个年头。我们经历了不同的互联网时期,而“设计”的概念也一直在变化中。


Internet 1.0 PC互联网时代。在这个时代,我们将大量的信息虚拟化,并通过网络进行信息传递。而我们的“设计师”们大多被称为“美工”,我们的“设计思维”,便是将信息变得更好看。


Internet 2.0 移动互联网时代,或者称为消费互联网时代。自从2007年乔布斯发布第一代iPhone之后,叠加4G、wifi等技术,手机成为日益重要的终端,世界逐渐进入了移动互联网时代。伴随着iPhone与其应用的出现,乔布斯让所有人理解了“用户体验”的重要性。我们不再是“美工”,我们变成了“UI设计师”、“交互设计师”。而这个时代,我们的设计思维变成了“用户体验思维”。


那么,下一个时代在哪里?我们的设计思维又将如何转变,才能适应下一个时代?




三、互联网下半场,从大势中看变化

-


1.红利消失、增长触顶,互联网下半场到来


最近几年,我们已经能够明显地感知到——互联网的“寒冬”真的来了。随之而来的,便是互联网的发展方向似乎也正在发生变化。于是大约从2017年开始,互联网圈内逐渐出现一个新的名词——互联网“下半场”。人们普遍认为,中国的互联网将会由消费互联网时代进入下一个时代,即互联网下半场。


我并不完全认同互联网”下半场“的称呼。互联网本身是一个年轻的行业,中国互联网“下半场”,其实更像是互联网发展方向转变的标志。


因此,我们认为的下一个时代的方向,也许将会是Internet 3.0——即产业互联网时代。



互联网会什么必须要进入下一个时代?


对于互联网企业来说,一方面在成本端,随着人口红利消褪,劳动力价格上升,企业的成本将逐渐升高,倒逼管理者使用系统和工具来提高效率;另一方面,在收入端,野蛮增长的时代结束,增量经济转向存量经济,红利经济转向效率经济


在“成本”与“效率”的双重压力下,再加上整个市场经济的下行周期,整体经济出现下滑,而一些依靠融资的互联网公司将难以为继。因此企业不得不寻找方式来提升效率,降低成本——而这正是企业级软件(ToB产品)最擅长的地方。


因此,在互联网寒冬之下,ToB市场便理所应当地开始被重视。


让我们纵观整个中国市场的发展,互联网的兴趣虽然促进了消费领域的蓬勃发展,但产业领域的发展则因此受到了巨大制约。中国率先从消费端、从第三产业开始数字化,然而在第一、二产业的数字化进程似乎并不是很快。一个重要的原因是,人口红利促使了消费互联网的快速发展,而这种红利让人们忽视了产业互联网的重要性。


在寒冬之下,我们终于发现,消费互联网蓬勃的基石,正是底层坚实的产业互联网。产业互联网如果不能得到有效的发展,则整个市场经济将无法更进一步的发展。


因此,产业互联网时代的到来,是中国互联网发展的需要,也将是大势所趋。



2.ToB市场将迎来机遇


产业互联网的发展,需要依托B端领域的发展,并逐步融入并带动整个产业进入互联网时代。那么,B端产品在中国目前处于一个什么阶段呢?


对于整个中国的ToB行业发展现状,大多数的人并没有一个清晰的概念。盘点中美上市的科技公司会发现,美国toC领域与toB领域市值之比是6:4,但在中国这个数字是20:1。


虽然互联网的整体环境不同,但中国ToB行业的发展,显然是落后太多了。于是乎,2018年开始,BAT大举布局,PE、VC加速进场——中国B端产品已经逐渐进入必须发展的时候了。


中国市场已经坐拥全球最发达的发达的消费互联网体系,而产业互联网的发展则却严重滞后。


同时,对比B端中云计算领域的IaaS、PaaS、SaaS三层架构,全球市场中SaaS占据了52.5%的份额,在中国却是IaaS分走了最大的蛋糕,占比达61.2%。中国市场VC的投资总额已经与美国相当,在SaaS领域美国企业获得了全球70.1%的融资,而中国只有11.7%。


因此,在互联网下半场,相对于ToC行业的触顶,ToB行业将会迎来历史级的发展机遇,随之而来的将会是产业互联网时代的逐渐到来。而在整个B端产品的类目中,SaaS产品作为企业级软件中最集成的产品,也将随着这股浪潮迎来爆发式的增长。


什么是SaaS产品?很多同学并没有接触过B端行业,平时用到的也都是C端产品,所以对B端产品的了解比较少。在B端行业最热门的云计算领域中,目前普遍会分为三层架构。SaaS(Software as a Service–软件即服务);PaaS(Platform as a Service–平台即服务) ;IaaS(Infrastructure as a Service–基础架构即服务)。


附:云计算领域,三种不同的架构与对应的服务。


PaaS基于IaaS实现,SaaS的服务层次又在PaaS之上,三者分别面对不同的需求。越往上层,产品的集成度越高,提供的服务也就越丰富,而用户所需要的自行解决的东西就越少。而最顶层的SaaS产品,便是用户可以直接购买并使用的云端产品。


我们为什么要了解这些趋势?


因为一个新的时代,对应一场变革,也将成为一次新的机会。不管是SaaS产品还是其他B端产品,都将在新的时代中逐渐得到重视。而C端产品的发展策略,也将迎来新的变化。对于许多设计师来说,这将会是一个新的机遇。


顺势而为,方能乘势而上。




四、设计思维的转变,差异与融合

-


那么,在逐渐到来的产业互联网时代,设计师需要注意哪些东西?设计思维又将进行如何转变?


产业互联网时代,意味着B端产品将得到重视,并与C端产品逐渐趋于平衡。因此,了解设计思维的变化,我们首先要从B端与C端产品之间,在产品设计与产品策略之间的差异性说起。



1.服务对象的差异性


从服务对象来看,C端产品的服务对象是人,产品的目标是针对人们生活方式进行的变革、升级。而B端产品的服务对象则大多是企业,目标是帮助企业进行商业效率的提升,从而产生价值。


服务对象的差异性,决定了产品在发展策略也将存在着较大的差异性。



2.产品“打法”上的差异性


从宏观的打法上看,消费互联网时代会更求“快”,而产品互联网时代则会更偏“稳”。


C端产品的服务对象是人,而人的需求在个体差异性上相对变化较小,这就决定了C端产品通常都拥有广阔的用户市场


因此,消费互联网时代就像是资本在辽阔平原的角逐,长驱直入。讲究快速占领市场,不断地试错、不断地调整。从团购到直播,从打车到短视频领域的兴起,再到最后的单车大战落幕。消费互联网时代的每一次风口,都伴随着各种“游击战”式的竞争。入场速度、快速调整能力、资本深度,都直接影响了最后的结果,而最终的结果也往往是胜者为王,败者将快速地被市场淘汰。


B端产品的服务对象是企业,而企业间的需求差异性则非常巨大,这就决定了B端产品通常需要较强的纵深能力。相对应的,其用户群里在总量上就比较小、但也相对稳固。


因此,产业互联网就像在崎岖丛林的蹒跚前行,渐次演进,如同一场旷日持久的拉锯战。一方面,产业互联网的链条非常长,需要长期的深耕、积累才能逐渐站稳脚跟。而这也导致了产品的壁垒足够深厚,同类产品在短期内无法快速跟进。另一方面,企业间的差距需求的差异性非常大,因此产业互联网存在非常多的细分市场,不同的产品各自在不同的赛道中深耕。而其最终的结果往往是百花齐放,各自盛开。



3.整体行业的协同发展


虽然整个市场都不断地强调——ToC增长触顶,ToB是一篇蓝海。但这并非是“取而代之”,而是逐渐走向整体的“协调发展”。中国ToB的发展的一个重要根基,其实是“中国拥有世界上最成熟的消费互联网体系”这一巨大的优势。


因此,ToC在很长的时间内,仍然会是互联网的主力,而ToC市场的转型,也将有赖于ToB产品所提供的服务。


而随着中国将“互联网+”政策上升为国家战略,更是明确了以互联网带动传统产业的发展方向。因此,互联网的下半场,即产业互联网时代的最终形态,将是互联网与传统行业的“融合式发展“。


ToB产品将会成为带动互联网下一轮发展的核心驱动力。一方面帮助ToC领域完成转型,进入更健康、更稳健的发展阶段;另一方向,ToB领域赋能传统产业与互联网相融合,并最终完成产业升级。



4.产品形态的融合与趋同


整体产业的融合趋同,意味产品的特性也将互相融合。一个很重要的现象是:C端产品逐渐变得不那么C端了,而B端产品也越来越变得得不像B端了。


比如C端产品的主流赛道中,随着头部产品的赛道日渐趋于稳定,其产品体量也因为业务扩展而不断增加。同时,因为产品体系的逐渐形成,为了服务更多的C端用户,会有越来越多的B类用户进入平台,而为了满足B类商家的需要,产品的B端属性变得越来越强了。


而随着B端产品的不断受到重视,原先不被重视的产品UI、用户体验也逐渐在B端产品中得到加强。B端用户虽然服务于B端,但使用者终究是人。而随着竞争的不断加剧,原来的“重功能、轻体验”思路逐渐式微。我们逐渐发现,许多B端产品长的越来越像C端产品了,甚至在UI和体验层面做的与C端产品不相上下。


因此,随着产品属性的融合趋同,意味设计思维势必会与消费者互联网时代存在差异。而我们的设计思维将不仅仅局限在诞生于消费互联网时代的“用户体验思维”。我们需要更新的、更广阔的设计思维,以满足下一个时代的产品发展需要。


那么,新的思维是什么?它将从何而来?



五、探寻全新的思维方式

-


从整个市场的协同发展,到产品形态的融合趋同。那么,我们的设计思维需要如何进行相应的变化?是同样进行“融合趋同”,还是另辟蹊径,寻求新的视角?



1.关键词提取


首先,不管设计思维如何变化,它一定需要同时满足两种产品设计思维的特性。通过前文的分析,我们可以在产品设计特性的维度,提取各自的关键词进行分析:


产品体验:诞生于消费互联网时代的用户体验思维,在产业互联网时代依然是产品设计中最重要的部分。无论是C端还是B端产品,用户体验必然是产品的核心竞争力,只有足够好用、好看,产品才能获得更多用户,最终获得商业上的成功。


灵活性:在消费互联网时代,在激烈的竞争中,C端产品的灵活性的打法对于产品的突围至关重要。而未来的B端产品竞争将会加剧,这就需要B端产品也逐渐需要较强的灵活性。


成长性:产品的发展必将伴随着不断的变化,特别是具有一定体量之后,产品设计的成长性将至关重要。因此,产品的设计是否能够预见未来发展,满足不断变化的产品形态,伴随着产品不断地成长,也将成为产品是否能够持续获得成功的关键因素。


产品效率:因为产品服务对象的关系,B端产品一直是产品效率的代名词。而在人口红利消失与经济下行的压力下,产品效率将成为所有企业关注的重要因素之一。产品的效率不仅影响着企业的成本,也是产品竞争力的重要体现。


这四个关键词,将会是我们在未来所需要关注的四个重点关键词。越是往左,则“C”属性越强,因为它更多地从用户的角度出发,更关注用户体验。而越是往右,则“B”属性越强,因为它更多地从企业的角度出发,更关注企业的长期发展。



2.跳出单一层面,寻求新视角


在四个关键词中,我们会发现,特性越是靠右,其所需要的整体性就越强。要满足灵活性,就需要用户体验与产品策略相关联。要满足成长性,则要进一步结合底层的开发能力。而产品效率的提升,则需要产品的设计与不同层面都有着紧密的耦合。


在互联网设计发展的过程中,我们从单点只关注视觉表层的“美工时代”,逐渐发展为关注线性的“用户体验思维”。在对于产品用户体验层面,确实有着长足的发展。


但是,单一层面的用户体验思维,在逐渐成熟的互联网时代中,逐渐显示出了一定的局限性。我们的价值局限于单一的体验层面,我们似乎无法对产品形成更大的影响力,也难以为产品带来体验之外的更多价值。


因此,设计思维想要满足新时代的需求,就需要同时满足前文提到的四个关键词。这就要求我们需要跳出单一层面,以全局的维度去思考产品的设计。


因此,全局性将成为未来的关键,我暂且将这种思维方式称为——全局性设计思维。




六、全局性设计思维概述

-


全局性设计思维,即在设计过程中,始终能以更高的维度去审视全局,思考当下的设计。


何以全局,如何跳出单一层面?这种思维方式的前提,是你要首先了解整个产品(亦或是物体、组织等)的运行方式,清楚的知道整个产品需要达到的目标,从而准确、合理地对针对目前的局部做出设计,并最终构成整个完整的形态。


而“全局”的前提,是你拥有更高的眼界。你的眼界越高,你对产品、市场、甚至整个社会的洞察就越全面,你就能够解决越大的问题,你能够实现的价值就越高。眼界是基础,解决更大的问题是目标,而全局性设计思维则是实现这个目标的方式与过程。


全局性设计思维,可以帮助我们跳出产品的单一层面,去思考从产品层、到体验层、再到开发层这一完成的整体。让设计满足体验层的同时,满足产品层面的目标,同时让产品的设计与开发高度耦合,将整个产品串联成一个完成的整体。


好了,讲了这么多,我们具体应该如何去运用全局性设计思维呢?




七、全局性设计思维的运用方式

-


全局性设计思维,的应用方式非常广泛。它并不是一个固定的方程式,而是一个更高层面的指导性设计思维,能够通过不同的形式,来帮助你解决问题。



1.全局观——在生活思考更多可能


在尝试这种思维之初,我们可以通过一些小的实践,去锻炼这种思维能力。


在日常的生活、工作中,其实我们有大量的事物可以练习和运用这种思维方式。比如你在装修一个大房子,需要去选择房子里的家具。当你在购买家具时,常规的思维方式是:这个家具在某个房间时应该是怎样搭配的,所以我要购买什么样形状、颜色的家具,来满足这个房间的需要。


但是,用这么思维方式来购买家具,将为对家具的灵活性与长期价值造成一定影响。从居住环境的长远来看,也许这个家具有可能会因为某些原因,需要放到另一个房间,而它的形状、尺寸、配色却无法满足其他房间的需要。最终,我们只能重新购买,或者接受一个风格、尺寸上并不搭调的房间出现。


因此,当我们在购买家具时,我们是否可以利用全局性设计思维,从整体空间的角度出发(而非单个房间),去思考如何让家具满足更多空间需求。长此以往,我们不仅可以打造一个风格统一的大空间,同时也能增加每个家具的利用率,在无形中也增加了这个家具本身的价值。


之所以举家具这个例子,是因为这个原理与产品设计的原理非常类似。你可以将这个房子看成是整个产品,而家具则是不同的组件。通过不同的家具(组件),构成了我们的不同功能模块(房间/功能区),而所有的功能模块则构成了整个产品(房子)。


房子(产品体量)越大,房间/功能区(功能模块)就越多,家具(组件)的多样性、复杂性就越高,我们就越是需要从全局的角度去思考装修的统一性(风格体系化)和家具的通用性(样式组件化)。只有这样,我们才能更好地去打造一个风格统一、体验一致,同时又具备足够自由调整空间的“大房子”。



2.全链路——从全流程中重新思考设计


当你仔细地去理解许多非常著名的设计作品时。你会发现,几乎所有优秀的、巧妙的设计,往往在设计中都体现了全局性的设计思维。它不仅仅解决着当前的问题,同时也能够解决更大的问题,发挥巨大的价值。


比如著名的坂茂卫生纸的设计,看似普通,只是将卫生纸的轴心从圆形改成了方形,但它却成为了举世闻名的、公认的好的设计。为什么呢?

undefined


我们先了解一下这个设计为什么好。


首先,传统的圆形纸卷拉出来的纸会比你实际需要的更多。而方形纸卷则由于阻力的作用,让你用得更少,从而起到了解决资源的作用。其次,在运输过程中,圆形的纸卷之间会产生很大的空隙,而方形纸卷则能够紧紧靠在一起,提升空间利用率,从而起到降低运输成本的作用。


这简单的设计,居然发挥了如此大的作用。


那么,为什么我们在设计时就没有考虑到这些问题呢?因为我们从最开始,就没有从“纸”的整个全流程来去思考问题。


让我们“站的更远一些”,纸这个商品,并非只是我们见到的在商店售卖的那一刻。它从工厂中制造完成,通过运输送到每个超市中,当我们购买以后,它又会在很长一段时间内,出现在卫生间,陪伴你使用的每一刻。我们可以将整个流程分为3个场景,而每个不同的场景,又将会对纸本身有着不同的影响。


  • 运输场景——卫生纸的运输成本——卫生纸的价格

  • 售卖场景——卫生纸的造型、包装——影响用户购买

  • 使用场景——卫生纸的使用过程——影响用户的使用体验


当我们能够考虑到卫生纸的运输过程时,我们就可以通过设计去降低运输成本;而当我们可以考虑到用户的使用场景时,我们就可以通过设计,去提升阻力,降低使用量,间接地去提升用户的使用体验。而当我们通过全局性设计思维,可以同时解决这三个问题时,我们的设计就是好的设计,就拥有了更高的价值。


发现了吗,为什么你没有想到相同的设计方案?设计能力并不是关键,设计思维才是指引你做出好的设计的前提。当你能按上述的方式,去思考整个流程、不同的场景,我相信大多数的人都能够设计出坂茂的设计方案,甚至比这个方案更好的解决方式。




八、以全局性设计思维,构建设计体系

-


通过前面的两个案例,相信大家已经了解了全局观、全链路两种应用方式。


那么,我们最最最关心的问题——如何在业务中去使用这种思维呢?


在产品设计中,全局性设计思维也有着非常多样化的使用方式和场景,在之后的文章中我也会讲到很多应用方式。但是,在所有的方式中,我认为最为有效的,便是以全局性设计思维,帮助产品去构建一个完整的设计体系。



1.设计体系概述


什么是设计体系?谈及设计体系,大多数设计师会认为,设计体系就是设计规范。“不就是找个名次包装一下规范嘛?”


我们为什么需要设计体系?它与设计规范有何不同呢?


设计规范是设计师最为熟悉的一种规范文档。在产品设计时,优秀的设计师通常都会建立设计规范。然而在实际的项目中,设计规范往往无法难以有效实施。比如在开发眼中,规范并不符合开发规则,过于碎片化。而产品经理通常又不会去了解设计规范,因此在构建产品框架时也常常随意发挥。


很多项目做到最后,设计规范仅存在于纸面的意义,并随着项目的发展逐渐混乱。为什么会这样? 


因为不同职能间的思考方式存在差别,设计规范对于其他职能来说经常难以理解与运用,无法与其他职能形成有效联动。


设计规范仅仅是基于视觉层面的规范,它是一个“平面”。而设计体系则是贯穿于产品的每个层面的、与产品深度结合的完整体系,它是“立体”的“有机生命体”。


设计体系的核心在于“体”,它是贯穿于整个产品的完整体系。设计体系由设计师创造,并深度融合于产品每个部分。它能够让产品更紧密、更统一、更有序,伴随着产品的生长,与产品共同进化,并最终推动产品的发展。


创造并推动这一体系,则要求设计师需要更全面的能力。只有充分地去理解并参与产品的每个部分的设计,才能让设计真正延伸至产品的每个部分。


而创造这一切的前提,便是全局性设计思维。



2.设计体系的构建法则


罗马不是一天建成的,设计体系也是如此。设计体系的建立是一个漫长的过程(与产品体量相关),需要在前期投入更多的精力。但若是你的方法得当,就会在项目中越来越轻松,并以此形成良性循环,而你也会越来越有成就感。


如何正确地去构建设计体系呢?我在这里总结了几个要点:



1)树立观念


首先,树立长期的体系化意识是必要前提。在任何项目中都要时刻保持体系化思维,着眼于整个项目,去寻找体系化的推动时机。当你在潜意识中拥有这种思维之后,你会自然而然的将其植入到设计中。



2)以解决问题为导向


体系化并非凭空建立,而是建立在解决问题的基础之上。设计体系的本质,就是由无数个标准化的解决方案,最终构成的一个完整的体系。因此,我们要以解决问题为导向,以全局性思维去思考问题的本质,最终建立适用于全局设计体系。



3)以小为始,重视质量


脚踏实地,从小处入手,去发现产品中最基础的一些问题。表面上看这些问题,对项目影响不大,但他们数量庞大,加在一起便会严重影响整个产品的效率。因此,我们要首先建立高品质的基础体系,再以此为基础构建更大的体系


不要一开始就设法建立一个巨大的体系,那样只会是一盘散沙,因为它的结构是无序、混乱、不健康的。而这也是大多设计规范缺乏有效性和可实施性的根源。


梅拉妮·米歇尔的《复杂》一书中讲到,任何复杂系统,都是由无数个体通过简单的算法所构成的。在算法领域也是同样的原理,一个优秀而强大的代码,必然是由无数个小型模块,通过简单的算法耦合形成巨大的代码矩阵。基础算法越强大、代码结构越“健康”,可扩展性和灵活性就越强,其能力就越强大。



4)从规范入手,由面到体


从本质上来说,设计体系是由“多个个层面的规范”组合而成的。因此,由设计师推动的体系化建设,往往最初都是从设计规范这一“单层规范”开始。但是,设计体系的建设需要将单层的规范,通过不同的方式,转化为不同层面的规范,最终由面到体,形成体系化。



5)换位思考,寻求跨职能合作


设计体系的建立与维护,通常需要多职能的通力协作。因此,我们需要经常换位思考,在完成设计的工作,帮助其他职能完成目标。只有这样,才能得到更多的信任,并以此为基础推动更多体系化的建设。


比如我在设计一个功能模块的页面时,首先会与不同模块产品经理进行交流,了解不同的业务需求,并从产品层面就开始寻求统一性与通用性。这样的话,当其他模块需要同一个功能时,前端便可以直接复用,同时后端的数据也可以进行互通。而在开发端,我也会详细了解不同端的开发实现原理,务求设计规范与开发规则在理解上的一致性。这一既方便了开发理解规范,同时也从根本上提升了开还原的准确性。


长此以往,整个团队就能够建立良好的沟通和互信关系。有了这种默契,设计体系的推动就容易多了。



6)保持优化,不断成长


设计体系的另一个重要价值在于,它是可以伴随产品不断成长的。所有产品都是在发展中不断变化的,过分僵硬的规则,将会对产品发展起到反作用。


在业务发展中,产品一定会不断地加入新的功能模块,并对原有页面作出相应的调整。因此,设计体系需要时刻与产品策略保持一致,及时与上下游职能沟通,不断地针对产品发展进行优化,以保证设计体系能够符合产品的发展需要。



7)使用正确的推动方式


体系化最终能否成功实施,推动的方式至关重要。


在日常的项目中,大多数的业务方对设计体系了解甚少,也难以体会其中的价值。因此,他们通常会认为这些东西毫无必要,多数情况也不太愿意配合体系的推进。如果强行推进,反而会引起不必要的阻力,招致反感。那么,我们应该如何正确的去推进设计体系建设呢?


1.为他人带来价值:首先,寻找双方共同的利益点是首要任务。也许是可以让其他职能的工作更高效,也许能够促使其达成KPI,再不直接,那也一定能够为整个产品带来价值(不然你也没必要推了。。)。总之,设计体系一定要能够为他人带来价值,这样才能顺利推进。否则人家凭什么要协助你推进,因为你美丽可爱吗?你也可能比较可爱,但总归是不能一直这么来吧。。。


2.在解决问题后提出方案:不要一开始就啪一下抛出一个“宏大的理想”,大部分人会觉得你不切实际。你只需要通过这个体系,帮助业务方先解决一个问题,然后再提出你解决方式的来源——一个严谨的、可验证的、长远价值的体系化解决方案。


3.寻找合适的推动时间:最后,对于设计体系来说,寻找到正确、恰当的推进时机至关重要。比如当你在平时突然想要提出,对现有品牌进行升级时,大多数业务方都会认为你是没事找事。而如果情况是在新的一年中,产品进行了概念的升级,这时候你将概念以及未来的品牌规划融入在你的方案中,再去推进品牌升级,就会容易很多了。




九、文章预告

-


本文旨在引导大家更好地理解和学习这种思维方式,想要用好全局性设计思维,光靠讲是远远不够的。最重要的是能将这种思维带入到产品中,为业务带来更大的价值。


因此,在后续的几篇文章中,我将通过不同类型案例,为大家深入讲解全局性的具体实践案例。



全局性设计思维 | 如何打造强大的品牌体系


为什么要建立品牌体系?品牌体系有哪些价值?设计师应该如何推动品牌体系的建立?


本文将带你了解网易智慧企业品牌体系的建设与推动全过程,聊一聊品牌体系建设的那些事儿~



FishDesign组件库 | 从零到一构建企业级UI组件库


我们为什么要建立组件库?在产品的什么阶段需要组件库?如何抽象业务组件?组件库设计过程中有哪些重要的细节需要注意?


本文带你深入了解,网易Web端组件库——FishDesign组件库从零到一的完整全过程。



全局性设计思维 | 如何构建事业部级大型设计体系


设计体系有什么价值?如何基于不同的业务建立设计体系?设计师如何推动体系化建设?在体系化过程中有哪些需要注意的地方?


我将会在这篇文章中,为大家介绍网易智慧企业设计体系构建全过程


1. 样式组件化+规范体系化,形成产品设计体系,整体重构产品线。


2. 结合品牌体系,推动事业部更多产品加入体系,形成智慧企业Web端产品设计体系


3. 推动更多产品/业务融入体系中,让智慧企业设计体系不断成长,赋能业务发展




写在最后

-


好吧,似乎文章又写得偏长了一些。只能说,想要认真地讲清楚一个道理,确实不是一件容易的事情。


设计思维本身并不复杂,但想要讲清楚它的背景、原理及价值,就需要把它整个掰开来讲。而为了确保设计思维的可实施性,又需要经过大量的实践研究,自己能够走通以后,才能与大家分享。


坦白讲,似乎整个社会都在追求快节奏、碎片化阅读。但若是因此而丧失了自己学习的节奏,那么等于是没有节奏的,你的知识体系也将是东拼西凑,无法形成一套完整的体系。这也是我更新比较慢的原因之一,希望大家读完文章,能够切实地得到一些东西,这就很有意义。


不过更新这么慢,汽水和芬达都有责任。天天在面前卖萌啊吸引你注意力,那你就得陪他们玩吧?玩完以后鸡胸肉你要煮一个吧?吃饭打架了你得调解吧。。你们真的不能怪我。


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

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Jady_剑杰

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

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


复杂系统如何设计 | 论B端产品的体系化构建

分享达人



导读


为什么B端产品总是容易“失控”?B端产品设计与C端有何差异?如何在不断复杂的系统中,权衡效率、成本、体验之间的关系? 


本文将带你从B端产品的本质出发,了解产品发展过程中容易出现的问题,并从复杂系统的角度去探讨设计体系的构建方式。



目录


一、「 困局 」容易“失控”的B端产品

A .「 关注重点的差异性 」

B .「 微小差异的不断叠加 」

C .「 产品发展进入恶性循环 」

D .「 进入效率拐点,产品失控 」


二、「 启发 」从复杂科学的角度思考设计

A.「 自然算法 」

B.「 物质的构成原理 」


三、「 探究 」什么是产品设计体系?

A.「 定义 」

B .「 组成部分 」

C .「团队能力要求 」

D .「 构建方向 」


四、「 剖析 」B端产品的生命周期

「 产品生命周期概述 」

A .「 初创期 」解决核心问题,产生价值

B .「 成长期 」能力完善,产品扩张

C .「 成熟期 」效率提升,快速增长

D .「 暮年期 」商业价值降低,发展逐渐停滞


NEXT、「 下期预告 」设计体系的构建法则




前言


随着产业互联网时代的到来,市场对B端产品的重视程度逐渐提升。然而,谈及B端产品,特别是SaaS产品,大多数设计师对此并不是特别感兴趣。一来,SaaS更注重功能层面,似乎本身对设计的要求并不高;二来,SaaS产品的最终实现效果总是不尽人意,就算设计得再好看,实现出来也难以出彩。


确实,若设计师仅仅只是关注视觉层面本身,那么B端产品确实不像C端那么吸引人。但是,若你能以整个产品构建的角度去思考B端产品设计,那么设计师能够在其中发挥的空间是巨大的。


假如把C端产品比作精致的小房子,那B端产品就是一幢巨大的高层建筑。建造小房子,你可以尽情地发挥创意,追逐潮流,大不了推倒重来。而建造大房子,则需要设计师考虑更多的维度,因为这是一个长期而复杂的工程。


建筑的外观不仅需要好看,更需要足够耐看、稳定;为了适应更多人的需求,你不仅要考虑房子的软装,还要考虑户型的合理性、通用性;而为了降低成本,你还需要考虑家具、硬装的标准化、房间的兼容性等等…


“你是否有信心建造一个宏伟的高楼大厦?” 


这是我在B端设计中,反复强调体系化思维的原因之一。想要建造一个大型建筑,没有体系化思维、没有更完善的多职能协作流程,那么这座高楼一定会在建设过程中埋下隐患。而当问题一旦出现,涉及到的沉没成本也将会非常巨大。


当然,对于C端产品来说,体系化也愈发重要了。随着互联网时代的持续发展,一些C端产品的复杂性也堪比B端。我在之前的文章中提到过一个观点:“C端B化,B端C化”。在未来的数字产品设计中,B端产品将会逐渐开始重视产品的外观与体验,因为触达的人群更年轻化、对体验要求更高了。而C端产品也会更注重体系化建设,因为产品体量越来越大,需要寻求效率与成本之间的平衡点。


产品设计体系,本质上是一套更科学的复杂性数字产品的设计方法与工作流程。因此,不管是B端产品还是C端产品,设计体系能够在提升设计品质的同时,让产品更“可控”,提升效能,降低成本。


这套设计方法论,是我在工作中不断实践与完善的一些经验与方法。希望能借此分享一些自己浅薄的经验,也探讨一下数字产品设计未来的形态。




一、「 困局 」容易“失控”的B端产品

-


作为较为复杂的数字产品,B端产品在快速发展的过程中,总是容易出现一些问题。特别是当产品体量到达一定阶段后,问题就会逐渐暴露出来,比如:


1. 产品丑、设计质量低;

2. 组件样式繁多,操作习惯不一致;

3. 新老系统差异大,不同模块体验差异大;

4. 页面结构混乱。


等等…


很多问题大家都能明显地意识到,但往往因为“不影响售卖”、“价值不高”、“新功能优先”等理由被搁置。


随着问题逐渐积累,产品的优化成本也变得越来越高,最终使整个产品已经积重难返。若只是多部分页面/组件进行优化,小修小补,虽然成本低,但成效甚微;若是进行大修大补,那么优化成本将远大于研发新功能的成本。


这种普遍的B端产品现象,被称为“产品失控”,即——团队已经对整个产品的形态失去控制力。


那么,为什么B端产品特别容易出现这种问题呢?



A .「 关注重点的差异性 


首先,产品的本质决定了其关注重点的差异性。


与C端产品不同的是,B端产品往往更看重“能力”(为企业用户解决问题),而产品的销售方式与付费模式,也决定了产品体验并非首要关注的对象。由于B端产品通常针对企业用户,需要更长的研发过程,产品的体量和复杂性也相对较高。因此,除了产品解决问题的“能力”之外,产品还需要关注研发的效率及成本。


因此,在产品的发展初期,企业通常对效率最为关注,其次是成本,最后才是体验(能用就行)。绝大多数B端企业,只有在产品跑通商业逻辑,并具备一定用户与盈利预期之后,才会对产品的体验逐渐重视起来。



B .「 微小差异的不断叠加 


任何微小的差异,在无数次的叠加之后,都会被快速放大。特别是当团队的人员逐渐增多后,放大速度将会呈指数级上升。


为了配合产品的快速发展,产品往往会采用“堆量”的研发模式。增加研发效率,最简单直接的方法便是投入更多的资源。随着产品不断增加模块、功能、页面,团队人员也在不断地扩充。


但是,人类不是机器,并非简单的1+1=2。团队数量的上升虽然会带来效率的短期提升,但同样也会增加团队的管理成本。不同的产品经理、设计师、研发人员,对于产品的认知是不同的。随着团队人员的不断增加,“个体差异性”将会被不断地叠加与放大。


就像“传话筒”的游戏一样,同一个事物,不同的人理解总是不同的,经过多次的“传话”以后,往往与原本的意思已经大相径庭了。


这种情况表现在产品设计中,则会出现:当相同的组件由不同的人做时,总是会在基本样式、实现原理、交互细节等不同的维度出现差异。比如上图中的导航菜单组件,不同的模块在开发时总是会存在差异,最后差异越来越大,形成了五花八门的导航菜单形式。



C .「 产品发展进入恶性循环 


令人遗憾的是,虽然问题很明显。但是在不断的“成本考量”中,产品团队往往优先关注新功能的开发,而忽略底层问题的优化。


随着产品的快速发展,产品的优化/迭代成本将会逐渐大于研发新功能的成本。要么背负巨大的成本进行整体重构;要么降低标准,继续以这种模式不断叠加新功能。


在这种情况下,大部分B端产品往往会选择后者。于是,产品的发展将会进入一个“恶性循环”


  • 产品快速发展,功能不断叠加;

  • 各模块由不同的产品、不同的开发研发,导致各模块之间差异增加;

  • 产品丑、体验不统一,但老系统优化成本过高。综合衡量,优先进行新功能研发;

  • 所有模块标准不统一,产品迭代效率持续降低,维护成本持续增加。



D .「 进入效率拐点,产品失控 


产品的发展犹如一辆快速奔驰的巨型列车,一旦加速便难以停止。


随着问题的反复出现,以及在一次次的“利益权衡”中选择性的忽略,产品的恶性循环不断重复,而问题也逐渐叠加、沉积下来。


当这个问题已经大到我们无法回避时,我们才发现:产品的单位迭代/优化成本,已经远远大于新功能的研发成本。而新功能带来的增量,已经无法抵消现有模块的迭代成本——产品迎来了效率拐点。


就像一个庞大而复杂的机器,虽然依旧可以运行,但整体效率已经很低了,而与之对应的维修成本则非常巨大。小修小补根本无法解决问题,而大修大补则很有可能会带来更大的亏损。


最终,产品逐渐在“失控”中难以自拔,竞争力逐渐降低,但整个团队对此却无能为力,严重影响了企业的发展。


那么,在产品发展中,我们应该如何避免这种情况呢?换而言之,一个高度复杂的数字产品,我们应该如何设计,才能避免其逐步走向混乱? 




二、「 启发 」从复杂科学的角度思考设计

-


如果我们将B端产品看作是一个复杂系统,那么产品“失控”的本质即——在不断复杂化的形态中,缺乏有效的控制机制,最终导致整个系统失去控制。 


但是,在大自然面前,B端产品这种复杂程度显然不值得一提。


像大自然这样的复杂系统,是如何构成的?所有的物体都由原子所构成,为什么简单的一百多种原子,能够构成如此复杂的世界?生命又是如何在无机物的世界中诞生,并逐步进化成如此复杂的个体的?



A.「 自然算法 


道生一、一生二、二生三、三生万物...无论是老子的《道德经》,还是《深奥的简洁》、《万物皆数》、《复杂》这些现代的书籍中都阐述了这样一个观点:


任何看似复杂而又可控的系统,一定存在着精简的“算法”,通过不断的叠加从而形成复杂系统。


就像爱因斯坦说的:“宇宙最不可理解之处,就是它居然是可以被理解。”


在大自然中,有很多的花纹与图案的形状都存在相同的规律。比如上图中的羊齿草分形图案,这种图案在森林当中到处可见,我们看到很多树的形状跟叶子的形状是一致的,这就是一种分形图案。而这种分形的图案本质上是一个公式,通过不断地自我引用进行迭代,这便是分形。


科赫曲线(Koch curve)就是一种分形。其形态似雪花,又称科赫雪花(Koch snowflake)、科赫星(Koch star)、科赫岛(Koch island)或雪花曲线(Snowflake curve)。


它最早出现在瑞典数学家海里格·冯·科赫的论文中。我们将一根直线分成四段,然后向中间挤压形成等边的倒V形状;接着再将每个倒V的边进行相同的操作,不断地重复之后,我们发现:第一步是倒V型、第二步变成了大卫星,第三部变成了枫叶,第四步… 经过无数步以后,最终成了越来越复杂的“雪花”形态。


科赫曲线便是“自然算法”的一种。海岸线虽然很复杂,但是却有一个重要的特性——自相似性。从不同比例尺的地形图上,我们可以看出海岸线的形状大体相同,其曲折、复杂程度也很相似,换句话说,任意一段海岸线就像是整个海岸线按比例缩小的结果。而海岸线的构成原理就是这种科赫曲线,它是通过天然的演化,不断折叠最终形成了这种形状。


可以发现,他们都是由 基础物质 x 简单算法 x 随机变量,经过无数次叠加后,最终形成了一个复杂而多变的整体。



B.「 物质的构成原理 


宇宙中还有其他各种惊人的“巧合”。爱因斯坦的相对论揭示了宏观世界的规律性,普朗克和海森堡的量子力学揭示了微观物质世界的规律。当我们从微观世界到天文学会发现——原子核的构成方式居然与天体的构成非常相似。粒子围绕原子核的运动方式,就好像行星围绕太阳运动一样。


不管是整个宇宙,还是生命体,将其置于复杂科学的研究框架中,那些基本定律最终也会变得极其简单


在宇宙中所知最为复杂的形态,便是如同我们自身的生物。这些复杂体由已知存在于银河系中最普通的物质所构成。但是,通过氨基酸的形态,这些基本原料竟能自然地将自己组合成一个自组织系统。


混沌中隐藏的算法,使宇宙成为极有秩序的地方。而在秩序中隐藏的随机数,又使得宇宙成为极为丰富的世界。


也正是因为算法的精简,一切物质的创造才能具备复制性、延续性、进化性


那么,我们反过来思考——想要使复杂的系统简单可控,是否就需要一套简洁、有效的“算法”?通过“算法”,将基础的“物质”不断地“有序叠加”,形成一个可控的复杂体系。


因此,对于复杂的SaaS系统设计,我开始引入“设计体系”这一概念,希望能够找到未来SaaS产品设计的发展方向。只有设计体系的建立,才能保证产品可控性,才能在不断复杂系统中,保证效率、成本、体验之间的平衡。




三、「 探究 」什么是产品设计体系?

-


产品设计体系,在国内仍旧是较为陌生的词汇。什么是设计体系?


A.「 定义 


一个成熟的数字产品,需要有一个稳定、且持续迭代的形态。创造这个形态的过程,我们称之为广义上的产品设计(这里指产品的整个策划和设计过程,包含策划、交互、视觉及部分前端开发)。而负责控制和维护这个形态的这套系统,便是产品设计体系。


我们接触到的更多是设计系统(Design System),比如平台级的设计体系,Apple、Google、Microsoft等系统级的设计系统,及其设计开发套件、应用生态。公司级的设计系统,如Airbnb设计系统、IBM的Carbon设计系统、蚂蚁金服的Alipay Design等。


但是,在一个企业内部,想要Design System能够系统性地运转,还需要基于这套标准建立的团队协作机制。只有设计标准与团队协作标准完美融合,才能建立真正的设计体系。



B .「 组成部分 


如果将数字产品比作复杂的“生命体”,产品的发展比作竞争中“自我进化”,那么设计体系便是产品的DNA。它既是产品形态的控制源,又是不断自我迭代的进化源,它的作用是:


  • 控制产品外观——感知性模型(视觉风格/规范)

  • 制造基础构件——功能性模型(基础/复合组件)

  • 模块的构建规则——模式语言(产品框架规范)

  • 产品标准定义、生产方式制定——协作模型(高度协同的工作流程)


它不仅能控制产品的“生产结果”,提升产品质量;还能规范产品的“生产过程”,形成一套完整的多职能协作流程,提升产品的生产、迭代和维护效率。 


从宏观来看,设计体系像是一个“规范的复合体”,它是各职能之间规范的有效整合,产品框架、交互规范、视觉规范、前端规则,同时也是基于整合规范所创造的一套创新的工作模式。



C .「团队能力要求 


设计体系的建立,需要整个产品团队拥有一致的目标,并为之通力协作才能完成。这就需要整个团队拥有较高的平均素质与契合度


同时,体系化的建立和推动,也需要团队中有人牵头去推动。设计师作为“产品-开发”的中间环节,是非常有条件成为推动者的角色的。


当然,这就要求设计师拥有更丰富的横向能力。


一方面,设计师需要将自身的能力边界进行拓展,与上下游的职能保持密切的沟通,并解他们的诉求。只有当设计体系满足各方利益时,体系化才有推动的空间。


另一方面,对于产品侧与开发侧人员,设计团队也可以通过培训来提升他们的能力边界。比如针对产品的交互培训、针对开发人员的基础审美培训等。这样才能提升产品的下限与上限,增强产品的综合竞争力。



D .「 构建方向 


设计体系并非超脱于产品之上,而是根植于产品的成长过程中。


想要推动体系化的建立,必须充分了解产品发展的基本规律。产品处于不同的生命周期,所要解决的问题是不同的。在正确的时间做正确的事情,并对未来的形态进行规划,才能逐步让设计体系根植于产品、融合于产品。


因此,在下一章,我们首先来了解一下B端产品的生命周期。




四、「 剖析 」B端产品的生命周期

-


对于设计师来说,首先要更宏观地了解产品所处的生命阶段,才能知道设计需要解决的问题是什么,并以此有针对性制定不同的设计策略,最终帮助产品构建完善设计体系。


本章更多的是对B端产品的发展阶段做一个剖析,而不同阶段具体的实施策略,会在后面讲解。



「 产品生命周期概述  


类似于人的成长历程,一个新的B端产品从诞生到逐步扩大,通常都会经历几个不同的生命阶段。


B端产品研发是一个漫长而系统化的过程。这个过程通常伴随着商业业务发展与商业战略模式的不断调整。


B端产品从立项到下线,产品会处于几个典型的不同状态中,这就是产品的生命周期。通常来看,大多数产品都会经历以下几个生命周期。初创期-成长期-成熟期,直至最终进入暮年期。


而产品的商业价值,也会伴随着产品的发展而变化。在通常情况下,伴随着产品的逐渐成长,其商业价值也会随之增长,并在成熟期进入黄金的商业价值期。而当商业价值出现大幅、持续性的降低时,则基本算是进入了暮年期。


那么,不同的生命周期中,产品将会遇到哪些问题?而为了保证产品的持续发展,产品团队又需要做哪些事情呢?



A .「 初创期 」解决核心问题,产生价值


初创期,即产品已经从构思到研发,并成为了初步的产品。这个时期,产品虽然还不能覆盖完整业务,但已经能够顺利运行


从构思到创意,再到实践落地。B端产品的诞生,通常源于在行业内深耕多年的资深玩家。在不断地实践中,通过创意与实践,找到了一条能够帮助行业解决问题、提升效率的路径。


在这个时期,产品需要解决以下几个问题: 


1)用户是谁?


B端业务的本质,就是“向组织销售服务来获得盈利”。哪些企业最需要你的产品?哪一类用户的问题最需要通过这种方式得到解决的?这些都是需要在早期非常明确的。


站在普罗大众的角度去规划产品固然是好的,但成功的产品都始于一小部分早期用户;B端产品的用户通常来自某一垂直领域,首先让他们喜欢上你的产品,然后慢慢向外拓展至更大的人群当中。


想想看,最初一千名喜欢你产品的种子用户可能是哪些人?


2)产品能够解决什么问题?


我们要为用户解决什么问题?“用户的问题”可能是一个需求、一个困扰或是一个机遇。他们的需求是否真的是痛点?


这个时期,团队需要拜访大量的目标用户,通过交流获取痛点。我们必须验证这个需求的真实性,以及我们的解决方案是否具备一定的可实施性


我们可以通过更具象的UI或流程,初步展示想法,不断优化。最终形成一个可验证的初步产品Demo,并通过Demo进一步与潜在用户进行沟通。


3)这个问题是否普遍?是否具备标准化的可能?


不同企业的需求是有差异的,如何将个性化的需求抽象成共性的解决方案?如何权衡范围与成本之间的关系?我们要将不同企业的需求进行抽象,形成标准化的解决路径。


这个阶段,我们需要为种子用户创建方向聚焦的MVP。MVP必须是名副其实的最小化可行产品,要为种子用户带来端到端的精准体验。如果他们不理解产品功能,不知道如何或为什么使用,或是发现其性能低劣、bug 太多,无法达到“可行”的程度,那么你的假设就难以得到有效验证。


4)是否能够形成完整的商业闭环?


用户是否真的会为这个产品买单?换句话说,产品是否能赚钱并且养活整个团队?


B端产品在初创期,最重要的是快速验证产品与业务的亲密性,能否完成既定的商业战略。产品团队需要通过磨合业务,快速调整业务解决方案和产品架构。


不仅是产品的打磨,整个团队也要形成完整的闭环。工作流程、产品的商业运转机制也要初步跑起来。产品的售前、解决方案、产品研发、实施、客户成功,我们需要真实地完成这一套闭环的操作,并基于此做团队毛利模型的测算。 


解决问题,带来价值,并且能够将价值转化为收益,这才是产品可持续发展的关键。只有跑通完整的商业模式,拥有长期的盈利预期,产品才能顺利进入下一个阶段。



B .「 成长期 」能力完善,产品扩张


成长期,即产品形态初具完善,并具备完整商业闭环之后,处于快速成长的时期。这个时期,产品将进行快速的迭代,覆盖的业务一天比一天完整,能满足的业务需求越来越多,而产品为业务带来的价值越来越大。


与新生期的区别在于,新生期时的迭代方向还未完全明确,迭代更多的是尝试,磨合业务与产品。而在成长期时,产品的迭代方向已经是非常清晰了的


1)更多用户,更多真实需求


产品在真正投入运营之后,所遇到的情况一定与MVP时期有所区别。随着产品的不断售卖,我们将会接触到越来越多的真实用户,以及更多的真实需求。而这些用户与他们的诉求,将会成为产品发展的指引。


2)解决更多问题,业务范围扩张


经过长期的打磨,产品的形态和可用性已经初步成熟了,商业模式也已经初步跑通。随着更多的真实需求,产品将会选择有价值的方向扩张业务范围,从“解决一个问题”逐渐走向“解决一系列问题”


3)功能完善,产品体量快速增加


伴随产品的快速迭代,产品的基础功能会逐渐完善,同时也会基于核心功能去搭建更为丰富的功能矩阵。更多的能力、产品模块、页面,最终逐渐叠加为一个完整的大型产品。


4)组织逐渐完善,人员专业化


随着业务扩张,组织架构逐渐完善。为了提高专业性与效率,团队人员从“多面手”逐渐转化为专业化方向。与之对应的是,团队成员的数量也会在这个时期快速增加。售前、解决方案、产品研发、实施、客户成功,这一套完整的团队模型在各模块中不断地复制。



C .「 成熟期 」效率提升,快速增长


成熟期,即产品的形态已经稳定,并能够创造持续的商业价值。处于成熟期的产品,肯定是已经进行商业化运行的。反之,没有达到预期的商业价值的产品,不能算成熟期。


进入这个阶段时,产品已经实现了产品-市场匹配。但是,我们需要对整个产品、以及团队进行一系列的调和与优化,才能让整个产品的形态与运作方式更加合理,以便将产品推向更广阔的市场


1)产品效率、组织效能提升


经过一系列的快速发展,产品体量通常都会比较大,而团队成员也快速扩张。随着一致性成本、沟通成本增加,势必会造成研发效率、组织效能会下降。因此,如何降低产品的单位研发成本?如何让整个团队的组织效能达到最佳状态?是需要解决的问题。特别是当产品具备一定的客户数量以后,单位研发成本的降低将会极大提升产品整体的利润率


2)产品设计-研发标准化,构建完整链路


通过产品设计-研发标准化、数据架构标准化,打通不同模块的壁垒,提升模块化与灵活性。将单点之间的竞争力相互配合,形成“场域”竞争力


产品的单点也许不能保证都有最佳的竞争力,但如果我们能够提供一系列的、高质量、无缝衔接的配套服务形成闭环,将会形成强大的整体竞争优势。同时,产品设计-研发标准化,能够增加产品售卖的灵活性,通过灵活的组合方式吸引不同的用户,提升销售灵活性与成单率


3)提供高质量的用户体验


产品最终是给人用的,用户体验也会在将来逐渐成为B端产品的核心竞争力。随着竞争的加剧,以及用户群体的逐渐年轻化,用户体验将成为企业在选择产品时的重要考量因素,也是口碑传播的重要途径。


由于在“产品-市场匹配”阶段需要尽快地推出产品,所以在设计开发过程中可能遗留诸多问题,需要进一步打磨优化。产品设计需要与开发具备高度的一致性,视觉交互是否合理,前端代码是否准确合理,操作反馈是否高效等问题,都需要这个阶段来进行调和。


4)教育市场,卖给更多的人


当产品逐渐成熟并具备一定体量之后,单靠销售跑单是远远达不到发展要求。这个阶段,需要市场部人员对市场进行教育,聚焦不同的行业领域,从“点式营销”转变为“面式营销”,并配合销售人员进行产品的售卖。因此,在这个阶段,产品的品牌力、核心能力的传播将至关重要



D .「 暮年期 」商业价值降低,发展逐渐停滞


暮年期,即产品发展停滞甚至倒退,逐渐失去商业价值的产品。


B端产品进入暮年期的原因,主要有两个。一是,伴随着业务的发展,产品已经很难满足业务需求。且翻新产品的投入产出比较低。二是,伴随产品的使用时长,产品将变得臃肿和迟钝,逐渐难以敏捷地满足业务需求。


很多时候,商业环境的快速发展、技术的更新迭代都有可能成为产品进入暮年期的原因。对于暮年期的产品,根据商业战略,产品经理既有可能要延长产品的寿命,也有可能持续保障产品完成顺利换代。当然,更多暮年期的B端产品,由于业务的调整,最终迎来生命的终结。


需要注意的是,很多产品因为在成长期、发展期无法建立有效的产品控制机制,导致产品过早的进入臃肿阶段。也就是前文中所讲的“产品失控”,非常有可能加速产品暮年期的到来。


因此,是否能在前三个阶段建立健康、完善的设计体系,是产品能够获得更长生命力、更多价值的关键。

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

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Jady_剑杰

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

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




使用D3js绘制Force-Directed Graph(力导向图)

前端达人

Force-directed(力导向)图形绘制算法通过图形本身的结构(图中顶点与边的拓扑关系)计算出图形的层次,而不依赖于特定领域的知识。使用力导向算法绘制的平面图形通常比较美观,并且图中各条边之间的交叉尽可能的少。

本文对使用D3js绘制Foorce-Directed Graph(力导向图)的过程进行简要的介绍,以下面的逻辑图(包含6个节点和5条边)为例。

import json #nodes为图的节点集合 nodes = [{'name' : 'nodeA'}, 
         {'name' : 'nodeB'}, 
         {'name' : 'nodeC'}, 
         {'name' : 'nodeD'}, 
         {'name' : 'nodeE'}, 
         {'name' : 'nodeF'}] #links为图的边集合,source为起点,target为终点 links = [{'source' : 0 , 'target' : 1}, 
         {'source' : 0 , 'target' : 2}, 
         {'source' : 0 , 'target' : 3}, 
         {'source' : 0 , 'target' : 4}, 
         {'source' : 0 , 'target' : 5}] #graph为逻辑图,由节点集合和边集合组成 graph = {'nodes' : nodes , 'links' : links} print json.dumps(graph) 

上例的源码 force-directed-graph.html 及注释如下:

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .link { stroke : #CCC; stroke-width : 2; } .node text { pointer-events : none; font-size : 12px; } svg { overflow : hidden; } </style> <script src="http://libs.useso.com/js/jquery/1.11.1/jquery.min.js"></script> <script src="http://libs.useso.com/js/d3/3.4.8/d3.min.js"></script> <script> var graph = {"nodes": [{"name": "nodeA"}, 
{"name": "nodeB"}, 
{"name": "nodeC"}, 
{"name": "nodeD"}, 
{"name": "nodeE"}, 
{"name": "nodeF"}], "links": [{"source": 0, "target":1}, 
{"source": 0, "target": 2}, 
{"source": 0, "target": 3}, 
{"source": 0, "target": 4}, 
{"source": 0, "target": 5}]}; //返回随机颜色代码 function random_color() { var letters = '0123456789ABCDEF'.split(''); var color = '#'; for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    } return color;
} function draw() { var width = 400; var height = 300; //设置svg宽度和高度 var svg = d3.select("#canvas svg")
    .attr("width", width)
    .attr("height", height); //设置Force-Directed力参数 var force = d3.layout.force()
    .gravity(.05)
    .distance(120)
    .charge(-100)
    .size([width, height]);
  force
    .nodes(graph.nodes)
    .links(graph.links)
    .start(); //选择边集合 var link = svg.selectAll(".link")
    .data(graph.links)
    .enter().append("line")
    .attr("class", "link"); //选择节点集合 var node = svg.selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
    .attr("class", "node")
    .call(force.drag); //响应鼠标拖拽事件 //节点添加圆形图案 node.append("svg:circle").attr("r", 10)
    .style("fill", function(){ return random_color();
    })
    .style("stroke", "#FFF").style("stroke-width", 3);
    node.append("text")
      .attr("dx", 12)
      .attr("dy", ".36em")
      .text(function(d) { return d.name }); //绑定tick事件 force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; })
      .attr("y1", function(d) { return d.source.y; })
      .attr("x2", function(d) { return d.target.x; })
      .attr("y2", function(d) { return d.target.y; });
    node.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; });
  });
}
$(function(){ draw();
}); </script> </head> <body> <div id="canvas"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="300"></svg> </div> </body> </html> 

 

本文链接:http://bookshadow.com/weblog/2014/11/04/d3js-force-directed-graph/
请尊重作者的劳动成果,转载请注明出处!书影博客保留对文章的所有权利。



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

截屏2021-05-13 上午11.41.03.png

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


3d-force-graph力导向树(DAG模式)的使用

前端达人

首先3d-force-graph在码云或者github直接搜索,它的文档确实有点少。这个插件用了3次,每一次都有不同的痛苦,也有粗心大意所导致的。

好的,我们现在讲解一下这个插件中的导向树DAG模式

我的案例都会基于Vue开发,创建项目等等我们进不说了,进入正题。

步骤:1.安装:npm i 3d-force-graph (我安装的是"3d-force-graph": “^1.67.5”,)
2.导入 import ForceGraph from ‘3d-force-graph’;

首先注意点:
1.不要全部cv我的代码,或者光放文档中的代码,我们要依据后台数据实际看问题,但是基本的代码步骤是差不多的,但是也不要全CV,不然你的浏览器会报错,而且你以为错误是你的逻辑问题,实际上是cv多了的问题(这一点使我耽误了半天的时间)
2. 数据处理设计到了递归等,数据接口我就不写了

在模板中定义:

<template>
  <div class="wrap"></div>
</template> 
  • 1
  • 2
  • 3
import ForceGraph from '3d-force-graph'; // 导入 import { subjectList } from '../src/request/api'; // 掉数据的接口 
  • 1
  • 2
 data() { return { // 源数据 sourceData: null, // 力导向图数据 nodes: [], links: [], ForceGraphData: {} }; }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

初始话完成

 async created() { // 获取数据接口 try { const { data: res } = await subjectList(); this.sourceData = res.data; console.log(this.sourceData); } catch (err) { console.log(err); } this.digui(this.sourceData); // 递归处理数据 this.SetForce(); // 调用力导向图 }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

进入数据

methods: { // 1.先定义数据 // 首先定义nodes数据;节点数据 设计递归定义方法 digui(data) { data.children.forEach(item => { if (item.children) { this.digui(item); } const nodeObjs = {}; nodeObjs.name = item.name; nodeObjs.id = item.id; nodeObjs.level = item.level; nodeObjs.parent_id = item.parent_id; nodeObjs.has_children = item.has_children; const linksObjs = {}; linksObjs.source = item.parent_id; linksObjs.target = item.id; this.nodes.push(nodeObjs); this.links.push(linksObjs); }); }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

后端返回的数据是格式我们需要用递归地方法把他们处理在这里插入图片描述
要知道插件的节点是nodes数据,连线是links数据,links数组中的每一项都有source和target,source的是连线的开始端,target是连线的结束端,source的是parent_id,target的是id,也就是依据数据进行连接,这一不懂的话可以看看这个插件的这个案例
在这里插入图片描述
好,继续,处理完的数据是nodes数据后端数据返回的每一项包括children下的每一项,links数据是每一项是的target:id和source:parent_id
处理数据完成,下一部在methods中设置力导向图的函数

 // 设置力导向图 SetForce() { // 这里在最想面插入了一条数据是因为后端返还的数据和依据插件的机制需要我在最前面插入一条最起点的数据  //也就是这条数据就是起源,一般来说你们也会在最前面插入一条起源数据,因为后端数据差不多样式都是一样的 // 这条数据就不用在添加parent_id了,就是返回的有parent_id,而不需要添加。 this.nodes.unshift({ id: 10515, name: '化学', level: 1, }); this.ForceGraphData.links = this.links; this.ForceGraphData.nodes = this.nodes; const gukergForce = ForceGraph(); gukergForce(document.querySelector('.wrap')) // 力导向图放在容器中 记住这个容器在样式中要给大小 .graphData(this.ForceGraphData)// 这条就是数据源 .dagMode('td') // 模式有很多选择,我选择的td,自上而下的格式,文档中有选择,你们按自己需求选 } }, 
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

现在一个简单的力导向树就出来了,随项目的需求你可在节点加图片,你需要import * as THREE from ‘three’;这个包不用下载,直接导入就可以,

 const gukergForce = ForceGraph(); // 力导向图放在容器中 gukergForce(document.querySelector('.wrap')) .graphData(this.ForceGraphData) .dagLevelDistance(70) // 两点直接的距离 .dagMode('td') .nodeResolution(50) // 较高的值产生较光滑的球体。 .nodeThreeObject(node => { .nodeThreeObject(node => { if (node.level === 1) { console.log('你好'); } let imgTexture = ''; if (node.level === 1) { imgTexture = new THREE.TextureLoader().load(require('./assets/1.png')); } else if (node.level === 2) { imgTexture = new THREE.TextureLoader().load(require('./assets/2.png')); } else if (node.level === 3) { imgTexture = new THREE.TextureLoader().load(require('./assets/3.png')); } else if (node.level === 4) { imgTexture = new THREE.TextureLoader().load(require('./assets/4.png')); } else if (node.level === 5) { imgTexture = new THREE.TextureLoader().load(require('./assets/5.png')); } const material = new THREE.SpriteMaterial({ map: imgTexture }); const sprite = new THREE.Sprite(material); if (node.level === 1) { sprite.scale.set(50, 45); return sprite; } else if (node.level === 2) { sprite.scale.set(20, 20); return sprite; } if (node.level === 3) { sprite.scale.set(30, 30); return sprite; } if (node.level === 4) { sprite.scale.set(20, 15); return sprite; } if (node.level === 5) { sprite.scale.set(20, 20); return sprite; } }); } 
  • 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

其实由谁解决了它节点之间不重复的问题,可以给我留言,谢谢




转自:csdn论坛

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

截屏2021-05-13 上午11.41.03.png

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

信息可视化是什么?

雪涛


今天我要和大家介绍的这位设计师,他在业内被誉为是“信息可视化设计”领域的天花板。一提到信息可视化这么高大上的词,相信大家都多少有些了解,在日益复杂的信息交流活动中,将信息图表化已经是一名设计所必须掌握的技能之一了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

举些常见的例子,比如在公共场合中,我们看到的交通标志,以及用来显示地理位置的地图、将时间具象化的时刻表等等,这些数据都以某种图形化的形式呈现在我们周围。

信息可视化是什么?来看看日本设计大牛是怎么做的!

而信息可视化领域也不仅仅是将简单的数据绘制成图表那么简单,比如要弄清楚社会中隐藏着的各种问题,从而促进新观点的提出和对问题解决的思考。这种并不以信息为主导,而是着重于根据创建者的主题来选择要传达的信息,并寻求接收者的主动解释。

而我们今天要介绍的这位设计大神就是这个领域的专家

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 中野豪雄 TAKEO NAKANO 图形设计师

1977 年出生于东京都。武藏野美术大学毕业,师从著名设计师胜井三雄。2005 年设立中野设计事务所。以信息的构造化和上下文的可视化为主题,在各种领域探索图形设计的可能性。日本 typographic 年鉴大奖赛,同最佳作品,造书装帧比赛经济产业大臣奖等获奖。入选世界海报三年展和拉哈蒂国际海报双年展等。作为邀请作家参加了国际泰晤士报双年展“首尔 2011”。文艺博物馆永久收藏。武藏野美术大学、多摩美术大学教授。

咱们先来看看中野老师平时的作品都长什么样吧!

信息可视化是什么?来看看日本设计大牛是怎么做的!

是不是很厉害!但说实话,这种信息的密度,工作量绝对是巨大的!而在一些访谈中,中野老师也明确指出,自己更倾向于采用更宏观的视角去做设计,因为这样不仅能够达到传达目标,同时也由于对比的存在,进而产生崭新的视角。

信息可视化是什么?来看看日本设计大牛是怎么做的!

图中我们现在看到的信息可视化海报,是 graphic trial 2015 的一次展览。老师一共设计了五张 B1 大小的凸版印刷海报。内容是关于地震的四年时间里,哪些话题被人们报道直到事件完结,然后回归到日常生活中。以及在大数据为主的信息社会中,思考有关制作印刷物的意义。

信息可视化是什么?来看看日本设计大牛是怎么做的!

人们在地震发生时,所接受到的信息,就像图中展示的这样,是从喧嚣到日常化的推移和演变,老师会考虑到,促进这个过程的因素和推动力是否能够被可视化。从当代语言推动社会发展的角度去考察,想象着是否能将这个语言本身地图话。从而建立起一个提供人们思考的平台,这也是平面设计能否引发舆论争议的关键。

信息可视化是什么?来看看日本设计大牛是怎么做的!

首先我们从信息收集的角度来向大家讲解,这张图是国立情报研究所的北本先生制作的数据图,搜索关键词是“受灾地”。图中折线展示的是,受灾四年间,相关词被搜索的高峰和频率。

信息可视化是什么?来看看日本设计大牛是怎么做的!

接下来我们来看这张语言地图是如何被延展出来的,常规情况下,我们形容时间的话,当然会使用线性的横向时间轴。而中野老师的解决办法,是将时间轴以环形的方式呈现,并且将起点与终点之间的差异可视化。

信息可视化是什么?来看看日本设计大牛是怎么做的!

五张海报,分别从受灾后第一个月、半年后、一年后、两年后以及四年后展开。呈现出由远到近的视角变化,第一张海报中,展示的是受灾后 31 天内的变化,逐渐到最后一样,受灾后 1460 天时,人们对于这个事件的关注转变。

信息可视化是什么?来看看日本设计大牛是怎么做的!

老师从北本先生那里得到的数据,大概可以划分成四个种类,分别是时间、主题的力度、语言关键词频繁出现的次数以及与东日本大地震的关联度。时间就是刚刚提到的,以环形角度的方式呈现。话题的力度越高,就会离中心越近,反之就越远。频率则是按照关键词出现的数量,以圆的大小来呈现。另外也通过颜色来区分与地震话题相关的词语。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 一个月,六个月,一年,两年,四年

最终就呈现出了这样的画面,首先这个项目是单人项目,所以合成这样图的工作量是非常巨大的,过程当中老师也请到了一些研究者对这个项目进行一些帮助。整个海报的重量据说非常重,拿起来大约有二十四千克。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果使用常规的四色印刷的话,也就需要利用青品黄黑去合成不同的颜色。不过这样最终的效果并不理想。

信息可视化是什么?来看看日本设计大牛是怎么做的!

于是老师选择了专色印制,也就是每一种颜色都单独去印制一版。单独印制一张海报,就需要反复印刷 16 版。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

其中的黑色,也就是全部 16 版叠压到一块的效果,可以说是黑中之黑了。当然这个黑色也是有所比喻的,也就是庞大的信息是无法单独存在的,当所有信息混在一起,才能比对出彼此的联系。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

第一张图展示的是灾害发生时的第一个月,画面中展示了很多的圆圈,大部分都发生在外圆,也就是说当时各种各样的搜索关键词,与灾害相关联,被搜索的频率非常高。在色彩的区分中,我们也能感受到相当强大的热度。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是两年后的情况,也就是说圆的一半就是一年,左半边就是第二年,可以很直观的看到,前半年使用的暖色是比较多的,当来到了后半年时,话题热度逐渐冷却的样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

来到第四年的时候,也就是圆的四分之一是一年。右半边展示的是过去来年的样子,而左半边就是又过了两年之后的样子。整个图标展示的是起点“311”大地震动开始的日期,直到截止四年后的 3 月 11 日。

可以看到暖色的部分逐渐变得零星起来。为什么会有这样比较有规律的分布呢,那是因为暖色出现的位置都是所谓的纪念日,也就是人们会想起那次事件的日期。

信息可视化是什么?来看看日本设计大牛是怎么做的!

比如其中烟花这个词,就是从灾难过后才开始频繁出现的,它代表了人们对于灾难的一种寄托,人们期盼着生活能够回归正轨。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这样的可视化设计,意义在于人们能够通过它,俯瞰全局,通过使用宏观的视野来连接新的视角,让人们意识到它们没有注意到的观点。各个词语,会根据时间轴的变化与联动,起到唤醒记忆的作用。通过这个设计作品投影人们过去的经历。

它是从整体到部分之间的一种信息差异。就图的整体视角来看,它表示了“人们遗忘的节奏”,进而对遗忘进行批判。另外从图的部分视角出发,它表示了“记忆的意外发现”包含了对回忆的期待。

看到这是不是觉得中野老师很厉害呢。那么接下来,咱们再来看看他的成长经历

成为一名设计师的契机有很多,比如父母是设计师,或者是有看过一部激动人心的电影海报,想要成为一名从业人员。可中野老师选择设计这个专业时却完全不是这样的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

他选择的了一种极度理性的方法,逐一排除自己不喜欢的东西。

但这种做法本身就很难,最终中野犹豫着要不要选择美术专业。始终没有鼓足勇气的他,还是向附近的预备校老师请教了这个事情。

信息可视化是什么?来看看日本设计大牛是怎么做的!

听了中野的情况后,老师的评价是,他觉得中野很适合平面设计这个专业,还问他要不要试试呢?

信息可视化是什么?来看看日本设计大牛是怎么做的!

因此在报考志愿里,中野写下了武藏野美术大学和多摩美术大学。如果按照主角光环的剧本,这个时候,中野老师应该就已经平步青云,从此走上人生巅峰了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

然而现实却是,在第一次考试中,他却落榜了。作为“差生”的他,周围都是什么样的人呢?插画、摄影甚至编程,这样的拥有特殊技能的人几乎占据了大多数。在这样的环境里,中野老师当时却并没有什么特别的特长,对于不善于表达的他,在当时感到很无奈。

信息可视化是什么?来看看日本设计大牛是怎么做的!

那时的他一直在问自己。我的特长是什么?我的兴趣点是什么?有次散步的机会,他终于得到了灵感。那就是虽然自己没办法做出特别厉害的作品,但踏踏实实的绘制图形却是可行的。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当意识到了这一点之后,于是在一次研究宋体(明朝体)的过程中,就产生了做一本书去记录这段悠久历史的想法。他想通过探索历史的过程,去寻找属于自己的兴趣点。

信息可视化是什么?来看看日本设计大牛是怎么做的!

当从宏观角度看待一段历史的进程,通过推演,人们总能或多或少看到未来的一些可能性。通过研究书籍的过去,会发现最初的书籍形态起源与泥板,也就是说,从人类发展初期就存在了书的概念。

信息可视化是什么?来看看日本设计大牛是怎么做的!

就是这样一步步的研究,信息的宏观样貌,如果从宏观的视角来看待的话,会发现人们通常能够了解到的信息其实并不多,当从更高的维度看到相同的事件时,是能够展现出事物本质的。所以在之后做视觉图表作品时,中野就开始有意识的展现从整体到局部之间的相互对照。

我们接下来一起看看中野老师还有哪些精彩的作品吧!

以信息结构和文章脉络的可视化设计为主题,探索各个领域中平面设计的可能性。

信息可视化是什么?来看看日本设计大牛是怎么做的!

△ 这是中野老师从 2012 年到 2013 年期间,为建筑杂志设计的封面,因为是月刊,所以在两年时间里,一共做了 24 本。

杂志的内容主要和灾害相关,比如第一版,是关于日本东北地区的一些内容、第二本是关于海啸的内容,除此之外,还有关于建筑产业、能源、以及关于福岛灾难重建等问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

每本杂志都有各自的特征,数据来源主要由政府以及大学中的一些数据研究者们提供。当接收到这些信息之后,中野老师需要甄别哪些内容是需要保留的,哪些是需要删减的。在这个过程中,不断的思考”怎样才能将这些数据清晰的传达给读者”这类问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览是 2018 的时候,中野老师在印刷博物馆策划的一个天文学与印刷的展览 。主要展览的是 15 世纪到 18 世纪的书籍和印刷物。希望能够以全新的视角,向大家展现天文学与印刷之间的关系。画面中左上角的同心圆,是哥白尼提出的太阳中心说,从此人们开始以全新的视野观察这个世界。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这是这个展览的宣传单页,博物馆的宣传单页通常都是 A4 尺寸的,最初老师设计了八张相同的传单页面。

信息可视化是什么?来看看日本设计大牛是怎么做的!

随后最终通过局部特写的方式,构建出了八种不同的传单样式。如果全部收集完全,可以拼接成完成了一个大画面。

从天文学和印刷术之间的关系开始发展联想,结合了天文学,哲学、数学等等一些学科,统一展现出了宇宙的这个概念。老师分别从三个角度思考这个问题,分别是“秩序”“整合”“规格”。

信息可视化是什么?来看看日本设计大牛是怎么做的!

如果把文字去掉,我们会看到这样一张插图,我们来分析一下为什么需要做成这个样子。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这里的横轴代表着时间,竖轴代表着规模,画面顶部展现的是关于宇宙的图像,而下方主要以人的视角,展现了地球的图像。学术本身是建立在各种各样的理论之上,前人建立起的理论,可能会被后来者推翻重建,逐步形成了我们今天的天文学。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展览中会展示各种各样的宇宙学理论体系,通过各种各样的宇宙论,去展现这个世界的演变。让人们随着时间的进程,在各种学术体系中了解了文明的变迁,通过图像让观赏者提前在脑海中呈现出视觉化的内容。也就是说,我们从看到这个宣传画面的那一刻起,这个展览的内容就已经开始了。

信息可视化是什么?来看看日本设计大牛是怎么做的!

这个展会的名字叫《改变世界的信息》,画面长度有 12 米左右,这个画面是展会的入口处。从数据我们可以看到,受到贫困和灾难的人群,占据着百分之七十的人群。

信息可视化是什么?来看看日本设计大牛是怎么做的!

中野老师针对这一点,将世界各个地区以及不同的国家,把其受灾的程度和数据都集中到了一块。分别是水资源、粮食、能源、医疗、住房、交通、识字率、通讯等问题。一共有一百多个国家。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过这个图,我们会发现这其中每一个问题都是相互牵制,相互影响的。比如说水的问题就和所有的内容都有关系。整个图标并非是想要解决某些问题,而是希望人们在看到它们时,能够从中发现到一些问题。

信息可视化是什么?来看看日本设计大牛是怎么做的!

通过人们的议论,去碰撞出全新的思考。由此可以知道,图表设计其实是对社会非常有帮助的设计领域。



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

截屏2021-05-13 上午11.41.03.png



文章来源:花瓣   作者:研习社

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

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



如何通过设计驱动产品的增长设计

雪涛

在《增长黑客》中有这样一句话“If you are not growing,then you are dying!”(如果企业不在增长,那么就在衰亡!),这话也适用于个人。人生毕竟不像企业,是非成败,似乎都无可厚非,所以我们常常放飞自我偏离轨道,以至于有时候不得不提醒自己“不在成长,就在消亡”。我们来人间一趟,有没有全力以赴想要成全的事?可以反复尝试、不断接近吗?所以,我认为,增长它是一个永恒的话题,我们在学生时代读书的时候希望自己的分数与排名能增长,在企业上班工作的时候,我们希望我们的收入能增长,当我们创业的时候,我们希望自己企业的业绩能增长,增长是长期伴随着我们生活的一个指数。

《在大数据时代》一书中提出了“量化一切”的概念,即一切都可以用数据来衡量。其实,在“数字敏感”的互联网时代,电商平台“销量”、电影票房、百大up主、文章阅读10w+等等,我们其实早已在不知不觉中用数据丈量着一切。

增长设计这个概念好像是最近几年才广为互联网从业人员才熟知,成为每个互联网er所讨论的热门话题,因为在过去的十多年,是中国经济数字化腾飞发展的十年,我们90后更是亲身见证着互联网企业的成长,“眼见他起高楼,眼见他宴宾客,眼见他楼塌了”。

我们关于用户增长也是在不断的迭代的,从最早期的雏形AIDA法则,由路易斯提出推销模式,西方推销学中一个重要的公式,AIDA法则也称“爱达”公式,然后到2007年的facebook,提出这个概念,即,我们知道我们的广告费是浪费掉了,但是我不知道是哪一半,于是,精于广告投放的facebook便通过科学的,可复制性,可以被检测的广告投放可以帮助于其他企业做好用户增长,然后便是我们知道后期比较流行的AARRR海盗模型这样更加精细的用户增长策略.


2.1 关于增长设计


在近几年我们经历了从互联网市场在基本火热到冷静,尤其是随着移动互联网的流量红利开始消失,“增长黑客”与“用户增长”这两个概念开始慢慢火爆开来,我们国内互联网企业互联网从业人员也开始重视用户增长。

企业的增长,也可以理解为企业的成长,所以企业能否保持增长,是老板和员工都比较关心的一件事,因为企业只有保持一定幅度的增长,才能保证大家在未来继续过上好日子。以前传统企业做增长可能就是通过赞助冠名一个很火的电视栏目,或者请个明星作为企业产品代言人,都可以在一定时期内来吸引消费者的关注,实现快速增长。但是这几年我们可能也发现了,传统意义上的营销手段似乎不太管用了。因为以前我们从在电视和传统纸媒上获取信息的用户都慢慢转移到朋友圈、B站、抖音等互联网头部平台,过去的传统营销三板斧来拉动企业业绩的增长,已经变得越来越难。

所以我们发现,在2017 年可口可乐宣布取消 CMO(首席营销官),由 CGO(首席增长官)替代,以增长为中心的各个职位在招聘网站上也如雨后春笋一般涌出。

看到这里,这些好像和我们从事Ui视觉工作的好像关系并不是很大,而恰恰相反,我认为用户增长设计并不是一套虚无缥缈的说辞,而是一种能够与团队协助的工作形式,在一个产品团队中,我们每一个人都应该了解一些关于用户增长设计方面的知识。

我们所知道的产品是为用户在服务,是为了满足用户的实际的需求,所以我们所理解的增长设计便是产品创造了价值,而增长设计是将产品的价值放大传递,让更多的人去发现。


2.20 关于以用户为中心的增长设计


而我们体验设计师更多关注在做产品增长设计的时候尽可能的不去伤害到用户,以同理心去思考做增长设计的策略。这个我们会称为用户增长设计(User Growth Design),即简称UGD,简单的理解为用户增长设计要以用户为中心,以用户的角度和思维方式去想问题,去做用户的增长。

让产品简单到“傻瓜”也能操作,是乔布斯和张小龙做产品的核心理念。坐拥10亿用户的微信之父张小龙说过,产品经理要有傻瓜心态。“我要经过5~10分钟的酝酿才能达到傻瓜状态,马化腾需要1分钟,功力最深的是乔布斯,传说他能在专家和傻瓜之间随意切换,来去自如,即所谓的Stayfoolish。”

当然,此傻瓜不是彼傻瓜,而是一种跳出当下局限的外行心态,是站在普通用户的角度是操作、带有同理心去思考产品,这样才会更容易发现产品本质上的问题和抓住真痛点,找到影响用户增长的关键因素。

2.30 设计师该如何去做设计增长


我们设计师要想所做的用户增长肯定不是去街上发个小广告,去地铁上拿着产品的下载二维码让用户去下载我们的产品,我们设计师着手的设计增长范围还是从用户体验去入手的,所以我们在考虑提升产品数据的时候也需要考虑用户的使用体验,例如,公司现在想要提升产品的成交额,我们设计师肯定不会提出的方案肯定不会是让公司去请个明星代言来吸引用户下单之类的,我们设计事所要思考的是如何提升用户在下单过程中的流畅感,如何缩短路径,让用户能方便成交,所以我们设计师的增长观一定是在产品现有的基础上,提升用户的体验,尽量让用户有良好的体验下来提升用户的数据增长。


2.40 什么样的产品适合做增长设计


那我们产品都是来自五花八门的类目,那什么样的产品适合做增长或者以什么样的形式做增长合适呢?在增长设计概念最火热的几年,我听过这样的一个有趣的故事,一个做服务于医疗聚合类的设计同学去给面试官讲他们这个产品的怎么做用户增长的,其中讲到他们通过如何通过增长策略去拉动用户增长,如何留住用户,面试官听完,反问了一句,那们这个增长设计的策略是通过给城市投病毒导致那么多人生病的吗?

所以,世间万物的增长都需要条件,用户的增长需要内在的动力,不能浮于表面,需要认清内在动力这样才能有助我们找到增长的关键因素,从而合理有针对性的部署资源和策略。


(1)C端产品如何做增长设计


C 端的产品,一般是个人消费场景,单一决策购买,所以我们需要给用户持续使用产品的动力,即产品可以持续给用户提供其他产品无法提供的价值。用户在使用产品获得价值提升,例如获得友情、愉快、知识、优惠、收入等等,用户才会继续使用,甚至会给身边的好友去推荐。

例如我们的国民软件微信,拉进了人与人之间的距离,带来了免费通话和朋友圈和这个门槛最低的社交网络,我们可以通过朋友圈去展示和表达,我们微信上的各种”相亲相爱的一家人“”多少级的同学“群成为我们去维系友情亲情的宝地,现在我们通过扫一扫便可以完成生活中很多事情,都为用户提供了极大的便利,微信独有的社交属性促成了巨大的网状人际关系,让用户自发的去加入,并难以离开。在2020年3月底QuestMobile提供的数据来看,微信活跃用户180日留存率为95.5%,位于常用APP用户留存率排行的首位,拥有如此高的用户长期留存,可见微信为用户提供的价值之大。

所以C端的产品只有能为用户提供价值,用户才会选择留下,甚至会主动传播为产品带来更多有价值的用户,这才是最理想的、良性的用户增长。


(2)B端产品如何做增长设计


B端的产品和C端的产品不同,B端的产品往往是做决策的过程比较复杂,往往能决定购买的人并不是产品的使用者,他们只是负责采购的,另外有的采购量比较大的企业往往和销售的人脉关系挂钩,

但是阿里的团队通过不断的深耕B端的市场发现,虽然 To B 增长很难,但在中小企业的增长很有机会。一般的中小企业,使用的人数不是特别多,一般都是5人以内的使用者,这类企业能决定购买和使用者是同一类的人,所以它会与我们C端的购买决策的路径比较相似。另外中小企业的数量也是比较多,所以这块的市场还是有挖掘空间的。


2.50 什么是用户的增长设计


用户增长设计设计其实就是从吸引新用户的注意力到产品能给用户一些价值最后用户认可我们产品的过程,这是一个从短期流量到长效流量转化的过程,


(1)用户的吸引力(获客)


我们一般获取用户的方式最直接便是去投放广或者软文推广,用户通过点击下载APP来访问我们的产品界面,在我们的产品中寻找自己想要的信息,一直周而复始,直到找到自己想要的信息,反正,产品的内容没能吸引用户,这时候,用户便会退出产品,也就是用户的流失。


在这个过程中,一直围绕着三个比较关键的因素“使用者(人)”、“使用场景”、“用户行为”,我们需要明确用户的使用路径中,产生行为的原因和流失的因素。


(2)用户的注意力(激活)


我们在设计中怎么通过设计策略去避免用户的流失呢?我们需要去引导用户的注意力,让用户在使用过程中对我们产品有认可,都可以有效的去避免用户的流失,


·如何引导用户的注意力


我们怎么去衡量我们的产品是否吸引了用户的注意力呢?根据Alibaba Design Ucan 2020所提出的一个公式。用户的注意力=心理需求*视线所及,用户的注意力是用户的心里所想和目标所看到的交汇,当产品给用户看到的信息是用户想要的东西的时候,这时候,用户便会点击进入,所以通常曝光率则可以验证用户在产品使用中的注意力。


例如,我们在浏览商品的时候,我们的目标首先关注的商品的品牌然后是名称和价格,我们用户心里想的可能是哪个品牌会比较可靠,哪个的价值比较低,有没有我常用的品牌,视线所及便是我们展现给用户的列表,当用户看到某品牌有我喜欢的明星的代言或者喜欢明星的同款,这便是用户所想的。当满足这些前置条件,用户便会产生点击行为。


·如何引导用户认同我们的产品


我们想要用户去认可我们产品的价值,我们需要了解用户,了解用户可以从三个关键因素去入手,1.用户群体,2.认同目标,3.说服用户



例如当新用户进去拼多多后,界面会弹出新人的专享红包,引导新人用户的点击,下一个页面便是弹出手气最佳的红包,最后展示页面出现现在限时下单全额度返利的banner,每一个页面的场景关联度极强。一步一步的去说服用户去下单、有效的提升用户点击率。从而提升新用户的首次下单的增长。


(3)用户的安全感(留存)


张小龙曾提出一个产品观叫“用完即走”,与我们常常提到的“留存”“粘性”的原则是背道而驰的,其实我理解的用完即走便是产品其实不想让用户离开,我们的产品能给用户一个确定性的答案,无论是在产品的易用性还是在产品体验层面,都可以保持高效,让用户在使用过程中有愉悦感,让用户迁移成本提升,便是用完即走后的恋恋不忘、

例如早期的打车软件和团购软件,那时候用户在网上打车和线上支付习惯还没养成,对产品的模式的认同度还不够,所以,那时候打车软件和团购软件给予人的确定的心理印象便是,你在我这里支付购买会便宜。培养用户的使用习惯,给用户一个用了该软件确实会便宜的心理安全感,从而实现了用户的留存。

我们平时准备出门或者去一些陌生的地方,我们都会使用高德地图或者百度地图看下路上是否堵车,我们这次出行走哪条路需要用时多久,以方便我们去选择合适自己的出行方式。

我们设计师在做设计的时候也是一样的,我们通过之前的数据,也可以分析出产品一些不一样的改版点,我们能把一些抽象的问题具体化,能更好的去度量我们的设计,所以设计师在学习如何增长设计前,我们需要了解一些关于产品的数据知识,我们分析一款产品的时候,通过比较关注的点是用户、需求和数据。

当我们的产品上线或者上新某一个功能的时候,往往用户的意见反馈代表的是个体的声音,而数据是用户对于产品的客观反馈,数据的变化能代表用户对产品的态度,所以,设计师要是能读一些数据报表,那么我们可以从体验设计师角度去给产品迭代的时候能提出不一样的观点,辅助我们所服务企业的app的成长。


3.10 数据是如何产生的


数据如如何产生的,比较深的知识是不需要我们去深挖的,我们日常接触到数据反馈都是来自产品的“埋点”,而埋点数据的获取通常通过第三方的工具进行获取,比较常见的数据分析企业有友盟、七麦、GrowingIO等,这些工具可以在我们想要的页面或者功能按钮上添加监听功能,当条件被满足的时候,便会完成一次数据的统计,埋点需要提供两个关键的信息:一是需要埋点的内容,二是埋点的名称,这可以方便我们以后快速的找到相关的数据,当埋点完成后,产品上线就会检测用户的行为动作,当用户进入我们的“埋点"界面或者功能的时候,后台系统就会上报数据,我们就会收到数据反馈,但是在现实工作的场景可能比这个要复杂的多,我们可以根据具体的场景在灵活应变。

3.20 设计师为什么要了解数据


我们对一款的产品的优化可能有很多层面的思考,但是我们去对用户数据的分析则是对当前产品最有价值的参考点,数据的采集与分析无论是对产品的规划还是对设计师下一步的工作开展都是比较重要的指标,因为用户可能会因为一些客观的原因可能不会说出自己内心的真心话。

例如我们去面试的时候,在一番精心的准备和问答之后,我们在面试结束之后,如果去问面试官“您觉得我这样面试表现怎样”,有的面试官可能会就你这次的变现去做出比较切合实际的点评或者建议,但是有可能你那场面试因为外部的原因会失常发挥,但有的面试官可能会照顾你的面子,可能会说表现的还可以之类的话来安慰你,但是面试官最后会不会录用你这点他肯定不会作假,所以有时候我们在分析用户行为及操作路径的时候,一些用户的数据表现便是我们对产品优化的关键因素。

我们通常将数据的指标分为三大类:1.用户相关指标、2.用户行为指标、3.业务数据指标



3.30 用户相关指标


我们常见的与用户相关的指数有像DAU、MAU、新增人数等,我们需要了解的数据为1.用户的活跃指数,2.用户的留存率,3.人均使用时长。

3.31 用户的活跃指数


在互联网行业里,通常我们会通过拉新把客户引过来,但是经过一段时间可能就会有一部分客户逐渐流失了。那些留下来的人或者是经常回访我们公司网站 / App 的人就称为留存。

在一段时间内,对某个网站 / App 等有过任意行为的用户,称之为这个网站 / App 这段时间的活跃用户,这个任意行为可以是访问网站、打开 App 等等。

我们常见的用户指标有「日活」 即日活跃用户量,缩写为DAU,,缩「周活」 即周活跃用户量,缩写为WAU,「月活」 即月活跃用户量,缩写为MAU。


3.32 用户的留存率


留存率是最能反映一个产品是否对用户有吸引力的指标,一般的留存率是基于某个时间段而得出的结论,例如我们常常听说的次日留存和七日留存率。

次日的留存率计算公式为:当天拉新的用户中,次日留存率=在注册的第二天继续登录/第一天拉新用户的总数量

七日留存率的计算公式为:在第一天拉进的用户中,七日留存率=在注册七天后还有登录的用户数/第一天拉新的用户总数。




3.33 人均使用时长


人均使用时长通常是对内容和游戏类的参考价值的很大,它可衡量我们产品是否做的比较优秀,能不能留住用户的注意力。如果我们做的是工具类的产品,例如计算机之类的,这个时候的人均使用比较长,说明我们的产品可能出现了问题,无法让用户在短时间内得到他想要结果。

人均使用时长的计算公式为:人均使用时长= 总活跃时长 /总活跃用户数。


3.40 用户行为指标


用户行为相关常见的指数有用户的页面访问量率、转化率等指标。



3.41 页面访问量率


我们对页面的访问流量的定义分为两种,一种是PV(page View)即页面浏览量,另外一UV(UniqueVisitor):独立访客数。

PV(page View)也就是页面浏览量,即你每观看一次就会涨一个PV,类似于B站的播放量,我们每个账户只要点开观看一次视频,播放量就会增长一次,关闭在打开,也会在增长一次,所以我们每播放一次,便会涨一个PV值。

UV(UniqueVisitor):也就是独立访客数,类似于腾讯视频和优酷的播放量,每个账户点进去播放只会增长一个播放量,你再关闭再点进去也只涨一个VU值。在正常情况下是依靠浏览器的cookies来确定访客是否为独立访客之前是否访问过该页面。


(1) UV的类别


在统计数据的过程中, 我们会将不同的点击率来划分,从而更好的可以来统计数据来分析。我们将UV分为:1.

曝光UV ,2.点击UV , 3.意向UV。



·曝光UV


曝光UV即曝光在视野内的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,当我在当前的列表停留2-3秒的时候,都可以算一次曝光UV。


·点击UV


点击UV即有点击行为的用户数,例如我们在京东或者天猫去搜索某个产品进入了搜索的feed列表页的时候,我点击某个商品进去了详情页,那么就可以算一个有效的点击UV。


·意向UV


意向UV即进入意向页面的用户数,例如我现在想去买一个Macbookpro, 我在B站看完关于Macbookpro,的评测视频,在百度看完Macbookpro的参数后,我在去天猫和京东去搜索进行比价的时候这个时候我就属于意向UV,在举个我们比价常见的例子,当我们在百度搜索宝马的时候,排在前面的经常是各种五花八门的关于车的广告,在百度看来,我们便是想去买车的意向UV,是有机会促成交易的。

所以我们看用户对我们的产品或者活动是否感兴趣,便可以看看PV和VU的数据如何。

3.42 页面的转化率


页面的转化率是任何一个企业都比较关心的数据为,我们的任何运营活动和产品的推广都是为了转化用户的时间或者金钱,我们费尽心思的用户点击进来,也都是为了转化用户的购买。

用户的注册、下单、登录和复购都可以用转化率来进行量化,我们根据产品不同的情况来制定转化率的指标。通常我们计算转化率:产生购买行为的户人数/总的用户访客* 100%。例如我们这个页面访问人数是1000,接下来有100人进行了购买的行动,那么我们页面转化率为:100/1000*100%=10%的转化率。


(1)意向用户转化率


意向用户转化率,即意向Intention Click Value Rate,简称意向UV CVR,是通过直观科学的角度去评判需求是否达到了预期的效果,意向用户转化率一般用来衡量用户访购行为,是可以通过该指数去发现问题中隐藏的核心问题的依据,非意向UV的转化流失有很多不确定因素,而意向UV的流失往往跟产品体验有更大关联性,通常计算的方法为:产生购买行为的客户人数/所有到达店铺的意向访人数* 100%。

例如像民宿和酒店类的APP的核心转化率是客房的预定量,像B站和西瓜的核心转换率则是用户评论和点赞。


3.43  页面的点击率与意向率


通常我们在曝光UV和点击UV直接会有一个点击率的关系,Click-thougphRate,简写为CTR,即点击数占展示次数的百分比,通常的计算形式为,点击率=点击次数/页面访问次数,

在曝光UV与意向UV之前也有一个比例关系,叫意向率,即意向UV占曝光UV的比例关系,通常用以衡量运营活动或者功能的导流能力,主要用来看用户的质量,通常的计算方式是意向率=意向UV/占曝光UV。

3.43 跳出率


跳出率是在设计用的比较少的一个数据,一般是运营人员会关心的数据指标。指的是用户通过搜索点击进入该商品的详情页,只是简单的浏览一遍就关掉了页面,在该页面没有任何的活动行为我们称之为一次跳出行为。

跳出率的计算公式为:页面的跳出率=一个页面离开的次数/总的访问次数*100%


3.50 业务数据指标


我们对业务的数据指标可以将他们分为两类:一是免费供用户使用的产品,例如微信、B站等产品,我们更多的关注用户的使用时长和停留时长。二是需要用户有购买行为产品,例如淘宝、拼多多和京东之类的,这里的产品我们更多关注的是产品的GMV和ARPU等指数。



3.51 GMV


Gross merchandise Volume,简称为GMV,指标通常称为网站成交金额,属于电商平台企业成交类指标,主要指拍下订单的总金额,包含付款和未付款两部分。

GMV反映的是电商平台直观的成绩,但在电商行业,GMV包括拍下未支付的订单金额,GMV=销售额+取消订单金额+拒收订单金额+退货订单金额,

3.52 ARPU


ARPU是 “The average revenue per user” 的缩写,译为每用户平均收入或平均每用户收入。也可以理解为单个用户的价值。

通常的ARPU用来反映这个产品在这段时间内从单个用户获得的利润和收益,通常用来计算用户生命周期价值的作用:它是 App 成功的指标,是用户忠诚度的反应,是预测用户增长的工具。简单来说,用户生命周期价值是驱动移动市场预算的动力。它会告诉你每个用户值多少钱;你应该花多少成本去获取一个用户。

ARPU的计算公式为:ARPU=在指定时期总收入/指定时期的付费用户的总数*100%。

3.53 付费率


付费率是用来衡量用户转化行为的指标,通常所有用户和付费用户之间的一个转化比率。我们前面说到的ARPU值是付费用户的人数来计算的,我们通常会把付费率和ARPU值放在一起分析。一般该产品的付费率越高,这说明用户对该产品的认可度越高。

我们的产品每个阶段的增长指标在不同阶段会有不同的定义。每个时期所需要注意的事项也是不一样的,我们对基础的数据有了认识和了解之后,我们更重要的事情就是怎么去实践在我们自己的产品中。


4.10 提升列表CTR的设计策略


我们产品中很多时候,我们的设计做的是否合理,我们的商品类别该怎么去排序,都和CTR的数据去挂钩,产品中的很多核心的数据也需要CTR等基础数据去做支撑,那么我们一起来复盘下提升列表的CTR策略点:1.增加影响用户决策的信息,2.梳理列表的信息层级,3.新增适当的交互,4.标题优化(非设计角度)

4.11 增加影响用户决策的信息


平时我们在逛街的时候一定会发现这样的场景,当一条街上开了很多店的时候,每个店铺一定会派出自己店铺长相比较甜美的店员或者比较擅长口播的店员在自己店前面进行“吆喝”,比较小的店铺就算人手不足也会用音箱去反复播放店内的促销信息,这些策略都是为了在众多的店铺中去吸引过往行人的注意力。

那么我们做设计也是一样的原理,我们在在做列表时候,想要提升用户击我们的列表进入详情页的意愿,首先我们需要了解我们的用户对什么样的信息比较感兴趣,我们将它整理并放出来,从而达到吸引用户来点击。


4.12 梳理列表的信息层级


我们平时去逛超市的时候,我们发现每个类目的货架前都会摆放特价或者促销力度比较的商品的合集,理货员会将他们放在一起,这样,对于价格敏感的会直接过去挑选。

我们在梳理列表的信息也是一样的,我们需要将用户比较关注的信息或者产品的卖点信息层级抬高,减少用户在挑选时候的跳出率。


4.13 新增适当的交互


我们想提升列表的点击率也可以从另外一个角度是入口,就是想办法让用户在最短时间内可以看到更多的信息列表,让质变产生量变,这一点我们可以从改进交互的操作入手,让让用户看的比较多的列表交互。


(1)十字交互


因为这种形式的设计他占用的位置比较少,且只需用用户通过手指左右去滑动,便可以查看更多的信息列表或者产品列表。

(2)随机的列表


在交互层面另外一个可以让用户看的更多的设计形式便是点击就换一批,这样可以让用户感受到我每次点击过后的详情列表和产品列表都是不一样的,这样每一次点击都会有新的“多巴胺”去刺激用户再次去点击“换一批”按钮,从而达到让用户看到更多的列表,以质变产生量变。

4.14 标题优化(非设计角度)


(1)美化标题


我们经常上网经常浏览新闻的朋友一定知道有个词叫做“标题党”,简单的来说就是标题经常以夸张、“故弄玄虚”的方式出现,UC是众多平台中运用标题“最好的楷模”,所以网民也会亲切的称之“UC震惊部”,所以一个列表流的标题对点击量的影响也是比较大的。


(2)字符限制


另外一个角度就是当标题显示不全的时候,用户对信息传递无法感知的时候, 我们取再好的标题也是没用的,也许关键信息会被省略掉,所以我们在设计标题的时候,也可以限制标题可输入的字数,避免文字的缩略显示,让用户可以完全看清标题的意思,提升用户的点击欲望。


4.20 上新功能如何提升CTR


我们产品在上新一个新功能的时候,我i们如何布局能去让用户从熟悉到使用我们的新功能都是需要一个过程的,我们需要慢慢的去引导用户,我们可以从一下策略去去入手:1.替换用户习惯的功能,2.把控出现时间,3.用动态吸引注意力,4.合理划分功能层级.、

4.21 替换用户习惯点击的功能(按钮)


我们每个都会有自己的习惯性的动作,例如我们习惯左手写字,右手拿筷子吃饭,我们每天回家习惯性的走同一条路,这些都是我们下意识的动作,是不需要经过思考的意识,那我们在软件的使用中,也会有这样的习惯,例如,通常底Tap栏的图标第一个通常是首页或者软件的主要功能,而最后一个通常会放个人中心,这也是我们在软件使用的中的共识,所以我们可以利用人下意识的习惯将常用的功能与新功能去替换,用户便会在下意识的惯性中去点错,例如网易云音乐为了推广“云村”功能,便会将以前在最后一个的“我的”给替换成“云村,会导致很多用户的下意识的动作点错而提升新上的功能”云村“的点击率。

4.22 把控出现时间


我们在下班回家的路上,当我路过一些小吃摊的时候会觉得街边的小吃特别想吃,也特别有购买的欲望,这是为什么呢?因为我们在劳累的工作了,下班的时间也正是需要吃饭的时候,所以这个时候我们会看到街边摊的小吃特别想吃,也特别想买,因为他摆摊的时间点和位置都恰好满足了我们的需求,所以我们转换到界面里也是一样的,我们想要用户去分享一篇文章的时候,一定要等看用户在读的时候,然后在出现分享功能,这个时候如果用户读到比较精彩的内容,便会和朋友分享这篇文章,例如用户在进入商品也可以浏览的时候,我们这个时候可以出现满减的红包,这都是在适当的时候给与用户想要的,把控好了出现的时间。


4.23 用动态吸引注意力


在一些静态的元素中,突然有一个元素动起来,那么,那个动起来肯定是更吸引人的眼球的,所以我们在电商的页面页面中,会经常看到一些会动的icon和一些会动的胶囊导航,我能在付款页面也可以看到一些立即付款的按钮会忽大忽小的动起来,这都是为了吸引我们的注意力,引起我们去关注它的存在。


4.24 合理划分功能层级


我们做设计排版的时候一定都听说过这样的一句话,就是你什么都想突出,结果你却什么都没有突出,这句话的意思是我们在做设计的时候一定要注意运用对比,将次要元素与主要功能的要做好主次的对比,这样的层次对比才有利于用户的阅读,可以分清主次。

我们在ui设计中也是一样的,要想用户快速的找到想要的功能,高频使用的功能和不常用的功能要做好强弱的设计区分,这样才能让用户一眼能看到自己想找的功能,例如美团和支付宝,都是将用户高频的操作放大并放置于顶部比较显眼的位置,方便用户去操作。


4.25 合理使用弹窗功能


我们都知道,弹窗在软件中属于级别最高的通知,就相当于学校里面的校园广告,只要打开软件的人,基本都可以看到,所以我们想推广一个新功能的时候,使用弹窗是流量比较大的,但是也是比较打扰用户的,我们需要看情况而定。

4.30 提升人均使用时长的策略


软件的人均使用时长代表用户对我们人均软件关注度和我们给予用户的价值,当人均使用时长在增长的时候,说明我们的产品正在良性的增长,在提升人均使用时长我们可以从以下几个策略入手:1.让用户忘记时间,2.弱化用户的负面情绪,3.多变的板式消除疲劳,4.激发用户的好奇心



4.31 让用户忘记时间


我们放假在家打游戏的时候,总有这样的感觉,就是打着打着不知不知的天就黑了,或者打着打着天就亮了,感觉时间过的非常快,但是我们需要注意一个细节就是一般打游戏的时候,游戏是会将顶部的时间状态给隐去的,是为了给用户更好的沉浸式的体验,正因为我们看不到时间,所以便会忘记这件事情,一局一局的打着游戏。例如早期的抖音,在进去界面后变会隐藏时间条,让用户在刷抖音的过程中忽略时间,所以 ,我们想要提升人均使用时长,在一些娱乐性的产品或者模式下,可以尝试着隐藏时间条,给予用户更沉浸式的体验,这样用户便会忽略时间这件事情。

4.32 弱化用户的负面情绪


我们在饭店高峰期去餐厅吃饭的时候,一般会遇到餐厅客满需要排队拿号的情况,海底捞的做法是给排队的客户免费的小零食,外界对海底捞的服务评价可以用16个字来概括:有求必应,无微不至,嘘寒问暖,小恩小惠,中国有古话是这样说的“伸手不打笑脸人”,也许我们在就餐中会有各种不满,但是海底捞都可以用他的服务去抵消客户的负面情绪。所以,我们一般在餐厅催菜是时候,不管菜做没有,服务员都会对我们说菜正在做,都是抵消我们等待中的负面情绪,让客户不会在等待的过程中离开或者退菜。

我们在做界面中也是一样的道理,我们的APP在实际运行过程中肯定也会遇到各式各样异常问题,我们做设计的时候要为用户提前给考虑进去,为用户提供贴心、无微不至的服务。例如我们用户可能在使用过程中可能手机信号不好,有的页面加载不出来,我们需要设计有趣的加载动画和页面加载不出来的时候的占位符,告诉用户我们的APP还是在正常的运行中,不是宕机了。


4.33 多变的板式消除疲劳


我们都开车或者坐车经过高速公路,我们会发现高速公路在一条直道后马上会迎来一个弯道,我们小学的时候都学过,两点之间直线最短,那么高速公路为了节省司机开车的时候,能否直接全部设计成直线的呢?答案是不可以,除了有些地方路线的规划外,其次安全因素也很重要,经科学家研究表明在笔直的公路长期行驶很容易导致驾驶员发生事故,这是因为在笔直的高速上行驶,驾驶员的神经长时间处于放松状态,容易麻痹大意,如果适当的时候来个转弯会提醒驾驶员注意力集中,减速行驶,从而减少事故发生率。其次从心理学角度来说,驾驶员一旦在笔直的高速上行驶,容易产生飙车行为,谁都会想猛踩油门来追逐刺激,如果适当时候来个弯路,能够抑制飙车行为的发生,从而减少故事发生率。

所以我们在设计板式布局的时候,让用户盯着单一的布局形式,用户很容易感觉到疲劳,从而会在页面跳出。我们为了避免这样的情况发生,让用户在浏览过程中能感受到板式的变化,而不是滑到底都是一样,单一且无趣,很容易疲劳,我们设计者需要在单一的板式寻求不一样的解决方案。


4.34 激发用户的好奇心


我们都比较喜欢看悬疑剧的一个重要的因素是因为情节一环扣一环,线索和剧情结合的比较紧密,剧情比较扣人心弦,能激发我们对真相的探索欲,这才是我们喜欢追悬疑剧的原因之一。

所有,我们做设计时候也需要给予线索让用户去探索,让用户感受到内容源的充沛,用户才会兴趣去向下探索,从而提升用户的使用时长,所以,大部分的APP在最后一个板式都会做成瀑布流的形式,因为他在滑动的时候会不断给予用户新的提示,告诉用户你不断往下滑,都会有新的内容。

4.40 提升留存率的策略


留存率是用于反映产品的的运营情况的统计指标,我们产品的留存越高,说明我们产品很活跃,真正稳步的向前迈进,那我们在优化留存的策略可以从以下几个入手:1.优化初次上手体验,2. 减轻用户的使用负担,用内容留住用户,3.完善奖励机制,4.增加沉没成本

4.41 优化初次上手体验


我们现在年轻人由于生活的节奏越来越快,在使用APP的时间往往都是碎片化的,用户的持续注意力会越来越短,一个产品在初次上手的难度越高,能劝退的用户就越多,用户在上手一款产品的时候,首先会关注界面是否易于上手,能不能快速找到自己想要的功能,例如在登录的时候设计验证码登录或者第三方的快捷登录,在新用户初次进去的时候,对新功能有使用说明,用户在初次体验是很重要,有了第一次的良好体验印象,用户才会有第二次第三次的回访率,这也是提升留存的第一步。



4.42 减轻用户的使用负担,用内容留住用户


减轻用户的使用负担是指在核心功能尽量能让用户能用最短的时间去完成,让用户感受到产品对用户是有价值的,做到用完即走,例如,微信就算其他功能做在有趣,上手在简单,它的核心聊天功能做的不好,用户发一条要等很久, 我相信也不会有人去选择用它去聊天,早期的米聊,其他的功能和想法都是比较超前的,微信也是根据米聊的模式改进,但是早期米聊在即时通信领域不是很擅长,在发送消息的即时性上欠缺,导致失了先手,在手机聊天领域输了给微信。

在产品做好了核心功能,能够吸引一批忠实的种子用户,这样我们在一些附加功能,才是锦上添花,例如现在无论什么产品都喜欢做社区功能,就是希望用内容去留住用户的注意力,附加功能一般都是利用人性的七宗罪去设计布局的(傲慢、嫉妒、愤怒、懒惰、贪婪、淫欲和暴食。)例如微信的摇一摇是利用人想认识新的异性,扩大好友圈,汽车APP的社区功能会经常发一些车站的车模,来吸引精准用户的注意力,这些都可以提升用户再次来使用我们的产品。


4.43 完善奖励机制


我们在工作中,一定遇到这样的情况,就是公司会设置奖励机制,当员工的绩效达到一定的程度的时候,公司会给予员工一定的奖励,反正则会触发惩罚机制,这会使得员工为了完成目标而努力工作,从而达到目标得到的奖励会触发员工的“爽点”。

这是因为这样,所以越来越多的产品开始做自己的会员体系,在加入积分商城,最后在来个签到奖励,简单来讲,就是通过给予用户一些“爽”的东西,来让用户帮我们的产品达成一些我们需要的商业目标,其中最主要的目的就是用户的留存率.

4.44  增加沉没成本


我们在去理发店去理发或者在去网吧上网的时候,他们都会希望我们去办理一张会员卡,在往里面存在钱,有的是存多少送多少,当我们一但存钱办理会员后,我们会惦记着我们有类似的消费的时候,都会想起我在那家店里会员还有余额,会员里的余额就是们迁移的成本。

所以共享单车会推出月卡服务,视频会员会有连续包月或者年卡套餐,甚至我们点外卖开通会员也能享受大额的折扣,让用户感觉占便宜的感觉,这些都是为了锁定用户,增加用户的迁移成本,来达到让用户再次来我们产品来消费,从而提升用户的留存率。

4.50 提升产品活跃度发力点


产品的活跃度也可以称为产品的粘性,产品的留存率是计算单次打开产品的次数。而多次打开我们的产品也可以称为产品的活跃度,或者用户对我们产品的粘性,我们去优化产品的活跃的可以从以下几个策略入手:1.让产品看起来生机勃勃,2.主动与用户沟通,3.让用户有自己的社交圈,

4.51 让产品看起来生机勃勃


我们都会有凑热闹的习惯,看到街边有人排长队我们会不自觉的看过去,所以我们在新闻看到了网红店会请人来排队,都是为了营造该店看起来很有生机,人很多,很热闹。

我们在做产品设计的时候也是一样的,需要在设计层面让用户看我们的产品也是很有热闹,很有生机,例如我们产品的运营区的图片会经常更换,让人感觉有人在运营,每天都是不一样的,当我们的用户关注的人比较少或者没关注的时候, 我们需要给用户去推荐质量比较高KOL去让用户去关注,有什么活动我也可以主动推送给用户,这都是可以让我们产品看起来有活力,从而让用户可以多次打开,提升活跃度。

4.52 主动与用户沟通


我们小时候通常会被家长教导,遇到熟人和长辈要主动打招呼,这样会让我们看起来比较有礼貌,我们生活中也乐于和有礼貌的人去交往,因为对方会看起来比较有亲和力,比较好沟通。

我们做设计的时候也是一样,我们的产品也需要主动与产品去沟通,让用户去了解我们,例如,我们评论去外露,是在告诉用户我们这个商品已经得到了大多数的肯定,也可以让用户感受到我们这个产品其实用的人还是不少的,比较有生命力。

4.53 让用户有自己的社交圈


不知道从什么时候起,无论是什么类目都有了自己的社区,淘宝有自己微淘,咸鱼有自己的鱼塘,求职找工作的APP也开放了求职讨论专区,连墨迹天气都开放了社区功能,让大家可以拍自己的当地的风景来讨论。

为什么大量的产品开始做社区功能呢?因为他们希望自己的用户能在自己的产品有自己的社交圈,只有用户有自己固定的圈子,才会有用户粘性,把路人用户转化为死忠粉,大家一起来讨论,从而达到提升产品的活跃度。

4.60 提升产品核心转化率发力点


核心转换率一般我们的用户需要走的流程比较多,我们需要按照实际情况去删减合并流程,来保障用户无障碍的可以付款下单,我总结一下几个优化策略:1.优化核心流程,2.丰富决策信息,降低转化顾虑


4.61 优化核心流程


我们以前在放学的路上一定熟知自己家到学校的各种小道,在巷子的玩玩转转,比走大路要节省很多时间,节省了很多时间。


(1)合并优化流程


我们在做电商APP的时候,想要让用户快速下单购买也是需要提升用户的下单效率,例如我们以前输入完密码还需要点确认才能付款,现在我们在输入完第6位数密码的时候就直接付款了,现在手机的升级了指纹和面容识别后都不需要输入,就可以直接付款了,点外卖的时候,会有一键搭配购买,这都把以前复杂的步骤给整合优化,提升用户的下单效率。


(2)复杂流程分开显示,提升放弃成本


已经简化到最简单的流程仍然步骤还是很多的时候,我们可以将流程分开展示给用户,例如我们的流程一共有12项,已经是优化的最精简了,这个时候,我们每个页面显示4个给用户去填写,如果用户在第二个或者第三个想放弃的时候我们这个时候提示他,马上就要完成了,用户想着我之前已经填写一页了,反正也没多少了,我就在坚持写一页把,例如我们常见的电商产品,现在都是支持先选购商品加入购物车,在需要购买的时候在提升用户登录并付款,避免用户还没选商品就被登录界面给阻拦了。这都是可以提升核心转化率的策略。

4.62 丰富决策信息,降低转化顾虑


我们在超市购物时候,一般会先看看产品信息和生产品日期,然后在看看品牌,最后看看产品的价格,觉得合适就拿走付钱了,就算我们有挑选的空间,也会在这这家超市买,因为往往两家超市隔的都是比较远的,跑来跑去比较费力,但是我们在网上购物或者选东西的,换平台成本比较低,也不怎么费力,所以我们需要将我们的能有的优势都展示出来,降低用户的下单顾虑。

例如自如租房的优势就是有管家服务,服务比较全,这是它的优势,也是我们租房的时候比较担心的,有时候房间洗衣机或者热水器坏了找人也找不到,另外就是我们商品的销量好也需要展示出来,那么多人都买了都没问题,我也肯定可以放心的下单购买,我们产品或者平台有什么优势都可以展示全,去尽力打消用户最后的心理防线,从而提升下单转化率。

5.10 确定增长指标


当我们想做增长的时候,会遇到各种各样的指标,经常我们会觉得提升哪个指标都会比较重要,然后我们在把各个指标一把抓的时候却发现与目标却是南辕北辙的背道而驰,最终是研究了很多数据指标,却仍然没做好增长设计。

其中最关键的因素是我们每找到唯一的关键性指标,即OMTM,,全称是 One Metric That Matters,最早提出这一概念的是《精益数据分析》这本书中提出的,后来肖恩·艾利斯在《增长黑客》一书将其称为“北极星指标(North Star Metric)”,现在“北极星指标”已经称为行业的通用词汇。

北极星指标即在纷繁的产品世界中照耀着我们去走向终点的指标,它是产品走向成功的关键且唯一的指标,我们整个组织的增长目标都应该统一指向北极星指标。那么北极星指标有什么作用?

(1)明确目标:让我们避免南辕北辙,,帮助我们确定现阶段的产品最需要解决的问题,帮助我们找到清晰的目标,来促进用户的增长。

(2)集中资源:有助于减少内部的沟通成本,整合企业的人力、技术、资金等资源,明确方向,力往一处使,利出一孔。


5.11 怎么确定北极星指标


我们在前面说到北极星指标的重要性,我们前面也讲到关于很多数据指标,我们怎么可以确定符合企业定位的北极星指标呢?

北极星指标确立和我们自身的产品的属性、行业是密不可分的,不同的产品和行业也对应着不同的用户和盈利模式,用户价值的不同和商业模式不同,所对应的关键指标也会不同,因此,我们要确定北极星指标首先要了解产品的受众和我们的产品可以给受众提供什么样的价值来盈利、

在过去互联网高速的发展的过程中,也衍生出了不同品类的产品。但是总体来说,我们大致可以把互联网产品给归类为内容产品、社交产品、电商产品、工具产品、游戏等几大类目。我们可以看看不同的产品所对应的北极星指标。


5.20 怎么拆解增长指标


如果我们确定了产品的北极星指标,那么接下来我们需要做的就是任务的分配工作以及各部门的协作与协调,让每位成员能够能明确各自的职责,这样我们设立的北极星指标才可能完成,这里我推荐一种在各大企业都开始推行的一种工作方式OKR((Objectives and Key Results)工作法。全称为目标和关键成果,是一套明确和跟踪目标及其完成情况的管理工具和方法。

OKR 这套系统最初由英特尔公司制定,在谷歌成立不久,被风投家约翰·都尔(John-Doerr)引入谷歌,并一直沿用至今。除了Google以外,现如今有很多公司在使用,国外Facebook,Twitter,Linkedin,国内我知道知乎,字节跳动,明道等在使用。

通过这么多公司的使用充分说明了OKR方式的可行性,OKR在执行过程主

要以季度为周期来进行管理。

整个OKR制定是从上到下,逐级进行拆分的类似金字塔式结构,最终拆分到团队或者个人OKR。


OKR中的“O”代表我们这次工作的目标,例如:年度目标、季度目标、阶段目标,“KR”是关键成果,就是这些目标可以通过哪些关键成功可以完成,然后还有一个Action(行动方案),这些关键成功需要通过哪些方案去达成。



我们以一款内容社区类的产品为例子,我们这个产品的季度的北极星指标为提升用户的粘性,那么可能分配到我们设计负责人手上的目标为提升用户的留存率和简化产品的操作留程,那我们设计师需要做的可能是新增一个签到功能,让用户每天都记得签到来领奖励,或者简化直达看帖区的交互步骤,让内容能留住用户

所以我们北极星指标结合OKR工作法,如何在合适的阶段做合适的事,如下图所示


5.30 GSM数据驱动


GSM模型是Google的用户体验团队提出的一种指标体系,与OKR工作法不同,OKR主要适用于整个企业的任务的排兵布阵,而GSN体系主要是用来量化用户体验的,GSM分别为目标(Goal)→信号(Signal)→指标(Metric),所以也简称GSM模型。

但是由于我们国内的互联网情况和国外的环境也是不一样的,经过本土化的改良,我们国内的GSM被精细化为6步。

我们来结合实际的案例来看下吧!

例如我们我们公司的一款民宿的产品,我们的产品团队接到的需求是提升我们产品的活跃度。


(1)数据目标


那我们的数据目标便是提升产品的活跃度,我们接下来的工作便是对产品的现状进行分析,以方便我们开展接下来的设计工作。


(2)用户分析


用户分析主要是对我们现在的用户进行一个比较全面的分析,了解我们用户群体的使用习惯,发现用户主要的查看内容和用户的痛点,以方便我们做针对性的设计策略

(3)发现问题

我们对用户问题的采集主要是通过软件自带的用户意见反馈和APP store 的用户评价,从这里去获取的用户对产品的评价都会是比较客观的。

我们通过评价可以发现,用户对产品存在的一些隐形的坑的体验不好,例如附近有装修会影响人睡觉的之类的,那我们怎么去帮助用户去避免这些问题呢?我们可以让一些经常住民宿的人去写一些住店的体验日记,方便我们用户去查看。


(4)用户表现


有了住店日记,我们的用户表现是什么样的呢?我们的用户在决定入驻一些民宿的时候,可以去多方位的去查看其他人发入住日记。可以做多方面的对比,这样用户不仅可以减少踩到坑,在对比的过程中,在使用我们软件的时间也会更长了。


(5)设计策略


那我们怎么可以让一些入住过用户去写一些入住日记呢?我们可以针对愿意写的用户写的好的用户的日记进行曝光,他可以获得自己的粉丝群里,然后,你发一篇日记,我们会奖励给你相应的金币,这些金币在积累后可以获得优惠券,在下次入住后可以减免相应的入住费用,然后我们的产品可以发现写的比较好的日记推送给没有住过的新用户,或者有意向、搜索过的用户,方便用户横向对比,从而提升用户的活跃度

(6)衡量指标

因为活跃度它是比较抽象的一个概念。我们怎么去验证我们的设计策略呢?我们可以通过一些用户的金币的积累去验证我们数据,这样就会比较直观。只有当有有用户去发表住店日记,他才能获得金币的奖励。


增长设计需要精准的界定用户的痛点,这是用户增长的重要基础,然后在聚焦核心的业务,不断的强化痛点来驱动用户的增长。

随着行业的发展,现在行业对Ui设计的要求也是水涨船高,我们每一次改动需要给企业去提供一个能说得通的理由,我们也需要不断的去学习行业里的新的知识,来丰富我们的思维,这样我们才能在寒冬中走自己的坦途,一起加油!


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

截屏2021-05-13 上午11.41.03.png



文章来源:站酷   作者:Endings

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

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


日历

链接

blogger

蓝蓝 http://www.lanlanwork.com

存档