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

什么是服務設計

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

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

服務設計的原則及案例說明

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

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

以人為中心的設計理念在產品設計、交互設計等領域已經得到了廣泛的應用，服務設計當然也沒有例外，以人為中心就是要站在用戶的角度上看待和思考問題，考慮所有被服務影響的人。

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

最終的產出的結果是Fudoloop這個應用程序，通過Fudoloop，批發商可以提前一天從農民那里收到信息，進而協調買家的各種要求。Fudoloop的使用者分為兩種，一種是需要更新農產品信息的農民，一種是從Fudoloop上獲取農產品信息的批發商，Fudoloop分別為兩種用戶進行了設計。

圖片來源：Fudoloop

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

圖片來源：IDEO

NJC在設計Fudoloop時充分堅持了以人為中心的原則，考慮到服務涉及的不同用戶，并根據用戶本身的特點和需求進行設計。NJC的CMO佐藤賢一是這樣評價Fudoloop的：“當簡單、以人為本的思想匯聚在一起時，創新就會發生”。

b.協作(Collaborative)

這條原則說的是，不同背景和職能的利益相關者應該參與到服務設計流程中，收集多方訴求，發現不同看待問題的角度，才會更好的解決問題。

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

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

圖片來源：IDEO

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

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

c.迭代(Iterative)

迭代是一個不斷接受反饋不斷優化的過程，如此重復執行，讓產品變得越來越好。服務設計也需要迭代，不要避免犯錯誤，而是從錯誤中學習和改變，同時也要不斷的收集各方的反饋信息，這些信息是服務進行迭代的核心所在。隨著互聯網的發展，迭代的思維早已滲透到每一個互聯網產品，此處就不再過多解釋。

d.有序(Sequential)

服務設計應該是一系列相互關聯的活動，并且是按照順序進行的，精準的把控服務每一個環節的節奏，用戶才能獲得更愉悅的體驗。

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

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

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

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

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

從外賣的案例中我們可以看到，服務是一個過程，是需要有序展開的，每一個環節的體驗都會影響到用戶對服務的印象，在恰當的環節提供恰當的優質服務，才能確保用戶的整體體驗。

e.真實(Real)

服務本質上是無形的，應該用“物理元素”來可視化，這樣可以用戶的服務記憶，增強用戶對他們所接受服務的感知。

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

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

圖片來源：古田路9號

f.整體(Holistic)

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

服務設計的常用方法-服務藍圖

a.服務藍圖簡介

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

圖片來源：Service Design Tools

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

b.Uber服務藍圖繪制

為了明確服務藍圖的繪制和分析過程，下面將結合下圖所示的Uber服務藍圖進行說明。

圖片來源：Medium

(1) 明確用戶歷程

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

(2) 明確利益相關者

用戶與之產生互動的前臺服務人員為司機，而設計師、開發人員、項目經理等負責后臺的服務支持，以保證Uber按照預期的目標運作。

(3) 明確前后臺活動

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

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

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

(4)明確關鍵觸點

在服務藍圖中我們可以標注用戶與服務的主要接觸點，針對觸點進行設計是提升服務體驗的一個重要和有效的手段。

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

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

///

結語

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

即時通訊界面設計 表達其物流行業的專業性和商務性，標識整體精致細膩，令人印象深刻，在界面設計時以厚重，大氣的配色方案和視覺風格提升整個品牌的含義。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

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

博客框架Hexo介紹：

---

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

Hexo博客框架的優點

---

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

Hexo博客框架搭建：

---

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

1.安裝Git

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

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

2.安裝Node.js

Node.js是一種運行在服務端的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：解壓縮軟件包并配置環境變量：

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


    

        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的源是在國外的，訪問可能會很慢，這里可以換成我們國內的源進行安裝加快速度。操作如下： npm config set registry https://registry.npm.taobao.org  


    

        1
    

    

        2
    

    

        3
    

3.1：初始化Hexo

上面的安裝完成之后執行下面的命令進行對Hexo進行一個初始化

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

可以看到安裝好之后的一個目錄結構：

目錄文件說明：

_config.yml：網站的配置信息，您可以在此配置大部分的參數。

package.json：應用程序的信息。EJS, Stylus 和 Markdown renderer 已默認安裝，您可以自由移除。

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

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

themes：主題 文件夾。Hexo 會根據主題來生成靜態頁面。

查看hexo的版本以及對應的數據：

3.2生成靜態文件，并開啟Hexo服務：

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

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

