本文一句話概括：數據可視化中，如何用最簡單的圖表高效地傳遞信息。

人人熟知的 3 類圖表

看似簡單的 3 類常掛在嘴邊的「折柱餅」，你真的知道怎么使用嗎？

@rubyxrli 在 紐約的Uber數據可視化大會上所做演講中提到： 
根據我的經驗（基于原型研究超過10年）大多數可視化問題可以通過一些圖表來解決。很少情況下，需要你去想出一個全新的表達方式。像條形圖、折線圖、散點圖、透視表等「圖形化主力」真的很難被替代！ 

對于大部分的企業級產品使用者來說，基本的圖表類型，通?？梢詾榇蠖鄶诞斍绊撁娴膯栴}作出解釋，但是我們要做并不是簡單地調用一個圖表就結束了，如果想讓你的頁面更有效地傳遞結論、原因，可以讓使用者探索更多可能性，甚至去發現新的分析思路，那么首先你需要掌握下面的分析套路：

3 個套路

「對比，細分，溯源」，給簡單的圖表加點「戲」

在數據分析中，分析思路一般可以概括為「對比，細分，溯源」，這也是《數據化管理》中提到六字箴言。首先我們來了解一下這六字箴言的具體含義：

此處引用部分《分析思維 第三篇：數據分析的三板斧》內容

1、對比

對比分為橫向對比和縱向對比。

· 橫向對比是指和“他人”比較，比如，兩個網站的用戶流失率；

· 縱向對比是指按照某個維度，和“自己”比較。比如，這個網站上個月今天和這個月今天的用戶流失率。

2、細分

細分是指分維度、降低粒度來分析數據。

· 分維度是指增加維度，比如，離職率按照部門維度來分析；

· 降低粒度是指降低數據聚合的程度，比如，離職率不按年份，而按照月份來統計。

3、溯源

溯源是指在對比、細分鎖定到具體維度和粒度之后，依然沒有結論，那就需要查看原始數據或相關聯數據，洞察數據，從數據中尋找靈感。

3x3 實踐

第一個 3 代表圖表類型；第二個 3 代表分析套路。

了解分析思維的三個套路后，可以嘗試在自己的圖表中檢驗打鉤。

折線圖

通常在一個數據概覽頁面，人們都會使用一個折線圖，來表示一個關鍵指標的發展趨勢，當然這么做非常直觀，也非常準確。當我們為折線圖添加一個對比的維度，就可以使折線圖表達的內容更加豐滿。

橫向對比

可以是橫向對比“和他人比”。

縱向對比

也可以是縱向對比“和自己比”。

添加輔助元素，強化關鍵信息進行對比

G2Plot 為圖表提供了很多圖表輔助信息組件：https://g2plot.antv.vision/zh/examples/general/label

例如：

· 參考型組件：參考線、趨勢線、輔助區域等

· 極值型組件：最高/低點、預警線等

細分維度

通過右上角的 TAB 切換，提升和降低數據聚合的程度

柱 / 條形圖

橫向對比

和別人比。

細分維度

將維度拆分進行分析。

在使用柱狀圖/條形圖時，問問自己「對比」的呈現效果好嗎？

這是使用者在使用柱形圖做對比時，經常遇到的問題：

· X 軸類別數量過多，柱子非常密集

· 軸文字標簽數量過多，文字在 45%旋轉后可讀性降低

這時，設計者應該試著旋轉柱圖，把它變成一個條形圖。

對比是好的，但不要做無用的對比

餅 / 環圖

縱向對比

餅/環圖天生自帶「縱向對比」的性質，但是除了用一個餅/環圖之外，還有什么做法？

細分維度

溯源，顯示更多詳情幫助用戶定位問題

合并極小值的維度，在有需要的時候做細分

拓展：N x N 實踐

第一個 N 可以代表圖表類型，也可以代表頁面，但需要是一個實體；

第二個 N 代表分析思路，上文中提到的 3 個套路只是眾多分析思路中被總結出最為常用的，還可以根據不同業務場景的訴求去添加思路。

這個矩陣的表格填出來后，除了可以幫助設計者檢驗是否高度利用了圖表區域之外，還可以總結出一份屬于自己業務場景的圖表指引，傳遞給下一個設計者使用。

結語

在企業級產品設計的領域中，用可視化的方式表達信息，讓數據不再枯燥難懂，是一種常見的設計手法。在真實的業務場景中，大部分用戶青睞 dashboard（報表頁面），來呈現「數據概覽」、「數據監控」、「數據明細」等信息，其中的重要組成部分即「統計型圖表」。如何恰當使用「統計型圖表」來實現用戶的分析目的？ 這對沒有可視化基礎的制作者來說，還是有一定的難度。

通過以下三步，讓用戶更高效地讀取重要信息，驅動業務決策，實現商業價值。

本文用簡單直白的工具方法，為「零基礎」的圖表制作者提供一種簡單易學的思路，讓你的圖表在 Dashboard 里更全面、更有效地傳遞關鍵信息。

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

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

老司機開車

開車的同學知道，一般我們用“指哪打哪”來形容汽車轉向精準、沒有虛位?！爸改拇蚰摹笔侵钙嚨牟倏伢w驗，更是駕駛樂趣的一部分。駕駛員輕撥動方向盤，輪胎轉向帶來的阻力以及路面反饋傳至車身，動力的線性輸入與制動的時實響應讓駕駛員能控制自如。

“指哪打哪”形容車聽從驅使，是人對車的輸入控制以及車對人的輸出反饋，是一個互相修正的過程。在數據可視化設計中，操作“聽從驅使”的可視化作品又是一種什么樣的體驗呢？

聽從驅使示例

示例一

某公司運營同學需要找出品類銷量下滑的原因。在圖表上，運營同學的思路是找出癥結、定位問題、關聯分析、驗證設想、得出結論并給出運營策略調整方案。

示例二

某同學向公安報案稱賬戶被盜大額資金，公安案件科分析專員從受害人的資金流向追溯至相關木馬團伙，通過關系擴散查驗可疑人員，順藤摸瓜最終找到嫌疑人并抓捕。

上面兩個示例提供足夠便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多視圖空間，快速定位感興趣的數據空間，這種操作體驗能幫助用戶事半功倍。

何謂聽從驅使

聽從驅使本質上是用戶對可視化的控制能力，是一種主觀感知與信念。聽從驅使包括兩部分，“驅動 Drive”與“使能 Enable”，這兩步正向不斷迭代，引導用戶一步步剝開數據的面紗。

驅動 Drive

數據可視化聽從差遣，用戶可根據前饋信息預示、驅動可視化，用戶對可視化作品享有控制權，數據可視化符合用戶的顯性需求。

使能 Enable

數據可視化遂用戶心愿，用戶根據反饋引導進行下一步操作，幫助探索數據規律或者發現更多數據奧秘，數據可視化符合用戶的隱性需求。

為什么要聽從驅使

增加探索意愿

用戶處在海量、無序、異構數據的海洋中時，需要隨時面對有限屏幕空間與無限數據空間帶來的沖突?？梢暬瘧斀o予用戶適當的選擇權，讓其可對信息進行控制，具備信息聚焦、下探的能力。這些可視化能力能提升用戶的參與度和探索意愿，不讓其迷失在數據的海洋中。

減少焦慮感

移動端長按滑動（Touch & Hold）更新激活點數據、左右輕掃（Swipe）平移視圖是用戶的既定認知。左圖長按滑動后的反饋為平移視圖，此時用戶心里咯噔一下，又繼續操作了一遍，操作的預期與結果確實不一致，有些“不聽使喚”。右圖符合用戶心智模型，預期與輸出結果一致。

不聽從驅使：視圖平移，不符合預期-長按滑動時數據點不更新（如下圖）

聽從驅使：視圖不動，符合預期：長按滑動時數據點更新（如下圖）

由此可以看出，如果可視化作品操作時不符合用戶的既定認知，可視化則變得不受控，用戶心里會緊張、導致重復范錯，甚至責怪自己。

如果賦予用戶較高的驅使感且得到正向的反饋指引，引導用戶操作下一步，那么用戶心態會更積極，更愿意接受挫折及試錯，這種聽從驅使可以消除未知、不確定性所帶來的緊張與焦慮。

怎么做到聽從驅使

前面講過，可視化聽從用戶驅使需具備兩點能力：

· 驅動 Drive：通過前饋預示讓用戶知道可視化能做何互動；

· 使能 Enable：通過反饋引導用戶進一步讓用戶與可視化互動；

可視化交互時，驅動用戶完成一期探索，探索后反饋引導發出的信號成為下一步操作的前饋提示，再次驅動用戶操作可視化后，如此反反復復直到幫助用戶找到數據的潛在規律或者找出數據真相。

從心理學的四個概念進一步解釋：

· 示能：可視化特性與預設交互的關系，是否可被操作；

· 意符：即信號，告訴用戶可采取什么操作，如何行動；

· 映射：事物之間的關連關系，是怎么聯系的；

· 反饋：操作之后的回應，是否及時、有效；

示能

示能 Affordance  指可視化作品可能的潛在行動，只有當它們都是可以被感知的用戶才容易地發現它們，它揭示了用戶與可視化互動的可能性。

例如我們默認認為屏幕上的可視化都可以進行交互，PC 可視化作品可以 Hover 交互，移動端可以點點按按。示能存在但可能不可見，可視化設計師的一部分職責就是實現示能的可見性。

意符

意符 Signifiers 是可視化作品傳遞的信號，暗示可能的潛在行動，讓用戶該知道該如何去控制可視化。無論是示能還是交互方式，都應照顧用戶已有習慣，需符合用戶心智模型。

