HarmonyOS 「星办OA」App应用实战37 ： BorderRadius 圆角与形状设计：企业级 UI 的视觉语言
·
BorderRadius 圆角与形状设计：企业级 UI 的视觉语言
引言
在移动端 UI 设计中，圆角（BorderRadius）是一个看似简单但影响深远的视觉元素。它不仅影响组件的美观度，还承载着品牌调性、交互暗示和视觉层次等重要作用。HarmonyOS NEXT 的 ArkUI 框架提供了灵活的 borderRadius 属性，支持统一圆角、局部圆角甚至圆形裁剪等多种形式。
星办 OA 项目在卡片、按钮、头像、标签等各个 UI 元素中广泛使用了圆角设计，形成了统一的视觉语言。本文将深入分析 borderRadius 的圆角机制、设计策略，以及在企业级 UI 设计中的实际应用。
一、BorderRadius 基础
1.1 基本语法
在 ArkUI 中，borderRadius 可以接受多种形式的参数：
// 统一圆角：所有角使用相同半径
.borderRadius(18)
// 局部圆角：分别指定四个角
.borderRadius({
topLeft: 18,
topRight: 18,
bottomLeft: 0,
bottomRight: 0
})1.2 圆角的视觉语言
圆角的大小直接影响视觉感受：
- 小圆角（4-8px）：简洁、专业，适合按钮、标签
- 中圆角（10-16px）：温和、友好，适合卡片、输入框
- 大圆角（18-24px）：柔和、现代，适合主卡片、弹窗
- 全圆角（50%）：圆形，适合头像、状态标识
二、星办 OA 中的圆角体系
2.1 圆角层级设计
星办 OA 项目建立了一套完整的圆角层级体系：
| 圆角值 | 使用场景 | 示例组件 |
| 8-10px | 小型标签、角标 | 审批状态标签、紧急标签 |
| 11-13px | 列表项、内嵌卡片 | 待办项卡片、搜索框 |
| 14-16px | 标准卡片 | 审批卡片、设置项卡片 |
| 18-20px | 主卡片、弹窗 | 统计卡片、员工卡片 |
| 23-26px | 圆形按钮、头像 | 快捷操作按钮、头像 |
2.2 卡片圆角
星办 OA 中的卡片采用了不同的圆角值，形成了层次分明的视觉结构：
18px 圆角（主卡片）
// HomePage.ets - 统计卡片
.buildStatistics() {
Column({ space: 13 }) {
// ...
}
.width('100%')
.padding(16)
.borderRadius(18) // ★ 主卡片圆角
.backgroundColor(Color.White)
}
// HomePage.ets - 快捷发起卡片
.buildQuickStart() {
Column({ space: 14 }) {
// ...
}
.width('100%')
.padding(16)
.borderRadius(18) // ★ 主卡片圆角
.backgroundColor(Color.White)
}18px 是星办 OA 中最常用的卡片圆角值，它营造了一种柔和、现代的视觉氛围。
16px 圆角（标准卡片）
// OfficePage.ets - 审批卡片
buildApprovalCard(item: ApprovalRequest) {
Column({ space: 12 }) {
// ...
}
.width('100%')
.padding(15)
.borderRadius(16) // ★ 标准卡片圆角
.backgroundColor(Color.White)
}
// ApprovalDetailPage.ets - 基础信息卡片
buildBaseInformation() {
Column({ space: 13 }) {
// ...
}
.width('100%')
.padding(16)
.borderRadius(16) // ★ 标准卡片圆角
.backgroundColor(Color.White)
}13px 圆角（内嵌卡片）
// HomePage.ets - 待办项卡片
buildPendingItem(item: ApprovalRequest) {
Column({ space: 10 }) {
// ...
}
.width('100%')
.padding(12)
.borderRadius(13) // ★ 内嵌卡片圆角
.backgroundColor('#F8FAFD')
}2.3 按钮圆角
按钮的圆角设计更加多样化：
12px 圆角（标准按钮）
// ApprovalCreatePage.ets - 提交按钮
Button('提交申请')
.width('100%')
.height(46)
.fontSize(16)
.fontWeight(FontWeight.Medium)
.fontColor(Color.White)
.backgroundColor('#3B6FF5')
.borderRadius(12) // ★ 按钮圆角
// ApprovalDetailPage.ets - 操作按钮
Button('同意')
.layoutWeight(2)
.height(44)
.fontSize(15)
.fontColor(Color.White)
.backgroundColor('#3B6FF5')
.borderRadius(12) // ★ 按钮圆角18px 圆角（次要按钮）
// OfficePage.ets - 发起申请按钮
Button('+ 发起申请')
.height(36)
.padding({ left: 14, right: 14 })
.fontSize(14)
.fontWeight(FontWeight.Medium)
.fontColor(Color.White)
.backgroundColor('#3B6FF5')
.borderRadius(18) // ★ 胶囊形按钮2.4 头像与圆形元素
圆形头像（24px）
// HomePage.ets - 用户头像
Text(this.store.profile.name.substring(0, 1))
.width(48)
.height(48)
.borderRadius(24) // ★ 圆形（宽高的一半）
.backgroundColor('#FFFFFF')
.fontSize(20)
.fontWeight(FontWeight.Bold)
.fontColor('#2459A9')
.textAlign(TextAlign.Center)当 borderRadius 的值等于宽高的一半时，形成圆形。在星办 OA 中，这种设计用于头像、状态标识等。
其他圆形元素
// 统计图标
Text('')
.width(7)
.height(7)
.borderRadius(4) // 小圆点
// 未读消息标识
Circle()
.width(8)
.height(8)
.fill('#3B6FF5') // 使用 Circle 组件绘制圆形三、局部圆角的应用
3.1 局部圆角语法
ArkUI 支持通过对象形式分别设置四个角：
.borderRadius({
topLeft: 18, // 左上角
topRight: 18, // 右上角
bottomLeft: 0, // 左下角
bottomRight: 0 // 右下角
})3.2 局部圆角的使用场景
在星办 OA 中，虽然没有直接使用局部圆角，但局部圆角的设计模式可应用于以下场景：
- 卡片容器中的底部操作栏：顶部圆角、底部直角的"抽屉"效果
- 列表的第一项：顶部圆角、底部直角
- 标签页切换：顶部圆角的内容区域
四、圆角与视觉层次
4.1 圆角与层级关系
在星办 OA 中，圆角的大小与视觉层级成反比：
- 最外层（大圆角 18px）：统计卡片、快捷发起等主卡片
- 中间层（中圆角 16px）：审批卡片、详情卡片等标准卡片
- 内嵌层（小圆角 13px）：待办项、内容项等内嵌元素
4.2 圆角与交互暗示
圆角还承载着交互暗示的作用：
- 可点击元素：按钮、卡片通常使用圆角，暗示可交互
- 不可点击元素：纯文字信息通常使用直角或小圆角
- 可点击的卡片：
HomePage中的待办卡片使用13px圆角，配合onClick事件
五、圆角在不同组件中的应用
5.1 标签与徽章
星办 OA 中的标签大量使用圆角设计：
// 审批类型标签
Text(this.approval.type)
.fontSize(12)
.fontColor('#3B6FF5')
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.borderRadius(10) // ★ 标签圆角
.backgroundColor('#E9EFFF')
// 紧急状态标签
Text('紧急')
.fontSize(10)
.fontColor('#E5484D')
.padding({ left: 6, right: 6, top: 3, bottom: 3 })
.borderRadius(8) // ★ 小标签圆角
.backgroundColor('#FFF0F0')
// 审批状态标签
Text(item.status)
.fontSize(12)
.fontColor(this.getStatusColor(item.status))
.padding({ left: 8, right: 8, top: 4, bottom: 4 })
.borderRadius(10) // ★ 状态标签圆角
.backgroundColor(this.getStatusBackground(item.status))5.2 输入框
// 搜索框
TextInput({ text: this.keyword, placeholder: '搜索标题、申请人或审批单号' })
.height(44)
.padding({ left: 12, right: 12 })
.borderRadius(12) // ★ 输入框圆角
.backgroundColor(Color.White)
// 文本输入框
TextArea({ text: this.comment, placeholder: '填写处理意见（同意时可不填）' })
.width('100%')
.height(88)
.padding(12)
.backgroundColor('#F7F8FA')
.borderRadius(10) // ★ 文本区域圆角5.3 分割线
// 激活指示条
Text('')
.width(20)
.height(3)
.borderRadius(2) // ★ 小圆角指示条
.backgroundColor('#3B6FF5')5.4 头像与标识
// MinePage 中的员工头像
Stack() {
Text(this.store.profile.name.substring(0, 1))
.fontSize(24)
.fontWeight(FontWeight.Bold)
.fontColor(Color.White)
}
.width(56)
.height(56)
.borderRadius(18) // ★ 圆角头像（非全圆）
.backgroundColor('#3B6FF5')
// 快捷操作按钮
Text(badge)
.width(46)
.height(46)
.borderRadius(23) // ★ 全圆按钮
.backgroundColor(this.getTypeBackground(type))六、圆角设计的最佳实践
6.1 圆角大小的一致性
在星办 OA 中，圆角值保持了高度的一致性：
- 18px：主卡片（统计、快捷发起、进行中、公告）
- 16px：标准卡片（审批卡、详情卡片、表单卡片）
- 13px：内嵌卡片（待办项、公告项）
- 12px：按钮、输入框、搜索框
- 10px：标签、徽章
- 8px：小标签、紧急标识
6.2 圆角与品牌调性
圆角设计也是品牌调性的重要组成部分：
- 大圆角（18px）：传达友好、现代的品牌形象
- 中圆角（16px）：平衡专业与友好
- 小圆角（10-12px）：体现专业、严谨
6.3 圆角与背景色
圆角组件在不同背景色下的视觉效果不同：
// 白色背景上的卡片 - 圆角清晰可见
.borderRadius(16)
.backgroundColor(Color.White)
// 彩色背景上的圆角 - 圆角更加突出
.borderRadius(18)
.backgroundColor('#3B6FF5')七、与其他形状属性的配合
7.1 border 与 borderRadius
// 审批类型选择器
Text(type)
.width('30%')
.height(38)
.border({ width: 1, color: this.selectedType === type ? '#3B6FF5' : '#EAECF0' })
.borderRadius(10)7.2 阴影与圆角
圆角与阴影的配合可以增强立体感：
// CustomTabBar 底部阴影
.shadow({ radius: 12, color: '#1218241A', offsetX: 0, offsetY: -4 })八、总结
BorderRadius 圆角设计是星办 OA 项目 UI 系统的重要组成部分。通过建立从 8px 到 24px 的完整圆角层级体系，项目实现了：
- 视觉层次清晰：大圆角（18px）用于主卡片，中圆角（16px）用于标准卡片，小圆角（13px）用于内嵌元素
- 交互暗示明确：可点击元素使用圆角，不可点击元素使用直角或小圆角
- 品牌调性统一：圆角值与品牌色系配合，营造专业、现代、友好的形象
- 设计一致性：相同类型的组件使用相同的圆角值，保持视觉一致性
圆角虽小，却在企业级应用的视觉设计中扮演着不可或缺的角色。星办 OA 的圆角设计实践，为 HarmonyOS 应用 UI 设计提供了有价值的参考。
讨论HarmonyOS开发技术，专注于API与组件、DevEco Studio、测试、元服务和应用上架分发等。
更多推荐
0
0- 0
已为社区贡献57条内容
所有评论(0)