如期而至，這是標簽欄控件總結的第二期。這一期真是掏空職業經驗，希望對你的工作有所幫助。

這一期我們來聊一聊標簽欄中的關鍵元素——圖標。

圖標其實存在于界面中的許多地方，但因為這一期主要分析標簽欄，所以我會借標簽欄中較主流的圖標樣式，總結一套圖標制作與落地方法。這些方法在圖標制作過程中都是相通的，大家可以舉一反三。

標簽欄圖標規范

1. 圖標樣式

圖標具體樣式風格的定義是非常主觀的，網絡上也流傳著許多的教程教大家如何設計五花八門的圖標，所以在這里我就不再贅述了。我主要來總結一下基礎的標簽欄圖標一般有哪些樣式變化。

我調研了諸多的應用程序，發現主流的 APP 標簽欄樣式變化，大致分為以下五種。其中占比最多的是「由線型轉面型」。

調研的應用程序中，所有使用到線性圖標的應用程序，都將描邊粗細限制在 1pt-2pt 之間。

2. 圖標視覺大小

上一期我們講到，iOS 定義了一套標簽欄圖標的尺寸規范。

iOS 在這里所定義的尺寸并不是圖標文件最后輸出的尺寸，而是給設計師作圖時，針對不同圖標形狀的參考尺寸，目的是為了讓圖標的視覺大小看上去一致。

那么為什么 iOS 會根據不同的圖標形狀給出不同的圖標尺寸呢？因為 50px×50px 的正方形比 50px×50px 的圓形面積更大，所以正方形的視覺大小也會大于圓形。為了統一圖標的視覺大小，正方形要做適當的面積收縮處理。（矩形同理）

于是我們看到許多平臺都推出了圖標輔助網格規范 1。其實如果遵從「面積相等」原理，理論上所有的圖標網格都應該由下面這一套推理公式得出（以Material Design 標準圖標網格為例）：

但實際情況是，不同平臺的圖標輔助網格規范建議尺寸都有一定的差異。原因就在于，雖然有時候我們參考「面積相等」原則對圖標視覺尺寸進行了規范，但項目落地后發現視覺上可能還是有一些不協調，所以最終設計師還是會憑借自己的主觀判斷再進行微調。

記?。汉玫脑O計作品是理性的設計理論與設計師本身感性的碰撞結果，二者缺一不可。

3. 圖標輸出尺寸

iOS 規定標簽欄圖標的輸出尺寸統一為 31pt×28pt；Material Design 規定標簽欄圖標的輸出尺寸統一為 24dp×24dp。

但我們發現，在借助了圖標網格解決了圖標視覺大小的問題之后，每一個不同形狀的圖標，尺寸其實是不同的。為了方便前端落地，我們在輸出切圖文件時，要保持每一個圖標文件的輸出尺寸是相同的。該怎么辦呢？

于是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素，正好也幫助我們規避了圖標落地后，切圖邊緣像素可能被截斷的現象發生，所以我們稱這個區域為「安全邊距」。

對于安全邊距的規定：Material Design 全平臺規定圖標的安全間距統一 2dp；iOS 則根據不同的圖標使用場景給出的不同的圖標網格和圖標安全間距 2。

靜態圖標

標簽欄的圖標一般分為靜態圖標和動態圖標兩種。

靜態圖標的實現方法相對容易，可以與前端溝通確定本次項目交付的標簽欄圖標文件是采用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件；如果是矢量圖建議交付 .svg 格式文件。

1. 位圖圖標

使用位圖時請注意以下兩點：

不同項目環境輸出的切圖套數不同

• 交付 iOS 原生的標簽欄圖標切圖需要 @1x/@2x/@3x 三種倍率的切圖文件；
• 交付 Android 原生的標簽欄圖標切圖需要 @1.5x/@2x/@3x/@4x 四種倍率的切圖文件（@0.75x 和 @1x 切圖層分別用于 ldpi 和 mdpi 分辨率設備，但這些設備現在幾乎已退出市場，所以可不考慮，但最終視項目真實需求確定。）；
• 交付 web 項目的切圖需要試情況而定，一般常用 @2x 切圖，因為 @2x 向下適配 @1x、向上適配 @3x，都不會產生太大的圖片失真。但有時候前端小哥會要求用到其他倍率切圖，所以最終以具體需求而定。

請注意：這里我所提到的倍率全都是「絕對倍率」，這個概念非常關鍵。

「絕對倍率」指的是：以上所有的倍率都是針對 @1x 設計稿下的輸出倍率尺寸。而當你使用 @2x 作圖時，為了保證「絕對倍率」不變，你的切圖輸出倍率就應該設置為 @0.5x/@1x/@1.5x 。

如果你在 @2x下作圖，卻依然保持輸出 @1x/@2x/@3x 的切圖，那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。

有一點繞的話，我們以 Sketch 導出位圖切圖為例：

所以如果你日常使用的是 Sketch，也是用 Sketch 原生導出工具，那你的切圖預設應該根據你的作圖尺寸而定，見下表：

