Heritage Type Co. 是一家专注于复古字体设计的德国公司，也销售复古插图等素材集，网站提供免费下载的「Heritage Library」页面，收录他们过去曾经提供的部分插图，这些插图可 100% 免费使用，无论用于私人或商业项目都没问题。设计师可以从 Heritage Library 复古插图 取得设计灵感，或是将它制作成精美的包装、印刷为明信片等等。

想找可爱插画素材？Irasutoya 全是免费可商用的素材！ 如果要搜索免费图库多半都会找欧美网站，主要以一些相片为主，若要找可爱插图或素材贴图可以在日本网站碰碰运气，通常都会有不错的收获，例如之前推荐过 illustAC 有超过 90 万张免费插图向量图可供下载： [link https://www.uisdc.com/photoac-and-

阅读文章 >

这些复古插图图案大多出现在国外早期报纸、杂志、书籍或是文宣品，看起来非常有时代感，如果有逛过古物店应也会在一些插画、百科全书内页看到类似的画风。写这篇文章时 Heritage Library 一共有 276 个插图素材包，每个合集都会有主题、收录的图片数、格式和预览图，主要分为 PNG、向量图格式，如果喜欢只要点击进入下载页面即可取得压缩文件。

下载插图素材包后解压缩、取得相关图片文件，里面也会包含一份授权说明 PDF 文件，像是可使用范围和禁止范围，通常编辑、修改、在商业用途使用都没问题，但禁止重新分配、销售、提供他人免费下载或重新打包素材，使用素材图片时记得多留意授权方式及适用范围。

Heritage Library – Free Vintage Illustrations 网站链接： https://www.heritagetype.com/pages/free-vintage-illustrations

使用教学

开启 Heritage Library 页面会看到以编号排序的插图素材集，最新的在最前面，每个素材包都有特定的主题，从预览图应该也看得出来，主题下方会显示包含几张图片和格式，大多都是 PNG、向量图。

点击进入特定的插图集后会看到下方有「Download」下载链结，也会有相关说明，例如编号 267 插图是柑橘系列插图，一共有 8 张插图、PNG 格式，可免费使用于商业用途。

点击下载后会看到如下画面，再点一下「Download Now」立即下载压缩文件，网站还会标示文件名和文件大小，很棒的是在 Heritage Library 下载任何免费插图都无需注册或登入账号。

下载后解压缩就能取得相关插图素材，压缩文件里还会有授权文件，明确说明插图可使用的范围，记得先仔细阅读再使用比较不会有问题。试着下载了几个 Heritage Library 提供的插图素材，即使是 PNG 图片都有相当大的尺寸、分辨率。

值得一试的三个理由：

Heritage Library 收录超过 270 个复古插图素材集皆可免费下载 提供 PNG 或向量图格式，下载解压缩即可使用 无论使用在私人或商业用途都没问题

信息架构 设计是每个 交互设计 师都必须要掌握的基本功，那到底什么是信息架构设计？为什么要进行信息架构设计，以及如何进行 信息架构设计 呢？下面我们一一来看。

8000+干货！B端设计师要懂的信息架构 一篇关于信息架构的深度解读，希望对大家有所帮助。

阅读文章 >

从用户体验设计的 5 个层次来看，结构层和框架层是交互设计师设计的核心范畴：

图 1 用户体验设计各角色分工

框架层呈现的是每一个界面中文本、图片、按钮、控件等元素的具体内容、位置及关系，包含界面布局、导航设计和信息设计。而结构层则决定了每个界面应该有哪些文本、图片、按钮和控件元素，以及这些元素在交互前后的逻辑对应的关系。如果说框架是面，那么结构则是包含面+面与面串联的关系网络。

1. What | 什么是信息架构？ ① 信息架构的起源

信息架构(information architecture)，简称 IA。

1976 年，瑞查德·索·乌曼在担任美国建筑师协会会长时创造了“信息架构”术语，用来应对当代社会信息的不断增长和爆炸。她的妻子说道：“他所有的训练，作为一个建筑师，作为一个制图者，作为一个平面设计师，作为一个企业家，作为一个出版商，还有作为一个作家，本质上都是想要让信息变得清晰易懂。”

“信息架构”是一种使问题变清晰的方式。

② 信息架构的定义

IA 的主体对象是信息，由信息架构师来加以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。

对于信息架构，不同的组织有不同的定义：

图 2《信息架构》书中的定义

在《信息架构——超越Web设计》一书中，对信息架构的定义如下：

共享信息环境的结构化设计；

数字、物理和跨渠道生态系统中的组织、标签、搜索和导航系统的合成; 创建信息产品和体验的艺术及科学，以提供可用性、可寻性和可理解性; 一种新兴的实践性科学群体，目的是把设计和建筑学的原理理导⼊入数字领域中; 我认同上面的定义，不过对于设计师来讲，这个定义比较复杂难记，所以我结合自身经验，给出了自己对信息架构的理解：

图 3 悦姐对信息架构的理解

信息架构=信息+架构。

信息包括各种文本、图片、影音等元素；

架构则对应这些元素的选择、分类、导航和检索。

通俗点说，信息架构就是通过合理的组织和表达各种信息元素，让用户获取并理解信息更容易。为信息与用户认知之间搭建⼀座畅通的桥梁。

2. Why | 为什么要进行信息架构设计？ ① 信息大爆炸

过去 60 年，人类社会的数据发生了爆炸式增长。

图 4 信息大爆炸的速度

2008 年人类大约创造了近 10 亿张 DVD 能存储的数据，这等同于过去 5000 年的人类创造数据的总和。

12 年，调研机构预测信息每隔 18 月会翻一倍

20 年，调研机构预测信息每隔 73 天会翻一倍

……

经历了 Web2.0 的 UGC 时代，短视频爆发，数据正在以爆炸式的速度增长。

回到到产品，不同的业务部门/产品经理有不同的 KPI，大家都挤破头颅想在产品上占有一席之地，毕竟有入口才有流量，否则整个业务/产品/功能可能都无法被用户感知，那他们的指标也就无法达成。

② 人类的生理局限

在信息爆炸的年代，人类进化的速度却是缓慢的，我们现在的大脑跟 250 万年前的原始人并没有太大区别。

图 5 人类的生理局限

我们的大脑每秒钟要接收约 4000 万次的感官信息输入，但意识一次能注意到其中约 40 个，其中短期工作记忆能处理的只有 4±1 个。（大家可以看下这个视频， https://www.bilibili.com/video/av94974825/ 感受一下意识的局限性）

正是由于现代信息数据的大爆炸，多数产品日益臃肿的结构，以及人类有限的处理能力，所以呈现什么信息，以什么形式呈现的信息架构设计就非常重要。

图 6 不同信息架构的示意

作为设计师，我们有必要根据用户的行为和特征，结合信息环境，选择合适的信息，并以适合的方式进行组织和呈现，以便让用户获取并理解信息更容易，完成信息的组织和传达作用。

3. How | 如何进行信息架构设计？ 在本章节，我们先了解一下构建信息架构的 3 种方式，然后学习信息架构的 4 种常见类型，再学习一下信息架构的设计逻辑流程，最后给大家举一个非常小的设计案例帮助大家理解。

① 信息架构的构建方式

信息架构有 3 种构建方式：自上而下，自下而上和综合运用。

图 7 信息架构的构建方式

自上而下的构建方式

自上而下的构建方式是由战略层驱动的，根据产品目标与用户需求直接进行结构设计，进行新产品规划或者产品重新定义的时候会用到。

图 8 自上而下的构建方式

自上而下的构建方式，会先从最广泛的，最有可能满足目标的内容及功能开始分类，再依据逻辑细分次级分类。（MVP 的设计思路）所有分类都是空槽，最后将内容和功能按顺序填入。它有一个明显的缺点是：可能导致现有重要内容被忽略。

自下而上的构建方式

自下而上的构建方式是由范围层驱动的，根据对现有的内容和功能需求的分析进行设计，这是项目实践中大家最常用的一种方式。

图 9 自下而上的构建方式

在具体项目实践中，产品或设计师根据对现有内容和功能需求的分析，将它们分别归属到较高一级的类别，从而逐渐构建出能反映我们的产品目标和用户需求的结构。（常用卡片分类法辅助）它也有一个缺点：可能导致不能灵活兼容未来内容变动或增加。

综合运用的构建方式

正因为自上而下和自下而上都有其明显的缺点，所以理想的信息架构的构建方式都是综合运用的，同时从战略层和范围层进行驱动，以构建一个适应性强的系统。

图 10 综合运用的构建方式

一个适应性强的信息架构系统，能把新内容作为现有结构的一部分容纳进来（如图左侧），也可以把新内容当成一个完整的部分加入（如图右侧）。

信息架构的基本单位是节点，节点可对应任意信息要素或信息要素的组合，小到一个字段/控件，大到一个界面/功能都是可以的，不同场景下，节点的颗粒度不相同。

这些节点的排列方式有 4 种常见的类型，也就是我们所说的信息架构类型。大家在具体设计的时候，可以参考使用。

② 信息架构类型

常见的信息架构类型有 4 种，层级结构、矩阵结构、自然结构和线性结构：

图 11 信息架构类型

层级结构

又叫树状结构或中心辐射结构。

图 12 层级结构

层级结构的节点与其他相关节点之间存在父子关系。每一个节点都有父节点（不一定有子节点），最顶层的父节点被称之为根节点。

层级结构的优点是：结构清晰，关系明确，有一定的冗余度和扩充性。缺点是：改变父级结构，必然会影响其所有子级; 层级结构的适用场景非常广泛，可以说是互联网产品最通用的一种结构，它既可以用于主产品，也可用于子模块。

图 13 层级结构的案例

比如美图秀秀的底部 Tab 形式，以及首页的宫格形式，设置的列表形式、官网分类的导航栏形式，都属于层级结构的运用。

矩阵结构

矩阵结构允许用户沿着两/多个维度在节点之间移动，最终都可以帮助用户找到想要的信息。

图 14 矩阵结构

矩阵结构的优点是：支持从多维度触达同一内容，也可以从同一内容了解多维信息，信息触达快捷，丰富。缺点是内容信息较为复杂，学习成本较高。矩阵结构适用于高频功能/信息，需全局考虑。

图 15 矩阵结构的全局示意

比如微信核心的对话功能，是社交的核心，需要能够多维度触达，所以微信设计了最近记录、通讯录、朋友圈头像等多个入口触达。

图 16 矩阵结构的局部示意

比如点评的美食列表，不同用户对美食的核心诉求有差异，所以点评提供了多种筛选和排序方式，方便用户快速找到符合要求的美食，也可以根据某一个美食关联查找到整个类别的美食。

自然结构

自然结构不遵循任何一致的模式。节点被逐一连接起来，节点与节点之间有联系，但没有分类。

图 17 自然结构

自然结构的优点是：自然流畅，接近现实认知。缺点是：随机性，用户不可控，再次查找困难。常用于子模块，探索一系列关系不明确或一直在演变的内容。

图 18 自然结构案例示意

比如各产品的推荐模块，推荐内容之间并无明确的归属或分类关系。

线性结构

在线性结构中，用户不能进行跳转，只能一步一步按顺序浏览对应的信息 。

图 19 线性结构

线下的传统媒体：书、文章、影视都是线性结构。它的优点是：简单易懂，操作简单单。缺点是：拓展性有限，用户控制感较差。常用于小的节点，比如新功能引导、H5 活动等。

图 20 线性结构案例示意

除了 H5 活动和新手引导，很多教育类产品为了保证学习难度的递增性，通常也会采用线性结构。

③ 信息架构的梳理逻辑与呈现

有了前面的构建方式和信息架构类型作为指导思想，结合我们的设计分析，可以帮助我们梳理出特定结构的信息架构和任务流程，并以受众易理解的方式进行呈现。

图 21 梳理信息架构的过程

在梳理过程中，我们以业务侧在范围层提供的信息范围为基础，通过竞品分析（了解竞品的组织系统、标签系统、导航系统、搜索系统规则），结合本品现有信息架构的数据表现（了解我们用户在我们产品中的行为偏好），再配合以用户调研（通过用户问卷或者卡片分类，了解用户对信息归类组织的心智模型）最后利用逻辑推理，可以整理出适合我们产品的信息架构和任务流程。

所以真实的项目中做信息架构，绝不仅仅是将产品提供的功能、内容进行简单的归类分组，既要自上而下的考虑其拓展性，筛选/补充重要的节点纳入信息架构。还要考虑其命名（标签系统）用户能否很容易的认知理解。然后再是将所有信息按照某个或某几个特定的维度进行分类组织（组织系统），最后再考虑呈现，以何种形式表达给大家，让大家更容易理解。

严格来讲，并没有标准的信息架构表达模式，在《信息架构——超越Web设计》一书中，罗列了多种信息架构的表达方式，只要能够向受众传达清楚，什么表达形式都是可以的。

图 22 信息架构的表达方式

在互联网项目中，大家用得比较多的形式包括：信息架构图和逻辑流程图。

图 23 信息架构常见的表达形式

和交互设计原型一样，重点不是这张图的形式（这种图在技术层面上谁都能画），而是这张图背后的（组织系统、标签系统、导航系统、搜索系统）。

组织系统：选择合适的维度及结构

组织系统：以什么维度来归类组织这些信息，我以曾经做 Material Design 的组件分享为例，官网提供的组件如下图所示：

图 23 MD 的组件

我在组织过程中，将其信息架构归纳为 3 大类 8 小类：

图 23 MD 的组件

但归类方式肯定不止这一种形式，大家在学习的时候，可以按照自己的组织系统进行归类整理。

以新闻呈现为例，可以按照时间维度归类，可以按照主题维度进行归类、可以按照媒体方的维度进行归类，可以按照表现层视频、图文、文字的形式进行归类，到底按照什么维度进行单一归类还是进行矩阵归类，这就是你的组织系统要解决的问题。

标签系统：选择合适的语言及图像

标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别，包括文本标签和图片标签。

比如我归类的栏、控件和视图，用户是否也习惯这样的分类方式，我选择的图标是否能准确地表达文本标签的涵义。

导航系统：选择合适的导航结构

导航系统的内容比较多，我们将在下一堂课单独讲解

搜索系统：是否选择搜索。

搜索系统是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索需要考虑三点：

图 24 搜索系统的考虑因素

内容丰富度：产品所承载的内容丰富度/复杂度低，内容少（搜索可能经常得不到结果）往往不需要提供搜索。

内容性质：产品提供的内容如果是偏兴趣探索，浏览型的也可以不需要搜索；

搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好地查找信息；

上述 3 点决定了我们是否需要考虑搜索功能。而关于搜索的具体设计，也是一个庞大的课题，我们先不做进一步的阐述。

信息架构图是一个中间产物，他的呈现形式是相对简单的，但这个形式背后的思考（组织系统、标签系统、导航系统、搜索系统）是需要设计师深思熟虑的，设计师在做信息架构时，务必要将信息（有哪些信息，如何命名）和架构（如何分类组织，如何呈现）都考虑清楚，之后的框架层设计才能更清晰明确。

欢迎关注作者微信公众号：「悦姐聊设计」

这篇文章将分享 20 个 Figma 插件，全是免费的 Figma 插件，能快速提升你的设计效率。

上周四，Adobe 在官网发布消息说已经把 figma 给收购了，很多人开始担心它会不会收费，会不会像 behance 一样不给用了。老实说，Figm 被 Adobe 收购后会怎样我不知道，但今天要分享的这 20 个插件没用上，真感觉白用了。

Adobe疯狂星期四！200亿美元巨资收购Figma 昨天疯狂星期四晚上8点多，一则科技圈的消息重磅落地，Adobe 大手一挥，从 V我50 变成拿出约 200 亿美元现金和股票收购 Figma，设计师纷纷感叹：终究是逃不过 Adobe 宇宙...... 该交易预计将于 2023 年完成。

阅读文章 >

10 年前，我做 UI 从 PS 入行，到 sketch 出现，生产效率极大提升，再到现在的 figma 成为新的主流。回头看，sketch 仿佛就是给 figma 这种产品过渡的，未来云协作工具将是趋势。

Figma 的强大，不仅仅在于协作效率，也在于它的插件生态非常好。今天这篇文章将分享 20 个 Figma 的常用插件，这些插件也是我问了公司内的很多同事使用习惯，结合我自己的发现做了一个整合。剔除了需要付费的，精选了 20 个常用且免费的插件，快速提升你的设计效率。

本文强烈推荐大家点赞收藏，更推荐大家去用用这些插件，这样才能感受插件的效率。

Figma 插件安装非常方便，只需要在这里搜插件的名字然后点击 Run 就能装好并使用了。

下面就逐一介绍这 20 个插件吧，排名不分先后，一定要看到最后哦，说不定就有你正需要的！

一、Upsplash 网站链接： https://www.figma.com/community/plugin/738454987945972471

可以快速获取高质量的配图，并且图片是可以个人或者商业使用，无需向上传人请求许可。只是不可以拿这些图片出售或者上传到竞品平台。使用也非常简单，直接点击或拖拽都可以。

二、Iconify 网站链接： https://www.figma.com/community/plugin/735098390272716381

可以通过这个插件快速找到大量的图标，你可以用它们快速做一些 demo 或者参考。

三、Content Reel 网站链接： https://www.figma.com/community/plugin/731627216655469013

可以快速替换内容，包括文本、图片、图标，还可以自己上传自己常用的各种资源库，方便针对自己项目的内容替换。

四、Figmotion 网站链接： https://www.figma.com/community/plugin/733025261168520714

可以在 figma 中做动效，还挺方便的，类似于 AE 的操作。做完之后可以导出多种视频格式。有一点需要提醒下，这个插件需要先识别到 frame，所以记得先新建一个画板再来做动画，不然会显示用不了哦。

五、Able 网站链接： https://www.figma.com/community/plugin/734693888346260052

可以快速查看颜色对比度是否符合标准。

六、Rename It 网站链接： https://www.figma.com/community/plugin/731271836271143349

在做组件库，有大量元素的时候，可以进行快速改名，很方便。主要有 3 个功能，快速命名，查找和替换，自定义快捷命名（高级操作）。

七、Viewports 网站链接： https://www.figma.com/community/plugin/732240841094697441

可以快速适配并预览到不同尺寸下的界面，并且可以看到目前全球用户不同尺寸手机的使用占比。

八、Image Palette 网站链接： https://www.figma.com/community/plugin/731841207668879837

快速对图片进行配色分析，并生成配色板，非常好用。如果你发现一张图很好看，想应用它的配色，那个这个插件就非常实用了。

九、Vectary 3D 网站链接： https://www.figma.com/community/plugin/769588393361258724/Vectary-3D

快速添加 3D 元素。不仅可以使用它内置的 3D 元素，还可以使用外部链接和自己团队制作的 3D 模型，用它作 3D 组件库非常方便了。

十、腾讯 CoDesign 网站链接： https://www.figma.com/community/plugin/936456730265868414

鹅厂出品的 figma 插件，能够方便团队进行图标、素材和文件的管理。

十一、Google Sheets Sync 网站链接： https://www.figma.com/community/plugin/735770583268406934

非常好用的内容填充插件。可以将需要填充的内容写在 google 文档里，然后一键导入并替换，包括图片，这些图片甚至只需要一些链接就可以了，非常方便。

这个插件稍微需要一点点学习成本，也给大家找了一个讲的非常好的教程演示： https://www.youtube.com/watch?v=J67CDH5XkWk&t=404s

十二、Clean Document 网站链接： https://www.figma.com/community/plugin/767379019764649932

文档清理插件，能够快速帮你把文档整理的漂漂亮亮的。它能自动帮你删除包括隐藏图层、像素自动对齐、智能命名、智能排序等等功能。

十三、GiffyCanvas 网站链接： https://www.figma.com/community/plugin/803633147991628761/GiffyCanvas

做序列帧 Gif 图非常方便，个人觉得比 PS 做序列帧图功能更强大，更方便。

十四、Redlines 网站链接： https://www.figma.com/community/plugin/781354942292031141/Redlines

在做标注规范的时候，能快速自动画红线标注，特别好用。

十五、Blush 网站链接： https://www.figma.com/community/plugin/838959511417581040

这个插画插件我很早就介绍过，《不会插画没关系，插件帮你快速搞定》那时候还是 sketch 版本，现在已经不仅有了 figma 版本，还新增了大量新的组件插画，非常实用。

十六、Morph 网站链接： https://www.figma.com/community/plugin/906950256777348534

可以通过 figma 快速制作一些视觉效果，包括高质量投影、新拟物效果、发光效果、故障效果、多彩渐变效果，一键生成还能修改，比 PS 可要快多了哦。

十七、Mapsicle 网站链接： https://www.figma.com/community/plugin/736458162635847353

一个非常好用的地图生成插件，可以修改它的很多属性得到你想要的实时地图截图，风格选择也比较多，我就特别喜欢它的暗色系地图。对于一些经常做地图相关设计的同学，这个插件你必须装上，这样就不用到处找地图风格，再截图到 figma 这么麻烦了。

十八、Autoflow 网站链接： https://www.figma.com/community/plugin/733902567457592893

对于做界面串联的需求，尤其是交互同学，这个插件非常有用。可以一键实现界面之间的连线关系。用法也非常简单，选择要链接的界面按 shift 就能自动加连线了。

十九、Blobs 网站链接： https://www.figma.com/community/plugin/739208439270091369

随机创建背景好看的背景图形，我们经常可以看到一些图案设计很好看，但我们自己在设计这些图形的时候，总觉得不是特别自然，而且还难调，曲线总是不够平滑。有了这个插件后就非常方便了，可以随机生成各种不同的图案，非常实用。彩云之前也有专门分享过好看的图案背景，《国外大神常用的图案纹理库，免费还能商用，太良心了！》这个插件居然能自动生成了。

二十、Find and Replace 网站链接： https://www.figma.com/community/plugin/735072959812183643

当界面量很大，文本内容又非常多时，用这个基础的查找和替换插件便会非常实用。可以一次性换掉项目中所有需要替换的内容，包括图层名和内容文字。

彩云花了一个下午将这些插件整理并录屏做成 gif 图方便大家选择和使用，如果你有学到，记得分享到你的朋友圈哦~

欢迎关注作者的微信公众号：「彩云译设计」

版式设计是设计师的必修课，研究再多都不为过，今天鱼先生继续与大家分享，关于版式设计的 15 种实用的版式 设计创意 术，干货系列~

本文方法适用于所有 版式设计 的应用，比如常见的 海报设计 、画册设计、KV 设计等。

ok，开始吧！

往期回顾：

用80张案例，帮你掌握20种渐变色表现形式！ hi，我是鱼先生，终身学习践行者。

阅读文章 >

一、一反常态，制造矛盾 想要创意？那就要不走寻常路，敢于一反常态。

反常态直观的理解就是与常识唱反调，与人们直观视觉或心理习惯产生冲突，从而在这种冲突的差异化中产生创意点和视觉效果。

看些案例，加深理解：

左：小孩的身体与大人的脑袋；右：手指出现的人脸

没力气了吧？来杯咖啡吧！

人物表情困乏，除了头部，其他身体都消失了，只剩下衣服，我们经常说累瘫了，那么这个画面就利用了这一点，这在现实中是不可能出现的，与人们的固有思想是矛盾冲突的，在一反常态中起到了吸睛的效果。

创意点来自原汁原味、自然

鱼先生说：

「少即是多」，如同上面两张案例，创意非常直观，所以不需要再用广告语画蛇添足了。

二、大小元素，加强对比 对比的表现形式太多了，比如今天讲的大小对比，另外还有虚实对比，粗细对比，情绪对比等，是设计中非常实用的表现形式。

下次我专门写一篇关于对比设计的文章，今天重点讲大小对比。

来看几组案例，加深理解：

左：玩具小人与真人的大小对比；右：人物与建筑物之间

大家可以看到，大小对比加强之后，视觉冲击力是比较强的。

左：大手与人的对比；右：物品大小的摆放

左：大文字与小人，形成强烈对比；右：人物与人物之间的大小对比，趣味性十足

鱼先生说：

其实也是利用了人们的好奇心，通过极端的大小对比去吸引人们的眼球，增加画面的视觉冲击力，从而达到广泛传播的商业目的。

三、照片裁切，妙趣横生 设计中，有时候一张好的照片足以撑起整个版面，可见照片的重要性不言而喻。

选择好了照片之后，还可以采取不同的裁切形式，这里分为 3 点来讲：

常规式 异形式 局部式。 1. 常规式

上面几张案例就是方正的裁切图片使用，这样的设计形式要注意两点。

第一，文案编排，比如主题文字与辅助文字的大小对比、对齐方式等，第二，图片要美观，还需要与我们的主题相辅相成。

既然画面呈现简单，那么就需要设计师把握到图片的精致以及版式的精致。

2. 异形式

异形图片的使用方式，要比常规式具备更好的灵动性。

比如上面两个案例，把图片嵌入柔和的异形内，再配合手写的字体，整体的感觉给人放松、轻松的感觉

左：人的脑袋延伸出一个异形空间，奇思妙想的创意；右：以鹿首为图形，内部嵌入所需图片

3. 局部式

手与腿

这张图片的运用非常的恰到好处，手与腿结合的位置占据整张画面的黄金分割点上，然后再结合文字信息的搭配，整体的视觉是非常突出的。

这样局部放大图片的运用效果，也会彰显整个画面的张力，有点制造故事情节的悬念感，让人产生想象，更起到了吸睛的效果。

四、巧用渐变，五彩斑斓 渐变色是设计师常使用的一种设计形式，大面积使用能够很好的烘托气氛，小面积使用能够起到点缀的作用。

这里看几张案例，加深理解：

大面积渐变色的使用，气氛感十足

左：背景渐变色；右：线性渐变形成主体

左：人物渐变；右：天空的自然渐变

酸性设计中的渐变应用

用80张案例，帮你掌握20种渐变色表现形式！ hi，我是鱼先生，终身学习践行者。

阅读文章 >

五、加入立体，空间延伸 运用立体形式很容易加强设计的效果，因为立体在我们的视觉中本来就是比较突出的。

想要做好立体效果，像透视、光影这些基础知识，一定需要有所了解。

字体 3d 表现

铅笔直接立体，成为视觉主体，色彩方面，黑与红的对比比较强烈

左：心形迷宫的立体表现；右：数字 10 的立体表现

字体 3d，增加厚重感，提升冲击力

鱼先生说：

平面设计中的立体表现需要通过技法、效果等形式来表现，所以大家在学习的时候，技法和思维要同时进行补充，这样你才能够更好的把自己思想里面的创意用画面表现出来。

六、元素点缀，强调重点 点缀有很多的表现形式，比如颜色点缀、字体点缀、图形点缀等，大家要学会在融合中创新，同样的技法，但通过思想的转换就可以产生不同的创意。

左：字体颜色的点缀去突出想要表达的主题，整体都是黑白色，突然出现黄色点缀自然就比较突出了。

右：渐渐隐藏于背景中的人物，然后上面英文字母点缀。

主角点缀烘托

鱼先生说：

点缀法的表现形式就是找到主题，为重点元素进行点缀强调，比如有的时候字体，有的是图形，或者如上图的人物点缀，其目的性就是为了起到吸睛、强调的作用。

七、几何图形，刚柔并济 顾名思义就是运用几何图形去表现设计，再深入就是可以通过几何形状与色彩、文字、图形的结合运用，去表达你所想要表达的设计效果或商业诉求。

几何图形的拼凑

三角形和圆形的应用

多边形和椭圆形的应用

鱼先生说：

不同的几何图形具备不同的属性，比如三角形有尖锐和切割的意思，圆形和椭圆具备柔和、圆润的意思，所以大家在使用的时候，也要结合产品或企业本身的属性来思考。

八、字体符号，夺人眼球 字体图形化，就是把单个字体或多个字体作为一种图形符号来处理，可以具备识别性，或者单纯作为符号，具体的设计形式要根据项目本身去对应思考。

OK，跟着鱼先生一起看几组案例，加深理解：

人物符号化和数字符号化

左边的的方式比较常见，主题文字与头像的结合，同时保留文字的识别性。

右边如果单独放一个没有调整的数字 8，会显得有些平淡，现在这样进行了一点创意，整个画面就活泼起来了。

字母用元素进行置换处理

完全改变了英文字体的原有结构，采用物体的形式进行置换，同时保留英文字体的识别性。

元素的添加可以根据行业属性，或者利用公司产品的样式结合，这样的设计过程其实也很有趣，就像是自己在“无中生有”的创意一样。

字母符号化

左：钢琴与字幕 J 的结合；右：字母 A 与植物的结合

左：书法字的运用；右：英文字母放大

以物体本身结合字形为创意点，左边就是完全用物体形成了一个数字 5，而右边的 S 字母与鱼尾巴进行了结合

鱼先生说：

我们在使用字体图形化的时候，所制造出来的符号一定是结合商业设计本身，比如最简单的方式就是放大主题文字，或者以主题文字的首字母为图形。

如果再进一步思考的话，就是考虑行业本身的属性，比如最后的两张，一个用到了镰刀，一个用到了鱼尾，表现出来也会起到了吸睛的作用。

九、肌理填充，质感倍增 肌理填充也可以理解为材质的填充，被运用的场景有很多，比如背景、字体、图片，从而起到增加质感的作用。

不同的肌理体现不同的质感，比如下图：

OK，继续来看些案例，加深理解：

光影肌理之美

左：器物本身的肌理质感；右：毛线肌理放大，质感比较强

绿叶肌理与人物腹肌结合，创意点来自产品本身的功能性

利用产品的功能性

鱼先生说：

肌理本身具备质感，这是肌理自带的优势。而且有些行业本身就具备很强的肌理，比如瓷器、钢铁等，我们要学会利用优势，来设计出更好的视觉效果。

十、制造悬念，引发想象 人的想象力是无限的，在创意的手法表现中，可以利用人的想象力来制造悬念、引发好奇。

往往具备想象力的画面，要么有趣，要么充满悬疑性。

比如下图，就属于有趣：

工具与鸟

拉弓要射向哪里呢？

左：这是飞机？右：这是恐龙？

上面两张是乐高玩具的创意海报，用玩具带给孩子无限的想象力，突出产品益智的特点，从侧面也可以表达出人生不设限的含义。

左：铅笔形成的牙齿；右：钻入空中的人

神秘感？

鱼先生说：

制造想象就是要引发人们的好奇心，特别是在悬疑电影的推广海报中经常会用到这样的手法。

十一、正负图形，双向奔赴 利用负空间，可以营造双向意图，让画面充满趣味性和寓意。

手与灯泡

瓶子的负空间

左：狼与男孩人脸；右：叉子与酒杯

左：人物与动物；右：产品的形状为负空间，突出产品的原料来自自然

鱼先生说：

负空间的使用，具备有趣性，并且可以通过正负形来表达主题，比如上面的饮料案例，就是通过把水果形成瓶子的负形来表达果汁的原汁原味，简单直接，让人记忆深刻。

鱼提示：正负形在 logo 中的使用也非常频繁，大家不要把某种创意形式局限在排版中。

十二、东拼西凑，有点意思 利用图片或某种元素，进行有规则或无规则的拼接，其目的性就是让画面产生有趣性的同时，突出要表达的主题。

其表现形式可以是具象拼接，也可以是抽象拼接。

一起在案例中加深理解：

左：动物与人脸的结合，直接拼接；右：动物拟人化

图片拼接，左边为两张图片拼接；右边为多张图片蒙太奇式拼接

象征性拼接，比如右边带上了 VR 眼睛之后，犹如去到了现场一样真实，通过上面（现实）和下半部（虚拟）的对比，让人对产品的特性一目了然

属性拼接，趣味性十足

鱼先生说：

拼接法的其中一种表现形式就是对立，比如战争与和平，黑与白，在公益海报中也会经常使用这样的对比手法来达到警醒的目的。

比如以下两张公益海报：

利用对立，达到让人警醒的目的

原本写到这里准备结束今天的文章了，但是呢，我任性的想凑够 15 条。

刚好想起了很多同学总是提问的一个设计困惑，那就是如何才能快速提高设计画面的视觉冲击力？

这里就再分享 3 条：提升视觉冲击力有 3 宝：星空、爆炸、强透视。

OK，开始吧！

十三、秘宝一：星空

星空的特性就是浩瀚、璀璨，具备无限的延伸性，星空本身的视觉冲击力就是非常强的，所以当我们在设计项目的时候，可以借用星空的元素来增加视觉性和空间性。

一起来看些案例，加深理解：

星空在影视海报中的应用

右边即便是黑白色的星空，也能够给人以深邃的空间感

我们来举个例子，本例子中用到了秘宝中的两宝，星空和强透视。

主题是画册设计中企业历程的页面，如下图，我找到了一张跨海大桥（强透视）的图片作为主图。

原图并不是很美观，而且我们要在图片上面放文字，图片背景过于零散，文案内容的阅读性肯定是减弱的，所以我们要想办法解决这个问题。

鱼提示：是我很多年前的一张案例了，源文件真的找不到了，直接上最终的完稿图，然后我会给大家解析一下作图过程。

最终完成后如下图：

技法操作：天空背景和星空的融合，我使用了 PS 中的蒙版工具、渐变工具、橡皮擦工具。

这张案例的重点在于 3 点：

更换天空背景，我用到了一张云层较厚的图片，替换掉了原来的较亮天空。 融入星空元素，增加延伸感和视觉冲击力。 统一整体色调，由原来的暖色调，调整为目前的暗冷色调，从而突出文字内容。 鱼先生说：

设计中的图片素材，很少有拿来就可以直接完美使用的，像简单的裁切、修图、色调处理等都是比较常见的优化方式，再深入优化就需要设计师根据自己的审美和项目需求进行素材处理。

十四、秘宝二：爆炸

我们都看过影视剧里面震天动地的爆炸场景，特别是在科幻剧里面的大爆炸，冲击波都能够震毁掉一个城市、一个星球。

所以说爆炸带给我们的直观感受就是冲击力非常之强，那么我们在设计画面中就可以思考加入爆炸元素，从而让设计画面的冲击力加强。

一起来看些使用案例：

爆炸元素的使用在影视作品中经常使用，给人震撼、大场面的效果。

十五、秘宝三：强透视 强透视的画面视觉性本身就很高，能给人很强的视觉冲击力。

看些案例，加深理解：

左：铁轨的强透视；右：隧道的强透视

左：运用字体结合环境造成强透视；右：建筑排列形成强透视

左：俯拍人物形成强透视；右：仰拍人物形成强透视

注：本文所有案例均为辅助说明知识点，不作商用，其版权归原作者所用。

写在最后： 有同学总是问我这个效果如何做？那个技巧怎么实现？

对于设计师来讲，软件操作的确需要熟练，但也要明白设计不仅仅是软件，好的设计方法、流程、创意表现，都是需要我们不断掌握学习的。

希望大家在看过鱼先生写的教程后，不要总停留在眼界上，要做到知行合一，在实践中举一反三，才是真正的吸收。

祝好！

OK，下期见！

欢迎关注作者微信公众号：「摆渡鱼生」

信息架构 设计是每个 交互设计 师都必须要掌握的基本功，那到底什么是信息架构设计？为什么要进行信息架构设计，以及如何进行 信息架构设计 呢？下面我们一一来看。

8000+干货！B端设计师要懂的信息架构 一篇关于信息架构的深度解读，希望对大家有所帮助。

阅读文章 >

从用户体验设计的 5 个层次来看，结构层和框架层是交互设计师设计的核心范畴：

图 1 用户体验设计各角色分工

框架层呈现的是每一个界面中文本、图片、按钮、控件等元素的具体内容、位置及关系，包含界面布局、导航设计和信息设计。而结构层则决定了每个界面应该有哪些文本、图片、按钮和控件元素，以及这些元素在交互前后的逻辑对应的关系。如果说框架是面，那么结构则是包含面+面与面串联的关系网络。

1. What | 什么是信息架构？ ① 信息架构的起源

信息架构(information architecture)，简称 IA。

1976 年，瑞查德·索·乌曼在担任美国建筑师协会会长时创造了“信息架构”术语，用来应对当代社会信息的不断增长和爆炸。她的妻子说道：“他所有的训练，作为一个建筑师，作为一个制图者，作为一个平面设计师，作为一个企业家，作为一个出版商，还有作为一个作家，本质上都是想要让信息变得清晰易懂。”

“信息架构”是一种使问题变清晰的方式。

② 信息架构的定义

IA 的主体对象是信息，由信息架构师来加以设计结构、决定组织方式以及归类，好让使用者与用户容易寻找与管理的一项艺术与科学。

对于信息架构，不同的组织有不同的定义：

图 2《信息架构》书中的定义

在《信息架构——超越Web设计》一书中，对信息架构的定义如下：

共享信息环境的结构化设计；

数字、物理和跨渠道生态系统中的组织、标签、搜索和导航系统的合成; 创建信息产品和体验的艺术及科学，以提供可用性、可寻性和可理解性; 一种新兴的实践性科学群体，目的是把设计和建筑学的原理理导⼊入数字领域中; 我认同上面的定义，不过对于设计师来讲，这个定义比较复杂难记，所以我结合自身经验，给出了自己对信息架构的理解：

图 3 悦姐对信息架构的理解

信息架构=信息+架构。

信息包括各种文本、图片、影音等元素；

架构则对应这些元素的选择、分类、导航和检索。

通俗点说，信息架构就是通过合理的组织和表达各种信息元素，让用户获取并理解信息更容易。为信息与用户认知之间搭建⼀座畅通的桥梁。

2. Why | 为什么要进行信息架构设计？ ① 信息大爆炸

过去 60 年，人类社会的数据发生了爆炸式增长。

图 4 信息大爆炸的速度

2008 年人类大约创造了近 10 亿张 DVD 能存储的数据，这等同于过去 5000 年的人类创造数据的总和。

12 年，调研机构预测信息每隔 18 月会翻一倍

20 年，调研机构预测信息每隔 73 天会翻一倍

……

经历了 Web2.0 的 UGC 时代，短视频爆发，数据正在以爆炸式的速度增长。

回到到产品，不同的业务部门/产品经理有不同的 KPI，大家都挤破头颅想在产品上占有一席之地，毕竟有入口才有流量，否则整个业务/产品/功能可能都无法被用户感知，那他们的指标也就无法达成。

② 人类的生理局限

在信息爆炸的年代，人类进化的速度却是缓慢的，我们现在的大脑跟 250 万年前的原始人并没有太大区别。

图 5 人类的生理局限

我们的大脑每秒钟要接收约 4000 万次的感官信息输入，但意识一次能注意到其中约 40 个，其中短期工作记忆能处理的只有 4±1 个。（大家可以看下这个视频， https://www.bilibili.com/video/av94974825/ 感受一下意识的局限性）

正是由于现代信息数据的大爆炸，多数产品日益臃肿的结构，以及人类有限的处理能力，所以呈现什么信息，以什么形式呈现的信息架构设计就非常重要。

图 6 不同信息架构的示意

作为设计师，我们有必要根据用户的行为和特征，结合信息环境，选择合适的信息，并以适合的方式进行组织和呈现，以便让用户获取并理解信息更容易，完成信息的组织和传达作用。

3. How | 如何进行信息架构设计？ 在本章节，我们先了解一下构建信息架构的 3 种方式，然后学习信息架构的 4 种常见类型，再学习一下信息架构的设计逻辑流程，最后给大家举一个非常小的设计案例帮助大家理解。

① 信息架构的构建方式

信息架构有 3 种构建方式：自上而下，自下而上和综合运用。

图 7 信息架构的构建方式

自上而下的构建方式

自上而下的构建方式是由战略层驱动的，根据产品目标与用户需求直接进行结构设计，进行新产品规划或者产品重新定义的时候会用到。

图 8 自上而下的构建方式

自上而下的构建方式，会先从最广泛的，最有可能满足目标的内容及功能开始分类，再依据逻辑细分次级分类。（MVP 的设计思路）所有分类都是空槽，最后将内容和功能按顺序填入。它有一个明显的缺点是：可能导致现有重要内容被忽略。

自下而上的构建方式

自下而上的构建方式是由范围层驱动的，根据对现有的内容和功能需求的分析进行设计，这是项目实践中大家最常用的一种方式。

图 9 自下而上的构建方式

在具体项目实践中，产品或设计师根据对现有内容和功能需求的分析，将它们分别归属到较高一级的类别，从而逐渐构建出能反映我们的产品目标和用户需求的结构。（常用卡片分类法辅助）它也有一个缺点：可能导致不能灵活兼容未来内容变动或增加。

综合运用的构建方式

正因为自上而下和自下而上都有其明显的缺点，所以理想的信息架构的构建方式都是综合运用的，同时从战略层和范围层进行驱动，以构建一个适应性强的系统。

图 10 综合运用的构建方式

一个适应性强的信息架构系统，能把新内容作为现有结构的一部分容纳进来（如图左侧），也可以把新内容当成一个完整的部分加入（如图右侧）。

信息架构的基本单位是节点，节点可对应任意信息要素或信息要素的组合，小到一个字段/控件，大到一个界面/功能都是可以的，不同场景下，节点的颗粒度不相同。

这些节点的排列方式有 4 种常见的类型，也就是我们所说的信息架构类型。大家在具体设计的时候，可以参考使用。

② 信息架构类型

常见的信息架构类型有 4 种，层级结构、矩阵结构、自然结构和线性结构：

图 11 信息架构类型

层级结构

又叫树状结构或中心辐射结构。

图 12 层级结构

层级结构的节点与其他相关节点之间存在父子关系。每一个节点都有父节点（不一定有子节点），最顶层的父节点被称之为根节点。

层级结构的优点是：结构清晰，关系明确，有一定的冗余度和扩充性。缺点是：改变父级结构，必然会影响其所有子级; 层级结构的适用场景非常广泛，可以说是互联网产品最通用的一种结构，它既可以用于主产品，也可用于子模块。

图 13 层级结构的案例

比如美图秀秀的底部 Tab 形式，以及首页的宫格形式，设置的列表形式、官网分类的导航栏形式，都属于层级结构的运用。

矩阵结构

矩阵结构允许用户沿着两/多个维度在节点之间移动，最终都可以帮助用户找到想要的信息。

图 14 矩阵结构

矩阵结构的优点是：支持从多维度触达同一内容，也可以从同一内容了解多维信息，信息触达快捷，丰富。缺点是内容信息较为复杂，学习成本较高。矩阵结构适用于高频功能/信息，需全局考虑。

图 15 矩阵结构的全局示意

比如微信核心的对话功能，是社交的核心，需要能够多维度触达，所以微信设计了最近记录、通讯录、朋友圈头像等多个入口触达。

图 16 矩阵结构的局部示意

比如点评的美食列表，不同用户对美食的核心诉求有差异，所以点评提供了多种筛选和排序方式，方便用户快速找到符合要求的美食，也可以根据某一个美食关联查找到整个类别的美食。

自然结构

自然结构不遵循任何一致的模式。节点被逐一连接起来，节点与节点之间有联系，但没有分类。

图 17 自然结构

自然结构的优点是：自然流畅，接近现实认知。缺点是：随机性，用户不可控，再次查找困难。常用于子模块，探索一系列关系不明确或一直在演变的内容。

图 18 自然结构案例示意

比如各产品的推荐模块，推荐内容之间并无明确的归属或分类关系。

线性结构

在线性结构中，用户不能进行跳转，只能一步一步按顺序浏览对应的信息 。

图 19 线性结构

线下的传统媒体：书、文章、影视都是线性结构。它的优点是：简单易懂，操作简单单。缺点是：拓展性有限，用户控制感较差。常用于小的节点，比如新功能引导、H5 活动等。

图 20 线性结构案例示意

除了 H5 活动和新手引导，很多教育类产品为了保证学习难度的递增性，通常也会采用线性结构。

③ 信息架构的梳理逻辑与呈现

有了前面的构建方式和信息架构类型作为指导思想，结合我们的设计分析，可以帮助我们梳理出特定结构的信息架构和任务流程，并以受众易理解的方式进行呈现。

图 21 梳理信息架构的过程

在梳理过程中，我们以业务侧在范围层提供的信息范围为基础，通过竞品分析（了解竞品的组织系统、标签系统、导航系统、搜索系统规则），结合本品现有信息架构的数据表现（了解我们用户在我们产品中的行为偏好），再配合以用户调研（通过用户问卷或者卡片分类，了解用户对信息归类组织的心智模型）最后利用逻辑推理，可以整理出适合我们产品的信息架构和任务流程。

所以真实的项目中做信息架构，绝不仅仅是将产品提供的功能、内容进行简单的归类分组，既要自上而下的考虑其拓展性，筛选/补充重要的节点纳入信息架构。还要考虑其命名（标签系统）用户能否很容易的认知理解。然后再是将所有信息按照某个或某几个特定的维度进行分类组织（组织系统），最后再考虑呈现，以何种形式表达给大家，让大家更容易理解。

严格来讲，并没有标准的信息架构表达模式，在《信息架构——超越Web设计》一书中，罗列了多种信息架构的表达方式，只要能够向受众传达清楚，什么表达形式都是可以的。

图 22 信息架构的表达方式

在互联网项目中，大家用得比较多的形式包括：信息架构图和逻辑流程图。

图 23 信息架构常见的表达形式

和交互设计原型一样，重点不是这张图的形式（这种图在技术层面上谁都能画），而是这张图背后的（组织系统、标签系统、导航系统、搜索系统）。

组织系统：选择合适的维度及结构

组织系统：以什么维度来归类组织这些信息，我以曾经做 Material Design 的组件分享为例，官网提供的组件如下图所示：

图 23 MD 的组件

我在组织过程中，将其信息架构归纳为 3 大类 8 小类：

图 23 MD 的组件

但归类方式肯定不止这一种形式，大家在学习的时候，可以按照自己的组织系统进行归类整理。

以新闻呈现为例，可以按照时间维度归类，可以按照主题维度进行归类、可以按照媒体方的维度进行归类，可以按照表现层视频、图文、文字的形式进行归类，到底按照什么维度进行单一归类还是进行矩阵归类，这就是你的组织系统要解决的问题。

标签系统：选择合适的语言及图像

标签系统，通俗来讲就是要我们对当前整个系统信息节点的命名，从而让信息的呈现更容易识别，包括文本标签和图片标签。

比如我归类的栏、控件和视图，用户是否也习惯这样的分类方式，我选择的图标是否能准确地表达文本标签的涵义。

导航系统：选择合适的导航结构

导航系统的内容比较多，我们将在下一堂课单独讲解

搜索系统：是否选择搜索。

搜索系统是我们平日最常用的查找信息的功能，它能够帮助我们快速进行信息的检索。虽然搜索功能非常重要，但并不是每个系统每个页面都需要搜索。我们决策是否添加搜索需要考虑三点：

图 24 搜索系统的考虑因素

内容丰富度：产品所承载的内容丰富度/复杂度低，内容少（搜索可能经常得不到结果）往往不需要提供搜索。

内容性质：产品提供的内容如果是偏兴趣探索，浏览型的也可以不需要搜索；

搜索场景：如果搜索场景很简单，考虑是否只用筛选或分类就能够解决问题；反之如果搜索内容很复杂，我们还可以搜索结合筛选来更好地查找信息；

上述 3 点决定了我们是否需要考虑搜索功能。而关于搜索的具体设计，也是一个庞大的课题，我们先不做进一步的阐述。

信息架构图是一个中间产物，他的呈现形式是相对简单的，但这个形式背后的思考（组织系统、标签系统、导航系统、搜索系统）是需要设计师深思熟虑的，设计师在做信息架构时，务必要将信息（有哪些信息，如何命名）和架构（如何分类组织，如何呈现）都考虑清楚，之后的框架层设计才能更清晰明确。

欢迎关注作者微信公众号：「悦姐聊设计」

Heritage Type Co. 是一家专注于复古字体设计的德国公司，也销售复古插图等素材集，网站提供免费下载的「Heritage Library」页面，收录他们过去曾经提供的部分插图，这些插图可 100% 免费使用，无论用于私人或商业项目都没问题。设计师可以从 Heritage Library 复古插图 取得设计灵感，或是将它制作成精美的包装、印刷为明信片等等。

想找可爱插画素材？Irasutoya 全是免费可商用的素材！ 如果要搜索免费图库多半都会找欧美网站，主要以一些相片为主，若要找可爱插图或素材贴图可以在日本网站碰碰运气，通常都会有不错的收获，例如之前推荐过 illustAC 有超过 90 万张免费插图向量图可供下载： [link https://www.uisdc.com/photoac-and-

阅读文章 >

这些复古插图图案大多出现在国外早期报纸、杂志、书籍或是文宣品，看起来非常有时代感，如果有逛过古物店应也会在一些插画、百科全书内页看到类似的画风。写这篇文章时 Heritage Library 一共有 276 个插图素材包，每个合集都会有主题、收录的图片数、格式和预览图，主要分为 PNG、向量图格式，如果喜欢只要点击进入下载页面即可取得压缩文件。

下载插图素材包后解压缩、取得相关图片文件，里面也会包含一份授权说明 PDF 文件，像是可使用范围和禁止范围，通常编辑、修改、在商业用途使用都没问题，但禁止重新分配、销售、提供他人免费下载或重新打包素材，使用素材图片时记得多留意授权方式及适用范围。

Heritage Library – Free Vintage Illustrations 网站链接： https://www.heritagetype.com/pages/free-vintage-illustrations

使用教学

开启 Heritage Library 页面会看到以编号排序的插图素材集，最新的在最前面，每个素材包都有特定的主题，从预览图应该也看得出来，主题下方会显示包含几张图片和格式，大多都是 PNG、向量图。

点击进入特定的插图集后会看到下方有「Download」下载链结，也会有相关说明，例如编号 267 插图是柑橘系列插图，一共有 8 张插图、PNG 格式，可免费使用于商业用途。

点击下载后会看到如下画面，再点一下「Download Now」立即下载压缩文件，网站还会标示文件名和文件大小，很棒的是在 Heritage Library 下载任何免费插图都无需注册或登入账号。

下载后解压缩就能取得相关插图素材，压缩文件里还会有授权文件，明确说明插图可使用的范围，记得先仔细阅读再使用比较不会有问题。试着下载了几个 Heritage Library 提供的插图素材，即使是 PNG 图片都有相当大的尺寸、分辨率。

值得一试的三个理由：

Heritage Library 收录超过 270 个复古插图素材集皆可免费下载 提供 PNG 或向量图格式，下载解压缩即可使用 无论使用在私人或商业用途都没问题

版式设计是设计师的必修课，研究再多都不为过，今天鱼先生继续与大家分享，关于版式设计的 15 种实用的版式 设计创意 术，干货系列~

本文方法适用于所有 版式设计 的应用，比如常见的 海报设计 、画册设计、KV 设计等。

ok，开始吧！

往期回顾：

用80张案例，帮你掌握20种渐变色表现形式！ hi，我是鱼先生，终身学习践行者。

阅读文章 >

一、一反常态，制造矛盾 想要创意？那就要不走寻常路，敢于一反常态。

反常态直观的理解就是与常识唱反调，与人们直观视觉或心理习惯产生冲突，从而在这种冲突的差异化中产生创意点和视觉效果。

看些案例，加深理解：

左：小孩的身体与大人的脑袋；右：手指出现的人脸

没力气了吧？来杯咖啡吧！

人物表情困乏，除了头部，其他身体都消失了，只剩下衣服，我们经常说累瘫了，那么这个画面就利用了这一点，这在现实中是不可能出现的，与人们的固有思想是矛盾冲突的，在一反常态中起到了吸睛的效果。

创意点来自原汁原味、自然

鱼先生说：

「少即是多」，如同上面两张案例，创意非常直观，所以不需要再用广告语画蛇添足了。

二、大小元素，加强对比 对比的表现形式太多了，比如今天讲的大小对比，另外还有虚实对比，粗细对比，情绪对比等，是设计中非常实用的表现形式。

下次我专门写一篇关于对比设计的文章，今天重点讲大小对比。

来看几组案例，加深理解：

左：玩具小人与真人的大小对比；右：人物与建筑物之间

大家可以看到，大小对比加强之后，视觉冲击力是比较强的。

左：大手与人的对比；右：物品大小的摆放

左：大文字与小人，形成强烈对比；右：人物与人物之间的大小对比，趣味性十足

鱼先生说：

其实也是利用了人们的好奇心，通过极端的大小对比去吸引人们的眼球，增加画面的视觉冲击力，从而达到广泛传播的商业目的。

三、照片裁切，妙趣横生 设计中，有时候一张好的照片足以撑起整个版面，可见照片的重要性不言而喻。

选择好了照片之后，还可以采取不同的裁切形式，这里分为 3 点来讲：

常规式 异形式 局部式。 1. 常规式

上面几张案例就是方正的裁切图片使用，这样的设计形式要注意两点。

第一，文案编排，比如主题文字与辅助文字的大小对比、对齐方式等，第二，图片要美观，还需要与我们的主题相辅相成。

既然画面呈现简单，那么就需要设计师把握到图片的精致以及版式的精致。

2. 异形式

异形图片的使用方式，要比常规式具备更好的灵动性。

比如上面两个案例，把图片嵌入柔和的异形内，再配合手写的字体，整体的感觉给人放松、轻松的感觉

左：人的脑袋延伸出一个异形空间，奇思妙想的创意；右：以鹿首为图形，内部嵌入所需图片

3. 局部式

手与腿

这张图片的运用非常的恰到好处，手与腿结合的位置占据整张画面的黄金分割点上，然后再结合文字信息的搭配，整体的视觉是非常突出的。

这样局部放大图片的运用效果，也会彰显整个画面的张力，有点制造故事情节的悬念感，让人产生想象，更起到了吸睛的效果。

四、巧用渐变，五彩斑斓 渐变色是设计师常使用的一种设计形式，大面积使用能够很好的烘托气氛，小面积使用能够起到点缀的作用。

这里看几张案例，加深理解：

大面积渐变色的使用，气氛感十足

左：背景渐变色；右：线性渐变形成主体

左：人物渐变；右：天空的自然渐变

酸性设计中的渐变应用

用80张案例，帮你掌握20种渐变色表现形式！ hi，我是鱼先生，终身学习践行者。

阅读文章 >

五、加入立体，空间延伸 运用立体形式很容易加强设计的效果，因为立体在我们的视觉中本来就是比较突出的。

想要做好立体效果，像透视、光影这些基础知识，一定需要有所了解。

字体 3d 表现

铅笔直接立体，成为视觉主体，色彩方面，黑与红的对比比较强烈

左：心形迷宫的立体表现；右：数字 10 的立体表现

字体 3d，增加厚重感，提升冲击力

鱼先生说：

平面设计中的立体表现需要通过技法、效果等形式来表现，所以大家在学习的时候，技法和思维要同时进行补充，这样你才能够更好的把自己思想里面的创意用画面表现出来。

六、元素点缀，强调重点 点缀有很多的表现形式，比如颜色点缀、字体点缀、图形点缀等，大家要学会在融合中创新，同样的技法，但通过思想的转换就可以产生不同的创意。

左：字体颜色的点缀去突出想要表达的主题，整体都是黑白色，突然出现黄色点缀自然就比较突出了。

右：渐渐隐藏于背景中的人物，然后上面英文字母点缀。

主角点缀烘托

鱼先生说：

点缀法的表现形式就是找到主题，为重点元素进行点缀强调，比如有的时候字体，有的是图形，或者如上图的人物点缀，其目的性就是为了起到吸睛、强调的作用。

七、几何图形，刚柔并济 顾名思义就是运用几何图形去表现设计，再深入就是可以通过几何形状与色彩、文字、图形的结合运用，去表达你所想要表达的设计效果或商业诉求。

几何图形的拼凑

三角形和圆形的应用

多边形和椭圆形的应用

鱼先生说：

不同的几何图形具备不同的属性，比如三角形有尖锐和切割的意思，圆形和椭圆具备柔和、圆润的意思，所以大家在使用的时候，也要结合产品或企业本身的属性来思考。

八、字体符号，夺人眼球 字体图形化，就是把单个字体或多个字体作为一种图形符号来处理，可以具备识别性，或者单纯作为符号，具体的设计形式要根据项目本身去对应思考。

OK，跟着鱼先生一起看几组案例，加深理解：

人物符号化和数字符号化

左边的的方式比较常见，主题文字与头像的结合，同时保留文字的识别性。

右边如果单独放一个没有调整的数字 8，会显得有些平淡，现在这样进行了一点创意，整个画面就活泼起来了。

字母用元素进行置换处理

完全改变了英文字体的原有结构，采用物体的形式进行置换，同时保留英文字体的识别性。

元素的添加可以根据行业属性，或者利用公司产品的样式结合，这样的设计过程其实也很有趣，就像是自己在“无中生有”的创意一样。

字母符号化

左：钢琴与字幕 J 的结合；右：字母 A 与植物的结合

左：书法字的运用；右：英文字母放大

以物体本身结合字形为创意点，左边就是完全用物体形成了一个数字 5，而右边的 S 字母与鱼尾巴进行了结合

鱼先生说：

我们在使用字体图形化的时候，所制造出来的符号一定是结合商业设计本身，比如最简单的方式就是放大主题文字，或者以主题文字的首字母为图形。

如果再进一步思考的话，就是考虑行业本身的属性，比如最后的两张，一个用到了镰刀，一个用到了鱼尾，表现出来也会起到了吸睛的作用。

九、肌理填充，质感倍增 肌理填充也可以理解为材质的填充，被运用的场景有很多，比如背景、字体、图片，从而起到增加质感的作用。

不同的肌理体现不同的质感，比如下图：

OK，继续来看些案例，加深理解：

光影肌理之美

左：器物本身的肌理质感；右：毛线肌理放大，质感比较强

绿叶肌理与人物腹肌结合，创意点来自产品本身的功能性

利用产品的功能性

鱼先生说：

肌理本身具备质感，这是肌理自带的优势。而且有些行业本身就具备很强的肌理，比如瓷器、钢铁等，我们要学会利用优势，来设计出更好的视觉效果。

十、制造悬念，引发想象 人的想象力是无限的，在创意的手法表现中，可以利用人的想象力来制造悬念、引发好奇。

往往具备想象力的画面，要么有趣，要么充满悬疑性。

比如下图，就属于有趣：

工具与鸟

拉弓要射向哪里呢？

左：这是飞机？右：这是恐龙？

上面两张是乐高玩具的创意海报，用玩具带给孩子无限的想象力，突出产品益智的特点，从侧面也可以表达出人生不设限的含义。

左：铅笔形成的牙齿；右：钻入空中的人

神秘感？

鱼先生说：

制造想象就是要引发人们的好奇心，特别是在悬疑电影的推广海报中经常会用到这样的手法。

十一、正负图形，双向奔赴 利用负空间，可以营造双向意图，让画面充满趣味性和寓意。

手与灯泡

瓶子的负空间

左：狼与男孩人脸；右：叉子与酒杯

左：人物与动物；右：产品的形状为负空间，突出产品的原料来自自然

鱼先生说：

负空间的使用，具备有趣性，并且可以通过正负形来表达主题，比如上面的饮料案例，就是通过把水果形成瓶子的负形来表达果汁的原汁原味，简单直接，让人记忆深刻。

鱼提示：正负形在 logo 中的使用也非常频繁，大家不要把某种创意形式局限在排版中。

十二、东拼西凑，有点意思 利用图片或某种元素，进行有规则或无规则的拼接，其目的性就是让画面产生有趣性的同时，突出要表达的主题。

其表现形式可以是具象拼接，也可以是抽象拼接。

一起在案例中加深理解：

左：动物与人脸的结合，直接拼接；右：动物拟人化

图片拼接，左边为两张图片拼接；右边为多张图片蒙太奇式拼接

象征性拼接，比如右边带上了 VR 眼睛之后，犹如去到了现场一样真实，通过上面（现实）和下半部（虚拟）的对比，让人对产品的特性一目了然

属性拼接，趣味性十足

鱼先生说：

拼接法的其中一种表现形式就是对立，比如战争与和平，黑与白，在公益海报中也会经常使用这样的对比手法来达到警醒的目的。

比如以下两张公益海报：

利用对立，达到让人警醒的目的

原本写到这里准备结束今天的文章了，但是呢，我任性的想凑够 15 条。

刚好想起了很多同学总是提问的一个设计困惑，那就是如何才能快速提高设计画面的视觉冲击力？

这里就再分享 3 条：提升视觉冲击力有 3 宝：星空、爆炸、强透视。

OK，开始吧！

十三、秘宝一：星空

星空的特性就是浩瀚、璀璨，具备无限的延伸性，星空本身的视觉冲击力就是非常强的，所以当我们在设计项目的时候，可以借用星空的元素来增加视觉性和空间性。

一起来看些案例，加深理解：

星空在影视海报中的应用

右边即便是黑白色的星空，也能够给人以深邃的空间感

我们来举个例子，本例子中用到了秘宝中的两宝，星空和强透视。

主题是画册设计中企业历程的页面，如下图，我找到了一张跨海大桥（强透视）的图片作为主图。

原图并不是很美观，而且我们要在图片上面放文字，图片背景过于零散，文案内容的阅读性肯定是减弱的，所以我们要想办法解决这个问题。

鱼提示：是我很多年前的一张案例了，源文件真的找不到了，直接上最终的完稿图，然后我会给大家解析一下作图过程。

最终完成后如下图：

技法操作：天空背景和星空的融合，我使用了 PS 中的蒙版工具、渐变工具、橡皮擦工具。

这张案例的重点在于 3 点：

更换天空背景，我用到了一张云层较厚的图片，替换掉了原来的较亮天空。 融入星空元素，增加延伸感和视觉冲击力。 统一整体色调，由原来的暖色调，调整为目前的暗冷色调，从而突出文字内容。 鱼先生说：

设计中的图片素材，很少有拿来就可以直接完美使用的，像简单的裁切、修图、色调处理等都是比较常见的优化方式，再深入优化就需要设计师根据自己的审美和项目需求进行素材处理。

十四、秘宝二：爆炸

我们都看过影视剧里面震天动地的爆炸场景，特别是在科幻剧里面的大爆炸，冲击波都能够震毁掉一个城市、一个星球。

所以说爆炸带给我们的直观感受就是冲击力非常之强，那么我们在设计画面中就可以思考加入爆炸元素，从而让设计画面的冲击力加强。

一起来看些使用案例：

爆炸元素的使用在影视作品中经常使用，给人震撼、大场面的效果。

十五、秘宝三：强透视 强透视的画面视觉性本身就很高，能给人很强的视觉冲击力。

看些案例，加深理解：

左：铁轨的强透视；右：隧道的强透视

左：运用字体结合环境造成强透视；右：建筑排列形成强透视

左：俯拍人物形成强透视；右：仰拍人物形成强透视

注：本文所有案例均为辅助说明知识点，不作商用，其版权归原作者所用。

写在最后： 有同学总是问我这个效果如何做？那个技巧怎么实现？

对于设计师来讲，软件操作的确需要熟练，但也要明白设计不仅仅是软件，好的设计方法、流程、创意表现，都是需要我们不断掌握学习的。

希望大家在看过鱼先生写的教程后，不要总停留在眼界上，要做到知行合一，在实践中举一反三，才是真正的吸收。

祝好！

OK，下期见！

欢迎关注作者微信公众号：「摆渡鱼生」

今天来分享几个在工作中一定能用到的小工具，非常简单，但是做出来的效果真的很不错！

一、弥散渐变 要说最近一年有哪些比较流行的设计风格，大多数同学一定会想到弥散光，效果好、显高级、应用范围也很广泛。

之前给大家分享过怎么用 AI 做，但最近我找到了一个更简单的方法！

用这个 「 弥散渐变 」插件 可以轻轻松松一键生成好看的弥散光背景。

选择锚点数量后，自由拖动设置锚点位置、颜色、旋转等，就可以快速调整出你喜欢的渐变样式~

甚至，你可以直接使用「随机生成渐变色」功能，偶遇各种精美的配色，连手动调节、选择配色都可以省了。

给大家看几个我用「弥散渐变」插件随机生成的图，配色很和谐，效果也很不错，都可以拿来直接用在作品中。

二、效果生成器 除了弥散渐变可以用插件做，酸性、毛玻璃、故障风这三个同样流行的设计风格，我也找到了能一键生成的方法，就是用这个「效果生成器」插件。

先来看看酸性渐变的效果：

常用的 金属效果、迷幻色彩 全都给你准备好了。

虽然自己做也不是多么复杂的一件事，但是架不住用插件它能一键生成啊，更加省时省力，效果还完全不打折！

毛玻璃效果也可以直接生成，还能自由调节透明度和磨砂强度。

故障风也不在话下：

三、图像滤镜 设计过程中，有时会需要单独处理图片，调整亮度、或者增加一些噪点、模糊、扭曲等效果。

做起来并不复杂，但经常需要打开 PS 或者去其他页面操作，工作流程就被打断了。

但其实，用对插件就能直接解决这个问题，比如我最近找到的这个 「图像滤镜」插件 。

一共 4 大类 20 种效果，绝对能满足一些常见的图片处理需求。

亮度、对比度这些都是基础操作了，用这个插件还可以添加变焦模糊、镜头模糊，旋涡、膨胀等扭曲效果，以及六边形像素、半调网屏等等特殊效果。非常实用！

四、实用图标插件 除了我们常用的 iconfont、IconPark、iconify，最近又找到了 3 个同样很实用的图标插件，分享给大家。

第一个是 「3dicons」 。一套简单好用的 3D 图标，共有 120 多个，但它提供了非常多的样式预设。

可以根据需求选择原色、渐变、单色、双色，还可以设置“动态、平视、等距”三种预设视图样式，丰富性大大提升不说，变换出的 1440+ 图标，也能适应更多场景。

最重要的是，素材及其站点完全开源，可免费商用！

第二个是 「Health Icons」 。面向世界各地的健康项目的一个公共图标库，同样的永远免费可商用的，无须担心任何版权问题。

共有 1166 个图标，涵盖血型、身体部位、医疗机构、医学场所、医疗器械、诊断设备、医学标志符号、药物等十数个大类。

在做医疗或者健康相关主题设计的同学们，一定能用得上！

第三个是 「Phosphor Icons」 。风格统一且实用的一套图标，无论是用在界面、图表、PPT 当中都非常出彩。

不仅样式多变，从简单的线性图标到填充样式的图标都有，还有双色的版本，你甚至可以编辑相应的图标线条粗细、色彩和样式。

目前一共有 6200+ 图标，同样的完全开源，可免费商用。

五、总结 多学习和总结一些设计技法很重要，与此同时，多多寻找一些适合且实用的工具，来帮助你提高工作效率同样重要。

像是今天分享给大家的这些我从 「即时设计-插件广场」 找到的插件，就能在保证高质量的同时，减少很多繁琐的操作，节约设计时间。

类似的效率插件还有很多，就不在这里一一介绍啦，感兴趣的可以同学可以去体验一下~

即时 设计插件 广场： https://js.design/pluginSquare 欢迎关注作者微信公众号：「菜心设计铺」

今天来分享几个在工作中一定能用到的小工具，非常简单，但是做出来的效果真的很不错！

一、弥散渐变 要说最近一年有哪些比较流行的设计风格，大多数同学一定会想到弥散光，效果好、显高级、应用范围也很广泛。

之前给大家分享过怎么用 AI 做，但最近我找到了一个更简单的方法！

用这个 「 弥散渐变 」插件 可以轻轻松松一键生成好看的弥散光背景。

选择锚点数量后，自由拖动设置锚点位置、颜色、旋转等，就可以快速调整出你喜欢的渐变样式~

甚至，你可以直接使用「随机生成渐变色」功能，偶遇各种精美的配色，连手动调节、选择配色都可以省了。

给大家看几个我用「弥散渐变」插件随机生成的图，配色很和谐，效果也很不错，都可以拿来直接用在作品中。

二、效果生成器 除了弥散渐变可以用插件做，酸性、毛玻璃、故障风这三个同样流行的设计风格，我也找到了能一键生成的方法，就是用这个「效果生成器」插件。

先来看看酸性渐变的效果：

常用的 金属效果、迷幻色彩 全都给你准备好了。

虽然自己做也不是多么复杂的一件事，但是架不住用插件它能一键生成啊，更加省时省力，效果还完全不打折！

毛玻璃效果也可以直接生成，还能自由调节透明度和磨砂强度。

故障风也不在话下：

三、图像滤镜 设计过程中，有时会需要单独处理图片，调整亮度、或者增加一些噪点、模糊、扭曲等效果。

做起来并不复杂，但经常需要打开 PS 或者去其他页面操作，工作流程就被打断了。

但其实，用对插件就能直接解决这个问题，比如我最近找到的这个 「图像滤镜」插件 。

一共 4 大类 20 种效果，绝对能满足一些常见的图片处理需求。

亮度、对比度这些都是基础操作了，用这个插件还可以添加变焦模糊、镜头模糊，旋涡、膨胀等扭曲效果，以及六边形像素、半调网屏等等特殊效果。非常实用！

四、实用图标插件 除了我们常用的 iconfont、IconPark、iconify，最近又找到了 3 个同样很实用的图标插件，分享给大家。

第一个是 「3dicons」 。一套简单好用的 3D 图标，共有 120 多个，但它提供了非常多的样式预设。

可以根据需求选择原色、渐变、单色、双色，还可以设置“动态、平视、等距”三种预设视图样式，丰富性大大提升不说，变换出的 1440+ 图标，也能适应更多场景。

最重要的是，素材及其站点完全开源，可免费商用！

第二个是 「Health Icons」 。面向世界各地的健康项目的一个公共图标库，同样的永远免费可商用的，无须担心任何版权问题。

共有 1166 个图标，涵盖血型、身体部位、医疗机构、医学场所、医疗器械、诊断设备、医学标志符号、药物等十数个大类。

在做医疗或者健康相关主题设计的同学们，一定能用得上！

第三个是 「Phosphor Icons」 。风格统一且实用的一套图标，无论是用在界面、图表、PPT 当中都非常出彩。

不仅样式多变，从简单的线性图标到填充样式的图标都有，还有双色的版本，你甚至可以编辑相应的图标线条粗细、色彩和样式。

目前一共有 6200+ 图标，同样的完全开源，可免费商用。

五、总结 多学习和总结一些设计技法很重要，与此同时，多多寻找一些适合且实用的工具，来帮助你提高工作效率同样重要。

像是今天分享给大家的这些我从 「即时设计-插件广场」 找到的插件，就能在保证高质量的同时，减少很多繁琐的操作，节约设计时间。

类似的效率插件还有很多，就不在这里一一介绍啦，感兴趣的可以同学可以去体验一下~

即时 设计插件 广场： https://js.design/pluginSquare 欢迎关注作者微信公众号：「菜心设计铺」