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

文章來源：站酷   作者：知果日記

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

免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

柵格系統(tǒng)（grid systems）

規(guī)則的網(wǎng)格陣列來指導(dǎo)和規(guī)范網(wǎng)頁中的版面布局以及信息分布。

基本原理

在網(wǎng)頁設(shè)計中，把寬度為“W”的頁面分割成n個網(wǎng)格單元“a”，每個單元與單元之間的間隙設(shè)為“i”,把“a+i”定義“A”。他們之間的關(guān)系如下：

W =（a×n）+（n-1）i

由于a+i=A，

可得：(A×n) – i = W

我們通常把a稱為“柱”，對應(yīng)代碼中的Column；i稱為“水槽”，對應(yīng)代碼中的Gutter；a+i=A稱為“列”

設(shè)計柵格系統(tǒng)，本質(zhì)就是定義a，i，n的數(shù)值。

UI設(shè)計中有一個通用做法，就是元素的寬度盡量是8的倍數(shù)，基于今天的大多數(shù)的網(wǎng)頁設(shè)計，畫板寬度都為1440px ，此時我們將a=24,i=24,n=24,這是一組簡單美妙的數(shù)值，可算得W=（24x24）+23x24=47x24=1128px；將柵格居中于畫板(偏置156px)，此時的柵格系統(tǒng)如下：

1128柵格系統(tǒng)：

得到的這個柵格布局被廣泛使用，比如站酷網(wǎng)首頁:

觀察計算公式W=1128=47x24=（24+23）x24，這里的47不是8的倍數(shù)，我們?nèi)菀紫氲桨阉兂?8，

將a=25,i=24,n=24,算得W=（24x24）+（25-1）x24=48x24=1152px；此時的柵格系統(tǒng)如下：

1152柵格系統(tǒng)：

這個柵格系統(tǒng)的美感在于，寬度W=48x24=1152px，兩邊的留白為畫板1440px寬度的1/10等于144px。Ant Dseign中運用了此柵格：

以上兩個柵格布局都是24柵格系統(tǒng)，使用24柵格系統(tǒng)的好處是，它可以輕松實現(xiàn)2等分、3等分、4等分、6等分、8等分、12等分，也可以進行1：2：1、   1：3：2、   1：2、 1：3  等不對稱分割的布局。

除了最常見的24柵格布局外，也可進行36柵格布局，例如：

a=16，i=16，n=36，W=（16x36）+16x（36-1）=16x（36+35）=1136

1136柵格系統(tǒng)：

a=26，i=24，n=24，W=（26x24）+24x23=24x49=1176px

例如騰訊文檔：

1176柵格系統(tǒng)：

“廠”型布局網(wǎng)頁的柵格布局：

以上的網(wǎng)頁布局都是瀑布式布局，在許多應(yīng)用型網(wǎng)站中，常使用“廠”字布局，對于“廠”布局的網(wǎng)頁，該如何設(shè)計合適的柵格系統(tǒng)呢？

我們可以先確定左側(cè)菜單欄的寬度，例如飛書管理后臺中左側(cè)菜單欄的寬度為228px，在拉動瀏覽器時，這部分通常是不動的，再確定主體內(nèi)容去和左側(cè)菜單欄間的間隙，比如12px。

此時可以計算W=1440-228-12x2=1188。

使用24柵格系統(tǒng)時，12a+11i=1188，方程中有兩個未知數(shù)，我們設(shè)定其中一個時，就可計算出另一個。另i=12,解

W =（a×n）+（n-1）i

1188=（ax24）+23x12

a=38

是幫助，而非限制

對開發(fā)者而言柵格是實現(xiàn)動態(tài)布局的手段，而設(shè)計師對于柵格的理解源自平面設(shè)計中的柵格，不應(yīng)把柵格系統(tǒng)當(dāng)成一種限制，而是幫助，也不用總是擔(dān)心元素超出柵格。

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

文章來源：站酷   作者：隔岸吃瓜

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

免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

對于網(wǎng)頁設(shè)計來說，柵格系統(tǒng)的使用，不僅可以讓網(wǎng)頁的信息呈現(xiàn)更加美觀易讀，更具可用性。而且，對于前端開發(fā)來說，網(wǎng)頁將更加的靈活與規(guī)范。

前言

最近我們產(chǎn)品做了一次全新改版的項目。作為此次項目的設(shè)計師，從項目的前期分析、設(shè)計、交付開發(fā)、驗收上線，整個流程，在項目走查驗收階段我們設(shè)計師投入了30人/天！在我們覺得應(yīng)該設(shè)計投入最少的階段，卻占了我們大量的工作 且最后還原度也遠(yuǎn)不達預(yù)期。

在這個項目中我遇到了哪些問題：

還原問題不單單是設(shè)計師把設(shè)計稿做的多精準(zhǔn)，標(biāo)注的多仔細(xì)，這么簡單就能解決的。是設(shè)計和開發(fā)，團隊之間的合作共識問題。我把整個和開發(fā)對接工作分為前中后三個階段，在這里從頭來梳理一下，聊一聊設(shè)計師和開發(fā)如何高效對接，也是對自己的一次復(fù)盤總結(jié)。

一、評審/排期

1.1、設(shè)計師對還原的要求宣講

在評審環(huán)節(jié)，設(shè)計師本人一定要將自己的設(shè)計稿進行宣講、幫助開發(fā)理解。注意給技術(shù)講述一些適配要求、設(shè)計規(guī)范、交互狀態(tài)及動效等，同時解答技術(shù)同學(xué)的一些疑問，這樣就能將一些可預(yù)見的問題解決掉，解決后期的溝通成本。

有一些地方有多種實現(xiàn)方式，如果前期沒有跟開發(fā)溝通清楚，就會導(dǎo)致最終實現(xiàn)的效果存在誤差，比如：下方這個tab項，單給一張圖，開發(fā)根本不知道設(shè)計師想要的實現(xiàn)方式是什么，固定間距還是固定菜單寬度，還是每項平分寬度，最后很大可能就會按照自己的理解去做了，導(dǎo)致出現(xiàn)重復(fù)返工的現(xiàn)象。

再比如一些點擊熱區(qū)，如果不手動標(biāo)明，有可能就做的很小

下圖是我們手動標(biāo)注的熱區(qū)

1.2、實際開發(fā)者要參與評審

每個開發(fā)負(fù)責(zé)的具體頁面模塊不一樣，別人對具體了解程度也不會不一致，所以在評審會議上，一定要具體開發(fā)者在場，如果對應(yīng)開發(fā)沒有發(fā)表意見，設(shè)計師可詢問，確保他已經(jīng)理解需求。

1.3、開發(fā)充分評估還原工作問題

設(shè)計師在講解自己的要求后，開發(fā)也要及時反饋是否有還原困難，如：是否有技術(shù)限制？是否有組件改動困難（牽一發(fā)而動全身）？實現(xiàn)成本過高（投入產(chǎn)出的性價比不夠）？等意見和原因，設(shè)計師也可拋出之前是否遇到過類似的阻礙，幫助開發(fā)去了解。

1.4、認(rèn)真記會議紀(jì)要

評審過程的問題和重要講解點，一定要記錄下來，會議中開發(fā)提出的一些問題及解決方案、或者沒有達成共識的地方，記錄下來等領(lǐng)導(dǎo)決策，在會議結(jié)束后以郵件形式、或wiki文檔發(fā)送前端們，抄送產(chǎn)品，確保會議內(nèi)容的傳達到位。后面也好跟蹤。

還有一點就是，我們之前遇到的情況，在宣講會上 講解的一些要求，開發(fā)在做的時候可能就忘記了，讓開發(fā)改他認(rèn)為設(shè)計沒有明確要求、會有點難推動，就會搞得雙方都有抱怨。有會議記錄也可避免此類情況發(fā)生

