logo
帮助文档/图层属性/其它属性/圆角与平滑圆角

圆角与平滑圆角

在界面设计中,我们经常会在屏幕、图标、按钮和卡片中看到圆角。Motiff 妙多中的不少按钮和图标也有圆角。

不同于锋利的边缘,人眼更易于跟随圆和曲线、视力也不会受到遮挡。在物理世界中,圆和圆角也相对常见。总的来说,圆和圆角对用户更加柔和、友好、也更安全。

在 Motiff 妙多中有两个与圆角有关的属性:

  • 圆角半径使相邻两边相交的拐角处变圆。
  • 平滑圆角可调整圆角以创建连续的曲线,设置该属性可以创建出圆角更平滑的圆角矩形。

支持为以下图层设置圆角半径和平滑圆角:

  • 容器
  • 矩形、多边形和星形
  • 矢量网络
  • 包含矩形的布尔运算

不能将圆角半径应用在直线、箭头、只有一条边的矢量网络或只有椭圆的布尔运算图层中。

圆角半径

调整整个图层的圆角半径

默认情况下,圆角半径作用于整个图层。可以通过设计面板中修改属性值或画布中调整等方法调整矢量图层或形状的圆角半径。

方向键微调设置也适用于圆角半径的调整。使用 键实现小微调量,按下 Shift + / 键实现大微调量。

设计面板

  1. 1.在画布或图层面板中选中目标图层。
  2. 2.打开右边栏中的设计面板。
  3. 3.'16_panel_corners (1).svg' 的字段中输入数值。
  4. 4.或者将光标悬浮至 '16_panel_corners.svg' 上,向左拖动减少数值,向右拖动增加数值。'设计面板.png'

画布

对于矩形、星形和多边形图层,你可以直接在画布中调整圆角半径,但这对容器不适用。你可以通过以下步骤在画布中调整圆角半径:

  1. 1.选中要调整的图层。
  2. 2.将光标悬浮至要调整的角上,直至出现半径控制手柄。
  3. 3.拖动手柄以调整半径值。

'调整.png'

调整独立圆角

默认情况下,Motiff 妙多会将圆角半径应用在整个形状上,而在设计过程中,可能经常会需要为某几个角设置不同的圆角半径数值,此时可以使用独立圆角。独立圆角的设置允许你调整每个方向上的圆角半径值,可以通过以下方式实现。

不支持在实例中调整单个角的圆角半径。在组件的圆角半径设置时需要注意。

设计面板

  1. 1.选中要设置圆角半径的形状。
  2. 2.打开右边栏中的设计面板。
  3. 3.在 Motiff 妙多中仅矩形、容器、组件模板、组件集和实例支持调整独立圆角。点击 '16_panel_corners.svg' 以调整每个方向上的圆角。点击该图标后圆角半径下方将出现四个字段,顺时针显示分别为:左上角、右上角、右下角和左下角。
  4. 4.在对应字段中输入数值。可以通过按下 Tab 键实现在各个字段之间的移动切换。
  5. 5.在对应字段区域通过拖动来增加或减少数值。将光标放在字段的输入区域内并按住修饰键 ⌥ Option / Alt ,向左拖动减少数值,向右拖动增加数值。

'设计面板调整独立圆角.png'

画布

对于矩形、星形和多边形图层,你可以直接在画布中调整圆角半径,但对容器不适用。具体步骤如下:

  1. 1.选中要调整的图层。
  2. 2.按下修饰键 ⌥ Option / Alt 可以只调整某个方向上的圆角值。
  3. 3.将光标悬停在要调整的角上,直至出现半径控制手柄。
  4. 4.拖动手柄以调整半径。

'画布调整独立圆角.png'

矢量编辑模式

  1. 1.选中要调整的图层。
  2. 2.点击工具栏中的 '24_toolbar_edit vector.svg' 编辑图层,或者按下 ReturnEnter 进入到矢量编辑模式。
  3. 3.选中画布中的单个点。
  4. 4.在右边栏的设计面板中 '16_panel_corners (1).svg' 字段调整圆角半径。
  5. 5.在字段中输入数值。
  6. 6.你也可以在对应字段区域通过拖动来增加或减少数值。将光标悬浮至 '16_panel_corners (1).svg' 上,向左拖动减少数值,向右拖动增加数值。

在矢量编辑模式下只支持调整圆角半径,但不能设置平滑圆角。

平滑圆角

从 iOS7 的应用程序图标开始圆角有所不同。这种平滑圆角创建了常规圆角无法实现的无缝连续曲线。 '平滑圆角.png'

调整平滑圆角

你可以将平滑圆角应用于任意支持设置圆角半径的形状。和圆角半径不同的,你只能对整个形状应用平滑圆角。

  1. 1.在画布或图层面板中选中目标图层。
  2. 2.在右边栏的设计面板中点击 '16_panel_corners.svg' 展开四个方向的独立圆角字段 。
  3. 3.点击 '16_panel_more.svg' 打开平滑圆角设置。
  4. 4.向右拖动滑块可增大,向左拖动滑块可减小滑块。点击 iOS 将「角平滑」设置为 60% ,这是 iOS 的默认设置。

'调整平滑圆角.png'