在 PC 可視化上，可視化設計師很容易忽略鼠標指針樣式設計，經常默認一個鼠標樣式進行到底，可視化如何驅動用戶以及如何讓用戶具備可視化的能力全靠猜。

映射

映射 mapping 表示可視化元素間關系，應用于控制-反饋模式的設計或布局；比如方向盤可控制汽車轉向，下拉篩選器出來的選擇框。以空間布局對應關系的自然映射為例。

反饋

反饋 feedback 是用戶操作之后的回應，反饋應當是即時、有效的。在可視化設計時，如果需要，我們建議給出用戶深層次的反饋以便指引其進行下一步的操作。

小結

要做到聽從驅使，需給用戶控制感，讓用戶享有對可視化的控制能力。例如提供足夠便捷的過濾篩選組件，配合鼠標懸停、點擊、框選等操作，方便用戶查看更多視圖空間，快速定位感興趣的數據空間，亦或根據特定變量對數據進行排序、突出、降維處理等。當我們將這些組件與交互動作進行結合，用一些習以為常的交互去操縱可視化時，用戶將會很清晰、并且有信心控制好當前視圖。

數據可視化不僅僅只是一張好看的圖，它構建的是一個系統，這個系統隨時在解決有限屏幕空間與無限數據空間帶來的沖突。這個系統可以驅動用戶完成一系列操作后引導用戶有能力進一步拿到結果，如此反復交替迭代，幫助用戶完成一些平時看來不可思議的任務。只有這樣，用戶才能操縱聽從驅使的可視化，就像文章開頭所述，如老司機開車一樣絲般潤滑。

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

文章來源：站酷  作者：Ant_Design

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

使用js動態引入js和css文件方法

方法1：

//引入css var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = 'css/style.css'; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); //引入js var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = 'js/js.js'; script.type = 'text/javascript'; head.appendChild(script); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

方法2：

//引入css new_element=document.createElement("link"); new_element.setAttribute("rel","stylesheet"); new_element.setAttribute("type","text/css"); new_element.setAttribute("href","css/style.css"); document.body.appendChild(new_element); //引入js new_element=document.createElement("script"); new_element.setAttribute("type","text/javascript"); new_element.setAttribute("src","js/js.js"); document.body.appendChild(new_element); 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

方法3：

var importCssJs = { css: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var link = document.createElement('link'); link.href = path; link.rel = 'stylesheet'; link.type = 'text/css'; head.appendChild(link); }, js: function(path) { if(!path || path.length === 0) { throw new Error('參數"path"錯誤'); } var head = document.getElementsByTagName('head')[0]; var script = document.createElement('script'); script.src = path; script.type = 'text/javascript'; head.appendChild(script); } } //引用方法 importCssJs.css('css/style.css'); importCssJs.js('js/js.js');

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

代碼：

在源代碼加上

<i class="layui-icon layui-icon-tips" lay-tips="最大長度為16個文字" ></i>

JS代碼

加上js代碼

$('*[lay-tips]').on('mouseenter', function(){
var content = $(this).attr('lay-tips');

this.index = layer.tips('<div style="padding: 10px; font-size: 14px; color: #eee;">'+ content + '</div>', this, {
time: -1
,maxWidth: 280
,tips: [3, '#3A3D49']
});
}).on('mouseleave', function(){
layer.close(this.index);
});

禁用鼠標事件,設置pointer-events屬性為none:

pointer-events:none

開啟鼠標事件,設置pointer-events為auto:

pointer-events:auto

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

很多同學面試時候都會被問到產品數據，用戶體驗等問題，這篇文章將講解產品數據中面試官最為在意那幾個指標，以及用戶體驗的考核方法。*本次話題我會分為上、中、下兩篇文章，此文關于產品數據哪些值得我們看，如果這篇文章能幫助到你，還請點贊、分享我會抓緊你分享下一篇怎么體驗度量的方法文章。

1 為什么大廠面試都會問數據

a 數據衡量你的項目是否真實

現在ui市場競爭激烈，選人也很苛刻，面試官判斷一個人是否可以入職大廠的第一個指標就是真實，而數據類的問題往往是劃分這個人做的項目是否真實的一個重要指標。

因為只有真實的項目才會有數據的提現，自由發揮的項目往往是答不上來有關數據的問題。

所以在大廠面試中都會或多或少的提問數據相關問題，這也是很多同學能進入大廠的一條重要分水嶺。

b 錄取后給你定什么職位

設計師群體偏感性，單單的看設計作品很難和其他競爭者拉開差距，所以需要理性的數據思維拉開與其他設計師的差距增添自己競爭力的附加值，另外一點通過產品數據的表述可以更有力的證明自己設計方案是最好的方案，方便后期給予定位高級、資深還是專家崗位。

2 數據在項目中的作用

設計師在做多個設計方案對比的時候會遇到這樣的提問，現有的設計方案是最適合用戶的嗎？究竟哪個版本是更好的？為什么是這個版比較好？有的人拿產品埋點數據來評判，有的人用用戶反饋來評判，也有的人則坦言需要靠老板的建議來進行評估。

a 數據是一個衡量好壞的一個指標

數據是衡量一個產品甚至一個功能最為科學的辦法，他在不同的開發場景中都起到很重要的作用。比如：

·在設計開始前，數據可用于發現問題、分析問題。從數據角度了解用戶訴求，發現產品存在的問題，為產品設計優化提供啟發和突破口。

·設計過程中，數據可用于幫助決策。通過歷史數據論證各個方案的優劣和有效性，再擇優。

·設計評審中，數據可提升設計方案說服力。通過理性數據分析，獲得團隊內部成員、產品/業務方對方案的認可。

·設計上線后，數據可用于量化用戶體驗價值。通過采集上線前后的數據變化，判斷設計目標的實現程度。

大家有沒有發現在我陳述的過程中，一直在說數據分析，那這個數據分析是怎么來的來呢？

其實數據分析就像是一個個監控產品數據波動的攝像頭，實時監控著數據的波動。以下是我整理關于數據埋點的理論知識，讓大家對數據埋點這個概念有個清楚認知。

b 數據對設計師的三個意義

很多人會認為數據是產品經理、運營的工作，其實不然數據對設計師也是設計師的工作，我把數據對設計師的意義歸納為三點：

1）為設計提案做依據

產品設計者可以由產品經理，UX，UI擔當，那需求不能自己憑空出現的，是由相關人員需找出來了，數據就好比一個放大鏡，它可以通過線上的數據波動來找尋目前存在的問題即需求。其實這就好比設計師的思維又產品思維轉換成數據驅動思維。比如

1、產品初期，沒有產品、沒有相關的后臺數據，那我們要做一個什么樣子的產品，就這一個需求。做什么樣子的產品可以通過了解大眾用戶、了解大眾市場的數據分析報告得出一個結論，明確我們要做什么樣子的產品，這就是數據對設計師的第一個價值做設計提案的依據。比如以下這些場景都需要數據做依據進行設計提案。

2）驗證方案是否解決用戶需求

判斷這個設計方案是否解決用戶需求：

2、在多個設計上線后，產品設計、運營方案與產品研發的三方對設計師輸出的方案存在分歧點。

也可以通過后臺的數據反饋來篩選出哪個方案最符合產品目標（即北極星指標），在多個設計方案中最好的設計解決方案。

3）晉升中衡量設計價值的指標

當然也有一些公司，做為后期晉升，評判設計價值的一種方法。

比如怎么證明自己的設計方案和其他同事相比，設計方案就好呢？通過數據對比，說明自己輸出的設計方案價值遠高于其他同事，以此證明自己的價值。

3 數據常用于哪里

其實在我們的工作中有很多設計方法可以輔助我們設計更好的設計方案，比如用戶調研，競品分析，產品測試等。這些方法都是通過對用戶數據的反饋和整理來判斷去發掘方案里面的問題、驗證最終方案是用戶是否滿意。

用戶調研：可以把字拆解開來看就兩個字面意思，調查：反映客觀事實。研究：分析客觀事實

主要的形式是用戶調研和用戶訪談，直接出過這篇文章，有興趣的朋友可以查閱。

傳送門地址：http://www.woshipm.com/pd/4745810.html

競品分析：確定幾款市場上競爭產品，然后通過對產品功能、產品定位，信息架構、顏色、布局、風格等元素的分析，找不同點，再通過數據對比確定產品方案的一種辦法。

（因為不同職位做競品分析的目的，角度和方法都不相同，這里我就不一一講解了，如果大家有需要后期我會考慮開一篇怎么做競品分析的文章）下圖是制作競品分析的常規流程。

產品測試：這種方法是用處最廣的一種方法，可用性測試是指讓一群具有代表性的用戶按照指令對產品進行典型操作，同時觀察員在一旁觀察、記錄。

比如我們發現首頁Banner的點擊率很低，這時候我們就要想辦法「通過設計」來提升Banner的點擊率，是Banner的大小問題？還是輪播圖切換的速度問題？還是圖片樣式的問題？

但是設計師沒辦法直接確定他到底是什么問題，所以就需要拿出不同方案給用戶測試，看看哪個方案更容易促進他點擊。

常用的測試辦法有很多這里我就講三個方法：一個是可用性測試、一個是灰度測試、一個是A/B test測試。

可用性測試：通常在產品開發之前使用，模擬真實的使用場景讓用戶體驗，目的是使用最小的成本來輸出正確的設計方案，避免全部做出來以后在進行調試修改。

