首頁(yè)

vue項(xiàng)目刷新當(dāng)前頁(yè)面的幾種方式

seo達(dá)人

在vue項(xiàng)目中，經(jīng)常會(huì)遇到需要刷新當(dāng)前頁(yè)面的需求。

因?yàn)関ue-router判斷如果路由沒(méi)有變化，是不會(huì)刷新頁(yè)面獲取數(shù)據(jù)的。



方式1：go(0)和reload()

通過(guò)location.reload()或是this.$router.go(0)兩種強(qiáng)制刷新方式，相當(dāng)于按F5，會(huì)出現(xiàn)瞬間白屏，體驗(yàn)差，不推薦。



方式2：定義一個(gè)空白路由頁(yè)面，路由跳轉(zhuǎn)到該空白頁(yè)后立馬跳回當(dāng)前頁(yè)，實(shí)現(xiàn)路由刷新。

在router路由表中定義一個(gè)空白路由，



 // 強(qiáng)制刷新當(dāng)前頁(yè)所用的中間跳轉(zhuǎn)頁(yè)

   {

        path: '/redirect/:path*',

        component: () => import('@/views/redirect/index')

  }



寫(xiě)一個(gè)空白路由組件



//redirect/index

<script>

export default {

  created() {

    const { params, query } = this.$route

    const { path } = params

    this.$router.replace({ path: '/' + path, query })

  },

  render: function(h) {

    return h() // avoid warning message

  }

}

</script>





在需要刷新的頁(yè)面使用



refresh() {

      // 刷新當(dāng)前路由

      const { fullPath } = this.$route

      this.$router.replace({

        path: '/redirect' + fullPath

      })

    }



這種方式，基本上能夠應(yīng)付絕大多數(shù)情況，推薦使用。

但是，有時(shí)候，有一些極端情況下，這種刷新不起作用，而又不想用第一種那種毛子般的簡(jiǎn)單粗暴的方式的話，下面的方式可以選擇使用。



方式3：provede/inject 方式

vue官方文檔說(shuō)了，這個(gè)依賴(lài)注入方式是給插件開(kāi)發(fā)使用的，普通應(yīng)用中不推薦使用。

但是，效果卻很好。

app.vue修改



<template>

  <div id="app">

    <router-view v-if="isRouterAlive" />

  </div>

</template>

<script>

export default {

  name: 'App',

  provide() {

    return {

      reload: this.reload

    }

  },

  data() {

    return {

      isRouterAlive: true

    }

  },

  methods: {

    reload() {

      this.isRouterAlive = false

      this.$nextTick(function(){

        this.isRouterAlive = true

      })

    }

  }

}

</script>





使用的時(shí)候：

demo.vue



<template>

  <div class="container">

  xxx

  </div>

</template>



<script>

export default {

  inject: ['reload], // 依賴(lài)注入

  name: 'Demo',

  computed: {

    message() {

      return '抱歉，您訪問(wèn)的頁(yè)面地址有誤或者該頁(yè)面不存在...'

    }

  },

  methods: {

  handleReload() {

  this.reload() // 直接在需要刷新的方法中調(diào)用這個(gè)reload()

}

  }

}

</script>



<style lang="scss" scoped>

</style>



原理就是通過(guò)依賴(lài)注入的方式，在頂部app通過(guò)v-if的顯示隱藏來(lái)強(qiáng)制切換顯示，以此來(lái)讓vue重新渲染整個(gè)頁(yè)面，app中通過(guò)provide方式定義的reload方法，在它的后代組件中，無(wú)論嵌套多深，都能夠觸發(fā)調(diào)用這個(gè)方法。具體說(shuō)明查看官方文檔。


評(píng)論(0) 瀏覽(2491)

引導(dǎo)頁(yè)設(shè)計(jì)淺析

ui設(shè)計(jì)分享達(dá)人

APP中的閃屏、啟動(dòng)頁(yè)、引導(dǎo)頁(yè)的區(qū)別，設(shè)計(jì)方法，個(gè)人案例分析，以及品牌解讀

【什么是閃屏 / 引導(dǎo)頁(yè)與閃屏的關(guān)系】

(部分引用觀點(diǎn)）



引導(dǎo)頁(yè)是閃屏的其中一種，一般出現(xiàn)在版本分布或大版本升級(jí)時(shí)。

我們先整體看一下閃屏頁(yè)的大致類(lèi)型：

（聲明：以下圖片來(lái)源于應(yīng)用截圖，僅作為學(xué)習(xí)交流使用）









一、常規(guī)閃屏


為什么叫常規(guī)閃屏？

因?yàn)檫@類(lèi)閃屏比較普通，我沒(méi)有想到什么更專(zhuān)業(yè)的詞匯，暫且就叫常規(guī)閃屏吧。這類(lèi)閃屏的使用國(guó)內(nèi)的和國(guó)外有點(diǎn)不同，因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">按照蘋(píng)果官方的說(shuō)法是，用戶(hù)打開(kāi)應(yīng)用能立即使用是最好的體驗(yàn)，例如：系統(tǒng)自帶的一些應(yīng)用，是沒(méi)有閃屏的。再甚者閃屏最好就是讓用戶(hù)感覺(jué)不到，和首頁(yè)能有一個(gè)完美的融合和過(guò)渡。

這種體驗(yàn)也很棒，國(guó)外的instagram、facebook等就是使用這種設(shè)計(jì)，閃屏長(zhǎng)得很像首頁(yè)，更像是一張加載類(lèi)的占位符。








當(dāng)然，因地制宜，國(guó)內(nèi)的我們已經(jīng)習(xí)慣了閃屏作為App品牌的宣傳和推廣手段，一般由logo+名稱(chēng)+slogan+品牌色組成，界面還是相對(duì)簡(jiǎn)潔明了的，但還是很明顯的違背了蘋(píng)果官方的指導(dǎo)說(shuō)法，但是沒(méi)辦法，這就是商業(yè)需要。


這樣設(shè)計(jì)也有利處，可以減少用戶(hù)在打開(kāi)App時(shí)的焦慮感，也可以讓用戶(hù)更直觀的了解品牌，傳遞一些情懷、理念，多看一次閃屏，也是讓用戶(hù)強(qiáng)化品牌記憶的過(guò)程，只是不知道是好的記憶點(diǎn)還是壞的，就要我們自己斟酌了。








二、廣告閃屏


廣告閃屏，顧名思義就是產(chǎn)品本身為了進(jìn)行流量變現(xiàn)從而獲得盈利，給一些商家打廣告或者進(jìn)行合作設(shè)計(jì)的一類(lèi)閃屏，這是無(wú)可厚非的。不過(guò)廣告閃屏自帶被“嫌棄”屬性，應(yīng)該很多用戶(hù)看到這類(lèi)閃屏的心理是比較排斥的。

至少對(duì)我來(lái)說(shuō)，我是很少關(guān)注這類(lèi)閃屏，除非閃屏設(shè)計(jì)的非常的酷炫，我愿意多看一下，否則的話我就想立刻把它關(guān)掉，所以在這類(lèi)閃屏上加上“倒計(jì)時(shí)(loading)和跳過(guò)”就顯得很必要，并且“跳過(guò)”的位置也要方便用戶(hù)點(diǎn)擊。

這類(lèi)閃屏最好只出現(xiàn)每天第一次打開(kāi)App時(shí)，避免讓用戶(hù)厭煩。不管出于何種目的，都需要在商業(yè)利益和用戶(hù)體驗(yàn)之間保持一個(gè)平衡，不然用戶(hù)會(huì)流失的很快，用戶(hù)流失了，何談?dòng)兀?

另外廣告閃屏和下面要說(shuō)的活動(dòng)閃屏一樣，會(huì)有一個(gè)模板：底部是閃屏圖片，上面蓋上一層logo模板。

App啟動(dòng)時(shí)會(huì)從服務(wù)器拉取閃屏數(shù)據(jù)，本地會(huì)保存logo模板。如果服務(wù)器更新了閃屏數(shù)據(jù)會(huì)拉取數(shù)據(jù)進(jìn)行展示，如果沒(méi)有更新或是網(wǎng)絡(luò)不佳，就會(huì)默認(rèn)展示緩存的閃屏數(shù)據(jù)，以免發(fā)生卡頓現(xiàn)象，以保證流暢的用戶(hù)體驗(yàn)。







三、活動(dòng)閃屏


