網頁設計原則

按鈕尺寸

行動裝置的使用者增加，除了考量在電腦上顯示的網站內容，也須同時考量到觸控介面的操作可能性。因此，必須留意螢幕中的可觸控範圍，如果按鈕太小，很可能觸控的手指會遮擋住按鈕，也就無法確認按鈕位置。

參考 Google 跟 Apple 制訂的設計規範，建議觸控區域最小尺寸為 44 像素，銀幕上的 44 像素約略等同於紙張上的 10 mm。44 像素是指用於 CSS 編排的尺寸。若是使用圖片作為按鈕，則建議需 88 像素 以上。

除了要考量按鈕的尺寸大小，也要保持適當間距，避免過於相鄰的按鈕，減少誤觸的機率。

使用 RGB 色彩

銀幕是使用色彩光來表現色彩，因此在網頁設計中，指定顏色必須要用 RGB 設定。相較於印刷上常用的 CMYK，在螢幕上使用 RGB 的顏色會比較亮。

在網頁的世界可能會看到 「#FFFFFF」的色碼，這是把 RGB 轉換為 16 進位，使用了「0～9」、「A～E」共 16 個字來表示。字母越大、越接近 F，也就是 RGB 中月亮的顏色。

設計網站的建議尺寸

早前店腦銀幕史以稱為方形螢幕的 4:3 為主流；現在則是以 16:9 或 16:10 為主流，網頁寬度也越來越寬。知名網站的寬度通常都是設定在 960～1200 像素左右的寬度。因此建議以 1000 像素為基準，最大 1200 像素。

智慧型手機的尺寸多變，以主流的 Android 手機最寬頂多 480 像素，因此建議智慧型手機的銀幕畫面低於 480 像素。

螢幕解析度(畫素)，與 CSS 設定的尺寸像素並不同。螢幕解析畫素跟終端裝置本身的「裝置像素比(device pixel ratio)」有關。以 iPhone5為例，裝置的像素比是 2 ，這是指「用 2 個畫素才能表現 CSS 的 1 像素」。因此，雖然 iPhone5 的實際解析度是 640，但在 CSS 版型中，會變成一半的 320 像素。同樣地，GALAXY S5 的裝置像素比是 3，相對於解析度 1080 像素的 CSS 版型是 1/3 的 360 像素。不過，圖片是以解析度為準來製作。

解析度

過去網頁設計的解析度都是以電腦為準的 72 dpi 為主，但是近幾年的行動裝置陸續出現解析度更高的裝置。若裝置使用筆72 dpi 高1.33～3倍的解析度，設計的圖片素材也需要準備對應的高解析度檔案。

舉例來說，Apple 旗下 Mac 跟 iPhone 等裝置使用了 Retina 高解析螢幕，就需要設定 2 倍以上的解析度素材。

要輸出 ２ 倍或 3 倍的圖片時，建議比照「image@2x.png」及「image@3x.png」的命名方式。

文字大小

太小的文字除了不易閱讀，有些瀏覽器也會限制最低字級大消，例如Chrome 瀏覽器中的最低字級為 10 像素，若設定小於 10 像素的文字，在畫面上依然會想是 10 像素的大小。

若有特殊狀況需要更小的字體，可以使用 CSS 的 transform 屬性強制縮小。

transform:scale(0.8);
transform:scale(0.6);

參考資料來源

• 網頁設計鐵則＆問題對策-北村崇・淺野 櫻 著