公司網站建設方案歡迎光臨易企網站建設公司

在談IOS、安卓、網頁設計的UI尺寸題目

發布時間:2019年07月07日 文章標簽:網頁,設計,尺寸,題目 瀏覽5022

各種屏幕的分別

在我們開始詮釋細節前,我們必須先定義討論的范疇。

本篇文章重要專注在探究 UI 設計師如何處理各式各樣的屏幕種類;屏幕的大小多變,就算大小一樣,其過細度也有差,有的屏幕顆粒很粗,有的則細到眼睛看不到個別像素點,專業的設計師如何讓本身的設計在各種屏幕上達到近似的體驗呢?我們要先從「分辨率」看起。

分辨率、像素密度

分辨率一詞在各種領域的定義有渺小的差別,在 UI 設計中,我們可以理解成「表現器呈現影像細節的能力」。也就是說,成像單位越微小、越密集的屏幕,分辨率就越高。

而大多數屏幕的成像單位是像素(Pixel),因此描述密度/分辨率的方法就是抓一段固定長度(通常是英吋),看看里面塞進了幾顆像素點,固定長度能塞越多顆,就代表這個屏幕的點越細。

這就像我們計算人口密度時,會抓出一平方公里的地區,然后看看里面塞了多少人,就能描述人口密度了。

舉個例子,如今蘋果發表了一支很奇葩的方形手機,屏幕長寬都只有一英吋,畫面大小是 10×10 pixel,名稱叫做「iPhone Inch」:

庫克:「為了進一步與任天國加深合作關系,蘋果再一次重新發明了手機。」

「豪口愛喲~嗚~~~!」全場起立鼓掌。

好的,這支手機的屏幕長寬都是 1 英吋、長寬各排列了 10 顆像素,顯然我們假如想描述屏幕有多過細的話,可以說:「屏幕的像素密度是每英吋 10 pixel」,或者換句話說,「iPhone Inch 的分辨率是 10 ppi」。
等一下,ppi 這單位是什么?意思就是「Pixels Per Inch,每英吋塞進了幾顆像素點(像素密度)」。

因為市場反應優秀,反正蘋果做什么大家買就對了;來年蘋果老調重彈手機應用,又推出了 s 升級版—— iPhone Inch s:

「這是我們有史以來最好的手機,Amazing~」庫克語畢,全場歡呼賡續。

接著播放產品介紹影片。

在上一輪斗爭失勢遭到明升暗貶,淪為影片配音員的 CDO Jony Ive 操著一口迷人的英國腔開始介紹產品:「??我們經過了徹底地重新設計,如今有金色版,讓每小我的個性能充分表達??」

看來錢寧兄「re-design」的定義可能和大多數人不太一樣。

接著庫克把保險營業 Phil 叫上臺,詮釋硬件配置。

「這是我們史上最好的屏幕,像素點的密度提拔到先前的兩倍,只要你目洨,它就是視網膜屏幕,讓你分辨不出像素點,售價只要 $9999。」

好,既然長寬的像素點都提拔為兩倍來到了 20×20 pixel,那我們依照前面的說法,這塊屏幕分辨率就是 20 ppi。

OK,如今我們都會作運算了,讓我們臨時擱下上面的方塊手機,回到往日榮光 iPhone 7,拿尺來測量看看:

這支 iPhone 7 的屏幕寬度是 2.3 吋,橫向統共排列了 750 顆 pixel,也就是說,每英吋塞進了 750/2.3 ≈ 326顆 pixel,所以我們會說「iPhone 7 的分辨率是 326 ppi」。

關系式如下:

△ 分辨率關系式

清楚了解何謂分辨率以后,如今來看看繪圖時的狀態吧。

iOS 的 pt 單位

讓我們繼承稍早的故事,因為蘋果又再一次重新發明手機,公司里的設計師和工程師可苦了,又要做新的 App來上架,PM 馬上預備好了兩代機種給工程師測試:

「好,美工網站排名優化,你要在畫面上放什么東西?」工程師一臉不耐煩地說。
「那個??我不是美??」設計師還沒說完,就被大吼一聲:
「啊?你連分辨率都要人教,還說本身是設計師!」

呵呵,這工程師肯定南部來的。

「好啦??我要在畫面上放一條分隔線,灰色的。」
「粗細呢?」
「1 px。」
「呵呵!就說你是美工,說要 1px?來,你本身看看這是什么」

怎么會兩臺手機的畫面不一樣呢?

原來是由于候車亭制作廠家,當一個屏幕分辨率(像素密度)越高的時候,像素點就會越密集、越小顆,因此我們使用 px 當單位來做 UI 的話,就會發生不同分辨率的屏幕呈現不同的狀態,那這要怎么解決呢?我們繼承看下去。

工程師:「來,美工,我跟你說,我如今跟你講好一件事,你看一下這兩支手機的畫面。」

 

「看到左邊銀色機子的小紅點沒?」
「有喔~」
「如今開始,以銀色機子的『1 顆 px』為基準,這顆紅點的大小,就當成新的標準尺寸單位,你就叫它『1 pt (point, 點)』,這個點點不管搬到哪里就是那么大,我如今把它搬到金色的機子上??」
「你看,在金色機子上,紅點為了維持一樣的大小,他的長/寬就會各涵蓋到 2 顆 px,所以本來銀色機子上『1 pt』等于『1 px』,但到了屏幕密度兩倍的地方,『1 pt』的大小就會代表『2 px』,我們從今以后就不要用px 當單位了,如許好不好?」
「好喔~但是我弄懂以后你不能再叫我美工了!」
「好啦!那剛剛的分隔線可以幫我弄粗一點嗎?」
「你要多粗?」
「就粗『一點』啊!」
「??」

