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

原文：333cn.com  

如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，   請點(diǎn)這里　

　　時(shí)光飛逝，轉(zhuǎn)眼到了2014年，那么在2014年界面設(shè)計(jì)將會(huì)有怎樣的發(fā)展與變革呢？我試圖預(yù)測一下。交互/界面設(shè)計(jì)伴隨移動(dòng)互聯(lián)網(wǎng)一直保持著告訴的發(fā)展，每一年，都有新的東西出現(xiàn)，真令人振奮。

1.應(yīng)用主題化

　　上一代iPhone的硬件，色彩選擇非常審慎，依然遵循iPhone傳統(tǒng)的黑白。而去年5C的發(fā)布，宣告了蘋果的一種新選擇，他們在iPhone采用了類似iPod一般的鮮活色彩，這在iPhone設(shè)備配色上，可不常見。

　　經(jīng)驗(yàn)設(shè)備的色彩豐富了，那這對(duì)于應(yīng)用設(shè)計(jì)又有什么影響呢？迄今為止，還沒有設(shè)計(jì)師針對(duì)5C的不同顏色，為一款應(yīng)用設(shè)計(jì)不同的主題。過去只有黑白，現(xiàn)在一下有了綠、藍(lán)、黃、紅，設(shè)計(jì)師完全可以針對(duì)不同的配色，設(shè)計(jì)出不同的應(yīng)用色彩主題，這是個(gè)很好的切入點(diǎn)，能夠?yàn)橛脩舸蛟斐鰺o縫式的用戶體驗(yàn)。

　　偉大的設(shè)計(jì)是隱形的，蘋果在iOS及其體系中，一直努力的打造一種“無形的、但是又不可缺少、日常使用的”用戶體驗(yàn)，第三方應(yīng)用打造的用戶體驗(yàn)往往卻不是這樣，第三方應(yīng)用總是需要用戶一直與其交互，而毫無疑問，無形的用戶體驗(yàn)是一種趨勢。第三方應(yīng)用也同樣應(yīng)該遵循這一理念。

　　在Dribbble上，我們很少可以看到多彩的界面設(shè)計(jì)，往往是黑白主導(dǎo)。但是各位不妨想想，一些具有購買力，買的起5S的用戶，卻買了5C，這是為什么？因?yàn)樗麄冏非竽欠N鮮活的色彩感與年輕化的時(shí)尚感。如果你手持一款騷藍(lán)的5C，里面的界面設(shè)計(jì)卻是枯燥的黑白色調(diào)，你還會(huì)感到有趣嗎？

　　應(yīng)用主題化能夠讓應(yīng)用更好的適合iPhone這個(gè)微生態(tài)系統(tǒng)，達(dá)成更貼心的用戶體驗(yàn)。而目前，卻很少有人注意到這一點(diǎn)。

　　兩個(gè)在這方面做得還不錯(cuò)的應(yīng)用是Fantastical和Tweetbot 3.0。很多應(yīng)用注意到了為Retina屏而升級(jí)，這種根據(jù)硬件而升級(jí)界面的理念還不錯(cuò)，但是卻鮮有應(yīng)用為了適配設(shè)備色彩而升級(jí)。而且Fantastical和Tweetbot 3.0只有兩種配色方案：深色和淺色。

　　今年希望能夠看到變化，希望能看到設(shè)計(jì)師的作品越來越多彩，能夠根據(jù)硬件設(shè)備的配色來調(diào)整應(yīng)用界面的配色，從而達(dá)到更適配、更靈活的用戶體驗(yàn)。

2.色彩將凸顯其功能性

　　隨著界面設(shè)計(jì)的發(fā)展，整體的設(shè)計(jì)風(fēng)格正在向極簡的方向前進(jìn)。越來越要求設(shè)計(jì)基礎(chǔ)，這時(shí)候，色彩站出來了。

　　在設(shè)計(jì)中，色彩的心理學(xué)作用經(jīng)常被提及，但是鮮有設(shè)計(jì)師去認(rèn)真研究這玩意兒。好看是他們對(duì)色彩的唯一要求。然而，我們每天都需要接觸應(yīng)用，應(yīng)用的色彩毫無疑問的會(huì)對(duì)我們的體驗(yàn)造成影響。

