企业官网建设流程全解析

最近我的私信快被同一条问题刷屏了：备赛2026年职业院校技能大赛移动应用开发赛项的同学，都在到处找“车机中控原型图设计”的参考答案。说实话，每年赛题一到，大家都在赌题、求答案，但我带赛这几年最深的感受是：与其背一份万能答案，不如把出题人真正想看到的那套设计逻辑吃透。这篇文章我就把车机中控原型图从审题、拆需求、画页面到交互动效的完整套路拆给你看，参赛选手可以直接抄作业，指导老师也能拿来当备赛教案用。

车机中控这个题眼，这两年已经成为移动应用开发技能大赛里最典型的综合性任务。它表面上考的是“会不会画图”，实际上考的是信息架构、车载交互规范、状态设计、工具链熟练度和设计叙事能力。我会按真实的备赛顺序写，先讲评分逻辑，再讲流程，然后逐个拆核心页面的布局和控件，最后给一份避坑清单。全程不绕弯子，也不说套话。

1. 赛项理解：车机中控原型图到底在考什么

1.1 为什么大赛这两年盯上了车机中控

先说背景判断。这两年的赛项风向明显往智能座舱那边偏，前几年经常看到工具类、社交类App的题目，现在扎堆出车载场景。原因不复杂：整车厂商都在抢智能座舱方向的移动端开发者，这个岗位既要懂App交互，又要懂驾驶场景的特殊约束，人才缺口一直很大。赛事要通过比赛带动教学，自然会选产业最需要的能力来出题。

所以车机中控原型图设计不是什么“灵光一现”，它是移动应用开发赛项里非常有代表性的综合任务。和手机App最大区别在于场景：手机是拿在手里“盯着看”的便携设备，车机是装在车上“偶尔看一眼”的交互中心。同一个界面，手机上字小一点，用户顶多眯眼；车机上字小了，驾驶员就可能因为多看了一眼屏幕而忽略路况。这个认知差异，是所有设计决策的起点。

我带选手备赛的第一课就是让他们把这句话写在本子上：车机的一切设计都要服务于“视线少离开路面，操作少分散注意力”。你后面画的每一张图，都要能拿这句话去回答评委的追问。

1.2 评分表里隐藏的设计权重与底层逻辑

大赛评分表不会随便给你，但通过历年赛题复盘和选手反馈，评分维度基本落在功能完整度、交互逻辑、视觉表现、状态设计、文档答辩这几个大项上。这里我列一个等效评分表，方便你理解每个环节的权重来源。

我对选手说，判断一份原型是“学生作业”还是“选手作品”，就看两件事。第一，页面数量是否覆盖全部需求；第二，每个控件有没有考虑多种状态。做到这两点，哪怕视觉稍微朴素，评分也不会低。反之，如果只画了三五个漂亮页面，需求一核对就缺页，那再好看也拿不到高分。

顺便解释一下“参考答案”的正确用法。赛项解题不存在唯一答案，所谓参考答案，本质是“满足所有硬性需求、同时体现设计亮点”的完整方案。所以下面的所有页面，我都会强调需求覆盖和状态完整性，而不是给你一个死板模板。

2. 从审题到落地的整体设计流程拆解

2.1 读懂题目：需求文档里的每一句话都不是废话

很多选手拿到任务书之后的第一反应是打开原型工具，这个习惯非常致命。技能大赛的题面一般几百字，但每一句都是经过推敲的，尤其是“需包含”“应支持”“可拓展”这三种措辞，代表了不同的强制程度。我的要求是：先用15到20分钟，把题面拆成一份功能清单，再动手画图。

具体做法是拿两支笔，一支划名词、一支划动词。名词就是页面，比如“车辆设置”“音乐播放”“导航地图”“快捷控制中心”，这些直接对应页面文件夹。动词就是交互，比如“调节”“切换”“添加”“删除”，这些决定页面内要放什么控件。举个例子，题目说“中控屏默认深色模式”，那你的每一个页面都要是深色底，包括二级页和弹窗；题目说“支持手势操作”，那你就必须画顶部下拉呼出控制中心的手势引导页，并且写进交互说明。

