盤點：主流的7大網(wǎng)頁設計趨勢

盤點：主流的7大網(wǎng)頁設計趨勢

上圖是否非常熟悉呢？當然了，這不就是我們今天打開電腦天天在做的事情嘛。但是你要知道現(xiàn)在已經(jīng)是移動互聯(lián)的年代，移動設備占據(jù)了用戶大量的網(wǎng)上瀏覽時間，而移動設備的特點是屏幕相對比較小，而控件一般設計的比較大以方便點擊。所以用戶更希望的是能隨心所欲的通過指尖快速的瀏覽到指定的信息，而非通過鼠標慢慢的往下拉，然后找到一行小的可憐的鏈接點進去進行查看。所以這個時候的設計更多應該是手勢操作優(yōu)先，讓用戶可以通過手勢快速的定位到自己想要的內(nèi)容。況且現(xiàn)在移動互聯(lián)網(wǎng)的用戶越來越急躁和越來越懶，很少人有耐心去一個個條目仔細去查看去找到想要的內(nèi)容信息。所以他們更希望的是能快速的在簡潔的屏幕上定位到自己想要的目標，如果能不讓自己動手就能自己出現(xiàn)就更好了。而這里就是我們都熟知的泰晤士周刊網(wǎng)絡版，它甚至的是無限循環(huán)的去滾動著顯示文章，而不像傳統(tǒng)的PC瀏覽那樣，分成無數(shù)個tag和頁面來讓用戶進行點擊選擇。而這，我認為就是這種風潮到來的一種暗示。雖然我不知道可穿戴設備如智能手表等什么時候能完全流行起來，但是我相信如果真流行起來的話，它里面的應用肯定是能更好的滾動顯示和通過手勢進行方便的操作的。折疊顯示將成明日黃花正因為現(xiàn)在對頁面進行滑動是如此的簡便和隨心所欲，且當今的智能設備的大小型號琳瑯滿目，所以因為一些內(nèi)容過長而進行折疊顯示的方式已經(jīng)過時了-僅僅將一些關鍵信息顯示給用戶，當需要的時候再去點擊個“＋”號什么的進行展開。同時你也再沒有必要在一篇文章的前面堆積大量的文字內(nèi)容來讓用戶知道你下面將要描述的是什么內(nèi)容，因為用戶很容易就能通過手勢操作滑動到它想要看的內(nèi)容上面去。比如你看下人家Medium的做法，點擊一篇文章進去，開門見山的就是一張大圖鋪天蓋地的映入眼簾。用戶只有往下滑動才會出現(xiàn)文章的內(nèi)容，而用戶如果想快速查看某一個章節(jié)，只需要多滑動幾下就到了。所以取消折疊內(nèi)容的顯示，這我認為也肯定是將要風靡網(wǎng)頁設計界的風潮之一?？焖俚某尸F(xiàn)和簡約的設計我不知道讀者您算不算是個脾氣比較溫順比較隨和的人，如果你自認為是的話，那么如果因為網(wǎng)絡太慢，本文下面的內(nèi)容到了現(xiàn)在還沒有完全加載完畢。那么，我相信你肯定會立刻火冒三丈，把網(wǎng)絡提供商的先人都會問候一遍(網(wǎng)絡出問題的時候，我本人往往首先問候的就是網(wǎng)絡供應商，因為人家貪污的話還收了錢干活，而這班人往往是收了錢還不干活)。在當今這個生活節(jié)奏這么快速的年代，什么最貴？時間最貴。每個人都在爭分奪秒的不甘落后的往前狂奔，而因為通過你的應用或者網(wǎng)頁找到一個想要的內(nèi)容卻要耗掉我好幾十秒的寶貴時間，我能不暴跳如雷立刻拉黑嗎？所以我們的設計要迎合我們這些暴躁的用戶的需求，在能快速顯示之余，還要能足夠簡潔的將內(nèi)容顯示出來讓用戶能快速的弄懂這是怎么一回事。上圖顯示了頁面加載時間和用戶放棄繼續(xù)瀏覽的可能性的一個關系，可以看出來，一個頁面如果加載太慢的話，對于大部分用戶來說，跟沒有加載是沒有什么區(qū)別的，因為他們等不了幾秒就將你的頁面或者應用給關閉掉，刪除拉黑掉了。簡潔快速的設計應該是讓人能夠快速的打開并能愉悅的開始欣賞里面的內(nèi)容的，而不是等半天只顯示了一半內(nèi)容，或者內(nèi)容顯示出來了卻耗掉用戶半天時間才發(fā)現(xiàn)這里面根本沒有我TMD想要的東西。下面就是這兩種設計的一個對比例子，誰更簡單扼要，相信不用我明說了吧。大家對比下現(xiàn)在很多手機優(yōu)秀App的設計和其他一些門戶網(wǎng)站的設計，就會為這些網(wǎng)站的設計感覺汗顏。因為那些優(yōu)秀應用里面的界面超級簡約和漂亮，而之所以做成這么簡約的原因又正是因為需要有好的性能來滿足浮躁的用戶的需求?，F(xiàn)在炙手可熱的扁平化設計其實只是一個開始，其最終的目標瞄準的就是簡潔和實時性。而這，就是我認為的另外一個網(wǎng)頁設計的風潮。矢量圖將迎來春天相信大家在欣賞一個朋友通過微信發(fā)過來的聲稱有亮點的圖的時候，應該都會嘗試將其進行放大再開始亮點查找。你在Retina屏上面放大還好，但是如果在其他非Retina屏幕上對圖片進行放大，到時你就真的找到亮點了，且找到很多，一個個方塊的格子狀的像素點。旁邊美女一邊走過時瞥見的話還以為你在看什么東西了，竟然還要打馬賽克！立刻投以鄙視的眼光或者一頓拳腳(如果是公交上的話)！怪誰？怪你朋友發(fā)給你的是位圖。而隨著現(xiàn)在Retina屏的流行和現(xiàn)代瀏覽器地矢量圖的支持越來越好，所以一度因?qū)崿F(xiàn)和支持難度而少人問津的矢量圖相信將會再次回到風口浪尖上，因為如果是矢量圖的話，無論你做多大比例的縮放，它都不會失真。而其實現(xiàn)在這種風潮已經(jīng)初露端倪，你看下當今流行的字體圖標和谷歌在大力推的MaterialDesign就可見一斑了。所以很有可能不久的將來你再打開朋友發(fā)給你的圖片找亮點的時候，可以放心的跟自己說：“自從有了矢量圖，媽媽再也不用擔心我被人打了”。動圖將上演王者歸來曾幾何時，動圖曾經(jīng)到處泛濫，泛濫到在你的網(wǎng)站需要更新的時候都要在上面貼個“網(wǎng)站正在更新”的Flash上去，泛濫到大家都覺得有點噁心了。但是現(xiàn)在情況有所轉變了，不少的流行因素正在試圖讓動畫上演一出王者歸來的好戲。扁平化設計的流行：正因為太扁太平太飛機場般的過于單調(diào)，動圖的作用就顯示出來了。只要你不像以前一樣在你的網(wǎng)站上鋪天蓋地的使用動圖，那么它就能將很多東西融合在一張動圖中來給你扁平略顯單調(diào)的頁面帶來不少的活力和視覺沖擊。移動應用的風靡：移動應用對人們的預期重新進行了定義，它更多是通過動畫來傳遞不同的意義，而我們的網(wǎng)頁設計也很應該開始效仿。HTML5等新技術的支持:這些技術讓我們不需要安裝任何插件的情況下就能使用動畫。所以說GIF動畫將要上演一出王者歸來的好戲。其實在本文你就已經(jīng)看到了好幾張GIF動畫。有必要相信，動畫將再一次引領大家進入到下一波網(wǎng)頁設計風潮。WebComponents組件標準化的到來另外一個我認為在網(wǎng)絡設計上將會盛行起來的是WebComponents組件技術。大家都知道現(xiàn)在的網(wǎng)絡實現(xiàn)技術正變得越來越復雜，而可讀性卻又變得越來越差。所以大家都期待有一個統(tǒng)一的標準來讓設計師們簡單的完成一些如增加個打開GoogleAnalystics的按鈕之類的事情，比如簡單的加一行下面的代碼來達成這個目標：而這就是WebComponents所能做的事情，但是現(xiàn)在很多設計師都沒有用它把自己給武裝起來。而現(xiàn)在谷歌Materialdesign就是一個很好的開始，它提供了豐富的動畫和交互方面的組件，用戶只需要如下圖般簡單幾行代碼就能進行使用：如果一切如我猜想般正常發(fā)展下去的話，那么很有可能我們的2015年下半年將會有更多基于組件的框架浮出水面，比如Bootstrap4.0?社交網(wǎng)絡內(nèi)容的泛濫和郵件列表風格的復古風在當今社交媒體這么盛行的年代，每天都有無數(shù)的內(nèi)容產(chǎn)生，讓人目不暇接。但是很多內(nèi)容提供商/者卻并不因此而歡喜雀躍。大家都在用微信，相信大家每天微信上面都有無數(shù)的圖片和日日更新的人生新方向的感悟出現(xiàn)在朋友圈里，開始的時候還好奇瞄幾眼，到了后來這些信息越來越多且千篇一律了，就變得視若無睹直接飄過了。同時也很有可能將一些朋友發(fā)送的優(yōu)秀內(nèi)容都錯過了，比如天地會珠海分舵發(fā)送的這篇好文。怎么回事呢？其實說白了就是內(nèi)容已經(jīng)飽和得有點泛濫了。比如你在微博上發(fā)個消息，很有可能立刻就會淹沒在信息海洋中消失得無影無蹤了。當然，這并不是說社交網(wǎng)絡將會從此沒落。我這里想表達的是，正是社交網(wǎng)絡所碰到的這種信息泛濫的問題，讓一些看上去陳舊而不起眼的利基市場茂發(fā)了生機。比如2014年就有不少如TimFerriss等的基于郵件列表的杰出博客開始冒起來，它們提供了優(yōu)秀的迎合郵件列表樣式博客的設計，