藍(lán)藍(lán)設(shè)計(jì)( m.sillybuy.com )是一家專(zhuān)注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(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ù)

來(lái)源：http://www.51design.com/index.phpapp=news&mod=Index&act=newsDetail&id=870

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

2014年，我們制作網(wǎng)頁(yè)時(shí)遇到了不少新東西——無(wú)代碼設(shè)計(jì)平臺(tái)，視差效果，單頁(yè)網(wǎng)站等等。隨著技術(shù)與設(shè)計(jì)理念的演進(jìn)，2015年，網(wǎng)頁(yè)制作的設(shè)計(jì)趨勢(shì)是繼承去年還是會(huì)迎來(lái)革新呢？



1.可調(diào)整的字體

從2006年開(kāi)始，這種趨勢(shì)就已經(jīng)顯現(xiàn)了，只是可能設(shè)計(jì)師們只是適應(yīng)得比較慢。網(wǎng)頁(yè)上的字體和印刷上的字體非常不同，2015年，我們終于可以完全拋棄那些小小的、堆在一起的文本。網(wǎng)頁(yè)上，影響文本可讀性的因素有：

•     字體大小
•     文本框?qū)挾?/li>
•     行高

研究表明，更大的字體會(huì)增強(qiáng)網(wǎng)頁(yè)易讀性。而隨著響應(yīng)式設(shè)計(jì)的趨勢(shì)，設(shè)計(jì)師已經(jīng)開(kāi)始做響應(yīng)式字體的設(shè)計(jì)。這回讓文字無(wú)論在什么界面上都會(huì)有很好的閱讀效果。



2.網(wǎng)頁(yè)代碼式微

以往，網(wǎng)頁(yè)制作的分工是由兩個(gè)界限分明的部分構(gòu)成的：設(shè)計(jì)師做外觀設(shè)計(jì)，工程師編寫(xiě)代碼讓它工作。隨著設(shè)計(jì)工具變得越來(lái)越智能，這種分工正在改變。



如今，設(shè)計(jì)師不用編寫(xiě)代碼就可以制作網(wǎng)頁(yè)，利用平面設(shè)計(jì)軟件的強(qiáng)大功能以及輸出W3C的代碼。



技術(shù)的進(jìn)步帶來(lái)了巨大改變，其中之一就是讓設(shè)計(jì)師制作網(wǎng)頁(yè)的門(mén)檻降低，可以讓設(shè)計(jì)師為客戶設(shè)計(jì)更現(xiàn)代、專(zhuān)業(yè)的網(wǎng)站。當(dāng)然，優(yōu)秀的工程師并不會(huì)消失，只是他們會(huì)從前端退居后端，為前端設(shè)計(jì)品質(zhì)的體現(xiàn)提供保障。



3.響應(yīng)式設(shè)計(jì)的進(jìn)化

幾年前，響應(yīng)式設(shè)計(jì)還只限于電腦、平板和智能手機(jī)，而現(xiàn)在隨著智能手表、電視和其他智能家居的發(fā)展，響應(yīng)式設(shè)計(jì)涉及的范圍越來(lái)越大。盡管每一種平臺(tái)都有獨(dú)特性，但平板和智能手機(jī)就有著相似的交互系統(tǒng)，文本大小也差不多，分析起來(lái)比較方便。



但是說(shuō)到智能手表這種——它們有著迥然不同的界面，評(píng)估的系統(tǒng)也完全不同，那么設(shè)計(jì)也要重新考慮。用智能手機(jī)或電視的思維去想手表的界面設(shè)計(jì)是不現(xiàn)實(shí)的。



對(duì)于這種新問(wèn)題的解決還只是剛剛起步，在2015年，智能設(shè)備的市場(chǎng)需求會(huì)讓設(shè)計(jì)師去不斷適應(yīng)技術(shù)的演進(jìn)。



4.扁平化設(shè)計(jì)無(wú)處不在

