首頁(yè)

css3通過scale()、rotate()實(shí)現(xiàn)放大、旋轉(zhuǎn)

前端達(dá)人

css3通過scale()實(shí)現(xiàn)放大功能、通過rotate()實(shí)現(xiàn)旋轉(zhuǎn)功能，下面有個(gè)示例，大家可以參考下

一、scale()方法

縮放，指的是“縮小”和“放大”。在CSS3中，我們可以使用scale()方法來將元素根據(jù)中心原點(diǎn)進(jìn)行縮放。

跟translate()方法一樣，縮放scale()方法也有3種情況：

（1）scaleX(x)：元素僅水平方向縮放（X軸縮放）；
（2）scaleY(y)：元素僅垂直方向縮放（Y軸縮放）；
（3）scale(x,y)：元素水平方向和垂直方向同時(shí)縮放（X軸和Y軸同時(shí)縮放）；

1、scaleX(x)

語(yǔ)法：

transform:scaleX(x)

說明：

x表示元素沿著水平方向（X軸）縮放的倍數(shù)，如果大于1就代表放大；如果小于1就代表縮小。
大家想想倍數(shù)是怎樣一個(gè)概念就很好理解了。

2、scaleY(y)

語(yǔ)法：

transform:scaleY(y)

說明：

y表示元素沿著垂直方向（Y軸）縮放的倍數(shù)，如果大于1就代表放大；如果小于1就代表縮小。

3、scale(x,y)

語(yǔ)法：

transform:scale(x,y)

說明：

x表示元素沿著水平方向（X軸）縮放的倍數(shù)，y表示元素沿著垂直方向（Y軸）縮放的倍數(shù)。
注意，Y是一個(gè)可選參數(shù)，如果沒有設(shè)置Y值，則表示X、Y兩個(gè)方向的縮放倍數(shù)是一樣的（同時(shí)放大相同倍數(shù)）。

舉例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<!DOCTYPE html>
<head>
    <title>CSS3縮放scale()用法</title>
    <style type="text/css">
        /*設(shè)置原始元素樣式*/
        .main
        {
            margin:100px auto;/*水平居中*/
            width:300px;
            height:200px;
            border:1px dashed gray;
        }
        /*設(shè)置當(dāng)前元素樣式*/
        #jb51
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
            transform:scaleX(1.5);
            -webkit-transform:scaleX(1.5);  /*兼容-webkit-引擎瀏覽器*/
            -moz-transform:scaleX(1.5);     /*兼容-moz-引擎瀏覽器*/
        }
        /*普通方便對(duì)比*/
         #jbzj
        {
            width:300px;
            height:200px;
            color:white;
            background-color: #3EDFF4;
            text-align:center;
        }
    </style>
</head>
<body>
    <div class="main">
        <div id="jb51">腳本之家1</div>
    </div>
    <div class="main">
        <div id="jbzj">腳本之家2</div>
    </div>
</body>
</html>

在chrome瀏覽器預(yù)覽效果如下：

分析：

從上圖可以看出，元素沿著X軸方向放大了1.5倍（兩個(gè)方向同時(shí)延伸，整體放大1.5倍）。

transform:scaleY (1.5);
-webkit-transform:scaleY(1.5); /*兼容-webkit-引擎瀏覽器*/
-moz-transform:scaleY(1.5); /*兼容-moz-引擎瀏覽器*/

當(dāng)使用上面代碼時(shí)，在瀏覽器預(yù)覽效果如下：

css3通過scale()實(shí)現(xiàn)放大功能

通過rotate()實(shí)現(xiàn)旋轉(zhuǎn)功能

旋轉(zhuǎn)rotate()函數(shù)通過指定的角度參數(shù)使元素相對(duì)原點(diǎn)進(jìn)行旋轉(zhuǎn)。它主要在二維空間內(nèi)進(jìn)行操作，設(shè)置一個(gè)角度值，用來指定旋轉(zhuǎn)的幅度。如果這個(gè)值為正值，元素相對(duì)原點(diǎn)中心順時(shí)針旋轉(zhuǎn)；如果這個(gè)值為負(fù)值，元素相對(duì)原點(diǎn)中心逆時(shí)針旋轉(zhuǎn)。如下圖所示：

HTML代碼：

1
2
3
<div class="wrapper">
  <div></div>
</div>

CSS代碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
.wrapper {
  width: 200px;
  height: 200px;
  border: 1px dotted red;
  margin: 100px auto;
}
.wrapper div {
  width: 200px;
  height: 200px;
  background: orange;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

演示結(jié)果

而transition則可設(shè)置元素變化所需的時(shí)間

html中的結(jié)構(gòu)代碼

<ul>
<li><img src="image/1.jpg" ></li>
<li><img src="image/2.jpg" ></li>
<li><img src="image/3.jpg" ></li>
</ul>

css3樣式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
ul{
margin-top:50px;
list-style:none;
}
ul li{
width:200px;
height:150px;
float:left;
margin-left:10px;
-webkit-transition:all 1s;
-moz-transition:all 1s;
-o-transition:all 1s;
}
ul li:hover{
-webkit-transform:scale(1.5) rotate(10deg);
-moz-transform:scale(1.5) rotate(10deg);
-o-transform:scale(1.5) rotate(10deg);
}
li img{
width:100%;
height:100%;
}

以上就是css3通過scale()、rotate()實(shí)現(xiàn)放大、旋轉(zhuǎn)的詳細(xì)內(nèi)容，更多關(guān)于css3放大、旋轉(zhuǎn)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！




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

文章來源：腳本之家

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

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

評(píng)論(0) 瀏覽(1669)

解決往數(shù)組添加數(shù)據(jù)，第二次會(huì)覆蓋第一次的方案

前端達(dá)人 



    

    
  1. 

        
    

            
    
                // 獲取緩存里邊的項(xiàng)目數(shù)據(jù)
            
    

        
    

    
    2. 

    
  2. 

        
    

            
    

            
    

        
    

        
    

            
    
                var e = wx.getStorageSync('projectList');
            
    

        
    

    
    3. 

    
  3. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    4. 

    
  4. 

        
    

            
    

            
    

        
    

        
    

            
    
                if(!e){
            
    

        
    

    
    5. 

    
  5. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 獲取存放項(xiàng)目
            
    

        
    

    
    6. 

    
  6. 

        
    

            
    

            
    

        
    

        
    

            
    
                var e = this.data.projectList;
            
    

        
    

    
    7. 

    
  7. 

        
    

            
    

            
    

        
    

        
    

            
    
                }
            
    

        
    

    
    8. 

    
  8. 

        
    

            
    

            
    

        
    

        
    

            
    
                // 獲取項(xiàng)目個(gè)數(shù)
            
    

        
    

    
    9. 

    
  9. 

        
    

            
    

            
    

        
    

        
    

            
    
                var a = e.length;
            
    

        
    

    
    10. 

    
  10. 

        
    

            
    

            
    

        
    

        
    

            
    
                var title = wx.getStorageSync('title');
            
    

        
    

    
    11. 

    
  11. 

        
    

            
    

            
    

        
    

        
    

            
    
                var value = wx.getStorageSync('value');
            
    

        
    

    
    12. 

    
  12. 

        
    

            
    

            
    

        
    

        
    

            
    
                var img_url = wx.getStorageSync('img_url');
            
    

        
    

    
    13. 

    
  13. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    14. 

    
  14. 

        
    

            
    

            
    

        
    

        
    

            
    
                var i = {
            
    

        
    

    
    15. 

    
  15. 

        
    

            
    

            
    

        
    

        
    

            
    
                id: a,
            
    

        
    

    
    16. 

    
  16. 

        
    

            
    

            
    

        
    

        
    

            
    
                title: title,
            
    

        
    

    
    17. 

    
  17. 

        
    

            
    

            
    

        
    

        
    

            
    
                value: value,
            
    

        
    

    
    18. 

    
  18. 

        
    

            
    

            
    

        
    

        
    

            
    
                img_url: img_url,
            
    

        
    

    
    19. 

    
  19. 

        
    

            
    

            
    

        
    

        
    

            
    
                };
            
    

        
    

    
    20. 

    
  20. 

        
    

            
    

            
    

        
    

        
    

            
    

            
    

        
    

    
    21. 

    
  21. 

        
    

            
    

            
    

        
    

        
    

            
    
                e.push(i);
            
    

        
    

    
    22.

這里的代碼是以小程序?yàn)榘咐?，所有程序都是一個(gè)道理

直接上代碼來解釋，第二次數(shù)據(jù)會(huì)覆蓋第一次的原因就是，每次在觸發(fā)這個(gè)方法的時(shí)候初始化了數(shù)據(jù)。所以就會(huì)覆蓋數(shù)據(jù)

所以在這個(gè)方法里邊只需要先獲取e這個(gè)數(shù)據(jù)，判斷e是否存在值，當(dāng)有值的時(shí)候往里邊push

數(shù)據(jù)，當(dāng)沒有數(shù)據(jù)的時(shí)候直接將數(shù)據(jù)初始化即可




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

文章來源：csdn

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

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

評(píng)論(0) 瀏覽(1708)

vue.js — 解決添加重復(fù)數(shù)據(jù)報(bào)錯(cuò)問題

前端達(dá)人 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重復(fù)添加會(huì)報(bào)數(shù)據(jù)重復(fù)提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    •

當(dāng)我們點(diǎn)擊【添加】按鈕兩次之后，會(huì)出現(xiàn)如下報(bào)錯(cuò)信息
vue添加重復(fù)數(shù)據(jù)報(bào)錯(cuò)

使用track-by解決添加重復(fù)數(shù)據(jù)報(bào)錯(cuò)問題 

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/vue.js" ></script> </head> <body> <div id="box"> <input type="button" value="添加" @click="add"> <ul> <li v-for="val in arr" track-by='$index'> {{val}} </li> </ul> </div> </body> <script> var vm = new Vue({
            data: {
                arr: ['apple','pear','orange']
            },
            methods:{
                add: function(){ //[Vue warn]: Duplicate value found in v-for="val in arr": "tomato".  //Use track-by="$index" if you are expecting duplicate values. //重復(fù)添加會(huì)報(bào)數(shù)據(jù)重復(fù)提示 this.arr.push('tomato');
                }
            }
        }).$mount('#box'); </script> </html>

    

    
  • 
        1
    
    • 

    
  • 
        2
    
    • 

    
  • 
        3
    
    • 

    
  • 
        4
    
    • 

    
  • 
        5
    
    • 

    
  • 
        6
    
    • 

    
  • 
        7
    
    • 

    
  • 
        8
    
    • 

    
  • 
        9
    
    • 

    
  • 
        10
    
    • 

    
  • 
        11
    
    • 

    
  • 
        12
    
    • 

    
  • 
        13
    
    • 

    
  • 
        14
    
    • 

    
  • 
        15
    
    • 

    
  • 
        16
    
    • 

    
  • 
        17
    
    • 

    
  • 
        18
    
    • 

    
  • 
        19
    
    • 

    
  • 
        20
    
    • 

    
  • 
        21
    
    • 

    
  • 
        22
    
    • 

    
  • 
        23
    
    • 

    
  • 
        24
    
    • 

    
  • 
        25
    
    • 

    
  • 
        26
    
    • 

    
  • 
        27
    
    • 

    
  • 
        28
    
    • 

    
  • 
        29
    
    • 

    
  • 
        30
    
    • 

    
  • 
        31
    
    • 

    
  • 
        32
    
    • 

    
  • 
        33
    
    •

解決vue添加相同數(shù)據(jù)報(bào)錯(cuò)

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

文章來源：csdn

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

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

評(píng)論(0) 瀏覽(1694)

萬(wàn)字干貨系列，爆肝的實(shí)用圖表詳解指南

seo達(dá)人


 

圖表的作用在于對(duì)數(shù)據(jù)的合理的詮釋而不是美觀。所以，在了解圖表怎么繪制前，更重要的是了解圖表是什么，包含哪些類型。下面就做下相應(yīng)解釋方便大家理解～

 

1.1 圖表是什么

在今天，隨著大數(shù)據(jù)和數(shù)據(jù)分析理念深入人心，圖表在 B 端設(shè)計(jì)的地位越發(fā)重要。

那么什么叫圖表呢？

圖表指的是可以直觀展示統(tǒng)計(jì)信息屬性和數(shù)值的圖形表格，對(duì)于多數(shù)人來說第一次接觸圖表概念都源自中小學(xué)計(jì)算機(jī)課程中的 Office Excel 表格教學(xué)。

 

要理解圖表，你就繞不開 Excel 這個(gè)軟件或其功能形式。我們都知道 Excel 是一個(gè)表格工具，可以任意填寫表格化的信息內(nèi)容進(jìn)去。

但那只是呈現(xiàn)出來的表象，Excel 的真實(shí)身份應(yīng)該是一個(gè)數(shù)據(jù)記錄工具，通過這種表格形式記錄，比如班級(jí)學(xué)生成績(jī)、客戶聯(lián)系方式、倉(cāng)庫(kù)進(jìn)銷記錄等等。每一條記錄下的信息都是一條獨(dú)立的 “數(shù)據(jù)”。

 

盯著表格看，我們確實(shí)可以看到一些具體的信息、數(shù)據(jù)、內(nèi)容。但是，數(shù)據(jù)的作用只是讓我們自己去精確定位想要的內(nèi)容而已？顯然是否定的。

我們統(tǒng)計(jì)數(shù)據(jù)的目的，還包括要從眾多的數(shù)據(jù)條目中獲得反映真實(shí)情況的 “規(guī)律”、“趨勢(shì)”，如果我們只盯著數(shù)據(jù)條目一條條的瀏覽，是很難找出這些信息的。

于是，人類就發(fā)明了圖表這種可視化工具，幫助我們對(duì)數(shù)據(jù)進(jìn)行總結(jié)，用更直觀的視覺方式來認(rèn)識(shí)數(shù)據(jù)和找出規(guī)律和趨勢(shì)，這也是為什么 Excel 是最強(qiáng)大的圖表生產(chǎn)軟件的原因之一。

 

總結(jié)：圖表是統(tǒng)計(jì)學(xué)的子學(xué)科，它幫助我們更好的找到數(shù)據(jù)背后的真相，并做出正確的決定。

 

1.2 圖表的內(nèi)容構(gòu)成

圖表既然由數(shù)據(jù)內(nèi)容生成，這個(gè)生成和轉(zhuǎn)化的過程當(dāng)然具備一些基本的規(guī)則和條件。要滿足圖表生成的數(shù)據(jù)必須要包含兩種基礎(chǔ)信息 —— ”維度“ 和 ”數(shù)值“。

它們是組成絕大多數(shù)圖表的基石，比如看下面的表格，一次體檢中有三個(gè)班級(jí)的5個(gè)同學(xué)，他們的身高、體重、體脂率、肌肉含量、視力各不相同。

 

我們可以從中挑選維度和數(shù)值，比如姓名做緯度（X軸），體脂率作為數(shù)值（Y軸），那么就可以生成基礎(chǔ)柱狀圖表。

 

從上面案例可以知道，橫向緯度表示的是你圖表中要包含多少不同的展示對(duì)象，縱向數(shù)值則表示你要顯示該維度的哪一類數(shù)據(jù)。

緯度通常指某個(gè)具體的人、日期、事件、分類，通常是 不可量化 的內(nèi)容。而數(shù)值則是指包含 可量化 的數(shù)據(jù)類型，重點(diǎn)要記得數(shù)值是指 “數(shù)據(jù)類型”，而不是指具體的參數(shù)值。

再進(jìn)一步，上方生成的圖表，雖然直接反映了我們選擇的緯度、數(shù)值的情況，但顯然對(duì)于不了解數(shù)據(jù)背景的人來說太簡(jiǎn)陋了，不知道它們代表的意義。所以，一個(gè)完整的圖表還會(huì)包含一些 “解釋” 性元素，來讓觀看者更好的理解圖表內(nèi)容。

所以，一個(gè)完整的圖表中除了中心圖形，還會(huì)包含標(biāo)題、單位、緯度圖例、網(wǎng)格、選中提示等內(nèi)容，用來提升其閱讀性。

 

以上只是最基礎(chǔ)的示例，不同圖表、內(nèi)容，對(duì)說明信息的要求各有不同，我們會(huì)在下方做出一定的解釋。一個(gè)優(yōu)秀的設(shè)計(jì)師要學(xué)會(huì)如何因地制宜，優(yōu)化圖表的內(nèi)容構(gòu)成，并對(duì)展示的信息進(jìn)行取舍。

 

1.3 圖表的類型認(rèn)識(shí)

隨著統(tǒng)計(jì)學(xué)的發(fā)展，圖表也經(jīng)歷了一系列的增長(zhǎng)與創(chuàng)新，除了我們常見的幾種圖表外，還發(fā)展出了大量平常看不到，只存在于各自專業(yè)領(lǐng)域的特殊種類。但是，它們對(duì)我們的生活和工作也起到產(chǎn)生了重要的影響。

比如在新冠危機(jī)中，政府和專業(yè)機(jī)構(gòu)對(duì)民眾開放的數(shù)據(jù)就大量使用了圖表進(jìn)行解釋，讓我們可以很清晰的了解事情的走勢(shì)和真相。

 

之所以有這么多不同圖表，讓人眼花繚亂，在于數(shù)據(jù)所包含的信息和特性不同，導(dǎo)致了它們所總結(jié)的規(guī)律類型也不同。

業(yè)界將圖表展示類型分成了四個(gè)大類，包含比較、分布、構(gòu)成、聯(lián)系，雖然比較簡(jiǎn)陋，但這是新手認(rèn)識(shí)圖表最簡(jiǎn)單的方式。

 

我們簡(jiǎn)單解釋下這四個(gè)分類代表的作用：

  • 比較：用來對(duì)比不同對(duì)象數(shù)值高低，比如上一份學(xué)生身高案例
  • 分布：展示不同對(duì)象數(shù)值的分布區(qū)間，比如新冠新增分布省份
  • 構(gòu)成：表示某子對(duì)象的構(gòu)成關(guān)系，比如班級(jí)中的男女比例
  • 聯(lián)系：表示不同對(duì)象之間的聯(lián)系情況，比如不同城市之間的人口流動(dòng)

之后我們就會(huì)以這個(gè)框架，來解釋不同分類下的圖表，幫助大家建立對(duì)圖表的正確認(rèn)識(shí)和設(shè)計(jì)方式。除了這種標(biāo)準(zhǔn)分類以外，我還額外做了一個(gè)歸類，就是基礎(chǔ)和高級(jí)圖表。

前面提到，一般圖表就只反映緯度、數(shù)值兩個(gè)方面的圖表類型，很容易理解。但復(fù)雜的圖表，就會(huì)超過這個(gè)范圍，它可能包含了多個(gè)維度、多種數(shù)值、甚至第三、第四。

比如下面這個(gè)散點(diǎn)圖，除了身高（緯度）、體重（數(shù)值）外，還表現(xiàn)了個(gè)體（圓點(diǎn)）、性別（色彩）。在圖表本身的解釋性元素中，還包含分布區(qū)域、最大最小值標(biāo)識(shí)、體重/身高均值。

 

這已經(jīng)超出一個(gè)沒有接觸過統(tǒng)計(jì)的新手認(rèn)知范疇了，是需要具體學(xué)習(xí)才能學(xué)會(huì)如何閱讀和應(yīng)用的圖表。

這還是比較簡(jiǎn)單的高級(jí)圖表，往后還有類似桑基圖、K線圖（韭菜的自我修養(yǎng)）、和弦圖等類型，它們有各自使用的規(guī)范、參數(shù)，以及應(yīng)用的場(chǎng)景。

 

高級(jí)圖表的復(fù)雜度和抽象性，決定了它的使用門檻較高，識(shí)別效率較低。而隨著數(shù)據(jù)各行各業(yè)數(shù)據(jù)重要性的提升，對(duì)圖表的需求已經(jīng)不再局限在二維抽象圖形的應(yīng)用上，而是提供了視覺效果更精美，制作過程更復(fù)雜，閱讀門檻更低的可視化數(shù)據(jù)展示內(nèi)容。

 

雖然我們?cè)诒酒恼虏粫?huì)拓展到大屏可視化的領(lǐng)域，但是掌握好平面二維的統(tǒng)計(jì)圖表，提升對(duì)統(tǒng)計(jì)目的的認(rèn)識(shí)，是深入學(xué)習(xí)可視化的必要條件。

 

接下來，我們就要來介紹一下如何繪制圖表了。雖然圖表之間有比較大的區(qū)別，但它們有很多細(xì)節(jié)是具有統(tǒng)一規(guī)范的。優(yōu)先掌握這些一致的內(nèi)容，再理解不同圖表的具體繪制差異，可以幫助設(shè)計(jì)師快速上手圖表設(shè)計(jì)工作。

 

2.1 基本內(nèi)容繪制思路

上面我們提了，一個(gè)成熟的圖表會(huì)包含不少解釋性信息，怎么放置解釋信息和圖形元素是我們?cè)谠O(shè)計(jì)時(shí)的第一個(gè)考慮要素。

常見的抽象圖表都有一個(gè)完整的矩形區(qū)域，我們要先確定該圖表的具體占比尺寸。然后，對(duì)這個(gè)區(qū)域進(jìn)行布局的規(guī)劃，而這個(gè)布局的規(guī)劃就和解釋信息的展示有非常大的關(guān)系。

比如，你需要在圖表中增加標(biāo)題和圖形解釋，那一開始把圖形做成了上、中、下三欄。有的情況下我們可能還會(huì)增加一個(gè)默認(rèn)存在的文本型解釋模塊，那么還會(huì)再右側(cè)再切割出一個(gè)區(qū)域出來。

 

除了解釋信息外，我們?cè)谠O(shè)計(jì)中有時(shí)候還不能忽視交互內(nèi)容，比如要包含分類篩選、時(shí)間線控制、開關(guān)等控件時(shí)，它們準(zhǔn)備放在哪里，也要在這個(gè)階段確定出來。

 

經(jīng)過前面的切割，其實(shí)我們就能確定出中間的圖形區(qū)域了。在開始繪制前，我們還要對(duì)圖形具備的信息做進(jìn)一步的確認(rèn)，XY 軸坐標(biāo)是否包含文字解釋，餅圖類是否包含延長(zhǎng)指示線說明。

將這些區(qū)域先確定出來，減去它們的空間，就留下了最終要圖形展示的區(qū)域了。

 

合理的圖表繪制流程變是先布局，確定信息內(nèi)容，最后才集中處理圖形元素。如果對(duì)于前端適配有一定了解的同學(xué)，也就知道在完成這些步驟以后，圖表的適配規(guī)則制定就暢通無(wú)阻了。

 

2.2  圖形分布和比例映射

有了圖形區(qū)域，接著就可以開始動(dòng)手畫圖形了。不管是基礎(chǔ)還是復(fù)雜的圖形，你想要讓自己輸出的作品嚴(yán)謹(jǐn)、質(zhì)量高，就需要應(yīng)用專業(yè)的繪制方法。

圖表圖形的繪制類似尺寸作圖，需要應(yīng)用各種參考線、輔助工具來完成。圖形本身并不是我們用來做創(chuàng)意的地方，而是要以準(zhǔn)確的方式繪制出來。它包含兩個(gè)重點(diǎn)，分布和比例映射。

以一個(gè)柱狀圖表舉例，該圖表中維度包含了 7 個(gè)對(duì)象，即應(yīng)該出現(xiàn) 7 個(gè)柱形。那么首先就要通過等分圖形區(qū)域，來確定柱形的分布，XY軸文字的對(duì)齊對(duì)象。

 

如果你不羅列對(duì)象具體數(shù)值的話，到這步也就結(jié)束了，但如果對(duì)象數(shù)值是必要顯示內(nèi)容的話，那么就要盡量確保柱狀的顯示比例和數(shù)值是一致的。

假設(shè)在上方案例中，Y軸總高是 100px，那么數(shù)值中每 1 小時(shí)的高度就是 100/16 = 6.25px，我們就要用你寫下來的數(shù)值 * 6.25，保證柱狀圖高度比例和你的數(shù)值一致。

 

而類似餅圖這樣的圖形中，只要添加了具體數(shù)值內(nèi)容，那么餅圖中不同的扇形角度，也要符合對(duì)應(yīng)的比例。比如占比 10%、20%、30%、40% 的四個(gè)對(duì)象，它們的角度就分別為 36、72、108、144。

 

這就是分布和比例映射的基本邏輯，不管是什么圖表，只要它根據(jù)數(shù)值在區(qū)域中進(jìn)行繪制，就一定會(huì)受到數(shù)值的影響。不管學(xué)習(xí)什么新的圖表，都只要確定這兩個(gè)步驟就可以輕松準(zhǔn)確的完成繪制。

至于具體該怎么實(shí)現(xiàn)，用插件還是參考線，就是軟件基礎(chǔ)的問題了，不在這里展開。

 

2.3 圖表配色的基本原理

