騰訊ISUX
社交用戶體驗(yàn)設(shè)計(jì)
全文4000字，閱讀需要15分鐘。作者將向你展示微云團(tuán)隊(duì)一路以來對(duì)文件圖標(biāo)設(shè)計(jì)的思考和沉淀，并著重介紹了當(dāng)前這套圖標(biāo)的設(shè)計(jì)由來。
前言
在過去的一年中騰訊微云為大家?guī)砹撕芏嘈绿匦裕热鐒?chuàng)建和在線編輯文檔、語音速記、文件收集，微云超級(jí)會(huì)員的基礎(chǔ)存儲(chǔ)空間從4TB提升到了6TB，此外還有多項(xiàng)特權(quán)升級(jí)。就在最近，我們還在灰度接入騰訊文檔，以后會(huì)有更緊密合作。微云除了不斷完善基礎(chǔ)的存儲(chǔ)功能，也一直致力于全方位的滿足用戶各種場景下的需求。即便是文件圖標(biāo)的設(shè)計(jì)和擴(kuò)展，我們也沒有輕視，幫助用戶快速辨識(shí)和定位自己的文件，是微云用戶體驗(yàn)非常重要的環(huán)節(jié)。
文件圖標(biāo)是什么
由特定應(yīng)用程序創(chuàng)建的特定文件，我們稱之為文件類型，例如Word文檔的.doc，的.psd。
文件圖標(biāo)根據(jù)這些文件類型的特征提供圖形化的表達(dá)，幫助用戶辯識(shí)文件。當(dāng)界面完全由文本構(gòu)成時(shí)，讀取和識(shí)別每個(gè)文字所花費(fèi)的時(shí)間和精力會(huì)超過認(rèn)知過載點(diǎn)。圖標(biāo)所提供的這種“ 視覺速記 ” 形式，降低了認(rèn)知負(fù)荷并能夠更好利用熟悉的形狀和隱喻以簡單的圖形形式傳達(dá)概念。
微云作為一款云盤產(chǎn)品，支持用戶上傳各種類型的文件，這意味著我們的圖標(biāo)必須盡可能地覆蓋常見的文件類型。
微云文件圖標(biāo)的四個(gè)階段
回首微云各個(gè)版本的文件圖標(biāo)，大致可以劃分為四個(gè)階段：PC主導(dǎo)階段、扁平潮流階段、極簡主義階段以及從微云6.0上線至今的理性回歸階段。
設(shè)計(jì)風(fēng)格受到PC操作系統(tǒng)影響
在早期，微云的文件圖標(biāo)設(shè)計(jì)源自PC客戶端，很大程度上受到桌面操作系統(tǒng)的設(shè)計(jì)風(fēng)格影響。這一階段的圖標(biāo)從結(jié)構(gòu)上可以分成三類：
1. 常規(guī)結(jié)構(gòu)：由紙片背景、彩色橫幅、文件后綴、圖形符號(hào)四層組成，這種結(jié)構(gòu)通常用于擁有多種后綴的文件類型或帶有明顯色彩屬性的常見文件類型，如Word文檔、音頻文件、PDF文檔等。
2. 特征弱化：只有白色背景和圖形符號(hào)兩層，通常用于只有一種后綴且不常見的文件或通用文件，如iwork系列（當(dāng)時(shí)被認(rèn)為用戶較少）、系統(tǒng)文件、未知文件等。
3. 背景異化：底層背景根據(jù)屬性做了異化，如壓縮包文件和文件夾 。
從視覺焦點(diǎn)可以看出，色彩識(shí)別+文字識(shí)別被作為最主要的識(shí)別特征，淺灰色的圖形符號(hào)則被有意的弱化了。
這一階段的圖標(biāo)結(jié)構(gòu)相對(duì)復(fù)雜，識(shí)別特征較多且分散，用戶視線難以聚焦。提高了用戶辨識(shí)的門檻。對(duì)圖標(biāo)結(jié)構(gòu)的主觀分類導(dǎo)致對(duì)用戶習(xí)慣多樣性的包容降低，并且由于圖標(biāo)中包含了具體的文件類型后綴，導(dǎo)致設(shè)計(jì)師要針對(duì)每一個(gè)獨(dú)立的文件格式輸出數(shù)量龐大的設(shè)計(jì)資源。無形中增加了設(shè)計(jì)師的工作量。但這一階段的圖標(biāo)文件感很強(qiáng)，設(shè)計(jì)也符合當(dāng)時(shí)的用戶預(yù)期。
iOS7掀起的扁平潮流席卷互聯(lián)網(wǎng)
從微云3.2版本開始，設(shè)計(jì)風(fēng)格的扁平化已經(jīng)席卷整個(gè)互聯(lián)網(wǎng)，細(xì)線風(fēng)格的圖標(biāo)十分流行。微云文件圖標(biāo)也進(jìn)入了真正的扁平時(shí)期：
1. 原本的三種結(jié)構(gòu)分類被弱化，所有圖標(biāo)擁有相似的視覺效果，圖標(biāo)分類扁平化。
2. 文件后綴名從圖標(biāo)里移到了文件名的末尾，原本的卡片變成了線框，和圖形符號(hào)一起填充了相同的顏色。圖形識(shí)別和色彩識(shí)別相結(jié)合，識(shí)別特征扁平化。
3. 每個(gè)圖標(biāo)都是沒有質(zhì)感的單色，設(shè)計(jì)風(fēng)格扁平化。
設(shè)計(jì)倡導(dǎo)"少即是多"
隨著扁平化的潮流不斷推進(jìn)，做減法儼然成了所有設(shè)計(jì)改版的必經(jīng)流程，微云5.2版本的文件圖標(biāo)也是歷史上最簡潔的時(shí)期：
1. 文件圖標(biāo)的線框被省去，強(qiáng)化了圖形符號(hào)的輪廓識(shí)別性。
2. 圖形符號(hào)也進(jìn)行了幾何化和減法，整體看上去更加簡潔規(guī)整。
3. 由于第一次采用全白的界面UI，我們?cè)趫D標(biāo)上也增加了藍(lán)色的占比。
但是，一味的追求做減法，最終會(huì)走向它的反面，過分的簡單反而會(huì)增加用戶辨識(shí)的難度。就好像國際主義時(shí)期的西格萊姆大廈，過分的追求形式上的簡潔，而喪失了易用性。
反思過去，放眼未來
到了微云6.0發(fā)布的時(shí)候，我們更新了品牌系統(tǒng)怎么調(diào)整縮略圖為文件，更換了Logo、品牌色以及全新的界面UI。
文件圖標(biāo)作為視覺體系很重要的一部分，自然也要升級(jí)。接下來我們會(huì)對(duì)當(dāng)前版本的圖標(biāo)設(shè)計(jì)過程進(jìn)行詳細(xì)的闡述。
前期調(diào)研
在改版之前，我們需要梳理出現(xiàn)階段文件圖標(biāo)的問題和優(yōu)化空間。
通過數(shù)據(jù)了解用戶的使用習(xí)慣
文件圖標(biāo)是服務(wù)于用戶內(nèi)容的圖標(biāo)，一千個(gè)用戶就有一千種文件列表，不同文件圖標(biāo)出現(xiàn)的頻率、數(shù)量我們無法控制，但是我們可以借助大數(shù)據(jù)來了解這些文件類型的數(shù)量和分布。
我們從后臺(tái)系統(tǒng)跑取了一段時(shí)間內(nèi)微云中各種文件類型的數(shù)據(jù)，并按照上傳的文件數(shù)量對(duì)它們進(jìn)行了排序。（由于圖片和視頻文件的圖標(biāo)會(huì)顯示內(nèi)容縮略圖，其文件圖標(biāo)出現(xiàn)的概率非常低，我們對(duì)其數(shù)據(jù)進(jìn)行了排除。文件夾由于來源多樣也未列入其中）我們截取了前24種文件類型格式，并繪制了餅圖：
從結(jié)果可以看出，微云內(nèi)的文檔類文件數(shù)量占比非常高。在新版本中，微云的移動(dòng)端和WEB端全部支持了系列文件的在線編輯能力。這也使得部分微云用戶對(duì)文檔類文件的關(guān)注有所提高，一定程度上也改變了用戶的工作方式。因此，保證用戶快速辨識(shí)文檔文件變得尤為重要。而上一版的系列圖標(biāo)僅僅是由一個(gè)彩色字母表示，在辨識(shí)度上有很大的提升空間。
用戶習(xí)慣為設(shè)計(jì)改版帶來挑戰(zhàn)
設(shè)計(jì)改版意味著用戶體驗(yàn)的變化，這就帶來一個(gè)無法回避的挑戰(zhàn)：用戶對(duì)現(xiàn)有設(shè)計(jì)已經(jīng)形成一定的認(rèn)知模型，設(shè)計(jì)改版勢必會(huì)在一定程度上傷害這種認(rèn)知模型。這也是為什么我們無數(shù)次看到某些產(chǎn)品在發(fā)布全新設(shè)計(jì)之初會(huì)有大量的負(fù)面評(píng)價(jià)。文件圖標(biāo)做為微云中直接表達(dá)用戶內(nèi)容的重要元素，掌握好改版的度就顯得尤為重要。
我們可以從收益和風(fēng)險(xiǎn)的角度將圖標(biāo)分為兩類：如果重新設(shè)計(jì)某個(gè)圖標(biāo)從長遠(yuǎn)角度能夠從體驗(yàn)上帶來明顯收益，我們?cè)敢舛唐诘某袚?dān)風(fēng)險(xiǎn)。對(duì)于已經(jīng)足夠成熟的圖標(biāo)，我們可以聚焦到更為細(xì)節(jié)的優(yōu)化或不作出改變。
好的設(shè)計(jì)也要為開發(fā)流程節(jié)省成本
從資源輸出角度看，在以往的微云版本中，我們的圖標(biāo)資源一直是以位圖格式進(jìn)行輸出的，根據(jù)使用場景的不同，每種文件圖標(biāo)我們需要輸出超過7種尺寸，且每種尺寸還要根據(jù)不同的文件格式子集輸出數(shù)量龐大的資源。而如果使用矢量格式，這個(gè)數(shù)量可以減少到3種。
設(shè)計(jì)執(zhí)行
針對(duì)前期調(diào)研發(fā)現(xiàn)的問題和優(yōu)化空間，我們從圖標(biāo)構(gòu)成、圖標(biāo)顏色、圖形符號(hào)三個(gè)方面對(duì)現(xiàn)有的圖標(biāo)進(jìn)行了優(yōu)化。
1.圖標(biāo)構(gòu)成
在上一版圖標(biāo)中我們?yōu)榱藦?qiáng)化了輪廓識(shí)別去掉了圖標(biāo)的彩色邊框，圖標(biāo)的識(shí)別性雖然有所提高，但是辨識(shí)度卻下降了，我們發(fā)現(xiàn)部分圖標(biāo)因?yàn)閱适Я似浔磉_(dá)“文件”的部分，用戶會(huì)一時(shí)認(rèn)不出這個(gè)文件類型。文件圖標(biāo)所表達(dá)的首先是一個(gè)文件，其次才是類型。我們不該省略本身作為文件的部分。因此，在最新一版中我們重新設(shè)計(jì)了更具有文件感的淺灰背景。
與早期圖標(biāo)的不同在于，這一次的圖標(biāo)僅有前景圖形符號(hào)和背景紙兩部分組成，根據(jù)格式塔組織原則中的圖形與背景關(guān)系原則，由于新的設(shè)計(jì)方案有了較為明顯的前景與背景關(guān)系。用戶在觀察圖標(biāo)整體時(shí)，依然會(huì)先關(guān)注到前景的圖形符號(hào)，輪廓識(shí)別的特性并沒有因此喪失。
鑒于文件在微云中可以在線協(xié)同編輯，且存儲(chǔ)數(shù)量和操作頻率占比都非常高，我們對(duì)其進(jìn)行了形式上的異化處理，強(qiáng)化了其原有的品牌特征，接近原生圖標(biāo)的結(jié)構(gòu)讓用戶第一眼就能辨別其文件類型。
2. 色彩體系
作為圖標(biāo)中最為重要的識(shí)別特征，顏色是用戶最容易觀察和產(chǎn)生聯(lián)覺的部分。因此，保證圖標(biāo)顏色與原始應(yīng)用程序品牌色的關(guān)聯(lián)是文件圖標(biāo)色彩選擇的重要原則。在那些擁有強(qiáng)烈色彩認(rèn)知的圖標(biāo)中，我們盡可能地在微云的色彩體系下使其貼近原始的色彩感覺。
任何的規(guī)范都應(yīng)該是提升設(shè)計(jì)效率和可用性的工具，而不是成為設(shè)計(jì)的限制。鑒于系列文件在微云中的重要性，我們讓其突破了微云的色彩規(guī)范，單獨(dú)選取了3個(gè)新的顏色。
文件是用戶上傳和備份到微云中的內(nèi)容，我們無法控制其類型和數(shù)量，想要讓這些內(nèi)容從色彩比例上貼近我們的規(guī)范，看似并不現(xiàn)實(shí)。但利用我們調(diào)研獲得的數(shù)據(jù)，我們?nèi)匀豢梢宰屍湓谝欢ǚ秶鷥?nèi)變得可控。
我們把已經(jīng)分配顏色的文件類型進(jìn)行整合，結(jié)合其上傳的文件數(shù)量，即可得到一個(gè)宏觀的色彩比例，再用這個(gè)比例和我們的色彩規(guī)范進(jìn)行對(duì)照，那些不具備色彩傾向的圖標(biāo)就可以查缺補(bǔ)漏讓整個(gè)色彩比例貼近我們的規(guī)范。（微云的文件夾圖標(biāo)是藍(lán)色，且數(shù)量眾多并置頂在列表頂部怎么調(diào)整縮略圖為文件，由于數(shù)據(jù)沒有統(tǒng)計(jì)文件夾的數(shù)量，所以從圖表上看起來綠色占比更多）
雖然這個(gè)方法并不能保證每個(gè)獨(dú)立場景下的顏色比例，但用戶長期使用微云的過程中這些場景的疊加可以在用戶印象里形成一定的品牌印記。
3.圖形符號(hào)
在圖形符號(hào)方面，我們進(jìn)一步弱化了圖標(biāo)的線面性，并通過柵格，讓所有圖標(biāo)都擁有相近的視覺體量。對(duì)于字體類的圖形，我們也參考其原始品牌的字體特點(diǎn)進(jìn)行了優(yōu)化。
為保證一致性能滲透到細(xì)節(jié)，我們對(duì)線寬、圓角、角度和層次制定了規(guī)則。
最后，我們就得到了一套完整的圖標(biāo)方案。
組件化與資源輸出
設(shè)計(jì)師除了要做好設(shè)計(jì)方案，如何提高后續(xù)的工作效率是我們常常忽略的。在日后的界面設(shè)計(jì)中，一定會(huì)用經(jīng)常到文件圖標(biāo)。將圖標(biāo)組件化可以有效提高設(shè)計(jì)生產(chǎn)效率，我們?cè)谥邪炎罱K得到的圖標(biāo)轉(zhuǎn)化為添加到基于的微云設(shè)計(jì)系統(tǒng)中。這樣能夠保證所有界面設(shè)計(jì)中圖標(biāo)的一致性，在圖標(biāo)有所調(diào)整時(shí)也能夠及時(shí)覆蓋到所有的設(shè)計(jì)稿。
最后我們和開發(fā)同學(xué)溝通一致后，為其提供1x的矢量設(shè)計(jì)資源（SVG或PDF）。相比歷史版本大大降低了設(shè)計(jì)資源輸出的成本和開發(fā)適配時(shí)間以及微云安裝包的大小。
寫在最后
文件圖標(biāo)作為微云用戶體驗(yàn)中重要的一部分，經(jīng)歷了4個(gè)階段的進(jìn)化后，逐漸找到了設(shè)計(jì)上的平衡：微云品牌特征和第三方品牌特征之間的平衡、潮流趨勢與易用性之間的平衡。
隨著互聯(lián)網(wǎng)的主戰(zhàn)場從2C轉(zhuǎn)向2B。微云也將覆蓋更多的專業(yè)辦公場景， 在最近上線的新版本中，我們也支持了騰訊文檔的創(chuàng)建和編輯能力。新文件類型的加入也為圖標(biāo)的設(shè)計(jì)規(guī)范帶來了新的挑戰(zhàn)：包容性和獨(dú)特性之間的平衡。
Adobe和微軟都對(duì)旗下系列產(chǎn)品的圖標(biāo)進(jìn)行了升級(jí)，這些品牌升級(jí)也會(huì)影響到微云內(nèi)對(duì)應(yīng)圖標(biāo)的設(shè)計(jì)，但新產(chǎn)品、新設(shè)計(jì)的普及都有自己的節(jié)奏，何時(shí)跟進(jìn)這些改變也是一種平衡，新舊用戶使用習(xí)慣之間的平衡。
設(shè)計(jì)的迭代就是在不斷探索這些平衡找出最符合當(dāng)下時(shí)代的解決方案。微云設(shè)計(jì)團(tuán)隊(duì)一直致力于為用戶創(chuàng)造更加流暢舒適的使用體驗(yàn)。前行的路上也感謝所有用戶的批評(píng)與包容。因?yàn)橛心銈儯⒃茣?huì)越來越好。
Ps. 下面是微云 APP的二維碼鏈接，歡迎大家下載體驗(yàn)！
以下ISUX文章，你可能也感興趣
▽