二、開發(fā)階段

2.1、還原有問題及時反饋

在前面我們做了詳盡的溝通和評審，但有時也避免不了在開發(fā)過程有些問題才發(fā)現(xiàn)暴露。這個就需要開發(fā)同學(xué)能重視還原問題，積極溝通反饋，和設(shè)計確認(rèn)商議 是否有其它可替代方案，切勿自己發(fā)揮，等到后期驗收的時候才說出問題可能會影響進度

2.2、開發(fā)完成后對齊設(shè)計稿自查

開發(fā)者在完成自己負(fù)責(zé)的模塊界面時，可自己對齊設(shè)計稿自查一遍，參考【3.1驗收標(biāo)準(zhǔn)】的表格，可幫助判斷問題，在此階段也可發(fā)給設(shè)計者確認(rèn)效果。

三、驗收階段

3.1、測試同學(xué)確保交互和視覺還原度至少在70%左右

這里可以提前在項目排期階段，設(shè)計師將所需的驗收工時同步給技術(shù)和測試，將驗收時間考慮進去

為什么要求測試同學(xué)保證還原度至少在70%呢？

因為如果不要求測試走查還原度，設(shè)計驗收的時候就會有大量的問題，最后變成設(shè)計在測試界面而不是驗收。設(shè)計師不像測試對整個流程的測試配置那么熟悉方便，反復(fù)驗收需要測試和設(shè)計不斷配合，雙方的工作量都會加大。

理想的狀態(tài)應(yīng)該是測試整個流程走通，視覺和交互還原問題也要著重測試，設(shè)計和產(chǎn)品在測試沒什么大問題后再進行驗收。

參考【驗收標(biāo)準(zhǔn)】的表格，可幫助判斷還原問題

3.2、明確知道模塊的開發(fā)者

最好是提前知道模塊的開發(fā)者，這樣驗收的時候一對一進行模塊的打版驗收效率更高

3.3、設(shè)計走查問題標(biāo)注優(yōu)先級

技術(shù)對功能上的BUG，可以自己很好的判斷哪些是嚴(yán)重的緊急的，但對于視覺和交互層面的感知就比較低。在提問題單的時候，我們可以幫他標(biāo)注出優(yōu)先級，告知開發(fā)哪些是比較嚴(yán)重的需要優(yōu)先修改的，不然 開發(fā)自己很難判斷，可能就會挑一些比較好改的先改了，重要的問題反而被擱置了。尤其在項目時間比較緊張的時候，有優(yōu)先級標(biāo)注 開發(fā)能夠看出哪些是可以為項目進度做出妥協(xié)的，哪些是必須要修改的。

3.4、BUG單

設(shè)計提BUG單的不能簡單的說這里出錯了，請參考設(shè)計標(biāo)注重新調(diào)整。要直接給出正確的尺寸、增多少、減多少、這樣可幫助技術(shù)提高更高效率，也能避免開發(fā)自己去看又出現(xiàn)誤差、又要返工修改。

3.5、遺留問題有記錄

四、結(jié)語

設(shè)計師在驗收過程中容易遇到的一個比較頭疼的問題就是，技術(shù)和產(chǎn)品小伙伴可能因為項目上線時間緊，覺得視覺還原和頁面交互體驗上的問題不重要不給予修改，優(yōu)先保障功能上線。

除了這些原因，設(shè)計側(cè)也在檢討總結(jié)，自己有哪些做的不足的地方，所以 以上文檔也是對接下來工作的優(yōu)化方案。設(shè)計還原度也是日?？己酥?，需要大家重視，好的產(chǎn)品要嚴(yán)格把控精心打磨，希望這次的總結(jié)、相關(guān)流程和經(jīng)驗，在接下來工作中能夠提升設(shè)計驗收效率和還原度。

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

文章來源：站酷   作者：飛行的考拉

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

免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1.JSON是什么?

1. JSON的全稱為JavaScript Object Notation ，也就是JavaScript對象標(biāo)記法。
2. JSON是一種輕量級的數(shù)據(jù)交換格式，用于兩個程序之間的數(shù)據(jù)交換，類似于XML文檔。

2.JSON對象格式

使用JSON表示一個對象的格式：