　　USA Today的重設(shè)計(jì)令人驚艷。色彩承載更多的功能，不同的色彩代表不同的新聞種類，提高報(bào)紙的可讀性，減少用戶的認(rèn)知負(fù)載。

　　紙媒已經(jīng)開始行動(dòng)，界面設(shè)計(jì)同樣需要形同。當(dāng)我們邁過擬物設(shè)計(jì)年代，不再沉溺于元素的寫實(shí)化時(shí)，我們必須把目光轉(zhuǎn)移到色彩上面去。極簡設(shè)計(jì)缺乏具體的實(shí)物聯(lián)系，在隱喻上也不及擬物設(shè)計(jì)，但是我們可以通過色彩，來提高界面的可用性與用戶操作效率。Mailbox和Shake在這方面做得就很棒。（上圖Mailbox)

　　Mailbox利用顏色來暗示郵件的狀態(tài)。歸檔是綠色，刪除是紅三色，添加提醒是黃色，棕色是制定列表。而紅、綠、藍(lán)這三種顏色的使用非常符合人們的日常認(rèn)知——紅綠燈。

　　而Elevatr采用了另外一種方式，Elevatr是一款效率應(yīng)用，能夠幫助你規(guī)劃工作，提出理念和目標(biāo)，以便日常提醒。在Elevatr中有5中不同的顏色。從淡藍(lán)色到橙色，非常簡單，而且步驟很明晰，從理念到市場推廣到產(chǎn)品到商業(yè)模式再到執(zhí)行，面面俱到。(下圖Elvatr)

　　隨著界面的不斷簡化，色彩將承載一部分功能性，讓用戶更有效率的工作。

3.應(yīng)用的深度與層次

　　隨著iOS7的變革——視覺上的扁平化暫且不談——引發(fā)了一種層次感的變革，第三方應(yīng)用應(yīng)該遵循這一點(diǎn)。

　　屏幕往往是平面的，這其中的界面往往很難體現(xiàn)層級(jí)感。但是通過一些小技巧、小暗示，可以打造出層次感。

4.視差

　　很多人認(rèn)為這只不過是小花招，不過我認(rèn)為視差效果很不錯(cuò)，為界面添加了更多的可能性和趣味性。

　　第三條是給界面添加一種視覺層級(jí)感，而視差卻能為這些層級(jí)添加新式交互方式。倘若兩者結(jié)合，真是潛力無窮

　　Hatch為什么精品？除了有神級(jí)設(shè)計(jì)師David Lanham的鼎立相助，層級(jí)效果+視差效果的雙重配合打造了一種的沉浸式用戶體驗(yàn)。

　　游戲App Store要12元，但是很值，各位不妨下載下來研究一下David Lanham的設(shè)計(jì)，和整體的效果。

　　網(wǎng)頁設(shè)計(jì)的案例是Medium，在一些文章中會(huì)有圖像，當(dāng)你滾動(dòng)時(shí)，圖像會(huì)變得越來越模糊，

　　已經(jīng)到了2014，很多網(wǎng)頁都采用了視差滾動(dòng)效果，但是移動(dòng)UI中并不常見。充分發(fā)掘你的想象與潛力，嘗試一下。

　　最明顯的例子便是iOS的主屏幕，除了上下左右的“X-Y軸變化”，還提供了一種偽3D的感覺，通過動(dòng)效，讓打開文件夾和應(yīng)用的感覺像是“Z軸移動(dòng)”

　　如果你仔細(xì)觀察主屏幕，你會(huì)發(fā)現(xiàn)，3個(gè)層面是可以Z軸移動(dòng)的，壁紙界面、文件夾和應(yīng)用。

　　這只是3D層級(jí)的一個(gè)小小應(yīng)用，還有更多的可能性有待探索，至今我尚未看到有應(yīng)用利用這一特性，但是我估計(jì)，這是個(gè)很好的挖掘點(diǎn)。

5.模糊，更多的模糊

　　無需過多解釋，越來越多的界面設(shè)計(jì)采用了模糊背景。這是一種符合邏輯且體驗(yàn)自然的設(shè)計(jì)解決方案，能夠保持界面簡約，同時(shí)保持元素的層級(jí)感，應(yīng)該也是iOS7的初衷吧。

　　Rdio在這方面比iOS7先行一步。漂亮的專輯封面模糊為背景，顯示播放列表，既能體現(xiàn)美學(xué)造詣，又能體現(xiàn)實(shí)際功能感。

