擬物化不死!在這個扁平化當道的年代,我還是愛著擬物化 - 優設網 - UISDC

擬物化不死!在這個扁平化當道的年代,我還是愛著擬物化

2016/03/29 22257評論區

still-love-skeuomorphism-design-1

編者按:「擬物化不是扁平化的對立面,而是作為扁平化的一部分永存?!菇裉?a target="_blank">@特贊Tezign??這篇譯文,聊了聊擬物化和扁平化的關系,與平??吹降墓鄣悴煌?,文章認為擬物化并沒有死亡,依然存在于扁平化之中。至于原因,一起來看看漲姿勢。

「擬物化不是扁平化的對立面,而是作為扁平化的一部分永存?!?/p>

——村上春樹 ,《挪威的森林》

好啦,不騙你了,其實原文是「死」和「生」。

當蘋果公司于2013年推出iOS 7系統,許多人都說它宣判了擬物化設計的死刑。緊接著在2015年,當谷歌公司推出Material Design這個設計語言,許多人都認同這就是給擬物化設計的棺材上釘上了最后一根釘子。

不過,他們無疑是錯的。

因為扁平化設計——正如在蘋果的IOS和谷歌的Material Design系統中,數不勝數的熱門網站和我們日常用的app中可以看到的那樣——事實上并不是擬物化設計的對立面。

要想徹底明白為什么,我們首先需要理解什么是真正的擬物化設計。

那么,什么是擬物化設計?

「擬物化設計」這個詞源于希臘語中的「skeuos」(意為器具或工具)和「morphe」(意為形狀)。在日常英語中,擬物化設計是對從一個對象到另一對象的視覺線索的應用。

關于擬物化設計最常被引用的例子是蘋果公司 「舊有iOS 7系統” 的設計風格。例如,iBooks應用程序看起來像一個真實的書架——即有關一個書架的視覺線索(木質紋理、陰影和縱深感等等)被使用在了應用程序的用戶界面里。

擬物化設計的重點是為用戶提供即時語境:通過模仿公眾熟知的日常物體的視覺線索,擬物化設計能降低用戶去了解如何使用產品時需要的認知負荷。

理解這些,你就能知道實際上擬物化設計不僅僅是一個設計趨勢。它還包括一個設計理念,即把現實生活中的對象用作視覺隱喻,使產品更便于使用。

我們為什么要做擬物化設計?

隨著iOS 7系統的發布,擬物化設計突然變的令人討厭了。大部分人都會抱怨它是難看的。人造皮革拼接的視覺設計矯枉過正,別人也會附和。而這些言辭一般都是真的,許多人已經忘記了我們一開始為什么要做擬物化設計。

當蘋果在2007的時候推出了iPhone,那時真的沒有其他產品像它一樣。通過在一塊玻璃上進行觸摸、點擊以及捏動來控制一臺設備,沒有人對這些操作此感到熟悉。那么蘋果如何向它的消費者展示產品的使用方式呢?——

通過使操作直觀化的方式。所以你只需要看一遍,就能知道一款應用程序是關于什么的,以及如何使用它。

因此,在照片應用程序中的圖像看起來像一堆真實的照片。電子書看起來像真實的書籍,結合現實物理學應用到翻頁。按鈕看起來像光滑的真實按鈕,所以用戶立馬知道他們可以按下。

這是擬物化設計的魔法:用戶界面在使用中變得順理成章。

這就是為什么我們仍然需要(并使用)擬物化設計——因為沒有它的設計會缺乏易于理解的情境。特別是面對復雜的任務時,這些設計變得很難操作。

等等,那么扁平化設計呢?

大多數我們所熟知的扁平化設計(在iOS 7及之后,材料設計等等)的特點是扁平化的明亮大膽的顏色。它注重排版,同時也避免過于豐富的紋理。

扁平化設計最早出現在20世紀40年代瑞士風格的設計中,不過主要是因為響應在不同屏幕尺寸的設備上的設計需要,才在最近幾年成為流行。

它的設計理念主要是圍繞消除盡可能多的視覺噪聲,為用戶提供一個專注(和快速加載)的經驗。

現在扁平化設計和擬物化設計的分歧變得越來越明顯,但他們不是相互對立的哲學。擬物化設計是通過使用其他對象的視覺特征來使物象直觀化;而扁平化設計是盡可能的減少視覺干擾。

的確,降低視覺噪聲的一個可取的方式是在界面中去掉擬物化設計的紋理。但是再多看一眼你的扁平化風格的應用程序和操作系統,你會發現擬物化設計的精神內核仍然存在。

在扁平化設計中擬物化

首先,讓我們從擬物化被宣布死亡的iOS 7 +開始。

盡管iOS 7取消了大部分在以前版本中發現的人造結構,它仍然依賴擬物化去提高自己的可用性。有幾個例子可以證明這一點。

ON/OFF開關根據扁平化設計的原則進行了重新設計,但基本的擬物化靈感(一個真實的旋鈕)仍然被保留下來。從白色圓形旋鈕下方淺淺的陰影可以看出一個真按鈕的蛛絲馬跡,所以你的大腦不會花太長的時間來辨認:這個圓圈是一個可操作的按鈕。

