千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  應(yīng)聘面試  >  UI面試題  > UI設(shè)計(jì)規(guī)范之常見格式和單位解析

UI設(shè)計(jì)規(guī)范之常見格式和單位解析

來源:千鋒教育
發(fā)布人:syq
時(shí)間: 2022-08-15 09:45:00 1660527900

  SVGA:

  SVGAConverter 可以將 Flash 以及 After Effects 動畫導(dǎo)出成 .SVGA 文件(實(shí)際上是 ZIP 包),供 SVGAPlayer 在各平臺播放,SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平臺、游戲引擎播放。

常見格式和單位

  SVGA 做的事情,實(shí)際上,非常簡單,Converter 會負(fù)責(zé)從 Flash 或 AE 源文件中提取所有動畫元素(位圖、矢量),并將其在時(shí)間軸中的每幀表現(xiàn)(位移、縮放、旋轉(zhuǎn)、透明度)導(dǎo)出。 Player 會負(fù)責(zé)將這些信息還原至畫布上。

  因此,你會發(fā)現(xiàn),SVGA 既有序列幀的特點(diǎn),又有元素動畫的特點(diǎn)。Player 邏輯極度簡單,她只負(fù)責(zé)粗暴地將每一個(gè)元素,絲毫不差地渲染到屏幕上,而無須任何插值計(jì)算。

  SVG:

  SVG是一種圖像文件格式,它的英文全稱為Scalable Vector Graphics,意思為可縮放的矢量圖形。它是基于XML(Extensible Markup Language),由World Wide Web Consortium(W3C)聯(lián)盟進(jìn)行開發(fā)的。嚴(yán)格來說應(yīng)該是一種開放標(biāo)準(zhǔn)的矢量圖形語言,可讓你設(shè)計(jì)激動人心的、高分辨率的Web圖形頁面。用戶可以直接用代碼來描繪圖像,可以用任何文字處理工具打開SVG圖像,通過改變部分代碼來使圖像具有交互功能,并可以隨時(shí)插入到HTML中通過瀏覽器來觀看

  Webp:

  WebP(發(fā)音:weppy)是一種同時(shí)提供了有損壓縮與無損壓縮(可逆壓縮)的圖片文件格式,派生自影像編碼格式VP8,被認(rèn)為是WebM多媒體格式的姊妹項(xiàng)目,是由Google在購買On2 Technologies后發(fā)展出來,以BSD授權(quán)條款發(fā)布。

  WebP最初在2010年發(fā)布,目標(biāo)是減少文件大小,但達(dá)到和JPEG格式相同的圖片質(zhì)量,希望能夠減少圖片檔在網(wǎng)絡(luò)上的發(fā)送時(shí)間。2011年11月8日,Google開始讓W(xué)ebP支持無損壓縮和透明色(alpha通道)的功能,而在2012年8月16日的參考實(shí)做libwebp 0.2.0中正式支持。根據(jù)Google較早的測試,WebP的無損壓縮比網(wǎng)絡(luò)上找到的PNG檔少了45%的文件大小,即使這些PNG檔在使用pngcrush和PNGOUT處理過,WebP還是可以減少28%的文件大小。

  WebP支持的像素最大數(shù)量是16383x16383。有損壓縮的WebP僅支持8-bit的YUV 4:2:0格式。而無損壓縮(可逆壓縮)的WebP支持VP8L編碼與8-bit之ARGB色彩空間。又無論是有損或無損壓縮皆支持Alpha透明通道、ICC色彩配置、XMP詮釋數(shù)據(jù)。

  WebP有靜態(tài)與動態(tài)兩種模式。動態(tài)WebP(Animated WebP)支持有損與無損壓縮、ICC色彩配置、XMP詮釋數(shù)據(jù)、Alpha透明通道。

  點(diǎn)九切圖:

  安卓特有的切圖格式,一般用于經(jīng)常需要拉伸變化的素材中,如:會話氣泡

  在制作點(diǎn)九切圖過程中,需要在素材四周預(yù)留一個(gè)像素空白,畫黑線,左邊和上邊控制拉伸區(qū)域,右邊和下邊控制內(nèi)容顯示區(qū)域,保存時(shí)候命名為***.9.png

  Rpx:

  rpx 是微信小程序解決自適應(yīng)屏幕尺寸的尺寸單位。微信小程序規(guī)定屏幕的寬度為750rpx。

  rem/em:

  em是相對長度單位。相對于當(dāng)前對象內(nèi)文本的字體尺寸。如當(dāng)前對行內(nèi)文本的字體尺寸未被人為設(shè)置,則相對于瀏覽器的默認(rèn)字體尺寸。

  em的特點(diǎn):

  1. em的值并不是固定的;

  2. em會繼承父級元素的字體大小。

  REM

  rem是CSS3新增的一個(gè)相對單位(root em,根em),這個(gè)單位引起了廣泛關(guān)注。這個(gè)單位與em有什么區(qū)別呢?區(qū)別在于使用rem為元素設(shè)定字體大小時(shí),仍然是相對大小,但相對的只是HTML根元素。這個(gè)單位可謂集相對大小和絕對大小的優(yōu)點(diǎn)于一身,通過它既可以做到只修改根元素就成比例地調(diào)整所有字體大小,又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。目前,除了IE8及更早版本外,所有瀏覽器均已支持rem。

  pt/dp/sp:

  dp安卓開發(fā)的長度單位,sp安卓開發(fā)的字體 大小單位。

  pt是iOS開發(fā)使用的開發(fā)單位。

  精靈圖/雪碧圖:

  是一種CSS圖像合并技術(shù),該方法是將小圖標(biāo)和背景圖像合并到一張圖片上,然后利用css的背景定位來顯示需要顯示的圖片部分。

  雪碧圖被運(yùn)用在眾多使用了很多小圖標(biāo)的網(wǎng)站上。相對于把每張小圖標(biāo)以.png格式文件的形式引用到頁面上,使用雪碧圖只需要引用一張圖片,對內(nèi)存和帶寬更好,并且可以減小圖片的總大小。

  更多關(guān)于UI培訓(xùn)的問題,歡迎咨詢千鋒教育在線名師,如果想要了解我們的師資、課程、項(xiàng)目實(shí)操的話可以點(diǎn)擊咨詢課程顧問,獲取試聽資格來試聽我們的課程,在線零距離接觸千鋒教育大咖名師,讓你輕松從入門到精通。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
