2014-10-17 藍(lán)藍(lán)設(shè)計(jì)的小編
如何讓網(wǎng)頁(yè)設(shè)計(jì)更具現(xiàn)代感？2014年網(wǎng)站設(shè)計(jì)又會(huì)有怎樣的變化趨勢(shì)？回顧2013年，Metro設(shè)計(jì)，全屏大圖設(shè)計(jì)都是2013流行的趨勢(shì)！下面我們將為大家列出2014最有可能流行的WEB前端設(shè)計(jì)趨勢(shì)！
我個(gè)人是個(gè)性化排版的支持者，自然也希望看到越來(lái)越多的網(wǎng)絡(luò)設(shè)計(jì)嘗試個(gè)性化的風(fēng)格，其中比較突出的一點(diǎn)是個(gè)性化字體的增多：用自己獨(dú)特設(shè)計(jì)的字體代替標(biāo)準(zhǔn) 印刷體，讓設(shè)計(jì)更加獨(dú)特。比如“Stuff and Nonsense”這個(gè)網(wǎng)站提供設(shè)計(jì)字體服務(wù)，讓字體在體現(xiàn)個(gè)性的同時(shí)保留專(zhuān)業(yè)印刷風(fēng)格。我們期待著在2014年設(shè)計(jì)出的網(wǎng)站能夠更多地從細(xì)節(jié)體現(xiàn)個(gè)性。
2014年的10大趨勢(shì)中，我們提到了“借殼”設(shè)計(jì)(skeuomorphism)，指模仿現(xiàn)實(shí)事物盡可能把手機(jī)元素(如圖表、背殼等)設(shè)計(jì)得更加具體、擬 物。而“扁平化”的極簡(jiǎn)主義則是和“擬物性”相背行，在iOS7中明顯感到更加簡(jiǎn)化的圖表替代了原本精致的描繪，更加突出應(yīng)用的實(shí)際效果，反應(yīng)使用應(yīng)用的 感受，而不是局限在某個(gè)應(yīng)用的外在形象上。蘋(píng)果公司在今年竭力推進(jìn)扁平化設(shè)計(jì)，幾乎所有可以修改的設(shè)計(jì)都加入了扁平化的元素。
蘋(píng)果公司向來(lái)是電子產(chǎn)品設(shè)計(jì)的導(dǎo)向標(biāo)，推動(dòng)其他產(chǎn)品設(shè)計(jì)紛紛追隨iOS7的設(shè)計(jì)風(fēng)格，同時(shí)網(wǎng)絡(luò)設(shè)計(jì)也開(kāi)始大批量地采用扁平化思路。預(yù)計(jì)這種風(fēng)潮在2014年仍將持續(xù)。
要說(shuō)網(wǎng)絡(luò)設(shè)計(jì)最大的趨勢(shì)，大概是大背景圖片的使用。
大型背景圖片(large hero areas，是從印刷設(shè)計(jì)借用到網(wǎng)絡(luò)設(shè)計(jì)中的專(zhuān)業(yè)名詞，通常是鋪滿(mǎn)整個(gè)屏幕的圖片，配上幾句簡(jiǎn)介的文字)，常出現(xiàn)在網(wǎng)站首頁(yè)上。大圖片背景的清晰度不一， 有的配以模糊的背景，有的(如realtii)則采用清晰的圖片。大型背景圖片迅速取代了曾一度熱門(mén)的幻燈片圖片顯示插件，成為網(wǎng)頁(yè)設(shè)計(jì)元素中吸引瀏覽者 注意力的主要途徑，而幻燈片滾動(dòng)顯示的使用價(jià)值已經(jīng)被否定。預(yù)計(jì)這種大圖片設(shè)計(jì)的流行趨勢(shì)在2014年仍將持續(xù)。
交互網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越普遍，網(wǎng)頁(yè)設(shè)計(jì)順應(yīng)人們對(duì)手機(jī)的依賴(lài)，變得越來(lái)越像手機(jī)的交互界面。設(shè)計(jì)師們更注重網(wǎng)站在手機(jī)屏幕上顯示的實(shí)際效果，手機(jī)將成為網(wǎng)絡(luò)瀏覽的主要方式，因此屏幕尺寸的差異對(duì)用戶(hù)體驗(yàn)的影響也將被納入網(wǎng)頁(yè)設(shè)計(jì)的考慮范圍。
此外，融合社交媒體功能，提供訂閱郵件，借助滾動(dòng)條設(shè)計(jì)瀏覽的“長(zhǎng)”網(wǎng)站，快速加載網(wǎng)頁(yè)等都將讓網(wǎng)站設(shè)計(jì)的互動(dòng)性增加，用戶(hù)界面更加友好。
如果在一段視頻介紹和文本介紹中選擇，估計(jì)大部分瀏覽者都會(huì)選擇前者。此外視頻和網(wǎng)絡(luò)(尤其是大背景圖片)匹配性強(qiáng)。
網(wǎng)絡(luò)視頻的制作的成本不斷降低，網(wǎng)絡(luò)傳播性強(qiáng)，與社交媒體網(wǎng)站的兼容性好。網(wǎng)絡(luò)硬件的發(fā)展讓此前因?yàn)榫W(wǎng)速和流量限制的視頻插件越來(lái)越普及，顯然在同樣的時(shí)間和篇幅里，視頻傳遞的信息量要遠(yuǎn)超過(guò)文本。
此外，視頻能追蹤觀看人數(shù)，相比文本能獲得更好的宣傳反饋。
手機(jī)讓人們習(xí)慣用“滾動(dòng)條”控制的方式閱讀網(wǎng)頁(yè)、尋找資訊，這樣的閱讀習(xí)慣也影響了網(wǎng)絡(luò)設(shè)計(jì)，頁(yè)面出現(xiàn)更多兩側(cè)留白與更多的交互設(shè)計(jì)。幾年前這種不見(jiàn)底的 下拉式網(wǎng)站并不受好評(píng)，但手機(jī)瀏覽器讓人們逐漸接受了這種長(zhǎng)條形網(wǎng)站布局。此外內(nèi)容的編排上也更適合閱讀理解。此外國(guó)內(nèi)很多購(gòu)物網(wǎng)站或貼吧都加上了“點(diǎn)擊 返回頁(yè)面最上端”的功能，更加方便了瀏覽長(zhǎng)網(wǎng)頁(yè)。而事實(shí)很有可能是，瀏覽者只顧往下滾動(dòng)，根本不會(huì)在意網(wǎng)頁(yè)到底有多長(zhǎng)……
網(wǎng)頁(yè)設(shè)計(jì)的配色改變反應(yīng)了人們審美需求的改變。2014年預(yù)計(jì)同色系網(wǎng)站設(shè)計(jì)將成為主流，而“簡(jiǎn)化配色”的概念，則是把參與網(wǎng)站設(shè)計(jì)的顏色局限到1到2個(gè)。
如上面的網(wǎng)站圖例，只用了一個(gè)顏色(藝術(shù)設(shè)計(jì)中黑/白被不被納入顏色計(jì)算中)。配色簡(jiǎn)單的趨勢(shì)似乎和平面化同步，但也不絕對(duì)。有些網(wǎng)站甚至擯棄色彩，采用純黑白(以及兩者之間的漸變色)設(shè)計(jì)，有時(shí)在其中加入一點(diǎn)色彩吸引注意力或渲染效果，比如加入醒目的紅色。
2013年似乎是“King Content”流行的一年。所謂“King Content”，是指適應(yīng)社交互動(dòng)媒體網(wǎng)站(如Facebook，Twitter等)出現(xiàn)的簡(jiǎn)潔高度概括的提示信息內(nèi)容。信息內(nèi)容的簡(jiǎn)化以為著篇幅的縮 短，文章采用Twitter風(fēng)格來(lái)適應(yīng)人們注意力的縮短。注意到現(xiàn)在網(wǎng)絡(luò)上很少再出現(xiàn)長(zhǎng)于250字的介紹，太長(zhǎng)的內(nèi)容已經(jīng)不再適應(yīng)人們快速瀏覽的閱讀習(xí) 慣。
單欄模式常見(jiàn)于博客或雜志樣式的網(wǎng)站，但采用這種模式的網(wǎng)站正在增加，放棄分欄，重新整合內(nèi)容已經(jīng)成為當(dāng)下網(wǎng)絡(luò)設(shè)計(jì)的發(fā)展趨勢(shì)之一。這種設(shè)計(jì)給人的視覺(jué)效果更好，內(nèi)容也顯得更加整齊，同時(shí)網(wǎng)絡(luò)設(shè)計(jì)本身也更為簡(jiǎn)單。
這種單欄設(shè)計(jì)提供讀者更好的瀏覽體驗(yàn)，擯棄了復(fù)雜的內(nèi)容堆積分散閱讀注意力，主體內(nèi)容能在整個(gè)頁(yè)面流暢地一字排開(kāi)。我個(gè)人希望這種閱讀模式能在2014年保持下去。
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.alimai.net