PM小技術(shù):圖片隨手找,原型快又好

4 評(píng)論 23142 瀏覽 118 收藏 9 分鐘

增哥導(dǎo)讀:畫(huà)圖——這項(xiàng)古老而精細(xì)的做法,是一代代產(chǎ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ō)不定效果很好呢。

一. 原始:Axure部件庫(kù)

這個(gè)大概是Axure上手的第1個(gè)小時(shí)就學(xué)會(huì)的東西,不用介紹了。但我個(gè)人永久了表示不推薦的:1.?網(wǎng)上相關(guān)資源良莠不齊,大部分是用戶(hù)自己拼裝后導(dǎo)出的,幾乎很少更新完善,一年半載后會(huì)發(fā)現(xiàn)太丑;2.?用到這些資源的時(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)↑↓鍵快速瀏覽,總有一張適合你。

109094-b1fc84675fa1f047

 

(單擊圖片看大圖)

如果有圖片是這種CSS背景圖片定位集成PNG的話,果斷保存吧!隨便拉哪兒都能用的寶貝啊

三. 進(jìn)階:解壓Android/iOS應(yīng)用獲取海量素材圖

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

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

109094-455de83fcd7915df

(單擊圖片看大圖)

Androidapk包解壓后圖片路徑

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

109094-758a46c74019dd79

(單擊圖片看大圖)

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

小竅門(mén):白色icon因?yàn)樯钌俅疃艹S?,但如上圖中的框,Windows下預(yù)覽是完全看不到內(nèi)容的。解決很簡(jiǎn)單:Ctrl+A全選,一覽無(wú)余:

109094-e751652fcccaa934

?(單擊圖片看大圖)

建議直接在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)站做這事,可以試試:在線破解提取素材。

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

四. 骨灰:無(wú)圖似有圖,素材自己畫(huà)

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

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

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

109094-f7df97a69c056352

 

(單擊圖片看大圖)

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

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

109094-fa8385f06a3204bc

 

(單擊圖片看大圖)

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

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

109094-fa0263d773676b48

 

(單擊圖片看大圖)

實(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分鐘左右完成的話,那就建議以后多用此法。否則還是直接找素材,或者設(shè)計(jì)圖畫(huà)簡(jiǎn)單些,可千萬(wàn)別為了所謂“細(xì)節(jié)”浪費(fèi)寶貴的時(shí)間,得了芝麻,丟了西瓜。

原文作者:牛冰峰;轉(zhuǎn)載自:簡(jiǎn)書(shū)

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 平時(shí)多手機(jī)一些網(wǎng)上開(kāi)源的UI庫(kù)。用PS自己摳出來(lái)用即可。。我有20多G的UI素材。。

    來(lái)自浙江 回復(fù)