網(wǎng)絡(luò)產(chǎn)業(yè)的幾大巨頭都在引導(dǎo)著扁平化設(shè)計(jì)的趨勢(shì)——微軟的界面、谷歌的Material Design、蘋(píng)果審美的新趨向，等等。



盡管有說(shuō)法是對(duì)扁平化設(shè)計(jì)的討論只在界面設(shè)計(jì)的范疇，但這的確是網(wǎng)頁(yè)設(shè)計(jì)的技術(shù)趨勢(shì)。這關(guān)乎我們消費(fèi)網(wǎng)頁(yè)文本的方式，關(guān)乎網(wǎng)頁(yè)制作背后的技術(shù)。扁平化設(shè)計(jì)遵循著極簡(jiǎn)的設(shè)計(jì)原則，讓受眾可以更容易、更精煉、更快捷得讀到網(wǎng)站的核心內(nèi)容。



扁平化設(shè)計(jì)不僅符合審美潮流，更利于功能的完善，讓受眾能集中精力閱讀內(nèi)容。



5.圖越大越好

越來(lái)越大的不僅是文字，圖片也一樣。



2015年，圖片以新的形式占據(jù)了核心位置。技術(shù)適應(yīng)了響應(yīng)式設(shè)計(jì)調(diào)整圖片大小的潮流，能提取圖片的主要色彩作為背景，然后讓圖片更少地占據(jù)服務(wù)器容量。這也就意味著，使用大圖片的設(shè)計(jì)師會(huì)越來(lái)越多！



6.新的滾動(dòng)動(dòng)畫(huà)、視差效應(yīng)和“微交互”

這是讓人印象深刻的一項(xiàng)革新——視差滾動(dòng)動(dòng)畫(huà)（parallax scrolling animation）。



我們其實(shí)在每時(shí)每刻都可以看到這樣的現(xiàn)象，比如在蘋(píng)果和谷歌的產(chǎn)品主頁(yè)上。這是因?yàn)橐暡顫L動(dòng)動(dòng)畫(huà)可以提高70%的效率！



用“滾動(dòng)”而不是“點(diǎn)擊”去設(shè)計(jì)網(wǎng)頁(yè)，有很多好處——較小的裝載量，更流暢的閱讀轉(zhuǎn)接，更多的信息流動(dòng)。



7.網(wǎng)頁(yè)信息圖的春天

作為視覺(jué)動(dòng)物，我們?cè)陂喿x圖像語(yǔ)言時(shí)能更有效地汲取信息。信息圖能地傳遞更多的信息。那么一種新的趨勢(shì)就出現(xiàn)了——網(wǎng)頁(yè)信息圖！像一般信息圖那樣，網(wǎng)頁(yè)信息圖也涵蓋了很多的信息，而更增加了交互性。這會(huì)強(qiáng)化傳達(dá)效果。2015年，你會(huì)看到越來(lái)越多的設(shè)計(jì)師會(huì)去做網(wǎng)頁(yè)信息圖，并把這種圖變成網(wǎng)頁(yè)必要的一部分。

Paul Boag預(yù)言：在未來(lái)，我們熟悉的固定工作模式將會(huì)發(fā)生改變。

身處互聯(lián)網(wǎng)行業(yè)，其他行業(yè)在數(shù)字化方面的失敗常令我們感到震驚。例如傳統(tǒng)音像店的衰敗，柯達(dá)公司的沒(méi)落以及傳統(tǒng)報(bào)紙所面臨的諸多挑戰(zhàn)。

但對(duì)于我們置身其中的這個(gè)行業(yè)，我們意識(shí)到正在發(fā)生的變革了嗎？萬(wàn)維網(wǎng)誕生已經(jīng)25年了。我們的思維是否也有僵化的危險(xiǎn)？是否我們也開(kāi)始對(duì)變化視而不見(jiàn)，就如同其他行業(yè)中的人一樣？

