扁平化設計的過渡期
UI設計界過去幾年持續爭論的一個大議題 – 那就是使用者介面究竟該「擬真化(skeuomorphism)」還是「扁平化(flat design)」？
回顧電腦時代的時候，Windows介面設計採用擬真化，比如說資源回收桶是模擬真實世界型態的樣貌3D立體化，文件與電腦圖示也都有著陰影與細節。
▼好吧! 你可能覺得很醜不好看，那我們換成軟體美學設計翹楚 Apple的Mac OS X
底下有著玻璃式的圖像倒映，所有圖示依然做的栩栩如生，不論是時鐘、指南針、放大鏡或齒輪。
不過如果你有注意的話，會發現Apple的產品採用包浩斯設計，有著潔白、簡約、俐落的線條。
下次在星巴克打開Mac時，還可以跟別人說這是包浩斯設計，讓你潮度增加87%
你是不是覺得奇怪，為什麼Apple明明很早以前外型就採用包浩斯設計，可是在軟體介面上卻是用擬真化設計呢?
▼你還有印象的話，應該記得前六代的iOS系統樣貌
我看過一派有趣又富有哲理的論點，認為擬真化設計是人類認知學習的過渡期產物，
就像20世紀初的量產汽車外觀也十分類似原本人們舊有習慣的馬車。
在人們尚未學習到新知識的時期，考量到原本使用者的習慣，用他們熟悉的事物來接觸新知，降低學習曲線與使用者門檻。
20世紀末人們學習使用電腦時便是先接觸了擬真化的設計，在2007年開始接觸智慧型手機時，很理所當然的會把過去的習慣帶入，就像以前操作電腦一般，而事實上，所謂的「智慧型手機」本來就是一部小型掌上型電腦。
而過一段時候後，使用者習慣新事物的習慣後，就可以朝真正合適的方向發展，就像後來的汽車即使不在設計的像馬車外觀，人們也能夠接受。
另一派則認為純粹是該時代發明人對科技的水平與想像就是如此，而且也被過去的思維與習慣所限制住，然後在不斷漸進的過程中慢慢改變原本的設計;在2007年的時候根本還沒出現flat design這個名詞。
這兩派論點並沒有答案，但是Apple同時運用擬真化與包浩斯設計為自己寫下科技業的傳奇一章。
扁平化設計的前身
什麼嘛! 上面講了這麼多，那到底是誰先開始用扁平化設計的?
沒錯，跟你想的不一樣，不是以設計聞名的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虎視眈眈，而人對於視覺的風格依舊會疲乏，擬真久了就會想要極簡，極簡久了又想回到擬真，周而復始，而設計就是要在這潮流之中，尋找出最適合當代環境的元素和風格來解決眼前的問題，唯有能解決問題的設計才是好設計。
文章引用:http://edwardzou.blogspot.tw/2017/05/FlatDesign.html#r_c8163524879870983702