作者：陳大魚(yú)頭

github： KRISACHAN

<input /> 標(biāo)簽是我們?nèi)粘ｉ_(kāi)發(fā)中非常常見(jiàn)的替換元素了，但是最近在刷 whattwg 跟 MDN 的時(shí)候發(fā)現(xiàn) 跟 <input /> 有很多相關(guān)的屬性，選擇器都沒(méi)怎么用過(guò)，所以就開(kāi)篇文章來(lái)整理一下一些比較有趣或者實(shí)用的知識(shí)點(diǎn)。



本篇文章默認(rèn)大家已經(jīng)知道 <input /> 標(biāo)簽的基本用法，不會(huì)做過(guò)多的基礎(chǔ)說(shuō)明~







沒(méi)想到，這些選擇器居然跟 input …

到寫(xiě)文章為止，根據(jù)的 drafts 指出，一共有3大類(lèi)，16種跟 input 相關(guān)的選擇。其實(shí)都挺有用的，善用它們，會(huì)讓我們的用戶(hù)體驗(yàn)更加美好。



下面我們來(lái)分享一下這3大類(lèi)選擇器的作用：







第一類(lèi)：控制系（Input Control States）

選擇器 作用

:enabled 選擇可使用狀態(tài)的 <input /> 元素

:disabled 選擇不可使用狀態(tài)的 <input /> 元素

:read-only 選擇不可編輯狀態(tài)的元素（不僅僅是 <input /> ）

:read-write 選擇可編輯狀態(tài)的元素（不僅僅是 <input /> ）

:placeholder-shown 選擇 placeholder text 顯示時(shí)的元素

:default 選擇在 <button>，<input type="checkbox" />， <input type="radio" />, 以及 <option> 上的默認(rèn)狀態(tài)

第二類(lèi)：輸出系（Input Value States）

選擇器 作用

:checked 選擇處于選中狀態(tài)的 <input type="radio" />

:indeterminate 選擇狀態(tài)不確定的表單元素與 <progress>

第三類(lèi)：偵查系（Input Value-checking）

選擇器 作用

:blank 選擇處于空值時(shí)的 <input>，暫未被瀏覽器支持

:valid 選擇驗(yàn)證通過(guò)的表單元素

:invalid 選擇驗(yàn)證不通過(guò)的表單元素

:in-range 選擇處于指定范圍內(nèi)的 <input />

:out-of-range 選擇不處于指定范圍內(nèi)的 <input />

:required 選擇必填的表單元素

:optional 選擇選填的表單元素

:user-invalid 選擇用戶(hù)輸入但值非法時(shí)的 <input />，暫未被瀏覽器支持

可怕，除了選擇器，居然還跟這些屬性有關(guān)系

<input> 除了有很多相關(guān)的選擇器，結(jié)合不同的type還有不同的屬性可以供使用。他們的作用如下：



屬性 作用

maxlength 可輸入的最大長(zhǎng)度

minlength 可輸入的最小長(zhǎng)度

size 輸入框的長(zhǎng)度

readonly 輸入框是否只讀

required 輸入框是否必填

multiple 輸入框是否可以多選

pattern 輸入框驗(yàn)證規(guī)則

min 可輸入的最小值

max 可輸入的最大值

step 輸入框每次的增量

list 輸入框綁定的可選值數(shù)據(jù)

placeholder 輸入框預(yù)選文字

實(shí)戰(zhàn)

通過(guò)上面的三類(lèi)說(shuō)明，我們大致了解了 <input /> 標(biāo)簽的相關(guān)信息，但是你們以為我是來(lái)列l(wèi)ist的嗎？



當(dāng)然不是，還有實(shí)操啊~







純CSS實(shí)現(xiàn)表單提交功能

首先我們來(lái)看個(gè)效果圖







上面的效果就是一個(gè)純CSS實(shí)現(xiàn)的表單提交功能，這是怎么實(shí)現(xiàn)的呢？下面我們直接看源碼，然后一步一步地來(lái)分拆（不想看的可以直接CV下面的源碼自己做測(cè)試~）



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

    input[type="text"]:invalid ~ input[type="submit"],

    input[type="password"]:invalid ~ input[type="submit"] {

      display: none;

    }

    input[required]:focus:invalid + span {

      display: inline;

    }

    input[required]:empty + span {

      display: none;

    }

    input[required]:invalid:not(:placeholder-shown) + span {

      display: inline;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    賬號(hào)：

    <input data-title="賬號(hào)" placeholder="請(qǐng)輸入正確的賬號(hào)" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">請(qǐng)輸入正確的賬號(hào)</span>

    <br />

    密碼：

    <input data-title="密碼" placeholder="請(qǐng)輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">請(qǐng)輸入正確的密碼</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



第一步：寫(xiě)好基礎(chǔ)結(jié)構(gòu)

首先我們來(lái)把基礎(chǔ)結(jié)構(gòu)給寫(xiě)好，代碼如下：



<style>

    :root {

      --error-color: red;

    }

    .form > input {

      margin-bottom: 10px;

    }

    .form > .f-tips {

      color: var(--error-color);

      display: none;

    }

</style>

<form class="form" id="form" method="get" action="/api/form">

    賬號(hào)：

    <input data-title="賬號(hào)" placeholder="請(qǐng)輸入正確的賬號(hào)" pattern="\w{6,10}" name="account" type="text" required />

    <span class="f-tips">請(qǐng)輸入正確的賬號(hào)</span>

    <br />

    密碼：

    <input data-title="密碼" placeholder="請(qǐng)輸入正確的密碼" pattern="\w{6,10}" name="password" type="password" required />

    <span class="f-tips">請(qǐng)輸入正確的密碼</span>

    <br />

    <input name="button" type="submit" value="提交" />

</form>



掃一眼，嗯，挺簡(jiǎn)單的，都是常用的東西。咦，不對(duì)，這個(gè) pattern 是什么東西？



在這里我們重點(diǎn)分享下 pattern 這個(gè)屬性，這是一個(gè)用來(lái)驗(yàn)證 input[value] 是否合法的屬性，里面的內(nèi)容就是匹配value的，語(yǔ)法便是正則的語(yǔ)法，例子如下：



<label>

    <!--

當(dāng)前pattern的內(nèi)容就是驗(yàn)證input[name="part"]的value的，其規(guī)則如同里面的正則一樣，匹配input[name="part"]的value是否是一個(gè)數(shù)字+3個(gè)大寫(xiě)字母

-->

    <input pattern="[0-9][A-Z]{3}" name="part" />

</label>



當(dāng)然，不同的 input[type] 也會(huì)默認(rèn)帶有相應(yīng)的 pattern ，例如 input[type="email"] 就是默認(rèn)匹配了以下規(guī)則：



/^[a-zA-Z0-9.!#$%&'+\/=?^_`{|}~-]+@a-zA-Z0-9?(?:.a-zA-Z0-9?)$/

1

第二步：重點(diǎn)功能

input[type="text"]:invalid ~ input[type="submit"],

input[type="password"]:invalid ~ input[type="submit"] {

    display: none;

}

input[required]:focus:invalid + span {

    display: inline;

}

input[required]:empty + span {

    display: none;

}

input[required]:invalid:not(:placeholder-shown) + span {

    display: inline;

}



上面便是核心交互的實(shí)現(xiàn)。



首先第一個(gè)class就是保證了在兩個(gè)輸入框不通過(guò)的時(shí)候隱藏，就是當(dāng)輸入框值為空或者不符合驗(yàn)證規(guī)則，則隱藏提交按鈕。



第二個(gè)，第三個(gè)class則是控制當(dāng)用戶(hù)在輸入框輸入內(nèi)容時(shí)，如果不符合驗(yàn)證規(guī)則，則顯示錯(cuò)誤信息，否則則隱藏。



第四個(gè)class則是用過(guò) placeholder 是否存在來(lái)控制錯(cuò)誤信息的顯隱，如果 placeholder 不顯示，則證明用戶(hù)正在輸入，錯(cuò)誤信息則根據(jù)用戶(hù)輸入的值來(lái)判斷是否顯隱，否則則隱藏。



狀態(tài)切換

上面我們有提到一個(gè)選擇器 :indeterminate ，這個(gè)是用于選擇狀態(tài)不確定的表單元素與 <progress> ，玩過(guò)掃雷的人都知道，右擊除了可以選擇紅旗，還可以選擇問(wèn)號(hào)，就是選中，但不確定；又跟 promise 的 pending 狀態(tài)類(lèi)型，介于 resolve 與 reject 之間。



多了 :indeterminate 會(huì)給我們帶來(lái)很多很有趣的體驗(yàn)。



首先我們來(lái)看看它的使用案例。



基礎(chǔ)使用法

先看效果







代碼如下：



<style>

    body {

        background: #333;

        color: #fff;

        padding: 20px;

        text-align: center;

    }

    input {

        margin-right: .25em;

        width: 30px;

        height: 30px;

    }

    label {

        position: relative;

        top: 1px;

        font-size: 30px;

    }

</style>

<form>

    <input type="checkbox" id="checkbox">

    <label for="option">點(diǎn)擊左邊</label>

</form>

<script>

      'use strict';

      checkbox.addEventListener('click', ev => {

        if (ev.target.readOnly) {

          ev.target.checked = ev.target.readOnly = false;

        } else if (!ev.target.checked) {

          ev.target.readOnly = ev.target.indeterminate = true;

        };

      });

</script>



這里面其實(shí)沒(méi)有什么復(fù)雜的實(shí)現(xiàn)，只是做了個(gè)中間態(tài)的判斷，就非常輕松的實(shí)現(xiàn)了radio的三種狀態(tài)切換。



秀到頭皮發(fā)麻法

先看效果







（此天秀效果來(lái)自于 Ben Szabo 的 codepen，有興趣的可以仔細(xì)研究下，我何時(shí)才能有大佬這么優(yōu)秀，嚶嚶嚶~）



輸入框綁定的可選值

先看效果







其實(shí)代碼很簡(jiǎn)單：



<input type="text" list="names" multiple />

<datalist id="names">

    <option value="kris">

    <option value="陳大魚(yú)頭">

    <option value="深圳金城武">

</datalist>



<input type="email" list="emails" multiple />

<datalist id="emails">

    <option value="chenjinwen77@foxmail.com" label="kris">

    <option value="chenjinwen77@gmail.com" label="kris">

</datalist>



<input type="date" list="dates" />

<datalist id="dates">

    <option value="2019-09-03">

</datalist>



這里原理就是通過(guò) <input list="dates" /> 來(lái)綁定需要下拉顯示的數(shù)據(jù)列表 <datalist id="dates"> 。



那么當(dāng)我們要實(shí)現(xiàn)輸入聯(lián)想的時(shí)候，也可以通過(guò)修改 <datalist id="dates"> 的子元素來(lái)實(shí)現(xiàn)，而不是再寫(xiě)一大堆的操作函數(shù)來(lái)實(shí)現(xiàn)。



總結(jié)

JS----預(yù)編譯及變量提升詳解

JS屬于解釋型語(yǔ)言，在執(zhí)行過(guò)程中順序執(zhí)行，但是會(huì)分塊先預(yù)編譯然后才執(zhí)行。因此在JS中存在一種變量提升的現(xiàn)象。搞懂預(yù)編譯環(huán)節(jié)，變量提升自然而然也就懂了。本文講圍繞以下幾點(diǎn)進(jìn)行介紹（變量提升會(huì)穿插在其中講解）：



預(yù)編譯執(zhí)行步驟

示例演示



預(yù)編譯執(zhí)行步驟

預(yù)編譯發(fā)生在函數(shù)執(zhí)行的前一刻，過(guò)程如下：



創(chuàng)建AO對(duì)象，執(zhí)行期上下文（后面更新關(guān)于執(zhí)行期上下文詳解）。

尋找函數(shù)的形參和變量聲明，將變量和形參名作為AO對(duì)象的屬性名，值設(shè)定為undefined.

將形參和實(shí)參相統(tǒng)一，即更改形參后的undefined為具體的形參值。

尋找函數(shù)中的函數(shù)聲明，將函數(shù)名作為AO屬性名，值為函數(shù)體。



至此，預(yù)編譯環(huán)節(jié)結(jié)束，函數(shù)中咯變量按照最終AO對(duì)象中的值開(kāi)始執(zhí)行。接下來(lái)，結(jié)合示例演示就會(huì)更加清晰。



作者：北海北方

鏈接：https://juejin.im/post/5aa6693df265da23884cb571

來(lái)源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。



示例演示

我們先來(lái)看下面這段代碼：

function fn(a){

console.log(a);

var a = 123;

console.log(a);



    function a(){};

    console.log(a);

    

    var b = function(){};

    console.log(b);

    

    function d(){};

 }

 

 //調(diào)用函數(shù)

 fn(1);



作者：北海北方

鏈接：https://juejin.im/post/5aa6693df265da23884cb571

來(lái)源：掘金

著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

接下來(lái)我們來(lái)按照前面的步驟詳細(xì)分析它的預(yù)編譯執(zhí)行過(guò)程：



創(chuàng)建AO對(duì)象



AO{

    //空對(duì)象    

}

復(fù)制代碼

找形參和變量聲明



AO{

    a : undefined,

    b : undefined

}

復(fù)制代碼

形參和實(shí)參相統(tǒng)一



AO{

    a : 1,

    b : undefined

}

復(fù)制代碼

找函數(shù)聲明



AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

復(fù)制代碼預(yù)編譯環(huán)節(jié)就此結(jié)束，此時(shí)的AO對(duì)象已經(jīng)更新為：

AO{

    a : function a(){},

    b : undefined,

    d : function d(){}

}

復(fù)制代碼函數(shù)開(kāi)始逐行順序執(zhí)行：

 function fn(a){

    console.log(a);// 輸出functiona(){}

    var a = 123;//執(zhí)行到這里重新對(duì)a賦，AO對(duì)象再一次更新

    console.log(a);// 輸出123

    

    function a(){};//預(yù)編譯環(huán)節(jié)已經(jīng)進(jìn)行了變量提升，故執(zhí)行時(shí)不在看這行代碼

    console.log(a);// 輸出123

    

    var b = function(){};//這個(gè)是函數(shù)表達(dá)式不是函數(shù)聲明，故不能提升，會(huì)對(duì)AO中的b重新賦值

    console.log(b);//輸出function(){}

    

    function d(){};

 }

復(fù)制代碼至此，函數(shù)執(zhí)行完畢，銷(xiāo)毀AO對(duì)象。

我們?cè)賮?lái)看幾個(gè)例子，熟悉函數(shù)的預(yù)編譯過(guò)程。

示例一：

function test (a,b){

    console.log(a);

    c = 0;

    var c;

    a = 3;

    b = 2;

    console.log(b);

    function b(){};

    function d(){};

    console.log(b);

} 

//調(diào)用函數(shù)

test(1);

復(fù)制代碼它的AO創(chuàng)建過(guò)程如下(此處省略創(chuàng)建空AO對(duì)象的部分，下文同)：

AO1{

    a : undefined,

    b : undefined,

    c : undefined

}



AO2{

    a : 1,

    b : undefined,

    c : undefined

}



AO3{

    a : 1,

    b : function b(){},

    c : undefined,

    d : function d(){}

}

復(fù)制代碼至此預(yù)編譯環(huán)節(jié)完成，開(kāi)始執(zhí)行：

function test (a,b){

    console.log(a); //輸出1

    c = 0; //給AO對(duì)象中的c重新賦值0

    var c;//預(yù)編譯環(huán)節(jié)變量提升，不再讀此行代碼

    a = 3;//給AO對(duì)象中的a重新賦值3

    b = 2;//給AO對(duì)象中的b重新賦值2

    console.log(b);//輸出2

    function b(){};//預(yù)編譯環(huán)節(jié)變量提升，執(zhí)行時(shí)不再讀這行代碼

    function d(){};//預(yù)編譯環(huán)節(jié)變量提升，執(zhí)行時(shí)不再讀這行代碼

    console.log(b);//輸出2

} 

//調(diào)用函數(shù)

test(1);



復(fù)制代碼示例二：

這個(gè)例子中我們引入全局對(duì)象GO。GO與AO的過(guò)程類(lèi)似

function test(){

var a = b = 123;

}

test();

復(fù)制代碼此函數(shù)的執(zhí)行過(guò)程：先把123賦給b,再聲明a，再把b賦給a。此時(shí)變量b未經(jīng)聲明就賦值，為全局變量。預(yù)編譯環(huán)節(jié)如下：

GO1{

b : undefined

}

AO1{

a : undefined

}



GO2{

    b : 123;

}

AO2{

    a : 123;

}

復(fù)制代碼示例三 ：

console.log(test);

function test(test){

   console.log(test);

   var test = 234;

   console.log(test);

   function test(){};

}

test(1);

var test = 123;

復(fù)制代碼我們來(lái)看它的預(yù)編譯過(guò)程：

//執(zhí)行前（頁(yè)面加載完成時(shí)）生成GO對(duì)象

GO1{

    test : undefined

}

GO2{

    test : function(){}

}



//輸出 function test(){...}



//執(zhí)行test()前生成它的AO對(duì)象

AO1{

    test : undefined

}

AO2{

    test : 1

}

AO3{

    test : function test(){}

}



//預(yù)編譯結(jié)束開(kāi)始執(zhí)行test(1);

AO4{

    test : 234

}

//輸出234

復(fù)制代碼示例四：

function demo(){

    console.log(b);

    if(a){

        var b = 100;

    }

    console.log(b);

    c = 234;

    console.log(c);

}

var a;

demo();

a = 10;

console.log(c);

復(fù)制代碼我們來(lái)看它的預(yù)編譯過(guò)程：

