1. 黑暗模式

2.插畫設(shè)計(jì)

3.視頻banner

4.微交互

5.3D元素

6.幾何圖形

7.黑白設(shè)計(jì)

8. 大字體排版

9.復(fù)古風(fēng)格

10.時(shí)尚配色方案

Web 技術(shù)的快速發(fā)展，不僅讓設(shè)計(jì)和產(chǎn)品足以滿足更多更細(xì)致深入的需求，也讓設(shè)計(jì)師能夠進(jìn)行更細(xì)膩更獨(dú)特的表達(dá)。現(xiàn)今的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)，已經(jīng)不再僅僅局限于單一的技法，而更多是一種復(fù)合的、暗含意圖的綜合的設(shè)計(jì)方法。從色彩的選取、文本的布局、整體的界面設(shè)計(jì)和用戶體驗(yàn)的呈現(xiàn)，都是當(dāng)下文化和整個(gè)時(shí)代走向的一種反饋和外化表現(xiàn)。

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

1、在設(shè)計(jì)中傾注更多情感

Notation

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

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

2、用色彩來(lái)強(qiáng)化主題

Dice Berlin

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

從現(xiàn)在最流行設(shè)計(jì)來(lái)看，明亮的藍(lán)色和柔和的紫色正在成為很多新網(wǎng)站和流行 APP 的配色選擇。色彩的選取并不是第一次成為影響設(shè)計(jì)趨勢(shì)的重要因素，但是在設(shè)計(jì)的進(jìn)化過程中，色彩一直發(fā)揮著無(wú)與倫比的重要作用。

用流行的色彩來(lái)服務(wù)網(wǎng)站的設(shè)計(jì)吧。如果網(wǎng)站有現(xiàn)成的配色系統(tǒng)，那么你可以在此基礎(chǔ)上更好地部署充滿表現(xiàn)力的色彩。

3、目的性極強(qiáng)的動(dòng)效

X Company

動(dòng)效并不是新鮮的事物，但是它也隨著時(shí)間悄然變化，最新的動(dòng)效設(shè)計(jì)越來(lái)越具有明確的目的性。每一個(gè)動(dòng)效的意圖，都是將用戶引導(dǎo)到特定的位置，讓用戶于頁(yè)面中特定的元素進(jìn)行交互。

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

即使是在現(xiàn)實(shí)生活中，大量的動(dòng)畫效果也是為了快速吸引用戶注意力而存在的，它們比圖片更有張力。對(duì)于網(wǎng)頁(yè)設(shè)計(jì)師而言，借助不斷快速發(fā)展的網(wǎng)頁(yè)來(lái)抓住用戶注意力是必須要做的事情，現(xiàn)在正是最好的時(shí)機(jī)。

4、單頁(yè)設(shè)計(jì)的回歸

Goods

無(wú)限滾動(dòng)依然有效，這使得單頁(yè)設(shè)計(jì)再次流行起來(lái)。將網(wǎng)站的所有內(nèi)容重新鋪在首頁(yè)，向下滾動(dòng)即可獲得，這樣的設(shè)計(jì)在2019年開始重新流行起來(lái)。用戶通過導(dǎo)航菜單，在頁(yè)面內(nèi)快速跳轉(zhuǎn)。

隨著近年來(lái)移動(dòng)端設(shè)計(jì)的快速增長(zhǎng)，用戶對(duì)于滾動(dòng)交互越來(lái)越習(xí)慣，所以單頁(yè)設(shè)計(jì)的合理性是不存在問題。不過，考慮到如今用戶的注意力集中時(shí)間并不長(zhǎng)，所以單頁(yè)網(wǎng)站的設(shè)計(jì)過程中需要盡量讓用戶可以更快找到他們需要的內(nèi)容。

5、超現(xiàn)實(shí)主義的設(shè)計(jì)

Gyor Moore

看慣了大量現(xiàn)實(shí)的設(shè)計(jì)，超現(xiàn)實(shí)主義風(fēng)格的設(shè)計(jì)中所蘊(yùn)含的豐富想象就顯得非常迷人了。在2019年的諸多網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中，那些比現(xiàn)實(shí)世界更夢(mèng)幻的設(shè)計(jì)元素，顯得更加吸引人，影響力更大。

基于目標(biāo)用戶所追求的情感和情緒來(lái)構(gòu)建超現(xiàn)實(shí)主義的設(shè)計(jì)，能夠更快地同用戶產(chǎn)生情感聯(lián)系。這種獨(dú)特的視覺和獨(dú)一無(wú)二的情緒所創(chuàng)建的情感連接更加難以復(fù)制，而這其中，動(dòng)畫、漫畫和奇怪的插畫占據(jù)了極大的比例。這些元素能夠帶來(lái)新鮮的體驗(yàn)，而這本身就是影響力。

6、復(fù)古的字體排版的回歸

Haus

大家似乎已經(jīng)厭倦了超級(jí)現(xiàn)代的設(shè)計(jì)風(fēng)格，更加復(fù)古的襯線字體和肆意張揚(yáng)的手寫字體在網(wǎng)站設(shè)計(jì)中重新回歸。與之前流行的非襯線字體相比，襯線字體有著更加吸引人的線條和邊角，這些精致的細(xì)節(jié)正是大家沉迷復(fù)古設(shè)計(jì)的原因之一。

而令人驚訝的一點(diǎn)在于，復(fù)古的字體和排版在目前絕大多數(shù)的屏幕上，所呈現(xiàn)出來(lái)的狀態(tài)已經(jīng)越來(lái)越舒適了，從可讀性到視覺效果均是如此。

7、UX設(shè)計(jì)的關(guān)注點(diǎn)更加細(xì)膩

The New Yorker

隨著技術(shù)的提升，用戶對(duì)于網(wǎng)站的體驗(yàn)，已經(jīng)不止于可用、好用，用戶的關(guān)注點(diǎn)已經(jīng)慢慢遷移到更加細(xì)膩的感知維度上，比如是否更加真實(shí)、是否從視覺乃至文本上體現(xiàn)出對(duì)于用戶的尊重和關(guān)心。因此，UX寫作成了設(shè)計(jì)師必須掌握的另外一個(gè)技能——文案是否走心，用戶很在意。

優(yōu)質(zhì)的文案能夠讓用戶留存下載，讓用戶和產(chǎn)品更容易聯(lián)系到一起，讓用戶獲得尊重感。UX設(shè)計(jì)的維度正在擴(kuò)展，設(shè)計(jì)師需要更加精準(zhǔn)地抓住用戶的注意力，這也是具有商業(yè)價(jià)值的設(shè)計(jì)方向。

8、多變的字體

The Unseen

在過去的幾年當(dāng)中，字體本身經(jīng)過了一個(gè)復(fù)雜的轉(zhuǎn)變過程。為了兼容更加復(fù)雜的屏幕環(huán)境，字體本身具備了越來(lái)越強(qiáng)的拓展性。Opentype 字體的靈活可變性讓無(wú)論哪個(gè)平臺(tái)上的UI界面內(nèi)容，都可以清晰無(wú)縫地展示出來(lái)。

而多彩字體的出現(xiàn)，讓字體內(nèi)的色彩和結(jié)構(gòu)的展現(xiàn)，擁有了超乎以往的表現(xiàn)力。另外，諸如蘋果為 iOS 提供的 SF Symbols 以及越來(lái)越多的圖標(biāo)字體，讓UI設(shè)計(jì)和字體的運(yùn)用擁有了更多的可能性。

多變的字體，在2019年讓設(shè)計(jì)擁有了更多的可能性。

9、分屏可能帶來(lái)下一次革命

box

移動(dòng)端設(shè)備的快速增長(zhǎng)，讓響應(yīng)式設(shè)計(jì)乃至于分屏設(shè)計(jì)成為了一個(gè)重要的需求。其實(shí)現(xiàn)在已經(jīng)有平臺(tái)嘗試跨平臺(tái)、跨界面、跨屏幕的內(nèi)容共享了，打通不同屏之間的用戶體驗(yàn)，是2019年一個(gè)技術(shù)趨勢(shì)。

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

各種不同形態(tài)的內(nèi)容，都可能會(huì)出現(xiàn)，異于以往的設(shè)計(jì)會(huì)越來(lái)越重要。

10、數(shù)據(jù)可視化

Google Cloud Showcase

信息圖表是設(shè)計(jì)的又一個(gè)熱點(diǎn)。向用戶呈現(xiàn)復(fù)雜信息和數(shù)據(jù)，信息圖表和可視化設(shè)計(jì)是最為有效的方法之一，因?yàn)樗粌H可以帶來(lái)視覺愉悅感，而且足夠有趣，讓人能夠理解。

現(xiàn)在數(shù)據(jù)可視化可以通過靜止的圖片來(lái)呈現(xiàn)，也可以借助動(dòng)畫來(lái)展現(xiàn)，具體的呈現(xiàn)取決于你的平臺(tái)和預(yù)期。

可視化的數(shù)據(jù)最好能夠和故事結(jié)合到一起，結(jié)合敘述和故事，讓信息以更加可信的方式呈現(xiàn)在用戶面前，這樣可以帶來(lái)更高的轉(zhuǎn)化率。

11、更多漸變色彩

Zef Cherry

漸變是一種功能更為豐富的設(shè)計(jì)趨勢(shì)，它幾乎可以用在所有的設(shè)計(jì)門類當(dāng)中。如今，越來(lái)越多的設(shè)計(jì)項(xiàng)目正在使用漸變來(lái)呈設(shè)計(jì)，而網(wǎng)頁(yè)正是最為重要的門類之一。

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

12、使用3D來(lái)進(jìn)行平面設(shè)計(jì)

Prior

雖然 3D 設(shè)計(jì)并不是什么新鮮的東西，但是頂級(jí)的網(wǎng)頁(yè)設(shè)計(jì)師經(jīng)常在設(shè)計(jì)中用到 3D 設(shè)計(jì)。在平面設(shè)計(jì)當(dāng)中使用 3D 同樣能夠帶來(lái)巨大的影響。3D 渲染所帶來(lái)的豐富細(xì)膩效果，能夠讓界面更加吸引人。

對(duì)于新手設(shè)計(jì)師而言，3D 軟件上手并不算太容易，但是一旦掌握了它，它所帶來(lái)的效果和可能性會(huì)非常的驚人。3D 軟件降維進(jìn)入平面設(shè)計(jì)，所呈現(xiàn)的價(jià)值是無(wú)與倫比的。

13、更加立體和擬真的設(shè)計(jì)元素

Brand.Squarespace

雖然如今虛擬現(xiàn)實(shí)設(shè)備的普及率還沒有那么高，但是毫無(wú)疑問它的影響力正在提升，很快就會(huì)有用戶開始使用 VR 設(shè)備來(lái)瀏覽網(wǎng)頁(yè)了。

新的網(wǎng)頁(yè) UI 將會(huì)需要在設(shè)計(jì)當(dāng)中加入更多有縱深的、立體的元素，讓它們?cè)谝曈X上更加具有真實(shí)的質(zhì)感。即便未來(lái)有更多的新技術(shù)加入進(jìn)來(lái)，也不足為奇。

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

Studio Exchange

雖然絕大多數(shù)的網(wǎng)頁(yè)都使用柵格系統(tǒng)來(lái)進(jìn)行約束，但是在新的技術(shù)支持之下，設(shè)計(jì)師可以更加自由地使用更多有機(jī)而自然的圖形和形狀。

有機(jī)的圖形，不規(guī)則、不對(duì)稱的圖形，增加了設(shè)計(jì)的深度，讓頁(yè)面能夠脫穎而出。這些圖形的靈感大多來(lái)自自然，也更能夠自然的吸引用戶的注意力。

15、更多微交互

Grand Image

微交互存在的目的，是以吸引人的方式來(lái)給予用戶以反饋、驚喜甚至制造一些微妙的「焦慮」。這是一種非常有效的引導(dǎo)方式，它是有信息進(jìn)來(lái)的時(shí)候的通知彈出框，是刷新頁(yè)面完成時(shí)的提醒，是點(diǎn)擊之后的加載小動(dòng)效。

微交互是一種一直在緩慢變化的趨勢(shì)，在 2019 年的網(wǎng)頁(yè)設(shè)計(jì)當(dāng)中有明顯的增長(zhǎng)，更加多樣的微交互開始出現(xiàn)在網(wǎng)頁(yè)設(shè)計(jì)作品當(dāng)中，吸引著用戶的注意力，提供有效的信息反饋，提供引導(dǎo)。

16、更多視頻內(nèi)容

Outrider

文本信息已經(jīng)沒有以往那么具有吸引力了，更多的視頻內(nèi)容也是自然的結(jié)果。不過隨著網(wǎng)絡(luò)帶寬和上下行速度的提升，等待視頻加載的時(shí)間越來(lái)越短，用戶也可以更加快速便捷地獲得視頻內(nèi)容。

視頻內(nèi)容不僅能夠更快的表達(dá)，也具備更好表達(dá)的可能性。作為一種主動(dòng)輸出的媒體模式，視頻內(nèi)容的優(yōu)勢(shì)非常明顯。相應(yīng)的，視頻內(nèi)容的制作也需要更加注意，必須提供有意義的內(nèi)容，才不會(huì)讓用戶有浪費(fèi)時(shí)間的感覺。

