前言

上篇文章我们从图标造型、卡片造型和 banner 造型三大模块对设计中造型进行了剖析，影响本篇文章接上篇文章从按钮造型、视觉设计瓷片区和导航继续对造型进行剖析。好坏

一、造型造型的篇下定义

造型要素指构成形体的基本知觉元素。包括形态、新手肌理 、科普色彩三个部分。影响「来源百度百科」

本文基于视觉设计
，视觉设计将造型定义为页面里组成元素的好坏形态，像图标造型、造型卡片造型 、篇下banner 造型
、新手按钮造型 、TAB 造型和瓷片区造型等，这也是构成整个页面里的基本组成元素
。（本篇文章将质感和颜色单独列出与造型并列 ，是为了方便讲解 UI 视觉设计）

二、元素造型刨析

1. 按钮造型

在 UI 设计中，按钮（Button）是一种常见的界面元素
，用于触发特定操作或执行特定功能。用户可以通过点击按钮与应用程序进行交互
。

①按照熟知的按钮功能类型分：

1）CTA 按钮：CTA，即“Call to Action”的缩写，意思是行为召唤 。用来执行特定的操作 ，例如“预定”、“加入购物车”、“联系我们”等等这类有行为召唤的交互 。

2）悬浮按钮：用于在页面上悬浮显示的按钮，通常用于提供额外的功能或操作 。

3）标签按钮 ：用于在页面上显示标签的按钮，例如用于分类或导航。

4）命令按钮：用于执行特定操作的按钮，例如保存、编辑、删除等。

5）开关按钮：用于控制开关状态的按钮，例如开关灯 、开关声音等。

6）表格按钮：用于在表格中添加交互功能的按钮，例如用于排序、筛选或操作数据。

7）选择按钮：我们常用的复选框 ，单选就是，或者一个大的选框
。

②按钮从视觉上可以分为五大类 ：

1）文字按钮 ：纯文字按钮，网页首页大多为了追求简洁而采用加黑加粗的文字按钮 。APP 纯文字按钮主要是为了弱化视觉层级 。

2）面型按钮：填充一个形状
，形状可以是正方形，圆形 ，带圆角的或者其它造型，视觉层级强 。有些按钮为了追求独特性，例如“登录” ，会采用渐变、弥散投影等设计手法 。

3）线性按钮：也称作描边按钮或者镂空按钮，比较单一，视觉层级相对于面型按钮弱一级 。

4）图标按钮：图标按钮以特定视觉图形来表达命令属性，提升界面整洁度，很多导航栏都会使用到它。因为图标按钮体积较小，布局灵活，且图标形式给了设计师更多表现空间，所以它是 Ui 设计中很容易出彩的地方。但需要注意的是，由于没有文字元素，图标按钮容易出现用户理解上的偏差 ，因此设计师在设计时需要做用户测试 ，以确定图标是否符合用户视觉预期。

5）图标+文字按钮 ：图标+文字相较于图标按钮会更清晰，在金刚区、功能列表等经常会用到。我们在设计常用功能图标时，应尽量选择图标+文字
，避免用户看不懂图标语义 ，而增加使用成本
。

6）修饰性按钮 ：这类按钮需要很强的视觉，通常用在运营插画上 ，限制比较小 ，UI 设计师可以根据主题率性发挥。

（注意 ：为了区分面型按钮  ，这里刻意将其独立出来
，前面的面型按钮更多的是扁平化风格 ，这里的修饰性按钮则可以是轻拟物 、玻璃拟态 、拟物风、3D 风格等等 ，目的是为了在烘托视觉氛围，吸引用户点击。）

面型按钮
、线性按钮和文字按钮，这三种我们经常会在同一卡片里同时用到，对于三者使用我们需要根据交互权重层级来选择，如下图：

③按钮设计应遵循以下设计原则 
：

1）一致性

“一致性是最强大的可用性原则之一：当事物始终表现相同时 ，用户不必担心会发生什么。” —雅各布·尼尔森（Jakob Nielsen）

一致性提高了速度和准确性 ，有助于避免错误 。我们需要保障普通按钮在颜色、圆角 、文字 、间距、大小等保持一致。