{
    "屬性名1":"屬性值1",
    "屬性名2":"屬性值2",
    ......
    "屬性名":"屬性值n"
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

注意事項

• 一個對象整體由一個大括號表示
• 對象的屬性，是由一個個鍵值對組成
• 鍵值對的鍵與值之間應(yīng)該使用冒號隔開，而不同鍵值對之間需要使用逗號隔開
• 鍵與值最好都使用雙引號，值可以是JavaScript中的任何一種數(shù)據(jù)類型

示例

{
    "name":"金蘋果",
    "info":"講述了種植蘋果的辛酸歷程"
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

3.JSON數(shù)組表示

JSON中的數(shù)組使用 [ ] 表示，并且數(shù)組可以跟對象互相嵌套

格式：

[元素1，元素2...]  


    

        1
    

示例：

數(shù)組包含對象

 ["張三","李四",{
        "name":"王五",
        "info":"一個在技術(shù)上使勁鉆研的人"
    }]  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

對象包含數(shù)組：

{
    "name":"李小超",
    "friend":["張三","李四",
              {
                "name":"王五",
                "info":"一個在技術(shù)上使勁鉆研的人"
            }
             ]
    "info":"一個非常帥氣的人"
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

對象與對象的嵌套：

{
    "name":"李小超",
    "project":{
        "school":"HPU",
        "name":"computer"
    }
}  


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

4.JSON的解析

1. 使用Gson解析JSON文件

1. 將Java對象轉(zhuǎn)換為JSON字符串

   String json = new Gson().toJSON(要轉(zhuǎn)換的對象);  
           
   
   
               
   
                   1
               
   
           
   

   代碼示例：

   Book b = new Book("金蘋果","講述了種植蘋果的辛酸路程"); String str = new Gson().toJson(b);  
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
           
   

2. 將JSON字符串轉(zhuǎn)換為Java對象

   對象 = new Gson().fromJson(JSON字符串,對象類型.class);  
           
   
   
               
   
                   1
               
   
           
   

   代碼示例：

   1. 將JSON字符串轉(zhuǎn)換為Java對象

    Book b2 = new Gson().fromJson(str, Book.class); System.out.println(b2.getName());  
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
           
   

   2. 將JSON字符串轉(zhuǎn)換為Java集合

   String js = "{\"name\":\"金蘋果\",\"info\":\"講述了種植蘋果的辛酸歷程\",\"page\":[\"鋤禾日當(dāng)午\",\"汗滴禾下土\"]}"; HashMap data = new Gson().fromJson(js,HashMap.class); System.out.println(data.get("page").getClass()); /*
       輸出結(jié)果：class java.util.ArrayList
   */  
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
               
   
                   3
               
   
               
   
                   4
               
   
               
   
                   5
               
   
               
   
                   6
               
   
               
   
                   7
               
   
           
   

   我們在寫JSON字符串的時候，需要注意使用轉(zhuǎn)義字符轉(zhuǎn)換雙引號，另外，如果鍵值對的值是JSON數(shù)組，那么對應(yīng)數(shù)組在轉(zhuǎn)換之后的類型是ArrayList

2. 使用fastJson解析JSON文件

使用fastJSON解析與Gson十分相似，不過前者使用的是靜態(tài)方法。

1. Java對象轉(zhuǎn)換為JSON字符串

   String json=JSON.toJSONString(要轉(zhuǎn)換的對象);  
           
   
   
               
   
                   1
               
   
           
   

2. JSON字符串轉(zhuǎn)換為Java對象

   類型 對象名=JSON.parseObject(JSON字符串, 類型.class);
   或者
   List<類型> list=JSON.parseArray(JSON字符串,類型.class);  
           
   
   
               
   
                   1
               
   
               
   
                   2
               
   
               
   
                   3
               
   
           
   

   示例：
   轉(zhuǎn)換為Java對象

    Book b2 = JSON.parseObject(json1,Book.class);  
           
   
   
               
   
                   1
               
   
           
   

   轉(zhuǎn)換為List集合

   List list = JSON.parseArray(json1,String.class);  
           
   
   
               
   
                   1
               
   
           
   

   在這里進行說明一下，我們觀察JSON.parseArray()的源碼可以看到，這個方法的返回值就是一個List類型的數(shù)據(jù)，我們向方法中傳遞的第二個參數(shù)是List元素所屬的類型。
   、
   

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

   文章來源：csdn

   分享此文一切功德，皆悉回向給文章原作者及眾讀者.
   免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

   
   

   
   

JavaScript|異步編程

1.異步的概念

**異步（Asynchronous, async）是與同步（Synchronous, sync）**相對的概念。在我們學(xué)習(xí)的傳統(tǒng)單線程編程中，程序的運行是同步的（步驟在一個控制流序列中按順序執(zhí)行）。而異步的概念則是不保證同步的概念，也就是說，一個異步過程的執(zhí)行將不再與原有的序列有順序關(guān)系。簡單來理解就是：同步按你的代碼順序執(zhí)行，異步不按照代碼順序執(zhí)行，異步的執(zhí)行效率更高。異步就是從主線程發(fā)射一個子線程來完成任務(wù)。

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

回調(diào)函數(shù)就是一個函數(shù)，它是在我們啟動一個異步任務(wù)的時候就告訴它：等你完成了這個任務(wù)之后要干什么。這樣一來主線程幾乎不用關(guān)心異步任務(wù)的狀態(tài)了。

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>異步編程</title> </head> <body> <p>等待4秒過后執(zhí)行</p> <p id="p2">太陽</p> <p id="p3">月亮</p> <script> // 回調(diào)函數(shù) function sayHello(){ document.getElementById("p2").innerHTML = "Hello!Sun"; } // 使用setTimeout()可以設(shè)置sayHello為一個4秒的過程，第一個參數(shù)是回調(diào)函數(shù)，第二個參數(shù)是毫秒數(shù) setTimeout(sayHello,4000); </script> </body> </html> 


    

        1
    

    

        2
    

    

        3
    

    

        4
    

    

        5
    

    

        6
    

    

        7
    

    

        8
    

    

        9
    

    

        10
    

    

        11
    

    

        12
    

    

        13
    

    

        14
    

    

        15
    

    

        16
    

    

        17
    

    

        18
    

    

        19
    

    

        20
    

    

        21
    

    

        22
    

等待四秒過后：

主線程并未停止，body中的內(nèi)容正常運行，而當(dāng)4秒回調(diào)過后，子函數(shù)運行結(jié)果就改變了h2的值。

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

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

編輯導(dǎo)讀：隨著產(chǎn)品的迭代升級，增加越多功能，設(shè)計相對地也會越復(fù)雜，用戶需要花費更多的精力來理解產(chǎn)品邏輯和使用具體功能。因此對產(chǎn)品進行簡約有效設(shè)計是十分有必要的。本文作者對此進行了分析，與你分享。

一、簡約有效的含義

產(chǎn)品是一個功能集合體，隨著迭代優(yōu)化，會變得越來越復(fù)雜，這也意味著用戶需要花費更多的精力來理解產(chǎn)品邏輯和使用具體功能。因此對產(chǎn)品進行簡約有效設(shè)計是十分有必要的。簡約有效原則跟一致性原則比較類似，本身的含義比較廣泛，此文中，對簡約有效的原則作如下約定：

“簡約有效設(shè)計指的是設(shè)計方案在滿足用戶和產(chǎn)品需求的前提下，應(yīng)該最大程度的降低產(chǎn)品復(fù)雜度和用戶使用成本，以保證用戶使用產(chǎn)品的體驗和效率，最終達到為用戶和產(chǎn)品提供更多價值的目的?！?

簡約有效的設(shè)計最大特點是“簡約”和“有效”。

簡約——能降低產(chǎn)品的復(fù)雜度

“簡約”指的是在滿足需求的前提下最大程度的降低產(chǎn)品復(fù)雜度。從普遍的角度來講，一個簡約的設(shè)計一定能夠極大的提升用戶的使用體驗和產(chǎn)品的使用效率。

有效——能滿足用戶和產(chǎn)品的需求

“有效”指的是設(shè)計方案必須能夠滿足用戶和產(chǎn)品的需求，這是設(shè)計最為基礎(chǔ)的要求，如果設(shè)計方案不能滿足用戶或產(chǎn)品的需求，那什么樣的設(shè)計都是沒有意義和價值的。

二、簡約有效設(shè)計的價值

在設(shè)計中，遵循簡約有效原則不僅可以保證設(shè)計方案的合理性，還可以為用戶和產(chǎn)品提供更多的價值和服務(wù)。

1. 提升產(chǎn)品的用戶體驗

簡約有效設(shè)計對用戶的價值主要體現(xiàn)在提升用戶體驗方面。

1）降低用戶使用的成本，提升產(chǎn)品使用效率

簡約有效的設(shè)計可以降低產(chǎn)品邏輯結(jié)構(gòu) 、頁面布局、交互操作等的復(fù)雜度，從而減少用戶的認(rèn)知和使用成本以及提升產(chǎn)品的使用效率。

2）更好的情感設(shè)計化

從心理學(xué)角度來講，越簡單的東西會越符合用戶預(yù)期，也越容易獲得用戶的信賴和好感，而簡約有效的設(shè)計可以降低產(chǎn)品的復(fù)雜度，降低用戶的而使用和認(rèn)知成本，因此簡約有效的設(shè)計可以有效地提升產(chǎn)品的情感化設(shè)計，為用戶提供更好的使用體驗。

2. 保證產(chǎn)品的健壯性和可發(fā)展性

簡約有效的設(shè)計對產(chǎn)品的價值主要體現(xiàn)在保證產(chǎn)品的健壯性和可發(fā)展性。

1）減少產(chǎn)品邏輯的復(fù)雜度和耦合度，保證產(chǎn)品的健壯性

產(chǎn)品功能的復(fù)雜和邏輯耦合是一個無法避免的問題，越是復(fù)雜的邏輯其犯錯的可能性越大，其普適性也越差，但利用簡約有效的設(shè)計可以降低產(chǎn)品功的復(fù)雜度，去除不合理的設(shè)計，減少各個功能模塊之間的耦合度，從而保證保證產(chǎn)品結(jié)構(gòu)的的合理性和健壯性。

2）為產(chǎn)品預(yù)留更多的拓展空間，保證產(chǎn)品的可發(fā)展性

從設(shè)計經(jīng)驗上來講，產(chǎn)品做減法的成本遠(yuǎn)遠(yuǎn)大于做加法。利用簡約有效的設(shè)計在一定程度上是可以避免產(chǎn)品“過度”發(fā)展的問題，因為其目的就是降低產(chǎn)品的復(fù)雜度，這也意味著為產(chǎn)品預(yù)留更多的拓展空間，保證了產(chǎn)品的可發(fā)展性。

三、如何做到簡約有效設(shè)計

簡約有效設(shè)計的內(nèi)涵是非常廣的，不是簡單的刪減功能或者減少頁面的中元素就是簡約有效的設(shè)計，其最基本的原則是“先有效，再簡約”，即在保證設(shè)計“有效性”的基礎(chǔ)上，再進行“簡約性”設(shè)計，“有效”比“簡約”的優(yōu)先級高且重要。設(shè)計中，可以從以下幾個方面和角度進行簡約有效的思考和設(shè)計。

1. 保證設(shè)計的目的性和價值性

設(shè)計中的任何邏輯或元素都必須要有明確的目的和價值，如果設(shè)計的目的性和價值性不明確或者達不到預(yù)期，那么這樣的設(shè)計是不合格的。設(shè)計的目的性和價值性可以說是所有設(shè)計的基本原則和要求，同樣也是是簡約有效設(shè)計的重要評估標(biāo)準(zhǔn)和指導(dǎo)原則之一。

2. 保留設(shè)計的特征性

簡約有效原則本質(zhì)上就是對設(shè)計進行“簡化”設(shè)計，但不能為了單純的簡化而無限制的“刪減”設(shè)計，其中重要的一點就是需要保證設(shè)計的特征性。設(shè)計的特征性能夠表明設(shè)計的特點，用戶通過這些特點性，以快速的辨別，理解和使用產(chǎn)品。例如在剪切板圖標(biāo)中，其剪切的含義就是其非常重要的特征，一般來說就是剪刀元素，而這個設(shè)計特征是不能被刪除簡化的，需要在設(shè)計中進行有效地表達。

3. 合理規(guī)劃產(chǎn)品功能結(jié)構(gòu)層次

產(chǎn)品功能結(jié)構(gòu)層次是產(chǎn)品的主要框架，決定了用戶的主要體驗路徑，其設(shè)計的好快直接影響了用戶體驗的好壞。利用簡約有效原則不僅可以合理規(guī)劃產(chǎn)品功能結(jié)構(gòu)層次，還可以降低產(chǎn)品結(jié)構(gòu)層次的“復(fù)雜度”，提升用戶的使用體驗。設(shè)計中，可以從以下幾個方面考慮產(chǎn)品結(jié)構(gòu)層次的“簡約有效”設(shè)計。

1）合理的橫向和縱向結(jié)構(gòu)層級數(shù)

產(chǎn)品結(jié)構(gòu)層級設(shè)計中既不能讓橫向結(jié)構(gòu)層次過于扁平，也不能讓豎向結(jié)構(gòu)層次過于縱深，前者容易導(dǎo)致產(chǎn)品功能結(jié)構(gòu)分散和用戶認(rèn)知混亂，后者容易導(dǎo)致用戶操作路徑過長，操作成本過高。

2）同級結(jié)構(gòu)層次之間的獨立性

簡約有效的設(shè)計可以讓產(chǎn)品同級結(jié)構(gòu)層次之間保持相對獨立，這樣不僅可以減少結(jié)構(gòu)層次之間的交叉和耦合，減少后續(xù)產(chǎn)品迭代優(yōu)化時的“耦合障礙”，還可以保證層級結(jié)構(gòu)本身邏輯的“簡約性”。

3）父子結(jié)構(gòu)層級之間的關(guān)聯(lián)性和邏輯性

簡約有效的設(shè)計可以讓產(chǎn)品父子層級之間有含義明確的邏輯性和關(guān)聯(lián)性，從而減少用戶的理解認(rèn)知和操作使用成本。一般來說，父級層次結(jié)構(gòu)趨向于展示概括信息和重點信息，子級層級結(jié)構(gòu)展示詳細(xì)信息和次要信息，從而使產(chǎn)品結(jié)構(gòu)層級更加符合用戶的認(rèn)知和習(xí)慣，提升產(chǎn)品的使用效率和使用體驗。

4. 簡單有效的任務(wù)操作路徑

產(chǎn)品中用戶的操作任務(wù)是相對是確定的，但同一個任務(wù)，可以通過不同的方式和路徑來完成，其成本和體驗也是不同的。利用簡約有效的設(shè)計原則可以讓產(chǎn)品的操作路徑更加合理有效，降低不必要的操作和路徑，提升用戶的操作效率和使用體驗。

1）用戶路徑長度的合理性和邏輯性

用戶的操作路徑的總長度應(yīng)該相對較短且合理，一般來說不建議超過5個環(huán)節(jié)，否則用戶任務(wù)完成率和體驗會有斷崖式的下降。此外，用戶的操作路徑中上下文前后操作節(jié)點應(yīng)該有著合理的邏輯性和關(guān)聯(lián)性，以便保證用戶對整個操作路徑的理解。

2）單個操作環(huán)節(jié)的目的性

每一個操作環(huán)節(jié)應(yīng)該有著明確的目的和主題，即操作環(huán)節(jié)需要讓用戶集中精力處理一個重要的操作任務(wù)，不能讓沒有意義的任務(wù)和信息分散用戶注意力。

3）單個操作環(huán)節(jié)內(nèi)容的有限性

每一個操作環(huán)節(jié)中，用戶需要處理的任務(wù)以及信息應(yīng)該是有限的，不能讓用戶同時處理過多的信息或者過于復(fù)雜的任務(wù)，否則會極大地增加用戶的負(fù)面體驗。如果單個任務(wù)環(huán)節(jié)中包含的信息較多或操作任務(wù)較為復(fù)雜，可以考慮拆分任務(wù)和適當(dāng)?shù)脑黾佑脩舨僮髀窂降拈L度。

4）線性的操作路徑

不要為用戶操作路徑設(shè)置過多的分支路徑或選擇，而是應(yīng)該讓用戶操作路徑趨向于串聯(lián)且線性的，這樣不僅可以降低產(chǎn)品的復(fù)雜度，還可以可以降低用戶的理解和使用成本，從而提升用戶體驗和操作效率。

5. 簡單有效的頁面布局

簡單有效的頁面布局不僅可以更好的幫助產(chǎn)品達到預(yù)期目標(biāo)，還可以極大的提升用戶體驗。設(shè)計中，可以從以下幾個方面考慮頁面布局的“簡約有效”設(shè)計。

1）頁面布局符合用戶認(rèn)知和習(xí)慣

頁面的布局一定要符合用戶的認(rèn)知和習(xí)慣，否則再怎么“簡單”的頁面，用戶理解起來也會費勁或者產(chǎn)生理解歧義。例如中文用戶的閱讀習(xí)慣都是從左到右和從上到下，用戶的操作習(xí)慣大多是先閱讀信息再進行操作，因此常見的布局都是將操作按鈕布局在頁面右側(cè)或者底部。

2）頁面布局的信息是有價值且有效的

頁面中布局展示的信息一定要對用戶或產(chǎn)品有價值，如果對用戶和產(chǎn)品都沒有價值的信息，那頁面中就不需要這個信息，這是簡約有效設(shè)計的基本準(zhǔn)則之一。此外頁面布局中的信息一定要是有效的，不能讓用戶產(chǎn)生歧義，從而達到降低用戶使用成本和提升使用體驗的目的。

3）頁面信息布局的規(guī)律有序

頁面中布局的信息一定要規(guī)律有序，其主要目的是方便用戶閱讀以及理解，從而提升用戶的使用效率和體驗。讓頁面中的信息規(guī)律有序，最常見最簡單的方法就是將信息分類成組后再在頁面中展示。

4）避免頁面信息過載

頁面中的信息密度必須適中，不能信息過載，否則就會導(dǎo)致用戶瀏覽效率低，理解成本高以及操體驗差的后果。簡約有效原則是避免頁面信息過載的基本方法之一，其原則就是重點信息優(yōu)先展示，刪除不必要信息或者隱藏次要的信息，利用不同的頁面和層級結(jié)構(gòu)將信息的“復(fù)雜度”轉(zhuǎn)移分?jǐn)偝鋈?，從而保證用戶當(dāng)前操作頁面信息密度的合適。

5）頁面應(yīng)該聚焦用戶當(dāng)前任務(wù)

頁面布局的信息應(yīng)該與用戶當(dāng)前正在處理的任務(wù)緊密關(guān)聯(lián)，不讓無關(guān)的信息分散用戶注意力以及干擾用戶當(dāng)前的任務(wù)流程。如在自有賬號登錄頁面中，忘記密碼，注冊以及第三方登錄等次要信息的布局和樣式就不能過分顯眼，否則就會影響登錄頁面主要任務(wù)的完成——輸入賬號和密碼。

6. 簡約有效的UI設(shè)計

UI設(shè)計是產(chǎn)品功能邏輯的視覺化表現(xiàn)，其直接影響了產(chǎn)品的使用體驗。與其他設(shè)計原則一樣，簡約有效原則也是UI設(shè)計的重要的標(biāo)準(zhǔn)之一，設(shè)計中，可以從以下幾個方面思考和衡量簡約有效的UI設(shè)計。

1）一致的設(shè)計語言和風(fēng)格

一致的設(shè)計語言和風(fēng)格可以確保產(chǎn)品在視覺上的統(tǒng)一性和規(guī)范性，進而降低用戶認(rèn)知和使用成本，即從視覺形式上和用戶認(rèn)知層面，降低了產(chǎn)品的復(fù)雜度，提升了用戶信息瀏覽、理解以及操作的效率和體驗。

2）正確無誤的信息傳遞和表達

UI是各種產(chǎn)品信息的視覺載體，因此其一定要能夠準(zhǔn)確無誤的傳遞和表達出信息的真實含義，不能因為UI設(shè)計而導(dǎo)致用戶對信息產(chǎn)生誤解或者歧義，這也是“簡約有效”的UI設(shè)計中“有效性”的重要組成部分之一。

3）重要信息重點表達

UI設(shè)計需要做到信息表達準(zhǔn)確且層次分明，即重要信息重點表達，次要信息次級表達。這樣設(shè)計的目的就是利用UI設(shè)計增強重要信息表達和傳遞的“簡約性”和“有效性”，即從信息層面上降低了頁面的復(fù)雜度。重點信息重點表達的最基本的方法就是在視覺上讓重要信息和次要信息形成較為明顯的對比，如常見的文本加粗，使用高亮顏色（彩色）等。

4）清晰正確的邏輯表達

UI也是功能邏輯的可視化載體，因此UI設(shè)計一定要保證產(chǎn)品功能邏輯表達的清晰和準(zhǔn)確，不能因為UI設(shè)計而導(dǎo)致用戶對功能邏輯的錯誤理解。如賬戶模塊中，賬號密碼的校驗過程 和出錯提示等邏輯必須能夠通過UI清晰正確的表達出來，保證用戶在登錄過程中，能夠通過UI理解這些邏輯，且不會產(chǎn)生任何歧義。

7. 簡單有效的邏輯設(shè)計

產(chǎn)品功能邏輯設(shè)計是產(chǎn)品和用戶交互的直接決定因素，可以說，功能邏輯設(shè)計的好壞直接決定了產(chǎn)品體驗的好壞。簡單有效的邏輯設(shè)計不僅可以降低功能邏輯的復(fù)雜度，還可降低產(chǎn)品的迭代開發(fā)的成本和用戶使用成本。設(shè)計中，可以從以下幾個方面考慮“簡單有效”的邏輯設(shè)計。

1）在保證邏輯完整性的基礎(chǔ)上，盡量降低功能邏輯的復(fù)雜度

在設(shè)計中，保證產(chǎn)品功能邏輯的完整性是基礎(chǔ)的且必要的條件，在此基礎(chǔ)上，再考慮降低功能邏輯的復(fù)雜度，不能為了簡約而簡約。

2）功能邏輯的獨立性

在功能邏輯設(shè)計中，應(yīng)該盡量保證功能邏輯的獨立性，減少功能邏輯之間的耦合性和依賴性。因為功能邏輯的耦合性和依賴性必然會導(dǎo)致對邏輯本身和用戶產(chǎn)生更多的限制性和要求。此外，功能邏輯之間的耦合性和依賴性不僅會提升產(chǎn)品的復(fù)雜度，還會影響產(chǎn)品的健壯性、后續(xù)的拓展性以及造成迭代成本的提升。

3）為用戶設(shè)計，轉(zhuǎn)移邏輯設(shè)計的復(fù)雜度

產(chǎn)品功能邏輯的復(fù)雜度是可以降低的，但是不可能無限制的降低。當(dāng)無法降低功能邏輯的復(fù)雜度時，可以使用其他方法來降低功能邏輯的“復(fù)雜度”，最常見的就是“轉(zhuǎn)移復(fù)雜”，即不改變邏輯的設(shè)計，而是改變這些邏輯的表現(xiàn)形式和方式，將邏輯的“復(fù)雜度”轉(zhuǎn)移到不同的功能模塊中或者不同的形式上。例如在線請求數(shù)據(jù)的異常邏輯有很多種，這些異常對于邏輯設(shè)計和產(chǎn)品優(yōu)化是有很大價值的，但對用戶來說這些異常可能是難以理解或者是沒有價值的，可以將這些異常邏輯進行歸類分組，同一組的異常使用相同的提示設(shè)計，如網(wǎng)絡(luò)故障相關(guān)的異常，都可以提示用戶去檢查手機中的網(wǎng)絡(luò)設(shè)置，而不用每一中網(wǎng)絡(luò)故障的異常都單獨設(shè)計一個異常提示。

4）提供合理的參數(shù)值和默認(rèn)項

功能邏輯設(shè)計中涉及到大量的設(shè)置項和參數(shù)，為這些設(shè)置項和參數(shù)提供合理的數(shù)值和默認(rèn)項，可以極大降低的用戶的理解和使用成本。例如在地圖導(dǎo)航軟件中，用戶選擇導(dǎo)航線路時，需要確定起點位置和終點位置，常見的起點位置默認(rèn)參數(shù)就是當(dāng)前用戶的位置，這種設(shè)計邏輯可以滿足絕大部分用戶在絕大部分場景下的導(dǎo)航需求，減少用戶起點位置的輸入。

5）更少的操作和選擇

在設(shè)計中，任何的操作和選擇對用戶來說都是一種負(fù)擔(dān)，所以應(yīng)該避免為用戶設(shè)計過多的操作和選擇，較少的操作和選擇就是降低產(chǎn)品功能邏輯的復(fù)雜度。如果無法減少功能的操作和選擇，那么應(yīng)該優(yōu)化頁面信息層次、操作路徑和具體的頁面布局來使邏輯操作和選擇更加合理，使用成本更低，使用體驗更好。

6）為絕大部分場景和用戶設(shè)計

邏輯完整性是設(shè)計的基本要求，但在實際中經(jīng)常會碰到低頻場景、小部分用戶群體需求或者大部分用戶群體的低頻需求等“異常條件”，這些都可能對產(chǎn)品的功能邏輯設(shè)計帶來影響，但是絕對不能因為這些“異常條件”去更改主體設(shè)計方案，即在任何時候，都應(yīng)該為絕大部分場景和絕大數(shù)用戶設(shè)計，按照經(jīng)驗來講，是不可能有滿足100%需求的設(shè)計方案。類似的，我們應(yīng)該更多的考慮產(chǎn)品的正向使用場景，不要讓負(fù)向場景過多的影響功能邏輯的設(shè)計方案，即這些非正向場景可以為設(shè)計提供參考，但不能決定設(shè)計方案。

簡約有效是一個非常普適性的設(shè)計原則，其可以為產(chǎn)品和用戶帶來非常多的好處，其具體內(nèi)涵是非常廣泛的，其中有些內(nèi)容不僅僅是簡約有效原則獨有的，可能與其他設(shè)計原則有著較強的關(guān)聯(lián)性和交叉性，如“一致的設(shè)計語言和風(fēng)格”，雖然是一致性設(shè)計原則的內(nèi)容，但卻可以讓設(shè)計很好的表達出“簡約有效”。

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

文章來源：人人都是產(chǎn)品經(jīng)理   作者：小乞丐

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

免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

1. 淘寶為什么不淘了

1.1  “淘” 歷史

淘寶成立于2003年5月，當(dāng)時最早的slogan是：“淘你喜歡”，這句話的主體是以平臺角度出發(fā)，對用戶說的，意思是讓用戶來平臺選購商品。

隨后2005年，slogan變成了“淘我喜歡”，主體從平臺轉(zhuǎn)變成了用戶，意思是讓用戶自主選擇來平臺購物。

在最近的2021年，淘寶的slogan變?yōu)榱恕疤霉淞税伞?。代表性的是淘寶app打開的啟動圖從玲瑯滿目的商品圖，換成了新的slogan：