結(jié)語(yǔ)

如果你仔細(xì)觀察這些趨勢(shì)的話，會(huì)發(fā)現(xiàn)這當(dāng)中絕大多數(shù)的趨勢(shì)都只是之前趨勢(shì)的升級(jí)和發(fā)展。不同的文化和快速變化的時(shí)代，正在塑造新的趨勢(shì)。企業(yè)和公司期望能夠發(fā)掘能夠帶來(lái)商業(yè)價(jià)值的設(shè)計(jì)，同時(shí)還能兼顧時(shí)尚，能夠幫助業(yè)務(wù)有長(zhǎng)足發(fā)展，這才是最重要的事情。找到這幾個(gè)關(guān)鍵之間的平衡點(diǎn)，就能夠創(chuàng)造有價(jià)值的設(shè)計(jì)。

作者：niceverynice

編輯：陳子木

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

但創(chuàng)意是一種對(duì)話。

自從我們第一次學(xué)會(huì)用木炭在洞穴壁上的赭石記錄世界的片段以來(lái)，這種對(duì)話就一直在進(jìn)行。我們還學(xué)會(huì)了把僅僅是用棍子刻在粘土上的抽象符號(hào)，變成了承載著充分含義的載體——語(yǔ)言。

趨勢(shì)僅僅只是龐雜而混亂的多方談話中的主音，無(wú)論是否應(yīng)用趨勢(shì)，我們的創(chuàng)造都與這些趨勢(shì)并存。

趨勢(shì)為我們提供了大背景，畢竟如果沒有規(guī)范，又何從定義創(chuàng)新？如果沒有去年的熱點(diǎn)潮流，又從哪里尋找規(guī)范？

所以和去年一樣，我和webflow優(yōu)秀的設(shè)計(jì)團(tuán)隊(duì)一起，預(yù)測(cè)了2018年的設(shè)計(jì)趨勢(shì)。

以下來(lái)自Sergie Magdalin, Ryan Morrison, Linsey Peterson, Nathan Romero, Darin Dimitroff，以及我。

1.破碎的網(wǎng)格布局

設(shè)計(jì)師總是無(wú)盡地去追求更具創(chuàng)意、更引人入勝的布局，但在這個(gè)過程中網(wǎng)格布局一直廣受運(yùn)用，網(wǎng)格布局能帶來(lái)和諧和規(guī)范的感覺，但網(wǎng)格本身就存在約束。

有時(shí)候我們自己都想逃離網(wǎng)格的規(guī)范性，對(duì)吧！

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

有時(shí)候很難說(shuō)這些效果是故意的，還是只是一個(gè)美麗的錯(cuò)誤…

2.將插圖放在中心位置

我在數(shù)字產(chǎn)品營(yíng)銷領(lǐng)域所看到的一個(gè)比較有趣的挑戰(zhàn)就是選擇合適的圖像。我看到過整個(gè)設(shè)計(jì)團(tuán)隊(duì)針對(duì)這一議題進(jìn)行討論，并且通常結(jié)束于兩點(diǎn)之一：

•   產(chǎn)品UI（用戶界面）截圖及動(dòng)圖
•   設(shè)計(jì)過的或是生活化的攝影

前者強(qiáng)調(diào)產(chǎn)品本身的體驗(yàn)、特征及功能，而后者則試圖強(qiáng)調(diào)產(chǎn)品的人性層面：它對(duì)生活的影響。

進(jìn)入2018年后，我們可以看到并將繼續(xù)看到，在產(chǎn)品的設(shè)計(jì)和營(yíng)銷方面，插畫師的工作越來(lái)越受重視。

我對(duì)這件事不知所以的著迷，甚至于我都不能確定它到底是什么。也許這和我們?cè)跁r(shí)尚界所看到周期性相同，畢竟插畫在整個(gè)60年代后期一直占據(jù)著廣告界的主導(dǎo)地位。

或者，Dropbox的設(shè)計(jì)團(tuán)隊(duì)可以通過解釋他們的新插畫風(fēng)格來(lái)解決問題：

我們用鉛筆構(gòu)建草圖，然后用豐富多彩、抽象的形狀來(lái)填充，將創(chuàng)意變?yōu)楝F(xiàn)實(shí)。我們的風(fēng)格的靈感來(lái)源于你第一次有想法的瞬間，這種風(fēng)格也在提醒我們，除非你有所行動(dòng)，否則畫布上只有空白。

我想，這就是說(shuō)，他們必須重新設(shè)計(jì)一些東西，對(duì)吧？

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

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

我們?yōu)榇蟊娞峁?shù)字產(chǎn)品，但當(dāng)我們將一張真人攝影作品放在網(wǎng)站上的顯著位置時(shí)，圖片中的真人主角就定義了你的用戶，但這樣就遺漏了其他沒有被定義的用戶。

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

3.野蠻主義達(dá)到主流地位

2017年初，我們發(fā)表了一篇文章，談及野蠻主義的興起，并試圖回答出現(xiàn)新興風(fēng)格的原因：

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

所以你可以想象，當(dāng)這兩個(gè)電子商務(wù)網(wǎng)站都坐上這股粗獷潮流的列車時(shí)，我們有多驚訝。

Balenciaga

Gucci

4.更多有機(jī)和傾斜的形狀

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

近幾年來(lái)，無(wú)論是網(wǎng)頁(yè)端還是移動(dòng)端的設(shè)計(jì)都是由卡片式的用戶界面占據(jù)主導(dǎo)地位。直到現(xiàn)在，這些卡片幾乎都是銳邊、直角的，可以看出其最基礎(chǔ)的幾何形狀，使得大家去關(guān)注網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)材料。

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

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

但這并不是有機(jī)形狀的主要組成元素?，F(xiàn)在的背景設(shè)計(jì)往往有很多顏色各異的變形斑點(diǎn)，略夸張的對(duì)角線，即使是我們平時(shí)所用的破折號(hào)也會(huì)被卡通化。

但在無(wú)盡的探索中，設(shè)計(jì)師總不能僅僅只是運(yùn)用靈活的曲線，很多人都會(huì)把卡片旋轉(zhuǎn)一些角度，運(yùn)用角度來(lái)進(jìn)行設(shè)計(jì)，就像Stripe的主頁(yè)一樣。

但這并不意味著直角將會(huì)在設(shè)計(jì)中消失。在下圖中，我們可以看到直線和直角的運(yùn)用，不過是把它們與更多的曲線、球形有機(jī)地結(jié)合在了一起。

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

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

不開玩笑，當(dāng)這些形狀滾動(dòng)起來(lái)，你就會(huì)看到你的屏幕上全是這些東西了。

根據(jù)LinkedIn的無(wú)障礙工程經(jīng)理Jennison Asuncion的說(shuō)法，可訪問性可以定義為：

設(shè)計(jì)和開發(fā)包括殘疾人在內(nèi)的每個(gè)人都可以獨(dú)立使用和互動(dòng)的用戶界面。

5.更普遍的交互和動(dòng)畫

媒介就是信息。–Marshall McLuhan

網(wǎng)頁(yè)并不是一個(gè)靜態(tài)媒介。盡管Justin Jackson的This is a webpage有著持久的美感與真實(shí)性，但網(wǎng)頁(yè)上還可以有更多靈活的東西。媒介就是信息，McLuhan的這句名言，至少意味著有一些網(wǎng)頁(yè)信息在于網(wǎng)頁(yè)的變化和交互：網(wǎng)頁(yè)不能只是簡(jiǎn)單地向我們提供信息，而應(yīng)該是讓信息生動(dòng)起來(lái)，更重要的是，讓我們與這些信息進(jìn)行交互并對(duì)之產(chǎn)生影響。

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

漸漸地，當(dāng)你滾動(dòng)網(wǎng)頁(yè)滑塊時(shí)，一塊一塊的信息并不僅僅只是被你接受了，還會(huì)影響你的認(rèn)知，并且企圖得到你更多的關(guān)注。

顯然，我們也不能濫用這種生動(dòng)，會(huì)使得網(wǎng)頁(yè)看起來(lái)像動(dòng)畫一樣，要小心這會(huì)影響你的用戶體驗(yàn)，尤其是那些有認(rèn)知障礙或?qū)\(yùn)動(dòng)敏感的人。

但不能否認(rèn)，恰當(dāng)?shù)男?dòng)畫能夠在恰當(dāng)?shù)臅r(shí)間引導(dǎo)用戶注意正確的內(nèi)容，從而使得他們不會(huì)錯(cuò)過重要的信息，或是訪問其他頁(yè)面。

以Black Sheep的Heco Partners為例，向下滾動(dòng)時(shí)，標(biāo)黑的當(dāng)前行幫助用戶集中注意力，然后一系列突出大膽的工具開始爭(zhēng)奪用戶的注意，呼吁停止閱讀并點(diǎn)擊下一頁(yè)。這是創(chuàng)建一個(gè)內(nèi)聯(lián)導(dǎo)航系統(tǒng)的創(chuàng)造性方案，但這也可能給用戶帶來(lái)了不必要的緊張感。

我們也可以看到很多工具可以簡(jiǎn)化復(fù)雜動(dòng)畫和交互的創(chuàng)建—這是數(shù)字設(shè)計(jì)是工具包中的一個(gè)缺口—從我們自己的Interaction2.0到Airbnb的Lottie都可以看得出來(lái)。

具體而言，我們期待兩種特定的動(dòng)畫模式的出現(xiàn)：不尋常的滑動(dòng)速率和頁(yè)面轉(zhuǎn)換。

意外的滑動(dòng)率

現(xiàn)在視差可能有些過時(shí)了，但這并不意味著設(shè)計(jì)師們不會(huì)以有趣的方式來(lái)設(shè)計(jì)滑動(dòng)。

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

隨著交互和動(dòng)畫在在線體驗(yàn)中更為突出，我們也期望看到更多的設(shè)計(jì)師設(shè)計(jì)出更具突破性的作品。

頁(yè)面轉(zhuǎn)換

在一個(gè)充滿好看動(dòng)畫的網(wǎng)站中，我們能感知到，網(wǎng)頁(yè)上正在發(fā)生一些變化，但如果是從一個(gè)頁(yè)面轉(zhuǎn)換到另一個(gè)頁(yè)面，就會(huì)比較唐突了，無(wú)論是在哪個(gè)網(wǎng)站上。

轉(zhuǎn)換動(dòng)畫可能會(huì)有所用處，它能將用戶從一個(gè)頁(yè)面送走，再在另一個(gè)新頁(yè)面上迎接。不過要謹(jǐn)慎運(yùn)動(dòng)轉(zhuǎn)換動(dòng)畫，也沒有必要鏈接它們。這個(gè)過渡本身就是每一個(gè)頁(yè)面之間的轉(zhuǎn)換：頁(yè)面突然變?yōu)橐黄瞻?，然后再有新的?yè)面加載。

但我們發(fā)現(xiàn)在這一點(diǎn)上，很多網(wǎng)站都搞了一些事情。以網(wǎng)站3drops為例：

在這里，頁(yè)面轉(zhuǎn)換時(shí)依舊保證了用戶的體驗(yàn)，體現(xiàn)了品牌的存在。當(dāng)用戶想要訪問是視圖庫(kù)中的另一視圖時(shí)，髕骨是被導(dǎo)航到了新的頁(yè)面。這對(duì)于以設(shè)計(jì)為中心的品牌展示來(lái)說(shuō)，是一個(gè)不錯(cuò)的點(diǎn)子。

6.至多主義的出現(xiàn)

好的設(shè)計(jì)盡可能少設(shè)計(jì)。–Dieter Rams

多年來(lái)，設(shè)計(jì)師最想聽到的最振奮人心的設(shè)計(jì)反饋，恐怕就是：“他很干凈。”

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

對(duì)于當(dāng)今生活在數(shù)字中的世界來(lái)說(shuō)，極簡(jiǎn)主義是一個(gè)全新且難得的經(jīng)歷，這個(gè)選擇很有意義。我們需要足夠放松以進(jìn)入這個(gè)陌生的新世界。

但是今天，我們也有類似于以下的網(wǎng)站：

Pin-Up Magazine

H. Lorenzo

Razzle Dazzle Torino

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

你可以稱之為一種野蠻主義，我也的確在Brutalist網(wǎng)站上發(fā)現(xiàn)了所有上述網(wǎng)站。但我們認(rèn)為我們期待更多至多主義的網(wǎng)站的出現(xiàn)，而在這之前你可能并不覺得這個(gè)網(wǎng)站會(huì)變成這樣。隨著數(shù)字技術(shù)的發(fā)展，一些網(wǎng)站會(huì)很自然的對(duì)用戶有更高的期待。

7.襯線字體能表現(xiàn)得更好

在技術(shù)落后，字體并不多的糟糕過去，在網(wǎng)頁(yè)界面中使用無(wú)襯線字體是個(gè)很好的方法。但隨著屏幕和字體渲染技術(shù)得進(jìn)步，我們可以看到越來(lái)越多精致得字體占據(jù)舞臺(tái)中心，或者至少成為了更重要的角色。

