福州白癜风医院 https://myyk.familydoctor.com.cn/2831/content_629586.html最近在做跨平台产品，设计桌面端时一直有个疑惑：桌面端是不是把移动端的设计直接平移过来就行，还是说会有差异性？这些差异性背后的原因又是什么？于是做了一些简单的研究，下面与大家分享下桌面端和移动端的设计异同点（都指客户端。之所以强调这点是因为桌面客户端和web端又会有一些差异）01整体的一致性首先，跨平台产品的设计整体是期望趋于一致的，这样不仅可以降低用户的认知成本，也可以降低设计成本，甚至可以降低开发成本（更加统一的接口）。从布局上而言，桌面端的界面可以理解为是移动端的多个界面拼接在一起（上图）。从功能上而言，桌面端的功能也和移动端的整体一致，只是在视图层面和控件层面会有所差异。比如下图所示案例，Mac端“新建提醒”和iOS端整体是一致的，只是使用的控件和视图不太一样。但局部而言，桌面端和移动端仍然有着很多差异性。在设计桌面端时，尊重这些差异性是十分有必要的。下面的篇幅便来介绍下这些差异性。大家也可以思考下，这些差异性背后的深层原因是什么？02信息架构差异1.一维布局vs二维布局界面布局层面而言，移动端的布局一般是一维的，只有纵向布局，加之以屏幕空间有限，所以整体布局都会比较简单，能够容纳的信息比较有限。桌面端的布局一般是二维的，不仅有纵向维度，还有横向维度，大部分以横向维度为主。加之以屏幕空间较大，其能够容纳的信息就多出很多。比如桌面端经典的“多栏布局”，可以直接把移动端3个层级的界面全部融合在一个界面中（下图）。桌面端的二维布局，一方面降低了信息架构的深度，另一方面也会让单个界面的信息量大大增加。在布局设计时需要投入更多的精力对界面元素进行归类、分层、排序。2.信息隐藏vs信息露出桌面端尺寸更大，这带来的好处是可以平铺出来更多的信息。不用像移动端那样，只能放出来最核心的信息，其他信息必须采用折叠、删除的方式做隐藏。比如上图所示的腾讯文档案例，移动端的文档编辑器，设计师必须把各种功能进行归类，然后放到各个入口中，点击入口后才能看到具体的功能。而在桌面端完全可以把这些功能平铺露出，其信息结构是不同的。3.跳转操作vs就地操作对于具有一定流程的功能，移动端往往需要跳转界面才能完成操作，而桌面端可以就地完成操作。比如上图1所示的移动邮件功能，把一封QQ邮箱中的邮件移动到iCloud邮箱中，需要跳转2个界面才能完成。而桌面端只需要在下拉列表里就能直接完成，无需跳转界面。再比如上图2所示的设置界面，在移动端更改选项、重新命名等操作往往需要跳至新界面，而桌面端中大部分都可以当前页直接操作。桌面端的这种“就地操作”逻辑（或者叫情境式操作），几乎可以覆盖大部分的中小型功能，是和移动端差异性较大的一种设计思路。4.界面多又深vs界面少又浅上面介绍的3个桌面端信息架构特点：二维布局、信息露出、就地操作，其实刚好决定了桌面端的整体界面结构特点-界面少且浅。一般只有几个主界面，层级方面只有1-2级，剩下的层级由弹窗、浮层、下拉菜单、右击菜单、点击菜单、tooltip等形式承载。反观移动端，大部分的模块分类、功能流程，大多需要借助新界面来承载，所以导致界面很多，层级也很深。比如上图的例子，是“飞书”的设置功能。可以看到在移动端，设置功能的界面很多，层级也很深，而在桌面端只要1个界面，再搭配一些弹窗，就基本解决问题了。03样式差异1.元素大vs元素小移动端由于使用手指交互，所以每个可交互元素的尺寸都需要大于7mm（iOSHIG规定，Android平台也类似），这也就导致移动端的元素整体偏大一些。而桌面端采用鼠标交互，鼠标指针的尺寸比手指小很多，也灵活很多，所以桌面端的元素可以做得比较小（是可以，不是必须）。以上图Notion为例，同样的列表在移动端的高度明显比桌面端要高出不少。再比如上图的