圖：淘寶啟動頁變化

圖：淘寶的slogan變化

1.2 需求的類型

淘，又有“篩選”的意思，而篩選行為是要對某具體目標(biāo)進行的，不可能憑空篩選，這個目標(biāo)產(chǎn)生的過程，就是我們常說的“用戶需求”。

“用戶需求”的產(chǎn)生一般分為兩種：有目的的需求和無目的的需求。

有目的的需求：需求產(chǎn)生的過程有戶外廣告、朋友推薦等。以這種方式產(chǎn)生的需求，用戶會帶著明確目標(biāo)，這時用戶直接打開軟件，通過搜索，直接縮小商品范圍，更快觸達目標(biāo)商品，在這種場景下，用戶明顯沒有“逛”的心情。

無目的的需求：當(dāng)用戶在沒有明確目標(biāo)的情況下打開軟件時，用戶購物意向都是比較模糊的，沒有明確選擇區(qū)間。此時，如何讓用戶產(chǎn)生購買欲望，是產(chǎn)品設(shè)計時必須要重點思考的。

圖：需求產(chǎn)生的類型

我們都知道，淘寶最開始的定位是“淘”，主打的是以導(dǎo)購型社區(qū)為目標(biāo)，主要解決“用戶來平臺需要買什么”的問題，也就是有目的的消費需求。