我见过不止一个选手因为没做题面拆解，画完主界面、音乐页、导航页后才发现漏了“车辆设置中至少包含5项调节功能”这句话，最后只能压缩时间赶工，质量一路下滑。这种扣分完全可以靠前期拆解避免。所以我把题面拆解列成团队备赛的第一步，就像写代码前的需求评审，多花十分钟，后面省两小时。

2.2 竞品观察：主流车机中控的三种布局模式

在画图之前，先花点时间看主流车机中控是长什么样的。这不算抄袭，算“行业惯例”。目前市面上的车机中控主流布局基本可以分成三类，我列个表对比一下各自的适用场景。

大赛环境下，我强烈建议首选“地图优先式”。原因很直接：评委点开你的主页，第一眼要能认出“这是车机，不是手机”。地图作为视觉主体是最强的车载信号，而且能自然承载音乐卡片、天气卡片、车辆状态卡片这些信息模块。卡片悬浮层用得好，既丰富又有层次感。

不过借鉴不是照抄，重点是理解布局背后的设计意图。地图优先式之所以流行，是因为驾驶员大部分时间不需要操作，只需要“瞥一眼”路况和路线，地图作为背景最合适。理解了这一点，你就会知道卡片应该放在右侧而不是地图正中间，因为右侧离驾驶员视线更近、更顺眼。

2.3 信息架构：一步步把功能梳理成树

信息架构是很多选手忽略的环节。需求文档几百字，原型图要几十页，中间缺的就是这棵“信息树”。我的习惯是在草稿纸上画三层的架构图：第一层是模块，比如主页、导航、音乐、电话、车辆设置、空调、快捷控制中心；第二层是每个模块的子页面，比如音乐模块下面有播放页、列表页、歌词页；第三层是页面里的核心操作，比如播放页里有播放/暂停、上一首/下一首、进度条。

画这棵树的主要作用，是避免页面之间的逻辑乱跳。有的选手做着做着，觉得某个功能放在哪都行，结果主页直接跳空调页、发现没有返回路径，整个交互是散的。有了信息架构树，你会明确每个页面的入口在哪、出口在哪、返回之后落在哪。

另外，做信息架构时可以直接用“高频优先”原则排序：把驾驶过程中最常用的功能放在距离驾驶员最近、点击路径最短的位置。比如音乐控制一定比壁纸设置优先级高，空调温度一定比系统版本信息优先级高。你把这个优先级体现在页面布局上，评委是能看出来的，因为这就叫产品思维。

2.4 栅格与安全区域：先画规矩再谈放飞

车机中控通常是大横屏，常见的画布尺寸有1920x720和1920x1080两种，具体以当年赛题素材为准，但无论哪个尺寸，设计规范是相通的。我建议新建画布后，第一件事不是画视觉效果，而是把栅格和安全区域拉出来。我用一组基准参数，历年备赛都在用，可以直接套。

这些数字不是随便定的。以字号为例，车机屏幕在驾驶位前方，视距大概在60到80厘米，比手机的一二十厘米远得多。同样一个24px文字，在手机上看是正常大小，放在车机上必须按照视距比例放大，才能真正“扫一眼就知道在说什么”。这也是车机原型图和手机原型图最本质的差别之一。

栅格也建议统一为12列或24列。列宽是几等分的概念，实际用起来不需要算得特别精确，关键是让所有页面的对齐逻辑一致。比如主页右侧的卡片列宽是400px，设置页的列表项宽度也用同一个基准，整个原型就会显得规整，图层对齐也省力。

3. 车机中控核心页面原型图实操参考

3.1 主界面：评分第一眼，必须一眼认出是车机

