作者將向你展示微云團隊一路以來對文件圖標設計的思考和沉淀，并著重介紹了當前這套圖標的設計由來。

在過去的一年中騰訊微云為大家帶來了很多新特性，比如創建和在線編輯Office文檔、語音速記、文件收集，微云超級會員的基礎存儲空間從4TB提升到了6TB，此外還有多項特權升級。

就在最近，我們還在灰度接入騰訊文檔，以后會有更緊密合作。微云除了不斷完善基礎的存儲功能，也一直致力于全方位的滿足用戶各種場景下的需求。即便是文件圖標的設計和擴展，我們也沒有輕視，幫助用戶快速辨識和定位自己的文件，是微云用戶體驗非常重要的環節。

文件圖標是什么

由特定應用程序創建的特定文件，我們稱之為文件類型，例如Word文檔的.doc，Photoshop的.psd。

文件圖標根據這些文件類型的特征提供圖形化的表達，幫助用戶辯識文件。當界面完全由文本構成時，讀取和識別每個文字所花費的時間和精力會超過認知過載點。圖標所提供的這種“ 視覺速記 ” 形式，降低了認知負荷并能夠更好利用熟悉的形狀和隱喻以簡單的圖形形式傳達概念。

微云作為一款云盤產品，支持用戶上傳各種類型的文件，這意味著我們的圖標必須盡可能地覆蓋常見的文件類型。

微云文件圖標的四個階段

回首微云各個版本的文件圖標，大致可以劃分為四個階段：PC主導階段、扁平潮流階段、極簡主義階段以及從微云6.0上線至今的理性回歸階段。

1. 設計風格受到PC操作系統影響

在早期，微云的文件圖標設計源自PC客戶端，很大程度上受到桌面操作系統的設計風格影響。

這一階段的圖標從結構上可以分成三類：

1. 常規結構：由紙片背景、彩色橫幅、文件后綴、圖形符號四層組成，這種結構通常用于擁有多種后綴的文件類型或帶有明顯色彩屬性的常見文件類型，如Word文檔、音頻文件、PDF文檔等。
2. 特征弱化：只有白色背景和圖形符號兩層，通常用于只有一種后綴且不常見的文件或通用文件，如iwork系列（當時被認為用戶較少）、系統文件、未知文件等。
3. 背景異化：底層背景根據屬性做了異化，如壓縮包文件和文件夾 。

從視覺焦點可以看出，色彩識別+文字識別被作為最主要的識別特征，淺灰色的圖形符號則被有意的弱化了。

這一階段的圖標結構相對復雜，識別特征較多且分散，用戶視線難以聚焦。提高了用戶辨識的門檻。對圖標結構的主觀分類導致對用戶習慣多樣性的包容降低，并且由于圖標中包含了具體的文件類型后綴，導致設計師要針對每一個獨立的文件格式輸出數量龐大的設計資源。無形中增加了設計師的工作量。但這一階段的圖標文件感很強，設計也符合當時的用戶預期。

2. iOS7掀起的扁平潮流席卷互聯網

從微云3.2版本開始，設計風格的扁平化已經席卷整個互聯網，細線風格的圖標十分流行。

微云文件圖標也進入了真正的扁平時期：

1. 原本的三種結構分類被弱化，所有圖標擁有相似的視覺效果，圖標分類扁平化。
2. 文件后綴名從圖標里移到了文件名的末尾，原本的卡片變成了線框，和圖形符號一起填充了相同的顏色。圖形識別和色彩識別相結合，識別特征扁平化。
3. 每個圖標都是沒有質感的單色，設計風格扁平化。

3. 設計倡導”少即是多”

隨著扁平化的潮流不斷推進，做減法儼然成了所有設計改版的必經流程，微云5.2版本的文件圖標也是歷史上最簡潔的時期：

1. 文件圖標的線框被省去，強化了圖形符號的輪廓識別性。
2. 圖形符號也進行了幾何化和減法，整體看上去更加簡潔規整。
3. 由于第一次采用全白的界面UI，我們在圖標上也增加了藍色的占比。

