蘋果用戶體驗:幾張動圖帶你直觀設計背后的簡單原則
編輯導語:如何提升用戶的產品使用體驗?也許,簡單、明晰、便捷的交互操作是影響用戶體驗的關鍵因素之一。而蘋果手機的交互設計邏輯也許可以在設計原則層面上給你一定啟發,不如一起來看看作者的解讀吧。
今天的蘋果手機擁有十億用戶。蘋果是這個世界上最有價值的企業,雖然有很多不同的原因使得它成為擁有 2 萬億市值的第一公司,設計始終是其中最強大的原因之一。
Steve Jobs 對此有一個絕妙的形容:我們是一家設計公司,只是剛好做的是電腦產業。
是什么使得蘋果設計如此的簡潔又令人贊嘆?他們的設計來源于現實生活,我們和手機的交互正如我們在現實生活中所做的一樣。
就像是真實的世界中一樣,當你通過數碼產品導航的時候,人們需要知道自己現在在哪里,到目的地的路怎么走,以及選擇什么樣的交通工具。這就是為什么各部分之間應該有清晰的空間邏輯。
一、流暢的操作感意味著它在隱喻著物理世界
打開 IOS 的文件夾就像是在現實世界打開了一個盒子?!皵U展”的動畫效果代指著打開文件夾的后續行為:就像是我們在現實生活中打開了一個文件夾并把它拿到眼前去查看里面的東西。
在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 協議
沒看出來安卓蘋果打開關閉軟件有什么不同。。。
蘋果是從icon放大打開,并再縮小回icon上,安卓是從icon放大打開,但縮回時是向下收的。安卓的想法應該是收回到后臺里并不是徹底關閉了app,蘋果的交互動效還是比較統一的
你仔細舔,用心說從ios10之后,往后的ui和動效已經沒有驚艷的感覺了,稍微輕舔吧
流暢的動效在建立空間邏輯和提升產品質量方面也發揮著巨大作用,很贊同這一點。
看來軟件打開的動圖,蘋果的動態感覺的確更舒適一些,也的確會慢一些
打開 IOS 的文件夾就像是在現實世界打開了一個盒子。“擴展”的動畫效果代指著打開文件夾的后續行為:就像是我們在現實生活中打開了一個文件夾并把它拿到眼前去查看里面的東西。