Date 2026-05-11 10:22:13
说到平面设计，很容易想到平面设计师。事实上，平面设计不仅是一个职业，也是一个重要的设计知识体系。在我的工作中，我发现平面设计知识是UI设计和其他设计领域的必要能力。然而，许多朋友认为「平面设计属于纸媒行业」忽略了这部分知识的重要性，我想简要地提出平面设计知识系统中最重要的知识点供大家学习。
平面设计（graphic design），又称视觉传达设计，是指通过二维平面中各种设计组合传递信息的视觉表达设计。平面布局设计需要使用字体知识（Font）、视觉设计（Visual Design）、版面（Layout）以及其他专业技能来达到创意计划的目的。平面设计非常重视布局设计，而布局不仅需要纸质媒体。如果你想在移动设计、网页设计甚至其他领域做好设计，你必须加强对平面布局基础知识的学习。
在我们开始学习平面布局的基础之前，让我们来谈谈简明的平面构成原理。平面构成是一种利用点、线、面等技术构成基本元素的学习方法。这是我们工作前必须学习的视觉语言。我希望如果你有时间练习，最好边练习边学习知识。
点是平面组成的基本要素。点可以是不同大小的；可以是不同的密度；可以是不同的虚拟现实。它可以是一个整洁的点，也可以是一个随机排列的点。在图片上也可以有大小、密度、虚拟现实、整洁和随机比较，比较会产生一种节奏感。当我们只依靠点来构建图片时，我们会尝试丰富图片，并体验点的变化。
线是什么？垂直线、水平线、斜线、曲线等。垂直和水平会有一种稳定的感觉，斜线会更有冲击力，曲线会感觉更柔和。结合不同厚度和节奏的线条，作品会有更多的视觉引导效果。试着用线条建造一幅画面，你会感受到不同的视觉感受。
有两种类型：不规则形状和几何形状。在纪念碑谷游戏中，有一个词叫做「神圣几何」，我非常喜欢它。几何图形真的很神奇。几何图形可以用数学表达，我们在初中就开始学习了。如三角形、圆形、矩形、方形、椭圆等。这些几何图形在视觉上非常舒适。如果你在创作时没有灵感，你可以从几何图形中寻求灵感。不规则的形状也可以分解成不同的几何组合。
平面构成形式包括重复构成形式、近似构成形式、渐变构成形式、发射构成形式、密集构成形式、对比构成形式、纹理构成形式等。如果您在工作中发现排版图形能力差，建议您了解组成形式并进行实践。
重复组成的形式是以一定形式的基本元素重复排列，排列方向和密度会产生有序的美。说到重复组成，我想顺便介绍两种重复组成方法：第一种：双方连续性。双方连续性是图案的一种组织方法。双方连续性是由单位图案上下或左右方向重复形成的图案。第二种：四方连续性，是由几个图案组成的单位重复连续和扩展的图案形式。
类似的组成形式是一种使用类似元素的组成方式。类似的组成强调统一中的变化。设计采用基本形状之间相互减少的基本形状。类似的基本形状的组成形式是类似的组成形式。综上所述，它看起来是一样的，但实际上需要改变。
渐变形成形式是逐步改变和排列基本元素的大小、方向、虚拟现实、颜色等关系的形成形式。渐变可以通过颜色、方向和虚拟现实的变化来完成，也可以通过形状的变化来完成。这不一定是我们通常理解的颜色渐变。
发射组成形式是以一个点或多个点为中心向周围发射扩散，具有较强的动态感和节奏感。首先，我们需要有一条骨线。骨线是我们图片方向上看不见的线索。其次，我们可以选择使用离心、向心和同心发射方法。
特异构成形式是在整个画面有规律、有固定形式的情况下，以突破单调画面的形式进行一小部分变异。特异构成的部分可以通过颜色、形状、线条等方式进行。许多操作设计也将应用于特异构成形式。
密集构成是利用图片中大量重复的密集元素给观察者一种压迫感和空白对比，密集构成容易给观察者带来冲击和心理压力。
当我们进行比较时，我们可以使用元素的形状、大小、方向、位置、颜色和纹理，以及重心、空间、是否、虚拟和真实的关系元素。比较会产生强烈的对比度和感官刺激。
视觉上可以理解的物体表面图案的纹理，我们称之为纹理，由纹理组成的设计，即纹理组成。如果我们使用Photoshop，它将非常方便，我们可以使用图案、地图和其他方法。
在平面设计过程中，我们实际上是在组织图片、文本、按钮、图标等最小元素的信息架构。这些元素是图片中的最小单元，它们附着在作品的标题、功能、展览地址、景点的照片等信息上。这些排版中的元素需要我们把它们放在图片中，不要删除必要的信息，然后根据它们的重要性进行排列和组合。
字体是排版中最重要的元素，也是最直接的信息传递方式。一般来说，设计师通常需要知道两种字体：中文和西文字体：西文字体有着悠久的历史。从最早的罗马字体到苹果手机中的SFUI字体，西文字体经历了许多设计变化。西文字体可分为：罗马字体或衬线体（roman，serif）、无衬线体（sanserif）、手写体（s cript）、雕刻字系（glayphic）、典籍体字系（Classical）、装饰体字系（decorative）、展示体字系（Display）、当代字体字体系（Contemporary）、符号字系（Symbol）等。中文字体的数量远远落后于西文字体甚至日文字体，因为最初的版权不够重视。幸运的是，中国设计正在崛起。在大量设计师的努力下，中文字体的数量呈指数级增长。中文字体有三种:第一种是黑体(笔画上没有装饰的字体)。黑体也有不同的具体字体，如苹果、微软雅黑、思源等；二是从书法作品演变而来的字体，如宋代印刷的宋体（顺便说一句，日本因误解将宋体称为明体）、楷体、仿宋体、行楷、隶体、魏体、舒体、颜体、笔写字体；第三种是艺术字体，如综艺、美黑体、水柱体、娃娃体等。
在这里，我引用了CSS风格表中前端工程师的族类概念(一个用来表达网页风格的代码)。有五种常见的族类：衬线体（serif）、非衬线体（sans-serif）、手写体（cursive）、梦幻字体族（fantasy）、等宽字体族（monospace）。衬线体的特点是笔画结尾有装饰处理，比如我们熟悉的timess New Roman、Georgia、宋体等。非衬线字体厚度均匀，现代，缩小时仍保持可读性。Ariall等非衬线字体、Helvatica、幼圆、楷体等。手写字体族是由手写字体产生的，如迷你简黄草Caflisch s cript等。梦幻字体族听起来有点非主流，但它也是字体中不可忽视的力量。WingDingss是常见的梦幻字体族。、WingDings 2等。等宽字体族把西文的26个字母全部变成等宽，这样做的好处是排版大大放松。Courier是常见的等宽字族、Prestige等。一般来说，字体的类别是衬线体和非衬线体。你可以简单地记住：衬线是笔画中装饰的字体族，非衬线是笔画厚度相同的字体族。
一个民族下面有不同的字体，但一个字体可能有几个民族。字体文件通常包含几个字体系列。如果你安装了Helvetica，你会发现在Photoshop中，字体选择器下有30多个前缀是Helvetica字体系列。原因很简单。字体设计师除了设计A到Z的大小字体、0到9的数字和标点符号外，还为我们设计了不同的字体类别，以帮助我们在不同的使用场景中表达合适的含义。字体系列一般包括：正常（Regular）、窄体（Narrow）、斜体（Italic）、粗体（Bold）、粗体斜体（Bold Ltalic）、黑体（Black）等等。虽然字体中有或多或少的字体，但它们通常有四个基本字体：正常、斜体、粗体和粗体斜体。在应用场景中：粗体通常表示强调，斜体表示引用，正常是文本。很多时候，我会发现很多设计师乱用斜体。事实上，斜体的设计不是为了好看，而是为了代表书中这段文本的另一个引用。
以使用斜体为例：「设计的作用是找到功能和社会之间的联系。在功能足以解释一切的前提下，可以控制装饰成分。如何掌握控制度是测试设计师是否成熟的尺度。」 -田中一光，“设计觉醒”
字族中的任何字体也会有不同的笔画厚度变化。这种粗细变化的字体称为字重（Font Weight），字族后面的字重选项，例如「Thin」、「Light」「Regular」「Book」「Bold」「Black」「Heavy」它们都是字族下不同厚度的变化。实际上，国际标准 ISO组织规定了九个字重，但由于有些字重不常见，我们可以记住上述七个字重。中文字体也有相应的字重，比如「极细」、「细」、「标准」、「常规」、「中等」、「粗」、「特粗」。在使用场景中，如果我们需要强调一个内容，如标题，通常使用粗体；如果在文本设计中，则使用传统或标准字体。英语也差不多，这些词重要是为了突出文字的使用。注意:在PS中，我们也可以通过字体面板手动加粗文本。如果这种加粗变成形状，会提示「这种字体采用了粗体风格，无法改变」，所以可以看出，这种人工加粗有一点缺陷。
任何字体都有自己的气质。例如，圆角可爱的字体会给人一种温柔顽皮的感觉；锋利的角落会给人一种强烈的感觉；书法字体会让用户感到充满中国风格和个性；纤细的字体会给人一种未来感，等等。每个字体都有一定的感觉，就像色彩心理学中每种颜色带来的不同感觉一样。字体的形状和笔画也会给人一些心理暗示。
全角是指一个字符占据两个标准字符的位置。中文字符、全角英文字符、国家标准GB2312-80中的图形符号和特殊字符均为全角字符。半角是指占据标准字符位置的字符。
通常的英文字母、数字键和符号键都是半角字符。半角全角主要针对标点符号，因为在正常情况下，我们不需要打全角英语。
半角英文 english
全角英文 ｅｎｇｌｉｓｈ
半角符号 ,.’」;:{}_！@#$%^&*()
全角符号，＇＂；：｛｝＿＋！＠＃＄％＾＆＊（）
计算机编程是基于英语的，即半角字符。因此，符号必须是编程中的半角，如：
name="郗鉴"
全角符号编程将无效，例如：
name=「郗鉴」
在设计作品时，我们还必须记住中文与全角符号相匹配，英文与半角符号相匹配。不要出现「好的．」或者「ｔｈａｎｋｓ。」这样的错误。根据中文输入法下的SHIFT+空间，全角半角切换可以相互转换。虽然这个知识点很基础，但毫无疑问，我们经常看到错误的设计。
在设计中，我们必须依靠一些图片或照片材料进行排版。有时我们会选择寻找材料或自己拍摄，无论如何，图片必须与整体设计色调一致，冷暖色中性色符合整体色调，必须是相邻的颜色或对比色，不是因为他们的主观放置没有颜色关系图片或会抵消图片颜色倾向图片。此外，还要注意颜色会产生「水彩效果」，也就是说，当两种颜色放在一起时，如果其中一种是灰色或肮脏的颜色，那么另一种颜色在我们的大脑中会感到肮脏。这种效果可以在绘图中慢慢体验。
在一个设计中，图片和文本的数量应该有一定的对比。人生来就喜欢看图片而不是读图片。事实上，人类只有几千年的阅读能力，欣赏图片的能力是自然的。如果你需要很多文本，试着与需求方讨论以减少文本的数量。文本越少，图形设计越多，视觉上看起来就越容易。
在平面设计中，由于最终目的是打印，对我们的图片尺寸没有非常严格的要求。但如果我们设计互联网产品，可能会涉及一些图片需要网站编辑直接上传，如果你的尺寸不是固定的尺寸，那么网站编辑可以直接上传，因为我们的尺寸变得非常复杂。所以请记住以下三个尺寸：4:3，16:9，1:1。4:3的原因是相机的画幅一般是4比3，所以我们在新闻客户端看到的图片大多是4:3。16:9的原因是视频宽屏的画幅是16:9.因此，我们可以看到视频网站的截图通常是由机器直接捕获的。1.:一般用于封面等图片材料的尺寸为正方形。
在任何设计中，都需要对每个元素进行分级，以便更好地把握重点。你可以想象你在管理一部玛丽苏电视剧。这部剧谁是主角？女二号是谁？谁是群演？主角需要独立的化妆室和助理；女二号可能只有一个助理；团体表演可能是整部剧的过客。我们的设计也是如此。哪些信息是主角？女二号是哪个信息？哪些元素只是群演？女主元素首先要站在C位(网络流行词，来源center)占据画面中心，然后这个元素要尽量突出，可以用更鲜艳的颜色、更夸张的字重、边框等方式突出；女二号信息一定不能抢女主信息的风头，所以要和女主元素相比，字号要小很多，尽量让用户第一眼看到主要元素。而且群演的元素一定要淡化，只让人觉得有这些元素就可以了，比如文字可以缩小到刚才能注意到，颜色可以接近背景色等等。那怎样才能根据自己的身份对这些信息进行排版呢？我们将使用CRAP原则，CRAP是这四个原则的首字母缩写，分别是对比、重复、对齐和亲密。
不同的逻辑元素在同一视觉区域应该不同，以避免视觉上的相似性。这样，我们就可以有效地区分谁是主角，谁是配角。为了使主要元素更加突出，使次要元素更加后退，我们可以尝试使它们的颜色、字体、大小和空白不同。如果这两个元素不同，请让它们完全不同。例如，如果你想使用12px的文本和14px的标题，最好使用12px和40px，更容易区分哪些内容需要优先浏览，哪些内容是次要的。比较方法如下：
色彩对比
当我们排版时，首先要产生对比效果的是背景和文本。文本是第一个阅读元素。如果背景和文本的颜色非常接近，则不容易区分和吸引注意力。一般来说，在许多媒体设计中，我们习惯于使用白色和黑色文本，即白色背景和黑色文本。我指的不仅是纯黑色和纯白色，还有其他类似亮度的颜色的对比。然而，黑色和白色的单词是另一种选择。事实上，深色背景和浅色单词的组合不适合大量阅读。如果你的作品信息不多，没有问题，但如果用户长时间阅读黑色和白色单词的界面，就会产生视觉疲劳
除了文本，图标和其他装饰信息的颜色对比也非常重要。辅助信息或辅助功能的图标应尽可能稀释，以突出主要功能和图标；订单等重要功能需要突出和引人注目。色彩对比是设计中一种非常常见的技术。
大小对比
尺寸比较是指文本、图片、图标等元素为区分重要性而采用的区分方法。例如，两行文本：习和相声演员，属于相同的文本，但重量不同：第二行文本用于解释第一行的内容，因此第二行的内容应通过尺寸和颜色进入次级，以便用户在阅读时能够区分主次。类似地，例如，音乐播放界面中的三个按钮通常并排放在一起：最后一首歌，播放，下一首歌，哪一首应该更大？当然，它是一个常用和重要的功能播放按钮。当然，如果图标属于同一级别，也应该放在一个尺寸级别。
如果相同的内容（如标题等）属于相同的逻辑，它们的颜色、字体、大小和空白可以保持相同。这可以增加组织性，加强设计的统一性。这个原则看起来很简单，但初学者很容易出现这个问题，所以再次提醒，一个级别的信息应该尝试使用一个设计来保持用户的认知，以避免用户认为它是另一个信息分类。这就是重复的原则。重复的颜色、大小和间距应尽可能用于属性或逻辑单元中的内容。我们认为，一个注册页面可以包含：注册、登录、忘记密码、跳过等内容。如果我们将登录页面分为四个属性，那么我们可能需要四个字体或四个不同的区域。但如果我们把它们分为两类呢？注册和其他类别。然后同一类别可以重复使用一个字体。它看起来并不是很混乱。在重复的原则下，用户会因为视觉惯性而成为寻找线索「僵尸」，会根据线索顺利浏览。
布局上的任何内容都应尽可能上下对齐。随意放置绝对是错误的。这一点必须多次强调，例如，元素的上下间距应该是相同的。我们可以看到，在网页和应用程序设计中经常会有间距和空白。我们在设计中需要考虑空白和对齐。空白不是随意的。
两个逻辑元素应尽可能放在一起。两个视觉元素将成为一个视觉单元。例如，注册页面中的登录视觉单元由输入表和登录按钮组成。相同的内容，如小标题，属于相同的逻辑。它们可以保持相同的颜色、字体、大小和空白，从而增加组织性，加强设计的统一性。
从左到右阅读：从左到右是现代社会影响后天影响我们的习惯。当我们看到一个相对较大的设计时，我们也会从左到右阅读，这就是为什么网站的标志在左上角。从上到下阅读：当我们阅读作品时，我们也从上到下阅读，所以重要的内容必须按优先级排列。从大到小阅读:我们的视觉也很调皮。如果一个元素很大，我们会先注意大元素，然后依次看中小元素。从重到轻：元素的颜色也会影响我们的阅读顺序，从重到轻依次浏览。狩猎阅读：狩猎阅读用户正在寻找可以完成当前界面或设计的任务线索，如在购买页面上寻找支付按钮。S曲线阅读：S曲线阅读更适合较大的设计，眼睛需要从上到下浏览信息，在S浏览模式下可以全面观察每个页面元素，S型已成为目前主流的视觉导向模式。所以在S型曲线中，我们有三种对齐方式：左对齐、右对齐、中对齐。关键元素可以依次左右摆放，让用户有视觉浏览的惯性，左-右-左-右-左-右。
以上我们介绍了一些排版和平面的基本原理。所以事实上，我们在应用程序中所要做的就是将这些知识应用到特定的需求中。让多个元素完美地展示在图片中也是一种能力，我们称之为构图能力。所以让我简要谈谈构图能力的要点。
重心出现在我们的任何排版中。重心是我们人类的心理模型。我们从物理世界学习了重心的规律，在阅读平面作品时会莫名其妙地关注重心问题。在设计中，我们可以利用这一点来创建倾斜的重心、中心的重心、左对齐的重心等。但请注意，如果我们的排版中的一个单元是中间的，那么单元中的元素也应该集中在中间，而不是不稳定的重心，否则我们会觉得建筑即将倒塌。
设计由某一元素或几个元素组成的单元也应注意骨骼。骨骼有两种：外延性骨骼和内部骨骼。设计完成后，您可以将工作元素的外围连接起来，看看它们是什么形状。有时我们会发现，一些糟糕的骨骼设计确实会给人一种不舒服的感觉。
1692年，法国国王路易十四命令成立管理印刷的皇家特别委员会。该委员会由数学家尼古拉斯加宗组成（Nicolas Jaugeon）作为领导者，他们使用网格作为设计依据。每个字体网格分为64个基本网格单元，每个网格单元分为36个小网格，因此有一个印刷布局 由2304个小网格组成，在严格的几何网格中设计字体和布局来测试视觉传达功能。格栅系统的英语是「grid systems」，这是一种平面设计方法。网格系统采用固定的网格设计布局，风格整洁简洁。该方法也应用于移动设备和网站设计领域。科学的网格会给人一种秩序的美感和现代感。
△ 网格系统应用于书籍排版 作品:Dale magazine by Rocio Gomez
△ 网格系统在图形中的应用 作品:Pixty App Branding by Ramotion
在设计任何作品时，我们首先考虑的是应用程序的大小。例如，iPhone8的分辨率为750x1334px、Android1080P分辨率为1080x1920px等。在我们确定了我们的排版尺寸后，我们可以根据这个宽度设计可以去除的网格。我们将整体宽度定义为W。然后将整个宽度分为多个等分单元A。每个单元A中都有元素A和间距i。所以他们之间的关系是 W =（a×n）+（n-1）i 。当然，每个应用程序的大小不仅可以被拆除成一个网格，这取决于我们内容排版的密度。之后，我们将过多的内容网格与另一个网格相结合，以获得更大的排版空间；其他元素必须诚实地留在自己的网格中，以完成一个非常科学的布局设计。
例如，当一个网页宽度为1000px时，我们可以使用：20列40px和10像素间隔，20列30px和20像素间隔，25列30px和10像素间隔，25列20px和20像素间隔。如果网页宽度为990px，我们可以使用：11列80px和10像素间隔，18列35px和20像素间隔，25列45px和10像素间隔，33列20px和10像素间隔。如果网页宽度为980px，我们可以使用网页宽度
当然，使用8不是因为数字吉利，而是因为 8 是偶数，8可以成倍缩小三次！(也就是说，8可以缩小一倍到4，4可以缩小一倍到2，这对移动终端适应有太大的优势。)考虑到移动设计中适应的特殊性，可能会出现虚边和半像素缩小到其他尺寸，这种情况可以通过偶数来避免。 为什么是8？因为比如1920x1080、1280x1024、1280x800、1024x768是8倍(虽然有些尺寸不是8倍，但也就不足为奇了)。另外，我们在做其他设计的时候，也可以把不同的空白设计成倍数，比如10px、20px、30px等，使设计内部更有逻辑性。
7. 黄金比例
黄金比例被定义为 (√5-1)/2的无理数。 广泛应用于数学、物理、建筑、艺术甚至音乐等领域。 黄金比例的独特性首先应用于分割一条线段。如果一条线段的总长度是黄金比例 如果将分母加分子的单位长度分为两半，长度为分母单位长度，短期长度与长期长度的比例为黄金比例。
黄金比例(以下简称「黄金比」）约为： 0.618:1。
△ 苹果logo是用黄金比例设计的
斐波那契螺旋线也被称为斐波那契螺旋线「黄金螺旋」，它是根据斐波那契数列绘制的螺旋曲线。自然界中有许多斐波那契螺旋线的图案，是自然界中最完美的经典黄金比例。斐波那契螺旋线是由斐波那契数边缘的正方形组成的矩形，然后在正方形中画一个90度的扇形。连接的弧线是斐波那契螺旋线。
斐波那契数列（FibonacciSequence），又称黄金分割数列。在数学上，斐波那契数列是通过递归来定义的：
F0=1
F1=1
Fn=Fn-1+Fn-2
△ Twitter符合斐波那契螺旋线设计 logo
以64px为单位，即a=64px。然后大方形边长的一半=8a，大圆半径=7a，中圆半径=4.25a，小圆半径=3a。 8a/(8a-3a)=1.6 小圆和大正方形接近黄金比例 7a/4.25a≈1.647 中圆和大圆接近黄金比例 4.25a/3a≈1.417 接近中圆和小圆的比例√2 整个格栅系统的尺寸是通过黄金比例相互关联的。
△ IOS启动图标骨骼符合斐波那契螺旋线和黄金分割
iOS的启动图标非常重要。苹果规定，所有应用程序的启动图标都必须是圆角正方形作为图标背板。这个背板也给了我们一些参考线，苹果用黄金分割和斐波那契螺旋线将图片分割成几个部分。如果我们在绘制启动图标时适合这些参考线。8a/(8a-3a)=1.6 小圆和大正方形接近7a/4.25a的黄金比≈1.647 ，中圆与大圆接近黄金比，4.25a/3a≈1.417 接近中圆和小圆的比例√2。
平面和布局的设计知识包括字体选择、图片选择、平面组成基础、CRAP排版原则、网格设计、黄金比例等知识点。如果我们现在收到一个需求，我们可以先把内容放在图片中，排列重要性，然后选择合适的字体和图片气质，使用CRAP排版原则将信息排列成合理的顺序，使用网格和黄金比例使图片更科学，最后如果发现图片是空的，我们可以添加几何装饰。怎么样，这个想法很清楚吗？在平面和布局知识的背后，是人类几千年来阅读信息的习惯，以及现代社会的传统阅读方法和心理学。为了成为一名优秀的设计师，我们还需要进一步了解设计背后的原则和各种表达信息的方法。我希望这篇文章能启发你的平面和布局设计。
豪斯先生平面课堂系列：
作品不够精致吗？也许你没有注意到这五个细节，“大师的平面课！布局中多张图片的布局方法”和“大师的平面课！谈谈图片和文本叠加的四种常用技术”和“豪斯先生的平面课！谈谈平面设计的空白技能”和“豪斯先生的平面课！背景和主题如何突出背景的主题？”“豪斯先生的平面课！谈谈比较技术中常用的八个知识点，“豪斯先生的平面课！网格系统介绍基本知识+案例演示”和“解锁构图的新姿势！让平面作品成为三种高构图技能”和“大师的平面课堂！8种简单有效的方法可以帮助您提高设计水平”和“大师的平面课堂！最简单的颜色匹配方法”欢迎关注作者微信微信官方账号:「西见」
================推荐明星栏目================
优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。
设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com