//首先是全局對(duì)象GO 

GO1{

    a : undefined

}

G02{

    a : undefined,

    demo : function demo(){}

}

//執(zhí)行demo（）前預(yù)編譯,由于demo中的c未聲明就使用故為全局對(duì)象



//輸出undefined

GO3{

    a : undefined,

    demo : function demo(){}

    c : undefined

}

//此時(shí)a還是undefined，故不執(zhí)行if()代碼塊

//輸出還是undefined

GO4{

    a : undefined,

    demo : function demo(){}

    c : 234;

}

//輸出234

GO5{

    a : 10,

    demo : function demo(){}

    c : 234;

}

//輸出234

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

在我看來(lái)，界面設(shè)計(jì)的視覺(jué)層面主要可以分為三個(gè)維度來(lái)解析：信息傳遞、視覺(jué)美化、創(chuàng)意創(chuàng)新。

在做交互文檔之前，我們先要明白什么是交互文檔、為什么要做以及做了給誰(shuí)看。

一、什么是交互文檔 

交互文檔，即交互設(shè)計(jì)說(shuō)明文檔。英文 Design Requirement Document ，簡(jiǎn)稱(chēng)DRD。主要是用來(lái)承載設(shè)計(jì)思路、設(shè)計(jì)方案、信息架構(gòu)、原型線框、交互說(shuō)明等內(nèi)容。

二、為什么需要交互文檔          

有些人可能對(duì)文檔這種東西比較反感，尤其是從事工作不久的朋友。其實(shí)工作得越久，越會(huì)發(fā)現(xiàn)文檔的重要性，它可以幫助你理清思路，并記錄下來(lái)，便于回顧。

通常，一個(gè)比較基礎(chǔ)、規(guī)范的交互文檔（DRD）由：文檔封面、更新日志、文檔圖例、設(shè)計(jì)背景/思路、業(yè)務(wù)流程、頁(yè)面交互、全局通用說(shuō)明、廢紙簍八部分組成。當(dāng)然，這不是絕對(duì)，你可以根據(jù)你的實(shí)際工作需要進(jìn)行增減。

比如，如果是C端產(chǎn)品的話，用戶(hù)調(diào)研的結(jié)論、用戶(hù)畫(huà)像、用戶(hù)體驗(yàn)地圖等等，都可以放進(jìn)去給看的人一個(gè)參考。尤其是在如今這么關(guān)注用戶(hù)體驗(yàn)、產(chǎn)品思維的一個(gè)大環(huán)境下，這些數(shù)據(jù)支撐很有力量。同時(shí)還可以幫助開(kāi)發(fā)人員、界面設(shè)計(jì)人員培養(yǎng)產(chǎn)品思維、體驗(yàn)思維，大家一起將產(chǎn)品變得更好。

其次，交互文檔的整潔與美觀也很有必要。相信在過(guò)去幾年不少人有遇到過(guò)這樣的產(chǎn)品經(jīng)理（兼交互），他們會(huì)輸出一些有時(shí)連他們自己都看不太懂或者直接從其它競(jìng)品截圖來(lái)的線框圖。當(dāng)開(kāi)發(fā)和界面設(shè)計(jì)的人提出質(zhì)疑的時(shí)候還美其名曰線框不重要，重要的是里面的業(yè)務(wù)邏輯。。。其實(shí)用產(chǎn)品思維想，交互文檔就是交互設(shè)計(jì)師的產(chǎn)品，而看的人就是用戶(hù)，保持良好的可讀性，可謂至關(guān)重要。

1、文檔封面

交互文檔的封面如上圖，通常包括產(chǎn)品的名稱(chēng)、Logo、版本號(hào)以及版本發(fā)布時(shí)間、所屬部門(mén)、對(duì)接負(fù)責(zé)人/對(duì)接人。

2、更新日志

我們都知道，在產(chǎn)品的迭代的過(guò)程中，需求/功能是會(huì)不斷調(diào)整的。而更新日志，就是為了迭代而生。它一般由修改日期、修改內(nèi)容、修改人、版本號(hào)和備注組成。如果是新增的功能或模塊，建議是要加上鏈接可直接跳轉(zhuǎn)至新增內(nèi)容的，如上圖。

版本號(hào)也是同理，都應(yīng)加上對(duì)應(yīng)的版本鏈接，便于查看者回溯之前的內(nèi)容，與當(dāng)前的新版本形成對(duì)比。這一點(diǎn)對(duì)開(kāi)發(fā)人員來(lái)說(shuō)很重要，其次對(duì)于新同事深入理解產(chǎn)品也能起到很大的幫助。

修改日期，通常是按時(shí)間倒序排列，查看起來(lái)會(huì)比較方便。

3、文檔圖例

文檔圖例，顧名思義就是關(guān)于此文檔的一些輔助說(shuō)明，目的是為了讓讀者更好地理解文檔。如上圖的：操作/跳轉(zhuǎn)圖例、標(biāo)簽圖例、流程圖例以及手勢(shì)操作圖例。

4、設(shè)計(jì)背景/思路

因?yàn)槲医衲陮?duì)接最久的是一個(gè)B端產(chǎn)品的項(xiàng)目，所以整理了一個(gè)產(chǎn)品畫(huà)像，僅供參考。

5、業(yè)務(wù)流程

業(yè)務(wù)流程圖，不是操作流程圖也不是頁(yè)面流程圖。它是產(chǎn)品的整體業(yè)務(wù)流程，直接和業(yè)務(wù)掛鉤，可以說(shuō)是產(chǎn)品的核心流程。

例如淘寶APP，買(mǎi)家購(gòu)物由始至終的流程就是它的業(yè)務(wù)流程。通常用泳道圖的形式展示，多數(shù)情況下是由產(chǎn)品經(jīng)理繪制。

以上是我所負(fù)責(zé)產(chǎn)品的核心業(yè)務(wù)的流程圖。因?yàn)槭荁端產(chǎn)品，涉及角色較多，針對(duì)3個(gè)代表性角色分別進(jìn)行了繪制，僅供參考。(涉及到保密協(xié)議，所有關(guān)鍵詞都去掉了)

6、頁(yè)面交互

（1）信息架構(gòu)

信息架構(gòu)屬于用戶(hù)體驗(yàn)的結(jié)構(gòu)層，是產(chǎn)品的骨架。一般是由產(chǎn)品經(jīng)理或者更高層的管理人員給出大框架。除非是大的產(chǎn)品迭代，否則不會(huì)大改。

（2）權(quán)限說(shuō)明

如果是C端產(chǎn)品，權(quán)限這一塊相對(duì)簡(jiǎn)單，比較好整理的。B端產(chǎn)品涉及角色眾多，可能要單獨(dú)拎出來(lái)分析整理。以上僅供參考，大家具體情況具體分析。若是功能很單一的產(chǎn)品，交互文檔中也可省去這個(gè)模塊。

（3）操作流程圖

產(chǎn)品操作流程圖就是通過(guò)圖形化的表達(dá)形式，闡述產(chǎn)品在功能層面的邏輯和信息。它能夠更清晰、直觀地展示用戶(hù)在使用某個(gè)功能時(shí)，會(huì)產(chǎn)生的一系列操作和反饋的圖標(biāo)。

上圖是登錄、注冊(cè)和找回密碼的操作流程圖。僅供參考。模板源文件下載，后臺(tái)回復(fù)“交互”即可。

（4）頁(yè)面線框圖

頁(yè)面線框圖，是通過(guò)圖形化的表達(dá)形式，闡述產(chǎn)品在頁(yè)面層面的信息。包括： 

【頁(yè)面標(biāo)題】即每一個(gè)頁(yè)面的對(duì)應(yīng)標(biāo)題，一般就是導(dǎo)航欄標(biāo)題

【頁(yè)面內(nèi)容】以黑白為主，保證信息規(guī)整易讀

【交互說(shuō)明】用標(biāo)簽將其對(duì)應(yīng)起來(lái)，包括交互邏輯、操作流程及反饋、元素狀態(tài)、字符限制、異常/特殊狀態(tài)、相關(guān)規(guī)則 等等

【主流程線】只需要畫(huà)出主流程線即可，千萬(wàn)不可太多太雜，時(shí)刻考慮讀者的感受

以上是注冊(cè)/登錄的線框圖和詳細(xì)的交互說(shuō)明。將重點(diǎn)內(nèi)容用紅色標(biāo)記，可以讓查看者一目了然更好理解文檔。

7、全局通用說(shuō)明

（1）常用控件

常用控件類(lèi)似UIKit，通常將極具復(fù)用價(jià)值的控制整理在一起，方便及時(shí)調(diào)用。

（2）復(fù)用界面

（3）時(shí)間規(guī)范

（4）缺省頁(yè)匯總

五、總結(jié)

文檔、軟件只是工具，最重要的還是要落地、實(shí)行起來(lái)才能對(duì)產(chǎn)品有所幫助。所以在撰寫(xiě)文檔的每時(shí)每刻，都應(yīng)該站在“讀者”的角度思考，他們看的時(shí)候感受會(huì)是怎樣的，會(huì)覺(jué)得很難理解嗎？

轉(zhuǎn)自-站酷

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

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里

圖標(biāo)是 UI 設(shè)計(jì)中極為重要的一個(gè)環(huán)節(jié)，我們?cè)谧雒總€(gè)界面的設(shè)計(jì)幾乎都會(huì)涉及到圖標(biāo)的表達(dá)，出色的圖標(biāo)設(shè)計(jì)可以讓界面表達(dá)更加精致、有趣。圖標(biāo)的設(shè)計(jì)往往也體現(xiàn)著設(shè)計(jì)師的基本功，因此除了日常多畫(huà)提升對(duì)圖標(biāo)造型的把控力外，我們也更需要了解和學(xué)習(xí)圖標(biāo)設(shè)計(jì)的趨勢(shì)類(lèi)型，從而幫助我們提高在設(shè)計(jì)中的效率。

基于自我學(xué)習(xí)的目的，平時(shí)在瀏覽一些設(shè)計(jì)網(wǎng)站時(shí)也會(huì)做相對(duì)應(yīng)的收集。因此本文主要對(duì)于圖標(biāo)設(shè)計(jì)的 「類(lèi)型、風(fēng)格」 進(jìn)行了整理，以及自己對(duì)于每種圖標(biāo)類(lèi)型的思考。

圖標(biāo)的類(lèi)型劃分

設(shè)計(jì)網(wǎng)站上的圖標(biāo)可以說(shuō)是多種多樣，不同類(lèi)型的圖標(biāo)都有著獨(dú)特的魅力。例如，線性圖標(biāo)簡(jiǎn)潔輕量、面性圖標(biāo)厚重直接，當(dāng)然同一種類(lèi)型的圖標(biāo)也具有很多不同的表現(xiàn)形式。

因此基于本人對(duì)圖標(biāo)的理解，大致劃分為三類(lèi)：線性、面性、線面結(jié)合。結(jié)合三種基礎(chǔ)類(lèi)型的表達(dá)方式可以創(chuàng)造出各式各樣的表現(xiàn)形式。

線性圖標(biāo)

使用輕量的線條勾勒的圖標(biāo)，整體感受也趨向于精致、細(xì)致而具有銳度感。不同的線條表現(xiàn)具有不同的視覺(jué)感受，細(xì)線輕量、直線硬朗、曲線柔美。

1. 線型圖標(biāo)基礎(chǔ)分析及想法

粗細(xì)對(duì)比

粗細(xì)不同，圖標(biāo)的力度和重量感就會(huì)有差異。粗線的圖標(biāo)，視覺(jué)關(guān)注力來(lái)說(shuō)會(huì)更加突出，但較于細(xì)線的圖標(biāo)也會(huì)顯得粗壯、厚重。細(xì)線的圖標(biāo)，精致、透氣、秀美。

但在設(shè)計(jì)時(shí)需要依據(jù) 「整體的 UI 風(fēng)格」 來(lái)決定線的粗細(xì)，而并非單純的考慮圖標(biāo)的關(guān)注度，反而更需要考慮圖標(biāo)與界面整體的平衡感。

柔度對(duì)比

直角與圓角決定了外形的感知和風(fēng)格的走向，如下圖對(duì)比中看出，圓角越大圖形越趨向于可愛(ài)柔美（如下右圖），圓角越小則越直接、硬朗和陽(yáng)剛（如下左圖）。因此剛或柔或中間值完全取決于早期對(duì)于整體風(fēng)格的定調(diào)。

繁簡(jiǎn)對(duì)比

除了輕量化和簡(jiǎn)潔之外，圖標(biāo)的識(shí)別性也是極為重要。如下左圖，「過(guò)度簡(jiǎn)潔」 導(dǎo)致圖標(biāo)失去該有的識(shí)別度而出現(xiàn)歧義，而下右圖的元素疊加使得圖標(biāo)稍顯復(fù)雜。在繁與簡(jiǎn)的平衡中，應(yīng)該保持在不影響圖標(biāo)識(shí)別度的情況下，最大限度的提升圖標(biāo)的簡(jiǎn)潔程度。

特征的識(shí)別度

除了簡(jiǎn)潔程度，也需要考慮圖標(biāo)該有的特征。例如下圖 「評(píng)論」 圖標(biāo)的案例，當(dāng)我把圖標(biāo)中的「三個(gè)點(diǎn)」 去掉時(shí)，圖標(biāo)依舊具有 「對(duì)話/評(píng)論」 的表意，而當(dāng)我把下面的 「箭頭」 去掉保留 「三個(gè)點(diǎn)」 時(shí)，則會(huì)出現(xiàn)歧義，它可以被表意為 「更多」 的意思，因此在設(shè)計(jì)圖標(biāo)時(shí)需要對(duì)于表意做精準(zhǔn)把握，避免歧義出現(xiàn)。

保持圖標(biāo)的特征美感

如下面的 「心形」 圖標(biāo)，下左圖是我們具有普識(shí)性的圖標(biāo)，與圓形組合之后依然保持著原有的形態(tài)美感。但我們不時(shí)也會(huì)看到第三種設(shè)計(jì)，整體外形雖然保持著愛(ài)心，但為了與整體風(fēng)格「一致」 強(qiáng)行對(duì)外輪廓進(jìn)行切割，與原圖形在美感上則稍微有些出入，這也是我們需要思考的關(guān)鍵點(diǎn)。

組合型比例

組合型的比例會(huì)影響到圖標(biāo)的精致程度，準(zhǔn)確的 「比例值」 能讓整體的造型趨向平衡，更具有美感。如下圖案例嘗試了兩組不同比例的效果，這里以圖標(biāo)窄邊作為 「基準(zhǔn)值」 進(jìn)行嘗試。當(dāng)內(nèi)形為外形的 1 : 2 時(shí)（下圖2），圖標(biāo)的整體視覺(jué)效果較為平衡；當(dāng)大于 1 : 2 并接近 4 : 3 時(shí)，圖標(biāo)內(nèi)部結(jié)構(gòu)會(huì)顯得過(guò)于飽滿(mǎn)。而小于 1 : 2 并接近 4 : 1 時(shí)（下圖3）則會(huì)產(chǎn)生稀疏不緊湊的效果。（這里的比例只是案例需要，實(shí)際設(shè)計(jì)以最終的視覺(jué)感知為準(zhǔn)）

2. 線性類(lèi)型拓展

基礎(chǔ)的理論，結(jié)合延展的應(yīng)用，可以迸發(fā)出更多的創(chuàng)意想法。線形圖標(biāo)也并非只有一種設(shè)計(jì)形態(tài)。通過(guò)以下案例，可以看看線型圖標(biāo)設(shè)計(jì)類(lèi)型的多樣性。

極簡(jiǎn)風(fēng)格

整體風(fēng)格極為簡(jiǎn)約，沒(méi)有多余的線條，通過(guò)線條還原圖形的本質(zhì)，外形 「簡(jiǎn)單」 卻具有很強(qiáng)的識(shí)別性，在視覺(jué)感知上輕松、干凈。

極簡(jiǎn)的風(fēng)格圖標(biāo)在于對(duì)圖形的把控，多一筆可能顯得復(fù)雜，少一筆可能影響識(shí)別程度。以上圖為例，圖標(biāo)的組合元素保持在 2 個(gè)左右，整體較為干凈。

實(shí)際應(yīng)用：Instagram、Airbnb、Facebook、Twitte

雙色

相較于 「純色的圖標(biāo)」 更具表現(xiàn)力，細(xì)節(jié)上也會(huì)更加豐富，形態(tài)感知上多了一層變化。結(jié)合顏色的疊加、對(duì)比、互補(bǔ)提升了圖標(biāo)的層次感和豐富度。

同色系：同為冷色系、暖色系或同一色系的表達(dá)形式。如下圖案例，以暗色為主色，亮色點(diǎn)綴提亮，使得圖標(biāo)具有一種高光提亮的感覺(jué)。

另一組案例是亮色主色結(jié)合暗色，整體圖標(biāo)效果還算可以，但較亮的顏色沒(méi)有應(yīng)用在圖標(biāo)的關(guān)鍵特征上，使得圖標(biāo)第一眼的感知稍有減弱。

對(duì)比互補(bǔ)色：顏色跨度更大，層次更加分明。如下圖案例，紅色與藍(lán)色的撞色之后相比單色的圖標(biāo)更加出彩和具有記憶點(diǎn)。

實(shí)際案例：騰訊動(dòng)漫我的頁(yè)面

透明度變化

本質(zhì)上與上面一種為一個(gè)類(lèi)型的設(shè)計(jì)，通過(guò)透明度的疊加和變化，提升圖標(biāo)的層次感和空間感，降低圖標(biāo)的壓迫性。

