我們常說，現(xiàn)在是體驗至上的時代，用戶對產(chǎn)品的使用不再是單純的需求滿足，更要獲得滿意的體驗。服務(wù)設(shè)計的發(fā)展為我們改善用戶的體驗提供了新的思路，從本質(zhì)出發(fā)，任何產(chǎn)品都是在提供某種服務(wù)，服務(wù)的質(zhì)量從根本上決定了用戶的體驗。

什么是服務(wù)設(shè)計

服務(wù)設(shè)計一直在我們的生活中，我們無時無刻不在體驗著各式各樣的服務(wù)。荷蘭一家專業(yè)的服務(wù)設(shè)計機(jī)構(gòu)31 Volts是這樣描述服務(wù)設(shè)計的：“如果有兩家緊挨著的咖啡店，出售同樣價格的咖啡時，服務(wù)設(shè)計是讓你走進(jìn)其中一家而不是另一家的原因?！边@個描述很生動，同時也說明了服務(wù)設(shè)計的作用。

其實服務(wù)設(shè)計的定義還有很多，行業(yè)內(nèi)不同的專家和學(xué)者都有自己的理解和解讀，不管定義如何，重要的是服務(wù)設(shè)計的思維方式，可以幫助我們從全局改善服務(wù)體驗。

服務(wù)設(shè)計的原則及案例說明

2010年在《This is Service Design Thinking》一書中，作者首次提出了5個服務(wù)設(shè)計基本原則，這些原則之后也被廣泛使用，但隨著服務(wù)設(shè)計的不斷發(fā)展，其中的一些原則也需要重新去審視和思考，因此在2017年作者將其更新修訂為6項。

a.以人為中心(Human-centered)

以人為中心的設(shè)計理念在產(chǎn)品設(shè)計、交互設(shè)計等領(lǐng)域已經(jīng)得到了廣泛的應(yīng)用，服務(wù)設(shè)計當(dāng)然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務(wù)影響的人。

在日本，農(nóng)產(chǎn)品市場存在這樣一個問題，農(nóng)產(chǎn)品批發(fā)商無法及時從種植者處了解農(nóng)產(chǎn)品的相關(guān)狀況、收獲量等信息，因此他們也就無法與要購買農(nóng)產(chǎn)品的人進(jìn)行談判，這樣造成的結(jié)果可能是糧食的浪費。日本的一家軟件公司NJC（Nippon Jimuki Co. Ltd.）發(fā)現(xiàn)了這一問題，他們希望利用自身能力（軟件方面的優(yōu)勢）去解決這一問題，因此將目標(biāo)設(shè)定為：創(chuàng)建一個可以提供有用數(shù)據(jù)而又不給農(nóng)民或農(nóng)產(chǎn)品批發(fā)商帶來負(fù)擔(dān)的系統(tǒng)。

最終的產(chǎn)出的結(jié)果是Fudoloop這個應(yīng)用程序，通過Fudoloop，批發(fā)商可以提前一天從農(nóng)民那里收到信息，進(jìn)而協(xié)調(diào)買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農(nóng)產(chǎn)品信息的農(nóng)民，一種是從Fudoloop上獲取農(nóng)產(chǎn)品信息的批發(fā)商，F(xiàn)udoloop分別為兩種用戶進(jìn)行了設(shè)計。

圖片來源：Fudoloop

在設(shè)計Fudoloop時存在這樣一個問題，農(nóng)產(chǎn)品市場中的相關(guān)從業(yè)人員普遍年齡較大、受教育程度低、軟件使用經(jīng)驗很少，面對這樣的用戶，顯然通常的軟件設(shè)計并不符合他們的需求，因此Fudoloop的界面設(shè)計非常簡單且信息突出，從事農(nóng)產(chǎn)品相關(guān)工作的人員可以輕松的使用Fudoloop完成農(nóng)產(chǎn)品信息的更新，而不會因為學(xué)習(xí)產(chǎn)生很大的壓力。Fudoloop還在大型農(nóng)業(yè)貿(mào)易展覽會邀請了一些行業(yè)內(nèi)的人員和用戶參與到了產(chǎn)品的體驗中，并收集了他們反饋的建議，以改善產(chǎn)品。

圖片來源：IDEO

NJC在設(shè)計Fudoloop時充分堅持了以人為中心的原則，考慮到服務(wù)涉及的不同用戶，并根據(jù)用戶本身的特點和需求進(jìn)行設(shè)計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當(dāng)簡單、以人為本的思想?yún)R聚在一起時，創(chuàng)新就會發(fā)生”。

b.協(xié)作(Collaborative)

這條原則說的是，不同背景和職能的利益相關(guān)者應(yīng)該參與到服務(wù)設(shè)計流程中，收集多方訴求，發(fā)現(xiàn)不同看待問題的角度，才會更好的解決問題。

在美國舊金山，有一所學(xué)校和Revolution Foods這家餐飲公司合作，為學(xué)校內(nèi)的人員提供豐富的、營養(yǎng)的午餐，但是實際來餐廳就餐的人數(shù)與預(yù)期相差很大，數(shù)據(jù)顯示，有72%可以承擔(dān)起午餐費用的人并沒有來到食堂吃午餐。經(jīng)過調(diào)查發(fā)現(xiàn)其中的原因，很多學(xué)生等校內(nèi)人員并不愿意排長隊或者匆忙的吃完午餐，因此他們選擇了去校外享受午餐的時間。

為了改善這種情況，這所學(xué)校請來了全球頂尖的設(shè)計咨詢公司IDEO，他們與1300多名學(xué)生、父母、營養(yǎng)人員、董事會專員、校長、老師和社區(qū)團(tuán)體等利益相關(guān)者一起工作，重新去設(shè)計了學(xué)校的午餐，并且制定了針對三種年齡的就餐體驗的建議，完成了飲食、就餐空間、新技術(shù)使用等多方面的優(yōu)化和設(shè)計。

圖片來源：IDEO

最終，學(xué)校完美的改善了午餐服務(wù)的體驗，這其中包含了所有利益相關(guān)者的想法和工作，因此設(shè)計成果也被人們所接受，越來越多的校內(nèi)人員會選擇學(xué)校的午餐，之后，這種設(shè)計模式也被舊金山的許多學(xué)校采納和推出。

所以，服務(wù)中涉及到的利益相關(guān)者有很多，多收集他們的想法與建議，甚至讓他們參與到服務(wù)設(shè)計中去，問題會得到更好的解決。

c.迭代(Iterative)

迭代是一個不斷接受反饋不斷優(yōu)化的過程，如此重復(fù)執(zhí)行，讓產(chǎn)品變得越來越好。服務(wù)設(shè)計也需要迭代，不要避免犯錯誤，而是從錯誤中學(xué)習(xí)和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務(wù)進(jìn)行迭代的核心所在。隨著互聯(lián)網(wǎng)的發(fā)展，迭代的思維早已滲透到每一個互聯(lián)網(wǎng)產(chǎn)品，此處就不再過多解釋。

d.有序(Sequential)

服務(wù)設(shè)計應(yīng)該是一系列相互關(guān)聯(lián)的活動，并且是按照順序進(jìn)行的，精準(zhǔn)的把控服務(wù)每一個環(huán)節(jié)的節(jié)奏，用戶才能獲得更愉悅的體驗。

以外賣為例，用戶的使用過程包含訂外賣時的商家選擇到下單過程，下單后配送外賣，用戶收到外賣和用餐后這幾個過程，而服務(wù)的提供者主要包括商家、平臺和外賣小哥，為了保證用戶能夠獲得流暢的服務(wù)體驗，需要各個服務(wù)提供者在服務(wù)展開的不同環(huán)節(jié)推出優(yōu)質(zhì)的服務(wù)，如下圖。

在訂外賣時，平臺會為用戶推出“超值優(yōu)惠”“限時秒殺”等優(yōu)惠活動，商家推薦、訂單歷史等商家選擇渠道，以及不同的篩選條件，以上的目的都在于幫助用戶快速找到自己期望的、合適的商家。在用戶選定商家后，進(jìn)入到選擇商品并下單的過程，一方面，商家會推出優(yōu)惠的活動、推薦菜品等，另一方面，平臺也會給出自己的優(yōu)惠。

下單后，用戶面臨的是一個配送過程中的等待時間，為了緩解用戶在等待過程中的焦慮情緒，平臺會及時更新和推送外賣小哥的狀態(tài)，如到達(dá)商家、取餐中、與用戶的距離等，同時會給出用戶預(yù)期的送達(dá)時間，若超過預(yù)期時間用戶還可進(jìn)行催單，商家可以聯(lián)系用戶表達(dá)歉意，整個過程用戶對配送狀態(tài)是可視的。

用戶收到外賣時首先會與外賣小哥接觸，包括與外賣小哥提前確定取餐的時間地點，取外賣時的短暫對話等，這些都會影響用戶對服務(wù)的印象，因此外賣小哥需要保證服務(wù)態(tài)度的禮貌和友好。收到外賣后，食品包裝首先給到了用戶對商家的第一印象，然后是餐品是否符合用戶預(yù)期，讓用戶滿意。

在用戶就餐后，首先平臺要提供給用戶評價的功能，用戶可以分享自己就餐的感受，商家也可以通過平臺為用戶提供更多的優(yōu)惠，引導(dǎo)用戶能夠再次回到商家訂餐。

從外賣的案例中我們可以看到，服務(wù)是一個過程，是需要有序展開的，每一個環(huán)節(jié)的體驗都會影響到用戶對服務(wù)的印象，在恰當(dāng)?shù)沫h(huán)節(jié)提供恰當(dāng)?shù)膬?yōu)質(zhì)服務(wù)，才能確保用戶的整體體驗。

e.真實(Real)

服務(wù)本質(zhì)上是無形的，應(yīng)該用“物理元素”來可視化，這樣可以用戶的服務(wù)記憶，增強(qiáng)用戶對他們所接受服務(wù)的感知。

同樣以上述外賣為例，商家為用戶提供餐食，這部分是借助美團(tuán)這個平臺和外賣小哥來完成的，用戶和商家的接觸僅僅是送達(dá)的餐食，因此無法通過像到店體驗一樣，讓用戶感知到商家提供的更多服務(wù)。

為了讓服務(wù)變得更加“有形化”，商家就需要花費更多的心思，如圖，商家為了增強(qiáng)用戶對服務(wù)的感知，一般會在在包裝上花費很多功夫，精致的包裝讓商家的形象更好且更加值得信任，一些有趣的包裝還可能讓用戶的心情變得愉悅。另外，商家也可以通過一張便利貼的溫馨問候或者贈送小禮品等方式讓用戶更真實的感受到服務(wù)，通過這樣的手段，即使用戶并沒有真的接觸到商家，體驗也會變得很好，商家的形象也會提升很多。

圖片來源：古田路9號

f.整體(Holistic)

整體就是要著眼于整個用戶旅程，考慮用戶與服務(wù)的每個觸點（觸點的概念后文會進(jìn)行介紹），并兼顧多方利益相關(guān)者的需求。也就是所謂的全方位服務(wù)體驗，考慮服務(wù)環(huán)境的方方面面，沒有任何遺漏。這個原則實施起來并不是那么簡單，從整體角度思考問題會使問題變得復(fù)雜。不過在服務(wù)設(shè)計中，是有一些方法和工具是可以幫助我們完成整體思考的，比如服務(wù)藍(lán)圖。

服務(wù)設(shè)計的常用方法-服務(wù)藍(lán)圖

a.服務(wù)藍(lán)圖簡介

服務(wù)藍(lán)圖是一張圖表，通過列出在每個階段發(fā)生的、不同角色執(zhí)行的所有活動，顯示了服務(wù)的整個過程。如圖所示是一個服務(wù)藍(lán)圖的簡單示例，垂直方向上展示服務(wù)中的利益相關(guān)者，水平方向上為用戶的歷程，也就是用戶經(jīng)歷的不同階段。在服務(wù)藍(lán)圖中有兩條線，一條是可見線（line of visibility），可見線上方為用戶可與之交互的服務(wù)，也可以稱之為“前臺”，可見線下方代表的是后臺進(jìn)程，用戶無法看到但需要給用戶提供支持，后臺進(jìn)程還可以存在內(nèi)部交互線，用來表示內(nèi)部人員的聯(lián)系。用戶與前臺服務(wù)之間存在另外一條交互線（line of interaction），用來表示用戶與服務(wù)之間的接觸。

圖片來源：Service Design Tools

明確了服務(wù)藍(lán)圖的大致框架之后，還需要注意服務(wù)藍(lán)圖中一個非常重要的概念——觸點。觸點就是在服務(wù)的各階段，用戶和產(chǎn)品、服務(wù)、后臺產(chǎn)生的接觸，每個觸點也是服務(wù)可以進(jìn)行展開和優(yōu)化的方向。

