2022-12-03 分類: 網(wǎng)站建設(shè)
產(chǎn)品開發(fā)的分工是一件挑戰(zhàn)團(tuán)隊(duì)合作技巧的事情,以網(wǎng)頁開發(fā)來說,由于網(wǎng)頁的特性,單純的網(wǎng)頁視覺設(shè)計(jì)師很少能夠直接掌握產(chǎn)品最終的外觀,往往是在繪 圖軟件里面將視覺部分定稿,再由前端工程師根據(jù)設(shè)計(jì)來將產(chǎn)品的視覺部分實(shí)現(xiàn)出來。舉凡圖片的尺寸、位置,組件的效果、色彩的 RGB 值、文字的尺寸等等,都必須清楚的傳達(dá)才能夠完整的重現(xiàn)原本的設(shè)計(jì)。先前我們曾經(jīng)介紹過一些方便網(wǎng)頁制作時(shí)的溝通技巧跟工具,有興趣的讀者可以參考【學(xué)會為設(shè)計(jì)稿做好標(biāo)注(附工具推薦)】。
而在開發(fā) APP 的時(shí)候,這些問題一樣存在。在大部分的時(shí)候,我們都使用像素來做繪制以及開發(fā) App 的單位,這沒什么問題,尤其是 iOS 系統(tǒng)目前的屏幕尺寸還算單純,使用像素作為溝通的單位基本上不會有什么太大的誤會產(chǎn)生。需要的時(shí)候頂多是視覺設(shè)計(jì)師準(zhǔn)備一臺手持裝置,透過 xScope、Screenshots 之類的工具實(shí)時(shí)在手機(jī)上檢視設(shè)計(jì)稿,增加工作的效率。
但是文字的尺寸則會出現(xiàn)問題,實(shí)際上遇到的狀況就是設(shè)計(jì)師提供的字體尺寸不對,開發(fā)人員如果按照設(shè)計(jì)師的數(shù)值,則制作出來的文字會比設(shè)計(jì)稿來得變?。?/p>
有經(jīng)驗(yàn)的開發(fā)人員通常就直接把設(shè)計(jì)師給的數(shù)值直接乘以 2 使用,藉以得到原本設(shè)計(jì)的結(jié)果,但這其中當(dāng)然是有些誤會在其中。在這里我們發(fā)現(xiàn)設(shè)計(jì)師標(biāo)示文字尺寸時(shí)是使用了 pt 這個(gè)單位,很容易讓人把它跟像素搞混在一起,但它們卻是完全不同的東西。
pt 是常見的標(biāo)示文字尺寸的單位,在繪圖以及文書軟件等幾乎都是使用 pt 作為字體尺寸的單位,故一般稱呼「字級」時(shí),通常即是指 pt,許多平面排版設(shè)計(jì)師都喜歡在手邊準(zhǔn)備一張字級對照表,方便與客戶溝通時(shí)使用。
px 與 pt 的區(qū)別
px ( pixel、又稱為像素) 與 pt ( point、有時(shí)被稱為點(diǎn)) 是兩個(gè)看起來很像、卻完全不一樣的單位 (在某些場合他們是1:1的),在很多時(shí)候卻常常被搞混,或是制作過程根本沒有分清楚、導(dǎo)致結(jié)果沒有很精確。在繪圖軟件里面可以看到基本單位設(shè)定里面就有 這兩個(gè)選擇:
px ,即是 pixel、像素 。是屏幕上所顯示的最小單位,當(dāng)制作的版面是供屏幕瀏覽時(shí),使用 px 可以精確的控制畫面上顯示效果。但也因?yàn)槊總€(gè)屏幕分辨率不同,像素的大小也不固定。在分辨率高的屏幕上,一個(gè)像素可能會小到肉眼無法辨識的大小。
pt,即是 point,是一個(gè)標(biāo)準(zhǔn)的長度單位。定義上 1pt=1/72 英吋。因此它跟我們所熟悉的公分、公尺一樣,可以明確的指出1pt 的長度是多少。
也因此,像 word 這種以打印輸出為需求的軟件,字體大小使用 pt 就顯得相當(dāng)方便實(shí)用,只要軟件設(shè)定是對的,使用多少 pt 的字級,透過打印后永遠(yuǎn)都會得到一樣大小的字體。
但是在屏幕顯示的時(shí)候,則需要透過一定的轉(zhuǎn)換公式,但這邊會遇到的另外一個(gè)問題就是各家操作系統(tǒng)的 dpi 并不一致。Windows 系統(tǒng)一般都是設(shè)定 96dpi,Mac 的OSX系統(tǒng)則大多是 72dpi。由于 pt 在定義上是 1/72 英吋的關(guān)系,因此在 72dpi 的系統(tǒng)上時(shí) 1pt= 1px,這沒什么問題,但在 96dpi 時(shí)則明顯不適用,像素密度明顯變細(xì)了,所以需要一個(gè)轉(zhuǎn)換的公式,在這邊,1px = 0.75pt。( 72 / 96 = 0.75 )
也因?yàn)檫@樣,在許多時(shí)候都建議屏幕顯示用的設(shè)計(jì)可以選擇 px 作為字體的單位,例如網(wǎng)頁的css 樣式表單就有 pt、px 以及百分比的 em 等方式來定義字體大小可供設(shè)計(jì)師選擇。
開發(fā) iOS app 的時(shí)候,雖然沒有這么多樣的單位可選,但設(shè)計(jì)師只需要簡單的利用一些小技巧即可讓文字尺寸與最后的結(jié)果相符:由于 Photoshop 使用 1 inch = 72 pt 的標(biāo)準(zhǔn),因此當(dāng)文件檔案的分辨率設(shè)定為 72 的時(shí)候(這是默認(rèn)值),1 pt = 1 px ,而設(shè)定為 144 的時(shí)候 1 pt = 2 px 。
所以,在以 Retina APP 為主流的現(xiàn)在,開新文件時(shí)請記得將檔案的分辨率設(shè)定為 144,如此就能保證你的 pt 數(shù)值是開發(fā)人員需要的數(shù)值了。
pt 與 px 理解起來其實(shí)不難,在應(yīng)用的時(shí)候其實(shí)也相當(dāng)單純,在大部分的情況下適用的一個(gè)理論是:當(dāng)設(shè)計(jì)的目的是用于供屏幕瀏覽, 則趨向于使用 px 以方便掌握細(xì)節(jié);而如果是為了做輸出打印的需求, 使用 pt 則是較好的選擇。
文章名稱:網(wǎng)頁設(shè)計(jì)中“像素”和“點(diǎn)”的區(qū)別
文章分享:http://m.rwnh.cn/news13/218963.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供動態(tài)網(wǎng)站、云服務(wù)器、小程序開發(fā)、ChatGPT、域名注冊、品牌網(wǎng)站設(shè)計(jì)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容