Issuu on Google+

扁平化設計與近代介面設計趨勢分析

Analysis on Flat Design & Current UI Design Trends Kyle Chen

2013/4/22


Metro UI

What is flat Design?

3

Minimalism & Flat Design & Web Design Color, Form, Typography Websites & Apps

17

 Microsoft Windows  Inspiration  Not for PC?  Usability  Criticism

Skeuomorphism

26

Almost Flat Design

31

 Opposite to Flat Design  Apple  Criticism  Combination of two approaches  Google, Facebook  Others


UI Comparison Conventions of UI Design Recent Cases Conclusion Flat UI/Almost Flat UI Websites References

38 45 47


What is Flat Design? 什麼是Flat Design? 以極簡設計為主要手法,將功能及易用性作為優先考量,捨棄陰影、 漸變及高光等立體效果,利用開放性空間概念、鮮明的色彩對比、俐 落的邊緣線條及適度的字型運用,營造出一個「平」的二維畫面。


Minimalism / Flat Design / Web Design 極簡主義vs扁平化設計 20世紀建築界的極簡主義運動 中心思想: Form follows function(形式取決於功能) Less is more(少即是多) 近年來全球的設計思潮受到極簡、禪意、人文、空間感的留白風格 影響,此設計趨勢在出版界、時裝設計、包裝級產品設計上更是明 顯。Minimalism算是Flat Design的本質,相較於複雜擬真的畫面,簡 單的圖示或插圖較能快速地被理解並傳達訊息。

扁平化設計vs網頁設計 成功結合扁平化設計到網頁裡的網站,通常會有正面的使用者回 饋,例如親和力或簡便。


Minimalism /

Flat Design / Web Design

越來越多的人開始著重於網站的實用性及專業性,讓使用者能夠在 最短時間內把一個目標任務完成才是架站的主要目的。將使用者經驗 User

Experience納入主要考量,網站及使用介面皆以實用有效率為

主,而非畫面美觀與否。 Online accounting service Xero. com網站所提供的Could Computing Guide(右圖)以Flat design的 方式取代繁瑣的圖文敘述,簡單明 瞭,同時也為瀏覽者省下解讀的時 間。


Minimalism / Flat Design /

Layervault是一個以file

Web Design storage為主要服務的網站,網頁均以

Flat Design的概念來設計,所有的圖示、配色、字型運用、各種UI元 件都完美融合了Flat 大。 https://layervault.com/

Design元素,將網站的效能及易用性發揮到最

Layervault的設計師Allen Grin-

shtein在HackerNews的一篇文章有提 到:「長久以來,網站的界面風格 似乎都在遵從著同一種設計美學, 大家都在用斜面、漸變、陰影一類 的效果來突出界面元素的質感。對 於設計師們來說,製作這類’可 愛’的元素簡直變成了行規甚至是 榮譽。不過對於我們,以及為數不 多的其他一些設計師來說,這種慣 用的方式並非一定正確。」


Features / Color / Form / Typography 扁平化設計3大特點  I. 配色模式 Retro Color Scheme復古配色 經常與Flat

Design配合應用,營造出一種印刷品的復古質感,通常是字型

與圖示並重,以大量的簡單圖案、色塊、箭頭、標題的運用來代替冗長的文 字敘述。

高對比,高彩度 迅速抓住注意力,突顯重點,強化 提示功能並給予正確的導引。 常見應用:可視化圖表[如右圖]

灰階與高彩度的交互應用 以色彩強調重點,灰階為輔助或次 要資訊。


Features / Color / Form / Typography 扁平化設計3大特點  II. 色塊形式 無論方或圓,以最簡單易辨的形狀 為主,不使用輪廓複雜的色塊,避 免造成訊息內容的干擾。

III. 字型選擇 一般Flat Design傾向於使用非襯線 字體(Sans Serif Font),字型較 簡潔,利於辨識。文字訊息的內容 盡量簡短易懂,用字精確。

