企业官网建设流程全解析

当师傅把“2026年职业院校技能大赛移动应用设计与开发赛项—车机中控原型设计素材”这个标题甩给我的时候，我第一反应是这届比赛有点东西。车机中控，不是手机App，不是后台管理系统，而是车里那块大屏——把手机上的交互逻辑搬到驾驶场景，这里面的门道和考场上的坑，比想象中要多得多。

这篇文章不聊虚的，直接基于我这两年带学生备赛、自己也在业余时间折腾车载HMI的经验，把这个赛项从题目拆解、素材准备、设计规范到实操落地的完整链路讲透。不管你是第一次接触这个赛项的选手，还是想在赛项里拿高分的指导老师，这篇内容都能给你一份可直接“抄作业”的备赛路线图。

1. 赛项理解与备赛思路拆解

1.1 先搞懂赛项到底在考什么

移动应用设计与开发赛项，名字听起来像传统的App开发，但加上“车机中控”这个场景后，整个考查的侧重点就变了。车机中控原型设计的核心不是“做出一堆好看的界面”，而是在驾驶这个特殊场景下，如何用最小的操作成本完成最高频的信息获取和功能控制。

从我观察到的近两年赛项趋势来看，这类题目的评分点往往集中在三个方面：

第一是设计规范度。车机界面不是自由发挥的艺术创作，它有严格的尺寸体系、间距规范、色彩系统。评委拿到你的源文件或者演示原型，第一眼看的不是哪个图标好看，而是你的设计系统是否自洽——组件之间的间距是否统一、字号层级是否清晰、色彩是否兼顾了白天和夜间两种模式。这一点和互联网公司的UI设计规范是相通的。

第二是交互完整性。原型设计不只是静态图，赛项要求的是一个可交互的、能演示完整业务流程的高保真原型。从开机启动、主界面加载、功能切换、状态反馈、异常处理到息屏，这一整套流程中每一帧状态都要被设计到。很多选手栽跟头的地方就在这儿——只画了主界面，点进去之后的二级页面、空状态、加载状态全都没有。

第三是场景适配度。这是车机特有的评分维度。驾驶场景意味着什么？意味着司机的注意力大部分在路上，视线不能长时间离开前方。所以你的设计必须考虑大图标、高对比度、简洁的文案层级、支持语音交互的入口，甚至在配色上要尽量避免高饱和度的红色大面积使用（红色在车载环境中往往代表警报）。

1.2 素材准备的核心逻辑：大于界面本身

很多选手一上来就埋头画界面，这是典型的“战术勤奋掩盖战略懒惰”。车机中控原型设计的素材，不只是一堆PNG图片和图标文件，而是一个完整的设计资产库，包括：

• 车机屏幕尺寸规范（1920x720这一档是常见分辨率，但部分高端车型会用更长的带鱼屏，比例差异很大）
• 完整的图标系统（线性图标为主，包含选中态和非选中态）
• 真实的车辆数据（车速、电量、续航、空调温度、座椅状态等，用于原型中的状态展示）
• 导航地图素材（简化的路线图、POI图标、车道引导指示）
• 媒体资源（播放列表封面、歌曲信息、进度条状态截图）
• 按钮和控件的多状态素材（默认态、按下态、禁用态、加载态）

这些素材在备赛阶段就应该系统性地准备好，而不是等题目发下来再去网上临时找。我个人的做法是维护一个“车机素材宝库”，按类别分文件夹存放，每类素材至少准备两套风格，一套偏科技冷色调，一套偏温暖浅色调，以应对不同主题的题目。

1.3 为什么说这是“设计+开发”的双重挑战

有一点容易被忽略：虽然赛项名称里有“原型设计”，但现在的趋势是原型设计越来越“高保真”，也就是说，静态界面素材只是基础，真正拉开分数差距的是原型能否在真机上流畅跑起来。

这就逼着选手必须同时具备设计能力和一定的工程实现能力。你需要理解设计稿里每个元素如何变成真实的界面组件，动效的时间曲线怎么调，数据怎么绑定到界面元素上。备赛时我见过不少“设计稿惊艳，演示效果翻车”的案例——界面静态看很好看，但一点击跳转，动效卡顿、状态错乱，分数直接掉一个档次。

