全文4000字，閱讀需要15分鐘。作者將向您展示微云團隊一路走來對文件圖標(biāo)設(shè)計的思考和積累，并重點講述當(dāng)前這套圖標(biāo)的設(shè)計起源。

前言

在過去的一年里，騰訊微云給大家?guī)砹撕芏嘈鹿δ埽热缭诰€創(chuàng)建和編輯文檔、語音速記、文件收藏等。 微云超級會員基礎(chǔ)存儲空間由4TB提升至6TB。 此外，還有很多權(quán)限提升。 就在最近，我們已經(jīng)灰度接入騰訊文檔，以后我們會更加緊密地合作。 除了不斷完善基礎(chǔ)存儲功能外，微云還一直致力于充分滿足用戶各種場景的需求。 就連文件圖標(biāo)的設(shè)計和擴展也不馬虎。 幫助用戶快速識別和定位自己的文件是微云用戶體驗中非常重要的一部分。

文件圖標(biāo)是什么

由特定應(yīng)用程序創(chuàng)建的特定文件，我們稱之為文件類型，例如Word文檔的.doc，.psd。

文件圖標(biāo)根據(jù)這些文件類型的特征提供圖形表達，幫助用戶識別文件。 當(dāng)界面完全由文本組成時，閱讀和識別每個單詞所花費的時間和精力超出了認知超載的程度。 圖標(biāo)提供的這種“視覺速記”形式減少了認知負擔(dān)，并能夠更好地利用熟悉的形狀和隱喻以簡單的圖形形式傳達概念。

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

微云文件圖標(biāo)的四個階段

回顧微云各個版本的文件圖標(biāo)，大致可以分為四個階段：PC主導(dǎo)階段、扁平化趨勢階段、極簡階段、微云6.0推出以來的理性回歸階段。

設(shè)計風(fēng)格受PC操作系統(tǒng)影響

早期，微云的文件圖標(biāo)設(shè)計源于PC客戶端，很大程度上受到桌面操作系統(tǒng)設(shè)計風(fēng)格的影響。 此階段的圖標(biāo)從結(jié)構(gòu)上可以分為三類：

1、常規(guī)結(jié)構(gòu)：由紙張背景、彩條、文件后綴、圖形符號四層組成。 這種結(jié)構(gòu)通常用于具有多個后綴的文件類型或具有明顯顏色屬性的常見文件類型，例如Word文檔、音頻文件、PDF文檔等。

2.功能弱化：只有兩層白底和圖形符號，通常用于只有一個后綴的文件以及不常見或常見的文件，例如iwork系列（當(dāng)時被認為用戶較少）、系統(tǒng)文件、未知文件等

3、背景異化：底層背景根據(jù)屬性進行異化，如壓縮文件、文件夾等。

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

現(xiàn)階段的圖標(biāo)結(jié)構(gòu)相對復(fù)雜，識別特征多且分散，用戶難以集中注意力。 提高了用戶身份識別的門檻。 圖標(biāo)結(jié)構(gòu)的主觀分類降低了對用戶習(xí)慣多樣性的容忍度，并且由于圖標(biāo)包含特定的文件類型后綴，設(shè)計者不得不為每種獨立的文件格式輸出大量的設(shè)計資源。 這無形中增加了設(shè)計者的工作量。 不過，這個階段的圖標(biāo)具有很強的文檔感，設(shè)計也符合當(dāng)時用戶的期望。

iOS7掀起的扁平化風(fēng)潮席卷互聯(lián)網(wǎng)

從微云3.2版本開始，扁平化設(shè)計風(fēng)格席卷了整個互聯(lián)網(wǎng)，細線風(fēng)格的圖標(biāo)非常流行。 微云文件圖標(biāo)也進入了真正的扁平化時期：

1.原有的三個結(jié)構(gòu)分類被削弱，所有圖標(biāo)視覺效果相似，圖標(biāo)分類被扁平化。

2、文件后綴從圖標(biāo)移至文件名末尾，原卡片變成線框sketch軟件圖標(biāo)，填充與圖形符號相同的顏色。 圖形識別和顏色識別相結(jié)合，使識別特征扁平化。

3.每個圖標(biāo)都是單色無紋理，扁平化設(shè)計風(fēng)格。

設(shè)計主張“少即是多”

隨著扁平化趨勢的不斷推進，減法成為所有設(shè)計修改的必經(jīng)過程。 微云5.2版本的文件圖標(biāo)也是史上最簡單的一段：

1、省略了文件圖標(biāo)的線框，增強了圖形符號的輪廓識別度。

2、圖形符號也進行了幾何化和減法，使整體看起來更加簡潔、規(guī)則。

3.由于首次采用全白界面UI，我們還增加了圖標(biāo)上藍色的比例。

