Menu

How Windows 10 killed design

2016 年 8 月 27 日

本文主要内容已发布在知乎「如何评价微软的 UI 设计?」问题下。

从 2014 年 9 月 30 日微软首次公布 Windows 10,到 2015 年 7 月 29 日微软正式向全球发布 Windows 10 正式版,再到微软在 2016 年 8 月 2 日开始向全球用户推送 Windows 10 Anniversary Update,Windows 10 已经是一款有着近两年历史的操作系统。微软于官网、推广邮件和新闻稿中无不在不断重复着 Windows 10 是「Best Windows Ever」。然而,即便 Windows 10 拥有前所未有的免费升级政策之利,至今也仅取得略超过百分之二十的全球市场占有率。至于微软鼓吹的「一次编译,多处运行」的 UWP 通用应用大业,从目前 Windows 应用商店中 UWP 应用的数量看来,距离取代传统 Windows 桌面软件还有很长的路要走。

从各个方面看来,Windows 10 都难称达到微软的预期般的成功。这其中的原因无疑有用户于旧版本系统的惯性,但也存在着微软自身的主观原因。

我作为一个「软粉」,从 2014 年 10 月 1 日微软发布 Windows 10 第一个 Technical Preview(即 Build 9841)开始便使用 Windows 10,热爱 Modern UI 设计和 Universal App 理念的我自然对 Windows 10 有着极大的期望。但同时地,作为一位设计师,我能注意到 Windows 10 中许多设计上的欠考虑和粗心之处,直接造成了用户体验的倒退。我想这也是 Windows 10 发展情况不佳的一个隐性原因。

在去年暑假时(大学入学前),我本准备购置 Surface Pro + Lumia 的微软产品 bundle,但因为家人赠送 MacBook Air 和 iPhone 6 而搁置了购置计划。一年来,我同时使用着 macOS 和 Windows 10,在使用中我明显地感受到 Windows 10 在设计上的廉价,这也使我甚至对一年前没有选择微软产品而感到幸运。

Design matters a lot. 正如这篇博客标题中的语气,Windows 10 的设计是一个十分严重的问题。我依旧热爱着 Windows,也正因此,我想我更应该将心中对 Windows 10 设计的不满表达出来。接下来,在这篇文章中,我将配合大量图片指出 Windows 10 在设计上的不足之处。

  • 锁屏界面(Lock Screen)
锁屏界面(左:未开启 Windows Spotlight,右:已开启 Windows Spotlight)

未开启 Windows Spotlight 功能的锁屏界面和已开启 Windows Spotlight 功能的锁屏界面除背景图片外,还有许多细节上的不统一,例如右下角系统托盘图标位置的不统一,如下图所示:

系统托盘图标(左:未开启 Windows Spotlight,右:已开启 Windows Spotlight)

显然,右图中的图标位置偏上一些。

此外,时钟的位置也有微小区别:

锁屏时钟(左:未开启 Windows Spotlight,右:已开启 Windows Spotlight)

仔细观察的话,可以发现左图中的时钟位置向上偏移了一些。

再者,锁屏时钟和日期的字体字重也有细微区别,如下图所示:

锁屏时钟和日期(上:未开启 Windows Spotlight,下:已开启 Windows Spotlight)

可以看出,已开启 Windows Spotlight 功能的锁屏界面的时钟和日期,字体字重会偏重一些。另外,由于微软雅黑的缺陷,这一点在中文下表现得尤其明显。以上即是锁屏界面中我已发现的 UI 不足。

  • 应用商店(Windows Store)

为了展开这个 UI 吐槽板块,请先允许我在应用商店中打开 Adobe Photoshop Express 这个 App 条目,进入后界面如下:

应用商店中的 Adobe Photoshop Express

各位且看右上方的分级标志,我们试着按下「More」这个按钮,我们将获得这个结果:

看起来很正常,不是吗?点开来以后,你发现这个 App 中的分级包括「Digital Purchases」。但是,既然 Digital Purchases 也只占一行,为什么不直接在第一层界面就显示出来,而是要藏在 More 下面呢?这就有些无法理解了。此外,对于这个分级标志的 UI,我还找到了下面这个例子:

同样的困惑:为什么撑得下版面的字,非要让用户多一次点击才能看到呢?

为了落实微软的「Universal」精神理念,关于「More」的尴尬当然不能止步于分级标志,我们再打开 Translator for Microsoft Edge 这个 App(Microsoft Edge 浏览器扩展)条目:

应用商店中的 Translator for Microsoft Edge

让我们把目光集中到截图右侧的应用说明(App description)上,我们又看到了熟悉了「More」按钮,让我们点开它试试看:

