文章摘自：https://blog.csdn.net/YPJMFC/article/details/78979319，非常感謝大牛分享。

echarts中關(guān)于自定義legend圖例文字
首先看一張echarts餅圖: 
 
這張圖很好做，根本不值得提，但是用過echarts的可能會發(fā)現(xiàn)這個圖例有點不一樣，做這個圖例花了我好幾個小時去查，去試。結(jié)合一下echarts中l(wèi)egend圖例的特質(zhì)我們分析一下一些難點：

1.這里的圖例文本包含兩個變量，而formatter提供的變量模板只有name
2.兩個變量的樣式各不相同
3.對齊，換行與居中的應(yīng)用



一個個看：

1.兩個變量
formatter有兩種形式： 
- 模板 
- 回調(diào)函數(shù)

模板

使用字符串模板，模板變量為圖例名稱 {name}
formatter: 'Legend {name}'

這種想要修改name的值，暫時我做不到，歡迎讀者指正

回調(diào)函數(shù)

使用回調(diào)函數(shù)
formatter: function (name) {
    return 'Legend ' + name;
}

我們在返回時可以對name進行修改，從而返回我們需要的值，初步改動是這樣：

var data = [
    {value:40, name:'貨幣'},
    {value:20, name:'股票'},
    {value:40, name:'債券'}
]
formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    return name + ' ' + ((target/total)*100).toFixed(2) + '%';
}


2.兩種樣式
想自定義圖例文字樣式，就要用到富文本：rich，但是在官方文檔中看到的只有模板形式的富文本樣式配置，由1知用模板很難實現(xiàn)自定義name，所以只能用回調(diào)函數(shù)形式，采用富文本的形式對name進行改造：

formatter:  function(name){
    var total = 0;
    var target;
    for (var i = 0, l = data.length; i < l; i++) {
    total += data[i].value;
    if (data[i].name == name) {
        target = data[i].value;
        }
    }
    var arr = [
        '{a|'+((target/total)*100).toFixed(2)+'%}',
        '{b|'+name+'}',
    ]
    return arr.join('\n')
},
textStyle:{
    rich:{
        a:{
            fontSize:20,
            verticalAlign:'top',
            align:'center',
            padding:[0,0,28,0]
        },
        b:{
            fontSize:14,
            align:'center',
            padding:[0,10,0,0],
            lineHeight:25
        }
    }
}

3.對齊，換行與居中
為了圖例與第一行文字對齊，需要設(shè)置兩個樣式的padding，把文字頂?shù)胶线m的位置，然后為了上下行的間隔，設(shè)置了第2行文字的行高，最終呈現(xiàn)了上面圖片的效果。不知道是不是有點地方做煩了，但是能最終實現(xiàn)自己想要的效果，很有成就感。

4.實例
這是完整的組件：

class ConfigChart extends Component {

    constructor(props) {
        super(props);
        this.state = {};
    };
    getOption = () => {
        var data = [
            {value:40, name:'貨幣'},
            {value:20, name:'股票'},
            {value:40, name:'債券'}
        ]
        const option = {
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/> : {c} (p9bfp9t%)"
            },
            // formatter:  function(name){

            //     var total = 0;
            //     var target;
            //     for (var i = 0, l = data.length; i < l; i++) {
            //     total += data[i].value;
            //     if (data[i].name == name) {
            //     target = data[i].value;
            //     }
            //     }
            //     return name + ' ' + ((target/total)*100).toFixed(2) + '%';
            // },

            series: [
                {
                    name: '訪問來源',
                    type: 'pie',
                    radius: [50, 80],
                    center: ['50%', '40%'],
                    label: {
                        normal: {
                            show: false
                        },
                        emphasis: {
                            show: false
                        }
                    },
                    data: [
                        {
                            value: 40,
                            name: '貨幣',
                            itemStyle: { normal: { color: "#5877F0" } }
                        },
                        { value: 20, name: '股票', itemStyle: { normal: { color: "#AA9FFD" } } },
                        { value: 40, name: '債券', itemStyle: { normal: { color: "#F96481" } } }
                    ]
                }
            ],
            legend: {
                x: 'center',
                // y: 'bottom',
                bottom:5,
                itemGap:30,
                itemWidth:5,
                textStyle:{
                    fontSize: 12
                },
                align:'left',
                data: [
                    {
                        name:'貨幣',
                        icon:'circle'
                    },
                    {
                        name:'股票',
                        icon:'circle'
                    },{
                        name:'債券',
                        icon:'circle'
                    }
                ],
                // formatter:'{a|{name}}\n{name}',
                formatter:  function(name){
                    var total = 0;
                    var target;
                    for (var i = 0, l = data.length; i < l; i++) {
                    total += data[i].value;
                    if (data[i].name == name) {
                        target = data[i].value;
                        }
                    }
                    var arr = [
                        '{a|'+((target/total)*100).toFixed(2)+'%}',
                        '{b|'+name+'}',
                    ]
                    // return name + ' ' + ((target/total)*100).toFixed(2) + '%';
                    return arr.join('\n')
                },
                textStyle:{
                    rich:{
                        a:{
                            fontSize:20,
                            verticalAlign:'top',
                            align:'center',
                            padding:[0,0,28,0]
                        },
                        b:{
                            fontSize:14,
                            align:'center',
                            padding:[0,10,0,0],
                            lineHeight:25
                        }
                    }
                }
            },
            backgroundColor: "#fff"
        };
        return option;
    };
    render() {
        const _this = this;
        const { isShow } = this.props;
        return isShow ?
            <div className={StyleClass.configChartWrapper}>
                <ReactEcharts
                    option={_this.getOption()}
                    echarts={echarts}
                    style={{ height: '265px', width: $.width() }}
                    className='react_for_echarts' />
            </div> : null;
    }

}
其實大神上面的數(shù)據(jù)還是有點問題，按照大神這樣做的話，餅狀圖的百分比和算出來的有一點點出入(算出來的值加起來不夠百分百)，其實就是最后一項的百分比和餅狀圖的不一樣，其他的都一樣，所以，我自己修改了幾個小時，終于把它完善了（主要是綠色的代碼），代碼如下：

this.dateEchart.setOption({

color:['#4BC373','#4178E8','#FF5B57'],

             tooltip: {

trigger: 'item',

formatter: "{a} <br/>: {c} (tjvxhdx%)"

},

legend: {

orient: 'vertical',

right:'10%',

top:'40%',

data:['微信支付','支付寶網(wǎng)上支付','銀行支付'],

formatter:(name)=>{

let target,count;

let total=0,num=0;

let l=this.data2.length;

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

total+=this.data2[i].value;

}

for(i=0;i<l;i++){

if((this.data2[i].name==name)&&(i<l-1)){

target=this.data2[i].value;

count=((target/total)*100).toFixed(2)+'%';

return name+': '+count;

}

if((this.data2[i].name==name)&&(i==l-1)){

for(i=0;i<l-1;i++){

num+=parseFloat((((this.data2[i].value)/total)*100).toFixed(2));

}

let yy=(100-num).toFixed(2);

return name+': '+yy+'%';

}

}

}

},

series: [

{

name:'訪問來源',

type:'pie',

radius: ['40%', '60%'],

center:['40%','50%'],

avoidLabelOverlap: false,

label: {

normal: {

show: false,

position: 'center'

},

emphasis: {

show: true,

textStyle: {

fontSize: '30',

fontWeight: 'bold'

}

},

},

labelLine: {

normal: {

show: false

}

},

data:this.data2

}

]

         });

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

文章來源：csdn

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

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

設(shè)計師作為產(chǎn)研環(huán)節(jié)非常重要的角色，相信很多同學(xué)經(jīng)常遇見這么一個情況：

項目迭代周期緊，需求文檔堆成山，面對海量的需求，我們...

要么遷就時間，成了只會畫圖沒有想法的機器。

要么變身肝帝，成了用頭發(fā)做設(shè)計的靈魂畫師。

那么，在緊張的業(yè)務(wù)迭代流程中，我們?nèi)绾巫プ≈攸c，并有的放矢的“集中精力做大事”呢？

所謂：不謀全局者，不足以某一域。

在我們的設(shè)計工作中，很多時候“抓重點”比“好設(shè)計”更重要。

這里我們基于酷大師的產(chǎn)品迭代，給大家分享一個思路。

先給大家介紹一下酷大師的背景：

酷大師產(chǎn)品定位：面向設(shè)計領(lǐng)域的在線建模工具和內(nèi)容平臺。

酷大師當前階段：0-1搭建并完善用戶體驗閉環(huán)。

酷大師階段目標：服務(wù)用戶增長的同時，提高用戶留存。（站點留存→引流→工具留存）

在一周一迭代，交付任務(wù)緊的敏捷流程中。以下是我們在其中的一些實踐：

1、以系統(tǒng)化的視角來分析業(yè)務(wù)

酷大師項目啟動至今，已經(jīng)大致完成了站點從0-1的內(nèi)容搭建。

站點的主要模塊包含：首頁、模型廣場、工作臺、幫助中心、活動中心、課程中心。

他們相互獨立，又相互影響。

獨立好懂，聰明的親們通過名字就能猜出各個模塊的功能，并且這些功能彼此都不可替代。

那么他們是怎么相互影響的呢？

這里引出一個詞：系統(tǒng)化

請看下圖：

同樣一個事物，獨立的看，和把它放到一個系統(tǒng)中看，我們可能會有不同的理解。

同理，當我們把酷大師站點當作一個系統(tǒng)來看時，再結(jié)合我們的業(yè)務(wù)指標，我們可以把這個系統(tǒng)轉(zhuǎn)譯成如下模型：

從抽象到具象，我們把整個模型分為三個指標類型：

1、核心指標：

整個項目為之負責的目標，是評判所有項目行為的基本準則。

2、策略指標：

影響核心指標的所有變量集合，是基于產(chǎn)品策略拆解出來的二級支撐性指標。

3、行為指標：

隨著策略指標的精細化，產(chǎn)品的策略指標最后都會對應(yīng)到一個或者多個具體的用戶行為指標。

我們可以通過模型找到影響業(yè)務(wù)核心指標的重點發(fā)力板塊，也可以通過最底層的行為指標去反推上層的策略指標，進而量化設(shè)計價值。

到這里，我們也就可以在這個系統(tǒng)中，找到對核心指標影響較大的策略指標，他們分別是：注冊UV數(shù)、站點引流UV數(shù)和客戶端引流UV數(shù)。

這三個策略指標對應(yīng)的產(chǎn)品板塊分別是：游客頁、詳情頁和工作臺。

他們就是設(shè)計接下來需要在酷大師眾多產(chǎn)品模塊中著重發(fā)力的項目。

2、以系統(tǒng)化的方式來分析用戶

說完了產(chǎn)品目標和拆解，我們來看看用戶。

市場和用研同學(xué)往往可以在項目前期給我們輸入很多關(guān)于用戶的數(shù)據(jù)，在項目初期，我們可以把這些信息抽象成幾個有代表性的關(guān)鍵詞。

下圖是酷大師用戶關(guān)鍵詞，可以幫助我們定制大的設(shè)計思路，不過在一些更細的業(yè)務(wù)場景中，這些信息并不給到更清晰的設(shè)計指導(dǎo)。

所以在此基礎(chǔ)上，我們可以把這些信息作為一個一個的內(nèi)容切片，通過不同的標準來重新組織這些切片，進而得到一個相對系統(tǒng)化的用戶信息。