我知道這有點(diǎn)危言聳聽(tīng)，我的本意并非如此。我們的行業(yè)當(dāng)然不會(huì)憑空消失。因?yàn)閿?shù)字技術(shù)的興起，今天我們已經(jīng)很少見(jiàn)到走街串巷的推銷(xiāo)員和兜售百科全書(shū)的人了。但網(wǎng)絡(luò)產(chǎn)業(yè)暫時(shí)還沒(méi)有這種迫在眉睫的危險(xiǎn)。

但卻有一些新趨勢(shì)值得我們特別注意。這些趨勢(shì)或許不會(huì)讓我們丟掉飯碗，但它們無(wú)疑會(huì)令我們所熟知的工作模式發(fā)生重大的改變。

我要講的這四種趨勢(shì)分別是：

• 自服務(wù)團(tuán)隊(duì)的興起。
• 代碼自動(dòng)化。
• 軟件取代人工服務(wù)。
• 網(wǎng)站的衰落。

01. 自服務(wù)團(tuán)隊(duì)興起。

近兩年，商業(yè)機(jī)構(gòu)對(duì)網(wǎng)絡(luò)的理解發(fā)生了很大的轉(zhuǎn)變?；ヂ?lián)網(wǎng)曾一度只被看做是另一個(gè)銷(xiāo)售渠道，現(xiàn)在卻成了許多企業(yè)能否成功的關(guān)鍵所在。

而且很多企業(yè)都認(rèn)為把如此事關(guān)重大的業(yè)務(wù)交給外部供應(yīng)商處理并不明智。因此他們紛紛開(kāi)始打造屬于自己的內(nèi)部團(tuán)隊(duì)。這種做法是合理的，而且從長(zhǎng)遠(yuǎn)來(lái)看，也能為企業(yè)節(jié)約不少成本。

隨著上游市場(chǎng)機(jī)會(huì)的減少和設(shè)計(jì)公司之間競(jìng)爭(zhēng)的加劇，這種趨勢(shì)對(duì)網(wǎng)頁(yè)設(shè)計(jì)圈造成的影響已經(jīng)開(kāi)始顯現(xiàn)。一些知名的設(shè)計(jì)公司，如Adaptive Path和Mark Boulton Design已經(jīng)將自己出售給了曾經(jīng)的客戶。也就是說(shuō)他們已經(jīng)成功地轉(zhuǎn)型成了內(nèi)部團(tuán)隊(duì)。其他一些公司也被迫縮小規(guī)模。

當(dāng)然沒(méi)有哪個(gè)內(nèi)部團(tuán)隊(duì)能承擔(dān)所有的工作。所以專(zhuān)業(yè)型的獨(dú)立設(shè)計(jì)師依然有活兒干。但專(zhuān)業(yè)型的設(shè)計(jì)公司還能存在多久就不太好說(shuō)了。相反，專(zhuān)業(yè)設(shè)計(jì)師與內(nèi)部團(tuán)隊(duì)單獨(dú)簽約，從事短期項(xiàng)目的工作模式可能會(huì)日漸流行。

這意味著目前在高端設(shè)計(jì)機(jī)構(gòu)就職的設(shè)計(jì)師可能需要從長(zhǎng)遠(yuǎn)角度考慮一下自身的處境了。未來(lái)幾年可能會(huì)有很多設(shè)計(jì)機(jī)構(gòu)會(huì)從市場(chǎng)上退出。在這些機(jī)構(gòu)就職的設(shè)計(jì)師將會(huì)面臨選擇：是加入內(nèi)部團(tuán)隊(duì)繼續(xù)工作還是成為獨(dú)立設(shè)計(jì)師，如果是后者，你需要在專(zhuān)業(yè)方面變得更精深。

但受到影響的絕不僅限于上游市場(chǎng)。

02. 軟件取代人工服務(wù)。