Snowbird APP: 標題及排版應用的佳 評實例,淺顯易瞭,訊息明確。


Examples / Websites 網頁設計&互動行為   互動行為在Web設計裡一直備受重視,主要是為了讓使用者與介面 有更好的溝通,進而有更適當的操作行為,提高整體效率,然而現今 ,只注重細節而忽略功能本身,反而造成使 用 許多互動設計被 過度設計 者的負擔。部分UX 設計師提出,未來的方向應力求通過優化資訊架構 (information Architecture)和任務流程(task flow)替代多餘的互動 行為,將操作回 饋處理得更加自然直觀。

EVERYLASTDROP

BOKSQUIS


Examples / Websites


Examples / Websites 真實物品與FlatDesign的結合實 例:NEST.COM 網站本身採用扁平設計風格,將實際 產品及情境照片融入其中,締造虛實 結合的效果來突顯產品本身。


Examples / Websites 網站的介面需簡單直觀,所有的功能選項,導航及指引工具皆位於淺 顯易見的地方。

重點:功能/任務明確

PIXEL PLANT HEATHROW PARKING


Examples / Websites 運用動畫效果或時間軸來增進互動,給予正確的導引,進而加速操作 流程。

scroll down

TIMELINE LAYOUT


Examples / Apps 行動應用程式:攜帶式行動裝置的普遍化,民眾對於網路或訊息溝通 產生了依賴性,專為小尺寸螢幕介面設計的應用程式變得日趨重要。


Examples / Websites Microsoft Windows 8 / Future Insights Live / Onepager / Squarespace


Metro UI / Modern UI / Windows 8 Style 扁平化設計(Flat Design)早在多年前被廣泛應用在網頁設計上,然而直到 近年才被廣泛討論的原因,多半是Microsoft突破性的Windows 8全新使用者 介面的發表,將扁平化設計風格帶入行動作業平台上,以及行動作業裝置的 普及化而形成話題。

中心思想

微軟給Metro下的思想主題是「sleek, quick, modern」,以字型及內容資 訊為主,有別於icon based的iOS, Android和以往的Windows,Metro UI融 合了Swiss Style (International Typographic Style)的設計概念;可讀 性、客觀性、整潔度(readability, objectivity and cleanliness),以簡 單的字型及簡潔的排版為主要原則,減少圖示、濃縮重點,有利於以文字為 主的介面導航。

特色優勢 Metro UI的設計形式適用於觸控式介面,大量運用動態磚 (tile based)而 非一般傳統型圖示(icon based),此特點可大幅度增加點擊面積,也利於顯 示相關資訊。


Metro UI / Inspiration 設計背景 根據微軟設計團隊的發言,Metro的靈感來自於機場和地鐵的指示牌, 特別是King County Metro,其風格採用簡單大方的字型,俐落的配 色,以及輪廓簡單的圖示,能夠迅速吸引注意力且提高辨識度。


Metro UI / Program / Application 應用程式 最初的時候,我們可以在Microsolt Encarta 95及MSN2.0看見Metro概 念的設計雛型,之後Windows Media Center及Zune亦採取此設計,其後 是Windows Phone,Xbox 360主控台頁面,還有眾所皆知的Windows 8, 除此之外,目前微軟官方網站及旗下Skydrive、Outlook.com、Office 2013也都整合了部分的Metro設計。

Microsoft XBOX 360

From Aero to Metro