然而一味追求減法最終會適得其反。 過于簡單會增加用戶識別的難度。 就像國際主義時期的西格拉姆大廈一樣，過度追求形式上的簡潔而失去了使用的便利性。

反思過去，展望未來

微云6.0發(fā)布時，我們更新了品牌系統(tǒng)，更換了Logo、品牌顏色以及新的界面UI。

文件圖標(biāo)作為視覺系統(tǒng)的重要組成部分，自然需要升級。 接下來我們詳細介紹一下當(dāng)前版本的圖標(biāo)設(shè)計流程。

初步調(diào)查

在改版之前，我們需要梳理一下文件圖標(biāo)在新興階段存在的問題和優(yōu)化空間。

通過數(shù)據(jù)了解用戶的使用習(xí)慣

文件圖標(biāo)是為用戶內(nèi)容提供服務(wù)的圖標(biāo)。 一千個用戶有一千個文件列表。 我們無法控制不同文件圖標(biāo)的出現(xiàn)頻率和數(shù)量，但我們可以利用大數(shù)據(jù)來了解這些文件類型的數(shù)量和分布。

我們從后端系統(tǒng)跑了維云一段時間內(nèi)各種文件類型的數(shù)據(jù)，并按照上傳文件的數(shù)量進行了排序。 （由于圖片和視頻文件的圖標(biāo)會顯示內(nèi)容縮略圖，且其文件圖標(biāo)出現(xiàn)的概率很低，所以我們排除了它們的數(shù)據(jù)。文件夾由于來源多樣，不包括在內(nèi)）我們截取了前24種文件類型的格式，并繪制餅圖：

從結(jié)果可以看出，微云中的文檔文件數(shù)量占比非常高。 新版本中，微云移動端和WEB端均支持系列文件在線編輯功能。 這也造成了部分微云用戶對文檔文件更加重視，也在一定程度上改變了用戶的工作方式。 因此，保證用戶能夠快速識別文檔文件就顯得尤為重要。 之前版本的系列圖標(biāo)僅用彩色字母表示，識別度還有很大的提升空間。

用戶習(xí)慣給設(shè)計修改帶來挑戰(zhàn)

設(shè)計改版意味著用戶體驗的改變，這帶來了一個不可避免的挑戰(zhàn)：用戶已經(jīng)對現(xiàn)有設(shè)計形成了一定的認知模型，設(shè)計改版勢必會在一定程度上破壞這種認知模型。 這就是為什么我們無數(shù)次看到某些產(chǎn)品在推出新設(shè)計時收到很多負面評論。 文件圖標(biāo)作為微云中直接表達用戶內(nèi)容的重要元素，對于修改程度的把握尤為重要。

我們可以從收益和風(fēng)險的角度將圖標(biāo)分為兩類：如果重新設(shè)計一個圖標(biāo)能夠在長期給體驗帶來明顯的好處，那么我們愿意在短期內(nèi)承擔(dān)風(fēng)險。 對于足夠成熟的圖標(biāo)，我們可以專注于更細節(jié)的優(yōu)化或者不做任何改變。

好的設(shè)計還可以節(jié)省開發(fā)過程中的成本

從資源輸出的角度來看，在之前的微云版本中，我們的圖標(biāo)資源一直都是以位圖格式輸出的。 根據(jù)使用場景的不同，我們需要為每個文件圖標(biāo)輸出7種以上的尺寸，并且每個尺寸還根據(jù)不同的文件格式子集輸出海量的資源。 如果使用矢量格式，這個數(shù)字可以減少到 3。

設(shè)計執(zhí)行

針對前期調(diào)研中發(fā)現(xiàn)的問題和優(yōu)化空間，我們從圖標(biāo)構(gòu)成、圖標(biāo)顏色、圖形符號三個方面對現(xiàn)有圖標(biāo)進行了優(yōu)化。

1. 圖標(biāo)構(gòu)成

在之前版本的圖標(biāo)中，我們刪除了圖標(biāo)的彩色邊框，以加強輪廓識別。 雖然圖標(biāo)的識別度有所提高，但識別度卻有所下降。 我們發(fā)現(xiàn)有些圖標(biāo)丟失了表示“文件”的部分。 用戶將暫時無法識別此文件類型。 文件圖標(biāo)首先表示的是文件，其次是類型。 我們不應(yīng)該遺漏那些本身就是文檔的部分。 因此，在最新版本中我們重新設(shè)計了淺灰色背景，使其具有更像文檔的感覺。

與早期圖標(biāo)不同的是，這次的圖標(biāo)僅由兩部分組成：前景圖形符號和背景紙張。 根據(jù)格式塔組織原理中圖形與背景的關(guān)系sketch軟件圖標(biāo)，新設(shè)計中前景與背景的關(guān)系更加明顯。 。 當(dāng)用戶從整體上觀察圖標(biāo)時，仍然會首先關(guān)注前景中的圖形符號，并且不會因此失去輪廓識別的特性。

