分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
作者：吴博
链接：https://www.jianshu.com/p/2dc805c6c007
来源：简书

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

我们知道浏览器自带的Checkbox复选框不怎么美观（这或许是我们看习惯了的缘故），而且复选框在不同的浏览器上显示的样式又有很大的差异，由于目前越来越多的人开始接受支持CSS3的现代浏览器，所以今天就简单的用一些CSS3代码来自定义Checkbox的显示方式，个人觉得比浏览器自带的Checkbox美观不少。

下面先来看一下最终实现效果

效果演示地址

效果图如下

 

下面来分析一下源代码，原理很简单，先把页面上<input type="checkbox" />的display设置为none，从而把它隐藏掉，然后利用CSS3代码来绘制与checkbox邻近的label元素：

HTML代码：

<input type="checkbox" id="checkbox-1-1" class="regular-checkbox" /><label for="checkbox-1-1"></label> <input type="checkbox" id="checkbox-1-2" class="regular-checkbox" /><label for="checkbox-1-2"></label> <input type="checkbox" id="checkbox-1-3" class="regular-checkbox" /><label for="checkbox-1-3"></label> <input type="checkbox" id="checkbox-1-4" class="regular-checkbox" /><label for="checkbox-1-4"></label>

CSS3代码：

.regular-checkbox + label { background-color: #fafafa; border: 1px solid #cacece; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 9px; border-radius: 3px; display: inline-block; position: relative;
}

下面的CSS代码可以让checkbox选中后出现阴影的效果，主要利用了box-shadow属性：

.regular-checkbox + label:active, .regular-checkbox:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);
}

radiobox的实现也是同样的原理，具体实现方式大家可以在线演示研究，也可以下载源码，非常简单实用。

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

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

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

工作生活中，决策是我们不可避免的难题。如何做出明智的选择，在分析过程中保持“理中客”，抓住用户的核心诉求，提升产品的用户体验，是用户研究持续关注的议题。

传统分析方法，存在的弊端

当我们调研用户需求的重要性时，通常采取两种方法：单刀直入的问 & 委婉含蓄的算。例如，为了提升产品的满意度，我们调研用户对于产品各项因素的重视程度，以便优先迭代用户的核心诉求。

1. 单刀直入的问

问题：您刚刚为产品的满意度进行评分时，请问您最看重的产品因素是哪个（或哪 1-3 个）？「多选」

处理方式：统计本题各个选项的频数，由高到低顺序排列，从而决定优先顺序。

这种方法的缺陷显而易见，一方面直接询问会显得有些突兀，众多选项的展示极大可能会扰乱用户脑中原本的想法，导致真实答案被选项的罗列顺序影响，另一方面这种方法只能得到各个因素重要性的排序，无法得到他们各自的权重（影响程度）。

2. 委婉含蓄的算

问题：

Q1：请问您对产品满意度的评分是多少？

Q2：请问您对产品各个因素的满意度评分分别是多少？

处理方式：采取总——分的评分模式，对产品整体满意度得分、各因素满意度得分进行因子分析或者回归分析，根据分析得到的结果计算出每个因素对整体满意度的贡献度，找到贡献度最高的因素。

这种方法是一种“马后炮式”的分析，根据当前用户的评分去“科学的猜测”，因为分析结果有很强的时效性。比如当期调研中，产品由于在功能 X 方面出现了问题，给用户的体验造成了伤害，那么分析的结果势必会呈现“功能 X 的重要度极高”的结论，但真实的情况可能是，用户长期不怎么关注功能 X，只是最近产品的问题造成用户短期内关注 X 功能。

那么，有没有其他方法来分析“用户最看重的因素/哪个因素最影响用户评分”，决策“哪个方案对用户评价/项目目标的推动力最大”呢？这次向大家隆重介绍层次分析法。

什么是层次分析法

层次分析法（The Analytic Hierarchy Process，简称 AHP），是美国运筹学家匹茨堡大学教授萨蒂于 20 世纪 70 年代初，在为美国国防部研究“根据各个工业部门对国家福利的贡献大小而进行电力分配”课题时，应用网络系统理论和多目标综合评价方法，提出的一种层次权重决策分析方法。

该方法根据问题的性质和要达到的总目标，将问题分解为不同的组成因素，并按照因素间的相互关联影响以及隶属关系将因素按不同层次聚集组合，形成一个多层次的分析结构模型，从而最终使问题归结为最低层(供决策的方案、措施等)相对于最高层(总目标)的相对重要权值的确定或相对优劣次序的排定。

层次分析法分两步走：建立层次结构 & 一致性检验，接下来我们一起看看这种方法如何应用：