實(shí)際案例：愛(ài)奇藝9宮格圖標(biāo)

漸變層次疊加

漸變帶出了圖標(biāo)的質(zhì)感，結(jié)合「不同深度」或「不同飽和度」的變化，讓圖標(biāo)更具有細(xì)節(jié)和層次。

黑白+品牌色

黑白色作為主色調(diào)，結(jié)合品牌色作為點(diǎn)綴色。與常規(guī)的黑白圖標(biāo)相比，既產(chǎn)生了變化，同時(shí)兼顧了品牌色的透出。

實(shí)際案例：大眾點(diǎn)評(píng)攻略頁(yè)面圖標(biāo)

線性漸變

結(jié)合漸變的顏色，豐富了整個(gè)圖標(biāo)的視覺(jué)表達(dá)，并提升了圖標(biāo)的視覺(jué)沖擊力和設(shè)計(jì)感。案例結(jié)合黑白背景作為嘗試，白底：粗線比細(xì)線的視覺(jué)效果相對(duì)較好，漸變也能較為清晰地被表達(dá)；黑底：細(xì)線比粗線的視覺(jué)效果顯示得更加精致和具有銳度感。

實(shí)際案例：網(wǎng)易考拉、NAVER

一筆成形

此類(lèi)圖標(biāo)在視覺(jué)表達(dá)上具有較高的線性流暢度和設(shè)計(jì)感，關(guān)注點(diǎn)在于整組圖標(biāo)的 「開(kāi)口起始點(diǎn)」 設(shè)定上需保持一致。例如，「從左到右」或「從右到左」形成一體化的連貫線條，開(kāi)口起始點(diǎn)不一致會(huì)影響整組圖標(biāo)的一致性，應(yīng)用在頁(yè)面時(shí)也會(huì)顯得雜亂。

斷點(diǎn)圖標(biāo)

與上一種較為類(lèi)似，但沒(méi)有連貫度的要求。在線形圖標(biāo)基礎(chǔ)上面，尋找一個(gè)缺口來(lái)打破 「全包邊圖標(biāo)」 的沉悶感，使得圖標(biāo)具有透氣性和線條的變化。缺口的位置盡量保持統(tǒng)一的方向及大小，另外需要控制開(kāi)口個(gè)數(shù)避免過(guò)多導(dǎo)致圖標(biāo)外形過(guò)于零碎。

實(shí)際案例：騰訊體育、京東

面性圖標(biāo)

面性圖標(biāo)比線性圖標(biāo)更能表達(dá)出圖標(biāo)的力量感和重量感，比線性圖標(biāo)會(huì)更加容易吸引用戶(hù)目光。在識(shí)別度上，面性圖標(biāo)更加依賴(lài)于外輪廓的清晰度，因此在設(shè)計(jì)時(shí)對(duì)于外形的打磨是重中之重，清晰的外輪廓可以幫助提高識(shí)別度。

1. 面型圖標(biāo)基礎(chǔ)分析及想法

輪廓對(duì)比

輪廓的差異會(huì)體現(xiàn)出不同的氣質(zhì)，如下圖的左邊和右邊的區(qū)別，一個(gè)氣質(zhì)較為直接硬朗，另一個(gè)則較為柔美可愛(ài)。流暢的外形可以讓面形圖標(biāo)的整體更加簡(jiǎn)潔、規(guī)整，如下圖中間的圖標(biāo)在輪廓的處理上則顯得比較碎，整體外輪廓造型的連貫度有所欠缺。

鏤空對(duì)比

適當(dāng)?shù)溺U空除了補(bǔ)充了圖形的識(shí)別度之外，還提升了面性圖標(biāo)的設(shè)計(jì)細(xì)節(jié)。另外需要控制好鏤空部分與整體的外形比例，過(guò)小或過(guò)大都可能影響圖標(biāo)的平衡感。如下圖的中間和右邊，鏤空過(guò)小對(duì)圖標(biāo)的辨識(shí)度并沒(méi)有多大作用，沒(méi)有鏤空則少了一些透氣感。

形體對(duì)比

形態(tài)上的差異也會(huì)具有不一樣的視覺(jué)感知。以「星」和「心」為案例，單獨(dú)形體與組合之后的形體相比視覺(jué)感知更直觀些，而組合形的圖標(biāo)相對(duì)會(huì)精致一些，多了一些層次。在日常設(shè)計(jì)中的經(jīng)驗(yàn)是：越小的圖標(biāo)形體應(yīng)該越簡(jiǎn)單，因此建議單體出現(xiàn)較好；若圖標(biāo)的尺寸足夠大時(shí)可采用組合型的設(shè)計(jì)，補(bǔ)充圖標(biāo)的細(xì)節(jié)。

繁簡(jiǎn)對(duì)比

設(shè)計(jì)面性圖標(biāo)時(shí)，對(duì)于多余細(xì)節(jié)的管理也很重要。隨著細(xì)節(jié)的增加，塊面切割過(guò)多，會(huì)使得整體圖標(biāo)變得過(guò)于零碎（如下右圖）。保持簡(jiǎn)約的設(shè)計(jì)提高圖標(biāo)的識(shí)別度，在關(guān)鍵的特征細(xì)節(jié)上做補(bǔ)充（如下中間圖的相機(jī)閃光燈）。

2. 面性圖標(biāo)類(lèi)型拓展

面性圖標(biāo)在設(shè)計(jì)時(shí)也可以結(jié)合各種不同的表達(dá)方式，來(lái)提升圖標(biāo)的質(zhì)感和創(chuàng)意，而非只是簡(jiǎn)單的填充顏色。

單色面+點(diǎn)綴色

整體的外形使用統(tǒng)一的顏色，結(jié)合圖標(biāo)的屬性感知使用不同的顏色進(jìn)行點(diǎn)綴，通過(guò)點(diǎn)綴色提亮了圖標(biāo)的視覺(jué)效果，達(dá)到既統(tǒng)一又具有差異化。

多彩雙色

通過(guò)對(duì)比色、鄰近色的搭配來(lái)營(yíng)造整體的圖標(biāo)氛圍，提升了圖標(biāo)的層次和豐富度，雙色的表達(dá)也增添了圖形的趣味性。在日常使用的 APP 中極為常見(jiàn)，簡(jiǎn)單且容易出效果。

微質(zhì)感漸變

微弱的漸變提升了圖標(biāo)的質(zhì)感。漸變的方向會(huì)影響整體圖標(biāo)的視覺(jué)效果，因此可以根據(jù)不同設(shè)計(jì)的需要進(jìn)行調(diào)整。如下圖案例：

實(shí)際案例：全民K歌

透明度/灰度變化

透明度/灰度的變化，讓原來(lái)單色的圖標(biāo)變得更加具有層次感和空間感，設(shè)計(jì)細(xì)節(jié)更加豐富，降低了單色面性圖標(biāo)的厚重感。

實(shí)際案例：企鵝FM我的頁(yè)面

透明度變化+漸變

漸變的設(shè)計(jì)提升了面性圖標(biāo)的質(zhì)感，從顏色上具有一定的豐富度。在漸變的基礎(chǔ)上對(duì)組合型做透明度差異化，使得圖標(biāo)具有了層次感。

透明疊加的圖標(biāo)+漸變的背景

此類(lèi)圖標(biāo)常常被應(yīng)用在 UI 界面中的列表或者頂部入口的位置。

實(shí)際案例：全民K歌點(diǎn)歌頁(yè)面

顏色疊加穿透

圖標(biāo)透明疊加之后產(chǎn)生了交錯(cuò)的負(fù)形，疊加出第三個(gè)面。雖然整體設(shè)計(jì)依然保持著扁平化，但卻多了一份層次感，并且增加了圖標(biāo)的細(xì)節(jié)。

實(shí)際案例：百度網(wǎng)盤(pán)

漸變層次疊加

整體的效果與透明度變化的圖標(biāo)較為接近，通過(guò)漸變的深淺變化，使得形狀的銜接處出現(xiàn)了明暗對(duì)比，因此圖標(biāo)也具有了厚度感和層次感。

實(shí)際案例：NAVER、掌上生活

高斯模糊

此類(lèi)圖標(biāo)基本沒(méi)有在 APP 中看到，與「透明度變化」或「顏色疊加」相比都更具層次感和空間感，同時(shí)圖標(biāo)也具有較強(qiáng)的設(shè)計(jì)感。

線面結(jié)合

結(jié)合了線性和面性的優(yōu)點(diǎn)，既保持了面性的重量感，同時(shí)具有線性的精致、細(xì)膩。因此在設(shè)計(jì)時(shí)可以根據(jù)圖標(biāo)具體想要表達(dá)的感覺(jué)對(duì)線面比例進(jìn)行把控，不同比例可以呈現(xiàn)出不同的視覺(jué)感知。

1. 線面結(jié)合圖標(biāo)的基礎(chǔ)分析及想法

線面比例

線面比例的差異，圖形呈現(xiàn)出來(lái)的張力也會(huì)有不同的感受?；谥虚g填充的圖標(biāo)形態(tài)嘗試了三種不同的比例，從下圖中可以看出，當(dāng)填充與外形窄邊比為 1 : 3 時(shí)（左圖）圖標(biāo)呈現(xiàn)往內(nèi)收的感覺(jué)；填充與外形窄邊比為 1 : 2 時(shí)（中間）圖標(biāo)整體較為平衡；當(dāng)填充與外形窄邊比為 2 : 3（大于1:2）時(shí)（右圖）整體具有外擴(kuò)趨勢(shì)。

組合形式

線面可以通過(guò)不同的組合形式進(jìn)行繪制?；诓煌慕M合形態(tài)可以設(shè)計(jì)出多種多樣的線面圖標(biāo)，不同的組合形式會(huì)體現(xiàn)出不同的設(shè)計(jì)風(fēng)格，因此在設(shè)計(jì)時(shí)盡量多發(fā)散思考，尋找出適合你的組合方式。

繁簡(jiǎn)對(duì)比

線面結(jié)合本身就由兩種形式組合，因此在設(shè)計(jì)的時(shí)候更需要對(duì)整體造型進(jìn)行把控，單體（線和面）造型必須保持較高的簡(jiǎn)潔程度，這樣最終組合形成的圖標(biāo)才不會(huì)過(guò)于復(fù)雜（左圖），若本身形態(tài)過(guò)于復(fù)雜，則會(huì)降低圖標(biāo)的辨識(shí)度和視覺(jué)美觀度。

2. 線面結(jié)合圖標(biāo)類(lèi)型拓展

線面結(jié)合的圖標(biāo)集合了線性和面性的優(yōu)點(diǎn)，在設(shè)計(jì)方式上也繼承了兩者的優(yōu)點(diǎn)。設(shè)計(jì)方式也是基于以上兩種的結(jié)合，因此可以結(jié)合出更多設(shè)計(jì)的可能性。

黑白線+面性品牌色

與「線性+品牌色」的做法較為接近，統(tǒng)一的線性顏色疊加品牌色的透出。

實(shí)際案例：好好住、soul

線面雙色

基于線面的基礎(chǔ)上，在線和面的顏色上做差異。具體做法與線性或面性的雙色接近。

線面結(jié)合-陰陽(yáng)

線和面的結(jié)合按 50% 的比例進(jìn)行設(shè)計(jì)，依據(jù)上下、左右、居中等基礎(chǔ)方式的結(jié)構(gòu)化設(shè)計(jì)，整體圖標(biāo)的視覺(jué)效果較為跳躍，非常規(guī)。

線面雙色+錯(cuò)位

在雙色圖標(biāo)的基礎(chǔ)上，線和面按照統(tǒng)一的 「百分比」 進(jìn)行縮放，并進(jìn)行透視和位移的設(shè)計(jì)，整體呈現(xiàn)出來(lái)的是一種交錯(cuò)疊加的視覺(jué)效果，相比普通的線面雙色更加豐富。

實(shí)際案例：閑魚(yú)底部tab、臉球底部tab

線面錯(cuò)位+漸變

基于上一種風(fēng)格，對(duì)面或者線的顏色進(jìn)行漸變?cè)O(shè)計(jì)，豐富了圖標(biāo)的質(zhì)感和顏色更加細(xì)膩。

線面透明度變化

與「線面透明度變化」的設(shè)計(jì)方式大致一樣。如下圖案例，「弱線強(qiáng)面」的第一識(shí)別度較弱，而「弱面強(qiáng)線」 的外形識(shí)別度較高，也更符合圖標(biāo)的表達(dá)。

實(shí)際案例：新浪微博、騰訊新聞

基于三種基礎(chǔ)的類(lèi)型表達(dá)，可以拓展出多種多樣的設(shè)計(jì)形式。除了以上的案例之外，還收集了一些其他的設(shè)計(jì)。

線面結(jié)合 – 插畫(huà)

整體比較偏向插圖的感覺(jué)，細(xì)節(jié)和元素較多，常見(jiàn)于一些 APP 的空白頁(yè)設(shè)計(jì)。

線面結(jié)合 – 卡通插畫(huà)

整體感覺(jué)比較可愛(ài)、卡通、二次元，常見(jiàn)于一些二次元或漫畫(huà)類(lèi)的 APP。

面性 – 漸變強(qiáng)質(zhì)感

整體風(fēng)格的光影質(zhì)感會(huì)比較強(qiáng)烈，常在一些活動(dòng)運(yùn)營(yíng)或小游戲的界面出現(xiàn)。

面性 – 扁平寫(xiě)實(shí)

整體感覺(jué)比較扁平，細(xì)節(jié)的豐富度與現(xiàn)實(shí)感知接近。

線面+漸變插畫(huà)

整體風(fēng)格比較偏向絢麗多彩的顏色風(fēng)格，質(zhì)感和細(xì)節(jié)較為豐富。

寫(xiě)實(shí)風(fēng)格

3D質(zhì)感圖標(biāo)

由于 C4D 的制作成本相對(duì)較高，目前較少在常規(guī)的 APP 中看到。但 3D 作為一個(gè)主流的設(shè)計(jì)趨勢(shì)，在時(shí)間和能力允許的情況下需要多做這方面的嘗試。

等距的線面結(jié)合

等距的設(shè)計(jì)，讓原本線面的圖標(biāo)豐富了層次，并具有立體透視的感覺(jué)。

除了以上這些之外，我們?cè)趯?shí)際場(chǎng)景中也會(huì)發(fā)現(xiàn)一些較為特別的圖標(biāo)設(shè)計(jì)。

Facebook 更多頁(yè)面的列表圖標(biāo)

整體風(fēng)格偏向插畫(huà)風(fēng)+漸變質(zhì)感。由于更多的頁(yè)面為純列表的設(shè)計(jì)，因此整個(gè)頁(yè)面在圖標(biāo)的設(shè)計(jì)上做了很大膽的嘗試，與常規(guī)的單色圖標(biāo)相比更具有吸引力。為了區(qū)別不同的業(yè)務(wù)，系統(tǒng)性質(zhì)的功能圖標(biāo)做了色調(diào)的區(qū)分。

APP Store 游戲和新APP界面下的類(lèi)別列表圖標(biāo)

整體為具象化扁平風(fēng)格的設(shè)計(jì)表達(dá)，圖標(biāo)的顏色還原了最基本的現(xiàn)實(shí)感知。

iOS 系統(tǒng)辦公類(lèi)軟件的起始頁(yè)面圖標(biāo)

整體風(fēng)格比較偏商務(wù)簡(jiǎn)約，具象的圖形表達(dá)+輕微的漸變質(zhì)感。

QQ手機(jī)版中延展的功能圖標(biāo)

整體風(fēng)格偏向輕寫(xiě)實(shí)+微弱漸變。每個(gè)圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá)，色調(diào)方面基于業(yè)務(wù)屬性結(jié)合品牌色進(jìn)行了區(qū)分，整體既統(tǒng)一又具有差異化。

大眾點(diǎn)評(píng)頂部入口的圖標(biāo)

整體風(fēng)格偏向?qū)憣?shí)+強(qiáng)漸變+炫光感，每個(gè)圖標(biāo)都具有豐富的細(xì)節(jié)表達(dá)。

旅法師營(yíng)地

游戲、二次元類(lèi)的 APP，因此在圖標(biāo)的設(shè)計(jì)上也偏向細(xì)節(jié)較為豐富的插畫(huà)風(fēng)格。

嗶哩嗶哩動(dòng)漫

圖標(biāo)風(fēng)格偏向卡通插畫(huà)，選中態(tài)與默認(rèn)態(tài)的設(shè)計(jì)較為巧妙。

總結(jié)

本文的重點(diǎn)在于透過(guò)這些設(shè)計(jì)類(lèi)型或者技法的了解，幫助我們?cè)谌粘ＴO(shè)計(jì)中提升輸出效率。圖標(biāo)雖然作為 UI 設(shè)計(jì)的基礎(chǔ)，卻有很深的學(xué)問(wèn)，精致的圖標(biāo)更是可以起到點(diǎn)睛的作用，提升界面的質(zhì)感和氛圍。

圖標(biāo)的種類(lèi)遠(yuǎn)遠(yuǎn)不止本文所提到的這些內(nèi)容，但是萬(wàn)變不離其宗，都是「線性、面性、線面結(jié)合」 再結(jié)合 「透明度、漸變、顏色疊加、質(zhì)感、多維空間」等等的表達(dá)方式而設(shè)計(jì)出來(lái)的。

我們除了需要掌握這些內(nèi)容之外，還需要提升圖標(biāo)設(shè)計(jì)的造型能力，更需要日積月累的練習(xí)和思考，從量到質(zhì)的變化。

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

nodejs中使用別名映射,兼容webpack的@和best-require 的:xxx 別名映射

