作者/ 鄒錦翔

扁平化設計的前身

Microsoft 把這種介面稱為「Metro UI」(後來因為和德國零售業龍頭 Metro AG 有衝突而改名叫 Modern UI),
之後便開始整合到公司旗下的產品,如 Xbox 360 和 Office 系列軟體,2012 年更是使用在 Windows 8 的動態磚上。

什麼嘛!上面講了這麼多,那到底是誰先開始用扁平化設計的?

沒錯,跟你想的不一樣,不是以設計聞名的 Apple 開始的,而是那個常常把事情搞砸的 Microsoft 。

在 2006 年為了和當時紅極一時的 iPod 競爭,Microsoft 推出了 Zune,不過當然不是 Apple Music+iTunes 的對手,Zune 自然就失敗了,但是 Zune 簡潔的介面搭配它的軟體顯得十分清新,也讓播放器和電腦上的軟體有一致的使用者體驗。

Microsoft Zune 和 Zune software

扁平化設計的應用

在 iPhone 推出後沒多久,Microsoft 在 2010 年也推出他的第一代智慧型手機 Windows Phone7,這可以說是扁平化設計第一次在資訊產品上向世人展現其樣貌,使用簡單的方格狀色塊與無襯線字體的介面,圖示也不在以擬真化呈現,去除細節與陰影。

Microsoft 把這種介面稱為「Metro UI」(後來因為和德國零售業龍頭 Metro AG 有衝突而改名叫 Modern UI),
之後便開始整合到公司旗下的產品,如 Xbox 360 和 Office 系列軟體,2012 年更是使用在 Windows 8 的動態磚上。

可是,扁平化設計是出現了,這也只不過是讓世人一窺它的面紗,那它又是如何快速竄起成為 UI 的潮流呢?

扁平化設計的崛起

精明的 Apple 大概在暗自竊笑把珍珠當石頭玩的 Microsoft,馬上在 2013 年發表了新版 iOS7,使用 Helvetica 做為系統字型,也一改前 6 代使用的擬真化設計,正式進入扁平化時代。

不過一開始有些果粉不太能接受這種巨變,紛紛哀鴻遍野,不過現在看來這是十分正確的決定,因為就在幾年後,Google 也加入了扁平化,自此起扁平化設計變成為 UI 設計的趨勢。

不過,Apple 為什麼願意冒著風險,排除眾議的使用扁平化設計呢?

扁平化設計的優點

愈來愈多研究說明了智慧型手機出現後人們使用電子產品習慣的改變,使用者在一天當中使用智慧型手機的時間超過個人電腦,畢竟手機在隨時隨地都可以使用,在這樣的情況下,就必須考慮要能在不同尺寸上的裝置呈現出一致的使用者體驗。

而扁平化設計正好有著一些十分棒的優點來解決問題。
The Same User Experience : 扁平化設計的色塊單純、很容易延伸拓展,可以在不同尺寸的裝置上呈現一致的風格,有著自適應(responsive )的特性;擬真化的按鈕在伸縮時容易造成陰影或光澤被壓扁等扭曲問題。

Keep It Simple : 有很好的可讀性(readability)和易讀性(legibility),在去除掉多餘的裝飾效果後,留下清楚明確的幾何圖案,呈現出極簡風格(minimalist),使用者不用特別放大螢幕來尋找連結或按鈕。

Bright Color & Visual Hierarchy:在顏色配置通常大量採用明亮色彩,並運用顏色去做階層和排版區隔,讓使用者有正向的觀感(Who ever looked at a rainbow and called it sad?)

Speeds Up the Workflow: 由於圖案細節的簡化,不管是在 Adobe Photoshop 或 Adobe Illustrator 製作檔案都能加快設計速度,更甚者,許多效果可以直接用 HTML/CSS 來呈現。

Less Assets in General: 相較於擬真化的圖片檔案,扁平化設計的圖示大幅降低檔案大小,有些效果也可以直接用幾行的 CSS 和 Js 程式碼代替,省去圖片了,降低 Web 和 App 的消耗容量。