灰度測試：是指產品開發通過后，將測試的版本發布到真實的線上環境中去，收集用戶的反饋。

A/B test 測試：是指產品測試通過并發布之后，同一個功能將使用人群分為兩個部分，一部分人使用a方案一部分使用b方案，對比數據波動。

數據的緯度有很多，首先咱們先來看看產品的數據都從哪里來的。通常情況下設計師可以直接找運營人員、產品經理、設計負責人在公司服務器日志里面調取產品埋點數據；或者項目結束后，項目負責人會發產品復盤郵件，數據考核郵件指標等信息，產品埋點數據也會在復盤郵件中體現。

除了以上兩點數據來源，還有CNZZ網站分析、百度統計、goodle anlytics可以查詢到相關數據。

1 數據可以分為「三個層面」

產品中的每一項數據其實都代表產品的一個緯度的數指都有其意義，如果想用比較簡單的方法記住這些有用的數據不妨試一試以下這個辦法：

我們可以把數據分為三個層面進行記憶，即用戶數據 （描述用戶人群的）；行為數據 （描述用戶使用方式的）；業務數據 （描述產品營收的）。

2 用戶數據的「四個維度」

用戶數據 （描述用戶人群的）主要意思就是描述使用產品的這個人群的。這里有四個比較有價值的概念需要大家了解分別是存量、新增用戶、用戶留存、渠道來源這四種。

a 訪問量

訪問量也有人稱其為活躍用戶數、用戶存量，其實都是一個意思。簡單理解就是指一個人來到網站，然后瀏覽了一些內容之后離開網站的過程（這個過程也會被稱為訪問），既在特定的統計周期內，再次訪問產品的用戶稱為訪問量。有三個專業名詞—DAU/WAU/MAU(日活/周活/月活)：每天有多少用戶來用產品，每周有多少用戶來用產品，每個月大概有多少用戶來用產品，這是判斷產品規模的最基本的指標。方便產品和設計人員了解產品的每日用戶情況，了解產品的用戶變化趨勢。

DAU（日活）：某個自然日內訪問產品的用戶，算該日一次日活（統計結果去重統計）；

WAU（周活）：某個自然周內成功訪問產品的用戶（統計結果去重統計），這個指標是為了查看用戶的類型結構，如輕度用戶、中度用戶、重度用戶等；

MAU（月活）：某個自然月內成功訪問產品的用戶（統計結果去重統計），這個指標一般用來衡量被服務的用戶粘性以及服務的衰退周期。

*這里補充一個知識點-去重統計：統計結果是按照設備去重統計，如同一個設備多次訪問后臺只記一個活躍用戶。

b *新增用戶

新增用戶是一個企業很看中的數據，特別是在業務的起步階段，這個指標尤為重要；這個代表公司的潛力。比如拼多多這家公司一年比一年虧損多，但股價卻越來越高，主要原因就是資本市場看好拼多多用戶的增速，按照統計跨度不同分為日新增（DNU）、周新增（WNU）、月新增（MNU）。

*在新增用戶里面還有一個“用戶流失率”的概念需要大家了解。流失率指那些曾經使用過產品或服務，由于各種原因不再使用產品或服務的用戶，用戶流失率=某段時間內不再啟動應用的用戶/某段時間內總計的用戶量。

產品階段不同，重心也會從拉新轉移到留存，對于一個成熟的產品和飽和的市場而言，獲取一個新用戶的成本可能是留住一個老用戶的數倍，流失率的降低也意味著營收的增加，在這種條件下，流失率的價值是顯而易見的。

提到新增用戶就一定要說《增長黑客》，這本書里邊提到一句話非常精煉的概括了“增長”的概念：以數據驅動營銷，以迭代驗證策略。通過這句話應該就可以感知整本書的中心思想就是“數據”和“實驗”，即AARRR（海盜模型）模型。通過闡述了一個用戶生命周期的各個階段——獲客、激活、留存、變現、推薦和召回，實現用戶增長的產品目標。

*a-ha moment：a-ha moment也叫Aha時刻中文翻譯過來就是尖叫時刻，是增長的一個概念詞匯，是指用戶通過某個特定行為（產品內的功能體驗）得到了很爽的體驗，用戶可以快速且準確的認識到產品的價值。例如很多知識付費類產品，都會讓新用戶完整的體驗視頻看課的流程并且感知到課程的價值，很可能變成產品的新增用戶。

c *用戶留存

上線的產品怎么反映用戶的狀況是不是健康呢？最好的指標就是留存率。即在某一統計時段內的新增用戶數中再經過一段時間后仍使用產品的的用戶比例（留存率=留存用戶/新增用戶*100%）。留存率又分為次日留存率，次周留存率，次月留存率等。

以上三個指標的數據越好能反映用戶愿意留下來，才能說明他們對產品的服務滿意，滿意才能養成慣性，持續消費，例如產品改版后，次月留存率提升了，且其他變量沒有變化時，說明用戶粘性是上升的設計改版成功。所以這三個指標是產品體驗最直觀的數據。

1）次日留存率，常用來衡量用戶粘性。

通過日留存率的數值來判斷一個 App 的質量，通常這個數字如果達到了 40% 就表示產品非常優秀了，比如可以結合產品的新用戶注冊的轉化路徑來分析用戶的流失原因，通過不斷的修改和調整來降低用戶流失，提升次日留存率。

2）次周留存率（7日留存率），用于判斷產生的忠實用戶數。

通過周留存率來判斷一個用戶的忠誠度，比如在一周的時間段里，用戶通常會經歷一個完整的使用和體驗周期，如果在第七日用戶還在使用產品，就可以定義該用戶為忠誠度較高的用戶了。

3）次月留存（30日留存率），用于衡量版本迭代的效果。

通常 App 的迭代周期為 2 - 4 周一個版本，一個版本的更新，或多或少的影響用戶的體驗總成用戶流失，所以通過比較月留存率能夠判斷出每個版本更新是否對用戶有影響，衡量版本迭代的效果。

d 流量獲?。ㄇ纴碓矗?

根據字面意思來講就是描述用戶路徑，來指的是這些人變成用戶之前，都來自哪里；知道用戶從哪里來才能知道在哪個渠道做推廣會更有效，一般和用戶留存的數據搭配使用。

3 「行為數據」的五個緯度

關于行為數據是數據中的一個重點知識，此次主要講解次數/頻率、點擊率、轉化率、用戶停留時長、跳出率、退出率這個五個緯度。

a 頁面訪問次數（pv）和人數（uv）

這兩個指標能夠了解用戶的使用行為，衡量頁面入口的設計和與其他入口的設計相比是吸引用戶的注意力的核心指標。

·頁面訪問次數（PV ；PageViews的縮寫）用于判斷該活動/頁面/功能被用戶查看的次數，即頁面瀏覽量；

·頁面訪問人數（UV；Unique Visitor的縮寫）用于判斷有多少個用戶查看過該活動/頁面/功能，即訪問深度，也就是指用戶的訪問深度（總產品流程的體驗完成度）。

b 點擊率(CTR)

點擊率（人均點擊次數）是指網站頁面上某一內容被點擊的次數與被顯示次數之比，即點擊次數占展示次數的百分比。通過人均點擊次數可以判斷交互/視覺的設計要求是否足夠引人注目，也可以用于衡量該功能對用戶而言是否為強需求。通過下面這個案例讓大家了解一下用法，比如7月7日10萬人點擊了“確定”按鈕，其中一共點擊了12萬次，那么點擊率（人均點擊次數）為12/10=1.2次。

*點擊率中也常常會結合pv和uv的數據使用，即PV點擊率=點擊次數/頁面訪問次數（PV）；UV點擊率=點擊人數/頁面訪問人數（UV）

c *轉化率

轉化率即達到產品某個目標的訪問量除以總的訪問量，或達成目標的訪客數占總訪客的比例，即轉化率=轉化次數/訪問次數。簡單理解轉化率是把用戶分為“只逛不買”的用戶，還有“逛了 就買”的用戶，還有“逛了買買買”的用戶。

為什么說轉化率很重要，因為轉化率常常是項目中企業最為看重的一個數據，畢竟轉化率高了公司收益也就提高了，而且轉化率的提升也常常是解釋設計方案最好的支點，比如：在國外的養老計算器中，用戶需要輸入相關的字段后查看計算結果詳情，最后得出計算結果，在這個流程中用戶的轉化率很低（在結果詳情中會有金融產品）。但是如果把結果前置，比如新方案把輸入字段，結果詳情和計算結構都放在一個頁面展示，就會提高用戶的購買決策，大大提高轉化率。

這里有一個思維方法即漏斗分析法，大家需要了解：

漏斗分析最常用的是轉化率和流失率兩個互補性指標。用一個簡單的例子來說明，假如有100人訪問某電商網站，有30人點擊注冊，有10人注冊成功。這個過程共有三步，第一步到第二步的轉化率為30 %，流失率為70%，第二步到第三步轉化率為33%，流失率67%；整個過程的轉化率為10%，流失率為90%。 該模型就是經典的漏斗分析模型。

d 用戶停留時長

這個指用戶在產品中的停留的時長，即所有用戶session的時長總和/session數量。也有產品通過用戶停留時長去衡量頁面吸引度、判斷用戶粘性和依賴度，舉個例子，抖音的頁面內容吸引度就很強用戶粘性就很高，用戶的停留時間也很長。回想一下，是不是每次刷抖音，很快一個小時就過去了。這里的商業邏輯是，用戶停留的時間越長，在產品中用戶付費的可能性就會越大。

