企业官网建设流程全解析

阅读时长：约 20 分钟 | 难度：★★★★☆ | 篇章：第 1 篇 · 项目架构与设计哲学
对应源码：xuanxiang_ohos_app/designs/（30 张设计稿）、entry/src/main/ets/pages/

前言

UI 拆解是前端工程化的核心环节：拿到一张设计稿，如何高效、可复用、可维护地转化为 ArkUI 组件树，直接决定了应用的开发效率与后续迭代成本。玄象项目拥有 30 张完整的 UI 设计稿，覆盖启动页、首页、星宿、周易、命理、风水、天文、乐律、地理、取名、AI 助手、个人中心与会员页等全部界面。本篇将以玄象项目为蓝本，系统讲解从设计稿到 ArkUI 组件树的方法论。

提示：本篇方法论适用于任何 ArkUI 项目，不仅是玄象。掌握这套拆解流程，可让您在面对任何设计稿时都能迅速落地。

一、玄象项目 30 张设计稿全景

1.1 设计稿清单

玄象项目设计稿命名规则为序号_功能模块.png，便于按功能检索：

1.2 设计稿分类维度

玄象项目的设计稿可按三个维度进行分类：

1. 按功能层级：入口页（1 张）、主页（1 张）、功能列表页（5 张）、功能详情页（15 张）、辅助页（8 张）。
2. 按交互复杂度：纯展示页（10 张）、表单录入页（4 张）、Canvas 绘制页（8 张）、传感器交互页（3 张）、网络交互页（5 张）。
3. 按复用程度：基础组件页（10 张）、业务组件页（15 张）、独立功能页（5 张）。

提示：设计稿分类维度决定了拆解策略的优先级。玄象项目优先拆解基础组件页，因为它们复用度最高。

二、UI 拆解四步法

玄象项目总结出一套行之有效的UI 拆解四步法：

2.1 第一步：视觉扫描

拿到设计稿后，先进行 30 秒的视觉扫描，识别以下要素：

• 页面整体布局（纵向 Column / 横向 Row / 层叠 Stack）
• 顶部 / 底部固定区域
• 中间内容区是否可滚动
• 卡片、列表、网格等重复结构
• 图标、按钮、标签等可复用元素

2.2 第二步：组件识别

对设计稿中的每个视觉元素，判断其是否应封装为独立组件：

玄象项目的 5 个公共组件就是基于这套识别规则提炼的：

common/components/ ├── BottomTabBar.ets # 底部导航栏（复用度高） ├── FiveElementBadge.ets # 五行徽章（业务性强） ├── GoldBorderCard.ets # 金边卡片（复用度高） ├── GoldButton.ets # 金色按钮（复用度高） └── GoldTitle.ets # 金色标题（复用度高）

2.3 第三步：布局还原

识别组件后，用 ArkUI 容器组件还原设计稿布局：

2.4 第四步：样式与交互

布局骨架搭好后，填充样式与交互：

1. 样式填充：通过border/shadow/borderRadius/backgroundColor还原设计稿视觉。
2. 交互绑定：通过onClick/onChange/onScroll绑定事件处理。
3. 数据绑定：通过@State/@Prop/@Link绑定动态数据。
4. 动画接入：通过animation/animateTo添加过渡动画。

提示：四步法并非线性流程，而是一个迭代闭环。实际开发中往往需要反复扫描设计稿，调整组件拆分粒度。

三、案例实战：启动页拆解

3.1 设计稿分析

启动页设计稿（01_splash_screen.png）包含以下视觉元素：

1. 深色星空背景（占满全屏）
2. 底部星图装饰（占下方 40%）
3. 中央太极图（220×220）
4. "玄象"标题（字号 56，金色）
5. "中华传统文化"副标题（字号 20，浅金）

3.2 布局还原

玄象项目启动页布局还原如下：

