Fw: [討論] Flat Design/Metro趨勢與WP、網頁設計
※ [本文轉錄自 WindowsPhone 看板 #1K5zz45Q ]
作者: yanggh (yanggh) 看板: WindowsPhone
標題: [討論] Flat Design/Metro趨勢與WP、網頁設計
時間: Tue Sep 16 14:57:02 2014
原本是之前回覆版友的文章
#1J_PHUD2 R: [討論] 大家都抄WP的介面?
那時打得比較隨性，想到什麼就打什麼
後來整理成完整文章，圖文版如此網誌連結：
http://facekungfu.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
推
09/16 15:35, , 1F
09/16 15:35, 1F
推
09/16 16:29, , 2F
09/16 16:29, 2F
推
09/16 17:34, , 3F
09/16 17:34, 3F
→
09/16 17:35, , 4F
09/16 17:35, 4F
→
09/16 17:36, , 5F
09/16 17:36, 5F
→
09/16 17:37, , 6F
09/16 17:37, 6F
→
09/16 17:43, , 7F
09/16 17:43, 7F
推
09/16 17:48, , 8F
09/16 17:48, 8F
※ 發信站: 批踢踢實業坊(ptt.cc)
※ 轉錄者: yanggh (118.161.14.43), 09/16/2014 21:09:02
小弟剛轉職，在網頁設計前端這方面還是新到不行的新手
不論是這篇文章，或任何這行的專業和眉角
真的要請Web_Design版的前輩們多多指教(跪)
※ 編輯: yanggh (118.161.14.43), 09/16/2014 21:11:41
→
09/17 03:05, , 9F
09/17 03:05, 9F
→
09/17 03:06, , 10F
09/17 03:06, 10F
→
09/17 03:09, , 11F
09/17 03:09, 11F
→
09/17 03:11, , 12F
09/17 03:11, 12F
→
09/17 03:11, , 13F
09/17 03:11, 13F
→
09/17 03:11, , 14F
09/17 03:11, 14F
→
09/17 03:19, , 15F
09/17 03:19, 15F
→
09/17 03:19, , 16F
09/17 03:19, 16F
→
09/17 08:48, , 17F
09/17 08:48, 17F
→
09/17 18:51, , 18F
09/17 18:51, 18F
→
09/17 18:52, , 19F
09/17 18:52, 19F
→
09/17 22:10, , 20F
09/17 22:10, 20F
→
09/17 22:11, , 21F
09/17 22:11, 21F
→
09/17 22:12, , 22F
09/17 22:12, 22F
→
09/17 23:07, , 23F
09/17 23:07, 23F
→
09/17 23:07, , 24F
09/17 23:07, 24F
→
09/17 23:07, , 25F
09/17 23:07, 25F
→
09/17 23:08, , 26F
09/17 23:08, 26F
→
09/17 23:09, , 27F
09/17 23:09, 27F
→
09/17 23:09, , 28F
09/17 23:09, 28F
※ 編輯: yanggh (1.160.53.136), 04/11/2015 00:19:48