活動(dòng)閃屏和廣告閃屏有點(diǎn)類(lèi)似，出于產(chǎn)品運(yùn)營(yíng)方面的需要，它起到活動(dòng)宣傳的作用，每年的雙十一、雙十二期間，各大電商App的閃屏都會(huì)用到活動(dòng)閃屏，還有一些商家自己造的一些節(jié)日：品牌周、年貨節(jié)、會(huì)員日、狂歡周…相信大家已經(jīng)見(jiàn)怪不怪了。


近期我留意到一個(gè)問(wèn)題，就是我們?cè)谑褂肁pp時(shí)，經(jīng)常會(huì)在應(yīng)用之間進(jìn)行切換使用。如果我們從其他應(yīng)用再次返回時(shí)，最好不要再加載一次閃屏，會(huì)給用戶(hù)很不好的用戶(hù)體驗(yàn)。目前使用下來(lái)，淘寶、天貓等這類(lèi)主流應(yīng)用都有這種問(wèn)題，但是我想這應(yīng)該他們有意為之。







四、節(jié)日閃屏


每逢一些節(jié)假日，各大品牌都會(huì)推出一些當(dāng)日的閃屏，那么為什么要設(shè)計(jì)節(jié)日閃屏？

我覺(jué)得有幾點(diǎn)原因：

       長(zhǎng)期看常規(guī)閃屏，用戶(hù)很容易會(huì)有視覺(jué)上的一種疲勞，節(jié)日閃屏?xí)o用戶(hù)一種不經(jīng)意的驚喜和新鮮感；

       可以蹭一蹭節(jié)日的熱點(diǎn)，提升產(chǎn)品本身的品牌調(diào)性；

       在節(jié)日給用戶(hù)以問(wèn)候和關(guān)懷，和用戶(hù)在情感上產(chǎn)生共鳴，從而更好的連接用戶(hù)和產(chǎn)品，我想這應(yīng)該是最重要的原因。


節(jié)日閃屏比較吸引用戶(hù)的注意力，它不像廣告類(lèi)閃屏，我看見(jiàn)這類(lèi)閃屏就會(huì)忍不住的多瞅幾眼，所以設(shè)計(jì)這類(lèi)閃屏的時(shí)候要非常重視，因?yàn)橛脩?hù)愿意等待，這是非常求之不得的，這就需要設(shè)計(jì)師具有比較強(qiáng)的表現(xiàn)能力了。

我們?cè)谠O(shè)計(jì)的時(shí)候可以先進(jìn)行思維上的發(fā)散，或者是逆向思維之類(lèi)的，比如：春節(jié)將近，我們可以聯(lián)想到是什么，理清一個(gè)思緒，要有節(jié)日的氛圍，可以活潑、可愛(ài)、夸張…切忌呆板。

 







五、大版本升級(jí)閃屏（引導(dǎo)頁(yè)）


在App進(jìn)行了大版本升級(jí)后，要向用戶(hù)展示產(chǎn)品新功能的操作方法。這類(lèi)閃屏也可以稱(chēng)為引導(dǎo)頁(yè)，頁(yè)面數(shù)量控制在3-5頁(yè)，每一頁(yè)都有一個(gè)對(duì)應(yīng)的主題，主題要精簡(jiǎn)，切忌文字過(guò)多。


而且每一頁(yè)設(shè)計(jì)形式要類(lèi)似，否則會(huì)給用戶(hù)一種視覺(jué)落差感。頁(yè)面上要加上“跳過(guò)”功能，因?yàn)橛脩?hù)更希望盡快體驗(yàn)新版本，而不是看你的這些教導(dǎo)，在最后一頁(yè)要加上類(lèi)似“立即體驗(yàn)”的button。







——分割線【品牌傳達(dá)力】——










啟動(dòng)頁(yè)面告訴用戶(hù)“我是誰(shuí)”“我是做什么的”，開(kāi)頭跟用戶(hù)做了自我介紹，引導(dǎo)頁(yè)的目的主要是告訴用戶(hù)：“我該怎么使用”或者是“我有什么亮點(diǎn)”（重點(diǎn)宣傳的功能），借用男女相親例子，雙方介紹完自己之后，開(kāi)始展示自己有什么優(yōu)勢(shì)，好的引導(dǎo)頁(yè)設(shè)計(jì)直接關(guān)系到用戶(hù)是否“對(duì)你有興趣”想一進(jìn)“了解你”。

從上圖可以看到，引導(dǎo)頁(yè)在品牌傳達(dá)力上居首位，其次應(yīng)用市場(chǎng)說(shuō)明圖。








【引導(dǎo)頁(yè)展示目的】

以下盡量列舉了金融相關(guān)app截圖，僅供學(xué)習(xí)使用



引導(dǎo)頁(yè)定義比較廣，往小了講，我們一般會(huì)認(rèn)為在用戶(hù)初次打開(kāi)應(yīng)用時(shí)跳出的幾張介紹應(yīng)用功能的頁(yè)面就叫做引導(dǎo)頁(yè)；那往大了說(shuō)，在用戶(hù)使用某個(gè)功能前就能幫助用戶(hù)降低學(xué)習(xí)成本的頁(yè)面或存在引導(dǎo)屬性的彈窗都可以稱(chēng)為引導(dǎo)頁(yè)。

先從引導(dǎo)頁(yè)展示的目的出發(fā)，再結(jié)合實(shí)際app情況去確定宣傳標(biāo)題，最后結(jié)合不同的設(shè)計(jì)展示方式以及動(dòng)效。







一、產(chǎn)品特色介紹


多數(shù)時(shí)候，我們初次打開(kāi)應(yīng)用會(huì)看到下面這樣的引導(dǎo)頁(yè)：


可以看到一個(gè)共通點(diǎn)——即頁(yè)面呈現(xiàn)的內(nèi)容為該 App 的主功能或新功能推薦，或者是對(duì)剛迭代的功能做了哪些優(yōu)化的說(shuō)明。

理想情況是：用戶(hù)能了解這次產(chǎn)品做了哪些優(yōu)化，幫助用戶(hù)更清晰地了解產(chǎn)品。







二、操作引導(dǎo)


這類(lèi)引導(dǎo)會(huì)出現(xiàn)在內(nèi)容頁(yè)面，直接引導(dǎo)用戶(hù)去操作相關(guān)功能

蒙版引導(dǎo)通常緊貼著界面流程進(jìn)行而出現(xiàn),使用透明色間隔形式加上簡(jiǎn)單指示性文字與圖形，總是能夠簡(jiǎn)潔明了地告知用戶(hù)產(chǎn)品的功能或者使用方法，并且由于其輕量的屬性會(huì)大大減少用戶(hù)的閱讀時(shí)間。設(shè)計(jì)得當(dāng)?shù)拿砂嬉龑?dǎo)不僅可以與其他引導(dǎo)相輔相成，同時(shí)也能夠增加用戶(hù)對(duì)產(chǎn)品的好感度。

它的好處就是清晰明了，直接讓用戶(hù)知道你想表達(dá)什么。它的實(shí)際效果會(huì)比純內(nèi)容引導(dǎo)頁(yè)好很多，但同時(shí)也會(huì)有一個(gè)問(wèn)題，即打擾用戶(hù)操作。

這樣的方式已經(jīng)解決了內(nèi)容操作引導(dǎo)的問(wèn)題，但其實(shí)這種方法也會(huì)使用戶(hù)厭倦，所以?xún)?nèi)容不易過(guò)多。







三、理念傳達(dá)

以傳達(dá)態(tài)度理念，生活方式等為主，比較概念和意義上的東西，吸引用戶(hù)達(dá)到某種程度的共鳴，從而產(chǎn)生吸引力。







四、側(cè)面實(shí)力烘托


多用于有實(shí)力/特色的產(chǎn)品或者企業(yè)，展示自身優(yōu)勢(shì)，讓用戶(hù)對(duì)產(chǎn)品產(chǎn)生信賴(lài)感。










五、問(wèn)題解決


指出用戶(hù)所面臨的問(wèn)題，而你的產(chǎn)品正好可以解決。



結(jié)合自身app/企業(yè)所具有的優(yōu)勢(shì)；產(chǎn)品的功能特色；產(chǎn)品的定位；等相應(yīng)的展示目的。也存在混合展示，不過(guò)要把握好標(biāo)題的設(shè)定，在標(biāo)題與設(shè)計(jì)上達(dá)到統(tǒng)一。








【引導(dǎo)頁(yè)設(shè)計(jì)方法】


