1. 黑暗模式

2.插畫設計

3.視頻banner

4.微交互

5.3D元素

6.幾何圖形

7.黑白設計

8. 大字體排版

9.復古風格

10.時尚配色方案

Web 技術的快速發展，不僅讓設計和產品足以滿足更多更細致深入的需求，也讓設計師能夠進行更細膩更獨特的表達。現今的網頁設計趨勢，已經不再僅僅局限于單一的技法，而更多是一種復合的、暗含意圖的綜合的設計方法。從色彩的選取、文本的布局、整體的界面設計和用戶體驗的呈現，都是當下文化和整個時代走向的一種反饋和外化表現。

根據今年最新的網站設計作品，這篇文章梳理了2019 年的網頁設計趨勢，有的是舊有趨勢回歸，有的則是正在悄然流行的新方向，希望能夠給你更多啟示。

1、在設計中傾注更多情感

Notation

與潛在用戶產生真正連接的唯一辦法，還是情感化的設計。就目前來看，2019年最優秀的一批網頁大都基于某種情感訴求，和用戶的快樂或者悲傷相通，讓用戶感到驚訝，或者巧妙地抓住用戶所焦慮的點，從映入用戶眼簾的時候就試圖建立信任感。

色彩是用戶的第一感知，同時，文本、圖片等元素應當和色彩在情緒表達上保持一致，方可帶來共鳴。通過高度統一的情感輸出，賦予用戶更進一步操作的欲望。視覺中的情感輸出決定了用戶的下一步操作。如果網站或者 APP 中所呈現的東西足夠吸引人，那么他們采取行動的機率就很高了。通過情感來吸引用戶，讓興趣和吸引力成為撬動用戶的關鍵。這也正是今年絕大多數優秀的設計作品所呈現出來的一種成熟的設計技巧。

2、用色彩來強化主題

Dice Berlin

明亮的色彩和鮮艷的色彩，在感知上其實是有所不同的。如果你能夠明白兩者之間微妙的差異，那么你對于色彩的掌控力就更上一層樓了。在圖片和動畫的基礎上疊加色彩已經是非常的流行的技法了，這種趨勢只會愈演愈烈，但是在色彩的選取和表達上，你需要更加小心，更加專業，才能比其他的設計項目更加具有表現力。

從現在最流行設計來看，明亮的藍色和柔和的紫色正在成為很多新網站和流行 APP 的配色選擇。色彩的選取并不是第一次成為影響設計趨勢的重要因素，但是在設計的進化過程中，色彩一直發揮著無與倫比的重要作用。

用流行的色彩來服務網站的設計吧。如果網站有現成的配色系統，那么你可以在此基礎上更好地部署充滿表現力的色彩。

3、目的性極強的動效

X Company

動效并不是新鮮的事物，但是它也隨著時間悄然變化，最新的動效設計越來越具有明確的目的性。每一個動效的意圖，都是將用戶引導到特定的位置，讓用戶于頁面中特定的元素進行交互。

動效本身不應該僅僅只是有趣，傳達愉悅感，不能剝離動效背后的目的性，而是要正向地為用戶操作注入力量。

即使是在現實生活中，大量的動畫效果也是為了快速吸引用戶注意力而存在的，它們比圖片更有張力。對于網頁設計師而言，借助不斷快速發展的網頁來抓住用戶注意力是必須要做的事情，現在正是最好的時機。

4、單頁設計的回歸

Goods

無限滾動依然有效，這使得單頁設計再次流行起來。將網站的所有內容重新鋪在首頁，向下滾動即可獲得，這樣的設計在2019年開始重新流行起來。用戶通過導航菜單，在頁面內快速跳轉。

隨著近年來移動端設計的快速增長，用戶對于滾動交互越來越習慣，所以單頁設計的合理性是不存在問題。不過，考慮到如今用戶的注意力集中時間并不長，所以單頁網站的設計過程中需要盡量讓用戶可以更快找到他們需要的內容。

5、超現實主義的設計

Gyor Moore

看慣了大量現實的設計，超現實主義風格的設計中所蘊含的豐富想象就顯得非常迷人了。在2019年的諸多網頁設計當中，那些比現實世界更夢幻的設計元素，顯得更加吸引人，影響力更大。

基于目標用戶所追求的情感和情緒來構建超現實主義的設計，能夠更快地同用戶產生情感聯系。這種獨特的視覺和獨一無二的情緒所創建的情感連接更加難以復制，而這其中，動畫、漫畫和奇怪的插畫占據了極大的比例。這些元素能夠帶來新鮮的體驗，而這本身就是影響力。

6、復古的字體排版的回歸

Haus

大家似乎已經厭倦了超級現代的設計風格，更加復古的襯線字體和肆意張揚的手寫字體在網站設計中重新回歸。與之前流行的非襯線字體相比，襯線字體有著更加吸引人的線條和邊角，這些精致的細節正是大家沉迷復古設計的原因之一。

而令人驚訝的一點在于，復古的字體和排版在目前絕大多數的屏幕上，所呈現出來的狀態已經越來越舒適了，從可讀性到視覺效果均是如此。

7、UX設計的關注點更加細膩

The New Yorker

隨著技術的提升，用戶對于網站的體驗，已經不止于可用、好用，用戶的關注點已經慢慢遷移到更加細膩的感知維度上，比如是否更加真實、是否從視覺乃至文本上體現出對于用戶的尊重和關心。因此，UX寫作成了設計師必須掌握的另外一個技能——文案是否走心，用戶很在意。

優質的文案能夠讓用戶留存下載，讓用戶和產品更容易聯系到一起，讓用戶獲得尊重感。UX設計的維度正在擴展，設計師需要更加精準地抓住用戶的注意力，這也是具有商業價值的設計方向。

8、多變的字體

The Unseen

在過去的幾年當中，字體本身經過了一個復雜的轉變過程。為了兼容更加復雜的屏幕環境，字體本身具備了越來越強的拓展性。Opentype 字體的靈活可變性讓無論哪個平臺上的UI界面內容，都可以清晰無縫地展示出來。

而多彩字體的出現，讓字體內的色彩和結構的展現，擁有了超乎以往的表現力。另外，諸如蘋果為 iOS 提供的 SF Symbols 以及越來越多的圖標字體，讓UI設計和字體的運用擁有了更多的可能性。

多變的字體，在2019年讓設計擁有了更多的可能性。

9、分屏可能帶來下一次革命

box

移動端設備的快速增長，讓響應式設計乃至于分屏設計成為了一個重要的需求。其實現在已經有平臺嘗試跨平臺、跨界面、跨屏幕的內容共享了，打通不同屏之間的用戶體驗，是2019年一個技術趨勢。

最典型的案例是 Mac 和 iOS 平臺之間的「接力」功能：在Mac 電腦上復制鏈接，通過快速的云端同步，在 iPhone 上接力打開頁面。在今年 9 月新的 iOS 、iPadOS 以及新的 macOS 上，更深層的屏幕共享將會出現。這個時候，分屏將不止是做簡單的屏幕復制，或者簡單的響應，屏幕內容的不對稱分割，甚至都有可能成為一種趨勢。

各種不同形態的內容，都可能會出現，異于以往的設計會越來越重要。

10、數據可視化

Google Cloud Showcase

信息圖表是設計的又一個熱點。向用戶呈現復雜信息和數據，信息圖表和可視化設計是最為有效的方法之一，因為它不僅可以帶來視覺愉悅感，而且足夠有趣，讓人能夠理解。

現在數據可視化可以通過靜止的圖片來呈現，也可以借助動畫來展現，具體的呈現取決于你的平臺和預期。

可視化的數據最好能夠和故事結合到一起，結合敘述和故事，讓信息以更加可信的方式呈現在用戶面前，這樣可以帶來更高的轉化率。

11、更多漸變色彩

Zef Cherry

漸變是一種功能更為豐富的設計趨勢，它幾乎可以用在所有的設計門類當中。如今，越來越多的設計項目正在使用漸變來呈設計，而網頁正是最為重要的門類之一。

漸變讓色彩更加富，更有質感，使得原本平淡的色彩擁有了近乎藝術化的表達。如今的漸變色彩更加豐富，而不僅僅是用作一種疊加于圖片的元素。如今，隨著對于漸變要求的提升，更多的相關色彩工具也誕生了。

12、使用3D來進行平面設計

Prior

雖然 3D 設計并不是什么新鮮的東西，但是頂級的網頁設計師經常在設計中用到 3D 設計。在平面設計當中使用 3D 同樣能夠帶來巨大的影響。3D 渲染所帶來的豐富細膩效果，能夠讓界面更加吸引人。

對于新手設計師而言，3D 軟件上手并不算太容易，但是一旦掌握了它，它所帶來的效果和可能性會非常的驚人。3D 軟件降維進入平面設計，所呈現的價值是無與倫比的。

13、更加立體和擬真的設計元素

Brand.Squarespace

雖然如今虛擬現實設備的普及率還沒有那么高，但是毫無疑問它的影響力正在提升，很快就會有用戶開始使用 VR 設備來瀏覽網頁了。

新的網頁 UI 將會需要在設計當中加入更多有縱深的、立體的元素，讓它們在視覺上更加具有真實的質感。即便未來有更多的新技術加入進來，也不足為奇。

14、更多自然的圖形和形狀

Studio Exchange

雖然絕大多數的網頁都使用柵格系統來進行約束，但是在新的技術支持之下，設計師可以更加自由地使用更多有機而自然的圖形和形狀。

有機的圖形，不規則、不對稱的圖形，增加了設計的深度，讓頁面能夠脫穎而出。這些圖形的靈感大多來自自然，也更能夠自然的吸引用戶的注意力。

15、更多微交互

Grand Image

微交互存在的目的，是以吸引人的方式來給予用戶以反饋、驚喜甚至制造一些微妙的「焦慮」。這是一種非常有效的引導方式，它是有信息進來的時候的通知彈出框，是刷新頁面完成時的提醒，是點擊之后的加載小動效。

微交互是一種一直在緩慢變化的趨勢，在 2019 年的網頁設計當中有明顯的增長，更加多樣的微交互開始出現在網頁設計作品當中，吸引著用戶的注意力，提供有效的信息反饋，提供引導。

16、更多視頻內容

Outrider

文本信息已經沒有以往那么具有吸引力了，更多的視頻內容也是自然的結果。不過隨著網絡帶寬和上下行速度的提升，等待視頻加載的時間越來越短，用戶也可以更加快速便捷地獲得視頻內容。

視頻內容不僅能夠更快的表達，也具備更好表達的可能性。作為一種主動輸出的媒體模式，視頻內容的優勢非常明顯。相應的，視頻內容的制作也需要更加注意，必須提供有意義的內容，才不會讓用戶有浪費時間的感覺。

結語

如果你仔細觀察這些趨勢的話，會發現這當中絕大多數的趨勢都只是之前趨勢的升級和發展。不同的文化和快速變化的時代，正在塑造新的趨勢。企業和公司期望能夠發掘能夠帶來商業價值的設計，同時還能兼顧時尚，能夠幫助業務有長足發展，這才是最重要的事情。找到這幾個關鍵之間的平衡點，就能夠創造有價值的設計。

