那些蘋果、谷歌、微軟系統中的魔鬼細節
人們常說“科技美學”,這不是沒有道理的。
為了提高一點點使用者看得見或者看不見的美好體驗,產品經理以及他的小夥伴們做了很多努力。以下從一個細節控的視角,給大家講講那些“讓人感受到尊重與心意”的美好互動。
蘋果
蘋果有專門的人機介面互動規範。設計語言整體剋制流暢,不濫用動畫效果。過渡畫面多用漸隱漸現以及切入。極簡風是為人熟悉的一個大特性。而蘋果也在微互動上體現出對細節的堅持。
當開啟飛航模式的時候,真的是會有一臺小飛機從左側飛出來。關閉後小飛機就會快速飛走,而運營商漸現。
設定圖示採用了多層齒輪以示機械感,齒輪的第一印象應該是運轉。於是你可以在更新系統時留意到設定圖示的齒輪確實會動的,大圈小圈反向運動。
自然的互動應該就是這樣,符合使用者習慣和期待。飛機會飛,齒輪會動。時鐘在走,日曆顯示,廢棄檔案扔到廢紙簍,倒完垃圾後垃圾桶應該就是空的。
而 Google I/O 2014 推出的 Material Design(材料設計語言,以下稱 MD)經過兩年的推廣漸漸被很多應用跟隨,現在我們能夠在越來越多的應用上能夠看到。
MD 有個很重要的概念就是通過將日常材料的屬性運用在移動介面上,比如,一個 app 介面相當於紙張的層疊,不同元件減應該擁有層級結構。
那麼點選某一區域選取區域內容,當前區域應該從子介面抬升至父介面,從側面看可以看到由於順序產生的海拔感通過“抬升”這個動作完成了。這個細節被表達出來了。
另外,材料在現實生活中是符合物理規則的。在 MD 的設計語言裡,動畫存在加速和減速,任何忽然開始、忽然停止的勻速動畫都顯得機械而不真實。
人類感官在現實中習慣的重力感受被 MD 搬到了手機螢幕,這就是我們體會到的“自然”。
那麼,點選的反饋是如何完成呢?
使用者的每一步操作都應該提供反饋予使用者。同時這個反饋應該是精確到動作點的具體位置產生的。 MD 想到了投一塊石頭到水裡的漣漪效果。
使用者在哪裡點選,水紋就從哪裡產生,並且擴散至當前元件,而不是從中間,從左側從上側固定的效果。追求材料世界的屬性在移動介面上表達,使得 MD 獲得了之前蘋果擬物風格才有的真實感。
使用者有時不一定會看到這些微互動,但正是這些動效構成了我們口中難以解釋的“好用”,“流暢”以及“自然”。
Microsoft
微軟經過了 Window 10 的快跑,設計語言也在逐漸成熟。從 Aero 風格過渡到 Metro(ModernUI),人們對 Window 8 出現的磁貼風格褒貶不一。
更大的原因在於微軟激進取消了使用者習慣的開始選單。要考慮到微軟追求的其實是兼顧桌面與移動觸控兩個入口統一的風格。通過大色塊的醒目提醒,更加強調簡單快捷的體驗。
這是有跡可循的。
Metro 一開始源於瑞士國際平面主義,追求傳達準確,易於識別,擅用幾何學式的嚴謹。
而互動式動態磁貼,例如音樂應用磁貼中包含前進後退暫停控制元件,這樣使用者就可以直接通過磁貼來操作應用而不必開啟應用本身。
如今微軟正在打造全新的設計語言 Project NEON ,依賴動畫、模糊和漸變來表現畫面效果,將隨紅石 3 版本一同到來。
同樣,微軟在介面設計中啟用了新元素“ Acrylic(亞克力,有機玻璃)”,可以更好地表現模糊背景、邊欄和導航欄等內容。
微軟將在 Build 2017 上展示更多 Project NEON 作品和使用細節。
不僅僅以上,更多的小而美的產品正層出不窮。如果我們能停一下,稍微不那麼追求效率,“用完即走”,你能感受到科技對於人性的尊重以及用心。
有人評論賈伯斯的偉大:
Instill beauty of humanism into Cold Steel。
給冰冷的科技注入人性的美感。
使用者產生需求,解決使用者需求,這本是已經結束的事情。但正是有一群致力於”更好解決問題“的科技人不止步於此,才有了更好更人性化的產品。
這一切的美,你不一定察覺,但正在發生。
題圖來自:Adobe
相關文章
- 做使用者增長,傳播分享中的那些魔鬼細節
- 魔鬼藏在細節裡:互動按鈕大小事
- 網頁設計中那些不容忽視的細節網頁
- Javascript中的魔鬼JavaScript
- 那些害死程式設計師的細節程式設計師
- 抽獎系統細節玩法
- 細數Android系統那些DOS漏洞Android
- 那些被忽略的 JavaScript 陣列方法細節JavaScript陣列
- Win10系統的“快速啟動”功能是什麼?微軟將改進Win10系統細節Win10微軟
- 那些容易被忽視的 JavaScript 細節總結JavaScript
- 程式設計師的快樂:那些小細節程式設計師
- 關於雲控系統的各種細節
- C++中的魔鬼數字C++
- oracle中update的細節Oracle
- Spring核心原理之 IoC容器中那些鮮為人知的細節(3)Spring
- Java和作業系統互動細節Java作業系統
- Java 和作業系統互動細節Java作業系統
- 【freertos】007-系統節拍和系統延時管理實現細節
- 微軟外服札記④——Spark中的那些坑...微軟Spark
- RxSwift 入坑解讀-那些難以理解的細節Swift
- 當前最佳的YOLOv4是如何煉成的?細數那些小細節YOLO
- 搭建直播系統前需要注意的細節有哪些?
- Java 與底層作業系統的互動細節Java作業系統
- 詳談分散式系統快取的設計細節分散式快取
- 蘋果mac系統下安裝windows7系統詳細教程蘋果MacWindows
- COP4600 檔案系統實現細節
- 谷歌地圖iOS版的一些設計細節谷歌地圖iOS
- TCP 中的兩個細節點TCP
- Python中list的切片細節Python
- 蘋果5大創意“抄襲”谷歌、Twitter、微軟蘋果谷歌微軟
- 直播系統開發中選擇伺服器需要注意哪些細節伺服器
- gotofail:蘋果 SSL/TLS 重大安全漏洞的細節GoAI蘋果TLS
- 微軟新補丁跟谷歌較勁? 系統“慢得像牛”微軟谷歌
- iOS模仿系統相機拍照你不曾注意過的細節iOS
- linux-HA 系統的故障切換過程細節。Linux
- 谷歌和微軟玩曖昧 剩下蘋果一人在風中凌亂谷歌微軟蘋果
- mac建議裝雙系統嗎,詳細分析蘋果電腦雙系統的利弊Mac蘋果
- 微軟,谷歌,蘋果以及其它公司狂風暴雨般的裁員潮微軟谷歌蘋果