以Kickstarter最新的設(shè)計(jì)為例，他運(yùn)用了柔和的襯線：

或者是大膽的標(biāo)題：

在特定的日子里，Typewolf都會(huì)展示一些襯線的運(yùn)用：

襯線能提供一種優(yōu)雅、精致的文學(xué)修飾效果，作為襯線的長(zhǎng)期愛好者，我歡迎大家多多使用襯線。

8.浮動(dòng)的導(dǎo)航菜單

固定的導(dǎo)航已經(jīng)成為以轉(zhuǎn)化為中心或具有龐大菜單的網(wǎng)站的主流，因?yàn)楹诵膶?dǎo)航可在滑動(dòng)時(shí)與用戶保持一致。不過浮動(dòng)的導(dǎo)航使得用戶在滑動(dòng)瀏覽時(shí)也能輕松使用，直接優(yōu)化了網(wǎng)站體驗(yàn)。

最近，我們注意到有些設(shè)計(jì)師將導(dǎo)航從其他設(shè)計(jì)中分離出來(lái)，并將其移動(dòng)到瀏覽器的下方，進(jìn)一步確定了用戶可以隨時(shí)接觸到導(dǎo)航。這增強(qiáng)了導(dǎo)航是網(wǎng)站的廣泛對(duì)象的感覺，不一定是某一頁(yè)的一個(gè)部分，而是放在一個(gè)觸手可及的地方，使人安心。

最直觀的方法就是在導(dǎo)航欄中添加陰影，并將其移動(dòng)到網(wǎng)頁(yè)的最頂端，以Reseau為例。但在平面的設(shè)計(jì)中也是可行的，以Anchor & Orbit為例。

與離線型設(shè)計(jì)類似，浮動(dòng)的導(dǎo)航允許設(shè)計(jì)師在設(shè)計(jì)中自然地或帶有目的性地運(yùn)用巧妙的并置，這又給設(shè)計(jì)帶來(lái)了更多的空間。

9.視頻元素

當(dāng)你想用可視格式傳達(dá)復(fù)雜的信息時(shí)，靜態(tài)圖像往往都難以達(dá)到效果。畢竟，復(fù)雜性需要時(shí)間來(lái)表現(xiàn)，而一個(gè)用戶界面上的靜態(tài)圖像只會(huì)告訴你圖片上的內(nèi)容，而不是如何使用。

以下是幾點(diǎn)重要的原因：

• 視頻元素可以無(wú)縫地切入設(shè)計(jì)中，無(wú)需嵌入Youtube或是Vimeo插件。
• 即使有很多顏色，漸變和細(xì)節(jié)，視頻地質(zhì)量依然很高，但如果GIF動(dòng)圖不按大小以指數(shù)倍數(shù)放大，則很難做到。
• 視頻可以循環(huán)以確保副本的細(xì)節(jié)和圖像的細(xì)節(jié)保持一致，并為有需要的人重復(fù)播放。

所以從我們自己的網(wǎng)站到Stripe Sigma，當(dāng)視頻元素風(fēng)靡整個(gè)網(wǎng)絡(luò)時(shí)，我們并不感到奇怪。

10.更多身臨其境的“多媒體”長(zhǎng)格式

當(dāng)我們想要發(fā)布長(zhǎng)格式的內(nèi)容時(shí)，只需在頁(yè)面上放置一個(gè)長(zhǎng)文本字段，特別是當(dāng)我們的長(zhǎng)格式內(nèi)容有CMS支持時(shí)。其中，單個(gè)布局的內(nèi)容長(zhǎng)度大概為200字到一篇較為詳細(xì)的短教程的長(zhǎng)度。

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

說(shuō)實(shí)話，這并不是一個(gè)“新”趨勢(shì)，我更傾向于把它稱為網(wǎng)絡(luò)產(chǎn)生長(zhǎng)期對(duì)話的基石。但現(xiàn)在所有的網(wǎng)絡(luò)出版工具都出現(xiàn)了，包括我們?cè)趦?nèi)，2018年似乎都是最佳時(shí)機(jī)。

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

這個(gè)故事盡可能地做到引人入勝，這對(duì)于很多還較為抽象的問題來(lái)說(shuō)至關(guān)重要。它巧妙地將一個(gè)復(fù)雜的話題變成一系列便于理解的段落。你永遠(yuǎn)都不會(huì)覺得內(nèi)容過于冗雜，相反你總是不知不覺就接受了，你發(fā)現(xiàn)自己閱讀每一個(gè)字，都很容易理解。

請(qǐng)注意，我并不是批評(píng)CMS，事實(shí)上，我們可以利用CMS來(lái)提供這種體驗(yàn)。這里只需要一點(diǎn)小技巧：利用背景圖片和視頻來(lái)傳遞所有的視覺效果，在編寫、設(shè)計(jì)時(shí)仔細(xì)檢查每一個(gè)故事的一致性。這就和“博客”的格式不大一樣了。

如果你正在尋找更有吸引力的長(zhǎng)形，我不會(huì)推薦紐約時(shí)報(bào)上由Tuam拍攝的“失落的兒童”。

值得一提的是，這樣更為多樣化的長(zhǎng)格式可以用破碎網(wǎng)格或者標(biāo)準(zhǔn)布局進(jìn)行組合，正如上面的紐約時(shí)報(bào)片段所示。

11.可變的字體！

在今天看來(lái)，我們很難相信就在幾年前，我們還不得不依靠稀少的字體來(lái)呈現(xiàn)我們所有的文本內(nèi)容。

今天，網(wǎng)絡(luò)上到處都是各種各樣華麗的字體，從而引發(fā)了人們對(duì)字體印刷、字體設(shè)計(jì)和選用、消費(fèi)字體的興趣。

可變字體出現(xiàn)后，這一趨勢(shì)愈演愈烈?？萍己陀∷⒓夹g(shù)的巨頭——蘋果、谷歌、微軟和Adobe之間有一個(gè)可變字體聯(lián)合項(xiàng)目，這使得可變字體實(shí)現(xiàn)了一種全新的字體設(shè)計(jì)形式，正式增加了opentype格式，這意味著，允許設(shè)計(jì)師插入一個(gè)字體的整個(gè)詞庫(kù)或者有多達(dá)64000axe（磅值、字號(hào)等）的單個(gè)字形，并在設(shè)計(jì)空間中將特定位置定義為命名實(shí)體（粗體、濃縮等）。

說(shuō)實(shí)話上面這段文字有些難懂了，那么請(qǐng)直接看John Hudson的解釋，他認(rèn)為可變字體是：

一個(gè)字體文件的行為像多個(gè)字體一樣。

但是在討論字體設(shè)計(jì)等視覺藝術(shù)時(shí)，最好還是堅(jiān)持從視覺方面入手。

簡(jiǎn)而言之，這就是一個(gè)可變的字體，一個(gè)單一的字體文件，能夠變黑，而不需要調(diào)用其它字體。

12.內(nèi)容中心–或稱webook？盡量酷起來(lái)！

（注意：內(nèi)容一直很酷）

作為一個(gè)內(nèi)容為王的極客，我很高興看到在2017年產(chǎn)生了如此之多的有見解、極有幫助的內(nèi)容。我相信2018年我們會(huì)見到更多，畢竟2017年已經(jīng)打下了很好的基礎(chǔ)。

我們也可以看到，有很多領(lǐng)先品牌將pdf格式用于電子書領(lǐng)域并充分發(fā)掘網(wǎng)絡(luò)出版長(zhǎng)內(nèi)容的潛力，我喜歡稱之為“webooks”，這很具有吸引力。

具體而言，我指的是：

Stripe Atlas Guides

AirtableUniverse

DesignBetter.co

Intercom Books

我們自己的電子書網(wǎng)站

我想不需多言了吧！

13.CSS網(wǎng)格

Robin Rendle的CSS網(wǎng)格演示，來(lái)自CSS-Tricks。

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

那么，CSS網(wǎng)格是第一個(gè)真正地網(wǎng)頁(yè)布局系統(tǒng)，它旨在將內(nèi)容組織成列和行，并最終為給予開發(fā)人員最高的權(quán)限。

此處應(yīng)有得逞了的笑聲。

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

14.追求完美的數(shù)字設(shè)計(jì)工具

2017年是一個(gè)重要的年份，尤其是對(duì)于深入討論設(shè)計(jì)工具的性質(zhì)及其 對(duì)我們工作的適用程度。

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

設(shè)計(jì)成品和設(shè)計(jì)工具之間的中間格式，可以為產(chǎn)品團(tuán)隊(duì)和設(shè)計(jì)人員提供更高效、更強(qiáng)大的工具。

在一篇名為“接口”的文章中，他繼續(xù)假設(shè)：“今天所有的每一種流行的設(shè)計(jì)工具都是為了優(yōu)化插圖。”

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

除了插圖和交互性的定義以外，不難看出，Bryn Jackson的觀點(diǎn)：在最基礎(chǔ)的地方，大多數(shù)現(xiàn)代設(shè)計(jì)工具都注重圖像的制作而不是接口。

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

在文章的最后，他積極地認(rèn)為，有機(jī)會(huì)創(chuàng)建融合（而不是橋接）設(shè)計(jì)和實(shí)現(xiàn)的工具。

這正是我們?cè)噲D在webflow上構(gòu)建的。像Michela，我們希望一個(gè)設(shè)計(jì)交付的不是網(wǎng)站的示意圖，而是網(wǎng)站本身，不是接口的文檔，而是接口本身。在這個(gè)過程中，網(wǎng)站能不斷地修改、完善，還可以保存時(shí)間線上的不同版本，可以檢查，甚至點(diǎn)擊一個(gè)鍵就可以恢復(fù)。

15.多樣性和包容性使得設(shè)計(jì)更具挑戰(zhàn)

Webflow是一個(gè)公平的機(jī)會(huì)雇主，我們致力于建立一個(gè)團(tuán)隊(duì)，這個(gè)團(tuán)隊(duì)不僅在觀念和身份上具有多樣性，并且受到鼓勵(lì)。– Our job listings

在Webflow所在的美國(guó)，日益激烈的政治環(huán)境正在推動(dòng)對(duì)多樣性和包容性在設(shè)計(jì)中的作用的強(qiáng)烈關(guān)注。

我們不得不承認(rèn)，設(shè)計(jì)的選擇，小到性別的下拉列表中包含了哪些選項(xiàng)，都能影響我們同胞中的一些人。我們可以清楚地看到，錯(cuò)誤的消息、措辭地影響有多嚴(yán)重，數(shù)據(jù)驗(yàn)證機(jī)制在人機(jī)交互地動(dòng)態(tài)機(jī)制中有多強(qiáng)大。我們意識(shí)到，讓種族成為廣告的過濾器會(huì)產(chǎn)生徹頭徹尾的種族主義效果，從而維護(hù)我們?cè)S多人希望看到被顛覆的現(xiàn)有權(quán)利體系。

我們也清楚地意識(shí)到，如果我們地團(tuán)隊(duì)沒有多元化和包容性，我們也沒有辦法提出設(shè)計(jì)方案。

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

另一方面，我們也看到了性別歧視在明顯的自相矛盾和邊緣化之后抬起了丑惡的頭顱，甚至?xí)碓诳此频赖碌娜粘?duì)話中。性別歧視就是雙重標(biāo)準(zhǔn)的明顯例子。

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

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

16.視頻的廣泛應(yīng)用

盡管我們幾乎沒有人大肆鼓吹視頻將會(huì)成為網(wǎng)絡(luò)發(fā)布媒體，但發(fā)行商仍然非常看好轉(zhuǎn)播。

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

但就像科技領(lǐng)域的大多數(shù)事情一樣，這并不是一個(gè)平穩(wěn)的發(fā)展，成千上萬(wàn)的記者在文本和動(dòng)圖之間丟掉了工作。

對(duì)于轉(zhuǎn)播的網(wǎng)站來(lái)說(shuō)，前景也可能不是很好。根據(jù)哥倫比亞新聞評(píng)論：

轉(zhuǎn)播的發(fā)行商們僅花了一年的時(shí)間，就用無(wú)差別的、平淡的快餐式視頻，驅(qū)散了大多數(shù)來(lái)之不易的本土觀眾。

獨(dú)立新聞業(yè)至今遭受創(chuàng)傷，這要?dú)w功于特朗普，而視頻的宣傳也沒有幫到他們。

值得一提的是：根據(jù)Digiday的說(shuō)法：“展示一千次視頻的費(fèi)用遠(yuǎn)高于展覽一千次的費(fèi)用。”在理想的世界里，報(bào)紙可以在打更少的廣告。

當(dāng)然，這不會(huì)發(fā)生。

面對(duì)這一切，請(qǐng)記住文字作為創(chuàng)意和信息媒介的優(yōu)勢(shì)：

•   生產(chǎn)速度相對(duì)較快
•   便宜
•   仍是網(wǎng)絡(luò)上大多數(shù)通信的主要形式

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

因?yàn)橐粡垐D片可能在捕捉場(chǎng)景時(shí)值得多說(shuō)幾句，但圖片很難捕捉到具體的內(nèi)容，人物、時(shí)間、地點(diǎn)、原因和方式。

這使得我們很自然地談及下一點(diǎn)：

