阅读时长约 20 分钟 | 难度★★★★☆ | 篇章第 1 篇 · 项目架构与设计哲学对应源码xuanxiang_ohos_app/designs/30 张设计稿、entry/src/main/ets/pages/前言UI 拆解是前端工程化的核心环节拿到一张设计稿如何高效、可复用、可维护地转化为 ArkUI 组件树直接决定了应用的开发效率与后续迭代成本。玄象项目拥有 30 张完整的 UI 设计稿覆盖启动页、首页、星宿、周易、命理、风水、天文、乐律、地理、取名、AI 助手、个人中心与会员页等全部界面。本篇将以玄象项目为蓝本系统讲解从设计稿到 ArkUI 组件树的方法论。提示本篇方法论适用于任何 ArkUI 项目不仅是玄象。掌握这套拆解流程可让您在面对任何设计稿时都能迅速落地。一、玄象项目 30 张设计稿全景1.1 设计稿清单玄象项目设计稿命名规则为序号_功能模块.png便于按功能检索序号文件名功能模块对应页面源码0101_splash_screen.png启动页SplashPage.ets0202_home_today.png首页-今日天地HomePage.ets0303_28_lunar_mansions.png二十八星宿列表MansionListPage.ets0404_mansion_detail.png星宿详情MansionDetailPage.ets0505_star_territory_map.png星野分野地图StarTerritoryPage.ets0606_twelve_ci.png十二次TwelveCiPage.ets0707_lunar_calendar.png农历主页LunarCalendarPage.ets0808_24_solar_terms.png二十四节气SolarTermsPage.ets0909_moon_phases.png月相MoonPhasesPage.ets1010_heavenly_stems_earthly_branches.png天干地支HeavenlyStemsPage.ets1111_sixty_jiazi.png六十甲子SixtyJiaziPage.ets1212_yijing_home.png周易门户YijingHomePage.ets1313_64_hexagrams.png六十四卦总览HexagramsPage.ets1414_great_wheel.png卦象大轮盘GreatWheelPage.ets1515_cast_divination.png起卦页CastDivinationPage.ets1616_bazi_input.png八字录入BaziInputPage.ets1717_mingli_analysis.png命盘分析MingliAnalysisPage.ets1818_fortune_timeline.png运势时间线FortuneTimelinePage.ets1919_ai_naming.pngAI 取名AiNamingPage.ets2020_naming_result.png取名结果NamingResultPage.ets2121_fengshui_home.png风水门户FengshuiHomePage.ets2222_luopan_compass.png风水罗盘LuopanPage.ets2323_gps_fengshui.pngGPS 风水GpsFengshuiPage.ets2424_ai_photo_fengshui.pngAI 拍照风水AiPhotoFengshuiPage.ets2525_fengshui_report.png风水报告FengshuiReportPage.ets2626_music_twelve_laws.png十二律吕MusicTwelveLawsPage.ets2727_nine_provinces_map.png九州地理NineProvincesPage.ets2828_ai_assistant.pngAI 助手对话AiAssistantPage.ets2929_profile_center.png个人中心ProfilePage.ets3030_membership.png会员权益页MembershipPage.ets1.2 设计稿分类维度玄象项目的设计稿可按三个维度进行分类按功能层级入口页1 张、主页1 张、功能列表页5 张、功能详情页15 张、辅助页8 张。按交互复杂度纯展示页10 张、表单录入页4 张、Canvas 绘制页8 张、传感器交互页3 张、网络交互页5 张。按复用程度基础组件页10 张、业务组件页15 张、独立功能页5 张。提示设计稿分类维度决定了拆解策略的优先级。玄象项目优先拆解基础组件页因为它们复用度最高。二、UI 拆解四步法玄象项目总结出一套行之有效的UI 拆解四步法2.1 第一步视觉扫描拿到设计稿后先进行 30 秒的视觉扫描识别以下要素页面整体布局纵向 Column / 横向 Row / 层叠 Stack顶部 / 底部固定区域中间内容区是否可滚动卡片、列表、网格等重复结构图标、按钮、标签等可复用元素2.2 第二步组件识别对设计稿中的每个视觉元素判断其是否应封装为独立组件判断维度描述示例复用性是否在多个页面出现GoldBorderCard出现在所有卡片场景复杂度内部结构是否复杂FiveElementBadge包含文字 边框 背景色业务性是否承载业务逻辑MansionItem承载星宿数据展示状态性是否有内部状态带展开收起的AccordionItem玄象项目的 5 个公共组件就是基于这套识别规则提炼的common/components/ ├── BottomTabBar.ets # 底部导航栏复用度高 ├── FiveElementBadge.ets # 五行徽章业务性强 ├── GoldBorderCard.ets # 金边卡片复用度高 ├── GoldButton.ets # 金色按钮复用度高 └── GoldTitle.ets # 金色标题复用度高2.3 第三步布局还原识别组件后用 ArkUI 容器组件还原设计稿布局ArkUI 容器适用场景玄象项目示例Column纵向线性布局启动页中心标题列Row横向线性布局首页顶部标题栏Stack层叠布局太极图 五行环绕Grid网格布局九宫格功能入口List列表布局二十八星宿列表Swiper轮播布局节气季节切换Tabs标签页布局星宿详情多视图Scroll滚动容器首页可滚动区2.4 第四步样式与交互布局骨架搭好后填充样式与交互样式填充通过border/shadow/borderRadius/backgroundColor还原设计稿视觉。交互绑定通过onClick/onChange/onScroll绑定事件处理。数据绑定通过State/Prop/Link绑定动态数据。动画接入通过animation/animateTo添加过渡动画。提示四步法并非线性流程而是一个迭代闭环。实际开发中往往需要反复扫描设计稿调整组件拆分粒度。三、案例实战启动页拆解3.1 设计稿分析启动页设计稿01_splash_screen.png包含以下视觉元素深色星空背景占满全屏底部星图装饰占下方 40%中央太极图220×220玄象标题字号 56金色中华传统文化副标题字号 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包含卡片标题今日天地居中中央太极图 五行环绕180×220宜忌标签云绿色宜标签 红色忌标签4.2 组件拆解玄象项目将该卡片拆解为以下组件TodayHeavenCardBuilder ├── Text 今日天地 # 标题 ├── Stack # 太极 五行层叠 │ ├── Canvas taijiContext # 太极图绘制 │ └── ForEach [火,木,山,水,金] │ └── Text 五行徽章 # 五行环绕 └── Row # 宜忌标签云 ├── Row 宜 │ ├── Text 宜 │ └── ForEach yiItems └── Row 忌 ├── Text 忌 └── ForEach jiItems4.3 五行环绕定位算法五行环绕太极的关键是getFiveElementPosition三角函数定位privategetFiveElementPosition(index:number,containerSize:number,itemSize:number):Position{constangle(index*72-90)*Math.PI/180;constradiuscontainerSize/210;constcxcontainerSize/2;constcycontainerSize/2;return{x:cxradius*Math.cos(angle)-itemSize/2,y:cyradius*Math.sin(angle)-itemSize/2};}提示五行按 72 度等分圆周360 / 5 72起始角度 -90 度让第一个元素位于正上方。五、案例实战九宫格功能入口拆解5.1 设计稿分析首页九宫格功能入口02_home_today.png下半区展示 9 个功能模块图标星宿、周易、命理、风水节气、月相、乐律、地理、取名5.2 Grid 组件实现玄象项目使用GridGridItem实现九宫格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 五大公共组件复用统计组件出现页面数复用度评级GoldBorderCard22★★★★★ 极高GoldButton18★★★★★ 极高GoldTitle15★★★★ 高FiveElementBadge8★★★ 中BottomTabBar6★★★ 中6.2 组件封装原则玄象项目的组件封装遵循以下原则单一职责每个组件只做一件事。可配置通过Prop/Link接收外部参数。可组合组件内部可嵌套其他组件或 Builder。样式可定制通过可选参数允许外部覆盖样式。七、设计稿到代码的映射清单7.1 视觉元素 → ArkUI 组件映射设计稿元素对应 ArkUI 组件关键属性文本TextfontSize/fontColor/fontWeight图标Textemoji/字符或ImagefontSize/fontColor按钮Button或Text onClickonClick/backgroundColor卡片Column border shadowborderRadius/border/shadow列表List ListItemLazyForEach性能优化网格Grid GridItemcolumnsTemplate/rowsGap标签云Row ForEachborderRadius/padding太极图等图形CanvasCanvasRenderingContext2D滚动容器ScrollscrollBar(BarState.Off)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 拆解工作流如下设计稿分类按功能层级、交互复杂度、复用程度三维分类。视觉扫描识别布局类型、固定区域、滚动区域、重复结构。组件识别判断复用性、复杂度、业务性、状态性决定封装粒度。布局还原用Column/Row/Stack/Grid等容器还原骨架。样式填充通过border/shadow/borderRadius还原视觉。交互绑定通过onClick/onChange绑定事件。数据绑定通过State/Prop/Link绑定数据。动画接入通过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/
实战：TIMER、UART、WDTIM、GPT外设驱动开发详解)
)