項(xiàng)目地址: https://github.com/langyuxiansheng/biu-server-admin



寫(xiě)在前面

研究了很久,找了很多資料發(fā)現(xiàn)都沒(méi)有,只好自己去想辦法,查資料.才弄好的,凌晨發(fā)布的,轉(zhuǎn)載請(qǐng)注明出處.

在做nodejs項(xiàng)目開(kāi)發(fā)的時(shí)候,你是不是也在為

require('./posts');

require('./controllers/posts');

require('../controllers/posts');

require('../../controllers/posts');

require('../../../apis/controllers/posts');



或者



require(ROOT_PATH + '/application/apis/controllers/posts');

// other require()...

require(ROOT_PATH + '/application/apis/controllers/users');

require(ROOT_PATH + '/application/apis/controllers/products');

require(ROOT_PATH + '/application/apis/services/rest');

require(ROOT_PATH + '/application/apis/config');



這樣的寫(xiě)法而困擾;



那看完這篇文章,從此之后就可以告別這個(gè)煩惱了;



感謝一下 best-require 這個(gè)模塊包的作者,不然還需要自己去寫(xiě)這個(gè)

npmjs 鏈接 https://www.npmjs.com/package/best-require

github 鏈接 https://github.com/yuezhihan/best-require



不廢話了,進(jìn)入正題 往下看:

1. 安裝庫(kù) best-require 進(jìn)行別名映射
   
   
   
   
   
   npm i best-require --save
   
   
   
2. 映射別名. 實(shí)例在本項(xiàng)目中 server/index.js 中
   
   
   
   
   
   const path = require('path');
   
   const ROOT_PATH = process.cwd();
   
   const SRC_PATH = path.join(ROOT_PATH, /server/src);
   
   console.log(ROOT_PATH, SRC_PATH);
   
   //映射目錄別名
   
   require('best-require')(ROOT_PATH, {
   
       root: ROOT_PATH,
   
       src: SRC_PATH,
   
       controllers: path.join(SRC_PATH, '/controllers'),
   
       models: path.join(SRC_PATH, '/models'),
   
       routes: path.join(SRC_PATH, '/routes'),
   
       crawlers: path.join(SRC_PATH, '/crawlers'),
   
       services: path.join(SRC_PATH, '/services'),
   
       middleware: path.join(SRC_PATH, '/middleware'),
   
       lib: path.join(SRC_PATH, '/lib'),
   
       config: path.join(SRC_PATH, '/config'),
   
       logs: path.join(SRC_PATH, '/logs')
   
   });
   
   
   
   //運(yùn)行服務(wù)
   
   require('./src/bin/Server').run();
   
   
   
3. 設(shè)置 jsconfig.json
   
   
   
   
   
   {
   
       "compilerOptions": {
   
           "allowSyntheticDefaultImports": true,
   
           "baseUrl": "./",
   
           "paths": {
   
               "@/": ["client/"],
   
               ":root/": [""],
   
               ":config/": ["server/src/config/"],
   
               ":lib/": ["server/src/lib/"],
   
               ":services/": ["server/src/services/"],
   
               ":controllers/":["server/src/controllers/"],
   
               ":models/": ["server/src/models/"],
   
               ":routes/": ["server/src/routes/"],
   
               ":crawlers/": ["server/src/crawlers/"],
   
               ":middleware/": ["server/src/middleware/"],
   
               ":logs/": ["server/src/logs/"]
   
           }
   
       },
   
       "include": ["server/*/","client/*/"],
   
       "exclude": [
   
           "node_modules",
   
           "nuxt-dist",
   
           "server-dist"
   
       ]
   
   }
   
   
   
4. vscode要安裝 path-intellisense 插件 并在設(shè)置中配置setting.json
   
   
   
   vscode 中的設(shè)置,setting.json
   
   
   
   workspaceRoot 是當(dāng)前的工作空間,就是當(dāng)前編輯器打開(kāi)的目錄.
   
   
   
   配置如下
   
   
   
   
   
   {
   
       "path-intellisense.mappings": {
   
           "@": "${workspaceRoot}/client",
   
           ":root": "${workspaceRoot}",
   
           ":lib": "${workspaceRoot}/server/src/lib",
   
           ":controllers": "${workspaceRoot}/server/src/controllers",
   
           ":models": "${workspaceRoot}/server/src/models",
   
           ":routes": "${workspaceRoot}/server/src/routes",
   
           ":crawlers": "${workspaceRoot}/server/src/crawlers",
   
           ":services": "${workspaceRoot}/server/src/services",
   
           ":middleware": "${workspaceRoot}/server/src/middleware",
   
           ":config": "${workspaceRoot}/server/src/config",
   
           ":logs": "${workspaceRoot}/server/src/logs",
   
       }
   
   }
   
   
   
5. 重啟vscode,試試看吧!
   
   作者的目錄結(jié)構(gòu)
   
   
   
   
   
   
   
   
   
   vue中使用
   
   
   
   
   
   
   
   后續(xù)更新
   
   nodejs中使用sequelize的model映射,這樣就解決了沒(méi)得提示的煩惱了,讓你的效率提升2個(gè)檔次
   
   寫(xiě)在后面
   
   如果你遇到難題或者有疑問(wèn),有好的建議請(qǐng)留言反饋.
   
   這種提示以及Ctrl + 鼠標(biāo)左鍵的跳轉(zhuǎn),只針對(duì) .js 的文件, .vue的沒(méi)試過(guò).這個(gè)也只是為了解決 js方法映射后沒(méi)提示的問(wèn)題.
   
   
   

vue 生命周期

每個(gè) Vue 實(shí)例在被創(chuàng)建時(shí)都要經(jīng)過(guò)一系列的初始化過(guò)程。設(shè)置數(shù)據(jù)監(jiān)聽(tīng)、編譯模板、掛載等等。vue生命周期還是不太容易理解，這里就簡(jiǎn)單地說(shuō)一下它的整個(gè)過(guò)程。

1創(chuàng)建一個(gè)vue實(shí)例



new vue({

data () {

return {

}

    }

})



2 初始化事件和生命周期 beforeCreate 創(chuàng)建實(shí)例之前執(zhí)行的鉤子函數(shù)

3 初始化·注入和校驗(yàn) created 實(shí)例創(chuàng)建完成后執(zhí)行的鉤子



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

}

})



4 渲染頁(yè)面 編譯 beforeMount 將編譯完成的html掛載在虛擬dom時(shí)執(zhí)行的鉤子

5 mouted鉤子 掛載完畢對(duì)數(shù)據(jù)進(jìn)行渲染 會(huì)做一些ajax情求初始化數(shù)據(jù) mounted整個(gè)實(shí)例過(guò)程中只執(zhí)行一次



new vue ({

data () {

return {

a: 1

}

},

created: function () {

console.log('created')

},

// 一些鉤子函數(shù)

mouted: function () {

console.log('mounted')

}

})



6 修改數(shù)據(jù) beforeUpdate 更新之前的鉤子

7 updated 修改完成重新渲染

8 準(zhǔn)備解除綁定子組件以及事件監(jiān)聽(tīng)器 beforeDestroy

9 銷(xiāo)毀完成 destroyed

css:

*{margin:0;padding:0;}

tu{margin: 50px auto;padding: 10px;width: 500px;

background: rgb(201, 230, 128);text-align: center;}



html:



<body>

    <div id="tu">

        <P id="info"></P>

        <img src="jiao.jpg" alt="冰棒">

        <input type="button" id="yi" value="第一張">

        <input type="button" id="er" value="第二張">

    </div>

</body>



javascript:

window.onload = function(){

var yi = document.getElementById(“yi”);

var er = document.getElementById(“er”);

var img = document.getElementsByTagName(“img”)[0];

var imgArr = [ “jiao.jpg”,“san.jpg”,“bao.jpg”,“hua.jpg”,“pei.jpg”,“tu.jpg”,“xin.jpg”,“niu.jpg”]

var index = 0 ;

var info = document.getElementById(“info”);



    info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";

    yi.onclick = function(){

        index--;

        if(index < 0){

            index = imgArr.length - 1; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";

    }



    er.onclick = function(){

        index++;

         if(index > imgArr.length - 1){               

            index = 0; 

        }

        img.src = imgArr[index];

        info.innerHTML = "一共" + imgArr.length + "張圖片,當(dāng)前第"+(index+1)+"張";

    }

}

本文是基于我對(duì)《破繭成蝶2》讀后的觀點(diǎn)和反思，自己的項(xiàng)目經(jīng)歷跟作者相似，也是為了更好的總結(jié)這兩年對(duì)產(chǎn)品、對(duì)設(shè)計(jì)的心得。

本文篇幅較長(zhǎng)，請(qǐng)耐心閱讀。主要是總結(jié)一個(gè)完善的體系，便于大家理清自己的設(shè)計(jì)思路和自我定位。

閱讀本文你可以獲得什么？

一、前言——擁抱變化，破熵而行

二、產(chǎn)品設(shè)計(jì)師的思維轉(zhuǎn)變

三、對(duì)設(shè)計(jì)師的能力模型

四、設(shè)計(jì)師該關(guān)注的數(shù)據(jù)

五、產(chǎn)品周期影響設(shè)計(jì)策略

六、設(shè)計(jì)師順勢(shì)而為，自我定位 

一、前言——擁抱變化，破熵而行

在人口紅利、流量紅利、資本紅利逐漸消退的互聯(lián)網(wǎng)下半場(chǎng)，從“買(mǎi)流量、買(mǎi)用戶(hù)”為代表的粗放式發(fā)展進(jìn)入了穩(wěn)扎穩(wěn)打的精細(xì)化時(shí)代，需要考慮在有限的資源及能力的基礎(chǔ)上精打細(xì)算、量入為出，讓產(chǎn)品可持續(xù)地發(fā)展下去。

互聯(lián)網(wǎng)產(chǎn)品正在從標(biāo)準(zhǔn)化、大眾化轉(zhuǎn)向個(gè)性化。針對(duì)垂直領(lǐng)域或細(xì)分用戶(hù)群體的產(chǎn)品越來(lái)越有市場(chǎng)。戰(zhàn)略層也需要抽絲剝繭，拋去形式注重產(chǎn)品的本質(zhì)。比如一些下沉型電商業(yè)務(wù)，紅包和會(huì)員都只是一種形式，其實(shí)本質(zhì)還是用戶(hù)追求“性?xún)r(jià)比”有利可圖，所以一旦用戶(hù)的“便宜需求”難以達(dá)到，還是會(huì)引發(fā)數(shù)據(jù)的下降，這就需要大量可持續(xù)資本投入維持。見(jiàn)利期的變長(zhǎng)，傳統(tǒng)電商行業(yè)的鋒芒也被新零售掩蓋，投資人也不斷轉(zhuǎn)移更創(chuàng)新可收的項(xiàng)目。所以真正的留存是可持續(xù)發(fā)展的，且需要根據(jù)企業(yè)自己的實(shí)際情況，在戰(zhàn)略上和運(yùn)營(yíng)上，有一個(gè)人無(wú)我有的本質(zhì)上的創(chuàng)新點(diǎn)（核心競(jìng)爭(zhēng)力），而非形式上的創(chuàng)新。

在日新月異，變化百態(tài)的互聯(lián)網(wǎng)下半場(chǎng)，創(chuàng)業(yè)者和產(chǎn)品設(shè)計(jì)工作者都需要改變自己的想法，擁抱變化破熵而行，保持自己戰(zhàn)斗力，用更科學(xué)客觀的方法來(lái)提升產(chǎn)品價(jià)值。

二、產(chǎn)品設(shè)計(jì)師的思維轉(zhuǎn)變

產(chǎn)品設(shè)計(jì)師的重要標(biāo)志是“以產(chǎn)品為中心”的思維及覺(jué)悟，即能打破本位主義，站在產(chǎn)品的角度，從整個(gè)項(xiàng)目閉環(huán)上協(xié)同解決問(wèn)題，提升產(chǎn)品價(jià)值。設(shè)計(jì)師的角度理解，就是打開(kāi)自身格局，擴(kuò)展上下游的知識(shí)，通過(guò)自己的綜合能力助力于業(yè)務(wù)。在此過(guò)程中職能會(huì)有跨界，比如我會(huì)提出驗(yàn)證數(shù)據(jù)的方法，比如ABtest，從業(yè)務(wù)角度推設(shè)計(jì)可以通過(guò)哪些數(shù)據(jù)進(jìn)行提升，然后做出不同方案進(jìn)行評(píng)審，推動(dòng)項(xiàng)目實(shí)施落地。

產(chǎn)品設(shè)計(jì)者可以由產(chǎn)品經(jīng)理，UX，UI擔(dān)當(dāng)或轉(zhuǎn)變，我更傾向是全棧的UX，通過(guò)思想認(rèn)知的轉(zhuǎn)變，職能界線的打破來(lái)扮演這個(gè)角色。自己也是這樣努力的在轉(zhuǎn)型。得益于公司的開(kāi)放包容，這兩年我還是能承擔(dān)起這樣的角色，建立組織，帶領(lǐng)團(tuán)隊(duì)，通過(guò)設(shè)計(jì)來(lái)提升產(chǎn)品價(jià)值。對(duì)于產(chǎn)品設(shè)計(jì)師，第一個(gè)需要改變的就是產(chǎn)品設(shè)計(jì)思維。

2.1從“問(wèn)題驅(qū)動(dòng)”到“價(jià)值驅(qū)動(dòng)”

2.2 始終貫徹精益思維

互聯(lián)網(wǎng)寒冬，連阿里都要把錢(qián)花在刀刃上。阿里8月15日發(fā)布的財(cái)報(bào)上，雖然新零售收入水平同步增速高達(dá)134%，高于上一季度132%，成阿里本季營(yíng)收增長(zhǎng)引擎，但是阿里本財(cái)季對(duì)盒馬新零售業(yè)務(wù)投入仍然十分謹(jǐn)慎。最近兩個(gè)季度盒馬開(kāi)始由原先的大門(mén)店業(yè)態(tài)轉(zhuǎn)向更多元、成本更低的小業(yè)態(tài)的轉(zhuǎn)型期，本財(cái)季內(nèi)凈增門(mén)店僅為15家。所以需要我們始終貫穿精益思維去做產(chǎn)品。

精益思想（Lean Thinking）源于20世紀(jì)80年代日本豐田發(fā)明的精益生產(chǎn)（Lean Production）方式，精益生產(chǎn)方式造成日本汽車(chē)的質(zhì)量與成本優(yōu)勢(shì)，曾經(jīng)壓得美國(guó)汽車(chē)抬不起頭。世界汽車(chē)工業(yè)重心已向日本傾斜。精益思想的核心就是（消除浪費(fèi)）以越來(lái)越少的投入——較少的人力、較少的設(shè)備、較短的時(shí)間和較小的場(chǎng)地創(chuàng)造出盡可能多的價(jià)值；同時(shí)也越來(lái)越接近用戶(hù)，提供他們確實(shí)要的東西。

那么要做到產(chǎn)品上的精益思維，一方面要貫徹“以提升產(chǎn)品價(jià)值為目標(biāo)”并用數(shù)據(jù)驗(yàn)證；另一方面建議先用較小成本在小渠道驗(yàn)證，然后在擴(kuò)大投入。

整個(gè)產(chǎn)品團(tuán)隊(duì)，不管是產(chǎn)品負(fù)責(zé)人、產(chǎn)品經(jīng)理、設(shè)計(jì)、運(yùn)營(yíng)、開(kāi)發(fā)都需要緊密聯(lián)合在一起，為提升產(chǎn)品價(jià)值而努力。為什么這么說(shuō)，其實(shí)本質(zhì)上大家都是為了業(yè)務(wù)好，但是每個(gè)人卻扛著不一樣的KPI，產(chǎn)品經(jīng)理有業(yè)務(wù)指標(biāo)，運(yùn)營(yíng)有運(yùn)營(yíng)指標(biāo)，設(shè)計(jì)師也有自己的設(shè)計(jì)價(jià)值觀。如果大家都只為了自己，產(chǎn)品和運(yùn)營(yíng)會(huì)唯業(yè)務(wù)指標(biāo)做導(dǎo)向，典型的就是引入大量無(wú)法留存的流量，耗費(fèi)資源，最終對(duì)整個(gè)產(chǎn)品長(zhǎng)期發(fā)展并沒(méi)有太多價(jià)值。對(duì)設(shè)計(jì)師來(lái)說(shuō)，我見(jiàn)過(guò)很多設(shè)計(jì)都很有偏向性，要么就是一味追求好看，感覺(jué)業(yè)務(wù)擋了自己發(fā)揮才能，要么一味分析競(jìng)品和交互，卻給不出有效、有價(jià)值的解決方案。其實(shí)都不是站在產(chǎn)品價(jià)值上看問(wèn)題，更希望是自己能交出一份滿(mǎn)意的答卷。我自己也在一個(gè)電商摸索期犯過(guò)類(lèi)似錯(cuò)誤，無(wú)法忍受一個(gè)沒(méi)有細(xì)節(jié)的產(chǎn)品，過(guò)多追求設(shè)計(jì)質(zhì)量，而其實(shí)產(chǎn)品初期，負(fù)責(zé)人只想著能快速迭代，找到活下去的出路。

2.3以始為終打造數(shù)據(jù)閉環(huán) 