如果你日常使用的是 PS，用 Cutterman 切圖，那么 Cutterman 會自動識別你當前的畫板，然后根據它的寬（橫屏情況下是高）來設定它的基準分辨率。那么你在任何情況下輸出 @1x/@2x/@3x 的切圖，其實都是「絕對倍率」，不用像 Sketch 當中一樣換算。前提是「設置當前畫布為：Auto（自動識別）」。

假設你在 @2x 下作圖，執意不管不顧「絕對倍率」，又忘了交代前端人員手動處理切圖尺寸的話，那你所有的切圖尺寸實際都是設計稿所需圖標尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸，每一張切圖所包含的像素信息，都比項目真實所需的要多很多，完全就是在徒增所需切圖文件的大小。

注意切圖文件大小

切記，公司的線上項目中，用戶從服務器下載的每一單位的流量都是要公司花錢的，所以許多項目管理者都是很在意控制線上文件大小的。于是壓縮切圖是 UI 必備的技能之一。

雖然圖標的文件大小一般只有幾 KB，但是項目大了難免積少成多，所以在真實項目中，不管任何切圖我都會手動壓縮一次。

這里推薦一個壓縮 .png 文件大小，但幾乎不會產生失真的免費網站 tinypng3（是我曾經深愛的一位前端小哥推薦給我的，在此表示感謝）。

2. 矢量圖

位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題，但對于矢量圖，這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI 可以在 Sketch 或 Ai 中制作。

一般與前端人員對接有在線圖標庫對接與本地文件對接兩種。

在線矢量圖標庫有很多，國內比較流行的是阿里巴巴矢量圖標庫-iconfont?；本地對接就是直接將文件發送給前端人員，他們會自行進行項目文件的管理與調用。

如果 .svg 切圖輸出后，與設計稿中樣式不符，請注意排查以下三點：

svg 不支持漸變顏色填充；

• svg 不支持描邊，請將所有的描邊輪廓化。Sketch 中可通過「圖層-輪廓化」；AI 中可通過「對象－路徑－輪廓化描邊」；
• 要確保一組圖標的文件尺寸一致，需在圖標下方增加一個透明方形，和圖標一同導出。

動態圖標

為了提升用戶體驗和產品趣味性，動效微交互的標簽欄圖標也越來越流行了。

動效在前端落地的方法其實有很多：

• 前端代碼直接實現：代碼是很強大的，但通常用代碼直接寫復雜動效會很浪費項目時間。簡單維度的動效如位移、透明度、大小變化等可以借助代碼，但復雜動效就不要去打擾前端小哥了；
• 直接剛 gif：這已經是老舊技術時代的動畫解決方案了，文件大且請求文件也需要時間，有時候無法給用戶及時的觸控反饋。再者它是位圖的原因，在高分辨率屏幕上縮放容易失真。
• png 序列幀：我們知道，動畫是一張一張的靜態圖交替變化形成的。如果將每一幀動畫都拆分成一張圖片，就有了 png 序列幀。所以一套動畫的 png 序列幀往往非常多，文件大小自然就變大了。所以后來也有團隊引進了雪碧圖的方式，但文件大小依然不樂觀。并且同樣是位圖的原因，高分辨率屏幕容易失真。
• Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 給 iOS 和 Android 提供的常用動畫預設，是較早將動效代碼化的開源技術方案，但動畫效果預設只有彈簧/衰減等一些簡單樣式。后來 Facebook 又推出了 Keyframes，允許設計師自己在 Ae 中自定義動畫并導出，然后交付給前端人員。
• Lottie 動畫：和 Facebook Keyframes 相同，都是結合 Ae 輸出動畫代碼。但是 Lottie 更厲害的地方在于，它比起 Facebook Keyframes 來支持的 Ae 樣式更多，例如蒙版、遮罩、修剪路徑等等。

所以綜上所述，落地標簽欄動態圖標，目前最高效可行的還是 Lottie 動畫。

1. Lottie的背景

Lottie 是 Airbnb 開源的一個跨平臺動畫庫。表現層面它是一張圖片，但實現的方式是通過代碼，所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。

UI 與前端對接是通過交付一個 json 代碼文件。

如果這是你第一次接觸 Lottie，再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平臺：犸良動畫 5。它最底層采用的技術就是 Lottie，只是被阿里二次封裝了許多預設的動畫效果，你可以自定義其中的元素與參數，然后試著導出你的第一個 json 文件。

2. Lottie如何上手

接下來是簡單粗暴的 UI 與前端對接實現 Lottie 動畫落地的全步驟參考。在此之前，想要全方位了解 Lottie 的相關信息，請參閱 Lottie 官方說明文檔 6。

步驟一：安裝 Ae 和 bodymovin

制作 Lottie 動畫，首先你必需兩個工具：Ae 和 bodymovin 插件。

Ae 最低版本要求為 Ae CC2014。又因為據很多設計師反饋，目前 bodymovin 在漢化后的 Ae 中使用會出現諸多問題，所以后面的教程都是基于 Ae 英文版。如果你漢化了Ae，最好在需要制作 Lottie 動畫時取消漢化。

