设计思考

“桌面软件”设计风格在Web产品中的应用

一、用户的声音:能不能做得像软件一样?

作为数据开发产品的设计师,在接需求、和用户沟通的时候经常会听到这样的声音:

  • — “我们可不可以用暗色模式呀,因为这样看起来很酷!“
  • — ”我们需要一次打开多个代码编辑窗口,因为竞品都是这么做的。“
  • — ”侧边导航可不可以做成文件夹的样式?这样跟程序员常用的软件很像。“
  • — ”风格就按照阿里云来吧(发送一张截图),就这个好。“

直观地看,在数据开发场景中,用户更偏向”桌面软件“风格,而非简洁的网页风格。

两种风格

刚刚接到这样的需求,其实是有些困惑的。从交互逻辑上来说,似乎没有证据表明”桌面软件风“能够提高用户的操作效率;从视觉上说,这种风格中似乎采用了大量冗余的阴影、甚至拟物化的元素,与当下流行的简约风背道而驰。

最有趣的是,当我告知业务方,这种风格的设计和开发成本都很高时,一向主张”MVP版本(潦草搞搞)快速上线“、对于工期斤斤计较的产品经理,却认为可以接受这样的成本,愿意付出更多的工期来实现它。

面对这样的情况,我不禁要思考,为什么我们的用户偏爱”桌面软件“的设计风格呢?为什么我们的竞品率先实现了这种看似”不实惠“的方案呢?”桌面软件“与Web产品的区别又在哪里呢?

二、谁在模仿“桌面软件”?

仔细搜集的话,我们已经能够发现许多模拟”桌面软件“的Web产品,其中大部分也算是我们互联网从业者的老朋友了:

Google Docs/Sheets/Slides

谷歌旗下的在线办公软件,包括文档、表格、演示文稿。尽管是Web产品,但在功能与稳定性上几乎能够与经典的Microsoft系列办公软件相媲美。

Google Docs/Sheets/Slides
Google Docs/Sheets/Slides

Jupyter Lab

Jupyter是一个开源的“交互式编程”工具,许多程序员喜欢用Jupter来分区块编写代码,这非常方便代码调试与纠错。作为Web端的编辑器,Jupyter力求营造出一种与本地编程等同的体验。

Jupyter Lab
Jupyter Lab

DataStudio

作为阿里云推出的数据开发平台,DataStudio在UI方面也是同样在向本地编程软件的风格上靠拢的。左侧的树形导航方便用户在丰富的业务和资源中进行穿梭,右侧的工作区域允许用户打开多个标签页,多线程办公,暗色模式更是让程序员们感到”爱了爱了“。

DataStudio
DataStudio

对比一下两款本地开发软件(Pycharm、Dreamweaver)的界面样式,很明显DataStudio是在有意向这种风格靠拢的。

本地的编程软件成为web开发产品学习的对象
本地的编程软件成为web开发产品学习的对象

墨刀

墨刀是一款在线原型设计工具,设计师小伙伴们应该相当熟悉了。墨刀同时提供下载版的桌面应用与在线的web产品,当你在web端使用墨刀时,其实是感知不到web应用常见的那种细小卡顿和功能缺失的,无论在UI上还是体验上,墨刀都做到了桌面版与web版的一致性。

墨刀-在线产品原型设计与协作平台
墨刀-在线产品原型设计与协作平台

稿定设计

这是一款在线PS工具,方便设计师在没有安装Photoshop软件的电脑上临时处理图片。可以看到,这款应用的UI完全就是高仿的Photoshop,用户上手没有任何的学习成本,同时它也支持原版的快捷键操作。可惜,虽然外观有模有样,但在能力、流畅度上与真正的PS还是有较大差距的。

定稿设计-在线PS
定稿设计-在线PS

小结:什么样的产品可以模仿“桌面软件”

总结来看,模拟“桌面软件”的Web端产品全部都是办公类的应用,涵盖了文档、开发、设计多个领域。它们采取了这样的设计风格,原因是不言而喻的:

一方面,与Web产品相比,传统的桌面软件在底层的技术能力上更加稳定可靠,并且有更长的开发、验证周期,通过模拟“桌面软件”的风格我们能够让用户更加信赖产品。另一方面,这样能够唤醒用户在传统软件中的操作习惯,鼓励用户使用右键和键盘操作(如delete删除、ctrl+s保存、空格+鼠标滚轮放大画布等)等网页端比较少见的操作。