但是，一味的追求做減法，最終會走向它的反面，過分的簡單反而會增加用戶辨識的難度。就好像國際主義時期的西格萊姆大廈，過分的追求形式上的簡潔，而喪失了易用性。

4. 反思過去，放眼未來

到了微云6.0發布的時候，我們更新了品牌系統，更換了Logo、品牌色以及全新的界面UI。

文件圖標作為視覺體系很重要的一部分，自然也要升級。接下來我們會對當前版本的圖標設計過程進行詳細的闡述。

前期調研

在改版之前，我們需要梳理出現階段文件圖標的問題和優化空間。

1. 通過數據了解用戶的使用習慣

文件圖標是服務于用戶內容的圖標，一千個用戶就有一千種文件列表，不同文件圖標出現的頻率、數量我們無法控制，但是我們可以借助大數據來了解這些文件類型的數量和分布。

我們從后臺系統跑取了一段時間內微云中各種文件類型的數據，并按照上傳的文件數量對它們進行了排序。（由于圖片和視頻文件的圖標會顯示內容縮略圖，其文件圖標出現的概率非常低，我們對其數據進行了排除。文件夾由于來源多樣也未列入其中）我們截取了前24種文件類型格式，并繪制了餅圖：

從結果可以看出，微云內的文檔類文件數量占比非常高。在新版本中，微云的移動端和WEB端全部支持了Office系列文件的在線編輯能力。這也使得部分微云用戶對文檔類文件的關注有所提高，一定程度上也改變了用戶的工作方式。

因此，保證用戶快速辨識文檔文件變得尤為重要。而上一版的Office系列圖標僅僅是由一個彩色字母表示，在辨識度上有很大的提升空間。

2. 用戶習慣為設計改版帶來挑戰

設計改版意味著用戶體驗的變化，這就帶來一個無法回避的挑戰：用戶對現有設計已經形成一定的認知模型，設計改版勢必會在一定程度上傷害這種認知模型。這也是為什么我們無數次看到某些產品在發布全新設計之初會有大量的負面評價。文件圖標做為微云中直接表達用戶內容的重要元素，掌握好改版的度就顯得尤為重要。

我們可以從收益和風險的角度將圖標分為兩類：如果重新設計某個圖標從長遠角度能夠從體驗上帶來明顯收益，我們愿意短期的承擔風險。對于已經足夠成熟的圖標，我們可以聚焦到更為細節的優化或不作出改變。

3. 好的設計也要為開發流程節省成本

從資源輸出角度看，在以往的微云版本中，我們的圖標資源一直是以位圖格式進行輸出的，根據使用場景的不同，每種文件圖標我們需要輸出超過7種尺寸，且每種尺寸還要根據不同的文件格式子集輸出數量龐大的資源。而如果使用矢量格式，這個數量可以減少到3種。

設計執行

針對前期調研發現的問題和優化空間，我們從圖標構成、圖標顏色、圖形符號三個方面對現有的圖標進行了優化。

1. 圖標構成

在上一版圖標中我們為了強化了輪廓識別去掉了圖標的彩色邊框，圖標的識別性雖然有所提高，但是辨識度卻下降了，我們發現部分圖標因為喪失了其表達“文件”的部分，用戶會一時認不出這個文件類型。文件圖標所表達的首先是一個文件，其次才是類型。我們不該省略本身作為文件的部分。因此，在最新一版中我們重新設計了更具有文件感的淺灰背景。

與早期圖標的不同在于，這一次的圖標僅有前景圖形符號和背景紙兩部分組成，根據格式塔組織原則中的圖形與背景關系原則，由于新的設計方案有了較為明顯的前景與背景關系。用戶在觀察圖標整體時，依然會先關注到前景的圖形符號，輪廓識別的特性并沒有因此喪失。