Metro UI / Not for PC 詬病因素 Windows 8 Style最令人詬病的是整體風格的一致性及操作上的易用性。 作業系統相容性:(1)許多軟體只能在一般傳統模式下執行,無法在Windows 8 Style執行。(2)旗下的Windows 8 RT tablets只能跑Windows 8系統。(3) 由於軟體的相容性問題,用戶在使用上需要經常在Windows 8及Windows 7的 介面不停切換,此行為易造成使用者認知上的負擔,用戶必須牢記這兩種介 面的功能及用途,因此consistency成為重要關鍵,許多UX設計師認為微軟 必須好好省視這個問題,以降低用戶的認知負擔。 操作媒介:伴隨時代演進,我們已從滑鼠為媒介的GUI 時代逐漸進入以手指 觸碰來操作的NUI時代,許多人質疑Windows 8的Modern UI只適用於觸控式 的平板裝置或智慧型手機,而非一般電腦。以訊息內容優先作為設計考量的 Windows 8 UI固然是追隨時代趨勢的產物之一,但對於大多數人仍以滑鼠鍵 盤為PC操作工具的實際現況來說,如何於其中取得平衡並提高操作上的流 暢度,這點目前仍在觀望中。


Metro UI / Consistency / Usability 螢幕大小: Tile-based的Metro UI適合小螢幕裝置,點擊面積大,能夠顯示的相關資訊 也較多,除此之外,自成一頁的服務菜單也得以將螢幕使用空間發揮到最 大。然而上述的這些優勢,在使用場景轉換至桌機或筆電時便失去其意義。

易用性問題: 1) Missing task bar: 缺少工作列(Task bar),切換Apps時必須先回到 Start menu之後,再點選執行中的App thumbnail來打開程式,相較於以往 的Windows desktop模式來說多了一道步驟。 2) Visibility & hovering:在使用滑鼠的情況下,用戶必須以hover的方式 展開menu或返回前一頁,令整體的操作流程變得遲緩,不過主要問題還是在 隱藏式菜單;“what’s out of sight is out of mind."行動裝置的相關報導指 出,處於視野之外的隱藏式功能,會讓使用者花時間去思考如何開啟它,即 便已經知道方法。因此,這類功能選單的「可見度」才是關鍵所在。


Metro UI / Criticism 雖然微軟有提供Win8的免費教學課程,仍有許多門市業者接到客戶詢問Windows 8系統要如何關機,由此可見操作介面不夠直觀,一般微軟用戶還是比 較習慣以往的“開始”列表。※Win8需要用滑鼠移到畫面最右邊才會出現相關設定

以形狀記憶應用程式還是色彩? 同色彩是否性質有關聯? 圖示的一致性? 左右翻頁需依賴鍵盤 - 不直觀 (觸控式裝置的操作手順無法直接移植到桌機)

全螢幕模式不適合多任務操作 (無工作列,無法縮放應用視窗,需來回切換程式)

前置作業思慮:由行動觸控作業系統移植過來的操作方式,是否也同樣適用 於桌機及筆電? 觸控行為獨有的便利是否失去優勢? 是否需要透過UX角度調 整UI改變操作流程以提高易用性?


Metro UI / Criticism Windows 8 style的介面設計是「享用內容」(Content Consumption)取向, 而非以「創建內容」(Content Production)或「多重任務」(Multitasking) 為主,然而前者的媒介工具通常是tablets或phones,後兩者才是大部分的人 使用PC的主要原因。

平板/手機 vs 電腦

小螢幕 vs 大螢幕

手指 vs 鍵盤滑鼠

不同的操作手法及媒介,相同的操作系統及介面?


Metro UI / Criticism 字型不同所帶來的視覺影響: 許多Windows Phone用戶發現,原本簡潔漂亮的英文介面,一旦切換成中文 模式之後,整體的視覺效果也隨之削弱。字型在Flat Design來說是相當重要 的角色,礙於中英文字體結構上的差異,畫面的平衡度及整體感會因為字型 的轉換而受到破壞,為了將這類不良影響降至最低,中文字型的選擇及應用 方面需要特別留意。除此之外,極簡主義裡的“留白”手法在西方設計運用 的相當廣泛,扁平化設計亦是如此,但是對於筆劃飽和度不一的中文字型來 說,留白設計並無法將極簡的優勢發揮到最大,所以針對中文介面的空間規 劃需要謹慎佈局。 ※整體視覺效果在中文介面上削減許多

English

中 文