數(shù)據(jù)閉環(huán)就是從你的產(chǎn)品價(jià)值目標(biāo)來(lái)拆分你的量化目標(biāo)，通過(guò)設(shè)計(jì)上線等驗(yàn)證數(shù)據(jù)，形成閉環(huán)，然后循環(huán)優(yōu)化的這個(gè)過(guò)程。需要從傳統(tǒng)的“問(wèn)題驅(qū)動(dòng)”轉(zhuǎn)變成“價(jià)值驅(qū)動(dòng)”，因?yàn)榻鉀Q問(wèn)題是難以被價(jià)值量化的，整個(gè)業(yè)務(wù)發(fā)展過(guò)程中也會(huì)出現(xiàn)很多產(chǎn)品問(wèn)題需要被優(yōu)化，我們把“提升產(chǎn)品價(jià)值”作為目標(biāo)就形成了“以終為始”的數(shù)據(jù)閉環(huán)。其實(shí)現(xiàn)在大部分企業(yè)都是以目標(biāo)驅(qū)動(dòng)業(yè)務(wù)的，拆分目標(biāo)，變成顆粒度目標(biāo)數(shù)據(jù)再進(jìn)行逐步達(dá)成，這個(gè)過(guò)程不是說(shuō)不去“發(fā)現(xiàn)問(wèn)題-解決問(wèn)題”，而是需要知道工作要?jiǎng)?wù)，“重要緊急”的先做，“重要不緊急”的長(zhǎng)期計(jì)劃實(shí)行，至于用戶(hù)體驗(yàn)上的東西也是要有節(jié)奏的去優(yōu)化。

三、對(duì)設(shè)計(jì)師的能力模型

對(duì)設(shè)計(jì)師的能力模型一直在提出不同的更高要求，無(wú)論是哪個(gè)大咖提出來(lái)的理論似乎都是非常的正確和所需要的，導(dǎo)致很多設(shè)計(jì)師的恐慌，我是不是要被淘汰了。

其實(shí)還是要抓住本質(zhì)，因人而異看待。設(shè)計(jì)的能力分布模型，大概分為 “I”型 、“一”型、“T”型。

“I”型為單一型，傳統(tǒng)對(duì)設(shè)計(jì)師的定義就是單一的，領(lǐng)域分的比較細(xì)。單一型主要看深度，深度達(dá)到一定程度可以成為專(zhuān)家，但是如果淺薄又單一很容易被淘汰。

“一”型為廣博型，廣博型最忌諱的就是成為什么都會(huì)卻什么都不精的“萬(wàn)金油”，看似什么都懂，結(jié)果做起來(lái)什么都廢。

新型模式“T”型，“T”型既有較深的專(zhuān)業(yè)知識(shí)，又有廣博的知識(shí)面，這類(lèi)是集深與博于一身的人才，也是市面上最有市場(chǎng)的一類(lèi)。

綜合性人才都是需要一個(gè)長(zhǎng)期由深度到廣度，再由廣度到深度循環(huán)提升的過(guò)程，在此過(guò)程中也很容易迷失，跟“I”型對(duì)比，無(wú)法通過(guò)有限的時(shí)間都提升上去，那么需要掌握一定的方法，認(rèn)識(shí)自我逐步提高。

3.1、強(qiáng)大扎實(shí)的專(zhuān)業(yè)能力——知行合一 廣而不范

為什么強(qiáng)調(diào)專(zhuān)業(yè)能力，《破2》里面提到，思維是1，技能是0，話是沒(méi)有錯(cuò)，但是80%以上的設(shè)計(jì)師還是靠技能在吃飯。有的東西你想得再好無(wú)法落地，也是無(wú)濟(jì)于事。所以一個(gè)專(zhuān)業(yè)合格的設(shè)計(jì)師必須有強(qiáng)大扎實(shí)的專(zhuān)業(yè)能力，當(dāng)然思維是內(nèi)驅(qū)力，如果你的專(zhuān)業(yè)很出色，估計(jì)內(nèi)核也不會(huì)差。

首先要有一個(gè)專(zhuān)業(yè)優(yōu)勢(shì)判斷，然后強(qiáng)化自己的優(yōu)勢(shì)，再根據(jù)橫向模型去擴(kuò)展對(duì)自己工作最優(yōu)幫助的繼續(xù)加強(qiáng)，做到廣而不范。比如你是一個(gè)ui設(shè)計(jì)師，你要保證自己的視覺(jué)能力，然后去擴(kuò)展交互能力，其次再去強(qiáng)化動(dòng)效，體驗(yàn)等等。再比如你是一個(gè)交互設(shè)計(jì)要保證自己對(duì)交互的精通，然后提高用研、數(shù)分能力，再去擴(kuò)展其他能力。還有要做到知行合一，其實(shí)大部分我們都在通過(guò)不同的學(xué)習(xí)提升自己的能力，但是要把理論性，縹緲性的知識(shí)概念落實(shí)到自己的工作中去，努力去實(shí)踐，再?gòu)?fù)盤(pán)總結(jié)不斷提升自己的實(shí)操能力。比如你學(xué)了插畫(huà)，你的項(xiàng)目上能不能用上；你競(jìng)品分析了更好的體驗(yàn)，能不要也變相用到自己的項(xiàng)目里；你新學(xué)了一些分析原理，能不能用同樣的思維來(lái)分析自己的項(xiàng)目等等。

3.2、保障基礎(chǔ)軟實(shí)力 —— 一顆強(qiáng)大正能量的心

心力、腦力、體力，都要保障，尤其是互聯(lián)網(wǎng)年輕化后，體力也非常重要，京東就直接把不能加班的員工全開(kāi)了，多么痛的領(lǐng)悟。那么對(duì)于產(chǎn)品設(shè)計(jì)師其實(shí)更關(guān)鍵的是心力和腦力，越是高階設(shè)計(jì)師，思維能力、洞察能力越是重要。無(wú)論是ui、ue、還是產(chǎn)品設(shè)計(jì)師我覺(jué)得都需要有強(qiáng)大的自我驅(qū)動(dòng)能力，打破本位主義，不斷擴(kuò)展自己的專(zhuān)業(yè)素質(zhì)，才能更好的融合于業(yè)務(wù)。阿里提出：人才是聰明的，的確很多人忽略了先天的差距，事實(shí)上同樣的努力，不一樣的天分，總還是有區(qū)別的，有的人適合做小兵，有的人適合做將軍，但是你可以保證的是心態(tài)，心態(tài)里我總結(jié)了兩個(gè)我覺(jué)得非常重要的點(diǎn)，一個(gè)就是皮實(shí)、一個(gè)就是積極，就是有一顆強(qiáng)大而正能量的心！

3.3、先讓自己變得足夠優(yōu)秀再考慮做管理

對(duì)于走技能線還是走管理崗，很多人會(huì)想的很多。其實(shí)先讓自己變得足夠優(yōu)秀，不斷提升，一切自然水到渠成。領(lǐng)導(dǎo)者或許需要天分，管理者是每個(gè)人都可以成為的，且有一些理論和工具可以支撐的，所以很多團(tuán)隊(duì)會(huì)內(nèi)部提拔，因?yàn)榕囵B(yǎng)起來(lái)并不難。只要你足夠優(yōu)秀，還是很有希望做管理，相反過(guò)早做管理，自己的基石沒(méi)打好，管理起來(lái)也會(huì)比較艱難。有興趣的人可以去聽(tīng)一下喜馬拉雅上的《可復(fù)制的領(lǐng)導(dǎo)力》。如果你勵(lì)志要走向管理層，也可以根據(jù)阿里的縱向能力模型對(duì)號(hào)入座，不斷提升，不過(guò)很多時(shí)候機(jī)遇也很重要。

四、設(shè)計(jì)師該關(guān)心的常規(guī)數(shù)據(jù)

想要驅(qū)動(dòng)產(chǎn)品增長(zhǎng)必須要對(duì)數(shù)據(jù)有所了解，來(lái)幫助我們產(chǎn)出更貼近用戶(hù)行為的設(shè)計(jì)，同時(shí)需要了解數(shù)據(jù)產(chǎn)生的過(guò)程和基礎(chǔ)工具。最基礎(chǔ)的就是產(chǎn)品提出數(shù)據(jù)，讓開(kāi)發(fā)進(jìn)行埋點(diǎn)，此過(guò)程中設(shè)計(jì)也可以提出自己想要關(guān)心的數(shù)據(jù)點(diǎn)。公司有后臺(tái)可以直接觀測(cè)數(shù)據(jù)，現(xiàn)在也像GrowingIO數(shù)據(jù)分析產(chǎn)品無(wú)需在網(wǎng)站或app中埋點(diǎn)，即可獲取并分析全面、實(shí)時(shí)的用戶(hù)行為數(shù)據(jù)，需要觀察數(shù)據(jù)可以直接去后臺(tái)關(guān)注，也可以讓產(chǎn)品經(jīng)理或者數(shù)據(jù)分析師給你拉數(shù)據(jù)。

頁(yè)面瀏覽量（PV）

用戶(hù)每1次對(duì)網(wǎng)站中的每個(gè)網(wǎng)頁(yè)訪問(wèn)（成功訪問(wèn)/進(jìn)入）均被記錄1次。用戶(hù)對(duì)同一頁(yè)面的多次訪問(wèn)，訪問(wèn)量累計(jì)。在一定統(tǒng)計(jì)周期內(nèi)用戶(hù)每次刷新網(wǎng)頁(yè)1次也被計(jì)算1次。理論上PV與來(lái)訪者數(shù)量成正比，但是它不能精準(zhǔn)決定頁(yè)面的真實(shí)訪問(wèn)數(shù)，比如同一個(gè)IP地址通過(guò)不斷的刷新頁(yè)面，也可以制造出非常高的PV。

獨(dú)立訪客人數(shù)（UV）

訪問(wèn)網(wǎng)站的一臺(tái)電腦客戶(hù)端為一個(gè)訪客。00:00~24:00內(nèi)相同的客戶(hù)端只被計(jì)算一次。使用獨(dú)立用戶(hù)作為統(tǒng)計(jì)量，可以更加精準(zhǔn)的了解一個(gè)時(shí)間段內(nèi)，實(shí)際上有多少個(gè)訪問(wèn)者來(lái)到了相應(yīng)的頁(yè)面。

用戶(hù)訪問(wèn)次數(shù)（VV）

當(dāng)用戶(hù)完成瀏覽并退出所有頁(yè)面就算完成了一次訪問(wèn)，再次打開(kāi)瀏覽時(shí)，VV數(shù)+1。VV同時(shí)也是視頻播放次數(shù)（Video View）的簡(jiǎn)稱(chēng)。

跳出率（BR）

表示用戶(hù)來(lái)到網(wǎng)站后，沒(méi)有進(jìn)行操作就直接離開(kāi)的比例，代表著陸頁(yè)面（訪客進(jìn)入網(wǎng)站的第一個(gè)頁(yè)面）是否對(duì)用戶(hù)有吸引力，常用的計(jì)算方式是落地頁(yè)面的訪問(wèn)量除以總訪量。

退出率（GA )

針對(duì)網(wǎng)站內(nèi)某一個(gè)特定的頁(yè)面而言，退出率是衡量從這個(gè)頁(yè)面退出網(wǎng)站的比例，通過(guò)一個(gè)頁(yè)面的退出次數(shù)除以訪問(wèn)次數(shù)。退出率反映了網(wǎng)站對(duì)用戶(hù)的吸引力，如果退出百分比很高，說(shuō)明用戶(hù)僅瀏覽了少量的頁(yè)面便離開(kāi)了，因此需要改善網(wǎng)站的內(nèi)容來(lái)吸引用戶(hù)，解決用戶(hù)的內(nèi)容訴求。

平均訪問(wèn)時(shí)長(zhǎng)（AAT )

指在特定統(tǒng)計(jì)時(shí)間段內(nèi)，瀏覽網(wǎng)站的一個(gè)頁(yè)面或整個(gè)網(wǎng)站時(shí)，用戶(hù)所停留的總時(shí)間除以該頁(yè)面或整個(gè)網(wǎng)站的訪問(wèn)次數(shù)的比例。該數(shù)據(jù)是分析用戶(hù)粘性的重要指標(biāo)之一，也可以側(cè)面反映出網(wǎng)站的用戶(hù)體驗(yàn)。平均訪問(wèn)時(shí)長(zhǎng)越短，說(shuō)明網(wǎng)站對(duì)用戶(hù)的吸引力越差。

轉(zhuǎn)化率（CR )

在一個(gè)統(tǒng)計(jì)周期內(nèi)，完成轉(zhuǎn)化行為的次數(shù)占推廣信息總點(diǎn)擊次數(shù)的比率。常用的是登錄注冊(cè)的新流量轉(zhuǎn)化率和產(chǎn)生實(shí)際支付的轉(zhuǎn)化率。轉(zhuǎn)化率是產(chǎn)品盈利的重要指標(biāo)之一，它直接反映了產(chǎn)品的盈利能力。提升轉(zhuǎn)化是提升產(chǎn)品價(jià)值的重要性指標(biāo)，一般用A/Btest去檢驗(yàn)更優(yōu)方案來(lái)提升轉(zhuǎn)化率。

回購(gòu)率（RR）

指用戶(hù)對(duì)商品或者服務(wù)的重復(fù)購(gòu)買(mǎi)次數(shù)（回頭客），是針對(duì)有購(gòu)買(mǎi)功能的產(chǎn)品，回購(gòu)率越高，用戶(hù)粘性越高。

新增用戶(hù)

既安裝應(yīng)用后，首次成功啟動(dòng)產(chǎn)品的用戶(hù)，按照統(tǒng)計(jì)跨度不同分為日新增（DNU）、周新增（WNU）、月新增（MNU）。新增用戶(hù)量指標(biāo)主要是衡量營(yíng)銷(xiāo)推廣渠道效果的最基礎(chǔ)指標(biāo)。新增用戶(hù)占活躍用戶(hù)的比例也可以用來(lái)用于衡量產(chǎn)品健康程度。如果某產(chǎn)品新用戶(hù)占比過(guò)高，那說(shuō)明該產(chǎn)品的活躍是靠推廣得來(lái)，這種情況非常有必要關(guān)注，尤其是新增用戶(hù)的留存率情況，這種情況留存率低對(duì)產(chǎn)品來(lái)說(shuō)也非常危險(xiǎn)，視為不可持續(xù)發(fā)展的流量。

活躍用戶(hù)

既在特定的統(tǒng)計(jì)周期內(nèi)，成功啟動(dòng)過(guò)產(chǎn)品的用戶(hù)。除此之外，我們還可以將活躍用戶(hù)定義為某統(tǒng)計(jì)周期內(nèi)操作過(guò)產(chǎn)品核心功能的用戶(hù)（按照設(shè)備去重統(tǒng)計(jì)）。

活躍用戶(hù)是衡量產(chǎn)品用戶(hù)規(guī)模的重要指標(biāo)，和新增用戶(hù)相輔相成。

DAU（日活）：某個(gè)自然日內(nèi)成功啟動(dòng)過(guò)應(yīng)用的用戶(hù)，該日內(nèi)同一個(gè)設(shè)備多次啟動(dòng)只記一個(gè)活躍用戶(hù)；

WAU（周活）：某個(gè)自然周內(nèi)成功啟動(dòng)過(guò)應(yīng)用的用戶(hù)，該周內(nèi)同一個(gè)設(shè)備多次啟動(dòng)只記一個(gè)活躍用戶(hù)。這個(gè)指標(biāo)是為了查看用戶(hù)的類(lèi)型結(jié)構(gòu)，如輕度用戶(hù)、中度用戶(hù)、重度用戶(hù)等；

MAU（月活）：某個(gè)自然月內(nèi)成功啟動(dòng)過(guò)應(yīng)用的用戶(hù)，該月內(nèi)同一個(gè)設(shè)備多次啟動(dòng)只記一個(gè)活躍用戶(hù)。這個(gè)指標(biāo)一般用來(lái)衡量被服務(wù)的用戶(hù)粘性以及服務(wù)的衰退周期。

留存率

留存率是驗(yàn)證用戶(hù)粘性的關(guān)鍵指標(biāo)，既在某一統(tǒng)計(jì)時(shí)段內(nèi)的新增用戶(hù)數(shù)中再經(jīng)過(guò)一段時(shí)間后仍啟動(dòng)該應(yīng)用的用戶(hù)比例（留存率=留存用戶(hù)/新增用戶(hù)*100%）。統(tǒng)計(jì)留存用戶(hù)的顆粒度有：
自然日：包括1天后、2天后、3天后、4天后、5天后、6天后、7天后、14天后和30天后
自然周：包括1周后、2周后、3周后、4周后、5周后、6周后、7周后、8周后、9周后......
自然月：包括1月后、2月后、3月后、4月后、5月后、6月后、7月后、8月后、9月后......
自然日的留存中主要關(guān)注（次日留存、7日留存、30日留存并觀察留存率的衰減程度。一般來(lái)說(shuō)，留存率低于20%會(huì)是一個(gè)比較危險(xiǎn)的信號(hào)。）

日留存率：快速判斷App粘性
日留存率：可以很快的幫助我們判斷 App 的粘性到底強(qiáng)不強(qiáng)。我們可以通過(guò)日留存率的數(shù)值來(lái)判斷一個(gè) App 的質(zhì)量，通常這個(gè)數(shù)字如果達(dá)到了 40% 就表示產(chǎn)品非常優(yōu)秀了。我們可以結(jié)合產(chǎn)品的新手引導(dǎo)設(shè)計(jì)和新用戶(hù)轉(zhuǎn)化路徑來(lái)分析用戶(hù)的流失原因，通過(guò)不斷的修改和調(diào)整來(lái)降低用戶(hù)流失，提升次日留存率。