然后獲取 bodymovin7。bodymovin 插件更新至今，版本已非常多，并不一定最新版就適用于你當前的項目，因為前端使用的 bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。

一旦確定使用 Lottie，前端人員會在 GitHub 查詢 Lottie 相關文檔的，所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時，一定要確保當前 bodymovin 輸出的動畫在項目所需要運行的所有環境中可運行，才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。

獲取了 bodymovin 后，將 bodymovin 拖入到 ZXP Installer8 中，ZXP Installer 會自動識別插件安裝到 Ae。

安裝完成后，就可以在 AE 的「窗口-擴展」中看到 bodymovin 啦。

步驟二：將 Sketch 或 Ai 中的文件導入 Ae

如果你技術嫻熟，當然也可以直接在 Ae 中繪制圖案動畫。但如果你還是習慣先在其他軟件中繪制好基礎圖案，再到 Ae 中制作動畫，那你需要了解如何將圖案導入 Ae。

Ai 和 Ae 都是 Adobe 旗下的工具，所以 Ae 是可以完美解析 .ai 文件的，如果你是使用 Ai 作圖，可直接存儲為 .ai 文件，再在 Ae 中打開。

如果你使用的是 Sketch，可以先導出為 .svg，再用 Ai 打開該 .svg 文件，轉換存儲格式為 .ai，最后到 Ae 中打開。

當然，Sketch 還有直接和 Ae 對接的插件，AEUX（前身 Sketch2AE）9。需要在 Sketch 和 Ae 中同時安裝 AEUX 插件，Sketch 負責傳送，Ae 負責接收。具體的使用方法可以在官網教程中查看，我就不再贅述了。

步驟三：制作動效并輸出

和靜態圖標同理，為了保證落地時圖標視覺大小一致，一組動效圖標輸出的文件尺寸應該是相同的。所以在你制作動畫之前需要確定合成文件的尺寸。Lottie 官方建議：因為 Lottie 輸出的是矢量動畫，所以建議以 @1x 輸出動效，前端人員在任何屏幕上放大并不會失真。

在制作之前請務必詳細閱讀 Lottie 所支持的 Ae 參數文檔10，以免辛苦做出的動效，前端無法解析。特別提醒：原生環境中 bodymovin 是不支持解析 Ae 表達式的。

完成制作動效后，就可以通過 bodymovin 導出動效了。

步驟四：預覽與交付

導出完成后在你的目的地文件夾中將存在一個 .json 文檔，如果你的動效中還使用了位圖，系統還會自動生成一個 images 文件夾。這些都是你需要交付給與你對接的前端開發人員的文件。

.json 文件中記錄的動效代碼 UI 不需要過多關心，但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關鍵參數。

UI 自檢動效或其他相關人員需要預覽動效的時候，可以用 LottieFiles11，拖入 .json 文件即可預覽。iOS 和 Android 還可以下載 LottieFiles APP，掃描預覽頁中的二維碼即可在移動端預覽。

總結

整個制作圖標的流程我已經全部整理出來了。首先要注意圖標的規范，然后制作位圖、矢量、動效圖標時的注意點，我幾乎把我在真實項目中踩過的坑都告訴大家了。剩下的創造性的環節就交給你了。

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

顏色可以用來區分信息圖形上的數據類別和維度，是數據可視化中最常用的視覺變量之一。然而，世界上有超過8%的男性和0.4%的女性都被色覺障礙的問題困擾——他們在識別部分或者全部顏色時有困難。我們通?；\統的稱這類人群為“色盲(Color Blindness)”（也稱為道爾頓癥、色覺缺失、色覺辨認障礙、色弱等）。面對如此龐大的特殊受眾，設計師理應關注他們的需求。信息圖形設計本是以向用戶傳遞精準數據為目標，也不能忽視了這部分群體。

一. 了解色盲
“色盲能看到顏色嗎？”“他們只能看到黑、白嗎？”——人們常誤以為色盲視覺所見的景象只有灰階分布，其實不是的。色盲并不意味著色覺的完全喪失，而是指部分色覺受損，因此無法正確感知和分辨某些區域的顏色。色盲可以分為：紅色盲（P）、綠色盲（D）、藍色盲（T）和全色盲。其中紅色盲和綠色盲最為普遍，合稱為紅綠色盲。全球大約2億人都患有色盲，它的普遍程度甚至高于AB血型的人群。下面我們感性的看看色盲人眼中的世界：
 

從上面模擬色盲色覺的圖片來看，我們可以感受到色盲人士能夠辨識的色相較為有限。紅色盲和綠色盲的色覺較為近似。由于紅綠色盲人數占到了色盲總數的99%，我們需要更多地理解他們能看到的顏色。以下列舉了紅綠色盲容易混淆的顏色，以及色覺上的一些規律：

 　　1 ) 紅綠色盲難以分辨兩種差別只在紅色或綠色元素的顏色。如紅色和綠色；藍色和紫色（藍+紅）；綠色和棕色；紅色和棕色等。

2 ) 紅綠色盲人士對藍色更為敏感。舉例來說，他們會把紅色和綠色、或黃色和黃綠色混淆，但卻能清楚的分辨綠色和藍綠色（翠綠色）。