Metro UI / Criticism 過度扁平化:到底哪一個是按鈕哪一個是Banner?哪些色塊可以按,哪 些個不行?沒有明確的視覺暗示及導引,何提易用性? Microsoft’s modern.ie site


Skeuomorphism / Apple 擬物化起源於視覺隱喻(visual metaphor)的設計應用,將螢幕上的應用 程式進行轉譯,使其擁有與實際環境相似的外觀,讓使用者感到熟悉,能自 然而然地透過『人性化』的介面,與應用軟體進行互動操作。隨著時代演 進,擬物化已被吸收進 UI 的設計領域。如果說將扁平化設計實施到底的代 表是Microsoft的話,那麼擬物化的代表就非Apple莫屬。

Defination: Skeuomorphism is the imitation of another object by copying its material AND shape AND functionality. 目的:(1)締造一個親和熟悉的操作環境。(2)增加操作的感知回饋和趣味性 。iOS Human Interface Guidelines提到:“當你應用中的視覺化物件和操 作按照現實世界中的物件與操作仿造,使用者就能快速領會如何使用它。”


Skeuomorphism / Criticism 「在現實生活中,當按鈕被按下時,你可以清楚的感受到它的彈性,但在桌 面設備或移動設備的顯示屏上,你無法感覺到這種物理回饋。看上去是實體 的東西卻無法讓人感受到實體本該具有的反饋效應,至少對我來說這是一種 很蹩腳的、不符合預期的體驗。」 – Allan Yu (svpply / eBay) 舉例來說,我們通常會為介面上 的按鈕做一些漸變和陰影效果, 以符合現實情境裡的視覺特徵, 然而這些效果對於應用程式本身 的功能來說,卻沒有任何實際意 義。同樣情況,有些氣象相關的 應用程式會使用溫度計的形式來 顯示氣溫,在現實世界中,這種 實體工具的存在是必要的,然而 在應用程式中,溫度計的形象純 粹是裝飾性的。 ※使用者需要的是正確的氣溫資訊,而不是一隻仿真的溫度計。


Skeuomorphism / Criticism 擬物化設計和用戶體驗User Experience息息相關,原則上是模仿現實物品的 外觀及功能,但應用方式卻與現實情境有所不同,因此有可能出現所謂的「 恐怖谷」現象(Uncanny Valley: 1970由日本機器人專家森昌弘提出,當機 器人與人類相向度超過95%的時候,任何一點差別都會非常明顯,與人類差 別甚大的粗陋型機器人比起來,這份微小的差異會讓擬人化的機器人顯得異 常恐怖僵硬,有種行屍走肉的感覺。)最好的例子是iPad的通訊錄App,它 的外觀與iBooks相若,暗示使用者這是一本通訊錄,但是當用戶觸摸螢幕試 圖翻頁的時候,卻得不到任何回饋,等於是破壞了原本的暗示功能,進而降 低用戶體驗的品質,等於是反效果。


Skeuomorphism / Criticism 擬物化的設計程序中,在實體參照物上擷取元素的時候,容易將參照物本身 的侷限性也一並帶入,反而忽略了數位媒介體該有的優勢。一些常見的擬物 化設計,特別是紋理或材質上的模仿,例如皮革、木紋、車縫線、金屬質感 等,經常被無意義地濫用,僅為了美觀上的修飾卻往往加重開發者的負擔, 以技術層面來說,細緻的翻頁效果需要一定程度的多種運算,但是對使用者 來說,滾動式翻頁或橫向平移也具備同樣的效果。 擬物化近年被詬病: 濫用:在不必要的地方使用不適當的 擬物化設計 過度著墨視覺細節勝於內容 多餘的裝飾會產生誤導:不僅無用, 更容易造成破壞。 被人詬病的擬物化應用 浪費人力成本:介面的最終目標是溝 通,如何減少交互成本提高工作效率 是選擇風格的考量之一。 Icon的統一性:由於設計過於複雜, 整體上欠缺一種風格的統一性。