b.Uber服務(wù)藍(lán)圖繪制

為了明確服務(wù)藍(lán)圖的繪制和分析過程，下面將結(jié)合下圖所示的Uber服務(wù)藍(lán)圖進(jìn)行說明。

圖片來源：Medium

(1) 明確用戶歷程

用戶使用Uber打車服務(wù)主要可以簡單分為以下三個階段：注冊（下載APP - 新用戶注冊），乘車階段（下單 - 等待車輛到達(dá) - 乘車 - 到達(dá)目的地）、乘車后（付款 - 評價）。

(2) 明確利益相關(guān)者

用戶與之產(chǎn)生互動的前臺服務(wù)人員為司機(jī)，而設(shè)計師、開發(fā)人員、項目經(jīng)理等負(fù)責(zé)后臺的服務(wù)支持，以保證Uber按照預(yù)期的目標(biāo)運作。

(3) 明確前后臺活動

一方面，需要明確和用戶接觸的前臺活動有哪些，Uber打車服務(wù)中和用戶產(chǎn)生接觸的主要為司機(jī)及車輛，因此需要確保司機(jī)是合格的、車輛內(nèi)部的環(huán)境是干凈舒適的，同時司機(jī)在與用戶接觸的過程中需要提供禮貌的問候和交流，滿足用戶在乘車過程中的要求，完成乘車費用的收取，提醒用戶離開前帶好隨身物品，以及評價乘客等。

另一方面，用戶對后臺的流程可能并不了解，但需要明確哪些后臺活動和支持會對用戶產(chǎn)生影響。比如在用戶下單時能夠自動獲取用戶定位，告知用戶預(yù)期的時間和價格，以及發(fā)送給用戶司機(jī)的狀態(tài)等。

在明確前后臺活動時，我們可以以用戶歷程為線，分步驟進(jìn)行分析，確保每個環(huán)節(jié)中涉及到的前后臺活動沒有被遺漏。

(4)明確關(guān)鍵觸點

在服務(wù)藍(lán)圖中我們可以標(biāo)注用戶與服務(wù)的主要接觸點，針對觸點進(jìn)行設(shè)計是提升服務(wù)體驗的一個重要和有效的手段。

在Uber打車服務(wù)中還有一些需要注意的觸點，一是等待時間，這包括用戶發(fā)起乘車請求后、付款時以及評價司機(jī)時，等待時間是造成用戶體驗較差的一個原因，因此需要注意標(biāo)注出這些觸點，并想辦法優(yōu)化，在服務(wù)設(shè)計中需要注意相關(guān)環(huán)節(jié)的應(yīng)盡量簡單，減少用戶的等待。另外需要注意的是會對體驗影響較大的觸點，如司機(jī)態(tài)度不友好、乘客下車時忘記帶隨身物品等，可能造成失敗的服務(wù)體驗的觸點應(yīng)該精心地去設(shè)計，避免這樣的情況發(fā)生。

通過以上過程我們完成了Uber服務(wù)藍(lán)圖的繪制，從中可以獲取到Uber打車服務(wù)的整體概貌及其相互關(guān)系。

///

結(jié)語

服務(wù)設(shè)計的思維能夠幫助我們從全局的角度去審視和思考，發(fā)現(xiàn)更多改善服務(wù)的可能性，從而為用戶提供更好的體驗。因此對于產(chǎn)品和設(shè)計等相關(guān)人員來說，不能僅僅把目光放在產(chǎn)品本身，而是要從服務(wù)的角度去正確看待產(chǎn)品和用戶的關(guān)系，以用戶為中心，找到用戶與產(chǎn)品的每一個接觸點來進(jìn)行服務(wù)設(shè)計，這樣才能保證用戶在整個流程中都能得到好的體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷  作者：百度MEUX

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

即時通訊界面設(shè)計 表達(dá)其物流行業(yè)的專業(yè)性和商務(wù)性，標(biāo)識整體精致細(xì)膩，令人印象深刻，在界面設(shè)計時以厚重，大氣的配色方案和視覺風(fēng)格提升整個品牌的含義。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

現(xiàn)在是互聯(lián)網(wǎng)逐漸發(fā)展，已經(jīng)出現(xiàn)了很多可以供自己寫博客的網(wǎng)站，大家可以在上面 發(fā)表自己的文章，供自己記錄或者是供他人閱讀。但是，可不可以自己搭建一個只屬于自己的個人博客網(wǎng)站呢？這篇文章就帶你從0開始搭建一個自己的個人博客網(wǎng)站，并部署到屬于自己服務(wù)器。這里有一點要說的是，沒有服務(wù)器的同學(xué)使用自己機(jī)器的linux系統(tǒng)也是一樣的操作。我們選用一個很好用的博客框架Hexo進(jìn)行搭建我們的個人博客。

博客框架Hexo介紹：

---

Hexo是一個快速，簡介而且高效的博客框架，Hexo 使用Markdown（或其他渲染引擎）解析文章，在幾秒內(nèi)，即可生成一個靜態(tài)網(wǎng)頁展示我們發(fā)布的文章，同時也提供了大量精美的博客主題供我們使用。

Hexo博客框架的優(yōu)點

---

• 速度極快：Node.js 所帶來的超快生成速度，讓上百個頁面在幾秒內(nèi)瞬間完成渲染。
• 支持MarkDown：Hexo 支持 GitHub Flavored Markdown 的所有功能，甚至可以整合 Octopress 的大多數(shù)插件。
• 一鍵部署：只需一條指令即可部署到 GitHub Pages, Heroku 或其他平臺。
• 插件和可擴(kuò)展性：這個也是hexo很強(qiáng)大的一個地方，強(qiáng)大的 API 帶來無限的可能，與數(shù)種模板引擎（EJS，Pug，Nunjucks）和工具（Babel，PostCSS，Less/Sass）輕易集成

Hexo博客框架搭建：

---

我們使用Centos7系統(tǒng)作為演示，使用其他linux系統(tǒng)也是可以的，只需要更換為對應(yīng)Linux版本的軟件安裝命令即可。

1.安裝Git

直接使用yum安裝即可，在命令行輸入 yum -y install git

完成之后輸入git version 查看是否安裝成功，如果顯示git版本信息即為成功，如下：

2.安裝Node.js

Node.js是一種運行在服務(wù)端的JavaScript，是一個基于Chrome JavaScript運行時建立的一個平臺。

Hexo基于Node.js，所以安裝Node.js是必須的一個操作，安裝步驟如下：

2.1：下載安裝包：

wget https://nodejs.org/dist/v12.13.1/node-v12.13.1-linux-x64.tar.xz  


    

        1
    

2.2：解壓縮軟件包并配置環(huán)境變量：

#解壓 tar -xvJf node-v6.10.1-linux-x64.tar.xz #移動到/usl/lcoal目錄下 mv node-v6.10.1-linux-x64 /usr/local/node-v6 #創(chuàng)建軟鏈接 ln -s /usr/local/node-v6/bin/node /bin/node ln -s /usr/local/node-v6/bin/npm /bin/npm #添加環(huán)境變量 echo 'export PATH=/usr/local/node-v6/bin:$PATH' >> /etc/profile source /etc/profile #讓環(huán)境變量生效  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

2.3：測試是否安裝成功：

在命令行輸入node -v 和 npm -v，若是顯示出了版本號，即為安裝成功：

3.安裝并使用Hexo

Hexo的安裝較為簡單，使用如下命令安裝

npm install -g hexo-cli #這里有一點要注意的就是，npm的源是在國外的，訪問可能會很慢，這里可以換成我們國內(nèi)的源進(jìn)行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安裝完成之后執(zhí)行下面的命令進(jìn)行對Hexo進(jìn)行一個初始化

#這個文件名字可以自己指定，之后會在當(dāng)前目錄下生成對應(yīng)文件夾 hexo init <文件名字> cd 文件名字 npm install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安裝好之后的一個目錄結(jié)構(gòu)：

目錄文件說明：

_config.yml：網(wǎng)站的配置信息，您可以在此配置大部分的參數(shù)。

package.json：應(yīng)用程序的信息。EJS, Stylus 和 Markdown renderer 已默認(rèn)安裝，您可以自由移除。

scaffolds：模版文件夾。當(dāng)您新建文章時Hexo 會根據(jù) scaffold 來建立文件Hexo的模板是指在新建的文章文件中默認(rèn)填充的內(nèi)容。例如，如果您修改scaffold/post.md中的Front-matter內(nèi)容，那么每次新建一篇文章時都會包含這個修改。

source：資源文件夾是存放用戶資源的地方。除 _posts 文件夾之外，開頭命名為 _ (下劃線)的文件 / 文件夾和隱藏的文件將會被忽略。Markdown 和 HTML 文件會被解析并放到 public 文件夾，而其他文件會被拷貝過去。

themes：主題 文件夾。Hexo 會根據(jù)主題來生成靜態(tài)頁面。

查看hexo的版本以及對應(yīng)的數(shù)據(jù)：

3.2生成靜態(tài)文件，并開啟Hexo服務(wù)：

進(jìn)入到了hexo的安裝目錄之后，使用hexo generate來生成靜態(tài)文件，也可以使用hexo g，之后使用hexo server（可以寫成hexo s）命令啟動服務(wù)，操作如下：

可以看到4000端口的服務(wù)已經(jīng)開啟，之后在你的瀏覽器輸入http://<你的linux機(jī)器的ip地址或者服務(wù)器公網(wǎng)地址>:4000,如下可以看到最開始的一個界面：

4.初步使用Hexo：

---

使用前，我們對我們的站點進(jìn)行一個配置，也就是我們創(chuàng)建的hexo目錄的_config.yml文件，可以修改的部分介紹如下：

# Site
title: QIMING.INFO #博客網(wǎng)站的標(biāo)題
subtitle:          #博客網(wǎng)站的副標(biāo)題
description:       #你的網(wǎng)站描述
keywords:          #網(wǎng)站的關(guān)鍵詞  
author:            #作者的名字
language:          #博客網(wǎng)站使用的語言
timezone:          #網(wǎng)站時區(qū)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

我自己的修改如下供大家參考，這里的修改沒有太大的限制：

4.1：開始使用Hexo發(fā)布自己的第一篇博客！

執(zhí)行下面的目錄創(chuàng)建一篇新文章：

hexo new post <文章標(biāo)題>  


    

        1
    

[外鏈圖片轉(zhuǎn)存失敗,源站可能有防盜鏈機(jī)制,建議將圖片保存下來直接上傳(img-9Tz5aBlT-1622032930755)(pictures/image-20210526145922392.png)]

這里我創(chuàng)建了一篇標(biāo)題為First_Blog的博客，創(chuàng)建之后hexo目錄下面的source/_post文件夾下會產(chǎn)生一個First_Blog.md的文件

4.2:編輯文章

進(jìn)入到上面說的那個目錄下可以看到我們創(chuàng)建的博客文件：

直接使用vim或者vi就可以對我們的博客文章進(jìn)行編輯了，打開此First_Blog.md后可以看到—分隔的區(qū)域，這部分主要對文章進(jìn)行標(biāo)注變量，如下：

title：標(biāo)題

tage：標(biāo)簽

categories：分類

date：時間

這些標(biāo)注大家在-----區(qū)域可以進(jìn)行使用

4.3：發(fā)布文章

輸入如下命令，生成靜態(tài)網(wǎng)頁，靜態(tài)網(wǎng)頁會存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

之后就可以去瀏覽器訪問了！可以看到我們發(fā)布的文章已經(jīng)成功在瀏覽器顯示，到這里個人博客網(wǎng)站就已經(jīng)成功搭建了。

5.主題的選擇：

主題網(wǎng)站：https://hexo.io/themes/ hexo提供了大量精美的主題供我們選擇，選擇喜歡的主題，在hexo目錄下的themes文件夾下使用git clone下載主題，之后再配置文件_config.yml把theme后面修改成下載的主題的名字，之后運行hexo clean ，hexo g即可看到生效的主題。

---

將Hexo部署上線到服務(wù)器：

---

如果是有服務(wù)器的小伙伴，也可以將Hexo部署到服務(wù)器供全網(wǎng)訪問，服務(wù)器的購買這里就不多說，阿里云跟騰訊云上面對于學(xué)生也有較為優(yōu)惠的價格。部署到服務(wù)器的話，就需要將上面的全部操作，在你的服務(wù)器系統(tǒng)上面執(zhí)行，之后我們使用Nginx（反向代理服務(wù)器）進(jìn)行部署。

Nginx安裝：

