如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

文章從項目流程的各階段來講解UI設計師應該做些什么，如何做才能把自己的價值在項目中體現出最大化！

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

人類是一種情緒驅動的物種;我們選擇某些產品并不是因為它們有意義，而是我們認為它們會給我們帶來什么樣的感受。未來的界面將在產品設計的基礎上使用情感化的概念。人們使用的經驗將基于智商（IQ）和情商（EQ）。

本文試圖展望未來，看看我們將在未來的十年內設計什么樣的界面。我們將仔細研究三種交互媒介：

01、語音

02、增強現實（AR）

03、虛擬現實（VR）

未來情感化界面的實例

將來的界面會是什么樣子？盡管我們還沒有這個問題的答案，但是我們可以討論界面可能具有的特性。在我看來，我相信我們最終會遠離那些充滿菜單、面板、按鈕的界面，而轉向更“自然的界面”，即擴展我們身體的界面。未來的界面不會鎖定在物理屏幕上，而是使用整個五官感覺的力量。

因此，他們需要的學習成本更少——理想情況下，根本沒有學習成本。

情商在商業中的重要性

除了讓體驗更加自然和減少學習成本外，情感化設計還為產品創造者帶來了另一個好處：它提高了用戶對產品的使用率。合理的利用人類對情感的行動能力來創造更好的用戶參與度。

體會真實的語音界面

現在，以語音為主要界面的產品越來越受歡迎。我們當中的許多人在使用亞馬遜Echo和蘋果Siri進行日常活動，如設置鬧鐘或預約等。但目前市場上的大多數語音交互系統仍有一個與生俱來的限制：他們沒有考慮用戶的感受，因此，當用戶現在與谷歌這樣的產品交互時，他們會有很強的與機器交流的意識，并非是真正的人類。系統可預測地響應，并編寫響應腳本。與這樣一個系統進行有意義的對話是不可能的。

但是如今市場上有一些完全不同的系統。其中一個是社交聊天機器人應用程序Xiaoice。這個應用程序的核心是一個情感計算框架；這個應用程序是建立在這樣一個理念之上的，即首先要與用戶建立情感聯系。Xiaoice能夠動態地識別情緒，并通過長時間的對話和相關的回應吸引用戶。因此，當用戶與Xiaoice互動時，他們會覺得自己在和一個真正的人交談。

許多人在電影《她》（2013）中看到了基于語音的互動影響力。Theodore ( Joaquin Phoenix 主要角色) 愛上了一個 Samantha (一個復雜的操作系統)。這也使我們相信，未來基于語音的交互系統，主要目的之一將是為用戶提供虛擬伴侶。這部電影最有趣的是 Theodore 沒有 Samantha 的視覺形象——他只有她的聲音。要建立這種親密關系，就必須產生反映一致個性的回應。這將使系統具有可預測性和可信賴性。

雖然技術離Samantha這樣的操作系統還很遙遠，但我相信語音優先的多模式界面將是語音支持界面發展的下一篇章。這些界面將使用語音作為主要的交互方式，并在創建和構建連接感的上下文中提供附加信息。

為Brain.ai設計的語音界面示例（圖片來源：Gleb Kuznetsov）

AR體驗的演變

增強現實（AR）被定義為現實世界之上的數字覆蓋，并將我們周圍的物體轉化為交互式數字體驗。我們的環境變得更加“智能化”，用戶的手指尖上會出現“有形”物體的錯覺，這樣就在用戶和產品（或內容）之間建立了更深層次的聯系。

使用AR重新定義現有概念

AR的獨特之處在于它為我們提供了與數字內容進行物理交互的非凡能力。它可以幫助我們看到以前無法看到的東西，這有助于我們了解更多關于周圍環境的信息。AR屬性有利于幫助設計人員使用熟悉的理念創造新的的層次體驗。

例如，通過使用移動AR，可以打造一個新的飛行體驗感受，允許乘客查看有關其它班機或當前航班飛行進度的詳細信息：

AR在空中客車A380的飛行體驗中。（圖片來源：Gleb Kuznetsov）

AR幫助我們在空間中找到自己的路，并讓我們一目了然地獲得所需的信息。例如，AR可用于為當前位置創建豐富的上下文提示。被稱為SLAM（同步定位和映射）的技術非常適合這種場景。SLAM允許對環境進行實時映射，還可以將多媒體內容放入環境中。

為用戶提供價值的機會有很多。例如，用戶可以將他們的設備指向建筑，并在屏幕上了解更多關于這個建筑的信息。它能夠顯著的減少工作量，并通過允許導航和訪問實現輕松的情感體驗。

在上下文中提供其他信息（圖片來源：Gleb Kuznetsov）

我們周圍的環境（如墻壁或地板）可以變成一個可交互的場景，這種方式在過去僅限于我們的智能手機和電腦。

你在下面看到的概念設計就是這樣的；它使用物理對象（白墻）作為通常使用數字設備傳送的內容的畫布：

交互式墻的概念 - 在現實世界之上的數字覆蓋。（圖片來源：Gleb Kuznetsov）

避免信息過載

許多人都看過一個叫做“超現實”的視頻。在這段視頻中，物理世界和數字世界已經融合，用戶被大量信息所淹沒。技術允許我們同時顯示幾個不同的對象。如果使用不當，很容易造成過載。信息過載是一個嚴重的問題，它會對用戶體驗產生負面影響，避免信息過載將是AR設計的目標之一。精心設計的應用程序將會過濾掉那些與使用人工智能的用戶不相關的內容。

高級個性化

當系統實時地根據用戶的需求和期望來調整內容或功能時，就會發生數字體驗的個性化?，F在許多移動應用和網站使用個性化的概念來提供相關內容。例如，當你訪問Netflix時，你看到的電影列表會根據你的興趣進行個性化設置。

AR眼鏡允許創造一種新的個性化水平，即“高級”的個性化水平。由于系統“看到”了用戶看到的內容，因此可以利用這些信息提出相關建議或在上下文中提供其他信息。試想一下，你很快就會戴上AR眼鏡，傳輸到視網膜的信息將根據你的需要進行調整。

從增強現實走向虛擬現實，創造沉浸式體驗

AR體驗具有自然的局限性。作為用戶，我們在內容和內容之間有明確的界限; 這條線將一個世界（AR）與另一個世界（現實世界）分開。這條線讓人感覺到AR世界顯然是不真實的。

你可能知道該如何解決這個限制，例如虛擬現實（VR），當然。虛擬現實并不是一種全新的媒介，但直到最近幾年，技術才達到讓設計師創造沉浸式體驗的程度。

沉浸式VR體驗消除了現實世界與數字之間的障礙。當你戴上VR耳機時，你的大腦很難處理你收到的信息是否真實。

以下是設計人員在創建沉浸式虛擬環境時需要記住的內容：

01、寫一個故事

有意義的VR需要有一個強有力的故事核心。這就是為什么在你開始設計VR環境之前，你需要為用戶旅程寫一個故事。一個被稱為“故事板”的強大工具可以幫助你做到這一點。使用故事板，可以創建故事并檢查所有可能的結果。當你審視你的故事時，你將看到何時以及如何使用視覺和音頻提示來創造一種沉浸式的體驗。

02、與角色建立更深層次的連接

為了讓用戶相信虛擬現實中他們周圍的一切都是真實的，我們需要與用戶扮演的角色建立聯系。最明顯的解決方案之一是在虛擬場景中包含用戶手的表示。這個表示應該是實際的手-而不僅僅是一個假造的復制品。考慮不同的因素（如性別或膚色）是至關重要的，因為這會使互動更加現實。

用戶可以看到他或她的手，看他們看起來像一個角色。（來源：leapmotion）

也可以將現實生活中的一些對象帶到虛擬現實環境中，以創建這種連接。例如，一面鏡子。當用戶查看鏡像并在反射中看到其角色時，它可以在用戶和虛擬角色之間實現更真實的交互。

虛擬現實用戶會查看虛擬鏡像并將自己視為VR環境中的角色。

03、使用手勢而不是菜單

在設計沉浸式虛擬現實體驗時，我們不能依賴與傳統的菜單和按鈕形式。為什么呢？因為顯示菜單相對容易打破沉浸感。用戶將會知道他們周圍的一切都不是真實的。設計師不需要使用傳統的菜單形式，而是需要依賴手勢。設計界仍在為使用手勢定義一種通用語言的過程中，參加這項活動是有趣和令人興奮的。棘手的部分是讓用戶熟悉和可預測的手勢。

試圖將現有的交互概念重用于VR體驗。不幸的是，這個概念會打破沉浸感。新媒體需要新的互動模式。

04、與VR環境中的元素交互

要創建一個感覺真實的環境，我們需要讓用戶能夠與現實中的對象交互。理想情況下，環境中的所有對象都可以設計成允許用戶觸摸和查看它們的方式。這樣的物體會起到刺激作用，幫助你創造一種更沉浸的體驗。觸摸對于探索環境極其重要；嬰兒在最初幾天獲得的最重要信息是通過觸摸獲得的。

05、在虛擬現實中分享情感

虛擬現實有機會成為一種新的社會體驗。但要做到這一點，我們需要解決一個重要的問題，即，把非言語的暗示帶入交互中。

當我們與他人互動時，我們獲得的信息中的一個重要部分來自肢體語言。驚奇、厭惡、憤怒——所有這些情緒都存在于我們的面部表情中，在面對面的交流中，我們從眼睛區域推斷信息。當人們在虛擬現實環境中交互時，提供這些信息是很重要的，以此來創建更真實的交互。

好消息是，頭戴式設備（HMD）將很快覆蓋情感識別。在虛擬現實中，幾乎任何人與人之間的互動都會從面部表情中受益。

06、為VR環境設計聲音和音樂適合

音頻是沉浸式體驗的重要組成部分。如果不為環境設計聲音，就不可能創造真正的沉浸式體驗。聲音既可以用作背景元素（即周圍風的聲音）也可以用作方向。在后一種情況下，聲音可以作為提示-通過播放方向性（聲音來自何處）和距離（用戶可以將注意力集中在特定元素上）。

在為虛擬現實設計音頻時，最重要的是使聲音成為3D。2D聲音對虛擬現實來說不太好，因為它會使一切變得過于平坦。三維聲音是你可以聽到的聲音，在你周圍的每個方向-前面，后面，上面和后面-所有的地方。您不需要專門的耳機來體驗3D聲音；可以使用HMD的標準立體聲揚聲器來創建它。

頭部跟蹤是良好聲音設計的另一個關鍵方面。讓聲音以現實的方式表現是至關重要的。這就是為什么當用戶移動頭部時，聲音應該根據頭部移動而變化。

結論

當我們考慮到產品設計的現代狀態時，很明顯我們只是處于冰山一角，因為我們非常局限于平板電腦。

我們見證了人機交互（HCI）的根本轉變——重新思考數字體驗的整個概念。在未來的十年里，設計師們將打破玻璃（我們今天所熟知的移動設備時代），轉而使用未來的接口——復雜的語音接口、先進的ARS和真正的沉浸式VRS。當我們要創造一種新的體驗時，我們必須明白，我們唯一的界限就是我們的大腦告訴我們，它必須一直是怎樣的。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一周之前，Twitter 將接近7年未曾大幅度改版的桌面端頁面，從里到外重新翻新了設計。

新浪微博的每一次小幅度調整都會帶來大量的吐槽和不適，更不用說像Twitter 這樣的世界級的社交媒體網站。用戶的不適應不理解和負面反饋是避免不了，這樣的大幅更新改版背后，有著這個平臺不得不做的理由。

最近 Twitter 新版背后的設計師接受了連線雜志的采訪，深入地聊了一下改版背后的考量。

設計技術和工具的快速發展，視覺設計本身，尤其是 UI 界面的很多具體的執行端的工作慢慢的沒有那么麻煩了，但是找到為什么這么設計的設計決策，并不是那么簡單。

保持一致：緊跟趨勢的一次重設計

在整體視覺風格上，Twitter 桌面端的設計給人的整體感知是更加現代的——并且和移動端版本的設計靠近且保持了一致。這絕對是一個以數字產品為核心的科技公司應該做到的最基本的事情。

原本置于頂部的導航欄消失了，功能性更強的左側邊欄承載了主要的導航功能。

其中，原本被隱藏的「書簽（bookmarks）」和「列表（LIsts）」是非常實用的內容管理功能，在這次改版的時候被直接顯示在側邊欄當中。

而更重要的改變在于，關于當下正在發生的熱門事件，單獨占據了右側的側邊欄「Trends for you」，大家正在熱烈討論的熱門事件以Twitter 中標志性的標簽（Hashtags）的形式呈現，相當于微博中的「熱門微博」。而這在老版的 Twitter 中，這類內容的存在感并沒有那么強烈，原本存在于第一屏的左側側邊欄中，并且只有標簽，除非你有意識地去關注和點擊，否則很容易錯過。

搜索欄同樣被挪到了右側邊欄，置于「熱門趨勢」內容的頂部。這一設計巧妙的地方在于，它暗示了內容呈現的邏輯：當你搜索內容的時候，搜索結果會直接覆蓋在右側，而不會占據中間的主要的信息流。

毫無疑問，新版的 Twitter 在布局上更加扁平了，但是信息的扁平化呈現還不止布局上，交互上也相應的變化。在老版的 Twitter 中，當你點擊具體的推文條目的時候，內容會以彈出框的形式呈現，但是新版中則會在當前層中直接擴展開顯示，不會彈出，整體的融合感和有機感會更強。

老版 Twitter 中推文彈出框

新版 Twitter 中的界面

同樣的，用戶在回復、轉推和點贊的時候，也不用在不同的彈出框模式下進行，而是更加直覺地在當前的頁面中完成，整體感更強，更加直覺。

用戶交互頻次相對較高的轉贊評和「熱門」和主要信息流都不會在彈出框和疊加層控件中完成了，主要信息流也不會被因此而覆蓋，整個 Twitter 因此顯得更加敞亮開闊。

另外一方面，新版 Twitter 提供了更加豐富的個性化設計的體驗，這也是對于 Twitter 用戶體驗的一次重要提升：

雖然在之前老版的 Twitter 中也可以定制字體大小色彩，但是之前的字體大小是純粹的隨意設置，這種自由度讓很多并不熟悉的用戶難以控制好文本和色彩的對比度，從而造成了整體視覺的愉悅度較低的情況。

新版中的配色和字體大小都是經過調校之后，比較合理的選擇，這樣擁有了足夠的選擇空間，又保持了整體視覺體驗上的愉悅性的設計。在產品顆粒度的控制上，Twitter 有著一套成熟精準的設計方案。

與此同時，所有人都期待的，深色模式，同樣隨著這次頁面重設計，一并打包更新了：

對于深色模式的控制，Twitter 和和其他的平臺略有一點不同，他們所設計的深色模式包括「昏暗（Dim）」和「熄燈（Light out）」兩種，前者的背景色是深灰，而后者則幾乎是全黑。

任何一個社交媒體平臺，大量的用戶涌入進來之后都會面臨著復雜的管控問題，更不用說 Twitter 這個已經存在了13年的世界性的平臺。許多狀況不可能簡單的一刀切來解決。

重設計背后：設計解決不了全部的問題

作為平臺，Twitter 已經在竭力推動「健康的對話」，但是在充滿分歧和對抗的網絡當中，情緒化是常態，簡單的依靠 Twitter 官方的帳號來發聲，并不足以覆蓋如此廣泛的垂直領域和復雜多樣的用戶群體，以及不同的國家和地區。

「我們以前經常會推出一些新的設計和小功能。上線之后，過一陣子我們再搜出來，用投影儀投到墻上重新審視，」Twitter 的聯合創始人 Biz Stone 說：「然后我們會覺得，好像不應該這么設計?！?

「我們的目的是為公眾的對話來服務的。但是目標明確之后，還需要問一個問題：我們真的夠好嗎？」Biz Stone 在采訪的時候，這么說道。正是在這樣一個問題促使之下，Twitter 的改版重設計就悄然推動起來了。

從左到右分別為 Biz Stone，Bryan Haggerty 和 Mike Kruzeniski 。圖片來自 Wired，攝影師：Samantha Cooper

Twitter 團隊對此選擇了謹慎行事。他們選擇了類似灰度測試的方法，讓不同的用戶參與到不同的「測試」當中來，包括不同的書簽模塊的設計，不同的深色模式，不同的搜索模式，等等。絕大多數的設計都正面的，但是它們也并不是爆炸性的。

如今所呈現出來的新版頁面當中，絕大多數的設計都克制而微妙，以往的很多功能都得到了簡化?！肝覀冋谠噲D尋找合適的機會，重新創造更加大膽的設計，但是它需要一個穩固的基礎，所以我們打算從這一次的重設計開始，從我們最好的功能和服務開始。這就是基礎。」Twitter 的高級產品設計總監 Mike Kruzeniski 面對連線雜志的采訪，是這么解釋他們設計的初衷。

所以，Twitter 的這次重設計只是一個開始。對于這個平臺上大量的關于仇恨和騷擾相關的負面內容，清理起來并不是一套規則就可以全部解決的，而 Twitter 更傾向于人為來處理和干預，但是平臺本身需要更好的支持這方面的功能。

在 Twitter 早期階段，視覺設計并不是他們的重心?！肝覀冎皇潜M全力地讓產品具備可用性，」Stone 回憶當時的情況：「我們并沒有試圖讓它看起來好看……我們只是努力讓平臺保持活力。」當時的 Twitter 整個團隊大概只有30個人。

