企業(yè)不要等閑把網(wǎng)站建設(shè)需求簡(jiǎn)樸化

譯者注: 本文來自Medium。發(fā)文時(shí)該文在Medium上的“頭條推薦”上排名第二位，可見其在國(guó)外同行中時(shí)備受推崇的。為了讓海內(nèi)的讀者更輕易閱讀，譯者在編譯的時(shí)候有進(jìn)行比較大馬金刀的刪改，假如讀者覺得有疑問的，請(qǐng)?jiān)u論中提出來，或者直接查看英文原文。

創(chuàng)業(yè)界流行一句話，“站在風(fēng)口上，豬都會(huì)飛”。實(shí)在這句話我覺得放在設(shè)計(jì)界等良多其他地方都合用，好比在設(shè)計(jì)界，我們可以說，“假如你掌握住了設(shè)計(jì)風(fēng)潮的脈搏，你很快就會(huì)奔騰成設(shè)計(jì)前驅(qū)。”但是潮流這個(gè)東西就似乎真愛一樣，人人都說這個(gè)世界上總有一個(gè)最適合的TA在等著你，但是你窮其一生尋尋覓覓上下而求索，卻往往空手而歸。又或者給你找到了那個(gè)TA，卻發(fā)覺TA已經(jīng)成為別人的新郎/娘，自己卻只能一邊深夜獨(dú)自空垂淚。

實(shí)在創(chuàng)業(yè)界和設(shè)計(jì)界的風(fēng)潮也一樣，你一直想比別人先一步找到未來的流行風(fēng)潮，期望能率先站在風(fēng)口上，孰料終極不是走錯(cuò)了方向和風(fēng)口泛起的地方背道而馳，或者就是慢了別人半拍，終極只能走到風(fēng)尾巴上面，而且還要是Peter Thiel在他的《從0到1》中提到的長(zhǎng)尾理論(冪次法則)的那條長(zhǎng)長(zhǎng)的尾巴上面，眼巴巴地看著別人投入了風(fēng)口的懷抱。

所以風(fēng)潮這個(gè)東西是一個(gè)非常神秘的事物，上帝往往不會(huì)等閑的給你暗示。所謂“國(guó)之利器，不以示人”，假如大家都知道風(fēng)口在哪里了，那大家一窩蜂的跑過去不就把風(fēng)口給堵死了，從而也就無風(fēng)口可言了。

但是，今天我就自動(dòng)請(qǐng)纓，敢冒天下之大不韙，用本人尚算深摯的設(shè)計(jì)背景以及對(duì)這幾年設(shè)計(jì)風(fēng)向的觀察，跟大家提提我對(duì)未來網(wǎng)頁設(shè)計(jì)風(fēng)潮的風(fēng)口的猜想。假如大家覺得說的還算有點(diǎn)道理的，有錢的捧個(gè)錢場(chǎng)給個(gè)打賞，沒錢的捧個(gè)人場(chǎng)評(píng)論轉(zhuǎn)發(fā)來聲吶喊。當(dāng)然，假如大家覺得這是一派胡言的話，那也就只能請(qǐng)你趕緊離場(chǎng)，等下一篇文章上來再請(qǐng)你來好好捧場(chǎng)。

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

先上圖：

上圖是否非常認(rèn)識(shí)呢？當(dāng)然了，這不就是我們今天打開電腦每天在做的事情嘛。好比工作累了去看個(gè)文章，發(fā)覺文章太多了難以選擇，所以就把鼠標(biāo)挪到右邊點(diǎn)擊按住往下拉，或者用滑輪往下滾，看下下面還有些什么出類拔萃的文章，找到了再點(diǎn)擊進(jìn)去查看。

但是你要知道現(xiàn)在已經(jīng)是移動(dòng)互聯(lián)的年代，移動(dòng)設(shè)備占據(jù)了用戶大量的網(wǎng)上瀏覽時(shí)間，而移動(dòng)設(shè)備的特點(diǎn)是屏幕相對(duì)比較小，而控件一般設(shè)計(jì)的比較大以利便點(diǎn)擊。所以用戶更但愿的是能為所欲為的通過指尖快速的瀏覽到指定的信息，而非通過鼠標(biāo)慢慢的往下拉，然后找到一行小的可憐的鏈接點(diǎn)進(jìn)去進(jìn)行查看。

所以這個(gè)時(shí)候的設(shè)計(jì)更多應(yīng)該是手勢(shì)操縱優(yōu)先，讓用戶可以通過手勢(shì)快速的定位到自己想要的內(nèi)容。

況且現(xiàn)在移動(dòng)互聯(lián)網(wǎng)的用戶越來越暴躁和越來越懶，很少人有耐心去一個(gè)個(gè)條目仔細(xì)去查看去找到想要的內(nèi)容信息。所以他們更但愿的是能快速的在簡(jiǎn)潔的屏幕上定位到自己想要的目標(biāo)，假如能不讓自己動(dòng)手就能自己泛起就更好了。