作者：niceverynice

編輯：陳子木

原文鏈接：https://niceverynice.com/blog/web-design-trends-2019/

但創意是一種對話。

自從我們第一次學會用木炭在洞穴壁上的赭石記錄世界的片段以來，這種對話就一直在進行。我們還學會了把僅僅是用棍子刻在粘土上的抽象符號，變成了承載著充分含義的載體——語言。

趨勢僅僅只是龐雜而混亂的多方談話中的主音，無論是否應用趨勢，我們的創造都與這些趨勢并存。

趨勢為我們提供了大背景，畢竟如果沒有規范，又何從定義創新？如果沒有去年的熱點潮流，又從哪里尋找規范？

所以和去年一樣，我和webflow優秀的設計團隊一起，預測了2018年的設計趨勢。

以下來自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

1.破碎的網格布局

設計師總是無盡地去追求更具創意、更引人入勝的布局，但在這個過程中網格布局一直廣受運用，網格布局能帶來和諧和規范的感覺，但網格本身就存在約束。

有時候我們自己都想逃離網格的規范性，對吧！

但這并不意味著破碎的網格布局完全忽略了網格的概念，相反，破碎格局允許圖像和文本元素更自由地出現，而在更規范的布局中，元素的排布往往需要按部就班。在這里，圖像和文字的位置開始重疊和匯合，位圖和字體的并置往往都會出現美麗的意外。

有時候很難說這些效果是故意的，還是只是一個美麗的錯誤…

2.將插圖放在中心位置

我在數字產品營銷領域所看到的一個比較有趣的挑戰就是選擇合適的圖像。我看到過整個設計團隊針對這一議題進行討論，并且通常結束于兩點之一：

•   產品UI（用戶界面）截圖及動圖
•   設計過的或是生活化的攝影

前者強調產品本身的體驗、特征及功能，而后者則試圖強調產品的人性層面：它對生活的影響。

進入2018年后，我們可以看到并將繼續看到，在產品的設計和營銷方面，插畫師的工作越來越受重視。

我對這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們在時尚界所看到周期性相同，畢竟插畫在整個60年代后期一直占據著廣告界的主導地位。

或者，Dropbox的設計團隊可以通過解釋他們的新插畫風格來解決問題：

我們用鉛筆構建草圖，然后用豐富多彩、抽象的形狀來填充，將創意變為現實。我們的風格的靈感來源于你第一次有想法的瞬間，這種風格也在提醒我們，除非你有所行動，否則畫布上只有空白。

我想，這就是說，他們必須重新設計一些東西，對吧？

在Shopify的Polaris網站中可以看到，插圖可以將很多抽象的概念具體化于生活中。僅僅只是一張畫作，Shopify就闡述了Polaris的概念—就像北極星一樣，為團隊中的每一位成員指明方向。

最后，值得注意的是，插圖也可以巧妙地解決攝影帶來的一些具有代表性的問題。

我們為大眾提供數字產品，但當我們將一張真人攝影作品放在網站上的顯著位置時，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。

相比之下，Shopify Polaris的插畫主角形象僅僅只是個人類，并不能確定諸如種族、性別、國際等屬性，這使得我們更容易地將自己代入這樣的場景中，就像我們自己就是一個獨立地思考者，思考這北極星所照亮的創造的可能性。

3.野蠻主義達到主流地位

2017年初，我們發表了一篇文章，談及野蠻主義的興起，并試圖回答出現新興風格的原因：

野蠻主義……正在開啟一個設計師想做什么就可以做的空間，這甚至超出了應該做什么的范疇。野蠻主義的作品往往避開了所有的最佳建議和最好實踐列表上的東西，以支持震撼的外觀和效果，有時甚至帶有一些攻擊性。

所以你可以想象，當這兩個電子商務網站都坐上這股粗獷潮流的列車時，我們有多驚訝。

Balenciaga

Gucci

4.更多有機和傾斜的形狀

大自然厭惡直線。——William Kent

近幾年來，無論是網頁端還是移動端的設計都是由卡片式的用戶界面占據主導地位。直到現在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎的幾何形狀，使得大家去關注網頁設計的基礎材料。

這在2017年有了很大的改變，現在，從谷歌到推特再到臉書，幾乎每一個應用的卡片都應用了圓角，比如輸入框、頭像框等。

如果這些框都是圓角的，他們就會是橢圓形的。

但這并不是有機形狀的主要組成元素。現在的背景設計往往有很多顏色各異的變形斑點，略夸張的對角線，即使是我們平時所用的破折號也會被卡通化。

但在無盡的探索中，設計師總不能僅僅只是運用靈活的曲線，很多人都會把卡片旋轉一些角度，運用角度來進行設計，就像Stripe的主頁一樣。

但這并不意味著直角將會在設計中消失。在下圖中，我們可以看到直線和直角的運用，不過是把它們與更多的曲線、球形有機地結合在了一起。

在許多網站，我們都能看到閃爍或是振動的顏色。雖然這些顏色的組合能夠讓人留下深刻的印象—包括在眼睛中留下殘影—不過值得注意的是，在可訪問性的層面上，顏色組合的使用可能會出現一些問題。

通常我們都將可訪問性作為為殘障人士所做的用戶友好行為，但不要忘記，即使是不存在色覺障礙的人也可能會遇到令人眼花繚亂的色彩組合。

不開玩笑，當這些形狀滾動起來，你就會看到你的屏幕上全是這些東西了。

根據LinkedIn的無障礙工程經理Jennison Asuncion的說法，可訪問性可以定義為：

設計和開發包括殘疾人在內的每個人都可以獨立使用和互動的用戶界面。

5.更普遍的交互和動畫

媒介就是信息。–Marshall McLuhan

網頁并不是一個靜態媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實性，但網頁上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網頁信息在于網頁的變化和交互：網頁不能只是簡單地向我們提供信息，而應該是讓信息生動起來，更重要的是，讓我們與這些信息進行交互并對之產生影響。

有的信息都在移動，但這并不影響集中注意力。

漸漸地，當你滾動網頁滑塊時，一塊一塊的信息并不僅僅只是被你接受了，還會影響你的認知，并且企圖得到你更多的關注。

顯然，我們也不能濫用這種生動，會使得網頁看起來像動畫一樣，要小心這會影響你的用戶體驗，尤其是那些有認知障礙或對運動敏感的人。

但不能否認，恰當的小動畫能夠在恰當的時間引導用戶注意正確的內容，從而使得他們不會錯過重要的信息，或是訪問其他頁面。

以Black Sheep的Heco Partners為例，向下滾動時，標黑的當前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭奪用戶的注意，呼吁停止閱讀并點擊下一頁。這是創建一個內聯導航系統的創造性方案，但這也可能給用戶帶來了不必要的緊張感。

我們也可以看到很多工具可以簡化復雜動畫和交互的創建—這是數字設計是工具包中的一個缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來。

具體而言，我們期待兩種特定的動畫模式的出現：不尋常的滑動速率和頁面轉換。

意外的滑動率

現在視差可能有些過時了，但這并不意味著設計師們不會以有趣的方式來設計滑動。

例如網站Anna Eshwood，網站上的每一張照片一開始都是正常的展示，直到用戶下拉滑塊滑過后，照片都會快速上升，比滑塊滑動速度快，營造出一種有趣的飄渺感，可以很好地展現簡樸的黑白照片和嚴肅的模型。

隨著交互和動畫在在線體驗中更為突出，我們也期望看到更多的設計師設計出更具突破性的作品。

頁面轉換

在一個充滿好看動畫的網站中，我們能感知到，網頁上正在發生一些變化，但如果是從一個頁面轉換到另一個頁面，就會比較唐突了，無論是在哪個網站上。

轉換動畫可能會有所用處，它能將用戶從一個頁面送走，再在另一個新頁面上迎接。不過要謹慎運動轉換動畫，也沒有必要鏈接它們。這個過渡本身就是每一個頁面之間的轉換：頁面突然變為一片空白，然后再有新的頁面加載。

但我們發現在這一點上，很多網站都搞了一些事情。以網站3drops為例：

在這里，頁面轉換時依舊保證了用戶的體驗，體現了品牌的存在。當用戶想要訪問是視圖庫中的另一視圖時，髕骨是被導航到了新的頁面。這對于以設計為中心的品牌展示來說，是一個不錯的點子。

6.至多主義的出現

好的設計盡可能少設計。–Dieter Rams

多年來，設計師最想聽到的最振奮人心的設計反饋，恐怕就是：“他很干凈。”

那是一個極簡主義的時代。深受Dieter Rams的設計原則，以及雜志《The Crystal Goblet》的影響，視覺設計師一直追求提供盡可能少的選擇和視覺干擾。

對于當今生活在數字中的世界來說，極簡主義是一個全新且難得的經歷，這個選擇很有意義。我們需要足夠放松以進入這個陌生的新世界。

但是今天，我們也有類似于以下的網站：

Pin-Up Magazine

H. Lorenzo

Razzle Dazzle Torino

所有的這些都力圖在你看到的那一刻就把所有東西都放入你的世界里。

你可以稱之為一種野蠻主義，我也的確在Brutalist網站上發現了所有上述網站。但我們認為我們期待更多至多主義的網站的出現，而在這之前你可能并不覺得這個網站會變成這樣。隨著數字技術的發展，一些網站會很自然的對用戶有更高的期待。

7.襯線字體能表現得更好

在技術落后，字體并不多的糟糕過去，在網頁界面中使用無襯線字體是個很好的方法。但隨著屏幕和字體渲染技術得進步，我們可以看到越來越多精致得字體占據舞臺中心，或者至少成為了更重要的角色。

以Kickstarter最新的設計為例，他運用了柔和的襯線：

或者是大膽的標題：

在特定的日子里，Typewolf都會展示一些襯線的運用：

襯線能提供一種優雅、精致的文學修飾效果，作為襯線的長期愛好者，我歡迎大家多多使用襯線。

8.浮動的導航菜單

固定的導航已經成為以轉化為中心或具有龐大菜單的網站的主流，因為核心導航可在滑動時與用戶保持一致。不過浮動的導航使得用戶在滑動瀏覽時也能輕松使用，直接優化了網站體驗。

最近，我們注意到有些設計師將導航從其他設計中分離出來，并將其移動到瀏覽器的下方，進一步確定了用戶可以隨時接觸到導航。這增強了導航是網站的廣泛對象的感覺，不一定是某一頁的一個部分，而是放在一個觸手可及的地方，使人安心。

最直觀的方法就是在導航欄中添加陰影，并將其移動到網頁的最頂端，以Reseau為例。但在平面的設計中也是可行的，以Anchor & Orbit為例。

與離線型設計類似，浮動的導航允許設計師在設計中自然地或帶有目的性地運用巧妙的并置，這又給設計帶來了更多的空間。

9.視頻元素

