圖為 2008 年 Benq Siemens Full Touchscreen 概念手機

本文轉載自 W3C plus，原文〈扁平化設計：你在這趨勢中收穫了什麼？〉，翻譯自〈Flat Design: Can You Benefit from the Trend?〉，作者為 Carrie Cousins，譯者為 LL。

扁平化設計（Flat Design）—這個早在多年前非常流行的設計領域-又再一次捲土重來了。許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計的方案，這種趨勢無論是在網頁設計或者行動端的設計方面都已經蔓延開了。

隨著融合了扁平化設計美學的 Windows8 以及新版 Google 的推出，以及其他人氣網站紛紛採用這種扁平化的主題設計，這種扁平化的趨勢將很有可能受到更多青睞。

你是否考慮過？你能夠把它運用到你的項目當中嗎？這種設計方案是否能夠給你帶來更加輕鬆的工作體驗？

扁平化設計具有著一種讓人心醉的美麗，沒有大量的修飾，它能以一個簡單直白的方式來傳遞一個信息或者幫助一個產品以及思想變得更加深入人心。所以說，趁著下一個新的設計潮流到來之前，我們現在就必須好好把握當前的設計趨勢。

什麼是扁平化設計？

扁平化設計正是通過放棄任何附加效果的方式，創建了一個「零」3D 屬性的設計方案。在這裡，沒有陰影效果（drop shadows）、斜角（bevels）、浮雕（embossing）、漸變（gradients）等其他方法來幫助元素產生相對於螢幕的凹凸效果。不帶有羽化邊緣以及陰影效果的圖標和UI元素也都是看起來非常鮮明。

扁平極簡就是Flat design的靈魂所在。

Flat design 並不是徹底放棄效果。它只是不存在那些能讓人產生立體感覺的深度（depth）和維度（dimension）。我們什麼甚至可以這樣認為，更多的設計傾向於「準扁平化」的範疇，這時候我們從產品的大體角度來看，仍然存在很小一部分的效果。

技術

忘掉所有的修飾元素，它們不是扁平化設計要關注的地方。

在這裡我們需要把注意力放在色彩上。扁平化的設計方案經常使用許多鮮明的色彩。從色塊、色形以及色調來看，色彩確實是提升扁平化設計一個不可或缺的組成部分。在你的 logo 上的用色方面多加斟酌，能夠使得你的網站引人入勝。在扁平化方案上僅僅使用白色和黑色就能夠產生不錯的效果，但你想著這效果要更進一步，那也可以採用更多的色彩。

注意字體。文字是必不可少的─他們提供了訊息，它作為了一個工具在你的網站上引導你的用戶該做什麼。使用一些有趣且獨特的字體來修飾文字，當然了，在這裡你就不要再想著 Arial（微軟字體）。挑選出字體來配合你所要表達的信息.記住扁平化方案的要旨是極簡，因此在字體的運用中，我們應該考慮其如何切合這個要點。簡單的無襯線（sans serif）類字體在這個方案中可應用的種類非常廣泛。或者我們不妨做出一點稍微「越軌」的處理方法，考慮更加在一個扁平化設計方案中選擇一個新奇的字體作為美術元素，這必定比簡單的字體的運用更加奪目。

做到惜字如金。許多扁平化設計同樣也運用了少量文字來營造一個簡約的風格。因此，我們要確保每個字都能發揮出重要的作用。

簡約的用戶界面和UI元素。用於被點擊的按鈕不需要過於複雜的設計。只要這些風格要素有了明確的定義，就不會阻礙他們成為「稱職的」按鈕。這些要素包括顏色、輪廓、框架或者甚至是不同字體或者形狀。

創建層級。在扁平化設計中，即便在被點擊的區域中使用了陰影、漸變、斜角等其他效果來進行特別註明，一些人還是感覺這些用於被點擊的區域表現得還不夠明顯。這足以說明，建立一個明顯的層級結構在任何一個網站上是極其重要的。我們要明確地讓用戶做到對你的網站一目了然。如果連結本身就擁有不同的色彩或者獨立被包含同一個區域中以供使用者點擊，那麼連結也應該要清晰地表現出來。

Flat Design 的命名

圍繞著「flat design」（這裡譯者翻譯為扁平化設計）這個名字存在著諸多爭論。現在你說看到的這個名稱「flat design」，也不是被大家絕對地認可。