戳這里就是一個(gè)簡(jiǎn)潔且動(dòng)彈優(yōu)先于點(diǎn)擊的例子(動(dòng)畫圖片太大上傳不了)；

固然我不知道可穿著設(shè)備如智能腕表等什么時(shí)候能完全流行起來，但是我相信假如真流行起來的話，它里面的應(yīng)用肯定是能更好的動(dòng)彈顯示和通過手勢(shì)進(jìn)行利便的操縱的。

折疊顯示將成明日黃花

正由于現(xiàn)在對(duì)頁面進(jìn)行滑動(dòng)是如斯的簡(jiǎn)便和為所欲為，且當(dāng)今的智能設(shè)備的大小型號(hào)琳瑯滿目，所以由于一些內(nèi)容過長(zhǎng)而進(jìn)行折疊顯示的方式已經(jīng)由期了 -僅僅將一些樞紐信息顯示給用戶，當(dāng)需要的時(shí)候再去點(diǎn)擊個(gè)“＋”號(hào)什么的進(jìn)行展開。

同時(shí)你也再?zèng)]有必要在一篇文章的前面堆積大量的文字內(nèi)容來讓用戶知道你下面將要描述的是什么內(nèi)容，由于用戶很輕易就能通過手勢(shì)操縱滑動(dòng)到它想要看的內(nèi)容上面去。

好比你看下人家Medium的做法，點(diǎn)擊一篇文章進(jìn)去，開宗明義的就是一張大圖漫山遍野的映入眼簾。用戶只有往下滑動(dòng)才會(huì)泛起文章的內(nèi)容，而用戶假如想快速查看某一個(gè)章節(jié)，只需要多滑動(dòng)幾下就到了。

所以取消折疊內(nèi)容的顯示，這我以為也肯定是將要風(fēng)靡網(wǎng)頁設(shè)計(jì)界的風(fēng)潮之一。

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

我不知道讀者您算不算是個(gè)脾氣比較溫和比較隨和的人，假如你自以為是的話，那么假如由于網(wǎng)絡(luò)太慢，本文下面的內(nèi)容到了現(xiàn)在還沒有完全加載完畢。那么，我相信你肯定會(huì)當(dāng)即火冒三丈，把網(wǎng)絡(luò)提供商的先人都會(huì)問候一遍(網(wǎng)絡(luò)出題目的時(shí)候，我本人往往首先問候的就是網(wǎng)絡(luò)供給商，由于人家貪污的話還收了錢干活，而這班人往往是收了錢還不干活)。

在當(dāng)今這個(gè)糊口節(jié)奏這么快速的年代，什么最貴？時(shí)間最貴。每個(gè)人都在分秒必爭(zhēng)的不甘落后的往前疾走，而由于通過你的應(yīng)用或者網(wǎng)頁找到一個(gè)想要的內(nèi)容卻要耗掉我好幾十秒的寶貴時(shí)間，我能不暴跳如雷當(dāng)即拉黑嗎？

所以我們的設(shè)計(jì)要迎合我們這些急躁的用戶的需求，在能快速顯示之余，還要能足夠簡(jiǎn)潔的將內(nèi)容顯示出來讓用戶能快速的弄懂這是怎么一回事。

上圖顯示了頁面加載時(shí)間和用戶拋卻繼承瀏覽的可能性的一個(gè)關(guān)系，可以看出來，一個(gè)頁面假如加載太慢的話，對(duì)于大部門用戶來說，跟沒有加載是沒有什么區(qū)別的，由于他們等不了幾秒就將你的頁面或者應(yīng)用給封閉掉，刪除拉黑掉了。

簡(jiǎn)潔快速的設(shè)計(jì)應(yīng)該是讓人能夠快速的打開并能愉悅的開始賞識(shí)里面的內(nèi)容的，而不是等半天只顯示了一半內(nèi)容，或者內(nèi)容顯示出來了卻耗掉用戶半天時(shí)間才發(fā)現(xiàn)這里面根本沒有我TMD想要的東西。

大家對(duì)比下現(xiàn)在良多手機(jī)優(yōu)秀App的設(shè)計(jì)和其他一些門戶網(wǎng)站的設(shè)計(jì)，就會(huì)為這些網(wǎng)站的設(shè)計(jì)感覺汗顏。由于那些優(yōu)秀應(yīng)用里面的界面超級(jí)簡(jiǎn)約和漂亮，而之所以做成這么簡(jiǎn)約的原因又恰是由于需要有好的機(jī)能來知足浮躁的用戶的需求。