當你想用可視格式傳達復雜的信息時，靜態圖像往往都難以達到效果。畢竟，復雜性需要時間來表現，而一個用戶界面上的靜態圖像只會告訴你圖片上的內容，而不是如何使用。

以下是幾點重要的原因：

• 視頻元素可以無縫地切入設計中，無需嵌入Youtube或是Vimeo插件。
• 即使有很多顏色，漸變和細節，視頻地質量依然很高，但如果GIF動圖不按大小以指數倍數放大，則很難做到。
• 視頻可以循環以確保副本的細節和圖像的細節保持一致，并為有需要的人重復播放。

所以從我們自己的網站到Stripe Sigma，當視頻元素風靡整個網絡時，我們并不感到奇怪。

10.更多身臨其境的“多媒體”長格式

當我們想要發布長格式的內容時，只需在頁面上放置一個長文本字段，特別是當我們的長格式內容有CMS支持時。其中，單個布局的內容長度大概為200字到一篇較為詳細的短教程的長度。

但現在一些設計師和作家并不采用這種方法，他們將布局和量身定制的副本結合起來，通過視頻、聲音、圖表和圖形、地圖等豐富的載體，娓娓道來故事的內容。

說實話，這并不是一個“新”趨勢，我更傾向于把它稱為網絡產生長期對話的基石。但現在所有的網絡出版工具都出現了，包括我們在內，2018年似乎都是最佳時機。

以CNN講述全球變暖對格陵蘭島和全世界其他地區的影響為例。

這個故事盡可能地做到引人入勝，這對于很多還較為抽象的問題來說至關重要。它巧妙地將一個復雜的話題變成一系列便于理解的段落。你永遠都不會覺得內容過于冗雜，相反你總是不知不覺就接受了，你發現自己閱讀每一個字，都很容易理解。

請注意，我并不是批評CMS，事實上，我們可以利用CMS來提供這種體驗。這里只需要一點小技巧：利用背景圖片和視頻來傳遞所有的視覺效果，在編寫、設計時仔細檢查每一個故事的一致性。這就和“博客”的格式不大一樣了。

如果你正在尋找更有吸引力的長形，我不會推薦紐約時報上由Tuam拍攝的“失落的兒童”。

值得一提的是，這樣更為多樣化的長格式可以用破碎網格或者標準布局進行組合，正如上面的紐約時報片段所示。

11.可變的字體！

在今天看來，我們很難相信就在幾年前，我們還不得不依靠稀少的字體來呈現我們所有的文本內容。

今天，網絡上到處都是各種各樣華麗的字體，從而引發了人們對字體印刷、字體設計和選用、消費字體的興趣。

可變字體出現后，這一趨勢愈演愈烈。科技和印刷技術的巨頭——蘋果、谷歌、微軟和Adobe之間有一個可變字體聯合項目，這使得可變字體實現了一種全新的字體設計形式，正式增加了opentype格式，這意味著，允許設計師插入一個字體的整個詞庫或者有多達64000axe（磅值、字號等）的單個字形，并在設計空間中將特定位置定義為命名實體（粗體、濃縮等）。

說實話上面這段文字有些難懂了，那么請直接看John Hudson的解釋，他認為可變字體是：

一個字體文件的行為像多個字體一樣。

但是在討論字體設計等視覺藝術時，最好還是堅持從視覺方面入手。

簡而言之，這就是一個可變的字體，一個單一的字體文件，能夠變黑，而不需要調用其它字體。

12.內容中心–或稱webook？盡量酷起來！

（注意：內容一直很酷）

作為一個內容為王的極客，我很高興看到在2017年產生了如此之多的有見解、極有幫助的內容。我相信2018年我們會見到更多，畢竟2017年已經打下了很好的基礎。

我們也可以看到，有很多領先品牌將pdf格式用于電子書領域并充分發掘網絡出版長內容的潛力，我喜歡稱之為“webooks”，這很具有吸引力。

具體而言，我指的是：

Stripe Atlas Guides

AirtableUniverse

DesignBetter.co

Intercom Books

我們自己的電子書網站

我想不需多言了吧！

13.CSS網格

Robin Rendle的CSS網格演示，來自CSS-Tricks。

正如Robin Rendle極具有表現力地將它放在了CSS-Tricks上：

那么，CSS網格是第一個真正地網頁布局系統，它旨在將內容組織成列和行，并最終為給予開發人員最高的權限。

此處應有得逞了的笑聲。

注：Webflow 將支持CSS網格，但尚未提供官方日期。

14.追求完美的數字設計工具

2017年是一個重要的年份，尤其是對于深入討論設計工具的性質及其 對我們工作的適用程度。

Spectrum的Bryn Jackson分享了自己的看法：

設計成品和設計工具之間的中間格式，可以為產品團隊和設計人員提供更高效、更強大的工具。

在一篇名為“接口”的文章中，他繼續假設：“今天所有的每一種流行的設計工具都是為了優化插圖。”

（需要注意，Bryn Jackson對于插圖的定義是導致圖像、圖標、插圖、字體、廣告、印刷媒體或其他沒有本地交互性的可視通信媒介的任何設計工作，但這是一個有爭議的定義，其中沒有提到閱讀和交互形勢。）

除了插圖和交互性的定義以外，不難看出，Bryn Jackson的觀點：在最基礎的地方，大多數現代設計工具都注重圖像的制作而不是接口。

設計師兼工程師Adam Michela在“I’m a Designer at Facebook, and This Is What’s Missing in Design Tools Today.”中提出了一些相同的觀點。他認為大多數設計師花費大部分時間來創建實際價值并不大的少量工件。而這些工件僅代表最終產品—數字接口，這與上述的情況背道而馳。

在文章的最后，他積極地認為，有機會創建融合（而不是橋接）設計和實現的工具。

這正是我們試圖在webflow上構建的。像Michela，我們希望一個設計交付的不是網站的示意圖，而是網站本身，不是接口的文檔，而是接口本身。在這個過程中，網站能不斷地修改、完善，還可以保存時間線上的不同版本，可以檢查，甚至點擊一個鍵就可以恢復。

15.多樣性和包容性使得設計更具挑戰

Webflow是一個公平的機會雇主，我們致力于建立一個團隊，這個團隊不僅在觀念和身份上具有多樣性，并且受到鼓勵。– Our job listings

在Webflow所在的美國，日益激烈的政治環境正在推動對多樣性和包容性在設計中的作用的強烈關注。

我們不得不承認，設計的選擇，小到性別的下拉列表中包含了哪些選項，都能影響我們同胞中的一些人。我們可以清楚地看到，錯誤的消息、措辭地影響有多嚴重，數據驗證機制在人機交互地動態機制中有多強大。我們意識到，讓種族成為廣告的過濾器會產生徹頭徹尾的種族主義效果，從而維護我們許多人希望看到被顛覆的現有權利體系。

我們也清楚地意識到，如果我們地團隊沒有多元化和包容性，我們也沒有辦法提出設計方案。

最起碼，我們中的一些人不能。

另一方面，我們也看到了性別歧視在明顯的自相矛盾和邊緣化之后抬起了丑惡的頭顱，甚至會化身在看似道德的日常對話中。性別歧視就是雙重標準的明顯例子。

最終，作為用戶體驗專業人員，我們的工作是為每個人提供可用且理想愉快的體驗，而不論他們的種族、國籍、信仰等個人情況。

換句話說，我們的工作就是包容，讓我們一起在2018年，包容更多，獲得更多。

16.視頻的廣泛應用

盡管我們幾乎沒有人大肆鼓吹視頻將會成為網絡發布媒體，但發行商仍然非常看好轉播。

視頻早已到處可見：從一開始就堅持使用視頻而不是短故事的新聞網站，到Snapchat，再到Instagram，最后到Facebook。無疑，Excel很快也會趕上潮流！

但就像科技領域的大多數事情一樣，這并不是一個平穩的發展，成千上萬的記者在文本和動圖之間丟掉了工作。

對于轉播的網站來說，前景也可能不是很好。根據哥倫比亞新聞評論：

轉播的發行商們僅花了一年的時間，就用無差別的、平淡的快餐式視頻，驅散了大多數來之不易的本土觀眾。

獨立新聞業至今遭受創傷，這要歸功于特朗普，而視頻的宣傳也沒有幫到他們。

值得一提的是：根據Digiday的說法：“展示一千次視頻的費用遠高于展覽一千次的費用。”在理想的世界里，報紙可以在打更少的廣告。

當然，這不會發生。

面對這一切，請記住文字作為創意和信息媒介的優勢：

•   生產速度相對較快
•   便宜
•   仍是網絡上大多數通信的主要形式

最后一點可能也會讓人費解，但我希望你能去各個社交網站看看。除非你點開的是Instagram，Pinterest或Snapchat，否則你仍會看到大量的文字。即使在這些視覺效果站第一的平臺上，文字仍然扮演者重要的支撐角色。

因為一張圖片可能在捕捉場景時值得多說幾句，但圖片很難捕捉到具體的內容，人物、時間、地點、原因和方式。

這使得我們很自然地談及下一點：

17.用戶體驗寫手的持續興起

任何影響設計的人都是設計師，這包括開發人員、CFO甚至公司法律。所有的這些都可以是設計師。–Jared Spool

我在去年的設計趨勢中談到了這一點，但我今天想將注意力更多地放在被稱為用戶體驗寫手地原因上。

簡而言之，UX寫手們專注于用戶界面中的內容，這些內容主要用于大型數字產品和web應用程序。現在，我說我是為Webflow產出內容，過去是為了Linkedln，人們都會問：“這是啥？”

但請放心，用戶界面都有寫手地痕跡。并且這些內容往往在你的理解過程中起到關鍵作用：

•   你可以在用戶界面中做什么
•   如何做這些事情
•   你可能會遇到什么限制和困難

但UX寫手能做的不僅僅是這些。用戶界面中的詞匯也是塑造好的用戶界面背后的品牌認知的強大工具。試想一下，如果你看到的所有推文，所有應用中，都有一系列的搞笑文章，或者是在404頁的展示中都有亮點，這些都是為了在最不理想的時候敦促你的行動。

這在被稱為Chatbot的UI格式中顯得尤其明顯。一般來說，這些用戶界面只包含單詞，單詞構成了整個用戶界面。Chatbot的個性、品牌都只能通過語言表達，不過也有一些精心挑選的表情符號來調味。

作為一名經驗豐富的UX寫手，我很高興看到這個關鍵角色得到了它應有的更多認可。

我們也是設計師，不過我們是在音節和字母表中工作，我們迫不及待想要和你合作。

18.系統化

現在，設計已經贏得了重要的位置。設計的對話已經從價值主張轉移到更成熟的分析，即如何使設計作品的成功更加系統化，更加具有擴展性且在品牌的許多產出和不同環境中具有凝聚力。

設計系統專注于將品牌美學和功能方法轉化為模塊化的組件，這些模塊化組件可以混合搭配以滿足任何UI的獨特需求（理想情況下）。當設計語言被系統化時，就簡化了設計決策，縮短了開發時間，并且能讓設計人員在尚未建立設計模式的項目上更好地工作。