Nginx是一款高性能的 HTTP 和反向代理服務(wù)器，這里我們采用編譯安裝的方式,按照下面的指引依次執(zhí)行命令

#安裝gcc編譯環(huán)境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達(dá)式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩(wěn)定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應(yīng)的版本下載下來之后上傳到我們的服務(wù)器，也可以使用wget直接下載 tar -xf pcre-8.43.tar.gz cd pcre-8.43 mkdir -p /usr/local/pcre
./configure --prefix=/usr/local/pcre make && make install  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

下載編譯安裝nginx：

nginx下載官網(wǎng)：http://nginx.org/en/download.html wget http://nginx.org/download/nginx-1.16.0.tar.gz mkdir -p /usr/local/nginx tar -xf nginx-1.16.0.tar.gz #編譯指定安裝路徑需要進(jìn)入nginx cd nginx-1.16.0
./configure --prefix=/usr/local/nginx --with-http_ssl_module --with-http_stub_status_module --with-pcre #http_ssl_module  這是支持https的一個模塊，就是可以使用https：//這樣去訪問。 make && make install #編譯安裝  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

啟動nginx服務(wù)：

#啟動： /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf #用指定配置文件的方式啟動  -c #測試： /usr/local/nginx/sbin/nginx -t #這個用于測試nginx的語法是否有問題 顯示is successful即為成功。 #關(guān)閉： /usr/local/nginx/sbin/nginx -s stop #繼續(xù)輸入以下命令使Nginx開機(jī)自動啟動： systemctl enable nginx #配置文件的位置：/usr/local/nginx/conf  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我們需要配置服務(wù)器公網(wǎng)ip，編輯配置文件。

之后再重啟nginx服務(wù)，開啟hexo服務(wù)，這個時候使用公網(wǎng)的ip就可以訪問到我們的hexo服務(wù)了！

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn    作者：YO哥教你大數(shù)據(jù)

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

很久以前我寫過一篇講「用戶體驗」的文章，文中提到電影的觀影體驗是可以通過燈光、鏡頭、腳本、臺詞、道具、特效等等手段去塑造出來的。比如，《教父》中對燈光塑造角色形象的首次運用，營造出陰暗、冷酷、深不可測的角色形象，幫助觀眾去建立更立體的角色印象。

所以許多學(xué)習(xí)電影的同學(xué)會去分析電影里的某個鏡頭或某個片段的細(xì)節(jié)，聊這個鏡頭的拍攝用了什么樣的手法，演員的表演傳遞出了一種什么樣的信息，以值得我們?nèi)W(xué)習(xí)。于是許多學(xué)電影的新人就會以為，學(xué)好這些東西，就能拍出一部好電影。

但是作為一名導(dǎo)演，如果只關(guān)注這些細(xì)節(jié)去學(xué)習(xí)所謂的理論知識，而不知道這部電影背后的宗旨，支撐起整個故事脈絡(luò)的重要信息，眾多人物角色的復(fù)雜情感關(guān)系，以及劇本背景所表達(dá)的時代現(xiàn)象等等，那么就不可能在自己的電影里代入那些細(xì)節(jié)理論。甚至連如何推進(jìn)到這樣的場景都做不到，試問又怎么可能去聊某個鏡頭下的細(xì)節(jié)呢？

這叫缺乏上下文聯(lián)系，也是任何行業(yè)的從業(yè)人員在學(xué)習(xí)該行業(yè)所需要具備的理論知識時，都會忽略掉的重要條件。

說一個真實故事。設(shè)計師 Teisanu Tudor 前陣子在 Instagram 上做了個實驗。他扮演成一位資深 UX，每天通過網(wǎng)上找來的幾張圖片組成各種設(shè)計案例、教程、原則等帖子，分享在上面。受歡迎程度遠(yuǎn)超他的預(yù)期，而其中熱度最高的帖子，是案例改版對比圖，以及兩個方案比較圖，再加幾句簡單的總結(jié)。比如：

通過這樣的說法，難道就能認(rèn)為現(xiàn)在所有 App 或網(wǎng)頁上的 banner 設(shè)計都是錯誤的？當(dāng)然不能這么隨意下定論。

許多人都以為通過這種簡單的幾個步驟就可以學(xué)會設(shè)計，且認(rèn)為這個學(xué)習(xí)過程是有趣且輕松，可以速成的。

Teisanu Tudor 說：這種速成貼如此火爆，不免讓人有些擔(dān)憂。這些帖子里的案例幾乎都是脫離改版目標(biāo)的上下文背景去探討體驗的，可許多人都忘了目標(biāo)才能決定設(shè)計改版后的效果，而不是單獨看起來如何。

或者這類：

A 與 B，真的是 B 更好么？在不同設(shè)備與不同用戶的條件下，僅僅通過視覺理論得出這樣的結(jié)論，未免也過于倉促。

我們都知道，一個設(shè)計方案不可能適用于所有場景，設(shè)計師的主要能力之一就是在具體限制條件下，平衡好不同利益相關(guān)者，以及多個變量，產(chǎn)出合理方案。而類似這種帖子的火爆似乎在傳遞出一種信息，就是設(shè)計是不需要具體問題具體分析的，甚至通過這種細(xì)節(jié)的通用解法就能解決絕大多數(shù)設(shè)計問題。這就屬于誤人子弟了。

我經(jīng)常會在一些地方看到有人在整理某個頁面當(dāng)中的設(shè)計細(xì)節(jié)，然后有模有樣總結(jié)一遍，試圖將其當(dāng)做產(chǎn)品設(shè)計的某種理論或準(zhǔn)則。比如截一張某款產(chǎn)品中的界面，說它的按鈕擺放有問題，會導(dǎo)致用戶如何如何，而依據(jù)就是之前得出的設(shè)計準(zhǔn)則。其中最有趣的一次是，有個人拿著一款產(chǎn)品的設(shè)計方案去吐槽另一個產(chǎn)品的方案，說沒對上…

在前面兩篇理論文章里，我反復(fù)說過理論知識的重要性，它可以幫助我們產(chǎn)出設(shè)計方案。但是有一個點是沒有被提及的，就是「理論知識的連接性」。

許多人會把自己看到或?qū)W到的東西看作是一個獨立的知識模塊，且希望在工作時能運用上，然而卻事與愿違。于是漸漸排斥理論，覺得理論無用，形成一種認(rèn)知，就是理論無用論。再也不去讀書，不去學(xué)習(xí)理論知識，以至于在知識體系層面停滯不前，無法說明白自己產(chǎn)出的方案，只能說感覺：我感覺可以。

這些人再也不會去思考自己為什么做這個需求，以及這個需求的利益相關(guān)者是誰，用戶的目標(biāo)，企業(yè)的目標(biāo)，甚至是這次需求的指標(biāo)，而只是看界面從某個原則上來說是否合理……而這所謂的原則，只是一些無關(guān)緊要的東西，卻被人當(dāng)做設(shè)計圣經(jīng)。

這就是理論知識逐漸被人輕視的原因，許多人本末倒置，再也回不到正確的那條路上。

比如，前陣子有位讀者問我：呆總，你看 QQ 這里把一些未開通的特權(quán)放出來，吸引用戶去開通，但是絕大多數(shù)直播產(chǎn)品的勛章體系也挺豐富的，卻很少看見會這么做的，是為什么呢？

類似這樣的問題，在缺乏業(yè)務(wù)背景，商業(yè)目的，需求指標(biāo)等前提下，是不可能得出一個絕對結(jié)論去證明其他產(chǎn)品為什么不這么做的。這是現(xiàn)在大多數(shù)人面臨的問題，但卻不自知。

就像我這個系列文章里說的一樣，理論知識當(dāng)然重要，但是破碎的理論，是有反作用的，所以需要串聯(lián)，從全局角度出發(fā)，再深挖到細(xì)節(jié)。而不是只聊大方向，或只聊細(xì)節(jié)。

舉個例子。當(dāng)我們拿到一個需求，說要從 0-1 做一個長視頻產(chǎn)品的彈幕體系。可能很多人就會無從下手，第一直覺想的是去找所謂的競品抄一下。可能還會像上面那種對比圖一樣，把幾個產(chǎn)品的彈幕界面截圖下來比較下，試圖從界面元素角度判斷哪個設(shè)計得更合理。但是會發(fā)現(xiàn)，即使是抄，也會抄不到位，甚至?xí)焕习遒|(zhì)疑這個方案的合理性。而你能反駁的只是：別人也是這么做的。

而關(guān)于不同用戶發(fā)布彈幕的權(quán)限，比如次數(shù)、時間限制、字符差異等重要信息，就被忽視掉了。包括各種違規(guī)彈幕，以及如何判斷違規(guī)的彈幕，甚至是彈幕在屏幕上出現(xiàn)的密度、形式、速度等信息可能都無法考慮到。這就是現(xiàn)在許多設(shè)計師存在的問題 —— 過分專注界面元素，忽視其背后的信息。

雖然我在之前一篇文章里提到，注重細(xì)節(jié)的重要性，但是理論知識，從來都不是相互獨立的，尤其是與項目相關(guān)的，更不可能從某個單點出發(fā)得出全面的設(shè)計方案理論。

如果你是剛?cè)胄械脑O(shè)計師，這么做無可厚非，就像學(xué)習(xí)電影的學(xué)生一樣，它確實是學(xué)習(xí)理論的一種途徑，只不過缺乏連接。但如果你已經(jīng)入行一些日子，覺得自己進(jìn)步緩慢，甚至感到迷茫，且讀完我寫的文章也意識到了這個問題，那你就要開始反思，自己對于理論知識的學(xué)習(xí)是否有主動去將它們串聯(lián)起來。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：優(yōu)設(shè)   作者：呆呆U理

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

一張圖上有四句話，讀者根據(jù) 字號 判斷先讀哪一句。在從測試和調(diào)研中收集來的用戶需求和期望的基礎(chǔ)上，首先明確內(nèi)容和交互的優(yōu)先級，確認(rèn)信息的先后順序和關(guān)聯(lián)性后，才能夠設(shè)計出有重點的交互界面。這些行為是為了引導(dǎo)用戶在閱讀過程中 一眼獲取重要信息。

用視覺語言來說，上面的例子只是通過調(diào)整 文案的尺寸 去探索如何設(shè)計頁面層級。同時，通過調(diào)整其他平面設(shè)計元素例如 字重、顏色、透明度 等等也可以達(dá)成同樣的效果。當(dāng)然，這種行為同時適用于 按鈕、菜單欄、表單 等其他控件。

通過距離劃分視覺元素展示它們之間聯(lián)系的基礎(chǔ)前提是 格式塔心理學(xué) 組織原則，這是在構(gòu)建數(shù)字界面時所考慮的設(shè)計系統(tǒng)的基礎(chǔ)指導(dǎo)理論。因為用戶一般通過 視覺元素的位置 來判斷閱讀順序，設(shè)計視覺元素和控件的位置是為了促使用戶完成任務(wù)，同時在某些情況下，也會引導(dǎo)用戶去做他們所期望的事。在很多情況下，用戶會自己選擇想看的信息。

“在網(wǎng)絡(luò)上，人們會一目十行而不是逐字逐句的閱讀內(nèi)容。他們一般傾向于付出更少的精力，以高效的方式達(dá)成目標(biāo)?！?

這意味著在一個擁有很多功能的頁面上，用戶會一目十行的迅速尋找他們的目標(biāo)，因此 大部分的視覺信息會被屏蔽。

用戶在網(wǎng)絡(luò)上的閱讀方式高度取決于：

• 用戶的任務(wù)目標(biāo)

• 用戶習(xí)慣

• 頁面層級

• 頁面內(nèi)容形式

這就非常明顯了：最后兩個因素是設(shè)計師可以控制的，并且考慮到網(wǎng)絡(luò)設(shè)計越來越先進(jìn)，運用知識和技術(shù)推動用戶行為，而不是使電子產(chǎn)品成為用戶的阻礙?；谶@個原因，我提出一個設(shè)計原則。

將用戶分級
Users by levels

有一些人說如果需要在圖標(biāo)旁邊放一個文字說明，圖標(biāo)就沒有存在意義了，因為它的認(rèn)知優(yōu)先級被降低了，成為了識別序列里的一個負(fù)擔(dān)。因為圖標(biāo)視覺系統(tǒng)是建立在 邏輯原則 上的（和文字表達(dá)的意思相同），所以無論是對于有沒有相關(guān)交互經(jīng)驗的用戶而言，圖標(biāo)被認(rèn)為是可以幫助用戶迅速理解功能的。

