談到 B 端組件，很多人的印象是多且雜，想要全面準確的熟悉這些它們，需要我們對它有個合理的歸納總結?？赡苊總€人會從不同的視角去做這件事情，我一般是按照使用場景去對組件分類整理。

下面我們根據這個分類框架來逐個聊聊這些組件。

一、基礎組件

說到基礎組件，我想再將其細分成兩個大類：一類是通用組件；一類是柵格/導航。怎么去更深刻的理解這兩類的區別呢，我們可以打個這樣的形象比方：

通過這個比方我們不難理解，柵格/導航是先給頁面定下了基本框架，而通用組件則是在這個框架基礎上搭建頁面的所用到基本元素。

1. 通用組件

常見通用組件一般包含：色彩/字體/間距/圓角/分割線/按鈕。需要注意的是，通用組件看起來似乎很簡單，但卻是決定產品品牌調性、界面細節品質的重要因素，在設計過程中需要引起我們的高度重視。

色彩

色彩可分為主色，功能色，中性色三類。下面談談這三類顏色如何配置，以及如何定義這些顏色梯度。

① 主色

主色的選取

主色作為產品的主要色調，在選取時應當優先選擇品牌色，但有一點要注意的是 B 端和 C 端不一樣，B 端一般不適合采用暖色系作為主色，如果品牌色為暖色調，則盡量考慮另選取一個冷色系作為主色，原因有兩點：一是為了避免和警告、錯誤色沖突，產生歧義；二是冷色系帶有商務、專業、冷靜的情感，更符合 B 端產品調性。

同時主色選取應避免高亮、熒光色、灰調高的顏色。

主色的應用

主色在設計中常見的應用包括可交互、選中狀態、可視化、插圖、圖標等場景。

② 功能色

功能色主要用于頁面表征狀態，常見有成功色、警告色、報錯色等。

成功色

主要用于操作結果成功提示以及標簽配色等。

警告色

主要用于警告提醒功能以及標簽配色等。

報錯色

主要用于系統報錯提示、圓點提示、以及標簽配色等。

③ 中性色

中性色在頁面設計中應用非常廣泛，從線條到文字再到圖形等等都可以見到它的影子。
Tips：無論我們主色調是什么，中性色在調色時建議可加入適量的藍色調，可讓頁面觀感更清爽。

④ 顏色梯度

選取好了顏色后，怎么去更合理的定義每個顏色的梯度呢？（這里主要指對主色以及功能色定義梯度）

我的方法是給顏色加一層半透明黑/白遮罩，當我們需要淺色，通過調整白色遮罩透明度得到合適顏色；而當我們需要深色時，則通過調整黑色遮罩透明度得到合適顏色。

這樣定義顏色梯優點是后續如果需要更改配色，只需一鍵替換全局色即可，大大提高工作效率。

文字

文字規范包含字體、字號、字重、行高等。

① 字體/字重

B 端字體/字重一般按照如下規范即可：

② 字號

不同于 C 端，B 端在字號選擇上應當盡量保持克制。研究表明，Web 端上正文字號為 14 時，可以帶來最佳閱讀體驗。因此在字號選取上應盡量優先選取 14 號字。如果想要區分文字層級，優先級從高到低的手法應該是顏色、字重、字號，也就是說一般盡量不采用字號大小區分文字層級。

③ 行高

行高可以參照下面的公式或行高參照表快速獲得，如果通過公式算出行高非整數或非偶數，可就近取偶整數。

間距

關于間距取值，在目前主流屏幕分辨率下，只有 4 或 8 被整除率最高，考慮到 4 的顆粒度偏小，因此可優先考慮 8px 的倍數作為間距值，在一些特殊場景可采用 4px 的倍數間距值。

分割線

分割線寬度一般統一為 1px 即可，同時注意顏色不可過深，以免干擾主體信息。如果需要不同層級分割線，可用顏色深淺來區分。

圓角

圓角大小一般根據使用場景控制在 2-3 個梯度即可，既不能全部統一一個圓角值，同時也不適合出現過多圓角值。同時圓角值不要過大，建議控制在 2-6px，以符合 B 端產品嚴謹專業調性。

按鈕

這里從按鈕的大小/狀態/排放位置幾個緯度來講。

① 按鈕尺寸

按鈕高度一般情況下可以設置 3-4 種尺寸按鈕，足以滿足各種使用場景。至于按鈕寬度，我們一般定義一個最小值，當超過最小值時，可設置 padding 值，按鈕寬度根據內容自適應。

② 按鈕狀態

操作按鈕過程中，按鈕會呈現不同的交互狀態。

③ 按鈕位置

對于主次按鈕組合，主次按鈕排放位置應該怎么規定呢？可分為兩種場景：一是當為從左到右閱讀順序時，主要按鈕應當排在次要按鈕左側。二是當為從右到左閱讀順序時，主要按鈕應當排在次要按鈕右側。而當一些特殊場景與這個原則沖突時，應權衡優先級做出取舍。

2. 柵格/導航

熟悉通用組件后，我們要通柵格/導航來確定產品頁面框架。

柵格

柵格可以有效地保證設計的一致性、讓頁面布局更具規律，并提高團隊協作效率。應該如何設計柵格呢？

① 柵格區域的劃定

我們一般習慣將頁面從下到上劃分為背景層、全局控制層、內容層、臨時層，而柵格區應當用在內容層。以下為常見幾種頁面布局柵格區的劃定。

② 柵格自適應規則

隨著頁面寬度變化，一般來說是通過欄寬變化實現自適應。

③ 柵格欄數的確定

根據頁面內容豐富程度，柵格欄數一般定 12 或者 24 欄，考慮到 B 端產品功能往往比較復雜，建議采用 24 欄即可。

④ 上下布局柵格

⑤ 左右布局柵格

導航

導航可分為全局導航與局部導航。

① 全局導航

全局導航包含頂部導航、側邊導航、混合導航。

這三種導航樣式各具特點，應結合產品特性選擇合適的導航樣式。這里要注意的一點是，當產品可用性和用戶體驗產生沖突時，應優先保證產品可用性。

② 局部導航

局部導航包含面包屑、標簽頁、步驟條、分頁器。

面包屑

面包屑導航的作用是告訴用戶當前頁面在系統層級結構中的位置以及父子級頁面間的關系，并且可以快速回到上幾級導航。

標簽頁

標簽頁可以幫助用戶在一個頁面實現快速切換不同內容，提升單個頁面內容擴展性?？煞譃榛緲邮健撕灅邮?、卡片樣式。

步驟條

當任務復雜或者存在先后關系時，可將其分解成一系列步驟，這里就會用上步驟條。步驟條是引導用戶按照流程完成任務的導航條，作用包含 3 點：一是讓用戶對操作流程長度和步驟有個預期，二是明確知道自己目前所在步驟，三是可以對用戶的任務完成度有明確的度量。

步驟條一般分為橫向與縱向兩種樣式。

步驟條小 Tips：當步驟條中有操作難度偏大的內容時，為了提高用戶操作完成率，我們可以考慮把其放在靠后的步驟中，原因是用戶前面已經完成了大部分簡單操作，后面碰到高難度操作后，出于損失厭惡心理，不會輕易放棄操作。

分頁器

當有大量內容需要展現時進行分頁加載處理，分頁器作用是可以讓用戶清楚的知道自己所要瀏覽的內容有多少頁、當前所在頁碼、快捷前往目標頁碼。

分頁器一般分為迷你、簡易、自定義三種樣式。

妙用分頁器小 Tips：當表格中需要對數據全選操作時，為了提高操作效率，可將自定義每頁跳數調到最大。例如一共 100 條數據，默認每頁 10 條數據，要完成全選需要點擊 9 次翻頁，10 次全選（表格的全選框勾選后一般只選中當前頁面全部數據，而不是所有頁面總數據），當把每頁條數調整為 50 后，則只需翻頁 1 次，點擊 2 次全選即可。

到這里關于 B 端的基礎組件就全部梳理完了，后續我們就來揭開展示組件的神秘面紗。

部分參考資料：

1. 《B 端產品設計-Mia》
2. 《Ant Design》

作者：huang。亮      來源：優設網

藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



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



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

一. SaaS的本質是什么

SaaS，英文全稱 Software as a Service，意思為軟件即服務。是通過網絡提供軟件服務，可以理解為一種軟件交付模式，因為交付模式的不同也決定了和傳統軟件的差別。

在Saas之前傳統軟件需要購買后本地化部署，兩者最大的區別在于，賣軟件是將軟件作為一個軟件實體賣給客戶了；而賣SaaS 軟件的所有權還在廠商所有，提供的是“軟件服務”。

Saas模式的提出者是Salesforce創始人——馬克·貝尼奧夫(Marc Benioff) 在98年的時候提出。有兩個原因促使馬克·貝尼奧夫思考并提出Saas：

1. 傳統軟件部署實施交付的失敗率非常高；

2. 軟件的售賣價格非常高，很多中型、中小企業有需求但無法承擔高昂的費用。

基于以上兩個痛點及當時的現狀賣軟件給企業造成的影響，已經形成了惡性循環，市場受到嚴重的阻礙（據Gartner 高德納公司（美國咨詢公司）的調查研究曾表明：在所有CRM項目中大約55%沒有達到軟件用戶的完整交付和預期目的，通俗的說是實施失敗。）

從賣軟件變成賣服務，其中的技術方式的改變、交易模式的改變，促成了軟件時代的變革，對于傳統軟件公司來說，是一次大革命。原來賣軟件給客戶，一次性（或者分幾次）收到錢了；改為賣服務后，這筆錢就不能在短周期內一次性收了，現行的SaaS模式通常是按照用戶的使用年費來收取。

兩者差別在于，軟件商需要先主動改變可以短期的一次性高收入，從短期收入向長期收入的轉變；

所以SaaS是長期主義的事情。

失敗的Saas生意會出現一個問題：把長期生意做成了短期不可持續的生意；而短期生意帶來的就是經營成本的劇增，導致生意不可持續。

所以，Saas模式決定了需要客戶長期使用你的產品，才可以長期可持續賺錢，也就是通常意義上的客戶終身價值（LTV）。

那如何做到客戶長期使用，其實只有一種方式：長期為客戶創造價值，做到幫客戶成功（幫助客戶的業務成功），從而持續續約。

吳昊老師，在《SaaS創業路線圖》中的講到：SaaS的本質是續費。這個觀點我比較贊同，SaaS的經營本質在于可持續。

二.從新認識B端用戶體驗

那么，決定SaaS的成功因素是什么呢？

我認為決定性因素有三個方面：產品強大且靈活、用戶體驗優質、服務的有效支持。產品強大和服務的有效支持不言而喻，具體我們來聊聊用戶體驗的價值。

傳統軟件在一次交付實施后，客戶付80%的錢，剩下的20%能不能收回來就不那么重要。但SaaS模式，客戶每年進行續費，若產品使用及用戶體驗滿意度低，帶來的影響和后果可能是客戶終止續費。

因此，和傳統軟件相比SaaS的用戶體驗的價值就更為重要，它直接影響SaaS的續費和流失。

相信“用戶體驗”這個詞大家應該非常熟悉，接下來我們從新認識什么是用戶體驗？

官方的定義是：用戶在使用產品過程中建立起來的一種主觀感受。“用戶體驗”這一概念是唐納德·諾曼（Donald Norman）在20世紀90年代中期提出的。產品大神俞軍老師說過用戶體驗的本質是“ 用戶最小成本滿足需求 ”。

基于俞軍老師的定義、我的理解和思考，我認為是幫助產品和用戶：最小成本滿足需求，同時創造「美·好」體驗。

怎么理解，因為用戶體驗是滿足商業目標的一種行為手段，我們來看下用戶體驗的需要考慮的雙邊關系，就比較好理解了。

如下圖：左邊是用戶最小成本滿足需求，右邊是我們企業最高效的服務用戶。

企業的本質就是創造商業價值，商業價值來源于用戶價值，同時考慮實現商業價值的效果和效率。我們常常會聽到“投入產出比”或者叫“投資回報率”；對于商業行為中的一環用戶體驗也如此。

所以，用戶體驗的核心的就是：平衡用戶最小成本滿足需求，及企業最小成本服務用戶。完成價值交換同時，滿足持續性。

由此，可以看出在SaaS的產品設計中，用戶體驗其實承擔著一個比較重要的責任，因為它關系到成本的邊際和規?；挠绊?，一頭是產品一頭是用戶。

那么作為產品體驗設計師，我們需要具備一定成本意識，做好“成本管控的設計”，更本質來說設計過程中我們應該：把復雜留給自己，把簡單留給用戶。

因為我們在設計的過程中把握產品的交互方式、使用流程，在用戶認知和效率層面有較強的把控空間，充分做到的以“用戶體驗”出發；那后續銷售、交付、客戶成功的全鏈路服務過程的學習效率和服務效率會呈指數級上升。

產品設計，應該把復雜留給自己、把簡單留給用戶。

關于用戶體驗，就不得不介紹一下“ 用戶體驗要素”模型，個人認為這是所有產品經理和設計師可以貫穿整個職業生涯中都需要經常性、反復對照思考的設計模型。

用戶體驗設計的價值遠不止于讓產品的視覺、顏值提升，設計更大的價值在于深入業務、洞察用戶，幫助業務梳理產品信息架構、任務流程、交互體驗。

構建系統的用戶使用方式和工作模式，從而達成用戶目標；通過達成用戶目標完成價值交換、以此完成商業交易達成商業目標。

三. SaaS如何進行用戶體驗設計

回顧Saas的商業模式，Saas的商業模式決定我們提供的這個服務不是靠人海戰術，因為Saas軟件即服務的含義是所提供的軟件就等于提供自助化的服務，應該提供的是自助服務、開箱即用、開箱易用的服務。

那么Saas服務設計策略上，應該從降低系統使用門檻和提升用戶的自主化服務兩維度出發，根據這兩個核心維度，我們構建了每刻SaaS產品體驗的設計策略模型。

第一，設計“系統服務自動化”，這里的服務是功能使用的操作，符合“低認知、易上手”，那么從設計整個體系 需要遵守“易發現、低認知、高效率、有溫度”的設計原則展開，以用戶使用行為出發設計符合用戶心智認知的功能形態和交互流程。

第二，設計“系統幫助自助化”，什么意思在全系統中構建幫助引導的自助化體系，用戶需要幫助的時候提供人性化的引導幫助，我們從發現的維度、認知的維度，系統認知的維度，綜合考慮用戶系統的幫助引導。

設計原則，是指導我們做正確設計的方針。

設計原則的建立基于對用戶使用體驗全流程的基礎上，以每刻報銷的設計原則，圍繞用戶旅程、認知及行為出發構建。

1. 當用戶接觸系統從看出發，看見系統界面、發現操作入口；（發現）