通常情況下，品牌正處于這一趨勢之上。UXPin推出了Systems，這是一款用于創建和維護設計系統的工具。Shopify推出了Polaris，憑借其獨特的內容、設計和開發指導方案而獲得高度贊譽。UX Power Tools推出了一個想要使Sketch稱為可行的設計系統工具的庫（我們即將會看到！）

我想2018年會有更多這樣的消息。

19.原則—設計的第一要務

設計界一直糾結于雞還是蛋的問題：內容至上還是設計至上。

我過去一直都是支持內容至上，這并不僅僅是因為我是一個內容的極客。對于我來說，在確定怎么包裝之前，確定所包裝的信息是最符合邏輯的。

但最近，由于我已經由特定交付品的內容設計專項更系統化的工作，品牌內容策略，我對我們的工作是否遵從內容還是設計變得柔和了起來。

它應該從原則開始。

不論其他一切如何工作，我們都應該明確原則，并依賴于這些原則。

當Shopify的高級UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：

如果系統是為了實現真正的工作而創建的，它應該反映一個組織的行事準則及其價值。這也是說，一個不包含任何原則或價值取向的設計系統沒法考慮日常實踐中的這些問題。

原則為其他所有決策提供了一個框架，從主要內容要多長到內容的背景是什么都有所限制。畢竟，品牌是建立在其原則至上：品牌的使命、愿景和目標。這些名詞都需要一個進出的信念來作為支撐，使之成立而不倒。

換句話說，原則回答了為什么。

例如，在Webflow上，我們的使命是鼓勵設計師，企業家和創意者將他們的想法帶到網絡上。這一使命融入了我所做的一切，從Ryan為我們創造的美學到我設計的語音和音調標準。

這些標準知道我們創建草圖，溝通我們的意見，并希望每篇文章、電子郵件和廣告頁面能更豐富。到目前為止，這是一個溫暖的搖籃。

你認為2018的數字設計將會如何？

每當我將這些點列在一起時，我的腦海里會涌滿很多與之相關的想法，時間的流逝也使得我不得不優先考慮一些。

這是為什么我放棄了一些顯而易見的熱點但迄今為止對網絡的影響有限，比如去年提到的AR和VR。考慮到這一點，你會在這個列表中添加什么？

感謝閱讀!

原文地址：webflow

譯文地址：玩皮兔設計（公眾號）

作者：JOHN MOORE WILLIAMS

1. 打破框架的版面設計

過去幾年，一成不變的網頁布局（layout）已開始令人疲乏，幸而Flexbox 以及CSS Grid!（Chrome、Firefox 預計于今年三月開始支援）等技術的出現，讓版面設計變得更靈活彈性，為設計師、工程師帶來更寬廣的揮灑空間，今年將可看到更多網站打破慣有的「對稱」、「秩序」守則，形形色色，層層疊疊的網頁布局肯定精彩。不過不變的大原則是，設計的重點是要烘托「內容」，內容才是骨肉、才是人們光臨網站的主因，因此設計的尺度上也需斟酌，天馬行空之余，別反客為主，奪走內容的風采。

2. 極簡out，色彩在跳舞！

色彩作為表達個性的重要元素，在極簡風蔚為風潮時卻被剝除，不過約莫去年開始，大面積漸層色塊似有強勢回歸，Instagram、Asana、Stripe 都以飽和的漸層重塑品牌視覺主調，今年絢爛的色彩以及流動的漸層更將大行其道；此外，影像以雙色調（duotone）后制，也可能會是今年的潮流。設計師，Sarah Hutto 預言，今年將會是很「funky」的一年，期待強烈的色彩刺激人們的視覺感官。

與前兩年的明亮輕盈、以及上述張揚鮮濃的色彩對比，以相對沉著冷靜的黑色作為主色調也是愈來愈多網站的選擇，只要「輔色」（accent color）搭配得宜，黑色一點也不沉悶，反而能在一片光彩的世界里脫穎而出。

3. 華麗且實用的動態效果

動態效果在當代的網頁設計領域扮演舉足輕重的角色，今年也絲毫沒有退流行的跡象，反而應用會更廣泛。適當的動態效果，具有突出重點、爭取注意力的用處，今年以 SVG、CSS 創造的動態效果預料將大幅增加，滾動視差（Parallax Scrolling）也愈來愈華麗。但設計師應考量品牌或內容的內涵以及每個動態效果的意義，避免「為動而動」。

4. 創造小驚喜的「微互動」

「微互動」在網頁上也會愈來愈流行，比如滑鼠移過、點擊各式網頁零件如按鈕，卷軸滑動過程中，適時出現細致變化，也能夠有提示重點的作用。當然，就跟動態效果一樣，設計師也要拿捏「動」的意義與幅度，才不致畫蛇添足。

5. 不失真、載入快的 SVG 向量圖檔大行其道

比起傳統圖片格式JPG、PNG、GIF 以像素構成，近年興起的可縮放向量圖片SVG 在網頁上具有更大優勢，以標記式語言（XML）組合圖形，繪制矩形、圓形、線條都是小事一樁，復雜的填充、形狀也難不倒它，也能輕而易舉制作動態效果，而且不受解析度影響，無論利用什么螢幕、什么裝置觀看，都不會破壞圖像品質。 SVG 勝出更關鍵的是，不需 HTTP Request，能夠大幅提升網站載入速度。例如這個便是以 SVG 繪制的后背包。

6. 巨大字體精準傳達品牌意涵

首頁以巨大的字體呈現品牌主旨，也將是今年隨處可見的風潮。不過「巨大」并不代表加寬加粗，而是以恰當的字體設計，言簡意賅、精準表達產品精神，取代冗長贅言。而字體與背景或色彩互動、或者在字體上塑造動態效果，也是可以嘗試的作法。

7. 虛擬實境技術結合內容

虛擬實境的話題從前年延燒到今年，科技巨頭對虛擬實境的投資力道絲毫沒有減弱的跡象，特別是Facebook 未來十年將砸下 30 億美金專注虛擬實境的研發。可預見的是技術更臻成熟，也會有愈來愈多媒體或品牌運用虛擬實境科技「說故事」，為人們創造更身歷其境的感受。

8. 為不同使用者量身打造內容

對內容網站而言，有效的把「對的內容」傳遞給「對的使用者」，是這幾年備受重視的能力。不過能夠命中核心的卻不多。因為要達到跟隨情境給予特定內容，需要考慮不同使用者的不同特征，例如，使用者來訪網站的目的是私人之用還是為了工作？使用者是從哪里來到網站的？使用者此刻正在做什么？他們以前在網站上的行為又是什么？他們使用什么電子裝置上網？他們現在是登入狀態還是登出？

這些特征綜合起來增加了復雜性，有些媒體使用「推薦閱讀」機制或如 Facebook 以演算法為個體決定不同訊息流。而如 Fubiz 則用「Creativity Finder」，讓使用者自行設定「身分」、「區域」、「目的」三個條件，過濾最符合要求的內容給予不同使用者。

9. 「登陸頁」重于「首頁」

登陸頁（landing page）與首頁（homepage）的差異在于，前者有個非常明確的目標，例如希望使用者注冊、訂閱電子報、甚至購買，而首頁則如自家門口，提示網站包含哪些內容或功能，作用乃為提綱挈領。前者的重要性日益彰顯，設計上要能高效率地帶領使用者完成「轉換（conversion）」目的，幾乎不會有「導航（navigation）」的成分，因為我們不希望使用者分心到其他地方，最重要、幾乎也是唯一的目的就是推進轉換。

10. 設計的分享

如同程式領域熱烈的分享文化，近幾年有愈來愈多小公司或大企業樂于公開分享內部的設計團隊協作與工作技巧流程，不但有招募人才之效，也充分展現品牌特色、塑造設計領域的互助氛圍。

Google Design、Facebook、 Shopify 、Airbnb Design 都是可以借鏡的例子。

來源：設計IN臺灣

本文中，我們來展望一下網頁設計的未來。高清網頁設計是否能主導網絡，這已經不是問題了，關鍵是高分辨率顯示屏何時能夠普及，這是提升視覺設計的必備條件。

下面開始，我們將要探索如何運用圖片、視頻、或是動畫來創建高清背景，并且把所有內容有層次地組合。

圖片

超大圖、焦點圖、全屏圖。

以上幾個詞，最適合用來描述現代網頁設計的背景圖片。設計師們對高清設計不僅停留在思考層面，他們將其發揮到極致，用背景圖占據了整個畫面。

這種設計技巧很有效，因為用戶天生就是視覺動物。

正如《2015與2016的網頁設計趨勢》所描述的，畢竟我們理解周圍世界時，視覺在主導潛意識。而且，令人愉悅的圖片在一定程度上能創造更好的用戶體驗，因為我們理所當然認為有吸引力的東西更好。這看似極其膚淺，但在設計中，感知就是真相。

高屏幕分辨率創造了絕佳的機遇，讓用戶能看到從前無法察覺的細節。圖片中的小細節——例如Junction Moama所用的Macquarie公園的多色調紋理（上圖的兩種）——提升了界面的精細程度，對至關重要的第一印象大有幫助。

使用高清圖片的5條建議：

1. 使主畫面成為視覺焦點——雖然圖片是作為背景，不代表它就能占據舞臺中央。優秀的照片能與用戶建立情感連接，學習圖片的精妙之處，看它如何影響設計的視覺層次。
2. 考慮使用多圖——使用我們在網頁UI模式中提到的幻燈片或卡片風格的結構，來應對內容豐富或相片集類型的設計。
3. 在圖片上添加效果——模糊或色彩疊加，能夠增加或是改變一張圖片的調性（例如全用紅色調會更加積極）。這在高清圖片上很管用，因為下層的圖片畫質夠高，細節仍清晰可辨。
4. 考慮圖片在不同屏幕尺寸下的效果——安排各種尺寸下的背景圖，使之能適應任何斷點，不會露出純色塊（那其實是真正的背景）。
5. 打破局限——照片背景不一定要遵循標準的1:1.5相機比例，也可以使用從各自背景中裁剪出來的圖片。

背景照片能創造簡單的視覺吸引。選用優秀的照片強化品牌、產品或信息時，效果最佳。記住，有時會用多張背景照片，要確保這種設計結構和周遭元素能與每張圖搭配良好。

視頻

高清視頻背景可能是今年最盛行的技巧之一——尤其是有著瘋狂感的大量快鏡頭動作。從AirBnB這樣的巨人，到幾乎所有類型的小網站，視頻迅速成為了網頁設計中重要的一道風景線。

最初一批運用背景視頻的網站，正是電影網站。例如《少年派的奇幻漂流》官網，用了一段電影預告作為背景（而且還是可下載的格式）。

視頻作為一種設計技巧的出現，與它本身的新奇性毫無關系。在HTML5（還有能播放高清視頻的智能手機）推出以前，許多瀏覽器與網絡連接環境根本無法處理全屏視頻背景。