3 ) 紅綠色盲眼中的紅色并不是一種明亮醒目的顏色。相反紅色對他們來說顯得非常深，而暗紅色則幾乎接近黑色。因此色盲人士很難分辨出文章內的深紅色強調字。

4 ) 雖然色盲人士對色相的辨識能力較弱，但卻對明度、飽和度非常敏感。

5 ) 相比高飽和度的顏色，低飽和度的顏色更難辨認。如天藍色和粉紅色。

也許以上的分析還是太抽象，為了更直觀的看到色盲人士眼中的顏色，下面介紹幾種模擬色盲色覺的工具，方便設計師們設計和檢驗：

Adobe自帶的校樣設置

Photoshop CS4和Illustrator CS4及以上版本提供了模擬紅色盲和綠色盲的校樣設置，對于每天都在Photoshop/Illustrator中拼搏的視覺設計師來說，這是最簡便的一種方法了。選擇“視圖—校樣設置—紅色盲型/綠色盲型”

 Color Oracle：http://colororacle.org/

 網站Color Blind Web Page Filter：http://colorfilter.wickline.org/

二.設計解決方案

設計面向色盲人士友好的信息圖形，并不意味著要設計師要放棄使用色彩這種“利器”。即便是對色覺障礙的人士來說，顏色依然是區分不同類數據的一種簡單快速的表現形式。要提高信息圖形的識別性和易讀性，我們可以遵循這樣幾個思路尋找解決方案：（1）不完全依賴顏色來區分信息，同時使用多種視覺變量來編碼信息；（2）選擇安全的配色方案；（3）使用文字注解。

1.冗余編碼

避免僅使用顏色來編碼信息，應盡量同時使用多種視覺變量（如形狀+顏色、尺寸+顏色、注釋+顏色）來對信息編碼。其中，形狀包括了這樣一些可使用的元素：圓形、三角形、矩形等；實線、虛線、點線等；字母、數字符號等。這里需遵循的一個原則是：使用盡可能少的顏色——結合使用不同形狀符號和少量鮮艷的顏色，效果遠好于只使用一種形狀和多種顏色。

 
2.選擇適當的配色
針對色盲人士的顏色識別能力，需要精心選擇配色，才能避免選擇容易混淆的色區。然而，要使配色能覆蓋到各種色覺辨認能力的人（包括色盲、色弱和色覺正常的人群）并不是一件容易的事，尤其同一界面需要出現多種顏色時，讓設計師非常頭疼。日本有研究得出一組無障礙配色建議，在此分享，供大家參考。這組顏色針對色盲和非色盲人士都是易辨識的（例如它選擇了朱紅色代替紅色，藍綠色代替綠色，紫紅色代替紫色，以減少色盲人士的困擾），它對屏顯和印刷都適用，并且所有顏色的名稱也容易定義。

需要注意的是，從以上配色組中選取顏色時：A. 請交替使用暖色和冷色；B. 當使用多個暖色和多個冷色時，在明度和飽和度上做出區別； C. 避免同時使用低飽和度和低明度的組合。
另外分享兩個配色工具，它們都提供了針對色盲人士配色的選項，可以輔助大家進行配色：
網站CONTRAST-A-WEB V2.0 http://www.dasplankton.de/ContrastA/（打開“show color deficiency simulation”面板）
地圖配色工具COLOR BREWER 2.0 http://colorbrewer2.org/（勾選“colorblind safe”選項）

三、舉例

下面以幾種常用信息圖形為例，來說明如何為色盲用戶優化信息圖：

1)點狀圖

優化采用了這樣一些手段：A.調整配色，將色盲人士容易混淆的紅、綠、橙色換為紅、藍、黃色。B.調整明度，使圖中幾個顏色在明度上差異更明顯。C.為不同元素賦予不同形狀。所有使用點元素的信息圖，都可以參考這種解決方式。

2)折線圖

優化采用了這樣一些手段：A.采用更粗的線條，使顏色更明顯。（色塊越小，顏色越難分辨。對有色覺障礙的人來說，帶顏色的細線、小圖標、細體文字尤其難區分。）B.換用不同形狀的線條（實線、虛線、點線）。C.文字直接注釋在線的周圍。D.顏色微調。這樣對每一類數據使用多重可視化變量進行編碼后，即便顏色信息完全丟失，也能夠完整的傳遞信息。所有使用線元素的信息圖，都可以參考這種解決方式。

3)柱狀圖

通過增加底紋，直接標注文字注釋的方式優化了柱狀圖。所有使用面的圖形（如餅圖），都可以參考這種解決方式。

四.寫在最后

在實際設計過程中，我們不一定會同時使用到以上所有手段，需要在美觀和友好之間進行權衡。我們也可以采用一些交互手段，避免同一界面中元素太多太過雜亂的問題。如highcharts這個趨勢圖非常優秀，它采用了易辨識的顏色，每個節點處都使用了不同形狀的符號，然而僅當鼠標hover到具體節點時，會出現該條線對應的信息（“New York”）。

