2013 年，有哪些界面設計風格趨勢？

12-15

The Industry 的 Gannon Burgett 總結了13 條：

扁平化設計風格 | Flat Design

更少按鈕 | Less Buttons

可理解的輔助動畫 | Animation as Affordance

左側導航菜單 | 「Hamburger」 Menu Drawer

更多原生 | Native Over Web

響應式網頁設計 | Responsive if not Native

更大的網頁寬度 | Wider Websites

更大的字體 | Larger Fonts

大搜索框 | Larger Search Inputs

更多動圖素材的使用 | GIFs as Design Elements

人性化設計 | Designing For Humans

更少老土顏色 | New Colors

矢量自適應 | Vector

_____
The Industry | 13 Design Trends For 2013

設計趨勢... -_-" @黃繼新大人又開始折磨人了。

趨勢分析非強項，僅在自身知識範圍內尋找可能形成的設計趨勢，如果有遺漏及不足，請補充說明，感謝！
PS. 其實個人從內心裡不喜歡follow趨勢，但有時又無它法，趨勢的形成往往通過了設計及市場的驗證，如果能從各種趨勢當中發現一條潛在的河流是一件非常欣喜的事情，並可使用你的設計脫穎而出。P.P.S.別為了標新立異而做出新穎的設計，最少它應該是經得起驗證的。

讓我們開始吧！
Web端及桌面端：

平面化
隨著微軟Win 8的發布，相信在隨後的日子裡，平面化設計風格也能開始多起來。 ps.「咔嗒」的洗腦視頻廣告最近一直在腦中縈繞.
簡約風格要開始流行了，同時簡約風格能夠更好的符合響應式設計的要求。

實例網站：
騰訊ecd – 電商用戶體驗設計部 E-Commerce User Experience
TaoBaoUED | 做地球上最好的UED
QQ音樂-音樂你的生活！
http://www.outlook.com/
http://www.microsoft.com/

2x精細化
水果在桌面平台推出Retina屏，業界估計也只有水果敢於做出如此逆天的舉動（軟硬都自己操辦，無需像微軟那樣瞻前顧後），相當有魄力，對於用戶體驗來說，這也是一個質的提升（現階段大部分的用戶感知都基於視覺）。

當然，應用及解析度適配無法立即到位，只能慢慢發展，日後隨著Retina的深入及用戶數量擴大，對於有追求的桌面應用及網站，均會設計對應的高分辨產品。以後視覺設計師可能就需要做兩套Sprite了。

圖1

通欄化
為了能夠更有效的打通同一平台的多個應用，Google、Naver、豆瓣近期的改版及新發布的iTunes均採用了頂部通欄的設計。一下個會不會是百度呢？ ps.關於iTunes還欠@鄭紫陽一個問題 -_-"

圖2

動效化
實際證明適當的動態效果能夠有效的對用戶進行引導，符合用戶的心理預期，並可增強應用及網站的體驗效果。

實例網站：
iCloud
Julien Renvoye（@JJ Ying 友情提供）
QQ音樂 For Mac
Animate.css

大幅圖片製造視覺效果
隨著帶寬以及用戶屏幕尺寸的增加，越來越多的網站在它們的頁面採用大幅圖片來突出產品或製造視覺效果，當然，使用得當的話，會有不錯的效果。

實例網站：
Welcome to http://about.me (about dot me)
http://www.jianjia360.com/
https://path.com/p/3Fg9hz
QQ2013官方網站

響應式設計
一直不喜歡這個名稱，稱之為適應性更好些。網頁的設計與開發根據用戶行為以及設備環境（系統平台、屏幕尺寸、屏幕解析度等）進行適應和調整，無論用戶正在使用桌面PC還是iPad，網頁都應該能夠自動切換解析度、圖片尺寸及相關腳本功能等，以適應不同設備。

實例網站：
The Boston Globe
AXT ? | Brand identity Art direction
Stinkdigital

移動端：

更豐富的導航設計
隨著iPhone 5高度的變化，galaxy note超大的屏幕... 越來越多的應用採用多樣的導航設計，手勢導航、Left Nav Flyout等，相信後續在導航上還會有更豐富的設計出現。ps.又欠@鄭紫陽關於left nav flyout的一個問題，好頭痛... -_-"