在圖表設(shè)計(jì)中的最后一個(gè)問題，就是關(guān)于配色的方案了。圖表配色的技巧主要關(guān)注兩點(diǎn)，選色邏輯和搭配方法。

選色邏輯，就是圖表用色的一些基本規(guī)范。我們知道圖表往往非常的復(fù)雜，或者頁(yè)面一屏中會(huì)包含大量的圖表。

在這個(gè)基礎(chǔ)上，圖表的用色就注定是不能太 “剛猛” 的，飽和度要偏低，明度要適中。在選色面板中，它大概處中部偏上的區(qū)域。即使產(chǎn)品主色用的飽和度非常高，圖表要和主色統(tǒng)一，也建議在主色基礎(chǔ)上做適當(dāng)調(diào)節(jié)，在色系上接近即可。

 

并且，建議新手在繪制圖表的過程中千萬(wàn)不要用漸變色。即使在各類飛機(jī)稿中，漸變色的展示效果也非常的不理想，沒有任何可讀性。

 

有了選色邏輯，多色搭配的思路也就變得而非常簡(jiǎn)單了，只要重點(diǎn)關(guān)注色環(huán)的配色模式即可。

配色模式多種多樣，包括補(bǔ)色、三角對(duì)立、類似、四元、方形、臨近等等，不用想的那么復(fù)雜，只要牢記根據(jù)你的設(shè)計(jì)風(fēng)格需要，你是要相鄰配色，還是等分配色。

相鄰配色，即以一個(gè)色系的臨近色系為標(biāo)準(zhǔn)的搭配。以 H（色相）、S（飽和度）、B（明度） 配色模式為準(zhǔn)，飽和度和明度數(shù)值基本不變的情況下，小幅度變更色相。

 

等分配色，也是保持飽和度、明度的一致，根據(jù)需要的色彩數(shù)量（大于三個(gè)）在色環(huán)中按角度等分，獲得均勻的色彩過度。

 

配色的方法很簡(jiǎn)單，難的是你們?nèi)绾胃鶕?jù)頁(yè)面的需要、視覺的體驗(yàn)，合理的運(yùn)用配色的方案，這沒有統(tǒng)一的標(biāo)準(zhǔn)。要記得圖表配色不是僅僅針對(duì)自身，會(huì)和頁(yè)面其它色彩產(chǎn)生聯(lián)系。

保證相對(duì)平緩、不太激進(jìn)的圖表配色思路，是最安全的做法。 

 

首先解釋第一類圖表 —— 比較。

比較圖表的作用，是用來對(duì)緯度的數(shù)值做對(duì)比的圖表類型，直觀對(duì)比不同對(duì)象的強(qiáng)弱、排序、趨勢(shì)。

 

3.1 柱狀類圖表

3.1.1 基本認(rèn)識(shí)：

柱狀圖，是一個(gè)使用柱狀圖形反映緯度數(shù)值的二維坐標(biāo)軸圖表，也是我們最常見的圖表類型。

在這個(gè)二維坐標(biāo)軸中，我們可以用縱軸代表數(shù)值，也可以用橫軸代表數(shù)值，另一個(gè)軸代表緯度。即在顯示的過程中可以使用縱向或者橫向的（橫向的也被叫成條形圖，都是一回事）。

 

柱狀圖除了每個(gè)對(duì)象包含一類數(shù)值的做法以外，也允許包含多個(gè)數(shù)值類型，每個(gè)類型使用一種顏色表示，這種圖表叫分組柱狀。

 

并且，柱狀圖作為最基礎(chǔ)的圖形，衍生了非常多下級(jí)的柱狀類型。包括：堆疊柱狀、子彈圖、正負(fù)混合、瀑布圖、直方圖等。但要注意的是，并不是所有柱狀類圖表，都是作為對(duì)比來使用的。后續(xù)會(huì)有進(jìn)一步提示。

 

3.1.2 設(shè)計(jì)建議：

柱狀圖通過柱體的長(zhǎng)短，可以直接對(duì)比不同緯度數(shù)值的高低，但使用也有一定的差別。

緯度之間關(guān)聯(lián)性不是太強(qiáng)，或者按時(shí)間順序排列的就適合用橫向排列的方式，比如下方記錄我隨時(shí)可能猝死的打工人一周睡眠時(shí)間（見左圖）。而涉及排名或者時(shí)間的數(shù)據(jù)組，就適合使用縱向排列的，比如 Geekbench 展現(xiàn)不同 Mac 處理器強(qiáng)弱的排行榜（見右圖）（os：Pro 居然比 M1 還低？）。

 

兩種圖表的選擇還和 UI 環(huán)境的交互方式有關(guān)，在APP中，橫向排列的柱狀圖可以顯示的數(shù)量非常有限，想放更多緯度就要左右滾動(dòng)，體驗(yàn)不佳。而使用縱向排列則對(duì)空間的要求沒那么高。

 

3.2 折線類圖表

3.2.1 基本認(rèn)識(shí)

折線圖也是基礎(chǔ)圖表，通過創(chuàng)建端點(diǎn)并使用直線連接的方式展示出高低不平曲折的線段。折線圖在圖表形式上和柱狀圖非常類似，但兩者在使用上是有一定區(qū)別的。

當(dāng)我們要選擇使用柱狀圖的時(shí)候，往往關(guān)注數(shù)值的總量，或者維度代表的是不同的對(duì)象，比如不同 CPU 之間的跑分對(duì)比。但是折線圖的使用就沒有那么單一，它主要應(yīng)用在單一對(duì)象的單個(gè)維度變化對(duì)比中。

比如，我們監(jiān)控 CPU 的占用頻率，那么維度使用時(shí)間，數(shù)值用百分比，這里面產(chǎn)生的數(shù)據(jù)都是圍繞 CPU 的占用頻率展開，但如果維度改成了當(dāng)前時(shí)間不同核心的占用數(shù)值、溫度，那么我們就肯定不會(huì)用折線圖來表示。

 

折線圖的使用是要通過線段的曲折來反映數(shù)值的波動(dòng)，在應(yīng)用過程中往往不作為一個(gè)靜態(tài)的圖表展示，而是應(yīng)用于監(jiān)控的場(chǎng)景，比如監(jiān)控股市市值、網(wǎng)站在線人數(shù)、CPU溫度、同一地區(qū)降水量等等。

 

3.2.2 設(shè)計(jì)建議：

在折線圖中，最大的認(rèn)知誤區(qū)就是對(duì)于曲線線段的應(yīng)用了。在數(shù)之不盡的網(wǎng)上飛機(jī)稿中，使用曲線的折線圖表 90% 以上都是錯(cuò)誤的。

 

這要回歸本質(zhì)來探討，折線圖也是進(jìn)行對(duì)比的圖形，如果沒有直觀的波動(dòng)，那么這個(gè)圖形帶來的信息量就非常有限。曲線會(huì)因?yàn)閳A角的緣故而降低波動(dòng)帶來的沖擊力，甚至抹平這種對(duì)比。

只有在必定會(huì)連續(xù)出現(xiàn)極大波動(dòng)的圖表中才適合使用曲線，例如圍繞在會(huì)有一個(gè)中間值數(shù)值，曲線進(jìn)行正負(fù)兩端移動(dòng)的類型，比如監(jiān)控呼吸中含氧量（呼和吸一個(gè)周期的維度）。

 

所以，盡量避免曲線的應(yīng)用，不僅畫起來麻煩，而且實(shí)際使用效果極差。

作為折線圖，在一些數(shù)值代表完成、占滿、填充的概念時(shí)，往往就會(huì)覺得單純的線段表示不夠直觀，于是就產(chǎn)生了將下方的區(qū)域填充色彩的 —— 面積圖。只展示一個(gè)數(shù)值類型不夠要加入多個(gè)數(shù)值和線段的就叫折線堆疊圖。

 

3.3 雷達(dá)類圖表

3.3.1 基本認(rèn)識(shí)

雷達(dá)圖，相信大家看到最多的地方就是在游戲的角色面板或者武器面板中。雷達(dá)圖是一種偏向概括性的圖表，并不能用來體現(xiàn)大數(shù)值和高頻變化，是用來對(duì)比同一個(gè)對(duì)象不同維度數(shù)值的圖表。

雷達(dá)圖的應(yīng)用，首先要確認(rèn)出不低于5個(gè)的維度，并且這些維度可以使用相同的數(shù)值體系，比如0-10分，0-100%等。并且，這些維度最好是由同一個(gè)對(duì)象身上拆分出來的，而不是 5 個(gè)維度指代不同的對(duì)象。

簡(jiǎn)單來講，就是我們可以用雷達(dá)圖來表現(xiàn)一個(gè)學(xué)生不同科目的水準(zhǔn)，這樣雷達(dá)圖可以大致概括這個(gè)學(xué)生科目掌握情況和相對(duì)的強(qiáng)弱。

但是不應(yīng)該用雷達(dá)圖來表示不同學(xué)生同一科目的水準(zhǔn)，那就只是更基礎(chǔ)的對(duì)比，用柱狀圖就可以了。

 

當(dāng)然，雷達(dá)圖中的占用內(nèi)容，也可以添加多個(gè)對(duì)象，一個(gè)雷達(dá)圖中可以放多個(gè)同學(xué)不同科目掌握水平的疊加圖形，以此對(duì)比他們的差異。

 

3.3.2 設(shè)計(jì)建議

雷達(dá)圖的繪制，也是優(yōu)先制定說明內(nèi)容區(qū)域，然后再開始圖形的設(shè)計(jì)。

因?yàn)樵诶走_(dá)圖中，我們對(duì)維度的描述，基本只能設(shè)計(jì)到不同端點(diǎn)外部，那么文字本身的數(shù)量、占比，就會(huì)對(duì)圖形的顯示產(chǎn)生非常大的影響，并且在雷達(dá)圖中維度的描述文字是必須的，過度精簡(jiǎn)還是用其它方式體現(xiàn)都很不直觀，所以優(yōu)先預(yù)留足夠的文字空間。

然后，根據(jù)我們需要的維度數(shù)量繪制一個(gè)等邊的多邊形，并設(shè)置合理的數(shù)值。

 

之后，才是確定出這個(gè)多邊形內(nèi)所包含的數(shù)值刻度數(shù)量。假設(shè)除圓心外總共要顯示5級(jí)，那么就要畫 5 個(gè)堆疊的等邊形，那么我們就從最大的那個(gè)等邊形入手，再?gòu)?fù)制4個(gè)出來，對(duì)它們分別乘以 80%、60%、40%、20% 即可。

最后，再將每個(gè)維度對(duì)應(yīng)數(shù)值根據(jù)百分比將端點(diǎn)打在維度的直線上，用鋼筆工具將每個(gè)端點(diǎn)連接起來創(chuàng)建一個(gè)完整的不規(guī)則多邊形，就完成了雷達(dá)圖的設(shè)計(jì)。

 

如果想要在一個(gè)雷達(dá)圖添加多個(gè)對(duì)象，只要用不同顏色描邊繪制對(duì)應(yīng)數(shù)量多邊形即可，如果要填充這些圖形，就一定要使用透明度填充來完成，否則可能遮擋后方的端點(diǎn)，導(dǎo)致圖形不全。

 

3.4 其它類型

3.4.1 階梯圖

階梯圖是一種用來對(duì)比前后數(shù)值漲跌的圖形，它是柱狀和折線圖的合體。它和折線圖的不同之處在于，更關(guān)注每個(gè)對(duì)象增減的份額大小。

不僅僅是關(guān)注波動(dòng)，而是更具體的值。類似關(guān)注一只股票全年的股價(jià)漲跌情況，每個(gè)月漲跌的具體額度，就適合使用階梯圖表現(xiàn)。

 

3.4.2 漏斗圖

漏斗圖因?yàn)殚L(zhǎng)得像漏斗而聞名。雖然這個(gè)圖形看起來像一個(gè)錐形或者三角形，但本質(zhì)上漏斗只是條形圖（橫向柱狀圖）的變體。

漏斗圖是一種對(duì)階段進(jìn)行分層表現(xiàn)的圖形，從上到下的順序中，數(shù)值一定會(huì)呈現(xiàn)衰減的趨勢(shì)（起碼不會(huì)變大），然后從上到下的柱體就越來越小。

例如，UX 數(shù)據(jù)分析經(jīng)常用的漏斗模型，就會(huì)建立一個(gè)從用戶訪問主頁(yè)，到最后完成下單的轉(zhuǎn)化率，每一個(gè)步驟都會(huì)有一定的用戶流失。

在基礎(chǔ)漏斗圖之上還有進(jìn)一步拓展，比如對(duì)這個(gè)轉(zhuǎn)化本身有一個(gè)預(yù)期，那么可以做對(duì)比漏斗圖，比較現(xiàn)實(shí)和預(yù)想中的差距。如果要對(duì)比 iOS 和 Android 端的漏斗數(shù)據(jù)，還有比較漏斗圖，對(duì)比兩側(cè)的長(zhǎng)短數(shù)據(jù)。

 

第二個(gè)解釋的圖表類型 —— 分布。主要是用來研究數(shù)據(jù)分布情況的圖表，對(duì)不同數(shù)據(jù)的統(tǒng)計(jì)分布狀況進(jìn)行描述。

 

4.1  直方類圖表

4.1.1 基本認(rèn)識(shí)

直方圖是一個(gè)看起來和普通柱狀圖非常接近的圖表類型，是一個(gè)用來表示同一個(gè)緯度范圍中，不同區(qū)間頻率的圖形。

 

直方圖是一個(gè)二級(jí)圖表，是對(duì)一級(jí)數(shù)據(jù)的進(jìn)一步轉(zhuǎn)化。比如看上圖案例，散點(diǎn)圖（下面會(huì)說）本身記錄了不同的數(shù)據(jù)的位置，而直方圖就是記錄在發(fā)生在這個(gè)緯度內(nèi)的次數(shù)。

直方圖乍一看很像柱狀圖，但實(shí)際應(yīng)用場(chǎng)景往往使用了非常密集的柱體，讓它看上去像折線圖。對(duì)于設(shè)計(jì)師來說和直方圖打交道是非常普遍的，那就是在 Lightroom 和 Photoshop 中的通道直方圖。

 

當(dāng)視覺設(shè)計(jì)師、攝影師在學(xué)習(xí)處理位圖的時(shí)候，就必然要學(xué)會(huì)直方圖的讀取，它并不是用來讓我們學(xué)習(xí)如何對(duì)比前后數(shù)據(jù)差異的，而是讓我們可以快速掌握這張圖片中像素點(diǎn)在不同通道的分布量。

直方圖是統(tǒng)計(jì)學(xué)中的 “頻率分布” 的視覺表現(xiàn)形式，需要確保使用的場(chǎng)景符合直方圖的定義，以及確保用戶能理解圖表內(nèi)容。

 

4.1.2 設(shè)計(jì)建議

對(duì)于直方圖來說，如果維度對(duì)象少，只要獲得相關(guān)的信息和數(shù)值，就可以像柱狀圖一樣來繪制。

如果是針對(duì)一些比較專業(yè)的場(chǎng)景，如上方的通道直方圖，那么就要放棄自己完成的目標(biāo)，一定要借助相關(guān)插件，或者使用 Excel 等工具實(shí)現(xiàn)后再導(dǎo)入進(jìn)來。

 

4.2 箱型類圖表

4.2.1 基本認(rèn)識(shí)

箱型圖也叫盒須圖，和直方圖類似，它也是一個(gè)二級(jí)圖表，即它不是直觀反應(yīng)原始數(shù)據(jù)，而是對(duì)原始數(shù)據(jù)的狀態(tài)進(jìn)行轉(zhuǎn)譯。圖表中的每個(gè)箱型反應(yīng)一組數(shù)據(jù)的分散情況資料，每個(gè)箱型包含下面這些信息元素。

 

箱型圖反應(yīng)的是一種 “大概” 情況，它不是一種用來進(jìn)行精確數(shù)值展示的圖形。箱體主要是上四分衛(wèi)和下四分衛(wèi)的區(qū)間組成，下/上四分衛(wèi)指的是 “樣本中所有數(shù)值由小到大排列后的 25%/75% 的數(shù)字”。

這里的排列主要通過 “數(shù)值大小” 來決定，而不是分布數(shù)據(jù)。比如一個(gè)班上100個(gè)同學(xué)包含身高 150、160、170、180、190 五種身高，雖然每個(gè)身高包含的人數(shù)不同，但 160 就是它的下四分衛(wèi)，180 是它的上四分衛(wèi)。

那么160-180身高包含的人數(shù)就是箱體本身的區(qū)域，上四分衛(wèi)到上邊緣是 180-190 的人數(shù)，下四分衛(wèi)到下邊緣是 160-150 的人數(shù)。

 

箱型圖可以反應(yīng)的信息是非常豐富的，它可以非常有效的反應(yīng)不同數(shù)據(jù)組的虛實(shí)、占比、上下限，可以獲得非常多有趣的結(jié)論。

 

4.2.2 設(shè)計(jì)建議

在箱型圖的設(shè)計(jì)中，對(duì)于箱體和觸須的表達(dá)要依據(jù)數(shù)據(jù)本身的重要性來判斷。有些場(chǎng)景對(duì)最大最小值更在意，則箱體顏色就淺，線段更矚目。而要重點(diǎn)關(guān)注箱體的話，則可以對(duì)觸須進(jìn)行弱化使用虛線。

同時(shí)，箱型圖的主要識(shí)別信息是 Y 軸的長(zhǎng)度，一個(gè)美觀易度的箱型圖，箱體寬度盡量控制在一個(gè)比較纖細(xì)的水平，不要為了填充畫面的空白強(qiáng)行做寬。

 

4.3  K線圖

4.3.1 基本認(rèn)識(shí)

相信稍微了解過股票還是基金的同學(xué)，對(duì)K線圖那可就一點(diǎn)也不見外了，下陽(yáng)線、收盤光頭陽(yáng)、小陽(yáng)線，開口就是老韭……不對(duì)，老股民了。

K線圖是箱型圖的一個(gè)變種，也叫蠟燭圖，主要應(yīng)用在股票、幣市、期貨等市場(chǎng)的交易數(shù)據(jù)上。一個(gè)K線圖包含了陽(yáng)線、陰線兩個(gè)大類。陽(yáng)線代表上漲，陰險(xiǎn)代表下跌。

每個(gè)類型中，同時(shí)還表示當(dāng)日成交中的最低價(jià)和最高價(jià)，柱體代表的是開盤價(jià)和收盤價(jià)。在我國(guó)股市，上漲用紅色，下跌用綠色，在幣市則相反。

 

K線圖實(shí)際上動(dòng)手設(shè)計(jì)它的情況微乎其微（只用開發(fā)好的），我們只要了解它的原理即可。

 

4.3.2 設(shè)計(jì)建議

K線圖基本只應(yīng)用在和理財(cái)有關(guān)的證券行業(yè)中，在會(huì)出現(xiàn) K 線圖的圖表模塊中，必然會(huì)出現(xiàn)相應(yīng)的交互操作。如左右滑動(dòng)、放大縮小，它是一個(gè)具備響應(yīng)模式的圖表類型，包含兩種狀態(tài)。

如果空間足夠，則使用箱體和虛線的常規(guī)設(shè)計(jì)。如果顯示的對(duì)象密集，那么就會(huì)以一條直線來顯示，忽略掉箱體的部分。

同時(shí)，不同的場(chǎng)景，對(duì)于陰陽(yáng)線箱體的展示會(huì)有一定區(qū)別，除了色彩外，還會(huì)應(yīng)用實(shí)心和描邊的區(qū)別。

因?yàn)樯婕柏?cái)產(chǎn)、交易，針對(duì)K線圖的設(shè)計(jì)，一定要做好前期的業(yè)務(wù)調(diào)研，以及對(duì)比不同的競(jìng)品，降低設(shè)計(jì)出錯(cuò)的概率。

 

4.4 散點(diǎn)類圖表

4.4.1 基本認(rèn)識(shí)

散點(diǎn)圖是一個(gè)使用也非常頻繁的圖表，它通過在 XY 坐標(biāo)軸中添加圓點(diǎn)來表示不同對(duì)象的分布情況。

常見的散點(diǎn)圖就是對(duì)普通二維坐標(biāo)軸進(jìn)行 “打點(diǎn)” 的圖表，每個(gè)點(diǎn)代表統(tǒng)計(jì)學(xué)中的一個(gè) “樣本” 或數(shù)學(xué)概念中的一個(gè) “定量”，下面我們就用樣本來稱呼每個(gè)散點(diǎn)。

 

每個(gè)樣本在散點(diǎn)圖中必然包含兩種以上的信息，一個(gè)是緯度值，一個(gè)是數(shù)值，這樣我們才能確定它在坐標(biāo)軸中的位置。

當(dāng)然，針對(duì)樣本并不是只可以包含兩種信息，比如表示班級(jí)成員身高體重的散點(diǎn)圖，我們可以再引入男女的對(duì)比，對(duì)散點(diǎn)圖進(jìn)行色彩的區(qū)分。再者，還可以添加體脂率，用每個(gè)點(diǎn)的大小來表示。

 

散點(diǎn)圖是一個(gè)很直觀的樣本分布圖表，它是概率論中做回歸分析的主要工具。所以往往我們會(huì)看到散點(diǎn)圖內(nèi)出現(xiàn)了一個(gè)線段，那條線段叫做 “回歸線”，他是通過散點(diǎn)分布情況，計(jì)算出來的一條均值線段。這個(gè)線段不僅可以大致標(biāo)識(shí)數(shù)據(jù)的趨勢(shì)，同時(shí)可以用來做概率計(jì)算和預(yù)測(cè)。

回歸線包含指數(shù)、線性、多項(xiàng)式三種，對(duì)應(yīng)繪制出來的回歸線是曲線、直線、還是波浪線。

 

4.4.2 設(shè)計(jì)建議散點(diǎn)圖的圓點(diǎn)可以使用軟件的 Symbol 功能進(jìn)行創(chuàng)建，確保后續(xù)可以統(tǒng)一修改配色和樣式，尤其是在包含多種色彩的散點(diǎn)圖中。

散點(diǎn)圖的繪制不一定要完美契合數(shù)據(jù)內(nèi)容，但是在大致的分布和數(shù)量上要和實(shí)際情況貼合。如果僅僅是隨意的進(jìn)行分布、均分，那么這個(gè)圖表就會(huì)顯得非常的不嚴(yán)謹(jǐn)和隨意，比如下圖圖表。

 

4.5 其它類型

4.5.1 地圖圖表

地圖圖表，是將抽象的 XY 二維坐標(biāo)軸替換成地圖類圖形的圖表。本質(zhì)上它們也包含 XY 軸，所以一樣可以將數(shù)據(jù)內(nèi)容進(jìn)行映射。

最常見的，就是地圖散點(diǎn)圖了。背景由實(shí)際的地圖完成，坐標(biāo)則由經(jīng)緯度體系來記錄。這是可視化設(shè)計(jì)中非常常見的中心圖表應(yīng)用類型。

同時(shí)，背景的地圖并不是只包含地理信息地圖，還可以是球場(chǎng)、商場(chǎng)、網(wǎng)頁(yè)、建筑表面等內(nèi)容。

 

4.5.2 熱力圖

熱力圖則是地圖和散點(diǎn)圖的合體，也是在二維坐標(biāo)體系中顯示樣本，只是熱力圖更注重的是這些樣本之間的對(duì)比。例如區(qū)域的降水量、臺(tái)風(fēng)風(fēng)力表現(xiàn)、網(wǎng)頁(yè)的點(diǎn)擊區(qū)域等等。

熱力圖本質(zhì)上也是將坐標(biāo)軸切割成了若干小塊（樣本），每個(gè)小塊有一個(gè)對(duì)應(yīng)的數(shù)值，然后通過算法繪制邊緣和不同的漸變。

它也是很少直接通過設(shè)計(jì)軟件繪制的圖表，需要借助插件導(dǎo)入數(shù)據(jù)來實(shí)現(xiàn)，我們只需要確認(rèn)色彩樣式即可。

 

構(gòu)成圖表相對(duì)其它圖表來說是最簡(jiǎn)單的一種，包含扇形、環(huán)形、餅圖、堆疊、矩形樹等類型。

 

5.1 餅圖類圖表

5.1.1 基本認(rèn)識(shí)

前面看到的圖表大多是遵循我們小學(xué)就看過的 XY 軸坐標(biāo)系（笛卡爾坐標(biāo)系）建立的，但是餅圖并不需要考慮坐標(biāo)空間的問題。它是一個(gè)依靠角度來反映數(shù)據(jù)的圖表類型。

餅圖作為一種常見圖表，包含兩個(gè)大類，一般餅圖和環(huán)形圖。如果沒有一些特殊的交互或者復(fù)雜衍生類別的話，環(huán)形圖其實(shí)就是餅圖中間鏤空的版本……

 

