跳過導覽
Skeuomorphism illustration done in Sketch
學習設計

擬真設計完整指南

關於擬真設計藝術的一切知識

當 Apple 在 2013 年將 iOS 重新設計為「扁平化」設計時,許多人認為擬真設計已經死亡。其他人則仍然是堅定的粉絲。如果你問我們——或者 GitHub 的產品設計師 Gavin Nelson——2000 年代初期的擬真設計可能只是一個「過猶不及」的例子。

如今,擬真設計正在主流設計中捲土重來——但這次更加微妙。如果你想開始使用擬真設計,我們已經為你準備好了!在這篇文章中,我們將探討什麼是擬真設計,以及它與扁平化設計和新擬物化的區別。我們還將分享一些例子和一個快速教程,以確保你準備好開始動手實作。

讓我們開始吧!

擬真主義與擬真設計

什麼是擬真主義?

擬真設計試圖盡可能地模仿真實物體的各種特質。它超越了形狀和顏色,而是專注於紋理、光影、尺寸,以及最重要的是:用途。

擬真主義可以追溯到古希臘,當時 陶藝家用模仿金屬的方式來製作把手。因此,我們今天使用的這個詞來自希臘語「skeuos」,意思是器皿或容器,以及英語後綴 -morphism,意思是 具有形狀、形式或結構的狀態,這一點也不奇怪。

但就我們今天所知的 UI 設計 而言,擬真主義隨著第一代 iPhone 的出現而蓬勃發展。史蒂夫·賈伯斯認為,為了提高 易用性UI 元素應該盡可能地模仿真實物體。例如,一個看起來像記事本的筆記應用程式。隨著人們越來越熟悉 iOS 介面,Apple 的團隊意識到用戶不再需要這些對現實生活的回溯——因此他們對整個 UI 進行了改頭換面。

扁平化設計與擬真設計

當擬真圖標變得眾所周知時,會發生什麼?許多人會說,使用者不再需要複雜的設計來識別圖標的功能。而這正是 Apple 在推出 iOS 7 時所證明的。

Image of two iPhone mockups, one running iOS 6 and the other running iOS 7

iOS 6iOS 7 的並排比較顯示了 Apple 的風格如何徹底轉變為幾乎沒有陰影或紋理的扁平化設計。

為了提升載入速度並簡化數位接觸點,設計師開始將擬真設計精簡到最基本要素。這就是平面設計的基礎。體積、紋理和大量的色彩運用是其中幾個被捨棄的主要元素。設計師開始在作品中採用無襯線字體,並開始使用單一鮮豔的顏色或有限的調色板。您可能會想,平面設計是否與擬真設計背道而馳——但真的是這樣嗎?

反擬真設計?

身為人類,我們傾向於將事物 perceived as black and white.二元化思考。隨著新趨勢的出現,人們很容易將其視為新時代的開始,同時也是舊潮流的結束。隨著我們步入 2010 年代,的確有理由遠離擬真設計。隨著數位行銷變成戰場,效能和效率成為眾多相似產品中的關鍵區隔因素。

平面設計製作速度更快,載入速度也更快。一旦它成為一種趨勢,它也成為使用者眼中現代化的象徵。即使在今天,反擬真設計仍然存在,部分原因是速度仍然為王。部分原因是下一個設計趨勢尚未接管。或者已經接管了?

擬真主義與新擬物化

畢竟,事實證明確實有一個新秀出現了。從擬真設計的創造者手中誕生了:新擬真設計 (Neumorphism)。是的,它的發音是 *new* morphism(新擬真)——這個名字很適合擬真設計和(您猜對了)平面設計的結晶。而且,如果您問我們,我們認為它是兩全其美的。

的確,應用程式和網站仍然需要速度快,尤其如果它們想在搜尋引擎和應用程式商店中排名靠前的話。但是,過度使用極簡設計也讓一些介面變得有點……嗯,*扁平*。這就是為什麼設計師一直在嘗試新擬真設計,為他們的設計增添深度和色彩。主要成分?光影的運用。

A hydration app design made by Andrei Simion

這裡有一個Andrei Simion 的絕佳範例,他在整個設計中應用了新擬真設計。

擬真設計範例

既然您已經充分了解了什麼是擬真設計及其起源,現在是時候看看它在實際應用中的樣子了。以下是一些您可以使用擬真設計完成的絕佳範例。

A music app design made by Charlotte Doughty

Charlotte Doughty 的復古音樂應用程式。

A camera app icon design made by Tiago Alexandrino

Tiago Alexandrino 對相機圖示的詮釋。

A winamp skin design made by Anja

Anja 的 Winamp 外觀,充滿千禧世代的懷舊之情。

A synth plugin redesign by Isaac Sanchez

Isaac Sanchez 的合成器插件重新設計。

如何創建擬真設計

我們自己的 Tiago Alexandrino 製作了以下這個快速教學,幫助您開始使用擬真設計。有任何問題嗎?他很樂意透過 TwitterLinkedIn 回答您的問題。

有一些擬真設計要展示嗎?我們目前正在舉辦 #Sketchmorphism 挑戰!在我們的 Twitter 上閱讀所有關於如何贏得一 (或兩) 台 HomePod mini 的資訊。

您可能也喜歡

免費試用 Sketch

無論您是 Sketch 新手,還是回來查看新功能,我們都能讓您在幾分鐘內設定完成並準備好開始最佳的工作。

免費開始使用
免費開始使用