2015-5-4 用心設(shè)計(jì)
藍(lán)藍(lán)設(shè)計(jì)( tweetduck.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)
來(lái)源：莫貝網(wǎng)
如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中， 請(qǐng)點(diǎn)這里
點(diǎn)九圖，是Android開發(fā)中用到的一種特殊格式的圖片，文件名以”.9.png“結(jié)尾。這種圖片能告訴程序，圖像哪一部分可以被拉升，哪一部分不能被拉升需要保持原有比列。運(yùn)用點(diǎn)九圖可以保證圖片在不模糊變形的前提下做到自適應(yīng)。點(diǎn)九圖常用于對(duì)話框背景圖片中。
這是我截屏自手機(jī)QQ一組聊天對(duì)話框，可以看出，不同兩條消息字?jǐn)?shù)不同，長(zhǎng)度也不同，但它們采用了相同的背景樣式，這個(gè)背景樣式其實(shí)是同一張圖片，用到的就是點(diǎn)九圖的方式。
相較于普通截圖方式，點(diǎn)九圖最為明顯的區(qū)別就是圖片不保留內(nèi)容顯示區(qū)域且自帶一圈不成規(guī)律的黑邊。正是這圈黑邊提供了點(diǎn)九圖的各個(gè)屬性以適應(yīng)各種情況。
簡(jiǎn)單點(diǎn)來(lái)說(shuō)，1、2部分規(guī)定了圖像的可拉伸部分，而3、4部分規(guī)定了圖像的內(nèi)容區(qū)域。當(dāng)實(shí)際程序中設(shè)定了對(duì)話框的寬高時(shí)，1、2部分就會(huì)被拉伸成所需要的高和寬，呈現(xiàn)出于設(shè)計(jì)稿一樣的視覺(jué)效果。
那么內(nèi)容區(qū)域是干嘛的呢？
內(nèi)容區(qū)域規(guī)定了可編輯區(qū)域。例如，對(duì)話框是圓角，文字需要被包裹在其內(nèi)，如果4像3一樣頂?shù)絻杀?，顯示的效果會(huì)是如下圖。
這里文字是垂直居中顯示，水平靠左顯示。為了讓文字被輸入框完整包裹，縮短4的黑線到圓角以內(nèi)，以達(dá)到顯示效果的正常。
首先用PS打開一張切好的普通截圖。用選區(qū)工具選取盡可能多的拉升部分加以刪除（但要注意必須要留出至少1PX拉伸區(qū)域，以便能加以拉伸。）
然后將這些內(nèi)容拼接成一個(gè)完整的整體。
打開 圖像>畫布大小，寬度和高度分別添加2px,定位選定中心定位。
用鉛筆（黑色，1px），在圖像最外邊框描點(diǎn)。
最后保存時(shí)注意”.9.png“
點(diǎn)九圖就是Android上的一種可被拉升的圖片。（IOS不需要）格式以.9.png結(jié)尾。
圖像用邊上純黑色1PX像素（透明底上的純黑，其他都不行。）的邊來(lái)規(guī)定拉伸區(qū)域和內(nèi)容區(qū)域。上邊和左邊為拉升區(qū)域，右邊和下邊為內(nèi)容區(qū)域。(這1PX像素在程序最終輸出的效果中不會(huì)被顯示。)
你也可以用其他一些插件來(lái)實(shí)現(xiàn)點(diǎn)九圖的做法，但原理同我上面的PS做法是一樣的。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com