實際上，隨著后面更加專業的 UI 設計師加入進來之后，整個團隊的設計能力也越來越強。UI 界面是Twitter 和用戶進行溝通的媒介。

雖然現在是移動端為主的時代，但是桌面端 Twitter 的重要性并沒有弱化。Twitter 的網頁重設計項目的負責人 Jesar Shah 說：「人們在桌面上大量使用 Twitter 來搜尋感興趣的信息，跟他們息息相關的信息內容?！乖陧撁娴淖髠龋幸粋€快速的賬戶切換的功能，對于這一點，Shah 補充道：「圍繞這個功能點，我們從全球不同的地方獲得了反饋。比如日本就是Twitter 最大的市場之一，當地用戶基于自己不同的興趣點創建的賬戶，比如一個賬戶專門是關于美食的，一個是專門關于旅行的，還有一個則是給自己的寵物貓的。無論你使用哪個設備，都要能夠快速便捷地切換帳號，這是我們這么長時間的調研中，聽到最多的一個需求點?！?

從左到右分別為 Ashlie Ford，Marina Zhao 和 Jesar Shah ，她們主導了這次 Twitter 的設計。

「我們需要確保整體體驗足夠優秀，所以原則上需要嚴謹。鑒于我們服務對象是全球客戶，所以我們需要盡可能滿足不同用戶的訴求。」Shah 和 Ford 所帶領的團隊專門創建了一份調查問卷，以獲取反饋。他收到了來自全球總計20萬份問卷，Ford 的團隊花了整整一周的時間，借助翻譯工具將其中來自非英語國家的問卷都翻譯出來，并且梳理匯總了。

「用戶肯定會以為我們不會仔細閱讀這些問卷，但其實我們都仔細閱讀過了?！筍hah 說道。她閱讀到的第一個用戶需求反饋就是想要更多的表情符，為了應對這樣的需求，Twitter 制作了一個分組表情輸入控件。同時，他們還提供另一個不斷更新的熱門 Gif 圖片表情合集，非常貼合用戶需求了。

Twitter 已經 13歲了。

在 這個社交媒體平臺上，@realDonaldTrump 可以進行「Twitter 治國」，還有大量的流言和不真實的信息，騷擾和不夠人性化的內容。這都是客觀存在的，亟待解決。在今年年初的時候，策展人 Chris Anderson 將 Twitter 比作是正在撞向冰山的泰坦尼克號。的確如此。

但是，設計改變不了一切。Twitter 的設計團隊在接受采訪的時候也坦誠地接受了這個事實。但是他們認為，設計可以幫助他們界定和構建 Twitter 功能，并且逐步地幫助用戶來解決身份認同的問題。

「如果你在 Twitter 上問一個用戶，Twitter 是什么，你會得到一千個答案?！筀ruzeniski 說：「曾經我們認為這樣很糟糕，但是現在我認為這是一個很棒的事情。因為現在我們可以更好地幫你找到特定的興趣，并且和你的興趣、你所關注的主題連接到一起?！?

結語：圍繞人，而不是產品

曾經的推特是一個鋪滿木地板，到處都是品牌標志性藍色的「鳥籠」式的建筑，但是如今重新裝修過的辦公室則更加現代，墻壁上到處是各種各樣的涂鴉，這些涂鴉代表著Twitter 這個平臺內的各種垂直社區，比如 Black Twitter、NBA Twitter，以及各路名人的粉絲社區。

走過Twitter 的辦公室，你會清晰地收到這樣的一個信息：一切都是關于人的，而不是產品。

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

多參數柯里
原生bind
實現promise
防抖節流函數
多參數柯里化

參數fn可以是function(a,b,c){}，也可以是function(a,b,c,d,f){}

// 支持多參數傳遞
function progressCurrying(fn, args) {

    var _this = this
    var len = fn.length;
    var args = args || [];
    return function() {
        var _args = Array.prototype.slice.call(arguments).concat(args);
        // 如果參數個數小于最初的fn.length，則遞歸調用，繼續收集參數
        if (_args.length < len) {
            return progressCurrying.call(_this, fn, _args);
        }

        // 參數收集完畢，則執行fn
        return fn.apply(this, _args);
    }
}

原生js實現bind

Function.prototype.myBind = function(Othis){
  if(typeof this !== "function"){
    return new TypeError("not a function");
  }
  let _this = this;
  let args = [...arguments].slice(1);
  let func = function(){};
  let fBound = function () {
    return _this.apply(this instanceof func ?this:Othis,[...arguments].concat(args));
  }
  func.prototype = _this.prototype;
  fBound.prototype = new func();
  return fBound;
}

防抖函數

//每wait時間內執行一次，若期間被觸發，則重新執行
function debounce(func,wait) {
  var timeout ;
  return function(){
    let args = [...arguments];
    let _this = this;
    if(timeout){
      clearTimeout(timeout);
    }
    timeout = setTimeout(function() {
      func.apply(_this,args);
    }, wait);
  }
}

節流函數

//每wait時間執行一次
function throttle(func,wait){
  var timeStart = 0 ;
  return function(){
    let _this = this;
    let args = [...arguments];
    let now = Date().now();
    if(now - timeStart >wait){
      func.apply(_this,args);
      timeStart = now;
    }
  }
}

實現一個promise

    function _Promise(func){
        this.status = 'pending'
        this.result = '' ;
        func(this.resolve.bind(this),this.reject.bind(this));
    }
    _Promise.prototype.resolve = function(result){
        if(this.status == 'pending'){
            this.status = 'fullfilled';
            this.result = result;
        }
    }
    _Promise.prototype.reject = function(error){
        if(this.status == 'pending'){
            this.status = 'rejected';
            this.result = error;
        }
    }
    _Promise.prototype.then = function(preResolve,preReject){
        let _isPromise ;
        if(this.status == 'fullfilled'){
            _isPromise = preResolve(this.result);
        }else if(this.status == 'rejected' && arguments[1]){
             _isPromise = preReject(this.result);
        }
        return _isPromise instanceof _Promise ? _isPromise:this;
    }

實現一個promise.all()

 function promiseAll(promiseArray){
        //首先參數一定是一個數組
        //然后此函數返回的是一個promise,如果全部成功，則返回結果的數組，只要有一個失敗，則返回失敗的結果
        return new Promise(function (resolve,reject){
            if(!Array.isArray(promiseArray)){
                return reject(new TypeError("not a function"));
            }
            let resolveNum = 0;
            let arrNum = promiseArray.length;
            let resolveResult = [];
            for(let i=0; i<arrNum ;i++){
                (function (i){
                    Promise.resolve(promiseArray[i]).then(function(result){
                        resolveNum ++;
                        resolveResult.push(result);
                        if(resolveNum == arrNum){
                            return resolve(resolveResult);
                        }
                    },function(error){
                        return reject(error);
                    })
                })(i);
            }
        }) //返回的promise結束
        
    }
藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、網站建設 、平面設計服務。

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

減少頁面加載時間的方法：
1.壓縮html css js等文件
2.減少DNS解析
3.減少DOM元素，對于相關操作可以緩存節點
4.改變頁面元素樣式時盡量操作className，而不是頻繁使用xxx.style.（其實還有很多這種DOM修改操作的細節比如opacity替代visibility ，多個DOM統一操作（雖然V8會有緩存優化） ，先將DOM離線，即display：none；修改后顯示 ，不要把DOM放在已給循環中作為循環變量 ，不要使用table ）
5.避免不必要的重定向
6.合并js css及圖片，減少請求數量
7.使用CDN
8.合理利用緩存
9…

關于CDN？
https://zhuanlan.zhihu.com/p/39028766

CDN中文名“內容分發網路”，作用是減少傳播時延，找最近的節點。CDN本質就一個是緩存，只是這個緩存離你特別近，不管是作為用戶還是開發人員都能從中享受一點福利。
CDN的優點
1.訪問加速
2.減輕服務器負載
3.抗住攻擊
CDN的缺點
1.只能對靜態資源加速
2.內容更新時需要分發到其他節點
3.代價高昂
與傳統網站訪問方式的不同
傳統的網站會直接解析域名獲得IP地址然后發送請求
使用了CDN的網站則增加了緩存層，解析域名→獲取對應CNAME域名→對獲取的域名進行解析得到緩存服務器的IP地址，將用戶的訪問請求引導到最優的緩存節點而不是源站。

總結：通過權威DNS服務器來實現最優節點的選擇，通過緩存來減少源站的壓力。主要應用于靜態網頁、大文件的下載等等。
應用與踩坑

緩存設置
max-age在Cache-Control中經常用于緩存的控制，可是max-age設置的緩存會應用于一個請求經過的每一級，如果我們希望CDN不緩存那么久，要怎么辦呢？那就是s-maxage，它用于設置代理服務器的緩存時間，會覆蓋max-age的設置，這樣我們可以把max-age用于本地緩存，把s-maxage用于CDN緩存時間，避免臟數據的產生。