一個只有文字說明的軟件菜單和同時擁有圖標(biāo)和文字的菜單相比，圖標(biāo)可以幫助用戶更快的理解。在上圖中，根據(jù)用戶所期望的功能，可以看到菜單中的圖標(biāo)帶有要訪問頁面的標(biāo)題名。接下來，當(dāng)用戶習(xí)慣圖標(biāo)后，圖標(biāo)將會更加簡單的引導(dǎo)用戶快速的在界面中尋找到所需要的內(nèi)容。

當(dāng)設(shè)計一個新界面時設(shè)計師需要知道，頁面必定會被有不同閱讀習(xí)慣的人使用。為了促進(jìn)理解，我會把用戶分成三種人并且定義為：新手用戶、中間用戶、專家用戶。

新手用戶 — 就像你所想象的那樣，這是一個 第一次接觸 這個界面的用戶。如果這個界面是某個系統(tǒng)中的一部分，那意味著始終有某些功能點是他第一次接觸到的。這個趨勢是說，這個等級的用戶 理解頁面的速度會低于用戶理解頁面的平均值，并且花費更多的時間去理解語句直到找到所需的內(nèi)容為止。

中間用戶 — 比新手用戶多一些數(shù)字產(chǎn)品的使用經(jīng)驗，但并不是一個界面使用專家，理解界面的時間大概是處于平均值左右。

專家用戶 — 他們已經(jīng)使用這個平臺很多次了，所以可以較快的閱讀，而且并不需要通過閱讀所有的內(nèi)容去理解界面，可以 快速識別元素、布局和交互的視覺呈現(xiàn)。也許正因為這些原因，很多用戶 對產(chǎn)品界面的突然改變抱有抵觸心理。

現(xiàn)在，想想看如果一個投資 APP 每周通過 Email 將以下這個界面發(fā)送給用戶。用戶會不會閱讀上面所有的內(nèi)容呢？每次打開都會閱讀嗎？或者只是閱讀對他比較重要的內(nèi)容？

這個來自金融 APP 的卡片信息展示了用戶的收入?？纯催@個例子，你的閱讀順序是怎么樣的？我可以通過元素的擺放位置、比重、尺寸大小…所形成的視覺層級邏輯來理解它。由于缺乏明確的層級關(guān)系，有一些內(nèi)容無法被精準(zhǔn)獲知，必須在事后實際運營的過程中調(diào)試，通過用戶使用數(shù)據(jù)反饋來決定內(nèi)容的優(yōu)先級和必要性，并進(jìn)行修改（使用 Hotjar，Crazy Egg 之類的熱點地圖可以收集數(shù)據(jù)）。

請注意在這些內(nèi)容中：唯一的 動態(tài)信息 就是整個【 3 】模塊中的重要信息【 4 】中的內(nèi)容。所有的郵件頁面中位于【 1 】的內(nèi)容都是一樣的?！?2 】中的信息是不變的，并且重復(fù)出現(xiàn)在每一封這類型的郵件中，它們都是其認(rèn)知標(biāo)識的一部分。

第一次看到的用戶需要理解這是關(guān)于什么內(nèi)容的信息，所以信息全面是非常重要的，但是 并不需要把所有信息都放在突出的位置上?？紤]到這點，通過 減少色彩飽和度、改變字號大小 等降低視覺重量的方式，是不打斷用戶閱讀過程的選擇。

一張展示了用戶收入的來自金融 APP 的 Email 卡片，它應(yīng)用合理排版促進(jìn)用戶更好的理解信息。

在上面這張卡片里，簡單的改變了內(nèi)容排布，突出了最重要的內(nèi)容。他們展示了 層級關(guān)系 對用戶體驗的影響。一味格式化的信息傳遞被更具個性化、同理心的方法所取代。頭部和底部信息與主體信息相合并，通過這種隔離降低了被突出的可能性。最后，將主按鈕更改為次級按鈕（具體情況要根據(jù)點擊率來決定，主按鈕可能是最好的方式，有背景色的主按鈕更能激起用戶點擊欲望）

在商業(yè)軟件環(huán)境中，確切的說是在大量的表格中，更多見的是列表標(biāo)題比每一行的內(nèi)容更加突出。因為標(biāo)題是固定信息，而且用戶可能每天都會看到，而不是將重要等級修改為 主要和可變內(nèi)容（列表內(nèi)的內(nèi)容信息）。

認(rèn)識到設(shè)計界面時成本和實現(xiàn)功能之間的復(fù)雜性，遵循這一思路可以幫助設(shè)計師確定元素優(yōu)先級，并且創(chuàng)建層級關(guān)系以提升用戶的使用體驗。同時，因為引導(dǎo)對新用戶來說是必須的，所以在設(shè)計產(chǎn)品的時候，重要功能需要結(jié)合良好的入門教程、功能提示和及時反饋。這樣便建立了可以提升用戶日活及留存的高效、友好的用戶體驗。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：ZZiUP

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

“文中示例相關(guān)數(shù)據(jù)都為假的模擬數(shù)據(jù)，而非真正的商業(yè)數(shù)據(jù)，以此聲明”

度量是什么

【度量Measure】是一種測量評定對象的方式，它幫助我們結(jié)構(gòu)化的獲取對象的狀態(tài)與變化，我們運用這些數(shù)據(jù)進(jìn)行洞察，轉(zhuǎn)化為有用的信息，幫助決策和優(yōu)化，這個過程也是分析診斷的過程。

那日常會有怎樣的一些信息獲取呢？（這里面包含了數(shù)據(jù)也包含了一些正負(fù)性的反饋）

我們對一個功能上線進(jìn)行一組完整的項目結(jié)果質(zhì)量數(shù)據(jù)模擬：

• 凈交易收入額比去年同期上升2.0%，達(dá)到2千萬

• 訂單量為222，比上周上升了2.0%（對交易產(chǎn)生直接正向作用）

• 方案產(chǎn)出數(shù)共222件，比上周上升了22.2% （對內(nèi)容產(chǎn)出有直接的提升）

• 用戶的滿意度為2.2 ，上升了2% （之前是2.0）

• 用戶使用表現(xiàn)出沉靜，輕松的情緒（比之前挫折，晦澀要好很多）

• 功能點擊，周活躍2200，點擊率22%，周留存22.2%（0-1）

• 功能渲染和可交互時長為0.2秒加載完成。用戶在使用時交互順暢無卡頓（符合業(yè)界前端質(zhì)量交付標(biāo)準(zhǔn)）

這段描述符合整個產(chǎn)品使用的過程，它似乎是一個多面體，幫助我們了解整個產(chǎn)品黑盒。這個描述越精細(xì)越多維，我們得到的信息就越清晰越客觀。（包含多元數(shù)據(jù)內(nèi)容，并對數(shù)據(jù)已進(jìn)行比對和使用，得到一定的有效信息）反之，假如哪個環(huán)節(jié)出現(xiàn)問題。我們能清晰看到問題出現(xiàn)的環(huán)節(jié)，并且通過其表征的信息進(jìn)行問題的深挖（再細(xì)化相關(guān)數(shù)據(jù)或者關(guān)聯(lián)的層次）。

我們可以拆解到這幾個層次的數(shù)據(jù)

業(yè)務(wù)結(jié)果、用戶反饋（態(tài)度與情緒）、行為點擊、系統(tǒng)性能

可理解為：良好的產(chǎn)品運行-》用戶流暢使用-》良好的用戶反饋-》預(yù)期的產(chǎn)品轉(zhuǎn)化結(jié)果

從獲取方式來說，大致可以從兩個大角度（這里從廣義的范疇去分）

【qualitative research定性研究】：快速從樣本中判斷問題的性質(zhì)和方向

【quantitative research定量研究】：數(shù)據(jù)的驗證性，全面性、追蹤性

定量獲取

系統(tǒng)承載業(yè)務(wù)內(nèi)容的運作，可以記錄各種各樣的明細(xì)數(shù)據(jù)表，在海量數(shù)據(jù)中，進(jìn)行科學(xué)的關(guān)聯(lián)與細(xì)分。以大數(shù)據(jù)驅(qū)動為最終目標(biāo)，其特點是：數(shù)據(jù)的全面性和自動追蹤獲取。

業(yè)務(wù)結(jié)果

追蹤問題：產(chǎn)品是否符合市場需求？產(chǎn)品是否良性發(fā)展？

業(yè)務(wù)型數(shù)據(jù)是圍繞著整個商業(yè)建設(shè)和運作階段而產(chǎn)生的數(shù)據(jù)。是最能體現(xiàn)產(chǎn)品、商業(yè)價值的部分?？梢詺w納為三類：內(nèi)容建設(shè)->流量訪問->商業(yè)交易。是商業(yè)鏈路中產(chǎn)生的具有直接商業(yè)結(jié)果的數(shù)據(jù)。

內(nèi)容建設(shè) 是指經(jīng)過人為輸入，系統(tǒng)流轉(zhuǎn)產(chǎn)生的比如商品、文章、方案等等具有實質(zhì)內(nèi)容價值的數(shù)據(jù)。是具有生產(chǎn)過程的（一般是經(jīng)過一系列的操作完成的）。

流量訪問/分發(fā) 則是針對商業(yè)內(nèi)容的使用/運作，比如某個商品的瀏覽，某個內(nèi)容的傳播等等。這些和營銷相關(guān)具備人群效應(yīng)的數(shù)據(jù)也屬于業(yè)務(wù)數(shù)據(jù)。最常見的就是曝光量點擊量，而在中后臺系統(tǒng)中則是以訪問瀏覽為主。

商業(yè)交易 則是最直接的商業(yè)結(jié)果型數(shù)據(jù)，最常見的就是網(wǎng)站的GMV（成交金額：包括：付款金額和未付款。）

訂單交易額、注冊會員數(shù)等等。

以某平臺中相關(guān)的業(yè)務(wù)數(shù)據(jù)為示例

業(yè)務(wù)結(jié)果的分析，是根據(jù)不同業(yè)務(wù)發(fā)展，確定核心業(yè)務(wù)指標(biāo)，以及建立對核心指標(biāo)的拆解邏輯。

它或許是個計算公式。或者是個一級指標(biāo)到二級關(guān)聯(lián)指標(biāo)。例如以下，這里暫時不展開來講。

對于業(yè)務(wù)數(shù)據(jù)的獲取，我們大部分是直接通過后端的數(shù)據(jù)庫沉淀下來的。但如果涉及到商業(yè)數(shù)據(jù)的細(xì)分（按照商業(yè)目標(biāo)進(jìn)行階段性或者類別型的追蹤監(jiān)測）。比如想知道會員的vip的分層情況?；蛘咧滥承袠I(yè)商品的生產(chǎn)細(xì)分情況等等。這些雖然可以通過后端拉數(shù)據(jù)，讓數(shù)據(jù)分析師或者運營整理出來，但是每次都有加工成本，也沒有辦法看到實時數(shù)據(jù)，這時候就會要考慮去做細(xì)分埋點，下文會提及到埋點方式。

行為點擊

追蹤問題：產(chǎn)品使用情況如何？用戶瀏覽習(xí)慣如何？

用戶行為數(shù)據(jù)，是圍繞用戶訪問某產(chǎn)品過程的用戶行為軌跡數(shù)據(jù)。其中大體包含了用戶量、曝光量、點擊量、瀏覽量、訪問時長、停留時長等等觀測用戶使用情況的表征數(shù)據(jù)。

這里是一組典型的平臺用戶使用行為的描述，而這些行為的最終，是產(chǎn)出了上面的業(yè)務(wù)數(shù)據(jù)（訂單與成交金額）

訪問首頁->點擊并瀏覽商品詳情->點擊客戶咨詢進(jìn)行咨詢->點擊購買提交訂單->點擊支付，支付完成

由此我們可以解釋，行為數(shù)據(jù)與業(yè)務(wù)結(jié)果之間的關(guān)系，并且兩者的關(guān)注點也是有差異的，在行為鏈路中，我們更注重每一層的轉(zhuǎn)化關(guān)系以及用戶為什么沒有向下轉(zhuǎn)化的障礙點。

再以B端管理系統(tǒng)為例

B端的管理系統(tǒng)具有典型性，可以用點線面來歸納，點指的是諸如事件曝光點擊等。線指的是用戶使用路徑，面則是廣義的綜合性觀察，比如流量分布，比如區(qū)域熱圖等。通過觀察這些，可以觀察到用戶的使用率和使用路徑。并且得知用戶使用產(chǎn)品是否真的貼合需求，設(shè)計的是否合理高效。

行為數(shù)據(jù)要結(jié)合具體的場景或者維度去觀察，才能產(chǎn)生更有用的信息。

運用行為數(shù)據(jù)，我們可以去做很多分析：漏斗分析、留存分析、流量分布分析、路徑分析 、單頁熱力分析、點擊分析、 人群分析等等，這些都是分析方式，在后續(xù)關(guān)聯(lián)篇章中會去探討。

