蘋果使用者體驗:幾張動圖帶你直觀設計背後的簡單原則

語言: CN / TW / HK

編輯導語:如何提升使用者的產品使用體驗?也許,簡單、明晰、便捷的互動操作是影響使用者體驗的關鍵因素之一。而蘋果手機的互動設計邏輯也許可以在設計原則層面上給你一定啟發,不如一起來看看作者的解讀吧。

今天的蘋果手機擁有十億使用者。蘋果是這個世界上最有價值的企業,雖然有很多不同的原因使得它成為擁有 2 萬億市值的第一公司,設計始終是其中最強大的原因之一。

Steve Jobs 對此有一個絕妙的形容:我們是一家設計公司,只是剛好做的是電腦產業。

是什麼使得蘋果設計如此的簡潔又令人讚歎?他們的設計來源於現實生活,我們和手機的互動正如我們在現實生活中所做的一樣。

就像是真實的世界中一樣,當你通過數碼產品導航的時候,人們需要知道自己現在在哪裡,到目的地的路怎麼走,以及選擇什麼樣的交通工具。這就是為什麼各部分之間應該有清晰的空間邏輯。

一、流暢的操作感意味著它在隱喻著物理世界

開啟 IOS 的資料夾就像是在現實世界打開了一個盒子。“擴充套件”的動畫效果代指著開啟資料夾的後續行為:就像是我們在現實生活中打開了一個資料夾並把它拿到眼前去檢視裡面的東西。

在IOS上開啟APP

二、人們有時候也需要接觸一些物理世界不存在的數字原生操作方式

舉個例子,IOS 使用者經常開啟列表來推入下一個頁面或點選底部的按鈕來檢視另一個頁面。操作這些按鈕在物理世界中並沒有對應的行為,但是在成百上千次重複中使用者習慣了這個操作。作為設計師,我們應該儘量的使用同樣的設計語言以方便使用者認知。

開啟一個列表單元格

點選TAP欄

三、清晰的空間邏輯使使用者更順暢的使用產品

這裡對通過向下滑動頁面以到達 IOS 通知中心以及安卓控制中心進行了比較。在 IOS 系統裡,通知中心頁面和啟動頁面之間的空間邏輯關係是非常直接的。

通知中心頁面在啟動頁面的上方,在滑動的過程中,手勢和螢幕的移動是同步的。因為這裡含有物理世界的隱喻,因此我們可以非常直觀的理解。

在iOS上向下滑動以獲得通知螢幕

對比來看,類似的操作在安卓上就不是那麼的清晰了。在螢幕上的任何地方向下拉,啟動頁會先進入一個白色的蒙層,物理世界中不會發生這樣的事情。

操作頁面,黑色背景和白色蒙層之間的空間邏輯關係無法通過視覺表達清晰的說明。他們是在同一個層級?或者說黑色背景是放在下方的?對比而言,IOS 中通過對上方層級的模糊玻璃效果清晰的對這種空間層級關係進行了說明。

使用者當然可以通過多次重複使用習慣這種操作,但是缺少空間邏輯容易造成認知失調。像這樣的細微處的操作困難會使產品感覺不那麼流暢,因此質量也較差。

在安卓上向下滑動控制中心

四、流暢的動效在建立空間邏輯和提升產品質量方面也發揮著巨大作用

讓我們看看在 IOS 裡開啟和關閉軟體的動效。當開啟一個軟體,軟體圖示擴大並逐漸消失,軟體介面則在使用者面前漸出並逐漸佔據整個螢幕。

這個動效告訴使用者這個軟體在手機介面上的存在空間邏輯:這個軟體存在於這個 icon 內部。關閉軟體的動效就像是開啟動效的映象效果,就如同使用者所期待的一般,軟體介面縮回成了原本icon的樣子。

在IOS上開啟和關閉APP

在IOS上開啟和關閉一個應用程式的速度變慢了

對比一下,安卓上的軟體開啟/關閉動效比較零碎。但是我不會多說,你可有看一看下面的示例自己來比較一下。

在安卓上開啟和關閉APP

原文作者:Hiten Saxena(本文翻譯已獲得作者的正式授權)

原文地址:https://bootcamp.uxdesign.cc/space-logic-can-make-the-design-of-your-product-easier-a1b8ffe4cfa2

譯者:鄭伊妮;編輯:李莉好;微信公眾號:TCC翻譯情報局(ID:TCC-design);連線知識,瞭解全球精選設計乾貨

本文由@TCC翻譯情報局 翻譯釋出於人人都是產品經理,未經許可,禁止轉載

題圖來自 Unsplash,基於 CC0 協議