3、多屏设计原则：一致性原则、连续性原则、互补性原则、上下文感知原则

做多屏设计这些年，我最大的感触就是：屏幕多了，规矩反而不能乱。你想想看，用户可能在手机上打开你的应用，接着在平板上继续，晚上回家又用电视看。如果每个屏幕都像换了个产品，用户会疯掉的。

今天聊的这四个原则——一致性、连续性、互补性、上下文感知——是我在实际项目中反复踩坑后总结出来的。说白了，它们就是多屏设计的「四根柱子」。少一根，体验就塌了。

3.1 一致性原则：让用户「闭着眼睛」也能用

一致性原则，核心就一句话：同样的东西，在哪儿都得长一样。

我个人习惯把一致性分成三层：

• 视觉一致性：颜色、字体、图标、间距，所有屏幕统一。比如主按钮在手机上是蓝色圆角，在电视上就不能变成绿色直角。
• 交互一致性：同样的操作，结果一样。手机上左滑是删除，平板上左滑就不能变成收藏。
• 信息一致性：同一个数据，在不同屏幕上显示的内容必须同步。我在项目中遇到过用户投诉：「手机上的订单状态是已发货，电脑上怎么还是待发货？」——这就是信息不一致的典型翻车。

3.2 连续性原则：让任务「跨屏不断线」

连续性原则，说白了就是用户做到一半的事，换个屏幕还能接着做。

举个例子：你在手机上浏览商品，加入购物车，然后打开平板继续看。如果购物车是空的，你会怎么想？

嗯，这就是连续性要解决的问题。它要求：

• 状态同步：登录状态、购物车、浏览历史、表单填写进度，所有屏幕实时同步。
• 操作接力：手机上开始的操作，在平板上能无缝继续。比如手机上填了一半的表单，在平板上打开时，光标应该停在刚才的位置。
• 历史回溯：用户能知道「我刚才在手机上做了什么」。我建议在跨屏切换时，给一个简短的提示，比如「您刚刚在手机上浏览了3件商品」。

3.3 互补性原则：让每个屏幕「做自己擅长的事」

互补性原则，核心是不要求每个屏幕都做所有事。相反，让每个屏幕发挥自己的优势。

你想想看：

• 手机：随身携带，适合快速浏览、轻量操作、拍照、扫码。
• 平板：屏幕适中，适合阅读、绘图、视频会议、轻度编辑。
• 电视：大屏远距离，适合观影、游戏、展示、多人共享。
• 电脑：键盘鼠标精准操作，适合复杂编辑、数据分析、多任务处理。

互补性原则要求：每个屏幕只做它最擅长的事，然后把结果共享给其他屏幕。

举个例子：一个视频编辑应用。

• 手机上：快速拍摄、添加滤镜、分享。
• 平板上：精细剪辑、添加字幕、调整时间线。
• 电脑上：导出高清视频、批量处理、项目管理。
• 电视上：全屏预览、家庭观影。

你看，每个屏幕各司其职，用户不会觉得「手机版功能太少」，反而会觉得「每个设备都刚刚好」。

3.4 上下文感知原则：让屏幕「知道你在哪儿、在干嘛」

上下文感知原则，是这四个原则里最「聪明」的一个。它要求系统根据用户当前的环境、设备、行为，自动调整体验。

上下文包括：

• 设备上下文：屏幕尺寸、输入方式、网络状态、传感器数据。
• 环境上下文：光线、噪音、位置、时间。
• 用户上下文：当前任务、历史行为、偏好设置、情绪状态。

举个例子：

• 你在手机上打开地图，系统知道你在户外，自动显示步行导航。
• 你回到家，打开电视，系统知道你在客厅，自动切换到「家庭模式」，显示大字体和远距离交互。
• 你在平板上看食谱，系统知道你在厨房，自动开启「免触模式」，支持语音翻页。

3.5 四个原则的协同工作

这四个原则不是孤立的。在实际项目中，它们经常需要配合使用。

我画个简单的场景：

用户小张在手机上浏览购物App，看中了一双鞋，加入购物车（一致性：购物车图标和交互与电脑版一致）。

他回到家，打开平板继续看（连续性：购物车里的鞋还在，浏览历史也同步了）。

平板屏幕大，他决定仔细看看鞋的细节图（互补性：平板适合浏览大图，手机适合快速下单）。

系统检测到他在晚上10点打开平板，自动切换到「夜间模式」（上下文感知：根据时间和环境调整显示）。

你看，四个原则一起工作，体验就非常流畅。

嗯，这四个原则说起来简单，做起来其实挺考验功力的。我建议你在设计多屏系统时，先把这四个原则写在墙上，每做一个决策就问自己：「这个设计，符合哪条原则？」

如果一条都不符合，那大概率是个坏设计。