2013 年,有哪些界面設(shè)計(jì)風(fēng)格趨勢(shì)?

2014-5-22    藍(lán)藍(lán)設(shè)計(jì)的小編

轉(zhuǎn)載藍(lán)藍(lán)設(shè)計(jì)(   www.bouu.cn  )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的   BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、  ipad界面設(shè)計(jì)   、  包裝設(shè)計(jì) 、  圖標(biāo)定制 、  用戶(hù)體驗(yàn) 、交互設(shè)計(jì)、   網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

來(lái)源:http://www.chinaz.com/web/2014/0519/352016.shtml

趨勢(shì)分析非強(qiáng)項(xiàng),僅在自身知識(shí)范圍內(nèi)尋找可能形成的設(shè)計(jì)趨勢(shì),如果有遺漏及不足,請(qǐng)補(bǔ)充說(shuō)明,感謝!

PS. 其實(shí)個(gè)人從內(nèi)心里不喜歡follow趨勢(shì),但有時(shí)又無(wú)它法,趨勢(shì)的形成往往通過(guò)了設(shè)計(jì)及市場(chǎng)的驗(yàn)證,如果能從各種趨勢(shì)當(dāng)中發(fā)現(xiàn)一條潛在的河流是一件非常欣喜的事情,并可使用你的設(shè)計(jì)脫穎而出。P.P.S.別為了標(biāo)新立異而做出新穎的設(shè)計(jì),最少它應(yīng)該是經(jīng)得起驗(yàn)證的。

讓我們開(kāi)始吧!

Web端及桌面端:

平面化

隨著微軟Win 8的發(fā)布,相信在隨后的日子里,平面化設(shè)計(jì)風(fēng)格也能開(kāi)始多起來(lái)。 ps.「咔嗒」的洗腦視頻廣告最近一直在腦中縈繞。

簡(jiǎn)約風(fēng)格要開(kāi)始流行了,同時(shí)簡(jiǎn)約風(fēng)格能夠更好的符合響應(yīng)式設(shè)計(jì)的要求。

實(shí)例網(wǎng)站:

騰訊ecd – 電商用戶(hù)體驗(yàn)設(shè)計(jì)部 E-Commerce User Experience

TaoBaoUED | 做地球上最好的UED

QQ音樂(lè)-音樂(lè)你的生活! yixieshi

http://www.outlook.com/

http://www.microsoft.com/

2x精細(xì)化

水果在桌面平臺(tái)推出Retina屏,業(yè)界估計(jì)也只有水果敢于做出如此逆天的舉動(dòng)(軟硬都自己操辦,無(wú)需像微軟那樣瞻前顧后),相當(dāng)有魄力,對(duì)于用戶(hù)體驗(yàn)來(lái)說(shuō),這也是一個(gè)質(zhì)的提升(現(xiàn)階段大部分的用戶(hù)感知都基于視覺(jué))。

當(dāng)然,應(yīng)用及分辨率適配無(wú)法立即到位,只能慢慢發(fā)展,日后隨著Retina的深入及用戶(hù)數(shù)量擴(kuò)大,對(duì)于有追求的桌面應(yīng)用及網(wǎng)站,均會(huì)設(shè)計(jì)對(duì)應(yīng)的高分辨產(chǎn)品。以后視覺(jué)設(shè)計(jì)師可能就需要做兩套Sprite了。

通欄化

為了能夠更有效的打通同一平臺(tái)的多個(gè)應(yīng)用,Google、Naver、豆瓣近期的改版及新發(fā)布的iTunes均采用了頂部通欄的設(shè)計(jì)。一下個(gè)會(huì)不會(huì)是百度呢? ps.關(guān)于iTunes還欠@鄭紫陽(yáng) 一個(gè)問(wèn)題 -_-‘

動(dòng)效化

實(shí)際證明適當(dāng)?shù)膭?dòng)態(tài)效果能夠有效的對(duì)用戶(hù)進(jìn)行引導(dǎo),符合用戶(hù)的心理預(yù)期,并可增強(qiáng)應(yīng)用及網(wǎng)站的體驗(yàn)效果。

實(shí)例網(wǎng)站:

iCloud

Julien Renvoye(@JJ Ying 友情提供)

QQ音樂(lè) For Mac

Animate.css

大幅圖片制造視覺(jué)效果

隨著帶寬以及用戶(hù)屏幕尺寸的增加,越來(lái)越多的網(wǎng)站在它們的頁(yè)面采用大幅圖片來(lái)突出產(chǎn)品或制造視覺(jué)效果,當(dāng)然,使用得當(dāng)?shù)脑?huà),會(huì)有不錯(cuò)的效果。 yixieshi

實(shí)例網(wǎng)站:

Welcome to http://about.me (about dot me)

http://www.jianjia360.com/

https://path.com/p/3Fg9hz