行為數(shù)據(jù)的獲取是依賴于埋點的，在業(yè)界有兩大類埋點方式：全埋點、手動埋點。

行為數(shù)據(jù)的三大事件類型基本可以歸類為：曝光事件、點擊事件、停留事件

對于C端側(cè)重于曝光、點擊。對于B端側(cè)重點擊、停留 （從流量轉(zhuǎn)化與訪問效能兩個角度來說）

以上介紹了業(yè)務(wù)結(jié)果和行為點擊兩種數(shù)據(jù)，而這兩種內(nèi)容，都會涉及到埋點采集這件事，這里我們介紹下關(guān)于埋點采集數(shù)據(jù)這件事情。

埋點采集

追蹤問題：如何根據(jù)人物、場景、動作制定精準(zhǔn)的采集方案？

埋點，是對特定數(shù)據(jù)的采集，由前端埋點和上報、進(jìn)行數(shù)據(jù)處理和數(shù)據(jù)分析。一般數(shù)據(jù)埋點分以下三種：

全埋點雖然是所有數(shù)據(jù)可按需可查，但是因為它的數(shù)據(jù)量極大，且需要2次定義和清洗，所以只能對通用性質(zhì)的數(shù)據(jù)進(jìn)行采集。而針對性的內(nèi)容，由數(shù)據(jù)采集定義后，由前端上報后，可能做到定點，定期精細(xì)具體的統(tǒng)計。

兩者大致能產(chǎn)出什么數(shù)據(jù)分析呢？主要以平臺/系統(tǒng)這個角度看：

整體分析-通用全埋點

用戶活躍、用戶留存、用戶跳出率、用戶停留時長、用戶流量分布...

局部與特定分析-手動埋點

關(guān)鍵事件點擊率、關(guān)鍵入口渠道流量總計與分布、關(guān)鍵鏈路漏斗、關(guān)鍵具體區(qū)域曝光與停留時長...

為了獲取更精準(zhǔn)的業(yè)務(wù)/行為數(shù)據(jù)，我們一般會采用手動埋點的方式，所以前期 第一階段會在場景中確定分析目標(biāo)，然后梳理相應(yīng)需要的指標(biāo)，書寫明確的埋點需求是很重要的一個環(huán)節(jié)，書寫的足夠明確，才能和業(yè)務(wù)、前端、數(shù)據(jù)分析師進(jìn)行準(zhǔn)確的溝通，分析目標(biāo)一致，然后上線后建立相應(yīng)的數(shù)據(jù)看板。

注意點：采集方式｜統(tǒng)計口徑｜數(shù)據(jù)精準(zhǔn)度校驗

那怎么定義數(shù)據(jù)分析時的埋點需求呢？可以用以下方式去描述：

1. 什么用戶=用戶定義

2. 什么時間=時間戳

3. 什么環(huán)境=地理位置+網(wǎng)絡(luò)環(huán)境+硬件環(huán)境+軟件環(huán)境+哪個頁面（來源頁面）+什么位置

4. 什么行為=事件ID+命名

5. 什么條件=可以以某個行為或者業(yè)務(wù)交易為條件

6. 結(jié)果如何=用戶操作的結(jié)果

示例：

一個后臺系統(tǒng)懸浮幫助功能使用的情況需求

一個搜索使用的情況需求

這2個是比較細(xì)致的數(shù)據(jù)采集的描述。規(guī)則了統(tǒng)計的對象，范疇，以及條件，結(jié)果觀測等等的需求，大家可以在業(yè)務(wù)和行為數(shù)據(jù)相關(guān)采集中，試著撰寫下這樣明確的需求。這樣的數(shù)據(jù)采集才具有精準(zhǔn)的分析價值。

人群標(biāo)簽

追蹤問題：用戶都是哪些人，誰使用了這些功能 ？

人群標(biāo)簽可以理解為數(shù)據(jù)型用戶畫像。為什么在這里提及，因為大量數(shù)據(jù)（特別是具體的采集數(shù)據(jù)）都會涉及到人群這個角度。人群也是定量數(shù)據(jù)中最具有獨立觀察價值的數(shù)據(jù)。

人群標(biāo)簽就是根據(jù)人群特點，進(jìn)行描述分類，對人群打標(biāo)簽。我們根據(jù)不同的獲取路徑，可以大致分兩類。

一類是利用基本數(shù)據(jù)進(jìn)行定義，比較簡單直接

從不同的端，可以獲取用戶的基本來源，如訪問端的類型，或地理位置等，可以定義為“客戶端用戶”、“江浙滬用戶”等。

通過唯一用戶ID所匹配的一系列用戶注冊時的基本信息內(nèi)容，如性別、職業(yè)、行業(yè)、興趣等?？梢远x為“女性用戶”、“定制類用戶”等。

還有一類就是復(fù)合型自定義，一般是根據(jù)用戶的業(yè)務(wù)、行為數(shù)據(jù)或者類別屬性來定義的，它非常的靈活聚焦。

使用某類條件公式來定義某一波用戶

如我們將購買能力從高低來分層用戶：月購買小于5000的為中購買力用戶，大于5000的為高購買力用戶，周活躍大于2但無購買記錄為潛力用戶。

另外一種構(gòu)建用戶范疇的方式：通過“時間、地點、事件”等一系列復(fù)雜描述來勾勒圈選用戶

如我們定義“第一次訪問站點時，在首頁有關(guān)注過每日推薦“的用戶。

這里的復(fù)合定義很多時候都會用到多指標(biāo)多維度。是一種深度結(jié)合業(yè)務(wù)場景來圈選人群，定義用戶的方式。

人群標(biāo)簽，不僅幫助我們細(xì)分?jǐn)?shù)據(jù)，知道“到底是什么人做了什么事”，聚焦使用人群的各項指標(biāo)健康情況。最終，還可以定位產(chǎn)品，定位人群，精細(xì)化運營產(chǎn)品：現(xiàn)在的用戶大致都集中在哪些人群中？哪些功能是頭部用戶需要的？哪些功能最受基礎(chǔ)版用戶的歡迎等等。在探索商業(yè)需求的時候，更容易找到抓鉤，去深挖商業(yè)價值。

常用畫像的場景

1.定性用戶畫像：通過調(diào)研，熟悉角色日常生活或者工作場景環(huán)境，定義基本用戶畫像 

如：用戶訪談、用戶旅程圖

2.定量用戶畫像：用定量的數(shù)據(jù)做某些值的規(guī)則，來圈定用戶人群

如： 用戶生命周期、問卷分發(fā)、運營活動

某產(chǎn)品生命周期使用示例：

系統(tǒng)性能

追蹤問題：產(chǎn)品使用起來流暢嗎 ？ 

性能數(shù)據(jù)一般指由產(chǎn)品進(jìn)行頁面渲染及前后端交互時，監(jiān)測到的時長數(shù)據(jù)。觀測系統(tǒng)性能，是因為系統(tǒng)數(shù)據(jù)量很大時，在產(chǎn)品渲染交互環(huán)節(jié)中，容易產(chǎn)生卡頓，造成用戶體驗的下降，導(dǎo)致流失率。而系統(tǒng)性能，一般是由性能監(jiān)控等產(chǎn)品產(chǎn)出質(zhì)量報告。在一些瀏覽器中，也有嵌入的插件統(tǒng)計報告。

這里大致介紹下業(yè)界google最新的關(guān)于7大性能指標(biāo)的定義

這其中，最重要的3大核心指標(biāo)是：

LCP：頁面的速度指標(biāo)

FID：頁面的交互體驗指標(biāo)

CLS：頁面的穩(wěn)定指標(biāo)

可以通過官方出品，安裝 web-vitals-extension 插件來獲取三大核心指標(biāo)，也可以通過通過安裝 Lighthouse 插件來獲取如下指標(biāo)，現(xiàn)在已經(jīng)內(nèi)置在瀏覽器中

定性獲取

定性數(shù)據(jù)，是由用戶那里獲取信息，直接判斷問題的性質(zhì)和方向，快速展開挖掘和收集。 

它的獲取方式主要是 面對面研究：

即選擇典型用戶角色，針對問題或者內(nèi)容進(jìn)行集中測試或者訪談：用戶訪談、焦點問題調(diào)研、可用性測試等。

「ps:另外一種 自動化研究：圈人群進(jìn)行在線問卷調(diào)研投放，聚合大量樣本進(jìn)行交叉或者聚類等等分析，是一種樣本量的統(tǒng)計方式。具備一定程度的樣本數(shù)量，可歸為定量統(tǒng)計分析。」 

比較常用的是：系統(tǒng)可用性量表（SUS）、有效性、滿意度和易用性的問卷（USE）

不管哪種方式，我們都是圍繞“可用性”這個角度去進(jìn)行評估和研究的。業(yè)內(nèi)可用性這個詞稱為：“Usability”「ISO9241/11」中有明確的相關(guān)定義：一個產(chǎn)品可以被特定的用戶在特定的境況中，有效、高效并且滿意得達(dá)成特定目標(biāo)的程度。可用性關(guān)注的是用戶與對象在互動過程中的有效性（effectiveness）、效率（efficiency）和滿意度（satisfaction）。

用戶反饋中我們獲取到什么樣的信息，我們第一：明確用戶對此內(nèi)容的態(tài)度，觀察用戶行徑中的順暢度，感受用戶認(rèn)知反饋。第二：詢問其嚴(yán)重程度和影響程度，正面負(fù)面情緒。這兩層是由表及里的，互相關(guān)聯(lián)。但側(cè)重有所不一樣。

用戶態(tài)度

追蹤問題：用戶使用后，滿意度如何？ 

通常用到以下幾種度量

而這些內(nèi)容中一般包含數(shù)據(jù)是

1.觀察與記錄實驗性數(shù)據(jù)（描述性狀態(tài)情況） 

2.主觀數(shù)據(jù)和偏好數(shù)據(jù)（出自于自身的想法） 

3.情感層面數(shù)據(jù)（使用系統(tǒng)后最終的感受或者過程中的心情） 

4.結(jié)果性數(shù)據(jù)（比對/選擇內(nèi)容，得出結(jié)論） 

而從場景分我們?nèi)绾问褂眠@幾種度量呢？

引用自：Tom Tullis Bill Albert {Measuring the user Experience} 用戶體驗度量 

不難發(fā)現(xiàn)，我們最常用到的是「自我報告式的度量」

它比較寬泛的反應(yīng)了產(chǎn)品綜合情況。這里舉一個自我報告度量涵蓋的范疇

 

用戶情緒

追蹤問題：用戶使用后，在情感上反應(yīng)如何？

初步知曉用戶反饋情況后，可以深入用戶情緒感受，進(jìn)行點狀問題的挖掘。進(jìn)而對問題進(jìn)行定性分析追蹤和程度評級。用戶在一定嚴(yán)重情緒影響下，是對產(chǎn)品會產(chǎn)生排斥的，所以有時候?qū)η榫w的收集，能讓我們對內(nèi)容具備敏感度。且在設(shè)計過程中，充分建立共情和同理心。

情感描述模型是指對情感狀態(tài)進(jìn)行定義，并描述其表達(dá)性特征的方法，主要可分為離散描述模型和連續(xù)描述模型。 

連續(xù)型描述模型往往認(rèn)為人類的情感狀態(tài)是分布在若干個維度組成的某一個空間中，不同情感狀態(tài)之間不是獨立的，而是連續(xù)的，可以轉(zhuǎn)化的。

這里我們介紹一個連續(xù)描述模型： 喚醒度（Va-lence-Arousal）模型

「Va-lence-Arousal」：用兩大象限歸納了人們的情緒：正面與負(fù)面情緒的變化。激動和平緩情緒的變化。構(gòu)建了一個立體的情感空間。 

當(dāng)度量情緒變化階梯時，可以試著使用連續(xù)情緒。比如：挫折——》生氣、沮喪——》厭煩等。而有些程度詞是和時間長度有直接關(guān)系的，比如說疲憊。我們需要關(guān)注場景特點，用戶可能會長時間沉浸式體驗時，它是否能接受打擾，是否會因為一些內(nèi)容受挫。這些都會導(dǎo)致他最終直觀感受的好與壞。

舉例子來陳述：

1.產(chǎn)品設(shè)計過程中，串聯(lián)用戶使用流程時，流程的長短和任務(wù)路徑會產(chǎn)生直接用戶感受-》是否足夠輕松 

2.運營產(chǎn)品過程中，在哪些環(huán)節(jié)中穿插特定內(nèi)容可以打造用戶峰值體驗?！愤@個推薦不錯，好貼心，驚喜 

當(dāng)這些生動的情感詞匯，被考慮進(jìn)產(chǎn)品設(shè)計中時，很容易讓我們得到一個具有溫度感，具有更良好接受度的產(chǎn)品。 