2. 车机中控设计规范与素材体系搭建

2.1 读懂屏幕：车载场景的尺寸与安全边界

车机中控屏和手机屏有本质区别。手机是你拿着看的，车机是你在驾驶途中“瞥一眼”的。这个区别决定了尺寸规范和布局原则。

目前主流车机分辨率集中在1920x720和1280x480两种，部分新能源车型会用到更长的2944x768这类带鱼屏。备赛时建议以1920x720作为主战场素材尺寸，因为这个尺寸兼顾了常见的横屏比例，而且和电脑设计软件的工作区匹配度高。

在1920x720这个画布下，有几个关键的安全区域数值需要记住：

• 顶部状态栏高度：60px左右，用于显示时间、信号、温度、车速等全局信息
• 左右安全边距：至少60px，防止UI元素被屏幕边缘遮挡
• 底部Dock栏高度：80px-90px，这是高频功能入口区
• 卡片间距：统一使用20px或24px的间距体系

注意：这里说的px是设计稿的逻辑像素，不是物理像素。如果评委要求在真机演示，需要额外考虑设备像素比（DPR）的换算，别等临场才发现设计稿和真机显示比例不对。

另外，车机界面设计必须把驾驶安全边界放在首位。视线离开前方的时间要尽可能短，所以所有核心操作控件的最小触控区域建议不低于 72x72px（设计稿尺寸），视觉上可以小一点，但交互热区一定要大。

2.2 配色系统：白天模式与夜间模式的双轨制

车机界面的配色是最能体现设计专业度的地方。与手机App不同，车机有强烈的环境光变化——白天阳光直射屏幕时，界面必须够亮才能看清；夜晚行车时，高亮度界面会严重干扰驾驶视线。

所以，一套完整的车机中控原型素材，必须包含浅色模式和深色模式两套配色系统，或者至少在设计时就要考虑色彩的可切换性。

我建议备赛时直接做一套完整的“双主题”素材库：

• 浅色模式下，主背景色建议控制在 #F5F6F8 左右，主文字用 #1A1A1A 高对比度色，辅助信息用 #8C8C8C
• 深色模式下，主背景 #121212，主文字 #FFFFFF，卡片底色用 #1E1E1E 拉开层级
• 品牌主色选择上，推荐低饱和度的蓝色系或蓝紫色系，这类颜色在车载环境中视觉干扰最小

配色这条线上的坑很容易踩：很多选手喜欢大面积使用高饱和度的渐变，单看确实炫酷，但模拟驾驶环境时就会发现严重分散注意力。车机设计的核心原则是**“信息优先于装饰”**。

2.3 组件素材库：一套好用的设计资产能救命

实操层面，我强烈建议在备赛初期就建立一套车机专用组件素材库，把最高频的控件做成可复用的组件。这个工作花费的时间不会很多，但在赛场上的回报率极高——当大家都在两三个小时内赶设计稿时，你有现成的组件库，等于提前交卷的基础。

组件库至少需要覆盖以下类别：

• 状态栏组件：时间、信号、车速、温度、电量、座椅状态等
• 侧边栏导航：一级导航图标（主页、导航、媒体、电话、车辆设置、空调）
• 卡片容器：首页快捷卡片、媒体播放卡片、行程信息卡片
• 弹窗组件：确认框、提示框、语音交互弹窗
• 控制组件：滑块（音量、空调温度、风量）、开关、单选/多选
• 键盘组件：拼音键盘、数字键盘（用于搜索目的地）

这些组件用设计软件制作时，注意统一命名和分组，比如“Nav/Home/Default”“Nav/Home/Active”这样的结构，导出素材和团队协作时都能省很多沟通成本。

3. 实操过程：从素材到车机中控原型的完整落地

3.1 工具选型与项目工程初始化

先说工具。车机中控原型设计，主力工具通常是设计软件（如设计师常用的一线软件）配合原型工具。我见过有些选手只用设计软件硬画，然后导出图片做演示，这样做的效果其实很吃亏——交互表现力不足，演示时非常单薄。

我推荐的组合方案是：

• 视觉设计：使用专业的UI设计工具（如国内普及度较高的设计平台工具），这类工具内置了组件变体、自动布局、交互连线功能，特别适合搭建设计系统
• 高保真原型：使用专业的原型设计工具，或者部分开发能力强的选手直接采用前端技术栈搭建可运行原型