QQ2013官方網(wǎng)站

響應(yīng)式設(shè)計(jì)

一直不喜歡這個(gè)名稱(chēng),稱(chēng)之為適應(yīng)性更好些。網(wǎng)頁(yè)的設(shè)計(jì)與開(kāi)發(fā)根據(jù)用戶(hù)行為以及設(shè)備環(huán)境(系統(tǒng)平臺(tái)、屏幕尺寸、屏幕分辨率等)進(jìn)行適應(yīng)和調(diào)整,無(wú)論用戶(hù)正在使用桌面PC還是iPad,網(wǎng)頁(yè)都應(yīng)該能夠自動(dòng)切換分辨率、圖片尺寸及相關(guān)腳本功能等,以適應(yīng)不同設(shè)備。

實(shí)例網(wǎng)站:

The Boston Globe

AXT ? | Brand identity & Art direction

Stinkdigital

移動(dòng)端:

更豐富的導(dǎo)航設(shè)計(jì)

隨著iPhone 5高度的變化,galaxy note超大的屏幕。。. 越來(lái)越多的應(yīng)用采用多樣的導(dǎo)航設(shè)計(jì),手勢(shì)導(dǎo)航、Left Nav Flyout等,相信后續(xù)在導(dǎo)航上還會(huì)有更豐富的設(shè)計(jì)出現(xiàn)。ps.又欠@鄭紫陽(yáng)關(guān)于left nav flyout的一個(gè)問(wèn)題,好頭痛。。. -_-’

字體排版

移動(dòng)設(shè)備屏幕的多樣性及應(yīng)用數(shù)量的增加,為了能夠更凸現(xiàn)出應(yīng)用的不同,字體排版將會(huì)在應(yīng)用當(dāng)中的位置越來(lái)越重要。如,唐茶,WeicoNote等。ps.該條也適用于Web端的設(shè)計(jì),但由于中文字體的種種原因,導(dǎo)致web端的中文字體排版一直是個(gè)問(wèn)題。

實(shí)例網(wǎng)站:

字節(jié)社

Weico-最具人氣的微博客戶(hù)端

Native化

雖然像google、facebook及國(guó)內(nèi)的百度都希望web端可在任何設(shè)備上運(yùn)行,但對(duì)于某些網(wǎng)站來(lái)說(shuō)Native App反而表現(xiàn)得更好,如facebook(已承認(rèn)native優(yōu)于web)、twitter,它們的App體驗(yàn)都比web版的體驗(yàn)要好很多,google也將旗下各產(chǎn)品native化,搜索、G+、郵箱、地圖等。

擬物化

雖然水果公司已明顯在抑制過(guò)度的擬物化設(shè)計(jì),但相信在2013年擬物化還是會(huì)有一定市場(chǎng),只要不過(guò)度擬物就行,每日刷刷dribbble的榜單還是有許多類(lèi)似的視覺(jué)設(shè)計(jì)(別說(shuō),這只是意淫而已,dribbble榜單對(duì)視覺(jué)設(shè)計(jì)還是具有相當(dāng)大的影響力)

實(shí)例網(wǎng)站:

Dribbble - Popular

Android為王

想獲取更多的用戶(hù)群,請(qǐng)優(yōu)先考慮Android平臺(tái)吧,相信2013年,基于Android平臺(tái)的移動(dòng)設(shè)備會(huì)爆發(fā)性增長(zhǎng)。

在設(shè)計(jì)上需要更多的考量Android系統(tǒng)的特性,至少Android Design需要通讀一下吧。。.

Design | Android Developers

APP集群化(平臺(tái)化)

百度以搜索及云為主的產(chǎn)品群,騰訊以微信為主的產(chǎn)品群,阿里以淘寶及支付寶為主的產(chǎn)品群,Google產(chǎn)品群,豆瓣產(chǎn)品群。。. 移動(dòng)端天生缺少關(guān)聯(lián)性強(qiáng)的技術(shù),像URL,互聯(lián)公司需要為每個(gè)產(chǎn)品打造單獨(dú)的應(yīng)用,同時(shí)每家公司各APP之間缺少?gòu)?qiáng)聯(lián)系性,導(dǎo)致每款產(chǎn)品均在單打獨(dú)斗,相信在2013應(yīng)該會(huì)有些破局的方法出來(lái)。ps.個(gè)人看好以微信為主的產(chǎn)品群,社交屬性能夠令各app之前的關(guān)聯(lián)性增強(qiáng),Line或Kakao的方式也是微信未來(lái)之路,首先會(huì)以能夠直接贏利的游戲?yàn)榍腥朦c(diǎn),相信不久就會(huì)看到了。

這將導(dǎo)致同一個(gè)平臺(tái)的APP在設(shè)計(jì)上會(huì)趨向于一致,視覺(jué)風(fēng)格也會(huì)得到統(tǒng)一及加強(qiáng)。

