设计笔记〡Web端设计纵向分割趋势探讨

我们有个岗位想找你谈谈

随着计算机技术高速发展，设备软硬件性能也越来越强。对设计师而言，我们有更大的空间去创意去设计，曾经无法实现的想法，也许现在轻而易举。

然而，技术的发展同时也带来了更多的挑战和麻烦。屏幕尺寸越来越大，各种设备物理尺寸和分辨率千奇百怪，对于我们设计师来讲又是一种无言的痛苦。

PC、大屏、平板、手机，各种尺寸各种分辨率，响应式承载的用户体验有限，而且并非那么完美。如果一个产品要考虑各种端的屏幕兼容，那无疑是巨大的难题。

机缘巧合移动端web页面横向看，这些端曾经在华为工作过的我都有幸接触过，于是想着，是否可以与设计小伙伴们一起寻找一种可能的出路。

Surface NEO 折叠新形态尝试探索未来

2019年10月微软发布了一款折叠屏笔记本Surface NEO，微软利用铰链扭矩系统将两个9英寸显示屏整合到了一起，从而得到了Surface NEO的多种形态，其windows系统也为此进行了适配和优化。

如视频中所见，Surface NEO单个屏幕如同一个Pad，配合手写笔拥有轻便体验；展开时放在手中，又如同书本一般真实。

完全展开时，可以当做一个更大尺寸的Pad，两个屏幕左右可以分别打开任务，也可以运行同一个任务。两个屏幕不同的应用之间可以进行便捷的交互。

可以折叠起来，使用单一屏幕显示，另一屏幕用于键盘输入和触控板交互。

用于输入的那块屏幕上还可以延展一些较小的任务窗口，有点类似手机上的多窗口，又如同MacBookPro的TouchBar。而完全展开两个屏幕同时用于显示时，还可以加一个外接键盘当做台式使用。

Surface NEO在不同尺寸不同形态的变化给了我们更多的想象，引领了对未来的新探索。

而在其中有一个特点：哪怕是屏幕展开变大，两个物理尺寸的屏幕依然是可以独立去显示和使用，可以理解为一个大的尺寸被分割为两个小块，或者更多更小的窗口，如上图中的小窗格。

MacBigSur与iPadOS趋同

2020年6月在苹果全球开发者大会上，苹果公司发布了他们下一代全新设计的操作系统。相对于以往每个版本的更新，这次确实称得上是大改版。

除了窗口、图标、程序坞等的向IOS看齐的圆角化，通知中心也如同IOS一样把快捷控制放到一起组成控制面板。

从全高度边栏到清爽的工具栏，新设计的app界面干净利落，始终将用户的操作内容呈现在醒目的居中位置；这种非常明显的板块区隔让用户清晰的知道每次需要交互的位置。这种左右的布局方式，让层级更加清晰明了，并且能很好的与移动端进行兼容适配。

而相对更早一段时间，苹果公司为iPad OS添加了妙控板，可以进行精细交互，让iPad上也可以承担一些复杂的数据分析和图像处理工作。

iPad相对于手机尺寸空间大了很多，单个应用的分屏保障了iPad上IOS应用的良好适配。同时iPad上将传统pc多窗口的优秀基因继承了过来，并进行改良，增加了多窗口之间的便捷交互，充分提升了iPad屏幕利用率，提高了工作效率。

相对于传统pc，在移动端上有一个场景往往很难交互，那就是文件管理，复杂的存储路径让用户难以通过移动端单个页面，或者页面内的抽屉和折叠方式来进行，而iPad OS与mac OS保持一致的纵向分割屏幕，从左向右层层深入，很好的利用了iPad的屏幕空间，提出了更好的解决方案。

设计背后的本质

看到这里是否觉得这跟web端有毛关系呢，请不要慌，任何设计背后都能找到一些线索，而这些背后的线索或许本质趋同。

通过以上内容，我们发现：

1、苹果、微软都在努力扩展自己的生态

曾在手机市场受挫的微软想从windows向轻便办公扩展，逐步弥补自己的生态，避免苹果不断蚕食自己的市场份额；

而苹果则从手机和平板上不断向办公领域冲击，保障手机、平板、电脑多端互联的无缝体验，不断去冲击微软的江山。