打开设计工具后，第一步是创建1920x720的Frame，然后设置好网格系统。我习惯在Frame里拉出12列栅格，列间距24px，左右边距60px。这样的栅格系统能保证后续所有界面的对齐关系是有数学依据的，而不是凭感觉摆放。

3.2 从零搭建车机主页：一个可复用的设计流程

拿主界面举例，我讲一下完整的设计流程，这是整个原型里最核心的界面。

第一步，画状态栏。左上角放Apps菜单按钮，中间放时间，右上角放车辆状态区（外温、车速、电量）。这里设计时要注意电量和车速这两个信息是驾驶中的高频查询对象，放在右上角属于驾驶员的视线自然延伸区，不需要大幅转头就能看到。

第二步，画内容主区。1920x720去掉状态栏60px、Dock栏90px，中间还剩下大约570px的高度，左右各留60px边距后，内容区宽度约1800px。我一般在这个区域里做“左侧地图+右侧卡片”的布局——左侧大约占三分之二的面积放导航地图缩略图，右侧三分之一放媒体控制、行程信息、空调快捷控制三张卡片。

第三步，画底部Dock栏。以“主页-导航-媒体-电话-车辆设置”五个核心功能为主，图标使用线性风格的SVG，选中态和未选中态都要画出来，选中的图标可以配合一个椭圆形的背景托盘来强化状态感。

这套流程走下来大约需要一个多小时。如果素材齐全、思路清晰，两个小时内完成整套车机原型的静态界面是完全可行的，剩下时间都应该投入到交互连接和演示打磨上。

3.3 关键页面详解：导航、媒体、车辆设置的交互逻辑

导航页面是车机中控里业务逻辑最复杂的模块，也是评委重点关注的模块。你需要做出“搜索目的地-路线规划-开始导航-导航进行中”的完整闭环。

备赛素材中要准备好：搜索页面的输入框状态（空状态、输入状态、搜索结果列表）、路线卡片（包含预计时间、距离、拥堵程度标签）、导航中的地图界面（车速、转向提示、剩余距离、到达时间）。特别要注意的是导航过程中的主次信息层级——转向提示和距离是主信息，要放在正上方易扫视的区域，车速和到达时间是次信息，放在两侧即可。

媒体页面相对简单，但要做出“真实感”。播放界面的核心是进度条和专辑封面的联动。原型里至少要让进度条可以拖动，拖动时封面跟随状态切换，歌曲信息实时更新。这个模块的素材建议准备5-6首虚拟曲目，封面图要有风格区分，避免评审判断你在偷懒。

车辆设置页面是体现细节功力的地方。灯光控制、座椅调节、驾驶模式选择、充电/加油设置，这些场景里充满了控件状态——拨杆开关、滑块、单选卡片。我在备赛时发现一个容易忽略的点：车辆设置界面里的每一项设置最好都要有即时反馈，比如滑动亮度滑块时，界面上的模拟亮度要同步变化。这种小细节在演示时特别抓人眼球，评委会觉得你真的在“做产品”而不是“画图”。

3.4 动效与交互连线：原型不再是一张静态图

把静态界面变成高保真原型，关键在“连线”和“动效参数”。

基础的交互动效参数，我提供一套可以直接使用的参数建议：

• 页面切换：淡入淡出+轻微位移，时长250-300ms，缓动曲线用ease-out
• 卡片展开：缩放+透明度变化，时长200ms，需要保证展开后信息层级清晰
• 侧边栏滑入：从左侧滑入，时长280ms，同时主背景要加一层半透明遮罩，透明度0.6左右
• 状态切换：选中态切换用渐显渐隐方式，不要用跳跃式切换

这些参数不是凭空定的，都是参考了车载HMI设计规范和主流车型的实际交互表现。参赛时用这套参数做出来的原型，演示时的手感会比默认的“硬切”好非常多。

交互连线上有一个关键习惯：每一屏状态都要有出口。很多选手在原型的某个页面点了之后没有回到上级的路径，或者没有空状态、错误状态的演示入口，评委演示点到一半就卡壳了。让原型里的每个可点击元素都有明确的目标页面，即使那个页面内容很简单，也要有，这体现了你交互设计的闭环思维。