在確定了引導(dǎo)頁(yè)展示目的之后，下面整理了在引導(dǎo)頁(yè)設(shè)計(jì)過(guò)程中的方法。

目前比較常見(jiàn)的幾類(lèi)引導(dǎo)頁(yè)的類(lèi)型（電商除外），根據(jù)產(chǎn)品的特點(diǎn)來(lái)確定設(shè)計(jì)風(fēng)格，總體沒(méi)有固定規(guī)則。










一、圖文結(jié)合


使用有關(guān)聯(lián)性的圖片，同種版式，優(yōu)點(diǎn)是感情表達(dá)直觀簡(jiǎn)單，畫(huà)面沖擊感強(qiáng)，缺點(diǎn)是泛表達(dá)，不能表達(dá)內(nèi)容。









二、產(chǎn)品界面描述型


功能描述型，使用app畫(huà)面說(shuō)明，通常在版本更新時(shí)用來(lái)對(duì)新功能進(jìn)行重點(diǎn)描述，是目前比較常見(jiàn)的引導(dǎo)頁(yè)表達(dá)方法之一，比較通用。









三、模擬應(yīng)用場(chǎng)景


通常用插畫(huà)方式表現(xiàn)，通過(guò)圖文結(jié)合的方式全方位闡述中心思想，插畫(huà)風(fēng)格具有豐富的多樣性，同時(shí)又能貼切表達(dá)主題，所以在app中出現(xiàn)頻率越來(lái)越高。

以下列舉了百度金融的版本引導(dǎo)頁(yè)，通過(guò)系列插圖表現(xiàn)貼心、安心、用心、省心、隨心，插畫(huà)緊密契合主題，完美使用排比句的形式。











四、吉祥物的運(yùn)用


一個(gè)成熟的app通常會(huì)吉祥物來(lái)表現(xiàn)，啟動(dòng)頁(yè)是用戶(hù)打開(kāi)app第一眼看到的地方，吉祥物可以讓用戶(hù)在2-3秒時(shí)間內(nèi)深刻體會(huì)到產(chǎn)品的核心價(jià)值觀。












五、代交互 動(dòng)效的


這類(lèi)啟動(dòng)頁(yè)通常是在頁(yè)面切換中加入一些動(dòng)效果的設(shè)計(jì)，使得在交互體驗(yàn)上更加突出，與靜態(tài)頁(yè)面間的切換顯得更加生動(dòng)有趣。

動(dòng)畫(huà)呈現(xiàn)方式趣味性更高一些，開(kāi)發(fā)成本相對(duì)也會(huì)高一些。











六、視頻類(lèi)/動(dòng)畫(huà)類(lèi)


這類(lèi)的理論上不叫啟動(dòng)頁(yè)，叫開(kāi)篇?jiǎng)赢?huà)更貼切，打開(kāi)app通常為一小段視頻或動(dòng)畫(huà)引入頁(yè)面











【實(shí)際案例分析】


閃屏/引導(dǎo)頁(yè)的設(shè)計(jì)方法很多，但要在設(shè)計(jì)之前充分考慮到產(chǎn)品定位和應(yīng)用場(chǎng)景。

下面引用我自己的案例分析，因?yàn)閷?duì)產(chǎn)品理解不夠到位，設(shè)計(jì)過(guò)程比較坎坷，經(jīng)歷了幾個(gè)版本的優(yōu)化。








【引申思考】


對(duì)晉盈匯app來(lái)說(shuō)：

1.用戶(hù)層面上，在不同版本的情況下需要緊跟不同的用戶(hù)引導(dǎo)頁(yè)，尤其這類(lèi)理財(cái)類(lèi)等APP，使用操作都是比較繁瑣，因此需要用戶(hù)引導(dǎo)幫助用戶(hù)玩好APP；

2.品牌形象上，可以深化品牌價(jià)值，比如提煉產(chǎn)品slogon，吉祥物等，啟動(dòng)頁(yè)是用戶(hù)打開(kāi)app，第一眼看到的地方，需要讓用戶(hù)深刻體會(huì)到產(chǎn)品的核心價(jià)值觀。

3.商業(yè)用途上，可以利用啟動(dòng)頁(yè)配合營(yíng)銷(xiāo)事件，實(shí)現(xiàn)商業(yè)價(jià)值。

4.從技術(shù)層面，程序可以利用啟動(dòng)頁(yè)的2~3秒內(nèi)，預(yù)加載一些東西，使得后面的用戶(hù)體驗(yàn)更好。


啟動(dòng)頁(yè)更多的是在啟動(dòng)過(guò)程中的2~3秒內(nèi)，體現(xiàn)app的核心的品牌價(jià)值，而品牌價(jià)值通常體現(xiàn)在產(chǎn)品的情感化設(shè)計(jì)上。


情感化設(shè)計(jì)基于三個(gè)基本層次水平：本能水平的設(shè)計(jì)、行為水平的設(shè)計(jì)、反思水平的設(shè)計(jì)。

本能水平的設(shè)計(jì)——外形（UI界面，整體視覺(jué)感受）；
行為水平的設(shè)計(jì)——使用的樂(lè)趣和效率（把完成目標(biāo)前的過(guò)程樂(lè)趣化，如何最便捷的觸達(dá)相應(yīng)功能，或達(dá)成某結(jié)果）；
反思水平的設(shè)計(jì)——自我形象、個(gè)人滿意、記憶（強(qiáng)化品牌傳播，構(gòu)建品牌形象，讓品牌成為一種文化）。


情感化設(shè)計(jì)點(diǎn)：登陸界面、啟動(dòng)頁(yè)、引導(dǎo)頁(yè)、節(jié)日閃屏、404、刷新加載...




強(qiáng)化品牌標(biāo)識(shí)，有利于品牌傳播



上圖是美團(tuán)外賣(mài)的閃屏，以插畫(huà)這種具有親和力的表現(xiàn)手法去搭建一個(gè)場(chǎng)景，講一個(gè)小故事隱喻一個(gè)情感。然后傳遞給用戶(hù)一個(gè)主題。而插畫(huà)下方，則是美團(tuán)的品牌標(biāo)識(shí)：袋鼠LOGO、文案“美團(tuán)外賣(mài)，送啥都快”。


當(dāng)你聽(tīng)到電腦發(fā)出“滴滴滴”的時(shí)候，你就知道這是QQ來(lái)消息了，聲音也是一種品牌標(biāo)識(shí)。



彌補(bǔ)產(chǎn)品在用戶(hù)使用過(guò)程中發(fā)生的意外



上圖是ofo共享單車(chē)在用戶(hù)退押金時(shí)的三個(gè)提示頁(yè)面，分別是告訴用戶(hù)ofo的作用是讓你便捷輕松出行，退押金后損失的優(yōu)惠，最后是用利益誘惑你。從三個(gè)層面去打用戶(hù)的痛點(diǎn)。不過(guò)確切來(lái)說(shuō)只有第一個(gè)界面算是與用戶(hù)情感化交流，后兩個(gè)算是再利用人的貪欲。


關(guān)于文案的情感化設(shè)計(jì)要分情況，根據(jù)APP所分領(lǐng)域、調(diào)性和目標(biāo)用戶(hù)人群的特性而定。



轉(zhuǎn)自：站酷-嗚嗚吉良斯基

評(píng)論(0) 瀏覽(3718)

如何設(shè)計(jì)企業(yè)級(jí)的UI組件庫(kù)？

資深UI設(shè)計(jì)者

產(chǎn)品：這次需求很簡(jiǎn)單，對(duì)比上期只有字段和操作項(xiàng)的差異，把上次的稿子直接復(fù)制一下應(yīng)該不用很多時(shí)間吧？

交互：上次你是不是做過(guò)高級(jí)篩選組合？我這期需求要用到，你把那部分稿子發(fā)給我用用吧。

研發(fā)：這個(gè)組件我在其他模塊里看到過(guò)已有樣式，這次為什么用不一樣的？不然又要重復(fù)開(kāi)發(fā)呀，能不能統(tǒng)一一下。

視覺(jué)：同一個(gè)按鈕在不同的模塊顏色不一樣誒，這次要和哪個(gè)模塊一致?。?

……

