建站知識(shí)

Website development

北京網(wǎng)站設(shè)計(jì)云智網(wǎng)頁(yè)設(shè)計(jì)的幾種新趨勢(shì)

發(fā)布時(shí)間：2015-12-04 09:19:25

TAGS：手機(jī)網(wǎng)站設(shè)計(jì)吃醋,國(guó)外優(yōu)秀網(wǎng)站設(shè)計(jì)介紹

太多的文章都會(huì)告訴你酷炫的網(wǎng)頁(yè)設(shè)計(jì)是怎樣的，但是云智將結(jié)合過(guò)去帶你看看一些可以實(shí)現(xiàn)的未來(lái)。

滑動(dòng)優(yōu)先于點(diǎn)擊

我們大概已經(jīng)忘了滾動(dòng)的頁(yè)面是怎樣的，大多數(shù)的用戶曾經(jīng)很痛苦地把鼠標(biāo)移到屏幕右邊，使用一種很古老的東西，我們叫它“滾動(dòng)條”。

你也許也用過(guò)鼠標(biāo)的滾輪，光標(biāo)鍵，觸控板。如今，使用滾動(dòng)要比點(diǎn)擊容易多了，在手機(jī)上，你可以用你的手指隨意滑動(dòng)屏幕。但是要準(zhǔn)確地點(diǎn)擊到目標(biāo)卻要困難許多，這和我們?cè)陔娔X桌面上的體驗(yàn)恰恰相反。

結(jié)果就是，我們期待越來(lái)越多的網(wǎng)站吧滾動(dòng)的設(shè)計(jì)放在第一位，點(diǎn)擊放在第二位。

如今的頁(yè)面需要點(diǎn)擊的東西越來(lái)越少，取而代之的是滑動(dòng)。我們將會(huì)看到越來(lái)越多的滑動(dòng)，更多的按鈕，更大的點(diǎn)擊區(qū)域，頂端的頁(yè)面也會(huì)變成滾動(dòng)的。

需要將大量文章放在不同頁(yè)面的網(wǎng)站很快會(huì)明白這一點(diǎn)，希望他們能將這些恨多的頁(yè)面整合到一起，比如像時(shí)代周刊（TIME）一樣可以無(wú)限滑動(dòng)下去。

現(xiàn)在預(yù)測(cè)網(wǎng)頁(yè)會(huì)不會(huì)變得像手表一樣智能還為時(shí)過(guò)早，但是我們可以一起期待未來(lái)所有的網(wǎng)頁(yè)都可以通過(guò)手勢(shì)操縱。

2. 折疊顯示正在消失

如今頁(yè)面上的滑動(dòng)非常鋪墊，各種設(shè)備也可以根據(jù)尺寸自適應(yīng)，折疊起來(lái)的東西變得有一些無(wú)關(guān)緊要。

設(shè)計(jì)師們?cè)絹?lái)越不喜歡將所有的東西都塞進(jìn)頂端頁(yè)面。比如像Medium就采用了全屏的圖片和標(biāo)題，直到你開(kāi)始滑動(dòng)才可以看見(jiàn)內(nèi)容。

設(shè)計(jì)師們有更多地機(jī)會(huì)像雜志一樣，將他們的頁(yè)面填充好看的圖片。在2015將有更多地設(shè)計(jì)占據(jù)更多的空間，尤其是垂直化空間，也會(huì)有越來(lái)越多形象化的東西出現(xiàn)。

3. 快速呈現(xiàn)和簡(jiǎn)約設(shè)計(jì)

如今的年輕人基本上都是非常專業(yè)的網(wǎng)頁(yè)使用者。這樣的結(jié)果就是所有的一切都必須變得更高效，人們變得越來(lái)越?jīng)]有耐心。如果網(wǎng)頁(yè)加載需要1分鐘，一個(gè)脾氣還不錯(cuò)的人都會(huì)變得煩躁。

如今網(wǎng)頁(yè)被逼著不僅要變得更快（技術(shù)性問(wèn)題），更重要的是變得可以更快地被用戶理解。不容易被理解的設(shè)計(jì)業(yè)也會(huì)減少用戶的使用，這和無(wú)法加載沒(méi)什么區(qū)別。

更加簡(jiǎn)單的設(shè)計(jì)瀏覽起來(lái)更簡(jiǎn)單，更容易被欣賞。下面兩個(gè)設(shè)計(jì)很容易被辨別出來(lái)哪一個(gè)更加新一些好一些。

其實(shí)這也是Skeuomorphic設(shè)計(jì)逐漸消亡的原因：用戶的觀點(diǎn)越來(lái)越多，耐心減少，頁(yè)面看起來(lái)雜亂只會(huì)減少他們的訪問(wèn)量。

