企业官网建设流程全解析

1. 赛项模块A到底在考什么

1.1 比赛场景与任务形式

ZZ039移动应用与开发赛项模块A，简单说就是给你一张模拟需求清单，在规定时间内用Adobe XD完成一套完整的移动端界面原型图。这套题之所以值得单独拆开讲，是因为它不像做开发模块那样有明确的“代码跑通”标准，界面设计的主观性很强，导致很多选手练了很久却始终摸不清评分老师的关注点。

以“参考答案（九）”为例，这已经是系列模拟题里的第九套了，题目内容不是让你自由发挥，而是给定一个业务场景，比如某类校园服务应用或者社区生活应用，要求你在有限时间内完成若干核心页面的原型设计。这里面的关键约束有三个：一是时间，通常不超过两小时；二是工具，固定使用Adobe XD；三是交付形态，既要有高保真界面，也要有可点击的交互跳转关系。

很多第一次接触这个模块的同学容易把它理解成“画画”，其实不对。比赛评分更看重的是你有没有读懂需求，能不能把功能转成合理的界面信息架构，以及在视觉细节上是否体现出设计规范意识。换句话说，模块A考的是产品思维和UI基本功的综合体，而不是单纯的美术水平。

1.2 评分维度拆解：功能、视觉、交互、规范

我带过的选手里面，有人界面画得特别好看，结果分数反而不高，问题基本出在“功能完整度”上。所以第一件事，先把赛项评分维度吃透。根据历年赛项说明和模拟评分表的整理，模块A的核心考察点大致集中在四个方向：

这里特别想强调两个容易被忽视的点。第一个是“状态完整度”，很多选手只画了理想状态下的页面，比如列表页只画有数据的样子，完全忘了加载状态、空数据状态、错误状态。在评审眼里，这代表你对应用产品的理解不够专业。第二个是“交互链路完整度”，如果你交上去的XD原型只能一页页手动翻，评委根本看不出你的产品流程思维，这跟做PPT有什么区别？

1.3 参考答案系列的定位与学习方式

“参考答案（九）”这一类资料在备赛圈其实很有争议，有人觉得直接照着画就行，有人觉得参考答案限制了发挥。我的看法是，把它当“真题题解”来用，而不是“标准答案”来背。它真正的价值在于让你看到一套完整的设计决策过程——为什么首页要放这几个模块、为什么列表项要做成这个结构、Tab栏为什么会选择这五个入口。

我之前带过一位选手，前期一直自己埋头练，进步很慢，后来我让他拿参考答案做“反向拆解”：先用眼睛看，再闭卷默画一遍，最后打开原稿对比差异。三轮下来，他最大的收获不是记住了某几个页面的布局，而是理解了设计规范的一致性是怎么落到每一个组件上的。这个习惯比临摹一百张图都有用。

2. 动手之前，先把XD工程设置做对

2.1 新建原型项目与画板参数

打开Adobe XD，第一步不是急着画图，而是先把画板规格定好。比赛现场一般是Windows系统，屏幕分辨率和软件界面缩放都有可能影响你的视野范围，所以开画之前一定要确认画板参数。

实操中我推荐按iPhone X系标准尺寸来建：画板宽375，高812。虽然所谓“参考答案（九）”未必指定具体机型，但375x812是目前移动端原型设计的事实标准，适配性最稳。在XD中新建画板时，可以直接从预设列表里选“iPhone X”，也可以手动输入宽高值。

画板建好之后，建议顺手做两件事：第一，打开“网格”显示，布局清晰能省很多对齐时间；第二，把“布局网格”设置为12列，边距16，这样后续每页都能保证内容区有统一的左右边界。我见过太多选手画到第三个页面时，内容区和边距就开始跑偏，最后整个原型放在一起看，左右参差不齐，非常掉价。

2.2 设计规范先定，而不是边画边想

很多选手的习惯是直接开画，画到哪里颜色用到哪里，画完四个页面发现颜色四五种、字号五六档，页面与页面之间根本没有统一性。这个问题在赛项评审里是致命的，因为原型图的专业感很大程度来自“秩序感”。

建议在动手画页面前，先把设计规范定下来，不需要很复杂，四样就够：主色、辅助色、正文字号、圆角大小。主色选一个，建议偏商务或偏活力的低饱和色，辅助色不超过三个；正文字号定三档：大标题用20号、正文内容用16号、辅助信息用12号或13号；圆角统一用8到12像素。