我們換一個維度，再做一次梳理分析：

可以看到，當我們把酷大師用戶以不同階段做劃分，從新游客到資深用戶，不同階段的用戶對于產(chǎn)品的訴求有著明顯差異性。

游客和新用戶更注重價值和需求的匹配；資深用戶更注重實際產(chǎn)品價值的最大化。

并且我們對于不同的用戶群體，需要對應(yīng)不同的產(chǎn)品策略，甚至不同的“端”來承接用戶需求。

到這里，我們已經(jīng)可以通過以上信息，在產(chǎn)品的不同鏈路里規(guī)劃不同的設(shè)計策略了。

不過有時候需求對標的用戶群體比較聚焦，以上信息還是不夠說服我們自己的話，還有最后一個技能，就是找到和需求高度對標的用戶（注意，是高度對標），和他們深度交流，為他們做用戶畫像：

（圖中為虛擬數(shù)據(jù)，僅供參考）

PS：這里的用戶畫像需要根據(jù)實際的業(yè)務(wù)需求來針對性的采集信息，這是一個比較靈活的過程，需要設(shè)計師拿捏其中的尺寸。

通過以上三個維度的用戶數(shù)據(jù)，我們就可以根據(jù)產(chǎn)品的不同模塊，找到對標的用戶群體，然后為其做對應(yīng)的設(shè)計策略。

接下來就是第三步：

3、以系統(tǒng)化的思維規(guī)劃設(shè)計策略

面向資深用戶的設(shè)計策略（以客戶端改造為例）：

通過用戶訪談和調(diào)研結(jié)果看，如果用一句話來描述酷大師客戶端的用戶特點的話，應(yīng)該是這樣的：

基于用戶特點和業(yè)務(wù)訴求，我們再結(jié)合服務(wù)模型，我們可以一步步推導(dǎo)出我們的設(shè)計策略。

當設(shè)計策略明確后，結(jié)合實際的業(yè)務(wù)需求，接下來就是有的放矢的設(shè)計實施過程。

面向新用戶的設(shè)計策略（以游客頁改版為例）：

回想我們的生活，最吸引用戶眼球的傳播方式是什么？思前想后，我覺得是電視直播，因為通過它，自詡謹慎機智的我買了人生第一箱「生發(fā)水」...

1、你是否有脫發(fā)的煩惱？ → 訴求

2、用了一堆產(chǎn)品，卻遲遲沒有效果？ → 顧慮

3、我們有北美硅谷防脫技術(shù)+南亞失傳生發(fā)秘方！ → 優(yōu)勢

4、主持人和甲方撕破臉，工廠緊急調(diào)貨、買一送五?。?！ → 驅(qū)動

事實證明，「生發(fā)水」沒有白買，因為后來我發(fā)現(xiàn)這和酷大師游客頁的業(yè)務(wù)目標幾乎一致：“在沒有互動的情況下以很短的時間把用戶從游客轉(zhuǎn)變?yōu)橄M者?！?

通過前面的用戶分析我們可以知道：對于酷大師的游客用戶&新用戶而言，他們更多關(guān)注于產(chǎn)品價值和自己需求的匹配程度。

那么如何在短時間里向用戶傳達信息，并促成注冊轉(zhuǎn)化呢？

我們從訴求->顧慮->驅(qū)動三個維度來去組織我們的優(yōu)勢信息。

因此在面向此類用戶時，除了對他們介紹酷大師的共性價值外，需要重點介紹酷大師的差異性價值，以及足夠有吸引力的驅(qū)動利益點。

如下圖：

基于上文分析，我們再基于目前產(chǎn)品可提供的能力范圍，結(jié)合用戶反饋，把信息和用戶需求做一一對應(yīng)，然后再給出設(shè)計解法。

設(shè)計實現(xiàn)：

正所謂：條條大路通羅馬，各個小道奔安康。只要設(shè)計策略是正確的，那么具體的設(shè)計方案就是合理的，篇幅有限，這里就不做展開。

4、以系統(tǒng)化的模型驗證設(shè)計成果

萬物皆可度量，設(shè)計并不例外。系統(tǒng)是度量設(shè)計成果的最好“尺寸”。

怎么度量？還記得最初的指標模型么？

1、通過技術(shù)手段監(jiān)控用戶的行為指標：

“按鈕點擊、停留時長、滑動屏數(shù)、返回&跳出率...”

2、通過行為指標反推對策略指標的影響。

“按鈕點擊提高 → 頁面引流效果提高?！?

3、通過AB測試、上線前后變量監(jiān)測等其他手段，對比出設(shè)計在數(shù)據(jù)上帶來的變化。

通過以上方法，我們可以直觀的看到設(shè)計在整個項目中的貢獻。

那么在酷大師項目中，這個成果是多少呢？請看下圖：

ps：圖中注冊轉(zhuǎn)化和老用戶登錄轉(zhuǎn)化是以設(shè)計為唯一變量帶來的數(shù)據(jù)提高。

以上就是酷大師從0-1過程中的主要思考點，從前期業(yè)務(wù)拆解分析、用戶調(diào)研，到制定設(shè)計策略，再到設(shè)計實施，最后到成果驗證。

到這里，我們也基本回答了最開始的問題：我們?nèi)绾卧跇I(yè)務(wù)迭代中抓重點，并有的放矢的“集中精力做大事”。

以這樣的思路，我們就能以有限的精力，最大程度保證業(yè)務(wù)的目標的實現(xiàn)，也能對用戶的關(guān)鍵路徑做有效的體驗提升。

寫在最后

1）：設(shè)計師不能盲目跟隨需求，更不能對需求一視同仁，什么都想做好的結(jié)果就是什么都做不好。我們需要有一個自己判斷標準。

2）：“系統(tǒng)”是一個標準，也是一個視角。他影響著我們對業(yè)務(wù)、對需求、對用戶以及設(shè)計的理解。

3）：“系統(tǒng)”本身不重要，用“系統(tǒng)”的思維來看待事物很重要。

4）：多個視角看到的東西，一定比單視角看到的更全面。

以上內(nèi)容，和諸位共勉。

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

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

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

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

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

眾所周知，人機交互是一門集調(diào)研，構(gòu)思，設(shè)計和測試為一體的學(xué)科。作為一門覆蓋多領(lǐng)域的多學(xué)科，包括并不限于心理學(xué)，行為學(xué)，編程，工程，設(shè)計，調(diào)研，和工商管理，現(xiàn)代人機交互的核心已經(jīng)不再是從技術(shù)層面去解決問題， 而是側(cè)重于以多個視角去挖掘問題的本質(zhì)并思考問題背后的價值。也因此，人機交互學(xué)術(shù)界一直以來都試圖尋找一種思考模式，或者理論模型，去將復(fù)雜的思考流程提煉出來。

01

————————

主流交互模型

近三十年來，人機交互領(lǐng)域的方法論可謂百花齊放，盡管許多知名研究機構(gòu)與院校都發(fā)布了不同的設(shè)計模型與流程圖，但是其內(nèi)核終究大致相同（尋找問題——定義問題——設(shè)計——測試）。

以下是近年來國際最主流的七種人機交互設(shè)計模型：

1. 尼爾森諾曼集團設(shè)計流程 （Nielsen Norman Group）

2. 斯坦福大學(xué)設(shè)計學(xué)院設(shè)計流程（Stanford Design Thinking Process）

3. 《情景化設(shè)計:為生活而設(shè)計》 中的設(shè)計流程 （Contextual Design: Design for Life）

4. IBM環(huán)形設(shè)計模型 （IBM Loop Model）

5. 英國設(shè)計協(xié)會雙鉆石設(shè)計模型（Design Council Double Diamond）

6. LUMA 學(xué)院設(shè)計流程（LUMA Institute Design process）

7. Dubberly Design Office 橋型設(shè)計模型（Analysis-Synthesis Bridge Model）

其中，前6種應(yīng)該都是大家相對熟悉的，我們在文末也附上了官方鏈接供大家探索。今天這篇文章我們將簡要的帶大家了解列表中最后一個也是最有特色的一個人機交互模型：橋型模型（Analysis-Synthesis Bridge Model）。

02

————————

橋型交互模型

橋型模型是美國 Dubberly Design Office發(fā)表的設(shè)計流程圖（Analysis-Synthesis Bridge Model），對于不清楚的讀者，此公司的創(chuàng)始人Hugh Dubberly 曾發(fā)布超五十篇人機交互領(lǐng)域的研究型文章，在多個知名設(shè)計協(xié)會掛名，并被錄入美國 ACM 的 SIGCHI Academy， 成為公認對人機交互領(lǐng)域做出最杰出貢獻的人之一。Dubberly 也曾在多個美國知名大學(xué)任職，因此，此模型也是多數(shù)國際人機交互學(xué)科的公認理論。

盡管相較于其他的流程圖，這個流程圖較為抽象，但是其所用的多維度分類卻相對明了的闡釋了設(shè)計的本質(zhì)。如圖所示，橋型模型的x軸分為現(xiàn)在和未來，y軸分為具象和抽象，以此來定義設(shè)計的狀態(tài)。同時也加入了動詞“形容”，“分析”，“研究”，“制作”去定義設(shè)計中的操作。在這個橋型設(shè)計流程中，設(shè)計師從左下角到右下角的過程代表從現(xiàn)象走向抽象再從抽象走向產(chǎn)品的過程，與此同時也代表著從今天走向明天，或者說從問題的現(xiàn)在態(tài)走向解決問題后的未來態(tài)。

現(xiàn)在態(tài)

起點從左下角開始，（what “is”）代表著問題本身，而左上角的（model of what “is”） 代表問題的抽象模型或者問題的本質(zhì)。這兩個階段代表著設(shè)計中的調(diào)研階段（Researching）。此時的設(shè)計師應(yīng)該通過“形容具象的現(xiàn)象”（左下角格子 Describe+Concrete）即收集信息來拓寬對問題的了解然后再進行“分析抽象的模型”（左上角格子Interpret+Abstract）去制作問題模型來更清晰的看到現(xiàn)象的本質(zhì)和規(guī)律。

在這個階段，“世界并不清楚他想要什么樣的設(shè)計”—— Paola Antonelli

在開始階段之所以要抽象出問題模型，是因為作為設(shè)計師不能單純的聽從人們的訴求。當生活中出現(xiàn)一個問題時，生活中人們往往不太清楚自己煩惱的本質(zhì)是什么，要么他們只看到了問題的表面，要么他們被太多因素混淆了。因此在這個階段，設(shè)計師的責任就是去分析問題存在的環(huán)境與原因，并且以人為中心的角度去分析表象下人們的真正需求。也是因此，避免以技術(shù)為中心的分析（machine-centered-research）而選擇以人為中心的研究（human-centered-research）才是交互設(shè)計師應(yīng)有的職責。

在做以人為中心的研究時，收集和分析信息時避免內(nèi)隱偏見（unconcious bias）是非常重要的。這里指由于生長在固定社會和文化下的而無意識帶有的偏見，比如身體健全的人忘記考慮殘疾人的需求，或者經(jīng)常用電子產(chǎn)品的人下意識認為一些復(fù)雜操作很常規(guī)。在設(shè)計里，歧視不止包括在搜集用戶信息時忽略了個別群體，同時也包括設(shè)計師本身所帶的特定視角。一個成功的設(shè)計縱然應(yīng)該滿足大多數(shù)人的需求，但是一個向善的設(shè)計也不應(yīng)該忽視特殊群體的情況。這里不得不提到，雖然現(xiàn)如今很多設(shè)計往往依靠大數(shù)據(jù)來進行設(shè)計，但是大數(shù)據(jù)本身就代表著忽略少部分群體的需求，導(dǎo)致少數(shù)群體的歧視愈發(fā)嚴重，甚至一度威脅到一些小眾的題材。因此在調(diào)研時考慮到人種，年齡，經(jīng)濟情況，教育程度，是否殘疾，和對科技的熟悉度可以更嚴謹?shù)姆治霾煌暯窍聠栴}的影響。