4.初步使用Hexo：

---

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

# Site
title: QIMING.INFO #博客網站的標題
subtitle:          #博客網站的副標題
description:       #你的網站描述
keywords:          #網站的關鍵詞  
author:            #作者的名字
language:          #博客網站使用的語言
timezone:          #網站時區  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

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

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

執行下面的目錄創建一篇新文章：

hexo new post <文章標題>  


    

        1
    

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

這里我創建了一篇標題為First_Blog的博客，創建之后hexo目錄下面的source/_post文件夾下會產生一個First_Blog.md的文件

4.2:編輯文章

進入到上面說的那個目錄下可以看到我們創建的博客文件：

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

title：標題

tage：標簽

categories：分類

date：時間

這些標注大家在-----區域可以進行使用

4.3：發布文章

輸入如下命令，生成靜態網頁，靜態網頁會存放在public文件下

hexo  g
hexo s  


    

        1
    

    

        2
    

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

5.主題的選擇：

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

---

將Hexo部署上線到服務器：

---

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

Nginx安裝：

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

#安裝gcc編譯環境： yum install -y gcc-c++ #安裝zlib-devel庫： yum install -y zlib-devel #安裝OpenSSL密碼庫： yum install -y openssl openssl-devel #安裝pcre正則表達式庫：編譯nginx，需要需要指定pcre的路徑，這里我們選擇安裝穩定版本的。 下載地址：https://ftp.pcre.org/pub/pcre/ #選擇對應的版本下載下來之后上傳到我們的服務器，也可以使用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下載官網：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 #編譯指定安裝路徑需要進入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服務：

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


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

之后我們需要配置服務器公網ip，編輯配置文件。

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn    作者：YO哥教你大數據

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

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

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

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

這叫缺乏上下文聯系，也是任何行業的從業人員在學習該行業所需要具備的理論知識時，都會忽略掉的重要條件。

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

通過這樣的說法，難道就能認為現在所有 App 或網頁上的 banner 設計都是錯誤的？當然不能這么隨意下定論。

許多人都以為通過這種簡單的幾個步驟就可以學會設計，且認為這個學習過程是有趣且輕松，可以速成的。

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

或者這類：

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

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

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

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

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

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

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

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

類似這樣的問題，在缺乏業務背景，商業目的，需求指標等前提下，是不可能得出一個絕對結論去證明其他產品為什么不這么做的。這是現在大多數人面臨的問題，但卻不自知。

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

舉個例子。當我們拿到一個需求，說要從 0-1 做一個長視頻產品的彈幕體系?？赡芎芏嗳司蜁o從下手，第一直覺想的是去找所謂的競品抄一下。可能還會像上面那種對比圖一樣，把幾個產品的彈幕界面截圖下來比較下，試圖從界面元素角度判斷哪個設計得更合理。但是會發現，即使是抄，也會抄不到位，甚至會被老板質疑這個方案的合理性。而你能反駁的只是：別人也是這么做的。

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

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

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：優設   作者：呆呆U理

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

一張圖上有四句話，讀者根據 字號 判斷先讀哪一句。在從測試和調研中收集來的用戶需求和期望的基礎上，首先明確內容和交互的優先級，確認信息的先后順序和關聯性后，才能夠設計出有重點的交互界面。這些行為是為了引導用戶在閱讀過程中 一眼獲取重要信息。

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

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

“在網絡上，人們會一目十行而不是逐字逐句的閱讀內容。他們一般傾向于付出更少的精力，以高效的方式達成目標?！?

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

用戶在網絡上的閱讀方式高度取決于：

• 用戶的任務目標

• 用戶習慣

• 頁面層級

• 頁面內容形式

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

將用戶分級
Users by levels

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

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

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

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

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

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

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

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

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

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

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

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

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

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：站酷   作者：ZZiUP

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

“文中示例相關數據都為假的模擬數據，而非真正的商業數據，以此聲明”

度量是什么

【度量Measure】是一種測量評定對象的方式，它幫助我們結構化的獲取對象的狀態與變化，我們運用這些數據進行洞察，轉化為有用的信息，幫助決策和優化，這個過程也是分析診斷的過程。

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

我們對一個功能上線進行一組完整的項目結果質量數據模擬：

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

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

• 方案產出數共222件，比上周上升了22.2% （對內容產出有直接的提升）

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

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

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

• 功能渲染和可交互時長為0.2秒加載完成。用戶在使用時交互順暢無卡頓（符合業界前端質量交付標準）

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

