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