周留存率：判斷App用戶(hù)忠誠(chéng)度
周留存率：我們可以通過(guò)周留存率來(lái)判斷一個(gè)用戶(hù)的忠誠(chéng)度，在一周的時(shí)間段里，用戶(hù)通常會(huì)經(jīng)歷一個(gè)完整的使用和體驗(yàn)周期，如果在這個(gè)階段用戶(hù)能夠留下來(lái)，就有可能成為忠誠(chéng)度較高的用戶(hù)。

月留存率：了解App版本迭代效果
月留存率：通常移動(dòng) App 的迭代周期為 2 - 4 周一個(gè)版本，所以月留存率是能夠反映出一個(gè)版本的用戶(hù)留存情況，一個(gè)版本的更新，總是會(huì)或多或少的影響用戶(hù)的體驗(yàn)，所以通過(guò)比較月留存率能夠判斷出每個(gè)版本更新是否對(duì)用戶(hù)有影響。

流失率

指那些曾經(jīng)使用過(guò)產(chǎn)品或服務(wù)，由于各種原因不再使用產(chǎn)品或服務(wù)的用戶(hù)。用戶(hù)流失率=某段時(shí)間內(nèi)不再啟動(dòng)應(yīng)用的用戶(hù)/某段時(shí)間內(nèi)總計(jì)的用戶(hù)量。流失率和留存率有緊密關(guān)聯(lián)，流失率高既留存率低，但活躍度不一定高，因此需要綜合分析。也是重點(diǎn)關(guān)注次日、7日、30日的流失率。對(duì)于流失用戶(hù)的界定依照產(chǎn)品服務(wù)的不同而標(biāo)準(zhǔn)不同。社交類(lèi)產(chǎn)品用戶(hù)幾乎每天登錄查看，可能用戶(hù)未登錄超過(guò)1個(gè)月，我們就可以認(rèn)為已經(jīng)流失了。而電商類(lèi)產(chǎn)品用戶(hù)可能3個(gè)月未登錄或者半年內(nèi)沒(méi)有任何購(gòu)買(mǎi)行為可以被認(rèn)定是流失了，所以不是每個(gè)產(chǎn)品都有固定的流失期限，而是根據(jù)產(chǎn)品屬性而判斷。

一次性用戶(hù)

既新增日后再也沒(méi)有啟動(dòng)過(guò)應(yīng)用的用戶(hù)。一次性用戶(hù)是關(guān)鍵的營(yíng)銷(xiāo)指標(biāo)，和判斷無(wú)效用戶(hù)的標(biāo)準(zhǔn)，從中把目標(biāo)用戶(hù)過(guò)濾出來(lái)。一般劃定的界限是至少超過(guò)7天時(shí)間才能夠定義是否是一次性用戶(hù)。

使用時(shí)長(zhǎng)

既統(tǒng)計(jì)時(shí)間段內(nèi)，某個(gè)設(shè)備從啟動(dòng)應(yīng)用到結(jié)束使用的總計(jì)時(shí)長(zhǎng)。一般按照人均使用時(shí)長(zhǎng)、次均使用時(shí)長(zhǎng)、單次使用時(shí)長(zhǎng)進(jìn)行分析，衡量用戶(hù)產(chǎn)品著陸的粘性，也是衡量活躍度，產(chǎn)品質(zhì)量的參考依據(jù)。

啟動(dòng)次數(shù)

既統(tǒng)計(jì)時(shí)間段內(nèi)，用戶(hù)打開(kāi)應(yīng)用的次數(shù)。重點(diǎn)關(guān)注人均啟動(dòng)次數(shù)，結(jié)合使用時(shí)長(zhǎng)可進(jìn)行分析。用戶(hù)主動(dòng)關(guān)閉應(yīng)用或應(yīng)用進(jìn)入后臺(tái)超過(guò)30s，再返回或打開(kāi)應(yīng)用時(shí)，則統(tǒng)計(jì)為兩次啟動(dòng)，啟動(dòng)次數(shù)主要看待頻數(shù)分布情況。

使用間隔

既用戶(hù)上次使用應(yīng)用的時(shí)間與再次使用時(shí)間的時(shí)間差。使用頻數(shù)分布，觀察應(yīng)用對(duì)于用戶(hù)的粘性，以及運(yùn)營(yíng)內(nèi)容的深度。雖然是使用間隔，但是通過(guò)計(jì)算同一設(shè)備，先后兩次啟動(dòng)的時(shí)間差，來(lái)完成使用間隔統(tǒng)計(jì)，充分考慮應(yīng)用周期性和碎片化使用的特征。

常規(guī)數(shù)據(jù)基本就這些，值得思考的是不同類(lèi)型的產(chǎn)品，定義每個(gè)數(shù)據(jù)的具體量是不同的，而且產(chǎn)品周期中的不同階段關(guān)注的主要數(shù)據(jù)指標(biāo)也會(huì)有不同側(cè)重點(diǎn)。

五、產(chǎn)品周期影響設(shè)計(jì)策略 

產(chǎn)品階段就是產(chǎn)品生命周期，可分為探索期、成長(zhǎng)期、成熟期、衰退期，每個(gè)階段的設(shè)計(jì)策略和工作權(quán)重都有所不同。雖然每個(gè)階段側(cè)重點(diǎn)不同，凡是還是需要辯證看待結(jié)合實(shí)踐，比如大廠的產(chǎn)品初期起點(diǎn)較高，有大流量的引流和背后大數(shù)據(jù)支撐，所以各種方式都沒(méi)有太大的限制，根據(jù)業(yè)務(wù)，資源不同來(lái)根據(jù)產(chǎn)品用方法。

5.1探索期（產(chǎn)品初創(chuàng)期）

目標(biāo)：掌控產(chǎn)品方向（活下去）

關(guān)注：用戶(hù)價(jià)值

用戶(hù)：假設(shè)用戶(hù)

策略：最小成本驗(yàn)證產(chǎn)品方向

方法：假設(shè)的用戶(hù)畫(huà)像、產(chǎn)品故事地圖、設(shè)計(jì)沖刺法、訪談、用戶(hù)研究（定性分析）

關(guān)注數(shù)據(jù)指標(biāo)：推薦意愿/新增用戶(hù)數(shù)/滿(mǎn)意度

品牌：不急于建立

5.1.1、通過(guò)訪談、調(diào)研，初步建立用戶(hù)畫(huà)像，抽象假象用戶(hù)，提煉關(guān)鍵點(diǎn)。

用戶(hù)畫(huà)像是在大數(shù)據(jù)時(shí)代背景下，用戶(hù)信息充斥在網(wǎng)絡(luò)中，將用戶(hù)的每個(gè)具體信息抽象成標(biāo)簽，利用這些標(biāo)簽將用戶(hù)形象具體化，從而為用戶(hù)提供有針對(duì)性的服務(wù)。

產(chǎn)品摸索期我所定義的目標(biāo)用戶(hù)其實(shí)并不準(zhǔn)確，而是假象用戶(hù)，此階段的概念用戶(hù)一直隨著產(chǎn)品方向的改變而改變，所以無(wú)法確立明確針對(duì)性的用戶(hù)畫(huà)像信息，但是我們應(yīng)該先確定一個(gè)大概的目標(biāo)用戶(hù)定性的去分析，區(qū)分用戶(hù)角色，挖掘不同角色的痛點(diǎn)，然后找到解決問(wèn)題的切入點(diǎn)。

5.1.2、利用用戶(hù)診斷法建立產(chǎn)品假設(shè)，并進(jìn)行價(jià)值評(píng)估，明確產(chǎn)品方向。

5.1.3、利用用戶(hù)故事地圖篩選核心任務(wù)及對(duì)應(yīng)功能

用戶(hù)故事地圖可以用小會(huì)議的形式展開(kāi)，就是讓所有參與者一起用便簽，一張一個(gè)動(dòng)作，從左至右按照時(shí)間線，描繪用戶(hù)在產(chǎn)品使用場(chǎng)景下所發(fā)生的所有用戶(hù)行為。同一時(shí)間發(fā)生的，就寫(xiě)在同一位置的下方；出現(xiàn)同一場(chǎng)景不同可能的動(dòng)作時(shí)，可能會(huì)形成不同的分支動(dòng)作；直到重回主線或者結(jié)束支線。最后關(guān)鍵還是總結(jié)用戶(hù)痛點(diǎn)和產(chǎn)品核心的功能點(diǎn)。

5.1.4、貫穿最小成本原則，最小成本試錯(cuò)——MVP和設(shè)計(jì)沖刺法

最小可行產(chǎn)品（MVP）是指可以產(chǎn)生預(yù)期成果的最小產(chǎn)品發(fā)布，對(duì)于迭代產(chǎn)品來(lái)說(shuō)，又可以講最小可行方案：最小可行方案是指可以產(chǎn)生預(yù)期成果的最小發(fā)布方案。

設(shè)計(jì)沖刺法的本質(zhì)理念跟MVP還是一致的，只不過(guò)所用成本更小。設(shè)計(jì)沖刺法特點(diǎn)：參與人員較少且有最終決策權(quán)；閉關(guān)沖刺使用白板隨時(shí)記錄；適用于風(fēng)險(xiǎn)高、時(shí)間緊、起步難的情況。

MVP是最小可行方案進(jìn)行發(fā)布驗(yàn)證，而設(shè)計(jì)沖刺是更短時(shí)間產(chǎn)生一個(gè)頭腦風(fēng)暴的真實(shí)原型，進(jìn)行真人測(cè)試，這個(gè)過(guò)程并沒(méi)有真正設(shè)計(jì)一款產(chǎn)品，而是通過(guò)設(shè)計(jì)方式做了一次早起用戶(hù)調(diào)研，并獲得相對(duì)有驗(yàn)證性的結(jié)果，避免真實(shí)上線效果不好對(duì)用戶(hù)造成的負(fù)面影響。

其實(shí)市面上大部分還是用的MVP，因?yàn)閷?shí)際上用設(shè)計(jì)沖刺，一個(gè)是對(duì)設(shè)計(jì)人員的要求較高，二是驗(yàn)證的結(jié)果由于測(cè)試范圍的限制不一定與市場(chǎng)反應(yīng)一致。與做一個(gè)小產(chǎn)品來(lái)說(shuō)，現(xiàn)在更流行保險(xiǎn)的辦法可以做一個(gè)小程序，或者幾個(gè)小程序進(jìn)行方案對(duì)比，大流量下好乘涼，小程序的開(kāi)發(fā)成本，用戶(hù)引入成本更低。

5.1.5、定性為主，不斷試錯(cuò)中掌控產(chǎn)品方向

船小才好調(diào)頭，對(duì)于產(chǎn)品來(lái)說(shuō)如果本身戰(zhàn)略層出現(xiàn)問(wèn)題，后續(xù)投入越多的資本越難收?qǐng)觯脩?hù)量不上不下，用戶(hù)粘性不高，結(jié)果資金不夠了，用之雞肋棄之可惜，再轉(zhuǎn)方向還是比較困難。尤其是用戶(hù)對(duì)產(chǎn)品建立一定認(rèn)知后，重新調(diào)整大方向，基本等于刷新用戶(hù)流。

5.2成長(zhǎng)期（產(chǎn)品高速增長(zhǎng)期）

目標(biāo)：鞏固差異化的產(chǎn)品定位（活得好）

關(guān)注：產(chǎn)品核心競(jìng)爭(zhēng)力

用戶(hù)：目標(biāo)用戶(hù)

策略：大膽創(chuàng)新鞏固差異化的產(chǎn)品定位

方法：提煉用戶(hù)畫(huà)像不斷校驗(yàn)、用戶(hù)體驗(yàn)地圖、設(shè)計(jì)接力法（定性+定量）

關(guān)注數(shù)據(jù)指標(biāo)：新增用戶(hù)數(shù)/留存率/復(fù)購(gòu)率/活躍度

品牌：建立有創(chuàng)意且能落地的品牌，加深用戶(hù)認(rèn)知，占領(lǐng)用戶(hù)心智

5.2.1、用戶(hù)校驗(yàn)，確立產(chǎn)品定位

產(chǎn)品成長(zhǎng)期用戶(hù)大量涌盡，掌握一定數(shù)據(jù)和掌控產(chǎn)品方向后可以通過(guò)數(shù)據(jù)分析或用戶(hù)調(diào)研，來(lái)看實(shí)際用戶(hù)特征和之前假設(shè)的用戶(hù)人群特征是否符合。集中精力服務(wù)好最重要的用戶(hù)群體，定性挖掘、定量驗(yàn)證的思路去完成用戶(hù)畫(huà)像。

可針對(duì)目標(biāo)用戶(hù)進(jìn)行調(diào)研和深度訪談，從用戶(hù)選擇產(chǎn)品最關(guān)鍵因素提煉產(chǎn)品目前的核心吸引點(diǎn)。用戶(hù)的關(guān)心點(diǎn)也要跟產(chǎn)品本身的當(dāng)前定位做對(duì)比，看用戶(hù)接受到的點(diǎn)是否是產(chǎn)品讓他們感受到的點(diǎn)，感受不到又是什么原因，不斷提煉核心競(jìng)爭(zhēng)點(diǎn)的優(yōu)勢(shì)。

成長(zhǎng)期需要確認(rèn)產(chǎn)品的定位，就是差異化的產(chǎn)品方向，即差異化的目標(biāo)用戶(hù)群體（價(jià)值排序）、差異化的產(chǎn)品及服務(wù)（競(jìng)爭(zhēng)優(yōu)勢(shì)）、差異化的產(chǎn)品價(jià)值（核心優(yōu)勢(shì)）。

價(jià)值排序：通過(guò)了解用戶(hù)特征，明確用戶(hù)分類(lèi)及相關(guān)利益群體，然后明確把誰(shuí)放在第一位。在實(shí)際產(chǎn)品設(shè)計(jì)過(guò)程中，我們也可以用價(jià)值排序，來(lái)設(shè)計(jì)產(chǎn)品功能和交互體驗(yàn)，比如平臺(tái)收費(fèi)是針對(duì)買(mǎi)方還是賣(mài)方。

競(jìng)爭(zhēng)策略：避實(shí)就虛地找到競(jìng)爭(zhēng)對(duì)手的盲區(qū)或自己的優(yōu)勢(shì)所在，為用戶(hù)提供差異化服務(wù)。競(jìng)爭(zhēng)策略主要依賴(lài)高層的洞見(jiàn)和判斷，如果你出產(chǎn)品和競(jìng)爭(zhēng)對(duì)手沒(méi)有本質(zhì)差異，那就考慮是否可以服務(wù)與不同種類(lèi)的人群或者能提供不一樣的價(jià)值。比如同樣是做電商，你的質(zhì)量、價(jià)格、物流、種類(lèi)是不是有優(yōu)勢(shì)。

5.2.2、確立增長(zhǎng)指標(biāo)

增長(zhǎng)指標(biāo)是對(duì)應(yīng)于產(chǎn)品差異化定位的可量化指標(biāo)。增長(zhǎng)指標(biāo)要符合：可成長(zhǎng)性，客觀性，有方向性。避免主觀，虛榮的指標(biāo)，最常見(jiàn)的就是過(guò)分關(guān)注獲客拉新指標(biāo)，留存不足，及前后導(dǎo)向不一致的情況。至于用戶(hù)滿(mǎn)意度、任務(wù)完成度等主觀的體驗(yàn)指標(biāo)可以作為參考，但是不能作為最終的增長(zhǎng)指標(biāo)。核心關(guān)注點(diǎn)是轉(zhuǎn)化、留存、復(fù)購(gòu)、活躍度等指標(biāo)，既側(cè)面體現(xiàn)了良好的用戶(hù)體驗(yàn)，增加了用戶(hù)與產(chǎn)品粘性，讓產(chǎn)品長(zhǎng)期可持續(xù)發(fā)展。

5.2.3、利用用戶(hù)體驗(yàn)地圖（E-Experience Map），同理心地圖，結(jié)合增長(zhǎng)指標(biāo)大膽提出假設(shè)，排優(yōu)先級(jí)，并根據(jù)開(kāi)發(fā)成本等因素通過(guò)四象限原則，選擇最小成本提升指標(biāo)   

用戶(hù)故事地圖、用戶(hù)體驗(yàn)地圖、同理心地圖的區(qū)別：用戶(hù)故事地圖強(qiáng)調(diào)用戶(hù)使用產(chǎn)品/服務(wù)的任務(wù)流程，用它來(lái)篩選當(dāng)前最重要的任務(wù)及對(duì)應(yīng)功能，以完成最小可行產(chǎn)品設(shè)計(jì)；用戶(hù)體驗(yàn)地圖不僅包括任務(wù)流程，還包括與之對(duì)應(yīng)的體驗(yàn)問(wèn)題，更關(guān)注用戶(hù)的體驗(yàn)情緒，從而找到提升體驗(yàn)的機(jī)會(huì)點(diǎn)；同理心地圖幫助我們?cè)诿總€(gè)不同場(chǎng)景下與用戶(hù)換位思考、打開(kāi)思路，挖掘用戶(hù)選擇決定的深層動(dòng)機(jī)。在實(shí)際使用場(chǎng)合沒(méi)有嚴(yán)格界線，可根據(jù)實(shí)際情況使用核心點(diǎn)進(jìn)行分析。

5.2.4、體驗(yàn)升級(jí)——逐步發(fā)布驗(yàn)證（設(shè)計(jì)接力）

