文章出處：Medium 作者：天地會珠海分舵　發(fā)布時間：2015-06-23

内蒙古網站制作，内蒙古網站設計，内蒙古網站建設，呼和浩特網站建設，呼和浩特網站制作、呼和浩特網站設計首選内蒙古呼和浩特先誠網絡科技公司。先誠官網：/

該文在Medium上的“頭條推薦”上排名第二位，可見其在國(guó)外同行中是備受推崇的。究竟有哪7個國(guó)外同行也趨之若鹜的設計風潮，直接來看譯文吧 >>>

譯者注: 本文來自Medium，中文版由天地會珠海分舵進(jìn)行編譯。發(fā)文時爲了讓國(guó)内的讀者更容易閱讀，譯者在編譯的時候有進(jìn)行比較大刀闊斧的删改，如果讀者覺得有疑問的，請評論中提出來，或者直接查看英文原文。

創業界流行一句話，“站在風口上，豬都(dōu)會飛”。其實這(zhè)句話我覺得放在設計界等很多其他地方都(dōu)适用，比如在設計界，我們可以說，“如果你把握住了設計風潮的脈搏，你很快就會飛躍成(chéng)設計先驅。”但是潮流這(zhè)個東西就好(hǎo)像真愛一樣(yàng)，人人都(dōu)說這(zhè)個世界上總有一個最适合的TA在等著(zhe)你，但是你窮其一生尋尋覓覓上下而求索，卻往往空手而歸。又或者給你找到了那個TA，卻發(fā)覺TA已經(jīng)成(chéng)爲别人的新郎/娘，自己卻隻能(néng)一邊深夜獨自空垂淚。

其實創業界和設計界的風潮也一樣(yàng)，你一直想比别人先一步找到未來的流行風潮，期望能(néng)率先站在風口上，孰料最終不是走錯了方向(xiàng)和風口出現的地方背道(dào)而馳，或者就是慢了别人半拍，最終隻能(néng)走到風尾巴上面(miàn)，而且還(hái)要是Peter Thiel在他的《從0到1》中提到的長(cháng)尾理論(幂次法則)的那條長(cháng)長(cháng)的尾巴上面(miàn)，眼巴巴地看著(zhe)别人投入了風口的懷抱。

所以風潮這(zhè)個東西是一個非常神秘的事(shì)物，上帝往往不會輕易的給你暗示。所謂“國(guó)之利器，不以示人”，如果大家都(dōu)知道(dào)風口在哪裡(lǐ)了，那大家一窩蜂的跑過(guò)去不就把風口給堵死了，從而也就無風口可言了。

但是，今天我就自動請纓，敢冒天下之大不韪，用本人尚算深厚的設計背景以及對(duì)這(zhè)幾年設計風向(xiàng)的觀察，跟大家提提我對(duì)未來網頁設計風潮的風口的猜想。如果大家覺得說的還(hái)算有點道(dào)理的，有錢的捧個錢場給個打賞，沒(méi)錢的捧個人場評論轉發(fā)來聲呐喊。當然，如果大家覺得這(zhè)是一派胡言的話，那也就隻能(néng)請你趕快離場，等下一篇文章上來再請你來好(hǎo)好(hǎo)捧場。

滑動優先于點擊

當然了，這(zhè)不就是我們今天打開(kāi)電腦天天在做的事(shì)情嘛。比如工作累了到 www.uisdc.com上面(miàn)去看個文章，發(fā)覺文章太多了難以選擇，所以就把鼠标挪到右邊點擊按住往下拉，或者用滑輪往下滾，看下下面(miàn)還(hái)有些什麼(me)出類拔萃的文章，找到了再點擊進(jìn)去查看。

