Skip to content
GreenTomato Academy
  • About Us
    • About GreenTomato Academy
    • Our Trainers
    • UX Portfolio Review & Career Coaching
  • Course and Training
    • All Courses
    • UX Research
      • UX Research for Beginner
      • UX Design with Prototyping and Usability Testing
      • UX Writing Workshop
    • UX/UI Design
      • Introduction to UX/UI Design
      • Intermediate UX/UI Design with Figma
      • Certificate in Full-Stack UX/UI Design
      • HTML & CSS Basics for Designers
    • Software Development
      • Low-Code and No-Code Mobile App Development
      • Serverless iOS Mobile App Development with Google Firebase
      • Introduction to Manual Software Testing
    • Digital Marketing
      • Online Store Entrepreneurship
      • Video Marketing and Production
      • Mobile App UX Design Taster Workshop
    • Course Calendar
  • Online Learning Platform
  • Article
  • Contact
  • 中文 (香港)
Site Search
UX UI Design

界面設計師 必需知道「扁平化設計」和「實感設計」的微妙關係

  • April 7, 2020August 20, 2020
  • by GreenTomato Editor

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

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

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

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

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

界面設計師 windows 10 UI

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

Flat design vs material design

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

界面設計師 Flat design vs Skeuomorphism

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

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

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

界面設計師 flat design UI pros and cons
界面設計師 Skeuomorphism design UI pros and cons

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

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

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

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

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

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

想修讀有關界面設計嘅知識?可了解我們的Adobe XD UX/UI 設計初階課程 。

facebookShare on Facebook
好多人都話識UX,其實你又識唔識?
Minimum Viable Product (MVP) by Hong Kong Movie
Flat Design Material Design UX Design

Related articles

Is Becoming a Full-Stack Designer…
ux writing
The Essential of UX Writing,…
Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD
【Business Value Creation 101】Revolutionize Your…
WTF Is More Important than…
好多人都話識UX,其實你又識唔識?

 

Full-stack UX UI Design
Figma Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD
HTML5 CSS3 GreenTomato Academy
online shop, online shopping, entrepreneurship
Introduction to UX UI Design
UX UI Prototyping Design Usability Testing GreenTomato Academy
Greentomato Academy Firebase course ios training

Search Course


ABOUT

COURSE

ARTICLE

CONTACT

TOP

Policies

Privacy StatementRefund PolicyInstallment PlanBad Weather ArrangementContact Us
Connect with Us
InstagramFacebookLinkedinMediumHSBC VisionGo

Courses

UX Research
UX Research for BeginnerUX Design with Prototyping and Usability TestingUX Writing Workshop
UX/UI Design
Introduction to UX/UI DesignIntermediate UX/UI Design with FigmaCertificate in Full-Stack UX/UI DesignHTML & CSS Basics for Designers
Software Development
Low-Code & No-Code Mobile App DevelopmentServerless iOS Mobile App Development with Google FirebaseIntroduction to Manual Software Testing
Others
Online Store EntrepreneurshipMobile App UX Design Taster WorkshopUX Portfolio Review

Find Us

Email
[email protected]

WhatsApp
67135239

Address
20/F., Harbourside HQ, 8 Lam Chak Street, Kowloon Bay, Hong Kong.

Hours
Monday to Friday: 10:00AM – 7:00PM
Saturday: 10:00AM – 2:00PM

Copyright © 2022 GreenTomato Academy
  • Instagram
  • Facebook
  • Linkedin
  • Medium