<address id="ttjl9"></address>
      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      

      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>
          
  
      
    

          


          
    
  
    
          
    
                    首頁
    
          
              
          
            
            
          B端系統表單、表格、圖表、儀表盤設計方法
          
            
          
               資深UI設計者                                            
          
            
          
    

          

          
    
          

          

          
    接下來這部分就主要梳理一下關于表單中常用的組件的解析，包括多個組件組合成高級組件應該具體應該怎么應用，或者說我們在修改表單的時候應該注意哪幾個基本原則，全篇干貨，結合案例全面深度解析表單、表格、圖表、儀表盤的設計應用，以下內容較多，大家可以根據上述目錄來選擇性閱讀。

          

          
    
          

          

          
    

          

          
    1.1 表單的概念及作用

          

          
    
          

          

          
    表單的概念: 登陸注冊就是平時最常見最簡單的表單，表單包括數據的輸入和提交的一些操作。

          

          
    
          

          

          
    表單的作用：01、數據過濾（過濾信息）：如果把ERP、CRM這些系統比作一個數據，用戶來這個系統進行獲取數據，這些數據對用用戶的價值比較大，用戶并不是來獲取所有數據的，有一些數據對他有用，有一些數據目前來講是沒有價值的，或者用戶不想獲取到的，這時用戶其實需要對數據進行處理，查找想要的數據，去掉沒用的，而表單起的就是這樣的作用，用戶通過表單進行數據的過濾，數據的定位，找到想要的數據。

          

          
    
          

          

          
    02、數據定位（通過過濾漏斗，精確的定位到信息）：比如我們要在系統里查詢搜索一個商品，搜索一個快遞等等，這個搜索的過程，就是通過表單對數據進行過濾的過程，通過對數據的過濾，精確得定位數據，最后得到想要的數據，這也是數據減少的一個過程，一開始很多條數據，通過表單搜索查詢找到想要的，比如可能就10多條數據是和自己有關的。這個過程也是數據減少的一個過程。

          

          
    
          

          

          
    

          

          
    
          

          

          
    03、數據輸入（將新的信息輸入到系統中）：用戶還可以通過搜索使數據減少，同時還可以通過表格操作，數據的添加操作，表單數據輸入的操作，讓數據增多，這時表單起的作用就是數據輸入的作用，將新的數據輸入到系統中。

          

          
    
          

          

          
    

          

          
    
          

          

          
    1.2 表單常用組件

          

          
    
          

          

          
    1.2.1  輸入類組件

          

          
    
          

          

          
    1.2.1.1  輸入類組件分類

          

          
    
          

          

          
    單行文本：只輸入一行，不存在回車和換行，比如輸入手機號碼，30個字符以內的文字，都是單行文本可以解決。

          

          
    
          

          

          
    多行文本：多行比單行默認高了點，它可以換行，輸入框變高了。通常用在發表心情狀態，個人簡介等。

          

          
    
          

          

          
    富文本：指豐富的文本，不只能輸入長文本，還可以把文本加上樣式，可以定義文本的字符大小，定義樣式，定義下劃線加鏈接等等，通過副文本編輯器實現的，比如站酷編輯文章的輸出文本就是富文本。

          

          
    
          

          

          
    Tag標簽：是一個文本標簽，比如發一個商品時候，告訴商品有哪些屬性，通常加入在搜索引擎中。

          

          
    
          

          

          
    

          

          
    
          

          

          
    1.2.1.2  輸入類組件布局展示方式

          

          
    
          

          

          
    01、文本標簽的對齊方式：以輸入框輸出用戶名為例，列舉三種不同的文本標簽對齊方式?？煞譃槿N：01.文本標簽右對齊，也稱之為冒號對齊；02.文本標簽左對齊；03.文本標簽上對齊。那么這三種對齊方式具體應該在什么情況下去用呢？根據“眼動儀實驗數據”來看，也叫做古騰堡視覺動線，人們看一個頁面的視覺動線的順序，通常是從左到右，從上到下去瀏覽閱讀。

          

          
    
          

          

          
    

          

          
    
          

          

          
    文本標簽左對齊應用：因此根據古騰堡視覺動線原理，在用戶填寫信息的時，想讓用戶填寫的時候，填寫速度慢下來，我們設計的時候就用左對齊。

          

          
    
          

          

          
    文本標簽右對齊應用：當我們在設計頁面對齊方式時，不知道該選擇哪種對齊方式的時候，就用右對齊，起碼不會出錯。

          

          
    
          

          

          
    文本標簽頂對齊應用：頂對齊方式橫軸不占用空間，用戶填寫完成速度較快，但缺點是上下布局展示滾屏時Y軸的可擴展空間很少，因此除了系統中登錄注冊會用到文本標簽頂對齊之外，其他地方都用的很少。

          

          
    
          

          

          
    占位符對齊：在手機端基本都使用占位符對齊，因為用文本標簽對齊太占用手機Y軸的距離了，但缺點是輸入時出錯率相對要高。

          

          
    
          

          

          
    

          

          
    
          

          

          
    02、文本標簽的樣式：文本標簽的樣式分為兩種，左右布局時：用線或者框，左右布局在B端系統里常用框來展示，而線，在C端經常用到，因為線很簡潔，如果手機端設計有外框的話會顯的沒那么開放，而在成熟的B端產品里基本不會用到線，注冊登錄的設計除外，因為在B端中一旦出現很多線的控件，會導致它的辨識度很低，也很難去檢索控制它，同時視覺動線也顯很亂。上下布局時：它的文字標簽一種在外部，另一種是在內部。當表單少的時候，可以用上下布局，但是一般用的也很少，在B端系統，輸入類組件大部分還是左右布局用戶框來展示。

          

          
    
          

          

          
    1.2.1.3  多樣式輸入類組件案例解析

          

          
    除了上述提到的輸入組件之外，還有很多種不同的展示樣式，但本質上還是這四類輸入類組件，可以靈活使用，而不是一直使用單行文本來解決問題，大多數情況終極目的就是為了，減少用戶使用出錯率，進而提升產品使用效率。以下案例請結合下圖閱讀。

          

          
    
          

          

          
    

          

          
    
          

          

          
    案例1: 選擇合適的大?。?/strong>

          

          
    
          

          

          
    圖1:比如一個手機號碼輸入框，再國際環境可以采用上面圖文的輸入方式，國內環境產品就用下面得輸入框方式。這么設計的原因是因為，固定的寬度向用戶暗示所需輸入內容的長度來減輕判斷負擔。例如我們在輸入手機驗證碼的時候通常是六位驗證碼，以前的設計是給我們一條線來進行輸入，現在都是給我們六個空格去輸入，這時按格填空對用戶的判斷負擔一定是最小的，用戶容易去做準確的判斷。同時寬度得限制也是一樣的，給用戶一個寬度的范圍，用戶做判斷會很輕松且準確。

          

          
    
          

          

          
    案例2: 格式與情景狀態：

          

          
    
          

          

          
    圖2:比如銀行卡的格式，一串數字都是四位進行間隔區分，間隔成四位應用交互設計七大定律中的7土2法則，間隔成四個，容易讓人們記憶，在用戶輸入的時候，可以減少錯誤，減少錯的同時也就是在提升產品的使用效率。同時考慮多情景狀態，比如銀行卡號、手機號碼、包括身份證號的一些輸入設計，這些都是相對比較隱私，容易出現安全隱患的一些信息，這些信息在設計的時候要注意可能出現的問題，因此需要做一個隱藏的處理，比如添加小眼睛icon來隱藏關鍵幾位數字，來減少一些安全隱患問題。

          

          
    
          

          

          
    案例3：自動匹配與識別：

          

          
    
          
          

          

          
    圖3:比如當輸入公司地址時，這個地址信息可能是第一次輸入，也可能這個信息在我們的數據庫中已經存在了，當這個信息已經存在的時候，在輸入的過程中，系統應該在數據庫中檢索出已經輸出的信息匹配給用戶，我們就可以在里面直接選擇來進行輸入。這么做的原因就是，當用戶在輸入特別長的信息時候，用戶經常會出錯，從數據庫的方式去做匹配信息，錯誤率會降低，輸入效率會提升。另外是識別，比如在我們在寄快遞的時候，通常會把姓名電話地址，一連串的信息發給快遞員，這時候快遞員會復制粘貼放入聯系人，聯系電話，聯系地址這三個字段，現在的設計方式就是做智能識別匹配，快遞員只要有粘貼的動作，信息就會自動做好分類把一連串數字分別粘貼入不同的字段里，這樣做也是為了提升效率。

          

          
    
          

          

          
    案例4：實時預警與提示：

          

          
    
          
          

          

          
    圖4:比如這個多行文本輸入框，一般都會有字數限制，比如不超過150個字，如果不做這樣的限制，我們洋洋灑灑寫了一萬字，但是發不出去只能復制多出的文字然后再粘貼，很可能會誤刪掉內容影響操作體驗，這種文本的上限預警的解決方式是給內容做實時校驗，比如上限是58個字，打到60字的時候，也允許你輸入但是文本中多出的字會標紅進行提示去刪除多出的內容。

          

          
    
          

          

          
    案例5：占位符不能替代文字標簽：

          

          
    
          
          

          

          
    圖5:比如輸入手機號碼，占位符也是輸入手機號碼，看似是重復了一遍，但仍然是有價值的，可以變成文本標簽里提不到得信息，比如請輸入一位11位的國內的手機號碼。可以只使用文本標簽的方式，也可以使用文本標簽加占位符的方式，但不能只使用占位符的方式。因為只有占位符，可能會讓用戶出錯，影響使用效率。

          

          
    
          

          

          
    案例6：使用內聯校驗：

          

          
    
          
          

          

          
    圖6:當輸入錯誤信息的時候使用校驗，左邊的提示錯誤的方式是不對的，在校驗信息的時候最好不要出現在列表的最下部或最頂部或提交的時候，因為它是實時校驗的，最好實時提示出現定位到當前的邊框，當前的字段中的下邊，來告訴我們是當前字段出現了錯誤，這樣精確定位錯誤點，才能提升效率，同時也為設計節省了空間。

          

          
    
          

          

          
    案例7：減少字段量：

          

          
    
          
          

          

          
    圖7：左邊信息包含了姓名，生日，密碼但包含了8個字段量，我們可以把字段量減少，比如姓名組合成一個字段，生日組合成一個字段，密碼和重復密碼也可以組合成一個字段，重復密碼的作用其實就是怕輸入錯誤來加強記憶，但是另一種方法是在輸入密碼的時候讓我們看到輸入密碼就可以做到不出錯并且加強記憶，那么就可以用添加小眼睛來做替代，進而也可以組合成一個字段。這個前提是不是銀行類那樣由業務決定強制去重復，其他系統完全不用進行重復密碼輸入操作。所以減少字段量，可以消除視覺和認知負擔，這樣看起來更簡單。

          

          
    
          

          

          
    1.2.2  選擇類組件

          

          
    
          

          

          
    選擇類組件可以分為，多選、單選、時間日期、下拉選擇、Tabs標簽和地理位置組件，常用的是下拉選擇，重點介紹一下下拉選擇組件。

          

          
    
          

          

          
    

          

          
    下拉選擇組件有幾個注意點：

          

          
    
          
          

          

          
    01.避免使用默認值：比如國家和地區，往往默認值都是安哥拉，字母A開頭，如果用默認值，再B端系統里很多用戶會忘記修改默認值，就提交上去，所以我們需要去把這個默認值變成空值提示信息：請選擇國家和地區，在沒有選擇之前，這條信息是空值，點之后再去選擇國家和地區。

          

          
    
          

          

          
    02.采用輸出檢索：如果國家和地區很多，下拉信息條目很多時候，可以采用輸入類得檢索來設計，比如輸入中國，就會出現中國大陸，中國香港，中國臺灣之類的字段。

          

          
    
          

          

          
    03.默認值得表述要盡量準確：用詞文案需要簡潔，即使沒有文本標簽也能夠清晰表達，比如就需要寫明請選擇國家和地區。

          

          
    
          

          

          
    04.對新增加得字段要提供注釋：比如系統前后先增加的一些字段或者有爭議的字段要提供注釋，身份編碼和身份證號碼有歧義，就需要給一個注釋，交互上鼠標移入幫助點icon就會顯示注釋，同時注意視覺上要弱化它，小圖標盡量用面性圖標會更能表達清晰。

          

          
    
          

          

          
    1.2.3  導航類組件

          

          
    
          

          

          
    選擇類組件可以分為，導航菜單、面包屑、分頁，其中分頁里的設計注意點容易忽略，接下來重點梳理介紹分頁組件。

          

          
    
          

          

          
    分頁作用：減輕服務器的負載，有成千上萬的負載，不分頁的話，會造成巨大的下載量，相應的用戶等待時間更長。同時內網也同樣，如果有四五百人同時做一樣的事情，服務器負載能力很弱，一定要做成分頁，分頁每次loading10個20個，每次翻到5六頁的時頁的時候加載一下，其實形成了是預加載，不只加載十條數據，其實加載了五六頁的數據，只是呈現了一頁的數據，到了第五頁慢了的原因是，需要重新加載一次數據。稱之為惰性加載，懶加載。B端一般會減少加載的存在，預加載是看不到loading的，第一頁加載1到5頁，第二頁加載5-10頁等等，點快的話是可以看到的，所以用預加載的方式加快速度，減少服務器的負載。前端工程師可以用組件庫翻頁可以直接loading出來。

          

          
    
          

          

          
    翻頁操作：一般很難看到數據庫數據的總量，一般不會看到三位數的頁碼，一般來講會讓數據翻到前20頁、10頁之內，就讓用戶找到這個數據，不會讓用戶不斷的往后翻，對負載時比較大的。

          

          
    
          

          

          
    1.2.4 提交類組件

          

          
    
          

          

          
    選擇類組件主要介紹按鈕的設計注意事項。按鈕常見的狀態有三種，通常狀態、懸停/點擊、禁用。其中B端組件庫里按鈕常見的類型有：

          

          
    
          
          

          

          
    次要按鈕：一般用白色或者淺色，頁面中次要按鈕多一點，比如一個頁面一個次要按鈕都沒有就是錯的，比如查詢和重置一個是主要按鈕，一個是次要按鈕。

          

          
    
          

          

          
    主要按鈕：一般用主色調的顏色，用在完成、推薦、提交的操作，顯示會比較明顯。

          

          
    
          

          

          
    文字按鈕：沒有背景的按鈕，弱化的按鈕。

          

          
    
          

          

          
    帶圖標按鈕：帶有補充含義，比如搜索按鈕加個搜索圖標。

          

          
    
          

          

          
    圖標按鈕：純圖標按鈕，只有前進后退用的多，其他用的少。用圖標按鈕節省它的空間。比如上一頁、下一頁可以用圖標很明白的代表它的含義。

          

          
    
          

          

          
    虛線按鈕：上傳之類的，添加內容之類的。

          

          
    
          

          

          
    

          

          
    
          

          

          
    當了解了按鈕的類型，那么如何確定按鈕的擺放順序呢？這取決于平時用戶對電腦操作的習慣，同時結合業務邏輯的關系，來排列展示按鈕順序。

          

          
    
          

          

          
    

          

          
    
          

          

          
    1.3 表單綜合案例解析

          

          
    
          

          

          
    1.3.1  表單綜合案例一：修改表單的三個原則

          

          
    
          

          

          
    01、視覺簡單點：

          

          
    
          

          

          
    B端系統不用視覺做特別多的修飾，不像C端，在買商品時看不到商品看到的卻是滿屏的banner，在B端中表單不用設計的那么花里胡哨，Antdesign提供了很多組件示范，我們應該了解Antdesign為什么這么設計，比如輸入框為什么采用上下布局不采用左右布局的輸入框呢？因為容器上下布局是視覺動線最快的輸入布局方式；為什么使用框類不使用線性的呢？因為框類在B端系統中是最快分辨它的輸入域輸入區的地方，只要知道這些視覺的原理，就知道怎么合理的使用組件了。

          

          
    
          
          

          

          
    02、文字簡單點：

          

          
    
          

          

          
    文字描述的簡單點，第一種方式是通過左側的文字標簽來做；第二種方式是通過占位符標簽來做，國外的一些文章強調，不要用占位符提示做任何事情，因為占位符特別影響視覺動線，但國內已經習慣了占位符來表示。

          

          
    
          

          

          
    03、字段簡單點：

          

          
    
          
          

          

          
    1. 減少字段的方式，首先要知道這些字段的目標是什么（字段的方式去做減法）

          

          
    
          
          

          

          
    
          

          

          
    例如下圖這個電商類產品，目的是讓用戶可以收到商品，那么刪減以上哪些字段不受影響也可以將商品準確的送到用戶手里呢? 這個需要我們通過和產品經一起商量，在滿足功能需要的同時，其實以上字段可以至少優化50%字段。首先姓名：姓氏和名字可以合二為一，直接輸入一個字段就可以。郵箱：輸入郵箱可能是為了得到賬單，現在手機里就可以得到賬單，所以郵箱基本用不到。電話：電話很關鍵，不能刪掉。家庭地址：我們在做電商時，我們通常會把郵件郵寄到家庭，大部分情況家庭為第一地址，第二地址公司地址也有這種情況，但沒必要從這里輸入，可以從一些內容帶出來，所以公司地址不用當前填寫，可以把它刪除掉。省份、城市、郵編：這三部分完全可以在輸入地址的時候從地址帶出來，沒必要再輸入一遍。特別是郵編，目前在我國發快遞時郵編已經基本用不到了，我國大數據已經做了到了不用郵編來分辨地址，數據量已經足夠大了，只填手機號和地址就可以。優惠券碼、信用卡號、安全碼：這三個不能刪掉。密碼、重復密碼：重復密碼是為了輸入密碼時加強記憶，可以采用小眼睛來替代重復密碼。所以我們可以看到在減少了50%的字段后并不影響用戶收到商品，那這個改動就是成功的。這個就是我們設計師應該做的事情，當然在刪減之前，應該和產品經理商有理有據的去溝通是否按這種方式去這樣設計。

          

          
    
          

          

          
    

          

          
    
          

          

          
    2. 把相關的字段進行可視化分組（表單的方式去做分步）

          

          
    
          
          

          

          
    
          

          

          
    刪減完字段后，最終得到七個有用的字段，將這些數據進行分組優化，也就是歸類整理，我們常用的排版方式是卡片化設計，卡片化設計是一個特別好的信息分類的設計方式，即時不用添加基本信息，優惠信息，支付信息之類的名稱在卡片之上，通過卡片的方式，從上到下布局，用戶可以看的更加的準確。

          

          
    
          

          

          
    

          

          
    
          

          

          
    除了對它信息進行分類，我們也可以對它的過程進行分類。比如左邊這個頁面，雖然是從上到下，但感覺輸入的信息太多了，我們可以對這個過程分步優化，分布后把它列成基本信息和支付信息兩個層級，基本信息包括姓名、電話、地址和優惠碼，其中優惠碼為選填，當頁面里所有信息都需要必填的時候，有部分選填得信息標注選填就可以，當所有都需要選填的時候，有一個必填，那需要標注必填就可以，具體標注方法，這里使用的是占位符標注方法，還有星號的標注方法，用星號標注是已經用戶形成認知習慣，但看視覺哪個好看就用哪個，比如在蘋果的設計中就很少用星號來設計，是為了擔心影響用戶的視覺，同時星號一般放在前面，并且不一定非得用到紅色。支付信息就包括必須要用到的信用卡號、安全碼和密碼。類似這樣將過程進行分步優化也能用戶對表單的填寫，加快用戶的錄入速度，更快的在體驗上去得到提升。

          

          
    

          

          
    3. 使用邏輯順序

          

          
    
          
          

          

          
    還以這個案例來看，我們分成三個邏輯順序，個人信息相關、商品相關、支付相關。在B端中需求和場景是環環相扣的，我們需要場景化的解決方案。這個場景化的解決方案和這個表單的關聯，對應的就是用戶完整的購買流程，這個表單的三個場景，第一個場景是收貨信息，第二場景是優惠的信息，買商品有什么優惠，第三個場景是支付場景，這個流程完成支付就完成了購買，所以樣的順序就是一個正確的邏輯順序，通過先確定流程再確定字段展示順序。

          

          
    
          
          

          

          
    

          

          
    
          
          

          

          
    1.3.1  表單綜合案例二：表單設計具體流程

          

          
    
          

          

          
    第一步：做信息分類。當我們了解這個產品，熟悉這個業務的時候，可以根據信息的含義，把這些雜亂無章的字段分成幾個部分，可以和產品和開發進行討論也可以加深對業務的理解。由于B端信息的維度特別多，具體的信息分類方法可以借用五帽架信息分類法 。可以根據可根據類別進行分類：即根據信息的相關性來進行分類。也可以根據時間進行分類，比如時間正序，距離時間最近的來進行分類。同樣可根據地理位置的遠近，字母的排序和認知規律從大到小從胖到矮的連貫性來分類。一旦分類好后，用戶在填寫的時候也不會覺得奇怪，填寫的邏輯性和順序感也會體現出來。

          

          
    
          

          

          
    第二步：做排序分類（按業務邏輯順序）。當得到了信息的分類，比如一個汽車CRM系統，基本信息、車輛信息和故障信息，它具體要解決什么樣的問題，這三部分誰應該放在第一位，誰應該放在第二位，第三位，可以根據prd需求文檔來了解做這個功能具體要解決什么樣的目標，具體是什么過程在prd里應該說的非常詳細明確，這個過程就是它的業務邏輯，所以我們可以通過prd中的描述來得出業務邏輯。

          

          
    
          

          

          
    第三步：明確字段類型。當得到了信息分類，得到了信息邏輯順序之后，接下來需要明確字段類型。比如100個或200個字符，單行文本輸入是可以支持的，超過255個字符，我們就需要多行文本輸入框來解決這個問題。

          

          
    
          

          

          
    第四步：明確產品的原型。可以自己搭原型，和產品進行討論，也可以直接和產品要原型，最終目的是這個原型一定要確定下來。

          

          
    
          

          

          
    第五步：確定界面設計框架。確定柵格化設計框架，選擇多大的設計尺寸，進行頁面柵格化設計。

          

          
    
          

          

          
    第六步：對應組件設計。根據原型去對應我們的組件，是用下拉框組件還是文本輸入框組件，去找對應組件設計。這樣我們得到了字段、原型、框架和對應的組件化，下一步就要做視覺的方案設計。

          

          
    
          

          

          
    第七步：視覺設計方案。根據表單的內容來決定視覺設計方案，如果它的內容信息量比較多，比如它的數據量很多，字段很多時，用彈窗就不太合適，彈窗屬于字段量不是特別多，和后面主要彈出得頁面是有關系的，需要重開一個新的單頁面，單頁面是大容量，分類單頁面屬于更多內容容量。第二可以根據數據層級的操作關系來決定，如果從一個頁面中打開了另外的一條數據進行修改，比如從表格中打開表格中的一個詳情來進行修改，就需要彈窗來設計，這也取決于彈窗內容的多少，如果彈窗內容確實很多，彈窗就要大一點甚至使用全屏彈窗。

          

          
    
          

          

          
    

          

          
    
          

          

          
    通過下圖可以看出，表格通常由標題、工具欄（對整體批量的操作）、表格頭、表格行、分頁區、批量操作區、表格列、單行操作區（是對單行數據的操作）、數據呈現表格區、數據查詢表單區組成。

          

          
    
          

          

          
    以下內容是表格的規范和注意點，其實我們在設計的時候，很少自己去畫一個表格，一般都是從組件庫里選一個表格，然后分離組件去進行再次的自動布局得到新的表格。

          

          
    
          

          

          
    

          

          
    
          

          

          
    2.1 表格頭

          

          
    
          
          

          

          
    表格頭要做到簡練準確，不受內容影響。表格頭中的文字和正文字一樣也可以，加粗也可以，但一般都會做一個顏色來做區分。

          

          
    
          

          

          
    2.2 操作區域統一劃分

          

          
    
          
          

          

          
    圖2表格頭工具欄包括條件過濾，右上是表格內容工具，如自定義列，全屏等。

          

          
    
          

          

          
    2.3 表格間隔

          

          
    
          
          

          

          
    表格間隔可以讓表格的內容看起來更加的可視化，也叫內容降噪，可以分成線與間隔色兩種方式，通常交互hover狀態下，間隔色變成更深得顏色也可以。

          

          
    
          

          

          
    2.4 內容降噪

          

          
    
          
          

          

          
    操作區域色彩元素應盡量簡單，原則上不超過3個。

          

          
    
          

          

          
    2.5 表格行高

          

          
    
          
          

          

          
    表格需要一個頁面呈現出10條，其次需要單元格高度=文字行高+上間距+下間距，其中上下間距為8的相關數即可。

          

          
    
          

          

          
    2.6 單元列空間

          

          
    
          
          

          

          
    表格首先應保持100%把所有字段顯示全，字段多的情況可以橫滾列寬可調節，但是需要保證間隔不變，類似于柵格的溝槽原理。如果內容顯示不下可以做橫滾，如果內容顯示的下，還想要保證整個表格有設計感呼吸感，需要保證n為左右的間距，可以是8或者8的倍數，每個列之間的間距要做成2n，這樣它們之間的間距就會有那種層疊得呼吸感就會比較好看，有規則性。

          

          
    
          

          

          
    

          

          
    
          

          

          
    
          

          

          
    

          

          
    
          

          

          
    3.1 認識圖表

          

          
    
          

          

          
    在做數據圖表時我們設計師需要關注的是，我們的數據需要用什么圖表來做，而不是主要關注圖表長什么樣，或者說圖表有多好看，我們應該關注的是這些B端的數據怎么用正確的圖表去表達。數據圖表也不是千篇一律數據大屏那種感覺，雖然數據大屏是信息圖表主要應用的一個方面，但在B端系統的信息圖表中，主要是將一些表單的數據轉化成圖形的方式來進行顯示，這點和數據大屏其實并沒有什么關系，所以B端系統中主要以數據為主，而信息圖表作為輔助，這是一個需要了解的前提。

          

          
    
          

          

          
    但從視覺提升角度去考慮，數據圖表在B端中是最容易表達視覺的，我們之前兩篇提到的表單設計占了B端設計80%的工作量，就會發現這80%的工作量幾乎沒有表達出特別好有沖擊力的視覺，因為表單只是一些數據和文字的排版，并且還有規范的限制，在統攬整個B端作品中，容易突出視覺設計感的一定是數據表圖設計。還有一個大家比較關心的問題，這些圖表前端工程師能不能實現，是可以的，前端在實現圖表都會用一些常規性的圖表的組件，這些組件通常都是已經代碼化的組件，一些圖表公司做好了的可以復用的，有前端代碼也有后端數據調用的接口，它只要對應這些接口寫一些代碼就可以實現了。作為設計師在設計圖表的時候，還有一些地方需要我們去設定，接下來就和大家一起梳理怎么正確的表達數據圖表，我們一起來進入數據圖表的知識體系吧。

          

          
    
          

          

          
    3.2 常見圖表類型

          

          
    
          

          

          
    常用的數據圖表可以分成趨勢類、比較類、占比類、分布類四種類別 。

          

          
    
          

          

          
    趨勢類圖表：代表了數據增長的趨勢，它可以對比出數據增長的一個趨勢。主要有面積圖、折線圖、堆積面積圖和漏斗圖。重點了解面積圖、折線圖、漏斗圖。

          

          
    
          
          

          

          
    比較類：比較類圖表是B端系統中用的最多的圖表，有柱狀圖、條狀圖、玉玨圖、堆疊柱狀圖、堆疊面積圖、雷達圖等，常用的我們重點介紹，柱狀圖、條狀圖。

          

          
    
          

          

          
    占比類：和比較類圖表有些重疊的地方，有餅形圖、環形圖、堆疊面積圖、儀表圖、矩形樹圖、堆疊柱狀圖、條狀圖、百分比堆疊柱狀圖，重點了解餅形圖和儀表圖。

          

          
    
          

          

          
    分布類：有箱形圖、直方圖、熱力區圖、地圖、氣泡圖、散點圖、色塊兒圖、等高線圖，重點了解地圖和氣泡圖。

          

          
    
          

          

          
    
          

          

          
    面積圖：可以理解成填充之后得折線圖，不同于折線圖是，因為填充可以更好地反映出信息得趨勢，用戶可以根據面積得多少，反映出數量得多少，還代表連貫得數量級，信息數量級是一直存在的，不會消失。

          

          
    
          

          

          
    折線圖：折線用的最多，是條線代表趨勢得變化。折線和柱形再某些層面是一樣的，在一定的點表現它得趨勢變化，每個月，每天，每個小時。通常用在公司得年銷售額，價格得趨勢，用戶量得增長，折現一般不超過5條。Y軸為數量，X軸為時間。

          

          
    
          

          

          
    漏斗圖：屬于面積圖，適合排名，銷售業績，再CRM中用的最多，通過銷售線索最終達成成交量，它不斷通過漏斗得方式最終達成成交，每一個漏斗代表一個環節，有一個顧客進入商店，進入商店購買商品，留下信息，訂購，整個流程走的就是用戶旅程得過程。越往后越精準。

          

          
    
          

          

          
    柱狀圖：柱狀圖是面，代表面積，更直觀得是包含數據，這些數據能更能直觀體現它得擁有量是多少，一般用在銷售額，產品類別，分類數據得比較，如果可以看到最高和最低得差量。

          

          
    
          

          

          
    條狀圖：類別在Y軸上，X軸地表數據，Y軸上能更多顯示數據，它可以顯示負數。

          

          
    
          

          

          
    餅形圖：餅形圖表示人口，人女比例；預算得分配；在線流量得來源等等，反應得是多與少之間的對比。他們是在同一維度下的比較，比如當年得，已經再設定好時間段得顯示情況。

          

          
    
          

          

          
    地圖：分布點，流量，數據量，用地圖不要隨隨便便搜一張用到界面里，地圖要到國家地理官方網站用，否則有問題，設計背鍋。

          

          
    
          

          

          
    

          

          
    4.1  認識儀表盤
          

          

          
    
          

          

          
    用于B端首頁的系統狀態的展示，一般包含系統的關鍵數據信息和信息列表，一般會有各種數據圖表展示。為用戶提供全局概覽，讓用戶快速掌握工作進展及進入工作狀態，并且可以訪問最重要的數據，功能和控件。

          

          
    
          

          

          
    4.2 儀表盤界面分類

          

          
    
          

          

          
    

          

          
    
          

          

          
    分析類：分析類儀表盤給了我們很多分析類的信息，這些信息包括銷售額、訂單量、包括銷售額的趨勢圖、排行榜等，目的是可以在B端系統中看到目前收集到的這些數據，讓我們來進行分析。雖然計算機會給我們一定的結果，但更重要的是我們需要根據這些數據得出什么樣的結論。

          

          
    
          

          

          
    監控類：比如股票的變化趨勢很快，需要實時監控到這些數據的變化。

          

          
    
          

          

          
    控制類：比如阿里云系統中有很多的控制臺/儀表盤，里面有很多的入口，有常見的快速入口，和推薦信息的一些入口，這就是控制類，通過用儀表盤來得到控制。

          

          
    
          

          

          
    綜合類：綜合類系統是我們B端系統中見到最多的，比如CRM和ERP基本上是綜合類的，因為他要顯示數據的統計，也要顯示一些快捷的入口。

          

          
    
          

          

          
    4.3 儀表盤的設計過程

          

          
    
          

          

          
    首先儀表盤要有功能，讓用戶看到數據，讓看到數據我們需要做以下事情：

          

          
    
          
          

          

          
    第一步：分析用戶的權限：儀表盤在B端很重要的一點是我們要分析用戶的權限，因為不同的人看到儀表盤數據緯度的信息是不一樣的。權限比較高的比如有管理員/普通管理員/操作員，超級管理員等等，所以要根據不同的權限展開不同的信息。

          

          
    
          

          

          
    第二步：分析業務的場景：比如銷售人員看到內容的都是和銷售有關的內容，權限是第一次篩選，把什么樣的信息展示給他，然后經過第二次篩選，第二次篩選包括是由產品經理，BA這樣的角色幫我們來篩選這樣的信息，不是完全由設計師來決定，這兩步過程是不可忽略的。

          

          
    
          

          

          
    第三步：確定儀表盤展示的內容：到底展示什么內容，剛開始沒有那么清晰，可能就是思維導圖或者幾行字，根據這些來進行視覺展示。

          

          
    
          

          

          
    第四步：視覺設計：根據展示內容進行視覺設計。首先基本構思和畫原型圖；其次確定字體，顏色，樣式和圖形設計。其中需要注意的是，視覺整體要有統一的標準規范去表達，同時空間留白要合理，靈活的運用柵格化，界面要有呼吸感。最后信息傳達要準確，比如圖形和色彩，每一種顏色都有特殊的含義，不要應用錯誤，比如紅色要特別小心的應用。

          



          

          
            
          
              
                評論(0)
                瀏覽(3687)
              
                          
          
          
          
                      
          
            
            
          用戶滿意度評估模型搭建和檢驗方法探討
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        用戶滿意度指標創建？評估模型搭建？模型好壞判斷？本文聚焦用戶滿意度模型搭建與檢驗，分享模型搭建與檢驗過程中的方法與技巧。
    
          

          

          
    
          
        
          
            
          
                 
            
          
            
          
                
          
            
          
            
          
                如何科學有效的度量用戶體驗是企業和用戶體驗從業者一直在思考和研究的課題。用戶滿意度作為量化體驗度量的方法也一直備受關注。那么用戶滿意度指標是怎么來的？評估模型該如何搭建？模型好壞又要如何判斷？本篇文章聚焦用戶滿意度模型搭建與檢驗，分享模型搭建與檢驗過程中的方法與技巧。
            
          
            
          
                
          
            
          
            
          
                 
            
          
            
          
                早在20世紀30年代，就有學者在社會和實驗心理學領域對滿意度展開研究，研究表明用戶滿意度反映的是用戶的一種心理狀態，是用戶對其明示的、隱含的需求和期望被滿足程度的主觀感受。用戶滿意度評估對企業生存和產品體驗提升都有重要的意義：一方面，隨著移動互聯網人口紅利逐漸消失，手機應用獲取新客的成本和難度變得越來越高，通過提升用戶滿意度充分激發現有用戶價值成為企業非常重要的商業策略。如美國顧客滿意度指數ACSI數據表明，用戶滿意度的提升能帶來用戶消費頻次的增加，同時也會為企業贏得更高的聲譽，帶來拉新、促活成本的降低。此外用戶滿意度通過度量產品體驗現狀和迭代動作有效性，對助力產品體驗提升起著重要作用。
            
          
            
          
                
          
            
          
            
          
                用戶滿意度模型的構建流程如下圖所示，接下來我們一起看看：
            
          
            
          
                 
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                 
            
          
            
          
                用戶滿意度模型構建流程可分為「明確目標」「指標收集」「指標定義」「指標歸屬」「指標賦權」5個步驟：
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                Step1 明確目標 
            
          
            
          
                第1步是明確評估目標。明確評估目標包括明確評估用途和范疇，用戶滿意度評估的用途不同，在評估側重和衡量方式上會有不同：
            
          
            
          
                
          
            
          
            
          
                如衡量產品改版效果的用戶滿意度側重關注改版目標是否達成，更關注改版前后影響體驗目標達成的體驗點變化。用于摸底產品體驗水平的用戶滿意度側重了解產品對用戶需求和期待的滿足情況，更關注產品自身體驗長短板以及相較于其他同類產品體驗優劣勢。
            
          
            
          
                此外需要考慮評估范疇，一方面需要明確僅評估本品還是同時覆蓋競品，對于未在行業中取得絕對領先地位的產品，更應考慮覆蓋競品評估，明確體驗競爭優劣勢的同時尋求競品借鑒點。另一方面需要明確評估產品全局還是聚焦部分模塊，全局評估能獲取用戶對產品的整體感受，但在產品模塊繁多或復雜時，受制于用戶參與調研的耐心有限，針對每個模塊的評估問題數量無法設置太多，導致評估顆粒度較粗，可考慮聚焦重點模塊單獨評估。
            
          
            
          
                 
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                Step2 指標收集 
            
          
            
          
                第2步是收集評估指標，用戶滿意度指標收集可結合案頭側、用戶側和專家側三方信息獲取：
            
          
            
          
                
          
            
          
            
            
                
          • 
                    
            
                        案頭側指標收集方式主要是案頭研究和產品走查。案頭研究可重點關注成熟評估模型以及行業趨勢、產品模式和用戶需求分析報告，結合對產品的走查分析，提煉“好的產品體驗”需要包含哪些要素。常用的案頭研究渠道和可查詢的信息如下圖：
                    
            
                
            • 
            
          
            
          
                 
            
          
            
            
                
          • 
                    
            
                        用戶側指標收集方式主要有用戶座談會和客訴反饋，座談會把目標用戶邀請到一起暢談對產品的需求和期待，邀請對產品使用程度較深的“專家級”用戶能貢獻更多有效信息。另外客訴反饋也是能集中了解用戶對產品關注點和痛點的數據渠道。
                    
            
                
            • 
            
          
            
          
                 
            
          
            
            
                
          • 
                    
            
                        專家側指標收集方法主要是專家訪談，通過向專家了解產品目標、目標實現方式及后續主要動作來拆解對當前產品體驗重要的維度和指標。專家訪談需要覆蓋到能決策產品方向的人，且專家職能身份盡可能的多樣化，如覆蓋產品、運營、設計、技術、市場等不同職能角色。
                    
            
                
            • 
            
          
            
          
                 
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                Step3 指標定義 
            
          
            
          
                第3步是指標定義，給指標下定義需考慮指標的體驗標準高低和文案描述兩方面：
            
          
            
          
                
          
            
          
            
          
                體驗標準選擇要符合產品本階段的目標，標準定得過高或過低都會讓指標喪失靈敏性失去價值。指標描述一般要遵循通俗性、簡潔性和單一性原則：
            
          
            
          
                 
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                STEP4 指標歸屬 
            
          
            
          
                第4步是將定義好的指標進行維度劃分與歸屬來構建評估模型。維度初步劃分有「用戶接觸產品的觸點」和「產品功能模塊」兩種方式。
            
          
            
          
                
                    
          
                          
            
          
            
          
                拿用戶一次外出就餐的滿意度舉例，按用戶接觸產品的觸點可以分為就餐前（選餐廳、查信息、訂座等）、就餐中（菜品、服務、環境等）、就餐后（買單）滿意度。而按功能模塊劃分可以分為餐廳信息、評論信息、優惠信息滿意度。無論采用哪種先驗假設，模型構建都需要遵循“完備互斥”原則，即指標既齊全不遺漏，也沒有重復。
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                STEP5 指標賦權 
            
          
            
          
                因為不同評估指標的重要性程度不一樣，拿汽車產品的用戶滿意度評估為例，對普通轎車的滿意度評估更看重實用舒適，而對越野車的滿意度評估更看重汽車性能。因此在完成評估模型搭建之后，需要賦予評估指標權重，指標賦權的方法按照打權重的人不同可以劃分為專家賦權和用戶賦權兩大類：
            
          
            
          
                 
            
          
            
            
                
          • 
                    
            
                        用戶賦權是根據用戶對某個體驗點（指標）滿意度打分和對產品整體滿意度打分之間的關系測算出來的間接賦權方法，體驗點滿意度分數變化對產品整體滿意度分數變化的解釋程度越高，體驗點對應的指標權重就越大。常用的指標賦權方法有“線性回歸”、“因子分析”和“結構方程模型”。
                    
            
                
            • 
            
          
            
          
                 
            
          
            
            
                
          • 
                    
            
                        專家賦權是領域專家，如產品、運營、設計等對指標重要性進行主觀判斷，因此又叫直接賦權法，常見的直接賦權法有“直接評定法”、“分值分配法”和“層次分析法”。“直接評定法”就是專家逐個判斷指標重要性，“分值分配法”是預先給定所有指標一個總分，專家把總分分配到各個指標上，“層次分析法”是專家對指標重要性進行兩兩對比，因為能更好地在對比過程中幫助專家理清指標的相對重要性，層次分析法是專家賦權中更為常用的方法。
                    
            
                
            • 
            
          
            
          
                 
            
          
            
          
                那么到底應該使用用戶賦權還是專家賦權呢？這兩類賦權方式具有不同的特點，用戶賦權反映了用戶對評估指標所反映體驗點的需求強度，在初次搭建模型對用戶需求強度優先級不明確時可以考慮使用，但用戶賦權受產品現狀影響較大，產品當下已經成熟和形成規模的方向更容易獲得較高權重，而對產品未來重要但目前規模較小的方向權重則可能較小。專家賦權反映專家對產品現狀和產品未來方向的綜合判斷，可以在產品較為成熟或開始嘗試創新方向時考慮使用。
            
          
            
          
                
          
            
          
            
          
                 
            
          
            
          
                為了衡量用戶滿意度模型的好壞，完成模型搭建后需要對模型進行檢驗，模型檢驗分為「指標內容檢驗」和「結構歸屬檢驗」兩類：
            
          
            
          
                
          
            
          
            
          
                
          
            
          
            
          
                /// 
            
          
            
          
                STEP6模型檢驗 
            
          
            
            
                
          • 
                    
            
                        指標內容檢驗
                    
            
                
            • 
            
          
            
          
                指標內容檢驗關注指標描述對想要評估體驗點的符合程度和可理解性，即指標的內容效度。
            
          
            
          
                 
            
          
            
          
                指標內容檢驗可通過領域專家完成，邀請至少3名以上專家對指標內容有效性、易理解性等維度打分，專家一致評價為符合的指標占比即為模型內容效度（S-CVI）。對于專家認為不符合或專家打分不一致的指標需要咨詢專家具體原因并作出適當修改。一般而言專家一致評價符合的指標不應低于80%。常見的指標內容問題包括指標描述未能準確概括體驗點、指標描述有歧義、指標定義的體驗標準不合適等。
            
          
            
          
                 
            
          
            
            
                
          • 
                    
            
                        結構效度檢驗
                    
            
                
            • 
            
          
            
          
                結構歸屬檢驗是判斷評估指標與想要測量概念（歸屬維度）之間關系的方法，判斷歸屬關系的方式有看同一維度下指標間的相關關系，指標對測量概念的解釋程度等。常用的結構歸屬檢驗有同質性α信度檢驗、探索性因子分析和驗證信因子分析。
            
          
            
          
                 
            
          
            
          
                每種檢驗方法都有自己判別指標歸屬和模型可靠的標準，但是在做指標歸屬調整和指標刪減的時候不應該盲從于統計數據是否達標，還需要充分考慮指標實際意義、是否有助于我們實現評估目標等實際情況進行綜合考慮。
            
          
            
          
                
          
            
          
            
          
                
          
           
            
          
            
          
                /// 
            
          
            
          
                結語 
            
          
            
          
                用戶滿意度模型需要跟隨用戶需求和產品發展變化而不斷迭代更新，保證評估模型能反映用戶需求和業務工作。以上是我們在用戶滿意度模型搭建和檢驗方面的一點經驗，希望能拋磚引玉，歡迎大家交流探討。
            
          
        
          
    
          

          


          

          
    
          
文章來源：站酷   作者：百度MEUX
          
分享此文一切功德，皆悉回向給文章原作者及眾讀者. 

          

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

          

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

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(1556)
              
                          
          
          
          
                      
          
            
            
          深入研究場景化體驗設計
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        
          

    
          
    
          
        
          
    
          
    
          
        一、前言
    
          
    
          
        場景化設計一詞第一次看到還是在前年設計分享大會上，當時懵懵懂懂的我第一次看到這么刁鉆的角度，甚是驚訝，后來我也是在不斷的研究這個內容，上一篇文章《【干貨】設計師的發力點》中，也稍微的提了一些關于場景化設計的內容。
    
          
    
          
        
          
    
          
    
          
        本文章的出發點是因為我在學習的過程中，但很難找到全面分析的文章，因此我打算寫一篇更加深入的分析,一方面是對自己學習的總結，另一方面是分享給大家我的心得。
    
          
    
          
        
          
    
          
    
          
        接下來會通過三個維度深入研究場景化體驗設計，幫助您快速提升場景設計思維，中間也會并通過大量案例，帶你真實感受場景化設計思維在產品設計中的實際運用。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        二、場景與體驗
    
          
    
          
        我們看到各種形形色色的產品功能，但不能單一的去看待問題，也無法直接的去評判這個功能是否合理，所有的設計都是圍繞著某種指定的場景下去完成它的使命，拋開場景談設計，就是耍流氓。例如疫情期間的健康碼，這也是為了響應防控疫情的號召，需要對每個人的行程路徑進行把控，而這種產品就是為了滿足某種場景下的需求設計。
    
          
    
          
        
    
          
    
          
        而在面對產品設計有具體場景的情況下，可以根據場景分析用戶的需求，進一步制定設計目標，通過合理的設計方法，提升用戶的產品體驗。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        三、 遇到的問題
    
          
    
          
        在早期的互聯網產品設計中，大多數體驗優化的設計流程只是對需求進行單一的分析，并且相同的內容采用同一解決方案，整個設計看似基本沒有問題，但隨著互聯網的高速發展與完善，用戶群體越來越多，產品功能越來越復雜等一系列的因素，導致出現了一些問題。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        2.1   產品復雜化
    
          
    
          
        隨著產品功能的完善，功能復雜化，單一的解決方案無法滿足多種場景下的使用，需要合理規劃，根據不同的場景進行體驗設計，才能更好的發揮價值。
    
          
    
          
        
          
    
          
    
          
        2.2   同質化嚴重
    
          
    
          
        大多數流程可以滿足各種不同分類的產品使用，例如傳統的購物流程從詳情頁出發到訂單頁流程，雖然能滿足所有的支付流程，但是缺乏行業設計特性，長期以來也會缺乏競爭力。
    
          
    
          
        
          
    
          
    
          
        2.3   場景體驗欠佳
    
          
    
          
        一套設計解決方案、交互流程滿足所有的使用情況，雖然在產品中實現了一致性，但面臨復雜的場景很難滿足，并且用戶群體越來越復雜的情況下，每個用戶的訴求也會存在偏差，因此我們需要根據不同的場景，制定不同的方案。
    
          
    
          
        
          
    
          
    
          
        四、場景精細化設計
    
          
    
          
        為了更好的理解場景化設計，我們可以通過哲學上著名的三大問題，“你是誰？”“你從哪里來？”“你要到哪里去？”，例如唐僧從東土大唐而來，要到西天取經，從中我們可以發現三個關鍵的內容，就是人、地、事，這也是場景化設計中必不可少的三個內容。
    
          
    
          
        
          
    
          
    
          
        在互聯網產品設計過程中，為了進一步強化體驗，我們可以從場景化設計中三個關鍵內容，人、地、事，這三個角度進行更加深入的精細化設計，區分不同的場景采用不同的設計方法，從而滿足更多特點場景下的需求。
    
          
    
          
        
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        五、用戶分層設計
    
          
    
          
        場景化設計中，用戶是最關鍵的內容之一，正所謂以用戶為中心的設計思維能更好的服務用戶。當用戶量越來越龐大后，可以對用戶進行分層處理，這也是用戶運營中常見的一個概念，簡單理解就是指將用戶分為不同類型。
    
          
    
          
        
          
    
          
    
          
        用戶分層是根據不同用戶的行為特征劃分成不同的用戶群，進而制定不同的產品策略來滿足其差異化需求，從而充分發揮每個層級用戶的價值，達成產品目標，通過用戶分層的思維方式結合場景化設計，可以更好的滿足不同類型的用戶訴求，還能根據不同用戶的類型提供差異化的內容和服務。
    
          
    
          
        
    
          
    
          
        用戶分層的方式是通過標簽的形式快速給用戶進行分層，在實際的運用中，主要分為基礎屬性和行為屬性。
    
          
    
          
        
          
    
          
    
          
        5.1  基礎屬性
    
          
    
          
        基礎屬性包含用戶的年齡、性別、身高等，這種用戶分類的方式，是最直觀簡單的。
    
          
    
          
        
          
    
          
    
          
        5.1.1 年齡
    
          
    
          
        大多數產品中會通過年齡來進行用戶分層，這種形式可以快速區分用戶的基本屬性，因為用戶的年齡狀態對待事物也會存在很大的差異。
    
          
    
          
        
          
    
          
    
          
        例如支付寶的電子社保卡服務，根據用戶不同的年齡階段，展示不同的領卡信息，進一步讓用戶更快的獲取到符合不同年齡段所關注的合適信息，可以直接提升開卡率。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        5.1.2 老齡化設計
    
          
    
          
        隨著我國即將進入中度老齡化社會，也正是因為老年人的生理和認知障礙的限制，他們使用APP的體驗并不是很順暢，所以大多數互聯網產品逐漸向中老年群體滲透，更多的關注起老齡化設計。
    
          
    
          
        
          
    
          
    
          
        在適老化設計中，在不影響老年用戶對功能使用的情況下，一般都會采用通過設計降噪的方式，去除所有復雜的次要信息，保留核心內容，并且通過放大來強化關鍵信息，文案的處理上也會進行內容簡化處理，減少老年人的閱讀成本。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        適老化設計除了視覺上放大和簡潔的感知體驗外，在交互體驗上也會有很多人性化的設計，例如在容器內容上加入行為按鈕并描述去向，幫助老年人順利完成目標行為。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        甚至在部分產品中，會強化聽覺上的功能體驗，例如語音播報、語音提問、電話叫車等功能，既能通過語音的形式彌補老年人視覺能力上的不足，還能減少操作成本。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        5.1.3無障礙設計
    
          
    
          
        隨著互聯網的發展，用戶群體逐漸龐大，其中也有部分身體有局限的用戶，對于他們來說更加迫切通過互聯網獲取信息，因此越來越多大公司注重到這一方向，而這也是我們作為一名設計師，更應該去優化的方向。
    
          
    
          
        
    
          
    
          
        可以采用無障礙色系，以及顏色的色差處理，針對性的服務于色盲和色弱群體，使得他們可以在信息閱讀上更符合他們的習慣，從而進一步打造更人性化的產品體驗。
    
          
    
          
        
          
    
          
    
          
        5.1.4 用戶身份
    
          
    
          
        而關于用戶分層的場景設計中，我們還可以區分用戶不同的狀態、身份來對界面進行差異化布局，最典型的代表就是用戶的會員身份。
    
          
    
          
        
          
    
          
    
          
        會員它分為很多不同的階段，從開通到到期，用戶在不同階段對于內容的關注上也存在很大的差異的，例如未開通展示更多的價格、權益信息，吸引消費決策。我們可以從這個角度出發，區分用戶的會員狀態，進一步來進行差異化設計。從而有效的提高不同階段用戶的行為決策。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        5.2  行為屬性
    
          
    
          
        每一個用戶在產品體驗過程中，都會有著各式各樣的行為操作，例如瀏覽記錄、關注、喜好等，我們也可以通過這種方式來進行分類，可以更加直接的聚焦到關鍵信息上，既可給予用戶驚喜感，也可以達成業務目標。
    
          
    
          
        
          
    
          
    
          
        5.2.1 興趣標簽
    
          
    
          
        標簽和上面描述的基礎信息還是存在一定差異的，標簽相當于是產品根據用戶的行為等去定義的不同類型的標簽，這種方式可以快速給用戶進行分類，常應用于內容型產品以及電商平臺，給用戶貼上各式各樣的標簽，其次再根據他們的具體需求進行個性化的內容設計，可以更快的實現千人千面的智能推送。
    
          
    
          
        
          
    
          
    
          
        不同興趣標簽的用戶對待內容的訴求也會不同，因此在頁面結構設計時，我們需要考慮頁面信息的優先級、瀏覽動線、信息內容的呈現，例如重度用戶和路人用戶的區別，一個注重商品展現的效率，一個注重氛圍和吸引。
    
          
    
          
        
    
          
    
          
        除了整體的頁面結構內容外，用戶對內容訴求也不同，例如優惠型的用戶更關注活動和折扣信息，通過用戶標簽進行分層設計，能更快的達到刺激用戶消費的目的。
    
          
    
          
        
          
    
          
    
          
        5.2.2 消費模型 （RFM模型）
    
          
    
            
        
          • 
            
            
                R：最近一次的消費時間（Recency）
            
            
        
            • 
        
          • 
            
            
                F：一段時間內的消費頻次（Frequency）
            
            
        
            • 
        
          • 
            
            
                M：一段時間內的消費金額（Monetary）
            
            
        
            • 
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        RFM模型是根據用戶的消費行為、頻率、金額3項指標對用戶的價值狀況進行級別劃分，一共可以分為8種基礎用戶類型，然后再根據用戶的消費金額進行從上往下排序，最后區分不同類型的用戶，進行精細化運營。
    
          
    
          
        這也是很多企業都在使用的模型，價值級別較高的用戶可以調整資源傾斜力度、定制服務，甚至針對普通用戶也可以進行激活消費、挽留措施。
    
          
    
          
        
          
    
          
    
          
        在電商產品中這種方式最為常見，通過模型分類可以快速了解用戶消費情況，一般會區分新老用戶，活躍用戶與沉寂用戶，例如創建新人導購，刺激用戶的首單轉化，而長時間未進行復購的沉寂用戶，也會采取一系列的措施吸引用戶再次消費，提升用戶的復購率。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        5.2.3 AIPL模型
    
          
    
            
        
          • 
            
            
                A：認知 - 新客或不了解產品的用戶（Awareness）
            
            
        
            • 
        
          • 
            
            
                I： 興趣 - 對產品有興趣且關注過的用戶（Interest）
            
            
        
            • 
        
          • 
            
            
                P：購買 - 刺激用戶產生購買行為（Purchase）
            
            
        
            • 
        
          • 
            
            
                L：忠誠 - 有過較高復購行為的用戶（Loyalty）
            
            
        
            • 
    
          
    
          
        
          
    
          
    
          
        這個模型對應的也是用戶的成長路徑，每個用戶都是從認知開始，才慢慢變成購買或者忠誠，所以需要做的，就是引導用戶不斷往更上一層發展，當然，我們也可以對四種不同類型的用戶同時進行，將這四種類型分發到產品中的各個鏈路中，以下案例來自于淘寶。
    
          
    
          
        
    
          
    
          
        通過種草的形式給用戶建立認知，培養用戶興趣，而面臨消費顧慮并遲遲未下單的用戶，可以利用入手分享的方式克服轉化阻礙。而對于購買型和忠誠型用戶，可以通過優惠、活動等方式，刺激下單并建立長期關系。
    
          
    
          
        
          
    
          
    
          
        5.2.4  行為路徑
    
          
    
          
        不同行為表現的用戶所觸發的關鍵行為不同，所以在設計路徑時，要先對用戶有分層，有定義，再針對性的實施，對路徑進行合適的分層布局，確保用戶去完成某件事的各種行為路徑，都能被滿足。
    
          
    
          
        
          
    
          
    
          
        下面的案例從上倒下依次為，想快速申請貸款或者快速完成任務獲取現金的用戶，我們提供了直接操作區域，并且置于頭部進行業務屬性強化，中間融入了更多的分類與內容引導，進一步激發用戶的興趣，最后可以再通過不同的形式適當的減少用戶顧慮，例如優惠券的福利（強化申請貸款），為新用戶提供發帖示例（確保社區的內容品質）。
    
          
    
          
        
    
          
    
          
        雖然兩個界面的內容差異較大，但是結構拆分的方式以及行為路徑的規劃都是大同小異的，主要還是為了滿足不同行為的用戶，進一步輔助他們快速完成功能服務。
    
          
    
          
        
          
    
          
    
          
        六、區域化設計
    
          
    
          
        根據不同的地點、位置、空間進行區域化設計，為不同的地域、情景進行差異化設計。在空間設計、園林設計中，我們會常?？吹竭@種設計方式，規劃整個區域，進行合理的場景化設計，而在互聯網產品設計，主要體現在產品的戰略層面，面向不同的區域市場。接下來通過以下三個角度進一步分析。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        6.1  下沉市場
    
          
    
          
        下沉市場是前幾年比較流行的概念，是新鮮流量的代名詞，特別是拼多多的崛起，引起了許多行業關注流量的新區域。簡單理解就是產品的戰略市場主要面向于3-6線的城市。
    
          
    
          
        
          
    
          
    
          
        下沉市場的用戶特征：
    
          
    
          
        1、簡單直接，所見即所得；所以在設計的時候應該避免操作路徑過深，展現內容太隱晦。
    
          
    
          
        2、對價格和收益比較敏感，愿意花費時間獲得金錢上的獎勵，例如拼多多其實是個游戲電商。
    
          
    
          
        3、愿意下載一些現金獎勵的產品，通過任務或者閱讀來獲得獎勵，例如趣頭條。
    
          
    
          
        4、熟人社交影響力較大，可以通過微信生態，快速形成裂變。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        6.2  全球化設計
    
          
    
          
        隨著本地化市場的成熟，越來越多產品開始面向海外市場，而海外市場與本地相比也會有著很多的差異，例如語言、宗教、審美、文化等等都有著諸多差異，所以這也是無形之中給設計帶來了很多的挑戰。
    
          
    
          
        
          
    
          
    
          
        6.2.1 本土化策略
    
          
    
          
        一個產品無法滿足全球市場的使用，因此全球化設計最好的方法就是本土化策略，深入挖掘當地市場的文化、用戶喜好，地域特色等內容，進一步對產品進行單獨設計，例如大家比較熟悉的Tiktok，與抖音分開運營，更具有針對性。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        大部分產品在進行海外市場的運營設計中，都會充分融合當地市場的喜好或元素，進一步發揮當地特色，激發用戶的情感共鳴。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        6.2.2 出海規則
    
          
    
          
        由于不同國家的文化差異、行為習慣、認知能力都會存在一定的偏差，因此在產品設計的過程中，我們也有很多規則需要去注意，例如、地區禁忌、語言處理等。接下來我大概列舉幾個我平時記錄的注意事項。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        單位規則
    
          
    
          
        度量衡需要滿足不同國家的要求，例如公斤/磅、英尺/厘米、公里/英里，而在一些運動產品中如果要表現卡路里，不建議使用一碗米飯作為單位來描述。
    
          
    
          
        
          
    
          
    
          
        形象禁忌
    
          
    
          
        在一些全球化設計中，如果涉及到插畫以及人物，需要注意一些姿勢和特征，盡可能避免不必要的麻煩。例如人物的手勢、 兩手交叉、十字交叉、使用左手等等，甚至在中東地區女性暴露都要注意避免。
    
          
    
          
        
          
    
          
    
          
        圖形禁忌
    
          
    
          
        圖形的表意也需要契合當地文化特點，一些比較含蓄的內容盡可能避免，例如使用話筒代表娛樂，藥丸代表健康，雖然在國內市場比較常見，但針對于全球化的設計可能就不是很適合了。
    
          
    
          
        
          
    
          
    
          
        而對于這一點每個國家的宗教文化也會有所不同，例如阿拉伯地區，避免使用星星圖標，科威特、埃及、阿拉伯聯合酋長國、阿富汗等因宗教原因禁酒，中東地區禁忌女性圖像，甚至我們經?？吹降膐k都是不好的詞語，在個別國家里有罵人的意思。
    
          
    
          
        
          
    
          
    
          
        除了圖形外，顏色也需要注意，在一些非洲地區盡可能避免顏色鮮艷或者紅色。
    
          
    
          
        
          
    
          
    
          
        語言顯示
    
          
    
          
        在界面設計過程中，設計師常常會關注字符串的顯示寬度，以及換行規則等，而面臨全球化設計時，文字需要適配多種語言，而外語的顯示長度明顯和中文有著很大的區別。為了能更好的進行極限范圍的確定，我一般會選用德語進行排版，因為德語是大部分語言中，長度最長的內容了。
    
          
    
          
        
          
    
          
    
          
        除此之外，我們還應該更加關注阿拉伯地區的語言顯示，他與我們傳統的閱讀方式截然不同，用戶的閱讀順序是從右往左，甚至交互方式也是如此，所以在設計的過程中，需要對阿拉伯地區的界面設計，進行鏡像處理。
    
          
    
          
        
          
    
          
    
          
        鏡像處理
    
          
    
          
        除了文本內容的顯示順序改為從右往左之外，界面中的圖像、圖形、圖標也需要進行鏡像處理，但需要注意的是，含有明確指示性或方向性的圖標需要鏡像，例如返回、查看更多。而像刷新、歷史、鬧鐘等統一標準的圖標不需要鏡像。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        6.3  空間設計
    
          
    
          
        聽到空間設計這個詞，我首先聯想到的就是超市，設計師在設計的過程中，會充分考慮人群的動線設計，商品的分布也會大有講究，入口一般是單價較高的電子產品，手扶梯邊和收銀臺都會放一些零碎小單品，既要考慮短頭商品的展示，也要考慮長尾商品的曝光。
    
          
    
          
        
          
    
          
    
          
        6.3.1 線下鏈接
    
          
    
          
        而這一個特征，在互聯網產品設計中，也是可以借鑒的，例如支付寶的電子社?？?，為了能更好的推廣電子服務，設計師將線下社保局進行空間設計，用戶在不同位置所看到的海報均不同，針對用戶不同階段對需求的不同，進行場景差異化設計，可以更好的傳播有價值的信息。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        6.3.2 到店體驗
    
          
    
          
        到店服務，即用線上互聯網服務線下業務，其出現是為了解決傳統線下消費固有的問題，為了更好的形成線上和線下的鏈接，我們也可以采用上述的方法，對整個線下店面進行空間設計。
    
          
    
          
        
          
    
          
    
          
        例如店外主要起到引流的效果，可以讓用戶掃碼進入店鋪首頁了解店鋪具體的信息，而在店門口可以讓用戶進行掃碼排隊預約等，當食客就坐后根據桌上的二維碼可以進入到店鋪的下單頁，最后在收銀臺布置掃碼買單，整個流程符合線下體驗，并可以將不同的頁面準確的傳遞給用戶，促進用戶快速完成線下消費。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        七、服務差異化設計
          
    
          
    
          
        場景化設計中第三個關鍵內容就是事，而在互聯網產品設計中，所有的事都是為了能更好的服務用戶，但隨著互聯網成熟，功能越來越豐富化，我們需要更加精細的場景劃分，明確用戶對于整個服務的操作流程，結合前后場景預判用戶目標，通過設計提高用戶效率，給予用戶驚喜與感動。接下來主要通過目的、行業、內容三個角度深入分析。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.1 交互流程 - 服務目的
    
          
    
          
        如今隨著互聯網不斷發展，用戶的時間被各種產品分割，而面臨著用戶在產品中的所有體驗，做的每一件事情，都是有目的性的，例如打開淘寶的目的是想購物，打開抖音的目的是想放松娛樂，因此只有挖掘出用戶的目的，才能更好利用服務完成用戶行為。
    
          
    
          
        
          
    
          
    
          
        為了讓用戶更好的完成任務，可以將操作流程拆分為三步，從開始到結束，結合前后場景預判用戶目標，提升交互體驗，而關于這個內容，我之前在《交互流程中的三大重點》一文中有詳細講解，感興趣的可以自行查看。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.1.1  操作前 - 行為目的
    
          
    
          
        像我們常見的一些產品結構布局中，其實有也著簡單的分層布局，我們可以根據用戶不同的行為目的結合頁面板塊的內容呈現來進行結構分層布局。
    
          
    
          
        
          
    
          
    
          
        下面的案例從上到下依次為，目的明確的搜索用戶、分類明確的用戶以及只想隨便看看的用戶，這樣的話，可以有效的服務與不同用戶的目的，也能快速實現流量分發的作用。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.1.2  操作中 - 操作目的
    
          
    
          
        根據不同的服務以及用戶操作目的，判斷內容的合適性，例如輸入內容時，結合前后場景預判用戶目標，針對不同的內容呈現相對應的鍵盤樣式，通過設計提高用戶效率，滿足用戶的操作目的。
    
          
    
          
        
          
    
          
    
          
        操作減負
    
          
    
          
        面對各式各樣的數據錄入，表單填寫是移動端設計中最復雜的一項操作，在設計過程中可以根據用戶目的進行場景區分。例如下圖的案例，通過自定義的形式為用戶提供了兼容不同層級的聯動鍵盤，整個過程都在鍵盤輸入組件中完成，保證了錄入的沉浸和任務的聚焦。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        場景匹配
    
          
    
          
        在操作過程中，可以針對內容呈現對應的鍵盤樣式，例如系統自帶鍵盤的樣式多達8種，我們可以制定各種場景下的使用，從而進行匹配，讓用戶在輸入的過程中更高效。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.1.3  操作后 - 結果呈現
    
          
    
          
        當體驗流程中用戶操作后，需進行合理的內容反饋，可以通過場景化設計思維，結合用戶目標，呈現合理的內容，提升設計效率。而在結果呈現上，主要可以分為兩個方向，結構與內容。
    
          
    
          
        
          
    
          
    
          
        在內容建設方面，主要通過信息架構來構建用戶體驗，確定各個將要呈現給用戶的元素的模式和順序，例如淘寶搜索結果頁，采用了兩種不同的局部方式，根據搜索內容來進行區分，例如電器類的產品外觀大差不差，因此結構上采用小圖模式，主要突出產品信息和賣點，而服裝類的商品則采用瀑布流的形式，強化圖片的視覺表現。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        內容主要是借助價值去找用戶，找到用戶建立鏈接，從而產生價值，簡單理解互聯網產品就是一個鏈接工具，但為了能更好的讓內容和用戶進行鏈接，我們可以將內容進行前置處理，根據服務目的結合內容的呈現，快速建立業務鏈接。
    
          
    
          
        
          
    
          
    
          
        下圖案例來自于百度搜索，用戶在搜索時，不同的關鍵詞呈現對應的服務內容，合理運用場景化設計中的服務差異化設計，為不同的事進行設計，既能快速匹配相應的用戶，還能縮短用戶尋找服務的操作路徑。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.2  框架層 - 行業細分
    
          
    
          
        隨著互聯網成熟，產品業務形態逐漸完善化，例如餐飲產品，里面會涉及到多種餐飲業態，例如早餐、茶飲、快餐、燒烤等等，而所有銷售類的內容都會涉及到人、貨、場。人在上面也大致講過了，這里就不繼續贅述，而面臨這種行業較多的情況時，我們可以采用場景化設計思維中的分層思維，將行業進行細分，進一步讓貨物可以對應到符合的場景中。
    
          
    
          
        
    
          
    
          
        接下來也會繼續使用餐飲產品作為例子，進一步講解行業細分后的設計細節。
    
          
    
          
        
          
    
          
    
          
        7.2.1 行業特征
    
          
    
          
        餐飲業態較為復雜，但行業之間的差異還是比較明顯的，可以將行業特色進行提煉，針對不同的特點進行框架設計。
    
          
    
          
        
          
    
          
    
          
        例如年輕群體較多的甜品茶飲，功能上除了基礎點餐也有外賣服務，甚至也會有周邊商城，這種類型的商戶比較注重服務的呈現。但一些傳統的餐飲行業，由于菜品體量較大，頁面呈現上可以更偏向于菜品展示。除此之外，還有很多餐飲商戶比較注重用戶身份以及會員管理，而框架設計上也可以將資產內容前置化，滿足商業目的。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.2.2 導航設計
    
          
    
          
        產品框架中最關鍵的一個內容自然離不開導航設計，它是專門用于呈現信息的一種界面形式，用戶可以在內容結構中自由穿行。在頁面設計的過程中，也可以通過不同的導航形式滿足需求，例如在在菜品的展現形式上，菜品體量較大的快餐便當，可以采用側導航形式快速進行內容篩選，而甜品茶飲類的菜品較少，可以利用雙行瀑布流的形式強化商品圖片的呈現效果。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.2.3 菜品布局
    
          
    
          
        框架層的關注點幾乎全部在組件及相互關系上。框架確定用什么樣的功能和形式來實現。作為餐飲類的產品，菜品呈現屬于比較關鍵的內容，而面臨不同類型的菜品，也能做出場景差異化的表現，這一點比較像上面案例中提到的搜索后的商品結構呈現。
    
          
    
          
        
          
    
          
    
          
        在上面行業特征分析時，會發現如果從餐飲菜品數量上進行區分的話，布局上可以使用單行列表或雙行瀑布流的形式，來區分菜品分發的權重。而像一些套餐的菜品，布局上可以將菜品組合擺放，方便用戶對套餐內的單品進行對比與調整。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.2.4 分層營銷
    
          
    
          
        在營銷設計中，可以通過各種營銷資源位進行宣傳展示，為了讓營銷滿足不同商戶的使用，可以利用場景分層的形式，將營銷表現力分為強、中、弱，三種形式，并根據不同的頁面框架布局去進行表現。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        7.3  內容形式
    
          
    
          
        內容型產品比較注重用戶消費與互動，平臺也會對內容、流量、用戶進行分析，確保合理的消費場景。隨著產品逐漸豐富化，內容分為多種形式，例如視頻、音頻、直播、資訊，而內容形式也分為娛樂型、工具型、知識型和社交型，為了能更好的匹配消費場景，可以將內容形式進行分層處理，區分不同的事物，采用合適框架形式，滿足用戶的消費場景。
    
          
    
          
        
          
    
          
    
          
        下圖案例來自于淘寶內容優化設計方案，通過場景細分，主要分為三個場景，一是以瀏覽圖片視頻為主的富媒體消費場景；二是社交關系為主的消費場景；三是以文字消費為主的閱讀場景。三種場景的每一種都對應了多個內容框架以及框架之間的流轉鏈路，按下圖從上往下逐漸從重分發到強沉浸的瀏覽體感。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        富媒體消費場景內容的復雜度和數量較大，一般常見的方式是采用分發為主的雙列流，滿足多種類型的內容合理展示，如果以圖片為主要消費內容的情況下，可以采用大卡流，突出圖片的展現。甚至也可以利用全屏的形式，強化用戶的沉浸體驗，這種方式更適合視頻內容。
    
          
    
          
        
          
    
          
    
          
        以社交關系為主的內容，可以采用傳統的動態流布局，更適合用戶的習慣，同時也可以滿足多種信息的呈現。文字閱讀為主的內容，更加注重信息的閱讀，可以使用文本流的形式，通過簡單的對比和結構層級簡化處理來幫助用戶閱讀信息。
    
          
    
          
        
    
          
    
          
        為了讓用戶更好的消費內容，整個優化項目的過程，首先通過用戶消費內容的梳理，然后結合內容的特點進行核心框架的鏈路整理、提取抽象化的共性框架，讓各個具有相似性的場景進行拉通，最終確認框架形式。
    
          
    
          
        
          
    
          
    
          
        八、總結
    
          
    
          
        場景化分析可以讓設計師以用戶的角度解決用戶痛點，發現問題解決問題，從而更好地服務于用戶，不管面臨多復雜的產品，都可以通過場景化設計方法，將關鍵的三大內容進行提煉，進一步分析，確保每個內容點都符合具體的場景。
    
          
    
          
        
          
    
          
    
          
        文章來源：站酷   作者：三石設計丶 
        
          
            分享此文一切功德，皆悉回向給文章原作者及眾讀者.
        
          
        
          
            免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
        
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
        
          
        
          
            
          
        
          

    
          

          
            
          
              
                評論(0)
                瀏覽(2975)
              
                          
          
          
          
                      
          
            
            
          B端產品設計分析方法總結
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        做一個完整B端系統項目前，從交互設計的七大定律，B端產品業務調研，用戶訪談研究方法，精準推導B端用戶畫像，到B端產品主風格的設計定調，深度理解B端主流組件庫的視覺規范，進而為B端產品設計做充分的準備工作，以下內容較多，大家可以根據上述目錄來進行選擇性閱讀。
    
          
    
          
        
    
          
    
          
        1.1 B端組件庫的概念及作用
          
    
          
    
          
        
          
    
          
    
          
        概念：組件庫的底層邏輯就是原子理論，類似于我們在拼樂高積木的時候，根據說明書一個模塊一個模塊來拼湊，先找零件，再拼成部件，然后是成品，這個過程和UI中的組件化是一模一樣的，組件化就是原子理論集中得表現，原子（圖標、按鈕、字體樣式等）——分子（標簽欄、導航欄、搜索框等）——有機體（圖文列表、內容卡片、布局模塊、瀑布流圖等）——模板（原子、分子組合排列組成了模板，也就是原型圖）——界面（最后根據原型圖形成視覺設計稿）
    
          
    
          
        
          
    
          
    
          
        作用：一致性：比如在不同得界面中，如果用樣的按鈕，他的按鈕的展現形式，要保持一致性。
    
          
    
          
        高效性：比如所有的按鈕不用單獨去設計了，從組件庫里調用就可以，這樣對于設計師來說就是高效的。對用戶來說，也會讓用戶的使用效率提升，比如當用戶看到藍色的按鈕就是可以提交的按鈕，看到白色得按鈕就是次要得按鈕，看到不帶邊框的按鈕就是一個危險按鈕等等。
    
          
    
          
        組合性：通過調用不同的組件來進行組合可以形成不同的頁面。
    
          
    
          
        
          
    
          
    
          
        1.2 如何正確使用組件庫
    
          
    
          
        
          
    
          
    
          
        1.2.1 組件庫的使用前提
    
          
    
          
        一些主流的組件庫，比如AntDesign、Element Design、ZanDesign組件庫等，這些框架機構本質都差不太多， 但他們有自己的特點，具體用哪個組件庫，通常由公司的架構師來進行架構選型，比如VUE（Element Design）和REACT（Ant Design），這是兩種不同的技術選型，（VUE和REACT是一種前端框架的技術架構版本，可幫助前端工程師快速進行開發的前端框架）。從技術角度講，大部分公司會首選AntDesign（React），因為有很多案例提供，VUE和有贊也可以但用的少。從設計角度，Ant Design得設計組件形式案例很完善。Element Design做起來視覺單一得樣式白白得感覺，沒有設計層次化，Ant Design更好看一點。所以先選擇底層的前端框架，再根據這個選擇前端的機構布局。
    
          
    
          
        
    
          
    
          
        1.2.2 組件庫的使用過程
    
          
    
          
    
          
    
          
        設計師和前端最終目標是一樣的，都是快完成保證設計質量的，原生組件不能達到要求的時候，設計師可以根據原生組件庫修改樣式來表達到自己的想法。但對前端來說最好什么都別改，就用原生組件庫前端工程師直接復制就行，這也是因為我們設計師的要求和前端的要求是不一樣的。但修改后樣式的組件，底層邏輯還是原來的組件。從Antdesign等組件庫里復制出來，經過figma里的各種功能操作后，比如分離組件、改變組件得形狀、替換內容等，但這個組件仍然是Antdesign里的組件，組件是否改變取決于，這個圖形，這個組件是不是已經代碼化，我們設計師設計的組件，只是樣式，需要經過前端來形成代碼，只有代碼化的組件，才是組件，如果沒有代碼化，那只是一個樣式而已。所以，我們用Antdesign里是已經實現代碼化了得組件，組件庫里有的組件前端一定是可以代碼實現的。
    
          
    
          
        
          
    
          
    
          
        1.3 如何設計組件庫
    
          
    
          
        
          
          
    
          
    
          
    
          
    
          
        1.3.1 每個項目都會分這四個周期
    
          
    
          
        
          
          
    
          
    
          
    
          
    
          
        項目初期：在一個B端項目得初期，大家都會有疑問，B端組件庫應該什么時候開始建立？是不是先建組件庫再開始設計？答案是，如果不是從0開始的項目，組件庫在設計之初就應該建立起來，如果項目是從0開始，由于沒有業務的案例，組件庫組件庫也無法建立，但可以建立一些最小元素：原子。比如字體（應該用什么樣的字體，在正標題，副標題，大標題，正常情況下應該怎么樣使用字體的得明度）、色彩（色彩規范是什么，比如醫療行業，航空行業，交通行業應該用什么色彩，決定主色不是好不好看，而是由企業來決定得，首先了解企業的VI色，通過結合VI色和產品分析出的用戶畫像特征，來確定主色，輔主色，確定主色后，相應的背景色、深色背景、淺色背景、灰度背景、卡片背景等，也就都可以做出來了）、按鈕（通常狀態，點擊狀態，當前焦點狀態，不可點狀態）、基本控件、布局柵格、圖表（圖標icon、文本標簽、按鈕、圖表）、圖標；通過建立原子組件，完成一些基本典型的頁面設計。
    
          
    
          
    
          
    
          
        項目中期：繼續完善基本組件庫，應用案例的完善，迭代組件庫、樣例庫、最佳實踐案例。然后再次迭代進入基本組件庫。
    
          
    
          
        
          
    
          
    
          
        項目后期：形成最終組件庫與設計系統的規范建立，根據項目不一樣詳細程度也可以不一樣。
    
          
    
          
        
          
    
          
    
          
        延展期：為項目2.0升級準備根據使用反饋、迭代之前得組件庫與規范，預計未來版本中出現的典型案例，并針對性的設計應用組件。通常很少有公司進行到這一步。
    
          
    
          
        
          
    
          
    
          
        1.3.2 組件庫的開發流程
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        1.3.3 B端組件庫存在的價值
    
          
    
          
        
          
    
          
    
          
        B端組件庫的存在是不是意味著不需要設計師了？其實并不是，組件庫可以幫助設計師增進設計效率和溝通效率，和前端溝通告知按照對應的選型組件庫規范使用就可以了，同時組件庫得一致性、準確性、協同性它的質量有保證。但設計師做完組件庫后，繼續需要關注的點是：
    
          
    
          
        01、根據業務場景來優化設計組件庫：因為組件庫是一定會去更新的，如有必要再去更新，那一定會是很復雜得業務場景下去做更新的，這個業務場景是程序員或者以前的組件不能實現的，需要很強的設計技能去做迭代，所以需要設計師繼續去做一些結合業務場景的組件來放到組件庫里。
    
          
    
          
        02、需要設計師把更多時間精力投入更多設計體驗中，而非搬磚：組件庫的建立同時解放了設計師的精力，設計師可以把時間投入到設計體驗中去，而不是做一些搬磚得工作，比如按鈕怎么畫，用圓角還是用什么顏色，這些沒有技術含量的工作，這樣一來，可以投入更多時間來賦能業務更好體驗設計工作。
    
          
    
          
        
          
    
          
    
          
        1.3.4 B端主流組件庫有哪些
    
          
    
          
        
    
          
    
          
        
    
          
    
          
        2.1 B端產品的設計過程
    
          
    
          
        
          
    
          
    
          
        2.1.1 用戶體驗五要素
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        戰略層（屬于產品愿景，滿足用戶的需求，產品的愿景和目標）
    
          
    
          
        
          
    
          
    
          
        由于用戶有不同的需求進而產生了不同的產品，戰略層決定了用戶用干什么樣的產品，比如，用戶需有很多銷售客戶的線索需要進行管理，用戶需要管理客戶，那就做一個CRM系統。比如，用戶想寫日報，想要一個打卡的OA系統，那么產品目標就是要做一個OA系統。比如，電商里面很多商品，牽扯到很多進銷存，那就做一個ERP系統。這部分跟設計師相關度沒有那么高。
    
          
    
          
        
          
    
          
    
          
        范圍層（指功能規劃，功能的規格、包括內容的需求）
    
          
    
          
        功能規劃：比如要做一個OA系統，其中就包含了打卡、日報、項目管理、報銷、人事流轉等等都是跟辦公相關聯的，需要把規格和功能畫出來，畫成簡單的表格并且將它們分類，這里所有的功能都不是詳細的，就是簡單的分類，將功能簡單描述一下，同時做一個簡單的用戶畫像。這部分設計師只需要閱讀產品經理給到得PRD需求文檔即可，整體看還是偏愿景，沒有形成具體的產出。比如OA系統中就總結出重點做一個審批得功能，并不知道什么樣的界面，只知道一個大概的范圍。
    
          
    
          
        
          
    
          
    
          
        結構層（指原型設計）
    
          
    
          
        這部分，設計師通常就需要參與進來，如果設計師只按產品給的設計好的原型來設計，就顯得很被動，這樣只能叫做視覺美化，被稱之為美工，設計師應該從沒有形成原型的時候，可能只是一個簡單的PRD需求文檔或者草圖，設計師就應該參與進去。
    
          
    
          
        
          
    
          
    
          
        設計師對原型進行優化設計，優化的不是業務，因為很多業務內容肯定沒有產品經理了解得深刻入，這時，設計師需要優化的其實是它的交互邏輯、交互內容，一旦原型里里產生點擊，一旦產生多種狀態，那就要去了解它，每種狀態產生不一樣的界面結果，其實對標的就是設計師設計的界面將產生什么樣的變化，換句話說，如果有界面的變化，內容得變化，設計師就需要參與到其中。目前來看，很少公司有專門的交互設計師，要么這部分工作由UI設計師來完成，要么由產品經理來完成，很多企業已經把設計進行前置化，由UI設計師來完成交互的工作。
    
          
    
          
        
          
    
          
    
          
        其中交互設計+信息架構設計是設計原型圖的關鍵，這兩個是密不可分的，如何制作原型圖，如何在原型圖里設置一些交互事件，給大家推薦《信息架構設計》這本書里有專門講到。再了解原型設計之前，不得不提到一個通用知識點，交互設計的七大定律。（后文有介紹）
    
          
    
          
        
          
    
          
    
          
        框架層（指界面設計、組件設計）
    
          
    
          
        框架層這部分有一些爭議，有的設計師認為就直接做界面設計了，其實框架層還不能把它理解成是界面設計，它僅僅是做了一些業務的模塊兒的框架而已，更多的其實是將它組件化: 將原型組件化、模塊兒化，類似我們直接從Antdesign組件庫復制來內容簡單改改之類得操作，完成的是組件和界面的設計，這些界面并不是最終完整的交付樣式。
    
          
    
          
        
          
    
          
    
          
        表現層（可視化呈現，UI視覺呈現）
    
          
    
          
        這部分和設計師關聯度最大的一部分，就是界面中的配色、配色、圖標、樣式、結構、布局、排版等設計，但是我們設計師需要從范圍層了解業務熟悉最初PRD產品需求文檔去一點點做起，其中設計師在戰略層參與度可能只有2%左右，范圍層參與度5%左右，從結構層開始逐步往上參與度越來越高，至少結構層，框架層和表現層的參與度是很深得。
    
          
    
          
        
          
    
          
    
          
        
          
    
          
    
          
        2.1.2 B端產品的設計過程是什么
    
          
    
          
        
    
          
    
          
        所以，通過梳理用戶體驗五要素，不難看出B端UI設計師的工作流程就是，01. 接到項目后，設計師主要閱讀產品經理給到的PRD需求文檔，同時去參與原型設計，根據最初版PRD輸出一份低保真原型圖，和其他部門進行初次評審；02. 經過初次評審討論過后，完善后的功能和頁面文案，產品經理補全和輸出完善后的產品PRD需求文檔，由設計師根據完善后得PRD需求文檔經過規范設計輸出高保真原型圖 ，與其他部門帶著初次評審討論后的問題，進行二次評審。03. 最終再由設計師經過組件化形成視覺圖。04. 同時設計師提供切圖，與前端緊密溝通，上線前制作設計走查表，進行設計走查。05、最后上線后根據數據、用戶反饋等提出交互和視覺可優化得方案建議，進行版本迭代。
    
          
    
          
        
          
    
          
    
          
        2.2 交互設計七大定律
    
          
    
          
        
          
    
          
    
          
        01. 菲茨定律：當設計師需要讓用戶重點去看到頁面中某一個突出點，點擊到一個區域時，設計師就需要做到適合的大小，適合的區域，適合的位置，適合的形狀，適合的顏色。也就是你想讓用戶點擊的時候就突出重點想顯示的，不想讓用戶點擊退出的，就把它設計的的足夠小。比如按鈕得退出和付款，實心付款按鈕為主要按鈕，虛線置灰退出按鈕為次要按鈕，比如常說的海報中字要大，logo要大，這些都屬于菲茨定律。
    
          
    
          
        
          
    
          
    
          
        02. 席克定律：用戶面對的刺激（或選擇）越多，他們做出決定的時間就越長，由于用戶的時間很寶貴 ，用戶沒有義務花更多留在我們的網站上，所以我們需要有選擇的地方對選擇進行分類。
    
          
    
          
        
          
    
          
    
          
        03. 7土2法則（米勒定律）：比如圓周率3.1415926，一般都能記住，而如果再往后加幾個數字，大家往往很難記住，原因就是經過大量測試，人腦容易記憶7位數字前后得數字，比如設計銀行輸入密碼的時候就用到了7土2 法則，設置密碼過多人腦不易記憶。
    
          
    
          
        
          
    
          
    
          
        04. 接近法則：格式塔接近定律指出“彼此靠近的物體或形狀似乎形成了組”。
    
          
    
          
        
          
    
          
    
          
        05. 防錯原則：當用戶在使用產品中，預判用戶本身或產品一定會出錯時候，可以告訴用戶怎么可以不犯錯，或者將風險降低。比如電腦的關閉電源鍵，就允許電腦司機時允許系統犯錯，讓用戶使用關閉電腦電源鍵進行重啟。比如銀行取出錢后，銀行卡有忘拔現象，銀行完全可以做到像光大銀行那樣去再取錢流程中改成先拔卡再出鈔得交互流程，就可以避免忘記拔卡，但其他銀行都沒有這么改進，仍然是先出鈔后拔卡得原因是允許用戶犯錯。
    
          
    
          
        
          
    
          
    
          
        06. 奧卡姆剃刀原理：化繁為簡，如無必要，勿增實體。比如小米電視遙控器的設計，由原來傳統的很多遙控器按鍵只優化成了保留上下左右為數不多的幾個重要按鍵，原來的遙控器數字按鈕如果真正要輸入數字的時候通過功能性，調出數字來，這樣在遙控器得設計中基本只保留20%主要功能按鍵。這就是交互上的優化。比如在UI界面中，也會用到這個問題，簡化文字，把文字用圖標替換，還有各種流程得優化等等。
    
          
    
          
        
          
    
          
    
          
        07. 雅克布定律：以用戶習慣的使用模式去設計產品，降低用戶學習成本，遵從用戶使用習慣。 利用現有的思維模型，用戶習慣，我們可以創建出色的用戶體驗，使用戶可以專注于自己的任務而不是學習新的模型習慣。
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        2.3 B端產品用戶畫像
    
          
    
          
        
          
    
          
    
          
        2.3.1用戶畫像概念
    
          
    
          
        用戶畫像又稱用戶角色，作為一種勾畫目標用戶、聯系用戶訴求與設計方向的有效工具，用戶畫像在各領域得到了廣泛應用。用戶畫像分為兩種，不論C端和B端都會做這樣的用戶畫像?？偣部煞譃閮刹糠郑拘畔祿托袨閿祿?。
    
          
    
          
        
    
          
    
          
        
          
          
    
          
    
          
        基本信息數據：當我們去了解用戶的基本信息的一些數據時，職業，收入，年齡等等，這些和功能有很多的關聯度，比如唯品會用戶畫像關鍵詞是：女性、折扣、白領 ，唯品會產品定位聚焦女性，這些基礎信息數據，就能給產品帶來很好的結果，當我們要做一個女性的購物平臺的時候，可以先把男性用戶拋除掉去考慮設計方向，再比如收入就知道了，大概產品面向的收入群體將是什么收入群體的人，那么我賣貨的價格區間、包括設計的風格就是一個什么樣群體的設計風格。那些賣奢侈品的不是黑色就是灰色，要不就是棕色，但未必是適合唯品會產品的風格，需要找出這些基本信息去和產品進行關聯度，把基本信息放到設計結果中去考慮。
    
          
    
          
        
          
    
          
    
          
        行為數據：指用戶的愛好，這部分群體有哪些愛好，是喜歡購物，還是喜歡運動，他/她的消費情況是什么，喜歡旅游還是美食，他/她經常用哪些APP，他常用的設備，是蘋果手機呢還是安卓，小米還是華為，等等得到這些數據，也能得到一些用戶喜歡什么樣的競品，這些數據就能側面的在我們的產品中得到反饋，得到功能和設計上的指導和其他產品的區別。這些行為數據，不管我們做C端還是B端，都要獲取到，但C端和B端獲取到這些行為數據的結論是不一樣的。因為C端用戶研究方法不一定適用在B端用戶研究方法。C端最終抽象成一個人，給他帶來的很多屬性，這些等等都會成為他的用戶畫像。
    
          
    
          
        
    
          
    
          
        進而找到這個人，將他的社會屬性，從抽象的角度慢慢變得具象，C端是他/她的社會屬性，把他做成一個普通的人，這個人有他的社會屬性，有他的社會價值，有他的社會行為。比如一個女性，一定喜歡美食，一定會買化妝品。
    
          
    
          
        
          
    
          
    
          
        2.3.2 B端用戶畫像本質
    
          
    
          
        比如做一個和電影相關的管理系統，電影行業包括很多人員管理，設備管理等，這里不能把用戶畫像抽象成一個男性或者女性了，而應該把它抽象成一個職業，比如抽象成一個導演，導演需要去管理什么東西，它需要哪些資源去整合。導演就又叫做行業屬性坐標。B端不以社會屬性去做用戶畫像，一定以行業坐標去做用戶畫像，我們在整理作品集的時候需注意不要與C端畫像整理混淆。
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        我們要做一個行業可以不用管他/她是誰，也可以不用管他/她有什么樣的社會屬性，比如做CRM最重要的在里面起到作用的是，客戶關系管理和銷售等; 比如做OA系統，就是一般的員工，等級，職能等等，可以看出行業屬性(職業屬性)決定了他的用戶畫像的精準度，一定把這個人拉到行業里去研究，研究社會屬性沒有價值。這是C端和B端做用戶研究最大的區別。
    
          
    
          
        
          
    
          
    
          
        2.4 B端產品用戶調研
    
          
    
          
        
          
    
          
    
          
        2.4.1用戶調研的作用/目的/重要性
    
          
    
          
        
          
    
          
    
          
        01. 了解產品業務需求定位：可以幫助了解目標用戶的信息，從用戶的角度：未來使用你產品的用戶，他理不理解你的產品想要表達什么，你的產品講了哪些功能。因為很多好的產品我們打開它第一眼就知道要干什么，是給我們做什么的。同時站在設計者的角度：怎么可以把這個產品設計清楚，比如做一個CRM客戶關系管理系統，具體管理什么我們是不清晰的，想要清晰就需要通過用戶調研這個過程給它展開。
    
          
    
          
        
          
    
          
    
          
        02.解決功能信息架構問題：可以幫助設計師更明確需求功能得合理性和優先級，比如頁面標題的使用、標題的層級、需要在信息層級清晰得情況下體現出來，而明確信息層級同樣需要通過用戶研究體現出來。
    
          
    
          
        
          
    
          
    
          
        03.讓可用性測試更加準確：可以幫助鎖定合適的測試用戶，來測試我們的產品使用程度，使用體驗是不是好，這時需要要找目標用戶去測試，比如小米有品針對群體是米粉，唯品會針對的群體是職場女性，而不像C端找所有的人去測試。
    
          
    
          
        
          
    
          
    
          
        04.解決團隊協作溝通問題：確定用研目標可以有理有據的把設計目標和產品經理的意見達成共識，因為未來一定會多次和產品進行PK，像諸如設計師組件化沒用好這些理由也不會是pk點，確定用研護鏢可以更好的深度去理解原型圖，可以把團隊協作溝通的問題解決好。
    
          
    
          
        
          
    
          
    
          
        2.4.2 用戶調研的方法
    
          
    
          
        
          
    
          
    
          
        01. 確定研究對象：首先拿到一個產品，拿到一個需求的時候，這個需求通常很模糊，比如只告訴做一款CRM客戶關系管理系統，但汽車行業，服裝電商行業，保險行業，銀行金融等等，都有CRM客戶管理系統，不同行業的CRM肯定是不一樣的，這時候，比如要做金融的CRM，那研究方向就已經確定了，金融CRM就可以確定去研究金融行業的業務鏈，業務流程，具體找哪些用戶群體，可以根據以往的驚經驗和產品的目標去確認。
    
          
    
          
        
          
    
          
    
          
        02. 找研究方法 : 研究方法分主動和被動，我們通常用的方法是被動方法，比如自我報告法：當這個產品產生了一些數據，我們從后臺可以拉取這些數據的時候，通過這些數據去分析，這是被動的方法，這個被動的方法所有項目都可以用。而主動的方法，就是觀察和采訪，主動去找用戶去找關聯度。
    
          
    
          
        
          
    
          
    
          
        03. 獲取到數據 : B端和C端區別之一是提高效率，它要產生的結果只有一個結果，就是減少成本，任何B端的系統都是為了實現這個目標，提高效率和減少成本。所以獲取數據，研究數據的方向不能偏離搞錯，用戶研究的方向不要搞錯。比如我們以用戶為中心來設計，就會認為用戶的操作體驗感是第一位的，其實不對，放在第一位去考慮的應該是以系統的最優化，提升效率為第一位，而用戶也可以為這件事情做一些改變而找到平衡點，數據導向得提高效率，減少成本有時會大于用戶的操作體驗。
    
          
    
          
        
          
    
          
    
          
        04. 用研行為: 剛才前面提到的這些注意事項，到底應該找什么方法去得到這些數據呢？第一我們可以通過后臺數據比如通過百度統計等系統來獲得；第二通過問卷法發出一些問卷，用戶可能散落在全國不同位置；第三可以通過用戶定性訪談來獲得；第四可以通過用戶旅程圖來決定用研行為。
    
          
    
          
        
          
    
          
    
          
        05. 分析調研結果: 研究結果不是為了放到我們的B端作品集里的，而研究結果一定是為了去定性、定量、讓數據回歸到產品功能本身。同時經常問自己這些問題，去根據研究結果和問題進行匹配思考，比如研究了那么多，用到了用戶畫像得出的結論了么，用到了哪里？在項目中能舉個例子嗎？采用什么樣的視覺去實現了用戶體驗要素？
    
          
    
          
        
          
    
          
    
          
        2.4.3 B端用戶訪談模板
    
          
    
          
        
          
    
          
    
          
        2.4.3.1 用戶訪談概念：
    
          
    
          
        
          
          
    
          
    
          
        01.確定訪談目標：了解目標用戶群體，通過訪談信息來進一步構建所需要的用戶畫像，從而確定設計方案與功能優先級。02. 定性/定量訪談目標：將這些目標定量、定性，選擇不同的訪問對象，構建不同的角色畫像。比如問銷售的用戶畫像，要找不同的訪問對象，銷售總監，普通實習生等等，三到四個角色，樣本越多，用戶畫像越準確。03. 訪談過程：提前把問題寫出來，拿著問題去聊，用錄音設備，記錄表格，一個提問，一個記錄，分開后記錄比較準確。04.訪談結束：要做信息匯總，要做分析建模。分析建模就是將信息最終變得有意義。
    
          
    
          
        
          
    
          
    
          
        B端用戶訪談模板有30個問題，這30個問題決定了我們的用戶畫像的精準度和產品的用戶畫像的價值。用戶訪談會問些什么問題呢？當我們調研的時候把問題寫出來的時候，就已經解決了一半的問題了。
    
          
    
          
        
          
    
          
    
          
        2.4.3.2 B端用戶訪談30問
    
          
    
          
        
          
          
    
          
    
          
        01、基礎特征
    
          
    
          
        
          
          
    
          
    
          
        崗位：你是從事什么崗位的？是總監還是普通職員？目的是為了知道不同的權限的使用者，進而就可以在系統中設置這些權限。
    
          
    
          
        職責：需要獲取到用戶不同的需求，因為每一個崗位有不同的職責，他們的需求點也是不一樣的。根據這些不同的需求，我們在界面中得動態儀表盤部分，就可以根據不同職責來顯示不同的內容。
    
          
    
          
        姓名：可以讓訪談記錄得到更加真實的體現，目的是可以獲得產品的一些真實的基礎字段。
    
          
    
          
        年齡：是用戶認知和經驗度的體現，用戶的年齡可以代表他們對行業的認知，和整個企業流程的認知程度，一般性理解，用戶的年齡越大，那么他的經驗越豐富。
    
          
    
          
        教育：指用戶是什么學歷，目的是為了了解用戶的經歷與熟練程度，通常認為，用戶的教育越高的人，他們往往使用軟件操作的熟練度會越好。
    
          
    
          
        位置：指用戶在什么地方來使用，目的是知道了場景與優先級，用戶是在寫字樓里還是精英場所來使用我們的產品。因此得出基礎特征是要得出這些結論，得出這些結論進而反饋到產品中去。
    
          
    
          
        
          
          
    
          
    
          
        02、行為接觸點
    
          
    
          
        
          
          
    
          
    
          
        使用頻次：不同的崗位用戶使用功能的優先級是不一樣的，用戶使用頻次越高的功能，這個功能的優先級就越高。了解之后，那在下次迭代的時候就需要把重要級別的功能放在易操作的區域去體現。比如這個重要功能就是一個icon，那么把它放一個快捷入口。
    
          
    
          
        使用時長：也能代表功能的優先級，用戶使用時間最長的功能，代表可這個功能優先級很高。
    
          
    
          
        時間段：用戶在什么時間段使用的是最多的，我們就知道了這個功能的活躍度，這個數據指標，主要和技術有關，我們可以從后臺數據去獲得。
    
          
    
          
        使用設備：用戶使用設備兼容的優先級，平時用戶用什么設備，再訪談過程中，需要問具體使用電腦的分辨率，屏幕的尺寸，屏幕的比例，都可以去實際的調研一下。在我們做B端界面選擇屏幕尺寸的時候，可以采用結合實際情況用戶使用的屏幕分辨率尺寸來設計界面。
    
          
    
          
        相關軟件：用戶平時的操作習慣和流程是什么，還會使用其他軟件嗎？比如他們還用什么其他的競品，可以繼續問用戶其他的競品哪里比較好，哪里是亮點，那最終得到的目標就是用戶的操作習慣和流程，這些也可都可以反饋在我們產品中。
    
          
    
          
        
          
    
          
    
          
        03. 使用環境
    
          
    
          
        
          
          
    
          
    
          
        碎片化時間：主要解決用戶場景的問題，比如汽車4S店銷售，當你去買車時，銷售人員會問，你會買什么樣的車，會記錄你的年齡，用車習慣，用車時間，姓名，預算，都會記錄，銷售通常會用一些碎片化的時間去記錄。此時就可以得出兩個結論：1.我們在設計的時候是否可以考慮讓銷售充分利用碎片化來進行這些信息的錄入，而且方便他的錄入，比如他本來只有電腦端，電腦端是一個完整版的功能，我們能不能給他設計出一個移動端來，讓銷售不用回到電腦屏幕中就可以去記錄這些內容。2. 記錄時也有兩種記錄方式，是客戶講話的時候銷售去記錄還是這些事情做完之后銷售再去記錄。通過這樣的行為會得到這樣不同的設計結果，比如有人問你們公司為什么要做B端的移動端設計？以上就可以有理有據去解決銷售的場景問題。
    
          
    
          
        
          
    
          
    
          
        用戶的操作環境是什么：主要解決視覺體驗問題，用戶是白天操作還是晚上操作，是在強光環境操作還是弱光環境操作。這些都應該是考的點。比如B端使用的ATM機，應該設計成白色還是深色模式，我們知道一般都是深色模式，是因為通常是室內，它和光線有關系，如果是室外的取款機，四周又沒有遮擋，如果還設計成深色，肯定是看不清楚的。比如HMI車載系統，白天模式開了深色，一定會看不清楚。所以要提前判斷使用深色模式還是淺色模式，也需要考慮在設計的時候使用什么樣的色彩和色調，在室外使用還是室內使用，如果對色彩不怎么挑，那也可以使用VI色，這樣一來視覺的保障色就確定了。還可以確定在使用周期時間，要多長時間完成一個操作，應該使用什么樣的方法可以盡快完成一個操作。通過用戶的操作環境可以得到以上信息。
    
          
    
          
        
          
    
          
    
          
        是否有平行事件：用戶在做這件事情的同時，他是不是需要做其他的事情，要得出至少兩種平行事件，得到的結論是，我們的界面是不是需要把某些功能整合在一起，因為用戶經常是需要同時做這兩種事情，同時去打開這兩個功能，通過這樣的反饋可以把同時使用的這兩個功能結合到一起，通過訪談可以得到這樣的依據，來進行功能的整合。
    
          
    
          
        
          
    
          
    
          
        04. 主動詢問用戶觀點
    
          
    
          
        
          
          
    
          
    
          
        用戶的驅動力: 去了解激勵因素，就知道了什么功能應該做完善，什么功能并沒有那么重要。比如汽車銷售為什么要錄入信息，因為可以增加汽車的銷量，錄入越準確的用戶信息，他的銷售量越高。也就是用戶做這件事情，他的原因是什么。
    
          
    
          
        
          
    
          
    
          
        用戶遇到最難事件: 在工作中或者用戶使用過程中遇見了什么樣難的事情，這件難的事情，就是產品的痛點，就明白了當前產品迫切需要什么樣的功能去幫我們設計師來解決當前產品痛點的問題。
    
          
    
          
        
          
    
          
    
          
        用戶遇到最颯事件:他在使用過程中最滿意的是什么事情，就是爽點是什么事情，那些產品中解決了用戶很好的問題的部分，去把產品更好的放大，讓用戶繼續使用。也就是通過訪談我們知道了產品的爽點是什么。
    
          
    
          
        
          
    
          
    
          
        用戶擔心事件:在他們使用過程中擔心的是什么，我們也要要了解這些隱藏的問題.
    
          
    
          
        
          
    
          
    
          
        用戶期望事件: 用戶希望得到什么樣的改善，最終的目標是想解決什么樣的問題，到這一步其實所有問題目前都沒有答案，我們可以繼續訪問，先做記錄，不做最終的答案.
    
          
    
          
        
          
    
          
    
          
        問用戶目前狀態: 我們可以了解待解決的問題，通過產品想解決什么問題，進行收集需求；用戶對于產品升級有什么小期待，進行收集需求；通過用戶的反饋目前產品的哪些問題，收集到目前反饋的問題；以往問題是否有效解決；進行收集反饋。覺得不錯的同類型產品有哪些，通過了解競品情報，我們可以競量多問一些 覺得不錯的競品有哪些；目前產品有哪些地方很好，很好的地方要保持，有的產品升級后，以前特別好的功能突然消失了，改了沒必要，好的功能保持就可以；前產品有哪些地方不好，我們去優化不好的地方；以往問題是否有效解決，當有問題需要解決的時候，用戶的問題是否是通暢的。通過看用戶如何反饋，我們可以了解功能傾向，了解整個流程是否通暢
    
          
    
          
        
          
    
          
    
          
        05. 聊生活
    
          
    
          
        發覺人性閃光點，提升產品差異競爭力，1、問目前的生活狀態，婚姻狀態，有沒有孩子，接送孩子的時間，平時有什么愛好？什么愛好不錯？發覺人人性的閃光點，好的不好的產品都有共性，B端產品中視覺的傾向是什么？比如有插畫，溫馨的語言提示，通過什么樣的情感設計可以照顧到每個人的生活。
    
          
    
          
        
          
    
          
    
          
        2.4.4 B端用戶訪談得出結論
    
          
    
          
        
          
    
          
    
          
        如何判斷功能在用戶那里好還是不好？前面所有的都只是在記錄，現在才是在做判斷，判斷的第一件事，是做定量的整理，所有的問題都收集到了，也記錄到了，至少需要有兩個樣本，去做定量整理。
    
          
    
          
        2.4.4.1定量整理：行為
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        第一步是行為的總結，量級的總結，把記錄的問題點、功能點和關鍵詞放到表格里面，經常出現，迫切需要解決的是什么問題，較少的問題是什么，偶爾的行為問題是什么，因此偶爾的優先級就不高了，主要關注經常遇到的問題點、功能點和關鍵詞。
    
          
    
          
        
          
    
          
    
          
        2.4.4.2 定量整理：特征
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        把每個角色按照以下表格里的的特征進行定量的描述，這時候仍然不能找出它的共性點，但已經把用戶的特征進行分類整理了，定量之后再去定性。
    
          
    
          
        
          
    
          
    
          
        2.4.4.3 定量整理：特征/角色/流程
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        這個角色名稱是一個具體的名字，比如王某某。以下這張表：可以看到在我們的系統中有哪些的權限，有哪些的角色，他們的需求是怎么樣的，這是一個完整的用戶畫像。用戶畫像是一個結果，是通過用戶訪談的形式完成了用戶畫像，并不是被動的接受數據信息得出的，所以通過用戶訪談的形式進行定量定性分析得到的結果是最準確的。
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        3.1 建立情緒版
    
          
    
          
        
          
    
          
    
          
        3.1.1 情緒版的概念及作用
    
          
    
          
        本質是將情緒視覺化，情緒版并不是玄學的東西，它確實可以通過圖片找到對應的圖形元素，因為圖形（照片）是可以表達情緒的，比如看到一張照片會感受什么什么情緒：熱、冷、餓、干渴、安靜、壓抑、神秘、恐怖、失落、沮喪、速度、力量這些都是情緒相關的關鍵詞。
    
          
    
          
        
          
    
          
    
          
        情緒版是一個特別快速能和產品，我們的團隊包括設計團隊進行溝通的一種方式，比如要設計一個界面，需要幾天才能設計出來，但我想提前知道一下未來界面設計成什么樣子，那就先做一個情緒版，讓大家知道，找的方向是什么，這樣適合與大家及時的溝通，大家也會明白產品將會做成什么樣子，達成產品的最終設計定調。
    
          
    
          
        
          
    
          
    
          
        3.1.2 怎么建立情緒版
    
          
    
          
        
          
    
          
    
          
        01. 提煉關鍵詞：獲取本次產品設計中所要實現的產品3-5個必要的關鍵字詞組，其中包括交互或視覺目標，通常由一些比較抽象的形容詞組成。比如：在做的產品是醫療行業，那么醫療相關關鍵字詞組是：生命/健康/安全等。
    
          
    
          
        
          
    
          
    
          
        02.關鍵詞發散：通過獲取到的關鍵詞的基礎上，發散出來一些新的詞語，這種發散詞匯，不是簡單頭腦風暴產生的，而是要有目的性的進行提取，要更加的具體。比如剛才舉例醫療行業，生命可以繼續發散出血液、器官等衍生關鍵詞。
    
          
    
          
        
          
    
          
    
          
        03. 搜索圖形: 對之前總結出的幾個關鍵詞在圖庫中進行查找，也可以在直接在behance里找別人收藏好的情緒版圖片直接用，效率可能更高一點。
    
          
    
          
        
          
    
          
    
          
        04. 制作情緒版: 搜索大量圖片后，挑出我們需要的進行整理，采用一種拼貼方式進行設計排版，拼貼出來需要得到需要得到的色彩，構圖，質感和字體。
    
          
    
          
        
          
    
          
    
          
        05. 得出結論: 在圖形、色彩、字體、質感、構圖，以上五點，得到合適的設計方案，快速與團隊進行溝通，直觀表達產品清徐，達成產品的設計定調。產品調性（企業調性）其實就是用企業的方式把故事講述出來，是一種通過情緒版方法來講故事的方式。
    
          
    
          
        
          
    
          
    
          
        3.2 品牌三元法
    
          
    
          
        
          
    
          
    
          
        3.2.1 品牌三元法為什么逐漸替代情緒版
    
          
    
          
        
          
    
          
    
          
        品牌三元法是通過品牌三板斧模型得出的一個確定設計主風格的一種新得方法，品牌三板斧模型可以總概為用戶調研關鍵的三個維度，一目標用戶是誰？二產品服務是什么？三對于目標用戶來說，你的產品服務有什么核心價值。當在回答完這三個問題以后，我們其實就已經清楚我們的品牌定位是什么了，因為它的核心優勢是比較明顯的，這樣我們就知道我們將來會面對什么樣的人群，去怎樣去宣傳它的賣點，同時做出產品的差異化。
    
          
    
          
        
          
    
          
    
          
        通過這幾年得工作案例設計實踐，在確定設計主風格時，情緒版方法逐漸有被品牌三元法替代得趨勢，因為情緒版這種把抽象的詞不太好表現的詞，翻譯成圖片的方式，比如剛才提到醫療行業的關鍵詞是生命，健康，安全的，設計師找到很多這種相關的圖片，挑出來后從這些圖片里面找到一個共同的規律，最后去設計。這里面就有兩個問題，一個原因是關鍵詞非常的平，生面，安全，健康，很難更準確的表達衍生關鍵詞。另外一個問題是它非常局限設計師的創意，因為它是從一些現有的圖片里面然后去挑，所以很多設計師就反饋現有的方法不是很好用，比如當我們想到安全這個詞，可能所有人想到都是特別綠的感覺，或者干凈這個詞，就會統一聯想到白色這個畫面，大家從一開始想法就差不多，所以它很難體現出創意。所以由于情緒版嚴重限制了自己的想象力，沒辦法把產品核心的氣質表現出來，雖然情緒版正確但是是一個平庸的結果，大家沒辦法記住的結果。
    
          
    
          
        
          
    
          
    
          
        3.2.2 如何應用品牌三元法
    
          
    
          
        
    
          
    
          
        
          
    
          
    
          
        01. 理性層面（業務層面），傳遞產品理念：獲取本次產品設計中體現業務層面，可以傳達產品理念得5-10個關鍵詞，對應的放在左邊。
    
          
    
          
        
          
          
    
          
    
          
        02. 感性層面（人文層面），營造產品氛圍：主要體現這個產品給用戶帶來什么好處，宣傳的角度是什么。獲取本次產品設計中體現人文層面，可以傳達產品氛圍的5-10個關鍵詞，對應的放在右邊。
    
          
    
          
        
          
    
          
    
          
        03. 個性層面（氣質靈魂），創造獨特風格：結合理性的業務層面和感性的人文層面，來創作出什么樣的畫面，和獨特風格的感覺。同樣總結出5個左右的關鍵詞，放在下邊。
    
          
    
          
        
          
    
          
    
          
        04. 結合以上三個維度，提煉主視覺畫面：當出現這三部分詞的時候，經過思考或者大家一起頭腦風暴，可能一開始想到的比較淺，但最終一定能想到一個最終關鍵詞或者特別符合我們這個產品氣質的畫面，因為以上三部分得出關鍵詞也都是經過品牌三板斧模型推演出有關聯的關鍵詞，想到一個符合產品氣質的畫面并不難，再得出這個主視覺畫面后，這就是最終產品調性的主視覺，既符合產品定位，又具有獨特的差異性。
    
          
    
          
        
          
    
          
    
          
        05. 傳達產品，用視覺語言講故事：接下來，當這個主題、主視覺確定了以后，在看怎么樣用具體的視覺設計技能，去傳達我們的產品，也就是用視覺語言來講故事，具體注意三個方面，一是表像，元素要符合這個視覺主題，二是關聯，元素之間要具有關聯。三是隱喻，用視覺的手段含蓄的表達產品的一些特性。比如云計算的一些產品，做得比較復雜每一個圖標上都有一些曲線切割的畫面，這樣做的原因其實不是為了炫技，它是為了表達云計算彈性可擴展的特性，好比拍電影，中國人講究隱晦。
    
          
    
          
        
          
    
          
    
          
        
    
          
    
          
        4.1 色彩規范
    
          
    
          
        
          
    
          
    
          
        4.1.1 選色
    
          
    
          
        
    
          
    
          
        在系統色彩中，以Antdedign為例，系統色彩里包含了很多不同的色調，但不可能用到這么多顏色，這時要應用選擇幾個顏色，選幾個我們應用的顏色。第一步要做的就是選色，選出應用色彩，這個應用色彩也就是我們建立得視覺規范中的基礎色板，在選色時候需注意，要有有明確的心理預期，比如醫療行業中常用藍色和綠色，就是符合預期的顏色。在基礎色板里選擇調色，應選擇兩個相同級別的藍色和綠色；基礎色板里選不同顏色時不要超過三個級別的跳躍；當選擇一個確定的顏色時，可以選擇草綠或者青綠色來作為輔助色；在基礎色板里，最頂部的顏色最適合做背景色，中間的顏色適合做按鈕色，底部的顏色適合做狀態色，或者小面積文字的填充色，其余就是搭配過度的作用。再比如零售、比如金融行業的產品，會選擇不同的顏色，那這些顏色代表了什么，是不是會和企業的VI色是有相符之處，這些都是我們去要考慮的。
    
          
    
          
        
          
    
          
    
          
        4.1.2 注意色彩的兩個特性
    
          
    
          
        
          
    
          
    
          
        01. 注意品牌性：體現特性和傳播理念、價值觀：比如宜家，我們立刻會想到的是黃色和藍色。比如京東，我們會想到紅色。如果是餓了么，我們會想到藍色。這些都是標識性的色彩，體現和傳遞的就是品牌理念和價值觀。這些顏色一定不是隨便選的，比如，宜家的黃色和藍色，其實是瑞典的國旗的顏色，代表著宜家的來源地來源于瑞典，因為瑞典是一個很強調簡約設計的國家，貫穿始終是在強調它的的價值觀。一些關鍵行動點：比如選中的狀態，按鈕的顏色，在很重要的地方用主色表達，這就是在體現B端的產品的色彩價值觀和企業價值觀的地方
    
          
    
          
        
          
    
          
    
          
        02. 注意色彩的功能性：色彩需要體現功能有明確的信息以及狀態含義，色彩代表它獨特的含義，比如成功色，通常會選擇綠色，再系統色板里，青綠草綠都可以選。比如出錯/刪除/失敗用紅色，表示警告警示。比如鏈接要用藍色。
    
          
    
          
        
          
    
          
    
          
        4.2 圖標規范
    
          
    
          
        畫圖標要注意圖標的識別性、統一性和獨特性。圖標首先要一眼看出來表達的含義，其次是圖標設計圖標的大小，線寬粗細，圓角大小，圖標風格等這些都需要統一，最后最好可以體現出圖標的獨特性，獨特性就是差異化，這也是品牌三遠法得核心，塑造產品的差異化，具體分析方法也可應用在圖表設計當中，比如根據品牌基因進行延展，也可根據主風格主視覺設計定調，設計出獨特風格且符合產品定位得圖標應用在產品當中。
    
          
    
          
        
          
    
          
    
          
        4.3 文字規范
    
          
    
          
        
          
    
          
    
          
        4.3.1 字體家族
    
          
    
          
        在B端頁面中字體的顯示順序，有固定的一套代碼模式，可以理解為，比如有的用戶電腦沒有平方字體，所以會顯示出冬青黑體，來替代平方字體的設計稿，如果沒有冬青黑體，就用微軟雅黑替代顯示，字體家族中，從左到右代表了字體顯示的有限順序，平方、冬青黑體、微軟雅黑、黑體、宋體，中英文都是。
    
          
    
          
        
          
    
          
    
          
        4.3.2 主字體
    
          
    
          
        在系統中有中文常用PingFangSC、微軟雅黑、思源黑體；英文常用San FranciscoUI（SF字體）、Helvetica Neue、Arial
    
          
    
          
        
          
    
          
    
          
        4.3.3 大小與行高
    
          
    
          
        
          
    
          
    
          
        方法一：在Antdesign中規定的，比如字體大小是14px，行高就是22px。規范里最小字體是14px，但可能有注釋字體，字號最小是12px。表格里的內容是按照表格里的行高來約定的，與字體行高無關，這個前提是，不在表格里內。當沒有出現文本字體，表格里的字體的時候就需要去設置字體的行高，Figma里默認行高是140%，比如14px字體，行高就設置成22。這是Antdesign里的規范，但不是唯一的規范。需要注意的是，如果使用一個標準就全部使用一個標準，這個需要把選中文字段落進行調整行高。
    
          
    
          
        
          
    
          
    
          
        方法二：是當按倍率去算的行高規范，方法步驟是先調整好行高，去改變字體大小，比如無行高時，1/100%/1倍行高，注意加上%號；緊湊行高，1.3行高/130%；常規行高1.5行高/150%；寬松行高，1.7行高/170%。
    
          
    
          
        
          
    
          
    
          
        4.3.4 文字的層級關系
    
          
    
          
        輔助文字12px、正文（小）13px、正文（常規）14px、小標題（16px，小標題是相對于14號字出現的）、標題18px、主標題20px
    
          
    
          
        
          
    
          
    
          
        4.3.5 字重
    
          
    
          
        比如常用的蘋方有6個字重，但在平時的設計中根本用不上。中文環境6個字重在實際顯示并沒那么好，常用兩個字體，萍方常規體400（常規），蘋方中黑體500（粗體）。而英文可以用粗體600。
    
          
    
          
        
          
    
          
    
          
        4.3.6 字體顏色
    
          
    
          
        在深色背景下、和淺色背景下不同內容的色彩透明度不同，具體透明度用百分比顯示。在彩色背景下或者在不同顏色之下，字體應該使用白色還是黑色，應該按著規范嚴格使用，難點在顏色相近的時候選擇白色還是黑色，也需按照規范執行。
    
          
    
          
        
          
    
          
    
          
        4.3.7 文字對齊關系
    
          
    
          
        
    
          
    
          
        
          
          
    
          
    
          
        文案類對齊：頁面的字段、段落較短標題、需正文左對齊
    
          
    
          
        
          
    
          
    
          
        表單類對齊：保證整齊適合閱讀，冒號對齊法找到中間的冒號，（左右對齊），如果全部使用左對齊或者右對齊會更亂。左邊一般最長字段六個字。前提是中文環境，不是國際化。冒號左右要留多少像素：8px的倍數相關值，4（窄點）、8（正常）、12、16（寬一點）都可以。
    
          
    
          
        
          
    
          
    
          
        數字類對齊：日期，居中對齊；年齡，居中對齊/左對齊；非固定的數字：價格，采用右對齊，因為右對齊很容易看到價格的多少，哪個超出的更多，就越貴的，更容易區分數字的多少。
    
          
    
          
        
          
    
          
    
          
        4.4 層級規范
    
          
    
          
        
          
    
          
    
          
        層級規范得核心是對信息的間隔和區分，信息的區分間隔要用偶數8的倍數。具體可分為同層級的區分，用色塊（比如氣泡）、邊框（欄目之間抖索狂等）、線段來進行區分。錯層區分，用彈窗（背景變暗）、邊框陰影（陰影的出現是擬物化的出現，當物體離它的光源越近，比如高度越高，它的陰影就越大越寬。離它的底部越近，陰影就越小，比如下拉框、搜索框、日歷控件、彈出窗口來區分）。
    
          
    
          
        
          
    
          
    
          
        這里需注意，關于投影，再前端角度考慮盡量不要用太多的特效濾鏡來設計，因為在B端網頁中，瀏覽器的兼容性不好，比如用ie瀏覽器就根本看不到這樣的效果，如果用谷歌瀏覽器能看到，用safri瀏覽器能看到，但在火狐下等又會看不到，想要都看到就需要兼容很多代碼，需要前端加很多代碼實現兼容性的效果，很增加前端的工作量，所以在B端很少用非標準型的濾鏡代碼使用，雖然可以實現，但一般不太用，一般就是變灰、變深、變透明度最簡單的方法實現。不同于移動端，因為IOS用的是原生的開發，所以不存在這個問題。
    
          
    
          
        
          
            
          