但是你要知道(dào)現在已經(jīng)是移動互聯的年代，移動設備占據了用戶大量的網上浏覽時間，而移動設備的特點是屏幕相對(duì)比較小，而控件一般設計的比較大以方便點擊。所以用戶更希望的是能(néng)随心所欲的通過(guò)指尖快速的浏覽到指定的信息，而非通過(guò)鼠标慢慢的往下拉，然後(hòu)找到一行小的可憐的鏈接點進(jìn)去進(jìn)行查看。

所以這(zhè)個時候的設計更多應該是手勢操作優先，讓用戶可以通過(guò)手勢快速的定位到自己想要的内容。

況且現在移動互聯網的用戶越來越急躁和越來越懶，很少人有耐心去一個個條目仔細去查看去找到想要的内容信息。所以他們更希望的是能(néng)快速的在簡潔的屏幕上定位到自己想要的目标，如果能(néng)不讓自己動手就能(néng)自己出現就更好(hǎo)了。

戳這(zhè)裡(lǐ)就是一個簡潔且滾動優先于點擊的例子(動畫圖片太大上傳不了)；

而這(zhè)裡(lǐ)就是我們都(dōu)熟知的泰晤士周刊網絡版，它甚至的是無限循環的去滾動著(zhe)顯示文章，而不像傳統的PC浏覽那樣(yàng)，分成(chéng)無數個tag和頁面(miàn)來讓用戶進(jìn)行點擊選擇。而這(zhè)，我認爲就是這(zhè)種(zhǒng)風潮到來的一種(zhǒng)暗示。

雖然我不知道(dào)可穿戴設備如智能(néng)手表等什麼(me)時候能(néng)完全流行起(qǐ)來，但是我相信如果真流行起(qǐ)來的話，它裡(lǐ)面(miàn)的應用肯定是能(néng)更好(hǎo)的滾動顯示和通過(guò)手勢進(jìn)行方便的操作的。

折疊顯示將(jiāng)成(chéng)明日黃花

正因爲現在對(duì)頁面(miàn)進(jìn)行滑動是如此的簡便和随心所欲，且當今的智能(néng)設備的大小型号琳琅滿目，所以因爲一些内容過(guò)長(cháng)而進(jìn)行折疊顯示的方式已經(jīng)過(guò)時了 -僅僅將(jiāng)一些關鍵信息顯示給用戶，當需要的時候再去點擊個“＋”号什麼(me)的進(jìn)行展開(kāi)。

同時你也再沒(méi)有必要在一篇文章的前面(miàn)堆積大量的文字内容來讓用戶知道(dào)你下面(miàn)將(jiāng)要描述的是什麼(me)内容，因爲用戶很容易就能(néng)通過(guò)手勢操作滑動到它想要看的内容上面(miàn)去。

比如你看下人家Medium的做法，點擊一篇文章進(jìn)去，開(kāi)門見山的就是一張大圖鋪天蓋地的映入眼簾。用戶隻有往下滑動才會出現文章的内容，而用戶如果想快速查看某一個章節，隻需要多滑動幾下就到了。

所以取消折疊内容的顯示，這(zhè)我認爲也肯定是將(jiāng)要風靡網頁設計界的風潮之一。

快速的呈現和簡約的設計

我不知道(dào)讀者您算不算是個脾氣比較溫順比較随和的人，如果你自認爲是的話，那麼(me)如果因爲網絡太慢，本文下面(miàn)的内容到了現在還(hái)沒(méi)有完全加載完畢。那麼(me)，我相信你肯定會立刻火冒三丈，把網絡提供商的先人都(dōu)會問候一遍(網絡出問題的時候，我本人往往首先問候的就是網絡供應商，因爲人家貪污的話還(hái)收了錢幹活，而這(zhè)班人往往是收了錢還(hái)不幹活)。

在當今這(zhè)個生活節奏這(zhè)麼(me)快速的年代，什麼(me)最貴？時間最貴。每個人都(dōu)在争分奪秒的不甘落後(hòu)的往前狂奔，而因爲通過(guò)你的應用或者網頁找到一個想要的内容卻要耗掉我好(hǎo)幾十秒的寶貴時間，我能(néng)不暴跳如雷立刻拉黑嗎？