總結一句話：停留時間越長，用戶粘性越強。當然也有反面場景，比如登錄注冊的表單填寫，停留時間越長，說明體驗越差。

e 跳出率（BR）

跳出率指該用戶來到網站后，沒有進行操作就直接離開的比例，即訪問了一個頁面就離開的訪問量與所產生總訪問量的百分比，跳出率等于訪問一個頁面后離開網站的次數/總訪問量*100%。

這里有一個容易混淆的概念即跳出率和退出率。其實這兩個數據都是用于衡量頁面的內容質量或交互質量的一個指標。比如當用戶進入 app后，只訪問了一個頁面就離開了，跳出率和退出率越低說明流量質量越好，用戶對產品的內容越感興趣。

4「業務數據」的四個緯度

接下來我們來看看三層數據中的最后一層概念——業務員數據，即和財務相關的數據知識。

a 總量

GMV (Gross Merchandise Volume)，這個詞太常見了；大公司在發布財報、銷售額、成交量的時候，這個數每次必提。*值得注意的是GMV=銷售額+取消訂單金額+拒收訂單金額+退貨訂單金額，包含付款和未付款兩部分。

b 人均

ARPU（Average Revenue Per User，每用戶平均收入），光總數高還不行，我們還要關心平均每個用戶的貢獻是否夠多，是否在增長，所以就要關注人均的指標。它是 App 成功的指標，是用戶忠誠度的反應，是預測用戶增長的工具。

c 付費率

整個產品業務也要有一個健康度的指標來衡量，付費率就是這個衡量指標。到底有多少比例用戶是付費用戶，這就是付費率。我們通常會把付費率和ARPU值放在一起分析。一般該產品的付費率越高，這說明用戶對該產品的認可度越高。

1 數據也許會騙人

數據并不會騙人，而是人看的數據不同，造成結論不同。在使用數據之前我們要認清楚以下三點偷換概念、只看單一緯度、數據不是萬能的。

a 偷換概念

今年7月美國總統特朗普舉了一個案例，我記憶猶新。在一個電視采訪節目中他說“美國的死亡率低于歐洲的水平”他的算法是所有新冠死亡人數除以所有確診人數得出右側數據。

其實他就是偷換了一個概念，在醫學上有兩個指標去衡量死亡率，一個是病死率一個是死亡率。

當然兩者在算法上是不同的，如果看病死率的話，美國的確低于中國，但是如果按照死亡率的結果看的話，美國是遠高于其他國家，中國是美國相比一百五分之一，這結果是恰恰相反的。

這里就是一個偷換概念的例子，雖然病死率和死亡率都能反應生病的人數，但是病死率考慮的是救治能力。死亡率不僅考驗救治能力，還考驗著控制傳播的救治能力。

b 只看單一緯度數據是表象的

如果單從一方面看數據是沒有意義的，沒有其他數據參照，挖掘不出數據的真正價值。

比如：我們在討論一個產品是否成功時候，往往會看一個最突出的緯度數據，比如這個產品有2億的日活，這個平臺有5000萬的產量。

也顯然這種只盯著用戶數量和產品規模的產品的做法是不對的，他并不能真實的反應一個產品是否成功，假如一個產品的日活是2億但是愿意付費的用戶不到1w，這個平臺雖然有5000w的產量，但是用戶的平均停留時長很短，很顯然這并不是一個很高興的事情，因為可以從側面保暴露出產品的質量可能存在問題，導致用戶付費意愿不高，停留時間較短。

c 數據有局限性

我們要搞清楚這樣一個認知，數據雖然可以最為直觀的反應產品的健康程度，但是數據絕對不是萬能的，他只是衡量產品的用戶體驗的工具，就好比我之前寫的問的用戶調研的文章只是一種工具也存在其局限性，數據只能告訴waht，但是不能告訴why，而這個why是設計師做方案選擇的關鍵所在。

2 數據應該怎么用

數據本身并不會欺騙人，他就真實存反應產品的表現，只是很多人用錯了使方法或者認知出現了偏差，如果想把產品數據的價值利用率達到最大化，建議每次做數據分析時候從以下三點使用數據：

a尋找關鍵數據目標

為了避免偷換概念的情況出現，除了我們要理解數據概念之外，更重要的是尋找出關鍵的數據目標。

以上講了這么多數據名稱，但是大家需要注意的是并不是每個產品都要看這些數據的，不同的產品需要看的數據側重點不同，就比如qq音樂看的是日活躍用戶、淘寶看的是銷售額、王者榮耀看的用戶平均付費額度（appu），新浪新聞客戶端看的是網站訪問數量（uv）。

1）用戶生成內容(UGC)類數據指標

UGC（User Generated Content）指用戶原創內容，從進入web2.0時代后UGC第一次被論壇/社區應用，到今天，互聯網產品或多或少都帶有一點UGC屬性。這些產品主要有抖音、知乎、人人都是產品經理、站酷等。

評價這類產品往往會從發表文章、用戶點贊、訂閱、評論、分享、打賞等幾個數據指標進行評判產品是否健康。

2）電商類要看gmv

GMV（全稱Gross Merchandise Volume），即商品交易總額 [1] ，是成交總額（一定時間段內）的意思。這個實際指的是拍下訂單金額、包含付款和未付款的部分。

休息一下

聽了腦袋大了同學不用擔心，我特別繪制了下面這個表格，保存截圖慢慢看就好了。

b 找好參照物A&B test 測試方法

多數產品在進行數據分析的時候，最常用的方法就是A&B test 測試法。（上面講到了A&B test 測試發）

1）案例一

很多時候我們看數據不能看一個緯度，要看兩個或者多個緯度，才能篩選中自己需要的結果方案。

比如這個案例在探究“與用戶強相關的 BI 品類樓層，商品展示普通利益點和帶券利益點，哪個更優？a方案展示普通的利益點，如“銷量過萬、好評率99%、滿199減100”。b方案只展示帶券利益點的文案，如“滿199減100，領券”。

最后看的數據是A方案的點擊率高，b方案的曝光點擊率更高（由于方案 B 中可領券和點擊跳轉商詳，可能有部分點擊為領券導致，故方案 B 點擊更高但點擊轉化偏低）。

如果單獨看點擊率或者轉化率很難做出選擇，但是只要兩個數據綜合看，就很容易得出B方案（帶券利益點）能帶來更高的曝光點擊，引入訂單表現更優的結論。

2）案例二

在做A&B test 測試時，是需要保持單一變量測試，現實生活中，很難做到單一變量測試，所以數據很多時候都需要進行分析探討，才會有價值。

比如我們在首頁流量分發場景中做了A,B兩個視覺設計方案，a方式是所有的品類展示使用魔方圓形坑位，b方式是方形坑位。想探究方圓形坑位和方形坑位，哪個更能吸引用戶點擊？

最終A方案（圓形）用戶點擊數據為4.87%，B方案（方形）的用戶點擊數據為15.85%，那么，從這個A&B test 測試法的結果中就可以推導出B方案（方形）更好嗎？

事實可能并不是，大家仔細觀察不難發現，兩個方案除了品類的背景造型不同之外，品類的種類也不同，文案的描述也不同，沒有做到保持單一變量的測試環境，所以B方案（方形）更能吸用用戶的點擊這個結論是不成立。可能成立的是方形的展示面積比圓形的展示面積要大，可以更好的曝光產品的特點，而且促進B方案（方形）更吸引用戶進行點擊。

c 采用多次定性+定量驗證

我們得到了數據其實可以采用多次定性+定量驗證這種方式來驗證我們方案是否解決了用戶需求，是否完成項目目標。

定性可以采用用戶訪談、眼動測試、可用性測試等方式去發現問題（需求）的多樣性和嚴重程度。定量的方式有用戶問卷、站內行為分析、A&B test 測試等方式，驗證這個問題的發生概率。

比如我們可以通過五次定性質、三次定量的方式，通過數據反饋把結果更加靠近真實。

3 了解雙面數據（虛榮數據）

什么是雙面數據呢，其實也就是那些看上去很好，卻不能給這個產品帶來絲毫價值的數據，需要對比著看才能了解數據的價值。

a 點擊率（CTR）

比如一個用戶在有些資源位連續點擊或者因為一些利益性的活動補貼引發的點擊量變化這類場景在用戶人數總量不變的情況下，單獨位置的點擊量增加，必然會導致其他部分的點擊量降低，其實是0和博弈，增加這個功能的點擊量是片面的。

b 訪客數（UV)

計算訪客數只是一場毫無意義的人氣比賽，其實訪客數可以分為三個類型即曝光UV、點擊UV、意向UV，單純地看這三個uv是沒有意義的，除非能讓用戶做對產品有利的事。比如，在推出活動時，有多少用戶能轉化購買？只有知道了這個數字，這個用數據數才是有價值的。

·曝光UV即曝光在視野內的訪客數，例如我們在淘寶搜索某個產品進入了搜索的feed列表頁，當我在這個列表場景停留2-3秒的時候，我沒有購買任何產品的情況下，數據就會判定我為一次曝光UV。

·點擊UV即有點擊行為的訪客數，還是以淘寶做為例子，現在我在feed流列表頁面里搜索產品，其中有一件是我比較中意的產品，我點擊了產品進入到這個產品的詳情頁，在我沒有購買任何產品的情況下，我發生了點擊行為，數據就會算我是一個點擊uv。

·意向UV即進入意向頁面的用戶數，其實這個和點擊uv有點像，比如我在淘寶搜索完我想買的產品a,有去京東搜索了一下，那京東就會判定我為一個想要購買產品a的意向uv，這個意向uv只可以判斷出我們對a產品是否感興趣，并不能判斷出我真正想要購買。