在度量實施方式上，我們可以在用戶旅程圖中，在問卷或可用性測試部分，考量使用卡片分類法，或表情評分板對用戶的情感進(jìn)行收集。（基于情緒感知更為直接有共情性）。 

情緒評分卡：

在各種用戶態(tài)度反饋中，我們也可以直接去獲取針對性的情緒化度量表進(jìn)行5分表計量評分。

具體方式：

第一步：卡片分類法，預(yù)設(shè)10-20組情緒關(guān)鍵詞，讓用戶選2-3個關(guān)鍵詞，確定影響面。 

第二步：確定程度：1-5評分機(jī)制確定程度。 

以下為目標(biāo)設(shè)定的取詞示例：

嚴(yán)重評級

追蹤問題：什么問題是至關(guān)緊要的，需要馬上解決的？ 

定性內(nèi)容的收集完成后，一個比較重要的事情就是針對問題去做2次整理和評級。 

嚴(yán)重性評估有助于集中精力解決關(guān)鍵的問題,清晰說明每個一個嚴(yán)重等級的意義。對每個等級都盡可能用實例說明。 

常用評估：

高中低評估

低－會讓參加者心煩或沮喪，但不會導(dǎo)致任務(wù)失敗的問題。

中－這類問題會顯著提高任務(wù)的難度，但不會直接導(dǎo)致任務(wù)的失敗。

高－所有直接導(dǎo)致任務(wù)失敗的問題。遇到這類問題后基本沒有可能再完成任務(wù)。

綜合因素評估

多維度的評估

前兩個較常用，后兩個看產(chǎn)品及技術(shù)配合

1. 對用戶體驗的影響

2. 預(yù)期的發(fā)生頻率

3. 對商業(yè)目標(biāo)的影響

4. 技術(shù)／實現(xiàn)成本評分（0=低，1=中，2=高）

數(shù)據(jù)層次結(jié)構(gòu)總結(jié)

以上是我們對分層數(shù)據(jù)獲取的一些整理，希望大家對于數(shù)據(jù)涉及到的概念有一個粗略的認(rèn)知。當(dāng)然如何運用數(shù)據(jù)做好度量這件事情，本身還需要一些串聯(lián)的方法，比如使用度量框架（Heart模型），運用合理的分析流程（GSM），搭建追蹤式看板，基于問題的度量報告或者自我評估報告等。都是靈活運用到以上數(shù)據(jù)立體的分析產(chǎn)品質(zhì)量的過程。 

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：酷家樂UED

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

前言

體驗?zāi)繕?biāo)的達(dá)成，需要合理且客觀的度量方法，體驗度量的實踐，需要度量框架的有力支撐。提高競爭優(yōu)勢，提升客戶態(tài)度，保障產(chǎn)品可以即時的響應(yīng)客戶的需求。本篇文章的實踐方法全部來源于酷家樂B端產(chǎn)品業(yè)務(wù)中的實踐案例，重點在于度量框架的深度實踐，如果我們的經(jīng)驗?zāi)軌驇椭侥瑲g迎交流討論。 

一、體驗度量怎么做？

“體驗”是用戶純主觀的感受，從這個情況來看是很難被度量的。“體驗”同時也是一個比較抽象的概念，如果把一個抽象的概念拆解成一個可執(zhí)行的策略，拆解的過程如何保證策略的有效性，是我們一直在思考的。面對酷家樂工具型、SaaS型、平臺型并存的產(chǎn)品體系，且存在錯綜復(fù)雜的用戶需求和業(yè)務(wù)訴求。在這樣的前提下對方法的確立需要更加的冷靜。 

如何確定方法？我們需要的是一個完整的度量框架，以及能夠聚焦用戶體驗層為驅(qū)動，分解并有力的去解決問題。經(jīng)過大量的實踐和驗證得到，抓住一個擊破點作為產(chǎn)品體驗提升的目標(biāo)，并一種合理的方式進(jìn)行推導(dǎo)和驗證，這是一種最直接度量體驗的標(biāo)準(zhǔn)流程性方式，這里的目標(biāo)必須是：

• 體現(xiàn)用戶主觀感受或者具有行為驅(qū)動的目標(biāo)。

• 基于業(yè)務(wù)目標(biāo)定義+用戶訴求了解后，得到的以用戶為中心驅(qū)動的用戶行為。

  
  

二、度量模型怎么選？

面對設(shè)計圈內(nèi)已經(jīng)存在的和部分大廠創(chuàng)造的度量模型，評估優(yōu)劣后最終我們選取了HEART模型。因為HEART是個比較全面和具備更多擴(kuò)展性的分析框架，同時足夠的權(quán)威和標(biāo)準(zhǔn)，而且市面上的模型基本都被HEART的五維囊括。除了這些考慮因素外，再給出以下幾個明顯的優(yōu)勢點：

• 1、HEART同時涵蓋了定性和定量的不同數(shù)據(jù)維度。

• 2、HEART框架同時包含了：宏觀和微觀的層面

• 3、HEART模型并不單純的再定義體驗質(zhì)量，同時也鏈接了商業(yè)價值。把用戶體驗的原則和收益驅(qū)動的指標(biāo)關(guān)聯(lián)在了一起。

三、HEART模型簡介

1.什么是HEART模型？

多個大廠利用HEART模型拆解框架得到了深度結(jié)合業(yè)務(wù)的度量框架。是個比較全面和具備更多擴(kuò)展性的分析框架。HEART是GOOGLE公司在實踐中提出，基于產(chǎn)出更好產(chǎn)品為目的，用來衡量產(chǎn)品整體體驗的度量評估模型。 

它包含五個維度Happiness（愉悅度）、Engagement（參與度）、Adoption（接受度）、Retention（留存度）、Task success（任務(wù)完成度）組成，是Google用戶體驗研究團(tuán)隊在實踐中為了準(zhǔn)確的度量用戶體驗而總結(jié)提煉出的一個框架。 

2.HEART模型的特性與應(yīng)用場景

目前市面上還存在PTECH、TEENS等體驗度量模型，而HEART模型的特性在于它”以用戶為中心“進(jìn)行度量，同時度量維度全面，既包含宏觀的愉悅度，也有微觀的任務(wù)完成率，同時關(guān)注產(chǎn)品上的留存率，與業(yè)務(wù)目標(biāo)保持緊密。在評估方式上，既有定性評估的愉悅度，也有定量評估的參與度、留存率等，可對用戶使用產(chǎn)品情況做一個完整的評估。 

四、HEART模型的詳細(xì)拆解指南

第一步：確定體驗?zāi)繕?biāo)

體驗?zāi)繕?biāo)是體驗度量的開始，準(zhǔn)確的目標(biāo)決定了度量的質(zhì)量。要提煉出準(zhǔn)確而有效的體驗?zāi)繕?biāo)并不容易，通常會引入產(chǎn)品功能等業(yè)務(wù)因素，使體驗?zāi)繕?biāo)不夠單純，拆解出來的指標(biāo)所反映的數(shù)據(jù)也很難歸因到體驗。故復(fù)雜項目可提煉多個體驗?zāi)繕?biāo)相互補(bǔ)齊，但每個都必須準(zhǔn)確而具體。 

那么如何確定體驗?zāi)繕?biāo)呢？

體驗無法脫離于具體的產(chǎn)品服務(wù)存在，用戶的整體體驗感知積累于每一個接觸觸點，大多觸點常規(guī)而平庸影響不大，必須識別出達(dá)成業(yè)務(wù)的關(guān)鍵觸點進(jìn)行深入分析，已提煉出體驗?zāi)繕?biāo)。 

整體的思路是：首先分析業(yè)務(wù)目標(biāo)，并就業(yè)務(wù)目標(biāo)所落地的產(chǎn)品服務(wù)的鏈路進(jìn)行拆解，分析鏈路后，找到其中對體驗有決定性影響的因素，提取其因素后，即形成體驗?zāi)繕?biāo)。

1.確定業(yè)務(wù)目標(biāo)

業(yè)務(wù)目標(biāo)是整個產(chǎn)品服務(wù)的最終目的，體驗作為產(chǎn)品服務(wù)的重要評估維度，需要與之對齊。業(yè)務(wù)目標(biāo)與所選取項目范圍有關(guān)，從整個產(chǎn)品到特定功能模塊，或者某個行為鏈路都可作為參與項目。根據(jù)選取的項目來確定業(yè)務(wù)目標(biāo)，如“保持產(chǎn)品新舊改版的平穩(wěn)過渡，降低改版造成的斷約率”、“提升用戶自主解決問題的能力，降低運營服務(wù)的壓力”等。注意業(yè)務(wù)目標(biāo)與產(chǎn)品目標(biāo)的差異，后者是對前者的產(chǎn)品化闡釋，可以具體到某項產(chǎn)品服務(wù)目標(biāo)上。產(chǎn)品目標(biāo)和體驗?zāi)繕?biāo)可以共同服務(wù)于業(yè)務(wù)目標(biāo)，實現(xiàn)價值的達(dá)成。 

?示例：

業(yè)務(wù)目標(biāo)：在設(shè)計工具中商品素材的查找效率，輔助家裝設(shè)計師快速構(gòu)建方案，提升其簽單率 

產(chǎn)品目標(biāo)：優(yōu)化現(xiàn)有商品素材的查找邏輯，降低家裝設(shè)計師查找商品素材的成本 

2.拆解產(chǎn)品鏈路

產(chǎn)品目標(biāo)需借助于功能鏈路來達(dá)成，將該目標(biāo)達(dá)成過程的邏輯呈現(xiàn)出來，并分析其跳轉(zhuǎn)路徑、操作觸點，就是鏈路拆解過程。整個鏈路過程是用戶價值的直接承載，任何一個觸點的失效都將影響到整條鏈路順暢和效率。就鏈路整體而言，觸點越多、鏈路越長，操作成本越大；就某個具體觸點而言，其效率、易用性、易理解度也將影響整體的價值傳達(dá)。 

為完整的拆解出整個產(chǎn)品鏈路，需要從“用戶側(cè)”、“系統(tǒng)側(cè)”進(jìn)行分析，用戶側(cè)代表用戶視角下的功能使用流程，是主要考慮的維度，體現(xiàn)了以用戶為中心的設(shè)計思路；系統(tǒng)側(cè)代表系統(tǒng)在用戶交互過程中的需要執(zhí)行的行為，是系統(tǒng)邏輯的直接體現(xiàn)。兩者的交互作用，將完整表達(dá)“信息”的流轉(zhuǎn)過程，最終作用到產(chǎn)出物上。 

?示例：商品素材搜索鏈路

3.分析觸點并提取決定性因素

選取對整個鏈路有重要影響的觸點進(jìn)行設(shè)計維度上的分析，以找出決定觸點目標(biāo)達(dá)成的決定性因素，這個決定性因素就是我們體驗上需要著重優(yōu)化的點。在尋找“決定性因素”的過程中，避免將系統(tǒng)性能、業(yè)務(wù)功能、業(yè)務(wù)信息因素篩選出來，需要聚焦在設(shè)計維度上，諸如交互行為、界面布局、信息呈現(xiàn)、系統(tǒng)反饋等。 

?示例： 

“確認(rèn)輸入行為”、“搜索結(jié)果分類”、“不同分類的區(qū)塊劃分”、“結(jié)果數(shù)量”等。 

對已拆分出來的各種設(shè)計因素來說，哪些算是決定性因素呢？一個很簡單的判斷方式是：反向判斷，即假設(shè)缺失這個設(shè)計因素，或不完整是否會對該觸點有“阻塞性”影響。 

如有嚴(yán)重阻塞影響，則證明該設(shè)計因素很大程度上決定了觸點的目的達(dá)成，屬于決定性因素；若設(shè)計因素有中等的、輕微的影響，則可能不是本次優(yōu)化的重點，不作為決定性因素。如“搜索結(jié)果的分類”影響用戶對搜索結(jié)果的信息獲取，是決定性因素。“確認(rèn)輸入行為”是常規(guī)設(shè)計行為，不算決定性因素。 

當(dāng)然，具體問題具體分析，在不同的功能場景下，同一種行為的影響程度可能不同。 

需要注意的是，決定性因素的選取必須在具體的觸點中才有意義，脫離后無法判斷是否有阻塞性影響。另外，某些設(shè)計因素是否是決定性可能在跨觸點中體現(xiàn)出來，需要聯(lián)系整個鏈路進(jìn)行交叉分析確定。

4.體驗?zāi)繕?biāo)的提取與表述

