去年我带学生参加省赛选拔的模拟演练有个场景到现在都印象深刻一支队伍花了两个多小时画了三张很精致的车机中控屏——有渐变背景、有毛玻璃卡片、图标也挑得很漂亮。但评委追问的时候他们连音乐模块和空调模块之间的层级关系都说不清楚主界面上的快捷卡片点击后跳去哪一页也没有闭环。最后原型设计模块的分比他们自己预估的少了将近两成。问题不出在画工出在思路。2026年职业院校技能大赛移动应用设计与开发赛项把方向定在车机中控很多人还抱着手机APP那套经验直接平移过去的想法备赛这恰恰是最容易被拉开差距的地方。原型设计在这类赛项里的定位从来不是画几张好看的屏而是在规定时间内把一套逻辑合理、结构完整、交互闭环的产品方案用可视化的方式表达清楚并且给后续编码环节留好可对接的规范。这篇文章我就围绕车机中控这个方向把原型设计模块从赛项理解、评审逻辑、车机特有规范、素材准备到完整实操流程一次性讲透。不管你是参赛选手还是指导教师看完应该能直接调整备赛思路。1. 赛项押注车机中控的底层逻辑与备赛启示1.1 为什么大赛方向会从手机APP转向车机中控这几年智能座舱的发展速度大家有目共睹。车已经从代步工具变成了移动生活空间中控大屏成了车内交互的核心入口。从产业端看车机应用开发的人才缺口非常大而这恰恰是职业院校毕业生有可能切入的岗位方向。技能大赛的赛项设置向来有风向标属性——企业需要什么样的人大赛就考察什么样的能力。2026年赛项选定车机中控本质上是把行业真实需求搬进了赛场。别把这件事当成简单的换了个题目背景。车机中控和手机APP的开发链路有重叠但差异也相当明显。车载场景下用户处于驾驶或乘车状态注意力资源极度受限屏幕横置、操作距离远、还可能伴随振动和光线变化。这些约束直接决定了界面设计的优先级。大赛把原型设计单独拿出来作为考察环节就是要看你有没有能力在特定场景约束下做出合理的移动应用设计方案。1.2 备赛方向调整不练画屏练设计思维很多学校的备赛方式还停留在多临摹几套好看的UI模板上。我可以直接说这个方向在南辕北辙。原型设计模块考察的是三件事能不能理解需求场景、能不能搭出清晰的信息架构、能不能把交互逻辑用原型工具表达完整。好看只是基础分逻辑才是分水岭。我建议备赛时间重新分配一下30%用来熟悉工具和做视觉规范40%用来做信息架构和流程设计训练剩下30%用来练习在规定时间内把原型做完整、做闭环。设计思维的训练无法临时抱佛脚这是每天都要积累的。1.3 车机中控场景下选手要补哪些知识盲区手机APP原型设计大部分学生多少接触过。车机中控则有几个典型的知识盲区需要提前补齐车机屏幕的尺寸比例和分辨率体系横向为主短边更短驾驶场景下的安全交互约束行驶中哪些操作不可用、哪些功能必须限制车载UI的视觉规范深色主题为主、高对比度、文字尺寸偏大车控功能的状态逻辑比如空调的吹脚/吹脸/除雾模式切换不是简单按钮这些内容平时上课很少系统讲。但如果赛前没有补上等进了赛场拿到题目再临场摸索时间根本不够用。2. 原型设计环节的评审逻辑评委到底在看什么2.1 原型设计是独立模块但它的影响范围远超自身从近几年职业院校技能大赛移动应用类的赛制来看原型设计通常以独立模块或独立任务的形式存在常见的是在赛程第一天或前半程完成后续的编码环节要直接基于这套原型去实现。也就是说原型设计得分只是一方面更关键的是它直接影响后面编码模块的效率和质量。原型如果结构混乱、标注不清编码环节的队员就不得不反复猜测页面关系和交互逻辑相当于给整个团队挖坑。很多选手意识不到这一点在设计原型时只顾自己画得爽页面命名随意、交互流程断层、尺寸标注缺失结果原型做完了开发那边却用不上等于白做。我强烈建议备赛阶段就建立一种意识原型设计模块的交付物不只是一套图而是一套能让另一个人照着做出来的开发依据。2.2 从评分角度拆解四个维度决定你的原型分数我把参与赛项评分和赛后复盘见过的评分维度归纳为四个层次维度一完整性。题目要求的页面是否都覆盖了有没有漏页主流程是否跑得通这是最基础的得分项也是最容易丢分的。很多队伍时间不够只把主界面做了精细设计二级页面、弹窗、状态页全都没画完整性直接崩盘。维度二规范性。是否遵循了统一的视觉规范字体、字号、间距、配色有没有一套统一的标准页面尺寸是否符合作业要求切图导出是否规范这个维度考察的是设计与开发的衔接意识。维度三交互逻辑。点击某个入口要跳转到哪一页、返回逻辑是否闭环、状态切换是否有明确反馈。评委可能不会逐个页面点过去但关键路径的交互流畅度他们一定会验证。维度四创新性。在满足需求的基础上有没有让方案加分的亮点比如空调调节的一个新颖交互方式、仪表联动的智能提示、个性化的桌面卡片布局。创新不用多一个到两个真正合理的亮点就足够。这四个维度分量不同但有一个基本原则按顺序满足。先保完整再抓规范然后理逻辑最后谈创新。备赛中最常见的错误就是顺序颠倒——一上来就抠视觉细节结果连页面都没画全。2.3 原型就是画屏的误区害了多少队伍我必须反复强调这一点。原型设计的工作核心是设计画只是最后落地的动作。有些队伍理解的原型设计就是把几个页面画得漂漂亮亮放到原型工具里连一下热区就认为完成了。评委问几个问题就能测试出你有没有设计能力这个页面在弱网环境下怎么显示有没有空态/加载态设计用户误触了这个按钮怎么办有没有防误触机制或二次确认这个功能的状态有几种分别怎么呈现有没有状态穷举页面上的信息为什么这样排有没有设计理由还是随手摆的这些问题没有经过真正的设计思考是答不上来的。备赛阶段我会反复让学生做一件事拿到一个场景先别急着画花15分钟把问题想清楚——给谁用、在什么环境用、核心任务是什么、信息优先级怎么排。想清楚了再动手效率反而更高。3. 别把手机UI的习惯带进车机五大硬性约束3.1 屏幕比例与分辨率体系横向多短边才是常态手机屏幕是竖屏为主车机中控几乎全是横向。以市面上常见车型为例1920x720是比较典型的中控分辨率长宽比大约是8:3另外也有1280x480、2560x1440等规格比例普遍比手机扁得多。这个差异直接影响的不是简单拉宽页面而是布局逻辑。横向空间充裕纵向空间极度紧张传统手机APP那种顶部导航内容区底部Tab栏的三段式结构在车机上经常会被迫调整为左侧导航/侧边栏右侧内容区的结构或者底部悬浮栏的方案。备赛时建议固定使用1920x720这套分辨率做练习。考试题目给的分辨率大概率跑不出常见车载参数的范畴但只要设计时勾选了适配性没有把元素坐标写死拿到什么分辨率都能快速调整。3.2 安全交互驾驶场景下有的操作必须慢一点手机APP设计追求的是越快越好车机中控设计的第一原则是安全优先。这意味着界面里有一类特殊的状态设计——行驶禁用。最常见的例子行驶过程中视频播放必须强制停止或切换为仅音频文字输入类操作要限制或提供语音替代方案一些车控设置比如后视镜调节、车辆深度设置在行驶中直接不可用。原型设计的时候不能只画正常可用的状态还要把禁用状态受限状态也设计出来。按钮置灰、弹出提示、自动切换界面这些细节都是评委眼中懂车机的体现。很多队伍在这里丢分就是因为只画了静态主页完全没有考虑行驶和驻车两种场景的状态切换。3.3 注意力资源稀缺视觉层级和信息密度要重新设计驾驶员的视觉资源是借用的大部分注意力必须留在路况上。这就对车载UI提出两个要求第一核心信息要一眼可读第二操作步骤要尽量精简。体现在界面上首先是文字体系的调整。车机UI的主标题字号通常在28-36dp正文在20-24dp辅助信息16-18dp比手机端普遍大2-4个级别。其次是信息密度的控制一屏内不要塞太多功能模块。手机APP可以堆七八个入口车机界面建议控制在三到五个核心模块其余的收纳进二级页面。再一个容易忽略的点是页面层级深度。用户在驾驶中操作每多一个页面层级就多一分分心风险。设计车机原型的时候尽量把最高频的操作控制在两级以内一层是主页中的快捷入口二层就是操作面板本身。3.4 触控目标与误触防护尺寸不能按手机标准来车在行驶中会有颠簸手指点按的精度远不如静态环境下。因此车机界面上的触控目标尺寸标准要比手机更苛刻。手机端建议触控目标不小于48dp车机上这个值应该抬到56-64dp高频功能甚至建议做到72dp以上。目标之间的间距也要加大否则行驶中的误触率会非常高。同时要考虑防误触的交互设计。比如音量键、空调温度调节这类高频按钮适合做滑动调节而不是连点危险操作如恢复出厂设置、断开蓝牙设备必须有二次确认弹窗。这些交互细节正是原型设计阶段应该体现出来的增值点。3.5 深色主题与高对比度不是审美偏好是安全要求夜间驾驶时车内过亮的屏幕会造成挡风玻璃反光直接影响行车安全。所以车机UI以深色主题为主不是一个风格选择而是安全需求。设计车机原型时要记住默认提供深色背景方案对比度要保证在强光和暗光环境下都能看清。具体操作层面背景色一般用深灰/深蓝色系比如#121417到#1E2329之间前景文字用高亮度色#FFFFFF系列辅助信息允许降级但对比度不能低于4.5:1。强调色或品牌色可以亮一点但大面积高饱和色块在车机上是大忌。把这些原则落到原型设计的样式规范里视觉规范这一项的分就稳了。4. 赛前素材库要准备的不只是图标4.1 素材库思维从临时找图到开箱即用看这个赛项名称有不少人会把素材理解成赛前准备一堆图标、背景图、车辆图片。这么理解没有错但维度太窄了。赛项里的素材不只是图片资源还包括设计规范、组件库、模板、字体、状态样式以及一切能够让赛场上快速拼装成完整原型的东西。我见过准备充分的学校会把车机原型素材整理成一个完整的文件夹体系比赛时只需要根据题目需求做选择组合调整而不是从零开始画。也有学校完全裸考到了赛场才开始搜图标、调字体光这些准备工作就消耗掉将近四十分钟。差距就是从这里拉开的。原型设计模块给的时间通常非常紧张每一分钟都很金贵素材库的完备程度直接影响你能画多少页面。4.2 图标资源注意风格统一别做混搭风车机端图标资源最常用的来源是Material Design Icons、Font Awesome和阿里图标库开源协议在竞赛场景下使用问题不大。但有一个常见的坑从不同来源拼接图标风格不统一线性和面性的混在一起视觉上非常山寨。建议赛前就定一套图标风格统一用一种——要么线性统一要么面性统一线条粗细保持一致。以车机中控场景为例默认推荐2dp线性图标风格图标集合覆盖导航、媒体、电话、空调、车辆设置、座椅、车窗、灯光等高频场景数量在60-100个之间就够用。光这一件事就能让原型在视觉规范维度明显加分。4.3 车型素材与背景资源逼真度要在够用和炫技之间拿捏车机原型里经常需要出现车辆模型或中控台区域示意图用来表达车内环境。这类素材准备的核心技巧是不需要高清汽车渲染图而是找侧视或斜视角的车辆外形轮廓配合环境背景体现车内场景感。背景方面车机原型可以准备几套深色系的渐变背景模板以及毛玻璃卡片样式。这类背景模板的重复利用价值很高一套背景用在几个不同页面上既能保持风格统一又能节省大量时间。还有天气图标、道路场景图、倒车影像模拟图等都是高价值素材。有条件的话可以准备一套模拟的车辆状态面板素材包括车门开闭提示、剩余油量/电量条、胎压数值等遇到车辆相关的题目任务时可以快速拼装。4.4 字体和设计规范把看不见的分数提前准备好字体素材容易被忽略。车机场景不建议用太花哨的字体推荐思源黑体或HarmonyOS Sans这类现代无衬线字体。赛前要把字体族定义好主字体、数字字体各准备一套并预设加粗/常规两种字重。比字体更重要的是一套写好的设计规范文档或关键页面模板。包括色板主色、辅助色、警示色、背景色、文字色、字号等级表、间距体系、圆角规范、阴影规范。这些规范既可以用在设计稿里也可以整理成一页设计规范总览放进素材包。答辩或者演示的时候把规范页亮出来就是最直观的专业性证明。4.5 素材库的组织方式命名与归档也是竞赛能力素材库只有组织得好才谈得上开箱即用。我建议按以下目录结构来归档车机中控素材库/ ├── 01-设计规范/色板、字体规范、组件样式定义 ├── 02-图标库/按线性图标/面性图标分子目录 ├── 03-背景与纹理/渐变背景、毛玻璃卡片、深色纹理 ├── 04-车型与场景/车辆外形、中控台示意、道路场景 ├── 05-组件模板/导航栏、侧边栏、卡片列表、按钮、弹窗、状态显示 ├── 06-页面模板/主界面布局模板、空调面板模板、媒体播放模板 └── 07-切图资源/1x、2x导出规范说明特别说明一下组件模板的价值。平时把导航栏、侧边栏、卡片列表、弹窗、状态条做成可复用组件赛场上的工作从画页面变成了拼页面快速而且一致性有保障。切图资源文件夹里可以放一份导出规范笔记提醒自己什么样的图怎么命名、怎么导出编码阶段对接时直接照着用。5. 完整走一遍从需求到可交互原型的实操流程5.1 工具选型建议赛场环境下稳定比炫酷重要原型制作工具方面目前市面上主流的有Axure RP、墨刀、即时设计、Figma等。比赛场景下选工具考虑三个因素上手熟练度、协作便利度、网络依赖程度。Figma功能强大但在部分赛场环境下网络受限登录和同步会出问题。Axure RP是桌面端软件离线可用交互功能强大适合做复杂逻辑的展现缺点是学习曲线稍陡。墨刀和即时设计都属于国产工具原型和UI设计一体化对于中职学生来说学习成本相对低。我的建议是不要临场尝试新工具就选你们团队平时练习最熟的那一款。工具本身不影响得分影响得分的是工具之外的设计能力。赛前把常用组件在工具里提前建好组件库会比比赛时临时拖控件快得多。5.2 需求分析阶段15分钟的思考节约1小时的返工拿到赛题第一步不是画界面而是结构化地拆解需求。以车机中控常见的音乐播放模块为例拆解思路如下用户是谁驾驶员和前排乘客核心场景是驾驶中听音乐核心任务选择音乐、播放控制、切换音源、调节音量功能清单音乐列表、播放器控制、收藏、音源切换本地/USB/蓝牙/在线、音量调节、播放模式特殊约束行驶中降低操作复杂度核心控制按钮要处于拇指可达区域歌词显示不能占用过多注意力建议用15分钟时间把需求拆解成功能清单再用10分钟画出信息架构草图页面层级和跳转关系然后再开始画原型。这一步看着费时间实则是最能规避返工的环节。实际比赛中很多队伍因为跳过这一步做到一半才发现页面关系理不清推翻重来损失的时间远超15分钟。5.3 低保真线框把布局和优先级定下来进入画原型阶段我建议先做低保真线框再做高保真视觉稿。有些选手一上来就直接套背景、拖图标、调颜色等布局不合理又整个删掉重来极其浪费时间。低保真阶段要解决三个问题信息位置核心功能放哪里辅助功能放哪里。以车机主界面为例左侧通常是状态栏快捷信息或导航栏中间偏上是大尺寸的导航卡片或时钟显示底部通常放Dock栏和主要功能入口信息层级最高频的操作和最重要的信息要在一屏内可见层级不要超过两级触控区域的划分每个可点击区域的大小是否达到了车机标准56-64dp低保真用灰白方框表示即可重点关注信息架构的合理性而不是视觉细节。5.4 高保真视觉稿套素材库只是第一步规范统一是关键线框确认后就可以把素材库里的组件拖进来做高保真。这个阶段要特别留意视觉规范的统一执行。我见过很多作品单个页面都很好看但页与页之间按钮圆角不统一、图标规格不统一、间距各行其是这种拼凑感非常掉分。统一规范的操作方法先用一张原型规范页把按钮样式主按钮、次按钮、图标按钮、卡片样式、文字层级确定下来然后所有页面都从这套规范里取样式。做任何页面之前先看一眼规范页再决定用哪个组件基本不会跑偏。高保真阶段另一个要点是状态的覆盖。一个页面不要只画静态正常图还要画关键状态——加载中、空数据、错误提示、禁用状态至少把这四类补上。这是完整性维度拿分的关键。5.5 可交互原型别把所有页面都连一遍关键路径闭环即可很多学生喜欢把所有页面之间全部设置跳转热区工作量巨大且容易出错。更好的做法是识别出评委最可能点击验证的关键路径保证关键路径的交互闭环。以车机中控场景为例关键路径通常是主界面 → 点击音乐卡片 → 进入音乐播放页 → 播放控制操作 → 通过返回或Home键回到主界面。这条路径上每一步的跳转都要顺畅页面状态要正确。此外空调调节、导航设置这两条路径也应打通。这几条核心路径闭环了就足够支撑演示和答辩。原型工具里的动效不用做得太复杂页面切换的推入/滑出效果即可。真正能加分的是状态反馈按钮按下去有明显变化、加载页有进度反馈、操作完成有轻提示。这些细节会让整个原型显得成熟。5.6 全流程时间分配建议基于我参加和指导赛项的观察一个完整的车机中控原型设计任务假设题目包含8-12个功能页面建议时间分配如下阶段时间占比关键产出需求分析与功能拆解15%功能清单、页面清单信息架构与流程图10%页面层级图、跳转关系图低保真线框20%所有页面的布局定稿高保真视觉稿35%按规范完成全部页面视觉稿原型的交互连线与闭环验证15%可点击原型关键路径闭环检查与修正5%页面命名规范、导出素材检查这个比例不是死板的但如果高保真阶段超过了45%说明前面线框阶段偷工了后面大概率会出问题。6. 高频扣分陷阱与现场应对经验6.1 假完成陷阱页面画完了流程跑不通有一种情况很常见页面数量看着齐全但实际点击起来很多入口是死链点了没有任何反应。评委在验证交互时发现大量死链扣分毫不手软。规避方法交卷前留出5分钟从主界面开始把关键路径挨个点一遍。发现哪个环节跳转丢失就立刻补上。这一步偷懒的代价可能比画少一页还严重。6.2 命名混乱陷阱页面名称与需求文档对不上原型里页面的命名建议直接采用需求文档中的功能名称——如主界面多媒体播放空调控制车辆设置而不要用页面1page2这种无意义名称。原因是评委在检查时会将原型结构和需求文档对照命名混乱会给评审带来困扰。页面的层叠关系也要符合信息架构的逻辑不要把页面乱放否则后期连线时自己都会迷路。6.3 取舍陷阱时间不够时该放弃什么备赛和真实比赛中都会遇到时间不够用的情况。这个时候的取舍策略是先保证页面数量和关键路径闭环再谈视觉精致度。也就是说优先把所有页面都画出低保真线稿确保完整性维度的分先拿到然后抓关键路径所在页面做高保真最后有余力再完善次要页面的视觉细节。反面典型是花大量时间把主界面一个页面打磨得极其精致剩下七八个页面全部空白。这种得分结构在评分系统里是最亏的。6.4 演示环节的准备原型设计模块也需要会讲一些赛项的原型设计模块最终可能需要选手面向评委演示和讲解设计方案。这时候评分除了看作品本身还看你的表达能力。讲解时遵循需求→方案→亮点→验证的逻辑先说题目要求解决什么问题再说你的方案怎么组织的接着指出一两个有特点的设计决策最后说明你如何保证流程闭环。不要从头到尾把每个页面念一遍评委没有那个耐心。我见过一个选手讲得很加分他只拿关键路径讲了三分钟主界面进入音乐播放展示播放控制的防误触设计再展示行驶中视频应用被限制的状态切换整个过程干脆利落核心信息全部传达。备赛阶段就应该提前准备好讲解的演讲稿不要指望临场发挥。时间允许的话在队内做一次模拟答辩让队友扮演评委提问比自己默默背稿有效得多。关于车机中控原型设计的备赛策略上面这些基本覆盖了从思路到实操的主要环节。最后再分享一点个人经验我每年带学生备赛都会发现最终的赛场发挥和平时训练最大的差距不在技能而在压力下的决策质量。平时多模拟那种时间只剩三分之一、页面还没画全的极端场景练多了赛场上就不容易慌。原型设计这件事本质上是在有限时间内做出一套完成度最高的方案而不是理论上最完美的方案。带着这个心态进赛场你的操作就已经领先大部分对手了。