由上,点开 More 以后并没有显示任何多出来的讯息,这个按钮完全是多余的……

再来看一个同样的例子,这个 UI 是 App 页面底部的权限说明:

显然,这又是一个毫无意义的 More 按钮。然而,此处的匪夷所思还不止如此,当我们将窗口拉小时,你会发现……

刚才的「More」按钮不见了!(此处应有黑人问号……)

然后我们再来看一下 App 评价板块,在 Windows 应用商店的评价板块中,可以根据应用版本和使用平台筛选评论,但是筛选的下拉菜单似乎出了一些事故……

可以看出,筛选「版本」的菜单在点开后宽度会变短并顺势使右侧筛选「平台」的菜单按钮向左平移,而筛选「平台」的菜单在点开后宽度就不会变化:

然而这并不是应用商店内所有下拉菜单的模样,其中还有下面这种形式:这是应用商店中影视区内的某一部片子(实际上是 Les Misérables 25th Anniversary Concert),点开选择高清/普清的下拉菜单后,菜单的宽度和之前筛选「版本」的菜单一样诡异地出现了宽度变化,但此处它却不会一并使其右边的按钮发生位移,如下图所示:

当然,作为一个海纳百川的应用商店,UI 上的槽点仅仅有这些是完全不够的。在应用商店中的「People also like」页面中,App 的行间距无比的大,严重地浪费了屏幕空间:

如果你感觉这个问题看得不明显的话,那我们把窗口拉窄一些再看看,这样子不合适的行距造成的空间浪费就十分明显了:

接下来登场的是 Mouse Hover(即鼠标移到某元素上后,显示的灰色半透明覆盖层)尺寸不一致的问题,第三个很明显已经走样了:

应用商店中条目 title 图片大小不统一问题:

由左到右分别为:专辑页面、电影页面、艺术家页面、App 页面

我是实在不能理解为什么专辑的封面和艺术家的头像要比电影的海报和 App 的图标大那么多……

再来看看「下载与更新」页面,

我们试着点击每一行 App 最右边的「Three Dots」按钮,然而我们发现弹出的菜单仅仅只有一项「立即下载」……

我想,更明智一些的做法是直接将「立即下载」作为一个独立的图标取代「Three Dots」的位置。按一个按钮然后打开一个只有一个选项的菜单实在是太令人无法接受了……

最后,还有应用商店的 price label 重复问题,App 页面中写了两次价格(下图中为 Free):

实际上,价格只需要写在下载/购买按钮上就足够了。好了,关于应用商店的吐槽暂告一段落。

  • 日历(Calendar)

首先明明顶部有空位,却硬是要把自己塞到二级菜单里的「打印」功能……

位置和对齐让人十分不舒服的月份切换按钮和奇怪的位于「Today」和「Day」之间的分割竖线:

分割竖线至少也得在两个按钮之间的空隙居中一下吧……

令人无语的 Mouse Hover,居然没有对齐:

日历设置界面中点开后边框没有对齐的菜单:

  • 照片(Photos)

照片 App 中,标题栏的字距和其他系统原生 App 有所不同,细节可见下图,可以发现照片 App 中的字距稍大一些:

  • Groove 音乐(Groove Music)

Groove 音乐在国际著名 Windows 粉丝网站 Windows Central 中被广泛好评为设计得最好的系统原生 App。然而事实并不是这样…… Groove 音乐中同样充满了各种 UI 槽点。

在较大尺寸的窗口中,「Your Groove」板块下方的提示语字号过大,正常应该是右侧的小窗口中的样子,显然微软没有做好相应式设计:

不统一的「More」:

在商店中,点击「More」并不会弹出一个新的对话框,然而 Groove 音乐中却弹出了新的对话框,显得不便。

Mouse Hover 十分简陋,简单粗暴地使用灰色不透明遮罩,并且显得过长了:

全屏和非全屏的「正在播放」UI 中,专辑封面大小不同,字体字重不同:

左为非全屏 UI,右为全屏 UI

仔细查看,可以看出下方(全屏)的字重偏重:

上方为非全屏 UI,下方为全屏 UI

此外,Groove 音乐中的专辑页面中的封面图大小也与应用商店中的不同,Groove 音乐中的小了许多(不过这才是正常的大小)……

  • 入门 App(Get Started)

入门 App 中的标题栏也出事了,只不过和照片 App 的字距问题不同,入门 App 有问题的是字重,通过对比,可以看出入门 App 标题栏的字重和其他系统原生 App 显得更轻一些:

  • 设置(Settings)

设置 App 在 Windows 10 Anniversary Update 中迎来了一次较大的 design overhaul,但是在 UI 的细节上还有很大的问题。