左下角常用的用戶研究方法有情景調(diào)查（contextual inquiry），利益相關(guān)者邏輯圖（stakeholder map)，和參與型研究(Participatory Research)等等。左上角常用的分析方式有帶入虛擬人格（persona）和流程圖（journey mapping）等等。

未來態(tài)

右側(cè)的兩個階段則代表問題的未來態(tài)或者設(shè)計原型態(tài)（prototyping）。右上角的 （model of what "could be")代表問題的未來的可能性，也就是一般說的設(shè)計和構(gòu)思部分，而右下角的（what “could be”）就是將這些未來的可能性做出來，從概念化為產(chǎn)品。

然而如何從右上角的抽象模型到右下角具體設(shè)計呢？在這里便需要了解一個大致的設(shè)計信息層級。

如圖所示，一個設(shè)計的是由多層結(jié)構(gòu)組成的，從抽象到具象分為五個階段，策略（Strategy），內(nèi)容（Scope），結(jié)構(gòu)（Structure），框架（Skeleton），視覺（Surface）。一個嚴謹?shù)脑O(shè)計應(yīng)該是從下而上發(fā)展的（從深層的策略到淺層視覺），并且每次在考慮深層的策略時應(yīng)該避免淺層的干擾。這是因為淺層只是策略的表現(xiàn)的方式，而深層策略才是決定產(chǎn)品核心價值的關(guān)鍵。決定策略（Strategy）時應(yīng)該直接依據(jù)模型左上角“問題的本質(zhì)”來決定要設(shè)立什么樣的產(chǎn)品目標。只有策略定了，才能確定這個產(chǎn)品的內(nèi)容與受眾群體。假如目標是讓盲人點餐，那么內(nèi)容有可能就是在這個頁面提供特殊的菜單形式和電話快捷鍵。而假如目標是讓人聽音樂，那么內(nèi)容可能就是提供音樂推薦與保存。而在結(jié)構(gòu)方面，確立內(nèi)容后只需要一個完善的邏輯，比如用戶的具體使用流程是什么，就可以快速具現(xiàn)這個產(chǎn)品的結(jié)構(gòu)。最后，框架和視覺階段則更多只是一種表現(xiàn)手法的選擇。無論最終選擇如何設(shè)計，只要保證框架和視覺元素在整個產(chǎn)品中保持一致并且符合產(chǎn)品定位即可。

從策略到視覺的過程也就是模型中從右上角到右下角的過程。每個設(shè)計師的目標都應(yīng)該是以具象的產(chǎn)品實現(xiàn)相對抽象的策略。而要想讓視覺和策略緊密聯(lián)系，就應(yīng)該盡可能在每一步的過度時都考慮到前后步驟的銜接是否邏輯通順，避免層與層之間脫節(jié)的現(xiàn)象發(fā)生。盡管在現(xiàn)實中，層與層之間的分隔往往沒有這么清楚，但是這種分層的設(shè)計邏輯可以作為一個有用的構(gòu)思框架，讓設(shè)計師在發(fā)散思維的時候不偏離目標。

而最后即便到了右下角的產(chǎn)品產(chǎn)出，一個完整的設(shè)計流程也不算結(jié)束。一個成功的設(shè)計總是需要多個設(shè)計迭代的。盡管在每一個一個迭代中，右下角可能是最終產(chǎn)出，但是在一個完整設(shè)計流程里，右下角還應(yīng)該連接左下角，將已經(jīng)完成的設(shè)計再一次進行分析和測試并總結(jié)出優(yōu)缺點，再進行下一輪的設(shè)計。

在右上角的設(shè)計部分中經(jīng)常使用的方法有故事模版（story boarding），紙質(zhì)低保真模版（paper prototyping），和以人為中心設(shè)計（human centered design）等等。

總而言之，橋型模型作為國際人機交互院校最常用的模型，從多個角度描述了從一個問題從研究到解決的過程。我們可以看得出，設(shè)計從來都不是一個隨性而為的過程。從左側(cè)的無偏見而系統(tǒng)的分析問題到右側(cè)的遵循結(jié)構(gòu)進行設(shè)計，設(shè)計師都應(yīng)該在一個嚴謹?shù)目蚣芟逻M行思考和設(shè)計，這樣才能做到有針對性的解決問題。在這里也希望大家能多多關(guān)注各類人機交互設(shè)計理念并從中獲取靈感亦或找到適合自己的設(shè)計流程。

03

——————————

其他設(shè)計模型

下面是六種其他主流國際人機交互模型和官方鏈接供大家探索：

1. 尼爾森諾曼集團設(shè)計流程 （Nielsen Norman Group）

研究問題領(lǐng)域（discover），探索不同可能（explore），測試設(shè)計（test)，和傾聽反饋(listen)

官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf

2. 斯坦福大學(xué)設(shè)計學(xué)院設(shè)計流程（Stanford Design Thinking Process）

抽離問題(empathize)，定義問題(define)，尋找靈感(ideate)，制作原型(prototype)，測試成品(test)。

官網(wǎng)鏈接： https://web.stanford.edu/~mshanks/MichaelShanks/files/509554.pdf 

3. 《情景化設(shè)計:為生活而設(shè)計》 中的設(shè)計流程 （Contextual Design: Design for Life）

理解問題(understand)，發(fā)明未來(invent)，情景話設(shè)計(design)，制作原型(validate)，和開發(fā)產(chǎn)品(develop)。

書本鏈接：https://www.goodreads.com/book/show/33805307-contextual-design

4. IBM環(huán)形設(shè)計模型 （IBM Loop Model）

觀察(observe)，反思反饋(reflect)，和制作（make）。

官網(wǎng)鏈接： https://www.ibm.com/design/thinking/page/framework/loop

5. 英國設(shè)計協(xié)會雙鉆石設(shè)計模型（Design Council Double Diamond Model）

發(fā)現(xiàn)(discover)，定義(define)，制作(develop)，傳遞(deliver)。

官網(wǎng)鏈接： https://www.designcouncil.org.uk/news-opinion/what-framework-innovation-design-councils-evolved-double-diamond

6. LUMA 學(xué)院設(shè)計流程（LUMA Institute Design process）

看(looking)，理解(understanding)，制作(making)。

官網(wǎng)鏈接： https://www.luma-institute.com/about-luma/luma-system/

04

——————————

結(jié)語

以上就是本篇的全部內(nèi)容了，希望大家讀完后能對國際主流人機交互領(lǐng)域多了一些了解或者從中獲取一些啟發(fā)。感興趣的讀者們也可以通過點擊介紹中的鏈接直接去官網(wǎng)獲取更詳細設(shè)計理念的介紹。

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

文章來源：站酷   作者：騰訊ISUX

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

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

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

中國互聯(lián)網(wǎng)公司的迅速發(fā)展正在推動著整個軟件行業(yè)的審美革命，在C端產(chǎn)品市場逐漸飽和的情況下，互聯(lián)網(wǎng)大廠正在將資本逐步轉(zhuǎn)移到B端市場的廣闊藍海中。”B端C端化“的設(shè)計理念也應(yīng)運而生，認為可以用C端的模式和思維來進行B端產(chǎn)品的設(shè)計。

二、背景

除了剛剛有說到的資本慢慢向B端市場的藍海轉(zhuǎn)移，還有一點就是中國互聯(lián)網(wǎng)環(huán)境的迅速發(fā)展，智能手機的大范圍普及，工作人群的年輕化，使得人們已經(jīng)熟練的掌握了各種軟件的使用，并且在快速迭代的產(chǎn)品中慢慢變得挑剔、謹慎。

并且不斷優(yōu)化迭代的互聯(lián)網(wǎng)軟件產(chǎn)品也在無形中為用戶完成了底層認知的搭建，一些功能、操作、交互邏輯已經(jīng)深入人心，用戶也已經(jīng)被教育成了"高玩"。

所以如今一些新型B端產(chǎn)品的設(shè)計理所應(yīng)當?shù)脑谟脩趔w驗五要素中最貼近用戶的結(jié)構(gòu)層、框架層 和表現(xiàn)層中與一些C端產(chǎn)品在一定程度保持了一致，這種設(shè)計理念其實也很好的解決了傳統(tǒng)軟件的復(fù)雜、門檻高、難用等痛點，很大程度降低了用戶的認知成本和學(xué)習成本，把高效、簡單、易用的工具帶到大家的日常工作中。

三、對B端C化的理解

對這個概念的理解我認為是："B端產(chǎn)品在使用體驗和視覺感受這兩個方面和C端產(chǎn)品接近"。這是我們設(shè)計師需要特別關(guān)注的，傳統(tǒng)的思維中，大多數(shù)設(shè)計師會認為B端是給公司內(nèi)部人員或者商家使用的，只是一個管理系統(tǒng)，并不需要太過于精細，至于體驗也是停留在“能用就行”的程度。但是在我看來不管是C端還是B端，其實它的使用對象都是“人”，應(yīng)該要遵循人們對于事物的認知和一系列復(fù)雜的人體工程學(xué)操作習慣。兩者都需要關(guān)注用戶在使用時的體驗感受，順暢的使用流程、清晰的信息展示和高效的行為效率，以及有效的引導(dǎo)都能夠快速的幫助用戶完成目標任務(wù)。無論是C端設(shè)計還是B端設(shè)計，滿足這些條件無疑可以給用戶帶來更好的體驗。

但是也不能以偏概全的認為C端的設(shè)計思維可以完全復(fù)用過來。B端產(chǎn)品的場景其實比C端產(chǎn)品還是要復(fù)雜的多，應(yīng)該說是各有各的側(cè)重點，思維和設(shè)計模式上不能完全照搬，下面我就先說說它們各自的不同處，再舉例帶你看看B端產(chǎn)品在哪些方面可以向C端產(chǎn)品借鑒學(xué)習。

四、B端C端的不同

1.使用者不同

B端使用者多是同一個組織集體，以群體為單位進行協(xié)同。比如：老板、部門主管、員工或商戶。而C端使用者相對比較單一，目標用戶群體即是主要使用人群，使用目標、偏好、個性比較明確。

2.業(yè)務(wù)不同：

B端業(yè)務(wù)大多數(shù)會存在多重維度、場景，使用場景跟業(yè)務(wù)緊密相關(guān)，同一個系統(tǒng)不同角色使用時的業(yè)務(wù)處理和所關(guān)注的數(shù)據(jù)信息，側(cè)重點會有很大的不同，需要全局考慮。不同角色使用產(chǎn)品的流程差異大，需要不同業(yè)務(wù)上更專業(yè)的解決方案。而C端業(yè)務(wù)一般維度比較單一，業(yè)務(wù)邏輯相對固定，任務(wù)路徑和展示內(nèi)容比較單一。

 3.價值主張不同：

B端注重效率、成本、管控、數(shù)據(jù)分析等。追求產(chǎn)品的穩(wěn)定性、業(yè)務(wù)的增長性，保證產(chǎn)品性能和技術(shù)上的安全性。而C端注重用戶的體驗、使用簡單、有樂趣。