我們可以拆解到這幾個層次的數據

業務結果、用戶反饋（態度與情緒）、行為點擊、系統性能

可理解為：良好的產品運行-》用戶流暢使用-》良好的用戶反饋-》預期的產品轉化結果

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

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

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

定量獲取

系統承載業務內容的運作，可以記錄各種各樣的明細數據表，在海量數據中，進行科學的關聯與細分。以大數據驅動為最終目標，其特點是：數據的全面性和自動追蹤獲取。

業務結果

追蹤問題：產品是否符合市場需求？產品是否良性發展？

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

內容建設 是指經過人為輸入，系統流轉產生的比如商品、文章、方案等等具有實質內容價值的數據。是具有生產過程的（一般是經過一系列的操作完成的）。

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

商業交易 則是最直接的商業結果型數據，最常見的就是網站的GMV（成交金額：包括：付款金額和未付款。）

訂單交易額、注冊會員數等等。

以某平臺中相關的業務數據為示例

業務結果的分析，是根據不同業務發展，確定核心業務指標，以及建立對核心指標的拆解邏輯。

它或許是個計算公式?；蛘呤莻€一級指標到二級關聯指標。例如以下，這里暫時不展開來講。

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

行為點擊

追蹤問題：產品使用情況如何？用戶瀏覽習慣如何？

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

這里是一組典型的平臺用戶使用行為的描述，而這些行為的最終，是產出了上面的業務數據（訂單與成交金額）

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

由此我們可以解釋，行為數據與業務結果之間的關系，并且兩者的關注點也是有差異的，在行為鏈路中，我們更注重每一層的轉化關系以及用戶為什么沒有向下轉化的障礙點。

再以B端管理系統為例

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

行為數據要結合具體的場景或者維度去觀察，才能產生更有用的信息。

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

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

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

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

以上介紹了業務結果和行為點擊兩種數據，而這兩種內容，都會涉及到埋點采集這件事，這里我們介紹下關于埋點采集數據這件事情。

埋點采集

追蹤問題：如何根據人物、場景、動作制定精準的采集方案？

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

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

兩者大致能產出什么數據分析呢？主要以平臺/系統這個角度看：

整體分析-通用全埋點

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

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

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

為了獲取更精準的業務/行為數據，我們一般會采用手動埋點的方式，所以前期 第一階段會在場景中確定分析目標，然后梳理相應需要的指標，書寫明確的埋點需求是很重要的一個環節，書寫的足夠明確，才能和業務、前端、數據分析師進行準確的溝通，分析目標一致，然后上線后建立相應的數據看板。

注意點：采集方式｜統計口徑｜數據精準度校驗

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

1. 什么用戶=用戶定義

2. 什么時間=時間戳

3. 什么環境=地理位置+網絡環境+硬件環境+軟件環境+哪個頁面（來源頁面）+什么位置

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

5. 什么條件=可以以某個行為或者業務交易為條件

6. 結果如何=用戶操作的結果

示例：

一個后臺系統懸浮幫助功能使用的情況需求

一個搜索使用的情況需求

這2個是比較細致的數據采集的描述。規則了統計的對象，范疇，以及條件，結果觀測等等的需求，大家可以在業務和行為數據相關采集中，試著撰寫下這樣明確的需求。這樣的數據采集才具有精準的分析價值。

人群標簽

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

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

人群標簽就是根據人群特點，進行描述分類，對人群打標簽。我們根據不同的獲取路徑，可以大致分兩類。

一類是利用基本數據進行定義，比較簡單直接

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

通過唯一用戶ID所匹配的一系列用戶注冊時的基本信息內容，如性別、職業、行業、興趣等。可以定義為“女性用戶”、“定制類用戶”等。

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

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

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

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

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

這里的復合定義很多時候都會用到多指標多維度。是一種深度結合業務場景來圈選人群，定義用戶的方式。

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

常用畫像的場景

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

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

2.定量用戶畫像：用定量的數據做某些值的規則，來圈定用戶人群

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

某產品生命周期使用示例：

系統性能

追蹤問題：產品使用起來流暢嗎 ？ 

性能數據一般指由產品進行頁面渲染及前后端交互時，監測到的時長數據。觀測系統性能，是因為系統數據量很大時，在產品渲染交互環節中，容易產生卡頓，造成用戶體驗的下降，導致流失率。而系統性能，一般是由性能監控等產品產出質量報告。在一些瀏覽器中，也有嵌入的插件統計報告。