build(){Stack(){// 1. 星空背景（最底层）Canvas(this.starFieldContext).width('100%').height('100%').onReady(()=>{this.drawStarField(this.starFieldContext,this.starFieldContext.width,this.starFieldContext.height);})// 2. 底部星图装饰（中间层，对齐底部）Canvas(this.starMapContext).width('100%').height('40%').align(Alignment.Bottom).onReady(()=>{this.drawStarMap(this.starMapContext,this.starMapContext.width,this.starMapContext.height);})// 3. 中央内容（最上层，纵向居中）Column({space:20}){Canvas(this.taijiContext).width(220).height(220).margin({top:100}).onReady(()=>{this.drawTaiji(this.taijiContext,this.taijiContext.width,this.taijiContext.height);})Column({space:12}){Text('玄象').fontSize(56).fontWeight(FontWeight.Bold).fontColor(Colors.PRIMARY_GOLD).letterSpacing(8)Text('中华传统文化').fontSize(20).fontColor(Colors.LIGHT_GOLD).letterSpacing(4)}}.width('100%').height('100%').opacity(this.fadeOpacity).scale({x:this.logoScale,y:this.logoScale}).animation({duration:1000,curve:Curve.EaseOut})}.width('100%').height('100%').backgroundColor(Colors.BG_DARK)}

3.3 拆解要点

启动页拆解体现以下原则：

• Stack层叠：星空、星图、中央内容三层叠加，符合设计稿视觉层级。
• Canvas复用：三个 Canvas 上下文独立管理，避免绘制状态污染。
• @State动画：fadeOpacity与logoScale驱动淡入 + 缩放动画。
• backgroundColor预设：在Stack层级预设深色背景，避免首帧白屏。

四、案例实战：首页"今日天地"卡片拆解

4.1 设计稿分析

首页"今日天地"卡片（02_home_today.png）包含：

1. 卡片标题"今日天地"（居中）
2. 中央太极图 + 五行环绕（180×220）
3. 宜忌标签云（绿色宜标签 + 红色忌标签）

4.2 组件拆解

玄象项目将该卡片拆解为以下组件：

TodayHeavenCard（Builder） ├── Text "今日天地" # 标题 ├── Stack # 太极 + 五行层叠 │ ├── Canvas taijiContext # 太极图绘制 │ └── ForEach ['火','木','山','水','金'] │ └── Text 五行徽章 # 五行环绕 └── Row # 宜忌标签云 ├── Row 宜 │ ├── Text "宜" │ └── ForEach yiItems └── Row 忌 ├── Text "忌" └── ForEach jiItems

4.3 五行环绕定位算法

五行环绕太极的关键是getFiveElementPosition三角函数定位：

privategetFiveElementPosition(index:number,containerSize:number,itemSize:number):Position{constangle=(index*72-90)*Math.PI/180;constradius=containerSize/2+10;constcx=containerSize/2;constcy=containerSize/2;return{x:cx+radius*Math.cos(angle)-itemSize/2,y:cy+radius*Math.sin(angle)-itemSize/2};}

提示：五行按 72 度等分圆周（360 / 5 = 72），起始角度 -90 度让第一个元素位于正上方。

五、案例实战：九宫格功能入口拆解

5.1 设计稿分析

首页九宫格功能入口（02_home_today.png下半区）展示 9 个功能模块图标：

• 星宿、周易、命理、风水
• 节气、月相、乐律、地理、取名

5.2 Grid 组件实现

玄象项目使用Grid+GridItem实现九宫格：

@BuilderFeatureGrid(){Grid(){ForEach(this.features,(item:FeatureItem)=>{GridItem(){Column({space:8}){Text(item.icon).fontSize(28).fontColor(Colors.PRIMARY_GOLD)Text(item.name).fontSize(16).fontColor(Colors.PRIMARY_GOLD)}.width('100%').height(80).justifyContent(FlexAlign.Center).backgroundColor(Colors.BG_CARD).border({width:1,color:Colors.BG_CARD_BORDER,radius:12}).borderRadius(12).onClick(()=>{router.pushUrl({url:item.page});})}},(item:FeatureItem)=>item.name)}.columnsTemplate('1fr 1fr 1fr').rowsGap(12).columnsGap(12).width('100%').height(280)}

5.3 数据驱动渲染

九宫格采用数据驱动渲染模式，所有功能项定义在features数组中：

privatefeatures:FeatureItem[]=[{name:'星宿',icon:'',page:'pages/mansion/MansionListPage'},{name:'周易',icon:'☰',page:'pages/yijing/YijingHomePage'},{name:'命理',icon:'◈',page:'pages/mingli/BaziInputPage'},{name:'风水',icon:'◎',page:'pages/fengshui/FengshuiHomePage'},{name:'节气',icon:'节',page:'pages/astronomy/SolarTermsPage'},{name:'月相',icon:'☽',page:'pages/astronomy/MoonPhasesPage'},{name:'乐律',icon:'',page:'pages/music/MusicTwelveLawsPage'},{name:'地理',icon:'⊕',page:'pages/geography/NineProvincesPage'},{name:'取名',icon:'名',page:'pages/naming/AiNamingPage'}];

提示：数据驱动渲染让功能入口可配置化，新增/调整功能只需修改features数组，无需改动build方法。

六、组件复用度评估

6.1 五大公共组件复用统计

6.2 组件封装原则

玄象项目的组件封装遵循以下原则：

1. 单一职责：每个组件只做一件事。
2. 可配置：通过@Prop/@Link接收外部参数。
3. 可组合：组件内部可嵌套其他组件或 Builder。
4. 样式可定制：通过可选参数允许外部覆盖样式。

七、设计稿到代码的映射清单

7.1 视觉元素 → ArkUI 组件映射

7.2 颜色规范 → Colors.ets 映射

设计稿中的所有颜色都映射到Colors.ets常量：

exportclassColors{staticreadonlyPRIMARY_GOLD:string='#D4A843';// 主金色staticreadonlyLIGHT_GOLD:string='#F0D078';// 浅金色staticreadonlyDARK_GOLD:string='#A07830';// 深金色staticreadonlyBG_DARK:string='#0A0E17';// 主背景staticreadonlyBG_CARD:string='#1A1F2E';// 卡片背景// ...}

提示：颜色常量化的好处是主题色调整时只需改一处。玄象项目若要推出"青色主题"，只需新增ColorsQing.ets并替换引用。

八、玄象 UI 拆解工作流总结

8.1 标准化流程

玄象项目总结的 UI 拆解工作流如下：

1. 设计稿分类：按功能层级、交互复杂度、复用程度三维分类。
2. 视觉扫描：识别布局类型、固定区域、滚动区域、重复结构。
3. 组件识别：判断复用性、复杂度、业务性、状态性，决定封装粒度。
4. 布局还原：用Column/Row/Stack/Grid等容器还原骨架。
5. 样式填充：通过border/shadow/borderRadius还原视觉。
6. 交互绑定：通过onClick/onChange绑定事件。
7. 数据绑定：通过@State/@Prop/@Link绑定数据。
8. 动画接入：通过animation/animateTo添加过渡。

8.2 量化指标

玄象项目通过以下量化指标评估 UI 拆解质量：

• 组件复用率：被 ≥3 个页面引用的组件占比 ≥ 40%。
• 代码重复率：相似代码块占比 ≤ 15%。
• 设计稿还原度：像素级差异 ≤ 5%。
• 页面平均行数：单页面.ets行数控制在 300-500 行。

总结

本篇以玄象项目 30 张设计稿为蓝本，系统讲解了从设计稿到 ArkUI 组件树的方法论：视觉扫描 → 组件识别 → 布局还原 → 样式与交互。这套四步法适用于任何 ArkUI 项目，掌握后可显著提升开发效率与代码可维护性。

下一篇：《03 · AppScope 全局资源体系：string.json / layered_image / 主题色策略》，将带您深入 HarmonyOS 应用的全局资源管理体系。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

• HarmonyOS 官方文档：ArkUI 布局开发
• HarmonyOS 官方文档：Canvas 组件
• HarmonyOS 官方文档：Grid 组件
• 开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net
• 玄象项目设计稿：articles/images/designs/