在 M 项目中，“店东对 M 小组产生的整体价值的满意度”是一个重点跟踪的结果指标，项目组希望了解提升满意度各项抓手的过程表现及各自的重要度（对整体满意度的影响程度）。在综合考虑问卷篇幅、样本质量、重要度分析严谨性等方面，最终选择了层次分析法。

第一步、建立层次结构，形成问卷框架。首先明确四个主要抓手是通过怎样的路径来影响店东满意度的，产出多层级的结构，一般情况会采用“结果目标-抓手”两层 或“结果目标-分类-抓手”三层（本次示例中，店东对 M 小组价值提升的满意度是结果目标层，带团队的动力和带团队的能力是分类层）。

图 1 “店东对 M 小组价值提升满意度”的层次结构

然后在问卷中对各项抓手捉对，采用 9 分量表对比重要性（如果是三层结构，可以先对比分类层，再对比分类层下面各自的抓手。本次项目由于抓手数量较少，所以跳过分类层，直接将四个抓手两两对比）。本次案例中抓手数量是 4，根据排列组合的结果询问次数为 6 次。

图 2 重要度比较问卷

第二步、回收样本，做一致性检验。由于被访者在回答问卷时，可能对重要性的排序没有形成清晰稳定的认知，也可能没有仔细阅读或回答问卷，导致样本中有大量脏数据，比如会出现“A 比 B 重要、B 比 C 重要、C 比 A 重要”的逻辑矛盾，一致性检验可以通过矩阵分析有效的排除这类无效样本（分析过程此处省略一千字）。最终我们保留有效样本再次进行矩阵分析，可以得到各项抓手的重要度。

以虚拟的结果数据（非真实项目结果）为例，四个抓手对店东满意度的重要度如图 3 所示，其中，“平台资源倾斜”的重要度最高。

图 3 各项抓手重要度

三种方法利弊比较

图 4 三种方法的比较

延伸应用

层次分析法除了上述应用之外，还适用于业务方案决策、日常个人决策等多领域。

业务方案决策方面，仍然以“店东对 M 小组产生的整体价值的满意度”为例。我们在前文已经分析出了四个抓手的重要度，假设目前我们有 3 套方案可以提升店东满意度，需要从中选择一个进行落地。我们要做的仍然是两步：建立层次结构 & 一致性检验

邀请 3—8名项目专家（可以是项目评委、项目负责人、该项目相关领域的资深人士等）预估各方案在抓手层面的表现。

图 5 建立满意度层次结构

图 6 优势对比问卷

对数据进行一致性检验，并产出每个方案对各个抓手的推动力指数，这样我们就可以一目了然的看到，哪个方案对结果指标的推动力最强了。

图 7 方案比较结果

个人日常决策方面也是同样的道理，比如我们在纠结去哪个城市旅游、购买哪只基金的时候，都可以搭建相应的层次结构，把自己（或者最了解自己的人）作为调研样本进行层次分析，用科学的方法帮助自己找到内心的答案。

图 8 旅游目的地选择

图 9 购买基金选择

结语

决策不是拍脑袋赌运气的玄学事件，科学的方法能帮助我们理性地分析现状，作出明智的选择。相信掌握了层次分析法的你，不仅能在工作中锁定用户的核心诉求，也能在生活中摆脱选择恐惧的纠结，成为运筹帷幄的“小诸葛”。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

企业增长周期和用户生命周期这两个周期理论市面上皆有一些增长理论的定义。

从一般企业增长周期来看，会经历以下 5 个阶段：

• 阶段①：问题/解决方案匹配期 → 主要是调研客户的需求；
• 阶段②：最小可行性产品时期（MVP） → 寻求若干种最小化产品的建立方法；
• 阶段③：产品和市场匹配期 → 提升用户的黏度和体验；
• 阶段④：渠道和产品匹配时期 → 对高优先级的渠道进行大规模的投入；
• 阶段⑤：成熟期 → 并购，国际化和本地化

运营常用的用户生命周期理论 AARRR 对用户在产品中各个层级的状态也有所定义：

Acquisition→Activation→Retention→Revenue→Referral

每个公司的拳头产品或产品矩阵中的各个子产品可能处在不同的生命周期，在做用研探索时需要具体分析。以酷家乐在近两年的情况为例，其主打产品早已走过 0-1 的阶段，但在大的框架下会不间断的迭代，如工具功能、生态服务功能。

在这种情况下，用研和业务密集合作的增长类用研项目主要集中在企业增长周期的“阶段③：产品和市场匹配期”之后的阶段，目的是提升用户的粘度和体验，随着产品的螺旋上升，也会对阶段①-③做阶段性小循环；反映在AARRR模型上则是以「用户留存+用户推荐」为重点。

