iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 2
5
Modern Web

前端新手村系列 第 2

前端新手村 從設計載體到RWD顯示原理

「當你迷惘的時候,就回到原點想一想」-中華一番 蘭飛鴻

前言

網頁前端新手村系列文章,宗旨並不在技術本身的教導,重點放在技術與技術之間的脈胳關係。讓零碎的網頁前端技術的關鍵字,成為比較有系統性的視野。

讓一開始接觸網頁前端的新手們,有一個比較友善的系統來架構你的學習,至於技術本身的深入探討,就留給其它的高手們吧。

從設計載體到RWD顯示原理

從平面設計師聊起

從「和平面設計師合作」的觀點,來看待網頁設計。
可以發現平面設計師對於圖形的「失真變形」、「裁切」與「手機排版」、「桌機排版」之間的變化,並不是很熟悉。

網頁設計看似平面,其實與平面設計最大的不同,是作品的載體[1]改變了。
依「和平面設計師合作」的經驗,平面設計師訓練中,熟悉的排版方式 不考慮數位載體的變形與元素之間的關係。[2]

「以我的刻版印象中的」平面設計師(這樣才不會打翻一船人)在畫面上的思緒,靠著幾種邏輯運作

  1. 熟悉的是絕對單位: 是一種可以用尺量得到的單位。像是: pt, cm, m, inch...這種。
  2. 對齊: 靠左、靠右、置中以及對齊某條線。
  3. 比例分配: 比例尺寸
  4. 其它我沒有想到的方式~(哈)

螢幕的 pixel 單位

意思是「平面設計師不了解 px ( pixel )單位的使用」。

因為當不同的設備、螢幕尺寸,尤其是「相同解析度,不同尺寸的螢幕」或者「相同尺寸,不同解析度的螢幕」,會造成切出來的作品跑版。

最主要的原因,是沒有考慮到 pixel 在螢幕成為物理尺寸時,有 pixel pitch 的影響。

以此為原因之一,平面設計師與UI設計師的專業領域是重疊又分離的。

印刷與螢幕

在Photosop的設定上,有個可以設定「印刷精細度」的單位,叫 dpi ( dots per inch ),也就是單位面積中,可以放進的 pt (point) 愈多,看起來的畫面也就愈細緻。(買印表機,就是要看這個唷!!)

在買手機時,有個規格叫 ppi ( pixel pre inch ),也就是單位面積中,可以放進多少個 pixel
也就是間接的定義了 pixel pitch 和每一個 pixel 的大小。[3]

試想一下,從32吋的電視機到55吋的電視機,解析度都是 1920×1080 的時代,它們是如何辦到的呢?

對網頁來說,作品是以 pixel 為基本單位,但是到物理尺寸,必須要經過 pixel pitch 和 pixel size 的影響,才能被尺量得到。

瀏覽器的渲染解析度?

在設計師要展開設計時,前端工程師要和設計師談一下,手機和桌機,各別要使用什麼尺寸進行設計。而這個尺寸,要以 pixel 為單位。而不是「設計一個 5.5吋的手機和24吋的螢幕」。

來聊聊,要怎麼樣正確的取得解析度。
以iPhone為例,到官網介紹手機的解析度,可以看見它上面標示的解析度,這個規格稱為 native resolution 或 screen resolution ,以下就稱為「原生解析度」一詞。

在 Chrome 的 開發者模式之下,可以模擬成各種手機尺寸的解析度瀏覽方式。但是,卻找不到 1334 × 750 的 iPhone 6,看到的數字是 375 × 667;找不到 1136 × 640 的 iPhone SE(或 iPhone 5),卻看到 320 × 568。

Chrome模擬出來的解析度,稱之為「渲染解析度」,當然,這不是它的定義,只是用這種方式可以快速的找到它的規格。


渲染解析度

它是透過瀏覽器的渲染,造成的一種解析度尺寸。而網頁的真正載體是瀏覽器。所以要了解瀏覽器如何看待手機尺寸。

上一篇,我們有講到 meta 有一種 name="viewport" 的設定,讓瀏覽器隨設備決定渲染解析度。

讓手機排版上,使用「字會變大」的解析度,瀏覽,又保持細緻的感覺。
也就是說,排版上是吃低解析度的「渲染解析度」,內容呈現上,是吃高解析度的「原生解析度」,就可以達到攻守兼備,有高可讀性,又不會低畫質的手機瀏覽體驗。

換句話說,當你沒有設定好 <meta name="viewport" ...>時,手機瀏覽器也許會使用原生解析度,顯示桌機版排版!

那究竟是精細了多少呢?

讓我們整理一下。

x iPhone 6 iPhone SE
原生解析度 750 × 1334 640 × 1136
渲染解析度 375 × 667 320 × 568

讓我們來算一下
以 iPhone 6 為例
長邊: 1334 = 667 × 2
短邊: 750 = 375 × 2

在桌機版這樣顯示

在手機版這樣顯示

在手機版,把2個pixel 當作1個pixel處理。
用更多的 pixel 呈現「原本要用1個 pixel 的內容」達到內容更細緻的效果

參考資料

[1]: [But 桑專欄] 科技始終來自於人性‧字體始終取決於載體 (上)
[2]: 給尺寸稿
[3]: Pixel density - wiki
[4]: 如何取得手機版面的設計解析度


上一篇
前端新手村 從空白頁開始
下一篇
前端新手村 HTML的作用
系列文
前端新手村30
0
oliver
iT邦新手 5 級 ‧ 2017-12-12 09:06:02

解說詳細 讚讚
手繪圖上面的表格走鐘了

Chris iT邦新手 5 級 ‧ 2017-12-12 10:36:21 檢舉

改修改囉~謝謝

1
LeeBoy
iT邦新手 4 級 ‧ 2018-01-09 17:43:18

所以大螢幕 => 小螢幕,保持同樣解析度的原因,是因為小螢幕單位面積呈現更多 pixel 的緣故嗎?

0
ttn
iT邦新手 5 級 ‧ 2020-03-23 12:49:05

您好,ppi ( pixel pre inch ) 似乎 typo 了

ppi ( pixel per inch )

我要留言

立即登入留言