大版本迭代的優(yōu)點(diǎn)就是一旦成功，可以大幅度拉開(kāi)和競(jìng)爭(zhēng)對(duì)手的差距，但是一旦失敗，會(huì)影響業(yè)務(wù)的發(fā)展得不償失。所以為了預(yù)防風(fēng)險(xiǎn)，大多數(shù)公司會(huì)在上線前先進(jìn)行可用性測(cè)試，進(jìn)行必要的線上驗(yàn)證再發(fā)布。通過(guò)不斷分析增長(zhǎng)指標(biāo)，找選設(shè)計(jì)方向，進(jìn)行模塊拆分，接力發(fā)布，循環(huán)驗(yàn)證，提升產(chǎn)品價(jià)值。

先驗(yàn)證后發(fā)布方法：

a、A/BTest

制作兩個(gè)（A/B）或多個(gè)（A/B/n）版本，在同一時(shí)間維度，分別讓組成成分相同（相似）的訪客群組（目標(biāo)人群）隨機(jī)的訪問(wèn)這些版本，收集各群組的用戶(hù)體驗(yàn)數(shù)據(jù)和業(yè)務(wù)數(shù)據(jù)，最后分析、評(píng)估出最好版本，正式采用（消除UX、bug帶來(lái)的影響數(shù)據(jù)），并不斷迭代進(jìn)入一下個(gè)A/BTest。產(chǎn)品成長(zhǎng)期，中小型企業(yè)可以用局部變量測(cè)試，大型成熟產(chǎn)品可以重疊實(shí)驗(yàn)（更多、更好、更快）。

要求：1、隨機(jī)抽樣；2、足夠的樣本量。

優(yōu)點(diǎn)：可以在同時(shí)段觀測(cè)效果，受到環(huán)境影響因素一致，容易客觀驗(yàn)證方案

缺點(diǎn)：需要占用開(kāi)發(fā)資源，完整的一次測(cè)驗(yàn)需要花費(fèi)時(shí)間較多

b、灰度測(cè)試

先進(jìn)行一個(gè)小范圍的嘗試工作，然后再慢慢放量，直到這個(gè)全新的功能覆蓋到所有的系統(tǒng)用戶(hù)。比如Facebook先發(fā)布1%，慢慢推廣到全部，現(xiàn)在普遍大廠也會(huì)用到這個(gè)方法，減少大版本試錯(cuò)帶來(lái)的損失。灰度測(cè)試的同時(shí)可以A/Btest，在灰度測(cè)試過(guò)程中選出最佳方案，然后全部發(fā)布。

合適:用戶(hù)群體較大，否則會(huì)因?yàn)榱髁啃《鴮?dǎo)致結(jié)果不準(zhǔn)確。

c、分時(shí)段測(cè)試

可以通過(guò)不同時(shí)段測(cè)試，對(duì)比數(shù)據(jù)。為減少對(duì)用戶(hù)過(guò)多干擾和負(fù)面影響，可以先用夜間或用戶(hù)量較小時(shí)段切換到新版本。

缺點(diǎn)：得到的是環(huán)比數(shù)據(jù)，不像ABtest對(duì)比結(jié)果明顯有參考意義。而且在沒(méi)有確定方向的摸索階段，用分段測(cè)試，數(shù)據(jù)指向不明確，通常會(huì)存在數(shù)據(jù)一直不好的情況，頻繁換方案， 自亂陣腳。

d、分渠道測(cè)試

渠道推廣對(duì)業(yè)務(wù)支出也是占比較大，優(yōu)秀的商業(yè)設(shè)計(jì)也能讓渠道轉(zhuǎn)化提高，從而減小獲客單價(jià)。所以渠道上的設(shè)計(jì)都會(huì)做n版，優(yōu)化總結(jié)，提升最終的數(shù)據(jù)。

e、新舊版本切換

新版本上線后留出”返回舊版“的入口，這樣一旦用戶(hù)不喜歡新版可以切換到老版本。這樣可以很大程度降低風(fēng)險(xiǎn)，還可以監(jiān)測(cè)不同版本數(shù)據(jù)，還給用戶(hù)一個(gè)緩沖時(shí)間讓用戶(hù)逐漸接受新版本。

缺點(diǎn)：如果新版本運(yùn)行效果不佳，決策者會(huì)進(jìn)退兩難，一般在較有把握，或者想教育用戶(hù)新的體驗(yàn)會(huì)局部用這個(gè)方法。

5.2.5、尋求差異，擴(kuò)大競(jìng)爭(zhēng)優(yōu)勢(shì)

A、瘋狂聯(lián)想法

a、橫向聯(lián)想

結(jié)合產(chǎn)品定位，先得出核心關(guān)鍵詞，再在核心關(guān)鍵詞的基礎(chǔ)上繼續(xù)發(fā)散。比如一個(gè)男士護(hù)膚品電商網(wǎng)站，核心關(guān)鍵詞是：垂直、B2C、男用戶(hù)多、護(hù)膚品等，可以根據(jù)這些關(guān)鍵詞找到合適的參考。值得注意的是關(guān)鍵詞的選擇也可以根據(jù)你需要的提升的核心價(jià)值點(diǎn)去聯(lián)想。

b、縱向聯(lián)想

縱向聯(lián)想是從一個(gè)關(guān)鍵詞出發(fā)，縱向不斷延展出新的關(guān)鍵詞，并找到對(duì)應(yīng)競(jìng)品。比如保健品有一個(gè)重要的特征就是注重功效，我們可以想到具有同種特征的護(hù)膚品。

關(guān)于聯(lián)想，在頭腦風(fēng)暴中并沒(méi)有特備嚴(yán)格的步驟方法規(guī)定，可以根據(jù)自己的認(rèn)知由近至遠(yuǎn)拓展。思維跟橫向縱向也是類(lèi)似，可以先參考最典型接近的，再利用共同關(guān)鍵特征來(lái)擴(kuò)散，也可以利用不同組合的關(guān)鍵詞重新找到相應(yīng)的競(jìng)品。最后根據(jù)四象限原則，把相關(guān)度高，體驗(yàn)好的，更有參考價(jià)值的競(jìng)品拿來(lái)精細(xì)分析。

B、競(jìng)品對(duì)比分析法

通過(guò)聯(lián)想發(fā)我們也能聯(lián)想出不同維度的競(jìng)品，這師我們需要考慮競(jìng)品哪些部分類(lèi)似可以參考的，哪些部分不同需要注意的，但同時(shí)也可以考慮借鑒不同部分的優(yōu)勢(shì)轉(zhuǎn)化成自己的優(yōu)勢(shì)。比如最早彈幕只出現(xiàn)在視頻上，抓住彈幕可以活躍氣氛，滿(mǎn)足觀眾發(fā)表評(píng)論和觀看時(shí)時(shí)評(píng)論達(dá)到的心里共鳴，增加用戶(hù)之間的互動(dòng)性，從而提高用戶(hù)粘性的核心點(diǎn)后，彈幕也出現(xiàn)在直播、音頻、新聞，甚至是炒股軟件上。

5.2.6、做有創(chuàng)意且能落地的品牌設(shè)計(jì)

品牌的核心點(diǎn)就是讓人“記住”，最好能找到目標(biāo)用戶(hù)心智中空缺的領(lǐng)域，在這個(gè)垂直領(lǐng)域占領(lǐng)優(yōu)勢(shì)位置，所以品牌強(qiáng)調(diào)差異化。比如一想到打車(chē)就想到滴滴，一想到購(gòu)物就想到萬(wàn)能的淘寶，一遇到問(wèn)題就上百度。

傳統(tǒng)的方法：了解業(yè)務(wù)——發(fā)散關(guān)鍵詞——情緒版——視覺(jué)方案

精益方法：內(nèi)外調(diào)研——語(yǔ)言釘——個(gè)性關(guān)鍵詞——視覺(jué)錘（快速落地）

成長(zhǎng)期的品牌建設(shè)更需要突出創(chuàng)新性，讓人眼前一亮，記憶猶新。這里展示展示了御膳房網(wǎng)站的品牌三元法示例，御膳房的風(fēng)格的確做到了主題感強(qiáng)烈，讓人眼前一亮，不過(guò)個(gè)人認(rèn)為作為科技網(wǎng)站，還是略顯了花哨，安全感不足。品牌三元法是也是通過(guò)對(duì)產(chǎn)品的了解，分別從理性業(yè)務(wù)層和感性業(yè)務(wù)層出發(fā)，延伸個(gè)性創(chuàng)造層，記錄關(guān)鍵詞展開(kāi)設(shè)計(jì)，其本質(zhì)還是圍繞業(yè)務(wù)拓展價(jià)值。成熟的品牌設(shè)計(jì)者，不僅要從業(yè)務(wù)出發(fā)，更要考慮不同場(chǎng)景的品牌應(yīng)用，打造統(tǒng)一有個(gè)性的全方位品牌。

5.3成熟期（產(chǎn)品穩(wěn)定期）

目標(biāo)：提升產(chǎn)品價(jià)值（賺的多）

關(guān)注：商業(yè)變現(xiàn)

用戶(hù)：活躍用戶(hù)

策略：科學(xué)嚴(yán)謹(jǐn)提升商業(yè)價(jià)值

方法：用戶(hù)體驗(yàn)地圖、設(shè)計(jì)跨欄法（定量為主）

關(guān)注數(shù)據(jù)指標(biāo)：活躍度/流失率/營(yíng)收/成本率/現(xiàn)金流

品牌：擴(kuò)大品牌影響力和品牌價(jià)值

5.3.1、用戶(hù)分層，尋找核心價(jià)值用戶(hù)

a、核心價(jià)值用戶(hù)是留存用戶(hù)中最活躍的部分

b、找到核心價(jià)值的用戶(hù)特征

通過(guò)RFM模型來(lái)篩選核心價(jià)值用戶(hù)

R=Recency最近一次消費(fèi)

F=Frequency消費(fèi)頻率

M=Monetary消費(fèi)金額

（RFM，1代表高，0代表低）

（111）重要價(jià)值客戶(hù)：最近消費(fèi)時(shí)間較近、消費(fèi)頻次和消費(fèi)金額都高，典型的核心價(jià)值用戶(hù)，高留存、高活躍度

（011）重要保持客戶(hù)：最近消費(fèi)時(shí)間較遠(yuǎn)，但是消費(fèi)頻次和金額都很高，說(shuō)明這是一段時(shí)間沒(méi)來(lái)的忠實(shí)客戶(hù)，需要與他保持聯(lián)系，召回

（101）重要發(fā)展客戶(hù)：最近消費(fèi)時(shí)間近、消費(fèi)金額高，但是頻次不高，忠誠(chéng)度不高，很有潛力的用戶(hù)，必須重點(diǎn)發(fā)展

（001）重要挽留客戶(hù)：最近消費(fèi)時(shí)間較遠(yuǎn)、消費(fèi)頻次不高，但消費(fèi)金額高的，可能是將要流失或者已經(jīng)流失的用戶(hù)，應(yīng)當(dāng)采用措施挽留

一般公司都會(huì)有利用RFM來(lái)觀測(cè)核心用戶(hù)，針對(duì)不同類(lèi)型來(lái)做不同的措施，但是所有數(shù)據(jù)的利用率都跟產(chǎn)品客觀成長(zhǎng)度有掛鉤，成長(zhǎng)期可能還不是那么細(xì)分，成熟期就會(huì)更精細(xì)的分析。最簡(jiǎn)單粗暴的就是看看最近一次消費(fèi)，超過(guò)多少天就短信消息召回給個(gè)優(yōu)惠券之類(lèi)的。

c、總結(jié)核心規(guī)律，改進(jìn)產(chǎn)品，調(diào)整運(yùn)營(yíng)策略

找到核心價(jià)值的用戶(hù)特征后，需要探測(cè)他們的行為模式與貢獻(xiàn)的規(guī)律，從而激勵(lì)更多用戶(hù)貢獻(xiàn)更多價(jià)值。比如喜馬拉雅，找到訂閱節(jié)目的用戶(hù)明顯留存度更高，用戶(hù)活躍度也高于隨便聽(tīng)聽(tīng)的用戶(hù)的規(guī)律后，在產(chǎn)品設(shè)計(jì)時(shí)會(huì)把訂閱放在顯眼的位置，并且在首頁(yè)把用戶(hù)感興趣的模塊放在優(yōu)先的位置來(lái)提升訂閱度。

5.3.2、商業(yè)價(jià)值提升

a、以科學(xué)創(chuàng)新為代表的產(chǎn)品核心競(jìng)爭(zhēng)力：數(shù)據(jù)和技術(shù)驅(qū)動(dòng)一切，科技提升效率。

b、用戶(hù)價(jià)值：用戶(hù)價(jià)值是商業(yè)變現(xiàn)的基礎(chǔ)，沒(méi)有人會(huì)在沒(méi)有用戶(hù)轉(zhuǎn)化的平臺(tái)上投入資金。

c、商業(yè)變現(xiàn)：用戶(hù)付費(fèi)，廣告收入，與用戶(hù)體驗(yàn)合理價(jià)值平衡。

在商業(yè)變現(xiàn)階段，除了要著眼于如何更的賺到錢(qián)，也需要平衡用戶(hù)體驗(yàn)，且不斷提高產(chǎn)品本身的價(jià)值。百度在成為巨頭后，百度貼吧過(guò)多不相關(guān)的推送導(dǎo)致用戶(hù)粘性急劇下降，魏則西事件等負(fù)面消息，再到陸奇離職，目前市值縮水至365.38億，被拼多多趕超。而微信和抖音這方面做的較為出色。微信是迫不得已不愿打擾用戶(hù)，所以廣告頻率一直不高，廣告質(zhì)量也有所保障，會(huì)根據(jù)用戶(hù)的喜好推薦廣告。抖音是沉浸式的廣告體驗(yàn)，一不留神就進(jìn)入了廣告的坑，而且廣告的形式與抖音原生用戶(hù)的不謀而合，有些有創(chuàng)意的網(wǎng)紅視頻用戶(hù)的接受度也很高，從而會(huì)極大的提高轉(zhuǎn)化，對(duì)用戶(hù)體驗(yàn)的影響也較少。

5.3.3、增值假設(shè)——圍繞目標(biāo)增長(zhǎng)（量化設(shè)計(jì)師的價(jià)值）

設(shè)計(jì)策略：穩(wěn)定、規(guī)范、統(tǒng)一、科學(xué)嚴(yán)謹(jǐn)

a、拆分變量科學(xué)測(cè)試

到了成熟期，設(shè)計(jì)師在修改設(shè)計(jì)方案的時(shí)候不是改的越多越好，有的時(shí)候一個(gè)模塊的重構(gòu)，一個(gè)按鈕的顏色變化都能影響數(shù)據(jù)轉(zhuǎn)化，所以需要通過(guò)科學(xué)的方式，調(diào)整到合適的顆粒度去測(cè)試。  

b、把AB測(cè)試作為一項(xiàng)基本制度

如果想要驗(yàn)證設(shè)計(jì)效果，那么可以在保持功能不變的情況下，只看設(shè)計(jì)方案的區(qū)別，這樣就可以有效的量化設(shè)計(jì)。

2018 年，中國(guó)移動(dòng)互聯(lián)網(wǎng)用戶(hù)增長(zhǎng)放緩，上半年僅增長(zhǎng) 2 千萬(wàn)。但是頭條系卻異軍突起，超過(guò)百度系、阿里系穩(wěn)居總使用時(shí)長(zhǎng)第 2 名。頭條系的崛起有許多的原因，強(qiáng)大的數(shù)據(jù)監(jiān)控系統(tǒng)，成熟的增長(zhǎng)引擎，上百組同時(shí)進(jìn)行的AB測(cè)試等等都在幫助產(chǎn)品經(jīng)理和運(yùn)營(yíng)們找到最優(yōu)的方案。

c、用戶(hù)增長(zhǎng)地圖

用戶(hù)增長(zhǎng)地圖是借用AARRR概念作為骨架的展開(kāi)的，通過(guò)AARRR模型針對(duì)沒(méi)一步提出增值假設(shè)，以提升總體價(jià)值指標(biāo)。

5.3.4、提高整體效率：通過(guò)DPL（Design Pattern Library）組件庫(kù)批量?jī)?yōu)化；科技力量-人工智能

a、根據(jù)長(zhǎng)期積累下來(lái)的AB測(cè)試結(jié)果，沉淀規(guī)范后，把這些規(guī)范內(nèi)容快速?gòu)?fù)制到若干條產(chǎn)品線上。從產(chǎn)品周期來(lái)說(shuō)，摸索期需要建立一定的視覺(jué)規(guī)范，但不合適做細(xì)致化的組件，等業(yè)務(wù)慢慢穩(wěn)定下來(lái)，不會(huì)有大方向的改變后，需要慢慢建立細(xì)致的組件庫(kù)，以方便團(tuán)隊(duì)合作。每個(gè)業(yè)務(wù)也有其特殊性，to B的業(yè)務(wù)一般建立組件庫(kù)會(huì)比較早，模式化的東西較多，針對(duì)不同的B端也會(huì)有定制化的內(nèi)容，DPL可以大大提高整個(gè)業(yè)務(wù)的效率。

b、通過(guò)智能科技的力量來(lái)提升整體的效率。比如阿里的千人千面，通過(guò)消費(fèi)者偏好進(jìn)行個(gè)性化投放，魯班系統(tǒng)對(duì)banner進(jìn)行簡(jiǎn)單的合成，大大提高大促期間海報(bào)生成的效率。

5.3.5、打造統(tǒng)一的全業(yè)務(wù)線品牌設(shè)計(jì)

a、形成統(tǒng)一且獨(dú)特的品牌印記

成熟期面對(duì)繁多支線，先對(duì)內(nèi)樹(shù)立統(tǒng)一的品牌形象；主品牌與產(chǎn)品調(diào)性統(tǒng)一；線上線下風(fēng)格的統(tǒng)一。

b、品牌印記提取與深化