這里大致介紹下業界google最新的關于7大性能指標的定義

這其中，最重要的3大核心指標是：

LCP：頁面的速度指標

FID：頁面的交互體驗指標

CLS：頁面的穩定指標

可以通過官方出品，安裝 web-vitals-extension 插件來獲取三大核心指標，也可以通過通過安裝 Lighthouse 插件來獲取如下指標，現在已經內置在瀏覽器中

定性獲取

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

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

即選擇典型用戶角色，針對問題或者內容進行集中測試或者訪談：用戶訪談、焦點問題調研、可用性測試等。

「ps:另外一種 自動化研究：圈人群進行在線問卷調研投放，聚合大量樣本進行交叉或者聚類等等分析，是一種樣本量的統計方式。具備一定程度的樣本數量，可歸為定量統計分析?！?nbsp;

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

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

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

用戶態度

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

通常用到以下幾種度量

而這些內容中一般包含數據是

1.觀察與記錄實驗性數據（描述性狀態情況） 

2.主觀數據和偏好數據（出自于自身的想法） 

3.情感層面數據（使用系統后最終的感受或者過程中的心情） 

4.結果性數據（比對/選擇內容，得出結論） 

而從場景分我們如何使用這幾種度量呢？

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

不難發現，我們最常用到的是「自我報告式的度量」

它比較寬泛的反應了產品綜合情況。這里舉一個自我報告度量涵蓋的范疇

 

用戶情緒

追蹤問題：用戶使用后，在情感上反應如何？

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

情感描述模型是指對情感狀態進行定義，并描述其表達性特征的方法，主要可分為離散描述模型和連續描述模型。 

連續型描述模型往往認為人類的情感狀態是分布在若干個維度組成的某一個空間中，不同情感狀態之間不是獨立的，而是連續的，可以轉化的。

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

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

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

舉例子來陳述：

1.產品設計過程中，串聯用戶使用流程時，流程的長短和任務路徑會產生直接用戶感受-》是否足夠輕松 

2.運營產品過程中，在哪些環節中穿插特定內容可以打造用戶峰值體驗。—》這個推薦不錯，好貼心，驚喜 

當這些生動的情感詞匯，被考慮進產品設計中時，很容易讓我們得到一個具有溫度感，具有更良好接受度的產品。 

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

情緒評分卡：

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

具體方式：

第一步：卡片分類法，預設10-20組情緒關鍵詞，讓用戶選2-3個關鍵詞，確定影響面。 

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

以下為目標設定的取詞示例：

嚴重評級

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

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

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

常用評估：

高中低評估

低－會讓參加者心煩或沮喪，但不會導致任務失敗的問題。

中－這類問題會顯著提高任務的難度，但不會直接導致任務的失敗。

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

綜合因素評估

多維度的評估

前兩個較常用，后兩個看產品及技術配合

1. 對用戶體驗的影響

2. 預期的發生頻率

3. 對商業目標的影響

4. 技術／實現成本評分（0=低，1=中，2=高）

數據層次結構總結

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

前言

體驗目標的達成，需要合理且客觀的度量方法，體驗度量的實踐，需要度量框架的有力支撐。提高競爭優勢，提升客戶態度，保障產品可以即時的響應客戶的需求。本篇文章的實踐方法全部來源于酷家樂B端產品業務中的實踐案例，重點在于度量框架的深度實踐，如果我們的經驗能夠幫助到您，歡迎交流討論。 

一、體驗度量怎么做？

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

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

• 體現用戶主觀感受或者具有行為驅動的目標。

• 基于業務目標定義+用戶訴求了解后，得到的以用戶為中心驅動的用戶行為。

  
  

二、度量模型怎么選？

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

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

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

• 3、HEART模型并不單純的再定義體驗質量，同時也鏈接了商業價值。把用戶體驗的原則和收益驅動的指標關聯在了一起。

三、HEART模型簡介

1.什么是HEART模型？

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

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

2.HEART模型的特性與應用場景

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

四、HEART模型的詳細拆解指南

第一步：確定體驗目標

體驗目標是體驗度量的開始，準確的目標決定了度量的質量。要提煉出準確而有效的體驗目標并不容易，通常會引入產品功能等業務因素，使體驗目標不夠單純，拆解出來的指標所反映的數據也很難歸因到體驗。故復雜項目可提煉多個體驗目標相互補齊，但每個都必須準確而具體。 