比如,设置的第二级界面和第三级界面的标题字体的字号不同,此处以 Update Status(第二级界面)和 Update History(第三级界面)为例:

左为 Update Status 页面,右为 Update History 页面

放大来仔细看一下,可以看出右边的字号比左边的偏大:

再来看「激活」页面,其中「更换产品密钥」的按钮配了一个 icon,但是这个 icon 居然是按不下去的……

箭头所指的是鼠标移至按钮上时的效果,可以看出 icon 的颜色并没有变灰,icon 是按不下去的。

说到这种左侧带有 icon 的按钮,其设计在设置 App 中也是分裂的。以下是两种不同的带 icon 按钮设计,左侧的文字对齐方式是居中对齐,而右侧的是顶部对齐;当鼠标移至左侧按钮时,按钮的文字会变灰,而对于右侧的按钮,则会有灰色的矩形 hover:

接下来是设置 App 中的搜索功能,此处我以「sign」这个关键词为例子,我输入关键词并点击显示所有结果后,App 跳转到了一个新的页面,其中第一项结果周围出现了一个蓝色框,诡异的是,这个框并不会因为鼠标点击其他结果而消失,鼠标点击另一项结果只会在另一项结果上多显示一个灰色框:

经过我后来的多次尝试,我发现那个蓝色选择框需要用键盘上下来改变位置。但是此处也有一个问题,如果你用鼠标点击了页面中的任意位置,不论怎么按键盘的上下键,那个蓝色框都赖在那里不动了……

最后是「Your info」页面,这个头像的大小和下方字体的排版实在是太 poor 了……看起来就是从未经过 polish 的草稿的样子:

  • 计算器(Calculator)

Windows 10 的计算器被打造成了一款崭新的 UWP 应用,在界面和功能上都比以前的旧 Win32 桌面版本好了许多,甚至都有了自己的设置页面,似乎可以进行很丰富的个性化:

所以让我们点开设置按钮看看其中有什么选项……

???

点开「设置」以后出现了关于(About)页面???Excuse me??? 还不如直接放一个 About 按钮在上面……

  • 反馈中心(Feedback Hub)

微软在 Windows 10 发布伊始时宣布了 Windows Insider 项目,允许普通的用户注册成为 Windows Insider,以抢先下载体验 Windows 10 的内部测试版本,在使用的过程向微软发送反馈,以使微软将 Windows 10 打造为一款为最广大消费者喜爱的操作系统,而反馈中心(Feedback Hub)则是用户发送反馈的窗口。但是,这个 App 的制作并不如微软所说的用心。

先来看看其汉堡菜单(即左上角的三条线按钮)的设计,点开后存在极大的空间浪费:

反馈中心中含有成就系统,我们先来看看这个界面长什么样:

其中的成就徽章显得十分敷衍和鸡肋,正常的徽章应该是圆形的(如左侧),但是因为微软制作时的敷衍,部分徽章甚至出现了不透明的白色背景(估计是忘记保存成 PNG 格式了),看起来非常不专业:

当进入反馈列表时,上方会有筛选条件,然而,在窗口最大化的时,点击不同条件所弹出的列表菜单的弹出方向却不一样:

左为点击「Trending」后弹出的菜单,右为点击「All Categories」后弹出的菜单

上图中左侧的案例中,菜单是从按钮的下方弹出的,在右侧的案例中,菜单则是从按钮的左方弹出的。或许有些人会说这是因为右侧的案例中的菜单项目过多,放在左侧较好,但我认为在存在滚动下拉条的情况下,放在下方并无问题,况且,若我们将窗口缩小,我们将看到这样一幅奇景:

将窗口缩小后,点击「All Categories」后弹出的菜单也变成由下方弹出了!这种 UI 细节上的不统一,实在令人尴尬。

尽管微软一直在吹嘘 UWP 应用的相应式设计,但反馈中心的近乎废品的相应式设计,却为之蒙上了一层阴影,且看下面这个情况:

当把窗口继续缩小时,汉堡菜单并不会自动缩回,且右侧的界面中的搜索框已经面目全非。

  • 手机助手(Phone Companion)

手机助手这个 App 虽然鸡肋,但是启动页面好歹也上上心吧……灰色背景配白色图标这配色这事也只有微软能干的出来了:

  • 人脉(People)

只有一个栏目,毫无卵用的汉堡菜单:

  • 天气(MSN Weather)

滚动条挡住了调整日期的按钮:

  • 虚拟桌面(Virtual Desktop)

点击任务栏上的虚拟桌面按钮后,将鼠标移至「新建桌面」按钮,按钮将不会有任何变化以提示按钮状态(不论是 hover 还是字体颜色变化):

  • 任务栏上的日历

