分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
作者：吳博
鏈接：https://www.jianshu.com/p/2dc805c6c007
來源：簡書

藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的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.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務