主界面是所有页面的门面，也是评委看的第一个页面。我推荐的参考结构是“地图背景+功能卡片+Dock栏”三层叠放。底部先铺一张地图作为背景，不需要把地图细节画得很精细，风格化路线、地标点就够了；右侧放功能卡片，从上到下依次是音乐卡片、天气卡片、车辆状态卡片；顶部状态栏放时间、网络信号、蓝牙状态和用户头像；底部Dock放主页、导航、音乐、电话、语音助手、设置六个核心入口。

这里特别强调语音助手的按钮设计。参考主流车机，语音助手通常是颜色最醒目、尺寸略大于其他图标的存在，放在Dock中间偏左的位置，方便驾驶员拇指盲操作。很多选手把它做成和设置一样的普通图标，等于自己放弃了一个展示“驾驶安全思考”的机会。你可以在答辩时说，这个按钮刻意做大了10%，就是为了减少驾驶员寻找它的时间。

卡片的内容也要做足细节。音乐卡片显示当前歌曲封面、歌名和进度条；天气卡片显示温度、天气图标和空气质量；车辆状态卡片显示续航里程和轮胎压力提示。每张卡片右侧画一个“更多”箭头，点击能进入对应二级页面，这就是交互闭环的体现。卡片之间间距用16px，与状态栏、Dock的间距保持一致。

3.2 导航页面：地图底图和控件层各司其职

导航页面是区分车机和手机App气质最明显的地方。一个完整的导航页参考结构，可以分为两个层来理解。底图层是地图，占据大部分画布；控件层悬浮在地图之上，包括左上角返回按钮、搜索框、图层切换按钮、全览按钮、右下角放大缩小按钮，以及底部路线信息卡片。

控件层有一个原则，所有控件都不能遮挡地图的关键信息区。路线卡片放在底部偏左或居中，上面显示预计到达时间、剩余距离和路况描述；搜索框放在中上位置，点击后跳转搜索页；右下角的放大缩小按钮是垂直排列的一组圆钮，对应车机里“双指缩放”的补充操作，因为驾驶中戴手套或单手操作时，按钮比手势更可靠。

状态设计也是评分重点。一张导航页至少要有三种状态：未规划路线状态、已规划路线状态、导航中状态。未规划时显示地图和搜索框即可；已规划时在地图上画出路线，底部卡片显示路线方案；导航中时要增加转向提示卡片，上面画一个大箭头、距离提示和车道引导信息。把这三个状态都做出来，用Figma的页面互相跳转连起来，评委一看就知道你理解了导航业务的全流程。

3.3 音乐媒体页面：第二高频考查页面的细节拆解

音乐页面也是历年赛题的高频考点，因为它的控件类型最丰富。参考布局用双栏结构：左侧是播放列表，右侧是正在播放界面。播放列表的每一行由歌曲封面缩略图、歌名、歌手名和“播放中”状态标记组成；正在播放界面则集中展示专辑大图、歌名、歌手、进度条和播放控制按钮。

控制按钮至少要包含上一首、播放/暂停、下一首，这是最基础的三个。更完整的还要有播放模式切换（顺序、随机、单曲循环）、收藏按钮、音量条和歌词入口。进度条不能画一个装饰性的细线就完了，要设计成可拖动的状态；我在备赛时会专门给进度条做一个“拖动手柄”状态帧，演示时直接拖给评委看，和“图片式的进度条”完全两个档次。

还有一个容易被忽略的安全考点：歌词显示。手机音乐App的歌词可以做成滚动弹幕，但车机上如果还在行驶，大段歌词滚动会明显干扰驾驶注意力。所以参考方案通常把歌词做成半透明显示，只显示当前句，不做连续滚动。你可以在交互说明文档里专门写这句话：行驶中歌词弱化为半透明单句显示，驻车时再恢复完整歌词。这一个小细节，体现的就是安全设计意识。