不同的公司團體都嘗試用過其他名稱，例如「minimal design」、「honest design」，而微軟公司甚至稱它「authentically digital」。

對此你的看法是什麼呢？讓我們在Branch集思廣益吧。

Flat Design 啟示

很多人都說扁平化設計只是剛剛在設計／開發的團體中開始流行。下面請你借鑒下這些來自 Pinterest 和 Dribbble 一些關於 flat design 優秀資源，並以此考慮你的下一個項目該能怎麼用得上他們）（我們需要注意的是：Pinterest本身不採用扁平化設計方案）

Flat UI Design Pinterest board by War Marc

Flat UI Pinterest board by Marco Heutink

Square UI elements on Dribbble

Santa tracker icons on Dribbble

Flat UI on Dribbble

Square UI on Dribbble

Haraldur Thorleifsson on Dribbble

Bobby McKenna on Dribbble

Griffin Moore on Dribbble

Kyee on Dribbble

總結

得益於它自身簡單的特性，扁平化設計方案才能夠在訊息和產品當中表現得如此突出、簡單、整潔、直接。這種樣式設計在小螢幕上有了更好的表現，尤其是在手機行動端上，不過許多人覺得其在大螢幕的表現同樣搶眼，Android 平台以及微軟手機同樣在他們的操作平台上採用了扁平化設計方案。（蘋果是一個與之相對例外，它採用的的是 skeuomorphic scheme）

在扁平化設計上進行添加相對來說相對困難，因為再也沒有那些陰影修飾效果來隱藏你設計上的不足，在這裡，每一個細節，你都必須要用心顧及。扁平化設計同樣在多色彩的方案中有不俗的表現。無論是艷麗的色彩，還是黑白灰都能夠在扁平化的設計當中找到一席之地。在另一方面，在平面的某些設計當中僅僅設置黑白兩種顏色當然無可厚非，但如果整個頁面設計都是如此的話，那麼確實也讓人看起來有點嚇人，在這個時候，我們也許能考慮採用一個「準扁平面方案」，為此保留少量的效果以作修飾。

您可能也喜歡以下文章：
高級版按鍵精靈，同時也是UI自動化測試的好幫手 – SIKULI	淺談微軟Windows手機的metro UI設計	加了地理元素的Google介面改版搶先看！	下一版Android系統將取消用戶自訂介面？	iPad與iPhone軟體的介面設計差異
无觅

您知道 BBC 的 Logo 花了多少錢設計嗎？

180 萬美金。

BBC 於 1997 年捨棄了灰底斜體白字、下方分別襯著藍、紅、綠色線的 Logo，重新打造新的商標，化繁為簡，捨棄色彩─BBC 三個字母端端正正站在簡單的三個黑色方框內，除此之外毫無贅飾。這樣的 Logo，要價 180 萬美金。

換算台幣大概 5400 萬。

您或許會大嘆不可思議，這麼簡單的東西，居然得耗資 180 萬美元？若您還有印象，Inside 去年就曾有過一篇關於倫敦奧運 Logo 設計費用同樣索價不斐的新聞─40 萬歐元（1523 萬台幣）。究竟為何 Logo 設計總是動輒幾千幾百萬的？

中國問答網站「知乎」的網友對此有專業解答：（註一）

記帳方式

各家公司對於「設計投入費用」的定義並不一致。表面上不過就是改個 Logo ，實際上是項浩大的工程，180 萬除了支付給設計人或設計工作室之外，有可能還包括所有汰舊換新的印刷或改建費用。舉個可能讓您更有感覺的例子─美國航空（American Airlines）一旦想換 Logo，所有飛機都得重漆，這樣就恍然大悟了吧！

愈抽象愈艱難

BBC 的 Logo 為了能在你我腦海烙下過目不忘的印象（而它確實也做到了），設計構思的歷程可是千辛萬苦。愈簡單的事物，背後所需的演繹考慮就愈複雜，更何況 Logo 表彰的是企業精神，完全不能馬虎。人往往只看到最後的成果，就妄下斷語，我們都知道梅花歷經一番寒澈骨，怎能不理解作品不是隨便發個夢就突然實現了？根據「知乎」網友的回答，一家有規模的公司設計新 Logo 大概需要下列費用：

前期調查研究