2. 帶著操作任務用戶進入系統、看見導航、看見文字、看見按鈕，都需要理解認知；（認知）

3.用戶從何開始、如何操作，在完成整個業務事項的過程需要進行填寫、選擇、交互過程就產生了生產效率問題；（操作）

4. 當出現誤操作或系統出錯時，需要系統糾錯提醒、容錯的設計、幫助及引導，當完成整個業務事項后，用戶產生一種的情緒感受，這個感受即是印象、評價、口碑。（感受）

緊緊圍繞產品業務、用戶處理特性業務的基礎上，以終為始，回歸到用戶、業務、系統進行思考歸納的產物。

設計策略，是指導我們如何進行做正確的設計。

在SaaS產品分類上，常見的SaaS產品主要分為3類，行業SaaS、職能SaaS和通用SaaS。

每刻報銷產品從核心業務來說是職能類Saas，從提升財務人員報銷的發票審批、費用審核等效率展開，但報銷的來源又源于普通員工的業務報銷，業務報銷發生又和所在行業的費用發生行為特征有一定相關性，所以是結合職能和行業Saas的屬性，從用戶體驗的設計上需要考慮不同角色用戶對于系統的業務理解、功能交織使用的不同訴求，這個設計過程探索研究是相對比較有難度的，以后有機會可以展開聊。

下圖是每刻系統經過6年過程中統計的問題分布，分布比率呈現：認知問題 60%，效率問題 30%、情感問題10%。

關于幫助引導

我們在訪談客戶調研發現，企業服務雖然客戶已經用了好幾年我們的系統，但財務部門還是經常性會碰到新入職員工的系統使用問題，甚至財務部門來新人時 以前系統發生的使用問題會從新出現一遍，所以企業服務有一個現象，客戶是老客戶，但新用戶不斷增加，新人一旦增加第一個遇到的問題就是認知問題，也輔證了我們對于Saas系統認知問題是用戶體驗的第一大問題。

幫助體系建立可以從系統層面體系化有效降低用戶使用的認知成本，圍繞用戶角色的核心業務操作使用流程、洞察用戶旅程上的疑惑和障礙點。用戶首次進入系統要建立介紹和引導，足夠簡單、降低陌生感，來減少人力咨詢回復的投入。

相比人，系統的自助化和自動化的服務，更具有復用性和規模效應。

本文小結

SaaS的商業模式，按年使用賬號來收費和傳統軟件的付費模式區別非常大，因為需要先主動放棄自己本來可以唾手可得的收入，從短期收入向長期收入的轉變。

在SaaS模式的時代，商業模式決定其必須關注客戶成功、客戶持續續費、LTV客戶長期價值。

SaaS的產品更需要重視用戶體驗，用戶體驗的優劣決定其產品的長期發展，SaaS的用戶體驗設計則關注用戶使用認知和行為效率，以及系統服務自主化設計和系統幫助自動化設計，用戶體驗將在產品成長期后半程，逐漸成為SaaS商業模式不可或缺的產品競爭力。

作者：周大蝦07      來源：站酷



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



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



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

一、圖標是什么

圖標在界面設計中，雖然很小，但是卻是界面中重要組成部分之一。通過將顯示物體圖形化的形式，將功能本意高度濃縮成一個圖標，再通過視覺隱喻更快地讓用戶理解功能，同時圖形與文字相比，圖形更加生動形象，視覺能力更強、更便于記憶，用戶可以根據圖形快速定位功能位置。而順著時代的發展，圖標不再僅僅以工具的形式出現，更多的起到裝飾頁面，也不斷延伸出不同的圖標類型與圖標設計風格。

1. 工具層面

1.1 降低用戶理解成本

圖形與復雜的文字相比，更加簡潔，相應的識別效率也會更高。圖標可以將復雜的文字描述高度濃縮成一個圖標，通過視覺隱喻的方式讓用戶聯想到現實生活中的物體，更直觀地呈現圖標代表的功能，更快理解功能的意義

1.2 減輕頁面負擔

像一些通用常見的圖標，如搜索、播放按鈕、更多等，僅需要一個圖標就能清晰地傳遞功能意義給用戶，省文字的描述，節省更多的頁面空間與閱讀壓力。

1.3 更快定位功能位置

圖標與文字相比有更豐富的表現形式與顏色，所以視覺沖擊也就更強，也能更快地被識別出來，當用戶熟悉了產品后，只需要通過圖標就能快速找到想要的功能，當功能位置發生變化時，不需再重新閱讀枯燥的文字找到對應的功能，只需從圖標形狀、顏色上區別，找到對應的功能。

2.裝飾層面

2.1 傳遞品牌調性

隨著互聯網的發展，同類型的產品越來越多，要在各個產品中突圍，除好用的功能外還要有特色的外觀。在圖標中融入能代表產品品牌的符號，強化品牌調性，保持圖標的獨特性，給用戶留下深刻的印象，一看圖標就知道是哪個產品。

2.2 增強產品吸引力

如今用戶對產品的要求除了要有好用、有用的功能外，還希望有更好的視覺享受。一組好看、有趣的圖標可以帶給用戶更好的第一印象，增強產品對用戶的吸引力。

2.3 渲染氣氛

根據不同的節日或運營活動，設計相應氛圍的圖標，幫助產品渲染節日氛圍或加強用戶對產品主題運營活動的感知力度

二、圖標繪制的基本原則

1.  可識別性

圖標與文字在一定程度上起到相同的作用，都是通過特定的表現形式來傳達某種信息給用戶。順著時代發展，圖標的設計更精細化，產生了更多的設計風格，但圖標的本質還是沒變的，是用戶進入功能的入口。因此，一個能被用戶快速識別、快速理解的圖標相當重要，是圖標設計的基本要求。我們繪制圖標時要盡量去掉輔助、無用的元素，保留最清晰、直接、有代表性的元素。

2. 風格統一

設計師在設計圖標時，除了會根據產品類型、用戶群體、品牌調性等因素決定使用哪種圖標風格外，還要根據圖標的具體使用位置，因此在一個產品中，常常會出現多種風格類型的圖標，而風格統一指的是在某個特定功能模塊內的圖標風格要保持一致，是面性的圖標就是面性，是毛玻璃效果就是毛玻璃效果。

3. 大小統一

圓形、正方形、三角形，在這三個圖形雖然高度相同，但是整體上三個圖形的視覺重量并不相同。在實際的操作中，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個方向缺得越多，就往那個方向移動一點。

4. 色彩統一

色彩的統一指的是圖標色彩在飽和度與明度上保持特征統一，數值在一定的范圍內發生改變；而在色相的選擇上保持匹配度，像一些單色系的圖標，通常使用的都是產品的主題色，而多彩圖標，常會以主題色為主，拓展出臨近色、相似色、對比色，目前市面上大多數的圖標顏色會使用同類色與鄰近色。對于飽和度與明度的調節，我通過利用灰度模式進行輔助，使圖標視覺更統一柔和，不會出現其中一個亮眼或暗沉。

5. 占比統一

5.1 正負形占比統一

正負形的合理使用是圖標能否傳達準確意思的關鍵，因此也是常會出現的組成元素。在繪制圖標的正負形，注意保持占比統一，其中某個圖形正負形太大或太小，會顯得突兀、別扭，失去統一性，界面整體質感會大大降低。

5.2 顏色占比統一

在繪制圖標時，確定圖標中的主色和輔色，繪制時盡量保證主色和輔色占比相同，保持圖標的統一性。

6. 疏密統一

有規律地將線條組織在一起，利于形成統一的視覺風格。同時，線條間可以保持一定的留白，不需要太密集，太密集的線性圖標，縮小后反而會影響識別。同時，給圖標留出一些空間，使線與線之間不會太擠，增強圖標的呼吸感。

安利一個國外的圖標大神Myicons?，簡單的線性圖標一樣可以很精致。

三、不同風格的圖標

目前市面上的圖標主要有四種類型，分別是：線性圖標、面性圖標、寫實擬物圖標和三維立體圖標。而不同的圖標中組合的元素都會有一些差異，相同類型的圖標中也會有不同的圖標風格。

1. 線性圖標

線性圖標主要還是由線性組成，設計師可以通過改變線的粗細、線的端點、圓角大小或加入一些面性元素在里面來使線性圖標更加豐富、有趣，但整體來說純線性圖標更纖細、簡潔，使得視覺沖擊力稍微弱了些。

1.1.1 單色

單色是線性最基礎的表達方式，這種設計風格單調、視覺沖擊較差，但是制作難度低，設計所耗費的時間頁更斷，因此常常會出現在個人中心頁中，僅需要有圖標顯示功能入口，設計要求并不高的功能模塊中。

1.1.2 雙色

雙色圖標與單色圖標相比，視覺沖擊力更強，應用范圍更廣，通常會融入品牌主色，是除了線面圖標外出現在首頁中的線性圖標。因為雙色圖標可以加入品牌色，增強品牌感的同時，使圖標增加了設計感，不會像單色圖標那么單調乏味，因此雙色圖標也會以“次要功能”的形式出現在首頁當中。

像在“去哪兒旅行App”和“平安銀行App”中，頁面已經存在一組視覺沖擊、視覺層級更高的一組面性圖標，但是因為業務需求露出更多功能入口，因此就可以使用線性圖標這種視覺沖擊力弱一點的圖標搭配，既不會搶走主視覺，也能滿足業務需求。

1.1.3 斷點圖標

斷點圖標在目前的app圖標設計上較少使用。雖然斷點風格圖標在表達上有一定的局限性，但是圖標設計感更強，圖標更有趣味性。

斷點圖標并不是隨便刪除某個描點，在斷點的位置選擇上和斷點的大小都是要注意的地方。斷點位置的選擇要注意兩點：

1 ) 保持相同角度，能更好地增強圖標的協調性，避免造成圖標的視覺混亂降低用戶的視覺體驗。

2 ) 選擇在線的拐角處，利用連續性原理，在一定的路徑下使這種線的斷裂保持視覺連貫性，保持圖形整體性。

1.1.4 線面結合

在原本的線性圖標上加入色塊，就會產生新的設計風格--線面圖標。線面圖標比較特殊，圖標的視覺層級會隨著圖標中包含的色塊大小而變化，色塊越大，視覺沖擊力也越強。因此在設計線面結合圖標時，要先確定圖標在該頁面中的重要程度，如果是主要功能則將色塊的占比加大。

1.2 線的影響

圖標中的線主要由兩個元素組成，一個是線的粗細，一個是線的端點，而這兩個元素也是主要控制線性圖標的性格。以常用的48px圖標盒子為例，常用線的粗細有2px、3px、4px，圖標的線越粗圖標越有力量感反之圖標越纖細；而圖標的圓角越小時圖標越穩重、專業，像一些辦公軟件、金融產品，圖標的圓角就比較小。圓角越大圖標越飽滿親和力更強，像一些兒童學習類軟件就會使用大圓角的圖標設計。

因此，圖標的線粗細與圓角大小，都根據不同產品類型與目標用戶確定。而大多數線性圖標主要有四種基礎造型：纖細+小圓角、纖細+大圓角、粗描邊+小圓角/無圓角、粗描邊+大圓角。

1.2.1 纖細+小圓角

精致、嚴謹，多用在銀行、新聞類APP。沒有圓角，會使圖標更加尖銳，對于銀行類APP會給人一種威脅，但是太大的圓角，顯得有點輕浮、可愛，不符合銀行莊嚴的感覺，所以稍微添加一些圓角，使圖標更有親和力的同時，也保留一些莊嚴的感覺。

1.2.2 纖細+大圓角

更加精致、有親和力，這種風格是目前市面上軟件使用得最多的一種線性圖標風格。

1.2.3 粗描邊+無圓角/小圓角

粗曠、個性、有很強的力量感。更多的用在運動、汽車這類主要用戶傾向男性的軟件，同時也會在一些潮流類電商軟件中出現，凸顯更有個性的設計風格。

1.2.4 粗描邊+大圓角

圓潤、可愛、親和力強，常用在偏向兒童的產品

2. 面性圖標

面性圖標時軟件使用的最多的一種圖標類型，設計師通過改變色塊、圖形圓角、正負形和底托等元素，讓面性圖標呈現不同的設計風格，但無論是哪種設計風格，面性圖標設計沖擊力相比面性圖標更強，因此市面上大多數核心功能都會用到面性圖標來提高功能的設計層級，讓功能在頁面中更加突出。

2.1 扁平風格扁平風格的圖標常為單色圖標，圖標整體沒有漸變、高光、陰影等裝飾性設計效果，因此更加簡潔，更突出功能本身，圖標功能性更強，圖標制作成本低，曾經也是風靡一時。但扁平風格的圖標缺少亮點與制作成本的原因，導致圖標同質化嚴重，缺少特點，很難被人記住，因此現在很少被使用。

2.2 漸變色塊

在扁平風的基礎上，在色塊上添加漸變色，在保留了扁平圖標的功能性外，使圖標色彩更加豐富，在不同類型的軟件中都可以使用這種風格，算是一個比較百搭的圖標風格。同時漸變色塊也是很多面性圖標的組合基礎，在漸變色塊這個基礎上還可以添加不同的效果形成不同設計風格。

在設計漸變色塊風格的圖標時要注意兩點：

1 ) 市面上的app都會選擇同類色作為漸變色，然后通過改變顏色的飽和度，使漸變色的明亮對比更加明顯的同時，顏色過渡也更加柔和舒服，使圖標更有通透感，增加視覺沖擊力。

2 ) 在設計這種有白色色塊在頂部的圖標時，可以給色塊添加一個淺淺的透明漸變，讓色塊過渡自然一些，同時也可以添加一層淺淺的陰影，增加層次感。

2.3 圖層疊加

圖層疊加風格的圖標看上去像兩個透明圖層疊加在一起的感覺，圖標層次感強，細節也更加豐富，圖標風格更新穎、更年輕化，因此如果在設計一個年輕人使用或者希望打造年輕化頁面感受的時候，可以嘗試使用圖層疊加風格。

繪制圖層疊加風格的圖標時要注意：

1 ) 重疊在一起的那個色塊是通過布爾運算得到的，并不是通過簡單的透明圖層得到的。而重疊在一起的那個色塊也不宜過于顯眼，畢竟看的是圖標的整體。因此可以參考一下“智行火車票”，通過改變飽和度5%到10%和使用15%左右的同類色，就可以讓用戶看得清圖標的變化，同時也不會是色塊太突兀影響觀感。

2 ) 盡量統一疊加部分圖形與圖標之間的占比。

2.4 毛玻璃

毛玻璃是近年最火的一種設計風格，不僅設計風格新穎、特別，而且還有很強的質感表現，因此不僅在金融產品，還是生鮮產品或票務產品，都有毛玻璃風格的圖標。