Load Faster: 由於手機的系統空間及硬體效能仍比不上 PC,扁平化設計減低檔案容量和較佳的自適性可增快載入速度。

Focus on Great Typography and Font: 設計師可專注在排版與文字上,讓畫面看起來銳利(sharp)而清晰(clean),而非多餘的文字外觀修飾與無意義的動畫效果,無襯線文字也能讓使用者看懂內容又不會分散焦點。

It’s Trendy: Microsoft、Apple、Google 等許多知名軟體公司及網頁、App 都加入了扁平化的行列,所以跟上潮流是個保險的作法,而且網路上也有許多相關的資源可以使用。

扁平化設計的缺點

扁平化設計聽起來棒極了! 似乎總算打趴流行多年的擬真化設計,但是,在這波趨勢之下,你還是得想想關於它的缺點。

Usability Concerns: 扁平化在多層次資訊和複雜資訊呈現上有困難,Win8 是個很好的失敗例子,另外一個問題是手機上因為不像電腦有滑鼠游標,有著移到某個標示時、該標示會改變顏色或字體的「Hover」功能,使用者並非總是清楚哪邊可以按鈕、哪邊可以輸入文字。

因為少了陰影及資訊密度(information density),使用者會困惑到哪些是顯示資訊,哪些是可以按的按鈕

Color Palettes is Tough to Match:當介面上使用愈多種類的顏色時,顏色間彼此是否調和就會變得困難,設計師對顏色的掌握優劣就會十分明顯除了品味與美感之外,還需要懂一些色彩心理學。

(多數工程師沒有美學方面的知識,一般設計師又不懂網頁語言)
Weak Typography Becomes Obvious: 當介面沒有太多裝飾與附加效果,一個失敗的排版會看起來像是粗劣、半吊子的未完成作品。

面對這種情況,由 Google 主導的 Material Design 則是另一個趨勢,可以說是後扁平化時代或扁平化設計 2.0。

結語

扁平化設計的成功並非一蹴可幾,而是經過擬真化的過程,人們對於認知學習已足夠看懂抽象圖示的功能,那麼,扁平化設計改變的只有資訊產業嗎? 絕對不僅於此。

除了上述提到的商標 Logo,扁平化設計也日益普及影響到其他的設計領域,特別是印刷產品的設計,如海報和書籍封面(畢竟原本瑞士設計就是用於此),有愈來愈多旅遊手冊或產品說明書也開始採用人們逐漸習慣的扁平化設計。

有趣的是,許多手機遊戲也開始使用扁平化設計的概念在製作,像是很有名的 2048 數字遊戲

當科技產品中的使用者體驗(user experience)逐漸改變人們的認知學習時,會開始影響其他領域的相關設計,改變成大家所習慣的視覺風格,那麼扁平化會持續多久呢? 其實從歷史的角度來看,每一個時期的風格都不會持續太久的,更何況是資訊爆炸的今天,扁平化才開始興起的隔年 Google 就推出 Material Design 虎視眈眈,而人對於視覺的風格依舊會疲乏,擬真久了就會想要極簡,極簡久了又想回到擬真,周而復始,

而設計就是要在這潮流之中,尋找出最適合當代環境的元素和風格來解決眼前的問題,唯有能解決問題的設計才是好設計。

文章出處/ 咖尼馬管家的筆記

延伸閱讀:設計師必懂的趨勢,淺談扁平化設計優缺點與發展(上)

誠摯邀請你成為好朋友-->
        

About The Author

ㄇㄞˋ點子特搜編輯

藉由靈感的蒐集,並結合你與身俱來的創意,可以變得更美好也充滿趣味!! 麥點子將資訊整合,並透過編輯夥伴的創意,為大家挖掘、淘選、遞送來自世界的創意與設計訊息,在你的心田上種下一顆顆充滿靈感的「麥子」。 設計雖說是門專業技能,但設計感與美感是可以透過每天一點一滴累積而成的,藉由麥點子每天的文章傳遞,相信大家都都能夠從中獲得靈感,提升生活品味並讓處處充滿樂趣與希望! 因為麥點子夥伴們就是這樣子的一群人

Related Posts

留下你的看法: