追求卓越一諾千金

藍藍設計-|-陈奎元简介,2011年成立|-至尊争霸有赚到钱的吗,主創清華團隊-韩寒淘宝店,專注軟件和互聯網ui設計開發-_梁伟发简历。擅長企業信息化管理|-14胜负彩奖金、監控___阳泉二中贴吧、大數據軟件UIUE谘詢和設計開發服務||_励志小说排行榜前十名。立足UI|_|众盈彩票怎么样,好好學習||_云顶国际能提现吗,天天進步_|商南眼!


UI 工作流程指南|_云南鼎通贵金属:切圖標注

2019-8-23 泥人張 手機及小程序界麵設計文章及欣賞


當界麵設計定稿之後|-_陈店内衣,設計師需要對圖標進行切片淘宝二手市场,提供給開發工程師__淘宝二手市场。切圖與標注是為了能夠滿足開發人員對於效果圖的高度還原需求__105彩票平台正规吗,直接影響到工程師對設計效果的還原度-_基加美修的召唤石,並且也是設計師重要的輸出物之一_|234彩票安卓100。合適-金饶、精準的切圖可以最大限度地還原設計圖-__台风银河登陆海南,起到事半功倍的效果||邓超暧昧短信。

通常我們隻需要對 icon 與圖片進行切圖即可_-|刺影辅助免费版,文字_裤子尺寸换算、線條和一些標準的幾何形狀是不需要切圖的-|-石狮海博会,例如搜索框隻需要在標注中描述它的尺寸--苏州市消防网、圓角大小_-3号彩票代理、背景色值||中乙联赛球队、不透明度即可-_移动彩票,開發工程師可以用代碼實現這種效果|-_任振鹤。

切圖基本規範

  1. 切圖的尺寸必須為偶數-_丽柜厅直播;
  2. 同一模塊內_爱肺金雪茄,切圖大小應保持一致||-123彩票软件;
  3. 如果有背景-_娱乐彩票网址,盡量用平鋪的背景圖案來設計(減少程序體積)||霞飞路;
  4. 可點擊的部件要把相關狀態都切圖輸出||14场胜负彩app,比如--找一个身份证号码:正常狀態_-长武公众信息网、點擊狀態-_鹤大公路、不可點擊狀態-|永盛彩票注册;
  5. 輸出的切圖應當盡可能的壓縮大小|_阿荣旗贴吧,以降低 APP 的總大小__注册送体验金,提升用戶使用時的加載速度(推薦在線壓縮|-|河北省宁晋县郝庄村:https://tinypng.com)|_太原洗头房;
  6. 所有的變形字體把它當成 icon 來切-_农业银行黄金价格;
  7. 切圖輸出格式|--酒包装设计:png-24|-_狩猎狂狮;
  8. 重複的東西隻切一個-|_运盛娱乐是什么。

切圖輸出類型

1. 圖標切圖輸出

桌麵圖標切圖輸出

App 的桌麵圖標會被運用在很多不同的地方|_许镇耀微博,比如手機桌麵-|_问道维护、APP store|_-淘宝 开店、手機的設置列表__-赢天下免费彩,所以 app 桌麵圖標需要很多個不同尺寸的切圖輸出|-刑天后传全集。兩個平台對應的桌麵圖標設計輸出尺寸也不盡相同|雷波溪洛渡,在輸出的時候要把雙平台的尺寸全部輸出切圖_--020彩票客户端。桌麵圖標切圖隻需要提供直角的圖標切圖即可-|_psp游戏王gx3,手機係統會自動生成圓角效果|-美生美时。

係統圖標切圖輸出

一套圖適配雙平台_3a彩票提现不到账:iOS平台(iPhone 6plus版本除外)和安卓平台公用 44*44px 切圖素材__|造梦西游3极品号源怎么用,即可實現一套切圖適配兩個平台的開發_|_亿客隆pk10。

適配大屏幕|_|德州华翔驾校:為了適配 iPhone 6plus|_-十年寒窗苦读、iPhone 7plus||银彩通,單獨切一套比原有 44*44px 切圖大 1.5 倍的切圖-_qq自由幻想图标点亮,即 66*66px 大小的切圖__u9u8。

APP內功能圖標

圖標是可以有留白區域的|-德雅村租房,建議圖標尺寸盡量不要過多_|家教老师h漫之全彩。

2. 圖片類切圖輸出

圖片類切圖主要是指啟動頁_--重庆公交图吧、新手引導頁-|-陈公博简介、默認提示|_-央企送礼清单、廣告圖等需要完整切圖的圖片|_132彩票安卓版。同一類型的圖片切圖一般要保持同樣的尺寸大小|_亿彩彩票首页,以便於工程師開發使用|泰民我们结婚了停拍。另外一般這些切圖的文件較大__1588彩票推荐人,在切圖過程中需要控製切圖文件的大小_|-闽江学院教务管理系统。

全屏類切圖

局部類切圖

3. 動效元素切圖

動效元素切圖一般是指在 app 中加載動效所需要的切圖元素_-_亿彩彩票怎么提现。

gif 動圖切圖一般分為三種||葫芦岛一高中家长汇:

一是隻需要給到 gif 圖動效的部分即可_-|q币购物券有什么用。

△ 城易logo

二是|_河北省地方税务局网上办税中心,導出序列圖片壓縮打包給開發人員|--苏州地税局网站。

三是導出 json |||重生洪荒之逍遥至尊。

Airbnb 開發了一款動效神器|-盈彩网彩票:Lottie|365彩票靠谱吗,這是一個將 After Effects 動畫提供給任意一個 iOS___360手机开奖结果查询,macOS__-淘宝股票代码,Android 還有 React Native 原生 APP 的文件庫-|alive死囚。這些動畫通過一個叫 Bodymovin 的開源 After Effects 插件--_至诚证券,以 JSON 文件的形式進行輸出|注册送18彩金的时时彩。Lottie 通過 JSON 格式下載動畫數據並實時提供給開發者-爱祖国爱家乡的画。

相關鏈接

如何導出json動畫文件

打開 AE___106极速分分计划,首選項 – 常規___拳王97电影,將允許腳本寫入文件和訪問網絡選項勾選上-阿里旺旺2012买家版。

窗口 – 擴展 – Bodymovin|_11选5任7万能34组,選擇好合成和保存路徑後-_永盛彩票网怎么注册,點擊 Render 導出 data.jason 文件_--优衣库事件视频,再把該文件交給 iOS 開發 (其他同理)|三百年女尸复活,具體如下圖|昆明三对夫妻:

這裏設置選擇 Demo _--i7电脑配置清单,可以導出 html 文件_||闪食网,在瀏覽器查看動畫效果|调料蛋。選擇 Glyphs 將字體轉換成圖形形狀__功夫国语高清。

導出文件|_destinywarfare:

在線測試結果--静安区火灾:可以直接上傳 json 文件--苏明星,可以提前知道動畫是否有問題_||掌上彩票手机版,然後再交付給開發|-|中国国家主席是谁。

網址|038彩票首页:https://nicolasjengler.github.io/bodymovins-json-tester/dist/

切圖命名規範

1. 通用切圖命名_|_星岛田阳子:組件_類別_功能_狀態@2x.png

舉例||_野兽与乡巴佬:tabbar_icon_home_default@2x.png(對應中文-_-公羊羽:標簽欄_圖標_主頁_默認@2x.png)

2. 模塊特有切圖命名|-劳动最光荣是谁说的:模塊_類別_功能_狀態@2x.png

舉例__-金陀:bill_icon_search_pressed@2x.png(對應的中文為-__九纵新一团:賬單_圖標_搜索_ 默認@2x.png)

3. 常用英文單詞表

標注軟件

現如今市場已有很多設計交互的平台__|纽维t200,如---太原洗头房:國內的墨刀_|金銮殿的意思、藍湖|_132彩票手机版、摹客等|||野火烧不尽打一字,國外的 Figma___阿列克莎、invision 等|__手机qq2011官方下载,各自都有優秀的特點234彩票安卓,既滿足交互需求|__法网决赛时间,又能有標注切圖功能__16楼网,選擇適合自己團隊的工具與開發一起協作即可__oppo智能手机803。

1. Figma

支持 sketch 導入--船讯网首页,Figma 也像 Zeplin 一樣---1234成人,標注頁麵間距與尺寸__单单堂,並且支持各種圖片格式||_魔法龙虾盒、尺寸--_极品公子混在校园、形態輸出|开通电话银行要钱吗,開發人員也有相應的代碼可用參考-_众发会员登录下载安装,分享鏈接即可|||周村二手房。

2. 墨刀

支持 sketch 上傳頁麵至客戶端-288彩票平台,分享鏈接即可_|苗知喻。支持多種切圖格式下載-|-长春速腾车友会,開發人員也有相應的代碼可用參考|-|向怀恩,操作簡單清晰__爱尚满屋网。

3. 藍湖

支持軟件 PS_150期马会资料、sketch 上傳在線標注|-|xong出没熊出没之年货,在設計源文件上切好圖片||_汕尾台风网,開發人員可在線上下載|-湖南卫视直播在线观看古剑奇谭,且有相應的代碼可用參考---山阳县地图,分享鏈接即可___锈水财阀战袍。

文章來源_|-易赢在线官网:優設

標簽: 切圖標注 « JavaScript雜記(雜而又雜) | 調整瀏覽器分辨率的插件下載方法»


訂閱Rss