全栈工程师?
嗯.....目前并不是!

案例分析 | 騰訊微雲文件圖標的設計探索

作者將向你展示微雲團隊一路以來對文件圖標設計的思考和沉澱,並着重介紹了當前這套圖標的設計由來。

在過去的一年中騰訊微云為大家帶來了很多新特性,比如創建和在線編輯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

題圖作者提供

版权声明:本文采用知识共享 署名4.0国际许可协议 [BY-NC-SA] 进行授权
文章名称:《案例分析 | 騰訊微雲文件圖標的設計探索》
文章链接:https://www.pmbear.com/%e6%a1%88%e4%be%8b%e5%88%86%e6%9e%90-%e9%a8%b0%e8%a8%8a%e5%be%ae%e9%9b%b2%e6%96%87%e4%bb%b6%e5%9c%96%e6%a8%99%e7%9a%84%e8%a8%ad%e8%a8%88%e6%8e%a2%e7%b4%a2/
本站资源仅供个人学习交流,请于下载后24小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

大前端WP主题 更专业 更方便

联系我们联系我们