緩存命中率
對于一個緩存而言，還有一點非常重要，就是你的緩存到底有沒有用，衡量這個東西的就是緩存命中率。如果只是靜態資源，在刷新緩存之后，可能導致命中率下降，因此CDN的資源不適合經常刷新，換句話說，如果一個請求結果會經常進行變更，那么CDN基本就沒有什么存在的意義了。

判斷是否命中緩存
還要考慮的一件事是：這個資源是否命中了CDN，是否是因為CDN導致的問題。

在各大廠商的CDN返回的數據中都會有一個X-Cache，上面內容是Hit或者Miss，還會加上諸如Memory或者Disk的縮寫表示內存還是磁盤，如果出現Upstream或者Miss則表示沒有命中。

資源預熱
緩存設計中，預熱是很重要的環節，在最初剛開始啟動CDN的時候，CDN上并沒有緩存數據，此刻大量的請求全部打向源站，肯定會把源站打掛，預熱就是實現緩存熱門數據，這樣在業務上線時，CDN上已經有所需的數據了

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

嗨，本周Nathan 與大家分享下一些在UX 工作中，常會聽到的一些衡量指標專有名詞，有些或許是你常常聽到但不太確定的，有些則可能是你所在的領域或項目比較少討論的。

雖然在大多數的公司中，與中小型的設計團隊，采用快速定性的研究，可能是比較符合CP 值的方式。但當產品、用戶甚至團隊具有一定規模時，關于量化指標的重要性，在2019 年的今天想必已經不需要再重復敘述。

不太一樣或是常被誤會的是，對于設計師來說，多數在工作中使用的量化衡量指標，其實大多是圍繞設計工作的顯性部分，也就是可用性(Usability) 上，而可用性工作其實只是UX Design 的一環。

但， UX 畢竟是由商業環境中反推學術的一門職位。

如果僅僅只是將量化指標用在UX Designer 的工作上，反而是自己自廢武功。不要忘記小至前端展現，大至商業策略，都可以是UX Design 的范圍。

Five Levels of UXs ConversionXL

因此如何學習使用一些既帶有商業特性，又能體現用戶體驗的指標，是每個UX 工作者，多少都要知道的。

We are not design the UX，but we can design for UX

另外，本篇主要在分享一些使用體驗橫標指標上的一些迷思，與介紹工作中常用的一些指標，至于如何透過這些指標幫助UX Designer 在工作中提升重要性，來自證UX 工作能帶來的價值部分，可以看一下Nathan 以前寫過的一篇古早文。

1、關于數據指標與衡量的常見迷思

01 數據指標的使用，不符合GSM 原則

當有一定的用戶后，結合常見的數據分析工具或內部團隊自建的數據埋點，網站和應用馬上就能出現許多可供分析的數據，似乎只要有這些數據，令人驚喜的洞察就會自動浮出水面。

GSM（Goal-Signal-Metrics）是Google 提出的目標導向衡量模型，用來拆解用戶使用產品時的設計目標-行為信號-衡量指標的一種模式。

Google GSM Framework, Goal-Signal-Metrics

在商業場景中，所有的數據衡量必定帶有明確的目標，比如：透過觀察寬口轉化和窄口轉化，分析廣告投放效益以及GMV 成本。甚至，如果僅基于這些觀察數據進行動作性的優化，沒有配合中長期的決策時，變化僅會流于短期效益。

02 顯而易見的數據指標，不代表就是有幫助的

一個數據指標容易監測與計算，并不意味著它對你的產品來說就是重要的。透過現在大部分的分析工具，可以很容易就監測跟蹤成百上千的各種指標，而且分析的工具也層出不窮。新產品團隊往往因為能獲取大量的數據，然后就期望洞察自動出現，但往往不遂人意。

例如，網頁或App 的PV 數據很容易收集，但如果你的網頁或產品是屬于內容消費類型的，它就無法呈現用戶是否在你的網站消費內容（有效時長更具代表性）。高的PV 或許是由市場廣告轉化過來的用戶，但對內容消費類的產品目標，肯定不是確定每個用戶到底瀏覽了多少頁面，PV 可能是衡量廣告效果的重要度量，但它并不是監測用戶參與度的良好方式。

如果你不確定你正在用的數據指標，是否有正向幫助的話。可以參考AARRR 的轉化模型，來幫助自己梳理清楚核心的轉化鏈路。

03 單一的數據指標，對于效果衡量可能是模糊的

如上面所說相較于PV、UV、DAU，用戶在網站或應用中的有效停留時長，可能更適合用來衡量用戶在產品中的參與度。

但停留時間越長可能是正面的，也可能是負面的。在電商產品類的轉化過程中，如果在關鍵的轉化節點用戶停留較久，可能意味著用戶因困惑、分心或挫敗而花費了大量時間。即便同時監測網站或應用的停留時長和轉化率，你可能仍然不清楚為什么用戶參與度如此高，對于最后的成交卻沒有太大幫助。

這時就需要透過配合更細致的數據指標組合，慢慢的定位用戶在操作步驟中的關鍵問題，并嘗試透過A/B Testing 來解決。

04 正確的衡量指標，要依產品、企業本身而制定

大家常用的數據指標，并不一定適合自己當前產品階段或企業目標。

正常而言企業的主力產品，正是代表著企業主要的商業營利模式，因此在發布產品后要監測的各種衡量指標，通常在產品準備進入市場前，都已依照商業模式進行拆分。但在產品的冷啟動時期，這些依商業模式拆分的指標，很多時候無法反映出，企業的產品是否正在往好的方向成長。

比如Saas服務類型的產品，通常都會使用凈收入留存NDRR （Net Dollar Retention Rate）作為主要的商業模式指標，但在前期用戶量少時，搭配NPS或PSAT等類型的指標，才能夠好的回歸到Saas產品的服務體驗本質。了解企業目前提供的服務，對用戶來說是否是正向的，并且能持續增長。

05 大多時候，衡量指標并不會純粹與設計相關

在產品開發迭代中發布新功能后，數據可能會開始上升。產品團隊可能認為這是新功能的發布造成的，但銷售部分卻可能會將它與一項新的促銷活動聯系起來，而UX 團隊則可能認為這與他們的新設計相關。

這種場景在產品的數據到達一定規模時十分常見。真實情況是只能透過控制一些固定因子，來做更細部的A/B Testing 拆分。但大多時候產品的迭代時間與開發資源，很難真正做到能明確確認是因為什么原因。

因此結合前面所說的，各團隊在主要的數據指標中，配合其他輔助指標，甚至提取更與團隊緊密相關的個別指標，來了解在產品的迭代過程中，各自團隊做的決策是否是正向的。

用戶體驗指標，跟易用性和商業指標目的不同

下面就會介紹幾種工作中常用的，與體驗相關的衡量指標，部分指標在訂定的一開始，本身即包涵了商業與體驗維度。

2、工作中可能用到的幾種體驗衡量指標

大部分的體驗衡量指標，都會基于三個主要價值觀，結合其他用戶態度類型作為衡量基準。

1. 可用性
2. 參與度
3. 轉化率＋ User Attitude

下面介紹幾種，在工作中可能常用到的通用型，與不同業務場景型的體驗衡量指標。

2.1 通用型

01 傳統網站服務使用的PULSE

PULSE 是基于商業和技術的衡量模型，被很多組織和公司廣泛應用于跟蹤產品的整體表現。包含：

• Page view 頁面瀏覽量
• Uptime 響應時間
• Latency 延遲
• Seven days active user 7天活躍用戶數
• Earning 收益

但不難看出PULSE 指標僅覆蓋了UX 設計中最最基礎的可用性部分，和衡量用戶體驗的直接關系不大，難以評估設計工作到來的影響，畢竟這個指標創建之初是用來衡量產品的技術與商業效果。

因此為了彌補PULSE 指標中存在的問題，Google 提出了HEART 指標模型。HEART 是“以用戶為中心度量的指標體系，以及把產品目標與創建指標體系相互關聯的過程”

02 以使用者為中心的HEART

HEART其實也是業界使用的老黃歷了，尤其常用GA ( Google Analytics ) / Adobe Omniture的人一定都對他不陌生。

早期產品開發上線的階段，大多是訂定業務KPI 作為衡量項目產出的價值，但在用戶體驗的部份，卻很難有可視化以可及量化的衡量指標。因此Google 嘗試把產品目標以及體驗指標相互結合，建立以用戶為中心的HEART 度量體系。

Google Heart 體驗衡量指標模型

2.2 Saas 服務型

01 NPS（ Net Promoter Score凈推薦值）

凈推薦值最早是由貝恩咨詢的創始人Fred Reichheld 在2003 提出，通過測量用戶的推薦意愿，從而了解用戶之于產品或服務的忠誠態度。

NPS 算是近幾年用戶體驗領域上的當紅指標（甚至業內還有所謂的NPS 教派XD），基本上互聯網類產品都可以使用。其基本核心理念是，一個企業的用戶可被劃分為三類：推薦者、中立者和批評者。

