不同终端的设计思考（差异篇）

随着技术的不断发展，操作的��终端越来越多，PC、PAD、Phone以及TV等多样的产品，设备的多样性、产品形态的多样性给了设计师们更多的发挥，但在设计的同时，也逐步的强调品牌的一致性，页面的视觉设计也慢慢的相近，响应式设计就是一个很好的证明。

但其实，品牌的一致性所强调的风格视觉统一，并不是每个页面就得长的一模一样，每一个元件都有他对应不同�终端平台的设计差异化。

前段时间有一个项目，需要提供移动端和PC端的两套界面，我做完之后拿给组内的设计师团队看，整体感觉还可以，就有个小细节的地方，有位小伙伴就提出了一个疑问，为什么PC端的导航标签栏用的确是移动端的样式？见图下：

移动端与PC端的导航栏对比

那么，不同的终端在视觉风格统一的情况下，是否所有的元件都需要统一呢？答案肯定是NO。现在以导航栏为例，来探讨一下移动端和PC端设计上的一些差异。

首先来了解一下概念，什么是导航栏？

资料显示：在网络中，导航栏是一种互联网内容组织方式，是相关性很强的关键字，它帮助人们轻松的描述和分类内容，以便于检索和分享。而其作用是告知用户当前位置，怎么返回到原来的地方，用户还可以去哪里，下一步打算去哪里，怎么去等等，目的就是让用户很清晰明确地浏览信息。

在移动端与PC端中，有以下两点主要的差异化：

1.内容的差异化

在产品从�PC端向移动端设计的过程中，要对其进行一定的删减、隐藏和重组织，以更好地适合移动端屏幕特性，特别要把握住目标用户的本质需求，结合产品的使用场景、用户的使用习惯以产品的特性等进行再设计。

在界面设计中，因为PC端屏幕大，鼠标交互操作精准，所以在导航及内容展示上可以更为丰富，就像一个大开间一目了解，找什么都好找，�设计的时候主要考虑的是如何将内容合理地展示给用户。

PC端上的导航

但移动端显示区域小，手指操作容易失误，所以需要精简元素，突出层级，需要考虑如何将其不是很重要的内容更巧妙的隐藏起来。这种隐藏实际上是对核心内容的一种突出，即在导航内容等级相同或者相近的情况下，显示相对重要的内容，而把其它内容隐藏到页面上的其它链接当中去，或者直接合成一个“更多”，用户可以点击“更多”后，在当前页展开或者是跳转到新的页面当中去查看。

移动端上的导航

以这次的项目为例。在PC端中，有三个分类，分别是“出入金”、“银行电子账户”和“转账明细”，见下图：

PC端的左侧导航分类

而在移动端中，主要突出了“出入金”这个内容，把“银行电子账户”和“转账明细”隐藏在页面的底部和导航栏的右上角的位置。 如图：

移动端上突出“出入金”模块

2.样式的差异化

由于两端物理外观上的不同，PC端上的导航标签可分为顶部横向导航、侧边栏导航、Tab标签导航、面包屑导航等多种形式。而移动端，常见的主要有Tab标签导航、纵向导航、宫格式导航等。

PC端-顶部横向导航

PC端-侧边栏导航

PC端-Tab标签导航

PC端-面包屑导航

移动端-Tab标签栏

移动端-纵向导航

移动端-宫格式导航

顶部横向导航在PC端一般会贯穿产品的所有页面，而移动端产品上的全局导航并不一定是每个页面都有，一般会把全局导航上的内容分类做成icon，放在底部，以符合用户手指交互的需求，来增强交互体验。

在这个项目中，PC端的界面是以侧边栏导航来贯穿所有页面，如下图：

PC端使用侧边栏导航

面包屑导航是PC端产品的必备导航之一。它可以让用户明确了解自己所处的位置，引导用户通行以及了解当前页在事个产品系统中的位置，提高用户体验，并能很好地帮助用户快速学习和了解产品内容和组织方式。而在移动端中，因为屏幕的限制，通常采用的是保留关键的路径来解决这一问题。

PC端使用的面包屑导航

移动端使用的保留路径导航

移动设备特有的交互属性也会产生一些特色的导航，如抽屉式导航，这种导航方式在移动应用中使用很广泛。

移动端-抽屉式导航

由此，我们可以延伸一下：不同�的终端之间有这么多的差异，那么怎样去设计才能达到一个产品的�一致性呢？

那么，下篇文章再继续探讨一下。