另外除了鼠標hover的交互方式以外，我們甚至也可以為色盲人士提供單獨的色盲模式切換，這樣也可以兼顧視覺上的美觀，避免了太多信息的干擾。這種形式在游戲和軟件中也有先例。例如iChat，一般情況下僅有不同顏色來區別用戶的在線狀態，但同時，它也提供了“User shapes to indicate status”選項，可以將“空閑”狀態換成橙黃色三角形符號，將“忙”狀態換成紅色方形符號表示。

文章來源：騰訊CDC  作者：pearlfu

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

編輯導語：新基建的支持，持續利好的政策，再加上互聯網紅利正在逐漸向供給側轉移……諸多因素都在推動著產業互聯網的發展。B端市場儼然已經成為產業互聯網的代名詞，盡管如此，B端市場仍然需要深度改造，我們要認清其獨特性，把握B端時代的發展規律，贏得發展紅利。

毋庸置疑的是，產業互聯網絕對是當前的熱點。無論是頭部的互聯網巨頭，還是新入局的玩家，幾乎都想要通過加持產業互聯網的概念來投身到全新的風口里。

的確，在C端流量的爭奪已然成為紅海的大背景下，將目光轉移到B端市場，我們將會發現一片充滿了機會的藍海。于是，習慣了跟隨風口的人們，開始將目光投向B端市場，并且開始用自身的實踐來尋找著挖掘風口的全新方式和方法。

在很多時候，B端市場，儼然成為產業互聯網的代名詞。

盡管B端市場的確有著非常龐大的市場潛能，并且B端市場確實需要被深度改造，但是，同僅僅只是以搭建平臺和中心為代表經典互聯網模式不同，B端市場或許需要投入更大的精力，或許需要建構新的商業模式，才能真正見到效果。

縱然是那些處于頭部的互聯網巨頭，依然需要投入很多，才能在賦能和改造B端的命題上有所建樹。簡單來講，B端時代是一個比C端時代的險灘暗流更多的時代。這是B端時代雖然成為一種趨勢，但卻一直都無法獲得突破性發展的根本原因。

說到底，B端市場是一個與C端完全不一樣的市場。

簡單地套用C端市場的打法并不能夠奏效，甚至還會失去絕佳的窗口期。找到真正適合B端時代的商業模式，并且真正能夠用這套商業模式解決互聯網時代無法解決的痛點和難題，或許才是B端時代的玩家們真正應該思考的關鍵問題。

我們都知道，在C端時代，互聯網平臺通常是用燒錢和補貼的方式來改變C端用戶的習慣，而后再對C端用戶進行收割。在這個過程當中，玩家們僅僅只是需要將平臺盡可能做大即可，等到C端用戶的行為和習慣改變之后，他們就可以發揮業已形成的規模效應，實現盈利。

同C端時代的商業模式不同，B端時代是一次全新的旅程，我們只有認清了它的獨特性，才能真正把握B端時代的發展規律，最終贏得發展紅利。

一、B端時代不一定要做大，但一定要做深

相對于C端時代動輒千萬級別，甚至億級的用戶量不同，在B端時代，用戶的量級會大大減少?？v然是頭部的平臺，它們所服務的用戶都無法達到C端時代的量級。

因此，僅僅只是將目光聚焦在用戶的量級上，試圖通過規模效益來實現自身的發展，很顯然是不對的。這是B端時代來臨之后，人們簡單地套用C端時代的發展模式，卻一直都無法奏效的根本原因。

同C端時代一定要做大不同，在B端時代，更加考驗玩家的是，是否能夠做深，是否能夠對一個B端玩家從頭到尾進行方方面面的賦能，徹徹底底的改造。

如果一個玩家可以對一個B端用戶從始至終都進行深入而又全面地改造，并且真正可以給B端用戶帶來本質性的變化。那么，這個玩家或許才算是真正掌握了B端時代發展的精髓。

這就需要B端時代的玩家擁有較為龐大的綜合實力。他們不僅要能上九天攬月，還要能夠下五洋捉鱉。由此可見，在B端時代，僅僅只是依靠概念和營銷是難以實現持續發展的，只有真正成為一個多面手，真正能夠給B端用戶帶來真正的改變，才能讓B端用戶買單。

如何扎根到某一個行業當中，把某個行業的內在流程和環節摸清弄透，做B端用戶的“萬金油”，才是確保一個B端時代的玩家可以長久發展的關鍵所在。所以，在B端時代，不一定要做到像C端時代那樣的量級，但是，一定要比C端時代做得更深，更透才行。

二、B端時代不一定要做平臺，但一定要做中臺

互聯網思維的深度影響讓玩家們簡單地認為，在B端時代，只需要搭建一個平臺，再把B端用戶聚攏在這個平臺上，就可以自然而然地進入到B端時代。事實證明，在B端時代，我們真正缺少的不是撮合和中介，而是賦能和改造。

在這個大背景下，互聯網時代的平臺和中心的概念已經不那么重要了，如何對B端用戶進行深度而又全面地賦能，如何深入到B端行業的方方面面，才是保證B端玩家真正把握風口的關鍵所在。

從這個角度來看，在B端時代，人們真正需要的或許并不是一個平臺，而是一個中臺。