找到?jīng)Q定性因素及其為什么決定性的原因后，需要為其設(shè)定一個設(shè)計目標(biāo)，來指示應(yīng)向什么方面優(yōu)化這個決定性因素。決定性因素只是現(xiàn)有功能的一種解法，可能存在其他更優(yōu)解法或優(yōu)化方向，我們需要基于決定性因素概括出“設(shè)計目標(biāo)”，以新的設(shè)計目標(biāo)來指引我們的優(yōu)化設(shè)計。 

?示例： 

決定性因素“搜索結(jié)果的分類”，引申出的設(shè)計目標(biāo)為“更清晰的信息層級”、“更完整的信息”。

通過鏈路觸點的分析，決定性因素的提取，設(shè)計目標(biāo)的匹配，我們已對設(shè)計優(yōu)化方向有了準(zhǔn)確的了解。這個時候需要從設(shè)計師視角做一個完善而精準(zhǔn)的”體驗?zāi)繕?biāo)“的表述。

一個體驗?zāi)繕?biāo)需要與具體設(shè)計場景關(guān)聯(lián)后，才能產(chǎn)生具體而明確的價值，即設(shè)計目標(biāo)落地到場景中后產(chǎn)生價值，表述思路是：在某個具體的鏈路觸點中，我們期望怎么達(dá)成這件事?？赏ㄟ^格式進(jìn)行填寫： 

使/什么用戶/用什么  做什么事/設(shè)計目標(biāo)/完成什么事 

?示例： 

家裝設(shè)計師  使用搜索功能  搜索素材時  對結(jié)果展示清晰的信息層級  來快速找到需要的商品 

第二步：確定度量維度

引入HEART模型的重要原因，正在于它的度量維度。由于它的度量維度多方位的表述了產(chǎn)品的使用情況，度量緯度不是一種標(biāo)準(zhǔn)，是一種分析框架和角度，決定了體驗?zāi)繕?biāo)應(yīng)該被如何度量，進(jìn)而影響信號的確定和指標(biāo)的拆解，因此度量維度的選取至關(guān)重要。 

HEART提供了豐富的五個維度，根據(jù)其定義，提供了你幾個可以衡量的視角。在實踐過程中，因每個體驗?zāi)繕?biāo)所對應(yīng)的觸點的場景、交互、產(chǎn)品目的不同，我們只需要找到符合定義的維度即可。反過來看，一個與體驗?zāi)繕?biāo)不相關(guān)、不匹配的度量維度不能很好地度量體驗。 

需要注意的是，HEART模型因其維度的廣泛定義，不僅僅可用于體驗?zāi)繕?biāo)的度量，也可以對產(chǎn)品目標(biāo)、業(yè)務(wù)結(jié)果進(jìn)行度量，對體驗?zāi)繕?biāo)的度量因要從產(chǎn)品因素中剝離出體驗問題，相對來說較為復(fù)雜，是本次敘述的重點。

第三步：確定信號

首先信號可以被定義為是一種信息的載體，其承載的信息往往反映的是用戶對體驗?zāi)繕?biāo)的成功或是失敗的結(jié)果，對信號的準(zhǔn)確獲取將直接影響到對下游指標(biāo)的確立。 

信號的確定需以上游度量維度為標(biāo)準(zhǔn)范圍并引用體驗?zāi)繕?biāo)為重要判斷依據(jù)，避免過度發(fā)散，保證精準(zhǔn)規(guī)范的同時，去結(jié)合當(dāng)前有無體驗變量基準(zhǔn)值作為條件，并使用成功或者失敗的結(jié)果來評估體驗?zāi)繕?biāo)的達(dá)成情況，最終提煉出信號。 

以度量維度為標(biāo)準(zhǔn)并引用體驗?zāi)繕?biāo)確定信號

通過逐一對度量維度進(jìn)行體驗變量提取，有基礎(chǔ)值則進(jìn)行對比的方式，無基礎(chǔ)值則使用趨勢的表述方式，結(jié)合業(yè)務(wù)目標(biāo)的情況下，去概念性假設(shè)體驗?zāi)繕?biāo)的正向或反向結(jié)果，最終通過標(biāo)準(zhǔn)的格式提煉出信號，信號的提煉的可以用固定的格式進(jìn)行書寫： 格式：用戶   用什么   做什么   體驗變量   趨勢&數(shù)值

尋找體驗變量

基于HEART模型的整個分析框架，拆解出最高頻和貼合體驗?zāi)繕?biāo)的常見體驗變量庫。在此框架的指導(dǎo)下，可以快速尋找需要的體驗變量。 

?示例： 

（體驗變量：易操作度；有基準(zhǔn)值） 家裝設(shè)計師 使用搜索功能 搜索素材時 易操作度 達(dá)到4.2

（體驗變量：易操作度；無基準(zhǔn)值） 家裝設(shè)計師 使用搜索功能 搜索素材時 易操作度 上升

確定信號的注意事項

①信號的成功或失敗要能在行為或態(tài)度上準(zhǔn)確的體現(xiàn)出來，失敗信號可能比成功更容易定義； 

②信號要易于被追蹤； 

③信號的敏感度要高，易于被檢測； 

④信號應(yīng)與目標(biāo)有高的相關(guān)度，同時避免被其他因素影響； 

⑤一個目標(biāo)可能對應(yīng)多個信號； 

第四步：確定指標(biāo)

指標(biāo)是衡量目標(biāo)的參數(shù)，用于準(zhǔn)確的描述目標(biāo)。但通常很難直接從目標(biāo)中確定出指標(biāo)，需要借助于對信號的分析。信號是信息的載體，其中包含著變量信息，提取其中變量信息，即可獲得一個初始指標(biāo)。 

初始指標(biāo)反映了客觀的原生數(shù)據(jù)，需要對原生數(shù)據(jù)做處理后，可得到一個能精準(zhǔn)描述體驗?zāi)繕?biāo)的指標(biāo)。 

對數(shù)據(jù)進(jìn)行處理

體驗變量所直接產(chǎn)生的屬于原生數(shù)據(jù)，而一組數(shù)據(jù)通過某種分析加工后，可以成為一個更有價值的信息，如均值、中位值。選擇對數(shù)據(jù)進(jìn)行哪種方式處理，受目標(biāo)的影響較大，每一種數(shù)據(jù)處理方式，都有指向特征，通過與目標(biāo)的匹配，可以選取出合適的數(shù)據(jù)處理方式。

確定指標(biāo)的注意事項

①指標(biāo)應(yīng)與目標(biāo)和信號密切相關(guān)，指標(biāo)越明確越清晰越好； 

②標(biāo)應(yīng)方便被持續(xù)追蹤，對信號的描述更敏感，方便做A/B測試。 

?示例： 

案例A

度量維度：愉悅度

信號：家裝設(shè)計師    使用搜索功能    搜索素材時    易操作性達(dá)到4.0

體驗變量：易操作度

數(shù)據(jù)：易操作度評分

指標(biāo)：易操作度評分的均值

五、總結(jié)

看似復(fù)雜的體驗度量監(jiān)控指標(biāo)的拆解，可以概括為“體驗的問題定位”——“體驗的目標(biāo)度量”——“體驗的客觀追蹤”。 

1.“問題定位”是監(jiān)控目標(biāo)的根據(jù)，必須來源于具體的業(yè)務(wù)鏈路才有被分析和量化的可能，它是體驗問題在業(yè)務(wù)鏈路中被抽取出來的關(guān)鍵，并轉(zhuǎn)化為可度量的指標(biāo)來進(jìn)行監(jiān)控，最終為后續(xù)數(shù)據(jù)洞察和可視化提供準(zhǔn)確的數(shù)據(jù)來源，否則流于主觀，監(jiān)控體系建立在不可靠的體驗?zāi)繕?biāo)之上，當(dāng)然也就不可能有助于解決體驗問題。 

2.而“目標(biāo)度量”所運用的HEART模型作為度量維度，相當(dāng)于一種體驗的定義標(biāo)準(zhǔn)，闡釋了什么是它所定義的用戶體驗。HEART模型以其全面的度量維度，能很好地實踐這一點。必須注意的是，對HEART模型下的五個度量維度的細(xì)化闡釋可能受不同產(chǎn)品特性、產(chǎn)品階段影響而不同，最終轉(zhuǎn)化出不同的客觀指標(biāo)。 

3.“客觀追蹤”是對在度量標(biāo)準(zhǔn)下的客觀變化的捕捉，捕捉其變量特征，建立常態(tài)指標(biāo)，成為可靠的可監(jiān)控的指標(biāo)。 

4.另外，除了準(zhǔn)確的定位、度量、轉(zhuǎn)化的邏輯推導(dǎo)外，參考業(yè)務(wù)目標(biāo)進(jìn)行范圍收斂，也是非常重要的工作，它影響著每一個推導(dǎo)環(huán)節(jié)，以避免偏離產(chǎn)品方向，有效的過濾弱關(guān)聯(lián)或無關(guān)聯(lián)的因素。

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：站酷   作者：酷家樂UED

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1、了解你的用戶

因為你的用戶是最終評判用戶界面好壞的人，所以用戶即是你的終極目標(biāo)，不了解用戶需求，即使你的界面做得再好，也不是用戶想要的產(chǎn)品。了解用戶的需求是你開始做界面的前提，試著沉下心來仔細(xì)觀察用戶的喜好，并了解他們的技能水平和體驗觀察他們在界面中如何操作。不要迷戀于追逐設(shè)計趨勢的更新，或是不斷添加新的功能，始終記住，首要的任務(wù)是關(guān)注你的用戶，這樣才能創(chuàng)造出一個能讓用戶達(dá)成目標(biāo)的界面。

2、重視UI模型

在軟件中，用戶的大部分時間都消耗在界面操作中，比如數(shù)據(jù)錄入、數(shù)據(jù)修改、數(shù)據(jù)查閱等等，這點與瀏覽為主的網(wǎng)站類頁面的用戶操作是完全不同的，所以我們無需畫蛇添足。用戶希望在新創(chuàng)造的界面中看到那些已有的、相似功能的或遵循基本操作方式的軟件界面，即可利用已成慣例的UI模型，使用戶產(chǎn)生親切感。

3、保持一致

用戶需要知道一旦他們學(xué)會做某項操作，那么下次也同樣可行。語言、布局和設(shè)計是需要保持一致性的幾個界面元素。一致性的界面可以讓用戶對于如何操作有更好的理解，從而提升效率。

4、清晰的視覺層次

設(shè)計時，要讓用戶把注意力放在最重要的地方。每一個元素的尺寸、顏色還有位置，它們?yōu)槔斫饨缑婀餐该髁说缆?。清晰的層級關(guān)系將對降低外觀的復(fù)雜性起到重要作用。

5、提供反饋

界面要始終保持和用戶的溝通，不管是他們的行為對錯與否。隨時提示用戶的行為：狀態(tài)更改、出現(xiàn)錯誤或者異常信息。視覺提示或是簡單文字提醒都能告訴用戶，他們的行為是否能夠達(dá)到預(yù)期的結(jié)果。

6、容錯機(jī)制

無論你的設(shè)計多么的清晰明了，用戶都會犯錯。你的界面應(yīng)當(dāng)允許并要為用戶提供可以撤銷行為的方式，并且對五花八門的輸入數(shù)據(jù)盡量寬容（沒人愿意只是因為填錯了生日的格式而重頭再來）。同樣，如果用戶的行為引起了一個錯誤，在恰當(dāng)?shù)臅r機(jī)運用信息顯示什么行為是錯誤的，并確保用戶明白如何防止這種錯誤的再次發(fā)生。

7、鼓勵用戶

一旦用戶在完成了關(guān)鍵操作，可以通過彈出對話框等方式及時告知用戶。值得注意的是，把一個復(fù)雜的流程任務(wù)分解為若干簡單步驟，將會更顯繁復(fù)和讓人精力分散。所以無論正在執(zhí)行的任務(wù)有多么復(fù)雜和漫長，在界面上要保持流程的不間斷性。

8、語言有親和力

所有的界面或多或少都有文字在其上，讓文稿盡量口語化，而不是華美辭藻的堆砌。為行為提供清晰、簡明的標(biāo)簽，保持簡樸的文字?jǐn)⑹觥！?

9、保持簡潔

最好的用戶界面就是沒有界面。優(yōu)秀的軟件界面中，你看不到華而不實的UI修飾，更看不到那些用不到的設(shè)計元素。所以當(dāng)想著是否要在界面上加一個新功能或是新元素的時候，再思考一下：用戶或者界面中真的需要這些么？為什么用戶想要在這里當(dāng)這個小巧的動態(tài)圖標(biāo)？是否只是因為出于自我喜好和頁面的漂亮而去添加這些元素？優(yōu)秀的UI工程師做出來的軟件界面不會十分華麗，界面中沒有任何分散用戶注意力打攪用戶操作的元素。甚至應(yīng)該達(dá)到在用戶使用系統(tǒng)的時候完全注意不到頁面和操作復(fù)雜的問題，一切都應(yīng)該是順理成章的。

