企业官网建设流程全解析

作为移动应用设计与开发赛项里出镜率很高的一个题型，车机中控原型图设计并不是让大家画几张漂亮的手机界面截图交差，而是要在限定时间内，把一套"能上车"的智能座舱交互方案用原型语言完整表达出来。我接触这个赛项有好几年了，也带过不少学生，每次看到有人把车机中控设计成了竖屏手机的放大版，就知道这题基本跑偏了。车机中控的主屏幕是横向的，操作场景是行车中的驾驶员，使用距离从手机的30厘米拉远到70到100厘米，这些硬约束直接决定了界面布局、字号大小、色彩明暗和交互手势的选择。

这个赛题出现在2026年的职业院校技能大赛里，其实释放了一个很明确的行业信号：汽车行业正在大规模软件化，车机已经从"收音机加倒车影像"进化成了"轮子上的智能终端"，无论Android Automotive还是各类互联方案，都急需既懂移动端交互设计、又理解车载场景约束的开发者。移动应用开发赛项把车机中控原型设计作为一个单独环节，就是要检验选手能不能把一个垂直场景的需求转化成规范的、可评审、可交接的界面方案。

1. 赛题拆解：车机中控原型图设计到底在考什么

1.1 赛题背后的行业背景

先说行业背景，因为这个背景直接决定了设计方向。车机中控在整车智能化中的地位，已经从"功能附属件"变成了"用户体验主战场"。现在再大谈特谈的智能座舱，核心就是一块横屏加一套好用的交互系统。车厂要的交互设计师，第一要懂移动端的组件化思维，第二要懂车载场景的特殊约束，第三要能在需求模糊的时候快速给出可评审的方案原型。技能大赛设置这个题目，本质上就是在模拟"产品经理丢给你一句话需求，你两小时内给出可演示原型"的真实工作场景。

这个场景和传统App原型设计最大的区别在于使用环境。手机App的使用环境是相对静止的，用户可以慢慢看、反复找；车机则是在高速移动的环境里被使用，眼睛要管路面，手指要管方向盘，屏幕只能被"扫一眼+戳一下"。所以你去看量产车机，几乎没有哪家敢把界面做得又满又花。这个赛道里，克制、简洁、高效率是通行语言，谁的设计让信息获取成本越低，谁的专业度就越高。

1.2 评分维度与"参考答案"的定位

很多人听到"参考答案"四个字，第一反应是找一份拿来即用的成品。但在原型图设计这个环节，它更像一份"高分解题框架"。从历年的赛题评分标准来看，考核点基本落在功能完整性、交互逻辑正确性、界面规范一致性、视觉辨识度和文档表达这几个维度上，功能全部覆盖但界面粗糙的，拿不到高分；界面漂亮但交互标得一塌糊涂的，同样拿不到高分。所以这篇文章不会只给出一张截图，而是会把从需求分析、页面结构、交互标注到检查清单的完整流程拆开讲。

我要强调一下：原型图设计参考答案的真正价值，是让你在有限的两个到三个小时内，把所有该考虑的维度都覆盖到，避免因为遗漏某个隐藏考点而丢掉关键分数。比如很多人会记得画主界面、导航、音乐，却忘了设计空调控制、车辆状态、设置这些二级页面；又或者记得做点击跳转，却漏掉按压状态、加载状态和返回路径。这些细节恰恰是区分"画过"和"设计过"的分水岭。

2. 需求分析与功能规划：动手之前先把框架立起来

2.1 车机中控的核心场景与用户画像

开始画图之前，先花十分钟做需求推导。车机中控的用户不是"所有人"，而是"正在开车的驾驶员"和一个偶尔操作的副驾乘客。驾驶场景有两个很极端的特点：第一是注意力资源极度稀缺，驾驶员95%的注意力必须放在路面，留给屏幕的只是一次不超过5秒的扫视；第二是操作容错率极低，一个误触可能让导航路线改变、广播音量突然放大、空调风向骤变，都会造成安全隐患。所以车机中控原型设计的首要原则不是"功能多"，而是"核心功能一抬眼就看懂、一伸手就够到"。