而在設計毛玻璃圖標時，里面也有很多細節需要注意：

1 ) 背景模糊效果不需要太大，有一種若隱若現的感覺就可以。如果調太大，可能就看不出是毛玻璃效果了。

2 ) 添加背景模糊效果的圖層不需要用純白色。像百度這種同類色配色的毛玻璃圖標，只需要將圖標的主色調低飽和度后，就可以使用。這樣的好處是不僅讓圖標顏色過渡更加自然，同時有更多的組合方式、更多的層次。

3 ) 使用邊緣光。毛玻璃圖標有很多相互重疊的圖形，如果重疊的圖形顏色相近的話，圖形邊緣就會被弱化，使用邊緣光可以明確圖形邊界，增加層次感。同時使用邊緣光，還可以為圖形塑造類似玻璃的厚度，細節更加豐富。

2.5 晶白風格

晶白類圖標利用圓角正方形或圓形作為底托再在上面添加一個主色為白色的圖標，然后通過調節透明度、投影、漸變給圖標添加一些質感，是常見的圖標風格，也是使用了很久的一種設計風格。

后面也延伸出了另一種設計風格圖標主題通常不會是統一的造型，像喜馬拉雅這種圖標，圖標本身元素復雜、細節較多，形狀也更加不可控，因此用一個淺色圓形底托，將他們統一起來。不僅可以將復雜的圖形統一起來，還可以添加吸引人眼球的漸變色更好地增加圖標的視覺占比，有更強的視覺沖擊感。

在繪制晶白風格時，注意兩點：

1 ) 可以適當改變底托圖形的形狀，增強差異化。

2 ) 統一光源，越白的地方越亮，注意控制好透明度的變化與角度。

2.6 實物展示

這類圖標會出現在生鮮類、藥品類、潮流電商類產品中，因為使用圖標很難將這些類型概括起來，直接使用圖片展示更加直觀，但因為圖片細節、元素更多更復雜，如果使用太多會使圖標看起來很雜亂。

3. 寫實向圖標

寫實向圖標模擬現實中的物體，更貼近生活，用戶對這類圖標理解能力也更強，繪制難度也更高，繪制時間也更長。寫實向圖標除了基本的色塊組合、顏色搭配外，還有更多的透視與光影來增強實感。常常用在運營設計上，或用在一些特殊界面模塊從而增強視覺層級。

3.1 輕擬物圖標

輕擬物圖標是最近很好的的設計風格，但是輕擬物圖標出現在界面設計上還是比較少的。因為輕擬物圖標元素比較復雜，視覺沖擊力強，放在界面上有可能搶走用戶對核心內容的關注度，通常會運用在運營設計長圖、彈窗、核心功能等。

而繪制輕擬物圖標，主要注意的是光影的打造。光影主要由這幾個元素組成：亮面、暗面、明暗交接線、反光。在繪制輕擬物圖標時，主要注意以下幾點：

1 ) 在繪制輕擬物圖標時，不一定需要使用統一色相中的顏色，可以通過改變顏色的飽和度明度的對比和冷暖色的對比來營造光影，使圖標色彩更豐富、對比更明顯。

2 ) 反光可以使用圖標主色的對比色，降低飽和度，提高明度，運用在輕擬物圖標邊緣，使邊緣更更清晰，不會糊在一起，圖標整體立體感更強。

3 ) 明暗對比越明顯，輕擬物圖標越顯通透、立體。

3.2 2.5D圖標

2.5D曾經是很火的一種設計風格，但是現在已經逐漸被輕擬物與建模替代。2.5D圖標固定展示了三個面，有很強的立體感，常常運用在科技類的網站設計中。

在繪制2.5D風格圖標時，要注意：

1)統一好圖標的厚度。

3.3 3D圖標

隨著時代進步，3D逐漸成為一個主流的設計風格。通過專業軟件給予了圖形材質質感、真實的光影，更加貼近生活真實物件，同時還可以配合動效的設計，有很強的視覺沖擊力和新鮮感。常常出現在網頁設計中、運營設計中。目前繪制3D圖標主要用blender和C4D，C4D在渲染方面有oc的加持，渲染效果直接拉滿；Blender則是完全免費的軟件，目前熱度也是瘋狂漲，在渲染方面雖然沒有oc好，但是還是可以滿足日常工作。

而在繪制3D圖標需要注意以下幾點：

1 ) 統一主光源方向。建模里面會出現很多打光類型，如主光、輔光（有時不止一個）、邊緣光等。

2 ) 統一攝像機位置。攝像機與物體的距離、角度影響渲染的最終效果。

3 ) 用數值定義物體大小。建模軟件不像繪圖軟件那樣強調物體的數值大小，拉遠看物體就是小，拉近看就是大，做一個物體時還好，但是要做一組3D圖標時，就要定義好物體的大小，使圖標更加統一。

四、如何確定使用哪種類型的圖標

不同風格的圖標有著不同的特點，設計師要根據圖標放置位置和功能選擇圖標類型。其中最有決定性的因素就是圖標的重量，而影響圖標重量的因素有：占比、顏色、細節元素。線性圖標在界面中占比較少，因此看起來會更加簡潔，視覺沖擊力弱，常用在重要程度低，不需要突出展示的功能上；面性圖標占比更高，視覺上會更加飽滿，同時顏色色塊使圖標更加顯眼，視覺沖擊力得到力增強，使用戶對圖標的感知力更高，是最常用的圖標類型，用在各個重要功能入口上；輕擬物和3D圖標除了占比高、顏色豐富，還有各種光影、材質的細節，圖標元素更多，視覺沖擊力也更強了，也因為圖標復雜、視覺沖擊力強，因此很少出現在界面上，通常運用在一些特殊運營入口或需要吸引用戶的大模塊中。

不同的類型在界面中也會搭配出現。

五、圖標的繪制

1. 圖標盒子

圖標盒子是輔助繪制圖標的一個工具，幫助設計師在設計圖標時更好地規范好各個圖標的尺寸大小。而圖標盒子也有很多種，我最常用的是48*48px，這個尺寸對于線條的控制比較方便，通常用1px、2px、3px。

工具始終都是工具，界面圖標不會由單一的形狀組合，所以形狀各異導致每一個圖標的視覺體積都會有所區別，因此不能單純地利用統一的寬高或線去界別圖標的大小，要根據圖標的的特征去判斷。在平常的設計中，我通常會利用正方形來輔助圖標繪制，在保持形狀特征下，讓正方形內的區域占滿，哪個地方缺得越多，哪個地方就拉伸一點。

2. 圖標的繪制方法

圖標中會存在標準化圖標，像刪除就是一個垃圾桶、像首頁通常是一個家的圖標、還有搜索則是放大鏡的圖，照片是兩個山一個太陽，這些圖標都習慣以這種表達方式出現，用戶已經習慣了這種表現形式，因此對于標準化圖標，盡量維持以往的變現形式，讓用戶更好地理解圖標意思。

非標準化圖標可以細分為具象與抽象，對于具象類圖標，現實中有實物可以參照。這類圖標的設計較為簡單，可以在某度上尋找相關照片，根據實物的造型進行提煉和簡化。

抽象圖標則較為復雜，通常是某些特定行為的名詞，沒有具體直接的參照物。因此在設計前，我們要先充分理解功能本身，這個功能是什么、用戶怎么用，然后提煉關鍵詞，接著根據關鍵詞發散思維，尋找相關聯的圖形來表示含義。例如“社區”功能，功能目的是提供一個讓用戶互相交流的環境，同時吸引無目的的用戶逛起來發現感興趣的話題，讓更多的信息流得到曝光從功能目的中提煉一下關鍵詞：聚在一起、發現、交流。接著發散思維進行腦暴，聚在一起：一群人-圈子-同一個世界的人-星球，發現：看-眼睛；尋找-望遠鏡-雷達-指南針，交流：聊天-聊天氣泡-聲波。

六、圖標的使用場景

圖標運用在功能入口上是最基礎的使用場景之一，如首頁中的金剛區、個人中心都會用到很多圖標作為功能入口。

1. 金剛區

目前國內的APP包含的功能有很多，而金剛區的作用就整合產品功能并放置在首頁中，提高這些功能的曝光量，給其他功能引流，讓更多用戶知道或使用上產品功能，增強用戶對產品的粘性。像美團，很多人對他的了解是一個外賣工具，但它里面還有很多其他功能，使用金剛區展示它多元化的服務。

金剛區圖標通常會有1～3行，根據業務具體需求做調整，在每行中會有4～5個圖標。尺寸范圍一般在40px～48px左右（@1x），同時會根據具體的業務需求，調整大小，最終都是一預覽效果為準。

2. 個人中心

個人中心是個人類型功能、運營活動入口和工具的集合地，是除了金剛區外，含圖標最多的一個地方。個人中心中包含很多不同類型的功能，可以使用卡片式的設計，將功能圖標更好地分類。在圖標風格的選擇上，個人類型功能是最重要的功能，通常會以面性風格放置在頂部，如果個人中心中需要展示運營入口時，需要減弱個人類型功能圖標的視覺沖擊，會使用線性風格圖標。

3. 運營入口

運營入口主要作用是讓用戶點擊后跳轉到產品活動頁，因此具有強視覺沖擊力的圖標，會更吸引用戶眼球，從而提高點擊運營入口的機會。

因此運營入口上，通常會使用面性圖標、寫實向圖標或3d圖標。因為寫實向圖標或3D圖標可以提高視覺層級，因此經常運用在主要運營板塊上，而面性圖標相比下較弱，當頁面已存在一個主視覺或主要功能時，運用在運營板塊上。

4. 主題板塊

在軟件中會有很多不同主題的信息板塊，同時信息板塊間有較大的差異，如果全部展示出來會使頁面樣式不同統一、信息混亂導致降低用戶的閱讀體驗。因此使用主題板塊，將不同主題信息集中在一起，然后露出部分關鍵信息在頁面中，保證視覺統一的同時，還可以起到流量分發的作用，讓用戶在茫茫信息流中快速找到自己感興趣的方向，提供用戶閱讀體驗。

純文字的排版在信息流中略顯枯燥，而圖標在主題板塊中起到潤色主題的作用，渲染主題氣氛，提高不同主題板塊的識別度與差異化。對于一些長標題的主題板塊，只需要記住圖標就能快速定位主題板塊位置。

5. 底部tab欄

底部tab欄功能數量通常在2～5個，在設計時，要設計點擊前和點擊后兩個圖標狀態，同時幫助兩個狀態是有明顯的變化。底部tab欄圖標大小通常在22px（@1x）左右，而圖標底下的文字時10px（@1x）。底部tab欄作為最常出現的區域，是傳達產品品牌感、提升產品辨識度、記憶點的重要區域，很多產品都會在底部tab欄的圖標設計上加入品牌元素，增強辨識度。

七、如何提高圖標設計能力

1. 階段一：臨摹

臨摹是人類學習一個新技能開始，就像嬰兒學習父母說話一樣。但是一開始很多都不會臨摹，或者照著畫也不會，那我們應該如何去做？

1.1 臨摹效果不佳

1 ) 提高審美能力，多看一些主流的圖標，可以上追波看看目前流行的設計風格，不行的話就去看看大廠都在畫怎樣的圖標。

2 ) 明確自己的能力，對自己目前的設計水平有一個客觀的評價，到一個怎樣的水平。很多人都急于求成，最基礎的線性圖標都不會就上來搞輕擬物，畫來畫去都不好看，最后就放棄了。

3 ) 敢于支出自己的不足，許多人畫了許多時間去畫一組圖標，就很容易被自己催眠，以為自己已經畫得很好了，其實還會有很多不足。所以我們要敢于指出自己的不足，在前期臨摹階段，畫完后多去對比原作，自 己有哪些地方沒有原作做得好的

1.2 會了，但沒完全會

什么是會了，指的是可以繪制出于優秀原作一樣的圖標；什么是沒完全會，指的是不知道原作是怎么達到這個好看的效果的。而且很重要的一點是，你臨摹的作品可能也有一些不好，需要改進的地方，以此在這個階段我們要做的是：

1 ) 多看別人總結的知識點，知道如何去判斷一個圖標是否還有可以改進的地方，這樣繪制是不是正確的

2 ) 懂得總結與思考，原作是用來什么樣的手法讓我覺得它是好看的，這些技法怎么用，還可以用在哪

2. 階段二：半原創

臨摹是一個提升自己的手法，但不代表可以直接用到自己的作品中，直接復制別人的設計，并不叫設計師，復制粘貼誰不會啊，所以在懂得如何臨摹后，我們要敢于嘗試半原創。這里說的半原創不是指在別人圖標的基礎上加上兩筆就是半原創，而是要吸取了優秀圖標的優點后，重新設計出一個有相同特點的圖標。那我們應該如何半原創呢？

1 ) 還是多看，但是不同于臨摹階段，我們在臨摹的時候還要多想，這個圖標的特點是什么、怎么做、還能怎么用，積累圖標不同的表現形式2 ) 多練，這個建立在多臨摹上，目的知道別人的技法是什么做的，練習了不同的技法后，將它們再融合在一起

3. 階段三：原創

第三個階段，也是最難得階段。目前很多情況都是只能成為融圖設計師，將不同作品優秀的點組合起來。但如果要建立自己的風格也是要做融圖設計師的基礎上，多想、多嘗試，敢于突破，在一次次的融圖后，發現出自己的特點，為自己的作品打上自己標簽，輸出具有差異化特點的設計。最有印象的就是夸克的設計，品牌特色很明顯，其實我們每個人也可以成為一個品牌，只要我們足夠努力

作者：阿恒的設計筆記     來源：站酷



藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請加微信ban_lanlan，報下信息，藍小助會請您入群。歡迎您加入噢~~

希望得到建議咨詢、商務合作，也請與我們聯系01063334945。 



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



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

目錄

一、回顧 Vue2 的全局引用方式

  1. 簡單項目的全局引用

2. 復雜項目的三步封裝

二、Vue3 中的使用 

1. provide/inject 方式

2. getCurrentInstance 組合式API引入