餅圖繪制的主要依據(jù)是需要表現(xiàn)幾條維度，以及它們對(duì)應(yīng)的百分比值。餅圖的顯示有比較大的局限性，那就是顯示的維度數(shù)不能過多?？刂圃?2-9 條比較合理，數(shù)量過多就會(huì)導(dǎo)致圖形失去實(shí)際的使用意義。

 

除此以外，南丁格爾圖、旭日?qǐng)D，也是餅圖的延伸，通過添加額外的維度或者子分類，對(duì)餅圖中的每個(gè)對(duì)象進(jìn)行額外的示意。

 

5.1.2 設(shè)計(jì)建議

餅圖作為基礎(chǔ)圖形，多數(shù)情況下也是由設(shè)計(jì)師自己完成的。但很多新手沒有找到要領(lǐng)，導(dǎo)致做出來圖形非常的別扭。我提供一個(gè)繪制的簡(jiǎn)單的思路，那就是通過繪制不同的三角形來拼裝出一個(gè)餅圖。

 

這類圖形繪制的要點(diǎn)是確保三角形在圓心中的頂點(diǎn)時(shí)一致的，如果對(duì)比例的繪制有比較精確的要求，可以通過 Excel 之類的工具生成一個(gè)基礎(chǔ)圖形做背景，貼著它畫即可。

南丁格爾圖也可以沿用上面的畫法，那就是對(duì)每個(gè)維度的三角形采取不同直徑的圓做蒙版，就可以畫出不同半徑的占比區(qū)域了。

這么做的好處，是將圖形的每個(gè)維度獨(dú)立成一個(gè)單獨(dú)的矢量圖形，方便我們后續(xù)進(jìn)行上色。

 

5.2 堆疊類圖表

5.2.1 基本認(rèn)識(shí)

堆疊類圖表算是一個(gè)相對(duì)不那么嚴(yán)謹(jǐn)?shù)念悇e，因?yàn)樗鄶?shù)由其它基礎(chǔ)圖表發(fā)展而來。主要包括柱狀堆疊圖、面積堆疊圖、百分比堆疊圖。

之所以把它歸類到分布而不是其它大類下的圖表子項(xiàng)，原因是只要出現(xiàn)堆疊，就意味著這個(gè)圖表的核心目的是展示構(gòu)成內(nèi)容而不是對(duì)比或者分布。

在柱狀類堆疊圖中，通過將每個(gè)柱體切割成不同的更小柱體來呈現(xiàn)子分類的占比。面積堆疊圖，則是單純的把折線圖進(jìn)行填充然后疊加的圖形。

 

而百分比堆疊，雖然看起來和面積堆疊和接近。但它是以最上層數(shù)據(jù)為 100% 標(biāo)準(zhǔn)，往下的每一級(jí)對(duì)象都根據(jù)頂層百分比呈現(xiàn)的分布樣式。

 

5.2.2 設(shè)計(jì)建議

堆疊類圖形的設(shè)計(jì)，最難的不是圖形，而是色彩的應(yīng)用上。之所以說堆疊只要應(yīng)用就比原先圖形的作用更大，原因就是堆疊使用不同的色彩表現(xiàn)層級(jí)，對(duì)于我們的視覺吸引力遠(yuǎn)遠(yuǎn)大于圖形本身的輪廓。

而將豐富的色彩無(wú)縫拼接在一起，是最容易翻車的配色場(chǎng)景。在這種狀態(tài)下，建議大家只用臨近色來實(shí)現(xiàn)下級(jí)分類的搭配，千萬(wàn)不要使用色相差異過大的色彩。

 

而對(duì)于面積和百分比堆疊圖，都建議在配色的過程中，直接使用帶有透明度的色彩。因?yàn)檫@些折線并不一定會(huì)完美上下覆蓋，當(dāng)中間出現(xiàn)交匯的時(shí)候，不至于信息被遮擋。

 

5.3 矩陣樹圖

5.3.1 基本認(rèn)識(shí)

矩形樹圖最初是一個(gè)設(shè)計(jì)用來表示磁盤空間占用情況的圖形，通過將一塊矩形切割成不同的區(qū)域來表示不同維度的占比，以及位置。

 

雖然也表示占比，但它比餅圖類圖表表示的信息更豐富。第一點(diǎn)是位置信息和并列關(guān)系，比如下面的 M1 芯片的示意圖，就是矩陣樹圖的一種直觀體現(xiàn)，在矩形中不同位置應(yīng)用的不同芯片以及其占用的具體面積。

 

當(dāng)然上方是最理想的情況，通常矩陣樹圖是為了對(duì)一些更抽象的概念實(shí)現(xiàn)矩陣化的排列。而這個(gè)排列中，還有個(gè)非常關(guān)鍵的要素是其中的 ”樹“ 字。

因?yàn)榫仃囍械拿總€(gè)切割出來的矩形，都可以作為一個(gè)獨(dú)立矩形進(jìn)行下一級(jí)的分割，實(shí)現(xiàn)一個(gè)類樹狀圖結(jié)構(gòu)的信息收納。所以，完整的矩陣樹圖，是可以支持縮放或點(diǎn)擊進(jìn)入下一層級(jí)的。

 

而使用矩陣樹圖不使用樹狀圖，原因也在于我們需要表現(xiàn)它的占比，而不是單純的結(jié)構(gòu)。所以如果只是簡(jiǎn)單表現(xiàn)層級(jí)結(jié)構(gòu)，如企業(yè)組織架構(gòu)、知識(shí)點(diǎn)拆分之類的，要用樹狀圖而不能使用矩陣樹圖。

 

5.3.2 設(shè)計(jì)建議

在這類圖表在項(xiàng)目中基本不會(huì)獨(dú)立開發(fā)出來，因?yàn)槠鋸?fù)雜度基本都會(huì)使用開源代碼。

設(shè)計(jì)師的主要工作，就是根據(jù)對(duì)應(yīng)開源圖表，指定配色的方案，切割的邊緣大小，以及文字的顯示規(guī)范即可。

 

聯(lián)系圖表，是用來展示維度之間聯(lián)系的圖表類型，包含桑基、關(guān)系、和弦、韋恩圖、依賴關(guān)系圖等。

聯(lián)系類圖表中，多數(shù)是非常復(fù)雜的圖形，已經(jīng)脫離直接手工繪制的范疇，所以我們只簡(jiǎn)單介紹其中幾個(gè)有代表性的圖表且給出設(shè)計(jì)建議了。

 

6.1 ?；鶊D類圖表

?；鶊D是一個(gè)用來描述某維度值 ”流動(dòng)“ 到其它維度走勢(shì)的流動(dòng)圖表。

這是一個(gè)比較復(fù)雜的概念，比如下面的概念，不同國(guó)家人口的流動(dòng)，人還是原來那些人（數(shù)值），但他們以不同的數(shù)量比例，移動(dòng)到不同的國(guó)家（維度）。

 

?；鶊D的應(yīng)用，關(guān)鍵在對(duì)數(shù)值遷移流向的關(guān)注上，它適合應(yīng)用的場(chǎng)景在監(jiān)控產(chǎn)品用戶的跳轉(zhuǎn)去向，貨物的外貿(mào)出口狀況，或類似新冠患者流動(dòng)城區(qū)、地點(diǎn)的表示。

?；鶊D的數(shù)值總量通常是不變的，會(huì)包含起點(diǎn)和終點(diǎn)的維度，而維度的長(zhǎng)短即代表其包含的數(shù)值總量（權(quán)重）。

它有非常多的變種，只有借助特定的圖表生成工具，才能繪制出曲率、比例精準(zhǔn)的流線。

 

6.2 關(guān)系類圖表

關(guān)系圖是大家比較不會(huì)陌生的圖表類型，它在各類工具性軟件、網(wǎng)站中都有應(yīng)用。比如天眼查股東關(guān)系圖、Wolai 頁(yè)面關(guān)系圖等。

 

關(guān)系圖中包含了大量的節(jié)點(diǎn)，節(jié)點(diǎn)之間還有對(duì)應(yīng)的關(guān)系，同構(gòu)線段進(jìn)行鏈接。常見的關(guān)系圖有兩種類型，一種是力導(dǎo)圖，一種是弧長(zhǎng)鏈接圖。

力導(dǎo)圖這名字也很難理解，源于力學(xué)中粒子存在某種互斥又具有引力的規(guī)律，粒子在兩種力的作用下從初期的隨機(jī)性會(huì)不斷位移趨于平衡有序（讀書多的好處？）。

 

力導(dǎo)圖通常有一個(gè)起點(diǎn)，然后去關(guān)聯(lián)后續(xù)的其它節(jié)點(diǎn)，如果節(jié)點(diǎn)之間還有關(guān)聯(lián)，它也可以對(duì)這些節(jié)點(diǎn)的關(guān)聯(lián)做出連接。它不僅表現(xiàn)一對(duì)多的關(guān)系，也表現(xiàn)多對(duì)多的關(guān)系，甚至在極其復(fù)雜的關(guān)系網(wǎng)中可以呈現(xiàn)成一定的強(qiáng)關(guān)聯(lián) ”聚類“ 信息。

而弧長(zhǎng)鏈接圖，則是通過弧線對(duì)節(jié)點(diǎn)進(jìn)行關(guān)聯(lián)的圖表，它既可以是環(huán)形，也可以是水平橫線的展示。

 

6.3 和弦圖

和弦圖是環(huán)形關(guān)系圖和?；鶊D結(jié)合的圖表，它表示結(jié)構(gòu)之間的依賴關(guān)系和強(qiáng)度，鏈接的線段不再是粗細(xì)統(tǒng)一的而是具有粗細(xì)比例的標(biāo)識(shí)，且維度之間的長(zhǎng)度也有表示。

 

這類圖表常用于社會(huì)學(xué)、生物學(xué)等學(xué)科的研究統(tǒng)計(jì)結(jié)果繪制上。如果單純?yōu)g覽，看上去非常復(fù)雜，所以正確的使用形式是可以進(jìn)行指定維度的展示和隱藏的。

 

6.4 韋恩圖

韋恩圖，它是所有學(xué) UI、UX 設(shè)計(jì)的老朋友了，一個(gè)用圖形層疊相交來表示它們關(guān)系的圖形。RGB、CMYK 的色彩介紹里韋恩圖的身影必不可少。

 

韋恩圖的使用相比起來沒有那么嚴(yán)格的數(shù)學(xué)運(yùn)算，它只是一種關(guān)系表現(xiàn)的方法，可以對(duì)各種無(wú)法量化的對(duì)象進(jìn)行關(guān)系的陳述。比如，UX 設(shè)計(jì)師應(yīng)該具備的知識(shí)點(diǎn)……

 

下面是超人的電話亭團(tuán)隊(duì)持續(xù)整理收集到的可視化組件庫(kù)工具網(wǎng)站，以供參考：

 

原文地址：站酷

作者：酸梅干超人

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》萬(wàn)字干貨系列，爆肝的實(shí)用圖表詳解指南

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

截屏2021-05-13 上午11.41.03.png

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

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



評(píng)論(0) 瀏覽(1441)

設(shè)計(jì)師應(yīng)該懂的設(shè)計(jì)細(xì)節(jié)

seo達(dá)人



 

1. 界面中的設(shè)計(jì)細(xì)節(jié)

在用戶使用APP的第一直觀感受，便是我們所設(shè)計(jì)的ui界面，所以界面的信息閱讀的舒適感、顏色配色是否合理都是在第一時(shí)間直接的傳遞給用戶，我們?cè)诮缑孢@塊需要注意的設(shè)計(jì)細(xì)節(jié)：1.用戶的閱讀效率  2.視覺舒適度  3.產(chǎn)品品質(zhì)感。

 

1.10 用戶閱讀效率

在界面設(shè)計(jì)中，界面能否準(zhǔn)確的將信息傳達(dá)給用戶,讓用戶在使用產(chǎn)品的過程中對(duì)信息的接受比較快速，所以界面的信息呈現(xiàn)的清晰度是設(shè)計(jì)師必備的能力，也是基礎(chǔ)能力，我們通過細(xì)節(jié)處的把控，讓設(shè)計(jì)助力用戶對(duì)界面信息的理解，也許我們下的心思用戶可能不會(huì)注意，但是它確確實(shí)實(shí)起到了作用，關(guān)于提升用戶的閱讀效率，我們可以從以下幾方面去入手：1.視覺降噪  2.視覺聚焦  3.容器整合。

 

1.11 視覺降噪

要讓用戶能清晰的理解我們的產(chǎn)品的第一步是需要整理界面中信息，把干擾用戶的信息都要進(jìn)行處理，關(guān)于視覺降噪我們可以入手的細(xì)節(jié)有：1.弱化小面積色彩   2.減少次要對(duì)比  3.整合半透明  4.弱化分隔  5.元素圖形化。

 

（1）弱化小面積色彩

小面積的色彩我們?cè)谝曈X上會(huì)將他看作為點(diǎn)，當(dāng)點(diǎn)在界面中比較多的時(shí)候，會(huì)將用戶的視線分散，給用戶閱讀上造成不好體驗(yàn)，所以我們?cè)谠O(shè)計(jì)界面中的標(biāo)簽或者有圖標(biāo)的顏色的區(qū)分的時(shí)候，我們盡量要控制顏色的種類，不宜太多，另外如果帶顏色的小標(biāo)簽也會(huì)給用戶一種是按鈕的心理暗示，所以，我們?cè)谠O(shè)計(jì)中需要考慮到用戶的使用場(chǎng)景和表意。

 

（2）減少次要信息對(duì)比

在APP中會(huì)有很多復(fù)用的板塊以及功能相似的板塊，我們盡量需要讓他們?nèi)ケ３纸y(tǒng)一，比如像feed流這樣通用的樣式，只要有差不多的feed列表出現(xiàn)，我們需要在通用組件里去調(diào)用這個(gè)feed列表，其次是我們?cè)诿總€(gè)列表和卡片中有不同種類的信息字段，并不是每次出現(xiàn)新的信息我們都要在樣式上作出區(qū)分，我們需要盡量的衡量表意和層次，盡量讓字段文字能保持統(tǒng)一，從而提升閱讀的舒適感。

 

（3）整合半透明

一般的半透明浮層都是為了區(qū)分頁(yè)面的層級(jí)，例如在支付時(shí)候，彈窗的半透明的選項(xiàng)卡，這些在視覺的Z軸的層級(jí)都是最高的，優(yōu)點(diǎn)是可以強(qiáng)化浮層與底部的關(guān)聯(lián)性，缺點(diǎn)是會(huì)使得視覺上不夠整齊，所以當(dāng)功能層面關(guān)聯(lián)性不強(qiáng)的時(shí)候，我們盡量不要去使用半透明的設(shè)計(jì)形式，所以半透明的浮層通常會(huì)用戶一些輔助的流程和體量比較好的任務(wù)型頁(yè)面，這樣的會(huì)讓交互效率和層級(jí)都是比較清晰。

 

（4）弱化分隔

界面的設(shè)計(jì)都是以板塊去區(qū)分每個(gè)功能層級(jí)模塊的不一樣，所以合理的設(shè)計(jì)分隔的樣式對(duì)于設(shè)計(jì)師也是一種細(xì)節(jié)處的考慮。我們?cè)诜指畹闹匾獙蛹?jí)也是有區(qū)分的，分割層級(jí)最高的是卡片分割，其次是分割條，在其次就是分割線，而分割線也有種，一種是通欄的分割線，另外一種是不通欄的分割線，所以分割線的層級(jí)區(qū)分是通欄的高于不通欄的分割線，還有一種情況是通過間距（留白）來區(qū)分層級(jí)，一般是通過留白沒辦法去區(qū)分頁(yè)面層級(jí)的時(shí)候，我們才會(huì)考慮用分割線來區(qū)分。

 

①點(diǎn)線面的合理運(yùn)用

在APP界面中，也會(huì)有點(diǎn)線面的區(qū)別，一般文字我們會(huì)將它看為點(diǎn)，分割線是線，圖片我們會(huì)把它看為面，所以一般情況下，如果當(dāng)我們?cè)O(shè)計(jì)界面的時(shí)候，當(dāng)點(diǎn)太多的時(shí)候，我們需要用線來進(jìn)行整合，所以界面中點(diǎn)和點(diǎn)（文字和文字之間）直接是需要用線來分隔的，而圖片和圖片直接，我們通常用間距來表示，所以圖片和圖片直接一半不會(huì)使用分割線。

隨著APP的普及開來，我們用戶對(duì)信息分割處理的認(rèn)知已經(jīng)升級(jí)，現(xiàn)在的分割也是越來越弱，而當(dāng)一個(gè)列表有文字和頭像一起出現(xiàn)的時(shí)候，分割線往往也都在文字部分出現(xiàn)，因?yàn)轭^像是圖片，是一個(gè)面，文字是點(diǎn)，面是不需要線去分割的，而文字卻需要分割線去分割。

 

②狀態(tài)提升線需點(diǎn)到為止

我們現(xiàn)在的APP主要目的是傳達(dá)內(nèi)容本身，所以為了讓用戶更專注于內(nèi)容的閱讀，所以一般界面中的狀態(tài)的提升線的意義是為了讓用戶去了解當(dāng)前所處界面的層級(jí)和狀態(tài)。以前在做設(shè)計(jì)的時(shí)候，會(huì)習(xí)慣將提升線做的比較長(zhǎng)，但是隨著設(shè)計(jì)趨勢(shì)的發(fā)展，人們習(xí)慣了短而精致的提升線，所以，過長(zhǎng)或者過粗的提示線在當(dāng)前的設(shè)計(jì)審美下會(huì)成為影響界面美感的因素了。

 

（5）元素形狀化

我們?cè)贏PP中看到一個(gè)陌生的形狀的時(shí)候，這個(gè)會(huì)在界面中形成視覺噪音，“人們?cè)谟^察熟悉的視覺形象時(shí)，會(huì)把不完整的局部形象“作一個(gè)整體的形象來感知，這種知覺上的結(jié)束，稱之為閉合。如果局部形象過于陌生或者簡(jiǎn)略，則不會(huì)產(chǎn)生整體閉合聯(lián)想，這時(shí)大腦會(huì)產(chǎn)生負(fù)面體驗(yàn)”。

所以我們?cè)诮缑嬷械脑財(cái)[放通常會(huì)將它們擺放成人們生活中比較常見的形狀，便于用戶去聯(lián)想，來提升用戶的閱讀效率。

 

1.12 視覺聚焦

在用戶打開APP去瀏覽的時(shí)候，在沒有干擾的情況下，用戶是根據(jù)自己的喜好去瀏覽頁(yè)面，用戶對(duì)板塊內(nèi)容的偏好決定用戶注意力的所在之處，更多的時(shí)候，我們想要用戶根據(jù)我們?cè)O(shè)定的瀏覽路徑去瀏覽，我們就需要在設(shè)計(jì)的時(shí)候給用戶埋下“陷阱”。關(guān)于設(shè)計(jì)聚焦，我們可以從以下三個(gè)角度上入手：一.焦點(diǎn)放大  ，  二. 瀏覽形式的選擇   三. 對(duì)齊基線。

 

焦點(diǎn)放大

在提升用戶閱讀效率的設(shè)計(jì)中，比較重要的就是主次要分明，將需要讓用戶了解到重要信息需要放大，讓用戶的視覺動(dòng)線有落地點(diǎn)，所以關(guān)于設(shè)計(jì)焦點(diǎn)放大我們可以從以下三個(gè)角度上入手：①視覺中的“席克海曼定律”、②增加視覺上的對(duì)比。

 

① 視覺中的“席克海曼定律”

我們都知道席克定律吧！給予用戶的選擇越多，用戶做出決定的時(shí)間就越長(zhǎng)。在APP設(shè)計(jì)和頁(yè)面設(shè)計(jì)的時(shí)候也是一樣的，當(dāng)用戶進(jìn)入頁(yè)面后，我們的視覺動(dòng)線的排列也可以基于席克定律，放大想要讓用戶關(guān)注的信息點(diǎn)，其他輔助信息可以稍微小點(diǎn)，讓用戶可以直觀的區(qū)分去主次的層級(jí)，讓用戶帶有預(yù)期性的閱讀，可以提升用戶的瀏覽效率。

 

自從ios11之后，大字重的風(fēng)格就大行其道了，越來越多的產(chǎn)品開始采用大字重的對(duì)比風(fēng)格，目的也是為了讓用戶明確自己瀏覽的頁(yè)面，然后帶著目標(biāo)在繼續(xù)往下去看。那為什么大字重的風(fēng)格會(huì)流行呢？

  • 增加視覺上的對(duì)比

對(duì)比是設(shè)計(jì)美感的來源。我們?cè)谝郧白鯱i設(shè)計(jì)的時(shí)候，最小的字號(hào)大多數(shù)都還是11pt,最大的字重是20pt左右，而現(xiàn)在我們?cè)诳纯?，由于蘋果ios大字重風(fēng)格的影響，標(biāo)題的引入大字重風(fēng)格后，最大的字號(hào)提升至32pt，有的設(shè)置于到了34pt，由于最大的字號(hào)上限提升了。我們?cè)?2-34pt之間可以選擇的字號(hào)就比較多了，很明顯這種強(qiáng)烈而又低頻率的對(duì)比從視覺上就更具層次了。

 

  • 增加字號(hào)的選擇范圍

以前頁(yè)面導(dǎo)航文字較小時(shí)，板塊標(biāo)題以及列表標(biāo)題也都相對(duì)較小，假如導(dǎo)航文字大小為18pt,那么如果頁(yè)面內(nèi)的板塊標(biāo)題為20pt,就會(huì)顯得比較突兀，因?yàn)橐曈X上會(huì)感覺壓不住，層級(jí)較為混亂?，F(xiàn)在由于最大的字號(hào)變大了，我們可以選用的字號(hào)就變多了，方便了視覺層級(jí)上的對(duì)比。

 

② 瀏覽形式的選擇

UI界面的排版往往需要考慮到不同字段的重要層級(jí)而去采用不同的設(shè)計(jì)樣式。由于我們很多APP的品類的不同，每個(gè)產(chǎn)品都很難遵循常規(guī)頁(yè)面布局來設(shè)計(jì)。盡管沒有一種布局方法適合所有目的，但回到設(shè)計(jì)的基礎(chǔ)上并理解諸如“ F”和“ Z”之類的視覺模式可以幫助簡(jiǎn)化產(chǎn)品布局，并使產(chǎn)品能夠更有效地與用戶進(jìn)行交流。

  • F型瀏覽模式

F模式是一種簡(jiǎn)單的布局，旨在根據(jù)根深蒂固的人類行為引導(dǎo)用戶的眼睛查看您希望他們看到的信息。在這種情況下，F(xiàn)模式植根于我們的閱讀方式“從左至右”。

F模式就是指，用戶通常會(huì)沿著左側(cè)重直瀏覽而下，先去尋找 文章中每個(gè)段落開頭的興趣點(diǎn)，這時(shí)，如果用戶發(fā)現(xiàn)了他喜 歡的，他就會(huì)從這里開始水平線方向的閱讀。

 

  • Z型瀏覽模式

Z型瀏覽模式模式相似，因?yàn)樗裱脩舻难劬淖蟮接胰缓笤傧蛳碌囊苿?dòng)，但是當(dāng)使用較少的內(nèi)容時(shí)，路徑會(huì)簡(jiǎn)化為鋸齒形。下面的示例演示了大型設(shè)計(jì)元素（而不是文本塊）如何將用戶從左上方的徽標(biāo)引導(dǎo)到右上方的CTA，然后向下引導(dǎo)至下一個(gè)主要設(shè)計(jì)元素。

Z模式的瀏覽模式在于用戶首先關(guān)注的頁(yè)頭水平方向上的內(nèi) 容。當(dāng)視線抵達(dá)底部時(shí)，又遵循著從左到右的習(xí)慣模式，重復(fù)再水平掃視頁(yè)尾的最底部的內(nèi)容。

 

③ 文字的對(duì)齊基線

通常我們?cè)谠O(shè)計(jì)界面的時(shí)候，在文本需要對(duì)齊的時(shí)候，不需要強(qiáng)制性的與列表最邊緣對(duì)齊，并且當(dāng)文字出現(xiàn)兩列時(shí)，需要設(shè)計(jì)師主動(dòng)控制第二列視覺起點(diǎn)，保證符合視覺對(duì)齊基線。而在有輸入的表單的標(biāo)題的長(zhǎng)短不一致的時(shí)候，我們也是歸檔一端的對(duì)其基線，來穩(wěn)定基本的視覺舒服感。

 

1.13 容器收納

我們每個(gè)APP都會(huì)承載大量文字、圖片、視頻的各種操作控件，UI設(shè)計(jì)師的職責(zé)便是將他們按照美的形式來排版設(shè)計(jì)和歸類，其中歸類信息承擔(dān)的責(zé)任便是用戶對(duì)信息的理解和吸收，所以，這是我們不可忽視的一步。關(guān)于容器收納我們可以通過以下設(shè)計(jì)策略進(jìn)行：一.接近性原則歸納法，二.卡片既是容器，三.同屬性板塊整合。

 

（1）接近性原則歸納法

