有什么样的娘就该有什么样的娃

views-mac-style-00.jpg

今儿一做产品的朋友提到一个问题：什么样的产品风格是具有 Mac 味儿的？我觉得很有意思。在如今移动互联网的大潮下，业界还都在为移动客户端 Skeuomorphism「拟物化」和 Flat「扁平化」争得面红耳赤的时候，传统的桌面客户端似乎因为人们已经习以为常而被冷落了不少，加之 Mac 小众化的原因，即使几家互联网巨头逐渐开始在 Mac 上发力，但从产品实体看去，这力使得还不是那么大。

在我看来，产品的质量和投入的资源一定是成正比的，只不过这里所说的「资源」并是论「量」，而是论「质」。「人多力量大」这句话并不是用在哪儿都合适的，君不见 DailyCost 就是开发者一个人既当爹又当妈搞出来的，照样秀外慧中好评如潮。所以，开发者或开发团队本身所具备的设计理念，技术水准，甚至是态度问题，都是决定其产品基因的重要因素。毕竟再好的产品也是靠人做出来的，而其自身对于 Mac 或者说对于 OS X 的认知，理解以及喜好程度都会通过每一笔设计和每一行代码反映在产品中。当开发者自身对 Mac 有了深入认知的时侯，这个产品就已经具有了 Mac 的味道。但这只是其中的一面。从设计的角度出发，一个具有 Mac 味的产品在我看来还需要从「图形界面」和「交互设计」两方面着手实现。

「图形界面」也常被简称为 UI，它既是用户对产品的第一印象，同时也是每次使用时都要面对的东西，而用户对于 UI 视觉效果的好坏又远大于对底层代码的关心。有没有 Mac 味儿？对于 Mac 的老用户来说，看一眼就知道了。

那什么样的 UI 是有 Mac 味儿的呢？在回答这个问题前，先来看看这几个关键词：简洁，精致，典雅，前卫，时尚…听上去是不是有些耳熟？没错，这些都是人们对与 Mac 设计风格的形容词，但如果直接用它们来定义所谓的 Mac 味儿 UI 未免太笼统和感性了。应该遵循马克思他老人家说过的话，透过现象看本质，到底什么样的 UI 是有 Mac 味儿的呢？简单说就是，基于 Mac 系统风格所设计的 UI 就是最具有 Mac 味的。虽然看起来像是一句废话，但它却是一个最简单也最直接的事实。

views-mac-style-01.jpg

上面是 Thunder 的 Windows 版本和 Mac 版本的截图，不用我说你也看得出哪一个是 Mac 版。Why？看看下面的这张 OS X UI 就知道了。

views-mac-style-02.jpg

将 QQ for Mac 的登录界面和 OS X 的登录界面做个对比。

views-mac-style-03.jpg

再拿广泛流行于 Mac 客户端的明暗色调的边栏与 OS X 的通知中心做个对比，什么是「基于系统 UI 的设计」就更是不言而喻了吧。

views-mac-style-04.jpg

如此做的原因虽然有部分是受限于 OS X 开发组件，但更多的则是看上去与系统 UI 形成统一风格，俗话说就是王八看绿豆，要「搭调」才行。毕竟 Mac 不同于 iPhone，为后者设计 App 既可以基于 iOS 的 UI 风格，也可以搞特例。因为 iOS 的 App 在运行后基本是独占全屏的，这样即使设计时没有遵循系统的 UI，也不会特别影响整个 App 的视觉风格。但如果放在 Mac 下就不一样了，大多数的 App 都是窗口化运行，如果设计风格较系统 UI 过于激进，那就会看上去极其怪异，且不说有没有 Mac 味儿，单是感官体验就会让用户很不舒服。比如下图，将 Mac 版的 QQ 放进 Windows 中，图小可能影响感受，但明白我这么说的意思就好了。

views-mac-style-05.jpg

不过，也有一些很优秀的产品在保持与系统 UI 风格一致的基础上，突破开发组件的限制，对 UI 进行了颠覆性的设计，比如 CleanMyMac 2。炫目的 UI 不仅让用户使用起来赏心悦目，而且同样可以让人一眼看出这是 Mac 下的软件。当然，这种设计方法成本也相对较高，对视觉设计人员和程序开发人员都有着更高的要求。而且对于一个产品是否采用这样的 UI 设计方式，最终决定于该产品的应用场景和用户群体，否则很可能落得个吃力不讨好的下场。