那么如何確定體驗目標呢？

體驗無法脫離于具體的產品服務存在，用戶的整體體驗感知積累于每一個接觸觸點，大多觸點常規而平庸影響不大，必須識別出達成業務的關鍵觸點進行深入分析，已提煉出體驗目標。 

整體的思路是：首先分析業務目標，并就業務目標所落地的產品服務的鏈路進行拆解，分析鏈路后，找到其中對體驗有決定性影響的因素，提取其因素后，即形成體驗目標。

1.確定業務目標

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

?示例：

業務目標：在設計工具中商品素材的查找效率，輔助家裝設計師快速構建方案，提升其簽單率 

產品目標：優化現有商品素材的查找邏輯，降低家裝設計師查找商品素材的成本 

2.拆解產品鏈路

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

為完整的拆解出整個產品鏈路，需要從“用戶側”、“系統側”進行分析，用戶側代表用戶視角下的功能使用流程，是主要考慮的維度，體現了以用戶為中心的設計思路；系統側代表系統在用戶交互過程中的需要執行的行為，是系統邏輯的直接體現。兩者的交互作用，將完整表達“信息”的流轉過程，最終作用到產出物上。 

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

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

選取對整個鏈路有重要影響的觸點進行設計維度上的分析，以找出決定觸點目標達成的決定性因素，這個決定性因素就是我們體驗上需要著重優化的點。在尋找“決定性因素”的過程中，避免將系統性能、業務功能、業務信息因素篩選出來，需要聚焦在設計維度上，諸如交互行為、界面布局、信息呈現、系統反饋等。 

?示例： 

“確認輸入行為”、“搜索結果分類”、“不同分類的區塊劃分”、“結果數量”等。 

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

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

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

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

4.體驗目標的提取與表述

找到決定性因素及其為什么決定性的原因后，需要為其設定一個設計目標，來指示應向什么方面優化這個決定性因素。決定性因素只是現有功能的一種解法，可能存在其他更優解法或優化方向，我們需要基于決定性因素概括出“設計目標”，以新的設計目標來指引我們的優化設計。 

?示例： 

決定性因素“搜索結果的分類”，引申出的設計目標為“更清晰的信息層級”、“更完整的信息”。

通過鏈路觸點的分析，決定性因素的提取，設計目標的匹配，我們已對設計優化方向有了準確的了解。這個時候需要從設計師視角做一個完善而精準的”體驗目標“的表述。

一個體驗目標需要與具體設計場景關聯后，才能產生具體而明確的價值，即設計目標落地到場景中后產生價值，表述思路是：在某個具體的鏈路觸點中，我們期望怎么達成這件事?？赏ㄟ^格式進行填寫： 

使/什么用戶/用什么  做什么事/設計目標/完成什么事 

?示例： 

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

第二步：確定度量維度

引入HEART模型的重要原因，正在于它的度量維度。由于它的度量維度多方位的表述了產品的使用情況，度量緯度不是一種標準，是一種分析框架和角度，決定了體驗目標應該被如何度量，進而影響信號的確定和指標的拆解，因此度量維度的選取至關重要。 

HEART提供了豐富的五個維度，根據其定義，提供了你幾個可以衡量的視角。在實踐過程中，因每個體驗目標所對應的觸點的場景、交互、產品目的不同，我們只需要找到符合定義的維度即可。反過來看，一個與體驗目標不相關、不匹配的度量維度不能很好地度量體驗。 

需要注意的是，HEART模型因其維度的廣泛定義，不僅僅可用于體驗目標的度量，也可以對產品目標、業務結果進行度量，對體驗目標的度量因要從產品因素中剝離出體驗問題，相對來說較為復雜，是本次敘述的重點。

第三步：確定信號

首先信號可以被定義為是一種信息的載體，其承載的信息往往反映的是用戶對體驗目標的成功或是失敗的結果，對信號的準確獲取將直接影響到對下游指標的確立。 

信號的確定需以上游度量維度為標準范圍并引用體驗目標為重要判斷依據，避免過度發散，保證精準規范的同時，去結合當前有無體驗變量基準值作為條件，并使用成功或者失敗的結果來評估體驗目標的達成情況，最終提煉出信號。 

以度量維度為標準并引用體驗目標確定信號

