大家好,今天我們來聊一聊蘋果和谷歌的設計語言。自從移動互聯網開始興起,我們的日常生活開始充斥著大量的移動設備,手機,Pad,智能穿戴設備。而這些產品,其操作系統要么是蘋果的 iOS 系統,要么是谷歌的安卓系統。從 2007 年同時問世以來,雙方都已經發展出一套成體系的設計語言。

那么蘋果和谷歌兩個巨頭主導系統設計語言各自的發展歷程是什么,區別又在哪里?

  • 蘋果的多點觸控;
  • 碎片化的安卓;
  • 擬物化設計;
  • iOS 7 的扁平化;
  • Material Design;
  • 3D touch 與劉海屏;

蘋果的多點觸控

2007 年 1 月,蘋果推出 iPhone。現在我們知道的是 iPhone 給手機行業帶來了巨大的變革,我們不知道的是初代的 iPhone 面臨著很多質疑。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

初代 iPhone 與競爭對手相比,在很多方面是處于劣勢的。例如,不支持彩信、不支持文本復制粘貼。iPhone 雖然號稱是智能機,但是初代 iPhone 不能安裝第三方應用。在 iPhone 里安裝應用必須在蘋果官方的 AppStore 里,而 App Store 是 iOS 2 版本才上線的。所以初代 iPhone 是一個只能使用 15 個預裝軟件的智能手機,這個明顯有悖于我們對于智能機的認知。

有著諸多明顯的缺陷,iPhone 這朵后浪是怎么把諾基亞黑莓這些前浪拍死在沙灘上呢?原因就是 iPhone 給手機行業帶來了革命性的界面交互。

在 iPhone 之前,用戶與手機進行交互,要么是鍵盤,要么是手寫筆。iPhone 采用的電容屏技術支持多點觸控,iPhone 是第一款用戶可以用手指直接與屏幕進行交互的手機。之前我們在手機上進行操作必須通過一個個按鍵上下左右,確認等復雜行為。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

跟初代 iPhone 同時發布的諾基亞 6300,用戶進行操作需要記住一系列的快捷鍵,這個增加了用戶的學習成本。而 iPhone 上下滑動,手動點擊,雙指縮放的操作方式已經十分接近于人類的本能行為了。在發布會上,喬布斯僅僅一個滑動歌曲菜單這個簡單操作,就引發了下面的一陣陣歡呼。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

多點觸控觸控技術的成熟帶來如科幻電影般交互體驗是初代 iPhone 成功的最大原因,這種說法一點也不夸張。

值得一提的是,蘋果開發多點觸控技術最初是希望用在 iPad 上,多點觸控技術的成熟使喬布斯意識到用戶通過手指在小屏設備上進行交互成為了可能,這是一個更大的市場。所以從 2004 年開始,蘋果轉而將精力投入到 iPhone 中研發中。iPad 直到 2010 年才推出。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

iPhone 最開始的時候,內置的地圖應用是谷歌地圖。得益于 iPhone 采用了全新的交互手勢,所以谷歌地圖在 iPhone 上具有遠超其他競爭對手的體驗。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

而谷歌在 2007 年底聯合三星、摩托羅拉等多家企業成立開放手持設備聯盟,推出安卓系統,直接對標蘋果的 iOS 系統。這也促使蘋果不再使用谷歌作為地圖服務商,蘋果在 iOS6 發布了自己的 Apple Map.

碎片化的安卓

蘋果于 2008 年推出 iOS 2,這個版本最大的改動是上線了 appstore,自此 iOS 不僅僅是一個操作系統,還是一個應用平臺。既然是應用平臺,需要保持各個應用在界面設計上的統一性。所以蘋果官方推出了 iOS 設計文檔,human interface guidelines。所有在 App Store 上線的應用,其界面設計必須遵循這個規范。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

此時安卓系統從交互設計上來說無法跟蘋果的 iOS 相比。因為當時安卓系統還是基于帶有鍵盤的大屏幕手機為藍本進行開發的。我們對比一下 2008 年發布的第一款安卓手機,HTC G1 和 2007 年發布的初代 iPhone,可以明顯的感受到時代感。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△ 時代感滿滿的 HTC G1

此外大家也應該注意到,安卓系統是谷歌聯合多家廠商開發出來的。它最大的特點就是開放,各家廠商可以修改底層文件,做成屬于自己的 UI。像我們熟悉的小米的 miui 和華為的 emui。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?MIUI 1.0

大家可能忘了雷軍的小米最早出圈的產品不是小米手機,也不是米聊,而是 miui。我上大學的時候,當時大家都很樂意把手機的系統刷成 miui。各家廠商可以隨意定制 ui,這個導致了安卓手機的應用界面設計上五花八門,碎片化嚴重。

擬物化設計