所以我們的設計要迎合我們這(zhè)些暴躁的用戶的需求，在能(néng)快速顯示之餘，還(hái)要能(néng)足夠簡潔的將(jiāng)内容顯示出來讓用戶能(néng)快速的弄懂這(zhè)是怎麼(me)一回事(shì)。

上圖顯示了頁面(miàn)加載時間和用戶放棄繼續浏覽的可能(néng)性的一個關系，可以看出來，一個頁面(miàn)如果加載太慢的話，對(duì)于大部分用戶來說，跟沒(méi)有加載是沒(méi)有什麼(me)區别的，因爲他們等不了幾秒就將(jiāng)你的頁面(miàn)或者應用給關閉掉，删除拉黑掉了。

簡潔快速的設計應該是讓人能(néng)夠快速的打開(kāi)并能(néng)愉悅的開(kāi)始欣賞裡(lǐ)面(miàn)的内容的，而不是等半天隻顯示了一半内容，或者内容顯示出來了卻耗掉用戶半天時間才發(fā)現這(zhè)裡(lǐ)面(miàn)根本沒(méi)有我TMD想要的東西。下面(miàn)就是這(zhè)兩(liǎng)種(zhǒng)設計的一個對(duì)比例子，誰更簡單扼要，相信不用我明說了吧。

大家對(duì)比下現在很多手機優秀App的設計和其他一些門戶網站的設計，就會爲這(zhè)些網站的設計感覺汗顔。因爲那些優秀應用裡(lǐ)面(miàn)的界面(miàn)超級簡約和漂亮，而之所以做成(chéng)這(zhè)麼(me)簡約的原因又正是因爲需要有好(hǎo)的性能(néng)來滿足浮躁的用戶的需求。

現在炙手可熱的扁平化設計其實隻是一個開(kāi)始，其最終的目标瞄準的就是簡潔和實時性。而這(zhè)，就是我認爲的另外一個網頁設計的風潮。

矢量圖將(jiāng)迎來春天

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

而随著(zhe)現在Retina屏的流行和現代浏覽器地矢量圖的支持越來越好(hǎo)，所以一度因實現和支持難度而少人問津的矢量圖相信將(jiāng)會再次回到風口浪尖上，因爲如果是矢量圖的話，無論你做多大比例的縮放，它都(dōu)不會失真。

而其實現在這(zhè)種(zhǒng)風潮已經(jīng)初露端倪，你看下當今流行的字體圖标和谷歌在大力推的Material Design就可見一斑了。

所以很有可能(néng)不久的將(jiāng)來你再打開(kāi)朋友發(fā)給你的圖片找亮點的時候，可以放心的跟自己說：“自從有了矢量圖，媽媽再也不用擔心我被(bèi)人打了”。

動圖將(jiāng)上演王者歸來

曾幾何時，動圖曾經(jīng)到處泛濫，泛濫到在你的網站需要更新的時候都(dōu)要在上面(miàn)貼個“網站正在更新”的Flash上去，泛濫到大家都(dōu)覺得有點噁心了。

但是現在情況有所轉變了，不少的流行因素正在試圖讓動畫上演一出王者歸來的好(hǎo)戲。

扁平化設計的流行：正因爲太扁太平太飛機場般的過(guò)于單調，動圖的作用就顯示出來了。隻要你不像以前一樣(yàng)在你的網站上鋪天蓋地的使用動圖，那麼(me)它就能(néng)將(jiāng)很多東西融合在一張動圖中來給你扁平略顯單調的頁面(miàn)帶來不少的活力和視覺沖擊。

移動應用的風靡：移動應用對(duì)人們的預期重新進(jìn)行了定義，它更多是通過(guò)動畫來傳遞不同的意義，而我們的網頁設計也很應該開(kāi)始效仿。

