2014年末，總結很(hěn)重要。但(dàn)是總結的文章看多(duō)的總不免要問，明(míng)年會(huì)如何?Well，的确是時(shí)候展望一下未來(lái)了。2014年湧現了許多(duō)令人(rén)印象深刻的網頁設計(jì)趨勢，幽靈按鈕越來(lái)越多(duō)，視(shì)差滾動也已經成熟，單頁設計(jì)也成為(wèi)了諸多(duō)設計(jì)手法的重要載體(tǐ)，而逐漸多(duō)起來(lái)的網頁設計(jì)平台也開(kāi)始造福于設計(jì)師(shī)了!
當然，有(yǒu)的設計(jì)趨勢隻是昙花(huā)一現，但(dàn)是有(yǒu)的則是自然演進的成果。當我們看着《星際迷航》裏進取号飛船(chuán)中科技(jì)感十足的透明(míng)控制(zhì)面闆，以及鋼鐵(tiě)俠的頭盔中的HUD界面，總不免自問，為(wèi)什麽我們的手機UI和(hé)網頁不這麽設計(jì)呢?終于在幾年之後，我們看到了越來(lái)越多(duō)姿态各異的幽靈按鈕，在大(dà)氣磅礴的網頁背景中，閃爍發光。這就設計(jì)的演進，它們在某些(xiē)角落誕生(shēng)，然後在互聯網的推動之下，星火(huǒ)燎原。
我們周遭大(dà)小(xiǎo)各異的屏幕越來(lái)越多(duō)，來(lái)自世界各地的設計(jì)師(shī)大(dà)腦(nǎo)中的想法和(hé)靈感也層出不窮，所以網頁設計(jì)師(shī)不僅要讓設計(jì)兼容越來(lái)越多(duō)的屏幕，也得(de)時(shí)刻了解正在發生(shēng)、正在流行(xíng)的新設計(jì)。
1、更加靈活的排版
随着對內(nèi)容呈現形式要求的不斷提升，用戶和(hé)設計(jì)師(shī)都會(huì)對文字和(hé)內(nèi)容排版提出新的規範。
事實上(shàng)，網頁排版和(hé)傳統的平面排版有(yǒu)着巨大(dà)的差異，而在即将到來(lái)的2015年，你(nǐ)會(huì)發現越來(lái)越多(duō)的傳統網站(zhàn)開(kāi)始轉型，逐漸抛棄小(xiǎo)字體(tǐ)+密集布局設計(jì)。其實這并非什麽新鮮事，早在2006年，網頁設計(jì)界就已經開(kāi)逐漸轉變了，隻是傳統網站(zhàn)很(hěn)難放棄多(duō)年以來(lái)的設計(jì)風格和(hé)規則而已。
有(yǒu)研究表明(míng)，影(yǐng)響網頁可(kě)讀性的主要有(yǒu)3個(gè)因素：
1、字體(tǐ)大(dà)小(xiǎo)
2、列寬度
3、行(xíng)高(gāo)度
而研究表明(míng)，較大(dà)的文本大(dà)小(xiǎo)更加有(yǒu)利于在屏幕上(shàng)閱讀內(nèi)容。網頁設計(jì)師(shī)門(mén)現在已經開(kāi)始提升響應式網頁布局中，字體(tǐ)排版與圖片、整體(tǐ)結構之間(jiān)的關系，以提升閱讀體(tǐ)驗。如何讓文字內(nèi)容哪怕在跨平台的狀況下都始終保持最佳的視(shì)覺效果，是未來(lái)網頁設計(jì)中至關重要的事情。
2、網頁Coding的衰落
其實網頁開(kāi)發分工一直處于一種高(gāo)度分裂的狀态：設計(jì)師(shī)完成網站(zhàn)的視(shì)覺設計(jì)，而前端/程序員則需要将設計(jì)實現出來(lái)。但(dàn)是這一狀況正在逐漸改變，因為(wèi)網頁設計(jì)工具正在變得(de)越來(lái)越強大(dà)，更加智能。
越來(lái)越多(duō)的設計(jì)師(shī)可(kě)以不寫一行(xíng)代碼就創建出網站(zhàn)，利用圖形設計(jì)軟件的新特性和(hé)新功能，設計(jì)師(shī)所創建的網站(zhàn)不僅代碼幹淨漂亮，而且能通(tōng)過W3C的驗證。
這是具有(yǒu)重大(dà)意義的轉變，新工具令網頁開(kāi)發的門(mén)檻逐漸降低(dī)，設計(jì)師(shī)們也能在不觸及複雜技(jì)術(shù)的前提下，獨立創建出現代而專業化的網站(zhàn)。
如此一來(lái)，設計(jì)師(shī)可(kě)以更加專注于設計(jì)，而這些(xiē)無Coding開(kāi)發平台則可(kě)以更加專注于技(jì)術(shù)和(hé)代碼演進，确保所有(yǒu)最新的設計(jì)都能完美呈現。之前從事前端工作(zuò)的開(kāi)發者逐漸過度成為(wèi)Web程序員，而這些(xiē)平台就是他們發光發熱的地方。
3、響應式設計(jì)的進化
在過去的幾年中，設計(jì)響應式的網站(zhàn)的時(shí)候，主要考慮桌面端、平闆和(hé)手機屏幕的适配。但(dàn)是随着智能手表、智能電(diàn)視(shì)和(hé)智能家(jiā)具的蓬勃發展，響應式所需要“響應”的屏幕尺寸範疇再一次得(de)到了擴展。
雖然現在手機和(hé)平闆的交互都已為(wèi)大(dà)衆所熟悉，但(dàn)是為(wèi)之進行(xíng)響應式設計(jì)的時(shí)候依然存在獨特的挑戰，那(nà)就是屏幕尺寸、分辨率的分裂帶來(lái)的适配工作(zuò)量的增加。
即便解決了平闆和(hé)手機上(shàng)的浏覽的問題，你(nǐ)還(hái)得(de)面對新加入的設備。比如在智能手表上(shàng)，網頁浏覽的方式都是截然不同的，你(nǐ)需要為(wèi)之重新思考導航的方式。在手表上(shàng)浏覽手機版的網頁都是一件吃(chī)力的事情，而在TV端浏覽桌面端的網頁的話(huà)，體(tǐ)驗也是災難性的。
這些(xiē)新問題的解決方案可(kě)能還(hái)有(yǒu)待時(shí)間(jiān)來(lái)沉澱，但(dàn)是在2015年底智能設備市場(chǎng)的膨脹，會(huì)促使網頁設計(jì)師(shī)們來(lái)考慮新設計(jì)，以應對技(jì)術(shù)的革新。
4、扁平化設計(jì)會(huì)覆蓋每一個(gè)像素
随着主流廠商在設計(jì)風格上(shàng)走向一緻，扁平化的設計(jì)會(huì)在接下來(lái)的一年中急劇(jù)膨脹。在過去的幾年中，微軟的Metro UI、蘋果的Flat Design和(hé)谷歌(gē)的Material Design 先後選擇了扁平風，使得(de)這一設計(jì)風尚真真正正成為(wèi)了設計(jì)的主流。
盡管現在依然有(yǒu)人(rén)在強調扁平化設計(jì)在UI設計(jì)上(shàng)存在問題，但(dàn)是普遍的認知是，扁平化設計(jì)總體(tǐ)上(shàng)是一門(mén)促進網頁設計(jì)前進的技(jì)術(shù)。
扁平化設計(jì)的發展，主要還(hái)是取決于我們消費網喏內(nèi)容的方式和(hé)屏幕背後 支撐網頁發展的技(jì)術(shù)。扁平化設計(jì)與極簡設計(jì)原則相通(tōng)，而這種設計(jì)可(kě)以明(míng)顯讓網頁更加輕量級，更加易用、快速，更突出內(nèi)容。
扁平化設計(jì)已經不僅僅在審美上(shàng)更具吸引力，它實實在在地令訪客更容易沉浸到內(nèi)容中，無幹擾地同網站(zhàn)進行(xíng)交互。
5、圖片：更大(dà)=更好
不僅網站(zhàn)上(shàng)的文字越來(lái)越大(dà)，圖片也是!
受限于帶寬，之前的網站(zhàn)開(kāi)發者和(hé)設計(jì)師(shī)都需要在網站(zhàn)的圖片上(shàng)精打細算(suàn)，但(dàn)是随着時(shí)間(jiān)的推移，這越來(lái)越不是問題。其結果是，越來(lái)越多(duō)的網站(zhàn)開(kāi)始使用高(gāo)清大(dà)圖素材了。
在2015年，使用高(gāo)清大(dà)圖作(zuò)為(wèi)背景會(huì)成為(wèi)一大(dà)趨勢，相應的，将會(huì)有(yǒu)更多(duō)響應式調整圖片尺寸的技(jì)術(shù)、背景圖片調色工具以及圖片服務器(qì)負載調整工具湧現。
此外，2015年的另外一大(dà)趨勢就是使用大(dà)圖背景。模糊濾鏡和(hé)彩色濾鏡疊加在背景上(shàng)，讓文字無需陰影(yǐng)就可(kě)以“浮”背景之上(shàng)。随着設計(jì)師(shī)越來(lái)越多(duō)地使用大(dà)圖背景來(lái)設計(jì)，你(nǐ)将會(huì)越來(lái)越頻繁地看到這種網站(zhàn)。
6、視(shì)差滾動
也許最明(míng)朗、最令人(rén)印象深刻的網頁設計(jì)趨勢就是視(shì)差滾動了。
在2014年裏，視(shì)差滾動的網頁越來(lái)越多(duō)，甚至蘋果和(hé)Google這樣的企業也在自己的産品頁面上(shàng)使用了視(shì)差滾動的設計(jì)。不言自明(míng)，視(shì)差滾動式設計(jì)确實有(yǒu)效地提高(gāo)了用戶的參與度!
使用滾動替代點擊式導航讓網站(zhàn)交互的活躍度提高(gāo)了好幾個(gè)層次。視(shì)差滾動有(yǒu)效地減少(shǎo)了多(duō)頁面式網站(zhàn)的頁面加載次數(shù)，更重要的是，它使得(de)內(nèi)容和(hé)頁面的過度更加流暢自然，信息源源不斷地呈現，不會(huì)因為(wèi)突然某個(gè)頁面加載不出來(lái)而導緻體(tǐ)驗下降。
7、網頁信息圖的黎明(míng)
人(rén)都是視(shì)覺動物，當數(shù)據以更加圖形化、視(shì)覺化的方式呈現出來(lái)的時(shí)候，我們更容易接受。這也是為(wèi)什麽信息圖會(huì)逐漸普及開(kāi)來(lái)，信息圖正是以這種簡單直觀的方式來(lái)表現內(nèi)容，讓信息的留存度直線提升。正是因此，越來(lái)越多(duō)的網站(zhàn)開(kāi)始使用信息圖式的呈現手法。
而這就是設計(jì)趨勢，我們稱之為(wèi)Webgraphics!它像信息圖一樣內(nèi)容豐富，表現直觀，但(dàn)涉及到網頁中的具體(tǐ)元素的時(shí)候，還(hái)允許用戶與之進行(xíng)交互，這是單純的信息圖做(zuò)不到的。這也是為(wèi)什麽Webgraphics比信息圖在視(shì)覺上(shàng)更加吸引用戶，也擁有(yǒu)更高(gāo)的用戶留存率。
在即将到來(lái)的2015年裏，我們會(huì)發現，越來(lái)越多(duō)的客戶會(huì)需要個(gè)性化的、帶有(yǒu)交互的信息圖式網站(zhàn)。你(nǐ)也将會(huì)看到Webgraphics這種設計(jì)趨勢的興起，并且成長為(wèi)現代網頁設計(jì)中的重要組成部分。
展望未來(lái)
網頁設計(jì)潮流來(lái)來(lái)去去，真正推動網頁設計(jì)标準變革的是設計(jì)師(shī)們别出心裁的創意。同時(shí)，設計(jì)師(shī)也是将創意和(hé)設計(jì)标準訴諸作(zuò)品和(hé)産品的人(rén)。随着時(shí)間(jiān)推移，那(nà)些(xiē)站(zhàn)在時(shí)代浪尖上(shàng)的設計(jì)趨勢會(huì)成為(wèi)普羅大(dà)衆日常看到的普通(tōng)頁面，而更加偉大(dà)和(hé)新穎的設計(jì)趨勢也會(huì)随之誕生(shēng)。