通過(guò)以上對(duì)話不難看出，最常出現(xiàn)在需求溝通與研發(fā)過(guò)程中，由于缺少統(tǒng)一的規(guī)范和標(biāo)準(zhǔn)化體系，導(dǎo)致實(shí)施環(huán)節(jié)各方溝通成本高，造成設(shè)計(jì)成果與實(shí)現(xiàn)有一定差距，影響用戶(hù)體驗(yàn)；通用組件和業(yè)務(wù)組件混用，導(dǎo)致設(shè)計(jì)模式和代碼復(fù)用率低。尤其是當(dāng)業(yè)務(wù)發(fā)展到一定體量時(shí)，對(duì)于復(fù)雜產(chǎn)品的大量重復(fù)且類(lèi)似的需求場(chǎng)景，如果沒(méi)有一種的工具和規(guī)范來(lái)協(xié)同工作，將大大影響團(tuán)隊(duì)的生產(chǎn)及溝通效率。

問(wèn)題

  • 認(rèn)知：產(chǎn)品、研發(fā)、設(shè)計(jì)師對(duì)于同一需求都有自己理解的解決方案，缺少統(tǒng)一規(guī)范的約束，難以達(dá)成共識(shí)。
  • 效率：設(shè)計(jì)效率低，交互原型的維護(hù)成本及上下游團(tuán)隊(duì)的溝通成本高，易造成不專(zhuān)業(yè)的印象。
  • 品質(zhì)：認(rèn)知和效率的局限性，最終導(dǎo)致實(shí)施落地的產(chǎn)品質(zhì)量和用戶(hù)體驗(yàn)難以得到保障。

解決

大家應(yīng)該都知道樂(lè)高（LEGO）積木，它是一種可以互相嵌套組合的塑料積木，形狀共有 1300 多種，每種形狀都有 12 種不同的顏色，可以拼插出多種造型。其實(shí)組件庫(kù)的工作方式就很像樂(lè)高，通過(guò)小元件的互相嵌套來(lái)產(chǎn)生多種組件或模塊，多種組件模塊結(jié)合生成頁(yè)面結(jié)構(gòu)。我們先來(lái)梳理一個(gè)概念，組件庫(kù)是什么？

組件庫(kù)是設(shè)計(jì)系統(tǒng)的一部分，是在我們常規(guī)界面設(shè)計(jì)過(guò)程中可以直接用來(lái)制作交互圖例和搭建頁(yè)面的組件集合，它可以作為單個(gè)組件獨(dú)立存在，也可以通過(guò)多個(gè)組件組合而成的結(jié)構(gòu)或模式來(lái)解決類(lèi)似場(chǎng)景的設(shè)計(jì)問(wèn)題。組件庫(kù)是在約束條件下去構(gòu)建解決方案的過(guò)程，所以組件的使用也需遵循一定的規(guī)范，按照一套標(biāo)準(zhǔn)化的體系復(fù)用于多個(gè)業(yè)務(wù)場(chǎng)景。

一個(gè)有效的組件庫(kù)，可以幫助設(shè)計(jì)師和研發(fā)提高工作效率，提升設(shè)計(jì)專(zhuān)業(yè)度的同時(shí)讓產(chǎn)品本身的體驗(yàn)更加一致、可學(xué)，品牌感更強(qiáng)，它所具備的基本特征一定是通用的、靈活的、復(fù)用的。

  • 通用性：意味著足夠基礎(chǔ)和常見(jiàn)且不帶業(yè)務(wù)屬性，參與設(shè)計(jì)環(huán)節(jié)的每個(gè)人都應(yīng)該知道這個(gè)組件的功能及目的，同時(shí)具備一定擴(kuò)展性。
  • 靈活性：要求元件的組合需靈活，可以在不同場(chǎng)景下通過(guò)互相組合來(lái)快速搭建交互框架原型圖，并根據(jù)不同頁(yè)面結(jié)構(gòu)的演變來(lái)適應(yīng)新的業(yè)務(wù)需求。
  • 復(fù)用性：指的是適用于多個(gè)業(yè)務(wù)或產(chǎn)品，在設(shè)計(jì)過(guò)程和研發(fā)過(guò)程中都可以高頻復(fù)用。

那么用組件庫(kù)這種標(biāo)準(zhǔn)化體系來(lái)完成設(shè)計(jì)方案時(shí)，到底能帶來(lái)怎樣的價(jià)值？

組件庫(kù)的價(jià)值

保證產(chǎn)品體驗(yàn)的一致性：對(duì)于一個(gè)含有多業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，每個(gè)獨(dú)立的業(yè)務(wù)系統(tǒng)雖然在功能上有一定區(qū)別，但整體的用戶(hù)體驗(yàn)需要滿足基本的一致性。比如，當(dāng)我使用同一個(gè)產(chǎn)品中的業(yè)務(wù)系統(tǒng) A 和業(yè)務(wù)系統(tǒng) B 時(shí)，我能通過(guò)類(lèi)似的頁(yè)面結(jié)構(gòu)、組件及樣式的一致性、操作反饋乃至提示文案結(jié)構(gòu)的一致性，來(lái)感知到我使用的A、B業(yè)務(wù)系統(tǒng)隸屬于同一個(gè)產(chǎn)品。

提升設(shè)計(jì)師的效率：在需求量巨大且需求來(lái)自不同的業(yè)務(wù)線時(shí)，需要逐一繪制頁(yè)面及組件，造成大量重復(fù)勞動(dòng)，并且在評(píng)審及需求溝通環(huán)節(jié)還可能存在不斷地細(xì)節(jié)調(diào)優(yōu)。所以對(duì)于設(shè)計(jì)師而言，組件的高頻復(fù)用能大大提升設(shè)計(jì)效率，使設(shè)計(jì)師更多的將精力聚焦于理解和解決用戶(hù)的實(shí)際問(wèn)題。

提升產(chǎn)研團(tuán)隊(duì)的效率：通用場(chǎng)景及普通需求直接按規(guī)范進(jìn)行設(shè)計(jì)和研發(fā)，減少上下游對(duì)同一頁(yè)面及組件使用方式的不同理解而產(chǎn)生的多余溝通成本。

利于沉淀設(shè)計(jì)規(guī)范：組件本身的設(shè)計(jì)和使用方式就可以直接作為交互和視覺(jué)規(guī)范的一部分，按照統(tǒng)一的設(shè)計(jì)規(guī)范來(lái)確定需要使用的主題色、組件樣式、組合方式及頁(yè)面結(jié)構(gòu)，可以快速搭建出一個(gè)或多個(gè)產(chǎn)品的交互框架。

構(gòu)建「FishDesign」企業(yè)級(jí)UI組件庫(kù)

那么如何構(gòu)建一個(gè)企業(yè)級(jí) UI 組件庫(kù)？

我將用前段時(shí)間參與的「FishDesign企業(yè)級(jí)UI組件庫(kù)」項(xiàng)目為例，通過(guò)在網(wǎng)易七魚(yú)產(chǎn)品中的應(yīng)用，來(lái)介紹一個(gè)企業(yè)級(jí) UI 組件庫(kù)的設(shè)計(jì)原則，內(nèi)容構(gòu)成包含哪些類(lèi)型和元素，每種組件類(lèi)型在分類(lèi)和設(shè)計(jì)過(guò)程中是如何考量的。本文側(cè)重講述構(gòu)建一個(gè)組件庫(kù)所涵蓋的內(nèi)容，而不是某組件類(lèi)別本身的設(shè)計(jì)方法。

顧名思義，「企業(yè)級(jí)」意味著 FishDesign 所服務(wù)的業(yè)務(wù)都是具備一定體量的，可能是服務(wù)一個(gè)包含了多個(gè)獨(dú)立子業(yè)務(wù)系統(tǒng)的大型復(fù)雜產(chǎn)品，比如網(wǎng)易七魚(yú)；也可能是同時(shí)服務(wù)多款產(chǎn)品，比如網(wǎng)易七魚(yú)和網(wǎng)易定位等。

組件庫(kù)是幫助設(shè)計(jì)者及前端工程師快速構(gòu)建業(yè)務(wù)系統(tǒng)的工具，除了最重要的組件內(nèi)容，還需要設(shè)計(jì)原則、配色方案及布局規(guī)范來(lái)指導(dǎo)具體業(yè)務(wù)產(chǎn)品的設(shè)計(jì)有效落地。

1. 設(shè)計(jì)原則