針對這類用戶，最簡單的思路就是“讓用戶買到想要的東西”，基于這一思路，淘寶推出了“千人千面”的算法機制。

隨著淘寶算法越來越精準(zhǔn)，用戶購買越來越效率，導(dǎo)致很多用戶對于淘寶的使用心智固定在了購物平臺，而不是內(nèi)容消費平臺。

但是算法是有一定的滯后性的，只有在用戶產(chǎn)生數(shù)據(jù)后才能夠進行精準(zhǔn)推薦。（這個數(shù)據(jù)可以是在淘寶平臺產(chǎn)生的，也可以是在其他平臺產(chǎn)生的，比如說通過搜狗輸入法輸入了某個商品名）

所以單純的靠精準(zhǔn)的算法推薦，并不能解決用戶的潛在需求。

圖：不同需求類型的解決方案

1.3  商家的流量成本

在淘寶店鋪的運營中，有一項重要的指標(biāo)叫UV價值，指的是平均每個客戶在店鋪的銷售額，數(shù)字越高說明訪客的轉(zhuǎn)化率越高，轉(zhuǎn)化高就代表最終的GMV會高。

而根據(jù)淘寶的數(shù)據(jù)統(tǒng)計，店鋪粉絲級別越高，對店鋪的粘性越強，UV價值也就越高。最終反映在淘寶數(shù)據(jù)上就是GMV高，既利于平臺，也利于商家。