2、移动互联网的大趋势，让各大终端厂商都在发力移动设备的生产力建设

华为、三星、小米等终端大厂也都专门成立部门聚焦移动办公、教育等生产力场景，期望以手机为中心，从生活到工作中的方方面面都无缝串联，沉淀用户。

3、大厂都在尝试pc、pad、phone三大用户主屏的融合。

融合的好处不仅仅可以减少用户的学习成本，达到设备间的无缝衔接，同时还可以节省大量的设计开发成本。这等提升用户体验的好事，何乐而不为呢。

小结一：多终端的融合，是我们设计需要关注的趋势，这是最本质的

然后我们再来看另外的一些影响设计的因素：

屏幕尺寸

随着显示技术的不断发展，如今显示屏幕尺寸越来越大，分辨率也越来越高。早些年主流大屏显示器都是22英寸左右，如今都是23英寸、24英寸、27英寸，甚至有32英寸以上大屏显示器。

那么是否屏幕尺寸越大就越好呢？

屏幕尺寸与人因研究

我们找了一些人因研究数据：

一般来说，人的肉眼可视角度的度数通常是120度左右，当集中注意力时约为五分之一，即25度。人单眼的水平视角最大可达156度，双眼的水平视角最大可达188度。人两眼重合视域为124度，单眼舒适视域为60度。

人双瞳之间的距离差不多是6~7cm，根据下图，A区域是我们人眼比较舒适的区域，也就是我们人眼不需太大幅度运动下能观看到的屏幕大小。

通过计算，屏幕宽度=人眼与屏幕的距离×1.154 - 6，单位为厘米（cm）。

将以上数据换算到显示器上，就可以得出以下理论尺寸选择建议了：

以下数据左为与显示器的距离，右为建议显示器尺寸（英寸）：

40cm-55cm 20英寸-24英寸

55cm-70cm 24英寸-27英寸

70cm-80cm 27英寸-32英寸

80cm-100cm 34英寸

100cm-150cm 38英寸

150cm及以上越大越好，38英寸以上都OK，或直接用大屏电视可能更实际。

一般我们办公或者玩游戏，离显示器的距离一般都是在50cm左右，为了更好的快速看到整个屏幕的变化，一般显示器的尺寸建议选择20英寸-27英寸之间。

其中，目前很多电竞游戏玩家热衷24英寸电竞显示器，主要是这种适中尺寸既不会小，也不会太大，确实一个比较值得参考的尺寸值。当然，如果偏向影音视频娱乐为主，坐在离显示器比较远的地方，可以考虑27英寸或更大尺寸显示器。

屏幕尺寸与用户习惯

l主流的pc分辨率在1920和1366之间；

l笔记本考虑便携性，屏幕物理尺寸略小一些；

l用户距离屏幕的距离，适宜距离已经逐渐形成习惯。

“我们基于电脑显示器阅读距离（50 cm）以及最佳阅读角度（0.3）对 Ant Design 的主字体进行了一次升级，从原先的12 上升至 14，以保证在多数常用显示器上的用户阅读效率最佳。”引自Ant Design（含下图）。

而苹果就比较克制了，他们限定了4款屏幕尺寸：

笔记本 13、16英寸；

台式 21.5、27英寸。

苹果提供显示缩放设置项，供个别用户略微的差异调整。

这里不禁赞叹苹果的人因研究，苹果的手机和电脑一样，屏幕尺寸不像安卓手机那样千奇百怪。因为我始终相信：克制背后必有充分的研究和论证。

电脑上的软件界面

我们再来看看我们通常在电脑上的使用场景，人们通常在电脑上使用一些软件来完成任务或工作。我这里把电脑上常规使用的软件划分了三类。

第一类是专业型软件，诸如PS、AI，word、ppt、excel等，这类工具通常我们在移动端上只能完成非常简单的操作，甚至有些软件都无法在移动端去使用，我想这也是电脑无法被完全取代的根本原因之一吧。

这些专业型软件多数拥有与ps类似的界面布局，围绕中心主体区域做交互，往往触发点在左或者上，而具体的交互处理，如属性编辑面板在右侧。

第二类是效率型软件，诸如邮件、微信、文件管理等，这类软件更常见，使用率会更高，在移动端和电脑上都会使用，但往往在电脑上效率更高。