如何在业务中挑选高杠杆监测点

那么问题来了，如何从不同的生命周期进行用研重点拆解？除市场上比较通用的生命周期拆解外，不少公司内部会有一套更加适配业务的体现生命周期的分层。

以酷家乐的业务为例，根据两种主流用户分层定义，即工具用户分层（工具行为是核心行为）和全站用户分层来拆解，我们圈定出了增长和体验中的重点观测用户阶段（橙色标注）：

• 工具用户分层中，重点关注“沉默/流失用户”
• 全站用户分层中，重点关注“由注册用户和体验用户组成的纯新用户”

这些会被重点关注的逻辑为：

• 用户沉默或流失若是由产品客观原因造成，往往是遇到一些比较严重的问题，其有效反馈应该被当做高优先级去处理；
• 新用户的认知是潜在用户阶段接收市场培育的重要反应，也是其进入并使用产品、接受培育、融合进产品的黄金时期；
• 活跃/准深度/深度用户这些在目前的追踪体系中是被剔除的，暂时不关注在平台蜜月期的用户，但对全站用户的总体衡量还是有必要的。

常用用研目标和维度拆分

用户需求可以成为产品设计的导向、市场推广的方向，用户增长类型的需求转换成用研目标，一般是：

更具体一些，我们常用的问题维度：

常见思维误区：一定要频繁做沉默/流失用户分析么

这里有一个大家通常会陷入的思维误区：一定要从沉默/流失用户着手调研–他们后来为什么不太用我们的产品了。

通常，大家普遍认为只要可以分析出沉默/流失的原因，按照 list 上条目进行改进就能降低流失率。但可以换个思维，产品的价值更多的是由认可该产品的用户群体创造的，沉默/流失用户一定程度上属于对该类产品为非刚需状态/需求匹配失败而自然流失掉的人群（非目标用户）。

单纯从调研手段上来讲，沉默/流失用户的调研难度也是很大，定量方法在这里失去了作用，基本只能预先定义好调研圈选人群时“沉默/流失用户”的定义（这里要在平台定义的基础上进一步缩小范围），通过 cold call 的方式做调研，参与过此类项目执行的同学会发现几个点，尤其是对专业垂直产品（非 C 端产品）而言：

1. 原因中太多无效信息，如公司倒闭、转型，自己转行；
2. 获取的有效信息大概率和留存用户群体的调研较为一致。

总结一下，沉默/流失用户的调研可做，但在产品无重大变化的前提下，建议长周期循环，如 1 年做一次足够。服务好留存用户，了解产品何种原因打动用户、如何做会更好，从留存用户中探索各种场景比去硬啃沉默/流失用户更有意义。

当然，也会有一些例外的情况，如公司的一款子产品自推出以来，长期留存非常低，这种处于探索期的产品可能是由于与目标市场匹配不当或当前产品功能做的太差，这种情况会建议关注全生命周期的用户反馈，包括沉默、流失用户；若是因为与目标市场匹配不当，调整目标市场和人群为当务之急，若市场匹配程度尚可，但当前产品功能做的太差，则需重点关注产品概念与体验链路等问题。

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

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

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

作者：_林冲

简介  这篇文章主要介绍了vue.js学习之 如何在better-scroll加载完成后，自动滚动到最底部(示例代码)以及相关的经验技巧，文章约1091字，浏览量459，点赞数3，值得参考！

scrollToEndFlag: {
        type: Boolean,
        default: false
}

setTimeout(() => {
        this._initScroll()
        console.log(this.scroll.maxScrollY)
        if(this.scrollToEndFlag) {
            this.scroll.scrollTo(0,this.scroll.maxScrollY)
        }
}, 100)  

<scroll :scrollToEndFlag="scrollToEndFlag"> </scroll>

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

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

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

这么写的话只能定位到发送消息前的前一条消息，不能定位到最底部

    


        


            


            

        

        


            

                .then(
            

        

    

    


        


            


            

        

        


            

                this.$nextTick(() => {
            

        

    

    


        


            


            

        

        


            

                let msg = document.getElementById('chatRecord') // 获取对象
            

        

    

    


        


            


            

        

        


            

                msg.scrollTop = msg.scrollHeight // 滚动高度
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                )
            

        

    

解决：写在生命周期updated里面可以完美定位！

    


        


            


            

        

        


            

                updated(){
            

        

    

    


        


            


            

        

        


            

                // 聊天定位到底部
            

        

    

    


        


            


            

        

        


            

                let ele = document.getElementById('chatRecord');
            

        

    

    


        


            


            

        

        


            

                ele.scrollTop = ele.scrollHeight;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

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

文章来源：csdn

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

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