一、回顧 Vue2 的全局引用方式

  1. 簡單項目的全局引用

    如果只是簡單幾個頁面的使用，無需太過復雜的配置就可以直接再 main.js 中進行掛載

    


        


            


            

        

        


            

                import Vue from "vue";
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /* 第一步下載 axios 命令：npm i axios 或者yarn add axios 或者pnpm i axios */
            

        

    

    


        


            


            

        

        


            

                /* 第二步引入axios */
            

        

    

    


        


            


            

        

        


            

                import axios from 'axios'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 掛載一個自定義屬性$http
            

        

    

    


        


            


            

        

        


            

                Vue.prototype.$http = axios
            

        

    

    


        


            


            

        

        


            

                // 全局配置axios請求根路徑(axios.默認配置.請求根路徑)
            

        

    

    


        


            


            

        

        


            

                axios.defaults.baseURL = 'http://yufei.shop:3000'
            

        

    

    


        


            


            

        

        


            


            

        

    

   頁面使用

    


        


            


            

        

        


            

                methods:{
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData(){
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                this.$http.get('/barry').then(res=>{
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                console.log('res',res)
            

        

    

    


        


            


            

        

        


            

                )}
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

2. 復雜項目的三步封裝

  ① 新建 util/request.js (配置全局的Axios，請求攔截、響應攔截等)

        關于 VFrame 有疑問的同學可以移步  前端不使用 il8n，如何優雅的實現多語言？

    


        


            


            

        

        


            

                import axios from "axios";
            

        

    

    


        


            


            

        

        


            

                import { Notification, MessageBox, Message } from "element-ui";
            

        

    

    


        


            


            

        

        


            

                import store from "@/store";
            

        

    

    


        


            


            

        

        


            

                import { getToken } from "@/utils/auth";
            

        

    

    


        


            


            

        

        


            

                import errorCode from "@/utils/errorCode";
            

        

    

    


        


            


            

        

        


            

                import Cookies from "js-cookie";
            

        

    

    


        


            


            

        

        


            

                import VFrame from "../framework/VFrame.js";
            

        

    

    


        


            


            

        

        


            

                import CONSTANT from '@/CONSTANT.js'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                axios.defaults.headers["Content-Type"] = "application/json;charset=utf-8";
            

        

    

    


        


            


            

        

        


            

                // 創建axios實例
            

        

    

    


        


            


            

        

        


            

                const service = axios.create({
            

        

    

    


        


            


            

        

        


            

                // axios中請求配置有baseURL選項，表示請求URL公共部分
            

        

    

    


        


            


            

        

        


            

                baseURL: process.env.VUE_APP_BASE_API,
            

        

    

    


        


            


            

        

        


            

                // 超時
            

        

    

    


        


            


            

        

        


            

                timeout: 120000
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                // request攔截器
            

        

    

    


        


            


            

        

        


            

                service.interceptors.request.use(
            

        

    

    


        


            


            

        

        


            

                config => {
            

        

    

    


        


            


            

        

        


            

                // 是否需要設置 token
            

        

    

    


        


            


            

        

        


            

                const isToken = (config.headers || {}).isToken === false;
            

        

    

    


        


            


            

        

        


            

                if (getToken() && !isToken) {
            

        

    

    


        


            


            

        

        


            

                config.headers["Authorization"] = "Bearer " + getToken(); // 讓每個請求攜帶自定義token 請根據實際情況自行修改
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                var cultureName = Cookies.get(CONSTANT.UX_LANGUAGE);
            

        

    

    


        


            


            

        

        


            

                if (cultureName) {
            

        

    

    


        


            


            

        

        


            

                config.headers[CONSTANT.UX_LANGUAGE] = cultureName; // 讓每個請求攜帶自定義token 請根據實際情況自行修改
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                // get請求映射params參數
            

        

    

    


        


            


            

        

        


            

                if (config.method === "get" && config.params) {
            

        

    

    


        


            


            

        

        


            

                let url = config.url + "?";
            

        

    

    


        


            


            

        

        


            

                for (const propName of Object.keys(config.params)) {
            

        

    

    


        


            


            

        

        


            

                const value = config.params[propName];
            

        

    

    


        


            


            

        

        


            

                var part = encodeURIComponent(propName) + "=";
            

        

    

    


        


            


            

        

        


            

                if (value !== null && typeof value !== "undefined") {
            

        

    

    


        


            


            

        

        


            

                if (typeof value === "object") {
            

        

    

    


        


            


            

        

        


            

                for (const key of Object.keys(value)) {
            

        

    

    


        


            


            

        

        


            

                let params = propName + "[" + key + "]";
            

        

    

    


        


            


            

        

        


            

                var subPart = encodeURIComponent(params) + "=";
            

        

    

    


        


            


            

        

        


            

                url += subPart + encodeURIComponent(value[key]) + "&";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                url += part + encodeURIComponent(value) + "&";
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                url = url.slice(0, -1);
            

        

    

    


        


            


            

        

        


            

                config.params = {};
            

        

    

    


        


            


            

        

        


            

                config.url = url;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return config;
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log(error);
            

        

    

    


        


            


            

        

        


            

                Promise.reject(error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 響應攔截器
            

        

    

    


        


            


            

        

        


            

                service.interceptors.response.use(
            

        

    

    


        


            


            

        

        


            

                res => {
            

        

    

    


        


            


            

        

        


            

                // 未設置狀態碼則默認成功狀態
            

        

    

    


        


            


            

        

        


            

                const code = res.data.code || 200;
            

        

    

    


        


            


            

        

        


            

                // 獲取錯誤信息
            

        

    

    


        


            


            

        

        


            

                const msg = errorCode[code] || res.data.msg || errorCode["default"];
            

        

    

    


        


            


            

        

        


            

                if (code === 401) {
            

        

    

    


        


            


            

        

        


            

                MessageBox.alert(
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SessionExpired"),
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SystemInfo"),
            

        

    

    


        


            


            

        

        


            

                {
            

        

    

    


        


            


            

        

        


            

                confirmButtonText: VFrame.l("Relogin"),
            

        

    

    


        


            


            

        

        


            

                type: "warning"
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                ).then(() => {
            

        

    

    


        


            


            

        

        


            

                store.dispatch("LogOut").then(() => {
            

        

    

    


        


            


            

        

        


            

                location.href = "/index";
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                } else if (code === 500) {
            

        

    

    


        


            


            

        

        


            

                Message({
            

        

    

    


        


            


            

        

        


            

                message: msg,
            

        

    

    


        


            


            

        

        


            

                type: "error"
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                if (res.data.data) {
            

        

    

    


        


            


            

        

        


            

                console.error(res.data.data)
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(new Error(msg));
            

        

    

    


        


            


            

        

        


            

                } else if (code !== 200) {
            

        

    

    


        


            


            

        

        


            

                Notification.error({
            

        

    

    


        


            


            

        

        


            

                title: msg
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return Promise.reject("error");
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                if (res.data.uxApi) {
            

        

    

    


        


            


            

        

        


            

                if (res.data.success) {
            

        

    

    


        


            


            

        

        


            

                return res.data.result;
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                Notification.error({ title: res.data.error });
            

        

    

    


        


            


            

        

        


            

                console.error(res);
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(res.data.error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                } else {
            

        

    

    


        


            


            

        

        


            

                return res.data;
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                error => {
            

        

    

    


        


            


            

        

        


            

                console.log("err" + error);
            

        

    

    


        


            


            

        

        


            

                let { message } = error;
            

        

    

    


        


            


            

        

        


            

                if (message == "Network Error") {
            

        

    

    


        


            


            

        

        


            

                message = VFrame.l("TheBackEndPortConnectionIsAbnormal");
            

        

    

    


        


            


            

        

        


            

                } else if (message.includes("timeout")) {
            

        

    

    


        


            


            

        

        


            

                message = VFrame.l("TheSystemInterfaceRequestTimedOut");
            

        

    

    


        


            


            

        

        


            

                } else if (message.includes("Request failed with status code")) {
            

        

    

    


        


            


            

        

        


            

                message =
            

        

    

    


        


            


            

        

        


            

                VFrame.l("SystemInterface") +
            

        

    

    


        


            


            

        

        


            

                message.substr(message.length - 3) +
            

        

    

    


        


            


            

        

        


            

                VFrame.l("Abnormal");
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                Message({
            

        

    

    


        


            


            

        

        


            

                message: VFrame.l(message),
            

        

    

    


        


            


            

        

        


            

                type: "error",
            

        

    

    


        


            


            

        

        


            

                duration: 5 * 1000
            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return Promise.reject(error);
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                );
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default service;
            

        

    

  ② 新建 api/login.js (配置頁面所需使用的 api)

    


        


            


            

        

        


            

                import request from '@/utils/request'
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 登錄方法
            

        

    

    


        


            


            

        

        


            

                export function login(username, password,shopOrgId,counter, code, uuid) {
            

        

    

    


        


            


            

        

        


            

                const data = {
            

        

    

    


        


            


            

        

        


            

                username,
            

        

    

    


        


            


            

        

        


            

                password,
            

        

    

    


        


            


            

        

        


            

                shopOrgId,
            

        

    

    


        


            


            

        

        


            

                counter,
            

        

    

    


        


            


            

        

        


            

                uuid
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/login',
            

        

    

    


        


            


            

        

        


            

                method: 'post',
            

        

    

    


        


            


            

        

        


            

                data: data
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 獲取用戶詳細信息
            

        

    

    


        


            


            

        

        


            

                export function getInfo() {
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/getInfo',
            

        

    

    


        


            


            

        

        


            

                method: 'get'
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                // 退出方法
            

        

    

    


        


            


            

        

        


            

                export function logout() {
            

        

    

    


        


            


            

        

        


            

                return request({
            

        

    

    


        


            


            

        

        


            

                url: '/logout',
            

        

    

    


        


            


            

        

        


            

                method: 'post'
            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

  ③ 頁面使用引入

    


        


            


            

        

        


            

                import { login } from "@/api/login.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                接下來不用多說，相信大家已經會使用了
            

        

    

二、Vue3 中的使用 

 上面回顧完 Vue2 中使用 axios 我們來一起看看 Vue3 中axios的使用( 簡單Demo，前臺使用Vue3，后臺使用 node.js )，僅供學習！

1. provide/inject 方式

    ① main.js 中 使用 provide 傳入

    


        


            


            

        

        


            

                import {
            

        

    

    


        


            


            

        

        


            

                createApp
            

        

    

    


        


            


            

        

        


            

                } from 'vue'
            

        

    

    


        


            


            

        

        


            

                import App from './App.vue'
            

        

    

    


        


            


            

        

        


            

                import router from './router'
            

        

    

    


        


            


            

        

        


            

                import store from './store'
            

        

    

    


        


            


            

        

        


            

                import "lib-flexible/flexible.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                import axios from "@/util/request.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const app = createApp(App);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.provide('$axios', axios)
            

        

    

    


        


            


            

        

        


            

                app.use(store).use(router).mount('#app');
            

        

    




    

    ② 需要用到的頁面使用 inject 接受

    


        


            


            

        

        


            

                import { ref, reactive, inject, onMounted} from "vue";
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                setup() {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const $axios = inject("$axios");
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await $axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                onMounted(() => {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                })
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                return { getData }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                }
            

        

    




    

這個就是借助 provide 做一個派發，和 Vue2 中的差距使用方法差距不大 

2. getCurrentInstance 組合式API引入

 ① main.js 中掛載

    


        


            


            

        

        


            

                import {
            

        

    

    


        


            


            

        

        


            

                createApp
            

        

    

    


        


            


            

        

        


            

                } from 'vue'
            

        

    

    


        


            


            

        

        


            

                import App from './App.vue'
            

        

    

    


        


            


            

        

        


            

                import router from './router'
            

        

    

    


        


            


            

        

        


            

                import store from './store'
            

        

    

    


        


            


            

        

        


            

                import "lib-flexible/flexible.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                import axios from "@/util/request.js"
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const app = createApp(App);
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /* 掛載全局對象 */
            

        

    

    


        


            


            

        

        


            

                app.config.globalProperties.$axios = axios;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                app.use(store).use(router).mount('#app');
            

        

    




    

/* 掛載全局對象 */
app.config.globalProperties.$axios = axios;

重點就是上面這句

② 需要用的頁面使用 Composition Api -- getCurrentInstance 拿到

    


        


            


            

        

        


            

                <script>
            

        

    

    


        


            


            

        

        


            

                import { reactive, onMounted, getCurrentInstance } from "vue";
            

        

    

    


        


            


            

        

        


            

                export default {
            

        

    

    


        


            


            

        

        


            

                setup() {
            

        

    

    


        


            


            

        

        


            

                let data = reactive([]);
            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 1. 通過getCurrentInstance方法獲取當前實例
            

        

    

    


        


            


            

        

        


            

                 * 再根據當前實例找到全局實例對象appContext，進而拿到全局實例的config.globalProperties。
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            

                const currentInstance = getCurrentInstance();
            

        

    

    


        


            


            

        

        


            

                const { $axios } = currentInstance.appContext.config.globalProperties;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                /**
            

        

    

    


        


            


            

        

        


            

                 * 2. 通過getCurrentInstance方法獲取上下文，這里的proxy就相當于this。
            

        

    

    


        


            


            

        

        


            

                 */
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const { proxy } = currentInstance;
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await $axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                const getData2 = async () => {
            

        

    

    


        


            


            

        

        


            

                data = await proxy.$axios({ url: "/one/data" });
            

        

    

    


        


            


            

        

        


            

                console.log("data2", data);
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                onMounted(() => {
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                getData()
            

        

    

    


        


            


            

        

        


            


            

        

    

    


        


            


            

        

        


            

                });
            

        

    

    


        


            


            

        

        


            

                return { getData };
            

        

    

    


        


            


            

        

        


            

                },
            

        

    

    


        


            


            

        

        


            

                };
            

        

    

    


        


            


            

        

        


            

                </script>
            

        

    




    

下圖可以看到我們確實調用了 2次 API 

其實通過 Composition API 中的 getCurrentInstance 方法也是有兩種方式的

 1. 通過 getCurrentInstance 方法獲取當前實例，再根據當前實例找到全局實例對象appContext，進而拿到全局實例的config.globalProperties。        

    


        


            


                


                

            

            


                

                    const currentInstance = getCurrentInstance();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const { $axios } = currentInstance.appContext.config.globalProperties;
                

            

        

    

 2. 通過getCurrentInstance方法獲取上下文，這里的proxy就相當于this。

    


        


            


                


                

            

            


                

                    const currentInstance = getCurrentInstance();
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const { proxy } = currentInstance;
                

            

        

        


            


                


                

            

            


                


                

            

        

        


            


                


                

            

            


                

                    const getData2 = async () => {
                

            

        

        


            


                


                

            

            


                

                    data = await proxy.$axios({ url: "/one/data" });
                

            

        

        


            


                


                

            

            


                

                    console.log("data2", data);
                

            

        

        


            


                


                

            

            


                

                    };
                

            

        

    

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

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

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

如今HTML5 移動應用或 Web app 中越來越普遍的使用了離線瀏覽技術，所以用 JavaScript 檢測瀏覽器在線/離線狀態非常常見。

無論瀏覽器是否在線，navigator.onLine 屬性都會提供一個布爾值。 如果瀏覽器在線，則設置為 true ，否則設置為 false 。

 if(navigator.onLine) { // true|false // ... }

online 和 offline 事件：

當瀏覽器脫機或上線時，瀏覽器還支持 online 和 offline 事件。

window.addEventListener('online', function(e){console.log('online')});
window.addEventListener('offline', function(e){console.log('offline');});

你可以使用幾種熟悉的方式來注冊事件：

• 在 window，document，或 document.body 上使用 addEventListener
• 將 document 或 document.body 的 ononline 或 onoffline 屬性設置為一個 JavaScript Function 對象。(注意：由于兼容性原因，不能使用 window.ononline 或 window.onoffline。)
• 在 HTML 標記中的 body 標簽上指定 οnοnline=”…” 或 οnοffline=”…” 特性。

注意事項：

• IE8中需要給document.body綁定事件而不是window
• 在線離線的變化指的是物理上的網絡鏈接變化，如果是在控制臺將網絡限制為 offline 則不會觸發相應的事件。

實例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用 JavaScript 檢測瀏覽器在線/離線狀態（JavaScript API?—?navigator.onLine）</title>
    <style type="text/css"> #status {
            position: fixed;
            width: 100%;
            font: bold 1em sans-serif;
            color: #FFF;
            padding: 0.5em;
        }
        #log {
            padding: 2.5em 0.5em 0.5em;
            font: 1em sans-serif;
        }
        .online {
            background: green;
        }
        .offline {
            background: red;
        } </style>
</head>
<body>
<div id="status"></div>
<div id="log"></div>
<button type="button" id="test">檢查狀態</button>
<script> window.addEventListener('load', function () { var testBtn = document.getElementById("test"); var status = document.getElementById("status"); var log = document.getElementById("log");

    function updateOnlineStatus(event) { var condition = navigator.onLine ? "online" : "offline";
        status.className = condition;
        status.innerHTML = condition.toUpperCase();

        log.insertAdjacentHTML("beforeend", "Event: " + (event?event.type:"-") + "; Status: " + condition+ " | ");
    }

    window.addEventListener('online', updateOnlineStatus);
    window.addEventListener('offline', updateOnlineStatus);
    testBtn.addEventListener("click", updateOnlineStatus);
    updateOnlineStatus();
}); </script>
</body>
</html>
    

        
    

總結：

1、navigator.online屬性提供瀏覽器是否在線的布爾值

2、瀏覽器脫機或上線還支持online和offline事件（IE8需要給document.body綁定事件而不是window）

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

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

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

第一步：打開iconfont官網新建項目并添加自己所需要的圖標

這里是iconfont的網址鏈接： iconfon官網

新建項目

• App下原生導航欄的按鈕如果使用字體圖標，注意檢查字體庫的名字（font-family）是否使用了默認的 iconfont，這個名字是保留字，不能作為外部引入的字體庫的名字，需要調整為自定義的名稱，否則無法顯示
• 按鈕上顯示的文字。使用字體圖標時 unicode 字符表示必須 ‘\u’ 開頭，如 “\ue123”（注意不能寫成"\e123"）。

選擇自己需要的圖標加入購物車再添加到項目中

第二步：下載我們所需要的iconfont.css文件并引入到項目中

下載項目并解壓

將iconfont.css文件復制放到我們的項目中去，一般放在static靜態文件目錄下

第三步：修改iconfont.css文件中的內容并全局引用

需要注意的是，當我們在項目中新添加了圖標后，需要重新復制修改iconfont.css中的內容，要不然新添加的圖標是找不到的

在移動端引用的時候要在App.vue文件中進行全局注冊，而不是main.js中

第四步：使用iconfont圖標進行開發

在開發中我們常用的有兩種方式，這兩種方式以及注意事項我在以下內容都有演示：

• 在頁面文件中直接使用標簽
• 使用APPplus原生的自定義導航欄iconfont右側自定義圖標

1.在頁面文件中直接使用標簽

兩種方式代碼的獲取方式如下圖所示：

• 使用uniCode碼
• Font Class 名稱

2.使用APPplus原生的自定義導航欄iconfont右側自定義圖標

使用iconfont圖標的文件內容（忽略css樣式）：

需要配合static目錄下的iconfont.tff文件，這個文件在我們下載到本地的時候那個目錄中，與iconfont.css在一個目錄中：

pages.json文件中配置iconfont圖標：

這三步完成，我們配置自定義原生導航欄的自定義圖標就完成啦！

五：需要注意的點寫在這里：

1. iconfont官網創建項目的時候，不要勾選$彩色$ 那個多選框，否則使用的時候不能更改顏色
2. 如果項目重新添加了新的圖標，需要重新生成在線鏈接，更新iconfont.css文件
3. 自定義原生導航欄使用iconfont圖標時，必須配合iconfont.ttf文件使用

作者：彩云sky
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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

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

什么是共識？

我們所說的共識，是指達成了廣泛的一致。 比如，一群人去吃晚飯， 如果他們對于提議“吃某火鍋”沒有任何異議，那么就可以說共識達成了。 如果存在異議，那么他們就必須通過某種方法決定吃什么。 在極端情況下，這群人就會分開。

什么是共識機制？

區塊鏈要成為一個難以攻破的、公開的、不可篡改數據記錄的去中心化誠實可信系統，需要在盡可能短的時間內做到分布式數據記錄的安全、明確及不可逆，提供一個最堅實且去中心化的系統。共識機制在區塊鏈中成為了重要的因素之一。

區塊鏈分布式記賬的方式使得每個人手上都有一本完整的賬本，全網共有。但是隨著節點的不斷增多，數據越多，賬本也越安全，難以摧毀。除此之外，任意一個或者部分節點的賬本被篡改，都不可能被全網認同，除非你能控制51%的節點，即51%攻擊，但是這耗能巨大，幾乎是不可能的。同時隨著節點不斷增加，誰來記賬，如何選擇合適的人來記賬成為一個問題，而制定一個記賬人的選擇方式以及規定，讓大家來遵守這個規定，達成共識，這就是區塊鏈里面的共識機制。

共識機制是區塊鏈節點就區塊信息達成全網一致共識的機制，說得更直白一些就是要解決所謂去中心化的信任問題，因為每個節點之間默認是不認識且不可靠的，同時每個節點都不能知道其他節點是否宕機或者背叛的情況下，盡可能的保證記錄信息的準確性以及安全性。同時節點越分散，效率越低，網絡對于信息的滿意度越高，越安全。

共識機制的目標

區塊鏈作為一種按時間順序存儲數據的數據結構，可支持不同的共識機制。共識機制是區塊鏈技術的重要組件。區塊鏈共識機制的目標是使所有的誠實節點保存一致的區塊鏈視圖，同時滿足兩個性質：
1）一致性：所有誠實節點保存的區塊鏈的前綴部分完全相同。
2）有效性：由某誠實節點發布的信息終將被其他所有誠實節點記錄在自己的區塊鏈中。

為什么需要共識機制?

在分布式系統中，各個不同的主機通過異步通信方式組成網絡集群。為了保證每個主機達成一致的狀態共識，就需要在主機之間進行狀態復制。異步系統中，可能會出現各樣的問題，例如主機出現故障無法通信，或者性能下降，而網絡也可能發生擁堵延遲，類似的種種故障有可能會發生錯誤信息在系統內傳播。因此需要在默認不可靠的異步網絡中定義容錯協議，以確保各主機達成安全可靠的狀態共識。所以，利用區塊鏈構造基于互聯網的去中心化賬本，需要解決的首要問題是如何實現不同賬本節點上的賬本數據的一致性和正確性。

這就需要借鑒已有的在分布式系統中實現狀態共識的算法，確定網絡中選擇記賬節點的機制，以及如何保障賬本數據在全網中形成正確、一致的共識。

如何評價一個共識機制的優劣:

1. 安全性:能否有效防止二次支付，私自挖礦
2. 擴展性:當系統成員和待確認交易數量增加時，所帶來的系統負載和網絡通信量的變化，通常以網絡吞吐量來衡量
3. 性能效率:每秒可以處理的交易數量
4. 資源消耗:達成共識過程中，所要消耗的CPU、內存等計算資源

共識機制分類

沒有一種共識機制是完美無缺的，各共識機制都有其優缺點，有些共識機制是為解決一些特定的問題而生。

BTC作為區塊鏈的第一個應用，它的共識機制PoW共識機制曾經一枝獨秀，但是隨著區塊鏈技術的不斷發展，各類不同的共識機制開始不斷涌現，各有千秋，各有擁躉。

常見的共識就機制包括：POW（工作量證明機制）、POS（權益證明機制）、POW+POS（混合共識機制）、DPOS（股份授權證明）等等，另外還有Pool驗證池、Ripple瑞波共識協議、PBFT（使用拜占庭容錯算法）等等

PoW( Proof of Work)工作量證明：多勞多得

最早（也是第一個）被應用的共識機制，最先被BTC采用并且獲取了巨大成功，它支撐了BTC系統長達 10 多年無重大故障使其平穩運行。而且 PoW 構想也符合創始人中本聰最初的設想：人人皆可挖礦、按勞分配、公平公正。

PoW 屬于按勞分配，多勞多得，就如同大家在BTC系統中一起進行數學運算，最先運算出的才能獲得獎勵。是一種衡量計算機工作量的共識機制。BTC使用的就是工作量證明機制。

工作量證明主要通過哈希計算找出合理數據的步驟來完成：將區塊頭數據帶入哈希函數計算公式，不斷調整區塊頭數據中的隨機數，直到計算出滿足特定標準的哈希值，工作量證明就會完成。

簡單來說就是多勞多得，誰的算力強，計算得就更快，獲得記賬權的概率就越高，算力競爭的勝者將獲得相應區塊記賬權和BTC獎勵。 因此,礦機芯片的算力越高,挖礦的時間更長,就可以獲得更多的數字貨幣。進行運算獲得獎勵的過程稱之為挖礦，參與挖礦的人們稱之為礦工。這種證明方式決定了其驗證過程需要大量的數據計算，而其他節點卻很容易驗證計算結果是否正確，因此 區塊鏈系統無法被惡意節點所欺騙。但是這種證明方式需要消耗大量能源(電力及計算硬件損耗)，很不 環保。并且在理論上，如果集合了全網51%的算力即可對區塊鏈網絡進行有效攻擊，因此許多基于比特幣 代碼產生的、市值較小的山寨幣很容易遭受攻擊。

代表token：BTC、BCH、LTC等。

優點

• 公平公正：去中心化程度高，人人都可以參與獲得記賬權；
• 安全系數高：全網算力越高，其安全程度也越高，如破壞該系統需要投入巨大成本；
• 算法簡單，容易實現

缺點

• 資源浪費：因每一筆交易都需要通過多數礦工的確認，在這些礦工進行運算的過程中消耗大量的電力資源等。
• 效率低下：區塊的確認時間難以縮短；容易產生分叉，需要等待多個確認。
• 算力集中：根據往年數據顯示，在資本大量進入的情況下，過去一年礦池算力份額排名前五位的礦池占據了BTC總算力份額的 65%，馬太效應逐漸顯現，而算力過度集中還存在著 51% 攻擊的風險。
• 永遠沒有最終性，需要檢查點機制來彌補最終性。

PoS(Proof of Stake)股權證明算法：持有越多，獲得越多

因 PoW 存在的問題，PoS 在主流算法一路暢通的“殺了出來”，成為了最具有挑戰者。近幾年，基于 PoS共識打造的區塊鏈項目越來越多，如目前市值保持第二的ETH也加入了 PoS。“Staking經濟”在 2019年成為了熱門詞語，同時也被交易所和錢包大力追捧。

POS機制采用類似股權證明與投票的機制，選出記帳人，由它來創建區塊。持有股權愈多則有較大的特權，且需負擔更多的責任來產生區塊，同時也獲得更多收益的權力。 POS 機制中一般用幣齡來計算記賬權，每個幣持有一天算一個幣齡,比如 持有 100 個幣,總共持有了 30 天,那么此時的幣齡就為 3000。在 POS機制下,如果記賬人發現一個 POS 區塊, 他的幣齡就會被清空為 0,每被清空 365 幣齡,將會從區塊中獲得 0.05 個幣的利息(可理解為年利率 5%)。

PoS權益證明同樣需要通過計算找出合理的哈希值來完成。 但不同的是權益證明機制通過節點持有加密貨幣的時間和數量來判斷節點的權益大小。根據權益大小不同，用戶之間看到的計算目標值也不同。權益大的節點，獲得目標值更加簡單，更容易獲得下一個區塊的記賬權。 這種方式不需要每個節點都進行大量的運算，節省了電力能源。同時全網51%的算力攻擊在權益證明機制下是無效的，因為發起這種攻擊反而會損害自身的利益。但是可能會出現幣種持有數量大的節點權力過 大，對區塊鏈記賬享有絕對支配權的情況，容易引發信任問題。

在 PoS 機制中，是不需要消耗電力來進行運算，而是通過抵押 token 來獲得打包區塊的權利。當一筆交易發生時，系統會對打包區塊和驗證區塊的節點來進行獎勵，獎勵則是增發或者解鎖的 token。

代表token：ADA、ONT、ATOM等。

優點

• 不浪費資源、效率高：因其不需要拼算力挖礦，同時縮短了共識達成的時間，轉賬效率提高了；
• 弱化了中心礦池規模經濟的需求：算力集中壟斷的情形也得到了緩解，個體競爭力差別相對減小；

缺點

• 被動形成中心化：因去中心化程度，容易出現強者恒強的情況，會導致富者越富，資源越來越集中的情況。
• 安全隱患：PoS機制實現較為復雜，容易產生安全漏洞。
• 無權益問題（Nothing at Stake）：用戶在PoS中可以同時在兩個分叉上面下注；無論哪一個分叉后面被公認為主鏈，該用戶都可以獲得獎勵而沒有機會成本的損失。這樣也在事實上會干擾共識的形成。
• 還是需要挖礦，本質上沒有解決商業應用的痛點。

DPOS(Delegated Proof-of-Stake)股份授權證明

DPoS 機制是在 PoS 的基礎上進行了改良，舉例來說就是大家公認的投出選票，選舉出一定數量的代表，讓這些代表進行驗證和記賬等，可以理解為PoS 的升級版。與PoS的主要區別在于持幣者投出一定數量的節點，代理他們進行驗證和記賬。其合規監管、性能、資源消耗和容錯性與PoS相似。

DPoS的工作原理為：每個股東按其持股比例擁有影響力，51%股東投票的結果將是不可逆且有約束力的。其挑戰是通過及時而高效的方法達到51%批準。為達到這個目標，每個股東可以將其投票權授予一名代表。獲票數最多的前100位代表按既定時間表輪流產生區塊。每名代表分配到一個時間段來生產區塊。所有的代表將收到等同于一個平均水平的區塊所含交易費的10%作為報酬。如果一個平均水平的區塊含有100股作為交易費，一名代表將獲得1股作為報酬。DPoS的投票模式可以每30秒產生一個新區塊。

簡單點說：DPoS 委托權益證明通過由持幣人投票選舉出一定數量的代表來達成共識。 每個持幣人的投票所占的比重 與他持有的幣種數量有關，持有的越多，所占的比重越大。被選出的代表可擁有記賬權，輪流進行記賬;未能很好履行職責的代表還會被投票除名。這一任期結束后，新的代表會再次通過投票產生。

代表token：EOS、TRX等。

優點

• 比 PoS 機制擁有更高的效率和性能：相比于 PoS 機制，DPoS 大幅縮小了參與驗證和記賬的節點數量，可以達到秒級的共識驗證。

缺點

• 整個共識機制還是依賴于token，很多商業應用是不需要代幣存在的。
• 去中心化程度低：相比較于只能說是弱中心化；
• 安全問題嚴重：類 PoS 機制的通病，相信大家都看到過報道，如被黑客攻擊等等。

PoC(Proof of Capacity)容量證明機制

PoC 機制早在 2014年存在了，但只是一直處于“落魄階段”，簡單說就是沒火，無人問津。2019年隨著POC一大公鏈Yottachain的崛起，越來越多的礦工加入了POC硬盤挖礦這個行業大軍了。它是POW共識機制的一種，以硬盤作為共識參與者，它的特點是犧牲性能獲得安全可信，相對POW減少了非常多的安全和信任成本，更低成本解決了全局信任和安全，幾乎不耗電力資源，并且可共享和復用的信任生態。

PoC 機制是通過普通硬盤挖礦的共識機制。簡單來說就是利用計算機硬盤中的閑置空間來進行存儲進行挖礦獲取收益，硬盤空間越大，存儲的內容越多獲得的收益就越大。 它更多地關注內存而不是處理能力。 從某種意義上說，這是對PoW的改進，即使在挖掘開始之前，容量證明也要求節點將預先計算的哈希值存儲在其硬盤驅動器和其他內存單元上，這個過程稱為繪圖，繪圖使容量證明成為比工作證明更快的機制。這種方法的另一個優點是它可以節省大量能源，這與工作量證明機制不同。更不用說，硬盤存儲更多哈希值的任何技術改進也將為不在區塊鏈中的人改進技術，這與許多制造商制造的專用芯片不同，后者除了采礦之外什么都不做。

IPFS 也類似，但不同的是 IPFS 衍生的區塊鏈項目（激勵層Filecoin）是一種去中心化存儲服務的 Marketplace（撮合交易的市場），它的重點在于如何在系統參與者互不信任的條件下，實現存儲和檢索工作的量化；PoC 是一種底層共識機制，與 PoW、PoS一樣都是去中心化網絡達成一致性狀態的算法。由此來看，兩者是完全不同的概念，唯一的共同點就是都可以使用硬盤向網絡貢獻價值來換取收益。

代表token：BTT、BHD等。

優點

• 挖礦門檻較低：只要有硬盤就可以進行挖礦，大大降低了挖礦門檻；PoC的礦機耗電量低、噪音小、成本低，適合家庭挖礦和人人挖礦。
• 去中心化程度較高：抵押機制提高了算力集中化的門檻，即便有超級礦工出現，普通散戶也可以繼續獲得收益。
• 能源消耗低，節能：相比于PoW，POC挖礦將算力替換成硬盤空間，在很大程度的杜絕了POW挖礦造成的資源浪費以及對環境不友好等問題，同時降低了挖礦成本，讓礦工從挖礦中賺取更多的利潤。
• 反壟斷：用硬盤容量替代了算力，天然具有抗ASIC的屬性

缺點

• 未來發展的局限性可能較大
• 可能會有政策性風險
• PoC并沒有實現真正的平等

DAG(Directed acyclic graph)有向無環圖：無區塊鏈概念

有向無環圖是計算機科學中眾所周知的數據結構。事實上，區塊鏈也是DAG的一個例子，因為它有一個明確的方向，沒有任何循環，并且是一個圖。1OTA使用的Tangle也是DAG共識機制的一種形式。在這種機制中，每個塊必須有兩個父塊。所以，為了通過DAG共識機制完成一筆交易，用戶需要驗證自己之前的兩筆交易。這種機制的最大優勢是它可以減少延遲和交易費用。然而，這種共識模型對提高可擴展性幾乎沒有任何作用，而且極易受到攻擊，因為任何攻擊只需要34%的哈希算力就可以破壞系統。

DAG最初出現就是為了解決區塊鏈的效率問題。其通過改變區塊的鏈式存儲結構，通過DAG的拓撲結構來存儲區塊。在區塊打包時間不變的情況下，網絡中可以并行的打包N個區塊，網絡中的交易就可以容納N倍。

之后DAG發展成為脫離區塊鏈，提出了blockless無區塊的概念。新交易發起時，只需要選擇網絡中已經存在的并且比較新的交易作為鏈接確認，這一做法解決了網絡寬度問題，大大加快了交易速度。

代表token：IOTA、byteball等。
前段時間國內首個基于DAG的物聯網區塊鏈項目ITC萬物鏈也取得了不小的漲幅。

優點

• 交易速度快;
• 無需挖礦;
• 極低的手續費

缺點

• 網絡規模不大，導致極易成為中心化;
• 安全性低于PoW機制

PBFT(Practical Byzantine Fault Tolerance)實用拜占庭容錯：分布式一致性算法

實用拜占庭容錯在保證活性和安全性(liveness & safety)的前提下提供了(n-1)/3的容錯性。
在分布式計算上，不同的計算機透過訊息交換，嘗試達成共識;但有時候，系統上協調計算機(Coordinator / Commander)或成員計算機 (Member /Lieutanent)可能因系統錯誤并交換錯的訊息，導致影響最終的系統一致性。拜占庭將軍問題就根據錯誤計算機的數量，尋找可能的解決辦法，這無法找到一個絕對的答案，但只可以用來驗證一個機制的有效程度。而拜占庭問題的可能解決方法為：在 N ≥ 3F + 1 的情況下一致性是可能解決。其中，N為計算機總數，F為有問題計算機總數。信息在計算機間互相交換后，各計算機列出所有得到的信息，以大多數的結果作為解決辦法。

優點

• 系統運轉可以脫離幣的存在，pbft算法共識各節點由業務的參與方或者監管方組成，安全性與穩定性由業務相關方保證。
• 共識的時延大約在2~5秒鐘，基本達到商用實時處理的要求。
• 共識效率高，可滿足高頻交易量的需求。

缺點

• 當有1/3或以上記賬人停止工作后，系統將無法提供服務；
• 當有1/3或以上記賬人聯合作惡，且其它所有的記賬人被恰好分割為兩個網絡孤島時，惡意記賬人可以使系統出現分叉，但是會留下密碼學證據

實用拜占庭容錯主要應用于央行的數字貨幣以及布萌區塊鏈。

dBFT(delegated BFT)授權拜占庭容錯算法

小蟻采用的dBFT機制，是由權益來選出記賬人，然后記賬人之間通過拜占庭容錯算法來達成共識。dBFT和PBFT的關系類似于PoS和DPoS的關系。

dBFT在PBFT基礎上進行了以下改進：

1. 將C/S架構的請求響應模式，改進為適合P2P網絡的對等節點模式；
2. 將靜態的共識參與節點改進為可動態進入、退出的動態共識參與節點；
3. 為共識參與節點的產生設計了一套基于持有權益比例的投票機制，通過投票決定共識參與節點（記賬節點）；
4. 在區塊鏈中引入數字證書，解決了投票中對記賬節點真實身份的認證問題。

優點

• 專業化的記賬人；
• 可以容忍任何類型的錯誤；
• 記賬由多人協同完成，每一個區塊都有最終性，不會分叉；
• 算法的可靠性有嚴格的數學證明；

缺點

• 當有1/3或以上記賬人停止工作后，系統將無法提供服務；
• 當有1/3或以上記賬人聯合作惡，且其它所有的記賬人被恰好分割為兩個網絡孤島時，惡意記賬人可以使系統出現分叉，但是會留下密碼學證據；

以上總結來說，dBFT機制最核心的一點，就是最大限度地確保系統的最終性，使區塊鏈能夠適用于真正的金融應用場景。

Pool驗證池——私有鏈專用

基于傳統的分布式一致性技術，加上數據驗證機制;之前曾是行業鏈大范圍在使用的共識機制，但是隨著私有鏈項目的逐漸減少漸漸開始勢微。

優點

不需要token也可以工作，在成熟的分布式一致性算法（Pasox、Raft）基礎上，實現秒級共識驗證。

缺點

去中心化程度不如bictoin；更適合多方參與的多中心商業模式。

參考

拜占庭將軍問題

拜占庭將軍問題是一個協議問題，拜占庭帝國軍隊的將軍們必須全體一致的決定是否攻擊某一支敵軍。問題是這些將軍在地理上是分隔開來的，并且將軍中存在叛徒。叛徒可以任意行動以達到以下目標：欺騙某些將軍采取進攻行動；促成一個不是所有將軍都同意的決定，如當將軍們不希望進攻時促成進攻行動；或者迷惑某些將軍，使他們無法做出決定。如果叛徒達到了這些目的之一，則任何攻擊行動的結果都是注定要失敗的，只有完全達成一致的努力才能獲得勝利。

這一問題是一種對現實世界的模型化，尤指網絡當中由于軟硬件錯誤、網絡阻塞及惡意攻擊導致的各種未知行為。
顯然，在此處默認了將軍們在達成一致的過程中正確的傳遞出了自己的決定，也就是說叛徒只存在于將軍當中，不存在于傳令兵當中。故要讓拜占庭將軍問題有解，必須要具備一個重要前提，即信道必須是安全可靠的。關于信道可靠問題，會引出兩軍問題。兩軍問題的結論是，在一個不可靠的通信鏈路上試圖通過通信以達成一致是基本不可能或者十分困難的。

拜占庭容錯

拜占庭將軍問題提出后，有很多的算法被提出用于解決這個問題。這類算法統稱拜占庭容錯算法（BFT: Byzantine Fault Tolerance）。簡略來說，拜占庭容錯（BFT）不是某一個具體算法，而是能夠抵抗拜占庭將軍問題導致的一系列失利的系統特點。 這意味著即使某些節點出現缺點或惡意行為，拜占庭容錯系統也能夠繼續運轉。本質上來說，拜占庭容錯方案就是少數服從多數。

拜占庭將軍問題的原始論文給出了一些解決思路，但其更注重理論上的可行性。算法效率不高，算法復雜度為指數級，且文中明確指出時間成本及消息傳遞數量很大。因此不具備太大的實用價值。

拜占庭容錯系統需要達成如下兩個指標：
● 安全性：任何已經完成的請求都不會被更改，它可以在以后請求看到。在區塊鏈系統中，可以理解為，已經生成的賬本不可篡改，并且可以被節點隨時查看。
● 活性：可以接受并且執行非拜占庭客戶端的請求，不會被任何因素影響而導致非拜占庭客戶端的請求不能執行。在區塊鏈系統中，可以理解為，系統需要持續生成區塊，為用戶記賬，這主要靠挖礦的激勵機制來保證。

拜占庭系統目前普遍采用的假設條件包括:
● 拜占庭節點的行為可以是任意的，拜占庭節點之間可以共謀；
● 節點之間的錯誤是不相關的；
● 節點之間通過異步網絡連接，網絡中的消息可能丟失、亂序、延時到達；
● 服務器之間傳遞的信息,第三方可以知曉 ,但是不能竄改、偽造信息的內容和驗證信息的完整性；

科普 | 什么是共識機制？

詳解區塊鏈中常見的八大共識機制！

區塊鏈的幾大共識機制及優缺點

作者：彩云sky
來源：人人都是產品經理
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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

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

你有想過你的孩子一邊喝六個核桃，一邊聽樊登讀書嗎？如果沒有，這是因為你不知道樊登讀書的銷售場景有多豐富，他們和六個核桃就設計了一個聯名套餐，售價429元。
你有想過你的辦公場地可以加入一個讀書角，讓員工每天讀書學習嗎？如果沒有，這是因為你不知道樊登讀書有一個服務叫數字閱讀空間，它可以讓你的員工一鍵掃碼即可閱讀學習。
你有想過樊登讀書2023年會解讀什么書嗎？如果你想知道，你可以購買他的「未來書單」，他都為你設計好了，不僅有52本實體書，還會給你一份未來書單專屬認證的學員徽章。
如果不去拆解樊登讀書，你根本不知道這個產品可以把讀書這個原本枯燥乏味的學習形式變得這么有創意，絕對超出你的想象。
樊登，作為前央視的主持人，在2013年創辦了樊登讀書會以后，發展不到10年，APP會員數已經突破了6000萬，年營收超過10億，全國線下樊登讀書運營中心超過2000家，成為了知識付費行業的一個獨角獸。這樣一個讀書產品，到底有什么魅力，能讓用戶對它如此著迷，樊登又是如何找到他的書中黃金屋，本期設計大偵探，為大家帶來樊登讀書的產品拆解，讓我們一看究竟。

一、導讀

1. 內容結構
全文11158字，分為六個部分，分別是導讀、產品畫像、讀書服務、內容服務、會員服務和設計總結，你可以通過下面的思維導圖對本文內容結構有全面的了解。

2. 適合人群
第一類，UI/交互設計師，可以跳出執行層，去思考樊登讀書的產品設計策略，提升產品分析能力；
第二類，產品經理/運營，通過全面的產品設計拆解、策略推導，獲取產品設計參考；
第三類，知識付費行業從業者，通過對樊登讀書的全面拆解，獲取競品設計參考。

3. 分析模型
我們主要運用三種模型對產品的功能、設計進行拆解，由于沒有權威的官方數據，所以我們更多以推導的形式去思考樊登讀書為什么這樣設計。
第一個，增長模型。由戴夫·麥克盧爾提出，包含用戶獲取、用戶激活、用戶留存、獲取收入、用戶推薦，分別對應用戶生命周期中的5個重要環節，主要用于分析產品的功能價值。
第二個，上癮模型。由尼爾·法埃爾提出，通過對上千種習慣類產品的調研，總結出一款產品如果要讓用戶習慣、上癮，可以按照觸發、行動、多變的酬賞和投入四個步驟去設計，主要用于分析產品的功能價值和推導產品的策略設計。
第三個，社會心理學。主要結合西奧迪尼的社會心理學《影響力》六大說服力原則——互惠、承諾和一致、社會認同、喜好、權威和稀缺，去推導產品設計的用戶心理設計，主要用于推導產品的策略設計。

二、產品畫像
在本節，我們將會通過樊登讀書官網、百度百科、易觀千帆和七麥數據等資料網站，讓大家對樊登讀書有一個初步的了解。

1. 產品介紹
樊登讀書成立于2013年，是前央視主持人樊登創辦的知識付費品牌。樊登讀書APP是一款為用戶提供書籍精華解讀（非電子書）、精品課程教授、社群學習等知識服務的軟件，致力于為3億國人養成閱讀習慣。根據樊登讀書2022年三季度的社會責任報告顯示，樊登讀書目前會員數突破6000萬，音視頻累計播放超45億人次，用戶收聽總時長超8.1億小時，是知識付費行業的頭部品牌。

2. 商業模式
樊登讀書以讀書點亮生活為價值主張，旨在幫助3億國人養成閱讀習慣，目標用戶群體有C端大眾消費者以及B端企業客戶。樊登讀書作為一個知識付費平臺，吸引了眾多知識創作者加入，主要為用戶提供內容生產、出版合作、線上電商和線下書店四塊業務，其次通過線下加盟代理的模式，目前在全國已經建立超過2000家城市運營中心。樊登讀書的盈利模式非常豐富，除了最基礎的會員VIP服務，還有課程、訓練營、聽書和電商等增值服務，年營收在2021年就超過10個億。

3. 用戶畫像
樊登讀書的用戶群體男女比例均衡，女性占比54.67%，男性占比45.33%；年齡以24-30歲居多，占比40.21%，其次為31-35歲，占比26.36%；樊登讀書的用戶消費能力較強，中等以上消費者占比71.09%；用戶以三線城市最多占比23.20%，一線城市僅占8.93%，其中廣東省最多，山東和河南省位居前三。

4. 信息結構
樊登讀書的菜單欄主要分為「首頁」、「樊登講書」、「免費視頻」和「我的」四個一級欄目?！甘醉摗挂訲AB切換的形式向用戶展示不同的子欄目內容，非常夯實；「樊登講書」是范登讀書的王牌欄目，可以收聽樊登每年講解的52本書；「免費視頻」是一個短視頻欄目，主要截取樊登講書視頻的精華內容，通過沉浸式的體驗，提升用戶使用產品時長；「我的」就是用戶中心，主要儲存用戶的讀書數據，可以查看歷史讀書記錄、訂單和購買歷史等內容。

5. 重要迭代記錄
樊登讀書的首個APP版本發布于2015年2月16日，截止到10月28日，APP版本已經更新至V5.56.0版本，平均1年更新次數為33次。

版本迭代重要記錄
2015年12月，發布V3.0.1版本，Slogan為「成功人士有聲閱讀神器」；
2017年8月，發布V3.9.0版本，Slogan升級為「幫助3億國人養成閱讀習慣的學習型社區」；
2018年4月，發布V3.9.16版本，品牌形象全新升級，加入知識課程等內容；
2018年7月，發布V3.9.22版本，樊登讀書會更名為樊登讀書；
2018年10月，發布V3.9.26版本，Slogan升級為「讀書點亮生活」；
2020年5月，非凡精讀館公測上線，為用戶帶來更多專家解讀書籍；
2021年7月，發布V5.18.0版本，上線李蕾慢讀欄目；

6. 產品生命周期
根據易觀千帆數據顯示，截止到2022年7月，樊登讀書月活躍用戶人數115.94萬，注冊用戶超過6000萬，年營收早在2021年就超過10億。明年即將年滿十歲的樊登讀書，目前處于產品生命周期的成熟期，當下聚焦于商業變現和用戶增長。

7. 競爭圖譜
和聽書類APP相比，樊登讀書月活躍用戶人數排名第19，喜馬拉雅1.3億月活躍用戶人數全網第一；和讀書類APP相比，樊登讀書排名第四，起點讀書月活躍用戶人數1762.70萬全網第一。

三、讀書服務
「讀書服務」是樊登讀書最核心的服務，是實現商業變現最重要的方式。從講書人去拆分，樊登讀書設計了樊登講書（火車頭）、李蕾講經典（前央視主持人，自帶流量和曝光度）和非凡精讀（匯聚各行業精英大咖）三個版塊。從知識學習的場景拆分，樊登讀書設計了「課程」和「書城」兩大版塊，如今的樊登讀書，已經成為一個非常豐富的知識付費學習平臺，不僅有各種知識付費、職業培訓課程，還有訓練營、系統課，以及有聲書和實體書銷售等業務，內容非常夯實。從用戶群體去拆分，樊登讀書還設計了企業共讀營、線下翻轉課堂和數字閱讀空間這些面向企業的讀書服務，把讀書賦能給企業，為他們提供提供綜合性的讀書解決方案，以建立學習型組織為目標。

1. 個人IP
樊登讀書以「樊登」這個超級IP作為火車頭，每年講解52本書為底層服務內容，現在加入了「非凡精讀」和「李蕾講經典」兩個內容欄目。這兩個欄目，不僅可以豐富平臺的內容，還可以彌補樊登一年只講52本書的數量缺陷，從而滿足更多用戶的需求。

1.1 樊登講書
「樊登講書」是樊登讀書的王牌欄目，是吸引用戶收聽和付費的主要內容。樊登以每年為用戶講解52本書和提煉45分鐘書籍精華為賣點，幫助那些沒有時間讀書、讀不懂書的人培養閱讀習慣。從內容分類看，「樊登講書」主要分為心靈、個人成長、親子家庭、人文歷史、商業財經、社科新知、健康生活和作者光臨9個欄目。其中親子家庭是最熱門的內容之一，育兒的書籍是樊登最吸引用戶的內容，樊登還擁有育兒專家的頭銜。

1.1.1 講書詳情頁
①「講書」有三種傳播形式，默認為音頻，其次還有視頻和文稿，非常豐富，用戶可以在頭部自由切換。每一本書就像一個產品、一個主題，除了收聽講書內容，還支持下載音頻和思維導圖，其次還加入了增值服務，比如實體書購買和訓練營（根據這本書的主題設計）。

②講書詳情介紹分為解讀時間軸、評論話題、薦語、你將獲得、作者簡介和精彩選段六個部分。這里的內容結構設計得非常好，「解讀時間軸」是把講書的內容拆分，讓用戶快速獲取講書的結構；「評論話題」是為了增加用戶互動，以評論領禮品的形式提升用戶活躍度；「薦語」和「你將獲得」，是為了吸引用戶閱讀，讓用戶知道這本書對自己有什么幫助；「精彩選段」把這本書的一些名言警句以圖片海報的形式設計出來，吸引用戶分享傳播。

③「文稿」的設計體驗特別好，和其他音頻產品相比，樊登讀書的文稿像是參考了微信讀書這樣的閱讀產品。用戶可以劃線，可以發表想法，劃線最終會生成筆記儲存在用戶中心，還可以把劃線的內容生成海報分享，為平臺拉新引流。

1.2 李蕾講經典
李蕾是前央視主持人，2021年加入樊登讀書。圍繞「李蕾」這個個人IP，樊登讀書設計了「李蕾講經典」欄目，每年為用戶解讀52部經典名著，包含世界名著、國風經典、名人傳記和中國現代經典。在商業變現的設計形式方面，樊登讀書把「李蕾講經典」作為一個獨立的欄目，用戶需要單獨購買VIP會員才能收聽。

1.3 非凡精讀
「非凡精讀」是樊登攜手80+各領域大咖為用戶深度解讀好書，樊登讀書作為一個讀書平臺，鏈接了其他優質領域的大咖，為用戶提供更豐富的內容。
非凡精讀的欄目首頁分為金剛區（鎮館之寶、聽書指南、好書共讀和全部書籍）、本周新書、最近在讀、為你推薦、今日限免、精選書單、非凡主講人和口碑好書八個部分，書籍類型包含個人成長、家庭經營、心靈療愈、人文經典等內容，其次「非凡精讀」的內容也需要用戶單獨購買VIP會員才能收聽。

2. 課程
樊登讀書充分利用知識付費的消費場景，吸引了眾多知識付費KOL加入平臺，為用戶提供豐富的知識付費課程。根據官方數據統計，目前平臺已經有198門課程，包含個人成長、親子家庭、人文歷史、商業財經、社科新知、聲音劇、有聲書、新父母和樊登專區9個欄目。
課程欄目首頁的設計，主要包含金剛區、熱銷課程、課程合集、限免節目、最近在學和專屬為你推薦六個內容。在銷售方式上，課程是以單個付費的形式銷售，定價在100-300元之間。

2.1 樊登課程
樊登不僅講書，還設計了很多的課程，比如樊登講《論語》、可復制的領導力這些以代表作設計出來的課程。樊登課程的欄目首頁包含了精選好課、限免試聽、熱銷周邊和學習園地四個內容。

2.2 技能培訓
樊登讀書還吸引了眾多職場知識創作者的加入，為用戶提供職場技能培訓課程，比如7天求職實戰訓練營、個人IP打造課、0基礎抖音商業化實操課等，課程形式有錄播課也有系統課，定價也不便宜。

2.3 訓練營
相比課程和講書，訓練營是一個動態的系統課程服務，是解決用戶學習的最后一公里。當用戶聽完書以后，事實上只是勾起了用戶的學習興趣，如果要想把知識吃透，還需要深入學習?！赣柧殸I」就是為了解決這樣的痛點而設計的，不僅可以幫助用戶解決學以致用的痛點還增加了新的變現形式。其次訓練營的內容形式非常豐富，不僅包含常見的打卡返現活動，還有系統班、私教課，變現能力非常強。

2.3.1 打卡返現
「打卡返現」是訓練營比較常見的一個活動形式，活動規則是用戶需要繳納保證金才能參與學習打卡，如果全勤，可以退回保證金，反之保證金將會被扣除。這個服務，對于用戶的活躍度提升有很大的幫助，其次以全勤退還保證金為噱頭，但事實上能拿回保證金的用戶很少。

2.3.2 小課程
「小課程」是指培訓時間在3-7天左右的訓練營，比如7天《焦慮自救手冊》行動營（199元）、3天《分享閱讀》線上啟動營（9.9元）。這類小課程是樊登讀書訓練營的核心內容，屬于短頻快的業務，商業變現能力極強。

2.3.3 系統課
「系統課」是指培訓時間在15天以上的訓練營，比如21天《爆款視頻號》訓練營（售價1980元）、家庭教育實戰講師認證營（售價8980元）這樣的課程。系統課是屬于高利潤產品，定價均在1500元以上。

2.4 新父母
「新父母」是樊登讀書聯合「新教育研究院」共同發起的欄目，用戶人群是30-45歲這個用戶群體，旨在通過正確的教育理念幫助傳統的父母找到全新的教育方法，和孩子建立和諧、健康的親子關系。整個欄目首頁主要分為入門必修、父母進階和副業變現三個內容。「入門必修」為父母提供了新父母五門必修大課，售價590元；「父母進階」是實戰特訓營，通過直播授課、小班實操教學，幫助父母快速掌握育兒難題，售價898元；「副業變現」是系統課，通過31天的系統學習，幫助有意向在親子育兒領域發展副業的父母通過專業的培訓成長為一名實戰講師，售價8980元。

2.5 知識副業
樊登讀書提供7種形式的知識副業，分別是樊登小店、知識主播、知識顧問、翻轉師、社群運營官、溝通力講師和兼職客服。其中翻轉師、社群運營官和溝通力講師這三個需要付費報名學習的崗位，目標人群以自由講師、教師、企業培訓者為主，為樊登讀書源源不斷補充講師資源。

2.5.1 樊登小店
樊登小店就是樊登讀書入門級的分銷商，用戶可以零成本申請加入。每個用戶都可以擁有自己的一個小書店，可以通過建立自己的社群或朋友圈進行書籍分享，用戶下單后，出版社直接發貨，店主賺取銷售提成。

2.5.2 知識主播
知識主播就是負責樊登讀書的電商直播，通過直播帶貨，實現副業收入。知識主播可以免費報名，分為兼職主播和全職主播。

2.5.3 知識顧問
知識顧問就是為用戶解決知識困惑的咨詢師，本質是樊登讀書的銷售。用戶可免費報名，樊登讀書提供系統的專業培訓。

2.5.4 翻轉師
翻轉師是樊登讀書·雨知教育的核心服務，課程體系分為六大板塊，目標人群是自由講師、教師、企業培訓者等，最終幫助他們成為樊登讀書的授課講師、知識主播和知識顧問。翻轉師是付費的系統培訓，定價5686元。

2.5.5 社群運營官
社群運營官屬于一個付費的系統培訓，定價3980元。這個服務主要針對在校學生、全職寶媽、自由職業和朝九晚五的上班族，通過21天的系統培訓學習，掌握社群運營的知識和技巧，其次也有機會成為樊登讀書簽約的樊登讀書運營官。

2.5.6 溝通力講師
溝通力講師也是付費服務，價格沒有公開。溝通力講師主要是通過學習樊登的《可復制的溝通力》課程，最終有機會成為樊登讀書溝通力團隊的簽約講師機會。

2.5.7 兼職客服
兼職客服就是主要幫助樊登讀書處理客服的工作，只要用戶有時間，都可以報名申請參與。

3. 書城

3.1 有聲書
「有聲書」包含了樊登專區、情感家庭、心靈療愈、小說文藝等內容，為用戶提供更多的聽書選擇，不過相比喜馬拉雅、微信聽書這樣以開通VIP會員付費收聽的模式，樊登的有聲書直接以單本書籍售價，而且單價不低，均價在19-39元之間。

3.2 心選商城
「心選商城」是樊登讀書官方為用戶提供的一個在線購買實體書和周邊產品的平臺，從書籍數量看，內容包含了兒童科普、兒童繪本、職場進階、心靈治愈、人文社科等類型，非常夯實；從商品類型看，除了書籍，心選商城還支持各種周邊、聯名商品的購買。和傳統的書城相比，心選商城的內容設計非常創新。

3.2.1 三本好書
「三本好書」的本質是一個組合套裝，但是樊登讀書用書單的形式來設計，不僅增加了銷售量，還為用戶設計了充足的購買理由。在「三本好書」的介紹里，文案是這樣的描述——多讀一本書，解決更多生活中的問題；多讀一本書，收獲更多的歸屬感、幸福感；多讀一本書，更深度拓展和提升思維認知，可謂情懷滿滿，讓用戶產生了強烈的購買欲望。

3.2.2 樊登未來書單
「樊登未來書單」定價2199元，屬于高利潤產品，它主要有三個賣點，第一，每月會把當月樊登即將解讀的4本書籍提前郵寄給用戶，讓用戶可以搶先讀；第二，贈送樊登專屬證書、52本書的思維導圖實體卡片、1本專屬定制未來書單禮記和微信專屬社群，不僅擁有精美的實物禮品，還能享受專屬社群，突出尊貴感；第三，以選書、讀書、用書和“寫”書四個環節的服務幫助用戶每周讀透一本書、實現跨越式增長為賣點，為「未來書單」增加了「學習」屬性，從而讓用戶感覺自己買的不是書單，而是成長。

4. 企業服務

4.1 企業讀書
「企業讀書」面對的是企業用戶，以讀書學習為切入點，幫助企業員工建立讀書習慣，協助企業打造學習型組織?！钙髽I讀書」是一個綜合性的讀書解決方案，由內容、工具和服務構成。在內容端，為企業提供樊登讀書超過800+優質內容，還可以為企業量身定制書單；在工具端，為企業員工提供一個滿足多場景學習的高效工具，企業還可以通過PC管理端查看企業員工的讀書數據，實現數字化管理；在服務端，為企業提供專家團隊1V1支持服務，賦能企業組織線下活動，最終幫助企業員工建立閱讀習慣。

4.1.1 企業共讀營
「企業共讀營」是通過優質書單和共讀工具，讓員工在21天社群的督促和專家指導下，一起共讀，通過聽、學、教、練和評五個步驟幫助員工學習讀書，打造全流程的閉環訓練場景，旨在幫助員工養成讀書的習慣，為組織營造讀書氛圍。

4.1.2 線下翻轉課堂
「線下翻轉課堂」是由專業引導師帶領學員共同解構一本書，幫助學員理清邏輯結構、重點知識，深化實際場景應用，在交流互動中營造良好的讀書氛圍。「線下翻轉課堂」就像一次企業員工拓展活動，以讀書溝通為主題，充分調動員工的學習熱情，增強團隊學習氛圍，豐富企業員工生活。

4.1.3 數字閱讀空間
「數字閱讀空間」就是在企業辦公場地可利用的空間里面，通過硬件設備作為載體，將圖片、文字、音視頻等內容置入，讓員工掃碼就可以收聽，同時通過這樣的設計，為企業打造閱讀的氛圍。

4.2 開放平臺
樊登讀書已經把讀書做成了標準化的產品，支持接入網頁、小程序、APP、車載等終端，打造了一個通過接入樊登讀書API就可以實現合作的第三方開放平臺。目前樊登讀書有針對教育、銀行、出行等行業設計了解決方案，創意驚人。

5. 總結
從讀書服務我們可以看出，樊登讀書是一個非常有創意和變現能力超強的產品。不管是面對C端大眾消費者，還是面對B端企業用戶，他都可以把「讀書」賦能到到不同的場景和主題中。比如「新父母」這樣的欄目，就是抓住了眾多傳統的父母對孩子教育沒有正確方式的痛點，讓用戶看著就難受、看著就羞愧、看著就恨不得立馬開通會員學習。
其次樊登的商業變現形式設計，非常有層次感。以「新父母」這個服務為例，首先為你推薦基礎課程，如果用戶的自律性不夠或者無法理解，它又設計了訓練營，二次變現。更厲害的是，它為讀書賦予了“副業變現”這個屬性，然后通過8980元的系統課，幫助那些全職或想做副業賺錢的媽媽用戶群體進行系統培訓，層層推進。這樣的設計方式，甚至在企業端也復制了一套，變現能力驚人。

四、內容服務
「內容服務」是幫助產品實現用戶留存和激活的關鍵方式。樊登讀書如今已經把「免費視頻」作為APP的一級欄目，通過1-2分鐘的精華片段播放，可以有效提升新用戶的激活率，最終成為付費用戶；其次樊登讀書還有精彩豐富的線下線下活動。

1. 免費視頻
「免費視頻」是一個短視頻欄目，內容主要從樊登講書的視頻提煉出精華片段剪輯成1-2分鐘的短視頻。這個欄目設計得非常好，第一，把一個長達45分鐘的讀書視頻拆分出來以后，不僅可以降低閱讀成本，還增加了碎片化閱讀的形式，降低用戶讀書的時間成本，可以極大提升用戶的讀書時間；第二，一個免費視頻對新用戶來說，就是一次免費試聽，通過對精華內容的提煉，對用戶的激活有非常大的幫助；第三，免費視頻同時可以作為高質的短視頻素材，分發到抖音、視頻號、小紅書和知乎等平臺，幫助平臺傳播引流。

2. 活動
樊登讀書的「活動』是用戶運營的主要方式之一，活動分為線下活動和線上活動兩種形式。樊登讀書的活動主題非常豐富，不僅可以直接分享平臺的熱門書籍，比如《非暴力溝通》、《職場焦慮》、《陪孩子終身成長》等，還可以結合樊登自己創作的系列書籍為主題，比如《可復制的職場溝通力》等，內容的邊際成本非常低，可不斷復制。樊登讀書在全國擁有2000多家城市運營中心，每一次活動，其實就是一次分享傳播和新用戶激活，另外樊登讀書的活動不是免費參加，很多活動都需要付費報名參與，變現能力非常強。

2.1. 沐光公益
沐光公益是樊登讀書創立的公益品牌，主要為落后的偏遠山區孩子們建立愛心圖書室，幫助孩子們建立閱讀習慣。他的捐贈規則是當用戶捐贈的光束足夠多，樊登讀書就會為欠發達地區捐贈一座“沐光書屋”。用戶可以通過兩種方式為山區的孩子們進行捐贈，第一種是在樊登讀書APP每聽完一本書就會產生一束光；第二種就是通過在樊登讀書的直播間購買書籍，捐獻一束光。這樣的活動設計，結合了公益，更容易打動用戶，重新讓用戶更愿意多讀書，提升用戶活躍度。

3. 眼界
「眼界」是由上?？苿摻逃头亲x書聯合打造的一個內容欄目，從2022年9月15日到2023年1月31日，每周更新一期專題內容，目前已更新六期。從這個欄目可以看出，樊登讀書不僅僅是一個聽書產品，而是成為一個有深度的教育學習平臺。未來類似這樣高質量的欄目相信會越來越多，這會對品牌的宣傳、公信力以及用戶的留存起到非常大的幫助。

4. 發現
「發現」這個版塊，藏得比較深，在「用戶中心」的「常用工具」。但這個版塊的內容非常夯實，它就是一個社區，有熱點新聞、視頻、文章、活動、書友等十余個欄目。從內容設計看，這個欄目有很多想象空間，比如目前內容的生產形式是以媒體號發布，用戶還可以關注，未來樊登打造自己的讀書社區嗎？由于資料有限，并不知道未來這個欄目會怎樣定位和規劃。

5. 總結
從內容服務的拆解，我們可以看出樊登讀書的未來發展空間非常大。首先短視頻的設計會極大提升用戶使用產品的時間，讓產品有更多的可能性。其次通過「發現」這個版塊的設計推導，也許未來樊登讀書會朝著一個讀書社區發展。

五、會員服務
「會員服務」是樊登讀書實現用戶留存和傳播拉新的重要方式。樊登讀書的會員服務非常豐富，而且有很多創新點。樊登讀書設計了四種VIP會員卡，分別是樊登講書、非凡精讀、李蕾講經典和心選黑卡，享受不同的會員權益服務；在用戶運營方面，為用戶提供專業完善的學習分析工具，記錄用戶的學習時長，其次還有每日簽到、成長福利和小書童服務；在用戶福利方面，還為用戶設計了禮品卡、聯合福利、聽書卡和車主福利；最后為了吸引用戶分享推廣，還設計了邀請好友和組隊讀書兩種方式。

1. VIP會員卡

1.1 樊登講書
樊登講書的VIP會員售價388元一年，擁有內容（可收聽樊登講書欄目所有內容）、功能（支持音頻、視頻和文稿）、服務（專屬書童服務）、折扣（購買課程享受折扣）和親友（1人購買多人免費聽）五大特權。
其次樊登讀書還設計了一個多聽多送卡的會員升級服務，售價488元，鼓勵已付費的會員進行會員升級。升級以后可贈送下一年的樊登講書年卡，每周聽1本書可贈送7天VIP時間，不限時間積累，贈滿1年即可獲得下一年VIP。

1.2 非凡精讀
非凡精讀會員定價388元一年，購買后可以暢聽非凡精讀800+本優質書籍資源，服務內容主要是每周更新3本好書、5張14天樊登講書親友卡和每月發放價值超300元的學習福袋。

1.3 李蕾讀經典
李蕾講經典定價也是388元一年，購買后可以暢聽李蕾講經典的所有內容，還擁有5張李蕾講經典親友卡以及400+分鐘配套朗讀節目。

1.4 心選黑卡
心選黑卡是心選商城的會員VIP，定價99元一年，購買后，可以享受最低9.2折的購物折扣，還擁有專屬的黑卡月券和社群。

2. 用戶運營

2.1 成長福利
樊登讀書根據用戶每天讀書的時間記錄詳細的讀書數據，包括累計學習天數、累計學習時長等，這里的交互體驗設計得非常友好，用戶可以直接滑動日歷查看過去半年的讀書時間，非常方便。

2.1.1 勛章
勛章分為五大類，分別是小試牛刀（門檻低，用戶通過完善資料、評論和分享即可獲得）、學無止境（門檻略高，根據學習時間來頒發勛章）、推薦達人（鼓勵用戶分享拉新）、讀書小隊（根據書單任務設計）和限量勛章（根據用戶忠誠度設計，分為相伴1周年、2周年和3周年等），可以看出設計得非常用心。

2.2 學習歷史
「學習歷史」就是用戶學習數據看板，樊登讀書會把用戶每周的學習數據都記錄下來，包括當周學習時長，歷史學習時長等，其次還提供測試、筆記、想法、下載記錄和閱讀記錄等功能。

2.2.1 學習數據
「學習數據」的統計維度非常細，為用戶生成今日、本周以及歷史學習時長記錄，根據用戶的閱讀習慣生成「聽書偏好指數」。其次還設計了一個影響指數，也就是如果用戶分享給好友以后，「學習數據」也會統計好友的讀書時長，生成用戶的影響聽書時長，設計得特別有創意。

2.2.2 測試
當用戶聽完一本書，為了幫助用戶更好的理解這本書的知識，樊登讀書設計了一個測試答題的環節。用戶答完題以后，不僅可以查看答案解析，還可以生成朋友圈海報分享，傳播拉新。

2.3 每日簽到
用戶可以通過每日簽到領取積分，以7天為一個周期，連續簽到積分加倍，積分可以在商品購買時候進行抵扣。在任務中心，樊登讀書設計了不同的小任務，以極低的行動成本鼓勵用戶進行分享、讀書和評論從而贏取積分。

2.4 小書童
小書童的設計非常巧妙，它并不是一個智能AI客服，而是讓用戶添加企業微信客服，這其實是把用戶留存和銷售場景移植到微信上，從而實現用戶激活和復購。

3. 用戶福利

3.1 禮品卡
「禮品卡」是一種線上的虛擬VIP卡，用戶可以購買贈送給好友，售價388元，其實就是樊登講書的VIP。樊登讀書把禮品卡設計成了一種裂變形式，官方會給用戶贈送限時的禮品卡（一般為7天），好友領取以后，用戶還可以獲得3天的VIP時長，傳播拉新能力非常強。

3.2 聯合福利
「聯合福利」就是樊登讀書通過學習的場景鏈接了其他第三方品牌，以聯名的形式向用戶推出聯合服務?？梢哉f，樊登讀書把讀書學習和場景的鏈接，發揮到了極致，比如六個核桃×樊登讀書聯名套裝，你可能想不到還有這樣的套餐，一邊喝六個核桃，一邊聽樊登讀書。

3.3 領聽書卡
「領聽書卡」這個用戶權益主要是回饋教師和醫護這兩個行業的用戶群體。樊登讀書設計得特別巧妙，如果你是這兩類用戶，你可以填入個人信息進行申請；如果你不是，你可以分享給你的老師或朋友（職業為教師和醫護），這樣的設計簡直讓用戶很難有抵抗力，讓用戶主動為產品拉新。而且聽書卡只有1個月的福利，免費試聽結束后極大可能轉化為付費會員。

3.4 車主福利
「車主福利」也是一個樊登讀書和其他行業完美鏈接的活動形式，樊登讀書通過和一些汽車品牌進行深度合作，直接以車載應用的形式載入到汽車設備，用戶在駕車的時候可以直接收聽樊登讀書的內容，多場景提升用戶黏度，讓用戶隨時隨地都能收聽。

4. 用戶推廣

4.1 邀請好友
「邀請好友」的設計特別簡單，但是海報的文案非常打動人，通過很多名言警句和熱門書籍生成的海報，直接轉發給好友或發布在朋友圈，有新用戶注冊付費以后，老用戶則可以領取聽書時長。

4.2 組隊讀書
「組隊讀書」的活動規則很簡單，所有人都可以發起組隊，三人成組開始聽書，完成任務以后可以獲取積分。這個活動對用戶的拉新和提升活躍度有很大幫助，老用戶為了獲取更多的積分，邀請到越多的新用戶，組隊獎勵就會翻倍。

5. 總結
從會員服務的拆解我們可以看出，樊登讀書的用戶運營和營銷形式設計得非常豐富。為了增加用戶的投入成本，他們設計了非常專業完善的學習統計工具，通過勛章、測試、每日簽到形式鼓勵用戶每天聽書、學習。其次還引導用戶添加「小書童」，通過1V1、高頻的鏈接，和用戶建立關系，實現激活和復購。在營銷形式方面，以領書卡為例，如果你是老師，你可以直接領取，而如果你不是老師，那你可以分享給你的老師，這樣的拉新方式，非常值得學習。

六、設計總結

1. 極致的單點突破
樊登讀書可謂是一個單點突破的典型案例。樊登在《講好一本書》中分享過他的創業歷程。最初用戶就是不想讀、沒時間看、讀不懂，他們愿意給樊登交錢讓他讀給他們聽。所以樊登從成立樊登讀書開始，就以每年52本經典好書為主要賣點，解決用戶沒時間讀書、讀不懂書這個痛點，單點突破，最終打造了樊登這個超級火車頭，把講書這件事，做到極致，才有了今天超過6000萬會員的樊登讀書會。

2. 天馬行空的創意
樊登讀書在內容層的設計可謂天馬行空。它不僅把讀書設計了一個標準化的產品，支持消費者隨時收聽、學習。而且升級成了一個塊芯片，可以即插即用，比如讀書開放平臺，支持多設備、多場景的對接，讓樊登讀書和其他行業進行更深入的鏈接。甚至一個普通心選商城，樊登讀書都能設計出三個書單、未來書單這樣的創意服務。

3. 豐富的變現形式
樊登的商業變現形式實在太豐富了，就像齊天大圣的72變，在任何環節，都能讓用戶為知識掏腰包。你可能想象不到你的孩子可以一邊喝六個黑桃一邊聽樊登讀書，又或者你的全職太太正在通過樊登讀書的系統訓練營正在學習如何通過副業變現，甚至當你聽完《焦慮自救手冊》手足無措的時候，你發現原來還有王丹老師為你設計了一個走出焦慮的行動營。

作者：設計大偵探

 來源：站酷

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

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

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

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