基于 FishDesign 目前主要是幫助搭建 B 端企業(yè)級(jí)產(chǎn)品，而 B 端業(yè)務(wù)的產(chǎn)品目的決定了它所才采取的設(shè)計(jì)模式，所以我們將用以下四點(diǎn)作為塑造組件庫(kù)的設(shè)計(jì)原則：

  • 簡(jiǎn)潔：如無(wú)必要，勿增實(shí)體，慎重篩選客戶(hù)當(dāng)前需要信息內(nèi)容。
  • 直接：提供用戶(hù)操作后的直接反饋，保證用戶(hù)的操作結(jié)果符合預(yù)期。
  • 優(yōu)雅：設(shè)計(jì)方案追求優(yōu)雅，給使用者有質(zhì)感的操作感受。
  • 適應(yīng)性：設(shè)計(jì)方案需提供可擴(kuò)展能力及適應(yīng)性，以適應(yīng)不同模式的企業(yè)使用。

2. 顏色

產(chǎn)品會(huì)根據(jù)自身的產(chǎn)品目標(biāo)和受眾群體去選定產(chǎn)品的配色方案。前文提到，一個(gè)有效的組件庫(kù)需滿足通用性、靈活性、復(fù)用性，像配色方案就應(yīng)該能被靈活自定義來(lái)應(yīng)對(duì)多樣化的訴求。以網(wǎng)易七魚(yú)為例（下文均以網(wǎng)易七魚(yú)為例），設(shè)置了 1 種主色，4 種輔助色和 6 種中性色來(lái)搭建一致的外觀感受。

  • 主色：選擇藍(lán)色系來(lái)傳達(dá)智能服務(wù)、信任可靠、技術(shù)創(chuàng)新的品牌形象。
  • 輔助色：除了品牌主色調(diào)藍(lán)色，在輔助色中也存在一樣的藍(lán)色，那是因?yàn)樗{(lán)色是相對(duì)泛用性較廣的色系，用于產(chǎn)品中的主操作按鈕、文字按鈕或 icon 等。紅色喚起注意并昭示危險(xiǎn)，所以一般用于謹(jǐn)慎操作及錯(cuò)誤提示。黃色則常用于警示信息，提示用戶(hù)操作可能帶來(lái)的風(fēng)險(xiǎn)及后果。綠色能傳遞安全和健康的情緒感受，用于正向反饋提示或成功操作的引導(dǎo)。
  • 中性色：一般采取黑灰色調(diào)來(lái)展示產(chǎn)品的文本信息、背景和邊框色，用來(lái)表現(xiàn)層次結(jié)構(gòu)。

3. 布局規(guī)范

為處理多業(yè)務(wù)中網(wǎng)頁(yè)設(shè)計(jì)區(qū)域內(nèi)的信息收納問(wèn)題，我們用規(guī)則的網(wǎng)格陣列來(lái)指導(dǎo)和規(guī)范版面布局以及信息分布，即柵格系統(tǒng)和頁(yè)面布局。FishDesign 在 12 柵格系統(tǒng)的基礎(chǔ)上，將整個(gè)設(shè)計(jì)區(qū)域按照 24 等分的原則進(jìn)行劃分，來(lái)增加頁(yè)面的相似度，提升用戶(hù)體驗(yàn)。

我們通過(guò)基本的配色及布局規(guī)范解決了產(chǎn)品風(fēng)格及信息區(qū)塊框架的設(shè)計(jì)，那組件庫(kù)中重要的組件部分，是如何作用于產(chǎn)品搭建的？Brad Frost 提出的「原子化設(shè)計(jì)理論」可以幫助我們更好的理解，原子化設(shè)計(jì)的靈感來(lái)自于現(xiàn)實(shí)世界當(dāng)中的分子結(jié)構(gòu)，UI 中顆粒度最小的元素，即「原子」，組成了顆粒度較大的元件，即「分子」；而諸多分子又組成了更加復(fù)雜的組件與模塊，即「有機(jī)體」。

組件庫(kù)構(gòu)建之初無(wú)法一應(yīng)俱全，是需要后續(xù)不斷的維護(hù)與迭代的。如何在最初海量組件中圈定適合的組件范圍呢？最合適的切入點(diǎn)就是從身邊的業(yè)務(wù)場(chǎng)景出發(fā)，從最基本、最簡(jiǎn)單、最小的元素入手。

4. 組件分類(lèi)

我們根據(jù)當(dāng)下已有的業(yè)務(wù)場(chǎng)景和對(duì)往后一段時(shí)期的業(yè)務(wù)發(fā)展方向進(jìn)行規(guī)劃，將組件庫(kù)的組件類(lèi)型分為通用組件和業(yè)務(wù)組件。一般業(yè)務(wù)組件庫(kù)是不對(duì)外的（畢竟使用場(chǎng)景特殊也有限，放出來(lái)參考意義不大），所以在 FishDesign 官網(wǎng)只能看到通用組件部分。

  • 通用組件：指適用范圍廣、復(fù)用頻次高，可復(fù)用于多個(gè)業(yè)務(wù)且不包含業(yè)務(wù)邏輯。比如導(dǎo)航欄、按鈕、toast、彈窗等。
  • 業(yè)務(wù)組件：這類(lèi)組件對(duì)比通用組件而言，最大的特點(diǎn)就是包含了較多業(yè)務(wù)屬性，跟產(chǎn)品功能有較強(qiáng)的關(guān)聯(lián)性，所以影響到適用范圍可能僅限于 1~2 個(gè)業(yè)務(wù)系統(tǒng)或特殊場(chǎng)景，且復(fù)用頻次不高。比如網(wǎng)易七魚(yú)的在線和呼叫系統(tǒng)中的咨詢(xún)分類(lèi)組件。

一個(gè)大型復(fù)雜的業(yè)務(wù)產(chǎn)品通常有不止一位設(shè)計(jì)師或前端工程師參與設(shè)計(jì)，需要在多種處理方式中選擇合適的設(shè)計(jì)模式來(lái)解決不同的場(chǎng)景問(wèn)題，這要求根據(jù)組件屬性的差異，需對(duì)通用組件做細(xì)分，那么如何確定通用組件中的子分類(lèi)呢？

  • 競(jìng)品學(xué)習(xí)與研究，窮舉該部分產(chǎn)品類(lèi)型中的組件類(lèi)型。
  • 遍歷自己所負(fù)責(zé)產(chǎn)品內(nèi)已有的業(yè)務(wù)場(chǎng)景，提取并整理業(yè)務(wù)場(chǎng)景中所用到的組件。
  • 將整理好的兩部分組件進(jìn)行篩選去重，保留高頻通用的部分。比如同樣是下拉篩選組件，由于缺少統(tǒng)一規(guī)范和組件，可能導(dǎo)致的后果就是在同一產(chǎn)品不同業(yè)務(wù)系統(tǒng)的相同場(chǎng)景下，使用的組件從樣式到交互方式都不一致。我們要做的就是對(duì)這部分在類(lèi)似業(yè)務(wù)場(chǎng)景中使用了多種表達(dá)形式的組件做合并去重，然后通過(guò)設(shè)計(jì)組內(nèi)審來(lái)圈定最后通用組件的范圍。
  • 基于組件的屬性和使用場(chǎng)景，對(duì)圈定的組件范圍進(jìn)行歸類(lèi)。

由上述步驟，我們將通用組件繼續(xù)細(xì)分為五個(gè)子類(lèi)別：基礎(chǔ)組件、導(dǎo)航、數(shù)據(jù)錄入、數(shù)據(jù)展示、操作反饋。

  • 基礎(chǔ)組件：即按鈕、圖標(biāo)等，相較于其他組件的使用場(chǎng)景更通用，或其他組件在實(shí)現(xiàn)時(shí)依賴(lài)了這些組件來(lái)實(shí)現(xiàn)的組件類(lèi)別。
  • 導(dǎo)航：即導(dǎo)航菜單、標(biāo)簽、面包屑等，可以幫助用戶(hù)產(chǎn)品系統(tǒng)內(nèi)快速找到所在頁(yè)面層級(jí)或位置的組件類(lèi)別。
  • 數(shù)據(jù)錄入：即輸入框、選擇器、表單等，支持用戶(hù)將數(shù)據(jù)信息錄入到系統(tǒng)的組件類(lèi)別。
  • 數(shù)據(jù)展示：即圖表、表格、氣泡卡片等，將錄入到系統(tǒng)的數(shù)據(jù)信息多樣化展示出來(lái)的組件類(lèi)別。
  • 操作反饋：即對(duì)話框、警告提示（Alert）、全局提示（Toast）等，在用戶(hù)操作前后，使系統(tǒng)狀態(tài)得以合理反饋的組件類(lèi)別。

用組件庫(kù)設(shè)計(jì)「網(wǎng)易七魚(yú)」示例

以網(wǎng)易七魚(yú)為例，看下有組件庫(kù)參與搭建的設(shè)計(jì)示例，以下頁(yè)面中所用組件均出自 FishDesign 組件庫(kù)。

「導(dǎo)航組件」使用示例：

「表格組件」使用示例：

「彈窗組件」使用示例：

「步驟組件」使用示例：

總結(jié)

組件庫(kù)最大的價(jià)值在于提升整個(gè)團(tuán)隊(duì)的產(chǎn)研效率，使設(shè)計(jì)質(zhì)量得以保障的同時(shí)，提升產(chǎn)品整體的用戶(hù)體驗(yàn)。

我們對(duì)構(gòu)建企業(yè)級(jí) UI 組件庫(kù)的步驟及要素做個(gè)簡(jiǎn)單回顧：

  • 首先，明確組件庫(kù)所需解決的問(wèn)題及存在的價(jià)值，這決定組件庫(kù)的體量和服務(wù)范圍是什么，以及構(gòu)建的時(shí)機(jī)是否合適。
  • 其次，通過(guò)競(jìng)品分析并結(jié)合身邊最熟悉或深耕的業(yè)務(wù)入手，通過(guò)產(chǎn)品目的來(lái)選擇設(shè)計(jì)模式，從最小元素開(kāi)始逐步整理，包括產(chǎn)品配色方案和柵格系統(tǒng)等布局規(guī)范。
  • 第三，需要對(duì)組件庫(kù)的重要組成部分「組件」，進(jìn)行圈定及合理分類(lèi)。這里需要注意的是，組件范圍的圈定，尤其在組件庫(kù)搭建的初級(jí)階段并不是越多越好，而是需要有效的覆蓋那些經(jīng)過(guò)規(guī)劃的業(yè)務(wù)場(chǎng)景即可。
  • 最后，組件庫(kù)并不是構(gòu)建完就結(jié)束了，是需要在后續(xù)項(xiàng)目中逐步維護(hù)與更新的長(zhǎng)期積累過(guò)程。

任何組件庫(kù)的構(gòu)建都離不開(kāi)一個(gè)優(yōu)秀的團(tuán)隊(duì)在整個(gè)設(shè)計(jì)過(guò)程中的協(xié)同，十分感謝參與的設(shè)計(jì)師與前端工程師們。上文僅是個(gè)人參與過(guò)程中的一些經(jīng)驗(yàn)總結(jié)，還不夠全面，同時(shí)篇幅有限，關(guān)于組件的具體設(shè)計(jì)考量無(wú)法一次詳盡，歡迎一起討論組件庫(kù)及標(biāo)準(zhǔn)化設(shè)計(jì)體系相關(guān)的更多內(nèi)容。

文章來(lái)源：優(yōu)設(shè)

評(píng)論(0) 瀏覽(2926)

用three.js構(gòu)建自己的后處理渲染器第一篇---抗鋸齒的選擇

seo達(dá)人

說(shuō)到渲染引擎就不得不提到延遲渲染，基本上一個(gè)引擎如果沒(méi)有實(shí)現(xiàn)延遲渲染就不能說(shuō)是一個(gè)好的渲染引擎，不過(guò)可惜的是three.js并沒(méi)有實(shí)現(xiàn)延遲渲染（ps：呼吁作者趕緊實(shí)現(xiàn)mrt吧）。由于沒(méi)有mrt和延遲渲染，本來(lái)不打算寫(xiě)后處理的，但是即使沒(méi)有，我們也希望能實(shí)現(xiàn)一些炫酷的效果，那就在現(xiàn)在的基礎(chǔ)上對(duì)three.js進(jìn)行簡(jiǎn)單的改造來(lái)實(shí)現(xiàn)一套高性能的后處理渲染器吧。

要實(shí)現(xiàn)后處理我們首先要考慮需求，是否要兼顧移動(dòng)端，是否要兼顧大屏（4k），是否要支持webgl1，是否要在各種顯卡中都有一個(gè)還算不錯(cuò)的性能。目前我主要考慮的是：性能要好，可以兼顧大屏，不打算完美支持webgl1，盡量多使用webgl2的特性。后面所有的性能測(cè)試為都以N卡作為性能測(cè)試指標(biāo)，先不管AMD卡（AMD抗鋸齒的處理性能會(huì)高些的，但是動(dòng)態(tài)處理性能會(huì)偏低，這里有很多細(xì)節(jié)問(wèn)題）

好了，我們關(guān)心的是好的性能，盡量多使用webgl2的特性，盡量能兼顧大屏（這里主要是要注意顯存問(wèn)題），現(xiàn)在開(kāi)始準(zhǔn)備我們的渲染器吧

要完成一個(gè)后處理渲染器，我們首先要考慮抗鋸齒，常用的有超采樣技術(shù)和多重采樣技術(shù)，具體可以看這個(gè)介紹 添加鏈接描述

three.js已經(jīng)實(shí)現(xiàn)了SSAA，SMAA，TAA這三種超采樣技術(shù)，效果都還不錯(cuò)，具體實(shí)現(xiàn)three.js都有例子，就不詳細(xì)說(shuō)明了。SSAA抗鋸齒效果是最好的，但是性能最差，現(xiàn)實(shí)情況下根本無(wú)法使用。SMAA性能會(huì)好一些，2000個(gè)物體差不多掉15幀吧（SMAA比FXAA計(jì)算稍微復(fù)雜一些，SMAA研究的少，不知道能不能解決line的鋸齒問(wèn)題，如果知道的歡迎留言）。SMAA效果基本可以接受，但是2000個(gè)物體掉的幀率還是有點(diǎn)多，這個(gè)也不是我們首選的。TAA效果很好，如果場(chǎng)景里面很少動(dòng)的東西，它是個(gè)不錯(cuò)的選擇，如果有運(yùn)動(dòng)的物體或者動(dòng)畫(huà)等等，基本上抗鋸齒就沒(méi)效果了，理論上應(yīng)該可以實(shí)現(xiàn)動(dòng)態(tài)的TAA，但是用目前的技術(shù)很難實(shí)現(xiàn)。所以TAA先不考慮加入我們的后處理渲染器（真實(shí)使用場(chǎng)景下一般都有動(dòng)畫(huà)或者貼圖流動(dòng)效果，所以TAA無(wú)法使用）。

SMAA:效果不錯(cuò)，開(kāi)銷(xiāo)15幀左右（2000物體）

SSAA：效果最好，開(kāi)銷(xiāo)太大 （2000物體基本已經(jīng)沒(méi)有了幀率）





TAA：效果基本和SSAA差不多，但目前只有靜止的時(shí)候才有效果



再來(lái)看看多重采樣MSAA，這個(gè)特性必須使用webgl2，是webgl提供的方式，和瀏覽器自身的抗鋸齒原理一樣，效果不錯(cuò)，和正常渲染的結(jié)果沒(méi)有區(qū)別，性能開(kāi)銷(xiāo)也不是太大，前提是我們不要使用stencilbuffer。而且three.js MSAA這塊的釋放有些小問(wèn)題，詳細(xì)可以在deallocateRenderTarget這個(gè)接口中進(jìn)行修改?，F(xiàn)在我們可以把MSAA作為主要的抗鋸齒技術(shù)。MSAA雖然性能開(kāi)銷(xiāo)不大，但是唯一的不足是比較吃顯存，如果是大屏，而且顯卡不好的話還是容易崩，無(wú)法開(kāi)啟。因此我們還要繼續(xù)選擇一個(gè)開(kāi)銷(xiāo)小不吃顯存的抗鋸齒（當(dāng)然也可以考慮SMAA，目前由于幀率開(kāi)銷(xiāo)較大（2000物體掉了15幀左右），我們不考慮加入SMAA）

MSAA：基本沒(méi)有幀率開(kāi)銷(xiāo)，效果不錯(cuò)，但是耗費(fèi)顯存（2000物體）



最后的備選方案就是FXAA了，F(xiàn)XAA可以參考這個(gè)文章：添加鏈接描述講的很詳細(xì)，F(xiàn)XAA性能開(kāi)銷(xiāo)很小，但是效果很一般，特別是細(xì)線的鋸齒沒(méi)法解決，轉(zhuǎn)動(dòng)攝影機(jī)邊緣的閃動(dòng)效果也無(wú)法解決，而且還有一個(gè)問(wèn)題是由于FXAA就是靠邊緣模糊抗鋸齒，所以必然導(dǎo)致畫(huà)面會(huì)略有模糊。但是它最大的好處是開(kāi)銷(xiāo)很小而且不耗費(fèi)顯存，并且集成到后處理渲染器中最簡(jiǎn)單。但是當(dāng)顯存不足顯卡太差的時(shí)候它還是個(gè)不錯(cuò)的選擇。因此需要加入FXAA。

FXAA：效果一般，開(kāi)銷(xiāo)很小，無(wú)法解決線的鋸齒問(wèn)題，帶來(lái)模糊（2000物體）

我們看了下各大引擎，基本每個(gè)引擎都實(shí)現(xiàn)了FXAA，還有很多引擎實(shí)現(xiàn)了FXAA3，F(xiàn)XAA3效果會(huì)好一些，但是依然無(wú)法解決線的問(wèn)題。cesium的抗鋸齒就是完全采用FXAA3，效果還可以接受，所以目前我們把cesium的fxaa3_11拿過(guò)來(lái)用，最終引擎選擇使用MSAA加FXAA3_11的抗鋸齒策略（當(dāng)然SMAA和TAA也可以選擇）。


評(píng)論(0) 瀏覽(4387)

js reduce()

seo達(dá)人

是什么

ES5提供的數(shù)組的方法。

reduce() 方法接收一個(gè)函數(shù)作為回調(diào)函數(shù)（accumulator），數(shù)組中的每個(gè)值（從左到右）開(kāi)始縮減（其實(shí)就是從左往右開(kāi)始對(duì)每個(gè)數(shù)執(zhí)行回調(diào)函數(shù)），最終為一個(gè)值。



PS: 回調(diào)函數(shù)的返回結(jié)果類(lèi)型和傳入的初始值相同



語(yǔ)法以及參數(shù)

arr.reduce(  callback(accumulator, currentValue,index ,array ) ,initialValue )

1

initialValue 可選

如果有的話則作為，第一次調(diào)用 callback函數(shù)時(shí)的第一個(gè)參數(shù)的值。

如果沒(méi)有提供初始值，callback則使用數(shù)組的第一個(gè)元素，作為第一次調(diào)用的初始值。

在沒(méi)有初始值的空數(shù)組上調(diào)用 reduce 將報(bào)錯(cuò)。



accumulator

默認(rèn)傳入上一次調(diào)用回調(diào)函數(shù)的的返回值。

初始值： initialValue存在的話，則是initialValue 若沒(méi)有則是數(shù)組的第一個(gè)元素



currentValue

數(shù)組中正在處理的元素。



index 可選

數(shù)組中正在處理的當(dāng)前元素的索引。 如果提供了initialValue，則起始索引號(hào)為0，否則從索引1起始。



array可選

調(diào)用reduce()的數(shù)組



一個(gè)小小的例子

例1 無(wú)initialValue

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

})