基于这个场景，我把一套标准的车机中控原型必备功能圈定为六个模块：主屏桌面、导航、媒体播放、空调控制、电话通讯、车辆设置。这六个模块基本覆盖日常用车过程中最高频的交互需求，也符合多数智能座舱的量产方案。在比赛环境下，不建议再往里堆加智能家居、商城、视频娱乐这类非核心功能，因为每增加一个页面，就意味着多一份交互标注工作，也意味着评审时多一个可能出错的检查点。

2.2 功能清单与页面流转管理

确定模块之后，要把功能细化到页面，并建立页面之间的跳转关系。这里给一个可以直接抄作业的拆分方法：用表格把每个模块的页面、主要元素、触发入口写清楚，再画出页面流转草图。以主屏桌面为例，主屏上放着导航卡片、音乐卡片、天气卡片和空调快捷入口，点击导航卡片进入全屏导航页，点击音乐卡片进入全屏媒体页，音乐卡片上还要有播放暂停按钮和下一曲按钮，它们属于卡片内的局部交互，不能跳到新页面。

我在实际带学生的过程中发现，页面流转草图画得越细，后面画原型就越顺手。流转关系要特别标注三类路径：从桌面进入二级页面的入口路径、二级页面返回桌面的返回路径、以及二级页面之间的切换路径。很多选手在原型里只做了"进去"的标注，忘了"怎么回来"，这种单向交互在评审时一眼就会被看穿。

2.3 需求优先级：安全交互优先于视觉炫技

功能规划的最后一步是排优先级。车载环境里，优先级排序有一个公认的大原则：与安全驾驶直接相关的能力排第一，与导航出行相关的排第二，娱乐舒适相关的排第三。反映到原型设计里，就是空调控制、导航信息、来电提醒必须保证任何界面层级下都能快速触达，而听歌、看视频这类娱乐功能则可以设计得收敛一些，甚至做成折叠状态。这也是判断一份设计方案是否专业的重要依据。

举个例子，音乐播放界面再好看，如果驾驶员需要三步以上才能调大音量，那它就是不合格的设计。所以在原型里我会坚持把音量调节、温度调节、常用功能快捷键固定在一个常驻的快捷控制区里，无论用户在哪个页面，这个区域都存在。这种"全局快捷控制栏"的设计思路在量产车机上已经很成熟，写在方案里既能在功能完整性上得分，又能体现对车载场景真实约束的理解。

3. 原型图设计实操：从画板设置到高保真

3.1 工具选型与画板尺寸设置

工具选择上，比赛环境最常见的三款是Figma、Axure RP和墨刀。我的建议是优先用Figma，因为它的组件复用和自动布局能力特别适合车机这种"多页面、多状态"的界面体系，而且页面之间跳转原型可以直接演示。如果主办方提供的机器没有Figma，Axure RP的交互能力最完整，适合做出带条件的复杂交互流，缺点是绘制效率比Figma低；墨刀更轻量，适合快速出图，但做复杂组件状态管理时稍微吃力。

画板尺寸是第一个容易踩坑的地方。车机中控常见的标准分辨率有1920乘720、1280乘480、1280乘720几种，宽高比在8比3和16比7之间。我在参考答案里选择1920乘720这个经典尺寸，因为它不仅在视觉上有足够的设计空间，同时也是很多量产车机UI设计的基准画布。

注意：一定不要用手机竖屏的尺寸去套车机，这会直接暴露你对平台不理解。车机中控默认是横屏，而且是扁而宽的横屏，这是画板设置的底线。

3.2 栅格、间距与组件规范

确定画板之后，先别急着画元素，把设计规范定下来。我习惯用8点栅格法来管理间距：所有间距、边距、圆角都以8的倍数为单位，这个规则在车载大屏上尤其好用，因为横向1920像素除以8正好是240个栅格单位，纵向720像素除以8是90个单位，任何元素都能找到对齐的依据。触摸目标的车规化最小尺寸是64像素，换算成物理尺寸大约是1.6到2厘米，这是为了保证戴手套和行车颠簸时也能点准。页面的左右安全边距建议留64像素，上下边缘区域留给常驻信息栏。