Apps一般都擁有小而美的界面，因?yàn)樾〗缑嫘Ч麜?huì)表達(dá)得更好。

扁平化設(shè)計(jì)才是個(gè)開(kāi)始，我們期待在簡(jiǎn)單化和及時(shí)化上更多的進(jìn)步。

4. Pixel已亡

相信大家在欣賞一個(gè)朋友通過(guò)微信發(fā)過(guò)來(lái)的聲稱有亮點(diǎn)的圖的時(shí)候，應(yīng)該都會(huì)嘗試將其進(jìn)行放大再開(kāi)始亮點(diǎn)查找。你在Retina屏上面放大還好，但是如果在其他非Retina屏幕上對(duì)圖片進(jìn)行放大，到時(shí)你就真的找到亮點(diǎn)了，且找到很多，一個(gè)個(gè)方塊的格子狀的像素點(diǎn)。旁邊美女一邊走過(guò)時(shí)瞥見(jiàn)的話還以為你在看什么東西了，竟然還要打馬賽克！立刻投以鄙視的眼光或者一頓拳腳(如果是公交上的話)！怪誰(shuí)？怪你朋友發(fā)給你的是位圖。

在電腦桌面上，曾經(jīng)一個(gè)pixel 就是一個(gè)pixel。你甚至還會(huì)記得72dpi由多少個(gè)pixel組成。但是如今，越來(lái)越少的人知道一個(gè)pixel是什么意思。

目前收到追捧的一些設(shè)計(jì)中體現(xiàn)了越來(lái)越多使用網(wǎng)格和比例的趨勢(shì)。但是有一個(gè)領(lǐng)域始終沒(méi)有被撼動(dòng)：位圖圖像。然而Retina屏和一些新的瀏覽器，使得矢量圖在2015變得越來(lái)越流行。

我們可以看到這個(gè)趨勢(shì)體現(xiàn)在了以字體為基礎(chǔ)的圖標(biāo)設(shè)計(jì)，以及Google’s Material Design. 頁(yè)面加載得更快并且圖標(biāo)可以不損失質(zhì)量又隨愿意所方程任何大小。這對(duì)設(shè)計(jì)師和網(wǎng)絡(luò)瀏覽器來(lái)說(shuō)是很理想的。

或許還需要一些時(shí)間讓專業(yè)者改變習(xí)慣創(chuàng)造一些更高質(zhì)量的現(xiàn)實(shí)。但是一旦大部分的顯示都變成Retina級(jí)別的，相信更多設(shè)計(jì)師就會(huì)習(xí)慣于此了。

5. 動(dòng)圖回來(lái)啦

如果你想讓你的網(wǎng)頁(yè)看起來(lái)比較復(fù)古，你可以添加動(dòng)畫效果的“Under Construction”的Gif或者flash動(dòng)畫。但是目前動(dòng)畫已經(jīng)成為現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的新星了。

扁平化設(shè)計(jì)使得界面看起來(lái)不會(huì)過(guò)于連續(xù)，也不會(huì)太無(wú)聊。動(dòng)畫會(huì)使得網(wǎng)頁(yè)更加引人注目，并且可以在有限的空間里打包更多的信息。

手機(jī)上的app重新定義了用戶的需求。App會(huì)使用動(dòng)態(tài)圖去傳達(dá)信息，而網(wǎng)頁(yè)在這方面才剛剛起步。

新的一些科技比如CSS動(dòng)畫使得在沒(méi)有插件，速度，以及一些兼容性問(wèn)題的情況下更好地提高設(shè)計(jì)師。Web components只會(huì)加速這個(gè)趨勢(shì)。

GIF動(dòng)畫回來(lái)了，而且出人意料得有效。你可以發(fā)現(xiàn)這片文章里大量使用的GIF動(dòng)畫配圖。

6. web components 組件標(biāo)準(zhǔn)化到來(lái)

網(wǎng)絡(luò)科技變得越來(lái)越復(fù)雜，語(yǔ)義成分越來(lái)越少，設(shè)計(jì)師必須為了一個(gè)簡(jiǎn)單地任務(wù)將很復(fù)雜的code植入到頁(yè)面里。比如像 Google Analytics 或者是 Facebook 的“l(fā)ike”按鈕。如果我們可以用以下代碼取代的話將會(huì)更簡(jiǎn)單：

<google-analyticskey=”UA-12345–678">

Web Components目前還沒(méi)有被大多數(shù)的設(shè)計(jì)師使用，但是這個(gè)趨勢(shì)在2015會(huì)更明顯。

Google’s Material Design 便推動(dòng)了這一趨勢(shì)發(fā)展，在Polymer和各種新開(kāi)發(fā)的瀏覽器支持下，它為安卓app提供了大量標(biāo)簽簡(jiǎn)單的動(dòng)畫和交互組件。