單個(gè)視覺元素之間無(wú)限接近，視覺上會(huì)形成一個(gè)較大的整體。距離近的單個(gè)視覺元素會(huì)溶為一個(gè)整體，而單個(gè)視覺元素的個(gè)性會(huì)減弱。如果相關(guān)的元素不夠緊湊，用戶瀏覽時(shí)就需要根據(jù)內(nèi)容進(jìn)行主觀上的判斷，降低閱讀效率，所以在設(shè)計(jì)的時(shí)候，我們盡量要將相關(guān)聯(lián)的元素靠的比較近，不相關(guān)的元素隔的比較遠(yuǎn)。

 

（2）卡片既是容器

當(dāng)產(chǎn)品中的圖標(biāo)字段和文字和字段比較多的時(shí)候，我們想要將他們有序的區(qū)別開，且不會(huì)很凌亂，這個(gè)時(shí)候我們可以考慮用卡片的來分隔頁(yè)面，這樣板塊與板塊直接會(huì)更加清晰明朗，而且列表中的信息比較多的時(shí)候，通常是采用卡片的形式進(jìn)行劃分，讓界面看起來更為整潔。

 

（3）同屬性板塊整合

我們用戶在同一個(gè)板塊看到的相關(guān)的元素和列表的時(shí)候，我們潛意識(shí)會(huì)將他們認(rèn)為他們是有關(guān)聯(lián)的，所以，為了避免用戶出現(xiàn)認(rèn)知斷層，我們盡量要將界面中不相關(guān)的元素不要放在一起，不然會(huì)影響用戶在使用過程中對(duì)自己信息的判斷。

 

1.20 視覺舒適度

視覺的舒適度是用戶對(duì)于產(chǎn)品比較直觀的感覺，它在于我們?cè)O(shè)計(jì)對(duì)產(chǎn)品顏色的把控、圖標(biāo)的細(xì)節(jié)以及其他細(xì)節(jié)方面的處理。關(guān)于視覺舒適度我們可以通過以下設(shè)計(jì)策略進(jìn)行：1.色彩的協(xié)調(diào)感，2.圖形體現(xiàn)細(xì)節(jié)。

 

1.21 色彩的協(xié)調(diào)感

我們產(chǎn)品中一般所包含的顏色的種類會(huì)比較多，而協(xié)調(diào)感是人類生理上和心理安全感的需求，也是受眾時(shí)間持久閱讀的色彩保障。關(guān)于色彩的協(xié)調(diào)感我們可以通過以下設(shè)計(jì)策略進(jìn)行：一.品牌色的延續(xù)，二.讓配色有規(guī)律，三.紋理解決配色的極端場(chǎng)景。

 

（1）品牌色的延展

我們生活比較常見的黑色，除了將眼睛閉上，一般不會(huì)有純黑的顏色，純黑色會(huì)給與人一種比較悶的感受，比如黑色的夜空不會(huì)是純黑色的，黑色的電腦顯示器也不是純黑色的，顯示器上我們?nèi)g覽的字體，也不會(huì)給我們純黑色的的。

所以我們?cè)诋a(chǎn)品中對(duì)黑色的文字的處理也不應(yīng)該去選用純黑的，純黑的色彩的選用會(huì)給我們用戶的視覺來一次斷層的處理，感覺這個(gè)顏色會(huì)比較突兀，所以，我們較早之前為了避免純黑色文字的出現(xiàn)會(huì)采用“高級(jí)灰”的文字色彩，即在純黑色上偏灰色的色相，隨著用戶體驗(yàn)設(shè)計(jì)的水漲船高，我們現(xiàn)在為了避免文字出現(xiàn)比較純的黑色一般會(huì)黑色上往自己產(chǎn)品的主色調(diào)去偏移，這樣既不會(huì)出現(xiàn)純黑色的不好體驗(yàn)，也可以對(duì)自家產(chǎn)品色的一個(gè)顏色，提升對(duì)品牌的感知度。

 

（2）讓配色有規(guī)律

一般在我們APP產(chǎn)品的配色中，讓人感覺配色不協(xié)調(diào)因素主要有兩個(gè)，一個(gè)是色彩選用的過多和過雜，會(huì)讓人感覺顏色的突然出現(xiàn)會(huì)比較突兀，第二個(gè)是頁(yè)面中的色彩缺少關(guān)聯(lián)性，讓用戶看起來哪個(gè)顏色都是新出現(xiàn)的，使用起碼比較容易在當(dāng)前的產(chǎn)品跳出，感覺進(jìn)入了一個(gè)全新的產(chǎn)品。

所以我們?cè)诋a(chǎn)品中是色彩的選用，盡量定好一組常用的色彩，然后便可以在界面中的圖標(biāo)、插畫中去復(fù)用，提升色彩在產(chǎn)品中的規(guī)律，讓色彩在頁(yè)面中能有呼應(yīng)。

 

（3）紋理解決配色的極端場(chǎng)景

我們?cè)谌粘５脑O(shè)計(jì)工作的交接過程中，經(jīng)常會(huì)聽到領(lǐng)導(dǎo)這樣的說，“這個(gè)背景配色太單薄了，不夠豐滿”這樣的言語(yǔ)，這個(gè)時(shí)候我們可以采用點(diǎn)綴的紋理來裝飾，通過使用同類色來增加點(diǎn)綴的元素從而讓視覺上更加協(xié)調(diào)，來增加產(chǎn)品的通透感，使得我們產(chǎn)品的搭配呈現(xiàn)上會(huì)更加的立體。

 

1.22 圖形體現(xiàn)細(xì)節(jié)

圖形體現(xiàn)細(xì)節(jié)不是說我這個(gè)圖形在畫的時(shí)間有多長(zhǎng)，而是你的思考點(diǎn)需要深，有些地方是別人想不到的，圖形體現(xiàn)細(xì)節(jié)我們思考的點(diǎn)是將圖標(biāo)的設(shè)計(jì)流程化，標(biāo)準(zhǔn)化。

 

圖標(biāo)設(shè)計(jì)的流程化

圖標(biāo)在我們?cè)诮缑嬷姓加信e足輕重的地位，它花費(fèi)的時(shí)間是僅次于我們運(yùn)營(yíng)插畫的設(shè)計(jì)，所以我們需要花心思做思考，去設(shè)計(jì)，圖標(biāo)的風(fēng)格也會(huì)帶領(lǐng)界面的風(fēng)格的走向，所以，圖標(biāo)的設(shè)計(jì)也是ui設(shè)計(jì)師的基本功。

圖標(biāo)設(shè)計(jì)有科學(xué)的流程，每一次產(chǎn)品中圖標(biāo)的迭代改變圖標(biāo)都是經(jīng)過千錘百煉的，在設(shè)計(jì)圖標(biāo)的過程中，有一套科學(xué)的流程，我們?cè)谔岚钢v訴的過程中，會(huì)更加人信服。

  • 窮舉關(guān)鍵詞

我們?cè)谠O(shè)計(jì)圖標(biāo)的過程中，一個(gè)圖標(biāo)可以代表很多意思，我們?cè)趺纯梢哉页鲎詈线m當(dāng)前產(chǎn)品表意的關(guān)鍵詞呢？這個(gè)時(shí)候我們就需要用到窮舉關(guān)鍵詞，將能想到的關(guān)鍵詞都列出來，例如我們需要去設(shè)計(jì)一款租房類的APP，里面有一個(gè)“意見反饋”的圖標(biāo)，這個(gè)圖標(biāo)比較常見，能傳遞這種意思的圖標(biāo)也有很多，我們需要用窮舉關(guān)鍵詞將他們都列出來。

  • 圖標(biāo)設(shè)計(jì)

當(dāng)窮舉完圖標(biāo)表意后，需要列出最佳的詞語(yǔ)，我們需要根據(jù)用戶在生活中比較常見的圖片或者類似的圖標(biāo)進(jìn)行造型提取，然后就是完善顏色和細(xì)節(jié)，再其次就是要保證其他圖標(biāo)在設(shè)計(jì)中也需要有相同的元素，保證圖標(biāo)的一致性。

  • 用戶測(cè)試

用戶測(cè)試是需要確定在我們?cè)O(shè)計(jì)的圖標(biāo)中去選擇一個(gè)最能傳遞當(dāng)前表意的圖標(biāo)，可以是自己公司其他部門的人，，例如程序員或者銷售部，也可以邀請(qǐng)用戶來參加，需要說出選擇當(dāng)前圖標(biāo)的理由。

  • 規(guī)范制定

當(dāng)圖標(biāo)確定后，我們應(yīng)該對(duì)圖標(biāo)的細(xì)節(jié)部分進(jìn)行復(fù)盤，保證以后新增或者迭代過程中，有一個(gè)可以衡量的標(biāo)尺，方便團(tuán)隊(duì)協(xié)助和復(fù)盤設(shè)計(jì)過程。

 

1.30 產(chǎn)品品質(zhì)感

在設(shè)計(jì)中，如何可以做到產(chǎn)品品質(zhì)感高級(jí)呢？這是我們經(jīng)常會(huì)遇到的問題，其實(shí)高級(jí)感可以理解為一種可以傳遞感染力的設(shè)計(jì)，那么哪些界面中設(shè)計(jì)元素會(huì)影響人呢？例如我們的色彩等。另一種高級(jí)感就是Dieter Rams(迪特?拉姆斯)在“設(shè)計(jì)十戒”中提到的“好的設(shè)計(jì)是盡可能是無(wú)設(shè)計(jì)”，我們可以理解為，在設(shè)計(jì)中我們需要克制，讓產(chǎn)品統(tǒng)一且簡(jiǎn)潔。所以我們產(chǎn)品的品質(zhì)感可以從以下兩個(gè)策略入手：一.界面中的相同與區(qū)分  ，二.品牌融入

 

1.31 界面中的相同與區(qū)分

（1）區(qū)分相似和相同

我們?cè)谏钪校行┗ㄙM(fèi)了很長(zhǎng)時(shí)間和精力去做的品牌在人們心智中早已建立了，例如，茅臺(tái)的包裝早已經(jīng)深入人心，但是最近有一個(gè)奶茶品牌山寨了茅臺(tái)的包裝，就會(huì)讓人感覺很廉價(jià)，像是山寨的。

在我們的產(chǎn)品設(shè)計(jì)中，如果兩個(gè)功能不一樣，但是意思相近，那我們所需要用到的圖標(biāo)要絕對(duì)的不一樣，避免用戶誤解功能，用戶在心理上可能會(huì)把它們歸類為一個(gè)功能，如果我們要區(qū)分開，要很明確的區(qū)分，不會(huì)有18和17字號(hào)的對(duì)比。

 

（2）定義產(chǎn)品的角色性格

一般工作時(shí)間比較長(zhǎng)的同學(xué)，都會(huì)有這樣的困惑，每天就是原型美化工，找不到自己的價(jià)值，特別是原型和競(jìng)品的差不多的時(shí)候，那我們?cè)趺慈?chuàng)新呢？我們可以思考這樣的一個(gè)問題，我們?nèi)粘Ｉ钪械淖雷樱陜?nèi)顯示器或者汽車，也都是有固定的樣式，沒人會(huì)把汽車的輪子做成方的，方向盤做成三角形的，所以，我們做的APP都是用戶日常生活中的工具，是沒必要做顛覆性的創(chuàng)新的 ，在某些細(xì)節(jié)做創(chuàng)新，例如寶馬的車燈，凱迪拉克的鉆石切割工藝。

所以，我們UI設(shè)計(jì)的創(chuàng)新，絕對(duì)也不是在功能上做出差異化，也是需要在細(xì)節(jié)處體現(xiàn)我們的品牌，怎么設(shè)計(jì)讓我們的產(chǎn)品在打開后看起來和別人不一樣，但是又不會(huì)影響使用，這個(gè)時(shí)候，我們要把產(chǎn)品都可以看作是一個(gè)有意識(shí)的生命，我們將產(chǎn)品想象成服務(wù)者，為我們的用戶去服務(wù)，產(chǎn)品有自己獨(dú)立的性格，行為動(dòng)作，我們將這些代入到產(chǎn)品的每一個(gè)細(xì)節(jié)中。

例如我們常用的美團(tuán)外賣，我們想要去定義它的設(shè)計(jì)風(fēng)格，首先要用性格孵化模型去定義產(chǎn)品的性格，我們要通過我們用戶的主要目標(biāo)用戶群去定義產(chǎn)品的性格，將它想象成一個(gè)具體的角色，然后具體落地成一個(gè)可以代表產(chǎn)品的ip形象，我們產(chǎn)品的設(shè)計(jì)、文案都應(yīng)符合它的定義。

 

1.32 品牌的延展

除了產(chǎn)品的性格外，我們的產(chǎn)品都基本會(huì)有自己的產(chǎn)品線形象或者產(chǎn)品的LOGO，我們?cè)O(shè)計(jì)師可以做的便是放大產(chǎn)品LOGO的記憶點(diǎn)，然后在產(chǎn)品的每個(gè)角落中去體驗(yàn)，這樣也可以極大的提升產(chǎn)品的品質(zhì)感。

比如，我們的京東的機(jī)械狗隨著產(chǎn)品的迭代，慢慢的變胖了，我們可以發(fā)現(xiàn)，除了京東的吉祥物發(fā)生了變化之外，京東的圖標(biāo)也是慢慢的變得比較圓潤(rùn)且通透，仿佛也是在呼應(yīng)著產(chǎn)品的變化，京東吉祥物狗的微笑也是被提煉到產(chǎn)品的每一個(gè)細(xì)節(jié)中，這種彷佛產(chǎn)品陪伴著用戶在成長(zhǎng)的變化，也是一種潤(rùn)物細(xì)無(wú)聲的品質(zhì)感。

 

1.33 口語(yǔ)化文案

我們可以將我們產(chǎn)品中的提示文案可以想象成產(chǎn)品的ip形象在對(duì)用戶講話，在融入產(chǎn)品形象的性格因素，賦予了產(chǎn)品的生命力，同時(shí)，體驗(yàn)層也可以極大提升品質(zhì)感。

 

2. 交互中的細(xì)節(jié)

一個(gè)成功的產(chǎn)品，除了需要有好看的外部，實(shí)用的細(xì)節(jié)也是比較重要的，一個(gè)產(chǎn)品的交互決定了這個(gè)產(chǎn)品在使用過程中的流暢度，交互中的細(xì)節(jié)便是我們今天要說的微交互，一個(gè)好的微交互在使用過程中，可以給用戶留下深刻的印象，我們作為一個(gè)體驗(yàn)設(shè)計(jì)師，在設(shè)計(jì)方案的時(shí)候，不僅需要考慮視覺層面的舒適度，也需要考慮到交互層面使用的流暢性和信息的傳遞。

 

2.10 微交互的起源

計(jì)算機(jī)科學(xué)家拉里·特斯勒（Larry Tesler）在為施樂Xerox電腦的文字處理軟件Gypsy設(shè)計(jì)程序時(shí)，突發(fā)奇想，給軟件Gypsy加入了鼠標(biāo)操作和GUI圖形界面，這樣便大大的方便了Gypsy作為文字處理軟件的實(shí)用性與便捷性，于是在不斷體驗(yàn)與嘗試的過程中，于是拉里·特斯勒在改版的時(shí)候，給Gypsy加入了復(fù)制、粘貼功能鍵。這些概念隨后成為了文本編輯與計(jì)算機(jī)操作系統(tǒng)用戶界面的基石之一。

拉里·特斯勒其實(shí)當(dāng)初設(shè)計(jì)復(fù)制和粘貼的思路便是較少用戶操作的阻力，讓用戶在使用過程中不會(huì)被其他的事物所打斷，往后的數(shù)十年，拉里都為了這個(gè)目標(biāo)在奮斗，所以“復(fù)制”和“粘貼”便是精心設(shè)計(jì)過的微交互，沒有任何提示和阻力，一氣呵成的便捷交互。

交互設(shè)計(jì)以及人機(jī)交互在不斷的發(fā)展的歷史，實(shí)際上就是微交互的歷史。今天，我 們?cè)谧烂婧凸P記本電腦中、在移動(dòng)設(shè)備中習(xí)以為常的那些交互方式， 都曾引發(fā)過微交互設(shè)計(jì)的革命。無(wú)論是保存文檔，還是把文件拖放到 文件夾，還是連接到Wi-Fi網(wǎng)絡(luò)，都曾經(jīng)是精心設(shè)計(jì)的微交互。就連滾動(dòng)和打開多個(gè)窗口這么“基本的”交互方式，也都要經(jīng)過設(shè)計(jì)。技術(shù)在快速發(fā)展，不斷對(duì)微交互提出創(chuàng)新的要求。用戶習(xí)慣了拿來就 用，他們只會(huì)關(guān)注更好的交互方式，或者是那些由于技術(shù)發(fā)展催生的、或強(qiáng)制必須使用的微交互方式。

所以，好的微交互就像“Ctrl+C””Ctrl+v”那樣方便，會(huì)改善我們的使用體驗(yàn)。

 

2.20 移動(dòng)端微交互應(yīng)用場(chǎng)景的發(fā)展歷程

還是“復(fù)制”“粘貼”的例子，我們?cè)诠δ軝C(jī)的時(shí)代，我們想要把一段文字從一個(gè)軟件復(fù)制到另外一個(gè)軟件上，我們通常要在兩個(gè)軟件不停止的去切換，然后通過記憶內(nèi)容然后在來輸入，這樣的效率和精準(zhǔn)度都不是很高，而且要是需要復(fù)制的內(nèi)容過于龐大，想要完成便是一件讓人頭疼和心累的事情。

但是在進(jìn)入移動(dòng)智能機(jī)的時(shí)代，該功能的微交互便發(fā)生的天翻地覆的變化，第一步我們只需用長(zhǎng)按需要復(fù)制的文字，調(diào)出復(fù)制按鈕，第二步，選中我們需要復(fù)制的文本內(nèi)容，第三步便是切換到需要粘貼文字的APP，第四步，長(zhǎng)按調(diào)出粘貼按鈕，選擇粘貼文字，這與之前僅靠人肉記憶去輸入文字無(wú)論在效率上還是在準(zhǔn)確度上都有了不小的飛躍。

但是隨著技術(shù)的革新和從業(yè)者對(duì)于用戶體驗(yàn)的理解更加深刻，我們的操作追求更高效，更精準(zhǔn)，于是，該場(chǎng)景的交互又迎來的一次技術(shù)的變革，為了跟上時(shí)代的發(fā)展與用戶的訴求，在2016年10月19日的錘子手機(jī)發(fā)布會(huì)上，它推出了兩個(gè)功能：“Big Bang”和“One Step”?！癇ig Bang”的功能是長(zhǎng)按一段文字，可以根據(jù)算法自動(dòng)將文字的內(nèi)容分割獨(dú)立的詞語(yǔ)按鈕，只需點(diǎn)擊這些分割的按鈕就可以選擇想要的內(nèi)容。而“一步”可以直接將所選內(nèi)容拖動(dòng)到其他目標(biāo)應(yīng)用程序中，而無(wú)需在應(yīng)用程序之間切換。這兩個(gè)功能的結(jié)合，將之前需要四個(gè)步驟的功能簡(jiǎn)化為只有兩個(gè)步驟：第一步是按下選擇內(nèi)容；第二步，拖動(dòng)到目標(biāo)應(yīng)用程序。

在2021年6月8日凌晨，一年一度的蘋果WWDC大會(huì)在線上正式舉行，ios帶來了類似于“big bang”的功能：live text，也宣告著這個(gè)小小復(fù)制粘貼功能又完成了一次新的進(jìn)化，所以，無(wú)論是“Blive text”還是“Big Bang”，這兩個(gè)功能本質(zhì)其實(shí)就是微交互的進(jìn)化，只不過用了兩個(gè)不同的名字去代表而已。

 

2.30  交互與微交互的差異性

交互設(shè)計(jì)是串聯(lián)起產(chǎn)品各個(gè)頁(yè)面與功能反饋的基礎(chǔ)工作，如果缺少了某個(gè)交互環(huán)節(jié)可能會(huì)導(dǎo)致產(chǎn)品的BUG或其他負(fù)面情況，交互設(shè)計(jì)簡(jiǎn)單的來說就是滿足了產(chǎn)品的可用性。然而微交互的存在是為了給產(chǎn)品提升易用性與好用性，能起到錦上添花的作用。

 

2.40 微交互為什么這么重要？

自喬布斯在2010年06月08日發(fā)布了iPhone 4開始，我們的手機(jī)便宣告進(jìn)入了移動(dòng)智能機(jī)的時(shí)代，我們手機(jī)從僅僅可以打電話到可以上網(wǎng)玩游戲等等，所以為了搶占用戶的空閑時(shí)間，用戶體驗(yàn)就越來越被企業(yè)所看重，細(xì)微且無(wú)處不在的微交互也掌握著用戶體驗(yàn)的核心–細(xì)節(jié)。

在早期，我們一直會(huì)覺得安卓手機(jī)不如蘋果手機(jī)好用，會(huì)覺得比較卡斷和粗糙，其實(shí)就是因?yàn)樘O果的微交互會(huì)做的比較好，無(wú)論是在手機(jī)解鎖后的圖標(biāo)入場(chǎng)動(dòng)效還是點(diǎn)擊APP后的轉(zhuǎn)場(chǎng)效果，細(xì)膩舒適的微交互便一度成為蘋果公司的象征。

我們會(huì)發(fā)現(xiàn)，微交互幾乎無(wú)處不在，它可能是一次震動(dòng)提醒通知、播放下一首歌曲、登錄一次網(wǎng)站、在手機(jī)應(yīng)用里查詢一次天氣、微信回復(fù)一條信息、朋友圈點(diǎn)一次贊，如果這些交互設(shè)計(jì)過渡得順滑流暢又自然的話，幾乎很容易就會(huì)忽略他們的存在。雖然微交互近乎隱形，且很容易被人忽視，但它的重要性卻不容小覷。我們知道，移動(dòng)產(chǎn)品交互設(shè)計(jì)時(shí)考量的因素有兩個(gè)——功能和細(xì)節(jié)。功能吸引用戶使用產(chǎn)品，細(xì)節(jié)則是留住用戶成為回頭客。好的微交互，可以變無(wú)聊為有趣， 把沒有生命力的 app 變得生動(dòng)好玩，讓用戶感受到參與感和愉悅性，給用戶留下深刻的印象甚至上癮。偉大的產(chǎn)品和平庸的產(chǎn)品之間，區(qū)別就在于微交互。

 

3. 微交互的構(gòu)成

那怎樣才能做好“微交互”呢？丹·賽弗在他的著作《微交互：細(xì)節(jié)設(shè)計(jì)成就卓越產(chǎn)品》中，提出了好的微交互應(yīng)該有的結(jié)構(gòu)： 觸發(fā)器、規(guī)則、反饋、循環(huán)與模式 。我們一個(gè)個(gè)來講。

 

3.10 觸發(fā)器

觸發(fā)器，是啟動(dòng)微交互的“扳機(jī)”，是微交互啟動(dòng)的原點(diǎn)。要把識(shí)別“扳機(jī)”的成本，降得越低越好。就像沈騰在《羞羞的鐵拳》的那句經(jīng)典臺(tái)詞一樣“你過來呀”，簡(jiǎn)單且易于識(shí)別。

觸發(fā)器一般是分為兩種，就像平時(shí)打游戲一樣，有主動(dòng)技能和被動(dòng)技能，觸發(fā)器也被分為手動(dòng)觸發(fā)-即用戶主動(dòng)去觸發(fā)的，被動(dòng)觸發(fā)-即系統(tǒng)被動(dòng)觸發(fā)的。

 

3.11 手動(dòng)觸發(fā)器

手動(dòng)觸發(fā)器一般是用戶自主的去點(diǎn)擊，所以我們盡量要去保證觸發(fā)器的識(shí)別性，以及用戶在點(diǎn)擊前的一些心里預(yù)期的管控。

 

（1）降低識(shí)別成本

觸發(fā)器是微交互啟動(dòng)的第一步，在使用場(chǎng)景下必須要讓用戶能識(shí)別出來，用戶才能去點(diǎn)擊，所以觸發(fā)器要足夠清晰明顯。

比如，我們?cè)跒g覽和使用視頻屏網(wǎng)站或者視頻APP的時(shí)候，網(wǎng)頁(yè)或APP上的視頻中間都有個(gè)碩大的“播放”按鈕，比如，攝像機(jī)上的錄像鍵，總是最明顯的紅色；這些都是觸發(fā)器在提示你應(yīng)該點(diǎn)我，且外觀樣式都是采用通俗易懂的外觀樣式。

 

（2）對(duì)用戶的預(yù)期管控

我們一般去一家陌生的商店的時(shí)候，有的商店會(huì)玻璃門，比較高級(jí)的是自動(dòng)的，一般的店鋪都會(huì)是手動(dòng)的，這時(shí)候，一般的手動(dòng)的玻璃在門上都會(huì)貼上這個(gè)門是用推的形式開還是用拉的形式去關(guān)，這樣，我們便知道這樣去推或者拉門，是肯定可以把門打開的。

