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

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 味儿的?」这个问题的答案,总结一句话就是:有什么样的娘就该有什么样的娃。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,015评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,262评论 1 292
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,727评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,986评论 0 205
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,363评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,610评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,871评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,582评论 0 198
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,297评论 1 242
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,551评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,053评论 1 260
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,385评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,035评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,079评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,841评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,648评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,550评论 2 270

推荐阅读更多精彩内容