2009 年,iOS 3 上線,從這個版本開始,蘋果開始采用擬物化設計風格。筆記本應用中,筆記本的邊框采用的是縫合的皮革紋理,會加入陰影和高光,讓用戶覺得這是一個真實的筆記本。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?擬物化設計

此外,這個版本中,iPhone 終于支持文本復制粘貼了。iPhone 的復制粘貼為什么姍姍來遲呢?因為按鍵手機和全觸控手機的復制粘貼功能根本不是一回事,用戶的操作流程也不一樣。按鍵手機,用戶先通過快捷鍵進入復制模式,然后上下左右按鍵一通操作框選出自己想要復制的內容,再確認復制,然后粘貼。而 iPhone 中,用戶長按文本,直接通過滑塊來選擇復制內容。對按鍵手機來說,這種體驗簡直是降維打擊。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?按鍵手機的文本復制粘貼功能體驗非常的差

蘋果在用戶體驗這塊一直維持著高標準,最起碼在喬布斯時代是這樣的。不刻意追求比競爭對手更早的推出新的功能,而追求給用戶提供更好的服務。在喬布斯這樣的完美主義者看來,設計只有兩種:要么是完美無缺,要么是一團垃圾。這種非黑即白的觀點,不建議大家學習。但是蘋果的成功離不開他這樣偏執的態度,他給蘋果注入了追求完美的靈魂。

國內的很多廠商會喜歡定制一些指標對標 iPhone,說我們在某某方面吊打了 iPhone,我們比 iPhone 提前半年上線了某某功能。總之,我們穩了。AirPods 剛公布的時候,大家都覺得自己不會花一千多買一個藍牙耳機,但是最后越來越多的人接受了它。我們不能把 AirPods 簡單地歸結為智商稅。蘋果肯定不是一家完美的公司,他有很多的黑點。天線門、降速門,高抽成壓榨開發者。但是它產品的用戶體驗做得是真好。國內廠商,我們沒有穩,未來任重而道遠。

iOS 7 的扁平化設計

2012 年,iOS 6 發布,還記得我在前面提到的谷歌地圖嗎?為了擺脫對谷歌的依賴,在 iOS 6 版本中,蘋果上線了自己的 Apple Map。這可以算是蘋果自 iPhone 問世以來發布的最失敗的一款產品,被 CNN 評為當年十大科技敗筆之首。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?蘋果地圖的失敗促使Scott Forstall離職

這個直接導致了蘋果地圖的項目負責人 Scott Forstall 離職。而 Scott Forstall 是公司元老,一手打造了 iOS 系統。他的離職導致 iOS 設計團隊大洗牌,這也導致后續的 iOS 7 版本的風格巨變。

iOS 7 是蘋果自從 iPhone 問世以來首次對其界面交互做出全面的調整,拋棄之前擬物化設計,開始采用扁平化設計。將界面設計中的大量仿真元素去除,取而代之的是扁平化的圖形、漸變色和透明效果。從這個版本中,白色開始成為 iPhone 應用中的主色,徹徹底底的極簡主義。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?iOS 7帶起的扁平風

13 年蘋果掀起的扁平化設計風潮一直影響至今,那為什么蘋果要拋棄擬物化設計呢?擬物化有一個最大的問題,既然是擬物,那么肯定要選擇合適的「物體」來參考,而我們很難找到一個人類共通的物體。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

iOS 6 中相冊的圖標是向日葵,世界有多少人會把向日葵和相冊聯系起來?游戲中心的圖標是棒球和國際象棋,對于沒有棒球和國際象棋傳統的國家來說,他們的意識中很難把這兩個事物和游戲畫上等號。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

如果要提高設計的國際通用性,那么設計的方向應該是追求體現「how it works」而不是「how it looks」。而追求「how it looks」的擬物化設計在不同的文化中,很容易出現水土不服的情況。

Material Design

在蘋果采用扁平化設計的第二年,谷歌也推出了自己的設計語言,那就是 Material Design。那么谷歌的設計語言和蘋果的區別在哪呢?

從 6 個方面分析,蘋果和谷歌誰的設計更好?

簡單來說,谷歌的設計理念是將物理世界的體驗帶入到屏幕中,谷歌在設計語言里加入了現實生活的隱喻,這里的 material 指的是紙。

紙可以變換形狀、配色。因為紙張的特性,所以 Material Design 更多采用卡片式設計。而卡片可以伸縮且模塊化,所以在適配不同的屏幕的時候更具有優勢。特別適用于安卓系統機型碎片化嚴重的場景。

隱藏式的側邊欄菜單是 Material Design 的一大典型特征,靈感來源于現實中的抽屜。為了表現層級關系,突出部會加上陰影做成懸停效果,這個非常符合現實生活中的感知。谷歌為了模擬出最真實的陰影效果,還做了一系列的燈光實驗。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?谷歌通過陰影來體現層級關系