ui設(shè)計(jì)面試題:個(gè)人學(xué)習(xí)及能力提升考察篇(一)

1、最近有沒有想要提升的能力?解析:企業(yè)想要看求職者是否具有自主學(xué)習(xí)能力,以及欠缺的能力。求職者對自身能力的認(rèn)知是否清晰?;卮鹚悸罚嚎?..詳情>>

2022-08-15 10:11:00
UI設(shè)計(jì)面試題:移動端相關(guān)問題(四)

交互設(shè)計(jì)師,設(shè)計(jì)產(chǎn)品的交互界面結(jié)構(gòu)、布局、操作流程等、跟蹤產(chǎn)品開發(fā)流程、竟品分析、產(chǎn)品數(shù)據(jù)分析持續(xù)優(yōu)化產(chǎn)品可用悵、編寫界面交互設(shè)計(jì)文檔...詳情>>

2022-08-15 10:09:38
UI設(shè)計(jì)面試題:移動端相關(guān)問題(三)

一、針對你的某個(gè)項(xiàng)目,讓你介紹一下?項(xiàng)目大背景(項(xiàng)目來源,甲方,場景,基本的要求,相關(guān)的內(nèi)容)團(tuán)隊(duì)(幾個(gè)人做的,自己的職責(zé))周期(大概多少頁...詳情>>

2022-08-15 10:07:29
10個(gè)UI設(shè)計(jì)師面試常見問題及解析(下)

6、這套APP共幾個(gè)人參與?如何分工?考察點(diǎn):1.你負(fù)責(zé)哪部分2.你的團(tuán)隊(duì)協(xié)作能力,一套產(chǎn)品參與的人一般是7-上百人,一套APP 2-5設(shè)計(jì)師都可以完...詳情>>

2022-08-15 10:01:09
10個(gè)UI設(shè)計(jì)師面試常見問題及解析(上)

1、你客戶的公司叫什么名字?既然是自己公司的客戶,關(guān)于客戶公司的名字、對接人員、他們公司的業(yè)務(wù)、所做項(xiàng)目的現(xiàn)狀...都要有所了解。詳情>>

2022-08-15 09:59:02
快速通道