翻译：王猫猫  审校：LUOLUO |   UXRen翻译组 #394译文
原作者：Leon Zhang
原标题：《Desktop vs Mobile design: The only RULE you must know!》
首图：当下流行的“移动端优先（mobile-first）”设计模型

 

许多设计毕业生或是设计训练营练出来的学生，在整理作品集时总是专注于移动端应用的设计方案展示，这让我感到非常困惑。很多时候这些作品就是毫无新意的复制粘贴，而且我肯定在Behance网站上看过类似的作品。

确实，这些年移动端的设计依然炙手可热。你在很多地方都能找到优秀的模版资源和设计灵感。

我的博客真爱粉都知道，我自己确实也经常“显摆”自己的移动端产品设计。然而，针对桌面端（PC Desktop）产品或是功能的设计需要也非常普遍，而这种能力也是大型技术公司所需要的。即便是对于那些专注于移动端产品的公司，当下也会更关注跨平台的设计能力（cross-platform designs）。以我在亚马逊（现在），以及之前为微软服务的工作经验来说，桌面端的设计能力也是设计师们需要掌握的。

作为对自己经验的复盘，我希望能够尽量帮助那些从来没有桌面端产品设计经验的设计师们熟悉它，我将分享桌面端和移动端设计中最重要的法则，以便你们理解二者的异同之处。

同时我也将结合案例深入地分析这些相似性与差异性背后的原因，以便未来你能轻松应对面试官或某个客户所提出的的问题。

下面是第一条法则：

 

从“一维视角”还是“二维视角”进行思考

Thinking in one-dimension vs two-dimensions

为了理解如何保证整体的一致性、设计语言的统一性以及跨平台的用户任务流连贯性，你必须让自己熟悉“一维视角”和“两维视角”的思维方式。这是掌握移动端和桌面端产品设计的最重要法则。

从功能角度出发，桌面站和移动端产品的功能应该是大致相同的，这就意味着用户在桌面和在移动端都能完成相同的任务。如果你在亚马逊的网页端只能购物，却需要去它的手机app上退货，这难道不奇怪吗？（对，这非常奇怪）

亚马逊PC端与手机端的示例对比

两个端的区别主要在视觉层面的布局搭建和用户操作流的交互层面控制。后面我会一一说明。

 

法则一：视觉层面的布局（Visual Level Layout）及应用案例

就视觉层面的布局而言，对于只熟悉移动端UX设计的设计师来说，桌面端的界面可以理解为移动端多个界面的一起拼接。

看看下面的桌面端线框图示例：

图1：Invision的桌面端线框图示例

将桌面端与移动端的线框图放到一起对比，你是不是会觉得每一个桌面端的线框图看上去都像是多个独立的移动端界面的集合？如果你没有做过桌面端的设计，那么这是一个很好的理解桌面端视觉布局的切入点。

图2：Sketch的移动端线框图示例

从上面移动端的示例中可以看到，鉴于界面布局视角（ interface layout level），移动端线框图的布局基本上都会采用一维（one-dimensional）视角。由于屏幕大小的限制，仅有竖向一个维度展示。所以无论你设计的是什么，整个框架都会比较简单，而且信息也会被限制在“一维”去排布。

现在，我们再来看看桌面端的信息布局。以Spotify的桌面端为例，它也是一款非常受欢迎的移动端应用。

图3：Spotify的桌面端案例

如上图所示案例，桌面端的布局通常是“两维（two-dimensional）”的。由于屏幕空间更大，桌面端可以容纳更多的信息。不仅支持竖向维度的展示，也支持水平维度。而且，桌面端大多以水平向为基准进行信息排版（虽然对于大多数产品来说，这并不是必须遵守的规则）。举例来说，桌面端经典的“侧边栏导航”就可以将多个层级的移动端交互整合到一个界面上。（看看Spotify的桌面端是如何将移动端的多个交互都放到一个页面上操作的。）

图4：Spotify的移动端案例

这对我们有什么意义呢？

在项目中或面试时，你必须要展现出你非常了解两维信息布局的优势。你需要有能力通过一个点击就能快到到达目的地。如果你的产品并没有复杂的任务流，那么可以在两维信息框架设计时，通过在增加单页面信息密度来体现桌面端的优势。

如你所想，正因为两维信息布局设计的复杂性，你需要花更多的精力去进行分类、分层、整理交互元素。如果这些交互元素没有合理地排布，用户的任务流很容易变得一团糟。我猜，这也是为什么大多数新人在进行作品集整理时都避开桌面端产品的原因吧。

如果充分理解了一维和两维的思维方式，你将自然而然地理解桌面端和移动端之间的其他不同之处。你也可以借助以下其他两个典型的例子来掌握它。

 

法则二：信息展现（Information Revealing）及应用案例

另一个示例则是理解桌面端和移动端是给用户分享内容与信息的不同方式。桌面端通常会直接隐藏信息，而移动端产品则常常使用“滚动”方式来隐藏，我把这样的操作叫做信息展现策略。

如果你能理解“一维视角vs两维视角”的法则，那么理解这一点对你来说就很容易了。桌面端屏幕有更大的尺寸，因此具有在各个维度上进行信息呈现、折叠、隐藏的优势。

以下图从Photoshop工具栏导出GIF图片的操作为例。多种类型的功能可以根据需要，完全的展示在右侧、左侧，甚至是中间区域。这让我们编辑照片或图片非常轻松，因为你对于所需要的功能有好的触达性和可控性。

图5：Photoshop的信息展现示例

这么多的信息如果放在移动端会填满整个屏幕，用户根本无法使用。让我们来看看VSCO（一款优秀的拍照滤镜App）。这些不同的工具，其信息框架自然而然地遵从“一维视角”的设计原则。（可以看到，VSCO的“滚动”也不局限于纵向的，水平的滚动也可以工作得很好。）

图6：VSCO的滚动案例

如果你还想知道更多，请不要担心，我会从“以UX为中心”的视角为你提供最后一个示例。

 

法则三：理解可用性（Understand Usability）及应用案例

最后一个案例是为了告诉你这个法则不仅仅只关注视觉层面。从可用性的视角而言，一维和两维视角依然站得住脚。对于包含特定用户任务流的特定功能而言，移动端产品常常需要用户“跳转”到特定界面完成操作，而桌面端的产品只需要在当前页面直接完成。

想想邮件应用。我们以Gmail为例。当你用桌面端撰写新邮件时，左下角会弹出一个新邮件弹窗。二维视角，对吧？只有在需要的时候，桌面端的信息才会展示出来，这是很好的设计。但是这种弹窗式的文本编辑框在移动端还是好设计不？当然不是，因为你只能在屏幕10%的区域撰写邮件正文，所以很自然的你需要“跳转”到一个新的页面完成这个任务。

图7：Gmail产品的案例。

 

我想你已经掌握了这些法则！

看到这里，我相信你已经将这些法则记在心里了！但是请记住，学习设计最好的方式是实操，试着跳出你的舒适区挑战一下自己吧。

 

原文来源：https://uxplanet.org/desktop-vs-mobile-design-the-only-rule-you-must-know-8ac71714450a
版权声明：该文章在UXRen公众号（cnUXRen）首发后方可转载，转载时请注明出处及译者、审校者信息，如有违背，UXRen社区保留侵权追责的权力。

4+