2、原型设计基础：Figma/Axure工具介绍、页面布局原则、组件库搭建
说实话，很多刚入行的同学问我：「大屏项目到底从哪开始？」我的答案永远是——原型设计。你想想看，一个动辄几十万的大屏项目，如果连原型都没画清楚就直接开干，那后期改起来简直要命。我自己就吃过这个亏，所以今天咱们好好聊聊原型设计的基础。
2.1 工具选择：Figma vs Axure
先说说工具。市面上原型工具很多，但大屏项目里，我个人最常用的是 Figma 和 Axure。它们各有千秋，我分别说说我的使用感受。
Figma：协作利器
Figma 是现在的主流。为什么？因为它基于浏览器，不用安装，打开就能用。我在团队协作时特别喜欢它——设计师画完原型，我直接点开链接就能看，还能实时评论。嗯，这里要注意，Figma 的组件功能非常强大，后面我会详细讲。
Figma 在大屏项目中的优势：
- 实时协作，多人同时编辑不卡顿
- 自动保存，再也不用担心断电丢文件
- 插件生态丰富，比如「Content Reel」可以快速填充假数据
- 矢量网格精确到像素，适合大屏的精细排版
Axure：交互深度
Axure 是老牌工具了。如果你需要做复杂的交互逻辑，比如大屏上的钻取、联动、弹窗，Axure 的条件判断和变量功能比 Figma 强很多。我曾经用 Axure 给一个智慧城市项目做了完整的交互原型，客户直接在原型上点来点去，体验感拉满。
我的建议：团队协作多、快速出稿用 Figma；需要高保真交互、逻辑验证用 Axure。两个都学，不亏。
2.2 页面布局原则：大屏设计的「骨架」
大屏和普通网页不一样。普通网页是纵向滚动，大屏是横向铺满。说白了，大屏就是一张「画布」，你要在有限的屏幕空间里把信息讲清楚。
原则一：信息层级要清晰
大屏上信息多，但人的注意力有限。我一般把页面分成三个层级：
| 层级 | 位置 | 内容 | 视觉权重 |
|---|---|---|---|
| 一级 | 顶部/中心 | 核心指标、标题 | 最大字号、最亮颜色 |
| 二级 | 中部两侧 | 趋势图、对比数据 | 中等字号、辅助色 |
| 三级 | 底部/角落 | 明细列表、辅助信息 | 小字号、低饱和度 |
为什么会这样？因为人眼扫视大屏时，会先看中间和顶部。把最重要的数据放在那里，用户一眼就能抓住重点。
原则二：网格系统是底线
大屏设计最忌讳「凭感觉摆放」。我建议用 12 列或 24 列网格系统。比如一个 1920x1080 的大屏，每列宽度 80px，间距 16px，这样所有模块都能对齐。
避坑指南：我曾经见过一个项目，设计师把图表随意摆放，结果开发时发现坐标轴对不齐，改了三版才搞定。所以，从一开始就用网格，能省 80% 的返工时间。
原则三：留白不是浪费
很多新手喜欢把大屏塞得满满当当，觉得这样才「大气」。其实恰恰相反。适当的留白能让信息呼吸。我一般保持模块之间至少 20px 的间距，边缘留出 40px 的安全区域。
2.3 组件库搭建：一次搭建，多次复用
这是我最想强调的部分。大屏项目通常有多个页面，如果每个页面都从头画，那效率太低了。我的做法是——搭建一个专属的组件库。
组件库包含什么？
以 Figma 为例，我一般把组件分为三类：
- 基础组件：按钮、输入框、下拉菜单、标签页。这些是通用的，颜色和字体统一。
- 图表组件：柱状图、折线图、饼图、仪表盘。注意，这里不是真的数据图表，而是「占位图」，用来示意位置和比例。
- 业务组件：比如「实时告警卡片」「设备状态面板」「KPI 指标块」。这些是项目特有的，但可以抽象成模板。
搭建组件库的步骤：
- 先梳理项目需要哪些模块，列一个清单
- 在 Figma 中创建「组件集」（Component Set）
- 定义好颜色变量、文字样式、间距规则
- 把每个组件做成「主组件」（Master Component）
- 使用时直接拖拽实例（Instance），修改属性即可
一个实际的例子
假设我们要做一个「设备状态面板」。我会这样设计组件：
组件名称：设备状态卡片
属性：
- 设备名称（文本）
- 状态（枚举：在线/离线/告警）
- 数值（数字）
- 图标（可选）
交互：
- 点击卡片 → 跳转到设备详情页
- 状态为「告警」时，卡片边框闪烁这样，当项目中有 20 个设备需要展示时，我只需要复制这个卡片组件，修改属性值就行。改一个主组件，所有实例自动更新——这就是组件库的威力。
小技巧：在 Figma 中，给组件命名时用「/」分隔层级。比如「图表/柱状图/基础版」「图表/柱状图/堆叠版」。这样在组件面板里会自动分组，找起来特别快。
2.4 从原型到开发的衔接
原型画完了，怎么交给开发？这里有几个关键点：
- 标注要完整：每个元素的尺寸、颜色、间距都要标清楚。Figma 的「开发模式」可以直接查看 CSS 属性，非常方便。
- 交互说明要写：比如「点击这个按钮，弹出右侧面板」「鼠标悬停时，显示 tooltip」。不要觉得开发能猜到，写下来最保险。
- 切图要规范：图标用 SVG，背景图用 PNG，字体用系统字体或 Web Font。大屏项目里，尽量少用图片，多用代码实现。
嗯，说到这里，我想起一个项目。当时原型里有个渐变背景，设计师直接截了个图给开发。结果在不同分辨率的大屏上，背景拉伸变形了。后来我让设计师用 CSS 渐变代码代替图片，问题才解决。所以，原型设计阶段就要考虑「能不能用代码实现」。
2.5 总结一下
原型设计是大屏项目的「蓝图」。工具选 Figma 还是 Axure，看你的需求；布局遵循网格和层级；组件库能让你事半功倍。记住一句话：原型画得越细，开发改得越少。
下一章，我们会聊数据可视化设计原则。到时候我会分享一些「让图表会说话」的技巧，敬请期待。
公众号:蓝海资料掘金营，微信deep3321