隨著2016年到來(lái)，許多新的設(shè)計(jì)趨勢(shì)都漸漸掀開了神秘面紗。網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域總是在不斷變化，新的工具、工作流程、有助于開發(fā)的實(shí)用布局層出不窮。

就目前很難預(yù)測(cè)新一年的潮流風(fēng)向是什么，而且近期的歷史現(xiàn)象表明趨勢(shì)會(huì)像野火一樣燎原。本文對(duì)2015年的趨勢(shì)進(jìn)行了總結(jié)，并有可能持續(xù)至2016年。

　　1.用于UI設(shè)計(jì)的Sketch app

　　Sketch正在迅速取代Photoshop，用于從低保真線框到高保真模型和設(shè)計(jì)圖標(biāo)的所有的UI設(shè)計(jì)任務(wù)。

　　Sketch app是一個(gè)專為web和移動(dòng)設(shè)計(jì)人員制作的Mac應(yīng)用程序。它的功能，靈活性和速度滿足了你對(duì)于一個(gè)輕量級(jí)，易于使用的軟件包的想象。有了這個(gè)app，你就可以專注于創(chuàng)作最佳的設(shè)計(jì)了。

　　它提供了一個(gè)順暢的工作環(huán)境，為任何界面提供工藝化的矢量元素，而且還有你想從Photoshop得到的許多功能，如文本效果和圖層樣式。

　　如果Sketch能夠繼續(xù)提供最佳的UI設(shè)計(jì)體驗(yàn)，那么它在2016年及以后必然還會(huì)繼續(xù)保持輝煌。

　　2.基于瀏覽器的IDE

　　桌面IDE已存在幾十年，從Notepad++到Xcode和visual Studio。IDE通過(guò)提供建議和語(yǔ)法高亮等功能使得我們可以更容易地編寫代碼。在IDE中寫代碼非常簡(jiǎn)單，而且很易于閱讀。

　　但傳統(tǒng)的IDE是作為桌面應(yīng)用程序發(fā)布的。從過(guò)去的幾年里，基于瀏覽器的云IDE發(fā)生了戲劇性變化。除了web瀏覽器，我們不再需要任何軟件，因?yàn)闉g覽器允許設(shè)備操作來(lái)自于任何有互聯(lián)網(wǎng)接入的計(jì)算機(jī)的代碼。

　　云IDE的功能更像是web應(yīng)用程序，你可以保存代碼到你的帳戶進(jìn)行共享或個(gè)人存儲(chǔ)。CodePen是目前最流行的IDE，支持HTML/ CSS/JS，具備像Jade/Haml 和LESS/SCSS一樣自定義的預(yù)處理。

　　CodePen主攻web前端。它可以顯示你最近的創(chuàng)造，并從其他網(wǎng)絡(luò)資源上得到反饋。為惱人的bug建立一個(gè)測(cè)試案例。你還可以從CodePen上為你的項(xiàng)目找到設(shè)計(jì)模式和靈感。

　　3.card layouts(卡片布局)

　　網(wǎng)站的卡片布局在幾年前通過(guò)Pinterest而普及，從此成為了內(nèi)容繁多網(wǎng)頁(yè)的趨勢(shì)。免費(fèi)插件，如jQuery Masonry可用來(lái)模仿這種布局風(fēng)格，它的動(dòng)畫卡片可適應(yīng)不同的高度和寬度。

　　卡片布局最適合用在信息很多卻又希望能被瀏覽的頁(yè)面。Google Now就使用卡片布局來(lái)為它的app做廣告。

　　你可以將卡片式布局看成是很多動(dòng)態(tài)的網(wǎng)格，網(wǎng)格中只呈現(xiàn)最簡(jiǎn)明的重要內(nèi)容，這些內(nèi)容條目組合在一起就形成了基本的列表。在線雜志就是完美的例子，如UGSMAG和The Next Web，就使用了卡片布局來(lái)展示其最新懂得帖子和內(nèi)容。

　　4.自定義的解說(shuō)視頻

　　形狀各異的組織都趨向于自定義解說(shuō)視頻。使用動(dòng)畫，例如Crazy Egg來(lái)制作這些視頻。即使如此，不同的視頻依賴于真正的鏡頭，例如Instagram Direct。

　　解說(shuō)視頻的目的是說(shuō)明產(chǎn)品或服務(wù)是如何工作的。訪問(wèn)者有可能在瀏覽了一系列功能之后，依然不知道如何操作這個(gè)產(chǎn)品。而可視化的視頻則可以在短短幾分鐘的時(shí)間內(nèi)一一說(shuō)明功能，并涵蓋所有重要的內(nèi)容。最關(guān)鍵的是人們喜歡觀看視頻而不怎么喜歡閱讀文章。他們可以很容易地從視頻中明白你想表達(dá)什么。

　　如果你想自己嘗試做一個(gè)自定義的解說(shuō)視頻，那么可以閱讀Udemy課程。這是一個(gè)側(cè)重登陸頁(yè)面設(shè)計(jì)視頻講解的深入學(xué)習(xí)課程。Udemy課程不僅僅說(shuō)明了如何使用動(dòng)畫視頻軟件，它也會(huì)告訴你如何使用視頻來(lái)吸引和隱蔽訪問(wèn)者。

　　5.實(shí)況產(chǎn)品預(yù)覽

　　登陸頁(yè)面設(shè)計(jì)因網(wǎng)絡(luò)速度的提高和瀏覽器功能的擴(kuò)大，而發(fā)生了令人難以置信的改變。我注意到一個(gè)重要趨勢(shì)是，就是主頁(yè)或自定義登陸頁(yè)面增加了實(shí)時(shí)產(chǎn)品預(yù)覽。

