0

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

    2023.08.07 | admin | 126次围观

    我们有个岗位想找你谈谈

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

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

    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端设计,是否有不一样的创新出来,让我们拭目以待。

    版权声明

    本文仅代表作者观点。
    本文系作者授权发表,未经许可,不得转载。

    发表评论