Skeuomorphism / Visual vs. Function iOS應用設計師 Loren Brichter在近期的一次採訪中提到:擬物化設計並不 是一無是處的,我們需要以人的方式與設備進行交互,那些華而不實的紋理 裝飾只是視覺設計問題,我希望這種“為裝飾而裝飾的”濫用問題可以逐漸 減少。

擬物化vs扁平化 “Great aesthetics mean realism” VS. “Good design is how it works”

特點比較:擬物化設計琢墨於外觀上的細節修飾,扁平化設計則是注 重內容資訊的傳達與整體排版。 濫用問題:擬物化的濫用降低使用者經驗的品質,扁平化的濫用會直 接影響產品的易用性。

擬物化設計 - 視覺取向

扁平化設計 - 功能取向

兩者都是美學設計風格的一種,需以實際功能及產品用途來取決使用 哪一種,而非一味地追求扁平化或擬物化。


Almost Flat Design / A Moderate Approach 針對Flat Design的質疑 用戶的需求: 應以完善的資訊架構及良好的互動模式為優先考量,過度的扁平化會造 成資訊傳達的無形障礙,浪費原本以內容優先的忠旨。 與高度複雜用戶介面的兼容性: 一般來說,陰影漸變效果是針對平鋪的大量內容一種有效的組織方式, 由於視野周圍的顏色感知細胞較少,若只透過顏色來組織秩序,會容易 失去整體的秩序感,這是扁平化設計在層級關係表達上的劣勢。

解決方案 準扁平設計Almost Flat Design 準扁平化Almost Flat是以扁平化Flat Design為基礎,視情況局部保留 輕微立體效果,也就是針對畫面上組織秩序的"層級"來做加強,透 過輕度的漸變及陰影來強調"深度"的不同。※也稱作Skeuominimalism


Almost Flat Design / Google Google 準扁平化在Google+的介面最為顯著,隨處可見輕度的陰影及漸變效 果,讓層級秩序更加完善(見右圖)。 Gmail 中的紅色按鈕“寫郵件” 、“編輯”及“搜尋”等,利用顏色刺激使用者對其進行互動。

Visual Cues

GMail iOS

Google+

GMail Web


Almost Flat Design / Facebook Facebook Facebook自創建以來,一直維持著扁平化設計的版面風格,簡約式 排版將有可能對資訊呈現造成妨礙的干擾元素降至最低,只保留部 分按鈕的立體效果,hovering浮出的視窗以陰影來解決平面上的層 級辨別問題。


Almost Flat Design / Others Squarespace

Stuff & Nonsense

Edges & Bevels

Rdio

Bootstrap

Gradient鑑變漸 變


Almost Flat Design / Others 2012 on Twitter

The Next Web

Letterpress


UI Comparison / Minimalism VS. Flat Design 極簡設計

扁平化設計

SUBJECT: 強調主題,欄位項目。 USABILITY: 除去裝飾性元素,去蕪 存菁。 BALANCE: 視覺層級的處理與空間 平衡的佈局。

COLOR: 明度及彩度皆高。 FORM: 色塊、動態磚、按鈕及圖示 的形式盡量簡單。 TYPOGRAPHY: 字型的選擇及標題 的運用。

Similarity: 強調“Simplicity簡單”。 Differences: 極簡主義力求畫面的極致簡約,包含色彩及空間的應用,多半利用灰 階及大片的留白來處理;扁平化則是使用大量不同的色塊及圖示平鋪在畫面上,彩 度與活潑度比Minimal Design要高許多。


UI Comparison / Skeuomorphism / Almost Flat / Flat

APPLE

GOOGLE

MICROSOFT

Skeuomorphism

Almost Flat

Flat - Metro


Conventions / Layout 無論採用哪一種風格,好的介面設計都需遵守一些共通原則:

焦點與佈局 網站的每一個視覺元素,包含顏色及文字,在視覺上來說都是一個重心跟導 引,必須擅用這些視覺元素去佈局規劃,透過配色、大小差距及安放位置, 將使用者的視覺動線牽引至正確的操作流程中,讓他們知道自己現在位於什 麼地方,要去哪裡執行下一個步驟,如何在最短的時間內完成任務。