文章來源：站酷   作者：morning_c
          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
        
          
        
          
            免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
        
          
        
          
            藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
        
          
        
          
            
          
        
          
    
          
    
          
        
          
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(3102)
              
                          
          
          
          
                      
          
            
            
          金融科技的下一站
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        相比于傳統金融而言，科技為金融提供了巨大的動能。探討科技主導下的金融科技的發展之道，對于當下的行業發展具有至關重要的作用。本篇文章對此進行了詳細的闡述，推薦對金融科技感興趣的朋友們閱讀。
    
          

          

          
    
          

          

          
    如果一定要為現在的金融科技玩家尋找一個注腳的話，或許「科技」在恰當不過了。

          

          
    沒錯，幾乎所有的金融科技玩家都在用「科技」標榜自己，逐漸變成了當初他們宣揚自己的樣子。

          

          
    事實上，當初的金融科技玩家并不想要成為科技玩家，他們口中所謂的「科技」僅僅只是一個名頭而已，他們真正從事的依然是金融的買賣。

          

          
    事實證明，僅僅只是將「科技」當成幌子，并不能夠帶來長久發展，而只有真正投身「科技」的懷抱，告別對于「金融」的幻想，金融科技的發展才能行穩致遠。

          

          
    正是因為如此，當以螞蟻金服、京東數科為代表的一眾金融科技公司的發展被監管，越來越多的金融科技玩家才徹底打消了對金融的幻想，真正投身到了科技的賽道上。

          

          
    很顯然，「科技」并沒有「金融」那樣立竿見影的效果，對于玩家們來講，投身到「科技」的賽道上預示著他們需要付出比以往更多的努力，才能獲得發展。

          

          
    另外，投身到「科技」的賽道上，是沒有樣板可以借鑒的，他們需要自己摸著石頭過河，才能找到一條真正符合自己的發展道路。

          

          
    因此，探討「科技」主導下的金融科技的發展之道，對于當下的行業發展具有至關重要的作用。它直接關系著金融科技的未來，甚至直接關系著金融科技玩家們的前途命運。

          

          
    一、回歸金融主體，科技化整為零

          

          
    無論是在互聯網金融時代，還是在金融科技時代，我們之所以會遭遇如此多的困境與難題，其中一個很重要的原因在于，科技取代金融成為了主體，最終讓金融行業的發展和進化出現了失焦。

          

          
    因此，當「科技」成為金融科技的避風港，我們首先要做的就是要讓其回歸金融主體，科技化整為零。

          

          
    所謂的金融回歸主體，其實就是要用金融的邏輯和規律來行事，而不能脫離金融本身，放任科技的發展。

          

          
    我們看到的金融科技和互聯網金融之所以會出現如此多的亂象，其中一個很重要的原因就在于，他們從本質上是做科技的，而不是做金融的。

          

          
    一旦脫離了金融的規律，所謂的金融變種，必然走入到死循環。

          

          
    所謂的科技化整為零，其實就是要讓科技成為金融行業的一份子，成為金融行業的「基礎設施」，而「科技」的外在表現是金融的，而不是科技的。

          

          
    只有這樣，科技與金融才能真正實現深度而又全面的融合，否則的話，金融與科技僅僅只是簡單相加，并不能夠帶來本質性的改變。

          

          
    當「科技」成為主流，我們需要做的就是要尋找到回歸金融主體的正確方式和方法，不能脫離「金融」而講「科技」，一旦脫離了「金融」而講「科技」，那么，縱然是躲過了監管，「科技」同樣將會因為沒有實體行業的滋養而枯萎。

          

          
    只有真正做到了回歸金融主體，實現了科技的化整為零，金融科技的發展才能有營養，有動能，最后，才能有發展。

          

          
    二、流量并非目標，行業才是關鍵

          

          
    無論是在互聯網金融時代，還是在金融科技時代，我們借助科技來改造金融的目的其實是很明確的，基本上都是為了流量而來。

          

          
    在流量充沛的大背景下，這種發展模式尚且存在一定的發展空間，一旦流量紅利不再，盲目地以流量為終極目標，不僅無法帶來流量的增長，甚至還會有害于金融行業的良性發展。

          

          
    當「科技」成為玩家們新的避風港，我們需要做的就是要拋棄流量觀，真正將關注的焦點更多地聚焦在行業上。

          

          
    通過科技對于金融行業的深度改造，為金融行業的發展找到新客戶，找到新方向，開辟新機會。

          

          
    總結起來，一句話，就是要將改造行業，而不是獲取用不看成是下一個階段的金融進化的關鍵。

          

          
    在這個過程當中，我們可以：

          

            
    
          • 
        優化金融的運行邏輯
    
            • 
    
          • 
        創新金融的產品
    
            • 
    
          • 
        提升金融的運行效率
    
            • 

          

          
    只要金融本身有了本質的改變，不僅可以繼續挖掘存量時代的新機會，而且可以讓金融行業的發展獲得更多新的發展機會。

          

          
    因此，當「科技」成為金融科技新階段的主導，我們需要拋棄對于流量的迷戀，通過將更多時間和精力放置于金融行業本身，從而找到存量時代的金融行業新機會。

          

          
    三、割裂無出路，融合正當時

          

          
    無論是在互聯網金融時代，還是在金融科技時代，「科技」與「金融」兩種元素之間的關系都僅僅只是一種簡單相加的關系。

          

          
    換句話說，在互聯網金融時代和金融科技時代，「科技」和「金融」之間依然是獨立的，割裂的關系，并未真正實現真正意義上的融合。

          

          
    盡管這種簡單相加帶來了一定的發展，但是，這樣的發展基本上是在收割紅利，等到紅利不再，「金融」與「科技」的這樣一種割裂的關系，必然會面臨困境。

          

          
    當「科技」成為金融科技未來發展的主導，特別是當越來越多的科技玩家開始投身到「科技」的洪流里的時候，我們更加需要對「金融」與「科技」的本質有一個正確的認識。

          

          
    什么是科技？什么是金融？

          

          
    說到底，無論是金融，還是科技，其實都是相當基礎的，相當底層的存在，它們存在的巨大的意義就是要建構起新型的實體經濟的大廈。

          

          
    說白了，無論是金融，還是科技，只有與實體經濟實現了深度融合，才能讓兩者的功能和作用發揮到最大。

          

          
    那么，在互聯網金融時代和金融科技時代，「金融」與「科技」兩種元素是不是真正發揮了它們應有的功能和作用呢？

          

          
    很顯然，沒有。

          

          
    它們僅僅只是發揮了最末端的功能和作用——收割流量的功能和作用，而沒有真正找到與實體經濟結合的方式和方法。這是我們看到互聯網金融和金融科技之所以會陷入到死胡同的根本原因。

          

          
    當「科技」成為金融科技的主導，給了我們一個非常明顯的信號，即我們不能再像以往那樣收割流量了，不能再像以往那樣只做末端的買賣了。我們需要回歸本質，找到「融合之道」。

          

          
    需要明確的是，這里的「融合」，其實有兩個層面的意思：

          

            
    
          1. 
        我們需要找到「金融」與「科技」兩種元素的融合之道，讓這樣兩個原本并不想干的存在，有統一的表達方式，實現真正意義上的融通；
    
            2. 
    
          2. 
        我們需要找到「金融」、「科技」和實體經濟之間融合的正確方式。
    
            3. 

          

          
    試想一下，當「金融」與「科技」實現了深度而又全面的融合；當「金融」、「科技」與實體經濟實現了深度而又全面的融合，那么，它們的發展無疑可以跳出以往僅僅只是基于流量為主導的發展模式，真正進入到一個全新的發展周期。

          

          
    當以「金融」為主導的金融科技的發展模式被叫停，我們看到的是越來越多的玩家開始將關注的焦點聚焦在了「科技」上。

          

          
    于是，「科技」成為了下一個發展階段的主導。

          

          
    很顯然，這種全新的發展模式，不僅可以帶來金融的新進化，同樣可以帶來科技的新進化。
          

          
    
          
        
          