1. 推薦者是投入且重復使用產品的用戶，他們會熱情地向其他人推薦你的產品或服務。
2. 被動者是對產品滿意，但缺乏熱情和忠誠度的用戶，他們很容易轉而投向使用競爭者的產品或服務。
3. 批評者是那些明顯對企業的產品或服務不滿意的那部分用戶

相較于其他的指標，NPS 詢問的是意愿而不是情感，對用戶來說更容易回答，且直接反應了客戶對企業的忠誠度和購買意愿，在一定程度上可以看到企業當前和未來一段時間的發展趨勢和持續盈利能力。

02 CES（ Customer Effort Score用戶費力度）

CES 指的是你的產品或服務，會需要用戶花費多少力氣才能滿足自身需求。

根據Oracle 的一項研究，82％的人把他們的購買經歷描述為“花費太多的努力”，CES背后的理論就是，應該想辦法減少客戶為了解決問題而付出的努力。CES可以幫助你找出可優化的方向，更容易理解在哪里進行改善，較低的費力度也與客戶留存直接相關，從而增加客戶的生命周期價值。

一般情況下，大多會先利用CSAT、PSAT這類的指標來衡量客戶對產品或服務的體驗反饋，當這套標準的價值到達臨界點時，就應該嘗試CES作為滿意度指標的擴充，更充分的評估Saas產品的用戶體驗情況。

03 FCR（ First contact resolution一次性解決率）

作為Saas類服務型產品，在獲取新客或幫助舊客時，大多是通過客戶服務，在許多的互聯網公司Customer Service團隊也是重點投入資源的。而「FCR一次解決率」即是用來衡量這類客戶服務的指標。

FCR 是指客戶的服務需求在第一次客戶服務中完全解決的占比率。

測量一次性解決率是相當簡單的。通過單次交互（電子郵件響應，電話，聊天會話等）解決你收到的客戶請求數量，并除以同一時期收到的請求總數。

一次性解決率不僅對Saas 產品的客戶至為重要，也能體現客戶服務的績效和表現，甚至深入到每個員工的層面上。

2.3 系統性評估型

01 SUS（ System Usability Scale系統可用性量表）、QUIS（Questionnaire for User Interface Satisfaction用戶交互滿意度）

SUS 應該也算是用來評估單個用戶使用某個產品的可用性時，最常見的指標了。SUS 是一種用來量化定性數據的方法，并不僅僅依靠數據統計，需要結合用戶具體參與來進行調研，通常作為可用性測試的組成部分。

SUS 通常用來作為改版效果的整體評估，在使用時可以對題目的主詞產品進行替換，這些替換對最后的測量結果都沒有影響。

而QUIS 則可以說是SUS 的進階版，會更注重具體頁面或操作節點的易用性，通常作為SUS 的延伸使用。比較簡單的QUIS 版本包括27 個問題，分為5個類別：

Overall Reaction 總體反應、Screen 屏幕、Terminology/System Information 術語/系統信息、Learning 學習、System Capability 系統能力

02 CSAT（ Customer Satisfaction客戶滿意度）、PSAT（ Purchase Satisfaction購買滿意度）

客戶滿意度也算是經典的衡量指標之一了，隨著商業競爭的激烈，各類型的產品與企業都對客戶滿意度更加重視，很多時候你所熟悉的電話滿意調研、電子郵件調研，甚至直接在消費后的星級評分，其實都是關于這類問題的問券。

PSAT 則是在CSAT 的基礎上，針對消費類型產品進行細化，強調售后使用體驗的部分。這類問卷的好處是簡單且擴展性強，可大至系統小至任務。

但缺點就是用戶容易在中等范圍內回答問題，無法給企業帶來真實的反饋。而且，即使在客戶滿意度很高的情況下，依然有可能遭遇留存流失問題。

因為滿意度并不直接與客戶忠誠度相關聯。

其他相關的系統性可用型指標當然還有許多，不過在工作流程中一般來說都較少會使用到，主要還是更具專業性的用研User Researcher 角色較常使用，包含：

• SUMI（Software Usability Measurement Inventory 軟件可用性測試）
• CSUQ（Computer System questionnaire 計算機系統可用性測試
• USE （Usefulness, Satisfaction, and Ease of Use 有用性、滿意度、易用性）

2.4 電商產品型

01 PSM（Price Sensitivity Measurement 價格敏感度測試）

PSM 衡量目標用戶對不同價格的滿意及接受程度，了解其認為合適的產品價格，從而得到產品價格的可接受范圍。

PSM 考慮了消費者的主觀意愿，又兼顧了企業追求最大利益的需求。但測試過程主要基于目標對象的自然反應，沒有涉及到任何競爭產品的信息。所以在橫向拉通上顯得較為薄弱。

也正因為缺少對于競爭產品的分析，所以PSM 目前主要集中在自成體系的產品鏈路中，用來配合Saas 服務或虛擬產品的定價，在實體產品中已經較少被使用。

02 DSR（店鋪質量評分）

DSR 算是電子商務類產品中的特殊指標，初期是在在阿里巴巴的電商生態中大規模使用，目前也慢慢變成電商場景的通用指標。

DSR 是指買家在電商平臺上購物成功后，針對本次購物給出的評價分數。買家可以評分的項目包括「描述相符、服務態度、發貨速度、物流速度」4 項。

DSR 評分計算方法：每項店鋪評分取連續6個月內買家給與該項評分的總和/連續6個月內買家給與該項評分的次數，統計最近180天

DSR 評分直接影響賣家在電商平臺中，商品搜索曝光權重的高低，從而影響商品與店鋪的排名。因此對于平臺類的UX Design Team 來說，建立類似DSR 的曝光評分機制，也是間接影響服務提供商的產品體驗，進而提升整體平臺中的用戶體驗質量。

03 ZMOT（Zero Moment Of Truth第零關鍵時刻）、FMOT（First Moment Of Truth第一關鍵時刻）、SMOT（Second Moment Of Truth第二關鍵時刻）

FMOT & SMOT 是目前新零售場景常會提到的指標模型，但其實在傳統的零售行業早就是一個通用的衡量指標，FMOT 指的是消費者在接觸到對應商品貨價的關鍵3~7 秒，所有的商品售價、包裝、擺設都是在這關鍵3~7 影響消費者拿取商品甚至購買的關鍵因素。

而SMOT 則是指這類實體產品，在消費者購買回家后的首次體驗，是否符合這個商品的廣告語，對于一個品牌來說，即是是否成功地履行了它的承諾還是令人感到失望，這也是消費者是否會成為一個品牌的粉絲，甚至在線上或線下渠道分享的關鍵（是否很像NPS 的精神？）。

延伸出的ZMOT，即是線上線下結合的新零售關鍵指標，讓消費者在「尚未接觸」到特定商品前，就透過線上向消費者進行行銷，當消費者主動進行相似活動、搜索時，就能接收到產品的正面訊息來影響消費意向。

本質核心也就是

當廣告出現在用戶需要的時刻，就變成了服務

ZMOT & FMOT & SMOT

2.5 主觀評估型

用戶體驗的主觀評估，大多是偏觀察式的方法，也是大家比較耳熟能詳的用定性調研法，比如眼動儀、觀察法、品牌問卷… etc.。

當然如果要盡可能嘗試量化這類User Attitude 主觀評估數據時，前提都是把用戶體驗理解成兩種維度，一種維度是實用性（Pragmatic）偏向常說的可用性，另一種是享樂性（Hedonic）也就是常說的舒適性，享樂性維度還會被拆分成了幾種屬性，例如Stimulation和Identification。

01 UEQ（User Experience Questionnaire 用戶體驗調查表）

UEQ 是SAP 開發的一套定量分析用戶體驗的工具。用戶在問卷上表達出他們在使用產品和服務中的感受，印象和態度，然后生成一個包含用戶體驗數個方面的量化表。包括傳統的易用性方面的指標：

• Efficiency
• Perspicuity 易懂
• Dependability 可信任

也包括三個體驗方便的指標：

• Attractiveness 吸引度
• Stimulation 激勵性
• Novelty 新鮮度

02 HQ（Hedonic Quality享受性質量）、PQ（Pragmatic Quality實用性質量）& AttrakDiff

HQ 主要是用來消費型產品的情感衡量指標，較常使用消費者對于消費類型產品的評價。而PQ 則主要是在易用性層面上加入主觀因素的評分，如果要針對性地對HQ & PQ 進行系統性評分，AttrakDiff 則是一個較常使用的工具。

AttrakDiff 包含了28 項題目，每一項都是一個7 分制量表，分和最高分代表一對具有評價性質的反義詞，用戶需要根據使用產品過程中的某一方面的體驗從低到高進行評分，比如“混亂的— — 清晰的”，分數越高，表明產品的某一方面設計得越清晰。

3、寫在最后