鑒于文件在微云中可以在線協(xié)同編輯，且存儲量和操作頻率都很高，我們在形式上疏遠了它們，強化了它們原有的品牌特征，貼近原生圖標(biāo)的結(jié)構(gòu)讓用戶能夠您一眼就能識別出其文件類型。

2. 色彩系統(tǒng)

顏色作為圖標(biāo)最重要的識別特征，是用戶最容易觀察并產(chǎn)生聯(lián)覺的部分。 因此，保證圖標(biāo)顏色與原應(yīng)用品牌顏色相關(guān)是文件圖標(biāo)顏色選擇的重要原則。 在那些色彩辨識度較強的圖標(biāo)中，我們盡量讓它們在微云色系下盡可能接近原本的色彩感覺。

任何規(guī)范都應(yīng)該成為提高設(shè)計效率和可用性的工具，而不是成為設(shè)計的限制。 鑒于該系列文件在維云中的重要性，我們讓他們突破了維云的顏色規(guī)范，分別選擇了3種新顏色。

文件是用戶上傳并備份到微云的內(nèi)容。 我們無法控制它們的類型和數(shù)量。 想要這些內(nèi)容在色彩比例上接近我們的規(guī)格似乎不太現(xiàn)實。 但利用我們研究得到的數(shù)據(jù)，我們還是可以讓它在一定范圍內(nèi)可控。

我們整合已分配顏色的文件類型，并將其與上傳文件的數(shù)量相結(jié)合，以獲得宏觀顏色比例。 然后我們使用這個比例將其與我們的顏色規(guī)范進行比較，我們可以檢查沒有顏色傾向的圖標(biāo)。 填充泄漏使整個顏色比例更接近我們的規(guī)格。 （微云的文件夾圖標(biāo)是藍色的，數(shù)字很大，放在列表的頂部，由于數(shù)據(jù)沒有統(tǒng)計文件夾的數(shù)量，所以從圖表上看綠色占比比較多）

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

3、圖形符號

在圖形符號方面，我們進一步弱化了圖標(biāo)的線性，并使用網(wǎng)格來賦予所有圖標(biāo)相似的視覺體積。 對于字體圖形，我們也參考原品牌的字體特點進行了優(yōu)化。

為了確保細節(jié)的一致性，我們對線寬、圓角、角度和水平制定了規(guī)則。

最后，我們就有了一個完整的圖標(biāo)方案。

組件化與資源輸出

設(shè)計師除了做好設(shè)計方案外，也常常忽視如何提高后續(xù)的工作效率。 在未來的界面設(shè)計中，文件圖標(biāo)肯定會被頻繁使用。 圖標(biāo)組件化可以有效提高設(shè)計生產(chǎn)效率。 我們將最終的圖標(biāo)轉(zhuǎn)換為組件，并將其添加到基于微云的設(shè)計系統(tǒng)中。 這樣可以保證所有界面設(shè)計中圖標(biāo)的一致性，并且當(dāng)圖標(biāo)調(diào)整時，可以及時覆蓋所有設(shè)計稿。

最后，在與開發(fā)同學(xué)溝通后，我們?yōu)樗麄兲峁┝?x矢量設(shè)計資源（SVG或PDF）。 與歷史版本相比，設(shè)計資源輸出成本、開發(fā)適配時間、維云安裝包大小均大幅降低。

寫在最后

文件圖標(biāo)作為微云用戶體驗的重要組成部分，經(jīng)過四個階段的演變，逐漸找到了設(shè)計平衡：微云品牌特征與第三方品牌特征的平衡、潮流與易用性的平衡。 之間的平衡。

隨著互聯(lián)網(wǎng)主戰(zhàn)場從2C轉(zhuǎn)向2B。 微云還將覆蓋更多專業(yè)辦公場景。 在最近推出的新版本中，我們還支持了騰訊文檔的創(chuàng)建和編輯功能。 新文件類型的加入也給圖標(biāo)的設(shè)計規(guī)范帶來了新的挑戰(zhàn)：包容性與獨特性之間的平衡。

Adobe和微軟都對各自系列產(chǎn)品的圖標(biāo)進行了升級。 這些品牌升級也會影響微云相應(yīng)圖標(biāo)的設(shè)計。 不過，新產(chǎn)品、新設(shè)計的流行有其自身的節(jié)奏，何時跟進這些變化也是新老用戶使用習(xí)慣之間的一個平衡。

設(shè)計的迭代就是不斷探索這些平衡，找到最適合當(dāng)前時代的解決方案。 微云設(shè)計團隊一直致力于為用戶打造更流暢、更舒適的體驗。 也感謝所有用戶對我前進道路的批評和包容。 因為有你們，薇云才會越來越好。

如有侵權(quán)請聯(lián)系刪除！