本文內容轉載自「海空設計」微信公眾號，轉載請標明出處，謝謝！
平面印刷設計和網頁設計：設計硬幣的不同兩面。
雖然平面印刷和網頁設計師有很多共同點，但也有一些重要的變化是人們(無論是業內人士還是業內人士)常常無法理解的——從工作流程、文件格式到工具和術語。雖然內容並不廣泛，但以下指南簡要概述了兩個學科之間一些最大的（通常也是最令人困惑的）差異。
什麼是平面印刷設計？
印刷設計是任何設計的最終形式是印製成品。在當今數位化設計工具的世界裡，實際的設計很可能是在電腦上完成的，甚至是在網絡上完成的。但平面印刷設計的最終產品是要被列印出來的，這包括宣傳冊、傳單、購物袋、貼紙、標籤、書皮、海報、名片——甚至T恤!
什麼是網頁設計？
網頁設計是涉及網站設計和創建的技能組合。網頁設計不僅僅是網站上的圖形，還包括網頁的整體外觀、用戶體驗、可用性和可訪問性。該設計旨在在具有網絡連接的計算機、行動裝置或其他設備上查看。
通過上述闡明，我們已經了解了定義，讓我們深入探討平面印刷設計和網頁設計之間的主要區別。
01.用戶如何看待設計
平面印刷設計和網頁設計最大的區別之一是人們如何看待它們。手裡拿著一些實物——一張紙、一本摺疊小冊子、一本書——是一種與在屏幕上看東西截然不同的體驗。其中有一些交叉、一致的地方，比如數字雜誌的布局與印刷雜誌完全相同，但一般來說，實體和數字體驗是印刷和網頁設計之間的一條非常明顯的分界線。在哪裡以及如何看待設計，在設計師的決策中起著重要的作用。
02.體驗：設計如何吸引用戶的感官
與設計的物理或數字性質密切相關的是用戶如何體驗它。平面印刷和網頁設計都有一個共同的視覺質量——也就是無論最終產品是什麼形式，設計都需要給人留下良好印象。在這個這個視覺組件中，平面印刷設計增加了一種觸覺體驗，可能包括紋理、形狀或印刷效果，如凸版、壓花或絲網印刷。網頁設計體驗增加了音頻/視頻元素和其他交互選項的可能性。
以書籍為例。許多讀者喜歡拿在手中書的重量感，質感，翻書沙沙聲，甚至書香味，像這些品質無法以任何數字形式再現的。然而，電子書有其獨特的品質，這些品質無法以印刷形式存在：兒童電子書可能有動畫插圖，或者數字教科書可能有指向其他資源的超連結。這兩種形式都有其本身的價值和吸引力。
03.靜態 vs. 交互：設計生命周期以及用戶如何與項目聯繫
當設計已經完成印刷成品後，它就不會再發生變動（除非決定重新設計和重新印製——這會花費時間和金錢；是很不理想的）。然而，網頁設計可以隨時調整、更改或完全重新設計。許多網站，尤其是那些內容經常變化的網站——例如新聞網站——每天看起來都不一樣。不同的圖片，不同的文字；他們是為了改變而創造的。
這意味著(不像印刷設計師，通常把工作交到印刷階段，就算完成設計任務了)網頁設計師必須考慮項目的持續功能——按鈕、連結、滑鼠懸停效果、表單或投票、視頻和其他交互功能等元素——需要正常工作。沒有什麼比某些東西不按預期運行更容易流失用戶的了。網頁設計與平面設計的區別在於，這種交互性、動態性的質量通常需要瀏覽者的一些輸入或努力，比如點擊、打字等，這就把我們帶到了下一個要點……
04.可用性和導航：使設計對用戶友好
由於印刷設計包含了表面或物體的物理尺寸和形狀，導航通常僅限於翻轉或展開頁面。在網頁方面，就沒那麼簡單了。用戶可能會遇到許多不同的布局，需要一種簡單的方法來找到他們要尋找的內容。這就是菜單的作用所在。它們已經成為網站導航的樞紐，需要位於訪客容易找到的位置。
隨著最近各種支持網絡的設備和小工具的爆炸式增長，人們越來越關注網站在各種設備和屏幕尺寸上的顯示方式——這導致人們關注響應式設計，或適應各種瀏覽方式的設計。網頁設計師不僅要考慮設計在不同設備上的效果，還要考慮當瀏覽者滾動屏幕、放大或縮小或採取其他操作時會發生什麼(以及設計如何變化)。手機界面設計和移動端網頁瀏覽效果已成為重要的考慮因素。可讀性和導航需要如何改變，以更好地迎合這些格式，並創造一個良好的用戶體驗?
05.兼容性：測試網頁設計
對於網頁設計師來說，兼容性是創造優秀用戶體驗的一個重要組成部分。任何網頁設計——包括網站、電子郵件、電子通訊和其他格式——都需要在不同的瀏覽器和不同的作業系統中正確地顯示和操作。這可能會變得複雜，因為這些不同的平台都有自己的局限性。例如，蘋果的行動作業系統iOS無法呈現任何基於flash的設計，Internet Explorer(版本8及以下)無法顯示svg(可縮放的矢量圖形)。網頁設計師必須牢記所有這些問題，並儘可能地讓他們的設計對儘可能多的人友好。
06.如何安排內容
平面印刷和網頁設計都有許多共同的設計元素：排版、圖像/圖形、形狀、線條、顏色等。因此，許多相同的最佳設計原則適用於它們。
每種方法也有其獨特的布局要求。對於印刷品，所有信息都必須在印刷版面的約束範圍內呈現，而對於網頁，設計師幾乎可以無限靈活地組織、排列和過濾信息。
印刷項目必須使用邊距和出血等參數滿足某些標準，而網站的目標是在不同的瀏覽方式之間獲得一致的體驗，例如電腦網頁端和手機等移動端。由於不同的瀏覽器可能會改變網頁設計的原始布局，要實現頂級功能就需要在不同的瀏覽器和作業系統上進行測試。
07.尺寸：充分利用設計空間
尺寸和布局是密切相關的。對於印刷設計來說，印刷表面的尺寸是設計師如何利用空間的最大決定因素之一——使用什麼設計元素，文本的數量和大小，等等。雖然許多項目都有標準尺寸(信件、名片、海報、照片)，但可能性幾乎是無限的，因為紙張和其他印刷表面可以切割成任何尺寸或形狀。
對於網頁來說，「大小」的概念更抽象。設計的尺寸往往被限制在目前可用的一定數量的設備上——從電腦顯示器、筆記本電腦到平板電腦和智慧型手機，但這些內容應該適合任何設備。這種適應性被稱為響應式設計，隨著人們的網頁瀏覽習慣更傾向於移動的方向轉變，這種被稱為響應式設計的適應性正變得越來越受歡迎。
08.解析度和DPI：確保平面印刷設計看起來最好
了解平面印刷和網頁解析度的基礎知識很重要，因為解析度決定了圖像質量——照片和圖形在最終設計中的外觀如何。話雖如此，請稍安勿躁，接下來我們在這裡先講點技術性的知識點。
你可能經常會聽到使用兩個術語來提及解析度：DPI（每英寸點數）或 PPI（每英寸像素數）。許多人錯誤地將它們互換使用，但它們實際上是兩種不同的東西（即使是應該更了解其知識的軟體開發人員——包括 Adobe——有時也會錯誤地標記它們）。
DPI 在實際印刷過程中發揮作用——它是印刷在一英寸印刷表面上的墨點密度。
在更高DPI列印的設備上印刷，將使更高質量的圖像再現。但是，與PPI不同的是，DPI與列印的尺寸無關。它確實與正在使用的印刷設備能保證色彩還原度先進程度有關——這是大多數設計師無法控制的。此外，DPI與網頁設計無關，因為它特別涉及到油墨是如何印在一個表面上的。需要注意的是，許多人錯誤地將「DPI」作為一個概括術語，在任何設計環境中都指代解析度。
09.解析度和 PPI：確保印刷設計看起來最好
PPI涉及在一英寸屏幕空間中顯示的像素數量(數字圖像的方形構建塊)。
每英寸像素越多，圖像的質量就越高——更清晰。像素化(模糊、失真、質量下降)發生在PPI不足以列印或當數字圖像在網上顯示的尺寸大於其原始像素尺寸時。
我們今天使用的設備上的屏幕有預先確定的解析度。對於網頁，可接受的圖像質量的一般標準是72ppi，儘管隨著越來越多的設備配備高解析度顯示器，這一標準可能會發生變化。
「Windows電腦的默認PPI為96。Mac使用72，儘管這個值自80年代以來就不太準確。常規的非視網膜的台式機(包括mac) PPI 最低為 72，最高約為 120。PPI在72到120之間的設計可以確保設計作品在任何地方的尺寸比例都大致相同。」
準備用於列印的數字圖像（以像素為單位）（以英寸、厘米或其他單位為單位）是經常出現混淆的地方。如果像素代表屏幕空間，那麼這如何轉化為設計在紙上的呈現方式？美國政府官方資源建議博物館如何最好地保存照片和其他資源，表明 PPI 和印刷尺寸呈反比關係。也就是說，較高的 PPI 值（每英寸更多像素）會壓縮或減小列印件的物理尺寸，但會提高其質量。這意味著，根據特定項目的特性，設計人員需要設置文件的 PPI 以產生大小和質量的正確組合：
如果沒有放大倍率，人眼無法區分大於 300 PPI 的印刷品中的細節。根據印表機的不同，今天的通用標準要求 300 PPI 才能獲得高質量的印刷效果。」
你可能經常聽到畫家甚至設計師表示需要以 300 DPI 保存文件。他們真正要表達的意思是 300 PPI。
10.文件類型：如何為設計選擇正確的格式
設計人員有多種文件類型可供選擇。但是在什麼情況下，哪些是正確的呢？是否有一些更適合網頁而不是印刷，反之亦然？儘管所有這些首字母縮略詞可能會讓人感到困惑，但有助於理解每種文件格式都分為兩個基本類別：柵格化或矢量化。柵格圖像由像素組成的——數碼照片是一個常見的例子——它們的質量取決於它們的解析度(這一點我們剛剛在上面討論過)。如果柵格圖像放大到超出其解析度（以每英寸像素為單位測量）允許的範圍內，則很容易發生失真。另一方面，矢量圖像不受像素的限制。在不涉及太多技術的情況下，矢量是指由數學方程定義的圖形，允許將它們縮放到任何大小而不會降低質量。
以下是一些常見文件類型、它們的特徵以及你可以將它們用於哪些類型的項目的簡要概述：
印刷和網頁：
• JPG(或JPEG)：大多數人都熟悉這一格式，這是許多數位相機的默認文件格式。JPG 必須以適當的解析度和正確的顏色空間保存(CMYK 用於印刷，RGB 用於網頁；下一節將詳細介紹)。
• PDF：應用廣泛；保留文件的原始內容和外觀，無論在何處或如何查看；
• EPS：最常用於保存矢量圖形，以保持其可擴展性；在 PC 上並不總是可讀的；
• PNG：高畫質；支持透明度/不透明度。
只用於印刷:
• TIFF：高圖像質量和大文件大小（壓縮圖像不會降低質量，與 JPG 不同）；兼容 Mac 和 PC；通常用於最終移交給印刷機處理的文件格式。
只用於網頁：
• GIF：支持具有動畫和/或透明效果的圖形；色彩能力不如 JPG（256 色或更少，因此不適合照片）；非常適合網絡上的簡單圖形，因為小文件大小不會對頁面加載速度產生負面影響；
• SVG：矢量格式，可以放大或縮小到任何尺寸而不會降低質量。
軟體專用：
•PSD：在Photoshop中創建的可編輯的(基於柵格的)文件；
• AI：在 Adobe Illustrator 中創建的可編輯（基於矢量）文件。
11.顏色：CMYK 以及用於印刷的顏色類型
印刷在紙上的顏色和在屏幕上看的顏色非常不同，因為它涉及到不同的顏色空間：CMYK 用於印刷，RGB 用於 網頁。如果在一個項目中使用這兩種方法——例如，幫助一家企業開發其網站的標識以及紙質名片——設計師需要確保不同交付物之間的顏色保持一致。
那怎麼做呢？最常見的方法是使用潘通匹配系統。可以為捲筒紙和印刷品以及不同類型的印刷表面確定等效顏色。潘通顏色有自己的參考編號，這不同於與CMYK和RGB相關的顏色代碼。潘通系統使設計師、客戶和印表機可以輕鬆協作並確保最終產品符合預期。
現在讓我們進入正題。什麼是 CMYK？它代表所有印表機使用的四種墨水顏色：青色、品紅色、黃色和黑色。設計師通過代碼確定他們想要用於印刷項目的各種顏色，這些代碼給出了形成某種顏色所需的每種墨水的百分比。例如，如果你想使用Twitter為其logo使用的相同深淺的藍色，該公司的風格指南告訴我們，「Twitter藍色」的CMYK顏色代碼是70/10/0/0——即 70%的青色墨水，10%的品紅墨水，不含黃色或黑色墨水。然後你可以把這些代碼輸入到設計軟體中，就生成了和Twitter一樣的藍色。
當使用CMYK顏色空間進行設計時，重要的是要記住，屏幕上的顏色並不能準確地代表印刷時的顏色。必須經過打樣校準，才能確保顏色從屏幕正確轉換到紙張上呈現。
12.顏色：RGB和用於網頁的顏色類型
RGB 是指你在看數字屏幕或顯示器時看到的顏色——紅色、綠色和藍色光點組合在一起，在電視或計算機屏幕上創造出可見的顏色。
為與網頁實現一致的顏色可能會很棘手，因為顯示器的顯示功能會因顯示器而異，顏色看起來也會因亮度、對比度等設置而不同。理想情況下，用戶先校準他們的顯示器，以確保準確的顏色表示。(Mac和Windows作業系統都有內置工具，你可以用它們來校準筆記本電腦的屏幕或外接顯示器。)
RGB 顏色由三組數字（介於最小值和最大值之間，通常為 0 到 255）表示，這些數字指的是渲染某種顏色所需的紅、綠和藍光的數量值。繼續 以Twitter為例，「Twitter Blue」的 RGB 值為 85/172/238 — 238（藍光的值）占主導地位。稱為十六進位值的六位代碼，通常稱為十六進位代碼，是標記 RGB 顏色的另一種方式。這些專門用於在使用 HTML 和 CSS 構建設計時識別和呈現顏色。
因為RGB顏色空間比CMYK使用更大的色譜，值得注意的是，一些設計師喜歡首先創建一個RGB印刷項目，以獲得更多的顏色選項，然後在列印之前將完成的設計轉換為CMYK。
13.字體設計：如何為設計選擇和應用正確的字體
如果你曾經為一個設計項目在網上購買過一種字體或下載過免費的字體，你可能會注意到它們分為兩類:桌面字體和網絡字體。這些術語與版權有關，即圍繞字體的使用地點、使用方式和使用次數的法律和版權問題。一般來說，桌面字體被授權給單個用戶安裝在他們的計算機上並以各種方式使用，通常用於印刷設計。另一方面，網頁字體是使用 CSS 專門為在網站上使用而創建和優化的。過去，設計師對網頁字體的選擇非常有限，但 Google Fonts（免費）和 TypeKit（有限的免費選項；否則付費訂閱）等資源正在改變這種狀況。
除了設計人員用來處理字體的實際資源外，印刷和網頁項目之間排列字體的方法也有所不同。對於印刷來說，除了常見的最佳實踐之外，什麼都可以——方法在很大程度上取決於特定的項目，設計師可以完全控制排版的外觀。
然而，對於網頁來說，顯示乾淨且易於閱讀的字體(通常是無襯線字體，或未修飾的襯線字體)被優先考慮。設計師無法控制字體在不同設備上的顯示方式，所以增強可讀性(儘可能多地)是關鍵——這就是為什麼網頁內容通常有短文本段落和大行間距的原因。
14.控制：設計限制和過程持續的時間
排版並不是網頁設計師唯一能控制的東西。網頁設計是一個有趣的平台，因為設計師決定了項目的初始外觀，但用戶可以覆蓋這些選擇——改變瀏覽器窗口大小、放大或縮小，或調整瀏覽器設置，如字體選擇和文本大小。
平面印刷設計師或多或少可以完全控制他們的項目，自定義、更改或調整，直到印刷的那一刻。與用戶選擇最終產品的外觀不同，印刷設計師對設計的外觀做出準確的決定，然後只需找到一台印刷機來滿足他們的需求。
但是，一旦設計從印刷機印製出來，那就定型了。而網頁設計師有更多持續控制權。如果設計師想要修復錯誤，更改網站上的某個元素，甚至重新設計整個設計，你可以選擇任何一種。
15.結構：設計師的方法如何變化以及何時起作用
每個設計師都有自己的流程——他們喜歡的方法和工作流程來把一個設計組合在一起。對於網頁設計來說，這個過程對最終產品的影響可能比印刷設計更大。你看，平面設計師認識到完成某件事的正確方法不止一種。在許多情況下，只要設計最終看起來不錯，那麼它是如何做到的並不重要。設計師可能已經破解了一個項目，但受眾可能無法知道這一點。
網頁設計有點複雜。一個網站是如何組合在一起的——可以這麼說——什麼是「幕後」——確實會影響最終產品，包括可用性（訪問者如何在網站上找到內容、頁面加載速度）和搜尋引擎中的可見性。
通過以上所列， 希望你學到了一些新東西和/或對印刷和網頁設計之間的差異有更好的了解。
本文由海空設計翻譯並編輯，如需轉載，請標明出處，謝謝。
關鍵詞：平面設計、網頁設計、創意設計、排版設計、海報設計、版式設計、封面設計、北京雜誌設計_企業內刊設計_畫冊設計_期刊排版公司_海空設計官網、設計公司