　　很多設(shè)計(jì)師只是為了模糊而模糊，卻沒有考慮到模糊對(duì)于層級(jí)感塑造的重要性，這一點(diǎn)值得注意。

　　隨著CSS3的深入學(xué)習(xí)，相信模糊效果會(huì)更容易打造。

6.導(dǎo)航系統(tǒng)的進(jìn)一步實(shí)驗(yàn)

Navicon式導(dǎo)航

　　側(cè)拉菜單導(dǎo)航？頂部固定導(dǎo)航？Navicon導(dǎo)航？

　　iOS7對(duì)于界面設(shè)計(jì)的沖擊可不止是扁平化，想想上文提到的層級(jí)感、模糊效果、視差，這些都可以作為導(dǎo)航的輔助手段。未來的趨勢是沒有導(dǎo)航，自然交互。諸君可盡情思考，如何利用界面效果更自然的引導(dǎo)用戶，而不是利用文本、標(biāo)簽、圖標(biāo)來導(dǎo)航。

7.動(dòng)效/轉(zhuǎn)換效果的進(jìn)一步發(fā)展

　　除了干凈、簡約，界面還需要能夠流暢運(yùn)轉(zhuǎn)，切換自然。

　　推薦個(gè)在這方面做得不錯(cuò)的應(yīng)用：Metrics應(yīng)用，Squarespace出品，非常的簡約，而轉(zhuǎn)換效果異常的流暢。

　　很難用語言去描述，各位不妨下載一下，觀察一下。這種效果能帶來愉悅的用戶體驗(yàn)。

　　而CSS3在這方面也功能強(qiáng)大，網(wǎng)頁設(shè)計(jì)中的動(dòng)效相信會(huì)越來越多。

8.注重細(xì)節(jié)

　　小細(xì)節(jié)關(guān)乎成敗，交互設(shè)計(jì)的小細(xì)節(jié)會(huì)產(chǎn)生蝴蝶效應(yīng)，影響用戶的使用體驗(yàn)。用戶的品味越來越高了，界面不但要好看、能用，而且還要有效、有趣、有意思。

　　比方說Medium這個(gè)網(wǎng)站，你可能會(huì)忽略一個(gè)小細(xì)節(jié)，在文章標(biāo)題的后面，會(huì)給出文章閱讀所需大致時(shí)間，比方說“4分鐘閱讀”，正是眾多這樣的小細(xì)節(jié)，打造了Medium的完美閱讀體驗(yàn)。

　　還有一個(gè)是iA.net。在閱讀他們的博客時(shí)，滑動(dòng)欄會(huì)彈出氣泡，提示閱讀完本文還需多少時(shí)間。

　　iA和Medium做的都是小細(xì)節(jié)，但是對(duì)于閱讀體驗(yàn)來說，真的是大優(yōu)化。如果你時(shí)間不夠充裕，你又不知道讀完本文需要多久時(shí)，這些小細(xì)節(jié)就很有用。

　　閱讀細(xì)節(jié)只不過是眾多細(xì)節(jié)的一類，如果你能更多的思考用戶需求，更細(xì)膩的觀察界面設(shè)計(jì)的目的，你會(huì)找到很多可以添加的小細(xì)節(jié)。更細(xì)膩的體驗(yàn)，由你來創(chuàng)造。

9.Snapchat引領(lǐng)的嶄新內(nèi)容模式——閱后即焚

　　往事不堪回首，翻開你的QQ空間、人人、豆瓣，看看幾年前的照片和博文，恨不得鉆到墻眼里面去。于是你果斷點(diǎn)擊了刪除，避免讓這些黑歷史被人發(fā)現(xiàn)。

　　但是有用嗎？一些工具還是能夠查看之前的頁面存檔。

10.傳感器設(shè)計(jì)

　　越來越多的硬件設(shè)備加入了傳感器，不充分利用起來可真是浪費(fèi)。

　　5S的A7芯片導(dǎo)致了手機(jī)計(jì)算功能的躍進(jìn)，而且能與傳感器更好的結(jié)合。

　　最出名的可能是Moves，告訴你每天的活動(dòng)量。讓你的日常生活充滿了故事性，提供分析。通過分析，你可以分析自己的每一天，然后作出調(diào)整，改善健康。