任何關于高清視頻的討論，都應當圍繞最終成品。無論是像Dunckelfeld’s這樣的超現實主義黑白手法，還是像AirBnB這種更加現實的蒙太奇短片，你都需要來回調整它的飽和度和幀速率，讓視頻更吸引人，而不會使人分心。

光有一段視頻可不夠。所有拍攝優秀電影的技巧——取景、變焦、平移——在網頁視頻中同樣重要，即便是用作背景。

Brindisa Tapas Kitchens做得非常棒，它剪輯了大量短片來展現它的食物與環境。視頻從多個角度拍攝，有些片段用了縮時攝影的風格加速，另一些則刻意調慢來營造合適的氛圍。

同樣，在設計中運用高清視頻也有5條建議：

1. 注意視頻長度——背景視頻應當在幾秒鐘內呈現一段視覺故事，讓用戶感受到氛圍。最佳循環間隔是10到30秒。
2. 關閉聲音——對于多數用戶而言，聲音仍是一種很極端的自動播放元素。如果想要使用聲音，也要默認設成靜音。
3. 關注加載時間——雖然高清視頻很有意思，但不能因此拖慢網站加載速度。如果用戶在加載過程中就退出了，視頻再精彩都沒有用。
4. 考慮備選方案——有些設備無法渲染高清視頻。在Goolge統計中查看訪客最常用的設備，根據情況進行設計。通常，你會選取一張靜態圖片作為備選方案。
5. 堅持高質量的視頻——不論是否自己拍攝，為了清晰出眾的畫質，最好雇人來做這個事情，或者使用版權視頻。不僅僅因為它要用在高清的環境中，也因為需要相當好的畫質。就像照片一樣，如果超過原片分辨率使用，視頻就毀了。

網頁設計，尤其是使用背景視頻的網頁，都在營造一種電影般的體驗。網站中的高清視頻，創造了一種完整的多媒體體驗，在運動的背景之上層層傳遞信息。

動畫

高清背景動畫存在于固定圖片的設計中，因為這些動畫往往同時包含固定與運動元素。

它與加載動畫同樣盛行，數十年來設計原則幾乎沒有改變。唯一改變的是高清顯示屏能呈現的畫質水平。

成功的高清動畫，關鍵在于時間控制。動畫應當有著流暢無痕的效果。所有的循環動畫都要首尾相接。

《2015與2016的網頁設計趨勢》中描述過，我們建議牢記以下5條原則：

1. 堅持簡單的動畫——太復雜的故事與動作可能會加重認知負擔，如果能實現完美的基本動畫，就不要制作復雜的效果。
2. 使用亮色調來關聯界面——例如，可以從簡單的鼠標懸停效果入手，改變鏈接顏色。考慮選用配色中最亮的顏色作為鼠標懸停色，讓人注意到這個動畫效果。懸停時放大文字也是一種視覺線索，能夠起到額外的強調作用。這些簡單的手段有助于突顯特定的用戶操作。
3. 利用高清屏幕的特性——為了最佳的視覺效果，使用可縮放的圖片格式，例如矢量圖。
4. 用視頻的方法制作動畫——同樣的精妙之處也適用于動畫。應當避免不和諧的運動和物體，例如聲音，那會令用戶感到厭煩。
5. 為合適的觀眾制作動畫——雖然許多設計師常把動畫和插畫合為一體，但這未必適用于每個網站。

同樣，要注意細節。根據網站與用戶的不同，動畫可以是卡通式、視頻風格，或者僅僅是插畫環境中的一系列運動感。動畫可以通過用戶操作觸發——點按、滾動或是鼠標點擊——或者就簡單地自動播放。

層層構筑：融合所有內容

高清背景只有作為某一層信息時才有效果。精彩的圖片、視頻或動畫獨木難支——你得考慮它與屏幕上其他內容的關系。

以下是3個簡單的案例研究，這幾個網站都將它們融合得非常好。

Adidas設計工作室

Adidas設計工作室用了各種技巧處理鮮明的大尺寸圖片，號召人們加入。

全屏背景實際上鏈接到一段視頻，滾動操作還有視覺差效果，引導用戶瀏覽整個產品線和相關信息。清晰的圖片搭配同樣清晰的文字。通過一種溫和的方式，用顏色構建了視覺的層次。

Flipboard

Flipboard熟練運用固定背景圖的技藝，這高度依賴傳統的攝影藝術。

高清圖片包含許多細節，卻不會咄咄逼人。圖片還延伸到了屏幕之外，讓人想象餐桌還會向各個方向延伸，在不同的屏幕分辨率下也確實如此。整個色調將這張圖片塑造成背景元素，使注意力保持在其上更明亮的行動號召信息上。

5 Eme Gauche

5 Eme Gauche的特色是具有多層元素的大背景圖，包含底部導航、社交媒體圖標，還有屏幕中央的品牌logo和主頁鏈接。

每層內容都與背景有互動，并且有所區分，讓你一眼就能看出屏幕上的分層關系。這個網站的內部層級很清晰，因為所有頁面都采用同樣的分層格式和滾動動畫。

結論

盡管高清背景近年來正逐漸盛行，但不能僅把它當作一種潮流。它們的產生，是可用性終于跟上科技發展的結果。

這意味著人們不會有一天厭倦高清設計，轉而尋找下一股潮流。作為日漸成長的視覺行業，這種創作技巧絕對值得一學。

想學習更多不會過時的網頁設計技巧，請看UXPin推出的免費電子書《2015與2016的網頁設計趨勢》。這份指南通過分解165個今日最佳設計，講解了10種最有用的趨勢，它們來自Intercom、Spotify、Apple、Google這樣的公司。

原文鏈接：http://designmodo.com/high-definition-design/

譯文鏈接：http://colachan.com/post/3474

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

所以風潮這個東西是一個非常神秘的事物，上帝往往不會輕易的給你暗示。所謂“國之利器，不以示人”，如果大家都知道風口在哪里了，那大家一窩蜂的跑過去不就把風口給堵死了，從而也就無風口可言了。

但是，今天我就自動請纓，敢冒天下之大不韙，用本人尚算深厚的設計背景以及對這幾年設計風向的觀察，跟大家提提我對未來網頁設計風潮的風口的猜想。如果大家覺得說的還算有點道理的，有錢的捧個錢場給個打賞，沒錢的捧個人場評論轉發來聲吶喊。當然，如果大家覺得這是一派胡言的話，那也就只能請你趕快離場，等下一篇文章上來再請你來好好捧場。

滑動優先于點擊

先上圖：

上圖是否非常熟悉呢？當然了，這不就是我們今天打開電腦天天在做的事情嘛。

但是你要知道現在已經是移動互聯的年代，移動設備占據了用戶大量的網上瀏覽時間，而移動設備的特點是屏幕相對比較小，而控件一般設計的比較大以方便 點擊。所以用戶更希望的是能隨心所欲的通過指尖快速的瀏覽到指定的信息，而非通過鼠標慢慢的往下拉，然后找到一行小的可憐的鏈接點進去進行查看。

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

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

這個就是我們都熟知的泰晤士周刊網絡版，它甚至的是無限循環的去滾動著顯示文章，而不像傳統的PC瀏覽那樣，分成無數個tag和頁面來讓用戶進行點擊選擇。而這，我認為就是這種風潮到來的一種暗示。

雖然我不知道可穿戴設備如智能手表等什么時候能完全流行起來，但是我相信如果真流行起來的話，它里面的應用肯定是能更好的滾動顯示和通過手勢進行方便的操作的。

折疊顯示將成明日黃花

正因為現在對頁面進行滑動是如此的簡便和隨心所欲，且當今的智能設備的大小型號琳瑯滿目，所以因為一些內容過長而進行折疊顯示的方式已經過時了 -僅僅將一些關鍵信息顯示給用戶，當需要的時候再去點擊個“＋”號什么的進行展開。

同時你也再沒有必要在一篇文章的前面堆積大量的文字內容來讓用戶知道你下面將要描述的是什么內容，因為用戶很容易就能通過手勢操作滑動到它想要看的內容上面去。

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

所以取消折疊內容的顯示，這我認為也肯定是將要風靡網頁設計界的風潮之一。

快速的呈現和簡約的設計

我不知道讀者您算不算是個脾氣比較溫順比較隨和的人，如果你自認為是的話，那么如果因為網絡太慢，本文下面的內容到了現在還沒有完全加載完畢。那 么，我相信你肯定會立刻火冒三丈，把網絡提供商的先人都會問候一遍(網絡出問題的時候，我本人往往首先問候的就是網絡供應商，因為人家貪污的話還收了錢干 活，而這班人往往是收了錢還不干活)。

在當今這個生活節奏這么快速的年代，什么最貴？時間最貴。每個人都在爭分奪秒的不甘落后的往前狂奔，而因為通過你的應用或者網頁找到一個想要的內容卻要耗掉我好幾十秒的寶貴時間，我能不暴跳如雷立刻拉黑嗎？

所以我們的設計要迎合我們這些暴躁的用戶的需求，在能快速顯示之余，還要能足夠簡潔的將內容顯示出來讓用戶能快速的弄懂這是怎么一回事。

上圖顯示了頁面加載時間和用戶放棄繼續瀏覽的可能性的一個關系，可以看出來，一個頁面如果加載太慢的話，對于大部分用戶來說，跟沒有加載是沒有什么區別的，因為他們等不了幾秒就將你的頁面或者應用給關閉掉，刪除拉黑掉了。

簡潔快速的設計應該是讓人能夠快速的打開并能愉悅的開始欣賞里面的內容的，而不是等半天只顯示了一半內容，或者內容顯示出來了卻耗掉用戶半天時間才發現這里面根本沒有我TMD想要的東西。下面就是這兩種設計的一個對比例子，誰更簡單扼要，相信不用我明說了吧。

大家對比下現在很多手機優秀App的設計和其他一些門戶網站的設計，就會為這些網站的設計感覺汗顏。因為那些優秀應用里面的界面超級簡約和漂亮，而之所以做成這么簡約的原因又正是因為需要有好的性能來滿足浮躁的用戶的需求。

現在炙手可熱的扁平化設計其實只是一個開始，其最終的目標瞄準的就是簡潔和實時性。而這，就是我認為的另外一個網頁設計的風潮。

矢量圖將迎來春天

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

而隨著現在Retina屏的流行和現代瀏覽器地矢量圖的支持越來越好，所以一度因實現和支持難度而少人問津的矢量圖相信將會再次回到風口浪尖上，因為如果是矢量圖的話，無論你做多大比例的縮放，它都不會失真。

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

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

動圖將上演王者歸來

曾幾何時，動圖曾經到處泛濫，泛濫到在你的網站需要更新的時候都要在上面貼個“網站正在更新”的Flash上去，泛濫到大家都覺得有點噁心了。

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

扁平化設計的流行：正因為太扁太平太飛機場般的過于單調，動圖的作用就顯示出來了。只要你不像以前一樣在你的網站上鋪天蓋地的使用動圖，那么它就能將很多東西融合在一張動圖中來給你扁平略顯單調的頁面帶來不少的活力和視覺沖擊。

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

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

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