3.5 前后端的桥梁：让素材更贴近真实开发

如果你的赛项要求比较高，连“真机运行演示”都要纳入考核，那素材准备的深度又不一样了。此时你需要的不只是设计稿，还有一份可运行的工程文件。

在备赛训练中，我建议有开发基础的选手把原型用前端技术实现：HTML/CSS/JavaScript或者对应的跨端框架都可以。素材层面要注意：

• 图标和插画导出为SVG格式，而非位图，保证缩放无失真
• 所有图片资源按1x、2x两套密度导出，真机适配更稳
• 字体选开源可再分发的字体，避免版权问题
• 色彩变量统一用CSS变量管理，切换夜间模式就是切换一组变量，工程上非常清爽

这套工程化的思维也许赛场上用不全，但备赛过程中用工程思维去组织素材，你会发现自己对“原型设计”的理解层次跟只会做视觉稿的选手完全拉开差距。

4. 常见问题与避坑指南实录

4.1 备赛期最容易踩的五个坑

翻看我这几年积累的备赛记录，把出现率最高的问题列成一张表给大家参考：

4.2 比赛现场的一些细节经验分享

说几个现场经验，这些在平时的练习里不太能感受到，但真到了赛场非常关键：

熟练度就是分数。车机中控原型设计的时间非常紧张，从题目解析到最终演示可能只有几个小时。备赛阶段我要求自己做到：给定一个陌生主题，30分钟内完成功能架构梳理，60分钟内产出主界面的设计稿。这个速度不是天赋，就是素材库和组件库够齐全后的自然结果。

保存备份要有三份。设计源文件、导出素材、演示工程，分别存U盘、网盘和本地。比赛现场的电脑环境是不确定的，曾有人因为设备故障导致工程文件打不开而崩盘，多备份可以在赛场上救你一命。

演示脚本要提前写。原型做完别急着交，自己先把演示流程走三遍：第一遍看功能是否都走得通，第二遍看动效是否流畅，第三遍对着镜子练语气和节奏。演示时能说出“这里我为什么这样设计”、能讲清楚你的思考过程，比界面本身的加分效果更明显。

4.3 如何把设计理念讲给评委听

有一次答辩，评委的问题让我印象深刻：“你为什么把空调控制放在主页的右侧卡片里？”这个问题的背后是考察设计者的场景化思维。

我当时是从三个维度回答的：第一，驾驶过程中空调是高频但非紧急的操作，放右侧卡片属于功能可达但不干扰主视区；第二，卡片内默认展示当前温度，需要调节时点开面板，两级操作即可完成，符合车载操作“三步以内”的原则；第三，如果用方向盘快捷键控制，卡片则是反馈状态的重要载体。

这类思考就是拉开分差的关键。备赛时不要只埋头画图，每完成一个界面，问自己三个问题：这个功能在这个位置的理由是什么？用户最需要的是什么信息？如果移除这个元素会怎样？把这些答案写在设计说明文档里，答辩阶段直接用。

5. 后续可以扩展的方向与资源维护

赛项结束了，但素材资产可以持续生长。我自己在备赛结束后会把所有设计源文件、素材、演示工程归档整理，按“版本-日期”命名保存，同时把备赛过程中新发现的组件补进素材库。这套东西现在已经成为我带下一届学生的“独门教材”。

如果你的精力允许，建议把这一套车机中控原型设计素材往两个方向扩展：一是加入语音交互的可视化反馈界面（既然驾驶不能分心，语音就是天然的人机交互入口）；二是加入仪表盘与中控联动的场景素材（很多比赛开始往“多屏联动”方向出题，这个会成为新的加分点）。

关于车机中控原型设计，我个人最大的体会是：这不仅仅是设计技术的比拼，更是对“驾驶者需求”理解深度的比拼。刚才上面说的素材库、组件规范、动效参数这些其实都是工具层面的东西，你能不能在有限时间内洞察题目的场景痛点，再用界面给出一个合理的、优雅的回答，这种系统的项目化思路才是备赛中最值得投资的部分。

希望这篇内容能帮你在备赛路上少埋一些坑。有不同想法的话，也欢迎交流。