在產品或業務中導入體驗數據衡量指標，不是新入行的設計師想像的這么簡單。真正的實務過程絕不是將文章中的指標，直接導入自己對接的產品中，每一個數據指標都有其目的，且不同的人即便看到的數據相同，也都會有自己的解讀方式。

過于依賴指標，如果不隨時依據市場動態與公司策略進行調整，不僅容易因為短期的良好數據忽視了中長期的產品成長，也會慢慢的喪失設計師的感性創意能力。

所以，清楚的認知到哪個指標可以幫助我進行什么樣的設計策略。才是真正的使用方式。千萬別讓設計師變成動作導向的工作職位，

Value-Driven 價值導向的工作模式，才是設計師的生存法則

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

關注數據指標，不僅僅是產品經理或運營的“專利”，作為交互和UI設計師也需要掌握這方面的技能，來幫助我們產出更貼近用戶行為的設計。同時，監測產品數據也有2個重要作用：一是可以監控產品迭代中的問題點和設計點、運營和市場活動的收入水平等，看看他們目前處于什么狀態，也可以為后續產品迭代的方向提供參考幫助。二是通過對數據的挖掘和分析，可以發現新的商業機會和產品爆發點，也就是近兩年咱們經常聽到的數據增長、用戶增長、增長設計概念。

因此，作為一名設計師或產品經理必須要了解與業務相關的核心數據指標。由于所在領域不同、業務不同，因此團隊所關注的數據側重點也不同。今天就從“網頁基礎指標、用戶數據指標、如何獲取數據指標、產品設計的生命周期”來梳理我們產品設計者常見的指標維度。

一、什么是數據指標？

它是對當前業務有參考價值的統計數據，是通過對于業務需求的進一步抽象，并進行數據埋點后，加工出來的一套計算規則，并通過有效的方法論和數據可視化呈現，最終能夠解釋業務變化和用戶行為。當然，不是所有的數據指標都叫指標，只有對當前業務有參考價值的指標才可稱作指標，同時要具備：可統計、可分析、可監測的特點。

二、網頁基礎指標

先了解下流量的概念：分為站外流量來源和站內流量路徑。以下就拿電商產品舉例：

站外流量：通過其他平臺或外界媒體進入到你的店鋪就是站外流量。又分為免費和付費，免費有自然流量和搜索流量（比如在百度搜你店鋪的名稱并點擊進入，這就是從免費的外界平臺進入），而付費則主要是一些廣告投放的流量（比如將你的店鋪鏈接付費植入到某公眾號，讓他幫你推廣，既從他公眾號進入店鋪的流量）。

站內流量：通過平臺內的推薦入口或者搜索路徑等方式，進入到你的店鋪就是站內流）。主要指用戶在網站內的行為路徑。

PV（頁面瀏覽量）

用戶每1次對網站中的每個網頁訪問（成功訪問/進入）均被記錄1次。用戶對同一頁面的多次訪問，訪問量累計。在一定統計周期內用戶每次刷新網頁1次也被計算1次。

理論上PV與來訪者數量成正比，但是它不能精準決定頁面的真實訪問數，比如同一個IP地址通過不斷的刷新頁面，也可以制造出非常高的PV。

UV（獨立訪客人數）

訪問網站的一臺電腦客戶端為一個訪客。00:00~24:00內相同的客戶端只被計算一次。

使用獨立用戶作為統計量，可以更加精準的了解一個時間段內，實際上有多少個訪問者來到了相應的頁面。

VV（用戶訪問次數）

當用戶完成瀏覽并退出所有頁面就算完成了一次訪問，再次打開瀏覽時，VV數+1。VV同時也是視頻播放次數（Video View）的簡稱。

PV、UV、VV有啥區別？

比如你上午打開了UI中國，訪問了兩個作品頁面并關閉網頁。下午又打開了UI中國，訪問了五個作品頁面。則當日統計結果為：PV=5、UV=1、VV=2

跳出率

一個非常重要的指標，表示用戶來到網站后，且沒有進行操作就直接離開的比例，代表著陸頁面（訪客進入網站的第一個頁面）是否對用戶有吸引力，常用的計算方式是落地頁面的訪問量除以總訪問量。

比如，在一個統計時間內，網站有1000個不同用戶從某個鏈接進入，其中有50人沒有二次瀏覽行為，是直接退出網站的，那么這個鏈接的網站跳出率為：50/1000=5%。然而有些退出的行為不能作為退出考慮，比如頁面上刻意添加的導出鏈接，如合作伙伴的網站等，還有聯系我們，付款頁面等，都不算是負面的跳出，所以要根據不同情況統計有效的數據才能得出可靠的跳出率。

統計一個網站的跳出率是非常有必要的，能幫助產品提高用戶粘性。跳出率高，說明用戶體驗做得不好，用戶進去就跳出去了，著陸頁沒有滿足用戶的期望與需求，或是人群定位不精準。相反如果跳出率較低，說明用戶體驗做的很好，最起碼用戶能在第一時間獲取自己需要的內容，并且可能還會二次光顧。

退出率

針對網站內某一個特定的頁面而言，退出率是衡量從這個頁面退出網站的比例，通過一個頁面的退出次數除以訪問次數。

退出率反映了網站對用戶的吸引力，如果退出百分比很高，說明用戶僅瀏覽了少量的頁面便離開了，因此需要改善網站的內容來吸引用戶，解決用戶的內容訴求。

跳出率與退出率又有啥區別？

跳出率是指用戶進入網站起，沒進行什么跳轉操作，又從這個頁面退出或關閉的比例。退出率則是無論用戶從哪個頁面進入網站，最終從這個頁面退出的比例。

跳出率適用于訪問的著陸頁 （即用戶成功訪問的第一個頁面），而退出率則適用于任何訪問成功并退出的頁面，既用戶在網站上訪問的最后一個頁面 。退出率通常針對局部的頁面來統計，比如支付流程退出率高，那就要針對現狀對流程做優化。但站在網站總體的角度統計退出率沒啥意義，因為有訪問網站，就必然有離開網站。而跳出率則可以適用于著陸頁面，也可適用于網站整體。

平均訪問時長

指在特定統計時間段內，瀏覽網站的一個頁面或整個網站時，用戶所停留的總時間除以該頁面或整個網站的訪問次數的比例。

如用戶在網站特定時間內總停留時間為1000秒，在這段時間內，總的訪問次數是100次，那么這個頁面或網站的平均訪問時長就是1000秒/100=10秒。

該數據是分析用戶粘性的重要指標之一，也可以側面反映出網站的用戶體驗。平均訪問時長越短，說明網站對用戶的吸引力越差，可用內容信息越少。

轉化率

在一個統計周期內，完成轉化行為的次數占推廣信息總點擊次數的比率。

轉化率=(轉化次數/點擊量)×100%。以用戶登錄行為舉例，如果每100次訪問中，有10個登錄網站，那么此網站的登錄轉化率就為10%，而最后有2個用戶關注了商品，則關注轉化率為2%，有一個用戶產生訂單并付費，則支付轉化率為1%。

轉化率是產品盈利的重要指標之一，它直接反映了產品的盈利能力。不同行業的轉化率，關注點也不同，比如電商產品就要關注銷售轉化，看看參與活動的用戶當中有多少是在活動后產生支付的，有需要的還可以根據數據分析出人均購買次數和購買金額。再比如我們監測注冊量，就要關注注冊轉化率，看看這個活動給產品帶來了多少新增用戶。所以轉化率可以針對性分析產品在哪些方面做的不足，可以快速定位到問題點。

轉化率是采用訪客數量（UV）還是訪問量（PV）？

這需要根據團隊數據分析的目的而定。比如采用訪問量，就是認為每次訪問都可產生付費。若采用訪客量，就認為用戶多次訪問才能購買是正常的行為。個人建議前期采用訪客數量，以排除自己團隊對網站訪問的數據干擾，因為訪問量是可以通過同一個IP不斷刷新網頁而遞增的，而訪客數量是精準到一個IP地址（既一個用戶、一個設備）。

回購率

指用戶對商品或者服務的重復購買次數（回頭客）。

重復購買率有兩種計算方法：一是所有購買過產品的用戶，以每個人為獨立單位重復購買產品的次數，比如有10個客戶購買了產品，5個產生了重復購買，則重復購買率為50%；二是單位時間內，重復購買的總次數占比，比如10個客戶購買了產品，其中有3人產生二次購買，3人中又有1人產生三次購買，則重復購買次數為4次，重復購買率為40%。重復購買率越高，則用戶對產品的忠誠度就越高，反之則越低。

三、用戶數據指標

ARPU

即每個用戶平均收入。

ARPU=總收入/用戶數。它注重的是一個時間段內運營商從每個用戶所得到的收入，衡量互聯網公司業務收入的指標。ARPU值高說明平均每個用戶貢獻的收入高，但無法反映利潤情況，因為利潤還需要考慮到成本。果每用戶的成本也很高，那么即使ARPU值很高，利潤也未必高。