粉絲的積累需要流量，而淘寶店鋪的流量來源一般分為：淘寶站內(nèi)、淘寶站外，其中有包括淘寶推廣、搜索競價、淘寶客、直通車等方式，但這些流量通常是不穩(wěn)定的，免費流量自不用說，付費流量的投入成本也對店鋪的資金有一定要求。

所以店鋪需要把這些吸引的流量，轉(zhuǎn)化成店鋪的粉絲。

舉個例子，在很多電商平臺上，店鋪會有自己的引流款，這些商品不是為了毛利。只是起到為店鋪引流的作用。

因為對于平臺的店鋪來說，持續(xù)不斷且穩(wěn)定的流量增長，不僅可以推動銷售的穩(wěn)定增長，也利于長期的發(fā)展方向。

圖：淘寶流量來源

2. 淘寶的基礎(chǔ)內(nèi)容建設(shè)

2.1  內(nèi)容整合成社區(qū)和去中心化

早在2015年，當(dāng)時淘寶內(nèi)部孵化淘寶頭條，分享優(yōu)質(zhì)的消費類資訊內(nèi)容，當(dāng)時淘頭條的MAU（月活躍用戶）過億。但隨著視頻內(nèi)容的崛起，圖文形式逐漸走下坡路，淘寶看準(zhǔn)了直播帶貨的賽道，開始逐漸布局淘寶直播的內(nèi)容形式。期間也相繼加入了微淘、有好貨、買家秀、好物點評團等內(nèi)容形式。

但是這些內(nèi)容一直分散在淘寶各個功能模塊中，沒有形成一個整體的社區(qū)化。

圖：淘寶的內(nèi)容矩陣

其中最成功的應(yīng)該就屬淘寶直播了，根據(jù)淘寶直播2021年度報告：2020年淘寶直播帶來的GMV超過人民幣4000億元。

但是，直播的內(nèi)容形式注定是以主播自上而下中心化的，用戶是跟著主播走的，一旦主播下播以后，這些觀眾也會失去購買目標(biāo)。

并且由于直播屬于一對多的形式，越大的主播，觀眾越多，這時候主播和觀眾的互動率是很低的，久而久之，用戶的互動積極性也會受打壓。

圖：以主播為中心化的淘寶直播

除了淘寶直播，近年來另一個改動比較大的應(yīng)該就是微淘的出現(xiàn)了，在逛逛出現(xiàn)之前，一直占據(jù)底部欄的二號位，它的內(nèi)容形式主要以店鋪上新、直播、福利為主。

這也是淘寶在店鋪私域流量運營上做的一次嘗試，目的是為了讓用戶更容易和店鋪產(chǎn)生連接。但是實際上，由于微淘的內(nèi)容形式之間關(guān)聯(lián)性不大，業(yè)務(wù)場景混亂，一些剛起步的商家也沒有資源拓展多業(yè)務(wù)場景，導(dǎo)致內(nèi)容質(zhì)量參差不齊，影響轉(zhuǎn)化。

淘寶做微淘中做內(nèi)容的目的是為了讓用戶有東西可以逛，但是逛內(nèi)容就代表著用戶購買需求不明確，這又與營銷場景相沖突（營銷場景是為了讓用戶快速下單完成購買），所以微淘也一直被詬病轉(zhuǎn)化率低。

圖：微淘主要的三個問題

2.2  信息流時代

后來在2020年年底的時候，淘寶迎來了另一個比較大的改版，猜你喜歡變成了縱向的信息流，點擊猜你喜歡進入的是一個流量的中轉(zhuǎn)站。比如說點擊一件衣服，下面全是衣服的推薦。