c 停留時間

用停留時間數據來統計用戶參與度或活躍度，他并不能說明什么問題。比如，客戶在某個全是文字內容頁面上停留了很長時間，有可能是看不清楚或者是文字理解難度影響了用戶的閱讀時間，所以說產品效率、體驗這兩個關鍵指標本身就和停留時間相矛盾。

d 下載量

盡管有時會影響你在應用商店中的排名，但下載量本身并不帶來價值；還需要參照的是：用戶下載后的激活量、賬號創建量以及用戶在產品中的各個場景的跟蹤。

e 退出率（ER)

很多人會有一個誤區，認為退出率高是不好的一項數據，但是大家要明白并不是所有的場景跳出率越低越好，舉個例子：我們通過漏斗數據發現用戶操作路徑太長，把好幾個步驟的路徑縮減到一步操作，最后看到用戶退出率就減少了。

最后大家要清楚

數據是用于支撐設計師的某項設計決策和方法，但數據無法代替設計的直覺，更無法代替深入的用戶研究、我們要學會利用數據指標，找出問題所在，通過設計方案改變用戶行為，因為數據最終目標在于價值的體現：有效獲取用戶，創造營收。

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

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

“民無信則不立，業無信則不興。”——可見，信任力對于一個國家或是企業來講是非常重要的基礎。

據權威機構數據顯示，2021 年第七次全國人口普查后，在我國 14.1 億人口當中，租房人群已經超過 2 億，租房已經成為一二線城市年輕人生活的新常態。整個租房市場在疫情過后也逐漸回暖，各大租賃平臺競爭日趨激烈，爭相拿出各種補貼政策吸引租戶，前有自如針對畢業大學生按月付、0 押金的“海燕計劃”，后有泊寓推出的 98 折入住、免費換房的“港灣活動”。在互聯網技術日趨成熟、人口紅利逐漸消失的當下而言，平臺的服務能力趨于同質化，需要比拼的是誰有更深的內功基底：那就是打造出差異化的競爭核心。差異化的競爭核心對于房產、金融行業來講，就是企業（平臺）的信任體系建設，從滿足用戶基礎的功能訴求——建立起用戶與平臺信任的關系——最后讓用戶對平臺（產品）產生信仰與依賴，和Apple、Airbnb這樣的公司一樣，最終實現品牌的溢價價值，這也是馬斯洛需求層次理論——滿足用戶從基礎的生理需求到自我價值的實現。

圖 1 馬斯洛人的需求層級與產品價值層級映射

此外，我們在 19 年貝殼租賃滿意度報告中發現，用戶在對租房信息渠道的選擇上更關注真房源和平臺的可信度等方面。因此，我們希望打造一個簡單、安全、可信賴的線上租賃環境，幫更多用戶解決租房問題，建立起租客、房東與平臺的信任鏈接，從而構建起整個平臺的信任價值體系。

圖 2 用戶原聲

產品中傳遞給用戶的信任是什么

我們先看一下信任的定義是什么？

在社會科學或心理學中來講，信任被認為是一種依賴關系，是一種穩定的信念，指的是個體對周圍的人、事、物感到安全、可靠、值得信賴的情感體驗，在個體感到某人、某事或某物具有一貫性、可預期性和可靠性時產生，值得信任的個人或團體意味著他們尋求實踐政策，道德守則，法律和其先前的承諾?！鲎浴栋俣劝倏啤?

對于產品給用戶的信任感來講，可以拿戀愛的過程舉例更為形象：

初識——信任——戀愛——信賴——結婚

圖 3 戀愛的過程：信任感的建立