字體排版
移動設備屏幕的多樣性及應用數量的增加，為了能夠更凸現出應用的不同，字體排版將會在應用當中的位置越來越重要。如，唐茶，WeicoNote等。ps.該條也適用於Web端的設計，但由於中文字體的種種原因，導致web端的中文字體排版一直是個問題。

實例網站：
位元組社
Weico-最具人氣的微博客戶端

Native化
雖然像google、facebook及國內的百度都希望web端可在任何設備上運行，但對於某些網站來說Native App反而表現得更好，如facebook（已承認native優於web）、twitter，它們的App體驗都比web版的體驗要好很多，google也將旗下各產品native化，搜索、G+、郵箱、地圖等。

圖3

擬物化
雖然水果公司已明顯在抑制過度的擬物化設計，但相信在2013年擬物化還是會有一定市場，只要不過度擬物就行，每日刷刷dribbble的榜單還是有許多類似的視覺設計（別說，這只是意淫而已，dribbble榜單對視覺設計還是具有相當大的影響力）
實例網站：
Dribbble - Popular

Android為王
想獲取更多的用戶群，請優先考慮Android平台吧，相信2013年，基於Android平台的移動設備會爆發性增長。
在設計上需要更多的考量Android系統的特性，至少Android Design需要通讀一下吧...

Design | Android Developers

APP集群化（平台化）
百度以搜索及云為主的產品群，騰訊以微信為主的產品群，阿里以淘寶及支付寶為主的產品群，Google產品群，豆瓣產品群... 移動端天生缺少關聯性強的技術，像URL，互聯公司需要為每個產品打造單獨的應用，同時每家公司各APP之間缺少強聯繫性，導致每款產品均在單打獨鬥，相信在2013應該會有些破局的方法出來。ps.個人看好以微信為主的產品群，社交屬性能夠令各app之前的關聯性增強，Line或Kakao的方式也是微信未來之路，首先會以能夠直接贏利的遊戲為切入點，相信不久就會看到了。

這將導致同一個平台的APP在設計上會趨向於一致，視覺風格也會得到統一及加強。

圖4

工業產品：

edge to edge(無邊框化)
以水果公司為代表的工業設計理念，相信會對後續的相關及類似設計帶來一定影響。
魅族MX2的全球最窄邊框設計、自己家的iMac及iPad mini、LG在今年CES上推出的無邊框風格TV。

實例網站：
MX2 | 設計
LG 將在 CES 上展出 2013 Google TV，重新設計並會有更多尺寸

差異化
不斷對市場進行細化，有效挖掘用戶需求。
例如，2012年裡面移動設備屏幕的變化，4寸乃至5寸的智能手機大量出現，平板電腦尺寸的變化趨勢是非常的明晰 9.7"、7.9"以及7"，相信2013年，在這一方面還會出現更多差異化的情況。
另外，同類產品中的差異化也很明顯，如，三星內置Android的相機，能夠更好的進行網路連接，分享及同步照片。
三星發布首款Android相機支持3G和WiFi_網易數碼

人性化
科技必須並且肯定需要以人為本，設計同理！當隨著產品差異化不斷加劇，更需要為體驗這些產品的人們進行相應的設計。
例子：iPad mini的邊緣防觸設計，稱為 finger rejection 或 palm rejection。當蘋果採用edge to edge設計時（由設計引發的設計問題，這個以後有機會再談），觸屏設備必然會產生誤觸現象，邊緣防觸的設計用以規避該問題。

圖5，蘋果的專利名稱為「Selective rejection of touch contacts in an edge region of a touch surface」
專利地址：
http://www.google.com.hk/patents/EP2077490A3?cl=endq=finger+rejection+applehl=zh-CNsa=Xei=Af3yUMfhMubUigfCn4CQAwved=0CDgQ6AEwAA

軟硬一體化
現在硬體廠商更趨向於提高自身產品的智能性，這對軟體就有了相應要求，同時軟體廠商也越來越多的參與到硬體定製生產的過程當中。其間能看到Android大行其道，更深入的與硬體進行結合，這樣對產品設計有了更深一層的要求，
TV + Android = Google TV
冰箱 + Android = 智能冰箱

實例網站：
Hisense Android Honeycomb 智能冰箱中文動手玩（影片）

穿戴式產品
這個是近期很熱門的話題，Google glesses、kickstarter上融資過千萬的Pebble、傳聞中的iWatch等等