点击任务栏右端的日期和时间后,在弹出的日历面板中,即使没有任何日程,日历面板下方也会默认显示大块空白的 Agenda 面板,极大地浪费了空间,需要手动点击收起面板以解决问题:

正确的情况应该是:按照日程的多少自动调整面板的高度。

  • OneDrive(UWP 版本)

汉堡菜单缩起和展开时,相同的 UI 元素位置有明显的不同:

汉堡菜单展开时,几乎所有的元素位置都明显地下移了。

另外,在设置界面中,排版十分的简陋,简直是个 prototype,字都几乎顶到 hover 的边缘了:

  • Microsoft Edge

Microsoft Edge 支持黑色主题,但其黑色主题中的地址栏显得并为对黑色主题进行充分适配,当鼠标移动至地址栏时,地址栏会变成突兀的白色(灰色系足矣):

  • 微软小娜(Cortana)

当将任务栏上的 Cortana 搜索框改为图标后,Cortana 面板中左下角会出现图标空缺:

Cortona 面板中字体不统一,部分(离线部分)为 Segoe UI,部分(需联网部分)为 Arial:

图中用红色圈出的部分使用 Segoe UI,用黄色圈出的部分使用 Arial

听歌识曲 UI 十分简陋且不与其他场景统一,即正常进行 Cortana 语音时,Cortana 形象会居于面板中心,但听歌识曲时却出现在顶端;并且,听歌识曲界面的「Cancel」和「Try again」两个按钮,鼠标移至其上时都没有视觉反馈。

  • 操作中心(Action Center)

在操作中心中,部分长文字的末端会被拦腰折断,只显示出半个字,然而将信息完全展开后就不会有这个问题:

操作中心中图标显示不统一,对于传统的 Win32 软件,图标背后会多一块主题色的背景,而对于 UWP 应用,图标则是透明的。这个问题我在四个月前就开始不断向微软反应,至今仍未得到回应:

  • 开始菜单(Start Menu)

一如大家所知,开始菜单的最上方会显示最新安装的 App,但如果你最新安装的 App 被 Windows 10 识别出为 4 个,你就会遇到下面这中尴尬的情况:

显然此时第 4 个 App 完全不需要被藏在 Expand 中。

以上便是我粗略整理的 Windows 10 的 UI 细节上的众多问题。感谢你能耐心地读到这个地方。很久没有写过这么长的文章,上一次写到七千字左右,是一年半以前 Windows 10 还未发布时我写的一篇展望文章《Windows on mobility: present and future.》。一年半过去,Windows 10 的移动端几乎已经被宣判死刑,Windows 10 目前尴尬事实也无情地打了我一年半前的脸。但我依旧对 Windows 10 和微软抱有期望,只是目前,我无力将自己的生活埋进这个尚未成熟的操作系统。

一如微博上的微软工程师 @程序员邹欣 近来总说的「生活还要继续」,科技并不是生活的全部。一个科技粉并不意味着需要一心沉入科技之中,站着自己的阵营,这样或许就已经和初衷背离了。当初的我爱上 Windows,是因为 Windows Vista 中 Aero 的优雅和 Segoe UI 字体透露出的别样的人文气息,还有那 Windows Phone 中 Modern UI(Metro)以字体和排版为中心的简约设计。这些都透过科技带来人文和艺术上的美。而现如今,Windows 10 中几乎看不到过去的优雅,这令我尤为失望。

如今,我的生活几乎被苹果设备所占领。macOS 拥有更优雅的界面和更统一的细节,给我带来更好的体验,这都是过去我在 Windows 上希望看到的。我并不后悔过去对 Windows 和微软的喜爱,实际上,我现在依旧热爱着,期待着未来某一天 Windows 10 能够真正成为一款美好的操作系统,也衷心地希望微软的 Universal 战略能够成功。在过去的几年里,我通过关注微软和 Windows,得到了许多有关用户体验、用户心理的心得,这都是 Windows 的独一无二所带给我的。

当然,尽管 Windows 10 的设计有如此多的不足之处,但这并不妨碍其成为至今最棒的一代 Windows 操作系统,如果你还停留在过去的操作系统,升级 Windows 10 仍是一个值得尝试的选择。Windows 10 在全球发布一年多后,稳定性和可靠性较发布伊始之时已有了明显的提升。

这篇文章已经酝酿了半年多的时间,在 2016 年的暑假末尾,我终于将它完成,也算完成了一个给自己下达的大的任务。新的学期就要开始,原各位在未来的日子里平安喜乐。

发表评论

× 5 = 45

Copyright © 2024 Ryan Lau 保留所有权利。