　　以Slack的產(chǎn)品頁(yè)面作為例子。一個(gè)視頻演示和矢量圖形覆蓋了它的界面。這些產(chǎn)品預(yù)覽是讓潛在用戶第一眼就知道產(chǎn)品是如何操作的。

　　不只是消息，所有的文件，圖像，PDF文件，文檔和電子表格都可以放到Slack，和你想要分享的任何人共享。你可以添加注釋，標(biāo)注星號(hào)供以后參考，這一切完全都是可以搜索的。

　　6.自動(dòng)化任務(wù)運(yùn)行器

　　前端開發(fā)的世界，隨著一堆針對(duì)網(wǎng)站創(chuàng)新而出現(xiàn)的新的最佳實(shí)踐，發(fā)生了巨大的改變。任務(wù)運(yùn)行器/構(gòu)建系統(tǒng)，例如Gulp和Grunt，替代了以前事先需要大量手動(dòng)去完成的任務(wù)，越來(lái)越被我們廣泛使用。

　　自動(dòng)化是快速周轉(zhuǎn)和高質(zhì)量代碼的命脈。眾所周知，機(jī)器不會(huì)出錯(cuò)，所以自動(dòng)化程度越高，產(chǎn)生的問(wèn)題越少。

　　這些工具基本上運(yùn)行的是JS代碼，可以自動(dòng)化實(shí)現(xiàn)部分工作流程——無(wú)論是自定義的JS代碼還是其他人寫的腳本。

　　7.用于設(shè)計(jì)的協(xié)作工具

　　即時(shí)消息和群聊已經(jīng)出現(xiàn)了十多年。人們喜歡這個(gè)功能，并在今后他們可以繼續(xù)使用此功能。然而，這些資源在傳統(tǒng)上依賴于純文本附加文件的一些功能。

　　但是，我們?cè)谟懻摰氖俏磥?lái)，未來(lái)一個(gè)新出現(xiàn)的趨勢(shì)是，在聊天應(yīng)用程序中共享實(shí)時(shí)設(shè)計(jì)文檔。Notable就是其中一個(gè)例子，創(chuàng)新和注釋可以被分層在文檔的頂部。通過(guò)快速迭代它提供了更好的界面。從草圖到完全編碼的網(wǎng)頁(yè)，Notable讓團(tuán)隊(duì)在設(shè)計(jì)過(guò)程的每一步得到更快的反饋。

　　Slack是當(dāng)下最流行的聊天應(yīng)用程序，支持許多類似的功能。

　　8.響應(yīng)式前端框架

　　前端框架，例如Bootstrap，已經(jīng)存在了相當(dāng)長(zhǎng)的時(shí)間，并將繼續(xù)展現(xiàn)其價(jià)值。響應(yīng)式設(shè)計(jì)，受其成為框架方式的制約，可以成為前端代碼，而不是僅僅只是后端(Django，Laravel，等等)。

　　邁入2016年，我認(rèn)為我們會(huì)閱讀到更多關(guān)于響應(yīng)式前端框架以及它們?cè)趙eb項(xiàng)目中的價(jià)值的內(nèi)容。并且在接下來(lái)的一年時(shí)間里，可能會(huì)發(fā)布很多前端框架的app，比現(xiàn)在的功能更強(qiáng)大。許多設(shè)備正在急切等待Foundation 6以及Bootstrap4公共V1版本的發(fā)布。

　　9.更關(guān)注UX設(shè)計(jì)

　　UX設(shè)計(jì)是通過(guò)改進(jìn)可用性，可訪問(wèn)性，以及用戶和產(chǎn)品之間互動(dòng)產(chǎn)生的愉悅感來(lái)加強(qiáng)用戶滿意度的過(guò)程。

　　用戶體驗(yàn)設(shè)計(jì)領(lǐng)域?qū)㈦S著更多設(shè)計(jì)師和開發(fā)者的關(guān)注而繼續(xù)快速增長(zhǎng)。UI設(shè)計(jì)是UX設(shè)計(jì)的一部分，但不是最終目標(biāo)。UI是手段而不是目的，最終目的是提供一個(gè)夢(mèng)幻般的用戶體驗(yàn)。

　　目前，針對(duì)這些目的的資源有UX Stack Exchange和free UX ebooks。如果你還沒(méi)有涉獵用戶體驗(yàn)，那么現(xiàn)在是學(xué)習(xí)和了解UX原則如何應(yīng)用到所有數(shù)字界面窗口的最佳時(shí)機(jī)。

　　10.支持觸摸的網(wǎng)站功能

　　智能手機(jī)瀏覽器，支持所有站點(diǎn)的觸摸功能，以保持reverse similarity。我們也可以看到更多的插件和自定義元素添至站點(diǎn)，關(guān)注觸摸事件的特定對(duì)象。

　　我們希望網(wǎng)站可以實(shí)現(xiàn)觸摸功能。而且這種網(wǎng)站也會(huì)因?yàn)槠洫?dú)特的功能而提升訪問(wèn)量。如Photoswipe和Dragend.js等內(nèi)置的插件可以處理觸摸屏上的滑動(dòng)和點(diǎn)擊手勢(shì)。web開發(fā)人員不僅要會(huì)構(gòu)建響應(yīng)式網(wǎng)站，還得能構(gòu)建具備觸摸功能的網(wǎng)站。

　　這些插件提供了觸摸功能，但是網(wǎng)站還需要具備其他的手勢(shì)功能。如果你多搜索一下的話，你會(huì)發(fā)現(xiàn)一些真正令人印象深刻的，針對(duì)web的，內(nèi)置的，純粹依靠觸摸事件的功能。

　　這些就是2016年的Web設(shè)計(jì)趨勢(shì)，它們的到來(lái)和發(fā)展將使得構(gòu)建網(wǎng)站變得更容易和更簡(jiǎn)單。