越是大的公司，VI（Visual Identity，視覺識別）的更改自然越是小心翼翼。展開具體設計之前，市場調研會花費很多時間。而時間、人力、資源，都是消耗錢的。聯邦快遞當年更改 Logo，調研花了至少半年。

拷貝量和報價相關

（假設）同樣一份設計，賣給小公司和大公司的報價會相差很多。拷貝量多少，出現在哪些場所，受眾多少，這些都會影響到報價。

設計師／團隊的潛在投入

成為一個設計師（攝影師等創意類職業也都同理），當事人投入了很多錢學習，包括學費、包括設備、包括時間。成為一個經驗豐富的設計師更是需要很多的積累，這些都是難以用金錢衡量的。

備用方案

你給我 100 元，我就有義務給你做無限的替代選擇嗎？早有不少設計師在提倡不要免費提案了。設計出方案要錢，從幾百個方案裡篩選也是要錢的。因為時間／知識就是金錢。沒豐富的知識／經驗你如何篩選？碰面開會也要無數次，這裡還有車馬費、會議費等等。

大公司自然闊氣點

「我給你這麼多錢，你慢慢來，但一定要做好」、「我認為我企業的 Logo 就是值這麼多錢的」

Logo 往往伴隨整個 VI 變動

基本上就是整個企業的 VI 手冊都要全部重新弄了。大企業的 VI 手冊動不動幾十頁。VI 的設計、手冊的編寫、設計、印刷都是不要錢的嗎？我記得 BBC 的 VI 裡是有自家專用字體的。這些都是錢。

另外，也有網友分析為何 BBC 要換掉 1988 年沿用至 1997 年的舊 Logo：

耐用。BBC 需要的是一個可以用很長時間而不會顯得過時的東西。無論樣式還是字體選擇都需要經得起時間的考驗。就連蘋果在 iOS 上嘔心瀝血做的擬真風在現在的扁平化風格面前也顯得繁冗沉悶，比起 UI 要求更高的 Logo 及品牌設計的難度可想而知。

BBC 需要為它的各個頻道塑造統一的形象。首先它不能和舊版本差異太大，其次 BBC 的母 Logo 也要和其它的子 Logo 容易搭配。還是拿這個舊版本說事，如果我們要設計 BBC One 的 Logo 的話，你說說把 One 放到哪裡好呢？一個是斜體一個是正體要怎麼搭配呢？

BBC 當時正在發展數位電視頻道與網際網路，那麼新 Logo 就需要在電視上以及網站上都能有良好的效果，縮放時不能失真。另外還有平面印刷，注意這個舊 Logo 是彩色的，印刷相當消耗墨水的。

BBC 的 Logo 花了 180 萬，其實比起英國石油公司（BP）、埃森哲諮詢公司（Accenture）兩家豪氣干雲花了上億美元設計 Logo ，還算小巫見大巫；不過也有像可口可樂或 Google 從天上直接掉下 Logo 不花半毛錢，來看看世界知名品牌 Logo 的設計費用吧！（註二）但可別再說「這麼簡單我也會」囉！

百事可樂：2008 年請紐約 Arnell Group 設計公司設計新 Logo，100 萬美元。

澳盛銀行：2009 年重新設計的 Logo，1500 萬美元。

埃森哲諮詢公司：2000 年請 Landor Associates 設計的新 Logo，1 億美元

英國石油公司：2008 年重新設計 Logo，2.11 億美元

安隆公司：1990 年代請 Paul Rand 設計的 Logo，3 萬 3 千美元

Google：創辦人之一 Sergey Brin 自己來，不用錢！

可口可樂：創辦人的記帳員 Frank Mason Robinson 身兼設計師，也不用錢！這個 Logo 已從 1885 年沿用至今。

NeXT：1986 年 Paul Rand 為 Steve Jobs 設計的 Logo，10 萬美元。

Nike：1971 年創辦人 Phil Knight 從設計學生 Carolyn Davidson 買下勾勾標誌，35 美元。

Twitter：2009 年 Twitter 從 iStockPhoto 買下這隻小鳥版權，設計師 Simon Oxley 拿到 15 美元的設計費。

（註一）BBC 97 以年來採用的新logo 真的花了180 萬美金設計嗎？
（註二）Famous logo designs and how much did they cost?