而用戶數可以是總平均在線用戶數、付費用戶數或是活躍用戶數，不同產品標準可能存在差異。ARPU注重特定時間段內從每個用戶所得到的收入，衡量互聯網公司業務收入的指標。ARPU值高說明平均每個用戶貢獻的收入高，但未必說明利潤高，因為利潤還需要減去成本。ARPU的高低沒有絕對的好壞之分，分析的時候需要有一定的標準。ARPU值高說明平均每個用戶貢獻的收入高，這段時間業務在上升。

新增用戶

既安裝應用后，首次成功啟動產品的用戶

按照統計跨度不同分為日新增（DNU）、周新增（WAU）、月新增（MAU）。新增用戶按照設備維度進行去重統計，如果該設備卸載了應用，一段時間后又重新安裝了該應用，且設備未進行重置，若再次打開應用，則不被計算為一個新增用戶。

新增用戶量指標主要是衡量營銷推廣渠道效果的最基礎指標。新增用戶占活躍用戶的比例也可以用來用于衡量產品健康程度（產品沒有新增和活躍，就進入“絕癥狀態”）。如果某產品新用戶占比過高，那說明該產品的活躍是靠推廣得來，這種情況非常有必要關注，尤其是新增用戶的留存率情況。

活躍用戶

既在特定的統計周期內，成功啟動過產品的用戶。除此之外，我們還可以將活躍用戶定義為某統計周期內操作過產品核心功能的用戶（按照設備去重統計）。

活躍用戶是衡量產品用戶規模的重要指標，和新增用戶相輔相成。如果只看一個指標來定義產品的成功與否，那一定是活躍用戶數。當然，一般重點關注核心用戶規模即可。希望用戶每天都使用的應用有新聞APP、社交APP、音樂APP等，其產品的KPI考核指標一般都有日活躍用戶數這項。但對于某些低頻消費需求和臨時性需求的APP，比如旅游、攝影、工具類等，可能會關注月活躍數，甚至特定周期內的活躍數。

活躍用戶數根據不同統計周期可以分為日活躍數（DAU）、周活躍數（WAU）、月活躍數（MAU）。

DAU（日活）：某個自然日內成功啟動過應用的用戶，該日內同一個設備多次啟動只記一個活躍用戶；

WAU（周活）：某個自然周內成功啟動過應用的用戶，該周內同一個設備多次啟動只記一個活躍用戶。這個指標是為了查看用戶的類型結構，如輕度用戶、中度用戶、重度用戶等；

MAU（月活）：某個自然月內成功啟動過應用的用戶，該月內同一個設備多次啟動只記一個活躍用戶。這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。

留存率

既在某一統計時段內的新增用戶數中再經過一段時間后仍啟動該應用的用戶比例（留存率=留存用戶/新增用戶*100%）。通常重點關注次日、3日、7日、30日即可，并觀察留存率的衰減程度。

次日留存率：即某一統計時段新增用戶在第二天再次成功啟動應用的比例。如果次日留存率達到50%以上，說明這個產品已經是非常優秀了；

7日（周）留存率：即某一統計時段新增用戶在第7天再次成功啟動該應用的比例。這個時間段內，用戶通常會經歷一個完整的產品體驗周期，如果這個階段用戶能夠留下來繼續使用，很有可能成為產品的忠實用戶；

30日（月）留存率：即某一統計時段新增用戶在第30天再次成功啟動該應用的比例。通常移動端產品的迭代周期為2~4周一個版本，所以月留存率能夠反映出一個版本的用戶留存情況，一個版本的更新，或多或少會影響部分用戶的體驗，所以通過對比月留存率能判斷出每個版本的更新對用戶的影響面積，從而定位到類似問題進行優化。

若以上時段的留存率低，會映射出哪些問題？

次日留存率低：說明所針對的用戶群對我們的產品不感興趣；

7日留存率低：說明我們產品的內容質量太差，用戶過了新鮮勁兒之后發現產品用起來特別枯燥；

30日留存率低：版本迭代規劃做得不好，功能更新、內容更新、BUG修復、性能等都做得比較差，此時需要重新規劃迭代內容，不可一錯再錯。

留存率是驗證用戶粘性的關鍵指標，設計師和產品經理通常可以利用留存率與競品對標，衡量用戶的粘性和忠誠度。對于一個版本相對成熟的產品，如果留存率有明顯變化，那就說明用戶質量有變化，很可能是因為推廣渠道等因素所引起的。同時，留存率也是產品改版的重要指標，產品體驗越好，越符合用戶需求，則留存率越高。若產品本身滿足的是小眾低頻需求，留存率則選擇雙周甚至是30日進行監測。一般來說，留存率低于20%會是一個比較危險的信號。

流失率

指那些曾經使用過產品或服務，由于各種原因不再使用產品或服務的用戶。用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。流失率和留存率有緊密關聯，流失率高既留存率低，但活躍度不一定高，因此需要綜合分析。也是重點關注次日、7日、30日的流失率。

對于流失用戶的界定依照產品服務的不同而標準不同，對于微博和郵箱這類用戶幾乎每天登錄查看的產品而言，可能用戶未登錄超過1個月，我們就可以認為用戶可能已經流失了。而對于電商產品而言，可能3個月未登錄或者半年內沒有任何購買行為的用戶可以被認定是流失用戶，所以不是每個產品都有固定的流失期限，而是根據產品屬性而判斷。設計師和產品經理需要找到流失的異常數據，定位流失用戶的原因，并在下個版本中修復產品中存在的問題。甚至還可以定位到流失的具體用戶ID，通過當時用戶注冊的個人信息進行跟進，我們最常見的就是游戲類產品“召回老玩家”的運營手段。

一次性用戶

既新增日后再也沒有啟動過應用的用戶。

一次性用戶是關鍵的營銷指標，和判斷無效用戶的標準，從中把目標用戶過濾出來。一般劃定的界限是至少超過7天時間才能夠定義是否是一次性用戶。

使用時長

既統計時間段內，某個設備從啟動應用到結束使用的總計時長。

一般按照人均使用時長、次均使用時長、單次使用時長進行分析，衡量用戶產品著陸的粘性，也是衡量活躍度，產品質量的參考依據。

啟動次數

既統計時間段內，用戶打開應用的次數。

重點關注人均啟動次數，結合使用時長可進行分析。用戶主動關閉應用或應用進入后臺超過30s，再返回或打開應用時，則統計為兩次啟動，啟動次數主要看待頻數分布情況。

使用間隔

既用戶上次使用應用的時間與再次使用時間的時間差。

使用頻數分布，觀察應用對于用戶的粘性，以及運營內容的深度。雖然是使用間隔，但是通過計算同一設備，先后兩次啟動的時間差，來完成使用間隔統計，充分考慮應用周期性和碎片化使用的特征。

四、如何獲取這些數據？

在工作中可能會發生這種情況“上文提到的數據指標有些看不到”、“不知道怎么看”，最終因為沒有數據而無法進行監測和分析。這里主要是因為在產品上線前沒有對數據進行開發統計。這部分工作一般是由產品經理去規劃，開發來執行，設計師也可以提出自己想要監測數據的需求給到開發，我們把這個規劃叫做“數據埋點”。

埋點其實是對產品的一個可視化健康檢查，貫穿產品的整個生命周期，使產品逐步達到最佳狀態（需要數據結果和產品迭代相互呼應），為未來產品優化方向給出指導意見。當然，埋點的目標不同，最終數據驗證的結果也會有所不同。

比如，新版本上線，需要驗證用戶行為和功能效果的幾種場景：

（1）新功能是否得到了用戶的使用與認可？本次新增的功能用戶點擊率和活躍度怎樣？

（2）用戶在核心功能的操作路徑上是否順暢？有沒有因為功能按鈕的設計而導致無效點擊增多？

（3）在某個特別的節日進行了產品內的banner推廣或者促銷，該活動運營的效果如何？新用戶增長是怎樣的？

...

所以說，埋點是互聯網領域非常重要的數據獲取手段。埋點采集信息的過程一般也稱作日志采集。通俗點講，就是在APP或者WEB產品中植入一段代碼，監控用戶行為事件。典型的應用場景就是某個運營活動，頁面的點擊量（PV）有多少，點擊用戶數（UV）有多少，都是用埋點數據進行計算的。當然這些信息并不是消費一次就沒用了。通過埋點收集到的信息，可以作為監控并通過可視化數據呈現出來，幫助產品、設計、運營人員看到產品的長期表現，也可以作為基礎原料，進行復雜的運算，用于用戶標簽、渠道轉化分析、個性推薦等等。比如我們用某資訊類產品看新聞的時候，會發現每次推薦的內容都是上次所點擊的相關類別，這就是通過埋點數據獲取的用戶行為習慣，通過數據進行個性化推薦。