同平臺僅僅只是一手聯通著上游的生產端，一手聯通著下游的消費端不同。中臺更像是一個深入到生產端和消費端的細枝末節的強大的根系，它不僅要承擔聯通的角色，而且還要承擔輸送營養和能量，改造B端角色。

可見，我們再去用平臺的概念來實踐B端時代的發展，依然無法真正把握B端時代的精髓，僅僅只能變成落后的B端玩家傾銷傳統、原始庫存產品的場所，而無法成為升級、轉型B端行業的助推器和營養基。

在B端時代來臨早期階段，我們看到的諸多以銷售為主導的賦能方式和方法，無論是社交電商，還是社交新零售基本上都是基于平臺思維出現的，而后來的發展同樣告訴我們，這種平臺思維無法真正奏效，以中臺代替平臺，才能真正把握B端時代的發展紅利。

三、B端時代不一定要封閉，但一定要開放

在C端時代，我們更多地看到的是你強我弱的零和游戲，即一方的強大，一定是以另外一方的弱勢為基礎的。這是互聯網平臺之所以會不斷建構屬于自身的生態系統，不斷進行流量的爭奪，并且逐漸走向封閉和壟斷的根本原因。雖然這套模式在C端時代非常奏效。

但是，等到B端時代來臨，我們再去用這樣一種封閉的、獨立的生態系統式的模式發展的時候，便會開始遭遇越來越多的困境和難題。

因此，在B端時代，我們并不一定要建構一個封閉的、獨立的生態系統，而是要打破自身的局限，不斷破圈才能獲得更大的發展空間。當下，我們看到越來越多地互聯網平臺開始破圈，打破原有的生態圈的概念，正是這種現象的直接體現。

B站在破圈，快手在破圈，阿里在破圈，微信也在破圈。這說明，在B端時代，不同的生態體和平臺之間同樣需要不斷聯通，才能真正給B端產業帶來改變，一味地封閉，不僅無法獲得發展，甚至還將會走入到死胡同里。

在B端時代，一定要開放，一定要協同。當我們不斷打破原有的圈層限制，當我們不斷開啟新的發展的時候，不同中心之間的協同給B端行業帶來的改變才能更大。從單平臺到多平臺，將會成為B端時代的主旋律。

以此為開端，在我們的頭腦當中所形成的根深蒂固的平臺和中心的概念將會由此打破，取而代之的將會是共生體的概念。

四、B端時代不一定要消費升級，但一定要產業升級

我們都知道，伴隨著B端時代的來臨，人們提及最多的是“消費升級”的概念。因為在消費升級的概念出現之后，人們才會反推到產業端，用產業升級來實踐B端時代，并且由此衍生出來了產業互聯網的概念。

事實上，所謂的消費升級的概念，其實依然是基于C端時代誕生出來的概念，如果用這個概念來指導B端時代的發展，是無法讓B端時代的發展跳出C端時代的發展怪圈的。

真正意義上的B端時代并不真正需要所謂的消費升級，但是，一定需要產業升級。因為以C端為主導的消費互聯網時代遭遇困境的根本原因不是因為C端用戶出問題了，而是因為B端的生產和供應方式出問題了，落后的供應端已經難以與消費端完美對接。

在這個時候，我們只有升級B端產業，通過新的生產方式和供應方式去滿足C端用戶的新需求，才能化解消費互聯網時代的問題，再度讓供求兩端實現對接。

隨著人們對于B端時代認識的深入，消費升級的概念開始逐漸被弱化，取而代之的是產業升級和消費平權的概念。通過產業升級，我們看到的是B端行業的生產模式和供應模式需要一場深度且全面地改變；通過消費平權，我們看到的是B端行業的用戶群體需要從一二線城市轉向下沉市場。

從本質上來看，無論是產業升級，還是消費平權，都是一場以B端變革為肇始點的新發展。不同的是，產業升級的概念之下，玩家們真正應該關注的是外部產業的升級；而在消費平權的概念之下，玩家們真正應該關注的是自身的升級。

五、B端時代不一定要去互聯網化，一定要數字化

伴隨著B端時代出現的是產業互聯網的概念，提及產業互聯網的字眼，人們自然而然地將其與互聯網聯系在一起。

后來，隨著大數據、云計算、區塊鏈和人工智能為代表的新技術的崛起，我們看到的是一場以去互聯網化為代表的新發展浪潮的來臨。于是，人們開始將B端時代與互聯網撇清聯系，甚至開始詆毀互聯網的功能和作用，去互聯網化儼然已經成為一種潮流。

筆者認為，在B端時代，我們并不一定要去互聯網化，而是一定要擺正互聯網的位置，認清互聯網的作用。在很多時候，B端時代的互聯網更多地承擔的是一個數字流量的獲取和整合的角色，它存在的價值和意義在于為將來的數字化積蓄能量。從這個角度來看，B端時代的來臨并不一定需要去互聯網化，而是應該更多地需要數字化。

如何以數字化為切入點來改變消費互聯網時代以互聯網為主導的發展模式，通過對傳統產業進行數字化的改造和整理，為傳統行業的發展汲取新的發展動能，或許才是我們真正應該關注的地方。

