手机国产精品一区二区,另类第一页,亚欧在线,日韩一国产极品99热在线播放69_国产美女久久精品香蕉欧美_亚州中文无码aⅤ在线_免费国产v片在线

2014年界面設(shè)計的14個趨勢

2014-2-3    藍藍設(shè)計的小編

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

原文:333cn.com  

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

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


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

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

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

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

  在Dribbble上,我們很少可以看到多彩的界面設(shè)計,往往是黑白主導(dǎo)。但是各位不妨想想,一些具有購買力,買的起5S的用戶,卻買了5C,這是為什么?因為他們追求那種鮮活的色彩感與年輕化的時尚感。如果你手持一款騷藍的5C,里面的界面設(shè)計卻是枯燥的黑白色調(diào),你還會感到有趣嗎?

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

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

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

2.色彩將凸顯其功能性

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

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

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

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

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

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

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

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

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

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

4.視差

  很多人認為這只不過是小花招,不過我認為視差效果很不錯,為界面添加了更多的可能性和趣味性。

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

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

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

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

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

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

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

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

5.模糊,更多的模糊

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

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

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

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

6.導(dǎo)航系統(tǒng)的進一步實驗


Navicon式導(dǎo)航

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

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

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

passit-final.gif


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

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

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

  而CSS3在這方面也功能強大,網(wǎng)頁設(shè)計中的動效相信會越來越多。

8.注重細節(jié)

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

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

  還有一個是iA.net。在閱讀他們的博客時,滑動欄會彈出氣泡,提示閱讀完本文還需多少時間。


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

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

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

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

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

10.傳感器設(shè)計

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

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

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

  而智能手表也參與了進來,更多的傳感器整合入其中,能夠閱讀手機上的信息。

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

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

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

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

11.專用頁面

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

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

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

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

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

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

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

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

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

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

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

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

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

14.完完全全的體驗 

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

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

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

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

分享本文至:

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.88yangsc.com

存檔