3.4 车辆设置与快捷控制中心：功能多不等于页面杂

车辆设置是整个原型里功能数量最多的模块，最容易画乱。参考做法是分组列表：驾驶辅助、灯光、门窗、显示、声音、系统六大类。每一组用一个区域标题分隔，下面放列表项。列表项类型主要有三种：带开关键的有，比如车道保持、自动大灯；带滑块的有，比如屏幕亮度、音量大小；带跳转箭头的有，比如壁纸设置、系统更新。这三种列表项视觉上要有区别，不能全靠文字凑。

快捷控制中心是全局下拉呼出的页面，逻辑类似手机控制中心，但内容选择要围绕驾驶场景。参考布局是顶部两行4x2的快捷开关宫格，包括蓝牙、Wi-Fi、个人热点、驾驶模式、屏幕亮度、音量、空调温度、空调风量。底部可以放一圈常用功能的快捷键，比如座椅加热、后视镜加热、除雾，这些无法放到主界面但又高频使用的功能，聚合在这里非常合理。

关闭手势也要考虑清楚。最自然的交互是点击空白区域关闭，或者从屏幕底部向上滑动关闭。这两种手势你选一种，画在“手势引导页”上，然后在交互说明文档里用一句写清楚。如果你不做说明，评委只能靠猜，那就等于给评分留了不确定因素。

3.5 空调页与全局手势的补充说明

空调页做不做得完整，能看出来选手是不是只画“表面文章”。参考结构至少包含双温区控制条、风量档位、风向模式、内外循环、A/C开关这些元素，高级一点还有座椅加热和通风。双温区是两个左右分布的温度条，通过拖动调节，中间显示当前温度值；风量档位常见的是档位按钮，比如1到7档，点击高亮显示。

全局手势设计是把所有页面串起来的关键。我把常用手势整理成一个速查表，备赛时让选手对着检查：

做完手势设计后，建议单独画一张“交互手势说明页”，把所有手势画成示意图，放进原型文档的前半部分。这既是给评委看的说明书，也是你答辩时的提词卡，一举两得。

4. 原型图工具选型与从0到1的实现套路

4.1 工具选型：Figma、Axure、墨刀怎么选

工具选型是很多选手纠结的问题。我的建议很简单：以比赛环境为准，但至少要有一个用得足够熟练的工具。目前比赛环境中Figma的使用人数最多，它的组件复用、自动布局和Smart Animate动效都做得很好，既能画高保真原型，又能顺带出设计规范；Axure的交互逻辑能力很强，适合做复杂状态切换，但视觉表现力偏弱，画出来的界面比较“工具化”；墨刀上手快、内置组件多、导出方便，适合快速出稿，但复杂动效和高保真视觉会受限。

选型之外，我更想强调“熟练度”这件事。备赛阶段花一周时间，把工具里的组件创建、样式复制、页面连线、动效设置全部练成肌肉记忆，比赛时会受益很大。原型设计本来就时间紧，如果你还边画边找按钮在哪，那基本没时间做状态设计和动效优化了。

4.2 组件化思维：先花30分钟搭建车机组件库

不管用什么工具，我都要求选手先搭组件库再画页面。这一步看起来“浪费时间”，其实是效率提升最快的方法。一整套车机组件库至少包含这些基础组件：状态栏、Dock栏、主按钮、次按钮、图标按钮、开关、滑块、卡片、列表项、进度条、弹窗、输入框、图标集。把每个组件做好后存成可复用组件，后面画几百个页面都会用到它们。

组件库的核心价值是视觉统一。你提前把圆角、字号、主色、描边宽度都定好了，后面所有页面都是拖组件出来改文字，风格自然一致。相反，如果每页现画，很容易出现“这个页面圆角16px，那个页面圆角8px，音乐页和设置页的画风完全不像一家人”的情况。评委会翻源文件，组件库用得好，源文件层次清晰，这本身就是加分项。