從這個邏輯來看，B端時代并不一定要去互聯網化，但是，一定要數字化。只有數字化真正實現和完成之后，B端時代才能真正完成和實現。

當產業互聯網時代來臨，B端市場成為一個備受關注的熱門領域。很顯然，B端市場與C端市場是存在著巨大區別的。認清這種區別，并且以此來落地和實踐產業互聯網，才能避免產業互聯網走回頭路，真正讓產業互聯網帶入到屬于自己的發展軌道里。

文章來源：人人都是產品經理  作者：孟永輝

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

逐幀分析方法是一種針對動態的、短暫的過程對象進行對比分析的方法。該方法可幫助設計師以微觀視角完成差異分析并得出相應結論。與傳統的靜態截圖、動態錄屏方法相比，其優勢是可以看到過程的全貌，對動態細節一覽無余，具有較高的分析可控性。

背景

逐幀分析方法的產生源于一次針對加載場景的體驗調研項目。百度百科對于加載的定義是：所有軟件要運行必須加載到內存，加載就是把需要的文件及信息讀取到內存里。簡單說來，所有從服務器讀取信息并顯示在手機屏幕上的過程都屬于加載。以百度APP舉例，加載的典型場景有：啟動、打開FEED落地頁、打開搜索落地頁等。這些場景都有一個共同的特點是：動態的過程，且過程較為短暫。

基于以上特點，運用對比分析里最常見的靜態截圖或動態錄屏方法，是無法完成分析的。原因是，靜態截圖對于一個動態過程來說，無法看到過程的全貌，可對比點較少，分析要素不可控（一張靜態截圖中，無法做到涵蓋所有分析元素）。而采用動態錄屏的方法進行分析時，問題也同樣明顯：過程太快，無法看清細節；不同視頻節奏不同，對比起來比較困難。因此針對加載這種特殊的場景，就需要采用一種全新的方法既能看到過程全貌，又可以對細節一覽無余。

方法的產生

小時候我們都玩過跑馬燈的游戲，即一系列靜態圖片通過快速輪轉，由于視覺滯留效應，便可看到一段動態影像。如果把產生動畫的過程翻轉過來，也就是說如果可以把一段動態影像拆成一系列序列幀，那么是否可以更好的完成影像觀察？

以百度APP打開小視頻落地頁的加載場景為例，當我嘗試將這段300ms的過程錄屏拆分為18張序列幀后發現，除了可以清楚的看到過程全貌外，對于過程中的所有細節也可以一覽無余。同時，序列幀可以進行任意拆分，以便完成多角度觀察。

到此為止，逐幀分析方法的雛形已經產生。在之后的章節，我將為大家具體介紹如何完成序列幀分析以及如何導出序列幀。

如何進行逐幀分析

面對一系列序列幀，我們可以通過“序列幀三要素”來導出關鍵數據及結論。

要素1：序列幀全流程

首先，我們進行序列幀觀察的時候，需要明確定義目標對象的起點與終點。由于逐幀對比方法適用的觀察對象均為短暫的動態過程，明確定義全流程的起點與終點是為了讓觀察過程和結論更加精準。

以百度APP打開搜索落地頁為例，起點與終點分別是：點擊搜索結果手指松開的第一幀與搜索落地頁首屏內容全部加載完成的最后一幀（可以通過觀察前后幀是否有變化得出結論）。這一要素中，可以采集到的關鍵數據為時長，時長可以幫助我們觀察加載性能的好壞，甚至在進行競品對比的時候，快速找出與競品在時長方面的差異從而得出優化建議。結論輸出時，需要將幀數轉換成為時間單位（如何將幀數轉化成時間會在后續文章中為大家講解）。

要素2：序列幀子流程

在前文中提到，逐幀分析法的一個優勢是，逐幀序列可以進行任意拆分，以便完成多角度分析。在分析的第2要素中，我們可以最大限度拆分子流程，同時需要明確每一個子流程的起點與終點。這一要素的分析中，可以采集到的關鍵數據為子流程時長，缺失或多出的子流程，以及子流程內部的差異。

例如在百度APP Android端熱啟動過程中，全流程被拆分為：啟動至全屏、持續白屏態、內容加載3個子流程。通過換算，可以看到每個子流程的時長。并且在和競品的對比中發現，百度APP缺失了持續白屏態這個子流程。而在啟動至全屏的子流程中，百度APP因為沒有添加過渡動畫，與多數競品是有差異的。

要素3：用戶體驗節點

用戶體驗節點的對比是逐幀分析法的第三要素，這一要素進一步深入到過程的微觀視角，使得分析結論更為全面。而用戶體驗節點是逐幀分析法所提出的一個全新概念，其定義是：產品界面上任何一次用戶可感知的變化，都叫做用戶體驗節點。以百度APP Android打開搜索結果頁為例，整個過程的用戶體驗結點有5個。通過用戶體驗節點可以采集到的關鍵數據有：用戶體驗節點的數量以及用戶體驗節點的順序。

