平面设计 网站设计怎么做(平面设计与网页设计的15个差异解析)

平面设计 网站设计怎么做(平面设计与网页设计的15个差异解析)，小编带你了解更多信息。

平面印刷设计和网页设计：设计硬币的不同两面。

虽然平面印刷和网页设计师有很多共同点，但也有一些重要的变化是人们(无论是业内人士还是业内人士)常常无法理解的——从工作流程、文件格式到工具和术语。虽然内容并不广泛，但以下指南简要概述了两个学科之间一些最大的（通常也是最令人困惑的）差异。

什么是平面印刷设计？

印刷设计是任何设计的最终形式是印制成品。在当今数字化设计工具的世界里，实际的设计很可能是在电脑上完成的，甚至是在网络上完成的。但平面印刷设计的最终产品是要被打印出来的，这包括宣传册、传单、购物袋、贴纸、标签、书皮、海报、名片——甚至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.结构：设计师的方法如何变化以及何时起作用

每个设计师都有自己的流程——他们喜欢的方法和工作流程来把一个设计组合在一起。对于网页设计来说，这个过程对最终产品的影响可能比印刷设计更大。你看，平面设计师认识到完成某件事的正确方法不止一种。在许多情况下，只要设计最终看起来不错，那么它是如何做到的并不重要。设计师可能已经破解了一个项目，但受众可能无法知道这一点。

网页设计有点复杂。一个网站是如何组合在一起的——可以这么说——什么是“幕后”——确实会影响最终产品，包括可用性（访问者如何在网站上找到内容、页面加载速度）和搜索引擎中的可见性。

通过以上所列， 希望你学到了一些新东西和/或对印刷和网页设计之间的差异有更好的了解。