views-mac-style-09.jpg

话说 360 刚推出不久的 Mac 版安全卫士在 UI 方面还是下了功夫的，只不过他们的东西 Windows 下一个不小心用用也就好了，Mac？还是算了吧，原因你懂的。所以抱歉这个实在是没截图了，借用官网的图凑合看吧。

views-mac-style-10.jpg

但 Mac 味的风格单靠 Cosplay 就可以了吗？非也，有个成语叫「神形兼备」，如果把「图形界面」比喻为「形」，那么「交互设计」则就是「神」。Mac 味儿讲究的不只是「形似」，还要「神似」才真正够味儿。

那「交互设计」指的又是什么呢？还记得之前形容 Mac 设计风格的那几个形容词吧，其中的「简洁」一词就包含有这层意思。所谓「简洁」明面上是指 UI 设计，但暗面却包含着对于产品功能以及操作体验上的优化。回到 Mac 本身，用过 Mac 再返回去用 Windows，你会发现两者在系统易用性的设计理念上有一个很大的不同，那就是 Windows 恨不得把所有功能都扔出来，而 Mac 则只扔出它认为重要的功能，而把其它的都「藏」起来。

views-mac-style-06.jpg

上图是 Windows 8 Explorer 与 Mac OS X Finder 的对比，抛去两者在易用性上的优劣不谈「实际上目前的 Finder 的确不太好用」，从各种功能的布局就可以感受的到两者完全不同的设计理念。尤其是 Windows 8 借鉴了 Office 的 Ribbon UI，新版的 Explorer 把更多的功能直接放到了界面中，这样做的好处是可以更快捷的让用户找到需要的功能，坏处是一旦把握不好就会让界面看上去极其复杂和臃肿，用户可能还没用就已经被密密麻麻的按钮吓跑了。反观 Mac 的 Finder 则刚好相反，界面上只保留了几个用于视图切换的按钮，其余大部分的操作都放在了菜单中，这样做的好处是不仅让界面看上去清爽简洁，而且不会给用户带去很大的压力感，但坏处也显而易见，把太多的功能「藏」起来会减缓操作效率，甚至某些功能还可能被用户无视而被凉在角落里吃灰。

这两种不同的交互设计理念反映出的其实是两家公司在文化上的差异。没有绝对的对，也没有绝对的错，设计的过程都只在一个「度」字，只要把控得当就都没什么问题。有鉴于此，Mac 下的 App 在「交互设计」上大多也走的是这条「简洁」之路，下图中的 Evernote 就是一例典型。

views-mac-style-07.jpg

从 Windows 版和 Mac 版的对比图中可以看出，前者界面的功能布局看上去要比后者复杂的多，其中一方面有平台特性的限制，比如 Mac 下 App 的菜单栏都是统一在顶部的 Menu Bar，所以 App 的界面中可以省去这部分的设计。另一方面也有其官方在不同平台下的战略考虑。但总的来说，Windows 版还是较 Mac 版臃肿和难用一些。

所以，我认为具有 Mac 味儿的产品风格也该包括这种「简洁」的「交互设计」，不要一味的塞功能给用户，而是在过程中做到取舍得当，该放的放，该藏的藏。在这方面做得比较好的，「微信」绝对算的上一个正能量，虽然它不是 Mac App，但其设计理念却值得借鉴和参考。

另一个则是大改版之后的 iTunes 11，而且不只如此，如果去用一下 Windows 版的 iTunes 11，会发现其界面设计与 Mac 版惊人的相似，这其中的神来之笔在于 Windows 版 iTunes 11 利用左上角将以往 Windows 版中的菜单栏做了隐藏，在视觉上既不显的突兀，同时又可以做到与 Mac 版基本保持一致的设计风格。

views-mac-style-08.jpg

唠唠叨叨说了这么多，结合以上提到的「产品开发者」「基于系统 UI 的图形界面」以及「基于 Mac 理念的交互设计」，对于「什么样的产品风格是具有 Mac 味儿的？」这个问题的答案，总结一句话就是：有什么样的娘就该有什么样的娃。