[討論] Flat Design/Metro趨勢與WP、網頁設計

[yanggh (yanggh)]

原本是之前回覆版友的文章

#1J_PHUD2 R: [討論] 大家都抄WP的介面?

那時打得比較隨性，想到什麼就打什麼

後來整理成完整文章，圖文版如此網誌連結：
http://www.greengabdreamer.com/metro-wp-flat-design/

以下為ptt排版用的純文字：

--------------------------------------------------

前言

自2012年起，各家手機除了外觀以外，連軟體和UI介面設計都讓人有一種
「怎麼好像都互相有對方的影子在？」的感覺。
像是hTC的Blink Feed、三星的Magzine、SONY的What’s New，
和iOS7 開始將APP icon扁平化…等。

咦都提到「扁平化」了，答案呼之欲出，就是「Flat Design」扁平化設計風格。
這個早在多年前非常流行的設計領域-又再一次捲土重來了。
許多新網站以及需要重新設計的網站都紛紛採用了扁平化設計的方案，這種趨勢無論是在網頁設計、行動裝置軟體介面運用等設計方面，都已經蔓延開來，甚至包括雜誌在內的一些新興平面出版物，也陸續使用Flat
Design的概念。

Flat Design的運用已相當廣泛，由於作者本人是WindowsPhone的愛用者
，所以本文中後段比較多的篇幅會以WindowsPhone
與其他行動裝置平台介面來作為主角
，順便描述一下各家行動裝置與網頁設計在這方面的發展演進。


一、What’s “Flat Design"－扁平化設計是什麼？

Flat Design放棄了所有 3D 化與維度概念，將畫面完完全全的以平面方式呈現，
並捨棄陰影、光影、斜角等相對於平面的凹凸效果，
狹義一點定義甚至可以說，用色塊來組成視覺介面。
此外，Flat Design大多可以與極簡、整潔牽上一點關係，
雖說是極簡效果，但是對設計者來說並沒有減輕他們的負擔，反而有全新的煩惱。

該用什麼顏色？該怎麼組成、排版？由於拋棄了許多效果，
再也不能以華麗的方式來奪取目光巧掩弱勢，
設計師本身的品味以及技術馬上會被放大檢視，
完全著重於美學質感、色彩應用和一些細微的情境與互動體驗。

而將Flat Design運用於大規模商業用途的領頭羊，
不是Apple，而是Microsoft用於Windows8的Metro UI介面（於2012/10/25正式發表）。


二、What’s “Metro"－Metro介面是什麼？

Metro概念相關元素從幾年前就開始被致敬了，或是說，影響？對，影響。
多年前Microsoft 正在宣傳Win8新介面的話題時，
就像現在的WindowsPhone，獲得的關注和熱度不算是主流的那種程度。

那時Win8上市前的Metro介面展示發表就讓覺得我覺得很亮眼，因為：

在當時螢幕愈做愈大，正從19〃 LCD提升至24〃, 27〃為主流，空間運用是很重要的，
Metro介面就有把這個概念考量進來；
最簡單的說法是讓icon變大、讓widget成為整合介面的一部份，
以及視窗及和工作表列項目的極簡一致且具隱藏、融入的特性。

以善用畫面空間、提升工作效率體驗與觸控多功能等面向來看，
這是很Smart的一種介面設計，同時也因為這些特性，
Metro介面同時也運用在WindowsPhone的行動裝置上，
作為一種更適合簡單使用又兼具效率及美感體驗的行種裝置平台介面。


三、Metro介面使用於Microsoft的特性與目的

除了適度的留白和精算過的方塊切割比例之外，
Metro的使用主要是因應觸控裝置和在當時還剛起步的行動裝置作準備。
有玩過AIO觸控桌電的應該知道這個意思，
想像一下，給你一台Windows XP/7 的電腦，把鍵盤滑鼠丟掉，
跟你說「嘿！請直接用螢幕觸控操作吧！」
你要不是會被搞瘋，就是會先把這台電腦砸爛。


四、Win8問世後，Metro介面對於網頁與平面設計的影響

Win8問世時，行動裝置剛起步，那大概是HTC還在Android陣營攻頂稱王的時候，
同時期Microsoft正處於將WindowsMobile汱換為WindowsPhone的學步期，
加上Win8的市場表現頗差，所以就沒什麼載具或系統會想跟著使用Metro元素。