用戶最初接觸產品時，雖然有清晰的目的訴求（找個靠譜的伴侶共度一生），但是因為認知不夠，并不能了解產品能幫自己解決怎樣的問題，帶來怎樣的價值，這個時候需要產品通過各種方式來建立與用戶的情感鏈接，也就是建立信任感（戀愛）的過程，只有解決了用戶核心的訴求并不斷給用戶提供預期外的驚喜，用戶才會慢慢認識到產品的價值，變的越來越離不開了，這個時候就自然而然的進行下一個環節轉化(結婚）了。

所以說從產品層面去塑造信任感就是：理性（解決用戶最基本的核心功能訴求）+感性（提供用戶超預期的服務）這樣的過程，需要注意的重點還是解決用戶核心訴求為準，讓產品變得能用并好用，否則一切都是空談。

刨析問題&信任歸因

通過前期的電話訪談和問卷調研，我們發現貝殼租賃用戶對平臺信任感較弱，存在懷疑平臺房源真實性、經紀人服務質量、平臺隱私安全保障等問題，于是我們首先定義了用戶對與社會、對行業、對平臺的信任度初始閾值，用研同學依此為基準進行問卷投放，利用結構方程模型對結果進行驗真及提煉，最終總結出包括平臺背書（例如強化貝殼真房源保障）、隱私保護（用戶個人信息不會被泄露）等 12 個方面的信任關鍵因子。

我們由此梳理出了 10 多個觸點作為搭建租賃業務信任體系的主脈絡，希望通過穩固認知、建立保障、提升質量、構建共情能力等方面入手進行系統改造。

圖 4 信任初始閾值及關鍵因子沉淀

如何搭建產品的信任感

通過前期對關鍵因子的梳理，我們總結出了匹配業務訴求、建設心理預期、強化品牌背書、建立服務保障、營造情感氛圍、精琢設計細節等 6 要素作為產品設計中搭建信任體系的指導準則，下面我會以租賃首頁、心愿單改版等案例逐一拆分來講。

圖 5 分層拆解信任 6 要素

1. 匹配業務訴求

我們通過數據發現，有近 30%的用戶是通過首頁搜索來找房的，但是根據滿意度報告結果來看，好多用戶提出了搜索維度少、關鍵信息不明顯等問題，同時在搜索過程中，我們也看到了用戶對地圖找房、區域搜索功能有更高的期待。

圖 6 用戶基礎訴求

同時我們對舊版本的心愿單進行了數據分析和調研發現，有主動表達找房訴求且成交的用戶僅占總成交人數的 6%左右，心愿單并沒有很好的匹配用戶的找房訴求，原因在哪？我們梳理了 3 個問題所在：1 是舊版本的心愿單簡單的把用戶之前帶看、咨詢、關注過的房源一股腦塞在了一起，變成了房源列表的收藏夾，弱化了心愿 2 個字，對用戶幫助作用不大，而用戶對于找好房、找對房的主動表達訴求并沒有得到滿足；2 是聯系經紀人的商機入口隨處可見，用戶在操作時容易誤觸與經紀人的對話窗口，引起心理反感；3 是用戶添加了自己感興趣的房源到心愿單后，產品沒有提供用戶后續的服務支持，導致用戶慢慢流失掉；

結合上述問題，我們重新定義了首頁和心愿單的業務核心，也就是提供給用戶找房過程中主動表達自己訴求的窗口。在新版首頁搜索中，我們新增了預算入口，并強化了搜索時的區域、地鐵等關鍵信息幫助用戶更好的進行決策；

同時在心愿單中，我們讓用戶可以快速的創建自己的專屬找房卡，根據用戶日常瀏覽、關注等行為向用戶推薦相似房源，滿足其不同維度的找房訴求，另外我們弱化了商機展位，避免不必要的打擾，讓用戶在安靜的場景中持續感受到心愿單帶來的服務幫助。

圖 7 新舊搜索功能對比

圖 8 新舊心愿單功能對比

2. 建設心理預期

大多數人都會遇到這種情況，當決定做一件事時就會產生很高的心理預期，且隨著時間越長，預期會加倍的增長，當結果出現后，一旦和自己的想象出入很大時，就會產生很大的挫敗感，甚至會選擇直接放棄；

由此可見，在做產品設計時，幫用戶建設好心理預期是很重要的；在新版心愿單設計中，就很好的利用了這一點，當用戶在首次進入時，通過宣傳導語能一目了然的感受到我們的服務宗旨， 我們強調一起幫用戶規劃心愿而不是簡單、機械的創建一個表單，整個產品的背后有大數據和平臺的服務支撐，它不僅僅承載的是用戶的找房功能，還能幫助用戶具體描摹出對租房偏好、體驗的直觀感受，讓用戶對心愿單的認知更加清晰明了；另外在用戶點擊關注房源后，我們也會通過提示的方式提前告知其下一步動作，避免用戶搞不清從哪里能看到自己選擇的房子。

圖 9 強調服務主旨，建設用戶心理預期

3. 強化品牌背書&建立服務保障

針對之前滿意度報告我們發現，多數用戶在租房、買房等進行大宗消費時往往都缺乏安全感，因為擔心遇到假房源或者是租金過高的情況，所以在設計產品細節時，我們格外重視品牌和服務保障的宣導，例如在心愿單詳情頁里我們把客觀的瀏覽數據和價格浮動變化進行外露展示，目的就是增加用戶對產品的真實認知，進而獲得安全感；在具體的房源詳情頁里，我們也在宣導貝殼平臺真房源、貴必賠的服務保障，打通產品與用戶之間的信任隔閡。

針對其他品牌長租公寓頻頻爆雷的情況，貝殼第一時間上線了公寓租房安心保障計劃，我們將權益細則根據用戶線上看房、下訂、簽約、支付等流程拆分為遇假房必賠付、未留房必賠付、有違約必賠付、有損失必賠付 4 大權益點進行強化宣導，并將常見案例以問答形式濃縮成風險提示進行外展，加強用戶的安全防范意識。

圖 10 透傳保障權益，強化用戶安全感知

4. 營造情感氛圍

人類的行動和感知經常會受到情感所支配。因此調動用戶積極情緒，打造情感上的認同和共鳴，是產品建立信任體系的重要環節。心愿單所描繪的宗旨就是用心服務幫你找到理想的家，通過描繪家的理念，我們希望帶給用戶也是溫暖、貼心的感受，所以我們從設計層面上對整體的文案進行了精細打磨，讓統一的情感化語言貫穿全流程，例如在找房卡上，我們沒有采用常規的疑問句形式，而是選用設問句的形式來調動用戶情緒，營造溫情氛圍，例如“你的租房預算是多少？預算多少都是自己溫暖的港灣；”“你想在哪里租房？風景優美、交通便利你都可擁有”通過這些精心設計的文案，我們希望給予用戶“我即將要做的事情是與往常不同的，是有意義的”心理暗示，也有心愿單“許愿”過程的儀式感。

5. 精琢設計細節

當人們下班后回到家中后，有些人會選擇從冰箱里隨便翻出點食物湊合著做為晚餐；而有些人則會從超市精心采購食材并根據菜譜烹飪，菜肴出鍋后，還會仔細擺盤，并拍個美照上傳朋友圈；快餐雖然解餓，卻難以滿足用戶更深層次的情感體驗；產品設計也是如此，因為更專業，所以更信賴，專業的產品能帶給用戶更多的信任感和安全感，而精致的 UI 界面就是產品嚴謹、專業度的直接表達。我們可以看到舊版的租賃首頁、心愿單在視覺情感化表達較弱，難以讓用戶產生好感和信任的鏈接，在新版設計的過程中，我們圍繞著“理想的家”的主題進行了精致的場景插畫繪制，并利用文字排版合理拉大了空間，讓原本擁擠的信息內容呼吸感更強；整體色彩延用了租賃頻道的主色調-暖黃色，也是跟主題“家的溫暖”保持契合，帶給用戶一致的視覺感受。

圖 11 精致的視覺表達滿足用戶更深層次的情感體驗

小結

圖 12 信任心智模型

信任心智是可以通過改變關鍵因子進行優化和重塑的，同時人的信任度也是分層級的，分別由自我信任-關系的信任-組織的信任-市場的信任-社會的信任組成，所以產品的信任感營造需要從多方面維度去打造的。我們先要通過數據分析、定性訪談等手段，定義出用戶對于社會、行業、平臺本身的信任邊界在哪，“例如用戶對貝殼平臺提供的服務保障了解多少，真房源的感知程度又是多少”，并基于此梳理出服務專業、信息透明、內容全面、服務專業等關鍵因素作為搭建信任體系的主脈絡。最終的實現主要分為三個層面：本能層上通過精致的插畫設計、人情味的文案話術、明晰的交互引導來凸顯服務場景的儀式感和品質感；行為層上打造公正的信譽評價、完善的客服系統、安全的支付體系、完整的房客信息滿足用戶的訴求；反思層上宣導（真房源、貴必賠）的平臺服務承諾夯實用戶的信任基礎；達成由基礎訴求滿足（用戶能用）——能提供用戶超預期的服務（用戶易用）——再到與用戶彼此建立起良好的信任體系（用戶愛用）——最終打造一個有品牌信仰的服務平臺。

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

文章來源：優設  作者：貝殼KEDC

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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

前言：

入行做車載 HMI 已有 2 年余久，也該沉淀輸出一些行業內容，HMI 行業還是一片藍海，很多設計師都不敢輕易的進入這個新型的行業，覺得有難度、門檻、視覺要求高、這篇文章先帶你入行，文章還是以一些 HMI 基礎知識作為講解，在設計規范方面的內容，我會添加很多干貨結合實際案例講解。

先給大家打一個預防針（規范是用來打破的，本篇文章只做為參考價值）

1. 設計規范包含什么內容

設計規范包含視覺規范和交互規范，本章節先說一下視覺規范，車載交互內容會安排在后續寫作中…

2. 視覺規范：

車載端設計和移動端、web 端設計顯示差別還是蠻大的，最主要的差異就在于布局的不同，接下來我們從文字、顏色、布局、圓角、圖標等角度講解，PS：偶爾還會穿插一些工作心得的內容。

文字規范：

文字是 UI 界面設計中重要的組成元素，對于文字的使用是檢驗設計師基礎功底的時候，用得好壞會直接影響到用戶在使用產品的過程中的一個體驗，文字的使用從這幾個緯度出發：字體選擇、字號大小、顏色、字重、行高.

1. 字體選擇

（我要做一個良心的博主，讓你們避免侵權問題，別再傻乎乎的犯字體侵權的錯誤了）

在做車機系統設計的時候，需要選定該款車機中文、英文、數字或多國語言需要用什么字體。如果在乙方公司呢，客戶會指定給到你字體包，插播一段小插曲（職場心得：當客戶選定字體后，如果該款字體是付費字體，你得先和客戶確認是否得到使用許可，避免后續官司糾紛）在甲方爸爸工作的同學一般會遇到兩種情況：

• 公司已明確字體（請專業字體設計師設計一套）
• 用常規設計的字體，建議使用中文字體：思源黑體、英文/數字：Roboto。如果有做海外項目的，對于 Roboto 未涵蓋的語言，建議使用 Noto Sans 字體。Noto Sans 源自類似于 Roboto 的度量標準，旨在實現視覺上和諧的國際化。

這邊肯定會有人問為什么不能用蘋果字體呢？它不是免費字體嘛？

普及一下：首先該車機系統屬于商業用途，未得到許可使用，這就是侵權，在 app store 上 發布的 app 是可以免費使用的，因為這是在蘋果生態下使用，所以不屬于侵權。

2. 字號大小與字階

車機端的字號大小的制定也是要循規蹈矩

字號肯定要遠大于移動端和 web 端，為了確保文字信息的掃描性，結合了：基于 IDX & 同濟 (2020) 百度 Apollo 中控視覺基礎研究項目，設置清晰的文字階級參數，還有谷歌 Android Automotive OS 研究，以下是用字的規范（標紅色區域是他們之間的區別）

可參考谷歌：字體大小的遵循 4px 倍數大小增量

我們在做項目的時候，規定的字體大小維持在 4px，這樣有助于保持一致性和視覺層次感

用字的注意事項：

字體大小控制在 20px，這個要謹慎使用，一般都是使用在小標簽輔助類的文字上，最小的正文字號為 24px

設定文字規范有兩個好處：

• 文字樣式復用，不管對于設計師還是開發同學來說，都是極大提高工作效率的一件事情
• 對于界面設計來說，有規可循，避免設計時降低整體的視覺感

3. 字體用色規則

• 文字與背景顏色對比度要遵循 WCAG 的標準，需要考慮到無障礙設計需求，因此保持在 4.5:1 – 7:1 對比度，確保文字清晰易讀
• 將注意力集中到最重要的區域內容
• 文本元素之間傳達視覺層次感

4. 字體字重

字重是指一種字體的粗細樣式，下面展示字重的種類：

上實際案列講解：

謹慎使用中等字體粗細 ，盡量別用最粗的字體，這樣會使得頁面感覺差別很大，過度的不是那么自然，沒有了細膩、輕盈的感覺。所以在制定字體規范的時候就盡量將 Bold 字重去掉，如果你想通過加粗字體的方式來和下面信息作為區分，請選擇 Medium 字重（根據實際項目需求來定，我的規范只做參考價值）

5. 字體行高

為什么要加這一 pa，因為這個問題一直有小伙伴問到我，我就一次性解決了，文字模塊需要增加安全距離，這塊比較復雜。不行我后期錄一期視頻講解，下文也有詳細的講解。

字體文本的高度一直困擾著設計師，我該用什么方式去對接開發？在設計過程我們是否可以使用文字字號的高度進行對齊方式，而不是使用文字區域的行高？NO 肯定是不可以的。

微信朋友圈主頁作為案列：

文本的行高肯定是要大于字號的，個人動態的字號為 16px（在@1x 設計稿中）如果是多行文本的時候，微信是手動調整了文本行高（正常 Line：22px 微信實際 Line：20px），當行高為 20px 的時候，需要將文本上移 3px 才能使得圖片和文本視覺在一條線上面，如果按照這個進行開發的話，開發小哥需要在 CSS 屬性過程中注意圖片和文本之間的實際差異，這種左右高度不一致的設計，會直接導致在開發布局過程中變得更加繁瑣。

最后的結論：按照文本的行高來對接開發

普及一下小知識點：車載段落的行高一般為字號的 140%-180%的視覺呈現，提供舒適的閱讀環境給到用戶（取整數）

下面是一些專業性的知識 了解一下：

在設計字體過程中，字體設計師一般都會給字體預留安全距離，讓字體展示更加穩定。

我們在做設計的時候，將字號設置為 30px，但實際字體的空間是需要包含上下部分的安全距離，最終實際高度就變成了 42px（Font:pingfang） 穿插一個小干貨：在不同字體下相同字號，行高（Line height1）是不同的，Ant Design 的 30 號字，行高為 38px （詳見配圖計算方式）

顏色規范：

1. 使用場景

場景：白天陽光暴曬（陽光強度有很多檔位早、中、下午） 、 梅雨季節陰雨連天 、夜晚模式、地下隧道等。

駕駛汽車在室外不確定因素會比較的多，光線強度的干擾尤其重要，照明會根據一天中的時間，天氣，窗戶的色調等等而有很大不同。當你設計的車載應用程序在現實世界中使用時，設計時在計算機上看到的顏色并不總是相同?？紤]顏色亮度如何影響駕駛條件，以及低對比度的顏色在陽光直射下如何被洗掉。始終在多種光照條件下預覽您的應用以查看顏色的顯示方式。如有必要，請進行調整以便在大多數案例中提供最佳的觀看體驗。