17.用戶體驗(yàn)寫手的持續(xù)興起

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

我在去年的設(shè)計(jì)趨勢(shì)中談到了這一點(diǎn)，但我今天想將注意力更多地放在被稱為用戶體驗(yàn)寫手地原因上。

簡(jiǎn)而言之，UX寫手們專注于用戶界面中的內(nèi)容，這些內(nèi)容主要用于大型數(shù)字產(chǎn)品和web應(yīng)用程序?，F(xiàn)在，我說(shuō)我是為Webflow產(chǎn)出內(nèi)容，過去是為了Linkedln，人們都會(huì)問：“這是啥？”

但請(qǐng)放心，用戶界面都有寫手地痕跡。并且這些內(nèi)容往往在你的理解過程中起到關(guān)鍵作用：

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

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

這在被稱為Chatbot的UI格式中顯得尤其明顯。一般來(lái)說(shuō)，這些用戶界面只包含單詞，單詞構(gòu)成了整個(gè)用戶界面。Chatbot的個(gè)性、品牌都只能通過語(yǔ)言表達(dá)，不過也有一些精心挑選的表情符號(hào)來(lái)調(diào)味。

作為一名經(jīng)驗(yàn)豐富的UX寫手，我很高興看到這個(gè)關(guān)鍵角色得到了它應(yīng)有的更多認(rèn)可。

我們也是設(shè)計(jì)師，不過我們是在音節(jié)和字母表中工作，我們迫不及待想要和你合作。

18.系統(tǒng)化

現(xiàn)在，設(shè)計(jì)已經(jīng)贏得了重要的位置。設(shè)計(jì)的對(duì)話已經(jīng)從價(jià)值主張轉(zhuǎn)移到更成熟的分析，即如何使設(shè)計(jì)作品的成功更加系統(tǒng)化，更加具有擴(kuò)展性且在品牌的許多產(chǎn)出和不同環(huán)境中具有凝聚力。

設(shè)計(jì)系統(tǒng)專注于將品牌美學(xué)和功能方法轉(zhuǎn)化為模塊化的組件，這些模塊化組件可以混合搭配以滿足任何UI的獨(dú)特需求（理想情況下）。當(dāng)設(shè)計(jì)語(yǔ)言被系統(tǒng)化時(shí)，就簡(jiǎn)化了設(shè)計(jì)決策，縮短了開發(fā)時(shí)間，并且能讓設(shè)計(jì)人員在尚未建立設(shè)計(jì)模式的項(xiàng)目上更好地工作。

通常情況下，品牌正處于這一趨勢(shì)之上。UXPin推出了Systems，這是一款用于創(chuàng)建和維護(hù)設(shè)計(jì)系統(tǒng)的工具。Shopify推出了Polaris，憑借其獨(dú)特的內(nèi)容、設(shè)計(jì)和開發(fā)指導(dǎo)方案而獲得高度贊譽(yù)。UX Power Tools推出了一個(gè)想要使Sketch稱為可行的設(shè)計(jì)系統(tǒng)工具的庫(kù)（我們即將會(huì)看到！）

我想2018年會(huì)有更多這樣的消息。

19.原則—設(shè)計(jì)的第一要?jiǎng)?wù)

設(shè)計(jì)界一直糾結(jié)于雞還是蛋的問題：內(nèi)容至上還是設(shè)計(jì)至上。

我過去一直都是支持內(nèi)容至上，這并不僅僅是因?yàn)槲沂且粋€(gè)內(nèi)容的極客。對(duì)于我來(lái)說(shuō)，在確定怎么包裝之前，確定所包裝的信息是最符合邏輯的。

但最近，由于我已經(jīng)由特定交付品的內(nèi)容設(shè)計(jì)專項(xiàng)更系統(tǒng)化的工作，品牌內(nèi)容策略，我對(duì)我們的工作是否遵從內(nèi)容還是設(shè)計(jì)變得柔和了起來(lái)。

它應(yīng)該從原則開始。

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

當(dāng)Shopify的高級(jí)UX主管Amy Thibodeau，在她的文章“Locating Polaris”中提到：

如果系統(tǒng)是為了實(shí)現(xiàn)真正的工作而創(chuàng)建的，它應(yīng)該反映一個(gè)組織的行事準(zhǔn)則及其價(jià)值。這也是說(shuō)，一個(gè)不包含任何原則或價(jià)值取向的設(shè)計(jì)系統(tǒng)沒法考慮日常實(shí)踐中的這些問題。

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

換句話說(shuō)，原則回答了為什么。

例如，在Webflow上，我們的使命是鼓勵(lì)設(shè)計(jì)師，企業(yè)家和創(chuàng)意者將他們的想法帶到網(wǎng)絡(luò)上。這一使命融入了我所做的一切，從Ryan為我們創(chuàng)造的美學(xué)到我設(shè)計(jì)的語(yǔ)音和音調(diào)標(biāo)準(zhǔn)。

這些標(biāo)準(zhǔn)知道我們創(chuàng)建草圖，溝通我們的意見，并希望每篇文章、電子郵件和廣告頁(yè)面能更豐富。到目前為止，這是一個(gè)溫暖的搖籃。

你認(rèn)為2018的數(shù)字設(shè)計(jì)將會(huì)如何？

每當(dāng)我將這些點(diǎn)列在一起時(shí)，我的腦海里會(huì)涌滿很多與之相關(guān)的想法，時(shí)間的流逝也使得我不得不優(yōu)先考慮一些。

這是為什么我放棄了一些顯而易見的熱點(diǎn)但迄今為止對(duì)網(wǎng)絡(luò)的影響有限，比如去年提到的AR和VR?？紤]到這一點(diǎn)，你會(huì)在這個(gè)列表中添加什么？

感謝閱讀!

原文地址：webflow

譯文地址：玩皮兔設(shè)計(jì)（公眾號(hào)）

作者：JOHN MOORE WILLIAMS

1. 打破框架的版面設(shè)計(jì)

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

2. 極簡(jiǎn)out，色彩在跳舞！

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

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

3. 華麗且實(shí)用的動(dòng)態(tài)效果

動(dòng)態(tài)效果在當(dāng)代的網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域扮演舉足輕重的角色，今年也絲毫沒有退流行的跡象，反而應(yīng)用會(huì)更廣泛。適當(dāng)?shù)膭?dòng)態(tài)效果，具有突出重點(diǎn)、爭(zhēng)取注意力的用處，今年以 SVG、CSS 創(chuàng)造的動(dòng)態(tài)效果預(yù)料將大幅增加，滾動(dòng)視差（Parallax Scrolling）也愈來(lái)愈華麗。但設(shè)計(jì)師應(yīng)考量品牌或內(nèi)容的內(nèi)涵以及每個(gè)動(dòng)態(tài)效果的意義，避免「為動(dòng)而動(dòng)」。

4. 創(chuàng)造小驚喜的「微互動(dòng)」

「微互動(dòng)」在網(wǎng)頁(yè)上也會(huì)愈來(lái)愈流行，比如滑鼠移過、點(diǎn)擊各式網(wǎng)頁(yè)零件如按鈕，卷軸滑動(dòng)過程中，適時(shí)出現(xiàn)細(xì)致變化，也能夠有提示重點(diǎn)的作用。當(dāng)然，就跟動(dòng)態(tài)效果一樣，設(shè)計(jì)師也要拿捏「動(dòng)」的意義與幅度，才不致畫蛇添足。

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

比起傳統(tǒng)圖片格式JPG、PNG、GIF 以像素構(gòu)成，近年興起的可縮放向量圖片SVG 在網(wǎng)頁(yè)上具有更大優(yōu)勢(shì)，以標(biāo)記式語(yǔ)言（XML）組合圖形，繪制矩形、圓形、線條都是小事一樁，復(fù)雜的填充、形狀也難不倒它，也能輕而易舉制作動(dòng)態(tài)效果，而且不受解析度影響，無(wú)論利用什么螢?zāi)弧⑹裁囱b置觀看，都不會(huì)破壞圖像品質(zhì)。 SVG 勝出更關(guān)鍵的是，不需 HTTP Request，能夠大幅提升網(wǎng)站載入速度。例如這個(gè)便是以 SVG 繪制的后背包。

6. 巨大字體精準(zhǔn)傳達(dá)品牌意涵

首頁(yè)以巨大的字體呈現(xiàn)品牌主旨，也將是今年隨處可見的風(fēng)潮。不過「巨大」并不代表加寬加粗，而是以恰當(dāng)?shù)淖煮w設(shè)計(jì)，言簡(jiǎn)意賅、精準(zhǔn)表達(dá)產(chǎn)品精神，取代冗長(zhǎng)贅言。而字體與背景或色彩互動(dòng)、或者在字體上塑造動(dòng)態(tài)效果，也是可以嘗試的作法。

7. 虛擬實(shí)境技術(shù)結(jié)合內(nèi)容

虛擬實(shí)境的話題從前年延燒到今年，科技巨頭對(duì)虛擬實(shí)境的投資力道絲毫沒有減弱的跡象，特別是Facebook 未來(lái)十年將砸下 30 億美金專注虛擬實(shí)境的研發(fā)?？深A(yù)見的是技術(shù)更臻成熟，也會(huì)有愈來(lái)愈多媒體或品牌運(yùn)用虛擬實(shí)境科技「說(shuō)故事」，為人們創(chuàng)造更身歷其境的感受。

8. 為不同使用者量身打造內(nèi)容

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

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

9. 「登陸頁(yè)」重于「首頁(yè)」

登陸頁(yè)（landing page）與首頁(yè)（homepage）的差異在于，前者有個(gè)非常明確的目標(biāo)，例如希望使用者注冊(cè)、訂閱電子報(bào)、甚至購(gòu)買，而首頁(yè)則如自家門口，提示網(wǎng)站包含哪些內(nèi)容或功能，作用乃為提綱挈領(lǐng)。前者的重要性日益彰顯，設(shè)計(jì)上要能高效率地帶領(lǐng)使用者完成「轉(zhuǎn)換（conversion）」目的，幾乎不會(huì)有「導(dǎo)航（navigation）」的成分，因?yàn)槲覀儾幌Ｍ褂谜叻中牡狡渌胤剑钪匾?、幾乎也是唯一的目的就是推進(jìn)轉(zhuǎn)換。

10. 設(shè)計(jì)的分享

如同程式領(lǐng)域熱烈的分享文化，近幾年有愈來(lái)愈多小公司或大企業(yè)樂于公開分享內(nèi)部的設(shè)計(jì)團(tuán)隊(duì)協(xié)作與工作技巧流程，不但有招募人才之效，也充分展現(xiàn)品牌特色、塑造設(shè)計(jì)領(lǐng)域的互助氛圍。

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

來(lái)源：設(shè)計(jì)IN臺(tái)灣

本文中，我們來(lái)展望一下網(wǎng)頁(yè)設(shè)計(jì)的未來(lái)。高清網(wǎng)頁(yè)設(shè)計(jì)是否能主導(dǎo)網(wǎng)絡(luò)，這已經(jīng)不是問題了，關(guān)鍵是高分辨率顯示屏何時(shí)能夠普及，這是提升視覺設(shè)計(jì)的必備條件。

下面開始，我們將要探索如何運(yùn)用圖片、視頻、或是動(dòng)畫來(lái)創(chuàng)建高清背景，并且把所有內(nèi)容有層次地組合。

圖片

超大圖、焦點(diǎn)圖、全屏圖。

以上幾個(gè)詞，最適合用來(lái)描述現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)的背景圖片。設(shè)計(jì)師們對(duì)高清設(shè)計(jì)不僅停留在思考層面，他們將其發(fā)揮到極致，用背景圖占據(jù)了整個(gè)畫面。

這種設(shè)計(jì)技巧很有效，因?yàn)橛脩籼焐褪且曈X動(dòng)物。

正如《2015與2016的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)》所描述的，畢竟我們理解周圍世界時(shí)，視覺在主導(dǎo)潛意識(shí)。而且，令人愉悅的圖片在一定程度上能創(chuàng)造更好的用戶體驗(yàn)，因?yàn)槲覀?a tabindex="-1" target="_blank">理所當(dāng)然認(rèn)為有吸引力的東西更好。這看似極其膚淺，但在設(shè)計(jì)中，感知就是真相。

高屏幕分辨率創(chuàng)造了絕佳的機(jī)遇，讓用戶能看到從前無(wú)法察覺的細(xì)節(jié)。圖片中的小細(xì)節(jié)——例如Junction Moama所用的Macquarie公園的多色調(diào)紋理（上圖的兩種）——提升了界面的精細(xì)程度，對(duì)至關(guān)重要的第一印象大有幫助。

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