新版猜你喜歡的特點很明顯，犧牲轉(zhuǎn)化率，增加用戶使用時長。在實際點擊進入信息流中，用戶總感覺下面有新的內(nèi)容，這時候用戶的心態(tài)普遍是浮躁的，會使用很短，甚至一兩秒的時間決定是否深入了解產(chǎn)品。如果不喜歡，就會滑到下一個產(chǎn)品，無形中增加了用戶在平臺的停留時長。

據(jù)淘寶官方數(shù)據(jù)表示，此次猜你喜歡的大改版，淘寶用戶的點擊率和用戶時長都提升了20%。

圖：猜你喜歡改版，通過犧牲轉(zhuǎn)化來提高使用時長

2.3  “逛逛”來了

逛逛是以UGC內(nèi)容形式為主的種草平臺，顧名思義，就是消費者在無聊的時候，可以到處逛逛。

如果說信息流是縱向的內(nèi)容推薦，那么逛逛就是通過大數(shù)據(jù)，橫向的推薦內(nèi)容，最終向商品引流。豐富的內(nèi)容為其他消費者帶來沉浸式購物體驗，類比線下商圈，就是逛著逛著就把東西買了。

3. 淘寶沒有種草經(jīng)濟

3.1  從AISAS模式到SICAS模式

AISAS模型是一種用戶決策分析模型，由電通公司（日本第一大廣告公司）提出，是消費者行為學(xué)領(lǐng)域很成熟的理論模型之一。

AISAS模式將消費者從產(chǎn)生需求到最終完成購買的路徑分成了五個階段，既Attention（注意） - Interest（興趣） - Search（搜索） - Action（行動） - Share（分享）。其中消費者在注意商品并產(chǎn)生興趣之后的信息搜集（Search），以及產(chǎn)生購買行動之后的信息分享（Share），是當(dāng)下互聯(lián)網(wǎng)消費時代尤其重要的兩個階段。

搜索就是當(dāng)用戶對某商品產(chǎn)生興趣之后，消費者會通過線上或者線下渠道來收集相關(guān)產(chǎn)品的信息，比如說評價、打分等。分享是在購買路徑完成后，用戶自發(fā)向身邊人推薦商品的階段，也就是口碑裂變，當(dāng)然也有可能變成商品吐槽大會。

但是，在前文也提到了，搜索是在有明確對某個商品產(chǎn)生興趣之后才會產(chǎn)生的動作，整個消費路徑是單向進程的，缺少信息的互動與交換，用戶很難有效辨別信息真?zhèn)?，用戶與商家依然存在信任問題，最終的購買壁壘依然存在。

圖：AISAS消費模型的流程

隨后，DCCI（互聯(lián)網(wǎng)數(shù)據(jù)中心）在AISAS的基礎(chǔ)上，提出了新的SICAS行為消費模型：

既 Sense（品牌與用戶相互感知） - Interest&Interactive（產(chǎn)生興趣并形成互動） -  Connect&Communicate（建立聯(lián)系并交互溝通） -  Action（行動） - Share（分享）。

Sense，感知：品牌（商家） - 用戶相互感知，通過多觸點，在商家個用戶之間建立感知，對用戶來說，關(guān)注、分享、訂閱、推送等，都是有效的感知行為，而商家要做的，就是想辦法，通過什么樣的方式或內(nèi)容，讓用戶有效使用他們的感知行為（分享、點贊、訂閱等行為）。

Interest&Interactive，產(chǎn)生興趣和互動。在產(chǎn)生興趣上，隨著用戶對傳統(tǒng)的廣告曝光和廣告產(chǎn)生的印象的敏感度在降低，理解并響應(yīng)用戶的需求正在成為關(guān)鍵。站在用戶的角度，觀察用戶真正想要的內(nèi)容，衡量內(nèi)容的指標(biāo)不再是廣告的傳播率、曝光率，而是變成了點擊率、點贊數(shù)、好評度等。

Connect&Communication，建立連接和產(chǎn)生溝通。在用戶產(chǎn)生興趣之后，通過平臺提供的服務(wù)：客服，問大家，好評團等形式，完成用戶信任的積累，幫助用戶完成購買決策。

剩下的Action（購買行動）和Share（體驗分享）與AISAS模式一樣，就不展開說了。

圖：SICAS消費模型的流程，以及和AISAS消費模型的區(qū)別

綜上，SICAS模式前三點的核心觀點是建立聯(lián)系，也就是互動，這也與時下流行的種草經(jīng)濟不謀而合。

3.2  基于社交的種草經(jīng)濟

種草行為本質(zhì)上是人與人之間的一種互動關(guān)系，互動天然的容易產(chǎn)生強關(guān)系鏈，而強關(guān)系也意味著情感聯(lián)結(jié)和信任，最終會形成社群關(guān)系。隨著越來越多擁有相同消費偏好的用戶聚攏，用戶消費習(xí)慣逐漸圈層化，在各垂直的消費圈層中得到身份認(rèn)同感。

在這種社群氛圍的烘托下，用戶更容易表現(xiàn)出高表達欲和參與度，既用戶不僅是內(nèi)容的消費者，同時也會發(fā)展為內(nèi)容的生產(chǎn)者。

圖：逛逛想打造的種草生態(tài)

綜上結(jié)合淘寶的問題以及消費模式的轉(zhuǎn)變，我們可以得出淘寶近期瘋狂改版的思路：

圖：淘寶改版思路

4. 讓人逛下去的產(chǎn)品設(shè)計

在了解上述淘寶自身的問題和新消費類型帶來的沖擊后，可以總結(jié)淘寶最近經(jīng)常改版的戰(zhàn)略可以分為兩個方向：轉(zhuǎn)化的歸轉(zhuǎn)化，內(nèi)容的歸內(nèi)容。

4.1 微淘升級為訂閱

淘寶第一個改版是將原來的微淘升級為了訂閱，并且放在首頁上的tab，與推薦并列。此次改版，最大的改變就是拆分了店鋪運營的內(nèi)容，讓不擅長做內(nèi)容的商家可以專注自家的店鋪運營。

圖：首頁專注商品轉(zhuǎn)化，逛逛專注內(nèi)容消費

新版訂閱的精選一欄中：包括上新、買家、評測等，這些內(nèi)容一起構(gòu)成商家和粉絲的互動模式，吸引新客快速轉(zhuǎn)粉，同時也增加了老客戶的黏性。

在之前微淘的版本，用戶需要點擊微淘-點擊店鋪-點擊訂閱，升級后的訂閱路徑變成了左滑進入訂閱頁面-直接訂閱店鋪。點擊直播可以直接進入直播間

更短的觸達路徑加上私域流量的運營，優(yōu)化之前微淘轉(zhuǎn)化率低的問題。

圖：路徑圖，直接進入直播間，直接訂閱店鋪

圖：提高直播入口權(quán)重

4.2 “買家秀”社區(qū)升級成為“逛逛”

另一個重要改版是“買家秀”社區(qū)升級成為“逛逛”，為了弱化逛逛的購物屬性，強化社區(qū)氛圍，逛逛在產(chǎn)品的商業(yè)化設(shè)計上十分克制，主要圍繞引導(dǎo)用戶進行內(nèi)容消費和互動為目的進行設(shè)計。

在內(nèi)容分發(fā)形式上，分為了以平臺推薦為主的“發(fā)現(xiàn)流”和以社交關(guān)系鏈主導(dǎo)的“關(guān)注流”，更加注重內(nèi)容垂直和精細(xì)化。

圖：逛逛的內(nèi)容分類

逛逛的發(fā)現(xiàn)模塊與小紅書類似，都屬于種草型內(nèi)容社區(qū)。內(nèi)容主要以穿搭、彩妝等淘寶擅長的領(lǐng)域為主。