在XD里的具体做法，是把这些规范做成一个小“样式库”画板，或者存成“资源”面板里的颜色和字符样式。这样后续每个页面直接从资源里拖取，保证所有页面一模一样。答案（九）里的参考页面之所以看起来专业，不是因为配色多惊艳，而是每个页面的字号层级、圆角规范都严格一致。

2.3 组件意识：从第一页就开始复用

XD里有一个功能叫“组件”，我要求选手从第一个页面开始，所有会重复出现的元素一律做成组件。比如底部Tab栏、顶部标题栏、列表项卡片、搜索栏。理由很简单：比赛时你可能画到第六个页面，突然发现Tab栏图标要调整，如果这五个页面是复制粘贴出来的，你得改五个地方；如果是组件，改一处全盘更新。

这方面“参考答案（九）”里可以观察到一个很明显的特点：每一页的导航结构完全一致，这绝对不是作者每页手动画的，而是组件复用的效果。这背后体现的就是设计系统思维，也是评分表中“设计规范一致性”的直接证据。

3. 参考答案（九）的页面设计思路拆解

3.1 功能定位与页面清单梳理

拿到“参考答案（九）”的题目，第一件事永远是列页面清单。不管题目给的业务场景是哪一类，通常逃不出这几类核心页面：首页/工作台、内容列表页、详情页、表单页、个人中心。先把页面类型列出来，再围绕需求描述往里填功能模块，页面清单一旦确定，你后面就不会漏页或者做偏。

比如这套题我模拟展开成一个社区生活服务应用，题目如果提到用户注册、信息发布、内容浏览、个人资料修改，那么页面清单就至少包括：引导页（可选）、登录页、注册页、首页、分类/列表页、详情页、信息发布表单页、个人中心页。每少一个，功能完整度就直接扣分。

页面清单理完之后，建议在XD里按顺序一次性把所有画板建好，然后给每个画板重命名，比如“01-启动页”“02-登录页”“03-首页”。这个动作很多人嫌麻烦，但到后期检查交互连线时就知道了——画板名字干净，连线的目标选择才不会找错地方。

3.2 首页设计：信息架构与优先级

参考答案里的“首页”永远是整个原型中最复杂的一页，也是评委重点盯的页面。首页的设计本质不是排版问题，而是信息优先级问题。以社区生活服务类应用举例，首页自上而下通常拆成这样几块：

顶部搜索栏，对应“查找”功能；中部的轮播图或者活动入口，对应运营位；四到八个图标组成的金刚区，对应核心功能入口；“推荐内容”标题加上列表流，对应内容分发。每一块都有它存在的意义，少了任何一块，首页的完整度就会打折扣。

实际操作中，我给选手定的顺序是先画底部导航（五个入口以内），再把首页内容区从上到下排成上下堆叠的节奏。间距系统要保持一致，比如各模块之间统一用12或16的间距，不要一会儿6一会儿20。参考答案里的首页之所以看起来舒服，很大原因是所有模块的间距节奏感一致，视觉上形成清晰的横向分割线，而不是密密麻麻的信息堆。

3.3 列表页与详情页：信息密度与层级

列表页是大部分选手画得最“挤”的页面，总想把所有信息都塞进去。这里要明白一件事：列表页的核心任务是“浏览与筛选”，每条列表项呈现3到5个关键信息就够了，剩下的留给详情页。参考答案里的列表项结构非常有代表性：左侧缩略图，右侧两行文字，第一行标题，第二行辅助信息，右下角或右侧放一个操作按钮或箭头指示。

这类列表项的绘制，在XD里最忌一个个手动摆放。正确做法是：先画好一个标准的列表项，选中后右键“制作组件”，然后用“重复网格”功能或“自动布局”快速生成多个列表项。自动布局在比赛里极其好用，它能让列表项里的文字变化时卡片自动撑开，不用你手动拖动调整，对保证一致性和节省时间都帮助巨大。

详情页则要体现出内容层级：标题是最大字号，正文是常规字号，时间、作者、浏览量这类元信息用辅助字号并配上弱化颜色。图片区可以先用占位矩形，但建议加上一条简短的说明文字“图：XXX”，让评委明白这里未来的视觉规划，这样做比纯灰块更专业。

3.4 表单页与个人中心：功能的闭环

表单页是很多选手容易敷衍的页面，总觉得输入框长得差不多，随便放两个就行。但恰恰是表单页能看出一个产品设计者的思考深度。比如“发布信息”的表单页，至少要包含这几类控件：文本输入框、选择器（类别选择）、图片上传占位、提交按钮。每个输入框都要有标签文本和输入引导语，提交按钮要有主按钮态和禁用态的区分。

