新手科普！影响视觉设计好坏的六要素：造型篇（上）

前言

对于视觉设计师来说，页面设计的质量主要取决于构图、元素造型、配色、文字设计、纹理和页面的魅力六个要素。

本文将通过上下两部分进行讲解。上一篇主要从图标造型、卡片造型和 banner 从建模分析开始，下一篇将从按钮建模开始，TAB 对造型、轮播点造型、标签造型等进行分析。

下篇：

那什么是造型呢？

一、造型的定义

造型元素是指构成形状的基本视觉元素。它包括三个部分：形状、纹理和颜色。「百度百科来源」

基于视觉设计，本文将造型定义为图标造型、卡片造型等页面元素的形式banner 造型，按钮造型，TAB 造型、轮播点造型、标签造型等，也是整个页面的基本组成部分。(本文将纹理和颜色与形状并列，以便于解释 UI 视觉设计）

二、元素造型分析

1. 图标造型

说到图标造型，首先要了解图标设计风格，根据类型可以分为五类：1 拟物化风格，2 扁平化风格，3 轻拟物化风格，4 新的拟态风格，5 玻璃拟态风格，这里就不细说了。

从各类图标造型分析来看，图标造型必须遵循以下原则：

①统一性

无论是交互设计还是设计的统一 Ui 视觉设计是一个极其重要的设计原则。它可以保证多元素组件构图后的整体协调和统一，避免用户的混乱，提高工作效率。在这里，为了实现图标造型设计的统一，我们必须遵循统一的风格、尺寸和形状（圆角、线宽、角度等）、层次统一等(目前颜色不在造型中，后面会从整体设计风格进行分析)如下图所示:

建议您使用标准化的关键线作图，以确保不同形状图标尺寸的统一，如下图所示：

②准确的语意/可识别性

一个好的图标必须清晰地传达它的语义，让用户一眼就能识别出它想要表达的意义。图标应尽可能简化，以便清晰地表达其意义，增强识别能力，避免用户无法理解图标、看起来费力或对图标和文本存在差异，增加使用成本。

③均衡性

均衡是指不同元素组合的均衡分布，使设计对象整体看起来更加和谐舒适。

平衡也是构图的三个设计原则之一，图标设计也需要满足平衡。在这里，你可以把图标作为一个小组成部分，图标中的画和装饰元素可以作为一个更小的单元来设计。

这里需要特别注意 物理中心 和 视觉中心，物理中心和视觉中心是什么？

物理中心

物理中心一般是指物体的重力中心或几何中心，但在设计软件中，我们选择了图形外的矩形框。此时，默认的中心点是矩形的中心点，而不是图形的中心点。

视觉中心

“视觉中心”一词通常出现在视觉艺术领域，有两种不同的理解。

a.它指的是平面艺术(如绘画)中的主体，如达芬奇的《最后的晚餐》中的主体耶稣。这里的视觉中心意味着图片的主要元素，如构图、颜色和其他图片元素；

b.指人的视野在平面中的中心点。通常，人的视觉中心高于物理中心。「百度百科来源」

物理中心对齐并不意味着视觉中心对齐 ，特别是一些不规则图形，如下图所示：

④相关性/品牌性

一个好的图标设计应该与它的品牌相关联，将品牌的核心元素融入到图标设计中，不仅可以使图标闪耀，还可以提高产品的识别度，宣传公司的形象。

⑤创新

创新是反映设计师价值的重要因素。设计的图标不仅要符合图标设计原则，还要避免同质化。此外，人类喜欢新事物，讨厌旧事物。同质化的图标不能让人耳目一新。只有创新才能照亮图标，达到引人注目的效果。

2. 卡片造型

卡片是指一个独立的设计模块，通常使用矩形视觉元素，类似于一张小卡片，它携带特定的信息或功能，当然，一些卡片会使用不规则的设计来追求特定的目的。

常见的卡片形状有以下几种:

①全屏卡片

整个屏幕是一张大卡片，卡片中的元素是通过附近的原则设计的。与许多卡片相比，全屏卡片的设计将更加简单和大气。太多的卡片分割将使整个页面变得复杂。记住一个原则：页面分割越多，页面就越复杂。当你设计页面风格时，你可以从整个屏幕上的大卡片和多个矩形卡片的组合来设计。

②矩形卡片

Ui 界面中常用的设计元素是通过矩形卡来区分不同的功能模块。这种卡片设计会使层次更清晰，但我们应该避免在同一页面上有太多的卡片，这需要适度。

③不规则卡片

不规则的卡片可以是不规则的形状，如圆形、椭圆形、扇形等。设计师在设计卡片时经常使用矩形卡片，而不规则的卡片会让人耳目一新。特别是在排版方面，不同规则的卡片形状可以达到创新的效果。

④装饰性卡片

这种卡片通常用于宣传页面、广告细节页面和特色活动推荐。它们通过卡片独特的形状和配色来衬托主题，具有很强的视觉冲击力。

卡片设计原则：

a. 明确目的

设计的功能模块是用来区分功能模块还是起到修饰作用的，即明确卡片使用场景与功能要求的匹配。

b. 易读性

卡片必须简单明了。它承载着信息的背景元素。我们不能在设计上占据主导地位。过度装饰会削弱内容的承载能力。我们应该掌握这个程度。同时，我们应该注意简洁、清晰的表达形式和分层布局，以便用户能够快速理解和处理。

c. 一致性

卡片在整体设计上应保持一致性，不同类型的卡片之间应有明显的差异，但同一类型的卡片应具有统一的风格和呈现效果，以促进品牌识别和信任。

d. 响应式设计

原则上，卡片应适应不同尺寸的屏幕设备，通过调整字体尺寸和间距，实现响应设计，使用户获得一致的视觉体验。

3. Banner 造型

Banner 横幅广告（Banner Ad.）它是网络广告的第一种形式，也是最常见的形式。横幅广告，又称旗帜广告，是横跨网页的矩形公告牌。当用户点击这些横幅时，他们通常可以链接到广告商的网页。「百度百科来源」

①矩形 banner

最常见的一种，通常是矩形的。这里有两种卡片矩形造型和沉浸式矩形造型。卡片 banner 与沉浸式相比 banner 两种不同的形状会给用户带来不同的视觉感受，比例和层次会更弱。

②垂直 banner

垂直 banner 通常比横幅 banner 更窄，长度更长。某宝，某东主页瀑布流就是这样。

③不规则 banner

它的形状是异形的，主要用于电子商务，起到衬托活动的作用。

④横幅 banner

也叫横幅广告，通常比矩形好 banner 更长，可以横跨整个网页。

⑤弹出式 banner

弹出式 banner 指用户点击或浏览网页时自动弹出显示的广告。它的形状可以根据主题自由发挥，但要注意构件规范的建立。

以上是几种常见的 banner 造型，但随着设计的进步，可能会出现新的 banner 样式。

选择 banner 造型，要根据实际情况、比例等级灵活运用，不同地方 banner 重点不同，用户的视觉体验也不同，也与广告效果的操作有关，我们灵活使用。

结语

以上是图标造型、卡片造型和 banner 造型分析了“影响视觉质量的六要素造型文章（上）”，希望能帮助您设计这三个模块，下一篇文章将继续从按钮造型，TAB 造型、轮播点造型、标签造型等方面对造型篇进行分析，如有其他见解，请在评论区留言！

欢迎关注团队微信微信官方账号：兆日 UCD