通過逐一對度量維度進行體驗變量提取，有基礎值則進行對比的方式，無基礎值則使用趨勢的表述方式，結合業務目標的情況下，去概念性假設體驗目標的正向或反向結果，最終通過標準的格式提煉出信號，信號的提煉的可以用固定的格式進行書寫： 格式：用戶   用什么   做什么   體驗變量   趨勢&數值

尋找體驗變量

基于HEART模型的整個分析框架，拆解出最高頻和貼合體驗目標的常見體驗變量庫。在此框架的指導下，可以快速尋找需要的體驗變量。 

?示例： 

（體驗變量：易操作度；有基準值） 家裝設計師 使用搜索功能 搜索素材時 易操作度 達到4.2

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

確定信號的注意事項

①信號的成功或失敗要能在行為或態度上準確的體現出來，失敗信號可能比成功更容易定義； 

②信號要易于被追蹤； 

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

④信號應與目標有高的相關度，同時避免被其他因素影響； 

⑤一個目標可能對應多個信號； 

第四步：確定指標

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

初始指標反映了客觀的原生數據，需要對原生數據做處理后，可得到一個能精準描述體驗目標的指標。 

對數據進行處理

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

確定指標的注意事項

①指標應與目標和信號密切相關，指標越明確越清晰越好； 

②標應方便被持續追蹤，對信號的描述更敏感，方便做A/B測試。 

?示例： 

案例A

度量維度：愉悅度

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

體驗變量：易操作度

數據：易操作度評分

指標：易操作度評分的均值

五、總結

看似復雜的體驗度量監控指標的拆解，可以概括為“體驗的問題定位”——“體驗的目標度量”——“體驗的客觀追蹤”。 

1.“問題定位”是監控目標的根據，必須來源于具體的業務鏈路才有被分析和量化的可能，它是體驗問題在業務鏈路中被抽取出來的關鍵，并轉化為可度量的指標來進行監控，最終為后續數據洞察和可視化提供準確的數據來源，否則流于主觀，監控體系建立在不可靠的體驗目標之上，當然也就不可能有助于解決體驗問題。 

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

3.“客觀追蹤”是對在度量標準下的客觀變化的捕捉，捕捉其變量特征，建立常態指標，成為可靠的可監控的指標。 

4.另外，除了準確的定位、度量、轉化的邏輯推導外，參考業務目標進行范圍收斂，也是非常重要的工作，它影響著每一個推導環節，以避免偏離產品方向，有效的過濾弱關聯或無關聯的因素。

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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

1、了解你的用戶

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

2、重視UI模型

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

3、保持一致

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

4、清晰的視覺層次

設計時，要讓用戶把注意力放在最重要的地方。每一個元素的尺寸、顏色還有位置，它們為理解界面共同指明了道路。清晰的層級關系將對降低外觀的復雜性起到重要作用。

5、提供反饋

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

6、容錯機制

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

7、鼓勵用戶

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

8、語言有親和力

所有的界面或多或少都有文字在其上，讓文稿盡量口語化，而不是華美辭藻的堆砌。為行為提供清晰、簡明的標簽，保持簡樸的文字敘述。。

9、保持簡潔

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

（圖片來源于圖蟲創意）

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

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

                                                            

 

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

 

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

第一步：

    


        


            


            

        

        


            

                //安裝 
            

        

    

    


        


            


            

        

        


            

                npm install crypto-js --save-dev
            

        

    

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

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

 


    


        


            


            

        

        


            

                import CryptoJS from 'crypto-js';
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                //隨機生成指定數量的16進制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";

第五步：調用

 


    


        


            


            

        

        


            

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

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                //如果是對象/數組的話，需要先JSON.stringify轉換成字符串 
            

        

    

    


        


            


            

        

        


            

                // 不傳key值，就默認使用上述定義好的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)
            

        

    

 

 

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

 

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn   

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

首先項目是基于vue開發的項目

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>詳細描述：</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));
    }
    /**
     * 獲取解密后的數組
     * @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("請輸入要加密的內容:");
            String content = scanner.next();
            System.out.println("加密后的密文是:"+se.doEncrypt(content, desKey));
           
            /*
             * 解密
             */
            System.out.println("請輸入要解密的內容:");
             content = scanner.next();
            System.out.println("解密后的明文是:"+se.doDecrypt(content, desKey));
        }
    }

}
 

2 RSA加密解密

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

前臺

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>();  //用于封裝隨機產生的公鑰與私鑰
    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);
    }

    /** 
     * 隨機生成密鑰對 
     * @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;
    }

}  

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。

文章來源：csdn   

免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。

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