1. 使主畫面成為視覺焦點(diǎn)——雖然圖片是作為背景，不代表它就能占據(jù)舞臺(tái)中央。優(yōu)秀的照片能與用戶建立情感連接，學(xué)習(xí)圖片的精妙之處，看它如何影響設(shè)計(jì)的視覺層次。
2. 考慮使用多圖——使用我們?cè)?a tabindex="-1" target="_blank">網(wǎng)頁(yè)UI模式中提到的幻燈片或卡片風(fēng)格的結(jié)構(gòu)，來(lái)應(yīng)對(duì)內(nèi)容豐富或相片集類型的設(shè)計(jì)。
3. 在圖片上添加效果——模糊或色彩疊加，能夠增加或是改變一張圖片的調(diào)性（例如全用紅色調(diào)會(huì)更加積極）。這在高清圖片上很管用，因?yàn)橄聦拥膱D片畫質(zhì)夠高，細(xì)節(jié)仍清晰可辨。
4. 考慮圖片在不同屏幕尺寸下的效果——安排各種尺寸下的背景圖，使之能適應(yīng)任何斷點(diǎn)，不會(huì)露出純色塊（那其實(shí)是真正的背景）。
5. 打破局限——照片背景不一定要遵循標(biāo)準(zhǔn)的1:1.5相機(jī)比例，也可以使用從各自背景中裁剪出來(lái)的圖片。

背景照片能創(chuàng)造簡(jiǎn)單的視覺吸引。選用優(yōu)秀的照片強(qiáng)化品牌、產(chǎn)品或信息時(shí)，效果最佳。記住，有時(shí)會(huì)用多張背景照片，要確保這種設(shè)計(jì)結(jié)構(gòu)和周遭元素能與每張圖搭配良好。

視頻

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

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

視頻作為一種設(shè)計(jì)技巧的出現(xiàn)，與它本身的新奇性毫無(wú)關(guān)系。在HTML5（還有能播放高清視頻的智能手機(jī)）推出以前，許多瀏覽器與網(wǎng)絡(luò)連接環(huán)境根本無(wú)法處理全屏視頻背景。

任何關(guān)于高清視頻的討論，都應(yīng)當(dāng)圍繞最終成品。無(wú)論是像Dunckelfeld’s這樣的超現(xiàn)實(shí)主義黑白手法，還是像AirBnB這種更加現(xiàn)實(shí)的蒙太奇短片，你都需要來(lái)回調(diào)整它的飽和度和幀速率，讓視頻更吸引人，而不會(huì)使人分心。

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

Brindisa Tapas Kitchens做得非常棒，它剪輯了大量短片來(lái)展現(xiàn)它的食物與環(huán)境。視頻從多個(gè)角度拍攝，有些片段用了縮時(shí)攝影的風(fēng)格加速，另一些則刻意調(diào)慢來(lái)營(yíng)造合適的氛圍。

同樣，在設(shè)計(jì)中運(yùn)用高清視頻也有5條建議：

1. 注意視頻長(zhǎng)度——背景視頻應(yīng)當(dāng)在幾秒鐘內(nèi)呈現(xiàn)一段視覺故事，讓用戶感受到氛圍。最佳循環(huán)間隔是10到30秒。
2. 關(guān)閉聲音——對(duì)于多數(shù)用戶而言，聲音仍是一種很極端的自動(dòng)播放元素。如果想要使用聲音，也要默認(rèn)設(shè)成靜音。
3. 關(guān)注加載時(shí)間——雖然高清視頻很有意思，但不能因此拖慢網(wǎng)站加載速度。如果用戶在加載過程中就退出了，視頻再精彩都沒有用。
4. 考慮備選方案——有些設(shè)備無(wú)法渲染高清視頻。在Goolge統(tǒng)計(jì)中查看訪客最常用的設(shè)備，根據(jù)情況進(jìn)行設(shè)計(jì)。通常，你會(huì)選取一張靜態(tài)圖片作為備選方案。
5. 堅(jiān)持高質(zhì)量的視頻——不論是否自己拍攝，為了清晰出眾的畫質(zhì)，最好雇人來(lái)做這個(gè)事情，或者使用版權(quán)視頻。不僅僅因?yàn)樗迷诟咔宓沫h(huán)境中，也因?yàn)樾枰喈?dāng)好的畫質(zhì)。就像照片一樣，如果超過原片分辨率使用，視頻就毀了。

網(wǎng)頁(yè)設(shè)計(jì)，尤其是使用背景視頻的網(wǎng)頁(yè)，都在營(yíng)造一種電影般的體驗(yàn)。網(wǎng)站中的高清視頻，創(chuàng)造了一種完整的多媒體體驗(yàn)，在運(yùn)動(dòng)的背景之上層層傳遞信息。

動(dòng)畫

高清背景動(dòng)畫存在于固定圖片的設(shè)計(jì)中，因?yàn)檫@些動(dòng)畫往往同時(shí)包含固定與運(yùn)動(dòng)元素。

它與加載動(dòng)畫同樣盛行，數(shù)十年來(lái)設(shè)計(jì)原則幾乎沒有改變。唯一改變的是高清顯示屏能呈現(xiàn)的畫質(zhì)水平。

成功的高清動(dòng)畫，關(guān)鍵在于時(shí)間控制。動(dòng)畫應(yīng)當(dāng)有著流暢無(wú)痕的效果。所有的循環(huán)動(dòng)畫都要首尾相接。

《2015與2016的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)》中描述過，我們建議牢記以下5條原則：

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

同樣，要注意細(xì)節(jié)。根據(jù)網(wǎng)站與用戶的不同，動(dòng)畫可以是卡通式、視頻風(fēng)格，或者僅僅是插畫環(huán)境中的一系列運(yùn)動(dòng)感。動(dòng)畫可以通過用戶操作觸發(fā)——點(diǎn)按、滾動(dòng)或是鼠標(biāo)點(diǎn)擊——或者就簡(jiǎn)單地自動(dòng)播放。

層層構(gòu)筑：融合所有內(nèi)容

高清背景只有作為某一層信息時(shí)才有效果。精彩的圖片、視頻或動(dòng)畫獨(dú)木難支——你得考慮它與屏幕上其他內(nèi)容的關(guān)系。

以下是3個(gè)簡(jiǎn)單的案例研究，這幾個(gè)網(wǎng)站都將它們?nèi)诤系梅浅：谩?/p>

Adidas設(shè)計(jì)工作室

Adidas設(shè)計(jì)工作室用了各種技巧處理鮮明的大尺寸圖片，號(hào)召人們加入。

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

Flipboard

Flipboard熟練運(yùn)用固定背景圖的技藝，這高度依賴傳統(tǒng)的攝影藝術(shù)。

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

5 Eme Gauche

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

每層內(nèi)容都與背景有互動(dòng)，并且有所區(qū)分，讓你一眼就能看出屏幕上的分層關(guān)系。這個(gè)網(wǎng)站的內(nèi)部層級(jí)很清晰，因?yàn)樗许?yè)面都采用同樣的分層格式和滾動(dòng)動(dòng)畫。

結(jié)論

盡管高清背景近年來(lái)正逐漸盛行，但不能僅把它當(dāng)作一種潮流。它們的產(chǎn)生，是可用性終于跟上科技發(fā)展的結(jié)果。

這意味著人們不會(huì)有一天厭倦高清設(shè)計(jì)，轉(zhuǎn)而尋找下一股潮流。作為日漸成長(zhǎng)的視覺行業(yè)，這種創(chuàng)作技巧絕對(duì)值得一學(xué)。

想學(xué)習(xí)更多不會(huì)過時(shí)的網(wǎng)頁(yè)設(shè)計(jì)技巧，請(qǐng)看UXPin推出的免費(fèi)電子書《2015與2016的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)》。這份指南通過分解165個(gè)今日最佳設(shè)計(jì)，講解了10種最有用的趨勢(shì)，它們來(lái)自Intercom、Spotify、Apple、Google這樣的公司。

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

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

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

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

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

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

先上圖：

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

但是你要知道現(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)的用戶越來(lái)越急躁和越來(lái)越懶，很少人有耐心去一個(gè)個(gè)條目仔細(xì)去查看去找到想要的內(nèi)容信息。所以他們更希望的是能快速的在簡(jiǎn)潔的屏幕上定位到自己想要的目標(biāo)，如果能不讓自己動(dòng)手就能自己出現(xiàn)就更好了。

這個(gè)就是我們都熟知的泰晤士周刊網(wǎng)絡(luò)版，它甚至的是無(wú)限循環(huán)的去滾動(dòng)著顯示文章，而不像傳統(tǒng)的PC瀏覽那樣，分成無(wú)數(shù)個(gè)tag和頁(yè)面來(lái)讓用戶進(jìn)行點(diǎn)擊選擇。而這，我認(rèn)為就是這種風(fēng)潮到來(lái)的一種暗示。

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

折疊顯示將成明日黃花

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

同時(shí)你也再?zèng)]有必要在一篇文章的前面堆積大量的文字內(nèi)容來(lái)讓用戶知道你下面將要描述的是什么內(nèi)容，因?yàn)橛脩艉苋菀拙湍芡ㄟ^手勢(shì)操作滑動(dòng)到它想要看的內(nèi)容上面去。

比如你看下人家Medium的做法，點(diǎn)擊一篇文章進(jìn)去，開門見山的就是一張大圖鋪天蓋地的映入眼簾。用戶只有往下滑動(dòng)才會(huì)出現(xiàn)文章的內(nèi)容，而用戶如果想快速查看某一個(gè)章節(jié)，只需要多滑動(dòng)幾下就到了。

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

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

我不知道讀者您算不算是個(gè)脾氣比較溫順比較隨和的人，如果你自認(rèn)為是的話，那么如果因?yàn)榫W(wǎng)絡(luò)太慢，本文下面的內(nèi)容到了現(xiàn)在還沒有完全加載完畢。那 么，我相信你肯定會(huì)立刻火冒三丈，把網(wǎng)絡(luò)提供商的先人都會(huì)問候一遍(網(wǎng)絡(luò)出問題的時(shí)候，我本人往往首先問候的就是網(wǎng)絡(luò)供應(yīng)商，因?yàn)槿思邑澪鄣脑掃€收了錢干 活，而這班人往往是收了錢還不干活)。

在當(dāng)今這個(gè)生活節(jié)奏這么快速的年代，什么最貴？時(shí)間最貴。每個(gè)人都在爭(zhēng)分奪秒的不甘落后的往前狂奔，而因?yàn)橥ㄟ^你的應(yīng)用或者網(wǎng)頁(yè)找到一個(gè)想要的內(nèi)容卻要耗掉我好幾十秒的寶貴時(shí)間，我能不暴跳如雷立刻拉黑嗎？

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

上圖顯示了頁(yè)面加載時(shí)間和用戶放棄繼續(xù)瀏覽的可能性的一個(gè)關(guān)系，可以看出來(lái)，一個(gè)頁(yè)面如果加載太慢的話，對(duì)于大部分用戶來(lái)說(shuō)，跟沒有加載是沒有什么區(qū)別的，因?yàn)樗麄兊炔涣藥酌刖蛯⒛愕捻?yè)面或者應(yīng)用給關(guān)閉掉，刪除拉黑掉了。

簡(jiǎn)潔快速的設(shè)計(jì)應(yīng)該是讓人能夠快速的打開并能愉悅的開始欣賞里面的內(nèi)容的，而不是等半天只顯示了一半內(nèi)容，或者內(nèi)容顯示出來(lái)了卻耗掉用戶半天時(shí)間才發(fā)現(xiàn)這里面根本沒有我TMD想要的東西。下面就是這兩種設(shè)計(jì)的一個(gè)對(duì)比例子，誰(shuí)更簡(jiǎn)單扼要，相信不用我明說(shuō)了吧。

大家對(duì)比下現(xiàn)在很多手機(jī)優(yōu)秀App的設(shè)計(jì)和其他一些門戶網(wǎng)站的設(shè)計(jì)，就會(huì)為這些網(wǎng)站的設(shè)計(jì)感覺汗顏。因?yàn)槟切﹥?yōu)秀應(yīng)用里面的界面超級(jí)簡(jiǎn)約和漂亮，而之所以做成這么簡(jiǎn)約的原因又正是因?yàn)樾枰泻玫男阅軄?lái)滿足浮躁的用戶的需求。

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

矢量圖將迎來(lái)春天

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

而隨著現(xiàn)在Retina屏的流行和現(xiàn)代瀏覽器地矢量圖的支持越來(lái)越好，所以一度因?qū)崿F(xiàn)和支持難度而少人問津的矢量圖相信將會(huì)再次回到風(fēng)口浪尖上，因?yàn)槿绻鞘噶繄D的話，無(wú)論你做多大比例的縮放，它都不會(huì)失真。

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

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

動(dòng)圖將上演王者歸來(lái)

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

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

扁平化設(shè)計(jì)的流行：正因?yàn)樘馓教w機(jī)場(chǎng)般的過于單調(diào)，動(dòng)圖的作用就顯示出來(lái)了。只要你不像以前一樣在你的網(wǎng)站上鋪天蓋地的使用動(dòng)圖，那么它就能將很多東西融合在一張動(dòng)圖中來(lái)給你扁平略顯單調(diào)的頁(yè)面帶來(lái)不少的活力和視覺沖擊。

移動(dòng)應(yīng)用的風(fēng)靡：移動(dòng)應(yīng)用對(duì)人們的預(yù)期重新進(jìn)行了定義，它更多是通過動(dòng)畫來(lái)傳遞不同的意義，而我們的網(wǎng)頁(yè)設(shè)計(jì)也很應(yīng)該開始效仿。

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

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

Web Components組件標(biāo)準(zhǔn)化的到來(lái)

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

