使用不同的2個或3個色系，進行相互搭配，從而產生不同的設計效果，或沖突或和諧。這是一種前衛又時尚的網頁色彩流行趨勢，收集了15個相關的作品，分享給優設的童鞋們 : ）

如果您想盡快學會配色請移步這篇人氣超高的文章：設計師的配色理論：你真懂顏色了嗎？

Uidigital

Decode

“人生太孤單，要找個有趣的人一起過”——王小波

相信大家肯定都喜歡幽默風趣的設計。
當流行的扁平化設計遇到幽默元素，會摩擦住怎樣的火花呢？

幽默的魅力是無窮盡的，它即能夠讓用戶感到有趣，又能夠迅速的吸引用戶的注意。
如果想為網站添加幽默元素，可以有很多種方式，例如：

• 搞笑的錯誤頁面（Team Treehouse）
• 搞笑的Logo(Pixo Creative)
• 卡通式的布局
• 搞怪的背景圖像
• 可愛的圖片
• 讓人爆笑的視覺元素

一旦你做到了有趣，用戶自然就會對你的網站側目。
我們一起來看看下面這些吸引眼球的幽默案例吧！

相關推薦：
《激活你的設計創意！不容錯過的55個創意驚人的網站》
《想設計自己的網站？先來看這15個優秀設計師的酷站》

Arrietty：當我們建立網站的時候，我們一般從定義正文開始。正文的定義顯示了你的主欄有多寬，其它幾欄的大小就隨它自己內容定義了。直到最近，各種屏幕分辨率或多或少是同質化的。如今，我們要處理各種屏幕尺寸和分辨率。這讓處理變得更復雜。

在重整旗鼓的熱情中，我寫了一篇關于響應式排版的博客，這篇文章主要專注于我們最近的實驗：響應式字體。如果不知道IA的歷史，你可能會錯過我們新啟動的網站中的響應式排版和設計的一些關鍵點。我決定從頭做起，一步一步解釋響應式排版，而不是整理所有文章。以下是第一步。

為了防止給每個可能的屏幕尺寸做不同的層級設計，很多網頁設計師會采用響應式網站的概念。一言以蔽之，這是一種網頁布局會自動適應屏幕尺寸的概念。有很多種方法可以定義這種概念。我喜歡用這種方法：

適應性布局：按步驟調整布局適應有限數量的屏幕尺寸。流體性布局：不斷地調整布局以適應每一種可能的寬度。兩種方式都有優勢和劣勢，我們相信布局適應于很少的合理變化位置是我們要采用的方法，因為可讀性比布局寬度隨時和窗口一樣寬來得重要。這是不是一個復雜的問題它本身就值得商榷，但是最優的可讀性需要在文字尺寸上一定數量的控制（欄寬），就此看來，流體式布局會產生更多問題。

@騰訊ecd 星舊：作為未來網頁設計的熱點趨勢之一的“滾動視差”在近年來被越來越多網站所采用，特殊新穎的展示模式也讓許多用戶眼前一亮。網絡上也如雨后春筍一般出 現了很多像《30個讓人興奮的視差滾動網站》、《60個視差滾動網站賞析》……等一系列的視差滾動的文章，不過賞析的居多，真正指導設計師如何去設計，如 何去實現的實用型文章卻很少。于是萌發了自己寫一篇的想法，與感興趣的人共同交流下滾動視察設計時的一些心得。

什么是滾動視差？
視差滾動（Parallax Scrolling）是指讓多層背景以不同的速度移動，形成立體的運動效果，帶來非常出色的視覺體驗。

視差效果，原本是一個天文學術語，當我們觀察星空時，離我們遠的星星移動速度較慢，離我們近的星星移動速度則較快。當我們坐在車上向車窗外 看時，也會有這樣的感覺，遠處的群山似乎沒有在動，而近處的稻田卻在飛速掠過。許多游戲中都使用視差效果來增加場景的立體感。說的簡單點就是網頁內的元素 在滾動屏幕時發生的位置的變化，然而各個不同的元素位置變化的速度不同，導致網頁內的元素有層次錯落的錯覺，這和我們人體的眼球效果很像。我看到多家產品 商用視差滾動效果來展示產品，從不同的空間角度和用戶體驗，起到了非常不錯的效果。

看似復雜其實這個早就不是什么新鮮事兒，這種設計思路早在80年代的小霸王學習機上就見過。

在這個畫面里通過人物馬里奧、前景、背景著三個部分的移動速率的不同來實現立體效果。類比網頁也是如此。一個滾動視察的網站至少會有以下幾層 ：背景層，內容層，貼圖層。

時代一直在變，一個又一個的創新讓我們感到驚訝萬分。網頁設計的趨勢如同流星，光芒耀眼，但來得快、去得也快。雖然跟風很不好，顯得毫無設計主見，但很多設計潮流確實值得追隨。就像當下響應式設計、扁平化設計、以及滾動視差等。