不过,并不是所有的产品都适合模仿“桌面软件”的风格,我们还是需要根据实际的用户场景和产品定位来决定。满足以下条件的产品更适合这一风格:

沉浸式办公场景

以设计类产品为例,使用“墨刀”这种在线原型设计工具时,用户通常需要绘制大型项目的原型,可能一用就是几个小时,画图到头秃。这时,类似“桌面软件”的风格,能够给用户更多的稳定感与沉浸感,从而提升办公的效率与体验。

而类似“鹿班”这种主打利用模板智能生成banner图片的产品,用户在上面停留的时间不长,就没有必要去靠拢“桌面软件”了。

庞大的功能

这些产品都提供了专家级用户才需要的高级功能,而一般来说,只有传统的桌面软件能更好地支持这些复杂操作。当一款办公类产品对自己的功能非常自信时,可以通过模拟“桌面软件”的设计风格,向用户宣布,我们是“大而全”的。

采取这种策略的Web端办公产品,通常还会设置快捷键体系,让用户体验完全向桌面软件靠拢。

迭代频次相对低

从现实的角度考虑,使用软件风格的产品,在开发成本上是会高于普通网页的。如果你的产品处于一个需要短期试错、小步快跑的阶段,那么这种风格可能短期内是不适合的。

三、“桌面软件”的设计特征

接下来,我们来看看什么是“桌面软件”风格。“百度网盘”同时提供了web端与桌面端的应用,并且在适配不同端的方面做得很不错,我们可以以百度网盘为例,详细分析桌面端在设计上与web端产品有什么不同:

1、弱化品牌logo

网页产品的左上角通常会放置明显的logo,以加强用户对品牌的认知。而对比百度网盘双端的情形,我们可以发现桌面端不再突出logo,仅仅使用Mac OS系统默认的标题栏。

2、间距结构较紧凑

无论是左侧导航,还是内容区域的列表,桌面端都明显更为紧凑。

3、使用系统的设计语言

不少产品的桌面端,都对微软与苹果双系统做了分别的适配,以图更好地融入系统的设计语言。

在Mac上,百度网盘放弃了网页版中的品牌配色方案,转而而使用更贴近Mac OS的视觉风格。例如表格的斑马配色、选中态的深蓝背景色。

同时,桌面端会尽量调用系统的默认控件,尽量不使用不必要的自定义控件。

4、使用桌面端的交互习惯

众所周知,用户在网页端的操作习惯与桌面端是有很多不同的。主要包括:

(1)右键操作

在桌面端,用户可以通过单击鼠标右键唤出隐藏操作的面板;而在网页端,一般不会进行这样的操作(在网页中点击右键会唤出浏览器的操作面板)。

在网页上右键操作,会触发浏览器的右键面板
在网页上右键操作,会触发浏览器的右键面板

在百度网盘的网页端中,虽然也提供了右键交互的功能,但带给用户的感知力其实是很低的,也就是说很难被用户发现。对比双端,我们可以发现在网页端中,右击唤出的操作只是被作为备选路径,“删除”、“重命名”等低频功能主要还是通过顶部的批量操作按钮实现的;而在桌面端,右键唤出面板才是最常见的操作方式,其它通过点击完成的操作路径可以被设计得很隐蔽。

(2)单击选中、双击打开

在网页中,单击按钮或链接后跳转至新的url是最常见操作,不过这一习惯在桌面端反而不是主流。百度网盘的双端依然能够体现这种区别:

在网页端,单击文件夹可以进入,而要想对选文件夹进行批量操作的话,需要点击文件左上角的圆形checkbox进行选中。

而在桌面端,百度网盘采用了系统文件夹管理的交互模式,单击选中、双击进入。这样的好处是可以快捷地选中多个文件(ctrl+单击多选、shift+单击正行多选、按住拖拽多选),并进行下一步的批量操作。

(3)键盘操作

在网页端,键盘大多数情况仅仅被用于输入文字(局限于文本框或类似控件当中)。而在桌面端,键盘操作可以有更广的应用:

  • 通过快捷键进行保存、撤销、搜索等常见操作;
  • 结合单击选中,直接用delete键删除文件、内容等;
  • 通过按键改变鼠标操作,例如ctrl+滚轮缩放画布、空格+长按左键拖拽画布。

四、“桌面软件”为什么与Web不同?

