本文轉(zhuǎn)載自：http://uxfeng.com/product/27.html?本文作者：牛冰峰
畫圖——這項古老而精細(xì)的做法份殿，是一代代產(chǎn)品狗們得以傳承的立足之本。草圖嗽交、線框圖卿嘲、思維導(dǎo)圖、PPT插圖夫壁、數(shù)據(jù)匯報圖表拾枣、低/高保真原型圖，甚至UI視覺圖……真是一圖未完一圖又起盒让。而工作時間越久梅肤，就越發(fā)現(xiàn)其中的奧妙：好的東西，總是最后幾乎一樣邑茄，那么我又何必每次造車輪子呢凭语？將各種最好用的圖片資源，以及獲取這些圖片資源的方法掌握以后撩扒，我們就可以將精力放在更深一層的設(shè)計上，而不會因為某個返回箭頭巨丑，心里一直堵著搓谆，偏偏想把它改好看的糾結(jié)上了炒辉。
本文將介紹一些產(chǎn)品經(jīng)理快速找到順手圖片資源的小技巧，當(dāng)然泉手，這些技巧也可供UI射雞濕參考黔寇。另外開發(fā)人員如果也搞一搞，下次資源圖還沒出來時你就可以先找很多現(xiàn)成的來代替斩萌，說不定效果很好呢缝裤。
一. 原始：Axure部件庫
這個大概是Axure上手的第1個小時就學(xué)會的東西，不用介紹了颊郎。但我個人永久了表示不推薦的：1. 網(wǎng)上相關(guān)資源良莠不齊憋飞，大部分是用戶自己拼裝后導(dǎo)出的，幾乎很少更新完善姆吭，一年半載后會發(fā)現(xiàn)太丑榛做；2. 用到這些資源的時候，若自己有現(xiàn)成圖片素材内狸，那便捷检眯、美觀和靈活性其實比控件庫方便得多。所以我目前已經(jīng)完全拋棄這些東東了昆淡。
二. 基本：素材站+搜索引擎
無須介紹锰瘸，比如站酷、昵圖昂灵、百度圖片等等避凝，適用于為了找某個特定意義的圖片。因為這些圖一般都比較粗糙倔既，很多時候配合Photoshop修剪一下恕曲。
另外提一下，很多人應(yīng)該遇到過網(wǎng)頁圖片無法右鍵另存為問題吧渤涌。這時隨便用Chromium內(nèi)核瀏覽器右擊網(wǎng)頁審查佩谣，然后切到Resource下，左側(cè)選擇Images实蓬，這里就把當(dāng)前頁面所有的圖片都列出來了茸俭，按鍵盤↑↓鍵快速瀏覽，總有一張適合你安皱。
只要是網(wǎng)頁里能看到的（確定是）圖片调鬓，那就絕對可以找到源文件的
如果有圖片是這種CSS背景圖片定位集成PNG的話，果斷保存吧酌伊！隨便拉哪兒都能用的寶貝啊
三. 進(jìn)階：解壓Android/iOS應(yīng)用獲取海量素材圖
目前Android應(yīng)用.apk源文件腾窝，本質(zhì)上可以理解為一個壓縮包缀踪，主要由編譯過的代碼+資源素材組成，那么網(wǎng)上所有的Android應(yīng)用才是真正的素材庫好嗎虹脯！只要是你認(rèn)為好看的應(yīng)用驴娃，就果斷下載apk文件吧。
然后循集，把后綴.apk改成.rar唇敞，解壓縮（忽略錯誤）——就是這么簡單！
Androidapk包解壓后圖片路徑
資源文件安靜地躺在res文件夾下咒彤，以“drawable-*dpi”命名的就是圖片素材疆柔。其中，ldpi --> mdpi --> hdpi --> xhdpi --> xxhdpi表示適配分辨率依次增大镶柱，目前的應(yīng)用一般在hdpi和最大的一個里圖片最多旷档，可根據(jù)實際需求來選擇自己要的。
成熟的App素材圖片非常豐富奸例，幾乎可以覆蓋產(chǎn)品設(shè)計完整需求了（圖為微博客戶端）
小竅門：白色icon因為深色百搭而很常用彬犯，但如上圖中的框，Windows下預(yù)覽是完全看不到內(nèi)容的查吊。解決很簡單：Ctrl+A全選谐区，一覽無余：
建議直接在Ctrl+A全選模式下瀏覽文件夾
同理，解壓iOS應(yīng)用ipa包素材與上面Android包原理類似逻卖，只是由于蘋果對圖片做了處理宋列，使得步驟比較麻煩些，而且ipa包的下載也沒有Android apk方便评也。完整教程見：提取ipa里面的資源圖片png炼杖，不過剛看到有個很方便的網(wǎng)站做這事，可以試試：在線破解提取素材盗迟。
另外坤邪，來自系統(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年摸爬在食物鏈底層盟劫，畫圖無數(shù)后得到的心得：如果自己畫起來比找現(xiàn)成的素材還便捷好看，那我都是直接通過Axure等工具隨手完成与纽。注意侣签，本文提到素材塘装，所以所有的畫圖都指代至少中度保真的圖了，而不是原始線框圖——線框圖要毛的素材啊~
這里以Axure為工具硝岗，用個小栗子來說明如何使得“畫素材”更加得心應(yīng)手：
首先：Axure中的幾乎一切素材都可源于“矩形”元件的衍生和組合氢哮。矩形通過變形+組合（+旋轉(zhuǎn)+裁剪），可以成為需要的任意元素型檀。
矩形通過變形+組合+裁剪，幾乎可以成為需要的任意元素
如果我設(shè)計某個功能時听盖，已經(jīng)想好了要使用下面的交互形式：
雖然上面是效果圖胀溺，但請只記住“我設(shè)計產(chǎn)品時已經(jīng)想好了這種交互”
而在Axure中，為了快速皆看、細(xì)膩地表達(dá)這種效果仓坞，我就可以按下面的方法順手做出來：
實際操作時并沒有這樣嚴(yán)格分步驟，而是在快速調(diào)整中快速完成
需要注意的是腰吟，理想情況下无埃，這些畫圖細(xì)節(jié)不應(yīng)該占用大量的時間，更不應(yīng)該讓你去費腦細(xì)胞“想想該怎么畫這個形狀”毛雇。產(chǎn)品經(jīng)理的思維要聚焦于關(guān)于產(chǎn)品和服務(wù)本身嫉称，而不是表層的東西。所以畫上面這個圖時灵疮，如果能做到不用深思怎么畫织阅，而本能嫻熟地在1分鐘左右完成的話，那就建議以后多用此法震捣。否則還是直接找素材，或者設(shè)計圖畫簡單些，可千萬別為了所謂“細(xì)節(jié)”浪費寶貴的時間脊框，得了芝麻搔扁，丟了西瓜。