按钮圆角、图标尺寸、文字字号也要提前定义好。我做了一套可以直接用的最小规范：一级按钮高度88像素，圆角16像素；图标最小尺寸48乘48像素，复杂图标用64乘64；主标题字号32像素，正文内容字号28像素，关键信息强调字号不超过40像素。字号沿用8点增量体系，在车载观看距离条件下，字号低于24像素的文本基本不具备可读性，所以正文最低要压在28像素以上。

3.3 深色主题配色逻辑

车机中控配色，行业的主流方案是深色主题，这背后有很实际的物理原因：深色背景可以降低屏幕整体亮度，减少夜间行驶时挡风玻璃上的反光，同时提高小面积高亮内容的信息辨识度。我在参考答案里采用近似"深空灰加科技蓝"的搭配，背景主色用深灰色，比如十六进制1A1C1F，大面积卡片用略亮一点的222529，主操作色用高饱和但并不刺眼的蓝色0091FF，警示信息用橙色FF8C00，危险信息用红色E53935。

这类配色方案能轻松做出层次感，关键是把颜色用在刀刃上。我总结的配比是：背景类占70%，卡片类占20%，点缀色只占10%。点缀色专门负责引导视线，比如当前播放歌曲的高亮、导航路径的描边、温度调节滑块的进度条。如果点缀色铺得太满，整屏都是蓝色高亮，驾驶员根本不知道该看哪里，这种设计在评审时会被直接判定为缺乏信息层级。

3.4 字体选择与信息层级表达

车载中控的字体系统遵循"少即是多"的原则。中文字体首选思源黑体或同样风格的家族，英文字体用Roboto或Inter这类无衬线字体，整体目标是清晰、中性、不抢视觉焦点。我一般会把字重控制在四个级别：大标题用Medium或Bold，正文用Regular，辅助信息用Regular但颜色降一档透明度，数字信息比如速度、温度、时间，用等宽特征明显的字体或专门的数字字体，保证数字宽度一致，避免跳动感。

信息层级在原型图里靠三个手段表达：字号、字重、颜色透明度。同一个卡片里，主体信息比如当前歌曲名用32像素白色，次要信息如歌手名用28像素灰色，辅助信息如专辑年份用24像素半透明白，三层关系一目了然。很多新手喜欢用五彩斑斓的颜色区分层级，效果往往适得其反，不如老老实实用渐变的灰阶加上一个主点缀色，效果反而更工业化、更耐看。

4. 关键界面的参考设计拆解

4.1 主屏桌面：第一眼的"三秒法则"

车机主屏是整个原型中最重要的一页，评审通常停留在这页的时间最长。主屏设计我遵循"三秒法则"：驾驶员扫一眼屏幕，三秒内必须定位到自己当前最需要的那个功能。基于这个原则，桌面布局采用左侧导航卡片居中偏左、右侧音乐卡片和空调快捷区上下排列的对称结构。导航卡的尺寸做得最大，因为导航是行车过程中使用频率最高的功能，卡片上不需要放太多内容，但必须显示"剩余里程、预计到达时间、下一条路口"这三项核心信息。

主屏的顶部常驻信息栏放时间、网络信号、蓝牙连接状态、室外温度，这些信息属于全局状态，在任何页面都要保留。左下角或底部中间放一个全局快捷控制区，收纳音量加减、温度加减、座椅加热、前后窗除雾这类高频操作，点击后以浮层形式展开更多选项而不是跳页。主屏还应该在视觉上留出可动态变化的区域，比如天气卡片、车况信息卡片，这部分能体现原型设计的"状态可变"意识，很多评分标准里都有"页面状态完整性"这一项。

4.2 导航页面：车机交互的重头戏

导航页是另一个高权重页面，它的设计重点是"地图为主体、搜索和路线信息为辅"。全屏地图作为背景，左上角放搜索框和目的地输入入口，左下角放缩放控制与当前定位按钮，底部区域用一张半透明卡片承载路线信息，包括预计到达时间、剩余里程、拥堵提示。导航页一定要画出来两种状态：一是路线预览状态，显示起点到终点的整条路线；二是导航进行状态，显示当前路段、下一路口指引和车道信息。