HTML5等新技術的支持: 這(zhè)些技術讓我們不需要安裝任何插件的情況下就能(néng)使用動畫。

所以說GIF動畫將(jiāng)要上演一出王者歸來的好(hǎo)戲。其實在本文你就已經(jīng)看到了好(hǎo)幾張GIF動畫。有必要相信，動畫將(jiāng)再一次引領大家進(jìn)入到下一波網頁設計風潮。

Web Components組件标準化的到來

另外一個我認爲在網絡設計上將(jiāng)會盛行起(qǐ)來的是Web Components組件技術。大家都(dōu)知道(dào)現在的網絡實現技術正變得越來越複雜，而可讀性卻又變得越來越差。所以大家都(dōu)期待有一個統一的标準來讓設計師們簡單的完成(chéng)一些如增加個打開(kāi)Google Analystics的按鈕之類的事(shì)情，比如簡單的加一行下面(miàn)的代碼來達成(chéng)這(zhè)個目标：

而這(zhè)就是Web Components所能(néng)做的事(shì)情，但是現在很多設計師都(dōu)沒(méi)有用它把自己給武裝起(qǐ)來。而現在谷歌Material design就是一個很好(hǎo)的開(kāi)始，它提供了豐富的動畫和交互方面(miàn)的組件，用戶隻需要如下圖般簡單幾行代碼就能(néng)進(jìn)行使用：

如果一切如我猜想般正常發(fā)展下去的話，那麼(me)很有可能(néng)我們的2015年下半年將(jiāng)會有更多基于組件的框架浮出水面(miàn)，比如Bootstrap 4.0?

社交網絡内容的泛濫和郵件列表風格的複古風

在當今社交媒體這(zhè)麼(me)盛行的年代，每天都(dōu)有無數的内容産生，讓人目不暇接。但是很多内容提供商/者卻并不因此而歡喜雀躍。

大家都(dōu)在用微信，相信大家每天微信上面(miàn)都(dōu)有無數的圖片和日日更新的人生新方向(xiàng)的感悟出現在朋友圈裡(lǐ)，開(kāi)始的時候還(hái)好(hǎo)奇瞄幾眼，到了後(hòu)來這(zhè)些信息越來越多且千篇一律了，就變得視若無睹直接飄過(guò)了。同時也很有可能(néng)將(jiāng)一些朋友發(fā)送的優秀内容都(dōu)錯過(guò)了，比如天地會珠海分舵發(fā)送的這(zhè)篇好(hǎo)文。

怎麼(me)回事(shì)呢？其實說白了就是内容已經(jīng)飽和得有點泛濫了。比如你在微博上發(fā)個消息，很有可能(néng)立刻就會淹沒(méi)在信息海洋中消失得無影無蹤了。

當然，這(zhè)并不是說社交網絡將(jiāng)會從此沒(méi)落。我這(zhè)裡(lǐ)想表達的是，正是社交網絡所碰到的這(zhè)種(zhǒng)信息泛濫的問題，讓一些看上去陳舊而不起(qǐ)眼的利基市場茂發(fā)了生機。比如2014年就有不少如Tim Ferriss等的基于郵件列表的傑出博客開(kāi)始冒起(qǐ)來，它們提供了優秀的迎合郵件列表樣(yàng)式博客的設計，吸引了不少人的眼球。因爲它們很清楚的知道(dào)，社交媒體泛濫的信息也許會引起(qǐ)讀者的反感而被(bèi)忽略掉，但是讀者往往還(hái)是很樂意去看每一封發(fā)送到他們的電子郵箱的郵件的。

所以，我個人認爲郵件列表爲代表的這(zhè)種(zhǒng)瞄準尼基市場的設計，也許將(jiāng)會成(chéng)爲未來的一股風潮，填補社交網絡做不到的那一片空白。

注：本文均來自百度搜索，如涉及版權問題，請聯系我們，我們會第一時間解決。