除了對需要監測的特定功能區做埋點之外，一般大公司也有自主研發的供內部產品組使用的數據分析系統，一些關鍵數據在上面都能夠實時監測到，并有特定的團隊去維護它。其次，現在市場上還有很多數據統計工具可以自動監測到產品的相關數據，大多都是付費的，這里就不打廣告了，百度搜索關鍵詞會出現一大堆類似的數據監測產品。

五、產品階段不同，關注的數據也不同

產品階段就是產品生命周期，可分為初創期、成長期、成熟期、衰退期，每個階段的工作權重和數據關注點都會有所區別。

1、初創期

初創期的重點在于驗證產品的核心價值，通過某種產品或服務可以為特定的人群解決某個問題。這時我們需要關注的關鍵數據是目標用戶畫像，同時是第一批種子用戶對產品的使用情況和反饋建議。所以初創期更需要設計師和產品經理去做定性分析（比如用戶訪談），直接確定產品是否滿足了用戶需求、產品有沒有覆蓋到更多的使用場景等。因此產品初期我們可以不用在數據分析上投入更多精力。說白了，該階段用戶量較少，用戶行為等數據還停留在比較初期的階段，所以數據分析的效果不能發揮到最大化，且價值不明顯。該階段就是先保證產品順利上路，同時要綁定一批種子用戶，解決基本的用戶訴求，讓產品和團隊先生存下來。階段與手段不匹配的情況下，還把某些事情強加上去，這就是“作秀”。

2、成長期

經過了產品打磨的初始階段，產品一般會有較好的留存率，這個時候產品開始進入自發增長期（成長期）。該階段的產品已經能夠解決用戶的基本訴求了，所以將側重點關注在用戶的生命周期的管理，為產品吸引更多的新用戶來使用（新鮮血液），既拉新和留存，那么我們數據關注的重點也要放在拉新和留存上。

拉新要關注推廣數據和推薦數據：

（1）推廣數據：就是產品以拉新目的所采取的所有推廣運營活動和行為的指標數據，不同推廣方式（線上+線下）的到達率、觸達面積、點擊率、轉化率、二次訪問率、流失率。比如我們舉辦了一場線下活動，現場實到多少人、哪些是目標用戶、哪些不是目標用戶、有多少人當場試用了我們的產品，又有多少人在活動后下載了產品等等。

（2）推薦數據：是用戶是否愿意將產品推薦給他人的行為數據分析。這里我們在數據上可以關注整個分享環節動態，比如產品有100個種子用戶，他們中有多少人只是自己用產品、有多少人會分享給朋友、他們的分享行為帶來了多少新增用戶等，這些數據會告訴我們產品在用戶心中的位置。

留存則是要做用戶的留存分析：

重點有用戶的次日留存率、7日留存率、30日留存率、日活、周活、月活、產品頁面訪問深度、退出率等等。需要注意的是，這些指標不能單獨監測，需要將他們結合起來看。說透了，留存就是要提高目標用戶在核心場景的反復出現頻率和停留時間（核心場景既產品的主要功能、主要盈利模式和用戶最喜歡的模塊）。

3、成熟期

隨著用戶快速增長，產品不斷完善，產品在進入成熟期前后，設計師和產品經理的重心開始從用戶生命周期的前半段（吸引、激活、留存）往后半段（流失、回流）開始偏移并做出相應的產品設計，同時也更關注商業化行為，既用戶價值（用戶給產品帶來的價值，產品給開發者帶來的價值）。

這里的用戶價值指的是用戶對公司和產品的商業價值，既解決產品訴求。和我們經常說的用戶訴求有所不同。該階段我們要根據用戶的情況進行細分，“保大棄小”，盡可能提升高價值用戶的活躍度，對于低價值用戶可以適當地減少投入精力。有增長就有減少，所以除了對用戶活躍度的關注之外，還需關注核心場景的用戶行為數據和高價值用戶的流失率。

假設我們的產品日活和周活都很高，但是核心場景上的點擊率或是停留時間非常低，核心場景關系到公司商業目標和價值的實現，用戶在這一塊的行為少，要么你的用戶不是目標用戶，要么你的核心場景存在比較大的缺陷讓用戶不滿意。高價值用戶的流失率也是一個道理，都是值得引起我們警惕的數據指標。

4、衰退期

每個產品都有一個生命周期，這是受市場因素導致的，此時用戶會逐漸流失（這里說的流失并不是完全放棄我們的產品，而是從降低活躍度漸漸走到消失），既被其它新產品的體驗模式所吸引，所以這時應該更關注用戶流失后使用的產品，分析競品的商業模式和功能，同時監測流失速度，需盡快拓展產品邊界，尋找新的切入點。

六、敲黑板

1、改版前不放在心上，迭代發布后才關注數據

對于平常就很少關注數據的設計師來說，經常在改版前因為專注于界面上的優化，而忽略了真實的用戶行為。

真實案例：我們產品中有一個步進器組件，用于客戶選擇相應的天數，且此項為必填項。之前我們內部的溝通結果是提供一個7天的默認值，當然對此默認值是有爭議的，有的同事認為默認10天比較合理，所以為了驗證用戶的操作習慣，我們在上線前對該組件進行了埋點。經過用戶使用過一段時間之后，我們通過數據發現大部分用戶在使用步進器時，點擊“減少”比“增加”的次數要多，而且一般停留在5天，就這樣我們把默認值從7天優化為5天，減少了大部分用戶的2次點擊，并且在類似的業務模塊內，會記住用戶上次所選的值，從而提高填寫表單的效率。

雖然只是一個小小的交互優化，但足以證明設計師關注產品數據不僅能夠驗證設計結果，還能對產品體驗不斷打磨，精細化提升用戶體驗。很顯然，如果沒有此次對數據的監測和教訓，只會讓我們繼續活在自己的世界里，永遠也不會在意這個小問題，導致這個組件繼續復用、濫用，一錯再錯，直到用戶親自給我們提優化建議的時候，就已經太晚了。

所以，如果你想讓某個設計方案更貼近用戶或者想對比改版前后的效果，那就需要提前將自己的埋點需求整理成Excel表格，發給相關的開發同事，再對照交互原型詳細討論這些埋點，確保雙方理解一致，不至于最后埋點的數據不是自己想要的。

下面是我在工作中用到的埋點需求表（用戶行為統計表）和數據收集表，大家可以參考使用：

2、成為一名解決產品問題的設計師

隨著互聯網行業的發展，行業對我們設計師的要求只會越來越高，從近兩年冒出的UX設計崗、產品設計崗就能感知到。所以，未來的界面設計師一定會更關注產品和數據，不再是曾經“畫”頁面的團隊底層執行者了，了解一些數據知識可以將用戶的行為可視化，以便更清晰的了解用戶行為，經過一段時間的數據對比，設計師和產品經理可以共同驗證并規劃后面迭代的方案，預測產品的走向與趨勢。并且通過數據分析，可以量化交互方案的效果，作為一名解決產品問題的設計師，可以主動去承擔一些用研工作，化被動為主動。

以上是一些基礎的數據指標，希望對你有所幫助。若有來自不同行業和業務的產品數據指標，歡迎討論交流~

是的，我們距離目標又近了一步，標紅的你都看了嗎？

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

創意是營銷中離消費者最近的環節，同樣也是最性感、最直接的部分。但為什么我們都看過杜蕾斯海報卻依舊寫不出好文案？一個好創意如何誕生？

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

如果您想訂閱本博客內容，每天自動發到您的郵箱中， 請點這里

一、父組件給子組件傳值

1、父組件調用子組件的時候，綁定動態屬性

/*傳值可以是值“title”、是方法“run”、是組件“this”*/
<v-header :title="title" :run="run" :home="this"></v-header>
1
2
2、在子組件里面通過props接受父組件傳過來的數據

<script>
    export default{
props:['title','run','home']
}
</script>

二、父組件主動獲取子組件的數據和方法

1、調用子組件的時候定義一個ref

<v-header ref="header"></v-header>
1
2、在父組件里面通過以下方式獲取屬性和方法

this.$refs.header.屬性
this.$refs.header.方法

三、子組件主動獲取父組件的數據和方法

this.$parent.數據
this.$parent.方法

四、非父子組建傳值

1、新建一個js文件 然后引入vue 實例化vue最后暴露這個實例

VueEvent.js

import Vue from 'vue';
var VueEvent = new Vue();
export default VueEvent;

2、在要廣播的地方引入剛才定義的實例，并進行廣播

home.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        methods:{
            emitNews(){
                /*廣播數據*/
                VueEvent.$emit('to-news',this.數據)
            }
        }
}
</script>

3、在要接收數據的地方接受廣播

news.vue

<script>
import VueEvent from './VueEvent.js';
    export default{
        /*在生命周期函數里寫，編譯的時候就調用*/
        mounted(){
            /*接受廣播*/
            VueEvent.$on('to-news',function(data){
                console.log(data);
            })
        }
}
</script>