课程定位

同一业务页面在手机上需要尽快完成操作，在平板上可能要并排看清单和详情。直接把布局放大或缩小，可能使重要内容被挤到下面，也可能让输入和确认动作离得太远。课程围绕组件化与多端适配，用虚构页面练习核对各屏的任务顺序及操作条件。

课程内容与学习重点

找出不同设备都应保留的核心任务

选择商品清单、课程详情或资料审批等模拟页面，列出用户要查看、比较和确认的主要内容。区分关键动作、辅助说明及后续查看的资料，给信息和交互排序。比较竖屏、横屏及较宽容器时，同一业务是否需要改变呈现顺序，避免依靠固定位置猜测用户注意力。

用组件边界处理长内容和特殊状态

观察标题换行、连续标签、图片变化和空数据对布局的影响。将组件内部变化与页面区域变化分开，核对按钮、输入、错误说明是否仍容易找到。用长文本、大字号和内容不足等样本复查，记录不同设备中各组件是否有一致的名称和操作含义。

用同一任务跨屏复测并记录差异

为不同视口安排同一组任务，分别观察浏览、填写、确认和返回。记录需要横向移动、信息被截断和操作反馈看不到等问题。修改后复查移动与桌面同时使用的组件，说明变更影响哪些状态。整理截图、尺寸、内容版本和复测路径，便于设计、开发和测试共享。例如审批页面在宽屏并排展示事项与附件，手机则按查看事项、展开资料、填写意见和确认排序。可以用较长标题、两份以上附件和错误提示复查操作是否仍顺畅。对于可折叠的辅助内容，应明确使用者能否找到入口，折叠后是否丢失当前任务状态。课堂可以让另一位学员在不同设备上完成相同操作，记录第一次停顿的位置，再用复测判断变化来自布局顺序还是按钮提示。留档时标明页面尺寸、文本长度和输入条件，而不是只保存正常状态。若某端缺少一种交互方式，另记可完成相同任务的操作路线。

适合人群

适合界面设计、移动与前端开发、产品和体验测试人员。可带同一页面的两种视口截图或虚构布局，挑一个不同屏幕都需要完成的任务。

开课与报名咨询

单专题开课时间、授课城市、学习时长、费用及参加方式详询。可说明目标设备、已有组件和目前最常见的排版问题。

多端适配是否意味着每个屏幕完全一样？应保留任务含义和操作一致性。不同设备可以按使用空间与操作方式调整布局。

先测试宽度还是功能？可从典型任务开始，再用多种宽度、长内容和状态复查是否仍能完成。

温馨提示：课程内容为拟定，具体实际讲授内容由授课老师根据学员情况灵活调整，最终以课堂授课为准。