如果照這個(gè)趨勢(shì)下去，以組件為基礎(chǔ)的框架出現(xiàn)在2015指日可待，或許是Bootstrap4.0？

7. 社交飽和以及郵件的重新崛起

對(duì)消費(fèi)者來(lái)說(shuō)，社交網(wǎng)絡(luò)已經(jīng)取得了巨大的成功，但是很多內(nèi)容制造者并不是很開(kāi)心。

問(wèn)題在于飽和。Facebook發(fā)現(xiàn)在每年數(shù)十億的的posts中只有那么一些被瀏覽和分享。這意味著隨著時(shí)間過(guò)去，你的會(huì)被越來(lái)越少的人瀏覽（這個(gè)問(wèn)題是可以解決的，除非你付費(fèi)給Facebook）。

社交并沒(méi)有離我們遠(yuǎn)去，但是在2014我們可以看到很多有潛力的知名博主比如 Tim Ferries 的注意力都從社交網(wǎng)絡(luò)轉(zhuǎn)移到“過(guò)時(shí)”的email。他們已經(jīng)意識(shí)到email相比社交網(wǎng)站的優(yōu)點(diǎn)是：有更多的人會(huì)看到你發(fā)送給他們的內(nèi)容。

我期待在網(wǎng)頁(yè)提示功能不被看好的情況下，這種趨勢(shì)會(huì)在2015繼續(xù)下去。

非預(yù)測(cè)：CSS shapes

這個(gè)很酷的技術(shù)還沒(méi)有被重視，除了設(shè)計(jì)師們。CSS shapes 使得非矩形形狀的使用成為現(xiàn)實(shí)。

這無(wú)疑非常酷，但是需要瀏覽器的支持，所以花費(fèi)時(shí)間和努力在上面有一些冒險(xiǎn)，或許你需要兩個(gè)設(shè)計(jì)師，一個(gè)應(yīng)付舊的瀏覽器，一個(gè)應(yīng)付新的。除了設(shè)計(jì)師之外，并沒(méi)有很多用戶意識(shí)到這個(gè)趨勢(shì)。

但它真的很酷。

原創(chuàng)不易，未經(jīng)授權(quán)，嚴(yán)禁轉(zhuǎn)載

原文地址：http://www.mpian.cn/i,72,6255,0.html

上一篇：北京網(wǎng)站設(shè)計(jì)云智UI設(shè)計(jì)師的幾種武器

下一篇：北京網(wǎng)站設(shè)計(jì)云智帶來(lái)更直觀的設(shè)計(jì)感覺(jué)

您還有可能感興趣的內(nèi)容

建站流程

Website development

網(wǎng)站需
求分析
網(wǎng)站策
劃方案
頁(yè)面風(fēng)
格設(shè)計(jì)
程序設(shè)
計(jì)研發(fā)
資料錄
入優(yōu)化
確認(rèn)交
付使用
后續(xù)跟
蹤服務(wù)
+86 10 64758810
18510861135

熱門標(biāo)簽

Website development

客戶評(píng)價(jià)

更多+

感謝云智互聯(lián)，系統(tǒng)提前完成，在整個(gè)項(xiàng)目周期內(nèi)，云智互聯(lián)對(duì)待我們并不像是對(duì)待客戶，更像是朋友一樣，每一次，都能以專業(yè)的角度向我們提出更合理、更有效的解決方案，并快速、細(xì)致地完成我們的每一個(gè)需求，再次感謝以至誠(chéng)之心做事的云智互聯(lián)團(tuán)隊(duì)。

潘濤
我是東方龍馬集團(tuán)，在云智家做了2個(gè)企業(yè)官網(wǎng)，服務(wù)態(tài)度超級(jí)好。如果想做網(wǎng)站，選擇他家一定不后悔。性價(jià)比高，服務(wù)態(tài)度好。值得你的信賴！

譚嬌
技術(shù)好，設(shè)計(jì)精良，操作便利，很專業(yè)！配套的服務(wù)和后續(xù)的服務(wù)都很好,網(wǎng)站封面堪稱精品，運(yùn)行方便，后臺(tái)操作的簡(jiǎn)單。技術(shù)還會(huì)耐心教我,很好的云智互聯(lián)（北京）科技有限公司，建站很不錯(cuò)的。

陳曦
不錯(cuò)，價(jià)格比較合適，重點(diǎn)是響應(yīng)速度蠻快，有什么問(wèn)題都會(huì)馬上給你解決，公司很滿意，因?yàn)樗麄兌际轻槍?duì)每個(gè)項(xiàng)目建了相應(yīng)的討論組，有問(wèn)題可以再里面提出，人員分工到位，解決問(wèn)題很及時(shí)。

張經(jīng)理