而這就是Web Components所能做的事情，但是現(xiàn)在很多設(shè)計(jì)師都沒有用它把自己給武裝起來(lái)。而現(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)今社交媒體這么盛行的年代，每天都有無(wú)數(shù)的內(nèi)容產(chǎn)生，讓人目不暇接。但是很多內(nèi)容提供商/者卻并不因此而歡喜雀躍。

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

怎么回事呢？其實(shí)說(shuō)白了就是內(nèi)容已經(jīng)飽和得有點(diǎn)泛濫了。比如你在微博上發(fā)個(gè)消息，很有可能立刻就會(huì)淹沒在信息海洋中消失得無(wú)影無(wú)蹤了。

當(dāng)然，這并不是說(shuō)社交網(wǎng)絡(luò)將會(huì)從此沒落。我這里想表達(dá)的是，正是社交網(wǎng)絡(luò)所碰到的這種信息泛濫的問題，讓一些看上去陳舊而不起眼的利基市場(chǎng)茂發(fā)了生 機(jī)。比如2014年就有不少如Tim Ferriss等的基于郵件列表的杰出博客開始冒起來(lái)，它們提供了優(yōu)秀的迎合郵件列表樣式博客的設(shè)計(jì)，吸引了不少人的眼球。因?yàn)樗鼈兒芮宄闹?，社交?體泛濫的信息也許會(huì)引起讀者的反感而被忽略掉，但是讀者往往還是很樂意去看每一封發(fā)送到他們的電子郵箱的郵件的。

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

原文地址：Medium

譯者：天地會(huì)珠海分舵

1.大屏幕體驗(yàn)

大屏幕的體驗(yàn)是如今網(wǎng)頁(yè)設(shè)計(jì)必不可少的一個(gè)部分。盡管對(duì)于很多人來(lái)說(shuō)，很難接受主頁(yè)只有零星幾個(gè)詞，取而代之的是圖片和視頻。有的時(shí)候，甚至導(dǎo)航都被隱藏成了一個(gè)小小的圖標(biāo)。

這兩種類型的網(wǎng)頁(yè)設(shè)計(jì)可以被標(biāo)簽為“影院效果”和“雜志效果”。前者常常是受到了電影和電視廣告的啟發(fā)，而后者往往是從書本或者頁(yè)面的提煉出了傳統(tǒng)精華。

這種趨勢(shì)形成的緣由可以從兩方面來(lái)分析：一是視覺性，而是實(shí)用性。當(dāng)用戶登陸上你的頁(yè)面時(shí)，PC端也好，移動(dòng)端也好，你應(yīng)當(dāng)給用戶最大的視覺沖擊。

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

現(xiàn)在這種趨勢(shì)流行的很快，很多大型網(wǎng)站比如Paypal都用起了這樣的背景。

2.多媒體體驗(yàn)

多媒體這個(gè)概念因?yàn)楸粸E用，所以它聽上去似乎已經(jīng)過時(shí)了。在如今，多媒體一詞也需要被重新定義。越來(lái)越多的設(shè)計(jì)師和程序員在增加多媒體體驗(yàn)這一條道路上前赴后繼。

在這之前，F(xiàn)lash是這些體驗(yàn)的平臺(tái)。而如今HTML5的CANVAS元素慢慢取代了原來(lái)網(wǎng)頁(yè)上Flash的地位。

另一個(gè)值得一提的用HTML5的例子是音樂家Jonathan Dagan的項(xiàng)目DNA-PROJECT。一打開頁(yè)面就是就是一個(gè)視頻作為網(wǎng)站的背景，Dagan通過這樣的表現(xiàn)形式，用他的個(gè)人經(jīng)歷來(lái)講述他的個(gè)人音樂專輯的故事。

Raise the river是另一個(gè)很棒的項(xiàng)目。不僅僅是因?yàn)樗囊曈X隱喻，更在它的多媒體展現(xiàn)上。頁(yè)面滾動(dòng)的速度和頁(yè)面右邊小河流淌的速度一致，暗示了每張圖片之間的聯(lián)系，也給了整個(gè)頁(yè)面更豐富的表現(xiàn)效果。

我們?cè)谧鲰?yè)面設(shè)計(jì)的時(shí)候，我們做的所有事情就是增強(qiáng)用戶的可用性。這個(gè)網(wǎng)頁(yè)反其道而行之，它限制了你的滾動(dòng)，反而會(huì)給頁(yè)面帶來(lái)更好的視覺效果。

3.視差滾動(dòng)

視差滾動(dòng)（Parallax Scrolling）是指讓多層背景以不同的速度移動(dòng)，形成立體的運(yùn)動(dòng)效果，帶來(lái)非常出色的視覺體驗(yàn)。完美的展示了一個(gè)復(fù)雜的過程，讓你猶如置身其中。厭倦了千篇一律，呆板網(wǎng)頁(yè)設(shè)計(jì)的你不防一試。感受一下下面的Mint Design Company這個(gè)網(wǎng)站。

Mint Design Company這個(gè)網(wǎng)站巧妙地運(yùn)用了CSS技術(shù)，效果簡(jiǎn)單但是視覺效果很棒。

4.有趣的故事

在Boldking的頁(yè)面中，和第一個(gè)例子類似，當(dāng)你的滾輪滾到一個(gè)特定的位置的時(shí)候，就展現(xiàn)出了特殊的頁(yè)面效果。通常情況下，一般都是一些頁(yè)面元素采用淡進(jìn)和淡出的效果。

這種輕量級(jí)的SVG和Java script的運(yùn)用可以很好地達(dá)成這種效果。不僅僅因?yàn)閹?lái)的效果很出眾，而且它們的運(yùn)用才使整個(gè)頁(yè)面大小為1.5MB。

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

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

5.扁平化設(shè)計(jì)

在過去三年中，扁平化設(shè)計(jì)一直占據(jù)著主導(dǎo)地位。就目前看來(lái)，這種趨勢(shì)還將繼續(xù)延續(xù)下去，尤其是一些更小的元素，比如圖標(biāo)、菜單和圖片。比如Colin and Dewi這個(gè)網(wǎng)站。

扁平化元素看上去非常簡(jiǎn)潔，而且大小可控。icomoon.io是一個(gè)免費(fèi)的生成ICON的的網(wǎng)站，非常好用。

Lab 21把扁平化設(shè)計(jì)轉(zhuǎn)化為“手工設(shè)計(jì)”。

如果你的頁(yè)面元素不全都是扁平化的，那也沒有關(guān)系。設(shè)計(jì)師經(jīng)常通過看上去與頁(yè)面那么協(xié)調(diào)的元素來(lái)創(chuàng)造出驚人的效果。扁平化設(shè)計(jì)通過不同元素的拼接合成，來(lái)形成很好的視覺效果，并且適應(yīng)不同大小的頁(yè)面。

我想這種趨勢(shì)會(huì)和更多的視覺元素混合發(fā)展，就像HábitatWeb這個(gè)網(wǎng)站一樣。

6.方框減少

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

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

就像不存在矩形邊框一樣去設(shè)計(jì)布局

詳情點(diǎn)DAN Paris.  DAN的instagram photo由圓形組成菜單導(dǎo)航.

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

詳情點(diǎn)Lorenzo Bocchi

以軸測(cè)圖的視角展示的水平傾斜視角和網(wǎng)站布局預(yù)覽，給人空間和運(yùn)動(dòng)的感覺。

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

詳情點(diǎn)Swiss Airlines

否定矩形的根本方法是將用戶置于一個(gè)無(wú)限的空間里，滾動(dòng)頁(yè)面就可以飛行，呃，滾起來(lái)。
瑞士航空公司的挑戰(zhàn)了你的網(wǎng)站導(dǎo)航的理解。瀏覽他們的頁(yè)面，你會(huì)感慨我們對(duì)文檔空間的理解是多么常規(guī)和局限。在這里，不是鼠標(biāo)在向上或向下，而是我們?cè)谠评镒杂纱┧蟆?/p>

7.貼瓷磚

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

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

8.導(dǎo)航控件

Daily Beast網(wǎng)站導(dǎo)航控件把滾動(dòng)方向顯示在文章內(nèi)部。

導(dǎo)航設(shè)計(jì)一直是網(wǎng)頁(yè)設(shè)計(jì)師最喜歡的游樂場(chǎng)。“玩”導(dǎo)航達(dá)到頂峰的時(shí)候，網(wǎng)站是純粹的Flash設(shè)計(jì)。Flash消失后菜單
變得安靜了，沒有了動(dòng)畫或夸張的交互。

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

這里有幾個(gè)導(dǎo)航設(shè)計(jì)試驗(yàn)和趨勢(shì)的幾個(gè)例子。其中部分想法已得到了廣泛的應(yīng)用，而其余的作為一種新生力量在推動(dòng)網(wǎng)頁(yè)設(shè)計(jì)
走向。

粘性菜單

菜單在鼠標(biāo)滾動(dòng)時(shí)不斷擴(kuò)展相關(guān)項(xiàng)目。它適用于有很多內(nèi)容的單頁(yè)網(wǎng)站。The LESS的菜單是一個(gè)少有的非常舒適的使用“手動(dòng)”的網(wǎng)頁(yè)。

粘性菜單是當(dāng)鼠標(biāo)滾動(dòng)時(shí)菜單仍停留在屏幕的頂部或邊緣。不管你喜不喜歡，它正在成為單頁(yè)網(wǎng)站的標(biāo)準(zhǔn)。

有時(shí)它結(jié)合scrollspy腳本創(chuàng)建一個(gè)部件能準(zhǔn)確顯示瀏覽者在頁(yè)面具體位置，這在是有長(zhǎng)長(zhǎng)層次關(guān)系菜單的網(wǎng)頁(yè)里尤其實(shí)用。

貼在屏幕四角的粘連導(dǎo)航

詳情點(diǎn)Hum

街景視角導(dǎo)航條

詳情點(diǎn)Oh Dear Games

谷歌地圖，特別是街景，啟發(fā)了這個(gè)網(wǎng)站開發(fā)者創(chuàng)建類似通過谷歌街景步行的導(dǎo)航。時(shí)間會(huì)告訴我們它是否能成為一種趨勢(shì)。

9.結(jié)合谷歌地圖

把這個(gè)特點(diǎn)作為2015一大趨勢(shì)，不僅因?yàn)樗呀?jīng)在近幾年逐漸崛起（而且我們看它幾乎無(wú)處不在），而且它正變得越來(lái)越有趣，這得益于谷歌提供的易用定制選項(xiàng)。

按這個(gè)特點(diǎn)做的最有趣的網(wǎng)站是在一個(gè)地圖概念圖周圍進(jìn)行功能區(qū)和視覺上的創(chuàng)意構(gòu)造。當(dāng)然，它使用的是定制的谷歌地圖以良好地配合頁(yè)面的外觀和感覺。

10.混搭界面

詳情點(diǎn)Necotrans

對(duì)單頁(yè)網(wǎng)站持續(xù)的偏愛所帶來(lái)的挑戰(zhàn)是可以解決的，而且是以一種創(chuàng)造性的，用戶友好的且直觀有吸引力的方式解決。面臨的挑
戰(zhàn)是要在一個(gè)頁(yè)面上包容很多信息，實(shí)現(xiàn)很多功能。所以頁(yè)面必須有一個(gè)整潔，現(xiàn)代的外觀和易用的導(dǎo)航。

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

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

11.極簡(jiǎn)化

詳情點(diǎn)Maemo

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

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

向下滾動(dòng)會(huì)看見隨意布置的幾張照片，很難說(shuō)是水平還是垂直對(duì)齊。照片的主題看起來(lái)也很隨意。然而，瀏覽網(wǎng)頁(yè)會(huì)給人強(qiáng)烈的感官體驗(yàn)。

苦行僧的形式提升了照片的質(zhì)量，而這種極簡(jiǎn)主義讓你很愿意去讀照片下方的幾句禪語(yǔ)。

從這里能學(xué)到什么？你可以在網(wǎng)頁(yè)上保持視覺上的沉靜，同時(shí)實(shí)現(xiàn)震撼的視覺效果！盡量減少文字、表格和色彩的同時(shí)，要添加大幅逼真的視頻來(lái)營(yíng)造趣味性。

12.加載網(wǎng)頁(yè)設(shè)計(jì)

我們能以前所未有的快速度創(chuàng)建網(wǎng)站，如使用高清視頻網(wǎng)站后臺(tái)。但每一步都是有代價(jià)的，在這種情況下，代價(jià)是加載時(shí)間。

現(xiàn)在我們可以看到一個(gè)大逆轉(zhuǎn)的視覺魅力的加載頁(yè)面，而不像在Flash時(shí)代小游戲式的加載網(wǎng)頁(yè)。

13.設(shè)計(jì)自動(dòng)化

詳情點(diǎn)grid.io

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

本文如果不提“grid”的話就不算一篇完整的文章–“grid”是由最近經(jīng)常搞出動(dòng)作的“折衷的設(shè)計(jì)師”提出的一個(gè)吸睛的想法。它試圖以人工智能取代設(shè)計(jì)師和程序員的位置。未來(lái)網(wǎng)頁(yè)設(shè)計(jì)師會(huì)變成多余的？有待觀察。

