設(shè)計與開發(fā)之間本有一線界限,但當(dāng)時代步入又一個十年,這個線變得更加模糊甚至感覺不到它的存在。使用PS北京網(wǎng)站制作設(shè)計網(wǎng)頁版面,足矣?或許五年前是吧!現(xiàn) 在的互聯(lián)網(wǎng)用戶要求越來越多。沒有內(nèi)涵的華麗很快就會被丟棄。如果你追求華而不實(shí)的設(shè)計,那么相信你很快會被時代遺棄。2011年不再屬于單純的華麗而是 注重功能。新的一年或者未來十年的設(shè)計趨勢是響應(yīng)設(shè)計(responsive design)、持續(xù)聯(lián)系(constant connection)和虛擬現(xiàn)實(shí)(virtual reality)。
作為設(shè)計師,您在2011年有什么計劃?真正的設(shè)計師設(shè)計東西不是為了嘩眾取寵,而是要在藝術(shù)和功能上做到兩全其美。膚淺的欣賞容易得到,膚淺的設(shè)計容易忘記。一個優(yōu)秀的設(shè)計師就像一個造夢者,為用戶創(chuàng)造一個夢境,讓用戶感覺如此真實(shí)以至于不知道自己是在做夢。這樣的夢想需要幾個要素:出色的配色、直觀的設(shè)計、良好的交互性和快速的響應(yīng)速度。另外,永遠(yuǎn)不要低估簡單的力量。 2011 年,您的設(shè)計不僅要考慮筆記本電腦和臺式機(jī),還要考慮智能手機(jī)、上網(wǎng)本和平板電腦等設(shè)備。你都準(zhǔn)備好了嗎?
2011年網(wǎng)頁設(shè)計趨勢有哪些變化?讓我們關(guān)注11個網(wǎng)頁設(shè)計趨勢熱點(diǎn):
1. 更多CSS3 + HTML5
這是期待已久的事情。在過去的幾年里,設(shè)計師們開始關(guān)注和使用CSS3+HTML5,但是2011年CSS3+HTML5將會得到更廣泛的應(yīng)用。網(wǎng)頁設(shè)計師最終會放棄Flash。 Flash不再是過去的王者,新技術(shù)(指CSS3+HTML5)將取而代之。 2011年,F(xiàn)lash退去,魔術(shù)師“HTML5”成為舞臺主角:
當(dāng)然,現(xiàn)在說HTML5將取代Flash還為時過早。從上面兩張截圖可以知道Flash和HTML5還是有差距的。因此,在2011年,兩者都將保持各自的地位。不過在2010年之前,網(wǎng)頁設(shè)計師濫用Flash的現(xiàn)象會逐漸減少。如今,很少有設(shè)計師使用Flash 來設(shè)計整個網(wǎng)站。他們在一些可用的地方使用HTML5 而不是Flash 來使網(wǎng)站更容易和更快。但是目前HTML5還不能替代Flash,F(xiàn)lash的一些效果HTML5暫時還不能實(shí)現(xiàn)。 (高端網(wǎng)站建設(shè))
不過,最令人興奮的是,CSS3的應(yīng)用越來越廣泛,有些地方甚至超過了PS(Adobe說它有雅麗),因?yàn)橛肅SS3實(shí)現(xiàn)文字陰影真的是輕而易舉的事,圖片圓角和圖片透明度。如果還沒有,是時候?qū)W習(xí)CSS3 和HTML5 了。
2. 簡單的配色方案
沒有什么比純色背景更直觀和簡潔的了。純色可以用多種方式表達(dá)。不要總是非黑即白,太弱了??紤]將綠色、黃色或紅色作為網(wǎng)頁的主要顏色。當(dāng)然,最好一直使用2或3種顏色。調(diào)整顏色的透明度可能會給您帶來意想不到的效果。
只是簡單的綠色,具有設(shè)計如此漂亮的Twitter 可視化工具的不透明度。你應(yīng)該知道:這個網(wǎng)頁只使用了XHTML/CSS 和Javascript,試試吧!
紅色絕對是經(jīng)典,如果配色做得好,視覺沖擊力會更上一層樓。
3、移動互聯(lián)網(wǎng)時代來臨
智能手機(jī)、ipad 和上網(wǎng)本無處不在,天哪,2011 年現(xiàn)在將更加明顯。這意味著您的設(shè)計需要考慮更多的設(shè)備。
創(chuàng)建一個適合移動設(shè)備的網(wǎng)站并不是簡單地剝離花哨元素的原始設(shè)計,那將是一個沒有靈魂的設(shè)計。雖然在最初的設(shè)計基礎(chǔ)上設(shè)計一個適合移動設(shè)備的網(wǎng)站是一件痛苦的事情。幸運(yùn)
運(yùn)的是,新的技術(shù)讓一切變得更簡單。在使用CSS3的情況下,設(shè)計移動網(wǎng)頁方便多了。最重要的是你可以修改一個CSS文件完成整個網(wǎng)站修改以符合用戶使用不同設(shè)備進(jìn)行瀏覽網(wǎng)頁。
你也可以設(shè)計一個移動設(shè)備專屬的網(wǎng)站,但相信那個網(wǎng)站不久還是要改版的,以現(xiàn)在科技產(chǎn)品的發(fā)展速度來看。越來越多的移動網(wǎng)站包括原始網(wǎng)站的瀏覽選 項(xiàng)。如果你不提供這個選項(xiàng)或者你的原始網(wǎng)站沒有針對移動網(wǎng)絡(luò)標(biāo)準(zhǔn)優(yōu)化,那你并未準(zhǔn)備好迎接移動互聯(lián)網(wǎng)時代的到來。據(jù)相關(guān)預(yù)測,智能手機(jī)銷量將會超越個人 PC。趕快準(zhǔn)備好,迎接移動設(shè)備大軍的來臨。
4. Parallax Scrolling
先來解釋下Parallax Scrolling,Parallax scrolling 是讓多層背景以不同的速度移動,形成運(yùn)動視差 3D 效果,雖然純屬視覺效果,但在內(nèi)容滾動時形成的視覺體驗(yàn)仍然非常出色。2011年的網(wǎng)頁設(shè)計趨勢熱點(diǎn)就是要創(chuàng)造這樣的深度視覺效果。Parallax Scrolling可以通過一些簡單的CSS技巧或jQuery插件來實(shí)現(xiàn)(示范站點(diǎn):站點(diǎn)1 站點(diǎn)2)。Parallax scrolling運(yùn)用于網(wǎng)頁設(shè)計的次要元素中可以起到很好的效果:如header、footer或者背景。不過最好不要運(yùn)用于網(wǎng)站導(dǎo)航,那顯得有點(diǎn)不倫不類。
Old Pulteney Row to the Pole 在網(wǎng)站背景使用了Parallax Scrolling特效,打開該網(wǎng)站然后往下拉即可看到效果。
5. 設(shè)計需考慮更多的觸屏設(shè)備
觸屏技術(shù)應(yīng)用越來越廣泛,觸屏設(shè)備隨處可見。這意味著,你的導(dǎo)航設(shè)計不再只是鼠標(biāo)導(dǎo)航,你必須要要考慮你的設(shè)計適合觸屏設(shè)備。請問你的設(shè)計做到指尖導(dǎo)航了嗎?
作為設(shè)計師,我們更喜歡鼠標(biāo)。當(dāng)鼠標(biāo)懸停的時候鏈接會變得高亮,然而觸屏沒有所謂的懸停。你將會在設(shè)計中如何向觸屏設(shè)備訪客展示鏈接?
同樣,如何才能做到方便你的游客仔細(xì)閱讀您的網(wǎng)站?這可能在瀏覽器標(biāo)準(zhǔn)上存在爭議,或者水平滾動觸屏可能更加合適。將網(wǎng)站設(shè)計類似于雜志的布局更有利于游客瀏覽你的網(wǎng)站。
最后,你必須考慮在你的網(wǎng)頁設(shè)計中使用流體布局(liquid layouts)。2011年,你需要處理的重點(diǎn)不再是屏幕分辨率問題,而是如何做到使訪客從垂直到水平閱讀你的網(wǎng)站都會清晰。你的設(shè)計必須做到靈活以應(yīng)付任何的挑戰(zhàn)。否則你將會成為過去式。
6. 深度判析
深度判析是關(guān)于在網(wǎng)頁設(shè)計使用維數(shù),這樣可以使你的網(wǎng)頁變得更加真實(shí)。如果運(yùn)用得恰當(dāng),那將會是一個虛擬的3D效果,就像3D電影阿凡達(dá)那樣。盡管3D技術(shù)還沒有去到網(wǎng)站設(shè)計,你仍然嘗試使用維數(shù)進(jìn)行設(shè)計。
Plántate提供了一個可旋轉(zhuǎn)的3D地球,靈活利用陰影和層等手段。
Jordon活動頁,3D元素清晰簡單,設(shè)計非常醒目。(貌似已經(jīng)撤掉)
7. 大背景圖
大背景圖的網(wǎng)頁設(shè)計應(yīng)用在2011年將會更加明顯。這些背景圖像一般是高分辨率,覆蓋這個網(wǎng)站。高清照片是一個迅速抓住你的讀者的好方式,可以產(chǎn)生極具沖擊力的視覺效果-游客的視線會不自覺地落在寬大的背景上。
當(dāng)然背景圖的色彩、內(nèi)容等都十分講究,任何情況下都不要破壞用戶的體驗(yàn),不然再漂亮的照片也是枉然。圖片類型趨向于一些比較柔和、略帶透明的一類,不要影響到網(wǎng)站文字的閱讀,講究協(xié)調(diào),易于閱讀。
上面的網(wǎng)站使用了高分辨率的圖片作為網(wǎng)站的背景,網(wǎng)站主色調(diào)是黃色。
This site adds playful animation with its grand scale imagery. Warning: auto-play music.
8. 不拘謹(jǐn)于頂級域名
嚴(yán)格意義上這一點(diǎn)與網(wǎng)頁設(shè)計無關(guān),但這一點(diǎn)也是發(fā)展的趨勢,將出現(xiàn)更多創(chuàng)造性的域名。.com域名的吸引力越來越少,主要是你很難再找到一個比較短 的.com域名。2011年人們開始將視線慢慢轉(zhuǎn)移到.me、.co和.cc等身上。想想域名的發(fā)展,搶先一步,不然你很可能再次錯失先機(jī)。
.me 用在個人展品陳列頁、博客是非常不錯的。
另一個.me域名的示范
9. QR: Quick Response
如果你注意現(xiàn)在越來越多的名片、雜志或者其他地方出現(xiàn)方形條形碼,證明你已經(jīng)看到2011年的這個趨勢熱門。但它跟網(wǎng)頁設(shè)計何干呢?實(shí)在匪夷所思。
這個方形的條形碼被稱為QR,全稱為Quick Response(在“QR Code讀取器QuickMark” 介紹過)。使用你的手機(jī)拍攝一張唯一的條形碼的照片,像魔術(shù)一樣,手機(jī)上讀取QR的軟件就會打開條形碼相關(guān)的網(wǎng)站。最美妙的事情是你可以將QR應(yīng)用到很多 地方。應(yīng)用QR到你的網(wǎng)站,目的是讓瀏覽者擁有一個你的移動網(wǎng)頁的快捷方式。你還可以通過在您的網(wǎng)址上放置一個特殊的推介代碼QR追蹤你的訪客。 哈哈,你完全可以使用QR作為你的頭像,然后到別人的網(wǎng)站留言、評論。2011年的移動媒體優(yōu)勢更加凸顯,而利用這點(diǎn)優(yōu)勢的網(wǎng)頁設(shè)計是最明智的選擇也是將 來的發(fā)展趨勢。
上面是軟礦博客的QR . 如果你也想創(chuàng)建一個,猛點(diǎn)擊這里 .
10.縮略圖設(shè)計(Thumbnail Design)
Google已經(jīng)向?yàn)g覽用戶推出它們的瀏覽預(yù)覽技術(shù)。過去我們只能通過點(diǎn)擊鏈接才能看到網(wǎng)頁的內(nèi)容,現(xiàn)在你只需點(diǎn)擊放大鏡然后將鼠標(biāo)懸停在鏈接上就可以預(yù)覽該鏈接的網(wǎng)頁內(nèi)容。
如果你的設(shè)計是基于Flash,會存在這樣的一個問題,預(yù)覽將無法顯示你的設(shè)計元素。
2011年的一般互聯(lián)網(wǎng)用戶變得更加精明,他們更希望看到更多人性化的導(dǎo)航設(shè)計。
?
Lifestreaming, 一種在線記錄個人日?;顒拥木W(wǎng)絡(luò)應(yīng)用,包括直接通過視頻feed或通過聚焦一個人的網(wǎng)絡(luò)在線內(nèi)容,比如博客日志,在社會性網(wǎng)絡(luò)上面的更新,在線相冊,聊天內(nèi)容甚至只是一些喜歡的網(wǎng)站的鏈接等等。
最后一點(diǎn),不是最不重要的一點(diǎn),是網(wǎng)頁設(shè)計更加注重人與人之間持續(xù)聯(lián)系,如Life Stream。互聯(lián)網(wǎng)本身是原始的,枯燥無味的,是人類通過這個開放的平臺分享他們的一切才變得多姿多彩。將來人們還會而且加強(qiáng)如 lifestreaming的形式進(jìn)行人與人之間的交流互動。作為網(wǎng)頁設(shè)計師,你必須了解這個趨勢和應(yīng)對這個趨勢。
2011年,個人博客在Twitter feeds更活躍(不只是連接到Twitter頁面的鏈接),人們會通過Foursquare互相傳遞即時信息,where are u and what are u doing。毋庸置疑,2011年將會帶我們走進(jìn)一個更交心的互聯(lián)網(wǎng)時代。
個人網(wǎng)站,使用了 lifestreaming。
一個商業(yè)網(wǎng)站,在一個頁面上綜合大量信息。
我們專注高端建站,小程序開發(fā)、軟件系統(tǒng)定制開發(fā)、BUG修復(fù)、物聯(lián)網(wǎng)開發(fā)、各類API接口對接開發(fā)等。十余年開發(fā)經(jīng)驗(yàn),每一個項(xiàng)目承諾做到滿意為止,多一次對比,一定讓您多一份收獲!