console.log(sum) // 最后的結(jié)果是15



result cur index arr

第1次 1 2 1 [1, 2, 3, 4, 5]

第2次 3 3 2 [1, 2, 3, 4, 5]

第3次 6 4 3 [1, 2, 3, 4, 5]

第4次 10 5 4 [1, 2, 3, 4, 5]

例2 有initialValue 傳入10

var  arr = [1, 2, 3, 4, 5];

sum = arr.reduce(function(result, cur, index, arr) {

    console.log(result, cur, index,arr);

    return result+ cur;

},10)

console.log(sum) // 最后的結(jié)果是25



result cur index arr

第1次 10 1 0 [1, 2, 3, 4, 5]

第2次 11 2 1 [1, 2, 3, 4, 5]

第3次 13 3 2 [1, 2, 3, 4, 5]

第4次 16 4 3 [1, 2, 3, 4, 5]

第5次 20 5 4 [1, 2, 3, 4, 5]

回調(diào)函數(shù)的返回值

上面的例子返回的都是一個(gè)整型數(shù)字，如果希望返回其他類(lèi)型的數(shù)據(jù)呢？



這個(gè)就跟accumulator的初始值有關(guān)系了。

下面的例子我們傳入的是一個(gè)object {sum: 0}



var items = [0,1,2,3,4];