（圖片來源于圖蟲創(chuàng)意）

文章來源：快資訊 作者：德方科技

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

 

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

第一步：

    


        


            


            

        

        


            

                //安裝 
            

        

    

    


        


            


            

        

        


            

                npm install crypto-js --save-dev
            

        

    

第二步：在src目錄下新建個放公用js文件夾(common)，再建一個AES.js文件，例如：

第三步：在AES.js中填寫如下代碼，key密鑰長度則可以是128，192或256位（默認(rèn)情況下是128位），正常情況下固定16位數(shù)即可

 


    


        


            


            

        

        


            

                import CryptoJS from 'crypto-js';
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                //隨機(jī)生成指定數(shù)量的16進(jìn)制key 
            

        

    

    


        


            


            

        

        


            

                generatekey(num) {
            

        

    

    


        


            


            

        

        


            

                let library = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
            

        

    

    


        


            


            

        

        


            

                let key = "";
            

        

    

    


        


            


            

        

        


            

                for (var i = 0; i < num; i++) {
            

        

    

    


        


            


            

        

        


            

                let randomPoz = Math.floor(Math.random() * library.length);
            

        

    

    


        


            


            

        

        


            

                key += library.substring(randomPoz, randomPoz + 1);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return key;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //加密 
            

        

    

    


        


            


            

        

        


            

                encrypt(word, keyStr) {
            

        

    

    


        


            


            

        

        


            

                keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345'; //判斷是否存在ksy，不存在就用定義好的key 
            

        

    

    


        


            


            

        

        


            

                var key = CryptoJS.enc.Utf8.parse(keyStr);
            

        

    

    


        


            


            

        

        


            

                var srcs = CryptoJS.enc.Utf8.parse(word);
            

        

    

    


        


            


            

        

        


            

                var encrypted = CryptoJS.AES.encrypt(srcs, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
            

        

    

    


        


            


            

        

        


            

                return encrypted.toString();
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                //解密 
            

        

    

    


        


            


            

        

        


            

                decrypt(word, keyStr) {
            

        

    

    


        


            


            

        

        


            

                keyStr = keyStr ? keyStr : 'abcdsxyzhkj12345';
            

        

    

    


        


            


            

        

        


            

                var key = CryptoJS.enc.Utf8.parse(keyStr);
            

        

    

    


        


            


            

        

        


            

                var decrypt = CryptoJS.AES.decrypt(word, key, { mode: CryptoJS.mode.ECB, padding: CryptoJS.pad.Pkcs7 });
            

        

    

    


        


            


            

        

        


            

                return CryptoJS.enc.Utf8.stringify(decrypt).toString();
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

第四步：在需要的地方引入

import AES from "@/common/AES.js";

第五步：調(diào)用

 


    


        


            


            

        

        


            

                // var keys = AES.generatekey(16); 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //如果是對象/數(shù)組的話，需要先JSON.stringify轉(zhuǎn)換成字符串 
            

        

    

    


        


            


            

        

        


            

                // 不傳key值，就默認(rèn)使用上述定義好的key值 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                var encrypts = AES.encrypt(JSON.stringify(cars));
            

        

    

    


        


            


            

        

        


            

                var dess = JSON.parse(AES.decrypt(encrypts));
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // var encrypts = AES.encrypt('1234asdasd'); 
            

        

    

    


        


            


            

        

        


            

                // var dess = AES.decrypt(encrypts); 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                console.log(encrypts)
            

        

    

    


        


            


            

        

        


            

                console.log(encrypts.length)
            

        

    

    


        


            


            

        

        


            

                console.log(dess)
            

        

    

 

 

特別提示：當(dāng)解密的時候是為空的時候（也沒有報錯），那么就一定是你的key長度不符合規(guī)范， 可以調(diào)整為key長度為16位。

 

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn   

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

首先項目是基于vue開發(fā)的項目

1、DES加密

前端

需要引入js

import cryptoJs from 'crypto-js'

// DES加密

export const encryptDes = (message, key) => {

return cryptoJs.DES.encrypt(message, cryptoJs.enc.Utf8.parse(key), {

mode: cryptoJs.mode.ECB,

padding: cryptoJs.pad.Pkcs7

}).toString()

}

后臺

---

package com.huihui.until;

import java.security.SecureRandom;
import java.util.Scanner;
 
import javax.crypto.Cipher;
import javax.crypto.SecretKeyFactory;
import javax.crypto.spec.DESKeySpec;
 
import org.apache.commons.codec.binary.Base64;
 
 
/**
 * <b>類說明：DES</b>
 * <p>
 * <b>詳細(xì)描述：</b>
 * @since 2019年3月31日 下午17:00:16
 */
public class DESCryptUtil {
    
    private static final String DES = "DES";
    
    public static final String desKey = "ba54ee44";
 
    public static String doEncrypt(String plainMessage, String hexDesKey) throws Exception {
        byte desKey[] = hexDesKey.getBytes();
        byte desPlainMsg[] = plainMessage.getBytes();
        return Base64.encodeBase64URLSafeString(desCrypt(desKey, desPlainMsg, Cipher.ENCRYPT_MODE));
    }
    /**
     * 獲取解密后的字符串
     * @param hexEncryptMessage
     * @param hexDesKey
     * @return
     * @throws Exception
     */
    public static String doDecrypt(String hexEncryptMessage, String hexDesKey) throws Exception{
        if (hexEncryptMessage == null) {
            return null;
        }
        byte desKey[] = hexDesKey.getBytes();
        byte desPlainMsg[] = Base64.decodeBase64(hexEncryptMessage);
        return new String(desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE));
    }
    /**
     * 獲取解密后的數(shù)組
     * @param desPlainMsg
     * @param hexDesKey
     * @return
     * @throws Exception
     */
    public static byte[] doDecryptByte(byte[] desPlainMsg, String hexDesKey) throws Exception{
        if (desPlainMsg == null) {
            return null;
        }
        byte desKey[] = hexDesKey.getBytes();
        return desCrypt(desKey, desPlainMsg, Cipher.DECRYPT_MODE);
    }
    
    private static byte[] desCrypt(byte[] desKey, byte[] desPlainMsg, int CipherMode) throws Exception{
        try {
            SecureRandom sr = new SecureRandom();
            DESKeySpec dks = new DESKeySpec(desKey);
            SecretKeyFactory keyFactory = SecretKeyFactory.getInstance(DES);
            javax.crypto.SecretKey key = keyFactory.generateSecret(dks);
            Cipher cipher = Cipher.getInstance(DES);
            cipher.init(CipherMode, key, sr);
            return cipher.doFinal(desPlainMsg);
        } catch (Exception e) {
            String message = "";
            if (CipherMode == Cipher.ENCRYPT_MODE) {
                message = "DES\u52A0\u5BC6\u5931\u8D25";
            } else {
                message = "DES\u89E3\u5BC6\u5931\u8D25";
            }
            throw new Exception(message, e);
        }
    }
    /**
     * 獲取8位的key
     * @param str
     * @return
     */
    public static String processString(String str) {
        if(str==null||"".equals(str)) {
            return "";
        }
        StringBuilder sb = new StringBuilder();
        for(int i=0;i<8;i++) {
            int index = i<<2&(32-i);
            sb.append(str.charAt(index));
        }
        
        return sb.toString();
    }
    public static void main(String[] args) throws Exception{
        DESCryptUtil se=new DESCryptUtil();
        for (int i = 0; i < 5; i++) {
            Scanner scanner=new Scanner(System.in);
            /*
             * 加密
             */
            System.out.println("請輸入要加密的內(nèi)容:");
            String content = scanner.next();
            System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
           
            /*
             * 解密
             */
            System.out.println("請輸入要解密的內(nèi)容:");
             content = scanner.next();
            System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
        }
    }

}
 

2 RSA加密解密

這是我是在在線生成公鑰私鑰的網(wǎng)站中生成了自己的公鑰私鑰用來測試

前臺

import JsEncrypt from 'jsencrypt'

// RSA加密

export function encryptRsa(publickey, message) {

const rsa = new JsEncrypt()

rsa.setPublicKey(publickey)

return rsa.encrypt(message)

}

后臺

package com.huihui.until;

import org.apache.commons.codec.binary.Base64;

import com.googosoft.config.GlobalConstants;

import javax.crypto.Cipher;
import java.security.KeyFactory;
import java.security.KeyPair;
import java.security.KeyPairGenerator;
import java.security.NoSuchAlgorithmException;
import java.security.SecureRandom;
import java.security.interfaces.RSAPrivateKey;
import java.security.interfaces.RSAPublicKey;
import java.security.spec.PKCS8EncodedKeySpec;
import java.security.spec.X509EncodedKeySpec;
import java.util.HashMap;
import java.util.Map;
  
  
public class RSAUtil {  
      
    private static Map<Integer, String> keyMap = new HashMap<Integer, String>();  //用于封裝隨機(jī)產(chǎn)生的公鑰與私鑰
    public static void main(String[] args) throws Exception {
        //生成公鑰和私鑰
        genKeyPair();
        //加密字符串
        String message = "df723820";
    //GlobalConstants.PUBLICKEY 公鑰加密
        String messageEn = encrypt(message,GlobalConstants.PUBLICKEY);
        System.out.println(message + "\t加密后的字符串為:" + messageEn);

//GlobalConstants.PRIVATEKEY 私鑰解密
        String messageDe = decrypt(messageEn,GlobalConstants.PRIVATEKEY);
        System.out.println("還原后的字符串為:" + messageDe);
    }

    /** 
     * 隨機(jī)生成密鑰對 
     * @throws NoSuchAlgorithmException 
     */  
    public static void genKeyPair() throws NoSuchAlgorithmException {  
        // KeyPairGenerator類用于生成公鑰和私鑰對，基于RSA算法生成對象  
        KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance("RSA");  
        // 初始化密鑰對生成器，密鑰大小為96-1024位  
        keyPairGen.initialize(1024,new SecureRandom());  
        // 生成一個密鑰對，保存在keyPair中  
        KeyPair keyPair = keyPairGen.generateKeyPair();  
        RSAPrivateKey privateKey = (RSAPrivateKey) keyPair.getPrivate();   // 得到私鑰  
        RSAPublicKey publicKey = (RSAPublicKey) keyPair.getPublic();  // 得到公鑰  
        String publicKeyString = new String(Base64.encodeBase64(publicKey.getEncoded()));  
        // 得到私鑰字符串  
        String privateKeyString = new String(Base64.encodeBase64((privateKey.getEncoded())));  
        // 將公鑰和私鑰保存到Map
        keyMap.put(0,publicKeyString);  //0表示公鑰
        keyMap.put(1,privateKeyString);  //1表示私鑰
    }  
    /** 
     * RSA公鑰加密 
     *  
     * @param str 
     *            加密字符串
     * @param publicKey 
     *            公鑰 
     * @return 密文 
     * @throws Exception 
     *             加密過程中的異常信息 
     */  
    public static String encrypt( String str, String publicKey ) throws Exception{
        //base64編碼的公鑰
        byte[] decoded = Base64.decodeBase64(publicKey);
        RSAPublicKey pubKey = (RSAPublicKey) KeyFactory.getInstance("RSA").generatePublic(new X509EncodedKeySpec(decoded));
        //RSA加密
        Cipher cipher = Cipher.getInstance("RSA");
        cipher.init(Cipher.ENCRYPT_MODE, pubKey);
        String outStr = Base64.encodeBase64String(cipher.doFinal(str.getBytes("UTF-8")));
        return outStr;
    }

    /** 
     * RSA私鑰解密
     *  
     * @param str 
     *            加密字符串
     * @param privateKey 
     *            私鑰 
     * @return 銘文
     * @throws Exception 
     *             解密過程中的異常信息 
     */  
    public static String decrypt(String str, String privateKey) throws Exception{
        //64位解碼加密后的字符串
        byte[] inputByte = Base64.decodeBase64(str.getBytes("UTF-8"));
        //base64編碼的私鑰
        byte[] decoded = Base64.decodeBase64(privateKey);  
        RSAPrivateKey priKey = (RSAPrivateKey) KeyFactory.getInstance("RSA").generatePrivate(new PKCS8EncodedKeySpec(decoded));  
        //RSA解密
        Cipher cipher = Cipher.getInstance("RSA");
        cipher.init(Cipher.DECRYPT_MODE, priKey);
        String outStr = new String(cipher.doFinal(inputByte));
        return outStr;
    }

}  

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

文章來源：csdn   

免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( www.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)