　　而智能手表也參與了進(jìn)來，更多的傳感器整合入其中，能夠閱讀手機(jī)上的信息。

　　可穿戴設(shè)備這一熱點(diǎn)趨勢，將使得更多的設(shè)計(jì)師關(guān)注和傳感器有關(guān)的設(shè)計(jì)。

　　誰沒有青蔥歲月，但是人都會(huì)成長，審視過去會(huì)覺得很尷尬。傳統(tǒng)的內(nèi)容模式未免有些不合時(shí)宜了。

　　而Snapchat開啟了一種新的內(nèi)容模式，理念很簡約：拍照，加注釋，限定時(shí)間，發(fā)布。超過限定時(shí)間，照片就自動(dòng)刪除了。你那些賤朋友再也黑不到你的黑歷史，再也無法再網(wǎng)上公開黑你了！

　　而另外一種是Peek應(yīng)用，和Snapchat相比，更注重文本信息的隱私保護(hù)，同樣的閱后即焚。

11.專用頁面

　　我自己也不知道這種趨勢是怎么來的，但是這個(gè)我頗為喜歡。這個(gè)理念是，當(dāng)網(wǎng)站擁有一些不錯(cuò)的優(yōu)質(zhì)內(nèi)容時(shí)，它不會(huì)按照傳統(tǒng)的方式發(fā)表。而是專門給這些內(nèi)容設(shè)計(jì)一個(gè)頁面，專門擺放此類內(nèi)容。

　　Snowfall,Ny Times,SB Nation都采用了這種模式，有興趣可以看看SB Nation2013的年度專題頁。

　　這是一種很有趣的實(shí)驗(yàn)，能夠打造有特點(diǎn)的故事，能夠持續(xù)搜集某一類信息。而且整個(gè)頁面還從屬于網(wǎng)站。

12.瀏覽器與系統(tǒng)的進(jìn)一步整合

　　OS X Mavericks中再度提倡了一種老式理念，但是采用了新的執(zhí)行方法。就是能夠通過Safari推送網(wǎng)站的內(nèi)容更新通知。一旦新內(nèi)容發(fā)布時(shí)，用戶就能接受到通知。

　　我每天都看的網(wǎng)站有兩個(gè)：9to5 Mac和NY Time。而現(xiàn)在只需要通過小Safari對(duì)話框提示，就能接受信息通知。非常便捷。

　　其實(shí)沒什么特別的，和RSS閱讀器差不多，很高興在系統(tǒng)級(jí)界面中看到這點(diǎn)改動(dòng)，確實(shí)優(yōu)化了很大一部分人的使用體驗(yàn)。

13.產(chǎn)品配合應(yīng)用

　　你發(fā)現(xiàn)沒有，現(xiàn)在但凡是有點(diǎn)檔次的公司，推出產(chǎn)品時(shí)，都會(huì)相應(yīng)的推出應(yīng)用。

　　我相信這個(gè)趨勢會(huì)在2014年持續(xù)下去。

　　當(dāng)然，也有反其道行之的，推出產(chǎn)品以配合固有的應(yīng)用。比如說FiftyThree的推出的Pencil，就是為了配合Paper 應(yīng)用。

　　硬件結(jié)合軟件，整合出更美好的使用體驗(yàn)。本來就應(yīng)該這樣。

　　不過目前我看到推出產(chǎn)品以配合應(yīng)用的只有FiftyThree出的Pencil產(chǎn)品，這是個(gè)熱點(diǎn)，不容錯(cuò)過。

14.完完全全的體驗(yàn) 

　　綜上所述，不管是技術(shù)、理念、交互設(shè)計(jì)、產(chǎn)品設(shè)計(jì)，其實(shí)都是為了用戶體驗(yàn)而量身打造。

　　如果希望讓他們的硬件隱形，但用戶依然可以與之交互。而Dieter Rams也希望能夠打造隱形的設(shè)計(jì)。

　　過去的十年里，一切均是圍繞體驗(yàn)展開。沉浸式、無干擾、隱形，一直是這幾年來體驗(yàn)設(shè)計(jì)的關(guān)鍵詞。

　　所以，2014年界面設(shè)計(jì)的終極趨勢是——圍繞用戶體驗(yàn)而展開的設(shè)計(jì)。