var reducer = function add(sumT, item) {

  console.log(sumT)

  sumT.sum = sumT.sum + item;

  return sumT;

};

var total = items.reduce(reducer, {sum: 0});

console.log(total); // {sum:1130}



運(yùn)行結(jié)果



 {sum: 0}

 {sum: 1}

 {sum: 3}

 {sum: 6}

 {sum: 10}



reduce()的應(yīng)用

  1. 數(shù)組扁平化

    遞歸+reduce



    let arr = [1, 2, '3js', [4, 5, [6], [7, 8, [9, 10, 11], null, 'abc'], {age: 12}, [13, 14]], '[]'];



    function flatten(arr) {

      if(Array.isArray(arr)) {

        return arr.reduce((prev, cur) => {

           // 如果遍歷的當(dāng)前項(xiàng)是數(shù)組，遞歸調(diào)用flatten

          return Array.isArray(cur) ? prev.concat(flatten(cur)) : prev.concat(cur)

        }, [])

      } else {

        throw new Error(' 當(dāng)前參數(shù)不是數(shù)組')

      }

    }

    console.log(flatten(arr));



    PS:這里的throw new Error只是用來(lái)判斷一開(kāi)始的arr，這是因?yàn)樵谶f歸只傳入數(shù)組。


評(píng)論(0) 瀏覽(2172)

案例分享：RARRA模型下，如何做用戶(hù)增長(zhǎng)？

資深UI設(shè)計(jì)者

本文作者結(jié)合實(shí)際案例，跟大家分享一下在RARRA模型下，如何做用戶(hù)增長(zhǎng)？

從AARRR到RARRA的運(yùn)營(yíng)思路轉(zhuǎn)變

眾所周知，AARRR經(jīng)典的增長(zhǎng)黑客體系，也稱(chēng)之為「海盜法則」，分別是獲取、激活、留存、變現(xiàn)以及推薦。提出這個(gè)模型的 Dave McClure 認(rèn)為，所有創(chuàng)新型、成長(zhǎng)型的企業(yè)都應(yīng)該按照這樣的模型來(lái)做增長(zhǎng)。

AARRR專(zhuān)注于獲客（Acquisition），作為一個(gè)2007年提出的概念， AARRR模型可能已經(jīng)不再適用互聯(lián)網(wǎng)運(yùn)營(yíng)這個(gè)瞬息萬(wàn)變的場(chǎng)景。原因有二：

（1）獲客成本增加

市場(chǎng)競(jìng)爭(zhēng)激烈，用戶(hù)獲客成本已經(jīng)不再便宜，一組數(shù)據(jù)顯示：阿里線上獲客的成本翻了 6 倍， 京東的獲客成本翻了 1.5 倍，趣頭條用戶(hù)獲取成本增加了 8 倍，百度的流量獲取成本增長(zhǎng)了 41%。在當(dāng)前的情況下，以拉新獲客為中心的增長(zhǎng)模式意味著要比十年前這個(gè)模型提出時(shí)平均增加5倍以上的成本。

（2）流失率高

一組數(shù)據(jù)顯示，現(xiàn)在平均每個(gè)App在安裝后的情況：前3天內(nèi)將流失掉77％的DAU。在30天內(nèi)，它將流失90％的DAU。而到了90天，流失率躍升到95％以上。不管你是否心存懷疑，這就是目前眾多創(chuàng)業(yè)公司所面對(duì)的現(xiàn)實(shí)窘境，它創(chuàng)造了Brian Balfour所說(shuō)的“無(wú)意義成長(zhǎng)之輪”。

因?yàn)橐陨蟽蓚€(gè)原因，現(xiàn)在黑客增長(zhǎng)的真正關(guān)鍵在于用戶(hù)留存，而不是獲客。所以我們需要一個(gè)更好的模型——就是RARRA模型。

AARRR與RARRA的區(qū)別

RARRA模型是托馬斯·佩蒂特Thomas Petit和賈博·帕普Gabor Papp對(duì)于海盜指標(biāo)-AARRR模型的優(yōu)化，RARRA模型突出了用戶(hù)留存的重要性。

簡(jiǎn)單的說(shuō)，AARRR模型的核心在于獲客，而在RARRA的模型下，專(zhuān)注用戶(hù)的留存。

RARRA模型下，如何做用戶(hù)增長(zhǎng)？（成功案例分享）

分享一個(gè)我們前不久自己做的RARRA模型下用戶(hù)增長(zhǎng)的成功案例：

