带各位了解下B端和C端的区别，重点介绍下设计规范体系搭建的框架和思路
C端 Consumer，表示为消费者、个人用户或终端用户，
直接面向普通用户提供服务来帮助他们实现个人需求，
常见就是大家手机中常用的应用。
B端 Business，表示为商业和企业，
是为帮助企业集团等实现商业目的而设计的软件、工具或者平台，
常见的两种类型：
支撑前台产品（千牛、商家后台、微信公众平台、微信开发平台、微博开放平台等）
资源管理产品（Sass、ERP、CRM、OA、WMS、TMS、呼叫中心客服系统、FMS财务管理系统等）
C端产品主要偏向消费互联网，更感性，怎么用的舒服怎么来，用户体验极佳；
B端产品主要偏向产业互联网，更理性，能解决实际问题，降本增效；
因为B端产品属性不同于C端，竞品参考少之又少，能找到也可能因为付费或者权限的原因，无法从“上帝”视角查看全局，也只能看到冰山一角，而且每个企业单位都有一套自己的产品体系，竞品差异化还是有的，但是有一点是不变的，就是设计底层的规范和原则，变得只是产品流呈现，就像乐高。
B端产品往往拥有复杂的业务逻辑且页面量级巨大，快速迭代也会引发频繁的变动以及并行概率的增加，需要设计师内部协同，或与开发能够快速的产出方案保证上线。这样的工作模式引发的副作用如：“体验一致性差”、“设计效率低”、“还原度不可控”的问题也逐渐显现，变成一个急待解决的问题。
设计规范就是为了节约成本，提升效率，保证质量。
这里不由得要提另一个概念——原子化组件思维，一个完整的页面是由无数个元素构成的，页面元素可以进行层层拆解。“组”是页面元素的搭建方式，“件”由不同的最小单位解耦元素组成。
这里着重说一下一定在前期做好设计规范的规划和宣导落地，自己在项目设计执行阶段因为时间紧张且经验不足，一边画页面一边搭建规范，设计稿前后优化内容差异较大，导致有大量之前实现的页面问题较多，后期要投入很多的时间和人力去修改，这个问题还是蛮典型的，希望各位可以意识到设计规范的重要性。
我们没必要自己从0开始搭建，一套完整的规范体系，需要经过上百甚至上百张页面的积累打磨才能完成，时间也不允许我们这样做，但我们可以站在巨人的肩膀上去实现，现在很多大厂都有自己一套完整的设计规范体系，以下也是自己经常参考的规范：
蚂蚁设计：https://ant.design/index-cn
蚂蚁数据可视化：https://antv.vision/zh
饿了么：https://element.eleme.cn/#/zh-CN
iview：https://www.iviewui.com/
贝壳：http://design.ke.com/page/home
自己为公司建立的设计规范体系也是基于AntD，根据公司产品属性做了一些调整和优化，才逐渐形成了适合自己产品的规范体系，下来带各位梳理下设计规范需要做什么？
先放一张通用架构图，总体了解下有什么
接下来带各位过一下这五大板块内容，重点展示会配图解释，没配图的可在文末下载AntD设计规范作为参考，
设计过程中及时要和产品研发进行沟通评审，防止大面积复用带来的改稿，痛苦面具···
主题色、功能色（错误/警告/成功）；
状态色（A/B/C等级）；
文字色（主要/次要/辅助/禁用/占位符/白色）；
线条色（基础/分割器）；
背景色（基础/禁用/表头）；
顺序色板（8种顺序颜色，饼图/环图适用）；
同色相色板（8种顺序颜色，饼图/环图适用）；
分组柱状图/堆叠图色板（5种颜色）；
语义色板（成功/警告/严重）；
文字色（轴标签/轴单位，继承文字常规颜色）；
线条色（XY轴实线/网格虚线）；
字体家族（字体识别顺序）；
字号（3~5种，保持克制）；
字重（Regular/Medium/Semibold）；
行高（一般为@1.5，较大字体行高需特殊处理）；
默认（上下左右方向）；
悬浮（较默认偏深）；
模态框；
通用图标（线性/填充）；
行业图标（业务需要）；
间距（8点网格法是最为合适的产品间距制定方法）；
框架（导航/头部/页头/标签栏/树状容器/内容区域）；
栅格与标注（筛选/表单/详情/表格单元/弹窗）；
顺手
常规按钮（填充/线框/虚线按钮）；
图标按钮；
文字按钮；
下拉菜单、标签页、步骤条、分页器、锚点链接、面包屑；
输入框、选择器、单选框、多选框、开关、日期选择器、时间选择器、滑动输入条、上传；
头像、徽标、标签、文字提示、气泡卡片、内容、表格、滚动条、统计数值、时间轴、折叠面板、分隔器；
对话框、全局提示、警告提示、进度条、结果、气泡确认框、加载中；
空数据、电话号码、数值、金额、日期、时间、相对时间、脱敏、标准词汇库；
数据可视化这个板块其实并没有想象的那么简单，画个圆画个长方形什么的，你要重点了解的是以下几点：
1. 选择正确的图表类型（时间类、比较类、分步类、流程类、占比类）；
2. 组件使用规范和说明（标题与注释、轴、图例、标签、提示信息）；
3. 图表布局自适应（面对海量数据量与有限屏幕空间的冲突）；
4. 交互（数据获取、信息加工、知识流转）；
这里不多做赘述，基础介绍可以看看之前发布的文章，深层级的介绍可移步https://antv.vision/zh。
规范体系搭建完成后，我们就可以用组件去搭建各类型场景的标准模板页面了，就像搭积木一样，过程还是很有成就感的。
登录页、引导页、工作台、查询列表、表单、详情、弹窗、左树右表、设置页、异常页、空状态；
每一类模板页面都有自己的使用场景、基本构成、注意要点等，举个例子，
1.【工作台】为用户提供处理和查看信息的捷径，为产品适当宣传产品的新动向等运营内容。
2.【查询列表】四大构成：数据过滤—数据统计—数据列表—批量操作；；
3.【表单页】明确当前页面任务，快速定位修改目标，简化填写流程，确保用户准确、轻松、快速地完成任务；
最终的这些模板页面还是要根据自己公司的产品属性来做一些调整，随着经手的同类型页面越多，最后的模板页面越标准。私密原因，这里展示些AntD的标准页面参考下：https://preview.pro.ant.design/
上述就是规范体系的主要构成了，规范搭建也只是设计部门的产出物，宣导和落地才是重中之重，
我们要对产品和研发拉会进行一次完整规范的内容宣导，
让产品同学明晰现在的产品框架和样式，原型图绘制样式和交互接近视觉稿；
让研发同学知晓我们是基于什么前端框架设计，源生组件有哪些地方修改过，还原过程中注意些什么；
给出我们规范的产出物，一份完整的PDF查看手册，一份上传设计稿可查看标注的链接地址和一个规范迭代文档，方便相关人员查看和对接迭代。
这中间过程不比规范搭建所花费的时间和精力少，做好持久战的决心，公司产品体验升级是否能成功就靠这一战了···加油。
以上就是本次分享的全部内容了，总结的方向比较多，但都不太细致，也是先给各位一个整体框架和思路来应对相关的设计，更多的内容可以多去参考大厂，你会发现很多有意思的东西，从0到1或者从0.5到1，自己去探索去实践，成就感满满，这个过程就是进步的味道，相信你会爱上。
文章来源：站酷 作者：MiFan菌
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
首先仍然不得不提的是 “在客户端拿到 HTML 后的处理”：
我们可能很多次听到过：“要尽可能地减少重排和重绘，因为它们会影响浏览器性能。”
但，为什么呢？
事实上，一个页面是由许多层级组成的（就像千层饼一样） —— 这里的“层级”指的是“ DOM 元素渲染层（Layer）”。一个页面在构建完 render tree 到展现在我们面前还经历了一个“特别的流程”：
（：从上面的步骤我们可以知道：布局是CPU处理的，而绘制是由GPU完成的。
就像这张图说的（from Firefox的3D View插件的页面Layers层级图）
问题就发生在上面所说流程的第2、4步中。大家试想一下：如果我们把那些会发生复杂运动/变化或一直发生大量重排重绘的元素提起出来，单独放在一个渲染层触发，那它就不会连累其他元素了！
那什么情况下会触发渲染层呢？
比如 video 、WebGL 、Canvas 、CSS3 3D 、CSS滤镜 、z-index大于某个相邻节点的值 的元素都会触发新的Layer —— 这里要理解一点：它并不单单指 z-index！这里极力推荐张鑫旭大大的这一篇文章：深入理解CSS中的层叠上下文和层叠顺序
比较简单的方法是，给元素加上下面的样式：
transform: translateZ(0); backface-visibility: hidden;
我们把容易触发重排重绘的元素单独触发渲染层，让它与那些“静态”元素隔离，让 GPU 分担更多的渲染工作，我们通常把这样的措施成为硬件加速，或者是 GPU 加速。大家之前肯定听过这个说法 —— 就比如CSS中的 will-change 。
不论是重排还是重绘，都会阻塞浏览器。要提高网页性能，就要降低重排和重绘的频率和成本，近可能少地触发重新渲染。正如我们上面提到的：重排是由 CPU 处理的，而重绘是由 GPU 处理的，CPU 的处理效率远不及 GPU，并且重排一定会引发重绘，而重绘不一定会引发重排。所以在性能优化工作中，我们更应当着重减少重排的发生。
还有什么可以优化的？
style.csstext 属性去批量操作元素样式
appendChild 等都可以使用 documentFragment 对象进行离屏操作，带元素“组装”完成后再一次插入页面，或者使用 display:none 对元素隐藏，在元素“消失”后进行相关操作，然后再显示出来
visibility: hidden 是个好东西，它既有display的隐藏，又有opacity的占位。而且它还支持移动动画
Web前端基础：
Web前端工具：
jQuery是一个JavaScript函数库。jQuery是一个轻量级的"写的少，做的多"的JavaScript库。 jQuery库包含以下功能:
提示: 除此之外，jQuery还提供了大量的插件。
目前网络上有大量开源的 JS 框架, 但是 jQuery 是目前最流行的 JS 框架，而且提供了大量的扩展。
jQuery版本有很多，分为1.x 2.x 3.x
1.x版本:能够兼容IE678浏览器
2.x版本:不兼容IE678浏览器
1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3.x版本:不兼容IE678，更加的精简(在国内不流行，因为国内使用jQuery的主要目的就是兼容IE678)
国内多数网站还在使用1.x的版本
该总结中所用版本为1.1的版本
jQuery有两个版本:
生成环境使用的和开发测试环境使用的。
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发(未压缩，是可读的代码)
以上两个版本都可以从 jquery.com 中下载。
这里给个国内的下载地址：
JQuery 下载
jQuery 库是一个 JavaScript 文件，我们可以直接在 HTML页面中通过script 标签引用它，跟引用自己的 外部JavaScript脚本文件一样的语法。
//将第一步中下载好的jQuery资源包进行解压，然后就可以饮用解压好的.js文件 <head> <script src="jquery-1.11.1.js"></script> </head>了。
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作(actions)
$(selector).action() 说明:美元符号定义 jQuery 选择符(selector)"查询"和"查找" HTML 元素
jQuery 的 action() 执行对元素的操作
文档就绪事件，实际就是文件加载事件。
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码，即在 DOM 加载完成后才可以对 DOM 进行操作。
如果在文档没有完全加载之前就运行函数，操作可能失败。 所以我们尽可能将所有的操作都在文档加载完毕之后实现。
写法一：
$(function(){ // 开始写 jQuery 代码... });
写法二：
$(document).ready(function(){ // 开始写 jQuery 代码... });
jQuery的ready方法与JavaScript中的onload相似，但是也有区别 :
| 区别 | window.onload | $(document).ready() |
|---|---|---|
| 执行次数 | 只能执行一次，如果执行第二次，第一次的执行会被覆盖 | 可用执行多次，不会覆盖之前的执行 |
| 执行时机 | 必须等待网易全部加载挖完毕(包括图片等)，然后再执行包裹的代码 | 只需要等待网页中的DOM结果加载完 毕就可以执行包裹的代码 |
| 简写方式 | 无 | $(function(){ }); |
jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头:$()。
Query 元素选择器基于元素/标签名选取元素。
语法:$("标签名称")
<div>div1</div> <div>div2</div> <div>div3</div> <script type="text/javascript" src="js/jquery-1.11.1.js" > <script> //文档就绪事件: $(document).ready(function(){ //编写jQuery }); $(function(){ //1、标签选择器: //获取所有的div元素(集合) var divList=$("div"); console.log(divList);//jQuery的对象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的对象 //将js对象转换为jQuery的对象 console.log($(divList[i])); } }); </script>
jQuery #id 选择器通过 HTML 元素的 id 属性选取指定的元素。
页面中元素的 id 应该是唯一的，所以在页面中选取唯一的元素需要通过 #id 选择器。
通过 id 选取元素语法如下:
$("#p1")
jQuery 类选择器可以通过指定的 class 查找元素
$(".mydiv")
匹配所有元素
$("*")
将每一个选择器匹配到的元素合并后一起返回
$("div,ul,li,.mydiv")
在给定的祖先元素下匹配所有的后代元素
$("form input"
在给定的父元素下匹配所有的子元素
$("form > input")
匹配所有紧接在 prev 元素后的 next 元素
$("label + input")
匹配 prev 元素之后的所有 siblings 元素
$("form ~ input")
匹配包含给定属性的元素
$("div[id]");//获取所有有id属性的div的元素集合 $("div[class]");//获取所有有class属性的div的元素集合 $("input[name='userName']");//获取所有input标签中name属性是userName元素的集合 $("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合 $("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合 $("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合 $("input[id][name^='user']");
匹配所有的可见或不可见的元素
$("div:visible");
$("input:hidden");
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选择器</title> <script type="text/javascript" src="js/jquery-1.11.1.js" ></script> <script> //1、标签选择器： function htmlSelector(){ //获取所有的div元素（集合） var divList=$("div"); console.log(divList);//jQuery的对象 console.log(divList.length); for(var i=0;i<divList.length;i++){ console.log(divList[i]);//js的对象 //将js对象转换为jQuery的对象 console.log($(divList[i])); } } //2、id选择器 function idSelector(){ //根据id获取到的元素是惟一的，即使页面上有重名的id，获取的是第一个 var p=$("#p1"); console.log(p.html()); } //3、.class选择器 function classSelector(){ var list=$(".mydiv"); console.log(list.length); } //4、 全局选择器 function allSelector(){ var list=$("*");//包括了html、head、title.....所有标签 console.log(list.length); for(var i=0;i<list.length;i++){ console.log(list[i]);//js的对象 } } //5、并集选择器 function andSelector(){ var list=$(".mydiv,p,li"); printList(list); } //6、后代选择器:包括所有的后代，儿子和孙子辈都有 function subSelector(){ var list=$("form input"); printList(list); } //7、子选择器：只有子元素 function sunSelector(){ var list=$("form>input"); printList(list); } //8、相邻选择器 function nextSelector(){ var list=$("label + input"); printList(list); } //9、同辈选择器 function sublingsSelector(){ var list=$("form ~ div"); printList(list); } //10、属性选择器 function attrSelector(){ var list=$("div[id]");//获取所有有id属性的div的元素集合 list=$("div[class]");//获取所有有class属性的div的元素集合 list=$("input[name='userName']");//获取所有input标签中name属性是userName元素的集合 list=$("input[name^='user']");//获取所有input标签中name属性是user开头的元素的集合 list=$("input[name$='user']");//获取所有input标签中name属性是user结尾的元素的集合 list=$("input[name*='user']");//获取所有input标签中name属性包含了user的元素的集合 list=$("input[id][name^='user']");//获取所有input标签中既有id属性又有name属性以user开头的元素的集合 printList(list); } //11、可见性选择器 function seeSelector(){ //匹配所有的可见div元素 var list=$("div:visible"); //匹配所有的不可见div元素 var list=$("div:hidden"); //匹配所有的不可见input元素,样式有display：none的元素和type=hidden的元素 list=$("input:hidden"); printList(list); } //文档就绪事件：页面加载完毕之后执行： $(function(){ seeSelector(); }); //打印集合 function printList(list){ for(var i=0;i<list.length;i++){ console.log(list[i]); console.log(list[i].innerHTML);//非表单项元素使用该种方式输出 console.log(list[i].value);//只有表单项元素才有value } } </script> </head> <body> <form> <label>用户名：</label> <input type="hidden" name="userId" value="1001" /> <input style="display: none;" value="隐藏的input" /> <input id="userName" name="userName" value="jiaobaoyu" /><br /> <label>密码：</label> <input name="userPass" type="password" value="1234567"/><br /> <fieldset> 电话：<input id="phone" name="phoneuser" value="13712345789"/><br /> 邮箱：<input name="emailuser" type="email" value="lina@sina.com" /> </fieldset> </form> 地址：<input name="addressuser1" value="北京" /><br /> <ul> <li>li111111</li> <li>li111111</li> <li>li111111</li> </ul> <p id="p1">p111111111111</p> <div id="div1" class="mydiv" style="display: none;" >div1</div> <div class="mydiv">div2</div> <div id="div3">div3</div> </body> </html>
页面对不同访问者的响应叫做事件
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法
| 鼠标事件 | 键盘事件 | 事件 | 文档/窗口事件 |
|---|---|---|---|
| click | keydown | submit | load |
| dblclick | keyup | change | |
| mouseover | focus | ||
| mouseout | blur | ||
| hover |
在 jQuery 中，大多数 DOM 事件都有一个等效的 jQuery 方法
看到好的图标我们会习惯性地截图保存，但随着收集的图标越来越多，会发现对图标的分类会变得越来越混乱…做设计时也不清楚到底该参考或运用哪种风格最合适。来看看如何解决这些问题！
图标是基本但重要的表达元素，在 UI 设计中有着不可替代的作用。
常见的分类是简单的线性分类，缺少立体化的图标分类思维。文章通过梳理来帮助大家对不同类型及风格的图标有一个体系化的认知。
对图标进行分类时，普遍会遇到的问题是一个图标有多种风格。例如下面这个水滴图标，样式很简单，但可以划分到多个类别中。
面对这样的问题，推荐使用系统性的结构来划分图标类别：
利用这种结构层级，可以明确定义图标类别。
图标的大小取决于具体功能。例如带有渐变和阴影的图标看起来很酷，但把它缩小到 16px，这些酷炫的效果都无法呈现出来。
在对图标归类时，首先要考虑图标用在什么位置需要多大尺寸。这里将图标分为两大类：
确定图标尺寸后，进一步细分图标类型：
每个类型对应的图标绘制方法看 → https://www.uisdc.com/zt/icon-drawing-guide
利用这种简单的分类方式就能避免图标发生重叠。另外拟物化这种细腻的风格不适用于小尺寸图标中，所以在小图标分类中没有展示。
图标尺寸越小，展示的细节越有限。相比于大图标，小图标的尺寸有一定局限性，图标组成包括标准和容器两种。
大图标利用尺寸上的优势能展示更多内容，分为多种组成形式。
简单的图像可以更具包容性。图标的尺寸越小，越考验设计师传达信息的能力。
标准面性图标
面性图标易识别，适合应用在小尺寸图标中。
关键点：
带有背景色的面性图标
彩色背景为简约设计带来了更多可能。通过这个技巧使面性图标更友好，更具吸引力。
关键点：
标准线性图标
线性图标因为简洁性和现代性而受到用户的欢迎。随着屏显越来越清晰，我们可以更加大胆地使用线性图标。
关键点：
双色线性图标
设计小尺寸图标时，必须放弃细节并强调简单的形状。但当使用一种颜色效果不太理想时，可以考虑添加一些颜色。
关键点：
线面结合拥有更多细节，提升用户的愉悦感。
关键点：
扁平化图标既简单又巧妙，表达品牌形象的同时具有丰富的内涵。
关键点：
大尺寸图标在界面中使用较少，更多用于产品标识或品牌宣传。
标准线性图标
在设计任何图标前，都可以先创建一个线性轮廓，确保形状看起来足够美观后再添加颜色。
关键点：
渐变线性图标
添加一些渐变能让原本单一的线性图标赋予更多的个性。
关键点：
等距线性图标
2.5D 图标做起来会花费很多时间，但效果往往会很好。在设计汽车、房屋、家具等实体产品时，建议优先使用 2.5D 图标。
关键点：
手绘线性图标
随着设计趋势向简约化、扁平化发展，很多设计师丧失了手绘图标的能力。实际上手绘图标让品牌更真实甚至更有趣。
关键点：
断线图标
标准的线性图标看起来可能会很单调，而简单灵活的断线处理能为图标增加更多个性。
关键点：
双色线性图标
关键点：
确保两种颜色具有相同的对比度，否则可能会导致用户看不清其中一种颜色，因此无法识别完整的图标。例如左下角的浅绿色对于视力弱的用户来说就很不友好。
线面结合图标可以看作是添加颜色后的线性图标。线面结合具有很强的轮廓，让图标能够清晰可见。
标准线面结合图标
关键点：
带有背景色的线面结合图标
关键点：
错位线面结合图标
当填充色与描边错位时，颜色移到右边图标左上角留出高光，带来一种清新的感觉。
关键点：
色块图标
这种风格的图标的特点在于并不依赖于颜色，仅将其用于装饰。
关键点：
单色线面结合图标
关键点：
扁平化图标通常没有描边，主要使用形状和颜色来完成组合搭配。简洁、友好和适当的细节，让这类图标非常具有吸引力。
标准扁平化图标
关键点：
带有容器的扁平化图标
尝试让图形打破容器，带来动态的感觉。
关键点：
等距图标
关键点：
半阴影扁平图标
半阴影图标是在扁平图标的基础上添加半色调阴影，得到更具个性的图标。
关键点：
长阴影扁平图标
当图标位于容器中时，可以考虑添加长阴影，主要包括纯色阴影和渐变阴影两种类型。
关键点：
拟物化图标实际上已经包含了大部分的样式，例如它们是立体的，有丰富的渐变和阴影。
这种风格的图标看起来与现实生活中的图标尽可能类似，让用户感到更舒适。
关键点：
目前绝大多数界面不再有这种风格的图标，可以考虑使用 3D 建模来实现这种效果。
希望大家能对图标的分类及设计有更全面深入的认识，从而构建一套完整的图标思维体系。
文章来源：优设网 作者：Clip设计夹
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
下面来分享几个扁平化风格图标。
扁平化的概念最核心的地方就是去掉冗余的装饰效果，意思是去掉多余的透视，纹理，渐变等等能做出3D效果的元素。让“信息”本身重新作为核心被凸显出来。并且在设计元素上强调抽象、极简、符号化。
例如，Windows、Mac OS、iOS、Android系统的设计已经往扁平化设计发展。其设计语言有Material Design、Metro UI等。
扁平化尤其在手机上，更少的按钮和选项使得界面干净整齐，使用起来格外简洁。可以更加简单直接的将信息和事物的工作方式展示出来，减少认知障碍的产生。
扁平化不仅界面美观、简洁，而且达到降低功耗，延长待机时间和提高运算速度。
文章来源：优设网 作者：牙线y2x
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
这几年私域流量这个词很火热，很多企业都开始做私域流量，特别是在微信场景下进行的社群运营；一个优质的社群运营能让社群一直处于活跃状态，并且可以提高转化率；本文作者分享了关于微信的私域流量生意，我们一起来了解一下。
最近这两年，随着在线教育和社区团购行业的兴起，私域流量这个词越来越被大家所熟知。不过我很讨厌私域流量这种说法，仿佛不把人当人看，而仅仅是一种流量数据指标而已。
那么什么是私域流量呢？用一句话来说，私域流量就是一个能与顾客拉近距离，离用户最近、最方便触达的方式而已。
在这之中，人情味是核心，比拼的是执行力，是一个慢工出细活的事情。
做好一个私域的内核是用户和内容的运营。
我今天来说说私域中的一个类目，社群运营
整个体系涉及到了打磨产品、如何做好增长、如何做好用户的活跃、和内容的产出以及如何服务好用户的多元化需求。
我相信在座的各位，在私域中与用户打交道的时候或多或少的沟通问题。
解决沟通问题有一个核心思路：你说出去的每一句话，做出来的事儿，都要真诚。
我们今天拆解的两个案例，一个是目前互联网最大的创投类科技媒体同时也是纳斯达克的上市公司；另一个则是目前国内规模最大的针对于企业高管的知识付费课程。
还有一系列的私域案例，有我深度参与的，有我日常打辅助的，也有也有我们进行代运营工作的（但是由于客户的隐私问题，有的案例我不方便透露具体的名称）。
我敢保证，今天的两个案例在座的人80%的人都或多或少使用过他们的产品，或者听过他们的名字。
为什么我把冷启动放在第一位？
因为一个冷启动好与坏直接关乎于后期的分销变现的效果。
先说一下XX创新大学。
目前市面上很多头部知识付费的公司，他们开始做上市辅导的IPO工作了，不要天真的以为这些公司都是靠单打独斗起来了，其实他们在很多的城市都有地方站的布局。
看似很牛逼，但是你知道他们在早起布局的过程中，也栽了不少的坑。
知识付费的地方站本质是一个代理生意，由于这是一个代理的生意，执行人员很容易按照原先设定话术和引流的一些行为ctrl+v 进行运营工作，但很快就发现了问题。
一是因为地方的认知与一线城市的差距很大。
不知道大家在过年回家的时候，跟身边的朋友或者当地的企业家前辈聊天的时候，能发现的明显的代沟。
我认识的很多当地传统企业的老板他们对于互联网和新媒营销的认识差距还是很大的。
其次，是因为当地年龄代沟的问题。
我们发现当地企业领导和公司高管都是将近四五十岁的人，线上时间较短，更不要提成交转化了。
基于这两个问题，我们开展了一系列攻艰克难的尝试。
首先，我们通过了很多人脉在线下对接到了很多地方优秀的创业者，在接触的过程中发现，大家在疫情时期对于传统行业如何转型有着迫切的需求，而且他们泡在线下的时间远比线上的时间多。
针对于这一点，我们打算从线下的交流分享会进行切入，将交流会的服务搭配着虚拟会员一起售卖，不仅提升了客单价还可以发展很多线下的分销渠道。
那我们是如何做线下的冷启动呢？
因为对我们而言，线下流量的多少，直接关系到我们的成交，以及品牌势能，包括后期分销渠道的搭建。
因为我们针对的更多的是企业家，也就是B端的用户，他不像C端的流量可以进行投放去算ROI。一个好的冷启动是非常关键的。
当时我们想了很多花里胡哨的操作，最终让我们醍醐灌顶的是王兴说过的一句话。
王兴最喜欢讲的一句话，结硬寨,打呆仗，你知道这句话谁说得吗，是曾国藩。
曾国藩曾给清廷上奏，原文是这样写的：
“臣不善骑马，未能身临前敌，亲自督阵。又行军过于迟钝，十余年来，但知结硬寨、打呆仗，从未用一奇谋、施一方略制敌于意计之外。”
说白了，这里讲的就是步步为营，稳扎稳打，不出奇兵，战胜对方。
我们经常说一句老话，就是：听了这么多道理却依然过不好这一生。
我问一下大家，大家有多少人坚持100天来履行自己的健身计划呢？所以说，大家抓执行的能力的度待提升的，因为大部分人是不一定具备躬身入局的能力。
就拿我们老家，河北省的地方运营中心来说。我们也算是把细节做到了极致。
我们前期，通过人脉关系让所有人都免费参加，来增强线下的初期势能。
针对地方已购买产品却长期沉默的用户我们人工电话一个个电话或者线下一对一的去进行召回的。在这里说一点，一个声音好听的妹子，确实可以让用户多听你BB一分钟。
那个时候一天在线下能见30多个人，嗓子都干了，确实累，不过，只要有效，莽就完事了。
用尽一切的能力去找到联运方，那个时候我们很荣幸的找到一个很有名的读书的地方代理，但是大家要记住，在联运的前期，一定要把双方的权益写清楚，否则后期会遇到很多麻烦的事情。
动用你所有邀请到的人，让他们去发发朋友圈，因为他们企业家的朋友圈还是比较精准的。
那个时候我们通过大半个月的时间基本把当地的创业者跑了一遍，初次召集了2000多号的人。
试想一下当地上千号的大小老板在同一时间的发朋友圈帮你宣传，是一种什么样的影响力。
利用个人IP好好的去做内容，保持个人的内容输出。
通过这种方式我们在前期基本上能在当地进行小规模的刷屏。
后期我们又不断提升线上的影响力。我们在抖音、快手和视频号的平台选择中，最终选择了全力做视频号；我们利用手中已有的企业家资源，进行微信视频号的连麦直播，通过社交关系，很快的就覆盖了市内的大部分企业家，不仅增强了品牌的影响力，也慢慢的增强了他们对于线上的使用习惯。
到此为止我们才慢慢的开始利用品牌的影响力开始裂变分销。
我相信很多人都在意社群的转化，在意分销体系的搭建；只不过一口吃成一个胖子，这是不现实的。
在分销转化之前还有很重要的一步，就是活跃。
这个案例是一个行业媒体的社群。
在上文中我们列举了冷启动做起来的种种方法，在启动后相信很多人都遇到了一个问题，社群是有生命周期的，我们拿这个行业媒体的社群给大家拆解一下生命周期活跃的这个事儿。
作为行业媒体来说，大家更看重其自身所带的内容，所以在社群的活跃方面，用户的忠诚度一定是以内容的价值来衡量的。
那么针对于一家互联网创投媒体来说什么是有价值的内容呢？
创投媒体的受众大部分是以互联网、广告营销、金融为主的人，还有一部分的创业者和对商业科技感兴趣的学生；所以在话题的选择上也是围绕这些去做文章，尽量的找一些大家感兴趣的话题引起讨论。
如何做一个社群交流的话题呢？
按照我的总结就是：信任感+信息差。
所谓的信任感，来源于用户对于品牌信任，以及群友对于群主的信任。绝大多数人不具头部品牌的影响力，那么就更要专注于你与群友之间的信任建立。
信息差是什么？俗话说：三日不见当刮目相看。
为什么人和人拉开距离的速度会非常的快?这背后的原因就是是彼此的认知和信息差不一样。
国与国之前有信息差，行业之间有信息差。那么信息差呢？
我来举个例子!
我问大家两个问题：
这些看似是讨论移动支付或互联网金融的商业问题，但这个简单的问题底下是我们通过词云埋藏了十多个话题点供大家讨论。
每一个词云点里至少有大于三种的讨论方向，大家想想海王为什么和姑娘总有的聊。
那么当这种内容进行发散输出的时候，这就是大家所期待的有价值的内容。
作为一个好的群聊话题，它是有节奏性的，从抛出话题，再到讨论话题，再到最后话题的总结，它是一个有始有终的过程；所以说，作为群主，想好这个话题的讨论点，把控好每一个环节，不要让这个环节里面出现过于激烈的争论。
如果有的话，你需要动用自己的情商去好好的缓解；千万不要评判这个人说的是对的还是错的，其实世界上所有东西在我看来没有对和错，只有说合适和不合适。
分享的形式有两种：一种是邀请嘉宾，另一个是主题讨论。
我们会利用客户平台资源去邀请一下嘉宾。或者邀请群友进行分享。
有的群友可能没有那么系统性的输出，那么就可以进行一个主题会，比如我曾经就邀请了关于电商平台的运营人员、MCN以及品牌方从各个角度来讲解关于品牌营销的主题演讲。
那在群里，什么样的人符合KOL的标准呢？
当一个合格的 KOL，其实并不容易，既要上知天文又要下知地理，又要能文善武，既要保持调性，还要平易近人，不能让群友太过仰视，离群友距离太过遥远；更不能让群友们俯视，变成单独服务向的“客服小妹”。
那我们筛选的漏斗模型是什么呢？
大家一定要好好服务好这些人，无论是做一笔生意也好，还是交朋友也罢，这些挖掘到的kol都是你在数字世界开疆拓土的战略盟友。
他们独树一帜的思想一定是能够在未来引起别人的关注。
在分享的过程中，一定要对分享者多多鼓励，毕竟谁不喜欢被表扬呢，无论这个分享是怎样的，能分享就是好的；一定要让分享，成为群内的良性循环。
不过再怎么活跃，各位一定也会遇到死群的问题；很多做微信生态的人都非常的拧巴，总觉得解散社群是一件非常抹不开面子的事情。
对于一些死群，我会利用解散社群重组的方式重新活跃。
每一次换血都意味着生命体细胞的再造。
这句话话怎么理解呢？
其实社群生命周期的本质跟细胞的组成是一样的，按照生物学的角度来说：人体细胞是有寿命的，每天都在更新，衰老死掉的细胞会被新的代替。
但是，人的大脑细胞是永久不变的，就算过了7年的周期，你的脑子依然还是同一个。
那么针对于社群来说，群主就是这个生命体的大脑，群员就是细胞，你的信息与内容就是流动的血液。
不要害怕社群的生命周期，作为一个生命体来说，摄取更多的氨基酸和维生素，寻找新的细胞来源，才是大脑应该考虑的事情。
当社群到了无话不谈的时候，就会出现新的交流需求。
群中有的人聊生活，有的人聊工作，有的人聊行业。
大家从陌生到熟悉是需要时间去建立的，每一个愿意在群里聊天的人都有他存在的意义，每一位发言的群友都值得被认真对待。
对于绝大多数人来说，刚开始进入一个行业，最佳的方式不是创新，而是复制头部玩家成熟的模式，以保证自己能够在行业理解、团队结构、 技术运营等能力上迅速度过冷启动期；所以每一个互联网人，都应该有分析项目、拆解项目、复制项目的能力。
我们需要对于行业头部的打法保持敏感，同时想把办法跨行业的知识进行融合。
群主本身即群员，我们既是社群的运营者，同时也是别人社群的群友。
当你脱离出kpi的数据视角，用人本主义的视角和同理心去理解社群，你会发现更大的世界。
求知欲就是对一切事物保持好奇。
我特别喜欢的一句话就是：好奇心是我对这个世界永不停歇的热情。
在人类的进化史中，人类之所以为人，是因为人会使用火。在数字世界中生存进化，我们也需要利用好一切可以辅助运营的工具，方便我们进行事半功倍的管理。
我时常问自己一个问题：一个知识社群的终局是什么？社群模式的天花板又在哪里？
先直接说一个结论，从长期来看，社群必然走向沉默。以社群为主的商业模式也注定会有天花板。
社群经济更多的是以服务成年人，以活跃的角度来说，没有一个人有时间在群里面天天扯闲。而且随着社群的发展，会逐渐导致流量的不精准，群里面也会逐渐“水”化，这是其一。
其二是因为，随着社群规模的扩大，就必须要做标准化的流程。
大家知道标准化是什么吗？
标准化意味着工业化，工业化的过程中就很难让底下的执行人兼顾到互动和情感。
但是，互动与情感其实是在数字社会中是尤为可贵的，这也是主办方伴我们召集在线下的原因，我们在线下的每一个点头，每一次眉头紧锁，都是很好的情感交流，这其实是在一个工业化的社群中很难做到的。
但这不意味社群的生意不赚钱，一个高效率的社群一定要讲究标准化，只有足够稳定的SOP才能做起来规模；所以社群组织的机体再生能和情感传递力才是我们应该多思考的思路。
解题不一定在当下，当大家好在嘲讽拼多多的拼一刀的时候，黄峥已经在思考生命科学和粮食安全的事情。
我粗浅地认为，这个事情，是从他22岁和段老师一起会面巴菲特的时候，就已经注定。
做一个砍一刀的电商并不性感，利用科学为社会提供价值才是性感；做一个数据导向的社群不性感，让社群有生命力有再生能力，才是真正的性感。
文章来源：人人都是产品经理 作者：纸皮小火车
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
导语：TMS（运输管理系统）是一个物流运输平台，它是供应链管理系统（SCM）的一部分。广义的TMS平台涉及面较广，不同企业的业务模式不一样。本文所探讨的TMS是具有实际运营能力的第三方物流运营平台，它主要是一种通过技术的手段整合社会物流信息，优化配置物流资源，帮助货主降低物流成本并提供管理运输业务。下面从业务描述、系统架构和功能模块三个方面作一个简单的分析，一方面是梳理业务的作业场景，另一方面宏观认识产品的整体框架，分析具体功能解决的问题点。
通常来说，整个运输阶段分为三个阶段来完成：
货主提出运输需求，建立任务订单推给运营方。
客户下订单的方式有很多，比如电话、邮件、发信息、TMS系统、其他平台等。提出的任务需求，也称客户订单，它是货主和运营方的交互凭证，承担着需求描述、运单跟踪、应收结算等功能。
货主订单主要包含4方面的信息，收发货地信息、货物信息、用车信息、增值服务。
运营方按照一定的运输规则处理，做这个规则处理的过程，一般称之为计划，计划的形式有多种，主要有拼单、拆单、规划线路图、地图合单等，然后再将计划好的这个订单分派给合适的承运方。
最常见的手段是拼单，又称零担运输。将多个货主订单合并拼成一个派车订单，一般规则的处理条件有：订单量、装载能力、价格、路线、发货时间、收货时间等。
计划的手段除零担集货外，还有大单拆分、长单分段等，主要目的来达到成本分摊的作用。计划的手段有智能计算，和人工处理+半自动计算。
承运方接受订单，并将订单分配给司机，由司机执行完成运输任务，这个阶段又称之为调度。运营方将计划的订单分配给承运方，生成最终的运输订单，它是运营方同下游承运方的唯一标识，这个凭证会关联到订单的跟踪监控和应付结算等功能。
基础资料的建立，对TMS的需求任务单和调度非常重要，只有建立了合作关系，才能在客户需求订单上选择到正确（有合作关系）的客户，在计划调度的时候才能匹配到正确（有合作关系）的承运方。
录入货主、承运方的信息，以便于后期订单的生成， 这些信息的维护可以保证每个订单都有归属客户，方便订单的管理。
1）货主管理
客户资料会有专门的CRM维护。
2）承运方管理
有承运商、自营车辆和2C车主三种。 2C车主，个人司机管理模块，没有合作关系。个体司机加入平台，需要进行注册认证，只有认证通过后才能给这些司机派发运输订单。
司机的信息维护除了注册认证外，还有在平台的所有活动数据记录等。和承运方相比，此前不需要有固定的协议合同，相当于临时工的概念。
3）用户管理
运营方用户之间建立的合作权限关系。
在第一阶段，货主提出用车需求。需求订单信息包括收发货人信息、货物信息、用车信息和增值服务，详细描述在上面的「业务描述」中有说明。具体到TMS系统中，这里不但只是货主的信息录入，它还包括收发货人信息关联、地图定位、里程预估、上下游价格等。
客户订单它是货主和运营方的唯一标识，货主的订单状态有，待计划、待调度、已调度、等待提货，取货中、运输中、已完成等多个状态。
客户需求订单创建成功以后，就开始进入到运输业务的第二阶段，运营根据一定的规则处理，将订单进行自营车辆运输、派送给承运方或者转给2C车主，这边的基本流程为：
1）审单
TMS系统对客户的需求订单做分析，分析出有问题的订单，比如信息填写不完整、地址解析错误等。
2）计划
计划和调度是运输业务的第二个阶段，它关系到整个运输的最终成本控制，是整个运输过程最重要的核心组成部分。
计划的目的，是为了解决时效优先还是成本优先，更多的作业场景是在这两者间作一个平衡处理。运营方作计划的规则处理，会受到以下3个条件约束：
常见的计划优化手段有：装载优化、路线优化。 运输计划的方式有很多，总之在满足时效的同时，成本最低是计划的主要目的，主要手段有三种：
关于城配：
考虑到TMS中订单量大、位置信息较为复杂，纯人力计划效率低，有时不能够满足客户的需求。
所以一些企业会根据订单结合计划承运方作出进一步的优化「智能调度」，利用算法围绕货物、车、路线、时间合理规划策略，实现最优资源的分配方案，完成最终的运输工作。
3）调度
把计划的订单进行派发给相应的承运方，这个过程称之调度。派发的渠道有三个，分别是自营、合作承运商和2C车主。
承运方接单后，会将调度的信息同步到WMS，包含车辆提货时间、运送车型等。告知到仓库的目的 ，可以让仓库可以提前备货，节省提货时间。下面所说比价计价模式，就是在调度的时候，根据各个承运方给出的报价，会选择合适的、性价比高的承运方。
4）跟踪
订单跟踪是运输业务的第三个阶段，承运方已经开始执行配送任务，实时跟踪订单状态，并将状态信息回传给运营方和货主。实时获取订单的当前状态，比如位置信息、货物的温度等，也方便平台管理司机，以保障订单任务的顺利完成。
提货：
跟踪监控：
签收：
中转站：
5）回单
一种发货的凭证，证明对方已收到货，也是最终货主结算的凭证。
收货方签收订单后，司机需要上传回单并更改状态完结订单，考虑到线下是作业，回单的照片清晰、其他敏感信息等原因外，运营方需要再次确认后将回单再返回给货主。
回单也分电子回单和纸质回单，电子回单：大部分情况下都采用这种，司机将签收方的订单，拍照上传即可；纸质回单，需要将回单寄回给货主，当然回单还是会扫描记录到TMS系统中。
在客户订单签收之前，都可以上报异常，上报异常需要对异常情况进行详细说明，比如货损损坏情况，进而进行协调处理，界定赔偿责任等。
上报异常的渠道可以通过电话联系运营方，由运营方的客服部门进行对接，异常订单也会进入到TMS异常管理中，并对异常进行记录、处理、跟踪工作。比如上述所说签收方在签收的同时发现问题，也可进行异常上报。
根据不同需求维护不同的价格模板，方便使用和管理。上游价格模板，对商家进行收款的计价规则； 下游价格模板，对承运方进行付款的计价规则。
根据制定好的价格模板，规定价格模板的应用条件。对符合该条件的商家套用模板进行计算，价格模板的调用可以从不同维度，比如：线路、商家、货物类型等。不管下游承运商，还是上游的货主，不同的客户都会应用不同的报价模板。
在结算管理中，对生成的订单费用进行审核，实际业务的变动对最终账单核算也会有调整，审核无误后生成最终的账单，然后由财务人员对照账单进行上下游的收款和付款。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
文章来源：人人都是产品经理 作者：亦果儿
用户的体验感对于一个产品来说，是至关重要的。一个好的产品能够充分照顾到用户的感受，从而拥有大批的忠实用户。用户体验地图是帮助产品设计者站在用户维度思考体验优化，提升用户体验的重要工具。
那么，应该如何打造用户体验地图及如何落地呢？我们在本文给出了解答。（本文对用户调研、用户行为路径、使用场景等也做出了详细解析）
它以可视化的形式，来表现一个用户使用产品或接受服务的体验情况，来发现用户在整个体验过程中的问题点与情绪点，从中提取出产品的优化点。
对于1-∞的产品来说，用户体验地图是用户增长策略的一部分，是产品优化的重要工具。
用户体验地图一般由以下几个部分组成：
用户体验地图的组成部分大同小异，可以根据自身分析内容增加或简化。小伙伴可以保存这张空白模板，直接拿去填内容哦~
我们给出了简洁明了的回答：
背靠着中国铁路总局，12306在基础票务预订服务上有着得天独厚的优势，但基于用户日益增加的多样化需求，以及越来越多的用户愿意为优质体验买单，竞争激烈的OTA们日益精进，与官方12306形成鲜明对比，本次优化就围绕12306流失最多的年轻用户群体展开。
本文以12306为例，主要针对购票流程（核心功能），提升交互易用性和用户体验，演示用户体验地图如何落地。首先我们来看一下用户体验地图的原型模板。
（上图建议保存）
根据地图原型的ABC区域，分别对应着A区的用户特征与需求，B区是用户行为、思考、情绪，以及C区的总结分析。A区+B区得出C区，A和B都基于用户，所以，了解用户——是梳理用户使用问题的基础和第一步。
经过我们团队的经验总结，得到绘制前的流程步骤如下图，下文会拆分步骤一一讲解。
体验地图的“用户”不是主观脑补出来的，而是通过定性调研和基于数据支撑所得出的，所以收集用户的信息是十分必要的。
以下我们通过用户群体数据和问卷调研数据（包括用户画像）来确定用户模型。
本文根据以上数据，仅锁定一线城市的主要用户群体，也就是高线年轻人群的购票流程优化。
笼统的“对某类用户使用产品的情况调研”是无法提供有价值的调研内容的，调研目的一定是颗粒度可细化的存在。
12306平台的下单耗时长，年轻用户流失率上升，对官方软件槽点颇多，品牌影响较为负面。本次调研，主要针对年轻用户在平台的购票路径，分析该用户群体，在下单过程中的操作节点与关注点，探索用户流失与差评的原因。
我们把社会属性相关的样本数据按不同维度归类，划分用户人群。比如按年龄、行业、职位等维度的典型特征，可以将12306APP的主要用户划分为：在校学生、企业白领、自由职业。
再加以问卷结果描述，得到了高线年轻产品使用者的虚拟画像。
在列问卷内容时，要注意12306是火车购票工具类软件，用户目的明确——刚性需求，所以问卷无需过多挖掘需求，而是锁定调研目的，研究APP体验本身，精准投放颗粒度较细的具体问题。如下：
团队花了2天时间，总共发了335份问卷，回收率80%，拿到了268份。图表较多就不详细展示过程了，重在方法。
根据统计结果，我们最终总结出了下列重点问卷结论：
把这些痛点、满意点，包括用户实际接触的界面或功能模块，都归纳记录下来，方便后续将这些痛点进行优化改进。
保存以上部分的相关数据和结论，我们已经了解了用户（进入角色），接下来要确定用户体验场景了（模拟人生）。
在做使用场景前，先通过产品设计者视角梳理出产品目前的用户行为路径，这个步骤的主要目的是找出复杂节点，降低操作成本。
它需要我们对操作流程进行拆解，将一个流程拆解成几个阶段，阶段又可以拆解成具体的操作节点。这样一来，我们可以分析每个动作节点存在的必要性。
根据上图的4步法，第一步——我们在确认主流程的情况下，罗列所有操作节点：
一定不能怕麻烦，用户所有的动作节点都要罗列。
然后我们要找出复杂的操作节点，也就是可以优化用户操作的节点，当然也不能主观地“我觉得”，用交互量化的方法可以快速帮助我们找到问题点：
1. 把每个操作交互定一个数值，即为操作成本。越是高阶越是隐藏的交互手势越复杂，所谓的“交互成本”也越高。这里我们规则为：
2. 通过简单的加减计算，就可以直观地看到复杂节点在哪里。
3. 通过计算，我们能够直观地看到用户操作最繁杂的部分集中于“选择站点城市”“车次查询”“选择乘车人”这三个操作流程中。此时，重新审视这几项繁杂操作节点，让用户在更少的步骤内完成操作是我们的目标，能一次点击完成的操作绝不让用户点击两次。
4.降低操作成本，可以从2个方面入手优化：对于复杂的节点，降低操作难度，用简单的操作替换复杂的；对于可有可无的节点，大胆地删除，减少操作步骤。
（由于精力有限，这块内容暂时不过多展开，因为还涉及很多知识点，以后慢慢讲解。当然，感兴趣的同学也可以自行查找资料，或在文章下方评论交流哦~）
明确了目标用户后，接下来需要我们发挥共情能力，代入用户视角走查产品。
从“带着需求”来（我要买车票），到“完成目标”（买到票）走的核心场景路径，梳理出来粗颗粒度的故事场景 。
【举个栗子】：
场景的梳理，先从颗粒度大的骨干场景出发，举个栗子：假如我们起床到公司这个场景，可以回想一下，在整个过程中我们经历了哪些大的阶段？
——经历了：起床—洗漱—出门—路上—到达。
基于大的阶段，我们可以继续拆分出颗粒度较小的二级故事场景，比如“洗漱”还可以拆解：换衣服—刷牙—洗脸—梳头。
拿到实例中，12306的购票流程是：查询车次—筛选车次—填写乘车信息—提交订单付款—买到票了
切忌在使用场景时流程颗粒度过细，忽略用户使用目的。
【加餐知识点】
这里先讲解一下，场景设计主要分为2类：一是挖掘需求，挖掘用户使用目的及动机；二是研究需求，在已有需求上深入研究和优化。
12306是从1-∞的出行工具类产品，用户的使用目的非常明确——买车票，因此使用场景一定是围绕【研究需求】展开。
运用4W1H场景分析法，我们得到用户使用场景：
在已经了解用户和确认了用户使用场景的基础上，根据以上得到的结论和机会点等资料，开始绘制用户体验地图。
文章开头拆解的组成内容还记得吗？
现在召集团队不同岗位的人员，共同努力填补网格空白处。最好从上到下从左到右开始，不用强求全部填满，因为用户体验地图并不是一锤定音的，它是不断分析和反复更新迭代的。
我们得到了用户体验地图成品：
用户体验地图是产品用户增长的策略工具之一，绘制完成后根据地图针对用户体验情绪与机会点探索解决方案。
绘制好体验地图后，工作并没有结束，还有2项重要的工作：
优化机会点：展开头脑风暴，讨论是否能有最佳方案，来满足用户的目标，提升用户满意度、优化体验
安排后续工作：按照情绪曲线、机会点价值大小，梳理优先级，安排后续工作
然后根据用户体验地图，按照用户情绪的低（解决痛点）、高（放大爽点）、中（思考分析），分别探索优化。
把所有问题点按照上述分类，首先解决用户情绪最焦虑的痛点问题，其次思考是否能把情绪高点继续优化到极致，让用户更嗨，而用户情绪平缓的地方，要研究分析，继续思考优化空间。
· 中转功能操作繁琐，推荐方案不够智能——减少交互步骤+增加智能方案推荐
· 视觉层级冗杂、票价信息不直观——F型分析法优化+增加票价显示
· 列表页排序算法升级（与产品开发相关，不做案例展示）
我们增加了智能方案推荐，并把中转车次与直达车次划在同一页面，优先展示直达车次。极大地增加了用户操作的易用性，可直观对比，减少页面跳转和加载等待时间。
通过多稿权重对比，在信息层级、功能突显和视觉样式中，择优选择了最终稿。
复杂节点降低操作成本，切换动效能直观看出阅读效率和易用性的提高。
通过F型视觉模型和十字交叉法梳理了信息层级，极大的提高了阅读效率。
日期选择由展开点按切换改为滑动切换，提高屏幕利用率的同时，更方便用户操作。
——情感化设计，魅力型功能，让嗨点更嗨。
情绪中线以下，都有优化空间。比如，
添加乘车人操作重复、耽误抢票——默认常用已选+页内抽屉拉起
筛选功能视觉较弱、触点易错——增加视觉识别与触点面积
……
这是一部分可以不断思考打磨的空间，虽然紧要程度低于用户情绪低点，但是花时间将产品从满足80%的用户到满足99%的用户，即使在大多数人看来是一种性价比很低的行为，但却是提升用户体验的绝佳方式。这也是大厂产品体验良好的原因。
文章有点长，感谢阅读。下面概括了一些文中的方法论知识点，方便读者回顾。
市面上有很多关于产品体验地图的文章，但多数是基于已有产品的劣势去直接绘制地图，绘制地图并不是目的，绘制好体验地图之后怎么分析优化才是目的，用户体验地图本身只是一个可视化工具。我们努力去剖析过程、记录方法论，希望初学者能够知其然并知其所以然。
文章来源：站酷 作者：挖设
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务
CDEC中国数字智能生态大会的前身为中国软件渠道大会，至今已经走到第十四届。覆盖20座城市，汇聚10000+优秀厂商、5000+渠道商，覆盖行业人群500000+，100+媒体深度报道，100+业界KOL参与演讲，促成合作数千家，大会发布权威研究报告《企业服务生态发展状况研究报告》十多本，打通企业数字化转型服务最后一公里。
2021年我们重新定义了CDEC的品牌视觉形象，以适应中国数字智能生态大会的全新定位。
文章来源：站酷 作者：许静工作室
蓝蓝设计的小编 http://www.lanlanwork.com