畫圖——這項古老而精細的做法,是一代代産品狗們得以傳承的立足之本。草圖、線框圖、思維導圖、PPT插圖、資料彙報圖表、低/高保真原型圖,甚至UI視覺圖……真是一圖未完一圖又起。而工作時間越久,就越發現其中的奧妙:好的東西,總是最後幾乎一樣,那麼我又何必每次造車輪子呢?将各種最好用的圖檔資源,以及擷取這些圖檔資源的方法掌握以後,我們就可以将精力放在更深一層的設計上,而不會因為某個傳回箭頭巨醜,心裡一直堵着,偏偏想把它改好看的糾結上了。
本文将介紹一些産品經理快速找到順手圖檔資源的小技巧,當然,這些技巧也可供UI射雞濕參考。另外開發人員如果也搞一搞,下次資源圖還沒出來時你就可以先找很多現成的來代替,說不定效果很好呢。
一. 原始:Axure部件庫
這個大概是Axure上手的第1個小時就學會的東西,不用介紹了。但我個人永久了表示不推薦的:1. 網上相關資源良莠不齊,大部分是使用者自己拼裝後導出的,幾乎很少更新完善,一年半載後會發現太醜;2. 用到這些資源的時候,若自己有現成圖檔素材,那便捷、美觀和靈活性其實比控件庫友善得多。是以我目前已經完全抛棄這些東東了。
二. 基本:素材站+搜尋引擎
無須介紹,比如站酷、昵圖、百度圖檔等等,适用于為了找某個特定意義的圖檔。因為這些圖一般都比較粗糙,很多時候配合Photoshop修剪一下。
另外提一下,很多人應該遇到過網頁圖檔無法右鍵另存為問題吧。這時随便用Chromium核心浏覽器右擊網頁審查,然後切到Resource下,左側選擇Images,這裡就把目前頁面所有的圖檔都列出來了,按鍵盤↑↓鍵快速浏覽,總有一張适合你。

隻要是網頁裡能看到的(确定是)圖檔,那就絕對可以找到源檔案的
如果有圖檔是這種CSS背景圖檔定位內建PNG的話,果斷儲存吧!随便拉哪兒都能用的寶貝啊
三. 進階:解壓Android/iOS應用擷取海量素材圖
目前Android應用.apk源檔案,本質上可以了解為一個壓縮包,主要由編譯過的代碼+資源素材組成,那麼網上所有的Android應用才是真正的素材庫好嗎!隻要是你認為好看的應用,就果斷下載下傳apk檔案吧。
然後,把字尾.apk改成.rar,解壓縮(忽略錯誤)——就是這麼簡單!
Androidapk包解壓後圖檔路徑
資源檔案安靜地躺在res檔案夾下,以“drawable-*dpi”命名的就是圖檔素材。其中,ldpi --> mdpi --> hdpi --> xhdpi --> xxhdpi表示适配分辨率依次增大,目前的應用一般在hdpi和最大的一個裡圖檔最多,可根據實際需求來選擇自己要的。
成熟的App素材圖檔非常豐富,幾乎可以覆寫産品設計完整需求了(圖為微部落格戶端)
小竅門:白色icon因為深色百搭而很常用,但如上圖中的框,Windows下預覽是完全看不到内容的。解決很簡單:Ctrl+A全選,一覽無餘:
建議直接在Ctrl+A全選模式下浏覽檔案夾
同理,解壓iOS應用ipa包素材與上面Android包原理類似,隻是由于蘋果對圖檔做了處理,使得步驟比較麻煩些,而且ipa包的下載下傳也沒有Android apk友善。完整教程見:提取ipa裡面的資源圖檔png,不過剛看到有個很友善的網站做這事,可以試試:線上破解提取素材。
另外,來自系統層面的素材是值得存檔的,這裡主要指Android和iOS所有内置圖示檔案。比如最近Google釋出了全套Material Design,這些東西才是最權威标準的,而且覆寫全面,夠吃好一陣子了:https://github.com/google/material-design-icons/releases/tag/1.0.0。
四. 骨灰:無圖似有圖,素材自己畫
這是我作為一隻産品狗,3年摸爬在食物鍊底層,畫圖無數後得到的心得:如果自己畫起來比找現成的素材還便捷好看,那我都是直接通過Axure等工具随手完成。注意,本文提到素材,是以所有的畫圖都指代至少中度保真的圖了,而不是原始線框圖——線框圖要毛的素材啊~
這裡以Axure為工具,用個小栗子來說明如何使得“畫素材”更加得心應手:
首先:Axure中的幾乎一切素材都可源于“矩形”元件的衍生群組合。矩形通過變形+組合(+旋轉+裁剪),可以成為需要的任意元素。
矩形通過變形+組合+裁剪,幾乎可以成為需要的任意元素
如果我設計某個功能時,已經想好了要使用下面的互動形式:
雖然上面是效果圖,但請隻記住“我設計産品時已經想好了這種互動”
而在Axure中,為了快速、細膩地表達這種效果,我就可以按下面的方法順手做出來:
實際操作時并沒有這樣嚴格分步驟,而是在快速調整中快速完成
需要注意的是,理想情況下,這些畫圖細節不應該占用大量的時間,更不應該讓你去費腦細胞“想想該怎麼畫這個形狀”。産品經理的思維要聚焦于關于産品和服務本身,而不是表層的東西。是以畫上面這個圖時,如果能做到不用深思怎麼畫,而本能娴熟地在1分鐘左右完成的話,那就建議以後多用此法。否則還是直接找素材,或者設計圖畫簡單些,可千萬别為了所謂“細節”浪費寶貴的時間,得了芝麻,丢了西瓜。
轉自:http://www.woshipm.com/rp/122830.html