最初車機廠商系統大多數都是偏愛深色背景，具有代表性的兩家系統谷歌的 Android Auto 系統和蘋果 Carplay 系統，我在做項目最初也是沿用了深色系。

2. 色彩中的“TF BOY”組合

我想用一句蘋果的官方話說：“配色可以提供交互性，提供視覺連貫性，并且對界面賦予生命力。”這句話總結得真的非常到位。集中注意力認真聽，重點來了，UI設計中顏色的使用法則，在一個頁面設計中需要講究 60-30-10法則， 在60％+30％+10％的比例下創造一種平衡感，是為了視角能夠從一個焦點舒適地過渡到下一個點，避免給駕駛中的我們產生視覺落差很大的感覺。

一個項目車載系統的色彩規范，包括了品牌色、語義色、中性色。

品牌色：又稱為 “強調色“ ，通常一個車載系統只有一個品牌色，也是出現頻率較高的一種顏色，強調色一般使用場景為：tab 的切換選中，按鈕開啟狀態、音樂在播放中的音符小動畫等等 （拿我練習稿講解）

語義色：語義色需要在 UI 界面中承載著具有準確的信息傳達，在復雜場景里顏色的傾向性應十分明顯，減少用戶的理解成本和理解時間，給出行體驗者帶來良好的駕駛體驗。

根據交通標志的定義，紅色表示禁止、停止、危險，那么用戶需要在第一時間識別出這種信息，黃色為警示或不良結果等，綠色則代表通行、成功，上訴說的顏色為狀態色。下面要講一下功能色：說到鏈接色，大家第一時間肯定想到的是藍色。

中性色：主要用于除文字外，還被運用到背景色、分割線、置灰填充、邊框、等場景中 （注：根據背景色的變化，系統其余顏色也隨之而變，這是兩套用色規范切換）。

3. 如何制作 HMI 色彩規范？

盡量使用較少的顏色，顏色飽和度不要過高，避免對駕駛的視覺干擾，吸引駕駛者的注意力，讓老司機翻了車。

避免讓交互性元素和非交互性元素使用相同的配色（如果交互式和非交互式元素具有相同的顏色，則很難知道在何處點擊）。

保持色彩一致性（請勿使用不同的顏色來任意區分單個屏幕中的重復組件。當顏色不能增加價值時，請謹慎使用）。

建立視覺層次（通過不透明度值或者是同一色系，但不要過多的使用不透明度或對比度）。

盡量使用深色背景，這是市面上很多車廠的選擇（不過蔚來、特斯拉、小鵬、carplay 都相繼推出了白色版本，來適配白天，我們項目中后期也加入白天模式，經過路測在陽光很刺眼情況下，黑色會反光，無法看清顯示屏幕內容），最終在實際各種照明條件下，對應用配色方案進行測試。

車載 UI 系統中使用足夠色彩對比度，上述在使用場景中有所提到。

繼續講干貨

(在后續文章安排里我會單獨拿出 WCAG 從感知，可操作性，易于理解和穩定性去詳細講解，這次先挑重點說)

WCAG 全稱是 Web Content Accessibility Guidlines（網頁內容無障礙指南）它們是一組是網頁內容更容易訪問的建議，主要針對殘疾人。一共分為三個級別 A（最低）、AA、AAA（最高）

講個概念：兩個白色的對比度是 1:1 , 白色（#FFFFFF）與黑色（#000000）的對比度為 21:1

做顏色對比的網站鏈接，搭梯子訪問：https://next.rsuitejs.com/en/tools/palette

要滿足 AAA 級準則，文本視覺呈現及文本圖像至少要有 7:1 的對比度，針對大號文本以及大文本圖像至少有 4.5:1 的對比度

總結：

對于顏色運用的細節，是證明了一位設計師的深度、且具備耐久力。上述內容對于顏色的規則不適用全部的設計方案，還是具體項目具體分析，用戶人群不同，運用場景也不一致，比如駕駛者和后排人的屏幕設計內容肯定會有差別。還有一個點在設計需要閱讀內容頁面，例如：微信發來的消息、設置中文本，最好能夠達到 AAA 標準。

布局規范：

HMI 的設計和其余終端設計，最大的差異就在于布局，布局是整個頁面設計的框架，也是最重要的內容之一，在講該模塊內容，我會從實際項目案例出發。開始制作車載 UI 系統，需要和汽車廠商確認車載 UI 可在屏幕中，設計的尺寸區域（注：其中“屏幕”是指應用正常工作空間而不是到邊緣的全部空間，有的廠商把固定按鍵也鑲嵌這塊區域中）。

1. 屏幕尺寸有多少種類別？

我們先要了解一下熱門和主流車機分辨率。眾所周知我們車機上的屏幕尺寸和分辨率種類可以說是種類繁多，在設計過程中設計師主要還是關注屏幕的分辨率是多少？（ 需要我們設計的屏幕為儀表盤、中控、有的車載還包含有副駕駛和后排娛樂屏幕 ）

特斯拉（Tesla）

Model3 1920*1200 15 英寸（底部控件的尺寸為 120 像素是固定 ）Model S/X 用豎屏設計 分辨率 1200*1920

蔚來

ES8 10.4 英寸 分辨率 1600*1200 / ES6 11.3 英寸 分辨率 1600*1400

理想 ONE

比較特殊，它擁有 4 塊屏幕，儀表盤 12.3 英寸 1920×720 / 中控屏 16.2 英寸 2608×720

副駕駛娛樂屏 12.3 英寸 1920×720 / 再外加功能控制屏 10.1 英寸的 1280×720

小鵬

G3 豎屏幕 15.6 1920×1080 P7 控屏，在目前汽車產品中屬于分辨率較高的梯隊 2400×1200 精度超過 2K（普及一下 2K 分辨率標準為 2048×1080 像素）

接下來給大家觀看蘋果的 CarPlay 系統分辨率和谷歌車載系統

CarPlay 系統分辨率：800 * 480、1280 * 720、960 * 540、1920 * 720

相信大家已經找出規律了：在設計橫屏的時候高度基本都為 720px，其余橫屏幕按照比列縮小。

這塊內容非常重要，以至于關乎到后面整個系統的布局方式，蘋果的 CarPlay、谷歌 Android Auto、國內的百度 carLife+等都有自己的車載系統，如有的車企屏幕分辨率不一致，就無法適配成功，會出現拉伸等現象，除非通過定制化服務重新按照廠商的尺寸去重新搭建一套。我們項目中涉及到的屏幕和 CarPlay 尺寸大致很像，但布局方面我們有自己的想法，后面在自適應布局中會提到。

2. 間距的規范制定

制定一組間距值，用于布局中元素和組件之間的固定縱向和橫向的間距，參考規格布局 8 像素點網格上構建，這意味著規范中的 UI 組件和元素之間相隔 8px 的倍數

谷歌 Android Auto 間距規范一共制定了常用的九種數值，P0 – P8

注意事項：提供 4px、12px 間距大小，是為了對齊較小的元素之間的距離，這兩個數值謹慎使用，在大屏幕車載系統內，也有很多間距需要大于 96px，因此在對于這些數值制定規范的要求就是 8px 的倍數即可使用。

說到這邊肯定會有人有疑問，我們在做規范時能不能將間距不設定成 8 的倍數，4、5、6……倍數是否可行呢，當然是可以的，“規矩是死的，人是活的“。只要是按照倍數疊加完全都 OK，如果選定一種倍數，就不能加入其他倍數，如果頁面出現多種間距會使得頁面沒有節奏感，打破了親密性原則。

3. 車載模塊中布局

這部分對于想接觸車載設計同學非常友好。講一下通用的布局，具體交互設計等待我后續更新文章，這次就簡單按照 1920×720 分辨率每個模塊我都會稍微帶一下。

4. 自適應布局

講完前面每個模塊的大致布局，接下來我們來探討一下自適應布局，這個真的非常非常?。?！超級重要，工作后期經常會遇到這個問題，甲方爸爸后續有增加屏幕分辨率的需求。我們前期在布局上花費的時間相對較多（但后期維護起來可以減少你很多工作量，前期需要你規劃好基礎框架）

下面拿實際做過的案列來陳述：拋出一個問題，我們如何將分辨率1920×720頁面的內容轉變成1280×720 呢？

（有同學說，直接丟開發然后他們寫自適應布局）導航相關頁面需要調用地圖的接口，這個開發是可以直接去寫自適應，但其余元素還是需設計師重新來排版。

（還有人說直接縮放比列，調整頁面布局）這個方案在比例相差很大的時候是行不通的，但同比例或者很相近是完全 OK 的，正巧我們項目上有 800×480 分辨率，和 1280×720 極其相似。

（還有人表示不服：折疊某塊區域內容，將該區域內容做成 icon 點擊后彈出來）該方法可以使用在部分內容。

有的模塊內容沒法降低層級，這個辦法就不行，遇到這類的情況我們就直接將這塊內容適配做成 1280×720 尺寸。

如果前兩種辦法都行不通，有的內容就得需要做彈性布局控件了，例如設置頁面，當中間空間很大的時候，放置到短屏中可以根據彈性布局拉伸該控件長度，拉至適配該屏幕的設計，如有需要請留言，后續彈性布局我會寫一篇文章詳細說明使用。