陰影其實是擬物化平面設計的一個關鍵因素,因為它們告訴我們視覺元素的空間背景。這些,連同大量應用視差和模糊系統相互作用的影響,當面對iOS 7 +的視覺界面的時候,給人一種很真實的質感。

iOS 9的App切換界面清晰地顯示了這些擬物化元素是如何集合起來讓扁平化設計富有生命的。這里,App的視覺靈感來自卡片。這些卡片用淺淺的陰影來區分邊界。模糊的背景也表示遠處的卡片。它模仿了我們面對背景時視網膜在app上聚焦的狀態。

所列出的這些體現在iO平面設計上的擬物化有可能是不太確定的,但是你已經掌握了大致的理念。

一個簡單地例子,關于Google界面設計。

陰影大量使用在應用程序上,用來創造深度感和層次。事實上,谷歌對材料設計的解釋是一種幾乎完全擬物化的方法:

材質是隱喻……材料是在觸覺的現實基礎上,由紙張和墨水的研究的啟發而來,盡管現在技術已經很先進了而且有開放的想象力和魔力。

有了基于現實生活中紙的視覺效果和動作設計,材料設計就能保證其視覺語言能直觀地抓住用戶眼球,甚至是第一次使用的用戶。

擬物化設計可以在大多數操作系統中找到,尤其是在臺式機(因為它能使復雜的界面直觀),或是最受歡迎的網站(比如臉譜網和Pinterest的卡接口)。

但它也生長于一個看似無關的領域:影像學。

擬物化圖標可能是平面設計和擬物化和諧共存的最鮮明的例子。我們每天使用的大多數圖標都是來源于現實生活中的(通常是過時的)相似物。

以iOS中新聞應用程序圖標為例,它參考了一堆報紙的意象?;蚴怯始τ貿絳虻耐急?,它顯示了一個紙信封的樣子?;蚴竊誆牧仙杓浦械哪至逋急?,來自一個雙鈴鬧鐘。

這些圖標無疑是扁平的,但他們仍然是擬物的。

因此平面設計和擬物化設計不是相對的設計風格流派。我們需要把擬物化從設計理念到一個單一的、基于結構的尺寸簡化出來,也是采用一個純粹主義者對扁平化設計的理解。

我們不會因其復雜的直觀界面而停止使用擬物化。但同時,扁平化設計可以使我們更加關注App、網頁和操作系統設計的重點,讓所有多余的視覺噪聲消除。

所以別緊張。兩種設計理念不是相互沖突的。相反,我們現在看到的那些迭代的界面設計是每種設計做的最好的產品。

作者 | Yu Siang Teo 翻譯 | 李鑫然 校對 | 王沁雪

譯者微信號:

tzqr

【職場經驗之看完轉系列!】

想成為總監?來看看這個!
《優設重磅首發!聊聊從設計師到總監的晉級路線》

牛魔王的重磅之作!面試到簡歷全部搞定!
《優設重磅首發!全方位揭開簡歷和面試話術的秘密》

成為職場大牛的11種必備能力!
《設計師進階教程!成為優秀設計師必備的11種職場能力》

原文地址:mp.weixin.qq

yestone-uisdc-1

【優設網 原創文章 投稿郵箱:[email protected]

================關于優設網================
“優設網阿贾克斯对热刺“是國內人氣最高的網頁設計師學習平臺,專注分享網頁設計、無線端設計以及PS教程。
【特色推薦】
設計師需要讀的100本書:史上最全的設計師圖書導航://hao.uisdc.com/book/。
設計微博:擁有粉絲量112萬的人氣微博@優秀網頁設計 ,歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航:全球頂尖設計網站推薦,設計師必備導航://hao.www.utsvcz.com.cn

非特殊說明,本文版權歸原作者所有,轉載請注明出處
本文地址://www.utsvcz.com.cn/still-love-skeuomorphism-design

發表評論 加載中....

評論加載中....

uisdc

評論區都快餓癟了,看看我期盼的小眼神...

設計圈干貨 界面設計 排版布局 版式設計 職場 優設專訪 優設大課堂 設計達人 設計師干貨 web前端開發 配色 視覺設計 素材下載 AI教程 設計理論 設計流程 神器下載 字體下載 設計師專訪 psd下載 海報設計 設計規范 設計趨勢 用戶體驗設計 動效設計 logo設計 平面設計 圖標設計 ICON 產品設計 神器推薦 App設計 字體設計 職場規劃 酷站推薦 交互設計 ui設計 優秀網頁設計 設計師職場 ps技巧 酷站 用戶體驗 PS教程 網頁設計 經驗分享

您還沒有登錄

優設啟用更安全省心的 微信掃碼登錄

微信掃碼

300萬設計師聚集地!優設網是極具人氣的設計師平臺
2012年成立至今,一直專注于設計師的學習成長交流

把好文章收藏到微信

打開微信,掃碼分享
學設計 優設網 在這里