使用 Adobe Muse 建立高解析度網站

Adobe Muse CC 2014.3 的增強功能 | 2015 年 2 月

Adobe Muse 現在支援執行 Windows 的高 DPI 顯示器。如果您使用的是 Windows 高 DPI 硬體，您會發現 Adobe Muse 介面變得更加清晰銳利了。

高 DPI (HiDPI) 原文為 high dots per inch (每英吋可容納大量像素點數)，用來描述具有高像素密度或高解析度的螢幕。透過較高的像素密度，高 DPI 螢幕能顯示出比標準顯示器更精細的文字和圖形。例如，Apple 在 iPhone、iPad、某些 Windows 裝置、iPod touch 和其他裝置上配備的 Retina 顯示器，就可以顯示高解析度的文字和圖形。

在 Adobe Muse 中建立的網站設計可以完整善用高解析度 (高 DPI) 畫面 (例如 Apple Retina 顯示器) 所提供的顯示品質。

善用 Muse 中的高 DPI 很簡單：

• 將網站解析度設定變更為高 DPI
• 建立將在網站上顯示至少兩倍 (2x) 大小的影像

從 Muse 上傳或轉存高 DPI 網站時，產生的程式碼將會同時包含標準和 2 倍影像，並會自動偵測以高 DPI 或標準解析度顯示器檢視網站時要使用哪種影像。

在 Adobe Muse 中啟用高 DPI

新網站對話框中的解析度選單會提供您選擇「標準」和「高 DPI (2 倍)」的選項。

您可以在建立網站後選擇「檔案 > 網站屬性」來改變解析度設定。

以 2 倍影像資料建立資源

為了能徹底運用高 DPI 螢幕的優點，您的資源也必須是高解析度才能以更高品質顯示。至少，資源的尺寸必須是網站上顯示尺寸的 2 倍大。

建立 2 倍影像很簡單。2 倍資源必須至少為畫面上顯示的兩倍視覺大小。例如：

當您將高 DPI 資源放置在網頁畫布上時，Adobe Muse 會將影像降低為原尺寸的 50% 以進行最佳化。降低顯示尺寸有助於更順暢而有效率的設計體驗。這類影像在「資源」面板中會以「2x」表示。請注意，Adobe Muse 會保留原始資源的資料，當資源在高 DPI 螢幕上檢視時，即可用於較高像素密度的顯示。 Adobe Muse 會在發佈或轉存時，自動產生以 2 倍和標準大小產生點陣化文字與輸出為影像的效果。

如要確認您的資源為 2 倍尺寸，以保留足夠的資料供較高品質顯示，請開啟「資源」面板 (「視窗 > 資源」)。當資源擁有足夠的資料時，清單旁將會出現 2x 圖示。如果資源旁邊沒有出現 2x 圖示，表示沒有保留足夠的資料使其以最高品質顯示，此時將會以標準解析度顯示。

轉存高 DPI 影像

在特殊情況下，Adobe Muse 並不會轉存具有 2 倍資料量的高解析度影像。若影像的大小經縮放以符合容器大小、適用於具有背景影像的頁面、應用於全螢幕幻燈片展示等，Adobe Muse 就不會在發佈時將影像轉存為高 DPI 版本。尤其是在下列情況下，僅有標準版本的影像會轉存：

• 100% 寬度：縮放以符合/縮放以填滿
• 全螢幕幻燈片展示：縮放以符合/縮放以填滿
• 瀏覽器/頁面背景：縮放以符合/縮放以填滿

另外請注意，相較於設定為「縮放以符合/填滿」的背景影像，並排顯示之背景影像的處理方式並不相同。若為並排顯示的影像，Adobe Muse 會在轉存網站時同時提供標準和高解析度的影像，可分別在標準和高 DPI 螢幕上顯示。   使用 Adobe Muse 時，若您並排具有 2 倍資料量的高解析度影像，該影像將被視為其他的任意影像並以原尺寸 50% 的大小放置在網頁畫布上。轉存時，大小縮為一半的影像 (50%) 會轉存為標準解析度影像及具有 2 倍資料量的高解析度原生影像。

考量網站訪客

高 DPI 顯示可讓網站訪客使用更多影像資料來檢視最高視覺品質的網站內容。2 倍影像網站會使影像檔案大小變成標準解析度影像的 4 倍大。若要檢視高 DPI 影像，網站訪客必須載入超過 4 倍的資料。為了更快在高 DPI 網站上顯示內容，Muse 會同時轉存高 DPI 資源以及標準解析度資源。系統會先載入標準解析度資源，然後讓高 DPI 資源漸漸載入到標準版本上方。

高 DPI (開/關) 按鈕 Widget

雖然漸進式載入解決方案對許多網站訪客來說很方便，但是對行動數據方案有限的網站訪客，或是其他以有限或昂貴的下載配額進行連線的網站訪客來說，可能有點麻煩。對於這些網站檢視者，您可能要考慮新增高 DPI (開/關) 按鈕 Widget。將高 DPI (開/關) 按鈕置於頁面上時，該頁面就只會先載入標準解析度，而高 DPI 按鈕會顯示為關閉狀態。如果網站訪客接著將高 DPI 按鈕切換為開啟狀態，則自此之後包含高 DPI (開/關) 按鈕的所有頁面都會載入高 DPI 影像，直到網站檢視者關閉高 DPI、結束瀏覽器或清除 Cookie 為止。在高 DPI 或 Retina 畫面上檢視不包含高 DPI (開/關) 按鈕的頁面時，則會一律載入高 DPI 影像。如果不是在高 DPI 或 Retina 裝置上檢視網站，則按鈕會變成無法使用的狀態，而系統只會載入標準解析度影像。