文章來源：人人都是產品經理   作者：孟永輝
          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          
    
          
        
          
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(1645)
              
                          
          
          
          
                      
          
            
            
          體驗設計常用的5個研究方法論
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        概念
    
          

          

          
    “用戶體驗”一詞最早出現在 1990 年代， 認知心理學家唐·諾曼 (Don Norman) 隨著技術使用的擴大和發展。 雖然這個詞在最近幾年才越來越被廣泛的認識，但用戶體驗的原則實際上可以追溯到幾千年前，中國古代風水實踐起始的時候。

          

          
    先來認識一下用戶體驗的概念吧，用戶體驗是一個人或者用戶與產品的互動感覺與體驗。產品是一種商品、服務或功能。 它可能是一個實體產品，也可以是虛擬產品，比如我們所熟知的手機程序、網頁等。

          

          
    評價一個產品是否擁有良好的體驗的標準是公平、愉快、可用、有用。在設計時考慮原先被排除在外的用戶群體是體現公平的關鍵，比如殘章人士，或與自己有截然不同生活經歷的人。用戶體驗設計中五個最常用的框架: 以用戶為中心的設計過程、 五要素框架、設計思維框架、精益設計（MVP）、雙鉆模型。 選擇其中某一個方法來滿足你的設計需求，這也取決于公司、團隊或項目，我們也許不會每次都使用相同的框架。

          

          
    
          
          

          

          
    

          

          
    
          
        1.用戶為中心的設計過程
    
          

          

          
    這是一種設計方法流程，它在每一個階段都關注用戶及其需求。這是一個迭代過程，意味著設計師將一次又一次的回到某些階段，通過這樣的方式來優化我們的設計并為我們的目標用戶創造最好的產品。

          

          
    以用戶為中心的設計過程的核心是同理心，對我們目標用戶深刻的同情。這不僅僅是關于產品為用戶做了什么，而是關于如何讓用戶感知我們的交互設計。

          

          
    以下是以用戶為中心的設計過程中的關鍵步驟：

          

            
    
          • 
        
            
            了解用戶如何體驗產品。我們想知道用戶是如何參與我們的設計，以及他們將在其中體驗產品的環境，理解這一點需要大量的研究，比如觀察用戶的行動和進行采訪，這些方法將在后面進行探討。
        
            
    
            • 
    
          • 
        
            
            指定用戶的需求。根據我們在上一步的研究，找出最需要解決的用戶問題。
        
            
    
            • 
    
          • 
        
            
            設計解決方案。為需要解決的需求提出多種可能解決方案，然后開始實際設計這些想法！
        
            
    
            • 
    
          • 
        
            
            驗證解決方案。問問自己，我創建的設計是否解決了用戶的問題？要回答這個問題，這里我們應該與真人一起測試自己設計的產品并收集反饋。
        
            
    
            • 

          

          
    

          

          
    示意圖中的箭頭說明了以用戶為中心的設計過程的迭代質量。設計師回到流程的早期階段來完善和修正他們的設計。通過以用戶為中心的設計流程，始終致力于改善用戶體驗并解決用戶面臨的問題！

          

          
    以用戶為中心的設計過程的指導原則：

          

          
    為用戶及其需求而設計（可用性原則）

          

          
    按照我們自己的想法來設計是新手設計師常常容易陷入的誤區，因為它看起來很酷或解決了您自己的問題之一。但請務必記住，你不是用戶。你正在設計以幫助具有特定需求的不同人群。

          

          
    使您的文案具有對話性（環境貼近原則）

          

          
    產品設計中的文字應該具有友好、簡單且易于理解的語氣。避免使用用戶可能不理解的行話或過于復雜的術語。

          

          
    清楚地呈現所有信息（易取原則）

          

          
    用戶應該能夠輕松瀏覽您的產品設計，而無需其他人的幫助。使關鍵信息（如結帳按鈕）易于查找和識別。

          

          
    確認用戶操作（狀態可見原則）

          

          
    您的產品應該讓用戶知道他們何時正確執行了任務。這可能像按下圖標時彈出一個新窗口一樣簡單，也可能像用動畫扔的五彩紙屑來證明用戶已完成任務一樣復雜。 

          

          
    提供支持（人性化幫助原則）

          

          
    作為 UX 設計師，我們的目標是讓每個用戶都可以訪問和理解設計，但有時我們會做得不夠。為用戶提供安全網，例如支持中心或常見問題列表。確保沮喪的用戶不必在整個產品上滑動和點擊來尋求幫助。

          

          
    
          

          

          
    
          
        2.五要素設計框架
    
          

          

          
    用戶體驗五要素已經是老生常談的一個概念了，它是Jesse James Garrett在《用戶體驗要素-以用戶為中心的產品設計》（The elements of user experience - user-centered design for the web and beyond）中提到的概念。作者Jesse James Garrett還有一個名頭，那就是“Ajax之父”。

          

          
    用戶體驗設計的五個要素是用戶體驗設計師將想法轉化為工作產品的步驟框架。這五個要素從下到上是：戰略、范圍、結構、骨架和表面。將這些視為一組五層，其中每一層都依賴于它下面的一層。

          

          
    

          

            
    
          • 
        
            
            戰略：底層是戰略，在此為設計目標奠定基礎。這些目標基于用戶需求和產品的業務目標。
        
            
    
            • 
    
          • 
        
            
            范圍：下一層是范圍，你可以在其中確定正在構建的產品類型。這一層將考慮要包含在產品中的功能和內容類型。
        
            
    
            • 
    
          • 
        
            
            結構：中間層是結構，也就是整個產品的信息結構。在這里，你將了解如何組織您的設計以及你希望用戶如何與產品進行交互。
        
            
    
            • 
    
          • 
        
            
            框架：框架是產品的布局。就像我們骨骼的布局塑造我們的皮膚一樣，框架層詳細說明了你的設計是如何工作的。
        
            
    
            • 
    
          • 
        
            
            表現：頂層，即表面，代表產品對用戶的外觀。表現代表用戶查看和交互的界面。將表現想象成外部世界可見的衣服或化妝品。
        
            
        
            
            
            
        
            
    
            • 

          

          
    
          
        3.設計思維過程
    
          

          

          
    設計思維是一種創建解決方案的方式來解決用戶的問題。設計思維有五個可操作的步驟：

          

          
     移情、定義、構思、原型和測試。

          

          
    

          

          
    
          

          

          
    第一步：移情

          

          
    這是關于發現用戶真正關心的是什么，設計師需要并學習如何像他們一樣思考和感受。 你可能會進行調查、訪談或觀察會議，清楚地描繪出你的最終用戶是誰以及他們面臨的挑戰。

          

          
    第二步：定義

          

          
    通過創建清晰的問題陳述來定義問題。 問題陳述是對用戶的清晰描述需要解決的問題。 問題陳述應基于用戶研究和，它讓團隊專注于一個明確的目標。后面我們會講到該如何創建問題陳述。

          

          
    第三步：構思

          

          
     一旦我們定義了問題，我們就可以開始構思或集思廣益解決方案。 你的目標應該是想出盡可能多的想法。 通過關注想法的數量，而不是質量， 你更有可能想出創新的解決方案。 最終，我們需要縮小到一些可以原型化的想法。 

          

          
    第四步：原型

          

          
    原型是顯示重要功能的產品的縮小版本。 你應該為你的原型制定一個明確的目標。

          

          
    最后：測試

          

          
    我們與用戶一起測試原型。 測試將用戶放在首位，因為它為用戶提供了機會 在產品構建之前提供反饋。根據用戶反饋，你可以進行更改和改進，或者提出一個全新的想法。

          

          
    
          

          

          
    
          
        4.精益用戶體驗  Lean UX（MVP）
    
          

          

          
    精益思想（Lean Thinking）源于20世紀80年代日本豐田發明的，精益生產方式造成日本汽車的質量與成本優勢，曾經壓得美國汽車抬不起頭。精益思想的核心就是消除浪費，以越來越少的投入——較少的人力、較少的設備、較短的時間和較小的場地創造出盡可能多的價值；同時也越來越接近用戶，提供他們確實要的東西。

          

          
    精益用戶體驗過程側重于減少浪費的時間和資源，并盡快生產出可行的產品。這個過程是迭代的，這意味著團隊在收集用戶研究和利益相關者的反饋時會繼續更新和修改產品。

          

          
    精益用戶體驗過程分為三個步驟： 

          

          
    思考

          

          
    探索用戶遇到的問題，并考慮如何通過設計解決這些問題。這一步是關于收集研究，因此你可以清楚地了解產品的用途以及它將如何幫助你的用戶。 

          

          
    制作

          

          
    通過創建草圖、線框和原型開始設計產品。您還將創建一個最小可行產品，簡稱 MVP，它是你可以與用戶一起測試的簡單設計原型。準備好在收集反饋時返回并更新您的原型！

          

          
    查看

          

          
    了解用戶如何響應您的設計并收集項目利益相關者的反饋。相應地調整您的設計，并在必要時再次重復這三個步驟。

          

          
    這些步驟應該根據需要重復多次，直到你的團隊達到所需的最終產品。精益用戶體驗流程鼓勵生產力和協作。精益用戶體驗團隊通常是跨職能的，這意味著您將與工程師和用戶體驗研究人員等團隊成員一起工作。

          

          
    

          

          
    在使用精益用戶體驗流程時，你應該牢記六個原則：

          

            
    
          1. 
        
            
            前進。僅關注將設計過程推向特定目標的設計元素和功能。不要被“好東西”分心。 
        
            
    
            2. 
    
          2. 
        
            
            保持好奇。Leaning UX 是關于使用來自用戶和利益相關者的反饋來修改和改進你的設計。不斷尋求反饋以了解為什么特定的設計有效或無效。
        
            
    
            3. 
    
          3. 
        
            
            在現實世界中測試想法。精益用戶體驗鼓勵設計師在會議室之外與潛在用戶一起測試他們的想法——例如使用原型。
        
            
    
            4. 
    
          4. 
        
            
            外化你的想法。不要在內部辯論和分析一個想法是否可行，而是將你的想法轉化為實際的、可見的和可測試的，同時它們在您的腦海中仍然新鮮。這樣，你將在早期階段獲得有關設計的反饋，不同的觀點和反饋最有幫助。 
        
            
    
            5. 
    
          5. 
        
            
            將可交付成果重新定義為結果。專注于創造用戶真正想要和需要的可用的、令人愉快的產品。請始終牢記，你首先要為用戶設計，而不是為項目利益相關者設計。
        
            
    
            6. 
    
          6. 
        
            
            擁抱徹底的透明度。對團隊中的每個人坦誠相待（并期望得到同樣的回報），因為你們將依賴于彼此的見解。這樣，每個人都可以就如何前進做出明智的決定，避免浪費時間和精力。 
        
            
        
            
            
            
        
            
    
            7. 

          

          
    
          
        5.雙鉆 Double Diamond
    
          

          

          
    雙鉆模型描繪了在設計流程中發散和收縮的過程，由英國設計協會提出，是一種設計師所使用的思考模式。該設計模型的核心是：發現正確的問題和發現正確的解決方案。一般應用在產品開發過程中的需求定義和交互設計階段。

          

          
    它將用戶體驗設計分解為兩個主要階段（或“鉆石”）：研究和設計。每個階段有兩個步驟。結合起來，這些是四個步驟：

          

            
    
          1. 
        
            
            發現問題。收集有關用戶面臨的潛在問題的信息。 
        
            
    
            2. 
    
          2. 
        
            
            定義問題。篩選數據，并專注于您的產品旨在解決的主要問題。
        
            
    
            3. 
    
          3. 
        
            
            解決方案。作為正在進行的工作開始設計您的產品。這就是線框和原型發揮作用的地方。
        
            
    
            4. 
    
          4. 
        
            
            交付產品。審查和測試您的產品，為發布做好準備。
        
            
    
            5. 

          

          
    

          

          
    為了更方便理解，我從網上找了中文理解示意圖：

          

          
    原文鏈接：https://www.sohu.com/a/412691806_769195

          

          
    與我們討論過的許多設計方法一樣，Double Diamond 是迭代的，而不是線性的。每個沖刺都會帶領團隊獲得用于改進產品設計的新見解。然后，該過程以新的迭代重新開始。把它想象成學生在將最終草稿交給老師評分之前寫的研究論文的各種草稿。

          

          
    Double Diamond 還鼓勵整個組織的團隊合作，因此設計團隊不僅僅專注于設計。要取得成功，整個團隊必須知道如何結合設計原則、設計方法、用戶參與策略和領導原則。準備好根據需要承擔多種角色和職責。

          

          
    雙鉆石流程有四個原則： 

          

            
    
          1. 
        
            
            以用戶為中心：與 UX 設計的情況一樣，用戶是重中之重。
        
            
    
            2. 
    
          2. 
        
            
            交流：通過補充文本的圖像和設計選擇進行視覺交流。你還應該確保你的設計交流是公開和可訪問的。
        
            
    
            3. 
    
          3. 
        
            
            合作：雙鉆流程的獨特之處之一是它鼓勵與您的團隊成員進行創造性合作和共同創造。 
        
            
    
            4. 
    
          4. 
        
            
            迭代：接受設計正在進行中并且不會立即完成的事實。神奇在于修訂。每一次迭代，你都會給用戶帶來新的體驗。
        
            
    
            5. 

          

          
    
          

          

          
    
          
        總結：
    
          

          

          
    在前面我們討論了5種常見的設計研究方法，可以發現究其根本，就是在開始設計前，設計師首先應該定位問題所在，是用戶最關心的問題，而非我們想象中的問題。在這個基礎上再去拆解我們的設計目標，提供足夠多的可能性的解決方案將問題逐個擊破。設計后期我們需要驗證，和用戶一起進行可用性測試。然后不斷的往復循環。這些方法并非獨立的，都是交叉相通的，所以在使用中我們可以靈活運用。

          

          
    事實上在工作中我們可能已經嘗試過其中某一個環節，但是卻未必系統的了解它的原理。我認為理論知識可以幫助我們更宏觀的看待問題，指引我們使用方法找到更多的解決方案。我也一直秉持這樣的信念在學習設計理論，希望我的整理筆記對需要的人能有所幫助。

          



          

          

          
    
          