所以啊,一個新單位:pt (point)的誕生,就是為了解決不同的屏幕上,px 大小會變來變去的題目,如今先讓工程師和設計師領個便當歇息一下,我們來看看應用題:

由左至右,分別為 iPhone 第一代、iPhone 4,與 iPhone 6 Plus

蘋果推出第一代 iPhone 一向到如今的 iPhone 7,屏幕的「像素密度」有兩次大轉變(細致是密度轉變喔!我們在這里不管屏幕的大小),第一次是在 iPhone 4 的時候,屏幕尺寸不變,但像素密度變成兩倍,來到了 326 ppi,賈伯斯稱呼其為「視網膜屏幕(Retina Display)」。

而第二次是 iPhone 6 推出時,也一并出現了大尺寸的iPhone 6 Plus,Plus 不只是大,而且像素密度還變成了三倍,目前蘋果所有的產品里,只有 iPhone 6/7 Plus 擁有三倍密度的屏幕。

仔細的你可能發現 Plus 401 ppi 明明就不是初代iPhone 163 ppi 的三倍,那怎么會說是三倍密呢?這個為了避免你吸取來不及,先保留待下次詮釋,總之你先記住,iPhone 6/7 Plus 是目前擁有三倍密度屏幕的機種。

好,我們回憶一下剛剛的小劇場:

工程師在第一個屏幕上放了一顆 1 px 的小紅點,說那個大小叫做「1 pt」,這個點拿到右邊的新機上,「大小不變」,但長寬變成了 2px,所以假如以后用「pt」來當大小單位的話,就不用再管那個變來變去的 px 了。

在 iOS 的世界也是這么運作的,我們在初代 iPhone 上標出一顆紅色的 pixel,然后說它的長度(或寬度)叫做「1 pt」,這顆紅色的點拿到有視網膜屏幕、密度兩倍的 iPhone 4 上,它的長度就會涵蓋了視網膜屏幕上的 2px;若拿到三倍密度的 Plus 上面,猜猜這個小紅點的長度會涵蓋幾 px?

假如你知道為什么會是 3px,那恭喜你真的完全弄懂了背后的機制,就是如許子而已,如今我們來看看 Android。

Android 的 dp 單位

在 Android 的世界里,手機廠牌型號好多好多,屏幕大小和密度也是一團亂;Google 身為教主,當然要制定一套規則來金甌無缺,方法呢,就是制訂好幾個「密度等級」:

假如你的屏幕分辨率落在 160 ppi 左右的話(注),我們就稱之為「MDPI (中等分辨率)」;那假如你的屏幕分辨率落在 320 ppi 左右呢,就叫做「XHDPI,Extra-High (超高分辨率)」??其余按圖類推。

注:Android 用的單位叫 dpi,但為了溝通方便,我們都照舊用 ppi

接著就跟蘋果一樣。學人精 Google 說,我們把 MDPI 的屏幕定為基準點,它是一倍像素密度(上頭寫的 1x),我們在這顆屏幕上挑一顆 pixel,把它弄成紅色,接著把這個小紅點移到 XHDPI 的 2x 屏幕上的時候,它就會變成涵蓋 2px 了,所以以后就把這顆小紅點的尺寸變成新單位,iOS 叫做「pt」是吧?好,那這個新單位我叫它「dp (Density-Independent Pixels)」!

所以,iOS 的 pt 和 Android 的 dp 其實是雷同的運作原理,使用它當單位來做圖、溝通,就可以避免使用 px造成的誤差了。

網頁設計里的 pt 單位

除了 iOS 和 Android 外,假如也有接觸網頁設計的同伙,可能知道 CSS 里也有 pt 這個單位可以使用,但在這里先給結論:CSS 的 pt 單位和我們前面所提的iOS pt 其實是沒有關系的,其運作體例也不雷同,所以硬要放在一路想就會永久搞不清楚啦!

pt 這個單位詞,其實最早源自于傳統的鉛字印刷,是用來透露表現鉛字塊的尺寸,在印刷和平面設計的世界里,1 pt = 1/72 英吋;而 CSS 之所以有 pt 這個單位,其實是要把網頁印刷/打印出來的時候用到的。

在網頁設計里,屏幕表現和實體印刷,可以擁有兩份不同的 CSS 來決定樣式;風俗優秀的網頁設計師,會分外寫一份 CSS,在印刷的時候給計算機使用(例如拿掉背景圖、字體顏色改成灰階,比較省墨水),而實體世界的字級單位:pt 就會在這時派上用場,所以其實 CSS 里的 pt 單位江蘇人事考試網站,不是讓你拿來在屏幕上使用的喔!

適合屏幕表現的 CSS 單位有 em、rem、px ??等等,有愛好的同伙可以再自行研究。

上一篇:在建設一個公司網站多少錢
下一篇:沒有了
點擊數:  相關搜索:網頁 設計 尺寸 題目
现代战争送彩金