编辑导读：设计师在面对不同的界面设计时，会有一定的差异，虽然是一个页面，但是移动端和桌面端也有很大的差异，比如控件和尝试会有所不同；本文的作者分享了桌面和移动设计之间的区别，让我们来看看。

最近，在设计跨平台产品的桌面时，出现了一个疑问：桌面是直接翻译移动终端的设计，还是会有所不同？这些差异背后的原因是什么？

所以我做了一些简单的研究，现在我将与你分享桌面端和移动端设计的异同(两者都指客户端，但我强调这一点，因为桌面客户端和web端之间存在一些差异)。

首先，跨平台的产品设计希望整体上保持一致，这样不仅可以降低用户的认知成本，还可以降低设计成本，甚至是开发成本(更统一的界面)。

在布局方面，桌面界面可以理解为多个移动界面的马赛克(上图)。在功能上，桌面和移动功能是相同的，但在视图级别和控制级别上存在差异。例如，如下例所示，Mac和iOS上的“New reminders”总体上是相同的，但使用的控件和视图不同。

但在本地，桌面和移动设备之间仍然存在许多差异。在设计桌面时，尊重这些差异是很重要的。

下一节将介绍这些差异。你也可以思考这些差异背后的深层原因。

在界面布局方面，移动终端的布局一般是一维的，只有垂直布局。另外，屏幕空间有限，所以整体布局比较简单，能容纳的信息也有限。

桌面的布局一般是二维的，不仅包括垂直维度，还包括水平维度，其中大部分以水平维度为主。除了更大的屏幕空间，它可以容纳更多的信息；例如桌面经典的“多栏布局”，可以直接将移动界面的三个层次整合为一个界面(下图)。

桌面的二维布局一方面降低了信息架构的深度，另一方面又大大增加了单一界面的信息量。在布局设计中，应更多地对界面元素进行分类、分层和排序。

一、整体的一致性

桌面尺寸更大，这样可以平铺出更多的信息。与移动终端不同，只能发布核心信息，其他信息必须通过折叠和删除来隐藏。

例如上图所示的腾讯文档，在移动端文档编辑器中，设计师必须对各种功能进行分类，然后放入每个条目中。只有在点击条目后我们才能看到具体的功能。在桌面上，这些功能可以展开，信息结构也不同。

二、信息架构差异

对于具有一定流程的功能，移动端通常需要跳转到界面完成操作，而桌面端可以在现场完成操作。

例如，如图1所示，移动邮件功能需要两个接口来将邮件从QQ邮箱移动到iCloud邮箱。在桌面端，可以直接在下拉列表中完成，而不需要跳转到界面。

另一个示例是如图2所示的设置接口。更改选项、重命名等操作通常需要在移动端跳转到新的界面，而桌面端大部分操作都可以直接在当前页面进行。

桌面的“本地操作”逻辑(或情境操作)几乎可以覆盖大部分中小型功能，这是一种不同于移动终端的设计思路。

桌面信息架构的上述三个特征：二维布局、信息暴露、就地操作，实际上恰恰决定了桌面界面的总体结构特征——界面少而浅。一般只有几个主界面，层级只有1-2个层级，其余的层级由弹出窗口、浮动层、下拉菜单、右键菜单、点击菜单、工具提示等形式托管。

另一方面，移动终端的大部分模块分类和功能流程都需要通过新的接口来承载，所以接口多，层次深。

例如，上面的例子是“飞书”设置功能。可以看到，在移动端，有很多设置深层次功能的界面，而在桌面端，只有一个带有一些弹出窗口的界面，基本可以解决问题。

由于移动终端使用手指交互，所以每个交互元素的尺寸应该大于7mm (iOS HIG规则，Android平台类似)，这就导致了移动终端上元素的整体尺寸。

另一方面，桌面使用鼠标交互。鼠标指针的大小比手指小得多，而且它也更灵活，所以桌面上的元素可以做得更小(是的，但不是必需的)。

0

1. 一维布局 vs 二维布局

由于移动元件的尺寸比较大，而且手指的灵活性不如鼠标高，容易误操作；因此，移动终端上元素的排列比较松散，不会出现大量元素密集排列的情况；桌面侧的布局可以更加紧凑，同时也具有承载大量密集元素的能力。

如上图所示的Word，移动终端的工具栏按钮少，排列松散。但在桌面上，工具栏有很多按钮，排列得很紧。

2. 信息隐藏 vs 信息露出

移动终端屏幕比较小，用户的视线可以覆盖整个屏幕；因此，元素的对齐相对平衡，包括左对齐，右对齐，上对齐，下对齐和中心对齐，几乎没有偏差。以上面的EverNote手机界面为例。