效率型软件在使用时，往往从左向右层层深入，由外至里，从粗到细，从全局到个体，进行信息的下钻与场景的交互，纵向的面板区分非常明显。

第三类是内容型软件。这里有些特殊，内容型又分为阅读和视频两种，其中阅读通常以文本和图片内容为主，信息流由上至下需要用户持续移动视线；而视频通常是全屏沉浸式体验，用户的视线会全局关注视频区域，不会有规律的移动。

阅读时人眼舒适的角度决定了近距离不适宜过宽的内容，需要纵向分块，屏幕空间无法满屏利用；而全屏观看视频时，用户大多会自主调节距屏幕的距离，而改变人眼舒适度。

小结二：人因决定了屏幕尺寸限制，大尺寸适合区隔分块

通过上面的一些使用场景，我们不难发现，我们在日常使用中每次视线关注的场景并不需要非常大的尺寸空间，大的尺寸空间只是为了让用户知道这整个是一个整体范围之内。而这一切是由人因早已决定了的。

于是我们不难理解，为什么哪怕很多人喜欢接两个显示器，但在使用的时候也并不是每一个屏幕上单独占满一个程序。

所以我们现在看到iPad和安卓平板上的左右分屏，其实并不是简单的为了追求屏幕利用率，还有人因的考虑在其中。

同时，随着技术的发展，华为和小米两大厂商尝试了pc和手机的互联，在pc上模拟运行手机界面，这是一种最通用和最低成本的解决pc兼容移动端应用的解决方案。（因为那么多应用开发者，没有办法要求他们都去花成本研发多个端的应用版本）

并且在我们国产操作系统中移动端web页面横向看，银河麒麟也支持了对于移动端应用的兼容方案。

综上，我们再次作出总结：

1、人眼与屏幕距离决定了合适的屏幕宽度和适合的内容宽度；再大的屏幕尺寸，每次适合用户浏览和使用的宽度是应该有限的。

2、移动互联网的比重决定了pc要往移动端习惯兼容；人们衣食住行已经无法离开移动互联网的今天，pc注定了要跟随移动端的趋势，否则很可能被取代。

而以上两点，我们仅需要在大尺寸的pc屏幕上，将空间按使用需求，有效合理的区隔成适合的分块，而单独的分块又适合在移动端展示。这样看来，纵向分割的设计却能很好的解决以上两点，并且苹果和微软的很多设计也在这个方向上有验证。

我们回到前面分析的pc上普遍的三大类软件场景，其实非常满足纵向分割的设计，并且在平板和移动端上通常也有较为合理的交互和适配。从下图上简要就可以看出，在pc上分割好的板块在小屏上按需通过不同的方式进行交互和展现，即可完成适配。

那么回到本文要说的主题，为什么说是web端设计纵向分割趋势探讨呢？这不是一直讲的是操作系统、客户端和程序应用么？

这里我想说的是，web端的设计通常是跟在这些设计之后的，往往最底层的操作系统有创新的出现，在系统之上的应用层才可能有新的突破，然后web端是其中一个应用——浏览器里的设计表现。所以，目前作为web设计师的我，因此就去多关注了一些更底层、更前沿的技术和设计，期待着会有不同的发现。

回到web端的设计，阿里系的Ant design其实也很早就注意到的阅读时屏幕内容宽度的人因问题，如下图中，卡片内容上的文本信息并非按空间有多宽就展示多宽。

同样华为云的设计师们，其实都早已尝试了纵向分割的设计在web中的表现：在产品的消息中心，合理的纵向分割，模仿邮箱系统的设计，层层递进，直接展示消息详情，合理的利用了横向的屏幕空间，减少了页面跳转，提升了页面美感和阅读交互体验。

他们更加大胆创新的将纵向分割运用在了大型的表单界面，同样也避免了填单界面巨长无比的空输入框，或者空白页面，让页面布局看似更加合理与舒适了。

所以个人愚见，纵向分割的设计，确实可以在web端设计中去尝试运用，尤其是B端设计师小伙伴们，我们是不是可以大胆的尝试起来。沉寂了那么多年的千篇一律的B端设计，是否有不一样的创新出来，让我们拭目以待。