我們以Android打開搜索落地頁為例為大家進一步講解如何完成用戶體驗節點數量的分析。通過對比發現，百度APP在整個加載過程中的用戶體驗節點數量多于競品，多出的節點為：白屏節點、文字加載節點。雖然百度APP加載時長與競品相差無幾，但是由于節點數量較多，導致用戶在等待過程中經歷了過多的頁面狀態變化，形成了較強的視覺閃跳感，從而引發用戶感知層面的錯覺，認為百度的加載時長較長。因此我們可以通過減少非必要的用戶體驗節點，從而提升加載場景的流暢感。但是，用戶體驗節點的數量并非越少越好，這還要根據實際業務與優化方向來輸出具體結論。

用戶體驗節點順序的分析，可以參考百度APP iOS FEED打開圖文落地頁的示例。在這一示例中，百度APP圖文落地頁內容加載節點位于框架轉場節點之后。但是對比競品發現，多數競品在這個過程中，內容加載是先于框架轉場的，而這種節點順序的優勢是，轉場完成后，用戶即可開始瀏覽內容，整體感知較為流暢。這種導致閱讀流暢感體驗差異的原因很難通過肉眼或常規競品對比法觀察得出，由此可見逐幀分析方法針對特殊場景的分析優勢非常明顯。

序列幀三要素總結

在此，我們回顧一下逐幀分析方法的“序列幀三要素”。

要素1：序列幀全流程，可采集的關鍵數據有：全流程時長。

要素2：序列幀子流程，可采集的關鍵數據有：子流程時長、子流程是否缺失、子流程內部的差異。

要素3：用戶體驗節點，可采集的關鍵數據有：用戶體驗節點的數量與順序。

如何導出逐幀序列

工欲善其事，必先利其器。進行逐幀分析前，我們首先要將錄制好的視頻轉化成序列幀。以下章節將為大家講解如何導出逐幀序列。

整個過程可分為：錄制、創建合成、輸出3個環節。

1.錄制

由于系統特性，iOS和Android手機雙端建議采用不同的錄制手段。iOS手機可直接通過數據線連接到電腦，并使用電腦的QuickTime進行錄制。這樣的好處是保證了錄屏的幀數基本穩定在60FPS（每秒傳輸幀數）；Android手機建議采用機內功能或其他錄屏應用完成錄制，但是安卓中低端手機很容易出現掉幀的現象，因此就需要我們在合成和輸出階段制定一個合理的輸出幀數，讓分析的結果更加接近真實。另外，建議錄制的起始點適當延長，這樣便于素材在合成階段精準切割。

這里要為大家講解一下如何將幀數換算成時長。以iOS的輸出幀數為例，換算公式為：iOS時長= N（幀數） x 16.6ms。例如：在iOS打開圖文落地頁的加載過程中，百度APP總時長為：73（幀數）x16.6ms= 1217ms（約等于）。

2.創建合成

創建合成階段所使用的工具是AE。AE的好處是：

1.方便查看原視頻幀速率，對不穩定的幀速率進行統一處理；

2.可以將視頻轉換為圖片序列，便于后續的逐幀分析；

3.AE也可以將多個視頻進行同步播放來進行對比驗證。

第一步：打開AE>合成>新建合成。

這一步的目的是通過合成設置，統一幀速率。通過一系列實驗，我在新建合成時，將iOS錄屏的幀速率設置為60幀/秒，Android錄屏的幀速率設置為30幀/秒，這樣可以保證最大化的減少空白幀，使分析結果更加準確。

第二步：導入錄屏

第三步：截取起止點關鍵幀。

在進行素材處理的時候，需要精確到每一幀，由于逐幀分析所針對場景的時長極為短暫，很可能由于一幀的差距，導致分析結果相差甚遠。

以百度APP iOS端熱啟動過程為例，我們將錄屏中手指抬起的前一幀（即icon顯示出點擊態）做為起點，將APP啟動后填滿手機屏幕的第一幀（可通過觀察法，在AE中查看前后幀是否有變化）做為終點完成素材處理。

3.輸出

輸出的路徑為：菜單欄 文件>導出>添加到渲染隊列，在渲染隊列中找到待渲染視頻，再在 輸出模塊>格式選擇JPEG或PNG以序列導出。這一步的目的是，將一段視頻文件拆分成可提取對比的逐幀畫面。

最終導出的序列幀如下：

在完成分析對象序列幀導出工作后，便可開始進行逐幀分析了。

結語

逐幀分析法是在實際項目中總結并提煉出的一種全新的分析方法。該方法對于短暫的、動態的過程非常適用，可以幫助我們從微觀視角發現問題、驗證問題、得出優化結論，極大的提升了分析效率和精準度。逐幀分析法也在后續的多個項目中也得到了推廣和驗證，希望可以幫助到大家。

文章來源：站酷   作者：MEUX

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

Meet more beautiful colors.

“色彩是我們感知世界的重要媒介，對于信息傳達有著重要的作用，能使人們能夠更有效的感知設計的意圖和內涵，使傳達更高效。且人對色彩的視覺感知與想象能力，能夠指導人做出預測、理解和決策?！?/em>