比赛时间分配也建议固定下来。假设总时长4小时，前30分钟建组件库，2个半小时画页面，最后1小时做动效、交互连接和导出，剩下30分钟整体检查。这个时间盒子里，组件库阶段绝对不能省，后面所有页面的速度都靠它。

4.3 状态设计：一个按钮要有几种“脸”

专业原型和业余原型的差距，往往不在视觉多华丽，而在状态设计是否完整。一个合格的按钮至少要有默认态、按压态、禁用态、加载态四种状态。车载界面里，按压态可以通过底色变化或色块加深来体现；禁用态则用低透明度表达“当前不可用”的语义；加载态可以画一个转圈图标配半透明遮罩。

除了按钮，页面级的空态、加载态、异常态更是大赛扣分重灾区。我拿音乐列表来举例：默认态是歌曲列表正常显示；空态是列表为空时显示“暂无歌曲，去添加吧”加上一个添加按钮；加载态是刚进入页面时显示骨架屏；异常态是加载失败时显示“网络异常，点击重试”。这四个状态只要你做全了，哪怕其他页面粗糙一点，你的产品完整度印象分也会明显上涨。

我在备赛群里的口头禅就是：不要只画“写真照”，还要画“急救照”。把用户会遇到的所有情况都想到，画出来，连成路径，这就是产品思维。评委里如果有企业工程师，他们会特别注意这些细节，因为真实产品里异常状态占用开发者大量精力。

4.4 动效与交互相切：别让演示看起来像PPT

原型图做完了，整个文件还只是静态页面，必须用动效把它们串起来，否则演示效果会大打折扣。车机原型的动效不需要炫技，越花哨反而越不像车载风格。关键是要“跟手”：页面切换用左右平移或淡入淡出，卡片展开用缩放配合透明度变化，进度条拖动要顺滑。这些动效在Figma里用Smart Animate就能实现，时长控制在200到300毫秒，过渡曲线用ease out。

我见过选手把页面切换做成了Google弹跳效果，看起来很活泼，但完全不符合车机交互习惯。车机动效讲究克制，因为驾驶员不能把注意力长时间放在特效上。演示也是门技术活。我会要求选手按“场景叙事”来演示，而不是从头到尾念页面。举个例子：假设用户早上出门要导航去公司，先打开主界面看天气，再点击语音助手说“导航去公司”，系统展示路线方案，用户确认开始导航；导航途中来了电话，中控切到电话界面；挂断电话继续导航。沿着这样一条故事线去点，每一步都有动机，评委跟着你的思路走，自然愿意给高分。

5. 高频扣分点与避坑指南

5.1 有据可查的安全问题：字号、热区、对比度

车机原型最容易被扣分的就是“把手机习惯搬过来”。我先给三个硬指标：最小正文字号24px，主按钮高度不小于48px，深色模式下正文与背景的对比度建议不低于4.5比1。为什么这么严？因为车机的使用环境光照不稳定，正午强光、夜晚暗光都会有，如果对比度不足，屏幕反光时内容基本看不清。

热区也同理。驾驶中操作是“低视觉依赖”的，驾驶员更多靠记忆和位置感去点击。一个64px高的主按钮，比一个36px高的链接更容易被盲点准确命中。所以做原型时，按钮不能视觉上看着挺大但实际热区很小。直接把按钮尺寸本身做到位，不靠“透明热区”去补救，这个习惯能让你的原型在真机演示时都不会出问题。

我建议备赛时用一张自查表逐页过：

5.2 模态与流程缺陷：弹窗级别用错是重灾区

弹窗是交互流程里最容易出错、也最影响用户体验的部分。车载场景里，模态弹窗要尽可能少用，因为弹窗会盖住地图或路线，直接影响驾驶判断。一个常见的错误是“删除确认”这种低频操作用了全屏弹窗，遮住了当前信息；而像“电量低充电提醒”这种真正需要驾驶员注意的信息，反而只做了一个一闪而过的小气泡。两件事的弹窗级别完全反了。