Web Components組件標準化的到來

另外一個我認為在網絡設計上將會盛行起來的是Web Components組件技術。大家都知道現在的網絡實現技術正變得越來越復雜，而可讀性卻又變得越來越差。所以大家都期待有一個統一的標準來讓設計師們 簡單的完成一些如增加個打開Google Analystics的按鈕之類的事情，比如簡單的加一行下面的代碼來達成這個目標：

而這就是Web Components所能做的事情，但是現在很多設計師都沒有用它把自己給武裝起來。而現在谷歌Material design就是一個很好的開始，它提供了豐富的動畫和交互方面的組件，用戶只需要如下圖般簡單幾行代碼就能進行使用：

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

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

在當今社交媒體這么盛行的年代，每天都有無數的內容產生，讓人目不暇接。但是很多內容提供商/者卻并不因此而歡喜雀躍。

大家都在用微信，相信大家每天微信上面都有無數的圖片和日日更新的人生新方向的感悟出現在朋友圈里，開始的時候還好奇瞄幾眼，到了后來這些信息越來 越多且千篇一律了，就變得視若無睹直接飄過了。同時也很有可能將一些朋友發送的優秀內容都錯過了，比如天地會珠海分舵發送的這篇好文。

怎么回事呢？其實說白了就是內容已經飽和得有點泛濫了。比如你在微博上發個消息，很有可能立刻就會淹沒在信息海洋中消失得無影無蹤了。

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

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

原文地址：Medium

譯者：天地會珠海分舵

1.大屏幕體驗

大屏幕的體驗是如今網頁設計必不可少的一個部分。盡管對于很多人來說，很難接受主頁只有零星幾個詞，取而代之的是圖片和視頻。有的時候，甚至導航都被隱藏成了一個小小的圖標。

這兩種類型的網頁設計可以被標簽為“影院效果”和“雜志效果”。前者常常是受到了電影和電視廣告的啟發，而后者往往是從書本或者頁面的提煉出了傳統精華。

這種趨勢形成的緣由可以從兩方面來分析：一是視覺性，而是實用性。當用戶登陸上你的頁面時，PC端也好，移動端也好，你應當給用戶最大的視覺沖擊。

大屏幕的的圖片從去年（2014年）開始流行，隨著圖片品質的大大提升和頁面速度的不斷優化，我們可以看到那些采用雜志效果的頁面給人的整體感覺提升到了一個新的高度。

現在這種趨勢流行的很快，很多大型網站比如Paypal都用起了這樣的背景。

2.多媒體體驗

多媒體這個概念因為被濫用，所以它聽上去似乎已經過時了。在如今，多媒體一詞也需要被重新定義。越來越多的設計師和程序員在增加多媒體體驗這一條道路上前赴后繼。

在這之前，Flash是這些體驗的平臺。而如今HTML5的CANVAS元素慢慢取代了原來網頁上Flash的地位。

另一個值得一提的用HTML5的例子是音樂家Jonathan Dagan的項目DNA-PROJECT。一打開頁面就是就是一個視頻作為網站的背景，Dagan通過這樣的表現形式，用他的個人經歷來講述他的個人音樂專輯的故事。

Raise the river是另一個很棒的項目。不僅僅是因為它的視覺隱喻，更在它的多媒體展現上。頁面滾動的速度和頁面右邊小河流淌的速度一致，暗示了每張圖片之間的聯系，也給了整個頁面更豐富的表現效果。

我們在做頁面設計的時候，我們做的所有事情就是增強用戶的可用性。這個網頁反其道而行之，它限制了你的滾動，反而會給頁面帶來更好的視覺效果。

3.視差滾動

視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。完美的展示了一個復雜的過程，讓你猶如置身其中。厭倦了千篇一律，呆板網頁設計的你不防一試。感受一下下面的Mint Design Company這個網站。

Mint Design Company這個網站巧妙地運用了CSS技術，效果簡單但是視覺效果很棒。

4.有趣的故事

在Boldking的頁面中，和第一個例子類似，當你的滾輪滾到一個特定的位置的時候，就展現出了特殊的頁面效果。通常情況下，一般都是一些頁面元素采用淡進和淡出的效果。

這種輕量級的SVG和Java script的運用可以很好地達成這種效果。不僅僅因為帶來的效果很出眾，而且它們的運用才使整個頁面大小為1.5MB。

Colin and Dewi的婚禮這個頁面可以讓用戶專注于閱讀他們的故事。你當前僅僅展示了他們故事中的一個部分，如果你需要看下個部分，往下滾動就可以了。

看上去有點像視差滾動的效果，但是3D CSS就完全可以做到隱藏和顯示文字部分的效果。

5.扁平化設計

在過去三年中，扁平化設計一直占據著主導地位。就目前看來，這種趨勢還將繼續延續下去，尤其是一些更小的元素，比如圖標、菜單和圖片。比如Colin and Dewi這個網站。

扁平化元素看上去非常簡潔，而且大小可控。icomoon.io是一個免費的生成ICON的的網站，非常好用。

Lab 21把扁平化設計轉化為“手工設計”。

如果你的頁面元素不全都是扁平化的，那也沒有關系。設計師經常通過看上去與頁面那么協調的元素來創造出驚人的效果。扁平化設計通過不同元素的拼接合成，來形成很好的視覺效果，并且適應不同大小的頁面。

我想這種趨勢會和更多的視覺元素混合發展，就像HábitatWeb這個網站一樣。

6.方框減少

網頁設計師總是喜歡炫耀自己的思維能夠跳出框框，而且能以不止一種方式跳出方框。姑且稱之為“畫一個框框然后證明你能打破它”理論。矩形顯示器本身就是對網頁設計師的束縛（別說你見過圓形顯示器）。網頁上的每個HTML元素也是方形的。

但是跟大多數人一樣，設計師不喜歡被束縛。下面提供據我判斷目前處于上升期的幾個趨勢，可以作為證明你不是矩形奴隸的長期戰略計劃。

就像不存在矩形邊框一樣去設計布局

詳情點DAN Paris.  DAN的instagram photo由圓形組成菜單導航.

和諧元素：圓形，六邊形，不規則形狀，甚至菱形。

詳情點Lorenzo Bocchi

以軸測圖的視角展示的水平傾斜視角和網站布局預覽，給人空間和運動的感覺。

詳情點The Rosa
在羅薩餐廳主頁你的感官會被騙到–你幾乎可以聞到餅干的香味。其實不是新技巧，它是一個現代版的以百年老技術trompe-l’œIL,模擬鏡頭下的真實桌面。例如，把木桌作為背景，然后把所有的布景物體放置在上面。

詳情點Swiss Airlines

否定矩形的根本方法是將用戶置于一個無限的空間里，滾動頁面就可以飛行，呃，滾起來。
瑞士航空公司的挑戰了你的網站導航的理解。瀏覽他們的頁面，你會感慨我們對文檔空間的理解是多么常規和局限。在這里，不是鼠標在向上或向下，而是我們在云里自由穿梭。

7.貼瓷磚

如果你和矩形相處得很融洽，那么有一個很酷的方式來組織你的內容：貼瓷磚。不知為何瓷磚在網頁設計這塊比在Windows 8 Metro界面這塊更為流行。瓷磚非常適用于響應式布局，同時是一個形成令人印象深刻的布局元素。

如果貼瓷磚變得太無聊，可以嘗試進一步把邊緣鋸齒化，然后把對象或者文本推出鋸齒邊緣。

8.導航控件

Daily Beast網站導航控件把滾動方向顯示在文章內部。

導航設計一直是網頁設計師最喜歡的游樂場。“玩”導航達到頂峰的時候，網站是純粹的Flash設計。Flash消失后菜單
變得安靜了，沒有了動畫或夸張的交互。

但尖銳導航趨勢又一直在上升，部分是由于新的網頁設計趨勢和現有的導航模式的低效。由于Java的不斷演化和現代CSS在各個瀏覽器中更頻繁的被闡釋，Java Script腳本的更廣泛的應用（通過框架和插件），因此尖銳導航設計的實現變得更為容易。

這里有幾個導航設計試驗和趨勢的幾個例子。其中部分想法已得到了廣泛的應用，而其余的作為一種新生力量在推動網頁設計
走向。

粘性菜單

菜單在鼠標滾動時不斷擴展相關項目。它適用于有很多內容的單頁網站。The LESS的菜單是一個少有的非常舒適的使用“手動”的網頁。

粘性菜單是當鼠標滾動時菜單仍停留在屏幕的頂部或邊緣。不管你喜不喜歡，它正在成為單頁網站的標準。

有時它結合scrollspy腳本創建一個部件能準確顯示瀏覽者在頁面具體位置，這在是有長長層次關系菜單的網頁里尤其實用。

貼在屏幕四角的粘連導航

詳情點Hum

街景視角導航條

詳情點Oh Dear Games

谷歌地圖，特別是街景，啟發了這個網站開發者創建類似通過谷歌街景步行的導航。時間會告訴我們它是否能成為一種趨勢。

9.結合谷歌地圖

把這個特點作為2015一大趨勢，不僅因為它已經在近幾年逐漸崛起（而且我們看它幾乎無處不在），而且它正變得越來越有趣，這得益于谷歌提供的易用定制選項。

按這個特點做的最有趣的網站是在一個地圖概念圖周圍進行功能區和視覺上的創意構造。當然，它使用的是定制的谷歌地圖以良好地配合頁面的外觀和感覺。

10.混搭界面

詳情點Necotrans

對單頁網站持續的偏愛所帶來的挑戰是可以解決的，而且是以一種創造性的，用戶友好的且直觀有吸引力的方式解決。面臨的挑
戰是要在一個頁面上包容很多信息，實現很多功能。所以頁面必須有一個整潔，現代的外觀和易用的導航。

該解決方案可以稱為混搭界面：一個布局包括許多“層”，適應所需的功能或內容。實際這不是新概念，它本質上很類似于桌面應用程序，卻沒有在主流的互聯網上廣受歡迎。最近，這種界面的使用率在增大，他們變得越來越精致，功能多樣。

Necotrans網站在網頁上方似乎沒有什么內容，僅僅在全屏背景上打上一行字。但是右側菜單允許訪問所有必要的功能，為用戶提供站點搜索工具，定制的谷歌地圖，新聞版塊和聯系方式表單。

11.極簡化

詳情點Maemo

20世紀60年代以來，經典的KISS原則（“Keep It Simple, Stupid”的首字母）已被用于軍事，企業和政府。然而，即使你可能已經很努力的簡化你的設計了，它也許還有進一步簡化的可能。

Maemo餐廳用不可抗拒的口吻，最精煉的語言講述自己的故事，冷霧縈繞的峽灣上懸著餐廳的名字。瀏覽者只面臨一個去誘惑——行動（訂一個餐位）。

向下滾動會看見隨意布置的幾張照片，很難說是水平還是垂直對齊。照片的主題看起來也很隨意。然而，瀏覽網頁會給人強烈的感官體驗。

苦行僧的形式提升了照片的質量，而這種極簡主義讓你很愿意去讀照片下方的幾句禪語。