仅仅罗列桌面端的特征其实非常简单,但另一个值得引申思考的问题是,为何桌面端与Web端存在这些差别?交互习惯上的差别并不难理解,网页产品通常都是快速迭代的,自然会砍掉一些复杂操作,但视觉风格上的区别又是为何形成的呢?

首先,我排除了技术限制与稳定性的影响。一方面,没有任何设计规范规定了Web端的“可点击区域”必须比桌面端大,也没有任何证据证明紧凑的结构在Web端会导致明显的加载缓慢或其他问题;另一方面,系统本身对桌面端应用也是没有过多限制的,遵循系统规范完全是应用自发选择的结果。

其次,从时间顺序上讲,桌面应用的发展在前、Web在后,桌面应用伴随着人机交互界面一同产生,许多设计模式自那时起已经初见雏形并延续至今,而Web只是后起之秀。因此我们的正确提问方式是——为什么Web设计与桌面应用不同?

最早的人机交互界面
最早的人机交互界面

桌面应用最大的一个特点是——桌面上可以有很多个应用窗口,它们可以随意放置、互相覆盖,而用户可以在不同的应用之间切换,甚至在应用窗口与桌面之间进行交互(如将桌面上的文件拖拽到网盘的应用窗口上,即可上传文件)。这种多视图的操作方式要求桌面应用的布局是紧凑的,空间利用率必须很高,才能在有限的窗口尺寸中呈现尽可能多的信息——实际上,大量桌面应用的默认窗口尺寸都是不大的(例如音乐播放器、网盘、QQ等通讯工具)。

办公类产品可能是个特例,用户通常需要全屏使用这类产品,进行沉浸式的办公。在这个场景下,操作较为简单的办公应用可以使用稍微宽松的布局,例如简单的文档编辑工具;而功能复杂的办公产品,依然需要采用极为紧凑的布局结构。

宽松型(有道云笔记)vs紧凑型(After Effect)
宽松型(有道云笔记)vs紧凑型(After Effect)

另外,由于桌面应用是由醒目的桌面图标进入,且存在常驻的顶部菜单栏,它从来不用担心用户迷失的问题。巨大的顶导logo也是不必要的。

近十多年以来,Web端产品才逐渐成为更加主流和常见的IT服务。与桌面应用的上述特征相比,Web产品明显不同:

  • 从用户场景上讲,Web产品更常被全屏浏览,不存在窗口折叠的问题,因此可以采用更为舒展的布局结构。
  • 从生态上讲,Web产品是“寄生”在浏览器中的,需要做到比它的容器更加醒目、抓人眼球,因此需要比菜单栏、导航栏、标签栏更宽或更鲜艳的顶部导航。
  • 从用户路径上讲,Web产品通过超链接不断索引,容易造成迷失,因此需要更大的logo与标题。

以上都是Web端产品与桌面产品设计风格不同的根本原因。

五、“桌面软件”风格给我们的启示

言归正传,这篇文章的目的,还是希望帮助大家了解如何运用“桌面软件”风格。通过以上对于软件风“谁在用”、“是什么”、“为什么”的讨论,我们最后需要看看,这种风格将会如何帮助到我们日常的设计实践。

1、直接借鉴——提升Web办公产品体验

如前文已经介绍的,对于特定类型的Web办公产品,我们可以直接模仿桌面软件的视觉风格与交互习惯。例如我目前参与的数据开发类产品,它的应用场景、复杂程度与办公类的桌面端产品并无两样,一样需要全屏使用、长期停留,且界面内容非常复杂。

在这种情况下,视觉风格向桌面应用靠近就是十分有利的了 。一方面,桌面应用的视觉隐喻能增强用户对于产品的信任感;另一方面,唯有这样用户才能够感知到“右键”、“双击”、“键盘快捷键”等桌面端上才有的隐藏操作。

2、吸取灵感——打磨设计细节

除了这种特例的场景,在更广泛的产品设计中,我们虽然没有必要完全模仿桌面软件的风格,但依然可以从中获得灵感——有着更长发展历史、更长迭代周期的软件,在设计细节的打磨上经常更加细致,非常值得我们学习。

例1:编辑标题的场景

在传统的网页中,“编辑态”和“显示态”这两者是泾渭分明的。例如,这是一个表格详情页,在“详情页”中我们是不能够编辑表格标题的。

想要更改表格名称当然可以,但是必须进入专门的“编辑态”,在这个例子中是一个编辑弹窗。

