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

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

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

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

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

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

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

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

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

最終的產(chǎn)出的結(jié)果是Fudoloop這個(gè)應(yīng)用程序，通過(guò)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è)計(jì)。

圖片來(lái)源：Fudoloop

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

圖片來(lái)源：IDEO

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

b.協(xié)作(Collaborative)

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

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

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

圖片來(lái)源：IDEO

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

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

c.迭代(Iterative)

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

d.有序(Sequential)

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

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

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

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

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

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

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

e.真實(shí)(Real)

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

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

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

圖片來(lái)源：古田路9號(hào)

f.整體(Holistic)

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

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

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

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

圖片來(lái)源：Service Design Tools

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

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

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

圖片來(lái)源：Medium

(1) 明確用戶歷程

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

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

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

(3) 明確前后臺(tái)活動(dòng)

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

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

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

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

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

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

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

///

結(jié)語(yǔ)

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

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

文章來(lái)源：站酷  作者：百度MEUX

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

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

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

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

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

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

博客框架Hexo介紹：

---

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

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

---

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

Hexo博客框架搭建：

---

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

1.安裝Git

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

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

2.安裝Node.js

Node.js是一種運(yùn)行在服務(wù)端的JavaScript，是一個(gè)基于Chrome JavaScript運(yùn)行時(shí)建立的一個(gè)平臺(tái)。

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

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 #移動(dòng)到/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：測(cè)試是否安裝成功：

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

3.安裝并使用Hexo

Hexo的安裝較為簡(jiǎn)單，使用如下命令安裝

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


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

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

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

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

目錄文件說(shuō)明：

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

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

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

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

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

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

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

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

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

4.初步使用Hexo：

---

使用前，我們對(duì)我們的站點(diǎn)進(jìn)行一個(gè)配置，也就是我們創(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)站使用的語(yǔ)言
timezone:          #網(wǎng)站時(shí)區(qū)  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

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

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

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

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


    

        1
    

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

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

4.2:編輯文章

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

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

title：標(biāo)題

tage：標(biāo)簽

categories：分類

date：時(shí)間

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

4.3：發(fā)布文章

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

hexo  g
hexo s  


    

        1
    

    

        2
    

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

5.主題的選擇：

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

---

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

---

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

Nginx安裝：

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

#安裝gcc編譯環(huán)境： yum install -y gcc-c++ #安裝zlib-devel庫(kù)： yum install -y zlib-devel #安裝OpenSSL密碼庫(kù)： yum install -y openssl openssl-devel #安裝pcre正則表達(dá)式庫(kù)：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩(wěn)定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對(duì)應(yīng)的版本下載下來(lái)之后上傳到我們的服務(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的一個(gè)模塊，就是可以使用https：//這樣去訪問(wèn)。 make && make install #編譯安裝  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

啟動(dòng)nginx服務(wù)：

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

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

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

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

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

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

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

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

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

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

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

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

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

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

或者這類：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• 用戶習(xí)慣

• 頁(yè)面層級(jí)

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

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

將用戶分級(jí)
Users by levels

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

文章來(lái)源：站酷   作者：ZZiUP

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

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

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

度量是什么

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

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

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

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

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

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

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

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

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

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

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

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

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

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

從獲取方式來(lái)說(shuō)，大致可以從兩個(gè)大角度（這里從廣義的范疇去分）

【qualitative research定性研究】：快速?gòu)臉颖局信袛鄦?wèn)題的性質(zhì)和方向

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

定量獲取

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

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

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

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

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

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

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

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

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

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

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

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

行為點(diǎn)擊

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

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

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

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

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

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

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

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

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

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

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

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

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

埋點(diǎn)采集

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

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

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

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

整體分析-通用全埋點(diǎn)

用戶活躍、用戶留存、用戶跳出率、用戶停留時(shí)長(zhǎng)、用戶流量分布...

局部與特定分析-手動(dòng)埋點(diǎn)

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

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

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

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

1. 什么用戶=用戶定義

2. 什么時(shí)間=時(shí)間戳

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

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

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

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

示例：

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

一個(gè)搜索使用的情況需求

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

人群標(biāo)簽

追蹤問(wèn)題：用戶都是哪些人，誰(shuí)使用了這些功能 ？

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

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

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

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

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

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

使用某類條件公式來(lái)定義某一波用戶

如我們將購(gòu)買能力從高低來(lái)分層用戶：月購(gòu)買小于5000的為中購(gòu)買力用戶，大于5000的為高購(gòu)買力用戶，周活躍大于2但無(wú)購(gòu)買記錄為潛力用戶。

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

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

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

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

常用畫(huà)像的場(chǎng)景

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

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

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

如： 用戶生命周期、問(wèn)卷分發(fā)、運(yùn)營(yíng)活動(dòng)

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

系統(tǒng)性能

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

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

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

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

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

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

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

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

定性獲取

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

它的獲取方式主要是 面對(duì)面研究：

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

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

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

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

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

用戶態(tài)度

追蹤問(wèn)題：用戶使用后，滿意度如何？ 

通常用到以下幾種度量

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

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

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

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

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

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

引用自：Tom Tullis Bill Albert {Measuring the user Experience} 用戶體驗(yàn)度量 

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

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

 

用戶情緒

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

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

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

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

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

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

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

舉例子來(lái)陳述：

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

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

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

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

情緒評(píng)分卡：

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

具體方式：

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

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

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

嚴(yán)重評(píng)級(jí)

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

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

嚴(yán)重性評(píng)估有助于集中精力解決關(guān)鍵的問(wèn)題,清晰說(shuō)明每個(gè)一個(gè)嚴(yán)重等級(jí)的意義。對(duì)每個(gè)等級(jí)都盡可能用實(shí)例說(shuō)明。 