從這里能學到什么？你可以在網頁上保持視覺上的沉靜，同時實現震撼的視覺效果！盡量減少文字、表格和色彩的同時，要添加大幅逼真的視頻來營造趣味性。

12.加載網頁設計

我們能以前所未有的快速度創建網站，如使用高清視頻網站后臺。但每一步都是有代價的，在這種情況下，代價是加載時間。

現在我們可以看到一個大逆轉的視覺魅力的加載頁面，而不像在Flash時代小游戲式的加載網頁。

13.設計自動化

詳情點grid.io

截圖的是顯示有錯誤的一個頁面，沒有人會去做這樣的東西：在黑暗的背景放上不易讀的黑色文本。

本文如果不提“grid”的話就不算一篇完整的文章–“grid”是由最近經常搞出動作的“折衷的設計師”提出的一個吸睛的想法。它試圖以人工智能取代設計師和程序員的位置。未來網頁設計師會變成多余的？有待觀察。

現在仍然無法測試這個假想系統，所以很難判斷其可用性。這個系統做出的網站似乎是其理論的唯一依據，這個網站對大多數問題應對良好，但試圖創造完全人工藝術似乎是這個時代做不到的。例如，繪畫傻瓜創意軟件還沒有消滅掉繪畫藝術畫廊。

結語

這13個網頁設計的趨勢已經蔓延在過去一年，也很可能會極大影響2015年的網站建設樣貌。然而，如果我們用一句話來概括今年的建站趨勢，就是“內容為上”。

這條定律一直很準。但如今，網頁設計越來越強調美感，可以不斷指出許多在前期設計中所犯的錯誤：概念，導航流程規劃，線框，文案寫作等等。所以擴大視野和學習新技術的同時，要確保自己不要忘記最基本的東西。

原文：應酷

Dante Harker

Cole Plante

Follow Bubble

Commonway Church

P&Co Fashion

Tendigi Apps

Architecture Website Design

Caffe Cimo

Ikreativ

Australian Catholic University

Tu Corte

Osum Studio

1.響應式網頁設計（Responsive Web Design）

　　現在越來越多用戶都擁有多種終端：臺式機，筆記本，平板電腦，手機，能夠適應不同尺寸顯示屏的網頁是現在的潮流，甚至是未來很長一段時間的設計趨勢。那么響應式網頁設計就是來解決這個問題的。這種特別的開發方式能保證網頁適應不同的分辨率，讓網頁要素重組，使其無論在垂直的平板電腦還是智能手機上，都能達到最好的視覺效果。

　　除了多終端的多樣化，我們還可以看到我們的電腦屏幕，手機屏幕都在不斷變大，而在對未來生活的預測、概念設計里，“屏幕”這個產物更是被運用到多種新平臺上。例如微軟發布的“未來生活概念視頻”里，廚房、室內墻壁、辦公室玻璃墻面都成為了交互平臺。所以我們可以發現，響應式網頁設計所具備的良好的適應性和可塑性，在未來的網頁設計里將占有舉足輕重的位置。

2.全屏網頁設計（Full Screen Design）

　　所謂設計不分家，近年來平面設計里“純凈”“留白”等概念也被互聯網設計吸取，為了更簡單明了的突出主體，提供更舒適的感官感受，很多網站開始采用全屏網頁設計，利用精心挑選設計的漂亮背景，加上合理的頁面布局，視覺沖擊力大可很好的吸引觀者注意。通常頁面內的文字內容不會特別多（所出現的少量文字加上精美的排版將會變得更加吸引人），主要以圖片展示為主。這個樣子的網站多用于攝影團隊或個人作品集展示會比較常見。雖然簡單養眼，但是承載信息有限，公司部門的主頁很少見這樣的設計。

3.視差滾動設計（Parallax Design）

　　視差設計可以說是近年來網頁設計中的一大突破，也備受推崇。視差滾動是讓多層背景以不同速度滾動，以形成一種3D立體的運動效果，給觀者帶來一種獨特的視覺感受。

　　除此以外，鼠標滾輪的流暢體驗，讓用戶在觀看此類網站時有一種控制感，簡單來說這是有響應的交互體驗。就好像童年看到走馬燈，轉動它你就能看到人物動起來，還能欣賞故事。視差滾動設計的趣味也在于此。所以無論是網站還是電商商品宣傳頁都經常采用視差設計，吸引眼球也很受用戶喜愛。

4.扁平化設計（Flat Design）

　　扁平化設計可以說是去繁從簡的設計美學。去掉所有裝飾性的設計，可以說是對之前所推崇的擬物化設計的顛覆。我們不能妄加評論說這是好還是不好，只能說它提供了一種新的設計思維。扁平化設計是否會成為將來的趨勢我們也無法回答，盡管褒貶不一，備受爭議，但是就現在來說它是當下的一種潮流。

5.滾動偵測網頁設計（Scrollspy）

　　利用CSS的實現將導航欄固定在網頁頂部（大多數是頂部，當然也有側面或底部），并將版面內容按照導航順序垂直或橫向排布，使得用戶點擊相應導航tab時頁面自動滑到相應頁面，而若點擊內容，導航也將隨之改變。這樣的網頁設計頁面基本不會跳轉，每一個tab所指向的頁面內容也基本一屏顯示完整，所以在頁面呈現的內容上會有所局限。為不影響布局一般也會伴隨自適應。

 　　滾動偵測式的網頁會給設計師帶來了很大挑戰——要在有限空間內保證內容呈現的完整性，故設計師會在版面上下足功夫。而這類網站結構和視差設計有異曲同工之處，所以我們發現很多網站會結合兩者，給觀者帶來不一樣的視覺感受和用戶體驗。

6.無限滾動模式（瀑布流）

　　有一些網站內容很多，但他們并沒有簡單分頁，而是采用的是一種垂直瀑布流的方式布局。將那些內容垂直排布，當用戶縱向滾動時，內容會不斷更新好像永無止境。這樣的瀑布流很早之前就開始流行，最早采用該布局的是pinterest。這樣的滾動頁面就大大減少了分頁的數量，個人認為對于這類信息量大，每日更新數據快的網站是比較不錯的方案。

7.網頁的風格化設計

　　現在的網頁早已不再像過去受諸多條件和技術限制了。其呈現方式頗為豐富。風格從清新到復古，插畫手繪到擬真設計，無奇不有。無論是版面版式，還是設計元素，用標新立異這個詞形容絕不為過。根據自己撇到的冰山一角，提一下對我感觸最深的變化：

（1）平面設計感的加強

　　網頁設計隨著設備和技術的革新，早已突破了過去單一框架的限制，變得更加靈活。所以就頁面風格更多地開始向平面設計靠近，許多頁面設計得極賦海報和雜志的版式感。時尚而富有沖擊力。

（2）注重字體設計

　　近年來很多設計師將字體設計也融入了網頁設計中，并作為設計的一個重要元素提升整個網頁品味。通過使用CSS3設計師可以擁有許多自定義的字體，這給網頁的視覺設計也增加了一個重要的設計思路。

（3）豐富靈活的動畫

　　Html5和flash的廣泛應用，讓網頁的交互動畫變得更加生動有趣。

 　　通過觀察這些趨勢如何影響現代網站設計，或許可以為網頁設計師帶去指引，發散出新想法。

　　雖然設計師和開發者都需要和市場接軌并跟上潮流的腳步，但是所謂的潮流是當下的，未來確是未知的。我們的確需要保證自己不被行業趨勢甩到隊尾，但更重要的是在浪潮中適應和學習。