所以我們的觸發(fā)器需要讓用戶知道我點(diǎn)了之后會(huì)去到哪里，在形式的設(shè)計(jì)上需要明確，比如我們的微信或郵件APP的一角會(huì)顯示未讀郵件的數(shù)量，提示用戶在點(diǎn)擊后肯定有未讀的郵件或消息。

 

（3）考慮用戶的使用場(chǎng)景

在我們平時(shí)工作和娛樂中使用的鍵盤，我們鍵盤的按鍵的大小都是根據(jù)用戶在日常使用場(chǎng)景的頻次和設(shè)計(jì)大小的，例如，用戶的最多的空格鍵，是最大的，其次是回車鍵，使用的最少的開關(guān)和其他的控制鍵是最小的，這都是考慮到我們生活中的使用場(chǎng)景去設(shè)計(jì)的。

我們?cè)谠O(shè)計(jì)觸發(fā)器的時(shí)候也是一樣的，需要考慮到用戶在日常生活操作的具體情況來對(duì)觸發(fā)器的大小位置來進(jìn)行設(shè)計(jì)擺放，盡量讓用戶操作起來比較合適。

所以我們APP的按鈕會(huì)根據(jù)使用頻次來確定圖標(biāo)的大小的層級(jí)，方便用戶憑借第一反應(yīng)去點(diǎn)擊使用。

 

3.12 系統(tǒng)觸發(fā)器

系統(tǒng)觸發(fā)器的微交互一般需要用戶滿足了某些條件才會(huì)觸發(fā)的，例如我們平時(shí)在工作時(shí)間設(shè)置的起床鬧鐘，我們微信的朋友圈的更新提示，都是屬于系統(tǒng)觸發(fā)器，在滿足了某些系統(tǒng)設(shè)定的規(guī)則之后才會(huì)觸發(fā)的。

系統(tǒng)觸發(fā)器通常會(huì)讓用手動(dòng)設(shè)置何時(shí)觸發(fā)，觸發(fā)的頻率狀況，比如，我最近想學(xué)習(xí)，不想被朋友圈的信息影響，我可以選擇關(guān)閉朋友圈紅點(diǎn)提示，比如，我的鬧鐘設(shè)置的是周一到周五的工作時(shí)間去響鈴，我周三晚上加班太晚了，第二天中午十二點(diǎn)去上班，這個(gè)時(shí)候我就可以單獨(dú)的選擇周四這天鬧鐘不響。

 

3.20  規(guī)則

規(guī)則，用來規(guī)定微交互的過程，是整個(gè)微交互的核心。好的規(guī)則，應(yīng)該順乎人性、體貼方便。簡(jiǎn)單的來說，規(guī)則就是要按套路出牌，不然就會(huì)讓用戶感覺到出其不意。

 

（1）動(dòng)詞和名詞

一般的規(guī)則都是通過流程圖去演示，理解起來成本比較大，丹·賽弗 （Dan Saffer）提出一個(gè)理論：動(dòng)詞=用戶行為=交互目標(biāo)，名詞=操作對(duì)象=解決方案。

舉個(gè)例子我看在電視劇的時(shí)候，看到一些不太喜歡的地方，準(zhǔn)備去快進(jìn)，這個(gè)時(shí)候視頻的進(jìn)度條就是名詞，而用戶準(zhǔn)備快進(jìn)這個(gè)動(dòng)作便是動(dòng)詞。

所以在制定規(guī)則的時(shí)候，我們需要把復(fù)雜的流程給簡(jiǎn)化下來，弄清楚動(dòng)詞和名詞，我們便可以開始制定規(guī)則了。

 

（2）及時(shí)反饋當(dāng)前的狀態(tài)

好的微交互盡量在一個(gè)屏幕內(nèi)能去展示完成，不需要用戶去跳轉(zhuǎn)，這樣便是符合人性的微交互的設(shè)計(jì)，所以我們?cè)谠O(shè)計(jì)為微交互的流程的時(shí)候，盡量通過不同的狀態(tài)去給用戶傳遞消息，這樣可以使用戶感知界面的微交互不會(huì)太細(xì)碎。

 

（3）選項(xiàng)的防呆設(shè)計(jì)

規(guī)則，是微交互的核心。要仔細(xì)打磨，反復(fù)測(cè)試，每個(gè)環(huán)節(jié)的問題都需要考慮到。所以，我們?cè)谠O(shè)計(jì)微交互的時(shí)候，要更加注重細(xì)節(jié)上的體驗(yàn)，給予用戶操作上的舒適感。

 

① 聰明的默認(rèn)項(xiàng)和有限的選項(xiàng)

什么是“有限的選項(xiàng)”？簡(jiǎn)單的說，我們提供給用戶的選項(xiàng)越少，規(guī)則越少，用戶便更輕松理解這種交互操作。什么是“聰明的默認(rèn)項(xiàng)”呢？簡(jiǎn)單的說，當(dāng)給予用戶的選項(xiàng)比較少的時(shí)候，我們通常要給用戶一個(gè)默認(rèn)的選項(xiàng)，因?yàn)檫@個(gè)選項(xiàng)是用戶最有可能采取的下一個(gè)操作，因此有必要提示用戶。

簡(jiǎn)單的可以理解為，提供的選項(xiàng)越少，用戶越容易選擇。所以，在設(shè)計(jì)方案中：提供默認(rèn)選項(xiàng)>提供有限選項(xiàng)>提供多種選項(xiàng)。

 

  •  聰明的默認(rèn)項(xiàng)

默認(rèn)項(xiàng)和有限的選項(xiàng)是相互關(guān)聯(lián)的，正常的情況，在有限的選項(xiàng)中為用戶提供默認(rèn)項(xiàng)。而默認(rèn)項(xiàng)應(yīng)該是大部分用戶最常用的那個(gè)選項(xiàng)。

例如我們?cè)谕顺龌蛘邉h除的時(shí)候需要二次確認(rèn)，正常的會(huì)將確認(rèn)放在我們比較好操作的位置且會(huì)高亮放大展示，一般的電商平臺(tái)上的產(chǎn)品也是種類繁多，所以一般的電商平臺(tái)都會(huì)有分類區(qū)，將不同的商品歸類為不同默認(rèn)的選項(xiàng)，來供用戶選擇。

 

  •  有限的選項(xiàng)

有限的選項(xiàng)我們將他分為兩種，一種是只在需要的時(shí)候出現(xiàn)，另外一種是只提供需要的選項(xiàng)

    • 1）只在需要的時(shí)候出現(xiàn)

通常我們手機(jī)更新系統(tǒng)的按鈕，在沒有新的版本的時(shí)候發(fā)表，這個(gè)下載按鈕是不會(huì)出現(xiàn)的，只有當(dāng)我們手機(jī)廠家發(fā)布了新版本，下載的按鈕才會(huì)被解鎖，出現(xiàn)在界面中。

    • 2）只提供需要的選項(xiàng)

例如我們國(guó)內(nèi)的搜索百度，主界面上只有搜索框和百度一下，簡(jiǎn)潔明了，讓用戶一看就知道產(chǎn)品的主要功能，在例如，當(dāng)我們因?yàn)檐浖B接上車上的藍(lán)牙后，便進(jìn)去的車載的模式，因?yàn)殚_車的時(shí)候需要集中注意力去開車，所以車載模式下，很多不必要的功能便會(huì)被隱藏起來，只會(huì)提供必須的功能選項(xiàng)按鈕。

 

3.30 反饋

反饋，是向用戶說明規(guī)則。用戶并不知道你設(shè)計(jì)了什么規(guī)則，你要通過反饋友好地讓他知道。

Twitter在這點(diǎn)上，做得非常好，它在你輸入密碼時(shí)，在右邊用文字給你實(shí)時(shí)反饋，向你說明規(guī)則。

你輸入字?jǐn)?shù)太少，它顯示：需要6個(gè)以上字符；你輸入簡(jiǎn)單單詞，它顯示：密碼太好猜了；符合要求，它會(huì)按照密碼的強(qiáng)度，逐級(jí)顯示：弱，不錯(cuò)，強(qiáng)，很強(qiáng)！

 

3.31 解釋規(guī)則

反饋的作用之一就是向用戶去解釋我們所設(shè)置的規(guī)則，比如，我們工程師所設(shè)置的密碼的規(guī)則：要有6個(gè)以上字符，最好有大寫、小寫和數(shù)字。不要用生日、紀(jì)念日等。但用戶不知道啊，你要把規(guī)則，用反饋告訴他。

 

（1）反饋與用戶操作相關(guān)的信息

我們給與用戶的反饋要盡量與用戶本次的操作的相關(guān)，比如，用戶下載文件，我們需要給與用戶的反饋信息是，已開始下載，下載的進(jìn)度和下載完成，如果反饋再細(xì)節(jié)點(diǎn)，我們?cè)谙螺d的過程中可以提升用戶,”下載過程中會(huì)占用大量的帶寬，也許用影響您瀏覽網(wǎng)頁(yè)或者其他是上網(wǎng)操作”，反饋越是細(xì)節(jié)，用戶在體驗(yàn)微交互的過程中的負(fù)面情緒就越少。

 

（2）反饋信息簡(jiǎn)單清晰

微交互的反饋直觀也是比較重要的因素之一，可以讓用戶更好的理解規(guī)則，降低用戶的認(rèn)知成本，我們反饋給用戶的信息應(yīng)該都是準(zhǔn)確且重要的，例如我們的消息提醒，一般都是在有幾條就提醒幾條消息，消息的傳遞需要做到少即是多，信息越是重要，反饋的層級(jí)就要越高。

 

（3）反饋信息具有幽默感

我們?cè)谌粘Ｉ钪卸疾惶矚g直來直去的人，都喜歡和幽默、風(fēng)趣的人聊天，我們對(duì)用戶的反饋信息也是一樣，需要避免機(jī)械化的回復(fù)，回復(fù)需要讓用戶感覺我不是在和一臺(tái)冰冷的機(jī)器溝通，所以我們的信息反饋更多的是對(duì)氛圍的一種調(diào)節(jié)，比如，搜狗輸入法在檢測(cè)到網(wǎng)絡(luò)不佳的情況下，會(huì)用一種比較風(fēng)趣的口吻說“哎呀！汪仔去太空旅游了”

 

3.40 循環(huán)與模式

循環(huán)與模式，我們可以將它理解為是規(guī)則的分支。比如，鬧鐘是你每天接觸的第一個(gè)“微交互”了吧。眼睛還沒睜開，鬧鐘就響了。你重重拍下去，這時(shí)就啟動(dòng)了“再睡一會(huì)兒”這個(gè)分支的規(guī)則，也就是“模式”。如何設(shè)計(jì)這個(gè)分支，最合理呢？你可以讓它5分鐘后再響，如果再拍下去，就別叫醒他了。“你永遠(yuǎn)叫不醒一個(gè)裝睡的人”。這樣合理嗎？