4.產(chǎn)品思維不同：

B端產(chǎn)品多數(shù)基于服務(wù)思維，工具化思維，更加理性；更多的是幫助B端用戶提高效率，完成業(yè)務(wù)目標。而C端多數(shù)為產(chǎn)品化思維，游戲化思維，更感性，更多的是娛樂和情感的滿足。

5.產(chǎn)品形態(tài)不同：

B端產(chǎn)品注重業(yè)務(wù)的梳理，多數(shù)會用到圖表、表格、模型，多數(shù)產(chǎn)品形態(tài)偏向更垂直行業(yè)或更專業(yè)的面板形態(tài)。而C端更注重用戶的感受，會用到很多夸張的動效，炫彩的顏色。

五、B端C化在產(chǎn)品中具體的表現(xiàn)

1.結(jié)構(gòu)層 

結(jié)構(gòu)層確定各個將要呈現(xiàn)給用戶的選項的模式和順序。結(jié)構(gòu)層是用來設(shè)計用戶如何到達某個頁面，并且要考慮他們完成事情之后能夠去哪里。

具體在B端產(chǎn)品的表單交付場景下可以體現(xiàn)出，以前的B端表單往往過于冗長，借鑒C端一些注冊場景的設(shè)計，把表單拆分成3步內(nèi)的行為步驟，減少用戶的疲憊感提升體驗。

2.框架層

產(chǎn)品的框架層包括：按鈕、控件、照片、文本區(qū)域的位置?？蚣軐邮怯糜趦?yōu)化頁面設(shè)計布局的。

具體在B端產(chǎn)品的列表頁可以體現(xiàn)出，列表頁中整體的按鈕、文本區(qū)域的位置、搜索和篩選的布局設(shè)計其實與C端產(chǎn)品中的商品詳情頁是類似的，遵循用戶的閱讀順序和視覺焦點來進行設(shè)計。

3.表現(xiàn)層

視覺、聽覺、（觸覺）的體驗設(shè)計。多體現(xiàn)在一些情感化的設(shè)計也被運用在了B端產(chǎn)品中。

六、B端C化未來的設(shè)計方向

反觀現(xiàn)在C端產(chǎn)品的一些設(shè)計風格和流行趨勢，有哪些可以運用在B端產(chǎn)品的設(shè)計中呢？

1.3D化

B端因為對數(shù)據(jù)的展示有較強的需求，用戶在使用過程中提高效率的判斷緯度也包括信息數(shù)據(jù)的獲取效率，而3D的視覺在數(shù)據(jù)可視化層面有著天然的優(yōu)勢，可以幫助用戶更快速的理解數(shù)據(jù)維度所表達的核心價值。近年來網(wǎng)速等硬件設(shè)施的升級也為3D化視覺帶來可落地的基礎(chǔ)，設(shè)計師也嘗試在產(chǎn)品設(shè)計中融入更多的3D化元素。

2.情感化

人們對傳統(tǒng)B端產(chǎn)品的印象往往是覺得它們比較枯燥、呆板的，如今一些新型的B端產(chǎn)品的設(shè)計理念也試圖在拋開用戶對于產(chǎn)品的這種既定印象，所以很多產(chǎn)品在往一些娛樂化、IP化的方向嘗試，并且都達到了一些比較好的效果，未來在這方面的思考和嘗試只會越來越多。

3.個性化

B端產(chǎn)品的同質(zhì)化嚴重，所以B端產(chǎn)品也需要從一些產(chǎn)品定位去定制更加富有個性的品牌基因，可以讓用戶產(chǎn)生對產(chǎn)品的感情，達到從同類產(chǎn)品中能夠脫穎而出的目標。

七、總結(jié)：

不管是B端還是C端，目的都是為了解決業(yè)務(wù)場景中遇到的問題，使用對象都是人，都應(yīng)該站在“人性”的角度考慮問題，有人說B端產(chǎn)品一般都不注重設(shè)計，C端產(chǎn)品的設(shè)計更能滿足設(shè)計師對美的追求，我只能說它們的側(cè)重點不同，C端更注重視覺感受，要做到在視覺表現(xiàn)的感性層面吸引用戶，而B端其實更為復(fù)雜，需要做到底層的強大數(shù)據(jù)處理能力，產(chǎn)品的專業(yè)性包括交互、視覺的吸引力，這樣才能從眾多產(chǎn)品中得到用戶的認可并脫穎而出。設(shè)計師還需要不斷打磨細節(jié)和優(yōu)化體驗來吸引和留住用戶。

所以說“B端C端化”也只是在某些方面通用，但核心側(cè)重點不同，不能以偏概全、一概而論，但可以借鑒與參考，B端產(chǎn)品也可以做的很精彩。

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

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

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

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

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

說明：文本縮略是指展示空間不足時，隱去部分內(nèi)容并用'...' 替代。常見情況：

· 文本內(nèi)容長度或高度超過列寬或行高；

· 圖表中空間有限，文本內(nèi)容無法完全顯示；

· 自適應(yīng)調(diào)整時寬度變小。

縮略方式

末端截斷

· 內(nèi)容超過列寬時超出的用 '...' 省略；

· 標簽內(nèi)文案超出由 '...' 省略。

· 長文本截斷的通用模式。

中間截斷

· 設(shè)置開頭、末端保留的字符數(shù)，在末端保留字符前顯示 '...' ；

· 開頭保留字符數(shù)根據(jù)列寬以「顯示盡量多的字符」的原則來確定（極端情況為開頭不保留字符，即為「開頭截斷」；若空間十分有限，則盡量多地保留末端字符）。

· 中間截斷在文本的開頭相同、末尾字符對區(qū)別字段起到關(guān)鍵作用時使用。

場景舉例 1：實例名

包括任務(wù)名、文件名、表名、系統(tǒng)名等等。

典型案例：完整字段如下

company_sales_record_20150116

company_sales_record_20150117

縮略結(jié)果：

場景舉例 2：系列名稱

開頭統(tǒng)一的系列長名稱，通過后半部分來區(qū)分的字段。

典型案例：阿里集團的 BU 完整名稱如下

口碑-本地生活事業(yè)部-北方大區(qū)-北方運營

口碑-本地生活事業(yè)部-七星大區(qū)-東南運營

縮略結(jié)果：

設(shè)計要點

· 重要數(shù)字、時間不建議縮略。

· 名稱列縮略可結(jié)合表頭的拖拉控制顯示與縮略，內(nèi)容完全顯示時 '...' 消失。

· 單行文本省略使用 tooltip，多行文本省略使用展開與收起。

· 描述 '...' 支持 hover，標簽整個支持 hover。

· 標簽數(shù)量多時建議通過折行全部展示，不建議通過 '...' 隱藏后面的標簽。

· tooltip 不承載復(fù)雜文本和操作。

· 根據(jù)使用場景為字段設(shè)置合理的字數(shù)上限和展示空間，避免隱藏過多的內(nèi)容。

· tooltip 的尺寸不應(yīng)過大，建議最大尺寸不超過長 320px、寬 160px。

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

文章來源：站酷   作者：Ant_Design 

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

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

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

  作為身處設(shè)計領(lǐng)域我們或多或少的學(xué)習過色彩知識，同類色、鄰近色、對比色、明度、純度......但好像學(xué)習過是一回事，使用起來由是一回事，我們?nèi)缓蟪３Ｂ牭阶约旱淖髌繁徽f：顏色太臟了，太焦了，太花，氛圍不對....總的來說就是不太好看，于是我們就去看很多很多的好圖，嘗試著學(xué)習別人的色感，讓自己的作品更好看些。

通過參考圖片的色表，并嘗試用到自己的作品里面去

（上圖只是舉下例子）

           自己的作品色感也確實得到了很大的提升呢，但我們也可換其他的圖，畢竟色感好的圖那么多，接著好像就會陷入一個誤區(qū)，過于依賴參考，脫離了參考自己用色就會猶豫不決，就算是參考了用色也不知道為什么要這樣配色，作用是什么......一系列問題浮現(xiàn)在我們的腦海，那么問題產(chǎn)生，思考一下該如何解決問題吧，希望能夠跟大家一起提升色彩知識

色彩基礎(chǔ)知識

既然是了解和提升色彩，那我們不妨先復(fù)習一下色彩的基礎(chǔ)知識

（非常熟悉色彩基礎(chǔ)的可以這里可以跳過）

1、色彩的屬性

①色相

        色相也就是以色彩的稱謂，它是一種顏色區(qū)別于另一種顏色的獨特屬性。例如： 玫瑰紅、桔黃、檸檬黃、鈷藍、群青、翠綠…..我們把紅橙黃藍綠紫，和她們所處的各自之間的紅橙、黃橙、黃綠、藍綠、藍紫、紅紫這六種中間色一共12種色，稱為色環(huán)。

②明度

         我們稱顏色的深淺為明度，若在某一色相的顏色中加入黑或白的成分，便可使明度降低或升高。色彩的明度是眼睛對光源和物體表面的明暗程度的感知，主要是由光線強弱決定這一視覺經(jīng)驗，顏色明度越高，其視覺感受越明亮，反之，則越暗淡。

③ 純度

           色彩的純度是指某一種色相的顏色的鮮艷程度，也叫飽和度，既某一種顏色的自身形象的完整程度。

自然界的顏色，由于受光線變化的環(huán)境因素的影響，單個物體的固有色純度不會是百分百，總有一些偏向，有色彩的各種色都具有飽和度，而區(qū)別其飽和度高低的方法是根據(jù)這種色中含灰色的程度來計算的。

總結(jié)：顏色主要是由色相（顏色）、明度（明暗）以及純度（飽和度）組成

①關(guān)于色相的問題“花”可以通過減少色相，或者保持色相在三種以內(nèi)，來使畫面整潔，具有統(tǒng)一感

②關(guān)于明度的問題“平”可以通過拉大明度的區(qū)間，來達到加強畫面的層次感的表現(xiàn)

③關(guān)于純度的問題“焦”和“臟”根據(jù)畫風對純度統(tǒng)一的要求，通過弱化或增強純度，使畫面純度保持一致

色彩搭配

了解完顏色的基礎(chǔ)知識，再來了解一下色與色之間如何進行搭配，并且會產(chǎn)生什么作用吧

（非常熟悉色彩基礎(chǔ)的可以這里可以跳過）

①同類色

          以某一顏色為基準，與此色相隔15°以內(nèi)的顏色為同類色，主要是指單一色相通過明度、純度變化達到豐富的色彩效果，同類色給人的差距很小，常常給人單一、統(tǒng)一、穩(wěn)定的感覺，可以通過明暗層次來提升畫面的層次感

②類似色

          以某一顏色為基準，與此色相隔30°以內(nèi)的顏色為類似色，類似色比同類色效果搭配更明顯、豐富，可保持畫面的統(tǒng)一感和協(xié)調(diào)性，呈現(xiàn)柔和質(zhì)感，由于搭配效果較為平淡和單調(diào)，可以通過色彩明度和純度的對比，達到強化色彩的目的

③臨近色

          以某一顏色為基準，與此色相隔60°—90°的顏色為臨近色，臨近色對比屬于色相中對比，可保持畫面的統(tǒng)一感，又能使畫面顯得豐富、活潑，可增加明度和純度對比，豐富畫面效果，這種色調(diào)上的主次感能夠增強配色的吸引力