現(xiàn)在仍然無(wú)法測(cè)試這個(gè)假想系統(tǒng)，所以很難判斷其可用性。這個(gè)系統(tǒng)做出的網(wǎng)站似乎是其理論的唯一依據(jù)，這個(gè)網(wǎng)站對(duì)大多數(shù)問題應(yīng)對(duì)良好，但試圖創(chuàng)造完全人工藝術(shù)似乎是這個(gè)時(shí)代做不到的。例如，繪畫傻瓜創(chuàng)意軟件還沒有消滅掉繪畫藝術(shù)畫廊。

結(jié)語(yǔ)

這13個(gè)網(wǎng)頁(yè)設(shè)計(jì)的趨勢(shì)已經(jīng)蔓延在過去一年，也很可能會(huì)極大影響2015年的網(wǎng)站建設(shè)樣貌。然而，如果我們用一句話來(lái)概括今年的建站趨勢(shì)，就是“內(nèi)容為上”。

這條定律一直很準(zhǔn)。但如今，網(wǎng)頁(yè)設(shè)計(jì)越來(lái)越強(qiáng)調(diào)美感，可以不斷指出許多在前期設(shè)計(jì)中所犯的錯(cuò)誤：概念，導(dǎo)航流程規(guī)劃，線框，文案寫作等等。所以擴(kuò)大視野和學(xué)習(xí)新技術(shù)的同時(shí)，要確保自己不要忘記最基本的東西。

原文：應(yīng)酷

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.響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)（Responsive Web Design）

　　現(xiàn)在越來(lái)越多用戶都擁有多種終端：臺(tái)式機(jī)，筆記本，平板電腦，手機(jī)，能夠適應(yīng)不同尺寸顯示屏的網(wǎng)頁(yè)是現(xiàn)在的潮流，甚至是未來(lái)很長(zhǎng)一段時(shí)間的設(shè)計(jì)趨勢(shì)。那么響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)就是來(lái)解決這個(gè)問題的。這種特別的開發(fā)方式能保證網(wǎng)頁(yè)適應(yīng)不同的分辨率，讓網(wǎng)頁(yè)要素重組，使其無(wú)論在垂直的平板電腦還是智能手機(jī)上，都能達(dá)到最好的視覺效果。

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

2.全屏網(wǎng)頁(yè)設(shè)計(jì)（Full Screen Design）

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

3.視差滾動(dòng)設(shè)計(jì)（Parallax Design）

　　視差設(shè)計(jì)可以說(shuō)是近年來(lái)網(wǎng)頁(yè)設(shè)計(jì)中的一大突破，也備受推崇。視差滾動(dòng)是讓多層背景以不同速度滾動(dòng)，以形成一種3D立體的運(yùn)動(dòng)效果，給觀者帶來(lái)一種獨(dú)特的視覺感受。

　　除此以外，鼠標(biāo)滾輪的流暢體驗(yàn)，讓用戶在觀看此類網(wǎng)站時(shí)有一種控制感，簡(jiǎn)單來(lái)說(shuō)這是有響應(yīng)的交互體驗(yàn)。就好像童年看到走馬燈，轉(zhuǎn)動(dòng)它你就能看到人物動(dòng)起來(lái)，還能欣賞故事。視差滾動(dòng)設(shè)計(jì)的趣味也在于此。所以無(wú)論是網(wǎng)站還是電商商品宣傳頁(yè)都經(jīng)常采用視差設(shè)計(jì)，吸引眼球也很受用戶喜愛。

4.扁平化設(shè)計(jì)（Flat Design）

　　扁平化設(shè)計(jì)可以說(shuō)是去繁從簡(jiǎn)的設(shè)計(jì)美學(xué)。去掉所有裝飾性的設(shè)計(jì)，可以說(shuō)是對(duì)之前所推崇的擬物化設(shè)計(jì)的顛覆。我們不能妄加評(píng)論說(shuō)這是好還是不好，只能說(shuō)它提供了一種新的設(shè)計(jì)思維。扁平化設(shè)計(jì)是否會(huì)成為將來(lái)的趨勢(shì)我們也無(wú)法回答，盡管褒貶不一，備受爭(zhēng)議，但是就現(xiàn)在來(lái)說(shuō)它是當(dāng)下的一種潮流。

5.滾動(dòng)偵測(cè)網(wǎng)頁(yè)設(shè)計(jì)（Scrollspy）

　　利用CSS的實(shí)現(xiàn)將導(dǎo)航欄固定在網(wǎng)頁(yè)頂部（大多數(shù)是頂部，當(dāng)然也有側(cè)面或底部），并將版面內(nèi)容按照導(dǎo)航順序垂直或橫向排布，使得用戶點(diǎn)擊相應(yīng)導(dǎo)航tab時(shí)頁(yè)面自動(dòng)滑到相應(yīng)頁(yè)面，而若點(diǎn)擊內(nèi)容，導(dǎo)航也將隨之改變。這樣的網(wǎng)頁(yè)設(shè)計(jì)頁(yè)面基本不會(huì)跳轉(zhuǎn)，每一個(gè)tab所指向的頁(yè)面內(nèi)容也基本一屏顯示完整，所以在頁(yè)面呈現(xiàn)的內(nèi)容上會(huì)有所局限。為不影響布局一般也會(huì)伴隨自適應(yīng)。

 　　滾動(dòng)偵測(cè)式的網(wǎng)頁(yè)會(huì)給設(shè)計(jì)師帶來(lái)了很大挑戰(zhàn)——要在有限空間內(nèi)保證內(nèi)容呈現(xiàn)的完整性，故設(shè)計(jì)師會(huì)在版面上下足功夫。而這類網(wǎng)站結(jié)構(gòu)和視差設(shè)計(jì)有異曲同工之處，所以我們發(fā)現(xiàn)很多網(wǎng)站會(huì)結(jié)合兩者，給觀者帶來(lái)不一樣的視覺感受和用戶體驗(yàn)。

6.無(wú)限滾動(dòng)模式（瀑布流）

　　有一些網(wǎng)站內(nèi)容很多，但他們并沒有簡(jiǎn)單分頁(yè)，而是采用的是一種垂直瀑布流的方式布局。將那些內(nèi)容垂直排布，當(dāng)用戶縱向滾動(dòng)時(shí)，內(nèi)容會(huì)不斷更新好像永無(wú)止境。這樣的瀑布流很早之前就開始流行，最早采用該布局的是pinterest。這樣的滾動(dòng)頁(yè)面就大大減少了分頁(yè)的數(shù)量，個(gè)人認(rèn)為對(duì)于這類信息量大，每日更新數(shù)據(jù)快的網(wǎng)站是比較不錯(cuò)的方案。

7.網(wǎng)頁(yè)的風(fēng)格化設(shè)計(jì)

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

（1）平面設(shè)計(jì)感的加強(qiáng)

　　網(wǎng)頁(yè)設(shè)計(jì)隨著設(shè)備和技術(shù)的革新，早已突破了過去單一框架的限制，變得更加靈活。所以就頁(yè)面風(fēng)格更多地開始向平面設(shè)計(jì)靠近，許多頁(yè)面設(shè)計(jì)得極賦海報(bào)和雜志的版式感。時(shí)尚而富有沖擊力。

（2）注重字體設(shè)計(jì)

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

（3）豐富靈活的動(dòng)畫

　　Html5和flash的廣泛應(yīng)用，讓網(wǎng)頁(yè)的交互動(dòng)畫變得更加生動(dòng)有趣。

 　　通過觀察這些趨勢(shì)如何影響現(xiàn)代網(wǎng)站設(shè)計(jì)，或許可以為網(wǎng)頁(yè)設(shè)計(jì)師帶去指引，發(fā)散出新想法。

　　雖然設(shè)計(jì)師和開發(fā)者都需要和市場(chǎng)接軌并跟上潮流的腳步，但是所謂的潮流是當(dāng)下的，未來(lái)確是未知的。我們的確需要保證自己不被行業(yè)趨勢(shì)甩到隊(duì)尾，但更重要的是在浪潮中適應(yīng)和學(xué)習(xí)。

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

設(shè)計(jì)的影響僅僅是一個(gè)來(lái)自于我們的文化和用戶界面感知的反饋。觀念上這些趨勢(shì)代表了在網(wǎng)頁(yè)設(shè)計(jì)社區(qū)最受喜愛的點(diǎn)子?？墒钱?dāng)提到設(shè)計(jì)團(tuán)隊(duì)時(shí)，就會(huì)想到設(shè)計(jì)師擁有他們獨(dú)立的觀點(diǎn)，所以要有保留的接受這些想法.
 

1.響應(yīng)式布局

響應(yīng)式設(shè)計(jì)已經(jīng)變成了一個(gè)最終來(lái)使設(shè)計(jì)的布局適配各種數(shù)字媒體視窗的入口。此想法是用來(lái)支持所有的來(lái)自筆記本電腦，臺(tái)式機(jī)，智能手機(jī)，平板和任何將來(lái)將要發(fā)布的設(shè)備。

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

這里的重點(diǎn)是思考站點(diǎn)設(shè)計(jì)作為一個(gè)動(dòng)態(tài)和自然流體的單一畫板，css3媒體查詢?cè)试S開發(fā)者在有限的或者擴(kuò)展的屏幕之上自定義布局，用這個(gè)來(lái)增加你的優(yōu)勢(shì)同時(shí)也看看其他設(shè)計(jì)師是如何實(shí)用它的。
 

2.視網(wǎng)膜支持

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

視網(wǎng)膜屏像素基本上是其他任何普通LCD的兩倍，雖然它們有相同的物理尺寸，但是視網(wǎng)膜屏可以使用兩倍的數(shù)字像素來(lái)適應(yīng)相同的物理尺寸。

這意味著“像素完美”的網(wǎng)頁(yè)設(shè)計(jì)師將要制作兩套圖片格式.以此來(lái)支持視網(wǎng)膜設(shè)備。首先你需要使你的樣本圖片兩倍于普通圖片的分辨率，接著保存標(biāo)準(zhǔn)版本的圖片。大分辨率的圖片將會(huì)在標(biāo)準(zhǔn)分辨率的屏幕上縮小并且在視網(wǎng)膜屏上看上去更鮮明。

我最喜歡的一個(gè)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)工具retina.js,它是一個(gè)javascript庫(kù)，用來(lái)使你的用戶無(wú)論何時(shí)在使用視網(wǎng)膜設(shè)備時(shí)，自動(dòng)的展現(xiàn)視網(wǎng)膜圖片。

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

3.固定的頭部條目

使用CSS position:fixed屬性是使你的頭部條目固定在網(wǎng)站最好的方法。當(dāng)用戶往下滾動(dòng)你網(wǎng)頁(yè)的時(shí)候，此方法會(huì)提供一個(gè)靜止不動(dòng)的導(dǎo)航和一個(gè)回主頁(yè)的路徑。這個(gè)趨勢(shì)已經(jīng)有一段時(shí)間，但是我們現(xiàn)在才看到它全部的力量。

因?yàn)樗麄儙缀蹩梢怨ぷ髟谌魏尉W(wǎng)站，所以看上去很有趣。它們包括社交網(wǎng)絡(luò)、博客甚至有設(shè)計(jì)工作室又或者是私人公司。這種設(shè)計(jì)非常的流行并且看上去和許多布局很搭配。但是從美學(xué)角度看，這個(gè)固定的條目提供了一個(gè)減小操作網(wǎng)站距離感的特別用戶體驗(yàn)。
 

4.大圖片背景

攝影師或者攝影愛好者肯定很享受這種設(shè)計(jì)趨勢(shì)。我已看過無(wú)數(shù)的案例來(lái)討論使用超大圖片來(lái)作為背景的這種想法。這是獲取用戶注意力極佳的方法并且當(dāng)恰如其分的完成時(shí)會(huì)看上去很棒。

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

5.CSS透明

CSS3的新屬性已經(jīng)允許編輯網(wǎng)頁(yè)上任何元素的不透明，這意味著你可以在不使用photoshop的情況下，在現(xiàn)代瀏覽器中實(shí)現(xiàn)透明。這種透明性的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)最近在codrops上討論帶有一些非常生動(dòng)的話題。

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

另一個(gè)來(lái)操作透明度的設(shè)計(jì)技巧是通過rgba()顏色語(yǔ)法，在css書寫時(shí)你可以指定具體的紅，綠，藍(lán)以及透明度，所以使用rgba(255,255,255,0.6)會(huì)生成60%的不透明白色，這確定是一個(gè)設(shè)計(jì)趨勢(shì)，所以在2013以及以后我們?nèi)钥梢员в衅诖?br />  

6.極簡(jiǎn)的著陸頁(yè)面

任何一個(gè)花一些時(shí)間調(diào)研市場(chǎng)的人都會(huì)明白網(wǎng)絡(luò)銷售是既簡(jiǎn)單又聰明的，你可以接觸到世界上任何地方的消費(fèi)群體，另外你還可以賣一些非實(shí)體產(chǎn)品，例如視頻或有創(chuàng)造性的東西。