常用評(píng)估：

高中低評(píng)估

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

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

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

綜合因素評(píng)估

多維度的評(píng)估

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

1. 對(duì)用戶體驗(yàn)的影響

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

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

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

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

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

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

文章來(lái)源：站酷   作者：酷家樂(lè)UED

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

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

前言

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

一、體驗(yàn)度量怎么做？

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

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

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

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

  
  

二、度量模型怎么選？

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

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

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

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

三、HEART模型簡(jiǎn)介

1.什么是HEART模型？

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

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

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

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

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

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

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

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

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

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

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

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

?示例：

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

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

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

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

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

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

3.分析觸點(diǎn)并提取決定性因素

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

?示例： 

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

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

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

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

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

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

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

?示例： 

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

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

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

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

?示例： 

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

第二步：確定度量維度

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

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

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

第三步：確定信號(hào)

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

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

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

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

尋找體驗(yàn)變量

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

?示例： 

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

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

確定信號(hào)的注意事項(xiàng)

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

②信號(hào)要易于被追蹤； 

③信號(hào)的敏感度要高，易于被檢測(cè)； 

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

⑤一個(gè)目標(biāo)可能對(duì)應(yīng)多個(gè)信號(hào)； 

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

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

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

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

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

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

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

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

?示例： 

案例A

度量維度：愉悅度

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

體驗(yàn)變量：易操作度

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

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

五、總結(jié)

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

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

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

3.“客觀追蹤”是對(duì)在度量標(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)行范圍收斂，也是非常重要的工作，它影響著每一個(gè)推導(dǎo)環(huán)節(jié)，以避免偏離產(chǎn)品方向，有效的過(guò)濾弱關(guān)聯(lián)或無(wú)關(guān)聯(lián)的因素。

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

文章來(lái)源：站酷   作者：酷家樂(lè)UED

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

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

1、了解你的用戶

因?yàn)槟愕挠脩羰亲罱K評(píng)判用戶界面好壞的人，所以用戶即是你的終極目標(biāo)，不了解用戶需求，即使你的界面做得再好，也不是用戶想要的產(chǎn)品。了解用戶的需求是你開(kāi)始做界面的前提，試著沉下心來(lái)仔細(xì)觀察用戶的喜好，并了解他們的技能水平和體驗(yàn)觀察他們?cè)诮缑嬷腥绾尾僮?。不要迷戀于追逐設(shè)計(jì)趨勢(shì)的更新，或是不斷添加新的功能，始終記住，首要的任務(wù)是關(guān)注你的用戶，這樣才能創(chuàng)造出一個(gè)能讓用戶達(dá)成目標(biāo)的界面。

2、重視UI模型

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

3、保持一致

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

4、清晰的視覺(jué)層次

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

5、提供反饋

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

6、容錯(cuò)機(jī)制

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

7、鼓勵(lì)用戶

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

8、語(yǔ)言有親和力

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

9、保持簡(jiǎn)潔

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

（圖片來(lái)源于圖蟲(chóng)創(chuàng)意）

文章來(lái)源：快資訊 作者：德方科技

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

                                                            

 

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

 

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

第一步：

    


        


            


            

        

        


            

                //安裝 
            

        

    

    


        


            


            

        

        


            

                npm install crypto-js --save-dev
            

        

    

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

第三步：在AES.js中填寫(xiě)如下代碼，key密鑰長(zhǎng)度則可以是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); 
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //如果是對(duì)象/數(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)解密的時(shí)候是為空的時(shí)候（也沒(méi)有報(bào)錯(cuò)），那么就一定是你的key長(zhǎng)度不符合規(guī)范， 可以調(diào)整為key長(zhǎng)度為16位。

 

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

文章來(lái)源：csdn   

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

首先項(xiàng)目是基于vue開(kāi)發(fā)的項(xiàng)目

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()

}

后臺(tái)

---

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>類說(shuō)明：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("請(qǐng)輸入要加密的內(nèi)容:");
            String content = scanner.next();
            System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
           
            /*
             * 解密
             */
            System.out.println("請(qǐng)輸入要解密的內(nèi)容:");
             content = scanner.next();
            System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
        }
    }

}
 

2 RSA加密解密

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

前臺(tái)

import JsEncrypt from 'jsencrypt'

// RSA加密

export function encryptRsa(publickey, message) {

const rsa = new JsEncrypt()

rsa.setPublicKey(publickey)

return rsa.encrypt(message)

}

后臺(tái)

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ī)生成密鑰對(duì) 
     * @throws NoSuchAlgorithmException 
     */  
    public static void genKeyPair() throws NoSuchAlgorithmException {  
        // KeyPairGenerator類用于生成公鑰和私鑰對(duì)，基于RSA算法生成對(duì)象  
        KeyPairGenerator keyPairGen = KeyPairGenerator.getInstance("RSA");  
        // 初始化密鑰對(duì)生成器，密鑰大小為96-1024位  
        keyPairGen.initialize(1024,new SecureRandom());  
        // 生成一個(gè)密鑰對(duì)，保存在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 
     *             加密過(guò)程中的異常信息 
     */  
    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 
     *             解密過(guò)程中的異常信息 
     */  
    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è)計(jì)建立了UI設(shè)計(jì)分享群，每天會(huì)分享國(guó)內(nèi)外的一些優(yōu)秀設(shè)計(jì)，如果有興趣的話，可以進(jìn)入一起成長(zhǎng)學(xué)習(xí)，請(qǐng)掃碼藍(lán)小助，報(bào)下信息，藍(lán)小助會(huì)請(qǐng)您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請(qǐng)與我們聯(lián)系。

文章來(lái)源：csdn   

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

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