④對比色

          以某一顏色為基準，與此色相隔120°—150°的任一兩色互為對比色，對比色相搭配是色相中的強對比，其效果鮮明、飽滿，容易給人帶來興奮、激動的快感，作品中常以高純度的對比色配色來表達隨意、跳躍、強烈的主題，以吸引人們目光的作用

⑤互補色

          以某一顏色為基準，與此色相隔180°的任一兩色互補，互補色的色相對比最為強烈，畫面相較于對比色更為豐富，更具有感官刺激性

總結(jié)

         不同顏色的搭配能夠產(chǎn)生不同的作用，我們可以根據(jù)自己的需求選擇合適的色彩搭配來運用到自己的界面上來，但是這種基礎(chǔ)的色彩搭配更適合運用到廣告、活動、banner上來，因為他們有明確的主題，確定的角色作為色調(diào)參考，而且能夠作為單獨界面存在，但是像通用界面，變化太多，需要考慮的也太多，單單的色彩搭配不能夠作為唯一的參考標準，想知道是被什么因素所影響的嗎，接著看下去吧~

（對比色）

色彩比例

         上面說道，根據(jù)不同色彩搭配的特點，即可運用到界面上，來達到自己想要的效果，那為什么自己所用到的色相并不多，但界面還會經(jīng)常被點評“花”呢？又該怎么解決這個問題呢？這里可能是色彩比例出了問題

        “花”主要指：色相、明度以及純度多且分布過于分散，從而形成細碎的點、以及使用素材過多（素材自身帶有多種顏色）導(dǎo)致畫面被分割的很細碎，所以在設(shè)計中畫面通常由主色、輔助色和中性色組成，一來是可以很好的規(guī)避這個debuff,二來使畫面整潔，具有統(tǒng)一性，也方便沿用到其他界面

①主色

         主色為核心色彩，它的要點在于——你想讓用戶感受那種情緒，然后通過情緒關(guān)聯(lián)到一個大致的色彩范圍，再進行微調(diào)，常常用到同類色、鄰近色....來使界面即具有層次感的豐富，又可以保持畫面的統(tǒng)一感和協(xié)調(diào)性

②輔助色

         輔助色包含一到若干個和主色不同的色彩，具體的根據(jù)實際場景功能決定，最常用到互補色和對比色，因為視覺差異性大，而輔助色主要功能是作為引導(dǎo)用戶進行交互，比如通知、提醒、取消用紅色，確認、升級用綠色.....而基于引導(dǎo)用戶這個原則，所以越需要被突出的顏色，可以在色環(huán)中離主色越遠，越不需要被突出的則越近，例如：常作為提示作用的按鈕

③中性色

         如果說主色輔助色決定了界面視覺是否出彩，那中性色的應(yīng)用直接決定了頁面能不能正常使用，所以中性色常用于界面中的文字，界面底版等顏色，起到便于閱讀的作用

總結(jié)

        主色、輔助色、中性色的運用使界面具有層次感，避免了因為顏色細碎而導(dǎo)致“花”的問題，而大面積的主色通過色彩情感增強玩家對世界觀的整體感受，而輔助色作用則傳達特定的信息方便玩家的抉擇

色彩心理學(xué)

      剛剛說到主色取決于—想讓用戶感受哪種情緒，那情緒是跟色彩如何進行關(guān)聯(lián)的呢？

①色彩感受

      其實也沒有那么玄乎，包括沒有學(xué)過美術(shù)的人也知道冷色、暖色，但色彩本身并無冷暖的溫度差別，是視覺色彩引起人們對冷暖感覺的心理聯(lián)想

進而產(chǎn)生冷暖感覺，并且產(chǎn)生一系列的情緒

例如：【暖色】人們見到紅、紅橙、橙、黃橙、棕等色后，會聯(lián)系到太陽、火焰等景象

          【冷色】見到藍、紫等色后，則會聯(lián)想到天空、冰雪、海洋等景象

                       

②色彩情緒

         而情緒的產(chǎn)生，主要是因為我們通過顏色—聯(lián)想到景象—從而產(chǎn)生情緒，因為色彩本身是沒有情感的，我們之所以能感受到色彩的情感，是因為長期生活照一個色彩環(huán)境中，積累了許多視覺經(jīng)驗，這些經(jīng)驗與某種色彩刺激呼應(yīng)時，就會激發(fā)某種情緒

例如：黃綠、藍、藍綠等色，使人聯(lián)想到草、樹等植物，產(chǎn)生青春、生命、和平等感覺。紫、藍紫等色使人聯(lián)想到花卉、水晶等稀貴物品，故易產(chǎn)生高貴、夢幻的感覺。至于黃色，一般被認為是暖色，因為它使人聯(lián)想起陽光、麥田等

 ③色彩感受補充

色彩的輕重感

•  高明度： 高明度的色彩使人聯(lián)想到藍天、白云、彩霞、棉花、羊毛等，從而產(chǎn)生輕柔、漂浮、上升等感覺， 所以產(chǎn)生“輕”的感受

•  低明度：低明度色彩容易讓人聯(lián)想到鋼鐵、大理石、礦石等，從而產(chǎn)生沉重、穩(wěn)定、降落等情緒，所以產(chǎn)“重”的感受

              

色彩的軟硬感

色彩的軟硬感主要來自色彩的明度，參考上面，但是純度也是其中的影響因素，例如：

•  高純度： 高純度的色彩都偏硬感，如果明度又低則硬感更明顯，來源于色與色之前的對比，界限明顯

•  中、低純度：色彩成柔和感，因為容易使人聯(lián)想起駱駝、狐貍、貓、狗等動物毛發(fā)，絨織物，而且色與色之間對比的界限不明顯

             

色彩的華麗/質(zhì)樸

色彩的鮮艷、質(zhì)樸、色彩的三要素對此都有一定的影響，其中純度的影響最大，來源于人們對材質(zhì)的認知，例如：

• 高明度、高純度：色彩豐富、強對比，感覺鮮艷、強烈

• 低明度、低純度：單純，弱對比，感覺色彩質(zhì)樸、高雅、暗淡、復(fù)古

過色彩的這個特點，我們可以用于營造即復(fù)古、典雅又華麗的氛圍

         以上只是些舉例說明，希望大家能夠舉一反三，例如：高明度具有擴大感、膨脹感，低明度具有顯小、收縮感等等，在裝潢設(shè)計、服裝設(shè)計常有用到呢，畢竟黑色顯瘦（滑稽）~

          又例如根據(jù)人群劃分，以兒童作為主要用戶人群，色彩都是高明度、高飽和度，因為小孩子視力發(fā)展隨年齡增長逐漸完善，他們在視力未完全發(fā)展的時候能辨別出的顏色有限，對純度明度鮮艷的辨別度高，所以就特別喜歡鮮艷的顏色。

總結(jié)

        我們看到的各種色彩，與以往的記憶及經(jīng)驗產(chǎn)生聯(lián)想，從而形成一系列的色彩心理反應(yīng)，我們可以通過這些心理反應(yīng)的特點，來得到合適的配色并且運用到我們的作品中

色彩運用與感情基調(diào)

上面只是詳細的說明了色彩的各自特點，以及不同的顏色所產(chǎn)生的不同情感，那我們該怎么把所有的知識總結(jié)起來，運用到我們的游戲配色中來呢？下面講的是主色

        首先每個游戲都有自己獨特的美術(shù)風格，而情感基調(diào)則是決定美術(shù)風格的方向，什么是情感基調(diào)：他是游戲傳達給玩家，能夠激起玩家情緒反應(yīng)的核心感受，而玩家對于感情基調(diào)的感知來源于視覺呈現(xiàn)，而我們通過概括游戲的視覺基調(diào)，則很好的幫我們找到美術(shù)風格的方向

例如：

（中世紀戰(zhàn)爭）

（科幻未來）

（古典神話）

       通常游戲的情感基調(diào)都是由概念設(shè)計師設(shè)定的，但介于概念設(shè)計師在國內(nèi)較為稀缺，我們可以通過競品、資料圖片來表達游戲的情感基調(diào)和整體風格，但是被概括的情感基調(diào)內(nèi)容過于遼闊，我們需要仔細拆分成多個細分領(lǐng)域，更方便我們做設(shè)計

例如：科幻戰(zhàn)爭（按時間來劃分有：二戰(zhàn)、冷戰(zhàn)、現(xiàn)代、近未來，未來...）（按風格劃分有：賽博朋克、原子朋克、柴油朋克...）、

        每個細分的領(lǐng)域都有他各自的美術(shù)風格和特點，當然這篇主要講配色，我也先不扯遠了，確定風格之后，我們就可以通過風格特點來確定配色，

例如：我們比較熟悉的風格《賽博朋克》的配色分析

整體色調(diào)：高對比度、高飽和度、低亮度的畫面，整體亮度較低。畫面以冷色調(diào)（藍色、青色、紫色）為主，同時局部用暖色調(diào)（霓虹燈色調(diào)）點綴

畫面為什么以藍色、綠色、紫色為主呢？

綠色：因為早期電腦顯示器上的字符是綠色的。上世紀60到80年代，電腦顯示器均為單色顯示器。一般來說，單色顯示器分為黑白和綠色兩種。由于顯示綠色的熒光粉，在造價上遠低于顯示白色的熒光粉，因此早期單色顯示器多使用綠色字符。綠色從顯示器中流入賽博朋克世界，形成了一種極具風格化的視覺特點

藍色：標準的科幻色，科技代表的是對未知的探索， 宇宙、天空、大海等都和藍色有關(guān)，而這三者都是科學(xué)研究的最原始的對象，其次藍色是短波長顏色，從心理上會給人以 沉穩(wěn)、理智、準確的意象，恰恰與科技給人的感覺相符，最主要的是藍色用于表達科幻的作品相當廣泛，幾乎已經(jīng)達到了眾人皆知的地步

紫色：紫外光色極具穿透力，即使在一片灰霾暗淡之中，也能夠令人一眼望見。強化了光污染下的失真美感，也是賽博朋克的標志性色彩之一。

總結(jié)：

       如果說色彩心理學(xué)是：通過顏色—使玩家聯(lián)想到景象—從而產(chǎn)生代入情緒，那么主色的確定則是：通過景象—感受情緒—關(guān)聯(lián)色彩，至于明度和純度，則取決于風格特點

色彩運用與游戲反饋

            如果說主色是為了通過色彩聯(lián)想產(chǎn)生情緒變化，增強玩家的代入感，那么輔助色的作用就是信息傳達，通過視覺感受色彩能夠在第一時間激發(fā)大腦的最本能反應(yīng),讓玩家直接感受到當前畫面所傳達的視覺信息，并且玩家在交互后瞬時獲得的知覺反饋。

            為了游戲世界更加真實可信，游戲的設(shè)計都是基于現(xiàn)實生活進行創(chuàng)作的，所以游戲美術(shù)設(shè)計師需要將這些最基本的顏色認知加入到游戲設(shè)計中,通常運用這種色彩情感聯(lián)系讓玩家與游戲互動,向他們傳達特定信息。那么我們看看顏色傳遞信息的一些例子吧

例如：

綠色：屬于大自然色系，代表著生命的永恒，給人一種生機勃勃的感覺，充滿了希望和活力，設(shè)計師也常運用綠色描述玩家安全的健康狀態(tài)。例如：血條，滿格的信號，恢復(fù)生命....同時基于綠色在社會的廣泛運用，如交通系統(tǒng)的綠燈等，綠色作為積極的象征已經(jīng)扎根在我們腦海，所以綠色還有和平、安全、同意等的積極聯(lián)想，而和平狀態(tài)、引導(dǎo)性的確定以及打鉤符號也是我們常見的設(shè)計運用