我們做的是一個(gè)在線教育平臺(tái)，課程的分類(lèi)包括：

  • 以拉新為目的的新用戶(hù)免費(fèi)體驗(yàn)課（0元）；
  • 以轉(zhuǎn)化為目的的低價(jià)專(zhuān)題課（50元以?xún)?nèi)）；
  • 以盈利為目的的短期班課（999元以?xún)?nèi)）和系統(tǒng)課（1000-4000元）。

這樣的課程顯然是以拉新-留存-轉(zhuǎn)化個(gè)流程進(jìn)行的設(shè)計(jì)，也是現(xiàn)在很多在線教育平臺(tái)通用的課程模式設(shè)計(jì)，其實(shí)本質(zhì)上和其他行業(yè)的平臺(tái)也是類(lèi)似。

在RARRA的模型下，數(shù)據(jù)驅(qū)動(dòng)更重要。因?yàn)槿绻麑?zhuān)注獲客，可以在渠道選擇等方面憑借經(jīng)驗(yàn)和主觀判斷來(lái)選擇，但是專(zhuān)注留存，就必須用數(shù)據(jù)分析找出每個(gè)留存環(huán)節(jié)的差異因素，進(jìn)而制定最的方案大幅度提升留存率。在在線教育平臺(tái)的運(yùn)營(yíng)中，因?yàn)閺耐茝V到課程設(shè)計(jì)、課程質(zhì)量、售前售后服務(wù)等，包含大量影響營(yíng)收的因素，因此數(shù)據(jù)分析方法也相對(duì)復(fù)雜。

數(shù)據(jù)分析的第一步，也是關(guān)鍵點(diǎn)在于：構(gòu)建指標(biāo)體系。

對(duì)于一個(gè)平臺(tái)來(lái)說(shuō)，一般的數(shù)據(jù)指標(biāo)都非常多，但必須確定唯一關(guān)鍵指標(biāo)（OMTM），也是大家常說(shuō)的北極星指標(biāo)，作為驅(qū)動(dòng)的方向。

回歸商業(yè)本質(zhì)，一切商業(yè)模式的終極目標(biāo)當(dāng)然是收入，但是收入這個(gè)指標(biāo)并非北極星指標(biāo)，而是決定北極星指標(biāo)的上級(jí)因素。如下圖所示，平臺(tái)收入=有效聽(tīng)課用戶(hù)數(shù)*客單價(jià)。因?yàn)檎n程的客單價(jià)有大致的市場(chǎng)標(biāo)準(zhǔn)，不會(huì)做太多變動(dòng)。因此經(jīng)過(guò)分析，我們認(rèn)為直播課程運(yùn)營(yíng)的北極星指標(biāo)是——有效聽(tīng)課用戶(hù)數(shù)，也就是購(gòu)買(mǎi)了課程并且有效聽(tīng)課的用戶(hù)數(shù)量。

那么接下來(lái)，就要對(duì)北極星指標(biāo)進(jìn)行分解。

從指標(biāo)拆解來(lái)看：

  • 有效聽(tīng)課用戶(hù)中的新用戶(hù)數(shù)=外部流量導(dǎo)入*轉(zhuǎn)化率；
  • 有效聽(tīng)課用戶(hù)中的老用戶(hù)數(shù)=老用戶(hù)數(shù)*續(xù)報(bào)率。

在最后分解的四個(gè)指標(biāo)中，除了老用戶(hù)數(shù)是直接由新用戶(hù)轉(zhuǎn)化率決定的之外，流量、轉(zhuǎn)化率、續(xù)報(bào)率三個(gè)指標(biāo)都是可以通過(guò)運(yùn)營(yíng)來(lái)提升和改善的。

但是由于時(shí)間和資源的限制，對(duì)于三個(gè)指標(biāo)，運(yùn)營(yíng)策略上肯定會(huì)有側(cè)重點(diǎn)和先后順序。

一開(kāi)始，我們采用的是AARRR模型，把重點(diǎn)放在提升流量和新用戶(hù)轉(zhuǎn)化率上。通過(guò)廣告投放、拉新紅包等大量引流，并在課程設(shè)計(jì)上做了很多設(shè)計(jì)促進(jìn)新用戶(hù)轉(zhuǎn)化率。最后流量和轉(zhuǎn)化率都提升了，但問(wèn)題是，用戶(hù)停留在0元免費(fèi)課和低價(jià)轉(zhuǎn)化課上，而續(xù)報(bào)高價(jià)課的有效用戶(hù)很少，這樣看似產(chǎn)品新增用戶(hù)很多，熱熱鬧鬧，但整體的營(yíng)收還是上不去。

團(tuán)隊(duì)分析后認(rèn)為，AARRR模型可能并不適合我們。既然續(xù)課率出了問(wèn)題，應(yīng)該嘗試采用RARRA模型，把運(yùn)營(yíng)重點(diǎn)放在留存上。

于是，數(shù)據(jù)組開(kāi)始探索留存的問(wèn)題點(diǎn)出現(xiàn)在哪里。

我們拉出不同維度用戶(hù)數(shù)據(jù)進(jìn)行對(duì)比，最后發(fā)現(xiàn)新用戶(hù)和老用戶(hù)的續(xù)課率差值竟高達(dá)53%。

也就是說(shuō)，新用戶(hù)進(jìn)行初步低價(jià)課轉(zhuǎn)化后，在從低價(jià)課到達(dá)正價(jià)課的留存續(xù)課階段，是流失最嚴(yán)重的一塊。

找到了最痛的點(diǎn)，問(wèn)題其實(shí)已經(jīng)解決了一半。

接下來(lái)，通過(guò)各種數(shù)據(jù)因素分析，我們判斷出了影響新用戶(hù)續(xù)課率的幾個(gè)重點(diǎn)因素，分別是：用戶(hù)來(lái)源、課前服務(wù)、課程質(zhì)量。并且對(duì)每一個(gè)因素繼續(xù)分解深挖。（標(biāo)紅為續(xù)課率效果最好）

  • 在課程質(zhì)量方面，三個(gè)細(xì)分?jǐn)?shù)據(jù)指標(biāo)綜合可以衡量課程質(zhì)量。
  • 課前服務(wù)時(shí)間上，通過(guò)數(shù)據(jù)對(duì)比，我們發(fā)現(xiàn)課前兩周進(jìn)行服務(wù)的效果最好，續(xù)課率也最高。
  • 用戶(hù)來(lái)源上，短期班課的用戶(hù)續(xù)課率遠(yuǎn)高于其他兩個(gè)來(lái)源。

根據(jù)以上的數(shù)據(jù)分析，給出了運(yùn)營(yíng)策略指導(dǎo)為：

  1. 教師和教研團(tuán)隊(duì)狠抓課程質(zhì)量，改變以前主觀評(píng)價(jià)模式。用出勤率、完課率和作業(yè)完成率三者綜合考核教師KPI；
  2. 助教團(tuán)隊(duì)的課程服務(wù)時(shí)間前置，從以前的課前一周和課后進(jìn)行服務(wù)，改為課前兩周開(kāi)始進(jìn)行用戶(hù)服務(wù)；
  3. 服務(wù)人群的重點(diǎn)轉(zhuǎn)移到短期班課新用戶(hù)上。

改進(jìn)后的效果：

通過(guò)以上三個(gè)方向的運(yùn)營(yíng)策略調(diào)整，同樣的團(tuán)隊(duì)，僅用了一個(gè)月的時(shí)間，就把新老用戶(hù)續(xù)課率的差值從53%縮小到了9%！效果非常明顯。同時(shí)平臺(tái)整體收入也大幅增加，而運(yùn)營(yíng)成本卻比以前大規(guī)模進(jìn)行渠道投放大大節(jié)省了。

階段性的成功，正是及時(shí)調(diào)整了用戶(hù)增長(zhǎng)模型，并采用系統(tǒng)的數(shù)據(jù)分析方法驅(qū)動(dòng)用戶(hù)增長(zhǎng)?？梢钥闯觯瑪?shù)據(jù)驅(qū)動(dòng)下，最終給出的運(yùn)營(yíng)策略非常簡(jiǎn)潔，但前面數(shù)據(jù)組背后付出的努力和精力是很難被看到的。這正是我們想要的結(jié)果，扎根穩(wěn)且深入，但呈現(xiàn)的卻是簡(jiǎn)潔明了的運(yùn)營(yíng)指令。

評(píng)論(0) 瀏覽(3121)

日歷

鏈接

個(gè)人資料

存檔