導航:首頁 > 軟體問題 > 怎麼把app變成矢量圖

怎麼把app變成矢量圖

發布時間:2025-01-06 11:16:07

Ⅰ APP安卓原生 設計該怎麼切圖給開發

1.png的方案

3x規格png實施起來會簡單很多,設計師可以以iPhone6s plus為設計稿,導出稿中相同大小的圖片,以6s為設計稿的話輸出圖片時寬高均乘以1.5。開發拿到切圖後,iOS對應放入3x,Andrpid對應放入xxhdpi,搞定。目前使用率來說3x(即3倍)就足夠了,其他倍數會從3x自動縮小獲得。
2.矢量圖方案
這個方案會復雜些。iOS矢量圖為pdf格式,大小以1x輸出就可以,這樣做可以方便開發人員導入和布局。Android可以用VectorDrawable或者svg轉png插件,需要的是svg格式矢量圖。用VectorDrawable的話,設計師最好用最簡單的方式製作svg,最好只用繪線和填色,蒙版、挖空、區域透明等等就不要用了。用svg轉png插件的話,對製作svg就沒有太多要求,但是這類插件會有一些坑,開發人員要去填坑,比如轉換後清晰度不夠的問題。
我給公司的方案就是設計師輸出一套1x規格pdf矢量圖,iOS可以直接套用,Android採用svg轉png插件,自己寫腳本將pdf批量轉換成svg,再由插件生成3x規格png,是的,Android最終還是用png。因為公司iOS項目先啟動,圖片都做好了,不可能再讓設計師為VectorDrawable一個圖片一個圖片的調整。
3. 解析度和倍數
市面上各個規格的解析度都有,Android的太多先不討論,iPhone 6s+是1080x1920,6s是750x1334,se是640x1136。差異這么大難不成要一一適配?顯然不可能,幸好除了解析度外還有倍數的概念,比如2x(2倍)就是指設備的一個點等於2px,一般來說不同設備的一個點物理距離是接近的。我們來看看解析度除以倍數後的「點」解析度,那麼6s+是414x736,6s是375x667,se是320x480,從這個角度上看,其實幾個機型的「點」寬度變化不大,只是高度有所不同,只要布局得當完全可以做到一套設計稿通用大部分機型。
Android的情況也是類似,只是倍數更多,它用另一個名稱表示:mdpi(1倍)hdpi(1.5倍)xhdpi(2倍)xxhdpi(3倍)。
補充,6s和se是2x,6s+的倍數情況比較復雜,詳細請看:
iPhone 6 Plus的邏輯解析度為什麼是414x736? - IOS app開發 android app開發 為什麼 iPhone 6 Plus 要將 3x 渲染的 2208x1242 解析度縮小到 1080p 屏幕上? - iOS 開發
4. 良好的布局
一般來說,選用一款常用機型的解析度作為設計稿,剩下的便是布局的工作。
布局就像排版一樣,每一塊區域每一個控制項的擺放規則:往一邊靠還是居中,拉伸鋪滿,保持一定比例,還是固定大小。要把設計稿想像得能夠隨時變寬變窄變高變矮,當大小發生變化時,按照預定的布局規則設計稿會變得怎麼樣。布局沒有捷徑,就是多思考多練習。
給個例子,公司的設計稿是以5s為基準,解析度640x1136,倍數2x。
知道以哪個倍數為基準對適配很重要。比如說,有一次設計師不清楚怎麼描述一個九宮格頁面時,我讓他針對6s+、6s、4s再做一次調整,基準倍數是2x,6s+基準到2x的尺寸便是828x1472,方便同一個設計稿復制到不同解析度上,通過不同解析度的調整便能做出滿意的頁面布局。(在這里你需要一套高效的標注工具
* 當倍數不為1x,所有px表示的數值都應該能被倍數整除。以2x為例,輸出圖標大小就不能為45px x 45px,因為當輸出到1x和3x時就會出現小數,小數會被舍棄。正確做法是調整到44px或者46px。
5、為什麼不採用等比例縮放適配
為什麼不採用等比例縮放適配?說到底,更大的屏幕尺寸提供了更多內容展示的空間,等比例縮放沒能把發揮出大屏的優勢,同時也很難保證系統UI的一致性體驗。

閱讀全文

與怎麼把app變成矢量圖相關的資料

熱點內容
商城資料庫 瀏覽:135
extjsgrid為列賦值 瀏覽:863
手拉手被寫入哪些島重要文件 瀏覽:277
app哪些許可權不應該授權 瀏覽:757
iphone相冊 瀏覽:510
一季度有哪些數據 瀏覽:754
已編程的鑰匙是什麼意思 瀏覽:253
rtf格式用什麼文件 瀏覽:281
為菜單和工具提示使用過渡效果 瀏覽:513
fade40秒鈴聲蘋果手機 瀏覽:956
從哪裡查找往年的高考數據 瀏覽:659
qq空間禮物看不到了 瀏覽:590
怎麼用手機把圖片文件格式改小 瀏覽:976
網路輸出異常 瀏覽:312
手機里暴風隱藏文件路徑 瀏覽:49
win10備份系統文件好大 瀏覽:293
js導出html到excel 瀏覽:725
c游戲編程用什麼軟體 瀏覽:645
java依賴倒置 瀏覽:166
華為暢玩5x微信運動 瀏覽:819

友情鏈接