實(shí)用好文，介紹一些產(chǎn)品經(jīng)理快速找到順手圖片資源的小技巧(4)

畫(huà)圖——這項(xiàng)古老而精細(xì)的做法，是一代代產(chǎn)品狗們得以傳承的立足之本。草圖、線(xiàn)框圖、思維導(dǎo)圖、PPT插圖、數(shù)據(jù)匯報(bào)圖表、低/高保真原型圖，甚至UI視覺(jué)圖……真是一圖未完一圖又起。而工作時(shí)間越久，就越發(fā)現(xiàn)其中的奧妙：好的東西，總是最后幾乎一樣，那么我又何必每次造車(chē)輪子呢？將各種最好用的圖片資源，以及獲取這些圖片資源的方法掌握以后，我們就可以將精力放在更深一層的設(shè)計(jì)上，而不會(huì)因?yàn)槟硞�(gè)返回箭頭巨丑，心里一直堵著，偏偏想把它改好看的糾結(jié)上了。

本文將介紹一些產(chǎn)品經(jīng)理快速找到順手圖片資源的小技巧，當(dāng)然，這些技巧也可供UI射雞濕參考。另外開(kāi)發(fā)人員如果也搞一搞，下次資源圖還沒(méi)出來(lái)時(shí)你就可以先找很多現(xiàn)成的來(lái)代替，說(shuō)不定效果很好呢。

這個(gè)大概是Axure上手的第1個(gè)小時(shí)就學(xué)會(huì)的東西，不用介紹了。但我個(gè)人永久表示不推薦的：

網(wǎng)上相關(guān)資源良莠不齊，大部分是用戶(hù)自己拼裝后導(dǎo)出的，幾乎很少更新完善，一年半載后會(huì)發(fā)現(xiàn)太丑；用到這些資源的時(shí)候，若自己有現(xiàn)成圖片素材，那便捷、美觀和靈活性其實(shí)比控件庫(kù)方便得多。

所以我目前已經(jīng)完全拋棄這些東東了。

無(wú)須介紹，比如昵圖、百度圖片等等，適用于為了找某個(gè)特定意義的圖片。因?yàn)檫@些圖一般都比較粗糙，很多時(shí)候配合Photoshop修剪一下。

另外提一下，很多人應(yīng)該遇到過(guò)網(wǎng)頁(yè)圖片無(wú)法右鍵另存為問(wèn)題吧。這時(shí)隨便用Chromium內(nèi)核瀏覽器右擊網(wǎng)頁(yè)審查，然后切到Resource下，左側(cè)選擇Images，這里就把當(dāng)前頁(yè)面所有的圖片都列出來(lái)了，按鍵盤(pán)↑↓鍵快速瀏覽，總有一張適合你。

只要是網(wǎng)頁(yè)里能看到的（確定是）圖片，那就絕對(duì)可以找到源文件的

如果有圖片是這種CSS背景圖片定位集成PNG的話(huà)，果斷保存吧！隨便拉哪兒都能用的寶貝啊。

目前Android應(yīng)用.apk源文件，本質(zhì)上可以理解為一個(gè)壓縮包，主要由編譯過(guò)的代碼+資源素材組成，那么網(wǎng)上所有的Android應(yīng)用才是真正的素材庫(kù)好嗎！只要是你認(rèn)為好看的應(yīng)用，就果斷下載apk文件吧。

然后，把后綴.apk改成.rar，解壓縮（忽略錯(cuò)誤）——就是這么簡(jiǎn)單！

Androidapk包解壓后圖片路徑

資源文件安靜地躺在res文件夾下，以“drawable-*dpi”命名的就是圖片素材。其中，ldpi –> mdpi –> hdpi –> xhdpi –> xxhdpi表示適配分辨率依次增大，目前的應(yīng)用一般在hdpi和最大的一個(gè)里圖片最多，可根據(jù)實(shí)際需求來(lái)選擇自己要的。

成熟的App素材圖片非常豐富，幾乎可以覆蓋產(chǎn)品設(shè)計(jì)完整需求了（圖為微博客戶(hù)端）

小竅門(mén)：白色icon因?yàn)樯钌�百搭而很常用，但如上圖中的框，Windows下預(yù)覽是完全看不到內(nèi)容的。解決很簡(jiǎn)單：Ctrl+A全選，一覽無(wú)余：

建議直接在Ctrl+A全選模式下瀏覽文件夾。

同理，解壓iOS應(yīng)用ipa包素材與上面Android包原理類(lèi)似，只是由于蘋(píng)果對(duì)圖片做了處理，使得步驟比較麻煩些，而且ipa包的下載也沒(méi)有Android apk方便。完整教程見(jiàn)：提取ipa里面的資源圖片png，不過(guò)剛看到有個(gè)很方便的網(wǎng)站做這事，可以試試：在線(xiàn)破解提取素材。

另外，來(lái)自系統(tǒng)層面的素材是值得存檔的，這里主要指Android和iOS所有內(nèi)置圖標(biāo)文件。比如最近Google發(fā)布了全套Material Design，這些東西才是最權(quán)威標(biāo)準(zhǔn)的，而且覆蓋全面，夠吃好一陣子了：https://github.com/google/material-design-icons/releases/tag/1.0.0。

這是我作為一只產(chǎn)品狗，3年摸爬在食物鏈底層，畫(huà)圖無(wú)數(shù)后得到的心得：如果自己畫(huà)起來(lái)比找現(xiàn)成的素材還便捷好看，那我都是直接通過(guò)Axure等工具隨手完成。注意，本文提到素材，所以所有的畫(huà)圖都指代至少中度保真的圖了，而不是原始線(xiàn)框圖——線(xiàn)框圖要毛的素材啊~

這里以Axure為工具，用個(gè)小栗子來(lái)說(shuō)明如何使得“畫(huà)素材”更加得心應(yīng)手：

首先：Axure中的幾乎一切素材都可源于“矩形”元件的衍生和組合。矩形通過(guò)變形+組合（+旋轉(zhuǎn)+裁剪），可以成為需要的任意元素。

矩形通過(guò)變形+組合+裁剪，幾乎可以成為需要的任意元素

如果我設(shè)計(jì)某個(gè)功能時(shí)，已經(jīng)想好了要使用下面的交互形式：

雖然上面是效果圖，但請(qǐng)只記住“我設(shè)計(jì)產(chǎn)品時(shí)已經(jīng)想好了這種交互”

而在Axure中，為了快速、細(xì)膩地表達(dá)這種效果，我就可以按下面的方法順手做出來(lái)：

實(shí)際操作時(shí)并沒(méi)有這樣嚴(yán)格分步驟，而是在快速調(diào)整中快速完成。

需要注意的是，理想情況下，這些畫(huà)圖細(xì)節(jié)不應(yīng)該占用大量的時(shí)間，更不應(yīng)該讓你去費(fèi)腦細(xì)胞“想想該怎么畫(huà)這個(gè)形狀”。產(chǎn)品經(jīng)理的思維要聚焦于關(guān)于產(chǎn)品和服務(wù)本身，而不是表層的東西。所以畫(huà)上面這個(gè)圖時(shí)，如果能做到不用深思怎么畫(huà)，而本能嫻熟地在1分鐘左右完成的話(huà)，那就建議以后多用此法。否則還是直接找素材，或者設(shè)計(jì)圖畫(huà)簡(jiǎn)單些，可千萬(wàn)別為了所謂“細(xì)節(jié)”浪費(fèi)寶貴的時(shí)間，得了芝麻，丟了西瓜。