“軟件即服務(wù)”的概念對(duì)所有行業(yè)的低端業(yè)務(wù)都是一個(gè)威脅。例如，像FreeAgent這樣的軟件正在替代傳統(tǒng)的記賬人員。從招聘到客戶管理，SaaS（軟件即服務(wù)）的模式也在沖擊著傳統(tǒng)商業(yè)模式的各個(gè)環(huán)節(jié)。

遺憾的是，網(wǎng)頁(yè)設(shè)計(jì)也在受沖擊之列。從前，一些自由職業(yè)的網(wǎng)頁(yè)設(shè)計(jì)師還能靠建設(shè)低端網(wǎng)站賺取不錯(cuò)的收入?，F(xiàn)在，人們完全可以利用Squarespace等軟件自助建站，自由網(wǎng)頁(yè)設(shè)計(jì)師的日子已經(jīng)不像從前那么好過(guò)了。

這一趨勢(shì)帶來(lái)的改變當(dāng)然不止“自助建網(wǎng)站”這么簡(jiǎn)單?，F(xiàn)在，為大范圍的客戶提供內(nèi)容完全一樣的管理系統(tǒng)已經(jīng)不可想象了。對(duì)很多開(kāi)發(fā)者來(lái)說(shuō)，曾幾何時(shí)這還是一個(gè)大產(chǎn)業(yè)呢。電子商務(wù)平臺(tái)的情況也一樣。Shopify的出現(xiàn)意味著幾乎所有在線交易網(wǎng)站都使用同一種購(gòu)物車(chē)模式的時(shí)代已經(jīng)一去不返了。

這種趨勢(shì)使低端網(wǎng)頁(yè)設(shè)計(jì)師被迫向上游移動(dòng)，而與此同時(shí)，高端的設(shè)計(jì)機(jī)構(gòu)迫于競(jìng)爭(zhēng)壓力也在降低價(jià)格。于是中層設(shè)計(jì)師群體的生存空間就會(huì)受到擠壓。

以前需要人工才能完成的許多任務(wù)，未來(lái)很可能被軟件取代。即便是在設(shè)計(jì)行業(yè)，人工所占的比重也比從前少多了。

03. 代碼自動(dòng)化。

過(guò)去，程序員只要能寫(xiě)出不錯(cuò)的HTML和CSS就足夠了?，F(xiàn)在情況已經(jīng)變了。不光是因?yàn)樘嗳硕紩?huì)這個(gè)，還因?yàn)榫幋a變得比以前簡(jiǎn)單。
Macaw和Adobe Reflow這樣的軟件已經(jīng)能讓設(shè)計(jì)師勝任大部分以往需要前端編程員來(lái)進(jìn)行的工作。我知道你會(huì)想---這些軟件寫(xiě)出的CSS糟透了。你說(shuō)的沒(méi)錯(cuò)，但這些軟件起碼預(yù)示了一個(gè)方向。只要假以時(shí)日，它們就會(huì)越來(lái)越完善。如果有一天人工寫(xiě)HTML和CSS成為一件稀罕事，我也絲毫不會(huì)感到驚奇。

或許這些工具軟件寫(xiě)出的代碼永遠(yuǎn)不如人類(lèi)寫(xiě)的那么好，但如果能達(dá)到“能用”的級(jí)別就已足夠。只要它給人們的回報(bào)超過(guò)投資就行了。對(duì)很多需要“快速投入市場(chǎng)”的代碼來(lái)說(shuō)，“合格”的自動(dòng)代碼顯然比費(fèi)時(shí)費(fèi)力的人工代碼要?jiǎng)澦恪?/p>

就算這一天不會(huì)到來(lái)，這些軟件也已經(jīng)開(kāi)始發(fā)揮影響。至少現(xiàn)在建立原型產(chǎn)品（working prototypes）比以前省力多了。在以前，這可能需要一個(gè)前端設(shè)計(jì)師忙上幾天或幾周才能完成。