反而最先開始一起帶領這股Flat Design/Metro風潮的，是各種新興網頁設計作品。

2012年起隨著Microsoft大量的Flat Design/Metro概念運用，
加上最新的HTML5/CSS3網頁設計語法漸趨成熟普及，
一些較新概念的網頁設計風格如雨後春筍般，
從歐美、英語系網站開始大量出現，這些網頁共同的常見作法是：

    1.大色塊、盡量減少圖片
    2.用CSS3語法排版，取代舊式切圖與表格框架排版
    3.用純色的大色塊和背景來做有效率又能減輕系統負擔的排版組合

以上所提到的各種帶有Flat Design/Metro元素的網頁設計，
直到現在仍是安全不敗風格的主流。

不過這種東西並沒有誰抄誰的問題，
而是一個美學風格、學派與概念上的影響、進化。


五、對Flat Design/Metro的推廣最有影響力的OS－WindowsPhone

雖然WindowsPhone使用者會說只有介面爽，本質不爽
（被罵很多很久的功能不完善與APP生態不夠健全），
但的確在這時候，它們對Metro相關元素的推廣影響力，
遠比市場表現不怎麼樣的Win8還來得強大許多！


六、Flat Design/Metro流行後的網頁設計與各家行動裝置OS使用體驗的糾結

就網頁設計而言，在前面提到Flat Design/Metro及HTML5/CSS3技術普及後，
衍生出Full-Width Page, Landing Page等各種新潮且適合跨平台、一式多用的版面設計。
加上老賈Steve Jobs生前就講明iPhone不會支援Flash
（要在網頁上播影片請用HTML5技術），
RWD（Responsive Web Design）響應式設計就開始被重視、推廣，

此時網頁設計的優先考量不再像以前那樣追求在桌機、筆電上可以多好看多屌，
或是Flash動畫炫技，
而變成是「如果手機或平板使用者在看的話，會如何呈現」為優先考量
（當然也可以桌機筆電一個版本，行動裝置另設計一種版本，這就另當別論了）。

※ RWD（Responsive Web Design）響應式設計：
是一種設計與建構網站的方式，無論使用者使用的介面為何，
它都能使網站自動配合介面調整版面配置，方便各種大小的行動裝置瀏覽，
以提供適合的使用體驗。


所以直到iPhone3~4與hTC Android機正夯的時期的尾聲為止，
在這期間iOS和Android還沒有抄也沒必要抄Microsoft引領的Metro概念，
反而是透過網頁設計與網站瀏覽體驗的管道，讓這些概念元素廣為人知；
就算使用者不懂，但各國設計師都會去抓趨勢、分析各種設計概念的價值來運用。


七、Apple與Android等行動裝置平台對於Flat Design/Metro的反應

 1. Apple

首先，因為Apple在美感、設計理念與獨特性等考量，
加上iPhone一向堅持不使用widget，要也是融入它的介面特色裡，但在iOS7之後，
繼Microsoft之後Apple也開始把Flat Design運用在iPhone的APP icon上，
所以你會發現從iOS7開始，iPhone的主畫面看起來明顯有一種「扁扁」的感覺，
求變化後，就做出了主打「icon懸浮於背景之上的效果」。

2. Android

Android出道時，美學和人因設計巧思從來就不重要也顧不到，
其中一部份是因為作為一個開放原始碼的平台，
當然就不太能也不會積極控管到什麼設計原則，幾乎是工程和功能多樣化的導向。

所以智慧手機發展初期除了iPhone以外，讓hTC的Sense軟體介面優化有了發揮的機會。
順道一提，後來hTC轉弱，與Android把hTC的一些獨家改善設計拿來開放使用，
也有很直接的關係。

值得一提的是，基於Android的開放性與高自由度，
早在2012年以前就有強者寫出WindowsPhone Metro風格的Android Luncher，
在使用體驗上獲得不少好評。


總而言之

不管是Flat Design/Metro, Win8, WindowsPhone
與各種網頁設計、新興網路事業網站的介面與LOGO等設計概念與各種元素，
本身的人因互動、視覺體驗、開發設計的效率、推廣的誘因…等，
真要談的話那又是另一種各別的專業，
比較不允許我這樣憑自己的見解描述帶過就算了。