在網(wǎng)上創(chuàng)建一個(gè)簡(jiǎn)潔的著陸頁(yè)面就是為了獲取指引到你的產(chǎn)品或服務(wù)的引導(dǎo)線。這個(gè)新趨勢(shì)奉行極簡(jiǎn)主義的信條：保持所有東西簡(jiǎn)單同時(shí)專注你的核心產(chǎn)品。

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

7.數(shù)字快速響應(yīng)編碼

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

但是最近我發(fā)現(xiàn)一些站點(diǎn)巧妙的將編碼融入到設(shè)計(jì)中，因?yàn)樗鼈兘?jīng)常出現(xiàn)在打印中，所以你很少注意到它們。但是隨著時(shí)間的增長(zhǎng)，由于數(shù)據(jù)傳輸越來(lái)越快，QR 編碼會(huì)成為流行趨勢(shì)。你可以在Keith Cakes聯(lián)系頁(yè)面看到此技術(shù)鮮明的例子。
 

8.社交媒體標(biāo)記

網(wǎng)絡(luò)營(yíng)銷是網(wǎng)站成功或失敗的基本決定因素。社交化媒體和病毒式營(yíng)銷在許多不同的網(wǎng)站爆發(fā)，Digg 曾經(jīng)是這一領(lǐng)域的霸主，但是現(xiàn)在已經(jīng)被對(duì)手Reddit所取代。但是這并不意味著僅僅有兩個(gè)可以在線分享心情故事的網(wǎng)站資源。

你可以在任何社交社團(tuán)上檢索到分享標(biāo)記，這樣就有可能發(fā)現(xiàn)很好的解決方案。你可以把這些分享標(biāo)記放在你的布局的任何地方。這種設(shè)計(jì)對(duì)于一些急迫想在Facebook，Twitter更或者是LinkedIn上分享內(nèi)容的讀者或粉絲也是有積極一面的。

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

§ 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.詳細(xì)的插圖

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

插圖可以應(yīng)用在多種各式各樣的方法中，以此給你的網(wǎng)站帶來(lái)不同的感受?？纯椿ヂ?lián)網(wǎng)，你就會(huì)發(fā)現(xiàn)許多畫廊和插圖網(wǎng)站都集中在電子插圖上。你能看到這么有美感的工作最終完美的融入網(wǎng)站的品牌中，MailChimp或許是擁有黑猩猩郵遞員商標(biāo)最具代表性的例子了。
 

10.無(wú)限滾動(dòng)

無(wú)限滾動(dòng)加載至少存在許多年了,但是此技術(shù)直到今年才成為主流，我想在2013年還會(huì)繼續(xù)。

Pinterest已經(jīng)為他們的布局采用此加載技術(shù)并且運(yùn)行的很完美，你可以搜索任何東西而且當(dāng)你往下滾動(dòng)時(shí)結(jié)果頁(yè)會(huì)不斷地加載，分頁(yè)基本上不是問題，甚至不會(huì)對(duì)用戶體驗(yàn)造成影響，討論為簡(jiǎn)約設(shè)計(jì)。

但是另一個(gè)非常棒的或許是我最喜愛的例子是在Tumblr。你可以發(fā)博客同時(shí)可以摘錄所有出現(xiàn)在你面板上你跟隨人的照片。所以當(dāng)你登陸之后所有最近的帖子會(huì)出現(xiàn)且無(wú)線的往下滾動(dòng)頁(yè)面。

這是一個(gè)極好的技術(shù)，可是并不能應(yīng)用在每一個(gè)布局上。但是對(duì)于能適應(yīng)此方法的網(wǎng)站從視覺和表現(xiàn)上都相當(dāng)驚人。
 

11.主頁(yè)特點(diǎn)巡回

在網(wǎng)上新產(chǎn)品通過滾動(dòng)圖片展示和示例視頻都很常見。著陸頁(yè)和新建頁(yè)面經(jīng)常嘗試使用一些甜頭來(lái)誘惑潛在的客戶。如果你知道如何在網(wǎng)站上將東西構(gòu)造的很好，它的作用將會(huì)很明顯。

回顧2012年我會(huì)說(shuō)此趨勢(shì)最好的例子是MediaFire’s homepage.這個(gè)頁(yè)面的整個(gè)頭部是在一系列幻燈片之間滾動(dòng)。每一個(gè)幻燈片都表述了你可以在MediaFire做什么同時(shí)闡述了和其他網(wǎng)站的對(duì)比他們的特點(diǎn)。幫助此例子表現(xiàn)突出的依舊是他們使用的大插圖和圖標(biāo)。這是一個(gè)不適合全站使用的趨勢(shì)，你僅僅可為某些產(chǎn)品以此來(lái)吸引更多的關(guān)注。
 

12.滑動(dòng)的網(wǎng)頁(yè)面板

過去當(dāng)flash和Actionscript很盛行的時(shí)候，滾動(dòng)的網(wǎng)站很火。而現(xiàn)在，動(dòng)的效果已經(jīng)可以通過Javascript和JQuery實(shí)現(xiàn)，并且依次影響了設(shè)計(jì)師建設(shè)網(wǎng)站的方法。我是偶然喜歡上滾動(dòng)面板技術(shù)并且希望在2013年看到更多。

立馬點(diǎn)擊，你或許會(huì)想CaptainDash是一個(gè)普通的網(wǎng)站，可是當(dāng)你通過導(dǎo)航點(diǎn)擊的時(shí)候，你會(huì)發(fā)現(xiàn)每一個(gè)頁(yè)面都是通過左右連續(xù)推動(dòng)加載的。這些動(dòng)的效果并不總是對(duì)手機(jī)用戶是個(gè)好的兆頭。

若你可以通過響應(yīng)式布局來(lái)處理它們，又或者有可供選擇的手機(jī)站點(diǎn)，滾動(dòng)效果在手機(jī)上就會(huì)很酷，值得一試！
 

13.移動(dòng)導(dǎo)航切換

當(dāng)談到響應(yīng)式設(shè)計(jì)時(shí)，最難的問題之一是如何創(chuàng)建一個(gè)靠譜的導(dǎo)航。你希望能給用戶對(duì)你所有重要的鏈接以直接的訪問，而不要淹沒在頁(yè)面中而使其難以辨讀。先保持導(dǎo)航隱藏當(dāng)需要時(shí)再出現(xiàn)也是一個(gè)很好的點(diǎn)子。

進(jìn)入移動(dòng)導(dǎo)航切換菜單漂亮的設(shè)計(jì)趨勢(shì)，Treehouse Blog是極少數(shù)將此技術(shù)在智能手機(jī)和pc端瀏覽器表現(xiàn)都很耀眼的例子之一。但是有許多網(wǎng)站和工作室在他們的個(gè)人響應(yīng)式布局中使用了此趨勢(shì)。

我所喜歡的導(dǎo)航切換是你可以以多種方式設(shè)計(jì)導(dǎo)航，你可以有從頭部到底部的導(dǎo)航或者往下滑動(dòng)，又或者左右推動(dòng)內(nèi)容。設(shè)計(jì)師有許多玩的選擇但是對(duì)于UI實(shí)驗(yàn)需要更多的時(shí)間。
 

14.全屏排版

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

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

獨(dú)一無(wú)二的大字體樣式可以像超大圖片一樣突出，同時(shí)我確定在新的一年我們會(huì)看到這種設(shè)計(jì)會(huì)得到更多的評(píng)論。
 

15.編程接口和開源

開源軟件已經(jīng)存在數(shù)十年了同時(shí)自從它存在就改變了網(wǎng)絡(luò)。但是在2012年里我注意到有更多的關(guān)于開源軟件涉及到網(wǎng)頁(yè)組件、布局、動(dòng)態(tài)效果。典型的是我們可以談?wù)撁赓M(fèi)網(wǎng)站模板，布局或者像WordPress的CMS軟件。

像Github這樣開放的編程接口和資源不僅允許設(shè)計(jì)者進(jìn)行原型布局，還可以在頁(yè)面上制作動(dòng)畫和效果。在網(wǎng)絡(luò)上jQuery事實(shí)上有無(wú)數(shù)的插件供免費(fèi)下載使用。

說(shuō)真的我不希望開源項(xiàng)目在任何時(shí)期發(fā)展緩慢，現(xiàn)在就是該開始并且促進(jìn)在創(chuàng)建網(wǎng)站領(lǐng)域知識(shí)的時(shí)候。
 

16.深度盒子陰影

我在2012年的文章中已經(jīng)討論過CSS3的盒子陰影，這種趨勢(shì)已被證明是非常準(zhǔn)確的。事實(shí)上，我經(jīng)常希望看到在現(xiàn)代網(wǎng)頁(yè)設(shè)計(jì)中加入盒子陰影效果。這種效果看上去很神奇，它們從來(lái)不會(huì)偏離美學(xué)除非過度使用。

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

我將會(huì)在整個(gè)2013年留意盒子陰影效果。我想此效果已經(jīng)在設(shè)計(jì)社區(qū)根深蒂固，現(xiàn)在更該關(guān)注的是誰(shuí)最有創(chuàng)造力的實(shí)現(xiàn)盒子陰影效果。
 

17.CSS3動(dòng)畫

CSS3 帶有相關(guān)瀏覽器前綴的transition屬性允許CSS實(shí)現(xiàn)像Javascript一樣的動(dòng)畫效果。設(shè)計(jì)師現(xiàn)在能以不同的CSS屬性實(shí)現(xiàn)動(dòng)畫效果。我有許多恰當(dāng)使用過渡效果的hover effects and form input fields例子。

另外一個(gè)優(yōu)秀且激動(dòng)人心的例子來(lái)自CSS alerts tutorial on Codrops。提示你如何為各種不同的動(dòng)畫設(shè)置時(shí)間。

我對(duì)新的設(shè)計(jì)師推動(dòng)不通過腳本來(lái)實(shí)現(xiàn)的動(dòng)畫充滿信心。
 

18.垂直導(dǎo)航

當(dāng)我第一次注意到不同的網(wǎng)站使用此趨勢(shì)的時(shí)候，并不是很感興趣。可是在過去的一年里，我看到越來(lái)越多的設(shè)計(jì)師創(chuàng)造了完美的垂直解決方案。當(dāng)此布局被正確的完成，垂直網(wǎng)站布局可以容納充足的內(nèi)容同時(shí)具有好的設(shè)計(jì)體驗(yàn)。

Riot Industries的組合對(duì)于新設(shè)計(jì)師是個(gè)很好的例子。查看一下導(dǎo)航鏈接是如何工作的，在移動(dòng)上去是整個(gè)組合動(dòng)的效果是如何實(shí)現(xiàn)的。邊框紋理確實(shí)展現(xiàn)了一個(gè)左右兩列分開的線。

紋理效果同樣在另一個(gè)垂直布局上出現(xiàn)，例如CSS畫廊Design Bombs.

19.單頁(yè)面網(wǎng)頁(yè)設(shè)計(jì)

單頁(yè)面設(shè)計(jì)是一個(gè)很大的話題，覆蓋了許多不同網(wǎng)站分類。顯而易見自從萬(wàn)維網(wǎng)創(chuàng)建單頁(yè)面網(wǎng)站就出現(xiàn)了。但是最近幾年這種趨勢(shì)變成了一種更加自然的用戶體驗(yàn)。

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

隨著你往下滾動(dòng)頁(yè)面，導(dǎo)航條一直固定在你的瀏覽器頂部。合并其他的網(wǎng)頁(yè)設(shè)計(jì)趨勢(shì)到單頁(yè)面布局里面是吸引用戶注意力和創(chuàng)建一個(gè)迷人的網(wǎng)站的解決方法。
 

20.圓圈元素設(shè)計(jì)

這一圓圈設(shè)計(jì)趨勢(shì)在網(wǎng)站布局是比較新的且已經(jīng)被賦予了很多的關(guān)注。設(shè)計(jì)師喜歡圓圈設(shè)計(jì)，因?yàn)樗鼈兏蓛?、整潔，一般適合任何塊狀布局。你可以構(gòu)建你的圓形或者把你的頁(yè)面元素更改為圓形設(shè)計(jì)（例如用戶頭像、分享按鈕、發(fā)表日期等等）。

Lucia Soto組合基本上是圓形網(wǎng)頁(yè)設(shè)計(jì)中很棒的一個(gè)例子。這個(gè)網(wǎng)站是動(dòng)態(tài)創(chuàng)建的所以你得在頁(yè)面上水平移動(dòng)不同的片段。您也將注意到一些可愛的向量藝術(shù)品以及星羅棋布的間隙。Web設(shè)計(jì)師渴望這些額外的花絮在頁(yè)面布局上,因?yàn)樗麄兺嘎冻鑫ㄒ恍浴?/p>

你可以在Site Optimizer主頁(yè)上發(fā)現(xiàn)一個(gè)簡(jiǎn)單的例子，它使用了圓形頁(yè)面設(shè)計(jì)作為他們服務(wù)的信息賣點(diǎn)。
 

結(jié)束語(yǔ)

當(dāng)創(chuàng)建數(shù)字產(chǎn)品時(shí)，用戶界面是最復(fù)雜的話題。嘗試著使導(dǎo)航和內(nèi)容樣式獲得成功的用戶體驗(yàn)。這些設(shè)計(jì)趨勢(shì)目的是給設(shè)計(jì)師指明正確的方向。