替視覺設計「動線」 在百貨公司或是賣場上,如何讓顧客很快找 到想要的商品且順利抵達結帳的地方,這種 動線設計在行銷上是相當重要的一環。動線 設計是一門關於視覺、行為和選擇的設計, 平面設計與網頁設計如是,無論是報章雜誌 或各類網站,視覺注意力的動態設計是為了 讓瀏覽者能在最短時間內吸收到最重要的資 訊,並減少認知負擔。


Conventions / Hierarchization 層級化 先界定出哪些是重要資訊,哪些是次要,再把重要資訊放置在視覺動線的主 軸上,例如核心功能和常用工具,以及互動元素等,然後將次要元素置於非 動線主軸的地方,清楚劃歸出重要及次要的區別,功能面與資訊面,新與 舊,替使用者做一個基本的規劃分類,對介面的實際易用性來說才是有效的 優化及簡化。 ※地鐵路線圖演進

「依我個人的經驗,無論扁平化還是擬物化,最重要的是設計出來的介面, 能夠讓用戶在最短的時間內清楚的識別出信息和功能的層級關係,並且很容 易的知道接下來應該做什麼。」 – Caroline Keem (UX Designer)


Conventions / Target / Feedback / Prototype 目標客群 來自不同領域的客群,所青睞的介面風格也有所不同。一般來說,從事建 築、設計、時尚等領域的消費者較能接受扁平化風格,而一般民眾則傾向於 擁抱傳統的擬物化介面。其原因除了極簡主義在時尚及建築設計方面盛行已 久之外,針對擬物化風格的抨擊質疑大多來自於視覺或UI設計者,而非一般 民眾。

Feedback 當點擊行為發生時,要立即給予適當的feedback,避免造成困惑,例如 loading的旋轉圖示,藉此讓使用者知道自己的操作行為是有效的。

原型 無論風格為何,介面形式皆取決於實際功能,一個好的設計方案離不開產品 前期的規劃工作,特別是通過草圖或線框原型進行的探索。識別出最核心的 用例需求,使用原型不斷嘗試和驗證,為接下來的界面設計工作打下堅實的 基礎。


Conventions / Simplicity / Consistency Overuse is Overkill 無論採用哪一種視覺風格,介面呈現方式盡可能簡化為佳,為用戶打造流暢 的互動體驗,過多的元素干擾會影響使用者完成目標任務的時間,也會間接 提升功能的複雜度。所謂的干擾元素包含廣告或圖片、FLASH動畫、多餘的 程式特效等,這些加強元素的過度使用會影響使用者與介面的互動體驗以及 操作品質,進而降低使用意願。

風格統一 UI風格應與公司或品牌的理念形象相符,包含logo與配色方案,需要和公司 整體CIS一致較為恰當。

「為什麼要在沒有任何實際證據的情況下貶低某種設計風格,同時抬高另外 一種? 忽略產品的實際功能與整體體驗而單純追求某種設計風格,這並不是 一件令人興奮和愉悅的事。」 – Geoff Steams (YouTube)


Recent Cases / Apple iOS Apple’s Next Approach 蘋果Apple資深工業設計副總Jonathan Ive於三月宣布下一代iOS會有介面上 的大改革,他會統整軟體介面與硬體外觀兩組設計團隊,下一版介面應該會 向扁平化設計靠攏,不過還在保守範圍內,畢竟擬物化設計是蘋果長久以來 的標準風格,軟體和硬體團隊的配合運作也需要時間。近期更新的Podcasts APP介面可以看出,一些擬物化的金屬材質及高光效果已被摘除。

Old version

New version


Recent Cases / Apple iOS

iOS7 Principles