可是呢，還有很多極為”糟粕”的設計趨勢，本文一一列舉，請君對號入座。

相關推薦：
《年終特典！當下最熱門的網頁設計趨勢總結》
《網頁：滾動視差設計指南》

1. 除了電話線時代的老頑固，現在已經沒人喜歡頁面跳轉了

“下一頁”、”下一張”，明明一頁就能展現的內容，非要跳轉20多次才能看全，你把用戶當傻子？操作繁瑣、浪費時間、效率低下，沒人喜歡頁面跳轉過于頻繁的網頁。

2. 十面埋伏的廣告

確實有很多網站的維持依賴廣告收入，但是廣告的位置一定要合理，不要妨礙用戶瀏覽信息，用戶體驗永遠位于廣告之上。沒有用戶訪問量，也就沒人找你打廣告。

不知不覺的，很多網頁設計中采用了圖標式導航（Navigation）——一般使用三道杠作為圖標，用以導航。
這種導航的好處是節省空間，讓界面更簡潔。

圖標式導航的案例

這是YouTube 的圖標式導航(移動版):

這是Squarespace的圖標式導航：

AWARD的圖標式導航不拘一格：

通過我們長期對設計類網站的發掘，總結出了一個現象，那就是很多關于響應式設計的文章只給出了桌面版的網頁設計，卻沒有提供移動版網頁設計的對比，這在我們看來，多少顯得有點不夠專業。

于是，我們在這里收集整理了25例優秀的響應式網頁設計，均有桌面版和移動版的對比。在方便您閱讀這篇文章的同時，您不妨也思考一下靈活性這個主題。
對了，如果您還不夠了解響應式設計，請至我們這篇文章《經驗分享：響應式排版中的基礎知識》回顧學習。

Whisperism

World Wildlife

Naspa

有同學喜歡玩黑白配，但是卻一直不得要領，總設計不出讓人眼前一亮的佳作出來？今天就讓我們來這些優秀案例里找原因。

深色的背景看起來具有神秘感，能提供前景元素、背景元素的高度對比。有了黑色的鋪墊渲染，任何一個色彩都可以輕易在它之上煥發光彩。
那么怎么才能更好的在網頁設計中運用深色背景呢？想要成為一名”高級黑”設計師嗎？先來欣賞本文的絕贊范例吧。

The Blue Cube

外觀整潔干練，對照鮮明。黑色背景凸顯了白色文本。

作為一名網頁設計師，有時會使用很多不是必需的元素或者大量的復雜色調來使頁面脫穎而出。這樣做往往會使頁面看起來太過花哨和分散用戶的注意力，無法突出頁面的內容。大多時候你會發現使用簡單的設計方法就會達到很好地效果。因此，今天我們收集了15個新鮮的用簡約風格設計的頁面來啟發大家的靈感。

相關推薦：
《11個超炫的視差滾動網站欣賞（附神器推薦）》

《awwwards上推薦的20個擁有創意布局的網站》

Arko

Orchard Keepers

@米田的天空最近比較忙，整理作品的速度明顯放緩了許多。今天總結些前段時間做的微信第三方網站。要清楚，它是網站不是單獨的一個網頁。需要考慮更多是整體性的問題。

在拿到項目時，首先需要冷靜下來。而不是急著去動手，大部分同學肯定都理解了解其緣由。這邊要說的更多是前期先看看相似對手的情況。因為視覺設計相對于產品功能，是最容易拉開差異感的部分?；蛟S一套不同的視覺策略就能讓產品迅速脫離大部分同類作品走出來。

大部分的普遍

大部分的微信第三方，和似乎都不太注重展示部分。即視覺部分，隱隱有些暴發戶的感覺。而且現在做這塊的公司似乎已經有當年做團購的景象。多，十分多，最后迷失在一片片營銷的海洋里。

做為設計師，先跳出來觀察下。其實我們會驚訝的發現，這些站的普遍性都是為你做個微信mini站，就是所謂的新時代營銷。最核心的功能基本也是一致，如下：

• 智能導航（調用地理位置地圖接口）
• 在線支付
• 全景看圖（自由圖片組合）
• 抽獎營銷活動

隨便打開搜索”微信 營銷 專家”，一堆類似微信第三方網站?，F在很多的創業者也在做類似的項目，總之，就是很多很多公司做著類似的嘗試。當然，國內任何的領域基本都是同時存在上百個同類的項目，能真正運營下去到最后也只有3-4家而已。

自己隨便打開其中一個站點，發現其推廣的核心點，也是如上述說的一樣，功能部分的幾乎所有的微信第三方都做著差不多的事情。如果你隨便打開這個網頁，你覺得你會主動去聯系他們么？在很多相似產品存在的情況下。