你盡可以對(duì)這些軟件嗤之以鼻，因?yàn)樗麄儫o(wú)法與一個(gè)訓(xùn)練有素的程序員相提并論。但別忘了，當(dāng)桌面出版系統(tǒng)出現(xiàn)的時(shí)候，平面設(shè)計(jì)師也是這么說(shuō)的。桌面出版的確沒(méi)有取代平面設(shè)計(jì)師，但確實(shí)也減少了平面設(shè)計(jì)師的工作機(jī)會(huì)。

作為設(shè)計(jì)師，你現(xiàn)在或許還有理由洋洋自得。畢竟不管網(wǎng)站的編程如何，人們無(wú)論如何還是需要你來(lái)設(shè)計(jì)網(wǎng)站的。但從長(zhǎng)遠(yuǎn)看，情況也許沒(méi)你想的那么美妙。

04. 網(wǎng)站的衰落。

你可曾注意到，網(wǎng)站的地位正在逐漸下降？舉例來(lái)說(shuō)，現(xiàn)在你要看一場(chǎng)電影。你不知道哪家影院有你想看的那部電影。

在過(guò)去，或許你會(huì)依次訪問(wèn)不同影院的官網(wǎng)，看那部電影是否正在上映。每個(gè)網(wǎng)站背后都有一群忙碌的網(wǎng)頁(yè)設(shè)計(jì)師，所以每個(gè)網(wǎng)站都各不相同。

我敢說(shuō)現(xiàn)在現(xiàn)在你不會(huì)這么費(fèi)事了。很可能你會(huì)下載一個(gè)App,因?yàn)樗狭瞬煌瑏?lái)源的電影放映信息。也可能你會(huì)問(wèn)一下Siri或上谷歌查一下。

使用這些方式，用戶無(wú)需在不同的界面之間轉(zhuǎn)換，而且能獲得更好的使用體驗(yàn)。這些方式的缺點(diǎn)是它們削弱了網(wǎng)頁(yè)設(shè)計(jì)師的地位。

我相信，過(guò)不了多久，只要問(wèn)問(wèn)Siri,它就會(huì)清楚地告訴你何時(shí)何地你想看的那部電影會(huì)上映。當(dāng)一切都可以用聲音操作時(shí)，也就不需要UI界面了。

現(xiàn)在內(nèi)容正從設(shè)計(jì)之中被解放出來(lái)。我們已經(jīng)開(kāi)始利用API來(lái)實(shí)現(xiàn)內(nèi)容在網(wǎng)站和移動(dòng)程序之間的交換了。一些商家也會(huì)優(yōu)先把相關(guān)信息放在Facebook,Yelp或Foursquare上，而不再專(zhuān)門(mén)設(shè)立自己的網(wǎng)站。這種趨勢(shì)在中國(guó)尤為顯著。

不要驚慌！

上面列舉的這些可能的未來(lái)趨勢(shì)也許會(huì)令你感到沮喪。其實(shí)沒(méi)必要。作為一個(gè)在網(wǎng)絡(luò)產(chǎn)業(yè)工作了20多年的人，我可以明確地說(shuō)只要你能適應(yīng)這些趨勢(shì)，一切都沒(méi)問(wèn)題。你的工作會(huì)有一些改變，但你總還不至于無(wú)家可歸。

真正的危險(xiǎn)是你對(duì)即將到來(lái)的變革一無(wú)所知，這樣當(dāng)你被迫轉(zhuǎn)換自己的角色時(shí)，過(guò)程將會(huì)非常痛苦。不管我的預(yù)測(cè)是否準(zhǔn)確，有件事是確定無(wú)疑的---網(wǎng)絡(luò)世界會(huì)持續(xù)演變。查理斯達(dá)爾文早就說(shuō)過(guò)：“留下來(lái)的不是最強(qiáng)壯的物種，也不是最聰明的物種，而是最能適應(yīng)變化的物種。”