桌面窗口的尺寸比较大，所以用户的视线无法覆盖整个窗口，需要移动视线才能看到整个画面。用户的眼睛通常从左上角进入，所以“左对齐”和“上对齐”是首选的元素。特别是，有一种强烈的“结盟”倾向。很少有产品将重要信息“向下排列”，因为这很容易被用户忽略。

移动端采用手指交互，相对简单，以点击为主，辅之以各种手势。

桌面端使用鼠标交互，交互方式比较复杂，点击、双击、右键、悬停、拖动、行选择、滚轮滚动都是用户经常使用的交互方式；此外，鼠标指针还具有许多状态(如上图所示)，这些状态更改支持非常丰富的交互模式。

以上特点对设计的影响如下：

所有的交互元素，一般都需要定义普通状态和悬停状态；大多数数据对象，如文本、图片、文件和列表项，需要定义为选择状态、右键菜单和双击逻辑；鼠标指针可能需要一些定义，例如当鼠标放置在布局分隔符上时的“水平调整大小箭头”。

3. 跳转操作 vs 就地操作

移动端采用软键盘形式，场景化风格，无快捷键逻辑，输入成本相对较高。

桌面采用硬键盘，输入成本相对较低。有丰富的快捷逻辑，设计者需要定义快捷键，比如一些通用的快捷键：复制、粘贴、全选等。

对于一些高频操作功能，还需要定义快捷键，如发送消息、下一步；另外，对于比较成熟的桌面产品，原则上需要支持“全键盘交互”，即不需要鼠标就可以实现，而这些键盘交互逻辑也需要设计者来定义。

4. 界面多又深 vs 界面少又浅

移动终端是单窗口，所有的操作都针对当前窗口，很少有跨窗口的逻辑。

在桌面上，存在多个Windows，应用程序可以相互交互。因此，您需要在设计时定义交互逻辑(窗口任务并行应用程序之间的窗口交互);例如，在网盘应用中，用户是否可以将文件从一个窗口拖到另一个窗口，是否可以拖到桌面保存，具体的交互逻辑是什么？

最后，您需要定义窗口是否是模态的。如果它是模态的，则用户不能在应用程序下操作其他Windows。

桌面和移动组件模式之间也有许多不同之处。下面是一些典型的例子。

弹窗：手机和桌面的弹窗样式是不同的。按钮的位置各不相同，“确定性”按钮在移动设备的右侧，MacOS的桌面在右侧，Windows的左侧。

浮动层：由于屏幕尺寸的限制，移动终端很少使用浮动层控件。桌面的浮动层是非常有用的，它可以做成信息细节浮动层、二次确认浮动层、复合浮动层等。与弹出窗口相比，它侵入性更小，而且“本地操作”，效率更高，并且可以携带相对丰富的信息，是笔者非常喜欢使用的一种桌面视图控件。

工具提示：手机上当然没有工具提示。在桌面上，工具提示非常流行，有两个目的：一个是解释某些按钮的功能，另一个是显示截断字段的完整信息(如上所示)。

更多菜单：移动设备上的大多数菜单使用左击菜单(iOS)或长按菜单(Android)，而桌面设备上使用右键菜单。

除了上面提到的控件，其实还有很多其他的控件也是不一样的，在这里就不细讲了。例如：标签栏(无文本vs文本)，面包屑(很少使用vs经常使用)，单选(单选列表vs单选按钮)，开关(开关vs复选框)，下拉(下拉框vs动作表)……

此外，还有许多不同的与系统交互的模式。如上传、下载、保存、打开、系统任务栏、系统推送、后台运行等。不过，这些差异只需要遵循系统，没有特别需要注意的地方，也不会重复。

桌面端和移动端本来是相对分离的两个平台，设计语言有很大的不同，用户的使用习惯也有很大的不同，所以在设计的时候要注意这些差异。

但多年来，桌面和移动设备也在不断融合。

一方面是因为跨平台技术的发展：Windows系统可以在各种设备上运行，iOS可以在Mac上运行，跨平台语言越来越完善，从而可以实现平台集成。另一方面，移动设备的功能越来越强大：移动设备上的功能集与桌面设备上的功能集越来越一致，因此产品设计水平也越来越一致。

换句话说，移动终端和桌面终端之间的差异正在发生变化，所以人们不必过于僵化，可以用更开放的态度对待“差异”。

就像几年前关于iOS和Android差异的争论一样，当时每个人都会为应用制作两套设计草案，微信甚至从Android版本中删除了底部的“比较iOS”标签栏。

但这一切都已成为历史，现在这两个平台正变得越来越相似。每个人都放下了负担，融合是不可避免的。

作者：Chong Shuqing, UEDC交互设计师；微信公众号：网易UEDC

本文基于合作媒体@网易UEDC，作者@Chong Shuqing

该图像来自Unsplash，基于CC0协议