个人中心则承担着“账号入口”的角色，一般包含用户头像与昵称、统计数据（如发布数、收藏数、浏览数）、功能列表（设置、意见反馈、退出登录等）。在个人中心的设计上，参考答案里比较经典的处理方式有两种：一种是用大色块头部加白色卡片列表；另一种是全白背景加细分割线列表。前者更有设计感，后者速度更快。比赛时间紧的时候我建议选第二种，不容易出错。

4. 交互原型连接：让评审看见你的产品逻辑

4.1 交互面板与触发设置

静态原型画得再好看，如果不加交互连线，在评委眼里就只是一张图。XD的“原型”面板功能完全可以满足赛项要求，而且操作速度很快，关键在于你有没有建立“每一页都有去路、也有来路”的思维。

选中任意元素，点击右侧“原型”选项，就能拖出一条连线到目标画板。连线触发方式默认是“点击”，一般不用改；但有一个细节要注意：如果你选中的是整个画板背景，再拖线到目标页，那么点击任意空白处都会跳转，这样会干扰正常的按钮触发测试。正确做法是：连线一定要从具体的按钮、图片、导航图标上拖出去。

4.2 页面跳转链路与Tab切换

交互原型的设计要遵循一个原则：从首页出发，任何一个核心入口都能在最多两次点击内到达目标功能页。比如首页金刚区的某个功能图标，点击后应直接跳到对应的二级页面；列表页点击某个列表项，应跳到对应的详情页；详情页的操作按钮，例如“收藏”“报名”，要设计对应的反馈效果，哪怕只是跳回列表页或者弹出一个成功提示页。

Tab栏的切换是另外一个高发丢分点。很多选手只做了首页到其他页面的跳转，却忘了Tab栏本身在四个页面之间是互相可以点击的。更关键的是，切换Tab时当前页对应的那个Tab图标要处于选中态，这不是一个单纯的视觉问题，而是交互逻辑正确性的体现。用XD做这一步时，可以先复制四份底层导航组件，在每一个页面里按当前激活状态调整图标和文字的颜色，再做好Tab区域的点击连线，就能实现正确的切换效果。

4.3 过渡动画：克制的微交互更专业

XD的“交互”面板里可以设置过渡动画，有“向右滑动”“向左滑动”“淡入”等选项。这部分可以用，但一定要克制。我见过选手把每一页跳转都设置成翻转、弹跳效果，结果整体显得特别业余。

推荐方案是：Tab切换用“向左滑动”或“向右滑动”模拟页面滑动；按钮跳转用“淡入”或者“溶解”；由列表项进入详情页用“向上滑动”。动画时长统一设在0.3到0.5秒之间，不要拖到好几秒。这套微交互配置能让你的原型在演示时有一种“接近真实APP”的流畅感，而不会让评委觉得在看PPT放映。

5. 容易加分的隐藏细节：状态页与弹窗反馈

5.1 加载、空数据与错误状态

刚才提到过，状态完整度是评分里的隐形加分点。“参考答案（九）”如果仔细看，大概率会发现最后面跟着几个“状态页”，这些就是拉开选手差距的地方。

一个功能完整的原型，至少要包含三类状态页。加载状态：用一个居中的加载动画占位加上“加载中…”文字；空数据状态：用一个简洁的插图占位加上一行文字“暂无数据，点击刷新”；错误状态：用提示图标加“网络异常，请稍后重试”和一个重试按钮。这三类页面不用为每一个功能模块单独画，做一个通用状态页组件就够了，关键是有和没有。

5.2 底部弹窗与操作反馈

移动端设计还有一个高频场景就是底部弹窗，例如退出登录前的二次确认，选择图片时的“拍照/从相册选择”弹窗。用XD做底部弹窗很简单：在原页面画板上画一个从底部弹出的矩形面板，加一个半透明黑色蒙版，然后把这个弹窗面板的状态做成第二种画板状态，或者放在原页面底部，默认不可见，通过按钮点击控制它的显示切换。

操作反馈同样要完整。例如登录页面点击提交按钮后，要么跳转到首页，要么用一个Toast提示条显示“登录成功”。XD里做Toast提示，可以在当前页面内放一个自动隐藏的矩形框，或者单独做一个提示画板，通过自动动画延时效果来触发。这类细节虽然不起眼，但在评委快速翻看原型时，会留下“这个选手考虑得很周全”的印象。