但像是各種軟硬體與網頁操作介面的使用體驗、這些裝置與視覺上的改變，
所帶來的回饋與發展史的相關性，
是每一個愛上網愛摸3c介面、時間太多愛東看西看的使用者，
尤其是回顧之後，都能顯而易見地感受到的樂趣！


----------------------------------------

自從最近一次MS的發表會後，最近關於WP手機的討論愈來愈冷清了

空窗到一直在討論ip6、nokia事業史…等話題，看得出大家還是很期待的WP的XD

這篇怎麼看都還是覺得文筆有點差，獻醜了@"@

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.161.14.43
※ 文章網址: http://www.ptt.cc/bbs/WindowsPhone/M.1410850628.A.15A.html
※ 編輯: yanggh (118.161.14.43), 09/16/2014 15:03:22
推 urekak: 一直推一直推一直推一直推一直推一直推
推 jawa7026: WP的討論熱度真的少很多很多 >_<
推 wlwillwell: 私心認為之前WP的熱度很大成分來自NOKIA的死忠粉絲
→ wlwillwell: 以及WP8時，920 1020 520 720各種外星科技與高CP值
→ wlwillwell: NOKIA發表會相繼帶來各種神乎其技的附加技術
→ wlwillwell: 反倒是最近都很低迷...技術沒有創新、規格沒亮點
→ yanggh: 你得到它了
推 Abbaschian: 好文推，另外淚推wl板友中肯推文
※ yanggh:轉錄至看板 Web_Design                                    09/16 21:09
推 xu3ru4p: 看完前面就看不下去，對扁平化說明充滿錯誤
→ xu3ru4p: 在wp之前，扁平設計已經在網頁設計大行其道
推 xu3ru4p: 此外，不是科技產品改變雜誌或出版物風格，真實情況是相
→ xu3ru4p: 反的。請參考"國際風格"，wp是以此為藍本設計的
推 legendmtg: 最受不了"螢幕變大 icon跟著做大是利用空間"的鬼說詞
→ legendmtg: 螢幕越大代表你一次可以塞更多東西進畫面才叫利用空間
→ legendmtg: 不然為什麼WP要從2排磚變成3排磚
這三行推文內容的邏輯有點亂...
1.不管螢幕多大，metro的特性之一就是把icon和widget用更一致的方式整合呈現
而你提到的「利用空間」，我原文裡是這樣寫的：
"以善用畫面空間、提升工作效率體驗與觸控多功能等面向來看，
這是很Smart的一種介面設計，同時也因為這些特性，
Metro介面同時也運用在WindowsPhone的行動裝置上"

這跟你推文提到的那種理解，不盡相同

2.螢幕愈大理當可以塞更多東西，沒錯啊！
原文我沒特別說明，簡單來說大概就是
到win7為止的傳統桌面介面，要嘛你icon很多、畫面很乾淨
要嘛就是傳說中那種密密麻麻的隨手丟桌面做法，也就是android沿用的做法
這兩種作法，前者是未善用空間，就只是個桌面(Apple桌機是極致)
後者是善用但毫無美感和內涵可言，就只是一堆icon，且icon無其他功能性
使用者不管多用心去排桌面那些icon，在美學和人因介面上的分數都很低

所以更突顯Metro能兼顧功能性、自訂性以及能維持水準以上的視覺美學
如果是觸控裝置，又是資訊辨別度最高、手眼操作最輕鬆的介面

至於WP要幾排磚，那就是WP手機彼此之間大小的些微差異問題
這…我覺得是有點跳tone了
有的人覺得放一定的大小，不要太小，很舒服
有的人就硬要塞一堆，甚至不惜用最小的動態磚去排

講難聽點，這是硬要把Metro當傳統桌面在玩(就桌面icon填給它滿呀囧)
所以個人習慣不一定，我還是把重點放在Metro原意及特性啦
推 flknt: 手機夠大放三排磚才好用XD 820用過一陣子3排 現在又改回來
→ flknt: 而且動態磚就是讓你自己規劃空間 真的不喜歡從上面看資訊
→ flknt: 只想要用捷徑的話 都放1x1方塊 這樣長度多一倍 寬度變成6排
→ flknt: 不過應該會有密集恐懼症吧ˊˇˋ...
如上面幾行的回文，就只是使用者自己又回歸傳統桌面把icon填滿的作法罷了
Metro:就給你幾種規格大小，要怎麼玩隨你，但我的精神不死
※ 編輯: yanggh (118.161.14.43), 09/17/2014 22:09:31