google glass_百度百科
Pebble: E-Paper Watch for iPhone and Android by Pebble Technology
視頻封面

CES2013新品預覽----Pebble 智能手錶視頻

Pebble視頻來一個，官方購買149刀（估計無法支持中文字體吧，所以讀通知時就...-_-"）

-----------切糕線----------
上面看著夠亂的，再總結一下吧，如下：

Web端及桌面端：

平面化
2x精細化
通欄化
動效化
大幅圖片製造視覺效果
響應式設計

移動端：

更豐富的導航設計
Native化
擬物化
Android為王
APP集群化（平台化）

工業設計

edge to edge(無邊框化)
差異化
人性化
軟硬一體化
穿戴式產品

歡迎拍臉，但輕點...

轉自己的過來：

數據可視化；（不只是天氣app，許多種類的app都可以融入數據可視化）

手勢手勢手勢；（能用就用）

結構模型；（不要再用蘋果默認的或千篇一律的結構了）

動畫無處不在；（app應該像變形金剛一樣，變形的時候kakakaka。。。）

好聽的聲音；（一定要好聽才行，參考xbox smart glass）

細節、趣味、彩蛋、小遊戲；（一個出色的例子就是olo遊戲進行中菜單開合的音效）

令人反思的；（我不知道我在說什麼）

來源： http://lackar.com/?p=1942

趨勢很容易把握，看ADOBE軟體的開始界面和OFFICE、WINDOWS的界面風格。

扁平化設計風格 | Flat Design

扁平化是一種擬物話之後的一種視覺疲勞。但是，簡單就是美。

更少按鈕 | Less Buttons

我覺得，應該是，更少文字，用icon圖像去表達，但是，某些應用軟體可以less buttons，例如大量的圖像信息。

可理解的輔助動畫 | Animation as Affordance

這個基於animation的理解，其實本人堆animation理解不深，所以抱歉，但是，一些好的動畫指引，確實給到我不少的幫助。贊一個。

左側導航菜單 | 「Hamburger」 Menu Drawer

這裡其實一種疊加式的菜單，目的一周一個，更多位置。

更多原生 | Native Over Web

一個問題，設計不好會很醜噢？！！！

響應式網頁設計 | Responsive if not Native

這個是基本具備吧？？！？

更大的網頁寬度 | Wider Websites

在交互和視覺來說，也許，大能夠「高大尚」。但是，請因app/web而異。不是所有衣服和造型都適合你的，親。

更大的字體 | Larger Fonts

no matter how large or size it"s, juet make you more comfort, such as sexsul life. huge cock or big boobs?!? i dont think so lor...

大搜索框 | Larger Search Inputs

這個，只能說，更加明顯的搜索框。

更多動圖素材的使用 | GIFs as Design Elements

那你會卡死！！！！也會煩死！！！適量就好。

人性化設計 | Designing For Humans

這個不是在說交互嗎？？？？？難道你想說用腦電波控制？？

更少老土顏色 | New Colors

對的，純色，或者＋白的顏色。

矢量自適應 | Vector

這個我不懂，請指教！！

metro，好多網站都有意無意地在模仿。以前好流行圓角，現在你看好多邊框都是方的了。
比比百度跟Google的搜索主頁，趨勢發展在他們上面體現的很明顯。
不過現在中文Google除了好看之外真的不是那麼好用了。

App簡介手繪風格。。。算不算？

習慣了平面化，瞬間覺得以前的好土！

補充幾個關鍵詞
Saturated
color
Minimal
Long shadow
Google fonts

cwsszprwzxxxcdz sxx

暫時想到的兩點：
1.metro的平面化風格會繼續影響視覺風格。
2.網頁廣告設計通過加有小動效的大圖陪以簡明的文字來說明觀點。最近看到sougou輸入法智慧版的官網:搜狗輸入法智慧版是一個好的例子。

關注！！！！

iOS 以flat而不是metro為趨勢，也就是ios7風格；
window以metro為趨勢，win phone，Surface是代表；
android以android4.0風格為趨勢，不過這個好像沒什麼手機廠商把它當回事。

2013設計趨勢按我的理解是，擬物風格慢慢隱退；扁平風格（簡約風格）各出其彩。

另外metro那種純扁平，平的跟飛機場似的，是不會有什麼前景的。

按鈕擴大，打包更小！功能可添加刪減。