这种方案在网站中早已令我们习以为常,也看似没有什么值得优化的地方。不过,如果我们对比桌面端的解决方案,就会改变想法——在操作系统中,如果想要更改某个文件的名字,只需在选中之后,再单击一次就可以实现了。

在MAC中更改文件名称

这种交互为什么不可以成为Web设计的灵感来源呢?现在,已经有不少产品尝试打破“编辑态”和“显示态”的边界,为用户呈现最自然的交互方式。

在Google Colab中编辑标题
在Google Colab中编辑标题

例2:内容缩写的场景

许多同学都应该碰到过这样的场景:文字内容的长度不受我们的控制,而展示空间却是有限的。此时,默认展示固定字数(或宽度)的内容,后面以“…”进行省略,是一种通用的解决方案。当然,配套的措施还有,允许用户鼠标hover的时候,以一个tooltip展示全部文字内容。

石墨文档的文件列表
石墨文档的文件列表

这种方案依然是“足够的”,不过,并不是在所有场合下最优的。

例如,指代省略的“…”,自身依然需要占据一个字符,这对于列表中的字段并无影响(能够展示15个或16个字,对辨识度的影响不大),但是对于文字展示空间更小的场景来说,多一个“…”就使空间更加捉襟见肘了,比如网址导航页面:

优设设计师网址导航(左)、Chrome自定义导航(右)
优设设计师网址导航(左)、Chrome自定义导航(右)

同时,以Tooltip展示完整内容,也经常出现信息冗余的情形:

同样的信息展示了两遍
同样的信息展示了两遍

而这样两个问题,在桌面端其实早已有了非常成熟的解决方案。

对于浏览器,多开标签页是一个非常常见的场景,当标签页达到十多个时,每个标签的宽度已经被极度挤压了,此时必须精打细算每一像素的空间。Chrome给出的方案是用渐变遮罩代替“…”:在有限的空间内展示尽量多的字符,并在最后一个字的上方叠加渐变遮罩,形成一个渐隐的效果,提示用户后面还有隐藏掉的信息。

Chrome浏览器的缩略方案
Chrome浏览器的缩略方案

而对于Tooltip重复展示的问题,操作系统的文件管理器早已进行了规避。无论是在PC还是Mac上,文件管理器都是采用“原位展示型”Tooltip来展示完整信息,即Tooltip正好覆盖文件名原来的位置,不干扰用户的视线。

原位展示型Tooltip
原位展示型Tooltip

结语

本文介绍了“桌面软件”风格的特征、用法、区别于Web的原因,并探讨了我们在日常进行设计时可以从中借鉴的方向。

值得说明的是,无论是使用“桌面软件风”,还是借鉴桌面软件的交互细节,确实都会在一定程度上提升开发成本。正因如此,事实上,我们当下大多数Web采用的都是一种特意简化了的交互方式。

不过,以实现成本、加载速度为重的设计思路已经是2G、3G时代的产物了,而未来,能够限制我们追求极致设计的因素一定会越来越少。作为设计师,我们依然会考虑用户体验与实现成本之间的“性价比”,不过,我们同时也要时时自省,切忌将“考虑成本”作为放弃深究、放弃追求的借口。

最后,让我们用古人的话来自勉吧:

“取乎其上,得乎其中;取乎其中,得乎其下。“

《论语》

7 thoughts on ““桌面软件”设计风格在Web产品中的应用”

  1. web最大的问题还是兼容性和桌面api接口功能的缺失,能解决这两个基本还是可以模拟原生app体验。

  2. 这种沉浸式的体验,成本就如今来说相较以前低了挺多,现在的跨端开发尤为常见,为的就是统一设计、统一用户体验以及减少前期的开发(或试错)成本。

  3. 在传统建筑设计软件中(Autodesk 家的产品),在操作时可以先使用动作,再选择物体使用动作,而在一些网页的设计软件中必须先选择物体再使用动作,这可以理解为桌面软件与WEB产品的差异吗?还是说产品上的差异呢? 这两种操作如何取舍?感谢回复🙏

    1. 我没有使用过建筑设计软件哈,所以不太理解“先使用动作、再选择物体”的具体流程。不过,我倾向于认为这是产品上的差异。

      1. 比如在网页中需要选中物体,才可以使用复制这个动作。而在CAD中可以先使用复制,再去选择物体进行复制。哈哈哈哈

回复 龙爪槐守望者 取消回复

您的电子邮箱地址不会被公开。 必填项已用*标注