2015年9月6日 星期日

still設計講堂/ 從Google新LOGO發表 看扁平化設計的熱潮


因為成立Alphabet的關係，搜尋引擎Google在9/1號也悄悄的更換LOGO囉!!
說是悄悄地也不悄，Google慣例也做了一支doodle慶祝
是說關於google熱衷於以doodle與用戶動的事史蒂之前有寫過一篇文章呢!
點我☞still設計講堂/ Google誕生與Doodle成功的祕訣
總而言之，google新LOGO將原本襯線字體改換為無襯線的簡潔風格
可以說是從以往企圖營造的字典形象進化為更科技感的資料庫
也象徵著google完成最後一步的革新，介面全面邁入扁平化設計風格囉!
今天我們想和各位聊聊扁平化設計-Flat Design
(still設計講堂是否該改名為still設計聊天室哈哈 ﾉ∀｀)
Flat design其實已經流行很久了!
最早最早我們可以追溯到瑞士風格(Swiss Design)
www.swissted.com
瑞士風格(Swiss Design)當初可真是夯到不行喔!!!
是二次世界大戰後最受歡迎、影響最大的一種設計風格
又被稱為國際主義平面設計風格(International Typographic Style)
理性、嚴謹、簡潔的排版是他們最重要的信條

當然這之後又歷經了許多落落長的設計風格演變
大概考試才需要會背，所以只好先跳過 ʕ￫ᴥ￩ʔ
約莫從2010年開始，微軟的Windows Phone 7正式揭開扁平化設計的序幕
以手機等移動式行動裝置為開端，慢慢滲透進我們的生活
www.microsoft.com/en-us/stories/design
題外話: 用電腦瀏覽這個網站真的快被逼瘋，這是一個適合行動裝置瀏覽的網站，在電腦上看根本...

 扁平化設計(Flat design)也可說是最小化設計(minimal design)或誠實設計(honest design)
顧名思義就是去除繁雜而無意義的裝飾
所以說，想做扁平化設計，就要抓住幾個重點:

1.元素簡化
包浩斯的設計原則少即是多Less is more在扁平化設計中發揮的淋漓盡致
下面這兩個APP icon就是最好的例子: 擬真vs.簡化
將一切元素極簡化、符號化，讓整個視覺保持在乾淨簡潔的狀況下。

2.去除特效
透視OUT! 浮雕OUT! 斜角OUT! 漸層OUT! 下降式陰影(drop shadows)OUT!
任何3D屬性的特效通通要拿掉!!
www.google.com.tw/intl/zh-TW/about/company/products
你可能會想說: 哪有! 陰影明明還在呀? ◔̯◔?
嘖嘖(搖手指ƪ•̃͡ε•̃͡ ∫)
扁平化設計的陰影可不是普通的陰影
它們通通以45度斜角的方式投射於右下角，彷彿儀隊一樣整整齊齊
•  •  •  • 
而在扁平化設計之下，有兩個設計要點可以立分設計師高下
色彩&排版
如果說扁平化設計是為了優化使用者介面而來
那麼美就不是唯一的設計要點了
扁平化設計透過簡化讓頁面達到一致性的視覺感受
那要如何在短時間之內可以引導使用者進行直觀的點擊呢?
階層概念就顯得非常重要
▼下面這是一個國外網站，搜羅各式網站設計案例，由網友評分票選
www.awwwards.com
它就是使用扁平化設計介面，當然也有一個大分類蒐集了一堆優秀的Flat design website
當我進入這個網站，亟需了解的就是我有哪些按鈕可點

微軟網站也提供了一個☞頁面讓大家試玩Windows 10 Mobile
Windows自從卯起來玩Flat design以後，一直都是以顏色來區分按鈕

而就算阿史天資聰穎(自己講) 也是有苦手的時候
就是這個app啦! 當初這個app以簡潔的畫面，優雅的配色聞名設計小圈圈
載了之後...資訊的階層關係著實讓我眼花撩亂，於是我就刪了...
所以說美麗之餘切莫不可忘了使用者的設計需求喔 (難道只是因為我笨嗎థ౪థ)

最後最後再提一件事!!
扁平化設計和擬真設計(Skeumorphism)可說是對手關係
在漫漫的時間長河中不斷追求著我們使用者的愛 (๑•́ ₃ •̀๑)

因為阿史一直是iphone使用者的關係，所以就唉鳳舉幾個例子給看倌瞧瞧
▼擬真設計的計算機 vs. 扁平化設計的計算機

掰樂味，畫擬真介面的設計師還真辛苦噎
 要是畫完被退稿會很想揍業主吧(╬☉д⊙)
•  •  •  • 
如果你問我究竟是扁平化設計(flat design)好還是擬真設計(skeumorphism)好
還真是選不出來

對我來說，扁平化設計視覺清爽，在資訊爆炸的時代，這樣的風格讓我心情愉悅
但對於第一次使用的app，擬真設計更能依照過去經驗直覺操作

在擬真設計風行了半個世紀後，扁平化設計直到現在也才萌芽5年
設計就是這樣風水輪流轉
或許50年之後又是擬真設計大行其道呢!!
於
標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)