界面設計師必需知道「扁平化設計」和「實感設計」的微妙關係 | 文章 – 滙豐機滙

相信從事手機應用程式或者有參與網頁界面設計的設計師,都必定會接觸過扁平化設計和質感設計。兩種設計類型看起來非常相似,一般人大抵不能清楚抽述到兩者的分別,但兩者之間確實存在微妙並且關鍵的分野。

設計  ·    ·  3 mins read

相信從事手機應用程式或者有參與網頁界面設計的設計師,都必定會接觸過扁平化設計和質感設計。兩種設計類型看起來非常相似,一般人大抵不能清楚抽述到兩者的分別,但兩者之間確實存在微妙並且關鍵的分野。

在開始比較前,可以先深入淺出講解一下兩者在設計上的定義和背景。

扁平化設計(Flat Design)從2014年開始普及於網頁、系統與裝置介面,泛指一種完全以平面化來呈現視覺元素,使每一部分看起來都像是平躺在一個平面上。

它的出現某程度上是回應追求過於寫實的設計之下的產物。由於早年Apple的擬真化設計(Skeuomorphism)實在太成功,在硬體裝置和網頁介面設計上引起了一股熱潮,就是將所有按鈕畫得像實物一樣,令用戶完全代入。就這樣,Microsoft開展其改革腳步,提倡扁平化設計,將重心放於呈現按鈕的功能性,省去不必要雕砌的枝節,向Apple宣戰。

而實感設計(Material Design)是新興並由Google定義的一種「品牌化」設計風格,所有準則受明確規定,被認為是由扁平化設計應運而生的革新。

雖然「扁平化設計」和「實感設計」都是「極簡主義」的方法,兩者卻存在微妙並且關鍵的差別:

看到這裏,你可能會問為什麼Google對實感設計下定義並且有嚴格的規定? 

那麼我們首先要了解到手機和平板電腦的盛行,兩者卻也沒有「浮標」設計,用戶容易對頁面上的扁平化資訊感到混淆,隨時連「按鈕」或「輸入文字」的指意也分不清。當然,從擬真到扁平設計的轉型之所以能成功,正是因為使用者的學習經驗已足夠看懂抽象圖示的功能,因此不必要的點綴即使省略也不會易響其功能性。但當智能裝置的應用路徑愈趨複雜時,扁平化設計就不足以切合所有不同適應數碼互動程度的用戶。實感設計將擬真化的原始意圖與數碼世界接軌起來,但又不失簡潔的美感,使設計的溝通能力更進一步。

 一直以來, Google 長處於產品與介面混亂的困境 ── Android 系統附載在各式不同尺寸的電子裝置上,旗下產品又繁不勝數、介面整合困難,體驗破碎的問題嚴重,難以體現Google的品牌風格和形象。對於開發人員而言,使應用程式在多個設備上具有相似的外觀是一項艱鉅的任務,而推出一套嚴謹的指引就可以確保跨裝置的界面設計標準,統一了不同Android裝置上的外觀。 

有了扁平化設計,設計師不再需要擔心如何讓他們的項目看起來更真實。相反,他們可以專注於其功能和性能。而實感設計回溯擬真化設計,為平面設計增加了動畫,層次和擬態性,使按鈕之類的東西易於區分。

 用Google的話來說,實感就是隱喻。

實感設計的主要原則之一是模仿事物在現實世界中的形態,但以完全簡化的方式呈現。僅使用現實主義作為一種工具,使我們的大腦更熟悉界面的運作方式。 但同時,不要使其看起來過於寫實。例如按鈕不再需要閃閃發亮的效果,表格欄目不需要內部陰影亦可讓用戶清楚了解當中的指意。

質感設計以平面為基礎,但涉及到更多的互動、顏色系統、佈局和功能,從而創建了一個設計生態系統,用戶可以在許多產品和裝置上熟悉這個生態系統。

 簡單來說,扁平化設計是一種最小化的環境,很大程度上依賴於用戶對總體設計界面的熟悉程度,並且去掉了任何不能滿足功能需求的東西。實感設計嘗試將一些概念從擬真化設計過渡到扁平化設計。這樣提供了一個針對數碼優化的界面,促進了用戶與介面的互動。

實感設計和扁平化設計均各有特色。以上的比較並非鼓勵大家要兩者擇其一。要創建一個真正出色的設計,是要真正了解你的受眾喜好和習慣,做到真正由他們的用戶體驗出發,沒有什麼可以阻止你將兩者結合在一起的。

GreenTomato Editor
GreenTomato Editor
Green Tomato Limited
Green Tomato Limited