交互标注上，导航页要重点表达"搜索目的地、选择地点、开始导航、退出导航"这四条链路。很多选手忘了标注"结束导航"的入口，或者把结束按钮放在很难按到的地方，这是明显的减分点。正确的做法是在导航进行状态下，底部卡片的右上角或导航路线出口附近放一个明确的"退出"按钮，尺寸同样要满足64像素目标。另外，导航页一定要保留全局快捷控制栏，让驾驶员在导航过程中也能快速盲调音量和空调。

4.3 音乐播放页：平衡沉浸感与安全需求

音乐播放页的设计平衡点在于"沉浸感"和"安全性"之间的取舍。我的参考答案采用左右分栏布局，左侧是封面大图加歌曲信息，右侧是播放列表，顶部保留搜索和分类入口。当前播放歌曲的封面图做得比较大，底部是控制条，上一曲、播放暂停、下一曲三个主按钮尺寸加大并居中，左右两侧分布循环、收藏、音效调节等次要按钮。播放进度条要有明确的拖动反馈和已播放高亮，不支持拖动时也要有明确的禁用态表达。

这个页面的隐藏考点是"多状态设计"。歌曲加载中、播放列表为空、蓝牙未连接、当前无歌曲这四个状态都要画出来，每个状态都要有对应的引导文案和操作按钮。我在实际评审中见过很多方案只有正在播放的完美状态，没有空态和加载态，这样的原型在"功能完整性"上会被扣分。别忘了音响音量在车载场景里是一个安全相关参数，音量条应该始终可见，并且标注出"最大音量提醒"这个交互细节。

4.4 空调控制与快捷设置

空调控制页是车机中控里"功能密度最高"的页面之一，也是最能体现选手组织能力的试金石。参考设计用上下或左右结构：上半部分是温度数值和调节滑块，下半部分是风速档、出风模式、前挡除雾和后挡加热的开关阵列。温度调节必须同时支持滑动调节和点击加减，风速用档位图标而非滑条，因为档位是离散逻辑，滑条是连续逻辑，表达错误会被懂行的评审一眼看穿。出风模式用风向示意图标配合高亮表示当前模式，图示化表达在这里比文字按钮更直观。

空调页与设置页常常混淆，需要区分清楚。空调页负责温度、风量、风向这类"舒适环境"控制；设置页负责系统级配置，比如显示亮度、蓝牙设备、驾驶模式联动、语音助手、恢复出厂设置。设置页一般是列表式表达，每行由图标、名称、当前值、右侧箭头组成，点击进入二级详情或弹出选择器。这类列表页特别适合用组件化批量绘制，做出来整齐划一，评审观感会好很多。

5. 交互标注与原型演示：让方案"活"起来

5.1 交互链路标注方法

一份合格的原型图，静态界面只是底料，交互标注才是精华。Figma里可以用连线把触发元素和跳转目标连起来，也可以用编号批注的方式：在每个可点击元素旁边标注一个数字，对应图例里写清楚"点击-跳转到-音乐播放页-带动效A"。我在参考答案里推荐编号批注配合热区覆盖的方法，这样评审既能看懂单个元素的交互，也能顺着编号把整条操作链路走一遍。

这里有一个实用技巧：每个页面至少标注一条"从桌面进入本页的路由"和一条"从本页返回桌面的路由"，再把最常见的用户操作链路标注完整。以导航页为例，要标注的链路是：桌面点导航卡片进入导航页、点击搜索框输入目的地、选择搜索结果开始导航、导航过程中点击结束导航返回桌面，这四条链路能覆盖导航模块80%的关键交互。其余低频链路可以放在附注里说明，不必全都画成连线，否则原型会乱成一团。

5.2 状态设计与页面完整性

前面多次提到"状态"，这里单独说一下，因为这是很多选手的盲区。任何一次用户操作，在真实系统里都伴随多个中间状态：加载中、成功、失败、空数据、无网络。原型图里至少要体现三个关键状态：首次加载的骨架屏或加载指示、操作成功的反馈提示、操作失败的错误提示。以音乐页为例，点击播放按钮后，要画一个"正在加载"的短状态；网络断开时，要画一个带重试按钮的错误页面；收藏列表为空时，要画一个带引导文案的空页面。