参考的强度分层是这样的：轻提示Toast最轻，一般用于操作结果反馈，比如“已收藏”；底部弹层稍重，用于需要从底部滑动出现的快捷操作，比如音源选择；居中弹窗用于必须确认才能继续的流程，比如删除确认、更新提示；全屏页面只在必要的时候才用，比如搜索页、设置二级页。导航过程中，除非必要，不要使用任何模态弹窗，如果一定要提示，用非模态的顶部卡片横幅，让地图保持可见。

我把这个规则写进选手的答辩话术里：我们采用轻量化弹层优先原则，保证导航信息不被遮挡。这句话简短，但能证明你考虑过车载交互的核心约束。

5.3 情绪化扣分点：视觉统一与细节完成度

评委连续看几十份作品，视觉印象分很大程度来自“统不统一”。我自己在检查时，最头疼的就是一份原型里混了五六种风格：这个页面圆角大，那个页面是锐角；图标有些是实心有些是线框；主色一会儿蓝色一会儿绿色。这些不是“设计能力”问题，而是“自我约束”问题。解决办法就是前面说的组件库：所有卡片、按钮、列表项都从组件库里拖，圆角、配色、描边天然一致。

深色模式也要做得彻底。车机中控默认深色主题，所以每个页面都必须有深色版本，连弹窗、输入框、二级列表都要跟着变。有的选手只把主界面做成深色，二级页面还是浅底白卡，一打开就露馅。我建议在组件库里直接把所有基础组件的深色样式做好，页面里复用，就不会出现这种半吊子的深色模式。

细节完成度还体现在图层命名和页面命名上。每个页面命名成“03-音乐-播放页”，图层按“卡片/图标/文字”分组放好。评委如果翻开设计稿检查，看到整齐的图层列表，对作品的工程素养评价会高很多。这属于不费什么力气的加分项，别丢。

5.4 演示节奏与“带得走”的素材备份

最后一步是演示，这个环节每年都有选手吃亏。最常见的失败方式是演示视频超过5分钟，前面讲理念花了2分钟，评委已经失去耐心；或者只演示正常点击路径，完全没展示异常态和弹窗设计。我的建议是视频控制在3分钟以内，结构分成三段：30秒讲设计理念，2分钟走一个完整场景，最后30秒快速展示异常态和设计亮点。这样节奏紧凑，评委全程都能跟上。

备份方面，绝对不要只留一个源文件。交稿前至少导出三样东西：源文件、全页面的PDF/PNG导出图、演示视频。即使现场打不开源文件，PDF图册也能顶上。我在备赛时还要求选手把设计说明文档和演示脚本打印成纸面备份，万一设备出问题，你手里还有讲稿，不至于愣在台上。

答辩时还有一个讲究：先说结论再说细节。比如开场直接讲“这套原型围绕驾驶安全，采用地图优先式布局，设计了三层信息结构，共覆盖23个页面、12种弹窗状态”。第一句就把覆盖规模说清楚，评委的预期就建立起来了。

连续带了几届赛项，我看过的车机中控原型图没有两百份也有一百多份。一个很扎心的规律是：得分最高的往往不是画得最炫的那份，而是需求覆盖最全、状态最完整、演示最清楚的那份。所以你要问我怎么做出自己的参考答案，我会说，先把题面拆成功能清单，再按“页面-控件-状态”三层把所有内容做全，最后用一条用户场景把演示串起来。赛场上真正拉开差距的，从来不是天赋，而是准备得够不够细。

最后再分享一个小技巧：拿到题目后别急着开软件，拿支笔把需求过三遍，第三遍专门划“可”“应”“支持”这些附加条件词。就这一步，能帮你少扣一半冤枉分。2026年的赛场上，希望你的作品不只是好看，还经得起评委一句追问。