您可能也喜歡以下文章：
Naver Logo x Art Project - 關於入口網站的文化主張	eBay 15 年來首次更換 logo，網路圈噓聲不斷	備受爭議的 2012 年倫敦奧運會 Logo	Inside網路品牌色彩學(一)：你所不知道的Inside小內幕	從 iPhone 起家的遊戲 Cut the Rope 兩年內達成 2 億 5000 萬次下載
无觅

照片來源：〈 【東京直擊！】參訪 LINE 新總部 〉

原文 〈 創市際 ARO 公佈台灣首份智慧型手機使用行為測量報告 〉 刊載於創市際®市場研究顧問公司網站。

台北，2013年3月23日－創市際ARO公佈台灣首份智慧型手機使用行為測量報告。

創市際為瞭解消費者使用智慧型手機的狀況，在2012年11月到2013年1月，與美國行動流量監控先驅Arbitron公司合作，經過台灣超過500位智慧型手機用戶的同意，在其智慧型手機中安裝應用程式，藉以偵測使用行為，取得包含使用時間、內容、方式、應用程式、網路瀏覽、手機作業系統、通信業者分佈等資訊。

根據研究結果發現，LINE跟Facebook是到達率最高的兩個app，顯示社群溝通在手機上的重要性。而不同性別、手機作業系統OS以及平日假日，使用智慧型手機的習慣也有所不同，以下摘錄部份調查結果。

數據傳輸

調查結果顯示，平均每位使用者，智慧型手機的傳輸資料數量達每月1,140MB，且有36%的使用者每月傳輸量超過1,000MB。從交叉分析來看，以女性使用者的傳輸量稍高於男性，根據調查結果，女性平均每月傳輸量為1,188MB，男性平均傳輸量則是1,077MB；而使用不同作業系統的使用者，其傳輸流量亦有顯著差異，iOS裝置使用者平均每月傳輸1,993MB，是Android使用者867MB的2.3倍，且7成的iOS使用者每月傳輸量超過1,000MB，相同傳輸量的Android使用者卻只有1/4。

24小時使用狀況

觀察使用者在智慧型手機上平均花費的時間趨勢，一整天24小時下來，發現自上午6點起使用時間就開始逐漸增加，且自晚間5點之後又再次跳升，約在晚間10點左右達到高峰。平常日與週末的使用時間模式大致沒有差異，但在使用的功能上則略有不同，使用者平常日花費較多時間在訊息與語音，週末則是花費較多時間在內建或下載的應用程式app、以及瀏覽器的使用上。

應用程式app

無論以月或是週為單位來看，LINE都是到達率最高的應用程式app，80.6%的使用者至少每週會使用LINE一次，Facebook次之，每週到達率達72.5%。此外月到達率前十名之應用程式app中，有四項為「訊息」類別，顯示使用者對訊息傳遞功能的重視。¹

觀察不同性別在使用應用程式app的差異發現，女性較偏好使用聯絡性質的服務如「訊息」與「語音通話」的應用程式，男性則是較偏好使用實用性服務如「適地性服務LBS」應用程式(Google Maps)以及「工具程式」應用程式(Dropbox)。

應用程式app vs.瀏覽器/網頁使用

比較使用者在智慧型手機上的應用程式(含系統內建與自行下載的app)與瀏覽器/網頁使用狀況，不論哪種內容類別，整體在應用程式app上使用的到達率皆高於透過瀏覽器/網頁的使用，使用時間上也是相同狀況，且此狀況在「多媒體」、「訊息」、「語音通話」特別顯著。²

此外，在「資訊娛樂」與「社群」內容的使用，透過應用程式app與透過瀏覽器/網頁的到達率兩者皆高，但在使用時間上，卻是透過應用程式讀取此兩類別內容的狀況較高，顯示不管透過何種方式，都有相當多的使用者會造訪「資訊娛樂」與「社群」內容，但在應用程式app的使用時間明顯較高。

觀察對象為2012年11月至2013年1月期間，創市際CyberPanel會員18歲以上自願加入台灣智慧型手機測量使用者。

您可能也喜歡以下文章：
網站分析：Facebook設計經理談數據如何影響決策	Facebook社群粉絲專頁將轉型，成為知識分享集散地	Facebook推出Android SDK	Facebook「加入」粉絲正式改為「讚」	Facebook十億用戶, 兩億五行動用戶的日子對創業者的意義
无觅