鑒于Office文件在微云中可以在線協同編輯，且存儲數量和操作頻率占比都非常高，我們對其進行了形式上的異化處理，強化了其原有的品牌特征，接近原生圖標的結構讓用戶第一眼就能辨別其文件類型。

2. 色彩體系

作為圖標中最為重要的識別特征，顏色是用戶最容易觀察和產生聯覺的部分。因此，保證圖標顏色與原始應用程序品牌色的關聯是文件圖標色彩選擇的重要原則。在那些擁有強烈色彩認知的圖標中，我們盡可能地在微云的色彩體系下使其貼近原始的色彩感覺。

任何的規范都應該是提升設計效率和可用性的工具，而不是成為設計的限制。鑒于Office系列文件在微云中的重要性，我們讓其突破了微云的色彩規范，單獨選取了3個新的顏色。

文件是用戶上傳和備份到微云中的內容，我們無法控制其類型和數量，想要讓這些內容從色彩比例上貼近我們的規范，看似并不現實。但利用我們調研獲得的數據，我們仍然可以讓其在一定范圍內變得可控。

我們把已經分配顏色的文件類型進行整合，結合其上傳的文件數量，即可得到一個宏觀的色彩比例，再用這個比例和我們的色彩規范進行對照，那些不具備色彩傾向的圖標就可以查缺補漏讓整個色彩比例貼近我們的規范。（微云的文件夾圖標是藍色，且數量眾多并置頂在列表頂部，由于數據沒有統計文件夾的數量，所以從圖表上看起來綠色占比更多）

雖然這個方法并不能保證每個獨立場景下的顏色比例，但用戶長期使用微云的過程中這些場景的疊加可以在用戶印象里形成一定的品牌印記。

3. 圖形符號

在圖形符號方面，我們進一步弱化了圖標的線面性，并通過柵格，讓所有圖標都擁有相近的視覺體量。對于字體類的圖形，我們也參考其原始品牌的字體特點進行了優化。

為保證一致性能滲透到細節，我們對線寬、圓角、角度和層次制定了規則。

最后，我們就得到了一套完整的圖標方案。

組件化與資源輸出

設計師除了要做好設計方案，如何提高后續的工作效率是我們常常忽略的。在日后的界面設計中，一定會用經常到文件圖標。將圖標組件化可以有效提高設計生產效率，我們在Sketch中把最終得到的圖標轉化為Symbol添加到基于Library的微云設計系統中。這樣能夠保證所有界面設計中圖標的一致性，在圖標有所調整時也能夠及時覆蓋到所有的設計稿。

最后我們和開發同學溝通一致后，為其提供1x的矢量設計資源（SVG或PDF）。相比歷史版本大大降低了設計資源輸出的成本和開發適配時間以及微云安裝包的大小。

寫在最后

文件圖標作為微云用戶體驗中重要的一部分，經歷了4個階段的進化后，逐漸找到了設計上的平衡：微云品牌特征和第三方品牌特征之間的平衡、潮流趨勢與易用性之間的平衡。

隨著互聯網的主戰場從2C轉向2B。微云也將覆蓋更多的專業辦公場景， 在最近上線的新版本中，我們也支持了騰訊文檔的創建和編輯能力。新文件類型的加入也為圖標的設計規范帶來了新的挑戰：包容性和獨特性之間的平衡。

Adobe和微軟都對旗下系列產品的圖標進行了升級，這些品牌升級也會影響到微云內對應圖標的設計，但新產品、新設計的普及都有自己的節奏，何時跟進這些改變也是一種平衡，新舊用戶使用習慣之間的平衡。

設計的迭代就是在不斷探索這些平衡找出最符合當下時代的解決方案。微云設計團隊一直致力于為用戶創造更加流暢舒適的使用體驗。前行的路上也感謝所有用戶的批評與包容。因為有你們，微云會越來越好。

作者：進擊的馬里奧，公眾號：騰訊isux（ID：tencent_isux）

來源：https://mp.weixin.qq.com/s/jx8xiHtz6u2BYqRwm5Cc4Q

題圖作者提供