作者yanggh (yanggh)
看板Web_Design
标题Fw: [讨论] Flat Design/Metro趋势与WP、网页设计
时间Tue Sep 16 21:09:02 2014
※ [本文转录自 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://webptt.com/cn.aspx?n=bbs/WindowsPhone/M.1410850628.A.15A.html
1F：推 urekak: 一直推一直推一直推一直推一直推一直推 09/16 15:35
2F：推 jawa7026: WP的讨论热度真的少很多很多 >_< 09/16 16:29
3F：推 wlwillwell: 私心认为之前WP的热度很大成分来自NOKIA的死忠粉丝 09/16 17:34
4F：→ wlwillwell: 以及WP8时，920 1020 520 720各种外星科技与高CP值 09/16 17:35
5F：→ wlwillwell: NOKIA发表会相继带来各种神乎其技的附加技术 09/16 17:36
6F：→ wlwillwell: 反倒是最近都很低迷...技术没有创新、规格没亮点 09/16 17:37
7F：→ yanggh: 你得到它了 09/16 17:43
8F：推 Abbaschian: 好文推，另外泪推wl板友中肯推文 09/16 17:48
※ 发信站: 批踢踢实业坊(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
9F：→ alog: 不觉得flat-design有什麽好比说是谁发扬光大的 09/17 03:05
10F：→ alog: 很多设计师都有在学设计时都有做过swiss-design的东西 09/17 03:06
11F：→ alog: 而metro就是基於这种设计风格延伸下去的东西 09/17 03:09
12F：→ alog: Metro有着非常明显风格特色跟表达的方式，跟其他家的 09/17 03:11
13F：→ alog: flat-design 以及 Google 最近在推的 material design 09/17 03:11
14F：→ alog: 完全是不同的东西.. 09/17 03:11
15F：→ alog: 对於这类我比较感兴趣的是实用性的问题，如色盲看这样子的介 09/17 03:19
16F：→ alog: 面，他看到的画面究竟是怎麽样的.. 09/17 03:19
17F：→ yanggh: 楼上有趣，一种当机画面的概念？ 09/17 08:48
18F：→ alog: 就像是说，可能某种颜色看不到，或许你看到画面是空白的 09/17 18:51
19F：→ alog: （两者颜色刚好叠在一起，无法分辨) 09/17 18:52
20F：→ yanggh: 了解~这之前真的没想过，或许这是是Metro运用於网页设计的 09/17 22:10
21F：→ yanggh: 一个先天缺陷？不过只要设计师另作色盲考量，应该是闪得过 09/17 22:11
22F：→ yanggh: ex:给色盲者点选适合版本，可非Metro，也可微调排版就好 09/17 22:12
23F：→ alog: 还有，大量的色块设计下，在各种装置萤幕的显示下 09/17 23:07
24F：→ alog: 给人的感受也会特别强烈 09/17 23:07
25F：→ alog: 可能颜色稍微偏了一下，整体感受就会有所不同 09/17 23:07
26F：→ alog: 以及大量的资料下，目前flat-ui 元件是否适用也是问题 09/17 23:08
27F：→ alog: 向下拉式选单、radio or checkbox 在大量数十个以上的时候 09/17 23:09
28F：→ alog: 可能会有点ㄎㄟˊㄎㄟ的 或 loading 变得更久 09/17 23:09
※ 编辑: yanggh (1.160.53.136), 04/11/2015 00:19:48