前言

上篇文章我们从图标造型、卡片造型和 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 个模块的瓷片区，布局排版至少有六种排法，所以设计师在设计的时候，要充分发挥想象力
，避免同质化。

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

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

结语

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

黑方块

版权声明：叱咤风云网 ，转载请注明出处：https://www.b9s.cn/html/17b19799785.html