我們項目多種分辨率進行轉化基本都按照這些方案推進下去的，來一句雞湯：辦法總比困難多，真的只要用心做事情，沒有什么困難能難倒你的，還有不要做理想主義者，要做實踐者，實踐才會見真理。

不好意思，一下子說多了沒收住 ，進入正題。謹慎重新改變布局 ： 第一是增加開發工作量，其次就是增加用戶的學習成本，當然，屏幕是豎屏的時候則就需要重新布局，因為橫寬比例變成了相反數值。（旋轉屏幕大家可以去看看比亞迪的唐、漢車型）

上述的內容都是我們一步一個坑踩過來的，“且看且珍惜”。

圓角的規范

1. 如何制定圓角的大小規則

更圓的角和全圓角的使用

對主要動作和組件使用更圓的角（更大的角半徑 or 全圓角），是需要重點突出的，圓形對大多數直線形狀具有更大的視覺影響，如果在頁面有足夠空間的前提下，全圓角形式會和其他按鈕做出反差，鼓勵用戶去點擊。比如：全局消息通知按鈕、電話模塊中接聽、掛斷、下拉負一屏中的按鈕等 （下方是練習稿案列）

較低的圓角和直角的使用

對于不需要 or 低強調的元素，使用較低角半徑 or 0px 圓角=直角，例如：工具欄或列表可以用較小的圓角，專輯封面不需要再強調，所以直接將它降到 0px，我們項目音樂專輯大封面就用的直角，具體問題需要具體去分析，像音樂控件的外輪廓就是帶圓角的，因此專輯封面在容器里面就必須帶有圓角，不然設計風格則就不統一。

還有一個模塊，就是在音樂分類的情況下會有很多專輯封面，我們對比一下兩種方案：有圓角 or 無圓角，兩張圖對比下來，帶有圓角的專輯封面有更明顯的邊緣產生了視覺差的感覺，而直角的專輯看起來就沒有，不易突出，因此不太可能引起我們的注意。所以在網格布局中，圓角的效果更好

谷歌對于圓角的定義

在設定圓角規則時，需要注意一個事項：大小種類不宜太多，不然顯得雜亂無章。

注意：即使應用布局是在 8dp 網格上構建的，但仍會提供 4dp 的半徑大小，以幫助在較小的組件中形成元素。該值應謹慎使用，因為它不是 8dp 的倍數

總結：圓角還是直角沒有對錯之分，合適的才是最好的。

圖標規范：

1. 圖標的種類（車載圖標分為應用程序圖標、系統性圖標）

應用程序圖標

現在 HMI 的設計趨勢已經去掉了應用程序圖標，取而代之的是卡片化的設計方案，簡單說一下卡片式設計有兩大好處，第一，把學習成本降至最低，第二，增大的接觸面積讓駕駛時誤觸率也降到最低，給到用戶最直觀的體驗就是簡單易用。不過有的汽車廠商對這一塊還是有需求，我們就稍微再提一下。

我自己也負責過有應用程序圖標的項目，在 1920×720 中為 160px 分辨率和蘋果@3x 分辨率相同 ；在相對較小的屏幕中應該按照比例同比縮小，如同 800×480 分辨率中首頁中的應用程序圖標為 80px，這是如何計算的呢？

項目中還有一款車型的屏幕分辨率為 1280×720，由于屏幕變窄，應用程序圖標需要縮小到 120px，高度 720 and 480 有一個共同 240 的倍數，所以最終小屏幕的應用程序圖標為 80px，圓角大小也隨之而變：R：24/18/12。其余分辨率按照實際情況使用。

系統性圖標（后續 HMI 組件庫搭建文章中我會詳細的講解）

該系統提供了許多小圖標（代表常見任務和內容類型），供導航欄和選項卡欄中使用。最好盡可能使用這些內置圖標，因為它們是人們熟悉的。

2. 圖標的尺寸

大廠是如何制定圖標尺寸

很多博主在講到圖標尺寸的時候都是一筆帶過，拿著別人得出的結論，卻沒說怎么計算出來，對于車載來說，前期發布這些研究報告的內容極少，所以我對圖標的計算想找到了計算方式，如果大家想知道怎么換算的話可以查看：https://zhuanlan.zhihu.com/p/158099749

根據百度 IDX 駕駛體驗中心，在對于《車載 HMI 界面效果客觀指標實驗報告》在基于視距為 50cm，計算出最小圖標為 9mm 推薦使用 12mm。視覺上的 1cm 的實際像素是多少呢？這就是一個錯誤的想法，上面文章中也有提到屏幕分辨率無法與物理長度單位進行轉換，（實際項目工作經驗告訴我，因為相同的屏幕大小但是分辨率不一樣，所以得出的結果不能共用）

PPI 的計算

我就大概講一下計算原理，這個根據屏幕的分辨率，我做過一款相同屏幕尺寸的車機，都是 8 寸屏幕，但分辨率一個為 1280×720，另外一個則為 800×480，每一個格子為一個像素。

最小圖標尺寸計算

接下來找一下分辨率 1280×720 最大公約數為 80，最后得出結論屏幕的比列 16:9

兩邊比例的平方相加 = 屏幕英寸的平方

根據勾股定理 （16X）^2 +（9X）^2=8×8 最后 x 算出的結果為 0.4357

16:9 的 8 英寸屏幕 長度（單位：英寸）=0.4357×16 =6.9712 寬 =0.4357×9=3.9213

國際計算單位 1 英寸 = 2.54cm

所得出屏幕的長度（單位：厘米）=6.9712×2.54≈17.7cm 寬 =3.9213×2.54≈9.96cm

分辨率：1280×720 寬度約等于 10cm 來計算，720/10 = 72px

分辨率：800×480 由于他們屏幕大小一致（英寸）480/10=48px

得出結論：視覺上的 1cm 的實際像素是有所差距的。

按照設計規則：按 4 的倍數來制定，因此最小圖標為 40px（這個結論只是作為推薦使用，在做項目的時候，變數有很多，甲方爸爸就喜歡超級大的，你也沒辦法，所以還是按照項目來制定）

為了計算這個我還特地的回顧了高中學習的開根號、初中的最大公約數都搬出來了，幸好當時數學還算是個小學霸，哈哈哈~~~

下面展示一下：

谷歌 Android Auto 圖標大小規范

基礎的圖標：主圖標：44px 次要圖標：36px 第三方圖標：24px

頭像的使用：小頭像：56px 中頭像：76px 大頭像：96px

百度車載生態開放平臺下載了他們組件庫，進行了研究。

基礎為圖標：48px 次要圖標 40px（最小圖標尺寸）

這邊還要說一下，對于大圖標的尺寸設定，會有很多尺寸 icon，后續我還會在輸出關于車載圖標詳細的內容，敬請關注吧。

3. 圖標的點擊區域

圖標觸摸區域分為駕駛中使用和靜止中使用

例如說駕駛中需要調節空調的內外循環，原本老車機的硬按鍵替換成了屏幕中的按鈕，原有的硬按鍵已經通過長期使用有了記憶性，有觸感并且操作硬按鍵大小適中，所以在操作中減少了操作時間，降低了危險系數。新能源汽車在設計的時候可以通過增大觸摸區域降低誤操作、無法點擊使得駕駛員視野長時間遠離方向盤的情況，研究表明視野超過 2 秒以上停留，就會存在危險。

靜止使用例如：在設置頁面中調節車輛設置中的屬性，巡航模式、電動尾門打開百分比的調節等等。

谷歌制定觸摸區域的規則

最小觸摸目標尺寸為 76 x 76px，需要在單個圖標設計基礎上再額外增加一塊觸摸區域，易于駕駛中可操作，在靜止使用的話，我們可以遵循蘋果設計規范中最小手指觸摸的區域為 44x44px

這是我根據實際項目并在車內進行路測（路測：駕駛中測試）中得出結論。

還有一種特殊情況：文字+圖標組合點擊區域，在 icon 很小的時候也可以考慮將文字也組合一起，增大點擊區域

4. 圖標設計的統一規則：

• 統一風格
• 統一光源
• 統一線條粗細
• 統一圓角/直角
• 統一傾斜角度
• 斷點的距離、大小統一

5. 最后最一個小插曲：命名的規范

之前經常有小伙伴問我，落地項目的 icon 切圖命名規范怎么制作？就拿我之前做的風格稿首頁來說，首頁音樂卡片中的“下一首”的圖標如何命名。

首先分析這個 icon 在哪個頁面當中 or 用在哪里，接下來就是他的屬性是什么 icon 還是 button，其次就是這個 icon 代表什么，這個 icon 的大小，因為在一個系統里面會有重復功能 icon，所以是有必要增加大?。ㄟ@塊內容是選填項），最后在增加這個 icon 是處于什么狀態下，狀態分為：禁用、常態、按下、選中

最后呈現：首頁_音樂_下一首_常態 ，對接開發應該是翻譯成英文。

有時候英文命名也可以用縮寫比如設置：setting 你直接可以寫成 set icon ic button bt（如果全局使用就使用   All）

總結

聽完小米的發布會，是我觸動較深的一次，視頻彈幕中滿屏刷著““干翻特斯拉”，小米造車一誕生就背負著全民的期望，創始人雷軍已經功成名就，但還是愿意押上全部的聲譽和未來十年的人生，全力 all in，我心中只有敬意，祝小米早日造車成功，“干翻特斯拉”，我們設計師也愿意和這個行業賭一次，行業深耕下去，砥礪前行。

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

文章來源：優設  作者：設計界的影帝

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

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

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