文章來源：站酷   作者：將晚秋
          

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

          

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

          

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

          

          
    
          

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(4119)
              
                          
          
          
          
                      
          
            
            
          設計師搞定B端用戶指南
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        相較于C端產品，B端產品的系統更復雜，用戶角色也更多樣，故而更強調針對角色的個性化服務。這篇文章分析了B端產品的用戶構成，提出通過他們關心的內容來對癥下藥的方法，詳述了接觸用戶合適的時機、渠道以及跟進和維護用戶的方法。一起來看看吧！
    
          

          

          
    一、背景

          

          
    面對B端產品，設計師該如何認知用戶以及做出相應策略？作者通過對自身一些做B端產品設計經驗、踩過的坑進行總結，期望能夠給感興趣的讀者帶來一些啟發。

          

          
    二、B端用戶有哪些

          

          
    不同于C端消費產品的用戶比較唯一，B端產品系統更為復雜所以用戶角色也更多。本篇將從商業銷售的角度來研究B端用戶。

          

          
    1. 用戶構成

          

          
    B端產品的售賣大多針對一個組織/一家企業，往往存在著產品價格高、產品體量大、適用范圍廣的情況，所以商家決定購買的決策成本更高，按照組織層級從上向下、可以歸納出「決策者」、「運維者」、「使用者」三個層級的角色。

          

          
    設計師搞定B端用戶初級指南

          

          
    1）使用者

          

          
    一般是企業內的內部員工，在日常工作時需要一些支持性軟件來更好地辦公。比如公司內的員工進行上下班打卡，這時他們對于考勤系統就是使用者。

          

          
    2）運維者

          

          
    一般是企業管理內部的部門負責人或管理員，他們為企業提供支持性的服務，也是產品工具輔助完成工作的管理者。

          

          
    3）決策者

          

          
    一般是一個企業的CEO/負責人，他們來決定是否需要支付一筆不小的費用購入一款軟件，來更好地管理企業。比如某公司的CEO最終決定買企業微信還是釘釘，讓員工進行內部溝通。

          

          
    2. 關于決策鏈

          

          
    B端用戶的三個角色，通過相互影響形成了產品購買的「決策鏈」。

          

          
    這個“決策鏈”的作用產生在「是否購買」、以及「是否續費」兩個核心問題上，通常我們簡稱為「新購」與「續購」。

          

          
    在這里我還是重審下背景：出現的新購與續購概念，好像看起來已經脫離了本篇文章的主題，但這確實非常重要。對于B端產品，產研開發的核心目的還是將產品賣出，設計師作為產研的一員也需要背負這樣的任務。所以我們需要研究用戶，并且從商業的角度出發給出建議。

          

          
    基于此，新購與續購的商業概念可以幫助大家更好地聚焦用戶場景與設計策略。

          

          
    設計師搞定B端用戶初級指南

          

          
    3. 關于新購

          

          
    新購即指從未買過產品的商家、初次購買的過程。

          

          
    1）對于新購，有的商家是自上而下決策

          

          
    決策者主動有意愿有想法，從而購買產品。

          

          
    這樣的方式在購買后對產品的推廣和使用更為容易，下面人員的配合度更高，產品取得的效果也就更好，更容易成為優秀的標桿案例。

          

          
    設計師搞定B端用戶初級指南

          

          
    2）有的商家是自下而上決策

          

          
    從運維者主動有意愿有想法，并通過游說決策者、讓其理解當前企業存在的問題、通過什么樣的產品去解決，從而購買產品。

          

          
    這樣的方式取決于決策者獲取到產品價值從而支持購入，如果沒獲取或不認同，則會導致產品售賣失敗。

          

          
    沒獲取，卻因為其它因素（比如競品企業都在用了），也可能會進行購買。但這樣的方式因為不能獲得決策者最大限度的支持，在推行起來會存在一些障礙和困難，因為B端產品往往牽扯組織內多個部門或人員，所以往往啟動較慢，產品效果也不能保證。

          

          
    所以在這個階段決策者的態度與意見是非常重要的，運維者提供一定的建議，使用者通常沒有話語權。

          

          
    設計師搞定B端用戶初級指南

          

          
    4. 關于續購

          

          
    續購即指已經購買過的商家，續約產品的過程。

          

          
    決定續購的核心標準：產品是否有效果，翻譯到產研側就是產品是否被用起來了。

          

          
    在這個問題上，因為決策者幾乎不會參與過程，所以更考驗運維者本身的使用策略，同時也非?？粗厥褂谜叩膶嶋H使用體驗。

          

          
    在決策鏈上，核心角色的建議權，往往比決策權還重，是否被用起來以及用起來的效果是一個從下向上檢驗的結果。所以在這個階段，運維者和使用者的體驗非常重要。

          

          
    設計師搞定B端用戶初級指南

          

          
    5. 對癥下藥

          

          
    在了解基礎的概念后，還要知道他們關心什么才能將設計對癥下藥。

          

          
    對于決策者來說，擁有最終購買決定權，但因其并不是實際業務執行人，所以會考慮其他角色的建議與意見。他們關注營收增長、效率提高、減少成本等方面的問題。一般都是階段性的查看成果，權衡產品價值。

          

          
    對于運維者來說，是提供重要意見的核心建議者，也是實際業務的執行人，會對產品有更多的要求和考慮。他們同樣關注營收增長、效率提高、減少成本等方面的問題，但更多地是實際執行時的種種細節問題，具體些就是管理方面的功能完不完備（比如社區中是否能精選評論、是否能自定給精選評論發獎勵）、數據能力完不完善等等。

          

          
    對于使用者來說，前期幾乎只能被動接受，但承載著后期衡量產品實際使用效果的作用。他們關注產品便捷性、是否為自己解決問題。幫他們解決問題，他們才愿意用，產品才能用的起來、用的好。

          

          
    三、如何尋找用戶

          

          
    對B端用戶有一個大概了解后，我們再來了解下設計師如何介入用戶，了解用戶與用戶相處，讓我們的設計更打動人心。

          

          
    不同于C端可以較為自由的選取用戶，B端產品對于用戶的選取與接觸較為受限。

          

          
    產品供應企業針對所服務的商家會提供一套售前+售后的服務體系，并配備了不同的人員分管各個階段，例如有客戶銷售、客戶成功、專屬運營等。設立的目的是針對性的個性化服務，面對不同商家情況，所轉述的產品價值甚至價格都會有所區別，當然這些信息也都非常敏感和隱私。

          

          
    所以當你想尋找用戶做調研時，一般要找到對應的商家運營，告知目的后幫你推薦合適的用戶與聯系方式。除此之外，在話術方面例如什么可以溝通、什么不可以溝通，如何回答敏感問題等更為嚴格（這個我們后文會再詳細描述）。

          

          
    設計師搞定B端用戶初級指南

          

          
    四、如何接觸用戶

          

          
    在認知用戶基礎信息所處身份后，還需了解如何與用戶接觸，本文將從接觸時機與接觸渠道兩個方面闡述，內容來自實際經驗總結以供參考。

          

          
    1. 接觸時機

          

          
    1）功能類變動

          

            
    
          • 
        在涉及操作的流程設計前后，需要跟進商家意見，看是否真正解決商家問題、減少成本或符合習慣。
    
            • 
    
          • 
        在大模塊頁面優化前后，需要調研是否符合使用習慣或預期。
    
            • 

          

          
    2）視覺類變動

          

          
    在重要的視覺表現設計上（比如證書樣式、皮膚設置等），需要調研是否符合其審美。

          

          
    2. 接觸渠道

          

          
    除了尋求運營幫助推薦單個用戶，還有一些渠道方式可以幫助你接觸用戶。

          

          
    1）日常溝通商家群

          

          
    一般一個商家會建立一個包含該商家的運維者、B端的產品經理以及運營的群，用來解決對接問題以及日常咨詢，所以設計師可以通過加入這個群，了解商家如何使用產品，都在反饋些什么問題。一般商家反饋的最多的，是某某功能如何使用和bug類。

          

          
    2）產研反饋優化群

          

          
    不同于商家群的人少而精的特點，問題反饋群更多匯集了各類技術與全部運營銷售人員，用以處理運營在平時遇到的商家的各種問題，還有商家從故障平臺等多個方面回收的使用反饋。

          

          
    這個群不僅可以幫你了解商家更關注哪些功能、還能通過技術對于問題的解答更加了解產品邏輯。

          

          
    設計師搞定B端用戶初級指南

          

          
    五、如何跟進用戶

          

          
    一般B端產品的用戶數量有限，使用深度也更高，除了非常少頻的調研問卷，更多采用訪談的形式來進行問題的挖掘與調研。這些跟進方式其實在各個領域已經非常成熟，作者通過自己的實際經驗羅列了一些方法和區別以供參考。

          

          
    1. 實地拜訪

          

          
    通過實地走訪，真實地走入用戶的實際使用場地，近距離、近環境的接觸用戶。

          

          
    操作指南：

          

          
    1）一般運營通過聯系商家用戶確定上門的時間以及目的，來發起一次拜訪。

          

          
    2）拜訪是在設計師提前準備好問題的情況下，過程中因為B端商家的使用場景往往不能預想，且面對面聊天會更加激發用戶的表達欲。所以在深度追問的過程中，用戶的回答可能不會按照預想的方向進行，會經常跑偏，此時需要根據你的目的，視情況引導談話方向。

          

          
    3）溝通時，用戶除了回答產研預設的問題、還會提一堆優化需求或是功能需求，此時要注意避坑，除了自己能力范圍外的，不能擅自答應，但同時也需要給出比較委婉的解決方案安撫用戶。

          

          
    4）對用戶所有提出的問題給出明確的后續反饋時間，并同步組內其它產研同學，及時跟進和反饋結果。不然商家會覺得一直在提重復的問題給不同的人，但沒什么反饋，造成不良印象。

          

          
    實地拜訪好處是面對面增強真實感，更準確地解讀用戶需求，也能一次性了解商家幾乎全部的用戶類型，有更為全面的用戶源可了解，同時更容易跟用戶熟悉起來，建立長期的關系。壞處是成本高、費時間。

          

          
    2. 線上訪談

          

          
    一般遇到沒辦法花時間實地拜訪的情況，線上聯系也是一種好方法。此時需要聯系好運營確認好溝通訴求后，自行線上聯系用戶進行調研。

          

          
    操作指南：

          

          
    1）聯系前要說明來意、并預約時間（區別于C端直接打電話開始訪問），一般商家都會很高興（可能因為畢竟花了錢）。

          

          
    2）需要提前準備好問題，一般會按照問題逐個回答，很少跑偏。

          

          
    線上調研的好處是便捷快速地聚焦問題，壞處是對問題的理解還有回答的準確度判斷可能沒那么高。

          

          
    3. 調研問卷:

          

          
    不同于C端場景，B端產品因為用戶體量上的原因，較少用到問卷。但依然有一些必要場景會用到，比如針對某一功能的認知、產品的滿意度等。

          

          
    操作指南：

          

          
    1）B端問卷的一個難點在于“如何發放”。C端一般在產品內留有問卷入口，因為用戶量大、總會收集部分反饋.但B端用戶較少，若要確保收集到一定量的問卷，就得主動出擊提高觸達率。

          

          
    目前作者所在團隊每周會針對運維者進行答疑直播活動，相當于每次直播都自動匯集一群目標用戶，在直播過程中可以穿插問卷及入口，能夠極大概率地收到反饋（當然填寫獎勵必不可少，可以準備一些公司周邊小禮品抽獎）。

          

          
    2）問卷如何設計按照普遍方式進行即可，在此不詳述。

          

          
    設計師搞定B端用戶初級指南

          

          
    六、如何維護用戶

          

          
    建立個人用戶庫

          

          
    通過以上方法我們已經開始并可以與各類用戶認識、并進行調研了。

          

          
    做完調研后，我建議可以針對一些愿意發聲的用戶建立更深一層的關系，比如直接幫助他們解決設計問題、解答功能疑惑等。用戶其實是樂于接受更多交流的，這樣可以構建個人用戶庫，它可以幫助你避免重復地走預約流程，更加便捷地獲取用戶信息，讓你對用戶也能夠更加了解。

          

          
    七、關于B端的標桿客戶

          

          
    在B端產品迭代中，我們經常聽到這樣的話“我們要打造一個標桿”，“目前這個功能還沒形成標桿”等。這里涉及到一個詞“標桿客戶”。其實除了企業內部角色的劃分，針對企業本身，也有不同維度的劃分，「標桿」相當于企業的一種分層維度。

          

          
    1. 什么是標桿

          

          
    標桿客戶指該B端產品在商家內部推行后、使用的效果超過預期，對商家某問題起到了極大的正面作用。

          

          
    2. 標桿的作用

          

          
    1）驗證產品可行性

          

          
    只有通過標桿的建立，才可以一定程度證明產品能力是符合市場需求的。如果遲遲沒有標桿產生、可能產品本身就得重新考慮定位與方向了。

          

          
    2）為產品站臺增強說服力

          

          
    在很多銷售售賣產品時，如果只是單薄的產品邏輯講解，往往商家沒那么容易理解獲取產品價值，但如果有標桿案例，銷售將標桿商家是如何運營、如何取得成果的流程闡述出來，基本上同行商家能夠立馬理解產品價值。

          

          
    所以商家對標桿是很看重的，且要求會越來越高，不僅是同行標桿、有的還會要求有細分行業的案例給到（比如除了同樣是家居行業、更希望有硬裝行業、甚至家居-硬裝-瓷磚行業的案例）

          

          
    設計師搞定B端用戶初級指南

          

          
    八、為B端用戶做設計的避坑指南

          

          
    關于「如何為B端用戶做設計」又是一個宏大的主題，在此先不做系統性的分析和展開，僅提供一些經歷實戰后的小技巧以供讀者參考。

          

          
    1）產品模塊對B端商家的作用不同、需求不同、要保證適配各類商家的靈活性

          

          
    2）B端產品往往復雜，更注重頁面引導、新功能的解釋，所以每做一個新功能對于“能不能理解”的新人引導設計非常必要（且是人性化的）

          

          
    3）避免個人經驗主義，B端場景往往不能共情，不能依靠個人生活經驗去做設計判斷

          

          
    4）決策者和使用者有時會在功能模塊上有利益沖突，需要根據該功能對產品購買的影響程度，來權衡利弊（參考決策鏈）

          

          
    5）B端產品是用戶花錢買的，與C端的免費使用是一個本質區別，“買的東西去享受”和“免費的東西去享受”，感受與包容度完全不一樣。

          

          
    買，代表有所需，使用時，會有準確的預期，在產品設計時需要考慮該功能商家是否買單，是不是當初買這份產品所預期的，如果不是，謹慎添加，且要保證不增加任何認知/操作成本。

          

          
    6）商家更注重儀式感，對于某些一次性場景不可因頻率不高而忽視視覺表現，比如產品初始化設置。

          

          
    九、最后

          

          
    B端用戶既是普通消費者也是企業打工人，在使用B端產品時天然擁有兩重身份，會有職業屬性的因素存在，所以拆解好這兩種角色并對癥下藥，就可以了解他們，深入他們設計出極致的產品。
          

          
    
          
        文章來源：人人都是產品經理   作者：酷家樂用戶體驗設計
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          
    
          
        
          
    
          
    
          
        
          
    
          

          
            
          
              
                評論(0)
                瀏覽(2000)
              
                          
          
          
          
                      
          
            
            
          競品分析技巧
          
            
          
               資深UI設計者                                            
          
            
          
    
          
        競品分析無論是對產品經理，還是對設計師，都有著舉足輕重的作用。這篇文章提供了一個做競品分析的套路方法，將競品分析分為了針對性分析和全局性分析兩大方向，推薦對競品分析感興趣的同學閱讀。
    
          

          

          
    
          

          

          
    相信對于從事互聯網行業的新型農民工們來說，競品分析一定是不會陌生的，尤其是產品經理，往往會成為產品迭代及差異化的重要依據。

          

          
    其實，作為設計師，無論你負責的產品業務是面向To B還是To C的，諳熟相關產品的功能體驗，對業務產品的設計還是大有裨益的。“知己知彼”，“取彼之長，補己之短”，才能把設計體驗做到愈來愈好。

          

          
    設計老板經常對我們小組成員說：“我們做競品分析，不能僅分析產品界面表象，還要通過體驗競對的功能架構、交互流程、視覺界面，分析出他們為什么這么做，反推出競對產品經理的prd文檔業務邏輯以及競對設計師設計背后的思考?！?
          

          
    提到競品分析，我時常會想到這句話，雖然做到有點難，但是競品分析的最大價值意義也就在于此了。

          

          
    如何做好競品分析是有套路可尋的。所謂套路方法，按照我個人的理解就是你用這種方法套路可以達到目的。不太擅長做競品分析的人，按照這種套路也能得到相對不錯的結果。最好呢，簡單易行，比如是一張可以“Take Away”的圖表。

          

          
    一、設計師做競品分析的價值

          

          
    1. 驗證設計思路正確與否

          

          
    對于從事一兩年的設計師來說，在接到設計需求時，腦海里總會出現一些想法、思路。這個時候，借助競品分析，可以把腦海中的多個想法進行篩選過濾。迅速放棄不太可行的想法，不再深入；重點關注可行靠譜的思路，從而明確設計目標和設計目標。

          

          
    2. 尋求設計靈感

          

          
    設計工作中或多或少都會遇到難解的問題，短時間內找不到合適的設計對策。這個時候，借助競品分析，可以快速了解行業常規的做法，了解用戶行為習慣；或者發現競對的設計亮點，剛好移花接木。

          

            
    
          • 
        行業常規都這么做的，思考一下可否復用，以便設計體驗更符合用戶既有使用直覺；
    
            • 
    
          • 
        競品的亮點，思考一下可否借鑒+適度創新，在此基礎上，讓設計體驗做的更好；
    
            • 
    
          • 
        競品的不足，思考一下為什么這么做不好，幫助自己的產品有效避免。
    
            • 

          

          
    二、競品分析的兩大方向

          

          
    根據分析目的、分析側重點的不同，我們可以將競品分析大致歸納為兩個方向：針對性分析和全局性分析。

          

          
    

          

          
    1. 適用場景

          

          
    1）針對性分析

          

          
    所謂針對性競品分析，即具有明確的分析目標，分析較為細節、充分，在設計角度有較大的借鑒意義。

          

          
    比如，要找到某個交互操作問題的解決方案，或者驗證某個方案的正確性；產品的業務功能，也無需借助競品來佐證價值本身；通過競品分析所得到的設計方案，可以快速推動落地；所留給設計師們做競品分析的時間，也相對緊迫等場景。

          

          
    2）全局性分析

          

          
    適用于分析目的沒有那么確定，就是要了解一下行業內相關產品的情況；現有產品有一個大的思路，但不知道可行性、合理性如何，想借用競品分析來為自身產品決策提供依據；需要多維度的收集競品分析，比如產品定位、市場占比、用戶規模、用戶口碑等。

          

          
    所留給設計師們做競品分析的時間也相對寬松，或許是一個長期的研究課題。

          

          
    2. 分析工作特點

          

          
    1）針對性分析

          

          
    分析工作量相對輕量化，不求面面俱到，只求有價值的信息輸出。分析方法也比較靈活，可以根據分析目的隨時調整。分析過程及結果的輸出形式也無要求，形式不限，可以是圖片，可以是文檔，可以是表格，可以是ppt。

          

          
    但是，針對性分析要求要做到細致、完整，而非概括性的。比如某個設計亮點，要分析出它為什么好，設計背后是如何思考的，我們要借鑒的話，如何做。

          

          
    2）全局性分析

          

          
    分析工作量比較大，分析內容要求全面些、系統化，包括競品的產品定位、行業占比、用戶角色、用戶口碑等多個方面。

          

          
    分析方法有一定的邏輯性更好，要遵循一定的主線框架。分析維度不限于設計中的交互流程和視覺創意，可以向前一步，即產品層面；也可以向后一步，即技術層面?？梢猿闪⒏偲贩治鎏摂M小組，與產品、開發協作做有廣度有深度的競品分析，會更有價值。

          

          
    3. 分析側重點

          

          
    1）針對性分析 – 抽象化思考，讓借鑒競對做到心里有底

          

          
    分析側重于用戶使用情況的背后原由，設計點的優勢和不足，競對背后的設計思考方式。若為我所借鑒的話，其設計方案落地情況指標的設定衡量。

          

          
    2）全局性分析 – 以終為始

          

          
    上文有提到泛競品分析時間寬松，是一個長期研究的課題，這就要求我們要以終為始，以行為知。側重于分析競品的用戶角色特征、特色功能、核心流程鏈路、典型頁面的設計布局和設計表現等。

          

          
    老板又喊你做競品分析了！

          

          
    三、競品分析的來源方式

          

          
    我們設計師做競品分析，來源方式大體可以分為兩種：產品發布會和在平時工作中有目的性的資料收集。

          

          
    1. 產品發布會

          

          
    競對產品版本迭代的大型發布會，這種來源方式的獲取對做競品分析的我們來說，是最直接、最高效的。發布會上所體現的功能體驗內容大多是該產品核心中的核心，亮點中的亮點。

          

          
    針對競對的產品發布會上介紹的功能體驗點，結合產品去實操體驗，我們對競品的認知會更有體感、更全面、更具體。

          

          
    2. 產品資料收集

          

          
    在平時的工作中，要多有意識地收集相關競品的網絡文章鏈接或圖片，梳理沉淀設計體驗亮點。如適老化產品的設計資料庫，當要做適老化產品競品分析的時候，即可短時間獲取資源。

          

          
    老板又喊你做競品分析了！

          

          
    四、競品分析如何做

          

          
    1. 全局性分析的流程

          

          
    全局性分析需要有邏輯性的闡述分析與總結，而不能存在較大的跳躍性。因此可采用如下流程進行分析。

          

          
    第一步：項目背景

          

          
    項目背景是對整體競品分析的概述。要明確競品分析的目的，是為了解決什么實際問題，尋找某應用作為競品的原因，表達要言簡意賅，把事情講清楚。

          

          
    第二步：競品概述

          

          
    此部分要闡述的是競品的體量（下載量等數據），體量是真實反映一個公司，一個產品受歡迎程度的指標；也是對于競品的功能和本產品要做功能最好的證明材料。

          

          
    第三步：維度分析

          

          
    建議初學者言簡意賅的表達思路（優、缺點）+對比截圖（建議標注區別點）；功能點要有針對性，多想想為什么產品會這樣設計。作者通常采用如下角度進行分析：

          

            
    
          • 
        用戶層面：用戶群體特點、用戶的核心訴求、用戶流程關注點等。
    
            • 
    
          • 
        功能層面：歸納梳理出競品有哪些功能，分析出相應功能的目的及意義；同時，也可與自家產品功能做橫向對比。
    
            • 
    
          • 
        信息架構：競品導航架構以及功能之間的關聯，可以讓我們直觀的橫向了解架構之間的差異。信息架構層級分析不宜過深，建議分析到第三信息層級就行。
    
            • 
    
          • 
        流程鏈路：選取競品的核心鏈路流程（如MVP路徑），梳理出完備的用戶體驗流程圖。核心流程節點中建議關聯用戶實操界面，可以標注出用戶體驗過程中痛點問題或者設計反推思考的內容或想法。
    
            • 
    
          • 
        關鍵頁面：結合用戶的使用場景，對典型頁面的結構布局、交互操作、視覺風格等做分析評價。
    
            • 

          

          
    第四步：分析總結

          

          
    分析總結是整個競品分析的精華部分?？偨Y要有新意和立場，要說出你做這個競品分析報告的思考和提煉是什么，能夠結合產品接下來怎么做，給出明確的建議。

          

          
    針對全局性分析類型，并結合工作經驗，本人抽離提煉出一張競品系統化分析報告表格，供大家參考使用。

          

          
    詳見下圖：

          

          
    老板又喊你做競品分析了！

          

          
    在整個報告中，第三部分與第四部分是核心內容，需要盡可能詳盡、言之有物。同時，整個報告的前后分析應該層層遞進，逐步得出分析結論，如果前后缺乏邏輯性，會減少報告的說服力。

          

          
    2. 針對性分析——競品迭代亮點功能分析

          

          
    相較于全局性分析，針對性競品分析就沒有較為復雜或統一的分析流程，設計師可以根據自己的直覺進行點對點的分析。競品分析的團隊可大可小，也不依賴團隊成員之間的相互協作。

          

          
    舉個例子，之前針對Google Workspace產品的發布會，我們就可以圍繞著Workspace產品發布會來做。當然，前提是Workspace產品是所負責業務的直接競對或者業務功能有關聯的間接競對。設計組內召集愿意做分析的小伙伴，相信10個人的小組總會有那么兩三個樂意去做的。

          

          
    如下圖，下面是針對一個功能點整理的分析總結。

          

          
    老板又喊你做競品分析了！

          

          
    針對性競品分析可以從產品里面那些小而美的功能體驗點入手，如動態的引導互動展示、預判用戶下一步、減少重復操作、情感化設計、沉浸式的交互、形象化設計、有溫度的文案等，這些都可以成為后續產品優化的微體驗。

          

          
    當然也可對產品的迭代亮點進行全面的分析。如下圖，是作者抽離的分析報告模板：

          

          
    老板又喊你做競品分析了！

          

          
    相較于全局性分析，針對性競品分析形式上更加靈活，可以是做方案時的靈感來源，也可以是自己分析素材與提升的積累，亦或是政策性的競品分析任務，這種競品分析更加快速有效，更加容易言之有物，不會流于空泛。

          

          
    五、結語

          

          
    經過若干競品分析的實踐，有以下實踐建議，希望能有所幫助。

          

            
    
          1. 
        建議遵循競品分析主線框架，可根據實際情況做調整；
    
            2. 
    
          2. 
        建議借用競品分析工具包里的協作小工具、通用方法（如可快速繪制流程圖、思維導圖、用戶畫像等小工具，四象限分析法、橫向比較法、PEST分析法、SWOT分析法）；
    
            3. 
    
          3. 
        成果物形式建議最好是一張長圖（包含簡介、多維度的設計分析、相應可借鑒的結論提案等），便于結果的可視化展示。
    
            4. 

          

          
    競品分析是一個老生常談的話題，特別是在to B類產品.其他的研究方法相對來說都較為困難，或效果不太明顯。因此，競品的收集與研究是做好to B產品的有效手段之一。
          

          
    
          
        文章來源：人人都是產品經理  作者：弘毅道
          

          
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
    
          
    
          
        免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
    
          
    
          
        藍藍設計( www.syprn.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務
    
          
    
          
        
          
    
          
    
          
        
          
    
          

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(2248)
              
                          
          
          
          
                      
          
            
            
          最新安卓規范入門解析
          
            
          
               資深UI設計者                                            
          
            
          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    
          

          

          
    安卓英文名是 Android，它是系統級源碼的總稱，而谷歌官方為這套系統提供的設計規范，叫做 Material Design （下稱 MD），我們了解官方的設計規范，即了解 Material Design 的過程。 

          

          
    目前，Material Design 已經更新到第 3 代，與 Andoirid 12 代共同發布，它的設計進行了大量的更新和調整，雖然我寫作的時候這代 MD 設計還沒有正式上線，但下文也將以該版本做說明。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    建議學習前先下載安卓官方的組件文件（MD2 版本，以后會更新的）和對應字體，可以通過下方官方鏈接獲取。也可以在這個網址中用網頁翻譯查看官方的規范介紹。 

          


          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    1. 安卓布局規范 

          

          
    安卓和 iOS 類似，也包含狀態欄、頭部標題、底部導航欄以及 …… 底部指示器，我們簡單對它們做個介紹。 

          

          
    首先，頂部狀態欄在 MD2 中，是有背景色的，而在 MD3 則改成了和 iOS 一樣的透明背景。它的高是 52dp（安卓的單位，和 PT 就名字的差別），使用方式和 iOS 狀態欄基本一致。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    頂部標題欄上，MD 提供了 4 種模式，依次為 center-aligned, small, medium, large，在實際界面中可以根據自己的需要選擇。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    在 MD3 中，基本取消了安卓過去在頂部放導航的 “優良傳統”，所以原先 MD2 中的 Bottom navigation 改名成 Navigation bar，不過我們依然可以用中文稱呼它為底部導航欄。 

          

          
    它和 iOS 底部導航類似，提供了 3-5 個選項的不同版本，可以根據自己的需要選擇。并且使用底部指示器的過程中，需要將導航底部延長，覆蓋底部指示器的高 28dp。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    在 MD3 中，官方默認使用的畫布是 412*892，左右頁邊距默認為 24。所以如果我們要創建一個以 MD3 規范為標準的頁面，就可以通過置入所需的官方元素完成基礎布局，進行后續設計。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    至于其它的官方組件，可以在源文件和官方的規范文檔中查看，就不在這里展開了。 

          

          
    2. 安卓規范細節 

          

          
    MD3 和 MD2 看起來完全像 2 套規范，原因就在于細節層面變化太大。MD3 一改以往直男的設計風格和配色，搖身一變成年輕人喜聞樂見的網紅風…… 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    而相比起來，顏色填充的邏輯比色彩風格的變化更大。在安卓 12 中，提供了用戶自定義系統色彩風格，和色彩根據場景自動化生成和填充的強大特性…… 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    這套規范異常的復雜，這是一個針對 MD3 色彩配置的萬字干貨才能講清楚的特性，我只在這邊做一些最基本的講解。 

          

          
    首先就是 MD3 中，也強調了色彩的角色： 

          

            
    
          • 
        主色 Primary Key Color 
    
            • 
    
          • 
        二級主色 Secondary Key Color 
    
            • 
    
          • 
        三級主色 Tertiary Key Color 
    
            • 
    
          • 
        中性色 Neutral Color 
    
            • 
    
          • 
        錯誤色 Error Color 
    
            • 

          

          
    只要這些角色的色值被確定，系統就會自動幫助我們生成不同的明度等級，并應用在不同的場景，比如下方左側是我們設置的角色色值，右側是系統會自動生成的關聯色彩。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    下面是色彩應用的示例： 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    這些角色的具體色值，可是是我們作為 APP 開發方定義的，也可以完全交給客戶端自動生成（獨立設置或背景生成）。 

          

          
    所以當我們使用 MD3 規范做設計的時候，就要借助官方的插件來完成角色色值的生成。感興趣的同學可以在 Figma 官方社區搜索 Material Theme Builder 插件，并根據下方介紹了解它的使用方法。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    除色彩外，MD3 使用了更多、更大的圓角，讓界面元素變得更圓潤。圓角使用 4 的倍數，根據元素尺寸分別應用了 4、8、12、16、28 等圓角。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    在使用了圓角的同時，還棄用了 MD2 中核心材質 —— 投影（我忍它很久了）。讓元素之間通過色彩的對比來實現分隔，而不是應用一大堆厚重的投影來突出元素。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    除此之外，MD3 中篇幅最多的還包括設備適配有關的規范，就不在這邊介紹，留到后面的分享中講解。 

          

          
    如果是面向國內市場的 UI 設計師，針對 MD3 只需要停留在了解的層面就行，在真實的工作環境里基本沒有應用場景。 

          

          
    3. 國產安卓設計現狀 

          

          
    為什么我們作為 UI 設計師可以對 MD3 停留在了解的層面，而不是真實的實踐？ 

          

          
    因為面向國內市場的安卓界面設計，基本不遵守谷歌官方的設計規范！這里面包含了非常多復雜的歷史問題，有谷歌自己規范做的不清不楚（對比 iOS）的關系，也有每個廠商各自為戰推出自己的設計系統的原因。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    更底層的因素，是谷歌系統在國外才能獲取完整的體驗，沒有進入國內（被墻），缺乏了廠商去支持和適配它的基本動力。同時在商業層面上，如果我們每設計一個 APP，iOS 和 Andorid 使用各自的規范，會對產品規劃、設計、開發和測試都造成非常大的壓力，是一般公司完全承受不起的。 

          

          
    再者，國內的安卓項目，多數是在完成 iOS 端的設計后，安卓工程師直接參照該設計稿適配到安卓端中。只有少數安卓特定的需求需要為其設計獨立的頁面。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    所以常規情況下，我們只需要提供標準的 iOS 界面即可。只有在產品經理提供的特殊需求和頁面，要根據它輸出安卓尺寸的對應界面，但設計風格、元素依舊可以保持 iOS 版本的樣式。 

          

          
    要提升對安卓官方系統的理解，就一定要在你們的安卓手機上刷原生的系統，同時安裝 Google 三件套，否則你們體驗的就只有魔改版 iOS。 

          

          
    零基礎 UI 入門六：最新安卓規范入門解析 

          

          
    今天的分享到這里結束！仔細研究了下 MD3 的新增規范花了不少的精力，個人意見，MD3 實在是非常難做出能讓我們滿意的設計……
          

          
          

          

          
    文章來源：優設   作者：酸梅干超人
          

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

          

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

          

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

          

          
    
          

          

          
    
          

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(2707)
              
                          
          
          
          
                      
          
            
            
          B端表格頁詳解
          
            
          
               資深UI設計者                                            
          
            
          
           那么之前的文章都是對于B端這樣一個系統，進行概括性地講解，系統的講解。那么從今天開始，我將對B端系統對大家進行一個詳細的講解，包括每個控件的具體使用。這就是我們從大到小，再由小到大的這樣一個學習過程，那么目前我們要進行收縮范圍，要精確的明白某個控件應該如何使用。今天我所講解的是表格頁的具體使用方法，以及如何分析現有表格頁的問題。

          

          
           文章句句將會直擊重點，拒絕長篇大論。

          

          
           那么為了方便大家的理解和查看，我這里去列舉一張表格頁的圖片。以下的講解都會圍繞這個表格頁的圖片，進行詳細的剖析講解。那么，在看的過程中，我們要時刻的翻到上面這張圖片，對照著這張圖片來吸收消化今天的知識。

          

          
    

          

          
           大家可以看到這是一個關于資產清單的表格頁，那么它的構造也符合我們常規的表格頁。首先我們對這個表格也進行分析，我們可以看出表格頁是由這幾部分組成的，它們分別是數據過濾，數據操作和數據查看。

          

          
    數據過濾部分指的就是我們頁面上方的這樣一個搜索框，包括。我們表格頁內容頂部的資產編碼，資產名稱，它們后邊都有這樣一個篩選器，我們可以按照順序或者是倒序進行篩選。這里我把數據過濾的部分用紅色框標注一下。

          

          
    

          

          
           那么這個表格頁我們可以看出，它的數據過濾其實是非常少的。更多的數據過濾有什么呢？按照資產的新舊程度，我們可以將它分為新的、舊的、淘汰的。那么這三個按鈕也可以作為數據過濾放在我們表格內容頁的頂端。

          

          
           當然，維度有很多個維度，我們不僅可以對資產的新舊程度進行分類，我們也可以對資產的購買時間進行分類，比如2018年、2019年、2020年至今，我們可以對這樣一個時間維度進行分類。同樣，操作按鈕也是放在表格也的頂部，也就是我們搜索框的后邊。這樣用戶在篩選起來會比較的方便，具體需要按照什么維度進行劃分，需要我們找到，我們的業務目標是什么？我們要找到我們的這個表格頁希望給用戶傳達出怎樣的信息？那么用戶最關心的點是什么？找到這些之后我們就可以對用戶最關心的點以維度進行劃分更多的篩選器，有助于用戶更好的去瀏覽內容。

          

          
           此頁面我們可以看出他的篩選器過于少。在這里我們并不評價，數據過濾少是好事還是壞事？但是我們要記著，我們時刻要具備分析某個功能模塊。究竟應該放在哪里？它應該怎樣去劃分？這是我們要牢記的點。

          

          
    
          

          

          
    
          

          

          
           那么剛才也說過，一個表格頁分為三部分，分別是數據過濾，數據操作和數據查看?，F在我們來講第二部分，也就是數據操作。那么什么是數據操作？數據操作，顧名思義就是對頁面中的某些數據進行操作功能，可以是增，刪，改，查等等，它都是屬于數據操作。那么數據操作，它一定是一個可點擊的一個功能按鈕，在頁面中，我們如果仔細找一找很容易就會發現數據操作的模塊。在這里呢，我同樣用藍顏色的框給大家框起來。

          

          
    

          

          
           在這里，藍色框框起來的部分，就是我們這個表格頁中的數據操作部分，也就是第二個部分。

          

          
    那么很多人可能會有疑問了，說為什么同樣都是數據操作，有的數據操作在上面是純色的一個按鈕顯示，那么有的數據操作又在表格內容頁里，這些究竟有什么區別？

          

          
           沒錯，數據操作。它擺放的位置是多種多樣的，但它遵循一個規律，什么規律呢？也就是說在我們執行數據操作的設計這樣一個功能模塊的時候，我們需要對其進行第1次的劃分。數據操作部分我們可以分為單行操作，批量操作和全局操作三個操作點，也就是說所有的操作功能無非就是在這三個類別中的某一個類別。好，下面我來給大家詳細講一下什么是單行操作，什么是批量操作和全局操作。

          

          
           我相信大家通過字面意思也能對這三種操作方式有一定的了解，單行操作指的是針對表格內容頁的一行數據進行操作，一般就是放在表格頁的這一行的尾部。那么批量操作針對的是對多個數據進行操作，他一般放在表格內容的頂部，那么什么是全局操作？全局操作是對整個表格頁的頁面進行操作，比如說我要導入新的表格，或者說我要替換這個表格，那么根據優先級順序來說，全局操作大于批量操作，又大于單行操作。這就是數據操作的三個不同點，那么很顯然在我們上張圖片中。只存在單行操作和批量操作，并沒有全局操作。

          

          
    
          

          

          
           接下來我對最后一個部分，也就是數據查看這個部分進行一個講解。數據查看也就是我們系統所反饋給用戶的一些數據，它包括具體的數字，也包括一些漢字，所有的信息都可以被列為數據查看。那么由于這個表格頁上的數據查看部分沒有去寫一些信息，將這些信息打碼隱藏了，但是我們不難想象它填入信息后的樣子，也就是整個表格的內容頁的核心部分就是我們的數據查看，無論是數據操作還是數據過濾，只是進行一些功能上的操作，那么用戶最終的視線還是要落在數據查看這個部分，同樣我用橙色的框給大家標注出來。

          

          
    

          

          
           如果說我們的數據查看部分，其中的數據是混亂不堪的，或者說它的列數是非常的繁瑣的，那么對用戶的體驗非常不好，也不能在第一時間抓住有效信息，所以我們在設計的過程中一定牢記7±2法則進行設計。

          

          
           那么有的人有疑問了，說如果我的列數非常多怎么辦？如果你的列數非常多，那么你只顯示其中的重要信息在表格頁這一塊，其他信息應該歸納到查看詳情，或者是二級頁面內，不能在一屏中展示過多的信息，即使你放了這么多信息，你要記著那也是無效的擺放，用戶在進來之后根本就不想看一眼，所以在這里我們要一定要記著7±2法則，或者說我們給自己定一個列數的系統規范也是可以的。

          

          
    
          

          

          
    
          

          

          
           以上，就是今天對表格頁的詳細講解，那么要學習更多知識也可以進我的公眾號學習。我們要知道再簡單、再復雜的表格頁也無非就是三塊，數據過濾、數據操作和數據查看，當然在頁面中也存在我們的導航系統，它們共同組成了一個完整的表格頁，表格頁所遵循的宗旨是簡單高效，信息直觀，操作方便快捷。

          


          

          
    文章來源：站酷  作者：弧形線
          

          

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

          

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

          

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

          

          
    
          

          
            
          
              
                評論(0)
                瀏覽(1637)
              
                          
          
          
          
              
          

  

          


          
    
  
          
    
          日歷
          
    
          
        
          
        
    
          
  
          
    
    
          
      
          鏈接
          
      
            
                
          
    
          
    
          
      
          個人資料
          
      
          
          
          
                    
          
          
          藍藍設計的小編
          http://www.syprn.cn
          
      
          
    
          
    
          
      
          存檔
          
      
    
          

          

          



亚洲va欧美va天堂v国产综合