頁面的布局形式和首頁的商品流一樣，以雙列信息流呈現(xiàn)，和單列相比，一方面，給用戶提供多樣化的選擇，承載不同的內(nèi)容形式（短視頻、圖文），延長用戶在平臺的停留時長，同時也為其他內(nèi)容引流，模擬更真實的線下“逛街”體驗。

另一方面，和首頁注重轉(zhuǎn)化率的算法機制不同，影響發(fā)現(xiàn)流推薦算法的因素除了本身的內(nèi)容質(zhì)量，還會受到用戶瀏覽行為的影響，比如瀏覽內(nèi)容時產(chǎn)生的關(guān)注、收藏、點贊、評論等互動行為。

圖：表現(xiàn)內(nèi)容互動率的互動指標(biāo)

逛逛相比首頁推薦，去中心化的機制也更加明顯，舉例來說，小米官方店的號，粉絲量達到了千萬級，但是內(nèi)容的互動率很低，點贊評論甚至不超過個位數(shù)。

個人認(rèn)為是因為品牌天然的自帶營銷屬性，用戶在看到品牌賬號時，很容易形成品牌注冊賬號是為了賣產(chǎn)品給我的刻板印象。

這也反映了逛逛的流量重點落在消費者的內(nèi)容上，以消費者視角為突破口，擺脫和商品相關(guān)的品牌屬性，注重普通用戶對商品的真實評價，而不是圍繞IP賬號產(chǎn)生的內(nèi)容消費。

圖：小米賬號和個人賬號互動率對比

在用戶路徑的引導(dǎo)上，發(fā)現(xiàn)頁并不支持點擊頭像進入用戶主頁，只能先點擊進入內(nèi)容詳情頁然后才可以進行關(guān)注等操作，即先看內(nèi)容，再關(guān)注人。

圖：更關(guān)注內(nèi)容轉(zhuǎn)化率

另外一個人關(guān)注流的動態(tài)則加強調(diào)社交關(guān)系的轉(zhuǎn)化，因為是經(jīng)過用戶主動“關(guān)注”過后篩選出來的內(nèi)容，是內(nèi)容生產(chǎn)者和內(nèi)容消費者相互選擇的關(guān)系，所以在產(chǎn)品設(shè)計上以單列大圖為展現(xiàn)形式，幫助用戶消費內(nèi)容。為了防止讓用戶感受到廣告的營銷感，產(chǎn)品設(shè)計上特地強調(diào)了分享、點贊、收藏、評論等按鈕，弱化商品鏈接。

和其他的社區(qū)一樣，關(guān)注信息流中也會推薦一些“你可能感興趣的人”，但不同的是，用戶無法直接關(guān)注推薦的博主，需要先“查看TA”，進入博主的個人頁后才可以進行關(guān)注操作，這樣的目的主要是為了讓用戶了解達人的領(lǐng)域內(nèi)容之后，再決定是否關(guān)注，這樣的關(guān)注更加有效，粘性更強。

圖：“關(guān)注流”視覺設(shè)計的思路

“逛逛”的內(nèi)容形式很好地彌補了淘寶缺乏用戶導(dǎo)購的問題（俗稱種草），依托KOL產(chǎn)出的優(yōu)質(zhì)內(nèi)容，與消費者產(chǎn)生情感上的價值鏈接，創(chuàng)造出用戶的潛在需求。

5. 逛逛和小紅書的產(chǎn)品設(shè)計區(qū)別

這次改版之后，很多人說這是小紅書。關(guān)注、發(fā)現(xiàn)、垂直分類欄，都和小紅書很相似。

5.1 內(nèi)容起家和電商起家

淘寶和小紅書對內(nèi)容的分發(fā)模式是不同，小紅書默認(rèn)分類欄處于收起狀態(tài)，只有主動下拉的時候太會出現(xiàn)，由此可以看出小紅書對自己的內(nèi)容推薦還是比較有信心的，由于一開始就是做內(nèi)容起家，所以對自身平臺用戶的喜好是有所了解的。

但是淘寶是一個電商起家的平臺，在內(nèi)容方面，缺乏對用戶的偏好判斷，所以逛逛的導(dǎo)航欄下方，會加入了“官方話題欄目”和“官方出品的內(nèi)容”，利用精選話題引導(dǎo)社區(qū)內(nèi)容的方向，一定程度上也可以通過話題數(shù)據(jù)了解平臺用戶的偏好。

圖：小紅書比淘寶更懂用戶喜歡什么內(nèi)容

5.2 內(nèi)容導(dǎo)向不同

小紅書等平臺不光有購物種草，還有學(xué)習(xí)、音樂、科普等內(nèi)容也相對成熟。和淘寶轉(zhuǎn)型社區(qū)內(nèi)容一樣，小紅書也在進行圖文、視頻向直播內(nèi)容擴展的戰(zhàn)略方向。所以我們會發(fā)現(xiàn)，在小紅書的編輯內(nèi)容上，視頻和直播是強露出的，且不支持位置更換。

再來看逛逛的內(nèi)容，以穿搭、彩妝為首的消費品內(nèi)容，這些都是淘寶擅長的領(lǐng)域，容易產(chǎn)出優(yōu)質(zhì)內(nèi)容，反過來說，這些內(nèi)容最終也都是可以在淘寶上可以消費到的，最終還是以平臺商品轉(zhuǎn)化為目的。

圖：內(nèi)容形式對平臺戰(zhàn)略的影響

5.3  小紅書互動率更高，淘寶內(nèi)容消費效率更高

小紅書在內(nèi)容消費形式上，比逛逛更加注重互動：首頁瀑布流點擊進入二級的內(nèi)容頁后，可以直觀的看到博主全部的文本簡介，以及下方的用戶評論內(nèi)容，用戶消費的不光是圖文本身的內(nèi)容，也是其他用戶評論產(chǎn)生的內(nèi)容，更容易產(chǎn)生社交關(guān)系鏈。

逛逛則更注重內(nèi)容本身的消費效率：產(chǎn)品設(shè)計上使用沉浸式的下滑體驗，用戶點擊產(chǎn)品圖后，進入的是同系列產(chǎn)品的瀑布流，如果想要查看評論的話，需要點擊評論icon進行二次跳轉(zhuǎn)，此時用戶會一直專注于內(nèi)容的消費，容易忽略其他用戶評價等內(nèi)容。

圖：提高互動率的產(chǎn)品設(shè)計

 6. 寫在最后的一些思考

此次淘寶做內(nèi)容社區(qū)的優(yōu)勢之處在于，淘寶將社交關(guān)系融入到了商品的消費鏈路中，消費者通過商品體驗、測評、種草等方式，和平臺產(chǎn)生互動，建立聯(lián)系。

而淘寶最不缺的就是商品，并且擁有8億多的消費者，和其他平臺相比，更容易產(chǎn)生垂直領(lǐng)域的優(yōu)質(zhì)內(nèi)容和專業(yè)的KOL，但是要想經(jīng)營一個優(yōu)質(zhì)社群，除了需要一批優(yōu)質(zhì)的內(nèi)容創(chuàng)造者，還需要考慮后續(xù)涌現(xiàn)的用戶是否會對現(xiàn)有社群模式產(chǎn)生沖擊。（比如知乎開放用戶注冊后，導(dǎo)致內(nèi)容注水的現(xiàn)象）

因為淘寶本身相當(dāng)于一個巨型供貨方，大大縮短了帶貨變現(xiàn)的路徑和難度，不同于小紅書這類平臺，它們最開始是沒有帶貨模式的，常常需要通過接推廣給其他商品引流來變現(xiàn)。

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

文章來源：站酷   作者：抓馬橋分橋 

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

免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

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

文章來源：csdn

分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責(zé)聲明：藍藍設(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è)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)