Apple’s Next Approach 1) 移除很多笨重的紋理、陰影、漸變和擬物因素。 2) 整個系統更精簡, 更經得起時間的考驗。 3) 添加更多的、視覺化、資訊流來源,比如把 Notification Center安插在任何軟體中。 4) 所有蘋果原生的應用都擁有了新圖示,全新設計 的工具列、標籤欄和其他基本介面功能。

iOS7 iOS6


Recent Cases / Google Play Android New Google Play Android在2013年4月9日於官網發佈的Google Play最新版面,融合了扁平化 設計的概念:Simple, Clean, Fast,以簡潔快速為中旨。

“Design in the absence of content is not design, it’s decoration.” - Jeffrey Zeldman (Web Designer)


Recent Cases / Current Trends 為什麼扁平化是一種趨勢? 1) 2) 3) 4)

Retina介面的研發及普及化 輕量型設計較適合攜帶型裝置 屏除冗餘的裝飾設計,操作速度變快 3C產品及數位化趨勢: i. 外觀簡化,介面亦然 ii.某些擬物已失去意義(3.5inch磁碟/儀器控制按鈕) 5) 審美疲勞:簡久必繁,繁久必簡

虛擬碎紙機? 有必要嗎?


Conclusion 結論:iOS未來的走向應該會與繁複的擬物化設計漸行漸遠,微軟的Metro在 易用性及市場接受度上也還有問題需要改進,未來市場的設計走向可能屬於 准扁平化設計Almost Flat Design這類兼具易用性和高效率的設計語言。


Websites / Part I http://squidee.co/ http://www.spelltower.com/ https://www.pixelplant.com/ https://iceber.gs/site http://januarycreative.com/ http://powwowapp.net/ http://cmjnrvb.net/ https://lowdi.com/ http://oak.is/ http://futureinsightslive.com/las-vegas-2013/ http://januarycreative.com/ http://www.truedigital.co.uk/ http://ithinkimight.com/popular http://etchapps.com/ http://www.prophets.be/work/ http://www.theissland.com/

Flat UI Websites

Flat Design with Retro Color

Waterfall


Websites / Part II http://invoisse.com/ http://playhundreds.com/ http://jiouhe.com/ http://everylastdrop.co.uk/ http://boksquiz.org/ http://www.jointlondon.com/ http://lostworldsfairs.com/atlantis/

Flat Layout with Animated Affects

Flat Layout with Real Product or Scenario

http://www.fitbit.com/ http://www.supereightstudio.com/ http://thenounproject.com/ http://www.allanyu.net/ http://www.bighuman.com/ http://patrickalgrim.me/

Almost Flat UI

https://2012.twitter.com/(Front page is flat, content layout is similar to google) http://www.stik.com/ http://www.sitepoint.com/ http://talkslab.github.io/metro-bootstrap/components.html


Reference / Part I Flat Design is In: Should You Get in on the Trend? (2013) – Carrie Cousins What is flat design? (2013) - Luke Clum Hyperflat Design is not great Web Designde (2013) - David Cochran Flat Pixels: The Battle Between Flat Design And Skeuomorphism (2013) – Sacha Greif Flat design vs. skeuomorphism (2013) by Mike Redaelli Showcase of Beautiful Flat UI Design (2013) on Hongkiat.com Skeuomorphic vs Digital interfaces and what will 2013 bring us (2013) on designmodo.com Almost Flat Design (2013) by Matthew Moore Modern UI Style Design by Microsoft (2012) by Christian Vasile Reflections on Web Design Trends in 2013 (2013) by Vladimir Kudinov


Reference / Part II Dissection of Windows 8 Metro UI – 8 features (2013) on Mint Usability Windows 8 on the desktop (2012) by Peter Bright Usability Expert: Windows 8 on PCs is Confusing, a Cognitive Burden (2012) by Avram Piltch, LAPTOP Online Editorial Director 小談關於扁平化界面風格的設計美學 (2013) by web设计趋势与潮流 (2010) published on《程序员》杂志2010年第7期


Flat design 扁平化與近代介面設計趨勢分析