UX UI Design

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

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

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

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

扁平化設計(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 設計初階課程 。

UX UI Design

好多人都話識UX,其實你又識唔識?

User Experience (UX) 概念及技能在設計行業非常之盛行,特別係喺數碼產品開發行業(如手機應用程式或網站),時常都需要聘請懂得 UX設計 的人才。坊間都有好多媒體提及到「以人為本設計」User Centered Design (UCD) 同UX之重要性及初創公司如何透過UCD模式來獲得成功。到底UX這個專業係做啲咩架呢?邊度有得進修相關技能?以及 UX設計 到底適唔適合你?

什麼是UX設計?

User Experience UX設計

當問到咩係UX時,單從字面解釋就可以理解為「專門負責研究用戶體驗的專業」,但內裡究竟包含咗咩流程同技巧呢?一般UX設計流程會包括設計思維 (Design Thinking)、用戶研究、User Persona、User Journey Mapping、製作線框稿 (Wireframe) 、原型製作 (Prototype)同可用性測試 (Usability Test)。當然,呢啲都係UX中重要的部分,但係如果你想成為一個專業UX從業員(如UX Designer或Business Designer),單係知道上述幾個步驟係唔足夠的,你必須要更透徹咁了解UX核心價值,以及作為一個專業的UX人士喺工作上有咩職責同需要面對乜野挑戰。

UX設計流程

下圖係GreenTomato Academy (www.greentomato.academy) 采納UK Design Council 的Double Diamond Design Thinking 框架及結合了GreenTomato Limited (www.gt.app) 多年數碼產品開發經驗而得出嘅一套完整UX設計流程:

Business Design Certificate in Business Design Greentomato Academy UX Design UI Design Wireframe Prototype Adobe XD

圖中所見,這個基於Design Thinking框架嘅UX設計流程分咗4大階段:(1) Discover;(2) Define;(3) Develop同 (4) Deliver,整個流程全面包含探索、分析、試驗同反覆測試元素。流程包括:市場調查、用戶研究、定義問題、用戶流程設計 (Task Analysis and User Flow Design)、互動 (Interaction Design)、製作線框稿 (Wireframe)、原型製作 (Prototype) 及可用性測試 (Usability Test),呢啲步驟都係強調「用戶分析及體驗設計」而非關乎外觀的用戶界面User Interface (UI) 設計。

坊間有時會誤解咗UX的性質,以為單係提供線框稿設計 (Wireframe)、原型製作 (Prototype) 及UI設計等等相關工作就係UX設計。很多雇主,什至乎設計帥本身都會誤解同混淆咗UX Designer及UI Designer嘅工作性質及職責。UX Designer係負責架構用戶大腦所接收到嘅信息,而UI Designer係負責設計用戶眼睛所看到的同互動模式,如果得唔到充分了解同掌握,角色上就好難得到充分嘅發揮。

User Experience UX設計

線框稿設計 Wireframe Design

總結

希望大家睇完呢編文章之後會對UX設計有更多認知同興趣,坊間都有不少網上分享、教學及課程可以學習UX設計。現時 UX 設計相關職位待遇不低,初級職位起薪點平均在月薪 2至2.5 萬港幣不等。如果你係一個具好奇心及富有分析力嘅人,或對數碼轉型 (Digital Transformation) 及數碼產品開發行業有興趣,咁UX設計相關都會適合你。

GreenTomato Academy現正開辦UX/UI設計相關嘅工作坊及課程,為有興趣了解行業趨勢、有意轉型的設計師們或有意向UX/UI Design 及Business Design行業發展之人士提供入行機會。

相關工作坊及課程

UX設計原型製作及可用性測試 
UX設計原型製作及可用性測試(工作坊)
Early Bird Special H̶K̶$̶1̶5̶8̶0̶ HK$1280

Adobe XD UX/UI 設計初階
Adobe XD UX/UI 設計初階
Early Bird Special H̶K̶$̶5̶98̶0̶ HK$5380

Hong Kong Consumption Voucher 消費券計劃