未來年網(wǎng)站制作的發(fā)展趨勢。
設(shè)計行業(yè)日新月異,設(shè)計師和開發(fā)人員都需要緊跟潮流。但有些時候,要不斷接納新的潮流有點難,因為每當(dāng)我們抓住潮流,潮流又變了。我們能做的只有加快速度,預(yù)測下一個趨勢是什么??上У氖?,未卜先知在我們這行不太容易成功,所以我們不得不依靠分析技能,但好在總會有一些跡象幫我們描繪未來的藍(lán)圖,我們所要做的就是把點點滴滴連結(jié)起來。今天,我就把這些點連起來,試圖搞清楚要在2013年獲得成功,我們現(xiàn)在需要關(guān)注什么。
移動優(yōu)先
很多時候容易優(yōu)先規(guī)劃重要的界面元素,讓它們?nèi)空故驹谝粋€移動布局里,如果它們不適合全部展示,則可以去掉一些。同時也要考慮遇到更大的窗口怎么辦。
你將在一個界面里容納一個側(cè)邊欄、也可能是2個,同時包括很多其他的頁面元素。如果只是簡單的將桌面端的網(wǎng)站制作策略移植到移動設(shè)備上往往是行不通的。相反,你需要考慮移動設(shè)備的獨特優(yōu)勢以及如何與用戶需求結(jié)合起來。
A?List?Apart發(fā)布過《?Mobile?First》一書,筆者?Luke?Wroblewski?提出了很多這方面的觀點。
他提倡產(chǎn)品研發(fā)團隊首先需要針對移動設(shè)備設(shè)計,這不僅是因為移動設(shè)備現(xiàn)在數(shù)量龐大而且在飛速增長,而且因為移動設(shè)備的限制能迫使我們改變舊習(xí)慣,我們不得不更多的去關(guān)注最本質(zhì)、最重要的產(chǎn)品,是同時也要更多地注意性能和使用場景,以此獲取更出色的用戶體驗。
無限滾動(瀑布流)
很多社交網(wǎng)站已經(jīng)開始使用瀑布流功能在信息面板、時間軸、用戶訂閱等內(nèi)容里。?Twitter?和Tumblr采用這個布局樣式引領(lǐng)和普及瀑布流功能。最新更新的?Pinterest在其主頁上采用了瀑布流的加載技術(shù)并且運行的很完美。
也許很多網(wǎng)站設(shè)計師會問為什么一開始瀑布流就會受到如此追捧。那是因為它能為網(wǎng)頁提供無限加載的頁面功能。可問題是這個無限加載的瀑布流形式,它很難生成固定的鏈接,所以并不是所有的網(wǎng)頁都需要無限加載的方式??梢姡俨剂鬟@個趨勢適合的范圍是,您只需要加載不需要具體分頁的網(wǎng)頁來使用。
例如,當(dāng)用戶想直接查閱博客的第15頁或第25頁資源時,一直加載的頁面顯然是非常糟糕的。但是對于Tumblr?和Pinterest來說,瀑布流是一個很好的選擇,因為頁面所承載的是動態(tài)信息。隨著時間的推移Twitter第一頁或第二頁的信息內(nèi)容將會更新,而這個過程中使用?Ajax?方式加載數(shù)據(jù)進來會讓用戶覺得更加舒服。
空白&極簡主義
空白&極簡主義是受推崇的設(shè)計風(fēng)格。這個趨勢在這些年一直是web設(shè)計的一部分,當(dāng)然也屬于應(yīng)時而生的設(shè)計風(fēng)格。很多網(wǎng)站使用空白空間(websites?using?whitespace)來集中表現(xiàn)用戶要討論的主要內(nèi)容,有些信息資源密集的網(wǎng)站也需要有較小的空白區(qū)域來緩解布局中的信息傳達(dá)。
?
需要強調(diào)的是,請不要誤解,空白設(shè)計不是指白色的設(shè)計。事實上黑色風(fēng)格的布局也是有空白的,因此這個“空白”的意思其實應(yīng)理解為“空的區(qū)域”(large?oversized?typography),?也就是在頁面中留下一些空間,讓用戶的視覺能夠很好的分離內(nèi)容,便于讀者理解消化網(wǎng)站所傳遞的信息,不會為滿滿的信息量嚇跑。
? ? ?自然設(shè)計元素
CSS3?改變了網(wǎng)站制作。通過?@font-face?可以載入更多字體以及關(guān)鍵幀動畫創(chuàng)建都展示出?CSS?更先進的功能。即使是最基本的CSS3屬性也影響了頁面對自然設(shè)計布局的使用。
這些元素包括具有圓角,陰影以及背景漸變等等,在5-10年前這些效果都是需要圖片來實現(xiàn)的,現(xiàn)在你完全可以只使用?CSS3?代碼生成這些效果。2013年,將有更多使用圖片的網(wǎng)頁布局被?CSS?屬性取代。
筆者一直喜歡?Dabblet?網(wǎng)站上漸變的背景效果,這個?WEB?應(yīng)用程序可以和?GitHub?Gist?框架結(jié)合使用,允許開發(fā)人員實現(xiàn)構(gòu)建?HTML/CSS?原型。整個界面是基于?CSS3?實現(xiàn),你可能會注意到過去短短幾年的時間,Web?領(lǐng)域已經(jīng)發(fā)生了很大的變化。
大圖片背景
以前也有人在談?wù)摯髨D片背景(big?photo?backgrounds)的網(wǎng)站風(fēng)格,至此這個風(fēng)格一直呈上升趨勢。事實上,筆者也看過很多這種風(fēng)格的網(wǎng)站設(shè)計,網(wǎng)站布局可以配合具體的情感來選擇顏色和背景圖片,大圖片帶給用戶一種特殊情感體驗的方式。它可以為網(wǎng)站設(shè)計添加更多的生命力,是一種很好的設(shè)計表現(xiàn)手法。
然而,筆者認(rèn)為這種趨勢并不適合所有的網(wǎng)站設(shè)計。恰當(dāng)?shù)姆绞绞?,你的網(wǎng)頁上有足夠的空間去利用大圖片背景給訪客美觀的視覺享受。最大的問題是要讓布局適合內(nèi)容,內(nèi)容要清晰可讀。這就是為什么大圖片背景的最佳應(yīng)用場景通常是在目標(biāo)頁(著陸頁)或一些公司和機構(gòu)的網(wǎng)站。
?這種獨特的風(fēng)格能完美的為設(shè)計作品或個人網(wǎng)站提供與您的訪客進行深度的溝通。來訪網(wǎng)站的訪客會好奇你是誰,你做了什么。提供一張照片,展示了一個簡短的自我介紹,讓訪客知道你是誰,豈不是很好的選擇。大圖片也可用于顯示您的創(chuàng)造性工作,比如插畫,矢量圖片,甚至是你自己的照片。
簡潔的源代碼
優(yōu)秀的CSS框架會大大縮短Web開發(fā)人員的編碼時間。選擇恰當(dāng)?shù)目蚣軐⒁馕吨诙潭痰膸追昼妰?nèi)你就可以建立一個完整的兩列或三列的網(wǎng)頁界面。同時意味著使用較少的HTML標(biāo)簽就可以實現(xiàn)相同的效果。
創(chuàng)建簡潔的源代碼意味著網(wǎng)站的精簡。這是比較聰明的選擇,因為更小的文件意味著服務(wù)器的加載速度更快,在編輯布局的時候也會迅速而簡潔。通過閱讀網(wǎng)上的文章和學(xué)習(xí)優(yōu)秀開發(fā)人員的經(jīng)驗,能夠幫助你去編寫可讀性更高的?HTML?&?CSS?代碼。
推薦的兩個最重要的資源是?Github?和Stack?Overflow。站內(nèi)收錄了很多免費開源的源代碼,你可以下載并把它們應(yīng)用到網(wǎng)站項目中。后者推薦一個非常有用的Q&A社區(qū),開發(fā)者在社區(qū)可以互相幫助。這些網(wǎng)站都提供了很好的資源,幫助您在創(chuàng)建網(wǎng)站時編寫干凈、可讀的代碼。
結(jié)論
我們所做的不是一項簡單的工作。我們就跟醫(yī)生一樣,需要不斷學(xué)習(xí),和市場保持同步。如果醫(yī)生不能誠實地工作,就相當(dāng)于把病人的生命置于危險之中。如果我們不誠實地工作,就會把我們自己的生活置于危險之中。所以,關(guān)注未來,時刻準(zhǔn)備著。
不斷學(xué)習(xí)和適應(yīng)行業(yè)的最新潮流,因為新的很快就會變成舊的,而現(xiàn)在正在變成過去。
本文作者來自北京傳誠信,轉(zhuǎn)載請注明出處:北京傳誠信(js-hbsb.cn)
選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對不容錯過 !