今兒一做產品的朋友提到一個問題:什么樣的產品風格是具有 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 味的。雖然看起來像是一句廢話,但它卻是一個最簡單也最直接的事實。
上面是 Thunder 的 Windows 版本和 Mac 版本的截圖,不用我說你也看得出哪一個是 Mac 版。Why?看看下面的這張 OS X UI 就知道了。
將 QQ for Mac 的登錄界面和 OS X 的登錄界面做個對比。
再拿廣泛流行于 Mac 客戶端的明暗色調的邊欄與 OS X 的通知中心做個對比,什么是「基于系統 UI 的設計」就更是不言而喻了吧。
如此做的原因雖然有部分是受限于 OS X 開發組件,但更多的則是看上去與系統 UI 形成統一風格,俗話說就是王八看綠豆,要「搭調」才行。畢竟 Mac 不同于 iPhone,為后者設計 App 既可以基于 iOS 的 UI 風格,也可以搞特例。因為 iOS 的 App 在運行后基本是獨占全屏的,這樣即使設計時沒有遵循系統的 UI,也不會特別影響整個 App 的視覺風格。但如果放在 Mac 下就不一樣了,大多數的 App 都是窗口化運行,如果設計風格較系統 UI 過于激進,那就會看上去極其怪異,且不說有沒有 Mac 味兒,單是感官體驗就會讓用戶很不舒服。比如下圖,將 Mac 版的 QQ 放進 Windows 中,圖小可能影響感受,但明白我這么說的意思就好了。
不過,也有一些很優秀的產品在保持與系統 UI 風格一致的基礎上,突破開發組件的限制,對 UI 進行了顛覆性的設計,比如 CleanMyMac 2。炫目的 UI 不僅讓用戶使用起來賞心悅目,而且同樣可以讓人一眼看出這是 Mac 下的軟件。當然,這種設計方法成本也相對較高,對視覺設計人員和程序開發人員都有著更高的要求。而且對于一個產品是否采用這樣的 UI 設計方式,最終決定于該產品的應用場景和用戶群體,否則很可能落得個吃力不討好的下場。
話說 360 剛推出不久的 Mac 版安全衛士在 UI 方面還是下了功夫的,只不過他們的東西 Windows 下一個不小心用用也就好了,Mac?還是算了吧,原因你懂的。所以抱歉這個實在是沒截圖了,借用官網的圖湊合看吧。
但 Mac 味的風格單靠 Cosplay 就可以了嗎?非也,有個成語叫「神形兼備」,如果把「圖形界面」比喻為「形」,那么「交互設計」則就是「神」。Mac 味兒講究的不只是「形似」,還要「神似」才真正夠味兒。
那「交互設計」指的又是什么呢?還記得之前形容 Mac 設計風格的那幾個形容詞吧,其中的「簡潔」一詞就包含有這層意思。所謂「簡潔」明面上是指 UI 設計,但暗面卻包含著對于產品功能以及操作體驗上的優化。回到 Mac 本身,用過 Mac 再返回去用 Windows,你會發現兩者在系統易用性的設計理念上有一個很大的不同,那就是 Windows 恨不得把所有功能都扔出來,而 Mac 則只扔出它認為重要的功能,而把其它的都「藏」起來。
上圖是 Windows 8 Explorer 與 Mac OS X Finder 的對比,拋去兩者在易用性上的優劣不談「實際上目前的 Finder 的確不太好用」,從各種功能的布局就可以感受的到兩者完全不同的設計理念。尤其是 Windows 8 借鑒了 Office 的 Ribbon UI,新版的 Explorer 把更多的功能直接放到了界面中,這樣做的好處是可以更快捷的讓用戶找到需要的功能,壞處是一旦把握不好就會讓界面看上去極其復雜和臃腫,用戶可能還沒用就已經被密密麻麻的按鈕嚇跑了。反觀 Mac 的 Finder 則剛好相反,界面上只保留了幾個用于視圖切換的按鈕,其余大部分的操作都放在了菜單中,這樣做的好處是不僅讓界面看上去清爽簡潔,而且不會給用戶帶去很大的壓力感,但壞處也顯而易見,把太多的功能「藏」起來會減緩操作效率,甚至某些功能還可能被用戶無視而被涼在角落里吃灰。
這兩種不同的交互設計理念反映出的其實是兩家公司在文化上的差異。沒有絕對的對,也沒有絕對的錯,設計的過程都只在一個「度」字,只要把控得當就都沒什么問題。有鑒于此,Mac 下的 App 在「交互設計」上大多也走的是這條「簡潔」之路,下圖中的 Evernote 就是一例典型。
從 Windows 版和 Mac 版的對比圖中可以看出,前者界面的功能布局看上去要比后者復雜的多,其中一方面有平臺特性的限制,比如 Mac 下 App 的菜單欄都是統一在頂部的 Menu Bar,所以 App 的界面中可以省去這部分的設計。另一方面也有其官方在不同平臺下的戰略考慮。但總的來說,Windows 版還是較 Mac 版臃腫和難用一些。
所以,我認為具有 Mac 味兒的產品風格也該包括這種「簡潔」的「交互設計」,不要一味的塞功能給用戶,而是在過程中做到取舍得當,該放的放,該藏的藏。在這方面做得比較好的,「微信」絕對算的上一個正能量,雖然它不是 Mac App,但其設計理念卻值得借鑒和參考。
另一個則是大改版之后的 iTunes 11,而且不只如此,如果去用一下 Windows 版的 iTunes 11,會發現其界面設計與 Mac 版驚人的相似,這其中的神來之筆在于 Windows 版 iTunes 11 利用左上角將以往 Windows 版中的菜單欄做了隱藏,在視覺上既不顯的突兀,同時又可以做到與 Mac 版基本保持一致的設計風格。
嘮嘮叨叨說了這么多,結合以上提到的「產品開發者」「基于系統 UI 的圖形界面」以及「基于 Mac 理念的交互設計」,對于「什么樣的產品風格是具有 Mac 味兒的?」這個問題的答案,總結一句話就是:有什么樣的娘就該有什么樣的娃。