前言
在過去的一年中騰訊微云為大家帶來了很多新特性，比如創建和在線編輯Office文檔、語音速記、文件收集，微云超級會員的基礎存儲空間從4TB提升到了6TB，此外還有多項特權升級。就在最近，我們還在灰度接入騰訊文檔，以后會有更緊密合作。微云除了不斷完善基礎的存儲功能，也一直致力于全方位的滿足用戶各種場景下的需求。即便是文件圖標的設計和擴展，我們也沒有輕視，幫助用戶快速辨識和定位自己的文件，是微云用戶體驗非常重要的環節。
文件圖標是什么
由特定應用程序創建的特定文件，我們稱之為文件類型，例如Word文檔的.doc，Photoshop的.psd。
文件圖標根據這些文件類型的特征提供圖形化的表達，幫助用戶辯識文件。當界面完全由文本構成時，讀取和識別每個文字所花費的時間和精力會超過認知過載點。圖標所提供的這種“ 視覺速記 ” 形式，降低了認知負荷并能夠更好利用熟悉的形狀和隱喻以簡單的圖形形式傳達概念。
微云作為一款云盤產品，支持用戶上傳各種類型的文件，這意味著我們的圖標必須盡可能地覆蓋常見的文件類型。
微云文件圖標的四個階段
回首微云各個版本的文件圖標，大致可以劃分為四個階段：PC主導階段、扁平潮流階段、極簡主義階段以及從微云6.0上線至今的理性回歸階段。
設計風格受到PC操作系統影響
在早期，微云的文件圖標設計源自PC客戶端，很大程度上受到桌面操作系統的設計風格影響。這一階段的圖標從結構上可以分成三類：
1. 常規結構：由紙片背景、彩色橫幅、文件后綴、圖形符號四層組成，這種結構通常用于擁有多種后綴的文件類型或帶有明顯色彩屬性的常見文件類型，如Word文檔、音頻文件、PDF文檔等。
2. 特征弱化：只有白色背景和圖形符號兩層，通常用于只有一種后綴且不常見的文件或通用文件，如iwork系列（當時被認為用戶較少）、系統文件、未知文件等。
3. 背景異化：底層背景根據屬性做了異化，如壓縮包文件和文件夾 。
從視覺焦點可以看出，色彩識別+文字識別被作為最主要的識別特征，淺灰色的圖形符號則被有意的弱化了。
這一階段的圖標結構相對復雜，識別特征較多且分散，用戶視線難以聚焦。提高了用戶辨識的門檻。對圖標結構的主觀分類導致對用戶習慣多樣性的包容降低，并且由于圖標中包含了具體的文件類型后綴，導致設計師要針對每一個獨立的文件格式輸出數量龐大的設計資源。無形中增加了設計師的工作量。但這一階段的圖標文件感很強，設計也符合當時的用戶預期。
iOS7掀起的扁平潮流席卷互聯網
從微云3.2版本開始，設計風格的扁平化已經席卷整個互聯網，細線風格的圖標十分流行。微云文件圖標也進入了真正的扁平時期：
1. 原本的三種結構分類被弱化，所有圖標擁有相似的視覺效果，圖標分類扁平化。
2. 文件后綴名從圖標里移到了文件名的末尾，原本的卡片變成了線框，和圖形符號一起填充了相同的顏色。圖形識別和色彩識別相結合，識別特征扁平化。
3. 每個圖標都是沒有質感的單色，設計風格扁平化。
設計倡導”少即是多”
隨著扁平化的潮流不斷推進，做減法儼然成了所有設計改版的必經流程，微云5.2版本的文件圖標也是歷史上最簡潔的時期：
1. 文件圖標的線框被省去，強化了圖形符號的輪廓識別性。
2. 圖形符號也進行了幾何化和減法，整體看上去更加簡潔規整。
3. 由于第一次采用全白的界面UI，我們在圖標上也增加了藍色的占比。
但是，一味的追求做減法，最終會走向它的反面，過分的簡單反而會增加用戶辨識的難度。就好像國際主義時期的西格萊姆大廈，過分的追求形式上的簡潔，而喪失了易用性。
反思過去，放眼未來
到了微云6.0發布的時候，我們更新了品牌系統，更換了Logo、品牌色以及全新的界面UI。
文件圖標作為視覺體系很重要的一部分，自然也要升級。接下來我們會對當前版本的圖標設計過程進行詳細的闡述。
前期調研
在改版之前，我們需要梳理出現階段文件圖標的問題和優化空間。
通過數據了解用戶的使用習慣
文件圖標是服務于用戶內容的圖標，一千個用戶就有一千種文件列表，不同文件圖標出現的頻率、數量我們無法控制，但是我們可以借助大數據來了解這些文件類型的數量和分布。
我們從后臺系統跑取了一段時間內微云中各種文件類型的數據，并按照上傳的文件數量對它們進行了排序。（由于圖片和視頻文件的圖標會顯示內容縮略圖，其文件圖標出現的概率非常低，我們對其數據進行了排除。文件夾由于來源多樣也未列入其中）我們截取了前24種文件類型格式，并繪制了餅圖：
從結果以看出，微云內的文檔類文件數量占比非常高。在新版本中，微云的移動端和WEB端全部支持了Office系列文件的在線編輯能力。這也使得部分微云用戶對文檔類文件的關注有所提高，一定程度上也改變了用戶的工作方式。因此，保證用戶快速辨識文檔文件變得尤為重要。而上一版的Office系列圖標僅僅是由一個彩色字母表示，在辨識度上有很大的提升空間。
用戶習慣為設計改版帶來挑戰
設計改版意味著用戶體驗的變化，這就帶來一個無法回避的挑戰：用戶對現有設計已經形成一定的認知模型，設計改版勢必會在一定程度上傷害這種認知模型。這也是為什么我們無數次看到某些產品在發布全新設計之初會有大量的負面評價。文件圖標做為微云中直接表達用戶內容的重要元素，掌握好改版的度就顯得尤為重要。
我們可以從收益和風險的角度將圖標分為兩類：如果重新設計某個圖標從長遠角度能夠從體驗上帶來明顯收益，我們愿意短期的承擔風險。對于已經足夠成熟的圖標，我們可以聚焦到更為細節的優化或不作出改變。
好的設計也要為開發流程節省成本
從資源輸出角度看，在以往的微云版本中，我們的圖標資源一直是以位圖格式進行輸出的，根據使用場景的不同，每種文件圖標我們需要輸出超過7種尺寸，且每種尺寸還要根據不同的文件格式子集輸出數量龐大的資源。而如果使用矢量格式，這個數量可以減少到3種。
設計執行
針對前期調研發現的問題和優化空間，我們從圖標構成、圖標顏色、圖形符號三個方面對現有的圖標進行了優化。
1.圖標構成
在上一版圖標中我們為了強化了輪廓識別去掉了圖標的彩色邊框，圖標的識別性雖然有所提高，但是辨識度卻下降了，我們發現部分圖標因為喪失了其表達“文件”的部分，用戶會一時認不出這個文件類型。文件圖標所表達的首先是一個文件，其次才是類型。我們不該省略本身作為文件的部分。因此，在最新一版中我們重新設計了更具有文件感的淺灰背景。
與早期圖標的不同在于，這一次的圖標僅有前景圖形符號和背景紙兩部分組成，根據格式塔組織原則中的圖形與背景關系原則，由于新的設計方案有了較為明顯的前景與背景關系。用戶在觀察圖標整體時，依然會先關注到前景的圖形符號，輪廓識別的特性并沒有因此喪失。
鑒于Office文件在微云中可以在線協同編輯，且存儲數量和操作頻率占比都非常高，我們對其進行了形式上的異化處理，強化了其原有的品牌特征，接近原生圖標的結構讓用戶第一眼就能辨別其文件類型。
2. 色彩體系
作為圖標中最為重要的識別特征，顏色是用戶最容易觀察和產生聯覺的部分。因此，保證圖標顏色與原始應用程序品牌色的關聯是文件圖標色彩選擇的重要原則。在那些擁有強烈色彩認知的圖標中，我們盡可能地在微云的色彩體系下使其貼近原始的色彩感覺。
任何的規范都應該是提升設計效率和可用性的工具，而不是成為設計的限制。鑒于Office系列文件在微云中的重要性，我們讓其突破了微云的色彩規范，單獨選取了3個新的顏色。
文件是用戶上傳和備份到微云中的內容，我們無法控制其類型和數量，想要讓這些內容從色彩比例上貼近我們的規范，看似并不現實。但利用我們調研獲得的數據，我們仍然可以讓其在一定范圍內變得可控。
我們把已經分配顏色的文件類型進行整合，結合其上傳的文件數量，即可得到一個宏觀的色彩比例，再用這個比例和我們的色彩規范進行對照，那些不具備色彩傾向的圖標就可以查缺補漏讓整個色彩比例貼近我們的規范。（微云的文件夾圖標是藍色，且數量眾多并置頂在列表頂部，由于數據沒有統計文件夾的數量，所以從圖表上看起來綠色占比更多）
雖然這個方法并不能保證每個獨立場景下的顏色比例，但用戶長期使用微云的過程中這些場景的疊加可以在用戶印象里形成一定的品牌印記。
3.圖形符號
在圖形符號方面，我們進一步弱化了圖標的線面性，并通過柵格，讓所有圖標都擁有相近的視覺體量。對于字體類的圖形，我們也參考其原始品牌的字體特點進行了優化。
為保證一致性能滲透到細節，我們對線寬、圓角、角度和層次制定了規則。
最后，我們就得到了一套完整的圖標方案。
組件化與資源輸出
設計師除了要做好設計方案，如何提高后續的工作效率是我們常常忽略的。在日后的界面設計中，一定會用經常到文件圖標。將圖標組件化可以有效提高設計生產效率，我們在Sketch中把最終得到的圖標轉化為Symbol添加到基于Library的微云設計系統中。這樣能夠保證所有界面設計中圖標的一致性，在圖標有所調整時也能夠及時覆蓋到所有的設計稿。
最后我們和開發同學溝通一致后，為其提供1x的矢量設計資源（SVG或PDF）。相比歷史版本大大降低了設計資源輸出的成本和開發適配時間以及微云安裝包的大小。
寫在最后
文件圖標作為微云用戶體驗中重要的一部分，經歷了4個階段的進化后，逐漸找到了設計上的平衡：微云品牌特征和第三方品牌特征之間的平衡、潮流趨勢與易用性之間的平衡。
隨著互聯網的主戰場從2C轉向2B。微云也將覆蓋更多的專業辦公場景， 在最近上線的新版本中，我們也支持了騰訊文檔的創建和編輯能力。新文件類型的加入也為圖標的設計規范帶來了新的挑戰：包容性和獨特性之間的平衡。
Adobe和微軟都對旗下系列產品的圖標進行了升級，這些品牌升級也會影響到微云內對應圖標的設計，但新產品、新設計的普及都有自己的節奏，何時跟進這些改變也是一種平衡，新舊用戶使用習慣之間的平衡。
設計的迭代就是在不斷探索這些平衡找出最符合當下時代的解決方案。微云設計團隊一直致力于為用戶創造更加流暢舒適的使用體驗。前行的路上也感謝所有用戶的批評與包容。因為有你們，微云會越來越好。
6氪Fit&Health小組曾經發起過醫學影像產品征集活動，接下來我們會陸續報道相應的團隊。已經報道過的如醫聯、云醫、醫圖，大家可以直接點擊閱讀。
如果將企業服務與醫療結合會得出什么？前方已經有東軟、西門子、GE，以及一大批HIS廠商為“島嶼型創業”探路，后期不僅大體量玩家們開始謀求拓展，從孤島走向互聯，更有像微云影像這樣的高能技術流，實現醫學影像的展示移動化、查閱碎片化和操作高速化。
用通俗的話來講，微云將原來醫院專有系統中的CT、X光等醫學影像內容通過自身技術壓縮并傳輸到云端，滿足醫生查閱、診斷等需求，同時也幫助用戶實現會診、二次診斷和自我病歷管理，且實現秒速查閱與載入。
在展示上，微云使用H5頁面來實現，電腦和手機端都可以查閱，web端主要用作精確診斷，手機端適合做預判。包含功能有：改變序列內圖像布局、調整窗寬窗位、放大縮小、反片、播放等。
影像也會分為有損和無損兩種，相對來說，有損和無損大小上雖有很大差異，但從手機端來看視覺差異不大。
這些功能與操作看上去似乎極其簡單，但事實上醫學影像存儲和應用經歷了較復雜的變革，微云更是從存儲、傳輸到展示三方面做了很大變革。要講清楚這個故事，首先，要從PACS系統開始說起。
根據百度的說法，PACS系統是Picture Archiving and Communication Systems的縮寫，意為影像歸檔和通信系統。它是應用在醫院影像科室的系統，主要的任務就是把日常產生的各種醫學影像（包括核磁，CT，超聲，各種X光機，各種紅外儀、顯微儀等設備產生的圖像）通過各種接口（模擬，DICOM，網絡）以數字化的方式海量保存起來，當需要的時候在一定的授權下能夠很快的調回使用，同時增加一些輔助診斷管理功能。
其中，DICOM是較為普遍的接口方式，自身有著特殊的格式和協議。于是，醫院大多都會花費較大成本來購買、維護自身的PACS系統，甚至有一位專門的“網管”——PACS工程師。
剛開始，這些影像并不具備任何流動性，只通過NAS存儲在醫院內系統里，醫生想要調取的時候，要在特殊網絡內看，圖下載到本地再轉換，甚至需要專業的醫學屏。畢竟，作為輔助診斷的重要素材之一（其他還包括視頻、組織切片等），對精度和質量要求甚高，且病人隱私也非常重要。另外，醫院更不愿意將有價值的影像信息分享給“非親”醫院。
面對這樣的局面，衛生局和其他機構都有牽頭，在市級或區級中心建立區域影像中心，類似于醫療影像的備份中心，里面會有專門醫生來輸出報告。但缺點是，醫生始終不能在除醫療系統外的場景下查看影像。且因為數據量大，比如一組片子兩三百張，大小在500M或以上，對帶寬要求高，傳輸慢，在本地查看時速度也較慢。
當遇到會診復查等需求時，醫院就會將圖通過PACS系統推送到互聯網會診中心，再推送至目標醫院系統里，這些推送多數只發生在大的三甲醫院與小的縣級醫院之間。
不論是以上哪一種，病人都無法將自己的影像數據方便帶出。
幸運的是，很多團隊看到了H5頁面的展示方便性和移動性，并且將PACS顯示成功轉化為H5頁面，而微云在這些團隊的基礎上，又做了一些優化：
從存儲角度來說，微云將傳統NAS存儲改變為云存儲和云計算，提高大數據存儲能力。影像生成后迅速壓縮存儲，再通過網絡看的時候，利用CDN加速，網絡訪問透明，平均loading速度在五秒以內。
到了傳輸階段，壓縮技術也很關鍵，目前無損影像可以做到源文件的二分之一大小，而有損的則為十分之一甚至到三十分之一。團隊還科普了下，做的比較好的壓縮產品，會在有損時將肉眼無法識別的精度高區域省掉，增強效果。
到了展示的階段，現有H5都是基于Canvas繪圖能力來做，基于javascript做計算。但團隊發現，基于瀏覽器本身接口做計算，可以將窗寬窗位調整等操作鎖定在毫秒內，但遇到低版本的IE，以及部分的安卓手機，暫時只能使用兼容模式，iOS沒有問題。
用戶可以管理并且轉出自己的影像資料，支持生成鏈接通過微信、微博等社交平臺分享。
在技術上的探索創新，讓微云成為醫院系統和互聯網醫療團隊之間的強大樞紐，為需要影像診斷的創業團隊提供第三方技術和方案支持。
在團隊看來，潛在合作伙伴有三類：
1.以垂直社交和社區為主的移動醫療產品；
2.有強烈病歷分享、討論和學術研究需求的產品；
3.有會診、復診、隨診等需求的產品。
目前已經合作了一家遠程會診服務提供商。雖說是企業服務，但團隊并不打算初期直接走入醫院系統，相對成本高，需要的資源也多，不過在后期會考慮簽約一些體檢機構和中小醫院。
團隊有5人左右，創始人都曾做過10年以上PACS系統研發工作，正在尋求洽談伙伴和天使輪融資。
再科普下，傳統的PACS廠商有GE、飛利浦、西門子，國內有華海、東軟等，有H5方案的廠商有海納醫信，H5開源DCM4CHE的oviyam，cornerstone等。
【招聘】36氪Fit&Health小組招作者啦~
這里有超越想象到無法想象的健康醫療項目，親民到健身塑形、母嬰呵護、解壓心理，也會前沿到基因解讀、驗血篩查、慢病管理，創業者所做的一些，都是為了讓這個世界長生不老，而我們，正在努力讓這件事變得更快更簡單！
如果你也對此感興趣，想推動著一起改變世界，就來加入我們吧！不要求任何背景，只要學習力和適應性夠強，能聊能寫能思考！
郵箱：leah110[at]36kr.com
影里的醫生總是很有科技感，他們人手一臺 iPad 來打開、讀取、分析病人的影像。那么，現實生活中的醫生是否也可以像這樣呢？答案是肯定的， 微云影像就在幫助醫生實現這件很酷的事情。
為什么很酷？
“以前，我們看視頻是比較麻煩的。但是如優酷這些視頻網站出來以后，我們就可以很容易地通過手機或者網頁快速訪問一些很大的視頻。和這個事情原理相似，我們是讓醫生可以輕松在移動平臺上打開患者影像，并且可以快速來回切換，還可以做相關的圖像處理。”微云影像聯合創始人兼 CTO 彭志勇說。微云影像是一家專注于為互聯?+醫療鏈條上的企業及醫院提供醫學影像處理技術及服務的公司，其核心產品有可以讓醫生快速瀏覽醫學影像的 HTML5 DICOM 瀏覽器。
“2015 年公司成立之初，市場上互聯網醫療中的影像云很火。但我們的團隊是既懂業務又懂技術的，所以考慮從另一個方向嘗試互聯網醫療。結合一些醫療的實際情況，我們決定做醫學影像在互聯網上的應用。”彭志勇介紹，微云影像的團隊成員均有 10 年以上醫療行業產品經驗，曾在 GE 有過豐富的醫療影像方面工作經驗，所以對該領域細小痛點非常了解。
“醫學影像其實就是患者在做完檢查后的上百張或者數百張圖片，其大小起碼也是數百兆，大的文件甚至有 1 個 G 。“彭志勇指出醫學影像單個文件太大，對于醫生來說，想要隨即打開瀏覽非常不方便。“一個資歷比較深的醫生看片子只需要幾分鐘，但是一個影像文件幾百兆，他打開前需要很多時間下載，也許下載圖片的時間比看片子的時間還花費的多，這非常影響醫生的效率。”他說。
為此，微云影像開發了 HTML5 DICOM 瀏覽器，為醫生提供一個 H5 平臺以幫助他們可以在手機等移動終端上快速打開巨大的影像文件。“現在的互聯網醫療都會有 App 端，或者微信公眾號。醫生在這些平臺上想要迅速打開醫療影像只能通過 H5 。“彭志勇透露，微云影像獨家研發了核心技術，可以實現在手機、平板、PC 等各種設備上支持 HTML5 的瀏覽器，同時也支持 QQ 、微信、微博等 App 在線打開醫學影像。傳統醫院的醫生和互聯網醫療平臺上輕問診的醫生都可以很方便的使用該平臺。
此外，醫生在自如地瀏覽影像的過程中，還可以做圖像處理。“醫生可以在瀏覽過程中，對圖片進行調整、旋轉、放大縮小等基本操作。而且，我們的平臺還可以將這些圖片進行三維重建，把各個剖面圖重建成一個立體的圖像，方便醫生從各個角度去觀察它。”彭志勇解釋道，“我們是一個專業的醫學影像技術公司，提供可用的診斷級的產品。微云影像突破了快速在移動端打開影像的難題，這體現了我們技術上的可用性優勢。而可在平臺上進行專業圖像處理，說明了產品符合醫學的專業性。”
目前，尚未融資的微云影像主要通過面向一些第三方的互聯網輕問診平臺或者一些醫療機構等合作伙伴收取服務費實現盈利與發展，并已經和北京安貞醫院放射科、 39 互聯?醫院、大連醫科?學附屬第一醫院、醫界互聯 、四川縱橫醫?集團等建立合作關系。
“只要是在互聯網上使用影像，都是我們關注的重點。”彭志勇說道。對于比較火的人工智能醫療，彭志勇表示會利用微云影像的核心技術與 AI 公司開展廣泛的合作，提供基礎的影像技術和影像平臺，為醫生提供便捷的數據標注工具，幫助 AI 公司管理大量的病例數據模型。另外，他還透露，微云影像也考慮為 AI 公司與醫院搭建一個“媒介”平臺，對接雙方的需求。
圖片來自 123RF
本文 微云影像：它的 H5 平臺讓 1G 的醫療影像“一點即開” | 創業來自動點科技.