紅色：在現(xiàn)實生活中,交通燈顯示為紅色意味著停止機器上閃爍紅燈標志著危險或故障,紅色的滴狀物象征血等。所以,紅色通常用于表達與綠色截然相反的意境。對某些人來說,紅色暗示危險情況,代表警告或一些消極內(nèi)容。在游戲設(shè)計中,常用紅色描述角色性命危險的狀態(tài),或者一些提示性的警告等

       以上只是部分例子，你們玩游戲的時候不妨注意一下這些有趣的設(shè)定，例如道具、角色的品質(zhì)顏色，勝利失敗的顏色對比區(qū)分，或者是劃分陣營時，通過不同顏色區(qū)分勢力等等

總結(jié)：

       輔助色的確定公式則是：通過顏色—使玩家聯(lián)想景象—引導(dǎo)玩家獲得指示—以致玩家做出反饋，所以顏色的運用在引導(dǎo)玩家、說明功能上起到了非常大的幫助哦

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

文章來源：站酷   作者：筱玥 

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

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

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

第三方地圖的獲取和對接

普通地圖一般都是去對接三方平臺，如百度地圖、高德地圖、騰訊地圖、谷歌地圖等。他們都會提供對應(yīng)的地圖開放服務(wù)。以高德地圖為例，實操一下地圖的獲取和調(diào)色方法以及最后跟開發(fā)交付的流程。

首先登錄高德開放平臺，點擊右上角控制臺

進入控制臺會進入下圖頁面（大家可以多點點查看下平臺的相關(guān)功能內(nèi)容，比如點擊數(shù)據(jù)可視化里面會有集成的地圖可視化效果）

數(shù)據(jù)可視化里面后有一些集成的模板化的效果，大家可以點點看看

回到主題點擊自定義地圖就可以對地圖進行自定義配置了，如下圖： 

頁面上會有好多配置好的模板供你選擇，也可以選擇自己自定義配置，根據(jù)需要選擇一個點擊進去，就進入地圖配置頁面。

上圖中左側(cè)為地圖的可配置項目，點擊選擇可根據(jù)自己的需求對地圖進行配置，包括顏色字體界線等等都可以配置。每個配置項下面都會有很多配置子項，非常詳細，當然里面會有些收費的配置項需要付費后使用，這塊大家可以多點點，根據(jù)自己需求來做調(diào)整。

如果想要獲取3d建筑的樣式把右下角層級超過17后，會顯示建筑，可根據(jù)需求調(diào)整角度和位置。

最后將調(diào)整好的樣式，直接放大全屏后截屏后就可以在設(shè)計稿里使用了。

關(guān)于開發(fā)樣式的對接

將配置好的文件點擊右上角的發(fā)布，直接繼續(xù)點擊發(fā)布

發(fā)布成功后會出現(xiàn)如下的彈框，里面會有一些調(diào)用和使用地圖的方法。

根據(jù)使用需求可選擇不同平臺的使用方式，直接復(fù)制鏈接丟給開發(fā)就好了。

3D地圖建模及貼圖的制作獲取方法

首先看下網(wǎng)上找的兩張參考圖的效果

（圖片源自網(wǎng)絡(luò)，如侵權(quán)刪）

（圖片源自光啟元，如侵權(quán)刪）

3D地圖的獲取和建模的流程

首先大家可以在網(wǎng)上下載地圖的邊界輪廓文件，這里推薦網(wǎng)站-阿里云Data V 的一款地圖選擇器（http://datav.aliyun.com/tools/atlas/index.html#&lat=30.332329214580163&lng=106.72278672066881&zoom=3.5）

這里可以下載對應(yīng)的各個省份 城市的邊界地圖輪廓模型的svg文件，點擊左下角進行下載

以山東省為例將下載好的svg文件導(dǎo)入ai里轉(zhuǎn)換成ai格式，這里要注意的是另存的時候一定要選擇比較早的版本，建議存為Illustrator 8圖中箭頭所指的那個版本，要不然c4d會是識別不出來。

將轉(zhuǎn)換好的ai文件導(dǎo)入c4d，執(zhí)行擠壓。山東省的3d模型就建好了。

模型建好之后需要將模型進行展UV處理（展uv：將一個3D立體的模型拆開，展開成一個平面2D圖片。作用：使模型的貼圖效果更真實。）這里用到展uv的插件（FDUVToolkit 1.0）后臺回復(fù) uv插件可獲取插件。下圖是在c4d中展完uv的樣圖，截圖保存下做備用（為后面的貼圖位置做參考，后面的貼圖需要和展uv的這個圖一一對應(yīng)上）。

將處理好的模型導(dǎo)出obj備用(后面給開發(fā)和在ae中處理效果都會用到這個格式)

漫射貼圖制作的思路

首先在Google Eaeth Pro 上面找個省份對應(yīng)的位置然后執(zhí)行文件-保存就能保存當前展示得地圖紋理了（建議保存兩張貼圖，一張帶邊界和地名的方面后面制作貼圖的時候方便對上位置，第二張就是無邊界地名的作為最終的漫射貼圖）。

將c4d展完uv的截圖、還有制作模型下載的地圖邊界路徑、和剛才的截圖一一拖入ai里面 ，新建一個4k（這里根據(jù)需求建就行）的畫布，將展uv的截圖縮放到畫布大小，如下圖，然后根據(jù)邊界輪廓都對應(yīng)好 執(zhí)行剪切蒙版，最終會得到下面的圖的效果。（切記貼圖的位置一定要和上面uv截圖的位置一致，要不然貼上會是亂的）

高度貼圖的思路（用到軟件QGIS）

首先去地理空間數(shù)據(jù)云上下載素材：選擇對應(yīng)的行政區(qū)位置。

將下載好的數(shù)據(jù)解壓后倒入QGIS軟件；倒入的圖片稍微有些明顯的拼接的縫隙 將圖片位移處理后導(dǎo)出備用。

最后處理完的貼圖如下:（切記貼圖的位置一定要和上面uv截圖的位置一致）

法線貼圖的獲取和處理思路

將處理好的高度貼圖導(dǎo)入到ps中 執(zhí)行-濾鏡-3D-生成法線圖

直接點擊確定，法線圖就做好了，直接導(dǎo)出就可以了，最終效果如下：

這樣整個3d地圖所需要的貼圖就都做好了 。

最后貼圖制作好了之后就是貼到模型上處理效果，因篇幅原因本期暫時不分享了。

城市模型的獲取方法

推薦一個網(wǎng)站用于下載地圖數(shù)據(jù)叫-OpenStreetMap （OpenStreetMap 是一個由地圖制作愛好者組成的社區(qū)。這些愛好者提供并維護世界各地關(guān)于道路、小道、咖啡館、鐵路車站等各種各樣的數(shù)據(jù)。）    

地址：https://www.openstreetmap.org/#map=15/39.9198/116.4536需要的自取。

首次打開是這樣的

點擊導(dǎo)出會進入下面界面，（ps：當前屏幕看到的區(qū)域就是要導(dǎo)出下載的位置）點擊下方的藍色導(dǎo)出按鈕就會提示下載，最終得到一個map.osm的文件。    

下面需要將下載好的地圖數(shù)據(jù)轉(zhuǎn)換成模型，這里用到的軟件是Blender及他的GIS插件公眾號回復(fù)“Blender” 或“GIS插件”領(lǐng)取安裝包（包里有詳細安裝說明）

先打開Blender：選擇 GIS - 導(dǎo)入 - Open Steeet Map xml（.osm）    

 

根據(jù)界面內(nèi)容 選擇剛下載的文件進行導(dǎo)入    

導(dǎo)入后就會得到下面的城市模型了，如下圖：    

執(zhí)行：文件 - 導(dǎo)出 - 選擇后綴是.obj的這個如下圖 就可以將模型導(dǎo)出obj了。    
 

做到這一步本次的分享也要接近尾聲了，后續(xù)的操作可繼續(xù)在Blender里做效果，或者通過Blender導(dǎo)出城市的obj格式的模型文件，用C4D打開做效果。

以上方法只是獲取一些建模的方法，后面一些定制化需求需要針對某一個建筑單獨建模，一般都是基于實測數(shù)據(jù)畫出建筑的整體外輪廓，然后把實際拍攝的大樓四個面的照片進行處理制作為貼圖貼上，篇幅原因大概講一個思路。

最終的效果-深色

淺色效果

關(guān)于開發(fā)對接

一般這種效果都會有好多種實現(xiàn)方法，threeJS，webgl，U3D，Ue4，Ventuz等等，如何對接開發(fā)給開發(fā)提供那些東西，這都取決于開發(fā)使用的工具和實現(xiàn)的方式，這里建議做之前充分跟開發(fā)溝通想要的效果，可以讓他們做個調(diào)研方案，這樣會事半功倍，免得做一些無用功，出現(xiàn)設(shè)計和開發(fā)相互甩鍋來回扯皮的情況。

    

不管是基于什么實現(xiàn)大致的實現(xiàn)思路都是差不多的，基本都是會需要設(shè)計師提供地圖模型、UV貼圖、烘焙貼圖、材質(zhì)參數(shù)等等。   

 

這些東西對接其實跟咱們自己建模貼圖然后在處理材質(zhì)燈光（有些不支持燈光渲染，就需要把燈光的效果烘焙到貼圖上直接給貼圖）這些參數(shù)是一個原理，把基礎(chǔ)模型和對應(yīng)的參數(shù)和貼圖，給到開發(fā)就可以了。  

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

文章來源：站酷   作者：MR小六

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

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

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

toB 產(chǎn)品具有邏輯復(fù)雜、使用門檻高、試錯成本高、用戶角色多樣化的特點，通過用戶教育設(shè)計向用戶傳遞產(chǎn)品價值，提升產(chǎn)品易用性與可學(xué)性。本文從用戶生命周期出發(fā)，明確用戶教育在企業(yè)產(chǎn)品各個使用階段的目標，制定對應(yīng)設(shè)計策略，同時結(jié)合過去一年「企點客服」產(chǎn)品的用戶教育設(shè)計實踐，沉淀了一些系統(tǒng)化設(shè)計經(jīng)驗和思考與大家分享。

不同規(guī)模企業(yè)對用戶教育的需求分層

1. 中大企業(yè)為服務(wù)付費，那中長尾企業(yè)的用戶教育如何滿足？

SaaS 企業(yè)產(chǎn)品的業(yè)務(wù)體系分為“產(chǎn)品+服務(wù)”，不同類型的企業(yè)購買產(chǎn)品的訴求是不同的，對用戶教育的需求也有所差異：

中大企業(yè)往往已經(jīng)擁有成熟的業(yè)務(wù)管理方案，需求明確，愿意為服務(wù)付費，遇到使用問題傾向于尋求服務(wù)支持。對于 SaaS 廠商來說，中大企業(yè)客單價高，售后會提供專業(yè)的服務(wù)跟進（包括定制需求、上門實施服務(wù)等），這些增值服務(wù)也是 SaaS 廠商常見的一種商業(yè)模式。