也許不合理。更合理的做法是，拍第一次，5分鐘后再響，拍第二次，3分鐘后再響，拍第三次，縮短為1分鐘。然后就一直響。因?yàn)槟闩牡拇螖?shù)越多，越有可能因?yàn)樨澦`事。

循環(huán)與模式，就是一次性的或者循環(huán)的分支規(guī)則。

 

循環(huán)的分類

① 計(jì)數(shù)循環(huán)

即我們?cè)诮o用戶反饋前需要來回檢查規(guī)定好的次數(shù)，發(fā)現(xiàn)了問題在給用戶反饋，例如，我們的微信在網(wǎng)絡(luò)不穩(wěn)定的情況在，我們會(huì)看到微信的刷新的狀態(tài)會(huì)連續(xù)好幾次的出現(xiàn)刷新，然后才會(huì)給用戶網(wǎng)絡(luò)不好或者斷網(wǎng)的提示。

 

② 條件循環(huán)

即在限定的條件下的循環(huán)，比如，我們手機(jī)上的鬧鐘，它便是會(huì)在我們?cè)O(shè)定的時(shí)間內(nèi)會(huì)準(zhǔn)時(shí)的叫我們起床，如果當(dāng)天沒有設(shè)定鬧鐘或者手機(jī)沒電了，這個(gè)循環(huán)便不會(huì)執(zhí)行下去。

 

③ 集合循環(huán)

即循環(huán)的核對(duì)數(shù)值，然后停止，和前面的計(jì)數(shù)循環(huán)有相似之處，例如我們短信系統(tǒng)，會(huì)對(duì)收到的信息進(jìn)行系統(tǒng)的統(tǒng)計(jì)，然后發(fā)現(xiàn)有未讀的信息，便會(huì)在角標(biāo)上記錄數(shù)值1.

 

④ 無(wú)窮循環(huán)

即循環(huán)開始后，除非人為的干預(yù)讓它停止或者系統(tǒng)出問題的時(shí)候才會(huì)停止，否則會(huì)一直的循環(huán)下去，就像永動(dòng)機(jī)一樣。無(wú)窮循環(huán)分為兩種一種是開放循環(huán)，另外一種是封閉循環(huán)。

 

⑤ 開放循環(huán)和封閉循環(huán)

  • 1）開放循環(huán)

即在滿足條件后，執(zhí)行一次便結(jié)束，miui有個(gè)功能是可以設(shè)定手機(jī)每天早上什么開始，當(dāng)每次到達(dá)這個(gè)時(shí)間后，我們?cè)咎幱陉P(guān)機(jī)狀態(tài)的手機(jī)便會(huì)開機(jī)，這個(gè)指令執(zhí)行一次便不會(huì)在執(zhí)行了。

  • 2）封閉循環(huán)

即在滿足條件執(zhí)行后，可以進(jìn)行自行的內(nèi)部條件，比如，當(dāng)我們手機(jī)開機(jī)后，我們的手機(jī)屏幕的亮點(diǎn)會(huì)根據(jù)環(huán)境光而去調(diào)節(jié)。

  • 3）長(zhǎng)循環(huán)

長(zhǎng)循環(huán)可以理解為是一種陪伴用戶在使用我們產(chǎn)品時(shí)候記錄的一種微交互，使用的時(shí)間越長(zhǎng)，這種記錄就越多，比喻我們軟件的搜索記錄和瀏覽記錄便是一種長(zhǎng)循環(huán)。

  • 4）漸進(jìn)揭示或漸進(jìn)減少

長(zhǎng)循環(huán)的另外一種情況便是當(dāng)用戶長(zhǎng)期使用后對(duì)軟件越來越熟悉后，我們可以對(duì)有經(jīng)驗(yàn)的用戶開放更加進(jìn)階的玩法。

長(zhǎng)循環(huán)的另外一種情況便是漸進(jìn)較少，即當(dāng)我們的用戶熟悉了我們的軟件后，有些界面上的說明解釋的提示可以適當(dāng)?shù)娜サ?，?jiǎn)化界面，對(duì)用戶而言，干擾少了，也會(huì)提升使用的效率和交互的速度。

 

4. 微交互的三種層次

微交互在產(chǎn)品中的應(yīng)用場(chǎng)景也是比較豐富的，一般我們的用戶首先感受到是微交互給予用戶視覺層的體驗(yàn)，其次深入體驗(yàn)后是功能交互層的體驗(yàn)，最后體驗(yàn)的是一個(gè)比較好的容錯(cuò)性、比較好的交互后得到的心理上的愉悅，也就是情感層。

視覺層主要給予用戶感官層面的體驗(yàn)，交互層是給予使用上的效率體驗(yàn)，情感層主要是讓用戶體驗(yàn)后心理上有滿足或者愉快的感受。

但是這些層面又不是絕對(duì)獨(dú)立的，每個(gè)微交互設(shè)計(jì)都能在上述三個(gè)層面中找到單獨(dú)或者組合，比如雙擊屏幕的反饋，就滿足了視覺層面、功能層面與情感層面的三層優(yōu)化。

 

視覺層

在視覺層，考慮的轉(zhuǎn)場(chǎng)交互動(dòng)作是否足夠流暢，視覺是否美觀，反饋交互是否有創(chuàng)意，是否加深品牌印象。

 

交互層

通過控制轉(zhuǎn)場(chǎng)樣式，反饋樣式與反饋時(shí)間是否可提高交互效率，幫助用戶認(rèn)知，提升產(chǎn)品數(shù)據(jù)。

 

情感層

通過趣味幽默化的轉(zhuǎn)場(chǎng)與反饋動(dòng)畫是否可以降低產(chǎn)品的負(fù)面體驗(yàn)或者讓用戶產(chǎn)生愉悅感

 

4.10 微交互的應(yīng)用場(chǎng)景

微交互不是刻意的。而是被動(dòng)發(fā)現(xiàn)問題的優(yōu)化過程，當(dāng)靜態(tài)設(shè)計(jì)不能滿足的時(shí)候，可以考慮動(dòng)態(tài)的微交互設(shè)計(jì)，

所以，我們的微交互設(shè)計(jì)需要滿足用戶的操作體驗(yàn)，微交互是否幫產(chǎn)品的數(shù)據(jù)上有提升，設(shè)計(jì)角度上微交互是否有創(chuàng)意。

 

4.20 微交互視覺層的應(yīng)用

（1）相同的元素串聯(lián)轉(zhuǎn)場(chǎng)

推拉搖移是攝像中的術(shù)語(yǔ)。推指把鏡頭變焦到長(zhǎng)焦端，使景物更近，拉則是相反，把鏡頭變焦到廣角端，使景物顯得更遠(yuǎn)，搖指鏡頭跟隨運(yùn)動(dòng)的物體做同方向的轉(zhuǎn)動(dòng)，移指鏡頭跟隨動(dòng)體做平行移動(dòng)。這些手法都是經(jīng)歷過前人的無(wú)數(shù)字的實(shí)踐所總結(jié)出來的道理

我們?cè)谧鼋换マD(zhuǎn)場(chǎng)也是一樣，合適轉(zhuǎn)場(chǎng)是讓產(chǎn)品添姿增色的重要手段之一，在iOS默認(rèn)的轉(zhuǎn)場(chǎng)效果就是頁(yè)面從左往右去進(jìn)場(chǎng)，但是想要在讓你交互轉(zhuǎn)場(chǎng)看起來比較舒服，就需要在細(xì)節(jié)上下功夫，其中比較常見的手法就是界面中有相同的元素的時(shí)候，讓他們將他們串聯(lián)起來，這樣的交互轉(zhuǎn)場(chǎng)會(huì)讓你產(chǎn)品看起來更舒適。

 

（2）卡片推開周圍的元素

在安卓的Material Design提出Z軸的概念，在扁平化的界面上讓產(chǎn)品有三維的層次感（三維就是X軸（左右）、Y軸（上下）、Z軸（前后）組成的立體世界，而二維就是只有X和Y軸的平面世界。）我們知道手機(jī)的界面是一個(gè)平面和二維的空間，Material  Design通過一些二維的表現(xiàn)手段，比如投影和動(dòng)態(tài)效果，來構(gòu)建Z軸(前后)的概念。

在這個(gè)基礎(chǔ)上，我們可以在微交互上下功夫，例如當(dāng)界面中的卡片比較多的話，我們想讓產(chǎn)品的體驗(yàn)更具有層次感，我們可以通過卡片與周圍元素的變化產(chǎn)生關(guān)聯(lián)，營(yíng)造微交互中的產(chǎn)品層次感。

 

（3）專屬的元素動(dòng)畫樣式

我們?nèi)颂焐加泻闷嫘模瑢?duì)新鮮的事物都有嘗試的心理，我們?cè)谖⒔换サ脑O(shè)計(jì)中，也需要具有創(chuàng)新精神，讓用戶在視覺體驗(yàn)層有與其他產(chǎn)品有不一樣的觀感，這樣有利于樹立我們產(chǎn)品的品牌感知。

比如，我們?cè)邳c(diǎn)擊TAP時(shí)候的特殊的動(dòng)畫呈現(xiàn)，點(diǎn)贊時(shí)候獨(dú)特的反饋。都會(huì)在視覺層面給用戶留下比較深刻的印象。

 

（4）強(qiáng)化操作過程中的趣味性

下拉刷新是我們?cè)诋a(chǎn)品中日常會(huì)使用的交互，現(xiàn)在的產(chǎn)品一般都不會(huì)使用默認(rèn)的“菊花”的下拉刷新，一般會(huì)使用自己的IP或者更加有趣的MG動(dòng)畫，都是為了讓用戶在使用我們的產(chǎn)品時(shí)候在視覺層有新的體驗(yàn)，與其他的產(chǎn)品去拉來差距。

 

（5）循環(huán)動(dòng)畫強(qiáng)化產(chǎn)品氛圍

我們?cè)诰瓢?57的時(shí)候，酒吧都會(huì)有氣氛組，來讓新來的客人比較快的融入到酒吧愉快的氛圍中，或者一般商業(yè)區(qū)過節(jié)的時(shí)候，都會(huì)將街道和廣場(chǎng)裝扮與節(jié)日相符的燈光，都是為了讓客戶快速的融入到氣氛中。

我們?cè)诋a(chǎn)品中也是，有的功能想吸引用戶的目光，或者想讓用戶快速的融入到某節(jié)日到氛圍中，都是可以通過循環(huán)都動(dòng)畫去引導(dǎo)用戶。

 

4.30 微交互交互層的應(yīng)用

（1）交互行為主動(dòng)聯(lián)動(dòng)性

我們都知道，我們手機(jī)的屏幕空間是有限的，有時(shí)候的功能布局方面可能不是那么的合理，這個(gè)時(shí)候，我們的微交互就可以起作用了，比喻，我們手機(jī)上滑當(dāng)時(shí)候，就可以將某些用戶比較常用的功能常駐在屏幕上方，當(dāng)用戶想去操作的時(shí)候，不用在滑回去在去操作，在體驗(yàn)上減少了用戶的操作步驟，提升了用戶在產(chǎn)品用戶過程中的舒適感。

 

（2）合適的元素出現(xiàn)在適當(dāng)?shù)臅r(shí)機(jī)

我們經(jīng)歷過這樣的時(shí)候，當(dāng)陌生人來找我們做某些事情的時(shí)候，我們的第一反應(yīng)力都是比較抗拒的，但是熟人的話我們可能會(huì)因?yàn)楦鞣N原因不可以拒絕。

產(chǎn)品設(shè)計(jì)中也是一樣，如果我們想讓用戶去應(yīng)用商店去給我們的產(chǎn)品一個(gè)好評(píng)，肯定是不能一上來就給用戶引導(dǎo)去評(píng)價(jià)，這樣會(huì)極有可能會(huì)導(dǎo)致差評(píng)的，但是，我們可以利用用戶“啊哈時(shí)刻”去提升用戶的好評(píng)動(dòng)機(jī)，例如，當(dāng)用戶覺得某內(nèi)容不錯(cuò)的時(shí)候點(diǎn)贊了，收藏了，我們這個(gè)時(shí)候讓用戶去好評(píng)，這樣好評(píng)的幾率會(huì)大點(diǎn)，起碼不會(huì)引起用戶的逆反心理。

所以，當(dāng)我們想要用戶去為我們做某些事情的時(shí)候，一定需要找準(zhǔn)時(shí)機(jī)，結(jié)合微交互，提升用戶去完成某件事情的意愿，例如，當(dāng)用戶在瀏覽商品的時(shí)候，我們可以給用戶發(fā)放優(yōu)惠券，我們想讓用戶去分享我們的內(nèi)容的時(shí)候，可以在用戶在快看完的時(shí)候，出現(xiàn)分享按鈕，都是可以通過微交互去讓用戶幫我們?nèi)プ瞿承┦虑椋赃_(dá)我們想要的結(jié)果。

我們的知道豆瓣是一個(gè)社區(qū)內(nèi)的產(chǎn)品，它是希望用戶在豆瓣來發(fā)表自己的想法的，所以，當(dāng)用戶看到評(píng)論區(qū)的時(shí)候，它用將評(píng)論區(qū)給展開放大，吸引用戶的注意力，從而加大用戶互動(dòng)的意愿。

 

（3）進(jìn)場(chǎng)告知用戶隱藏的功能和操作

我們做設(shè)計(jì)的時(shí)候可能經(jīng)常會(huì)遇到一些無(wú)理的要求，例如，這個(gè)功能需要強(qiáng)化，但是又不能去干擾用戶，每次遇到這種需求，我們?cè)O(shè)計(jì)師往往都是比較痛苦的時(shí)候，例如當(dāng)用戶沒有開通會(huì)員的時(shí)候，我們想給用戶去展示會(huì)員的一些特權(quán)和首次開通的優(yōu)惠，但是，用戶要是沒有開通，我們是沒辦法很好的去展示的，這個(gè)時(shí)候，我們可以通過微交互，在進(jìn)場(chǎng)的時(shí)候，將隱藏的信息展開，然后過收起來，這樣用戶即看到信息，又不會(huì)影響接下來的操作。還有就是當(dāng)我們上新某些功能的時(shí)候，想讓用戶去快速的去了解這個(gè)功能，這個(gè)時(shí)候我們可以通過演示動(dòng)畫的微交互來讓用戶去快速的了解我們新功能怎么去操作。

 

（4）元素跟隨頁(yè)面的形態(tài)改變

我們的產(chǎn)品在操作的時(shí)候難免會(huì)出現(xiàn)各種狀態(tài)，為了讓每個(gè)狀態(tài)出現(xiàn)的時(shí)候都比較符合用戶的操作的習(xí)慣，這個(gè)時(shí)候我們需要考慮用戶的場(chǎng)景來改變頁(yè)面的布局，例如快手它的戰(zhàn)略是一個(gè)內(nèi)容分享的社區(qū)，它注重的是用戶與主播之間的溝通，所以，正常的軟件，當(dāng)視頻在播放的時(shí)候，完們想看評(píng)論，這個(gè)時(shí)候的步驟只能側(cè)中一個(gè)，但是，快手它考慮到用戶的體驗(yàn)，當(dāng)用戶在上滑的時(shí)候，為了不打斷用戶繼續(xù)觀看視頻，視頻內(nèi)容會(huì)慢慢變小，然后固定，這個(gè)時(shí)候用戶可以在看視頻的時(shí)候也可以查看評(píng)論，方便用戶與主播之間的溝通，強(qiáng)化了內(nèi)容社區(qū)的氛圍。

 

（5）照顧邊緣場(chǎng)景

一個(gè)產(chǎn)品它的交互是否比較好，我們看的是它是不是能滿足用戶大部分的使用的場(chǎng)景，所以，有的時(shí)候，當(dāng)靜態(tài)的交互無(wú)法去滿足用戶的一些比較特殊的場(chǎng)景的時(shí)候， 我們這個(gè)時(shí)候就可以考慮微交互的設(shè)計(jì)，讓產(chǎn)品的交互體驗(yàn)?zāi)芨采w的場(chǎng)景比較全面。

例如，當(dāng)我們?cè)谖⑿磐ㄓ嶄浵敫鶕?jù)用戶的首字母去查找人的時(shí)候，一般左邊的字母都會(huì)做的比較小，無(wú)法精準(zhǔn)的查看到我們現(xiàn)在看到哪個(gè)字母，所以，當(dāng)我們的手去點(diǎn)的時(shí)候，到了某個(gè)字母的時(shí)候會(huì)放大，比如，我們因?yàn)殚_會(huì)將手機(jī)調(diào)成靜音或者音量關(guān)了的時(shí)候，我們?nèi)ゲシ盼⑿诺恼Z(yǔ)音或者看視頻的時(shí)候，這個(gè)時(shí)候，APP會(huì)提升我們音量未開之類的，這都是考慮到極端的場(chǎng)景，讓用戶的體驗(yàn)更加順暢。

 

4.40 微交互情感層的應(yīng)用

（1）幽默拉近用戶

當(dāng)我們看到有趣的東西的時(shí)候總是想和身邊的人去分享我們的喜悅，這是人們比較底層的邏輯，我們的APP產(chǎn)品也是這樣的，當(dāng)我們想讓用戶持續(xù)去體驗(yàn)我們的產(chǎn)品或者想要用戶去主動(dòng)的分享我們的產(chǎn)品，那么，我們可以將產(chǎn)品做的有趣一點(diǎn)。

比如，轉(zhuǎn)轉(zhuǎn)在登陸的時(shí)候?yàn)榱宋脩舻淖⒁饬?，它?huì)在用戶登錄的時(shí)候做一個(gè)比較有趣的小動(dòng)畫，也消除用戶在多一步操作時(shí)候的負(fù)面的情緒。

 

（2）轉(zhuǎn)場(chǎng)加載占位符

我們?cè)谌粘５腁PP使用中，總會(huì)遇到像信號(hào)不好的情況，這個(gè)時(shí)候，我們心里是比較著急的，特別是比較緊急的情況，負(fù)面的情緒是比較大的，我們需要將這點(diǎn)考慮進(jìn)去，為了避免用戶在等待時(shí)候的焦慮感和負(fù)面的情況，我們一般會(huì)使用加載的占位符和加載的進(jìn)度條，讓用戶知道我們的軟件是在工作中，而且是在賣力的工作中，這樣，可以緩解用戶的負(fù)面情緒。

 

（3）產(chǎn)品的儀式感

對(duì)于我們來說，儀式感是很重要的，比如結(jié)婚紀(jì)念日要去慶祝一下，生日的時(shí)候一定要和朋友去high一下，這都是來自我們生活的中的儀式感。

儀式感在產(chǎn)品中也很重要，他可以提升我們用戶的幸福感，例如微信在給朋友發(fā)送生日快樂的時(shí)候，屏幕中會(huì)掉下蛋糕，在過年的時(shí)候發(fā)送新年快樂，屏幕中也會(huì)掉落紅包，微信將我們?nèi)粘Ｉ钪兴枰膬x式感搬到了產(chǎn)品中，通過微交互來提升我們?nèi)粘５男腋８小?

 

（4）3D touch判斷用戶的情緒

我們?nèi)硕际歉星閯?dòng)物，滿足人們的日常的情緒需求也是很不錯(cuò)的角度，例如facebook的點(diǎn)贊功能可以通過人點(diǎn)擊的力度大小去判斷人當(dāng)天的情緒，例如，點(diǎn)擊的力度越大，說明你的心情比較好，或者對(duì)那個(gè)觀點(diǎn)比較贊同，如果你點(diǎn)擊的比較輕，說明的你心情不怎么好。

 

5. 總結(jié)

隨著移動(dòng)互聯(lián)網(wǎng)慢慢進(jìn)入下半場(chǎng)，我們頭部同品類的產(chǎn)品的布局也是越來越相似，所以，很多細(xì)節(jié)處的地方就是我們?cè)O(shè)計(jì)所能發(fā)力的點(diǎn)，無(wú)論是產(chǎn)品視覺中還是產(chǎn)品交互中的細(xì)節(jié)，都是不可忽視的設(shè)計(jì)細(xì)節(jié)，它能提升產(chǎn)品的品質(zhì)和用戶體驗(yàn)。

其次，我們常說魔鬼在細(xì)節(jié)，但為什么不說天使在細(xì)節(jié)？因?yàn)榧?xì)節(jié)做得好，也許不能讓我們上天堂，但是細(xì)節(jié)做不好，足以讓我們下地獄。所以打磨細(xì)節(jié)是我們做為設(shè)計(jì)從業(yè)者不可繞過的一個(gè)環(huán)節(jié)。

 

原文地址：站酷

作者： Endings

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)師應(yīng)該懂的設(shè)計(jì)細(xì)節(jié)

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

截屏2021-05-13 上午11.41.03.png

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

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



評(píng)論(0) 瀏覽(2441)

標(biāo)簽欄設(shè)計(jì)有哪些不易察覺的「小細(xì)節(jié)」？

ui設(shè)計(jì)分享達(dá)人


Tab Bar 


Tab Bar「標(biāo)簽欄」一直是UI設(shè)計(jì)師值得學(xué)習(xí)和研究的內(nèi)容，因?yàn)楫?dāng)設(shè)計(jì)師在構(gòu)建一個(gè)新的應(yīng)用程序時(shí)，都可能需要搭建標(biāo)簽欄，建議設(shè)計(jì)師們根據(jù)實(shí)際情況去判斷是否使用。

流行常見的應(yīng)用程序，如Amazon、Spotify、YouTube、Pinterest、Twitter、Instagram、Snapchat，都在使用標(biāo)簽欄，但這并不意味著你的應(yīng)用程序、你的用戶是真的需要或真心喜歡。像計(jì)算器、日歷等應(yīng)用，就沒有涉及此功能。


為什么應(yīng)用程序會(huì)有標(biāo)簽欄？答案顯然是「易于使用」。加入標(biāo)簽欄可以幫助用戶更輕松地導(dǎo)航到頁(yè)面，不用再特意點(diǎn)開菜單，選擇想要瀏覽的頁(yè)面。帶有標(biāo)簽欄的應(yīng)用程序，通常會(huì)與多個(gè)頁(yè)面聯(lián)動(dòng)。而類似計(jì)算器這種工具性質(zhì)的程序，用戶可能會(huì)重復(fù)打開使用，所以其展示重點(diǎn)在主屏幕上，點(diǎn)擊后直接進(jìn)入功能頁(yè)面。


為什么標(biāo)簽欄不是菜單？有些應(yīng)用會(huì)使用菜單羅列頁(yè)面，雖然占用的屏幕空間更少（菜單圖標(biāo)），但缺點(diǎn)是用戶點(diǎn)擊菜單進(jìn)行多次跳轉(zhuǎn)。為了更好地使用，設(shè)計(jì)師發(fā)明了靠近拇指的酷炫標(biāo)簽欄， 方便用戶點(diǎn)擊，以獲得更好地導(dǎo)航和更輕松地沖浪體驗(yàn)。接下來我將為大家介紹幾個(gè)應(yīng)用標(biāo)簽欄時(shí)的小技巧：


01 展示最重要的目的地

標(biāo)簽欄應(yīng)只包含最有用的目的地，應(yīng)是被高度精簡(jiǎn)過的，避免變得混亂。許多應(yīng)用程序在其標(biāo)簽欄上添加了搜索屏幕，這有助于更好地導(dǎo)航內(nèi)容。結(jié)合自身程序，為用戶針對(duì)性地添加一些重要的功能，提升體驗(yàn)。

比如Spotify的標(biāo)簽欄，使用了音樂播放器中常出現(xiàn)的幾種功能：Home，主頁(yè)標(biāo)簽用于播放或可能收聽的內(nèi)容；Search，搜索標(biāo)簽用于檢索其他歌曲和播客；Library，庫(kù)標(biāo)簽用于播放列表中用戶喜歡和保存的歌曲。Premium則是結(jié)合了公司業(yè)務(wù)，幫助用戶輕松完成費(fèi)用支付。


02 把相似的內(nèi)容放在一起

體量大的應(yīng)用程序，它們更喜歡使用4-5個(gè)標(biāo)簽，不僅讓標(biāo)簽欄變得整潔，還能幫助用戶快速點(diǎn)擊。如果超過5個(gè)圖標(biāo)，用戶受拇指大小的影響會(huì)無(wú)法準(zhǔn)確地點(diǎn)擊。

Pinterest的標(biāo)簽欄雖然只有4個(gè)標(biāo)簽，但它在通知標(biāo)簽內(nèi)設(shè)計(jì)了置于頂部的標(biāo)簽——消息選項(xiàng)卡，最大程度的拓展了用戶在此標(biāo)簽內(nèi)的應(yīng)用。


03 如果需要，盡量使用標(biāo)簽

任何流行的應(yīng)用程序都在使用標(biāo)簽，因?yàn)樗鼈兦宄卣f明了當(dāng)用戶點(diǎn)擊特定標(biāo)簽時(shí)會(huì)做什么。

Youtube和宜家這兩款應(yīng)用復(fù)雜程度各不相同，宜家的內(nèi)容主要是家居家具，YouTube則是不同類型的視頻。YouTube使用的搜索標(biāo)簽，與其他程序相比，也更具自己的特色。

Pinterest的標(biāo)簽欄相對(duì)設(shè)計(jì)的專業(yè)一些，會(huì)將標(biāo)簽上的文字隱藏起來。當(dāng)用戶習(xí)慣使用后，標(biāo)簽上的內(nèi)容會(huì)隨之隱藏，我個(gè)人非常喜歡這種設(shè)計(jì)。不過，我建議大家根據(jù)自己的選擇，再去確定是否要這么做。


04 文本標(biāo)簽應(yīng)該簡(jiǎn)短

標(biāo)簽欄內(nèi)的標(biāo)簽應(yīng)簡(jiǎn)短與清晰，就像設(shè)計(jì)按鈕標(biāo)簽時(shí)一樣，請(qǐng)使用準(zhǔn)確的標(biāo)簽。TikTok的所有標(biāo)簽都是短標(biāo)簽，并且還加入了創(chuàng)建按鈕，如果你想吸引用戶的注意力，你也可以這樣做。


05 避免隱藏標(biāo)簽欄

避免對(duì)用戶隱藏標(biāo)簽欄，因?yàn)槠浒俗钪匾膶?dǎo)航功能。大多數(shù)的應(yīng)用程序都遵循了這條規(guī)則，除非有些是出于測(cè)試目的，會(huì)選擇隱藏。Pinterest的標(biāo)簽欄在滾動(dòng)瀏覽圖像時(shí)完全隱藏，我個(gè)人猜測(cè)，是希望用戶可以最大幅度的查看感興趣的圖像。


06 按順序排列標(biāo)簽

按順序排列標(biāo)簽非常有必要，每個(gè)應(yīng)用程序都會(huì)參照清晰度和可用性這兩個(gè)維度去設(shè)計(jì)。用戶喜歡看到排列好的東西，而標(biāo)簽欄就是其中之一，大型的應(yīng)用程序也基本上遵循類似的設(shè)計(jì)規(guī)則。

打開Pinterest會(huì)看到瀑布流形式的主頁(yè)面，重要的內(nèi)容都被呈現(xiàn)在了主頁(yè)上。Spotify、Youtube、Pinterst、TikTok等應(yīng)用程序都比較相似，將重要內(nèi)容放在了主頁(yè)上。個(gè)人建議大家可以參考，但最重要的是將內(nèi)容井井有條地呈現(xiàn)，并始終如一地遵循著設(shè)計(jì)規(guī)則。


07 傳達(dá)位置

標(biāo)簽欄幫助用戶輕松導(dǎo)航，如果用戶不知道自己的位置所在，也就無(wú)法進(jìn)行有效地瀏覽。比如Duolingo和Headspace的標(biāo)簽欄，就向用戶傳達(dá)了其所在的準(zhǔn)確位置。


08 從數(shù)據(jù)中學(xué)習(xí)并持續(xù)優(yōu)化

如果你想改進(jìn)應(yīng)用內(nèi)的標(biāo)簽欄設(shè)計(jì)，數(shù)據(jù)是關(guān)鍵點(diǎn)。你可以測(cè)試用戶最喜歡的、不使用的以及需要增加的標(biāo)簽分別是什么。

一款成功的應(yīng)用是需要持續(xù)迭代優(yōu)化的，就像靈感平臺(tái)Pinterest，雖然它不急于測(cè)試新事物，但卻與用戶建立了深深的羈絆，慢慢沉淀積累，再去提升應(yīng)用程序的用戶體驗(yàn)。


文章來源：站酷  作者：UX詞典

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

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

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



評(píng)論(0) 瀏覽(1262)

無(wú)障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)的區(qū)分

ui設(shè)計(jì)分享達(dá)人

無(wú)障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)的區(qū)分

無(wú)障礙設(shè)計(jì)（accessible design）指設(shè)計(jì)時(shí)必須考慮殘疾人，無(wú)論用戶身體是否有殘疾，（產(chǎn)品，場(chǎng)所和服務(wù)）都具備讓其自由使用的能力。

通用性設(shè)計(jì)（universal design）采用單一的解決方案滿足盡可能多的人群的需要。

包容性設(shè)計(jì)（inclusive design）是最廣義的、讓產(chǎn)品可以被不同用戶（包括不同身體能力、語(yǔ)言、文化、性別、年齡、性取向等）使用的追求。





無(wú)障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)似乎意思相近，在網(wǎng)絡(luò)上很難找到完全統(tǒng)一的說法，因而經(jīng)常被混淆。我試著找出它們之間的關(guān)系，從而對(duì)這3個(gè)設(shè)計(jì)理念進(jìn)行更好的理解與區(qū)分。

一、什么是無(wú)障礙設(shè)計(jì)（accessible design）

1.簡(jiǎn)介

無(wú)障礙設(shè)計(jì)是3個(gè)術(shù)語(yǔ)中最容易理解的術(shù)語(yǔ)，它指的是設(shè)計(jì)時(shí)必須考慮殘疾人，無(wú)論用戶身體是否有殘疾，（產(chǎn)品，場(chǎng)所和服務(wù)）都具備讓其自由使用的能力。比如法律規(guī)定所有的建筑物都必須方便輪椅進(jìn)出。

2.特點(diǎn)

（1）對(duì)象：殘疾人（也有一些觀點(diǎn)認(rèn)為是針對(duì)更大的人群）

（2）解決方法與目的：通過設(shè)計(jì)讓殘疾人能正常使用

3.缺點(diǎn)

然而有時(shí)這樣的設(shè)計(jì)是迫于無(wú)奈而為并缺乏人文關(guān)懷。在美國(guó)，很多時(shí)候，“無(wú)障礙設(shè)計(jì)”在設(shè)計(jì)界只不過代表《美國(guó)殘障人士法案》的最低要求，不少設(shè)計(jì)師把《ADA法案》視為約束，而非創(chuàng)造平等共融空間的機(jī)會(huì)。因此無(wú)障礙設(shè)計(jì)存在的問題可以分為以下幾點(diǎn)：

（1）缺少人文關(guān)懷，經(jīng)常將殘疾人專用的無(wú)障礙設(shè)施與健全人使用的設(shè)施分離設(shè)置，造成了使用時(shí)的隔離感；

（2）無(wú)障礙設(shè)計(jì)與其他設(shè)計(jì)產(chǎn)生沖突，例如在狹窄的人行道上鋪設(shè)行進(jìn)盲道可能造成輪椅使用的不便；

（3）一些設(shè)施或產(chǎn)品的應(yīng)用人群過窄。



如圖專為盲人設(shè)計(jì)的魔方，普通人很難使用。



二、什么是通用設(shè)計(jì)（universal design）

1.簡(jiǎn)介

通用設(shè)計(jì)最初的想法來源于建筑和室內(nèi)設(shè)計(jì)，是1997 年北卡羅來納州立大學(xué)通用設(shè)計(jì)中心對(duì)通用設(shè)計(jì)提出的一個(gè)定義，此定義一直沿用至今：“一種不需適應(yīng)或特別設(shè)計(jì)，而使主流產(chǎn)品和服務(wù)能為盡可能多的用戶所使用的設(shè)計(jì)方法和過程。”通用設(shè)計(jì)在生活中的應(yīng)用很多，比如視頻的字幕，就是為了聽力有障礙的人群設(shè)計(jì)的，而聽力正常的人也能夠在嘈雜的環(huán)境下通過字幕受益。

2.特點(diǎn)

（1）對(duì)象：通用設(shè)計(jì)是旨在為所有設(shè)計(jì)的，它超越了無(wú)障礙設(shè)計(jì)，除了考慮殘疾之外還考慮其他的因素，包括年齡、性別、種族、語(yǔ)言等。

（2）解決方法與目的：使用單一方案，解決盡可能多的人的需求

（3）重視設(shè)計(jì)的結(jié)果，而不是設(shè)計(jì)過程

3.缺點(diǎn)

因?yàn)槿耸菑?fù)雜多樣的，人身處的環(huán)境也是不斷變化的，采用單一的解決方案，是難以滿足所有人的需求的。通用設(shè)計(jì)旨在使用單一的方法為所有人解決問題，就不可避免的會(huì)遺漏一些人群。

如圖的設(shè)計(jì)用一種方式同時(shí)方便了乘坐輪椅和提行李的人，和一些腿腳不便的老人等。



三、什么是包容性設(shè)計(jì)（inclusive design）

1.簡(jiǎn)介

包容性設(shè)計(jì)有時(shí)被視為通用設(shè)計(jì)的同義詞，但是他們之間還是有明顯的區(qū)別的。包容性設(shè)計(jì)是指：“不限于界面和技術(shù)的設(shè)計(jì)過程。在這個(gè)過程中，產(chǎn)品、服務(wù)或環(huán)境會(huì)針對(duì)有特定需求的特定人群進(jìn)行優(yōu)化?！彼鼇碓从跀?shù)字產(chǎn)品設(shè)計(jì)，是對(duì)通用設(shè)計(jì)的進(jìn)一步發(fā)展。

微軟定義：我們的使命，是讓地球上的每個(gè)人獲得更多。設(shè)計(jì)的包容性開啟了用戶體驗(yàn)，反應(yīng)了人們?nèi)绾芜m應(yīng)周圍的環(huán)境

2.特點(diǎn)

（1）具有以人為本的特點(diǎn)，包容性設(shè)計(jì)認(rèn)為是環(huán)境“殘疾”，而非個(gè)體，并且切實(shí)的將所有人的需求擺在了最前面，而不是假定一個(gè)“平均值”或“規(guī)范”來限定其適用群體。

（2）給予選擇，以多種方式解決不同人群的問題，以避免邊緣化任何人。

（3）重視設(shè)計(jì)過程，而不是結(jié)果

3.缺點(diǎn)

（1）成本較高，在設(shè)計(jì)的所有階段考慮所有人需要花費(fèi)較長(zhǎng)的時(shí)間成本與資金

（2）可能會(huì)出現(xiàn)一定程度的冗余設(shè)計(jì)



如圖，比如支付寶的老年版設(shè)計(jì)，就是包容性設(shè)計(jì)的例子。用戶可以自由的選擇使用，方便了老年人的同時(shí)不影響普通人的使用。


與通用設(shè)計(jì)中的解決方案對(duì)比，這個(gè)樓梯考慮到了不同的腿部殘疾者，并做出了多樣性的設(shè)計(jì)。打球摔斷一條腿的年輕人可以扶著扶手走下臺(tái)階，而不是走輪椅的道路。



四、總結(jié)

無(wú)障礙設(shè)計(jì)、通用設(shè)計(jì)、包容性設(shè)計(jì)，每一個(gè)設(shè)計(jì)理念都是對(duì)前一個(gè)的補(bǔ)充與發(fā)展，都值得理解與學(xué)習(xí)，而其中包容性設(shè)計(jì)相對(duì)較優(yōu)，并更適合用于數(shù)字產(chǎn)品的設(shè)計(jì)。


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

文章來源：站酷  作者：o0WO0

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

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

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


評(píng)論(0) 瀏覽(2005)

運(yùn)營(yíng)活動(dòng)故事化設(shè)計(jì)如何實(shí)現(xiàn)？

資深UI設(shè)計(jì)者

編輯導(dǎo)語(yǔ)：如何讓運(yùn)營(yíng)活動(dòng)更富特點(diǎn)，在不引起用戶反感的情況下、讓用戶提升活動(dòng)參與度、進(jìn)而推動(dòng)有效增長(zhǎng)？故事化元素的添加也許可以在一定程度上豐富用戶運(yùn)營(yíng)活動(dòng)體驗(yàn)。本篇文章里，作者結(jié)合實(shí)際案例，就運(yùn)營(yíng)互動(dòng)如何增加故事化設(shè)計(jì)元素做了梳理，一起來看一下。

本文將圍繞運(yùn)營(yíng)活動(dòng)，講講如何通過在運(yùn)營(yíng)互動(dòng)玩法中嘗試添加故事化設(shè)計(jì)要素，以及設(shè)計(jì)過程中通過新興工具落地方案、與制造創(chuàng)新造梗、與社區(qū)進(jìn)行聯(lián)動(dòng)，為活動(dòng)提供新的增長(zhǎng)方向。

一、運(yùn)營(yíng)活動(dòng)故事化設(shè)計(jì)嘗試

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

騰訊動(dòng)漫發(fā)展至今，已是頭部的漫畫內(nèi)容綜合型平臺(tái)；經(jīng)過幾次體驗(yàn)上的轉(zhuǎn)型，已然解決用戶消費(fèi)場(chǎng)景的轉(zhuǎn)變（移動(dòng)端轉(zhuǎn)型）與如何找到更好的內(nèi)容（綜合平臺(tái)轉(zhuǎn)型）；完整且有效地促進(jìn)產(chǎn)品在初始期與發(fā)展期當(dāng)中用戶體驗(yàn)的提升。

面對(duì)接下來成熟期的增長(zhǎng)挑戰(zhàn)；現(xiàn)階段選擇精細(xì)化內(nèi)容運(yùn)營(yíng)的策略方向；更加高效發(fā)揮自身大IP內(nèi)容優(yōu)勢(shì)，轉(zhuǎn)化IP流量的核心價(jià)值。而運(yùn)營(yíng)活動(dòng)是其中最為關(guān)鍵且有效的手段。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

我們經(jīng)過長(zhǎng)期運(yùn)營(yíng)活動(dòng)的設(shè)計(jì)積累后，發(fā)現(xiàn)了現(xiàn)階段漫畫領(lǐng)域競(jìng)品與我們都存在的一些體驗(yàn)問題：比如像B站經(jīng)常運(yùn)用營(yíng)收向的活動(dòng)，而且次數(shù)反復(fù)，容易讓大部分用戶形成一種逆反心理，覺得老是在圈錢。

還有像快看漫畫喜歡發(fā)揮自身社區(qū)活躍的優(yōu)勢(shì)，運(yùn)用社區(qū)任務(wù)機(jī)制的活動(dòng)，但形式框架都比較通俗常見，多辦幾次容易讓用戶有疲勞感，數(shù)據(jù)效果的天花板也易可見。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

面對(duì)這樣的活動(dòng)體驗(yàn)問題，我們嘗試突破。使用活動(dòng)故事化為契機(jī)點(diǎn)，抓住數(shù)據(jù)增長(zhǎng)的機(jī)會(huì)點(diǎn)。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

講好一個(gè)故事前，我們要了解講給“誰(shuí)”聽？目標(biāo)用戶是誰(shuí)？

根據(jù)以往用戶調(diào)研總結(jié)，現(xiàn)平臺(tái)用戶畫像分為四種類型：題材型、消遣型、拓展型、成熟型。針對(duì)這些用戶運(yùn)營(yíng)策略上，選擇二八定律，希望通過20%成熟型用戶的目標(biāo)行為路徑提升80%的數(shù)據(jù)增長(zhǎng)。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

基于這樣的背景，交互會(huì)基于活動(dòng)玩法的特性與主流程體驗(yàn)，提煉出故事化的推導(dǎo)步驟。主要分為三個(gè)步驟：

第一，基于成熟用戶在活動(dòng)不同周期時(shí)候的互動(dòng)心理特點(diǎn)，挖掘可故事化的落腳點(diǎn)；針對(duì)落腳點(diǎn)的模塊與體驗(yàn)方式制定相對(duì)應(yīng)的故事化設(shè)計(jì)方案；

第二，在推動(dòng)整體玩法故事化的過程中；使用有效的創(chuàng)新方法與工具，保障整體體驗(yàn)方案能有效的落地實(shí)現(xiàn)；

第三，在整體故事化高潮節(jié)點(diǎn)或結(jié)尾處制造一些反轉(zhuǎn)的話題梗，引發(fā)用戶參與討論，增加活動(dòng)認(rèn)知的強(qiáng)度與參與黏性。

二、故事化設(shè)計(jì)的落腳點(diǎn)提煉

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

接下來我將以暑期泳裝大作戰(zhàn)這個(gè)活動(dòng)為例子，闡述一下具體設(shè)計(jì)內(nèi)容。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

首先根據(jù)活動(dòng)周期的不同的時(shí)間節(jié)點(diǎn)羅列出玩法可故事化的元素（例如：活動(dòng)沉淀期的答題互動(dòng)的空間代入感）與成熟型用戶的互動(dòng)心理（例如：營(yíng)造答題的緊張氣氛），再以與需求方共同確定活動(dòng)目標(biāo)（促進(jìn)平臺(tái)內(nèi)部活躍）為落腳點(diǎn)的標(biāo)準(zhǔn)。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

提煉出可優(yōu)化的設(shè)計(jì)錨點(diǎn)。通過尋找錨點(diǎn)的共性，進(jìn)一步系統(tǒng)化的制定優(yōu)化策略。人物魅力運(yùn)用在AVG游戲的體驗(yàn)空間里，可發(fā)展出完整的劇情互動(dòng)線，可制造名場(chǎng)面的創(chuàng)新反轉(zhuǎn)，促進(jìn)用戶活躍。

三、設(shè)計(jì)過程中的執(zhí)行小竅門

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

故事化應(yīng)用的場(chǎng)景

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

AVG游戲中最重要互動(dòng)體驗(yàn)表達(dá)就是游戲人物的表情與動(dòng)作，可傳達(dá)出題人的喜怒哀樂，更好地加強(qiáng)玩法的沉浸式感受與注意力聚焦。一個(gè)大型活動(dòng)有大量人物表達(dá)頁(yè)面，我們?nèi)绻贸Ｒ?guī)的AE制作動(dòng)效素材，成本大，面對(duì)的挑戰(zhàn)也很大。當(dāng)我們每每遇到困難就會(huì)想到使用一些創(chuàng)新工具，來提高設(shè)計(jì)動(dòng)效素材的生產(chǎn)效率。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

live2D (輔助批量生產(chǎn)的軟件工具）

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

live2D的界面

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

live2D應(yīng)用效果live2D是日本cybernoids公司出品一款通過扭曲像素位置營(yíng)造出偽3D空間感的二維動(dòng)畫軟件。整體效果可滿足細(xì)微的表情變化，最可貴的是可下載或定制模板來批量生產(chǎn)。例如：情緒中“喜”的表達(dá)模板可套用相對(duì)應(yīng)的素材頁(yè)面。當(dāng)然這種人工智能的骨骼定位邏輯會(huì)有小偏差，可通過手動(dòng)調(diào)整。

四、故事化設(shè)計(jì)中的創(chuàng)新造梗

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

情緒鋪墊的流程

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

交互反饋的遞進(jìn)關(guān)系通過故事劇情的推進(jìn)，用戶闖關(guān)達(dá)到高潮階段的時(shí)候，需要為反轉(zhuǎn)造梗進(jìn)行鋪墊。用戶通過交互操作與體驗(yàn)反饋，遞進(jìn)式把用戶情緒推動(dòng)到高潮，就像追劇直接到大結(jié)局的那種期待感。例如用戶酷炫的打斗招數(shù)伴隨著打BOSS逐漸減少血量所表現(xiàn)的虛弱視覺感，這種形成反差感，可引領(lǐng)用戶持續(xù)玩下來去的心理反射。

初探運(yùn)營(yíng)活動(dòng)故事化體驗(yàn)設(shè)計(jì)

高潮的分鏡頭用戶在通關(guān)后會(huì)有完整的造梗劇情過場(chǎng)。

首先通過一個(gè)關(guān)開門的蒙太奇的過場(chǎng)分鏡頭，增加儀式感。再次展露帶有面具的boss的互動(dòng)對(duì)白。

最后，面具掉落，露出用戶自身的頭像。轉(zhuǎn)至黑幕顯示一段意味深長(zhǎng)的文案——“與惡龍纏斗過久，自身亦成為惡龍；當(dāng)你凝視著深淵時(shí)，深淵也凝視著你”（尼采《善惡的彼岸》）。傳達(dá)一種少年漫畫的核心價(jià)值觀：你要戰(zhàn)勝自己的心魔，成為自己的英雄。

這種符合用戶內(nèi)容認(rèn)知的造梗，很容易形成情感共鳴，可以讓更多成熟型用戶形成活躍討論。

這次我們?cè)谶\(yùn)營(yíng)活動(dòng)設(shè)計(jì)上的故事化嘗試總結(jié)出一套行之有效的操作性方法：探索＞推動(dòng)＞造梗。為我們未來更好更精準(zhǔn)的設(shè)計(jì)活動(dòng)互動(dòng)玩法提供了有效的方向，未來規(guī)劃可在重點(diǎn)IP聯(lián)動(dòng)活動(dòng)以及節(jié)日的運(yùn)營(yíng)活動(dòng)進(jìn)行復(fù)用。

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

文章來源：人人都是產(chǎn)品經(jīng)理   作者：騰訊設(shè)計(jì)

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

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

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

評(píng)論(0) 瀏覽(1295)

2021-2022設(shè)計(jì)趨勢(shì)·社交APP篇

資深UI設(shè)計(jì)者

互聯(lián)網(wǎng)社交發(fā)展方向

先來看看技術(shù)發(fā)展和現(xiàn)階段人口結(jié)構(gòu)的變化對(duì)線上社交有什么影響。

1. 技術(shù)上：

2G 時(shí)代的社交實(shí)現(xiàn)了跨地域聊天，用戶可以在 QQ 里和天南地北的人聊天，強(qiáng)調(diào)在線狀態(tài)。QQ 號(hào)是用戶社交虛擬身份的 id，是用戶自我創(chuàng)造的線上人設(shè)。2G 時(shí)代的社交尋求更為方便的溝通方式。

3G 進(jìn)入了移動(dòng)社交，著名風(fēng)投公司合伙人約翰·杜爾提出 SoLoMo 概念（社交化、本地化、移動(dòng)化）。用戶可以基于位置進(jìn)行交友，比如附近的人；基于行為匹配，比如微信搖一搖。沒有在線狀態(tài)，可以隨時(shí)隨地的聯(lián)系，隨時(shí)在朋友圈獲取對(duì)方線下的生活狀態(tài)。

4G 時(shí)代，手機(jī)硬件、大數(shù)據(jù)和 AI 的發(fā)展，大大提升了匹配的效率，高效地建立潛在社交關(guān)系。不論是看臉社交還是靈魂匹配，都能在很短時(shí)間內(nèi)找到合適的人聊天。信息傳輸越來越快，溝通互動(dòng)的方式不斷革新，用戶從文字、圖片聊天進(jìn)而習(xí)慣于實(shí)時(shí)語(yǔ)音和視頻。

隨著 5G 到來，高帶寬互聯(lián)網(wǎng)、云、AR/VR/MR 的高速發(fā)展，視頻作為主要的信息和溝通載體變得日益普及，疫情讓在線溝通和協(xié)作越來越方便，更多的線下社交場(chǎng)景轉(zhuǎn)移到線上，線上社交的頻次大大增加的同時(shí)，副作用也開始呈現(xiàn)，社交隔離讓人們感到更孤獨(dú)，對(duì)云社交的需求愈發(fā)強(qiáng)烈。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2. 人口結(jié)構(gòu)變化：

獨(dú)生子女群體在 80 年代出現(xiàn)，但由于父母輩基本是有數(shù)量較多的親兄弟姐妹，因此第一代獨(dú)生子女的同輩中有較多的表兄弟姐妹或堂兄弟姐妹互為玩伴。而由第一代獨(dú)生子女繁衍出的第二代獨(dú)生子女，也就是現(xiàn)在的大部分 00 后，家庭規(guī)模越來越小，親屬同輩越來越少，加上人口流動(dòng)頻繁，少有的親屬同輩也較為疏遠(yuǎn)。

00 后這一階段的出生率跌至了最低點(diǎn)，平時(shí)家庭、學(xué)校二點(diǎn)一線的生活，繁重的課業(yè)負(fù)擔(dān)，原本在親屬同輩圈的社交就少，在學(xué)校的熟人同輩圈的社交也越來越少。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2018 年發(fā)布的《00 后來襲-騰訊 00 后研究報(bào)告》中說到，“75%的 00 后渴求有更多的時(shí)間跟同伴在一起”。00 后在現(xiàn)實(shí)生活中缺失的同輩圈社交，更有強(qiáng)烈的訴求去互聯(lián)網(wǎng)上尋找。他們有著更為復(fù)雜的社交需求，通過與同輩圈的互動(dòng)，建立同輩伙伴關(guān)系，從中獲得陪伴感、歸屬感和自我認(rèn)同，形成自我認(rèn)知。

回顧這幾年社交的變化，技術(shù)讓社交體驗(yàn)從“線上線下割裂”向“虛擬空間映射真實(shí)世界”發(fā)展，00 后的線上社交需求更加強(qiáng)烈，我們?nèi)绾谓庾x用戶、解讀人群，尋找他們的需求痛點(diǎn)。接下來，本文從自我展示、匹配連接、溝通互動(dòng)的社交體驗(yàn)路徑來探討社交的設(shè)計(jì)趨勢(shì)和特點(diǎn)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

更多樣化具象化的自我展示

最初的互聯(lián)網(wǎng)社交身份是簡(jiǎn)單的虛擬身份 ID：虛擬頭像、昵稱、個(gè)性簽名、QQ 秀，當(dāng)時(shí)的社交體驗(yàn)線上和線下完全割裂，用戶的自我展示強(qiáng)調(diào)純線上人設(shè)打造。隨著硬件設(shè)備和圖像技術(shù)發(fā)展，用戶慢慢豐富社交資產(chǎn)，用真實(shí)身份交友，高清美顏?zhàn)耘?、沙雕表情包和聲音名片，線上的自我展示與線下生活緊密聯(lián)系。而現(xiàn)在，更多人用虛擬形象代表自己，技術(shù)的進(jìn)步讓虛擬形象的展示更完美、更逼真。

1. 真實(shí)身份展示從單一趨向于全面

用戶在展示自我的時(shí)候往往需要填寫大量文字信息和傳輸多張精修過的照片，導(dǎo)致編輯成本高、瀏覽效率低。視頻化的普及讓用戶隨時(shí)隨地記錄自己，在這種沉浸式的自我展示中，身份信息傳達(dá)更加有效和真實(shí)，也進(jìn)一步放大用戶的自我炫耀感。

Feels 的個(gè)人資料由全屏照片、視頻、問答組成，用 story 的交互方式進(jìn)行瀏覽。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2. 從聲音名片到聲音形象，更加賦予了情感和靈魂

語(yǔ)音的優(yōu)點(diǎn)在于比文字傳輸效率高，一篇完整的文字自我介紹用語(yǔ)音三言兩語(yǔ)就說完了。而語(yǔ)音的缺點(diǎn)是無(wú)法在嘈雜的公共環(huán)境中使用，所以老年人最愛用語(yǔ)音，因?yàn)樗麄兯饺丝臻g較多。疫情讓人們大大減少了旅游和外出娛樂，享受個(gè)人空間的時(shí)間變多了，從而縮小了語(yǔ)音使用環(huán)境受限的缺點(diǎn)，放大了傳輸效率的優(yōu)點(diǎn)。在今年，出現(xiàn)大量語(yǔ)音房社交，語(yǔ)音從“蘿莉音”“正太音”的聲音社交名片變成展示個(gè)人形象的方式。

Clubhouse 帶來語(yǔ)音社交熱潮，F(xiàn)acebook、Twitter 也相繼上線語(yǔ)音房 hotline 和 Spaces，用戶可以找到一個(gè)感興趣的主題房進(jìn)行聊天或圍觀，那些通過短短幾分鐘發(fā)言就吸粉的高質(zhì)量用戶，通過聲音賦予了個(gè)人的情感和有趣的靈魂。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Reddit Talk

3. 從“我是誰(shuí)”到“我們的關(guān)系”

展示自我除了從展示者的角度來設(shè)計(jì)“如何更好的展示社交資產(chǎn)”外，也要從看的人的角度考慮“如何更好地了解他”。

ios15 從 spotlight 輸入聯(lián)系人的名字，對(duì)方個(gè)人信息會(huì)智能拉取你們相關(guān)聯(lián)的信息，包括最近的聊天、共享的位置和照片。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Snapchat 能根據(jù)生日、出生時(shí)間、地點(diǎn)生成個(gè)人星座運(yùn)勢(shì)和個(gè)性，還能和好友進(jìn)行星座合盤。通過個(gè)人資料之間的交互，強(qiáng)化雙方身份的情誼特點(diǎn)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

4. 虛擬和真實(shí)之間，越來越強(qiáng)調(diào)“真實(shí)”

虛擬形象的概念不新鮮了，2003 年 QQ 秀是虛擬形象的雛形，Y 世代網(wǎng)民根據(jù)自己的喜好拼出屬于自己的 QQ 秀形象，用于 QQ 聊天時(shí)的自我形象炫耀和情感表達(dá)。Z 世代逐漸成為互聯(lián)網(wǎng)的主力軍時(shí)，他們的個(gè)性習(xí)慣和獨(dú)特的表達(dá)方式讓虛擬形象在社交中的使用需求愈發(fā)強(qiáng)烈?！禯 世代圈層消費(fèi)大報(bào)告》提出 z 世代五大典型興趣圈層為：電競(jìng)、國(guó)風(fēng)、二次元、模玩手辦、硬核科技。Z 世代已經(jīng)從他們的興趣中建立了對(duì)虛擬形象的情感，興趣成為他們建立自我人設(shè)的重要手段，他們跳出固定人設(shè)，在不同興趣圈層展示多樣個(gè)性，使用特定沖浪語(yǔ)，以此獲得歸屬感和認(rèn)同感。

高新技術(shù)的發(fā)展讓虛擬形象變得越來越高質(zhì)量。蘋果的 Memoji、Snapchat 的 Bitmoji 和 Facebook 的 avatars 讓虛擬形象成為自己的化身，用于個(gè)人資料展示以及聊天表情包、合照、視頻互動(dòng)等場(chǎng)景。Snapchat 最新的資料設(shè)計(jì)中展示了 3DBitmoji。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

依靠面部捕捉、表情捕捉、動(dòng)作捕捉的技術(shù)，實(shí)現(xiàn)了真人與虛擬形象的動(dòng)態(tài)同步，降低了真人化虛擬形象的設(shè)置成本。在 SXSW2021 音樂節(jié)上，展示了 Facebook 新 avatar 系統(tǒng)推出的 VR 社交應(yīng)用 Horizon。人與人能通過虛擬形象進(jìn)行實(shí)時(shí)互動(dòng)，除了有自己逼真的形象外，還具備真實(shí)的眼神表情和肢體動(dòng)作，還會(huì)根據(jù)肢體動(dòng)作變化不同情緒。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

大數(shù)據(jù)和人工智能時(shí)代，融合了 AI 技術(shù)的虛擬形象也在近幾年層出不窮。與真人虛擬形象不同的是，它不受對(duì)方在線的限制，能隨時(shí)進(jìn)行實(shí)時(shí)互動(dòng)，來滿足用戶對(duì)陪伴和娛樂的需求。麥當(dāng)勞推出一位唱跳型愛豆的虛擬形象，她可以和小朋友進(jìn)行溝通互動(dòng)，一起跳舞，跟小朋友講故事，增加與消費(fèi)者之間玩伴、陪伴關(guān)系。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

麥當(dāng)勞虛擬偶像“開心姐姐”

用戶在社交網(wǎng)站分享動(dòng)態(tài)，維系自己的人設(shè)，獲得群體的存在感和認(rèn)同感。在未來，這些記錄和創(chuàng)作的內(nèi)容是否會(huì)形成自己的虛擬空間？每一個(gè)人不同的故事動(dòng)態(tài)與空間產(chǎn)生聯(lián)系，形成自己獨(dú)有的虛擬空間社交資產(chǎn)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

5. 社交人格從「完美人設(shè)」到「透明人設(shè)」

隨著好友列表數(shù)量增多，很多人開始逃離朋友圈，人們?cè)谂笥讶Φ娜嗽O(shè)經(jīng)營(yíng)也越來越謹(jǐn)小慎微，開始疲于“完美”人設(shè)的表達(dá)，社交產(chǎn)品開始減壓。正如越來越多的年輕服裝品牌進(jìn)行的「透明商品運(yùn)動(dòng)」，他們?cè)谄放菩麄鲿r(shí)，將商品從生產(chǎn)到制作的全過程透明化公開給消費(fèi)者。「透明人設(shè)」是反對(duì)當(dāng)今社交信息流充斥著的完美人設(shè)，鼓勵(lì)自我展示更加真實(shí)和未經(jīng)編輯。

Dispo 復(fù)古相機(jī)拍攝后需要 24 小時(shí)才出片，并且沒有任何美圖的編輯工具。傳達(dá)現(xiàn)實(shí)生活中不完美的時(shí)刻也是值得捕捉和分享的。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Poparazzi 能連續(xù)拍照變成 GIF 進(jìn)行分享，同樣也傳達(dá)未經(jīng)過編輯的更真實(shí)的自我展示。用戶用 emoji 進(jìn)行互動(dòng)，僅展示動(dòng)態(tài)收到的 emoji 表態(tài)數(shù)量。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

你是否會(huì)因?yàn)閯?dòng)態(tài)無(wú)人互動(dòng)而焦慮？是否會(huì)因?yàn)楹芫貌桓聞?dòng)態(tài)而失去展示的動(dòng)力，慢慢社恐？instagram 和 Facebook 允許用戶隱藏帖子的贊數(shù)，來減輕用戶的壓力和焦慮。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

更懂我的匹配

1. 匹配趨向于多元化

調(diào)查發(fā)現(xiàn)，現(xiàn)實(shí)中兩位互不相識(shí)的陌生人要花 50 小時(shí)，才可以在路上叫出對(duì)方名字，再投入 40 小時(shí)，才能蛻變?yōu)檎嬲挠亚??；ヂ?lián)網(wǎng)幫助用戶高效匹配，縮短認(rèn)識(shí)的時(shí)間，降低認(rèn)識(shí)的成本。

近幾年，用戶的喜好正在極速分裂和細(xì)化?！?0 后來襲-騰訊 00 后研究報(bào)告》表明 73%的 00 后會(huì)主動(dòng)地獲取資源來發(fā)展自己感興趣的領(lǐng)域。由于現(xiàn)實(shí)中同輩社交圈狹窄，他們需要在互聯(lián)網(wǎng)的社交陣地上尋找更垂類的興趣伙伴，比如云學(xué)習(xí)伙伴、游戲玩伴、coscp 等，線上社交在不斷垂直細(xì)分以便更快捷的連接同輩伙伴。

隨著傳輸速度的發(fā)展，匹配連接的體驗(yàn)具有更實(shí)時(shí)的交互和面對(duì)面的互動(dòng)體驗(yàn)。Distance Disco 是一款云蹦迪平臺(tái)，疫情期間，大家在各自房間里通過在線視頻就能開啟一場(chǎng)線上舞會(huì)，結(jié)識(shí)一起蹦迪的朋友。界面上的視覺元素和色塊會(huì)隨著音樂節(jié)奏變化，增強(qiáng)迪斯科的互動(dòng)氛圍。

視頻鏈接：https://v.qq.com/x/page/w32687gdpf8.html?start=46

Honk 匹配陌生人聊天的動(dòng)畫，傳達(dá)了穿越了人山人海，遇見了你的感覺。頭像出現(xiàn)時(shí)，出現(xiàn)招手動(dòng)畫，像是剛剛見面的人招手打招呼。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2. 匹配提升安全感和隱私保護(hù)

現(xiàn)實(shí)生活中我們都有意識(shí)地保護(hù)自己的隱私，而到了互聯(lián)網(wǎng)，卻容易放下戒心將自己的信息分享給他人，線上社交會(huì)放大陌生人有趣、友善的一面，卻也隱藏了人性的缺點(diǎn)。社交產(chǎn)品的在幫助用戶建立社交關(guān)系的同時(shí)，也要提升用戶隱私保護(hù)和社交安全的體驗(yàn)。

Instagram 帳戶注冊(cè)時(shí)，未滿 16 歲的未成年人默認(rèn)使用私人帳戶，僅粉絲才能查看其發(fā)布的信息，在平臺(tái)內(nèi)容分發(fā)和互動(dòng)上與成年人帳戶進(jìn)行隔離。當(dāng)用戶更改成公共帳戶時(shí)，會(huì)給到提示強(qiáng)調(diào)私人帳戶的好處。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Snapchat 推出“好友檢查”，用戶可以快捷私密地刪除不聯(lián)系的人，確保好友列表里仍是真正的朋友。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Tinder 的一項(xiàng)調(diào)查顯示，40%的人在 Tinder 中發(fā)現(xiàn)了前任，24%的人遇到了家人。為了保障用戶隱私，用戶可以上傳他們的聯(lián)系人名單以選擇不想在 app 中遇到哪些人，屏蔽所選的聯(lián)系人。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

更富有樂趣和臨場(chǎng)的溝通

在社交產(chǎn)品中，聊天是關(guān)鍵的一環(huán)，匹配到合適的用戶后，如何加強(qiáng)雙方情感連接和信任的紐帶讓用戶為關(guān)系而留？從書信到電報(bào)到電話到視頻通話，都是通過技術(shù)的發(fā)展獲得了更高效真實(shí)的溝通體驗(yàn)，線上溝通的用戶體驗(yàn)一直不斷還原線下的真實(shí)體驗(yàn)，疫情加速了多人在線視頻通話的發(fā)展，既讓人在溝通時(shí)保持社交距離，又讓人感覺對(duì)方近在遲尺。

1. 更臨場(chǎng)

相較于面對(duì)面溝通交流，線上的交流在聽覺、視覺、觸覺、情緒傳遞的體驗(yàn)上，決定了用戶社交臨場(chǎng)感的強(qiáng)弱。

Honk 用文字交流時(shí)，能看到對(duì)方一個(gè)字一個(gè)字實(shí)時(shí)的輸出，模擬真實(shí)的說話方式。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2021 年 Google I/O 大會(huì)的 3D 視頻聊天設(shè)備 Project Starline，利用多個(gè)高分辨率攝像機(jī)和深度傳感器在不同角度捕捉用戶，以 3D 的效果進(jìn)行人物呈現(xiàn)，營(yíng)造對(duì)方真的就在對(duì)面的裸眼 3D 感。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2021 年 F8 大會(huì)上，F(xiàn)acebook 提出用于 AR 視頻通話的 MultipeerAPI，更方便創(chuàng)作者制作 AR 特效，用于多用戶、多屏幕的共享 AR 體驗(yàn)。用戶在多人視頻通話時(shí)，視頻中會(huì)出現(xiàn)太空或篝火的 AR 特效，讓視頻者感受到大家都在同一個(gè)共享空間。還支持輕量級(jí)游戲，多位玩家屏幕由一根曲線貫穿，玩家用臉引導(dǎo)甜甜圈共同完成接力游戲。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2021 年 IOS15 的更新，F(xiàn)acetime 使用的空間音頻讓通話的聽感更加自然、逼真，仿佛在同一房間面對(duì)面聊天。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

面對(duì)疫情人們?cè)谏钪械纳缃欢Y儀都以非身體接觸式動(dòng)作替代，線上社交的頻次和密度大大增加，視頻通話在視、聽處理上越來越自然和逼真，在觸覺上也向著《頭號(hào)玩家》的男主角在虛擬空間中感受到的虛擬觸覺傳遞到現(xiàn)實(shí)中那樣在進(jìn)化。美國(guó)西北大學(xué)的研究中，一位媽媽與孩子視頻通話時(shí)，通過撫摸屏幕，能把來自媽媽的撫摸傳遞到孩子身上的“AR 皮膚”上。未來在虛擬社交中也能獲得真實(shí)的觸碰，加強(qiáng)情感的連接。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2. 更個(gè)性

個(gè)人展示是單向的，溝通交流是雙向的，雙方在不斷交換彼此之間的狀態(tài)和感受，從中獲得被了解和認(rèn)可。個(gè)性聊天氣泡、表情包、自定義聊天背景，幫用戶在溝通交流時(shí)展現(xiàn)自己獨(dú)一無(wú)二的個(gè)性。線上社交的用戶語(yǔ)言設(shè)計(jì)要打造個(gè)性化的社交氛圍，讓用戶的個(gè)性在溝通中被挖掘和展現(xiàn)。

MUZE 在聊天中可以自由擺放文字、貼圖、涂鴉，讓交流更個(gè)性化和自由。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Google I/O 大會(huì)推出的全新設(shè)計(jì)語(yǔ)言 Material You 中，系統(tǒng)會(huì)基于用戶選擇的壁紙進(jìn)行自由取色，并應(yīng)用到 UI 中。是否聊天的 UI 也能隨著聊天中的圖片，或是聊天發(fā)送的表情文字提取心情語(yǔ)義，進(jìn)行 UI 的變化，加強(qiáng)情緒的傳達(dá)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

3. 場(chǎng)景化

人和人的社交通常依附于不同的場(chǎng)景，群聊或好友分組就是將特定的社交關(guān)系進(jìn)行場(chǎng)景設(shè)定。比如“火鍋突擊隊(duì)”“老廢物樂園”“吃瓜小分隊(duì)”依附社交場(chǎng)景來進(jìn)行互動(dòng)，幫助用戶帶入社交氛圍。

咖啡館社交，通過構(gòu)建咖啡館場(chǎng)景，傳達(dá)和陌生人進(jìn)行一場(chǎng)閑聊的慢社交體驗(yàn)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

森遇

Facebook 的視頻通話，用煙花和禮帽的 AR 特效來構(gòu)建派對(duì)的社交場(chǎng)景。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

2021 年 WWDC 大會(huì)上，現(xiàn)場(chǎng)用不同的 Memoji 營(yíng)造了線上觀眾參與會(huì)議的場(chǎng)景。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

4. 感官刺激

2021 年 Google 的一份統(tǒng)計(jì)數(shù)據(jù)表明，用戶平均注意力時(shí)長(zhǎng)從 12s 下降到 9s，而 00 后的平均注意力僅 8s。面對(duì)這樣的用戶，需要讓他們?cè)诙虝r(shí)間內(nèi)獲得極大的感官刺激來延長(zhǎng)注意力，以及在溝通交流時(shí)有更極致的情緒表達(dá)。

Honk 可以同時(shí)發(fā)送大量的 emoji 表情。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

QQ 團(tuán)隊(duì)運(yùn)用 Lottie 技術(shù)推出每秒 60 幀超高幀率、動(dòng)效更細(xì)膩的小黃臉表情包。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

微信的表情包不僅帶來視覺上逼真的 3D 動(dòng)畫效果，屏幕上其他內(nèi)容也會(huì)隨之震動(dòng)，還有觸感上的沖擊。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

網(wǎng)絡(luò)表情包

5. 輕娛樂、游戲社交

《社交媒體趨勢(shì)報(bào)告》提到“和朋友保持聯(lián)系”一直被列為是使用社交媒體首要原因，但在 16-24 歲的用戶中，主要驅(qū)動(dòng)力變?yōu)椤皩ふ腋阈陀腥さ膬?nèi)容”。青少年通過線上社交彌補(bǔ)線下社交缺口，獲得同輩認(rèn)同，排解孤獨(dú)和學(xué)習(xí)壓力。“組隊(duì)開黑”“一起微光”“找長(zhǎng)期固聊固玩”，00 后們的社交需求更多放在娛樂、游戲化社交上。社交體驗(yàn)也從物理空間的連接轉(zhuǎn)變到精神空間的連接。

用戶在 Housparty 進(jìn)行視頻聊天時(shí)，如果感到無(wú)聊，可以玩一場(chǎng)輕松的游戲，游戲過程中可以通過視頻看到對(duì)方的狀態(tài)。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Snapchat 正推出一種叫 Connected Lenses 的新型增強(qiáng)現(xiàn)實(shí)鏡頭，它可以讓不在同一個(gè)物理空間的用戶一起進(jìn)行 AR 游戲，比如共同組建樂高模型。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

IOS15 中 Facetime 加入 Shareplay 功能，可以與朋友共享屏幕，一起線上追劇、聽音樂、玩游戲。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

Tinder 在今年推出第二季 Swipe Night 活動(dòng)，用戶通過觀看每周一集的互動(dòng)故事，向左或向右滑為故事中的角色做決定，每一集結(jié)束后會(huì)匹配到在故事中做出類似選擇的用戶，并可以繼續(xù)相關(guān)話題的聊天。

騰訊出品！2021-2022設(shè)計(jì)趨勢(shì)報(bào)告：社交APP篇

結(jié)尾

科技重塑了我們的生活。線上社交讓我們?nèi)粘贤ǜ鼮榉奖悖沧屛覀冚p松維系現(xiàn)實(shí)中的社交關(guān)系，越來越多的人依靠它構(gòu)建新的虛擬關(guān)系，互聯(lián)網(wǎng)帶來溝通便利的同時(shí)，也減少了人與人面對(duì)面交流的機(jī)會(huì)。

美國(guó)傳播學(xué)家艾伯特·梅拉比曾給出一個(gè)公式：信息溝通傳遞=55%視覺+38%聲音+7%語(yǔ)義。大意是人們?cè)诂F(xiàn)實(shí)生活中進(jìn)行面對(duì)面溝通交流時(shí)，7%是語(yǔ)言上的內(nèi)容，剩下的是面部表情、肢體動(dòng)作、目光接觸、語(yǔ)速語(yǔ)調(diào)等非語(yǔ)言內(nèi)容的交流。隨著技術(shù)的進(jìn)步，社交不斷在補(bǔ)充非語(yǔ)言內(nèi)容交流的缺失。在自我展示中，無(wú)論是視頻化、聲音形象、富有表情和肢體動(dòng)作的虛擬形象，還是溝通場(chǎng)景中越來越臨場(chǎng)的體驗(yàn)和充滿感官刺激的表情符號(hào)，線上社交的趨勢(shì)都在不斷映射線下社交的體驗(yàn)。


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

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

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

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

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


評(píng)論(0) 瀏覽(1957)

設(shè)計(jì)師高效工作的利器——思維導(dǎo)圖到底應(yīng)該怎么用？

seo達(dá)人

思維導(dǎo)圖，英文名叫 The Mind Map，是一種用來開展、記錄發(fā)散性思維的圖形工具。可以說是目前職業(yè)辦公中使用最廣泛最基礎(chǔ)的圖形工具，無(wú)論是做故事大綱、頭腦風(fēng)暴、任務(wù)拆解，都會(huì)進(jìn)行應(yīng)用。

 

通常，思維導(dǎo)圖會(huì)有一個(gè)到兩個(gè)中心主題，然后中心會(huì)擴(kuò)展出不同的子節(jié)點(diǎn)，并使用連線進(jìn)行關(guān)聯(lián)。每個(gè)子節(jié)點(diǎn)，都可以繼續(xù)建立更下級(jí)的節(jié)點(diǎn)，依次類推。

通過這種方法，我們可以建立出比較結(jié)構(gòu)化的信息層級(jí)，中心主題是宏觀內(nèi)核，越往下級(jí)拓展的，就是越細(xì)節(jié)的信息。

而隨著思維導(dǎo)圖軟件的發(fā)展和完善，除中心主題、連線、節(jié)點(diǎn)外，我們還可以在這個(gè)圖形中添加關(guān)聯(lián)、備注、圖標(biāo)、待辦、圖片和附件等內(nèi)容。創(chuàng)建思維導(dǎo)圖的工具在今天隨手可得，無(wú)論是桌面端還是網(wǎng)頁(yè)端，想要?jiǎng)?chuàng)建思維導(dǎo)圖，從下方選擇一個(gè)即可。

 

思維導(dǎo)圖存在的價(jià)值，并不僅僅是我們要做一個(gè)方便別人理解的架構(gòu)圖形，而是通過它本身包含的結(jié)構(gòu)層級(jí)屬性，來幫助我們梳理自己的思路、想法、靈感。比如你要搞清楚進(jìn)階設(shè)計(jì)師應(yīng)該具備哪些能力，如何進(jìn)行學(xué)習(xí)，那就可以通過思考，查找資料，以樹狀圖的形式記錄和整理。

 

它最大的價(jià)值，就是幫助我們?cè)诶L制的過程規(guī)范我們的思維形式，能針對(duì)不同節(jié)點(diǎn)實(shí)現(xiàn)聚焦和深入探索與思考。而不讓想法特別離散一會(huì)兒插畫，一會(huì)兒體驗(yàn)，過一會(huì)兒又是平面四要素般毫無(wú)章法。

在互聯(lián)網(wǎng)團(tuán)隊(duì)中，使用思維導(dǎo)圖輸出除了日常工作內(nèi)容計(jì)劃外，最多應(yīng)用于和產(chǎn)品需求相關(guān)的表述上，有一些專用的思維導(dǎo)圖類型需要我們認(rèn)識(shí)，包含下面三種：

  1. – 產(chǎn)品功能結(jié)構(gòu)圖
  2. – 產(chǎn)品頁(yè)面結(jié)構(gòu)圖
  3. – 產(chǎn)品信息結(jié)構(gòu)圖

下面我們將從這三個(gè)思維導(dǎo)圖入手，了解如何實(shí)現(xiàn)它們的輸出，以及如果應(yīng)用思維導(dǎo)圖工具來提升日常工作的效率，以及規(guī)劃自己的職業(yè)技能發(fā)展。

 

功能、頁(yè)面、信息結(jié)構(gòu)圖，都是產(chǎn)品經(jīng)理輸出的內(nèi)容產(chǎn)物，通常會(huì)置入到 PRD 中供團(tuán)隊(duì)成員查看和理解。但是，這三種思維導(dǎo)圖不僅看起來差別不大，而且很容易搞混。

2.1 產(chǎn)品功能結(jié)構(gòu)圖：

我們首先介紹的第一個(gè)結(jié)構(gòu)圖類型，叫產(chǎn)品功能結(jié)構(gòu)圖，用來解釋產(chǎn)品本身功能的樹狀圖。如果學(xué)習(xí)過用戶體驗(yàn)五要素的同學(xué)，就可以把它理解成它決定的就是范圍層的內(nèi)容。

 

通常，產(chǎn)品再開始進(jìn)行一個(gè)新產(chǎn)品功能規(guī)劃的時(shí)候，第一件事就是啟動(dòng)思維導(dǎo)圖工具，開始整理該產(chǎn)品會(huì)包含的具體功能，和對(duì)應(yīng)的功能層級(jí)，這應(yīng)該非常好理解。

比如我們用潮汐這個(gè) APP 舉例，如果我要規(guī)劃一個(gè)這樣的產(chǎn)品，我會(huì)先考慮它包含的核心功能白噪音，然后向后思考白噪音包含哪些種類，如專注、睡眠、小憩、呼吸。每個(gè)白噪音類型里，我再根據(jù)對(duì)應(yīng)場(chǎng)景提供更細(xì)節(jié)的功能出來。

 

然后，我再想到，白噪音不是只有固定一種的，而是包含非常多種，是不是就該提供一個(gè)放不同白噪音的地方，于是就增加了探索的模塊。在這個(gè)模塊里，包含搜索、廣告位推薦、分類推薦功能。每個(gè)獨(dú)立的白噪音，還可以對(duì)它進(jìn)行收藏、分享等功能。

 

再然后，就還有添加用戶系統(tǒng)，增加會(huì)員功能，統(tǒng)計(jì)功能，個(gè)性化定制等，就可以進(jìn)一步完善這個(gè)圖表將所有想到的功能多羅列出來。

 

雖然產(chǎn)品需求的推導(dǎo)前面還有別的專業(yè)分析步驟，但落實(shí)到具體包含功能的制定上，過程和結(jié)果都如上方的一致。通過思維導(dǎo)圖逐個(gè)模塊添加和細(xì)化，明確它們的類型、層級(jí)。

一個(gè)修訂完整的功能結(jié)構(gòu)圖，就能清晰的表示這款產(chǎn)品包含了哪些功能和服務(wù)。

 

2.2 產(chǎn)品頁(yè)面結(jié)構(gòu)圖：

產(chǎn)品頁(yè)面結(jié)構(gòu)圖，是一個(gè)和功能結(jié)構(gòu)圖非常容易搞混的圖形。很多產(chǎn)品經(jīng)理在 PRD 中會(huì)在做完功能結(jié)構(gòu)圖以后緊跟頁(yè)面結(jié)構(gòu)圖，兩張圖形中會(huì)包含大量重復(fù)的名稱和相似的結(jié)構(gòu)，讓新手一頭霧水。

頁(yè)面結(jié)構(gòu)圖等同于體驗(yàn)五要素中的結(jié)構(gòu)層，用來詮釋產(chǎn)品包含的頁(yè)面、層級(jí)、分支。

 

首先明確一個(gè)概念，就是功能并不等于頁(yè)面。

一個(gè)頁(yè)面中可能包含多個(gè)功能，比如專注頁(yè)面中，就包含了時(shí)間、開始、暫停、停止、模式、標(biāo)簽、場(chǎng)景設(shè)置的功能。

 

 

而一個(gè)功能模塊，也可能包含多個(gè)頁(yè)面，比如我們?cè)诠δ芙Y(jié)構(gòu)圖中可能會(huì)簡(jiǎn)單表示添加聲音的功能，但這個(gè)管理需要比較多的操作步驟和頁(yè)面來完成。

 

既然我們知道功能和頁(yè)面不是一回事，那么頁(yè)面的類型、結(jié)構(gòu)有沒有必要表現(xiàn)呢？答案必然是肯定的，頁(yè)面也需要通過樹狀圖做完整的梳理并展示。

 

一個(gè)產(chǎn)品有什么樣的頁(yè)面，層級(jí)如何制定，都是基于功能分析出來的，合理的情況，是先把功能定好，再想怎么做頁(yè)面。功能是產(chǎn)品的內(nèi)核，而頁(yè)面涉及到具體的表現(xiàn)形式。

所以，外行在規(guī)劃一個(gè)產(chǎn)品的時(shí)候，往往是從頁(yè)面入手，告訴你整個(gè)產(chǎn)品包含了哪些頁(yè)面，大概的層級(jí)，但對(duì)功能的具體規(guī)劃卻往往語(yǔ)焉不詳。

頁(yè)面結(jié)構(gòu)圖對(duì)于設(shè)計(jì)師來說至關(guān)重要，因?yàn)樗鼪Q定了我們應(yīng)該設(shè)計(jì)哪些頁(yè)面，可以說是決定了我們的版本設(shè)計(jì)任務(wù)和工作量。不管產(chǎn)品有沒有提供這個(gè)圖形，我們都要自己梳理出來。

 

2.3 產(chǎn)品信息結(jié)構(gòu)圖：

功能和頁(yè)面的問題解決了，就所有結(jié)構(gòu)性問題都解決了嘛？顯然還沒有。

五要素中還包含一個(gè)框架層和視覺層，視覺層指具體頁(yè)面的樣式，那得用設(shè)計(jì)圖來表示，顯然不是思維導(dǎo)圖工具能實(shí)現(xiàn)的。那么，就剩下框架層一個(gè)還需要我們注意了。

 

框架層的表現(xiàn)無(wú)外乎就是單個(gè)頁(yè)面包含的內(nèi)容、交互、布局。交互和布局都是由原型圖來呈現(xiàn)的，但不管你有什么跨時(shí)代的交互思路還是殿堂級(jí)的排版能力，都要面對(duì)一個(gè)嚴(yán)肅的問題 —— 界面里要擺啥？

雖說功能地圖有一定的描述，但顯然還是比較寬泛模糊的，設(shè)計(jì)師是需要更具體的字段內(nèi)容的。這就是信息結(jié)構(gòu)圖存在的價(jià)值，描述每個(gè)功能模塊或頁(yè)面下方，包含哪些信息字段內(nèi)容。

比如在白噪音的詳情頁(yè)中，要放哪些信息？就一個(gè)音頻文件，我們要往里塞什么好。如果作為產(chǎn)品我的出發(fā)點(diǎn)就會(huì)是豐富這個(gè)頁(yè)面的一些信息，讓用戶更有欲望使用，或者進(jìn)行識(shí)別。

 

仔細(xì)整理這些信息，你會(huì)發(fā)現(xiàn)不少頁(yè)面雖然看起來簡(jiǎn)單，但是實(shí)際信息量一點(diǎn)都不少。而這些信息，不是設(shè)計(jì)師還是開發(fā)隨手做的，都是經(jīng)過產(chǎn)品規(guī)劃才落地的。

每個(gè)具體的信息，類似開發(fā)環(huán)境中常說的 “字段”，它也確實(shí)是產(chǎn)品經(jīng)理工作中后續(xù)和開發(fā)梳理字段表的雛形。

所以，到這里我們也就基本了解了項(xiàng)目中最常用的三個(gè)具體思維導(dǎo)圖。它們包含一定的先后順序，“功能 —— 頁(yè)面 —— 信息” 依次推導(dǎo)，從核心到細(xì)節(jié)。

梳理這些內(nèi)容，對(duì)后續(xù)我們展示、理解項(xiàng)目會(huì)起到非常積極的作用，也是 PRD 文檔中必備的圖形元素之一。即使項(xiàng)目環(huán)境中不需要設(shè)計(jì)師自己上手，你也要保證可以明白它們各自的作用，以及看懂它們?cè)趯?shí)際文檔中表述的內(nèi)容。

 

除了在產(chǎn)品說明中使用思維導(dǎo)圖，它還可以應(yīng)用在我們工作和學(xué)習(xí)領(lǐng)域中的方方面面。我們就分別從這兩個(gè)領(lǐng)域切入來講一下設(shè)計(jì)師如何利用思維導(dǎo)圖，提升自身能效。

3.1 工作領(lǐng)域

在工作上，設(shè)計(jì)師可能也需要在競(jìng)品分析里輸出上面這3種圖形，但還有很多別的工作場(chǎng)景需要我們應(yīng)用，最常見的莫過于工作待辦事項(xiàng)的整理了。

比如我們對(duì)一整個(gè)項(xiàng)目的工作內(nèi)容進(jìn)行梳理和評(píng)估，那我們就可以根據(jù)時(shí)間線或者內(nèi)容類型，將所有要做的事情梳理成樹狀圖。

 

 

或者，做用戶現(xiàn)場(chǎng)訪談這種調(diào)研，一個(gè)跨度接近一周的工作，我們也可以用思維導(dǎo)圖將前后需要完成的工作和順序解構(gòu)記錄下來。

 

任何復(fù)雜的工作流程，只要經(jīng)過結(jié)構(gòu)化的拆解，就可以細(xì)化成更容易理解和執(zhí)行的步驟。也更能幫助我們判斷工作量和制定時(shí)間計(jì)劃。

 

3.2 學(xué)習(xí)領(lǐng)域

在學(xué)習(xí)領(lǐng)域上，思維導(dǎo)圖最常用的在我看來有兩個(gè)方向，一個(gè)是對(duì)自己知識(shí)體系的整理，另一個(gè)是對(duì)于學(xué)科、書本的知識(shí)點(diǎn)整理。

雖然我們可能在各個(gè)干貨或者公開課里，看到很多有關(guān)職業(yè)技能樹的說明，并伴隨不同的通行類型。但它們都只是對(duì)內(nèi)容講解和輸出的一種抽象圖形解釋，用來輔助作者意圖的表達(dá)。

比如我們 B 端課程中使用的 B 端設(shè)計(jì)師技能掌握?qǐng)D形，采取圓的形式，這樣講解起來更方便，也更好展現(xiàn)流程（樹狀圖會(huì)太長(zhǎng)根本放不下去）。

 

但對(duì)于個(gè)人的實(shí)際學(xué)習(xí)來說，這種圖形是沒辦法直接進(jìn)行記憶的，而且顯然可以整理得更細(xì)致，所以我們就可以通過思維導(dǎo)圖的形式，對(duì)自己職業(yè)需要掌握的技能整理下來，作為自己的學(xué)習(xí)目標(biāo)。

 

一個(gè)靈活的思維導(dǎo)圖，會(huì)隨著你對(duì)職業(yè)的認(rèn)識(shí)加深和計(jì)劃的調(diào)整始終處于一個(gè)更新的狀態(tài)，輔助你對(duì)當(dāng)前已經(jīng)掌握的，和準(zhǔn)備掌握的技能有更全面的認(rèn)識(shí)。強(qiáng)烈建議所有同學(xué)都培養(yǎng)這種習(xí)慣。

再者，就是進(jìn)入到更細(xì)節(jié)的領(lǐng)域，比如一個(gè)簡(jiǎn)單的技能，還是一本書，通過思維導(dǎo)圖完成知識(shí)點(diǎn)的拆解和整理。這在網(wǎng)上是最常見的思維導(dǎo)圖，就不在這里多做介紹了。

 

最后一點(diǎn)，就要簡(jiǎn)單解釋思維導(dǎo)圖的輸出了。如果我們做的思維導(dǎo)圖僅僅是給自己看的，那么就沒有輸出的需求，但如果思維導(dǎo)圖是要展示給別人的呢？

對(duì)于一般的評(píng)審還是方案說明，我們只需要在導(dǎo)出思維導(dǎo)圖前，根據(jù)展示的畫布，調(diào)節(jié)方向、類型，以及精簡(jiǎn)展示內(nèi)容的數(shù)量，讓文字能被正?？匆娂纯?。

 

但如果我們要在作品集中展示呢？相信大家已經(jīng)看過不少作品集中包含思維導(dǎo)圖展示頁(yè)面結(jié)構(gòu)的案例了。

 

見過非常多新人在問這類思維導(dǎo)圖要用什么軟件制作，答案是本文羅列的那些工具都做不到上方案例的效果。要想在作品集的展示中獲得良好的觀感，就只能自己手動(dòng)繪制。

也就是說，你們要自己用 PS/AI/Sketh/XD/Figma 等軟件畫一遍。你可以根據(jù)當(dāng)前的場(chǎng)景和氛圍去設(shè)計(jì)合適的樹狀圖樣式，我就不慢慢做怎么畫樹狀圖的軟件教學(xué)了，只強(qiáng)調(diào)一個(gè)細(xì)節(jié)，就是連接的弧線應(yīng)該要怎么畫才準(zhǔn)確。

不管你使用上下還是左右的布局，如果應(yīng)用到弧線，就不能每個(gè)弧線全用肉眼預(yù)估來拖拽貝塞爾。最簡(jiǎn)單的做法，先確定出包含幾個(gè)二級(jí)節(jié)點(diǎn)，畫出等距離的橫線，然后先拖出最上或者最下的弧線，確?？刂贫它c(diǎn)都處于水平方向。然后復(fù)制這個(gè)弧線，將對(duì)應(yīng)一側(cè)的端點(diǎn)移動(dòng)到對(duì)應(yīng)橫線上去即可。

 

切記要保證弧線的一致和穩(wěn)定，而不是歪歪扭扭的。再之后，想要設(shè)計(jì)成什么樣的風(fēng)格，增加什么樣式，就根據(jù)你們自己的想法決定了。

 

強(qiáng)烈建議大家日常多使用思維導(dǎo)圖，因?yàn)樗芎芎玫腻憻捨覀兘Y(jié)構(gòu)化思維能力。用的越多，你就會(huì)發(fā)現(xiàn)在你生活困擾你的問題就會(huì)越來越少。

之后，還會(huì)出一篇完整的流程圖介紹，繼續(xù)解釋和圖形有關(guān)的知識(shí)。

下篇再見~

原文地址：站酷

作者：酸梅干超人

1

轉(zhuǎn)載請(qǐng)注明：學(xué)UI網(wǎng)》設(shè)計(jì)師高效工作的利器——思維導(dǎo)圖到底應(yīng)該怎么用？

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

截屏2021-05-13 上午11.41.03.png

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

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


評(píng)論(0) 瀏覽(1575)

日歷

鏈接

個(gè)人資料

存檔