品牌趨勢(shì)都是化繁為簡(jiǎn)，比如蘋(píng)果、奔馳的logo就越來(lái)越簡(jiǎn)單，利于大眾記憶，也利于線下拓展。

提取出logo基因去強(qiáng)調(diào)品牌作為拓展延伸，比如天貓和考拉的吉祥物頭部圖形的簡(jiǎn)化應(yīng)用，都比較簡(jiǎn)約，易記，易拓展

C、成熟期的品牌也不是一成不變的

成熟期，產(chǎn)品在市場(chǎng)中已經(jīng)有了穩(wěn)固位置，品牌不宜過(guò)度設(shè)計(jì)，而需要采取保守、穩(wěn)重、擴(kuò)展性強(qiáng)的風(fēng)格。品牌的更新升級(jí)，一方面順應(yīng)企業(yè)的戰(zhàn)略方向的改變，一方面順應(yīng)整個(gè)設(shè)計(jì)前瞻潮流。比如美團(tuán)變黃的品牌升級(jí)，是為了更好的從外賣(mài)這個(gè)觸點(diǎn)深入用戶(hù)心智，而OPPO ，vivo等品牌升級(jí)感覺(jué)更美有特色，其實(shí)也是順應(yīng)國(guó)際化的設(shè)計(jì)趨勢(shì)，更有文字辨識(shí)度，更國(guó)際化。

5.4衰退期

每個(gè)產(chǎn)品都有一個(gè)生命周期，這是受市場(chǎng)因素導(dǎo)致的，此時(shí)用戶(hù)會(huì)逐漸流失，既被其它新產(chǎn)品的體驗(yàn)?zāi)Ｊ剿赃@時(shí)應(yīng)該更關(guān)注用戶(hù)流失后使用的產(chǎn)品，分析競(jìng)品的商業(yè)模式和功能，同時(shí)監(jiān)測(cè)流失速度，需盡快拓展產(chǎn)品邊界，尋找新的切入點(diǎn)。不過(guò)好的產(chǎn)品都是在不斷優(yōu)化，迎合新時(shí)代的需求，不斷擴(kuò)大自己的影響力和產(chǎn)品價(jià)值。之前文章我也寫(xiě)過(guò)關(guān)于微信的未雨綢繆，不斷優(yōu)化。微信的用戶(hù)粘性強(qiáng)大，誰(shuí)也不好說(shuō)他能再打幾年，像抖音這種迅速崛起的產(chǎn)品是否是現(xiàn)象級(jí)的曇花一現(xiàn)，也要看它是否能與時(shí)俱進(jìn)。

六、設(shè)計(jì)師順勢(shì)而為，自我定位

一般來(lái)說(shuō)小公司的大部分項(xiàng)目處于探索期和成長(zhǎng)期，而大公司的項(xiàng)目很多處于成熟期，也有一些孵化探索的項(xiàng)目。處于探索期的項(xiàng)目，需要大膽創(chuàng)新同時(shí)，有可能變化極快，無(wú)法冷靜下來(lái)根據(jù)數(shù)據(jù)用不同設(shè)計(jì)方式達(dá)成增長(zhǎng)目標(biāo)，我就經(jīng)歷過(guò)一個(gè)首頁(yè)一星期全新大改版n次的慘痛經(jīng)歷。反觀大公司很多流程復(fù)雜，驗(yàn)證方式系統(tǒng)完善，有些設(shè)計(jì)師感覺(jué)沒(méi)有用武之地，不能施展才華。

根據(jù)不同階段采取適合自己的設(shè)計(jì)方法，驅(qū)動(dòng)產(chǎn)品提高設(shè)計(jì)價(jià)值，切勿漫無(wú)目標(biāo)、抱怨環(huán)境，浪費(fèi)時(shí)間。

如果你思維極其顛覆愛(ài)挑戰(zhàn)可以選擇從0到1的新行業(yè)；如果你喜歡創(chuàng)新可以選擇成長(zhǎng)型的行業(yè)及公司，或是成熟公司里的成長(zhǎng)型項(xiàng)目；如果你追求科學(xué)、嚴(yán)謹(jǐn)、，那么可以選擇成熟型的公司、項(xiàng)目。

轉(zhuǎn)自-UI中國(guó)

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

本文列舉了交易型電商與內(nèi)容型電商的對(duì)比，以及他們的消費(fèi)者交易行為的四大區(qū)別。

No1  ：?jiǎn)为?dú)評(píng)估vs聯(lián)合評(píng)估

消費(fèi)者看到一個(gè)產(chǎn)品的時(shí)候，有兩種典型場(chǎng)景：?

在內(nèi)容電商（比如看到新媒體文章推薦）時(shí)，用戶(hù)一般處于單獨(dú)評(píng)估狀態(tài)。

比如顧爺發(fā)過(guò)一個(gè)軟文賣(mài)“電表箱掛畫(huà)”——家里電表箱很丑、不美觀，用一副畫(huà)把它遮住，顯得家里美觀又有逼格。

當(dāng)看到這個(gè)商品推薦廣告的時(shí)候，你就進(jìn)入了“單獨(dú)評(píng)估”狀態(tài)，只比較眼前的畫(huà)以及你的現(xiàn)狀（沒(méi)有電表畫(huà)）。

這個(gè)時(shí)候你在意的是產(chǎn)品本身好不好，帶給你的感覺(jué)怎么樣，以及價(jià)格能不能接受。

很可能的結(jié)果是，你看到這幅畫(huà)200多塊錢(qián)，也不太貴，所以就買(mǎi)了。

而如果你不是在閱讀顧爺公眾號(hào)的時(shí)候看到商品，而是進(jìn)入淘寶、京東這種交易型電商，心理就不一樣了。

在交易型電商中，用戶(hù)一般處于“聯(lián)合評(píng)估”狀態(tài)。

比如淘寶搜“電表箱掛畫(huà)”，你看到的頁(yè)面是這樣的：

這個(gè)時(shí)候，你進(jìn)入了“聯(lián)合評(píng)估”狀態(tài)，你主要的比較點(diǎn)不再是“電表箱掛畫(huà)”和你的現(xiàn)狀（沒(méi)有電表畫(huà)），而是眾多的電表箱掛畫(huà)中哪個(gè)最好。

如果你仔細(xì)盯著上面的淘寶圖看，我想你此時(shí)的消費(fèi)者心理已經(jīng)發(fā)生了這些變化：想要看看不同價(jià)位的畫(huà)之間到底有什么區(qū)別。

材質(zhì)？大小？印染工藝？誰(shuí)畫(huà)的？急于尋找一些讓自己感覺(jué)到熟悉的信息。

比如掃一眼看看哪個(gè)品牌是你聽(tīng)過(guò)的（即使是華為牌的畫(huà)，此時(shí)都更能抓你的眼球）。

趕緊比較哪個(gè)店銷(xiāo)量大、好評(píng)多（咦？剛剛看到顧爺?shù)?，怎么不這么關(guān)心銷(xiāo)量信息？）

開(kāi)始在意價(jià)格，并且重新思考買(mǎi)這個(gè)畫(huà)到底值不值。

然后，你可能不會(huì)買(mǎi)電表箱掛畫(huà)了，甚至?xí)X(jué)得買(mǎi)一幅這樣的畫(huà)很多余，還不如買(mǎi)一箱牛奶補(bǔ)補(bǔ)身體。

表面上看，一樣的產(chǎn)品，你僅僅切換了評(píng)估方式（單獨(dú)評(píng)估VS聯(lián)合評(píng)估），你選擇產(chǎn)品的標(biāo)準(zhǔn)卻產(chǎn)生了巨大的變化。

而就像我們前面說(shuō)的，為了“在競(jìng)爭(zhēng)中存活”，你不得不了解，“決定用戶(hù)選擇”的因素，到底產(chǎn)生了什么改變：

NO2：感性線索vs理性線索

聯(lián)合評(píng)估環(huán)境下，消費(fèi)者更加注重容易對(duì)比的理性線索，比如材質(zhì)、大小、印染工藝等，這是因?yàn)槁?lián)合評(píng)估的時(shí)候，我們看的是選擇項(xiàng)之間的不同，而不是選擇項(xiàng)和現(xiàn)狀之間的不同。

而在單獨(dú)評(píng)估的時(shí)候，消費(fèi)者會(huì)更加容易受到感性線索的影響，大腦進(jìn)入的不是“計(jì)算模式”而是“感覺(jué)模式”，會(huì)更容易感覺(jué)到增加一個(gè)畫(huà)帶來(lái)的生活改變、這幅畫(huà)整體的設(shè)計(jì)感、流露出的藝術(shù)氣息等。

所以，如果你是在參數(shù)上占優(yōu)的產(chǎn)品，比如小米或樂(lè)視的手機(jī)，進(jìn)入聯(lián)合評(píng)估會(huì)非常有利，因?yàn)橛脩?hù)非常在意跑分。

如果你是在參數(shù)以外的體驗(yàn)上占優(yōu)的產(chǎn)品，比如設(shè)計(jì)精美和有情懷的手機(jī)，進(jìn)入單獨(dú)評(píng)估會(huì)比較有利，因?yàn)槟愕膬?yōu)勢(shì)無(wú)法被直接計(jì)算，難以在聯(lián)合評(píng)估中占優(yōu)。

有研究發(fā)現(xiàn)，假設(shè)有兩款同等價(jià)格的冰激凌，一款是滿(mǎn)滿(mǎn)地裝在小杯子里，總共50毫升；另一款是在200毫升的杯子里裝了半滿(mǎn)，相當(dāng)于100毫升。

看到兩款冰激凌，消費(fèi)者卻又會(huì)選擇半滿(mǎn)但是量多的冰激凌——廢話，大家又不傻，看數(shù)據(jù)明顯這個(gè)給的多。

再比如，找工作的時(shí)候，如果只看到一個(gè)職業(yè)選擇，大部分人會(huì)對(duì)那種工作內(nèi)容激動(dòng)人心、公司名讓人仰慕、發(fā)展前景好的工作更滿(mǎn)意（而不是單純的薪水）。

而在聯(lián)合評(píng)估的時(shí)候（同時(shí)拿到很多offer），大家比較來(lái)比較去，最終更容易選擇薪酬更高但自己實(shí)際上并不喜歡的工作。

因?yàn)槁?lián)合評(píng)估的時(shí)候，我們更容易忽略主觀感受，選擇那些“數(shù)據(jù)”和“參數(shù)”上更牛的選項(xiàng)。

所以在淘寶上，你可以直接根據(jù)材質(zhì)、大小等性?xún)r(jià)比選擇一個(gè)畫(huà)，即使這個(gè)畫(huà)買(mǎi)回去后你并沒(méi)有像買(mǎi)顧爺?shù)漠?huà)那樣驚喜。

這也意味著，在交易型電商環(huán)境下，拼參數(shù)、拼數(shù)據(jù)的產(chǎn)品容易獲勝，而在設(shè)計(jì)感、原創(chuàng)性上占優(yōu)的產(chǎn)品，難以贏得顧客選擇。

而在內(nèi)容型電商中，我們是單獨(dú)評(píng)估，這時(shí)候設(shè)計(jì)師原創(chuàng)設(shè)計(jì)帶來(lái)的沖擊感，可能直接讓我們選擇去購(gòu)買(mǎi)。

這同樣意味著，在交易型電商中，我們更容易受到銷(xiāo)量領(lǐng)先、知名品牌等信息的影響，因?yàn)檫@也容易比較。

而在內(nèi)容型電商中，我們則直接感覺(jué)對(duì)這個(gè)產(chǎn)品喜歡不喜歡。

NO3：高端vs低端

• 聯(lián)合評(píng)估狀態(tài)下，我們會(huì)進(jìn)入“計(jì)算模式”，更加注重價(jià)格信息（因?yàn)槿菀妆容^），所以低價(jià)品的銷(xiāo)售會(huì)非常好。
• 單獨(dú)評(píng)估狀態(tài)下，我們會(huì)更加注重主觀感受，更有可能忽略成本，放縱一下買(mǎi)個(gè)自己喜歡的，所以高價(jià)品、享樂(lè)品的銷(xiāo)售會(huì)非常好。

之前我遇到一個(gè)自媒體賣(mài)產(chǎn)品的客戶(hù)，同樣的產(chǎn)品（高端有設(shè)計(jì)感的杯子）推送給同樣的粉絲，一個(gè)用淘寶平臺(tái)，一個(gè)直接用微信嵌入的電商平臺(tái)，結(jié)果后者轉(zhuǎn)化率高了十幾倍。

其實(shí)一個(gè)很重要的原因就是：淘寶本質(zhì)上屬于交易型電商，會(huì)強(qiáng)迫所有消費(fèi)者自動(dòng)進(jìn)入聯(lián)合評(píng)估的狀態(tài)。

在這種狀態(tài)下，用戶(hù)會(huì)更加在意成本信息，價(jià)格敏感性增強(qiáng)，從而導(dǎo)致更少人選擇高端產(chǎn)品、享樂(lè)產(chǎn)品。

所以高端品牌（比如LV）在線下一定是用專(zhuān)賣(mài)店，而不會(huì)進(jìn)入賣(mài)場(chǎng)，因?yàn)楹笳呤锹?lián)合評(píng)估。

總結(jié)

在內(nèi)容電商環(huán)境下，更多人會(huì)在單獨(dú)評(píng)估狀態(tài)下購(gòu)物，出現(xiàn)這些變化：

• 性?xún)r(jià)比的作用性降低，而感性因素的影響會(huì)升高（比如設(shè)計(jì)感、悠久歷史、情懷、故事等）。
• 低端產(chǎn)品的銷(xiāo)售會(huì)降低，原來(lái)很難賣(mài)出去的高端產(chǎn)品、享樂(lè)型產(chǎn)品會(huì)更容易賣(mài)。

NO4： 主動(dòng)搜索vs被動(dòng)搜索

如果在淘寶、京東購(gòu)物，此時(shí)你的心理狀態(tài)經(jīng)常是：我要買(mǎi)東西。

你處于“購(gòu)物”（shopping）心態(tài)中，大腦中經(jīng)常裝著某個(gè)潛在的任務(wù)——比如要看看有沒(méi)有好看的衣服或者想買(mǎi)一箱牛奶存放到冰箱。

這個(gè)時(shí)候，我們就說(shuō)你處于“主動(dòng)搜尋”的心理，你會(huì)對(duì)將來(lái)可能會(huì)購(gòu)買(mǎi)的產(chǎn)品信息更加敏感，而對(duì)無(wú)關(guān)信息不那么敏感。

而在內(nèi)容電商環(huán)境中，你本身正在專(zhuān)心看網(wǎng)紅的直播或者某個(gè)自媒體的內(nèi)容，這個(gè)時(shí)候突然看到有個(gè)產(chǎn)品信息（比如講健康的播主，推薦了新型智能牙刷），此時(shí)，我們說(shuō)你處于“被動(dòng)接受”的心理。

這有什么區(qū)別呢？

研究發(fā)現(xiàn)，在主動(dòng)搜尋的心理中，我們會(huì)更加關(guān)心直接與任務(wù)相關(guān)的信息，而對(duì)與任務(wù)無(wú)關(guān)的信息減少關(guān)心。

比如你想挑一款面霜，會(huì)在大量的面霜相關(guān)的商品中進(jìn)行比較，對(duì)面霜相關(guān)的信息非常敏感。

而如果此時(shí)偶爾看到有個(gè)叫做“面部噴劑”的新型產(chǎn)品，你可能壓根不會(huì)關(guān)心（因?yàn)槟阏谡颐嫠?，即使它也可以幫助你改善和保養(yǎng)皮膚。

（ps：這個(gè)產(chǎn)品是我編的，用來(lái)制造未知感，實(shí)際上不存在這個(gè)產(chǎn)品）

所以在交易型電商中，各種新奇、未知的產(chǎn)品，其實(shí)并不好賣(mài)。

有個(gè)知名的“看不見(jiàn)的大猩猩”心理實(shí)驗(yàn)證明了這一點(diǎn)。

心理學(xué)家召集一些志愿者，給他們布置任務(wù)：數(shù)一下在接下來(lái)的視頻中，球員一共傳了多少次球。

然后在視頻一半的時(shí)候，有個(gè)人穿著大猩猩的衣服進(jìn)場(chǎng)并且做了歡呼的動(dòng)作。

實(shí)驗(yàn)結(jié)束，心理學(xué)家問(wèn)志愿者：球員一共傳了多少次球？大部分人答案都對(duì)了。

但是接著問(wèn)：你們有看到一個(gè)大猩猩嗎？結(jié)果超過(guò)半數(shù)的人聲稱(chēng)沒(méi)有看到大猩猩。

這是因?yàn)榭匆曨l的時(shí)候，大部分人聚焦于“數(shù)傳球”這個(gè)任務(wù)中，從而自動(dòng)忽略了與任務(wù)無(wú)關(guān)的信息（大猩猩）。

這也導(dǎo)致了用戶(hù)在京東選購(gòu)面霜的時(shí)候，可能更容易關(guān)注面霜本身，而不是主動(dòng)好奇地去尋找除了面霜還有什么新型產(chǎn)品可以替代。

而如果是在內(nèi)容型電商，用戶(hù)事先沒(méi)有覺(jué)得要買(mǎi)面霜，而是在看一檔教你如何保養(yǎng)面部的節(jié)目，就更容易接受一種新型的護(hù)理面部的方式（比如XX面部噴劑）。

總結(jié)

內(nèi)容型電商，比交易型電商更適合銷(xiāo)售新奇產(chǎn)品。

文章來(lái)源：人人都是產(chǎn)品經(jīng)理