中長尾企業(yè)希望獲得一個好用的產(chǎn)品，甚至獲得免費的服務(wù)。對于 SaaS 廠商來說，這類企業(yè)客單價低，售后會盡可能節(jié)省客服人力成本，主要在售后培訓(xùn)期及為 VIP 客戶提供服務(wù)。所以需要更多地在產(chǎn)品內(nèi)提供用戶教育來引導(dǎo)自助解決問題，傳遞行業(yè)運營經(jīng)驗來幫助企業(yè)提升業(yè)務(wù)。

本文將重點圍繞中長尾企業(yè)的產(chǎn)品內(nèi)自助式用戶教育來展開。

2. 針對企業(yè)主要角色，用戶教育需要關(guān)注的點？

中長尾企業(yè)往往缺乏成熟的數(shù)字化管理及運營經(jīng)驗，用戶教育可以引導(dǎo)企業(yè)盡快從傳統(tǒng)業(yè)務(wù)思路過渡到數(shù)字化業(yè)務(wù)思路。

管理者、一線員工是企業(yè)最常見的兩類角色，用戶教育需考慮兩者在業(yè)務(wù)流程、績效目標、操作習慣上的差異，并且在產(chǎn)品使用中更好地透傳“后臺配置”和“前臺使用”之間的關(guān)系。另外對于企業(yè)經(jīng)營者來說，員工頻繁流動導(dǎo)致新員工培訓(xùn)成本高，用戶教育可以幫助新員工上手，降低培訓(xùn)成本。

企業(yè)產(chǎn)品用戶教育設(shè)計策略

1. 背景

「企點客服」是「騰訊企點」旗下的一款產(chǎn)品，致力于為企業(yè)的客服/運營團隊提供一站式“服務(wù)營銷一體化”解決方案。產(chǎn)品從界面上分為面向企業(yè)管理員的賬戶中心后臺網(wǎng)站，用于接待配置/員工監(jiān)控/數(shù)據(jù)分析；以及主要面向一線客服的客戶端(工作臺)，主要用于客戶接待。

2. 產(chǎn)品內(nèi)各階段用戶教育解決方案

產(chǎn)品內(nèi)自助式用戶教育包括用戶使用產(chǎn)品過程中，在產(chǎn)品界面內(nèi)能接觸到的提示幫助。根據(jù)用戶使用周期，各階段的教育設(shè)計目標如下：

• 新手期：讓新用戶盡快體驗到產(chǎn)品價值，對產(chǎn)品產(chǎn)生第一步信任
• 使用期：隨任務(wù)場景適時提供幫助，幫助中心提供自助查詢
• 迭代期：新功能有效觸達，老用戶體驗平滑過渡

除此之外的服務(wù)階段（培訓(xùn)期）則包含了產(chǎn)品界面外的教育幫助，如售后培訓(xùn)、客服咨詢等。

新手期：讓新用戶盡快體驗到產(chǎn)品價值，對產(chǎn)品產(chǎn)生第一步信任

用戶在注冊/付費后的第一個階段是新手期（一般為 90 天），這個階段是用戶對產(chǎn)品產(chǎn)生第一步信任的關(guān)鍵時期，直接影響到新客活躍度。新手 Onboarding 引導(dǎo)可以幫助用戶以較低的學(xué)習成本快速上手，盡早體驗到產(chǎn)品價值。

對于首次進入產(chǎn)品界面的用戶來說，最有效的上手引導(dǎo)方式有新手任務(wù)、全局導(dǎo)覽、全局彈窗。進入具體功能頁后用空白頁及內(nèi)容示例來進一步引導(dǎo)使用。

1. 新手任務(wù)：最小閉環(huán)跑通業(yè)務(wù)，發(fā)現(xiàn)產(chǎn)品核心價值

新手任務(wù)是一種高效直接的 Onboarding 方式，幫助獲得可測試的最小閉環(huán)體驗，適用于功能層級復(fù)雜的界面（如產(chǎn)品后臺）、核心價值明確的產(chǎn)品。

用戶初次進入頁面時，新手任務(wù)通常以獨立頁面或彈窗形式主動出現(xiàn)，用明確的任務(wù)步驟來推動達成關(guān)鍵行為。

在企點賬戶中心后臺，我們把企業(yè)管理員的最小任務(wù)目標定義為：搭建最基礎(chǔ)的客服接待系統(tǒng)，對應(yīng)關(guān)鍵操作步驟為：創(chuàng)建客服小組→配置接待組件→接待客戶。界面呈現(xiàn)上，把賬戶中心涉及多個頁面的配置操作提煉到三個單頁里，簡單三步讓管理員馬上測試到真實的客戶接待效果。

完成最小任務(wù)后，可以繼續(xù)進入到任務(wù)清單進行更完整的功能探索，用戶可以根據(jù)自己的節(jié)奏進行學(xué)習。任務(wù)清單依據(jù)用戶使用場景分類，把復(fù)雜的大任務(wù)拆分為多個小的子任務(wù)，減輕用戶心理壓力。進度條給予用戶對學(xué)習進度的掌控感，同時激勵他們繼續(xù)探索。從最小任務(wù)到完整任務(wù)清單，實現(xiàn)從新手到中級的過渡。

2. 全局導(dǎo)覽：手把手全面介紹重點功能

與新手任務(wù)“直接給答案”的方式不同，全局導(dǎo)覽像導(dǎo)游一樣向用戶介紹核心界面及功能，適用于層級較淺的界面、功能較為簡單的產(chǎn)品。

全局導(dǎo)覽通常由一系列有順序、有指向性的輕浮層組成，對于新手來說的確是一種全面的、保姆級的引導(dǎo)方式，但風險是一通引導(dǎo)過后用戶可能什么都沒記住。所以設(shè)計時必須聚焦用戶最關(guān)注的功能點，步驟不宜過多，且必須允許用戶在任意步驟跳出流程。

3. 全局彈窗：核心特性重點聚焦

首次進入產(chǎn)品界面時自動彈出一個或一組模態(tài)窗口。這種形式的侵犯性較強，也就意味著用戶可能會馬上跳過或關(guān)閉，所以要盡量讓用戶 3 秒內(nèi) get 到重點（如需傳達更多信息可在最后一屏附上跳轉(zhuǎn)入口）。企點客戶端新手引導(dǎo)通過三個滑屏重點呈現(xiàn)核心特性：

用戶經(jīng)歷了新手 Onboarding 引導(dǎo)后，在開始使用前對產(chǎn)品有了初步了解，是時候放手讓他們進入頁面探索一番了：

4. 空白頁

空白頁是一種特殊的頁面狀態(tài)，常用于剛進入頁面時無內(nèi)容或功能未開啟時的狀態(tài)?？瞻醉摓樾率钟脩艚榻B當前功能價值，引導(dǎo)使用，同時透傳品牌形象，與用戶建立情感連接，留下良好的第一印象。

空白頁文案千萬不能用簡單的一句“暫無數(shù)據(jù)”就完事兒，而是必須明確告知用戶：功能是什么？功能的價值是什么？接下去要怎么做？作為企業(yè)產(chǎn)品，文案風格力求清晰、理性、積極。

空白頁插圖用于輔助信息可視化表達，視覺風格上需符合企業(yè)產(chǎn)品品牌調(diào)性。例如企點品牌關(guān)鍵詞是“智能、輕快、高效”，那么插圖風格就不能太嚴肅厚重。

圖標型：簡潔抽象，偏情感化與氛圍表達，適用于較易理解、邏輯較為簡單的功能。例如智能客服的知識庫相關(guān)頁面都采用了情感化的圖標型插畫，并用統(tǒng)一的機器人形象打造系列感：

概念圖形型：通過抽象界面和圖形把復(fù)雜邏輯可視化，適用于邏輯比較復(fù)雜難懂的功能。例如機器人任務(wù)型相關(guān)功能：

5. 內(nèi)容示例/模板

面對復(fù)雜功能時，空白頁引導(dǎo)可能無法為用戶提供最直接的使用建議，此時可以采取內(nèi)容示例或模板引導(dǎo)。

團隊協(xié)作工具 Slack 為新用戶提供了三個常見的 channel 示例（左圖）；項目管理應(yīng)用 Trello 預(yù)置了看板示例，同時把引導(dǎo)文案巧妙地融入了看板（右圖）：

除了內(nèi)容示例，對于復(fù)雜功能可以提供配置模板。模板可以通過成熟競品分析、行業(yè)桌面研究或用戶訪談推導(dǎo)得出。后續(xù)根據(jù)用戶反饋逐漸完善調(diào)優(yōu)。

企點賬戶中心的“高級分配規(guī)則”根據(jù)不同客戶類型提供了典型規(guī)則模板，為運營經(jīng)驗不足的企業(yè)提供了有價值的參考：

使用期：隨任務(wù)場景適時提供幫助，幫助中心提供自助查詢

這個階段的用戶訴求是使用順暢，遇到問題能及時得到幫助。合理、有效、適時出現(xiàn)的用戶教育能降低用戶的受挫感，提升產(chǎn)品易用性。

1. 隨任務(wù)場景適時提供觸手可達的幫助

當管理員在產(chǎn)品后臺進行功能配置時，用戶教育的基本目標是幫他高效順利完成任務(wù)，更高階的則是要傳達功能配置邏輯與功能間的聯(lián)動關(guān)系。從“知道怎么配置”到“理解為什么這樣配置”，結(jié)合業(yè)務(wù)理解把功能用深、用好。

在企點賬戶中心，我們把提示信息按出現(xiàn)時機、提示強度、信息顆粒度劃分為三種類型：小燈泡、小灰塊、小問號。這三種類型后續(xù)將沉淀為通用型組件且推廣應(yīng)用于其他業(yè)務(wù)線，降低溝通成本及每次重復(fù)開發(fā)的工作量。

① 第一時間透傳重要信息「小燈泡」

“小燈泡”作為頁面全局引導(dǎo)，負責在用戶進入頁面時第一時間透傳關(guān)鍵信息。小燈泡常駐頁面右上角，進入頁面時默認展開吸引注意，收起后不再自動展開避免干擾。

小燈泡內(nèi)容結(jié)構(gòu)分為基礎(chǔ)部分與拓展部分。基礎(chǔ)部分主要是功能介紹或操作引導(dǎo)，拓展部分包括企點有料、關(guān)聯(lián)模塊、相關(guān)問題。內(nèi)容中可點擊“了解更多”到幫助中心，加強與幫助中心的串聯(lián)。

除了正在進行的小燈泡組件化建設(shè)，后續(xù)我們考慮搭建小燈泡運營后臺，運營/設(shè)計可以配置需要使用小燈泡的頁面，隨時調(diào)整文案及幫助中心鏈接等，無需開發(fā)介入，提升各方效率。

回顧小燈泡教育組件的發(fā)展進程：從應(yīng)用于個別核心功能頁→建立標準化組件并推廣到各業(yè)務(wù)線→搭建運營后臺，逐步提升教育組件的標準化和使用效率。

② 就近外露輕量提示「小灰塊」

“小灰塊”與頁面內(nèi)容緊密結(jié)合，當用戶在操作過程中遇到問題，不用花費過多搜索成本就能就近獲得幫助。小灰塊可提供設(shè)置建議或數(shù)據(jù)解讀，使用通欄形式，可承載多行文本：

③ 原地收納次要信息「小問號」

“小問號”用于收納名詞解釋和非必需外露的提示信息，減輕對操作流程的干擾。小問號主要用于兩個場景：頁面全局說明、重點字段說明。注意同一頁面中不要出現(xiàn)過多小問號，只保證在最需要解釋的地方使用。

