UX设计系列课第四期：HarmonyOS设计指南（二）

这门课解决什么问题：从单端适配走向原生多端设计

很多做界面的人接到 HarmonyOS 项目时，第一反应是拿现有的手机端图纸直接拉伸放大。这种做法在做演示原型时勉强能看，一旦进入真实开发环节，问题会集中爆发：组件在折叠屏展开时错位、卡片在智慧屏上留白失控、不同设备间的焦点切换逻辑断裂。这门课针对的就是这种“把多端当成大屏手机来画”的惯性思维。它不泛泛讨论设计审美，而是聚焦在 HarmonyOS 系统底层的布局规则与组件行为上，帮你理清同一个业务页面在手机、平板、折叠屏乃至车机上应该如何自适应重构。如果你的团队正准备把既有产品迁移到鸿蒙生态，或者你需要向开发交付符合系统规范的标注稿，这期内容能直接对齐前端的实现逻辑，减少来回返工的沟通成本。

适合什么基础，建议先看哪几块

这并不是一份面向零基础新手的启蒙材料。听课前，你需要熟练使用主流矢量绘图工具，清楚栅格系统、状态栏安全区、组件嵌套层级这些常规概念。如果你之前只画过单一尺寸的移动端界面，对响应式断点缺乏实感，刚上手时可能会觉得系统级的布局变量有些抽象。建议你先把课程中关于系统设计变量和栅格适配规则的部分作为重点来听，不要急着去画具体的业务页面。先弄懂系统是如何定义间距堆叠与组件拉伸规则的，再去碰具体的卡片和弹窗结构。这期作为系列课的下半段，默认你已经了解上一期讲过的基础系统架构，如果听到某些专有名词觉得陌生，最好先去补齐前序的概念，而不是硬啃当前的进阶规则。

学完能独立做什么，资料怎么配合练习

完整跟下来后，你应当能独立产出一份符合 HarmonyOS 规范的多端设计稿，并能向开发讲清楚自适应布局的断点逻辑。具体来说，你能根据不同设备的屏幕比例，合理分配组件的拉伸、缩放与隐藏策略，而不是在每个尺寸上重新画一套静态图。练习时，建议把课程资料和官方的开发者文档对照着看。视频里讲到的布局规则，务必在绘图工具里照着实操一遍：建一个画板，手动复刻课程中演示的卡片组件结构，然后改变画板尺寸，观察组件的堆叠与折行表现是否符合系统规范。遇到对不上的地方，再回到视频对应的节点反复看细节。设计规范不是看懂的，是调出来的，只有自己动手把组件在不同尺寸下的极值状态都跑一遍，下次接真实需求时才敢直接落笔。