現(xiàn)在炙手可熱的扁平化設(shè)計(jì)實(shí)在只是一個(gè)開始，其終極的目標(biāo)瞄準(zhǔn)的就是簡(jiǎn)潔和實(shí)時(shí)性。而這，就是我以為的另外一個(gè)網(wǎng)頁設(shè)計(jì)的風(fēng)潮。

矢量圖將迎來春天

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

而跟著現(xiàn)在Retina屏的流行和現(xiàn)代瀏覽器地矢量圖的支持越來越好，所以一度因?qū)崿F(xiàn)和支持難度而少人問津的矢量圖相信將會(huì)再次回到風(fēng)口浪尖上，由于假如是矢量圖的話，不管你做多大比例的縮放，它都不會(huì)失真。

而實(shí)在現(xiàn)在這種風(fēng)潮已經(jīng)初露端倪，你看下當(dāng)今流行的字體圖標(biāo)和谷歌在鼎力推的Material Design就可見一斑了。

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

動(dòng)圖將上演王者回來

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

但是現(xiàn)在情況有所轉(zhuǎn)變了，不少的流行因素正在試圖讓動(dòng)畫上演一出王者回來的好戲。

所以說GIF動(dòng)畫將要上演一出王者回來的好戲。實(shí)在在本文你就已經(jīng)看到了好幾張GIF動(dòng)畫。有必要相信，動(dòng)畫將再一次引領(lǐng)大家進(jìn)入到下一波網(wǎng)頁設(shè)計(jì)風(fēng)潮。

Web Components組件尺度化的到來

另外一個(gè)我以為在網(wǎng)絡(luò)設(shè)計(jì)上將會(huì)盛行起來的是Web Components組件技術(shù)。大家都知道現(xiàn)在的網(wǎng)絡(luò)實(shí)現(xiàn)技術(shù)正變得越來越復(fù)雜，而可讀性卻又變得越來越差。所以大家都期待有一個(gè)同一的尺度來讓設(shè)計(jì)師們簡(jiǎn)樸的完成一些如增加個(gè)打開Google Analystics的按鈕之類的事情，好比簡(jiǎn)樸的加一行下面的代碼來達(dá)成這個(gè)目標(biāo)：

而這就是Web Components所能做的事情，但是現(xiàn)在良多設(shè)計(jì)師都沒有用它把自己給武裝起來。而現(xiàn)在谷歌Material design就是一個(gè)很好的開始，它提供了豐碩的動(dòng)畫和交互方面的組件，用戶只需要如下圖般簡(jiǎn)樸幾行代碼就能進(jìn)行使用：

假如一切如我猜想般正常發(fā)展下去的話，那么很有可能我們的2015年下半年將會(huì)有更多基于組件的框架浮出水面，好比Bootstrap 4.0?

社交網(wǎng)絡(luò)內(nèi)容的泛濫和郵件列表風(fēng)格的復(fù)古風(fēng)

在當(dāng)今社交媒體這么盛行的年代，天天都有無數(shù)的內(nèi)容產(chǎn)生，讓人目不暇接。但是良多內(nèi)容提供商/者卻并不因此而歡喜雀躍。

大家都在用微信，相信大家天天微信上面都有無數(shù)的圖片和日日更新的人生新方向的感悟泛起在朋友圈里，開始的時(shí)候還好奇瞄幾眼，到了后來這些信息越來越多且千篇一律了，就變得視若無睹直接飄過了。同時(shí)也很有可能將一些朋友發(fā)送的優(yōu)秀內(nèi)容都錯(cuò)過了，好比天地會(huì)珠海分舵發(fā)送的這篇好文。

怎么回事呢？實(shí)在說白了就是內(nèi)容已經(jīng)飽和得有點(diǎn)泛濫了。好比你在微博上發(fā)個(gè)動(dòng)靜，很有可能當(dāng)即就會(huì)沉沒在信息海洋中消失得無影無蹤了。

當(dāng)然，這并不是說社交網(wǎng)絡(luò)將會(huì)從此沒落。我這里想表達(dá)的是，恰是社交網(wǎng)絡(luò)所遇到的這種信息泛濫的題目，讓一些看上去陳舊而不起眼的利基市場(chǎng)向榮了氣憤但愿。好比2014年就有不少如Tim Ferriss等的基于郵件列表的杰出博客開始冒起來，它們提供了優(yōu)秀的迎合郵件列表樣式博客的設(shè)計(jì)，吸引了不少人的眼球。由于它們很清晰的知道，社交媒體泛濫的信息也許會(huì)引起讀者的反感而被忽略掉，但是讀者往往仍是很興奮愿意去看每一封發(fā)送到他們的電子郵箱的郵件的。

所以，我個(gè)人以為郵件列表為代表的這種瞄準(zhǔn)尼基市場(chǎng)的設(shè)計(jì)，也許將會(huì)成為未來的一股風(fēng)潮，填補(bǔ)社交網(wǎng)絡(luò)做不到的那一片空缺。