淘寶、微博、微信的 Android 圖片放置策略

天之界線2010發表於2016-12-14

本文會分析三個廠家的圖片放置策略,希望可以給大家一些參考。

1. 淘寶

mdpi:

淘寶、微博、微信的 Android 圖片放置策略

mdpi中存留了一些android原始的icon,這個從命名和字首就能看出來。通過圖片大小分析,這個目錄下面都是一些很小的icon,還有一些沒有用到的icon。(這個launcher圖片也很好的說明了淘寶的歷史)

hdp:

淘寶、微博、微信的 Android 圖片放置策略

hdp中分為兩部分:表情和其他圖片。f+數字的圖片都是表情圖片,淘寶僅僅有一套表情圖片,並且都放在這個目錄下。除了少量的圖片和mdip的圖片一致(比如使用者頭像的place_holder)外,其餘的圖片和mdpi的圖片完全不同。順便說一下,此目錄下除了表情之外,其餘的都是一些小icon,絕對屬於尺寸很小的那類。

xhdpi:

淘寶、微博、微信的 Android 圖片放置策略

xhdpi又和hdpi不同了,它裡面有大量的國家icon。除此之外就是一些對清晰度要求較高的icon。

xxhdpi:

淘寶、微博、微信的 Android 圖片放置策略

xxhdpi就沒什麼東西了,幾張圖而已。

其他:

淘寶、微博、微信的 Android 圖片放置策略

有字尾的資料夾中除了5張左右的淘寶自己的icon外,其餘都是系統的圖片,均以abc開頭。我不清楚淘寶到底有沒有使用到這些圖片,但我可以肯定地說其中有著冗餘圖片,或許有著進一步優化的方案。

總結:
淘寶的放置圖片策略是大量的圖片在hdpi,xhdpi中,比如表情圖在hdpi中,國家圖在xhdpi中,大多數圖片都僅有一套,少數全域性的icon是會有多張的情況(極少,估計只有十幾張)。xxhdpi和mhdpi僅僅作為補充,沒有太大的作用。

淘寶最令人好奇的點在於它的資原始檔很小,但是so檔案相當大:

淘寶、微博、微信的 Android 圖片放置策略

2. 微博

微博是一個典型的android風格的app,它的drawable全都是有字尾的,完全符合安卓標準的預設打包策略,它還有根據畫素密度的圖片,甚至有ldpi的目錄。

淘寶、微博、微信的 Android 圖片放置策略

mdpi-v4

淘寶、微博、微信的 Android 圖片放置策略

mdpi中有大量的小icon,裡面有個叫做share_wx的,從名字一下子就知道是微信分享的icon,但實際是微博的logo,比較有趣。其餘的都是一些邊邊角角的圖示,量不大,所以主力圖肯定不在這裡。

hdpi-v4

淘寶、微博、微信的 Android 圖片放置策略

這是微博圖片存放的主要目錄,有很多大背景和表情,微博的表情圖片和淘寶一樣都是在hdpi中的,它以lxh,emoji等字首開頭,用來區分不同風格的表情。

xhdpi-v4和xxhdpi-v4*

淘寶、微博、微信的 Android 圖片放置策略

這裡放了一些背景大圖,我也發現了大量和hdpi中一樣的圖片,所以可以大膽的假設微博是做了不同畫素的圖片的。這也證實了我的想法——微博是很標準的android應用。

ldpi-v4

淘寶、微博、微信的 Android 圖片放置策略

這個目錄的確沒什麼用,微博自身也不會維護這個目錄,這全都是第三方庫和應用商店給的圖片,微博開發者只需要放進來就好。

sw400dp和sw32dp-400dp

淘寶、微博、微信的 Android 圖片放置策略

這些目錄放了一些為不同解析度準備的長得相同的icon,當然還有微博自己的logo。

3. 微信

通過上面的分析,我們是不是可以得出一些經驗了呢?

  • 大量的圖片都在hdpi和xdpi中
  • 表情圖片在hdpi中
  • anim目錄中都是xml檔案
  • drawable目錄中有大量的xml和少量的png和.9圖
  • layout檔案中是全部的xml
  • raw中放置音訊
  • svg圖片在raw、drawable或assets中
  • 最大的資料夾是圖片檔案
  • layout檔案較小
  • 相同的圖片,高分屏的肯定比低分屏的大

ok,現在我們們就可以來看微信的資源了,混淆怕啥,友盟混淆的abcd程式碼都能看懂,微信的adcd資源也應該不難。

raw(a9)

淘寶、微博、微信的 Android 圖片放置策略

這個目錄中放置了大量的svg圖片和mp3檔案,從專業的角度來想,drawable目錄下肯定不會放mp3,所以這個肯定是raw檔案了。這個目錄下有大量的svg,所以可以看出微信已經實現了全svg化,並且已經線上上穩定執行了。這點在微信早期的公眾號上也可以得到佐證,詳細請看Android微信上的SVG

文中提到了:

第一步,拿到.svg字尾的資原始檔(UI很容匯出這種圖片),放在raw目錄下而不是drawable目錄。
第二步,把 R.drawable.xxx 換成 R.raw.xxx;把 @drawable/xxx 換成 @raw/xxx。

layout(f)

淘寶、微博、微信的 Android 圖片放置策略

現在有了兩個線索,那麼初步估計上面的三個目錄肯定是我們常見的目錄,否則不會那麼大。

淘寶、微博、微信的 Android 圖片放置策略

開啟f後發現這個就是layout檔案,所以其餘的肯定就是圖片檔案了。

hdpi(y)

淘寶、微博、微信的 Android 圖片放置策略

y是2.9m,裡面有大量的表情,所以我判斷它是hdpi,為了更加證實這個猜測,我找到了兩張相同的圖片。

a2中:

淘寶、微博、微信的 Android 圖片放置策略

y中:

淘寶、微博、微信的 Android 圖片放置策略

y中圖片是11kb,a2中圖片是76kb,這明顯說明y是hdpi,a2是xhdpi。

xhdpi(a2):

淘寶、微博、微信的 Android 圖片放置策略

xhdpi中的圖片和hdpi中的圖片相同的不多,微信在這裡放的是一些大圖。

drawable(k)

淘寶、微博、微信的 Android 圖片放置策略

drawable本身沒啥可以說的,但是微信的drawable中.9圖份額很少,所以我在想是否svg可以在一定的程度上完成一些.9的工作呢?

總結:

  1. 微信的表情都在hdpi中,僅有一套圖片,這點幾乎已經成為了標準
  2. 微信已經實現了svg化,svg圖片在raw中
  3. 微信傾向於把較大的圖片放在xhdpi中,僅出一套圖
  4. 微信和淘寶一樣都是儘量選擇一套圖來完成需求

相關文章