圖4

工業(yè)產(chǎn)品:

edge to edge(無(wú)邊框化)

以水果公司為代表的工業(yè)設(shè)計(jì)理念,相信會(huì)對(duì)后續(xù)的相關(guān)及類(lèi)似設(shè)計(jì)帶來(lái)一定影響。

魅族MX2的全球最窄邊框設(shè)計(jì)、自己家的iMac及iPad mini、LG在今年CES上推出的無(wú)邊框風(fēng)格TV。

實(shí)例網(wǎng)站:

MX2 | 設(shè)計(jì)

LG 將在 CES 上展出 2013 Google TV,重新設(shè)計(jì)并會(huì)有更多尺寸

差異化

不斷對(duì)市場(chǎng)進(jìn)行細(xì)化,有效挖掘用戶(hù)需求。

例如,2012年里面移動(dòng)設(shè)備屏幕的變化,4寸乃至5寸的智能手機(jī)大量出現(xiàn),平板電腦尺寸的變化趨勢(shì)是非常的明晰 9.7“、7.9”以及7“,相信2013年,在這一方面還會(huì)出現(xiàn)更多差異化的情況。

另外,同類(lèi)產(chǎn)品中的差異化也很明顯,如,三星內(nèi)置Android的相機(jī),能夠更好的進(jìn)行網(wǎng)絡(luò)連接,分享及同步照片。

三星發(fā)布首款A(yù)ndroid相機(jī) 支持3G和WiFi_網(wǎng)易數(shù)碼

人性化

科技必須并且肯定需要以人為本,設(shè)計(jì)同理!當(dāng)隨著產(chǎn)品差異化不斷加劇,更需要為體驗(yàn)這些產(chǎn)品的人們進(jìn)行相應(yīng)的設(shè)計(jì)。

例子:iPad mini的邊緣防觸設(shè)計(jì),稱(chēng)為 finger rejection 或 palm rejection。當(dāng)蘋(píng)果采用edge to edge設(shè)計(jì)時(shí)(由設(shè)計(jì)引發(fā)的設(shè)計(jì)問(wèn)題,這個(gè)以后有機(jī)會(huì)再談),觸屏設(shè)備必然會(huì)產(chǎn)生誤觸現(xiàn)象,邊緣防觸的設(shè)計(jì)用以規(guī)避該問(wèn)題。

蘋(píng)果的專(zhuān)利名稱(chēng)為「Selective rejection of touch contacts in an edge region of a touch surface」

專(zhuān)利地址:

http://www.google.com.hk/patents/EP2077490A3?cl=en&dq=finger+rejection+apple&hl=zh-CN&sa=X&ei=Af3yUMfhMubUigfCn4CQAw&ved=0CDgQ6AEwAA yixieshi

軟硬一體化

現(xiàn)在硬件廠商更趨向于提高自身產(chǎn)品的智能性,這對(duì)軟件就有了相應(yīng)要求,同時(shí)軟件廠商也越來(lái)越多的參與到硬件定制生產(chǎn)的過(guò)程當(dāng)中。其間能看到Android大行其道,更深入的與硬件進(jìn)行結(jié)合,這樣對(duì)產(chǎn)品設(shè)計(jì)有了更深一層的要求,

TV + Android = Google TV

冰箱 + Android = 智能冰箱

實(shí)例網(wǎng)站:

Hisense Android Honeycomb 智能冰箱中文動(dòng)手玩(影片)

穿戴式產(chǎn)品

這個(gè)是近期很熱門(mén)的話(huà)題,Google glesses、kickstarter上融資過(guò)千萬(wàn)的Pebble、傳聞中的iWatch等等

google glass_百度百科

Pebble: E-Paper Watch for iPhone and Android by Pebble Technology

CES2013新品預(yù)覽----Pebble 智能手表

http://v.youku.com/v_show/id_XNTAwOTE1NTEy.html

Pebble視頻來(lái)一個(gè),官方購(gòu)買(mǎi)149刀(估計(jì)無(wú)法支持中文字體吧,所以讀通知時(shí)就。。.-_-‘)

-----------切糕線(xiàn)----------

上面看著夠亂的,再總結(jié)一下吧,如下:

Web端及桌面端:

平面化

2x精細(xì)化

通欄化

動(dòng)效化

大幅圖片制造視覺(jué)效果

響應(yīng)式設(shè)計(jì)

移動(dòng)端:

更豐富的導(dǎo)航設(shè)計(jì)

Native化

擬物化

Android為王

APP集群化(平臺(tái)化)

工業(yè)設(shè)計(jì)

edge to edge(無(wú)邊框化)

差異化

人性化

軟硬一體化

穿戴式產(chǎn)品

分享本文至:

日歷

鏈接

個(gè)人資料

存檔