(本文出自騰訊CDC博客: http://cdc.tencent.com/?p=7800)

設計的影響僅僅是一個來自于我們的文化和用戶界面感知的反饋。觀念上這些趨勢代表了在網頁設計社區最受喜愛的點子。可是當提到設計團隊時，就會想到設計師擁有他們獨立的觀點，所以要有保留的接受這些想法.
 

1.響應式布局

響應式設計已經變成了一個最終來使設計的布局適配各種數字媒體視窗的入口。此想法是用來支持所有的來自筆記本電腦，臺式機，智能手機，平板和任何將來將要發布的設備。

你應該想象這個趨勢更像是一份單一的代碼，完美地運行在所有環境下統一網頁的設計中。響應式站點被經常想象為是向手機瀏覽器迎合，但那不是唯一的目的。你也可以擁有一個讓瀏覽器窗口更大，可以讓你的頁面布局添加鮮艷的插圖和圖案的響應式站點。

這里的重點是思考站點設計作為一個動態和自然流體的單一畫板，css3媒體查詢允許開發者在有限的或者擴展的屏幕之上自定義布局，用這個來增加你的優勢同時也看看其他設計師是如何實用它的。
 

2.視網膜支持

隨著響應式支持網站布局，同時我也發現在為視網膜設備建站的人有明顯的增加。蘋果第一次實踐這個想法是在iphone4上，從那以后蘋果在他們的其它設備包括ipad和一些macbooks上也應用了視網膜屏。

視網膜屏像素基本上是其他任何普通LCD的兩倍，雖然它們有相同的物理尺寸，但是視網膜屏可以使用兩倍的數字像素來適應相同的物理尺寸。

這意味著“像素完美”的網頁設計師將要制作兩套圖片格式.以此來支持視網膜設備。首先你需要使你的樣本圖片兩倍于普通圖片的分辨率，接著保存標準版本的圖片。大分辨率的圖片將會在標準分辨率的屏幕上縮小并且在視網膜屏上看上去更鮮明。

我最喜歡的一個響應式網頁設計工具retina.js,它是一個javascript庫，用來使你的用戶無論何時在使用視網膜設備時，自動的展現視網膜圖片。

盡管它不檢測CSS背景圖片，但它依舊是用來避免在媒體查詢里寫下所有情況代碼的最方面資源.
 

3.固定的頭部條目

使用CSS position:fixed屬性是使你的頭部條目固定在網站最好的方法。當用戶往下滾動你網頁的時候，此方法會提供一個靜止不動的導航和一個回主頁的路徑。這個趨勢已經有一段時間，但是我們現在才看到它全部的力量。

因為他們幾乎可以工作在任何網站，所以看上去很有趣。它們包括社交網絡、博客甚至有設計工作室又或者是私人公司。這種設計非常的流行并且看上去和許多布局很搭配。但是從美學角度看，這個固定的條目提供了一個減小操作網站距離感的特別用戶體驗。
 

4.大圖片背景

攝影師或者攝影愛好者肯定很享受這種設計趨勢。我已看過無數的案例來討論使用超大圖片來作為背景的這種想法。這是獲取用戶注意力極佳的方法并且當恰如其分的完成時會看上去很棒。

當大圖賞心悅目的時候我就慢慢的喜歡上了它們，當你把這種大圖做背景的想法融合進你的設計的時候，這樣的設計技術，在市場上會使你的網站顯得更專業。談到這時我總會想到曾經很流行的Kerem Suer的設計作品，為每一個登到他網站的用戶設計一個非常具有個性的背景圖片。

5.CSS透明

CSS3的新屬性已經允許編輯網頁上任何元素的不透明，這意味著你可以在不使用photoshop的情況下，在現代瀏覽器中實現透明。這種透明性的網頁設計趨勢最近在codrops上討論帶有一些非常生動的話題。

一個極佳的例子是在Squarespace Blog上，它頁面中間的層給了一個background:transparent;屬性,典型地它可以應用在生成一些其他平鋪背景上，又或者設置內部元素當背景。

另一個來操作透明度的設計技巧是通過rgba()顏色語法，在css書寫時你可以指定具體的紅，綠，藍以及透明度，所以使用rgba(255,255,255,0.6)會生成60%的不透明白色，這確定是一個設計趨勢，所以在2013以及以后我們仍可以抱有期待！
 

6.極簡的著陸頁面

任何一個花一些時間調研市場的人都會明白網絡銷售是既簡單又聰明的，你可以接觸到世界上任何地方的消費群體，另外你還可以賣一些非實體產品，例如視頻或有創造性的東西。

在網上創建一個簡潔的著陸頁面就是為了獲取指引到你的產品或服務的引導線。這個新趨勢奉行極簡主義的信條：保持所有東西簡單同時專注你的核心產品。

在PictoPro webpage上提供了許多精美的低價圖片示例資源，這個頁面使用矢量圖標作為背景是相當靈巧效果，同時文本也容易閱讀，事實上它是一個一次單擊結算的流程，你不可能做的比那更簡潔了。
 

7.數字快速響應編碼

隨著智能手機的充足導致QR（快速響應）應用程序的激增。它代表Quick Response Code，始于早期的UPC二維碼,你可以從餐館通知事件的地點和汽車銷售好多地方發現這種標簽。

但是最近我發現一些站點巧妙的將編碼融入到設計中，因為它們經常出現在打印中，所以你很少注意到它們。但是隨著時間的增長，由于數據傳輸越來越快，QR 編碼會成為流行趨勢。你可以在Keith Cakes聯系頁面看到此技術鮮明的例子。
 

8.社交媒體標記

網絡營銷是網站成功或失敗的基本決定因素。社交化媒體和病毒式營銷在許多不同的網站爆發，Digg 曾經是這一領域的霸主，但是現在已經被對手Reddit所取代。但是這并不意味著僅僅有兩個可以在線分享心情故事的網站資源。

你可以在任何社交社團上檢索到分享標記，這樣就有可能發現很好的解決方案。你可以把這些分享標記放在你的布局的任何地方。這種設計對于一些急迫想在Facebook，Twitter更或者是LinkedIn上分享內容的讀者或粉絲也是有積極一面的。

下面我列出了一小部分社交媒體標記，你可以在自己的網站布局上嘗試一下。

§ StumbleUpon Badges

§ Google +1 Button

§ Pinterest Buttons

§ LinkedIn Share Badge

§ Hacker News Vote Badge

§ Dzone Vote Buttons

§ Free Social Media Icon Sets – Best Of

§ 100+ Remarkably Beautiful Twitter Icons And Buttons
 

9.詳細的插圖

新的設計趨勢都是為了抓住和控制某人的注意力，我個人感覺插圖能出色的完成此任務。但問題是找一位能做出如此完美無瑕藝術品工作的設計師，并且還可以教自己。

插圖可以應用在多種各式各樣的方法中，以此給你的網站帶來不同的感受。看看互聯網，你就會發現許多畫廊和插圖網站都集中在電子插圖上。你能看到這么有美感的工作最終完美的融入網站的品牌中，MailChimp或許是擁有黑猩猩郵遞員商標最具代表性的例子了。
 

10.無限滾動

無限滾動加載至少存在許多年了,但是此技術直到今年才成為主流，我想在2013年還會繼續。

Pinterest已經為他們的布局采用此加載技術并且運行的很完美，你可以搜索任何東西而且當你往下滾動時結果頁會不斷地加載，分頁基本上不是問題，甚至不會對用戶體驗造成影響，討論為簡約設計。

但是另一個非常棒的或許是我最喜愛的例子是在Tumblr。你可以發博客同時可以摘錄所有出現在你面板上你跟隨人的照片。所以當你登陸之后所有最近的帖子會出現且無線的往下滾動頁面。

這是一個極好的技術，可是并不能應用在每一個布局上。但是對于能適應此方法的網站從視覺和表現上都相當驚人。
 

11.主頁特點巡回

在網上新產品通過滾動圖片展示和示例視頻都很常見。著陸頁和新建頁面經常嘗試使用一些甜頭來誘惑潛在的客戶。如果你知道如何在網站上將東西構造的很好，它的作用將會很明顯。

回顧2012年我會說此趨勢最好的例子是MediaFire’s homepage.這個頁面的整個頭部是在一系列幻燈片之間滾動。每一個幻燈片都表述了你可以在MediaFire做什么同時闡述了和其他網站的對比他們的特點。幫助此例子表現突出的依舊是他們使用的大插圖和圖標。這是一個不適合全站使用的趨勢，你僅僅可為某些產品以此來吸引更多的關注。
 

12.滑動的網頁面板

過去當flash和Actionscript很盛行的時候，滾動的網站很火。而現在，動的效果已經可以通過Javascript和JQuery實現，并且依次影響了設計師建設網站的方法。我是偶然喜歡上滾動面板技術并且希望在2013年看到更多。

立馬點擊，你或許會想CaptainDash是一個普通的網站，可是當你通過導航點擊的時候，你會發現每一個頁面都是通過左右連續推動加載的。這些動的效果并不總是對手機用戶是個好的兆頭。

若你可以通過響應式布局來處理它們，又或者有可供選擇的手機站點，滾動效果在手機上就會很酷，值得一試！
 

13.移動導航切換

當談到響應式設計時，最難的問題之一是如何創建一個靠譜的導航。你希望能給用戶對你所有重要的鏈接以直接的訪問，而不要淹沒在頁面中而使其難以辨讀。先保持導航隱藏當需要時再出現也是一個很好的點子。

進入移動導航切換菜單漂亮的設計趨勢，Treehouse Blog是極少數將此技術在智能手機和pc端瀏覽器表現都很耀眼的例子之一。但是有許多網站和工作室在他們的個人響應式布局中使用了此趨勢。

我所喜歡的導航切換是你可以以多種方式設計導航，你可以有從頭部到底部的導航或者往下滑動，又或者左右推動內容。設計師有許多玩的選擇但是對于UI實驗需要更多的時間。
 

14.全屏排版

前面我提到過使用超大圖片作為網站布局的背景，這種趨勢依舊可以延伸到文字排版上，設計的你網站文本完全適應瀏覽器。一些用戶可能感覺到很惱火，但是如果布局對于超大文本很合適這也不是常有的事。

Alex Pierce有一個很棒的專注于排版布局的網站，你可以通過CSS3的屬性看到富文本效果。另外這個網站很容易被導航以及許多其他頁面的元素顯示的也是超大的。

獨一無二的大字體樣式可以像超大圖片一樣突出，同時我確定在新的一年我們會看到這種設計會得到更多的評論。
 

15.編程接口和開源

開源軟件已經存在數十年了同時自從它存在就改變了網絡。但是在2012年里我注意到有更多的關于開源軟件涉及到網頁組件、布局、動態效果。典型的是我們可以談論免費網站模板，布局或者像WordPress的CMS軟件。

像Github這樣開放的編程接口和資源不僅允許設計者進行原型布局，還可以在頁面上制作動畫和效果。在網絡上jQuery事實上有無數的插件供免費下載使用。

說真的我不希望開源項目在任何時期發展緩慢，現在就是該開始并且促進在創建網站領域知識的時候。
 

16.深度盒子陰影

我在2012年的文章中已經討論過CSS3的盒子陰影，這種趨勢已被證明是非常準確的。事實上，我經常希望看到在現代網頁設計中加入盒子陰影效果。這種效果看上去很神奇，它們從來不會偏離美學除非過度使用。

我相信在前些年設計師遇到的問題源于盒子陰影太難而不容易實現。往前推幾年，這種效果需要Javascript或者在photoshop中制作陰影背景，而現在陰影盒子可以在CSS中使用幾行代碼來生成。

我將會在整個2013年留意盒子陰影效果。我想此效果已經在設計社區根深蒂固，現在更該關注的是誰最有創造力的實現盒子陰影效果。
 

17.CSS3動畫

CSS3 帶有相關瀏覽器前綴的transition屬性允許CSS實現像Javascript一樣的動畫效果。設計師現在能以不同的CSS屬性實現動畫效果。我有許多恰當使用過渡效果的hover effects and form input fields例子。

另外一個優秀且激動人心的例子來自CSS alerts tutorial on Codrops。提示你如何為各種不同的動畫設置時間。

我對新的設計師推動不通過腳本來實現的動畫充滿信心。
 

18.垂直導航

當我第一次注意到不同的網站使用此趨勢的時候，并不是很感興趣。可是在過去的一年里，我看到越來越多的設計師創造了完美的垂直解決方案。當此布局被正確的完成，垂直網站布局可以容納充足的內容同時具有好的設計體驗。

Riot Industries的組合對于新設計師是個很好的例子。查看一下導航鏈接是如何工作的，在移動上去是整個組合動的效果是如何實現的。邊框紋理確實展現了一個左右兩列分開的線。

紋理效果同樣在另一個垂直布局上出現，例如CSS畫廊Design Bombs.

19.單頁面網頁設計

單頁面設計是一個很大的話題，覆蓋了許多不同網站分類。顯而易見自從萬維網創建單頁面網站就出現了。但是最近幾年這種趨勢變成了一種更加自然的用戶體驗。

我想為Cage App設計的網站或許是這篇文章中列出的例子中最棒的一個。他們利用單頁布局通過水平布局鮮明的展現出內容。但是你還會注意到頁面的頂端有一個模糊的背景圖片效果。

隨著你往下滾動頁面，導航條一直固定在你的瀏覽器頂部。合并其他的網頁設計趨勢到單頁面布局里面是吸引用戶注意力和創建一個迷人的網站的解決方法。
 

20.圓圈元素設計

這一圓圈設計趨勢在網站布局是比較新的且已經被賦予了很多的關注。設計師喜歡圓圈設計，因為它們干凈、整潔，一般適合任何塊狀布局。你可以構建你的圓形或者把你的頁面元素更改為圓形設計（例如用戶頭像、分享按鈕、發表日期等等）。

Lucia Soto組合基本上是圓形網頁設計中很棒的一個例子。這個網站是動態創建的所以你得在頁面上水平移動不同的片段。您也將注意到一些可愛的向量藝術品以及星羅棋布的間隙。Web設計師渴望這些額外的花絮在頁面布局上,因為他們透露出唯一性。

你可以在Site Optimizer主頁上發現一個簡單的例子，它使用了圓形頁面設計作為他們服務的信息賣點。
 

結束語

當創建數字產品時，用戶界面是最復雜的話題。嘗試著使導航和內容樣式獲得成功的用戶體驗。這些設計趨勢目的是給設計師指明正確的方向。