5.3 规范页：把设计说明直接呈现在画板里

参考答案里还有一个容易被忽略的部分：设计规范页。在XD画板里单独留出一页，放上你使用的色板、字体层级、按钮尺寸等。这不是多余的，而是让评审一眼就看出你有“设计系统意识”。

我通常建议在最后留两页：一页放颜色规范，主色和辅助色色块配上色值标注；一页放文字规范，展示20号标题、16号正文、12号辅助文字的实际效果和用途说明。比赛时间紧的时候这两页很容易被砍掉，但只要时间有余，就一定要保留，它在专业维度上非常加分。

6. 现场实操最容易翻车的几个坑

6.1 时间分配：画图不是全部

模块A的时间一般非常紧凑，如果按两小时算，我建议的时间分配是这样：前5分钟通读需求，画出页面清单；25分钟内完成设计规范定义和首页框架；60分钟做完所有剩余页面的静态设计；20分钟完成交互连线和状态页；最后10分钟整体检查并修正图层命名与画板顺序。

这个时间方案最关键的一点是“先框架后细节”，很多选手从第一页就开始扣图标大小和阴影透明度，结果后面的页面来不及画完。比赛中完成度永远是第一位的，一个80%完成但页面齐全的答案，分数一定高于一个首页画满但后几页空白的答案。

6.2 图层命名与画板组织

比赛中另有一个隐性扣分点是图层面板一片混乱。评审老师如果要预览原型，通常是从第一页顺序看到最后一页，如果你的图层全是“矩形 42”“复制 17”，你自己能找到东西，但一旦评委想看某个细节或者让你现场修改，就会非常被动。

我的习惯是把图层面板当成目录来管理：每个画板一个分组，画板内部分为“背景”“导航”“内容区”“底部操作区”四个子组。所有要交互的按钮单独命名，比如“btn_首页搜索栏”“tab_个人中心”。这样在连交互线或者检查遗漏时，效率会高很多。

6.3 XD版本、快捷键与导出

比赛现场的XD版本不一定是新版，可能是旧版本，这意味着某些新功能可能不存在。比如旧版本没有“自动布局”或者“组件状态”，如果你平时练习一直依赖于这些高阶功能，赛场上突然发现用不了，会很被动。建议在日常练习时就尝试用最基础的矩形、文字、布尔运算等工具完成设计，把高阶功能当加成而不是依赖。

快捷键这块建议统一记熟一套：V是选择工具、R是矩形、T是文字工具、A是画板工具、Ctrl+D是快速复制、Ctrl+G是编组。Windows和Mac的键位不一样，比赛现场一般是Windows系统，提前用Windows版XD练几轮，免得键位切换带来的操作卡壳。

导出环节，模块A一般是提交XD源文件，不是图片。所以不需要做“导出PNG”这种操作，反而要确保的是：源文件里没有冗余的隐藏画板；交互连线完整；文件按照题目要求命名。这一点每届赛项细节不同，进场后第一时间仔细阅读题目要求里的提交规范。

7. 关于参考答案，说点实际的体会

“参考答案（九）”这一系列，我看到很多备赛群把它当成押题神器，新人拿过来就从头到尾照着画一遍，画完感觉收获很大，实际上水平没怎么提升。因为临摹只是动手，没有动脑。

我做了一个调整，效果非常明显：每次拿到一套参考答案，不要先看界面，先看它的画板顺序和页面清单。猜一下作者为什么要这个顺序排页面、为什么某些功能放在首页而另外一些收进个人中心；然后盖住原稿，自己画一遍；再打开原稿对比布局、间距、字号上的差异。三轮下来，你会发现自己对信息架构的感知力明显增强，而这种能力在比赛时面对陌生题目才是最值钱的。

另外，不要只盯着XD操作技巧，界面设计背后的一般规律更重要。颜色不要超过三四种、一页之内信息层级不超过三层、任何按钮都要有按压或者触达反馈、同一类操作在全部页面里形态保持一致。这些规则在比赛里比一百个炫酷效果都管用。

这套参考答案系列到第九期，整体难度已经在明显递增，考察的页面类型也更丰富。如果你能把这九套题全部按“拆解—默画—对比”的循环做过一遍，再碰到新题，你手里掌握的其实不是九套答案，而是一整套能够迁移的设计决策套路。祝备赛顺利，有问题欢迎在留言区继续交流。