而 iOS 采用的是毛玻璃效果。人的眼球總是會聚焦于他關注的事物,而虛化背景。蘋果通過虛化背景的處理方式同樣可以達到吸引用戶注意力的目的。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?蘋果通過毛玻璃來體現層級關系

所以總體上來說,雖然雙方都追求極簡主義,但是谷歌相對來說,會偏具象一點。這時你可能會問,具象化的設計不是會出現水土不服的情況嗎?谷歌為什么還用呢?

設計的最終目的是為了解決問題,當我們去評價一個設計方案的時候,需要弄清楚當前的困境,以及想要實現的效果。安卓是一個野蠻生長的市場,一直沒有統一的設計規范,各家廠商可以隨意定制 UI,非常的混亂。所以谷歌官方必須給出一個具象化的設計理論來讓大家遵從。

如果設計理念太過于抽象,解釋空間很大,各家還是信馬由韁的發揮,這個規范等于沒有出。所以谷歌官方必須搬出了一個具象化的事物,看得見摸得著,讓各家廠商有一個明確的目標去遵守。而紙是一個全球通用的意向,以此為基礎來建立設計語言多數用戶都能接受。

雖然谷歌推出了自己的設計方案,但是多數 app 并沒有做兩套設計稿分別適配 iOS 和安卓。一般只做 iOS 設計稿,這是因為安卓機型碎片化嚴重,設計師無法找到一個合適的旗艦機型,以此為標準去做設計。國內的整體大環境就是設計師只會出一套 iOS 的設計稿,久而久之,國內的用戶更習慣于 iOS 的設計風格。基于這一現狀,國內安卓端一些應用開始改走 iOS 風。以 B 站為例,從 5.11 版本開始,安卓端開始跟 iOS 一樣采用底部欄菜單。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

3D touch 與劉海屏

從 13 年至今,不管是 iOS 還是安卓,在界面交互上的改動都是泛善可乘。2015 年,蘋果在發布的 iOS 9 中新增了 3d touch 功能,這個功能被蘋果稱為新一代多點觸控技術,被寄予厚望。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?失敗的 3d touch

而用戶根本不習慣于按壓這個操作,可能很多用戶根本不知道還有這個手勢。后來在 iOS 13 中,蘋果取消了 3d touch,原有的功能由長按來完成。

2017 年,蘋果開始采用劉海屏,以提高更高的屏占比,這個改動引發了很大的爭議。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?引發巨大爭議的劉海屏設計

革命性的交互方式和操作體驗必須依賴于硬件技術的突破。我們吐槽劉海屏的設計,喬布斯的棺材板壓不住了,但是在基礎技術沒有大的發展的前提下,對于如何平衡前置攝像頭和屏占比的問題上,喬幫主就一定會拿出更好的方案嗎?

我們現在的界面交互模式都是基于多點觸控技術的成熟,而這項技術已經問世快 20 年了。誠然 iOS 7 對界面交互方式做了很多的改動,但是這些改動更多是基于視覺層面。在技術層面沒有完成重大突破的前提下,交互模式不會發生重大的改變。

一旦現有技術或者市場消化殆盡,為了尋求突破,競爭對手之間開始打破壁壘,奉行拿來主義。iOS 越來越像安卓,安卓越來越像 iOS。城市帶動農村的抖音和農村包圍城市的快手也越來越趨同。

在 iPhone 剛問世的時候,一些人們無法認同手機怎么可以沒有按鍵。他們不習慣手指觸摸屏幕,因為他們覺得那樣把屏幕弄臟了。

從 6 個方面分析,蘋果和谷歌誰的設計更好?

新事物剛問世的時候,很難獲得人們的認可。而隨著時間的推移,它會得到歷史公正的評價。所以沒有絕對的好壞對錯,觀點的變更,或許體現的只是話語權的交接。我一直在想,10 年后等到 10 后開始逐漸成為消費主體,我們現有的一些價值體系會不會被顛覆?

從 6 個方面分析,蘋果和谷歌誰的設計更好?

△?10后趕上了移動互聯網時代

10 后從出生開始就經歷移動互聯網時代,他們使用 iPad 多于雜志。一個嬰兒從出生之后就習慣于在 iPad 上劃來劃去,有一天,你給他看一本雜志,他或許還是會嘗試滑動雜志上的圖片。他們跟我們有著完全不一樣的成長環境,等到 10 年后,技術突破帶來了新的交互方式,深得他們的喜愛。希望那一天,我們不會成為新一代「怕把屏幕弄砸」的人。

關于的蘋果交互設計:

歡迎關注作者的微信公眾號:「王M爭」

從 6 個方面分析,蘋果和谷歌誰的設計更好?

收藏 85
點贊 36

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。