2. 承接界面內(nèi)提示，幫助用戶自助學(xué)習并解決問題

產(chǎn)品界面內(nèi)的幫助信息畢竟是有限的，最終所有的幫助信息都會匯聚到幫助中心，完善的幫助文檔是所有幫助信息的基石。

幫助中心的價值在于：對外不僅能幫助已有客戶自助解決問題，還為潛在客戶提供了解產(chǎn)品的機會；對內(nèi)也為產(chǎn)品側(cè)售后客服/經(jīng)銷商提供了學(xué)習機會，面對用戶咨詢時也可快速查詢應(yīng)對。

在設(shè)計企點幫助中心首頁的信息架構(gòu)時，我們?yōu)樾掠脩?老用戶、有明確問題/不明確問題的用戶都提供了針對性的幫助模塊。

① 問題按任務(wù)場景分類，便于理解和查找

按用戶任務(wù)場景把問題分類打包，站在用戶使用角度而不是產(chǎn)品功能角度措辭，符合用戶心智更易理解。點擊某個主題模塊進入該模塊的完整問題列表，再細化分類查找。

② 收集用戶滿意度反饋，衡量幫助效果，為內(nèi)容優(yōu)化提供方向

為了解文章內(nèi)容是否真正對用戶起到了幫助作用，我們在每篇文章末尾附上滿意度統(tǒng)計，為內(nèi)容的迭代優(yōu)化提供依據(jù)和方向：

③ 隨產(chǎn)品迭代保持內(nèi)容更新

幫助中心內(nèi)容并不是一蹴而就的，而是需要長期悉心的運營維護。文章內(nèi)容要隨著每個產(chǎn)品迭代來更新，保證用戶看到的始終是最新最準確的信息。

3. 提供客服咨詢?nèi)肟?，常?guī)問題交給智能客服

當用戶無法自助解決問題，或本身學(xué)習意愿就弱的那些用戶會選擇直接咨詢客服。企點在產(chǎn)品界面、官網(wǎng)、幫助中心、公眾號都提供了客服咨詢?nèi)肟冢尤霗C器人客服來解決低價值、程序化的問題，復(fù)雜、操作性強的問題則轉(zhuǎn)人工跟進。機器人接待的關(guān)鍵是產(chǎn)品知識庫的搭建，可以基于幫助文檔框架進行梳理設(shè)置。

迭代期：新功能有效觸達，老用戶體驗平滑過渡

精心打磨上線了一個新版本，用戶卻不知道、不會用，豈不可惜？迭代期的用戶訴求是新功能上線后能及時被告知，得到使用引導(dǎo)，老用戶習慣平滑遷移，體驗不發(fā)生斷層。定期的新版本觸達也會讓用戶產(chǎn)生“這款產(chǎn)品一直在更新迭代，有發(fā)展?jié)摿Α钡挠∠螅瑤椭嵘脩粽承浴Ｒ龊玫谟脩艚逃?，需要界面?nèi)教育引導(dǎo)和運營推廣共同發(fā)力。

不是所有新功能都需要教育引導(dǎo)，只有在用戶高頻、核心使用路徑上新增或升級的功能、或界面布局發(fā)生重大變動時才需要教育，而技術(shù)上的性能優(yōu)化則不需要教育。

1. 更新前有效觸達，更新后引導(dǎo)上手

新功能的教育路徑分為：更新前的通知觸達、價值傳達和更新后的使用引導(dǎo)。對于客服和管理者，教育目標也有一定的側(cè)重，比如對于一線客服要重點傳達新功能可提升接待效率，對于管理者則需要更多透傳管理配置上的價值。

2. 沉淀迭代期教育規(guī)范，搭建 CMS 運營工具，推動迭代期教育引導(dǎo)標準化

① 新功能引導(dǎo)規(guī)范沉淀

更新后首次打開頁面，首先用全局彈窗進行新功能觸達引導(dǎo)：

從全局引導(dǎo)進入到頁面內(nèi)引導(dǎo)，整體路徑以企點賬戶中心為例：更新后用戶首次登錄，先通過全局“版本更新彈窗”或“菜單綠點提示”觸達用戶，點擊進入具體頁面后再根據(jù)新功能類型采取不同的引導(dǎo)形式：

② CMS運營工具搭建

為進一步提升全局引導(dǎo)的標準化，便于內(nèi)容靈活調(diào)整、降低開發(fā)反復(fù)修改成本，我們設(shè)計并推動了 CMS 運營工具建設(shè)。通過運營工具可配置三端的全局引導(dǎo)（更新彈窗），而頁面內(nèi)引導(dǎo)（綠氣泡等）則沉淀為組件由各業(yè)務(wù)方自行調(diào)用。

3. 保證老數(shù)據(jù)遷移，使用體驗平滑過渡

迭代期除了功能更新后的引導(dǎo)，更重要的是要保證存量用戶體驗的平滑過渡，包括老數(shù)據(jù)遷移和使用習慣的延續(xù)。

對于核心路徑上的重要功能，或更新后界面與使用體驗變化較大的功能，需采用謹慎的升級策略：在不改變老使用體驗的基礎(chǔ)上提供自主升級入口，給用戶緩沖的時間，在一段時間后再執(zhí)行自動升級。

例如企點的「客戶庫」新版引導(dǎo)：升級前在老界面上彈出更新提示，結(jié)合運營策略設(shè)置自動彈出提示的時間點（自動升級前 15、7、3、2、1 天）。升級完成后的新功能引導(dǎo)彈窗中還加入了“退回老版客戶庫”按鈕，點擊后要求用戶填寫退回老版的原因以迭代優(yōu)化功能。

除了上述這種重大功能升級，大部分老功能都是直接原地完成升級的，只需在對應(yīng)位置旁提供輕量化的提示引導(dǎo)（如氣泡、文字 tips 形式）：

培訓(xùn)期：用戶培訓(xùn)分層傳達，教育內(nèi)容多渠道應(yīng)用

企業(yè)客戶購買產(chǎn)品后，產(chǎn)品通常會在 30 天內(nèi)安排售后培訓(xùn)組負責新用戶培訓(xùn)，結(jié)合教育材料用面對面、電話或電腦遠程等方式開展培訓(xùn)。教育材料除了用于對外培訓(xùn)，也可用于對內(nèi)培訓(xùn)，幫助產(chǎn)品服務(wù)側(cè)人員先了解產(chǎn)品統(tǒng)一認知，從而更好地培訓(xùn)客戶。

在教育材料編撰過程中，設(shè)計師應(yīng)充分利用信息可視化手段，把復(fù)雜內(nèi)容轉(zhuǎn)化為清晰易懂的教育內(nèi)容，幫助用戶理解。

1. 用戶分層：基于教育對象、內(nèi)容深度分層傳達

基于教育對象、內(nèi)容深度分層培訓(xùn)，使教育內(nèi)容更有效地傳達。對應(yīng)的教育材料也需根據(jù)用戶分層來進行差異化制作。

我們把企業(yè)產(chǎn)品的教育對象分為管理員和一線客服：針對管理員提供賬戶中心功能使用介紹，如客戶管理/數(shù)據(jù)分析/接待配置等功能，幫助其更高效管理員工和提升業(yè)務(wù)；針對一線客服提供客戶端（工作臺）使用指導(dǎo)，幫助提升客戶接待效率。

從內(nèi)容深度上分為新手版和完整版：新手版中只介紹新手必須要了解的核心功能，更多詳情會提供鏈接到完整版中深入了解；完整版則是詳細的字典式指南。

2. 內(nèi)容組織：把復(fù)雜信息轉(zhuǎn)化為易于理解的信息

提到教育材料，大家的普遍感知是復(fù)雜冗長難消化。比起簡化內(nèi)容縮小篇幅，更重要的是要想辦法講清楚讓內(nèi)容便于理解。通過模塊化、可視化、場景化的手段，把復(fù)雜信息轉(zhuǎn)化為易于理解的信息。

① 可視化：抽象概念可視化，更直觀易懂

一圖勝千言，通過概念圖、流程圖、表格形式，把抽象難理解的邏輯/概念可視化呈現(xiàn)。

② 場景化：結(jié)合業(yè)務(wù)場景，讓配置邏輯更易理解

避免生硬地講解功能，而是結(jié)合業(yè)務(wù)場景給出配置推薦，讓背后邏輯更易理解。

③ 價值導(dǎo)向化：從功能價值和用戶利益出發(fā)，優(yōu)于直白的功能描述

教育材料完成后，除了作為客戶培訓(xùn)資料，還可應(yīng)用于多種渠道，例如：界面內(nèi)提示信息、幫助中心文檔、機器人客服知識庫、企點課堂直播課件、公眾號推文等。

企業(yè)產(chǎn)品用戶教育設(shè)計要點

1. 結(jié)合項目發(fā)展階段選擇教育重點切入口

如果你所在的產(chǎn)品處于初期階段，主要以新用戶為主，那要重點考慮“新手期”與“培訓(xùn)期”的教育引導(dǎo)，幫助新用戶上手并產(chǎn)生產(chǎn)品易用的良好體驗，提升活躍度；如果你的產(chǎn)品已經(jīng)發(fā)展到了成熟期，那要更側(cè)重“使用期”及“迭代期”的教育引導(dǎo)，保證存量用戶的使用體驗。

2. 到用戶身邊去，深入一線使用場景

參與用戶訪談、坐到售后培訓(xùn)組邊上旁聽用戶電話咨詢、作為直播課講師培訓(xùn)用戶…深入一線用戶場景，真實的聲音能幫助你更走心地引導(dǎo)用戶。

3. 尋求高效合作路徑，提升多方溝通效率

以迭代期為例，由于從設(shè)計、開發(fā)到產(chǎn)品宣講到運營制作內(nèi)容的流程很長，最后撰寫新功能推廣內(nèi)容的運營同事對需求背景及設(shè)計思路缺乏深入理解，導(dǎo)致花費大量時間在追溯溝通上。為尋求更高效的合作路徑，建議需求凍結(jié)后讓運營同事盡早介入，及時同步需求背景和設(shè)計思路。設(shè)計師需要在設(shè)計稿中交待清楚需求背景及思考點、遺留點，通過新功能 checklist 共同維護。

4. 思考用戶反饋渠道，為內(nèi)容優(yōu)化提供方向

通過可以實現(xiàn)的一切手段收集用戶反饋。比如《營銷 QQ 升級》相關(guān)教育材料，我們從運營側(cè)了解到教育材料上線前后數(shù)據(jù)對比（使用指導(dǎo)類的咨詢問題占比下降了 6%）；在條件有限的情況下利用平臺自身也可以進行定量（閱讀數(shù)通過騰訊文檔收集）和定性（騰訊問卷收集）的數(shù)據(jù)收集，對反饋為不滿意的用戶進行進一步詢問，從中得出教育材料的優(yōu)化方向；公眾號運營推文則可以通過公眾號平臺自帶的閱讀數(shù)轉(zhuǎn)發(fā)數(shù)等進行統(tǒng)計。

5. 不要在最后才考慮用戶教育

在緊湊的產(chǎn)品迭代中，用戶教育總是最后才被提起，甚至被忽略。經(jīng)常會發(fā)生在臨近上線時突然想起“這里要不要加一個用戶引導(dǎo)”，然后匆匆設(shè)計開發(fā)上線。在需求初期就應(yīng)開始整體思考，不要在最后才想到用戶教育。

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

文章來源：優(yōu)設(shè)   作者：騰訊設(shè)計 

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

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

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