2）无障碍设计

按钮的大小和位置应该使其容易点击，目标区域大小是影响可访问性的因素之一 ，其他是字体大小 ，颜色和对比度  。

3）可用性（Usability）

按钮应该易于辨识和使用 ，文字内容应该简洁明了
，能够清晰明确地传达按钮功能。按钮的位置和布局也应该符合用户直觉和使用习惯。

4）视觉美观

按钮的设计应该与整体的页面风格和品牌形象相协调，并能够提供良好的用户体验 。

5）响应式设计

按钮应该能够适应不同屏幕尺寸和设备类型，以确保在不同设备上的用户体验。

6）创新

人总是喜新厌旧的
，创新不但可以避免“同质化”，而且还能达到吸睛效果，这是体现设计师价值所在。

2. 瓷片区

瓷片区是以图片加文字方式呈现的运营位 ，视觉外观看上去就像一块块瓷片贴在版面上，故名“瓷片区”。像淘宝、京东、美团等 APP 都有用到 
。目前 ，在资讯 、理财等页面也会经常看到 ，起到导流作用。

从设计的角度来看 ，瓷片区是一种非常灵活的元素，可以根据不同运营需求和产品特点进行定制。从而提高产品用户黏性和转化率 。

①按设计风格 ：

1）实物类

这种风格通常使用真实商品或服务图片 ，直观地展示产品或服务特点，吸引用户注意力。我们常见的电商、外卖、旅游等产品类型 ，可以突出产品的真实感和可信度，喜迎用户点击了解的欲望。

2）插画类

这种风格的瓷片区通常使用插画图形，以展示特定的主题或传达某种情感。它不仅起到引流作用，而且极大地丰富了页面，让整个页面更加美观。多适用于金融 、教育等产品类型。

②按颜色类型
：

1）低饱和度

背景采用低饱和度颜色设计，颜色更柔和耐看 ，弱化整个瓷片区层级，常见于 B 端设计。

2）高饱和度

背景采用高饱和度设计，强化视觉，吸引用户注意，提高整个瓷片区层级 。

3）简约类

这类风格背景大多采用白色或者浅灰色 ，外加简单的插画元素，减少视觉干扰，让整体显得简约 、干净上档次。

③设计要点 ：

1）标题（主标题、副标题和按钮）

好的文案起到吸睛的效果 。UI 设计师则要注意文案的排版技巧，要特别注意主标题和副标题的对比与层级 。（注意：运营提供文案时最好主 、副标题一起提供 ，同时注意字段不易过长 ，言简意赅）

按钮可有可无
，按钮的样式可以丰富整个卡片 ，但也会让狭小的卡片略显拥挤，要学会取舍。

2）主元素

主元素是瓷片区灵活所在，人的第一眼首先会被主元素吸引 ，因此设计主元素的时候一定要注意它的准确度 、美观度 、清晰度、舒适度和设计感。

3）背景和辅助元素

背景起到定位整张页面视觉风格的作用，我们在设计页面时 ，要特别考虑是采用高饱和度还是低饱和度 ，或者简约白底；不同的背景色调给人整体感觉是不一样的，要结合整体设计风格和行业背景去定义。

辅助元素对瓷片区起到修饰作用，我们可以用简单的几何图形 、律动的线条等等进行修饰 ，让主元素和背景层更加融合，提升美感。

4）布局排版

布局排版根据瓷片区个数 ，灵活排版，某一个板块需要强调，可以通过放大面积进行设计，这样要比中规中矩等分的瓷片区排版更加灵活，让页面充满律动感 。如下图，4 个模块的瓷片区 ，布局排版至少有六种排法，所以设计师在设计的时候
，要充分发挥想象力，避免同质化 。

以下是结合四要素找的素材对比
：

后续会根据本文介绍
，会专门出一期瓷片区不同风格对比设计方法
，敬请期待 ！

结语

以上是从按钮造型和瓷片区造型对“影响视觉设计好坏的六要素（构、形、色
、文、质 、韵）之造型篇（下）”作了剖析
，希望对大家在设计这两大模块的时候有所帮助 ，如有其它见解欢迎在下方留言
，互相探讨 。

黑方块