这些状态在外观上不一定需要完整的整页设计，可以用一个分支卡片或者状态气泡表达，但在功能清单里必须存在。我习惯在每个页面的设计稿下方附一个"状态列表"，例如"正常态-加载态-空态-错误态"，画完一个页面就逐项检查一遍。这个习惯在比赛时间紧张时特别管用，既能保证不漏状态，又能在评审时展示出完整的设计思维。

5.3 快速制作可演示的原型

比赛不仅要交静态原型，很多赛项还要求提交可点击的演示原型。我的建议是别从零开始一个个页面添加连接，而是先确定"演示主线"：评审会按哪条路径操作，就先把这条路径上的所有跳转做出来。比如演示主线设定为"桌面-导航-搜索-开始导航-返回-音乐-切歌-空调-调节温度"，那么只做这条路径上的跳转，演示时就很流畅。做完主线之后有剩余时间，再补支线交互。

Figma的Prototype功能比较简单直接，选中元素拖到目标页面即可；Axure RP可以做得更细，支持条件判断和变量，但比赛时间有限，不建议在变量上花太多时间。演示原型还要设置合理的触发方式：主按钮用点击触发，卡片区用点击触发，滑块用拖动触发。如果某些交互在演示环境里不好模拟，比如"长按""多指手势"，不要硬做，用文字标注说明真实行为即可，评审更看重逻辑是否完整而非演示特效多炫。

6. 常见问题排查与比赛时间分配

6.1 高频扣分点：从评审视角挑毛病

我结合近几年赛项情况和带领学生的经验，把车机中控原型图设计最常见的扣分点整理成了一张速查表，列在这里供大家自我检查。

评审一场下来通常要看几十份方案，如果你的作品在这些硬性规范上没有明显硬伤，哪怕创意稍微平庸，分数也会高于那些界面很炫但漏洞百出的方案。这跟真实行业里的评审逻辑是一样的：工程化能力先于视觉审美。

6.2 比赛时间分配与过程管理

车机中控原型设计在赛项中一般给两到四个小时，具体时间视赛制而定。我的建议是严格按照"需求规划20%、设计规范与画板定稿10%、核心页面绘制50%、交互标注与状态补全20%"的比例分配时间。很多选手败在"起手就画"，没有规划直接开干，结果画到一半发现模块漏了、尺寸错了，只能返工重来，时间全部耗在低效循环里。先把六模块清单和流转图画在草稿纸或设计软件的批注层上，再开始画正式页面，看起来慢，实际上是全场最快的路径。

绘制顺序上优先做"高权重页面"：主屏桌面、导航页、音乐页、空调页这四个页面决定了整套方案的上限，必须先完成并打磨到位。电话、设置这类低权重页面可以往后放，甚至用统一的模板快速生成。画完一个页面立刻做一次自检：查尺寸规范、查状态列表、查触控目标大小、查全局快捷控制栏是否保留。每次自检花不了两分钟，却能避免最后阶段集中改稿的痛苦。

6.3 备赛练习的几个独家技巧

最后分享几个我在指导备赛时压箱底的经验。第一个是"逆向拆解训练"：找几款主流量产车机的实拍图，在限定时间内把界面反推成原型稿，重点练习捕捉布局规律、配色比例和交互细节，练几轮之后，看到一个界面就能条件反射地拆出栅格和组件层级。第二个是"时间盒练习"：给自己限定60分钟完成一套极简车机原型，强制自己在压力下做取舍，这个练习能显著提升比赛时的决策速度。

第三个技巧可能听起来有点反直觉，就是"主动设计一个明显缺陷再修复它"。比如故意把所有触控目标都缩小到40像素，然后去点击演示，感受误触率，再亲手修复到64像素。只有经历过"做小了"的实际不便，才会在设计时真正敬畏规范。技术上的问题都能通过熟练补救，但意识和规范性问题，只有实战踩过坑才能彻底根治。

这份参考答案的完整思路到这里就全部讲完了。我在带赛和实际做车载项目时最大的体会是：车机中控原型图设计表面上是画界面，本质上是在回答"驾驶员在移动空间中如何安全高效地获取信息与完成任务"这个问题。你把这个问题想透了，画出来的每一根线条和每一个标注都会有依据，评审看到的就不只是图，而是一套完整的设计判断力。