本文授權轉自： 菜心設計鋪（ID：caixinshejipu）

最近又找到了很多網頁中的亮點設計，整理好之后就立馬來分享給大家了，也是希望能夠對大家的設計之路有所幫助。

一、創意性卡片設計

我們前面已經分享過很多卡片設計了，前面分享的卡片設計雖然都有一些特點，但大都是中規中矩，總感覺缺少一些創意。今天來給大家分享幾個我認為比較有創意的卡片設計，希望能夠為大家帶來一些卡片的新的設計方向。

下面這個案例中，首先我們可以看出里面存在視覺、動效等設計。并且，里面的元素也十分的多，層次感十分豐富，為了更好的保證切換的流暢感，還在其中加入了可以拖動的進度條。

在案例中，用戶通過拖動下面的進度條，畫面中的卡片進行切換，切換速度全憑用戶的意愿，保證了用戶能夠對感興趣的卡片仔細觀察。同時，切換出來的卡片有一個由遠到近的視覺動效設計，在視覺上對用戶有一定沖擊力。并且還在卡片周遭加入了大量的元素，來保證畫面的飽滿度以及層次感，如此一來作為畫面主體的卡片就能更好的展示在用戶眼前。

上面的案例已經創意感滿滿了，不過下面這一個案例單論創意還在上面的案例之上，只不過上面的案例在視覺沖擊力上占了很大的優勢。

下方的案例中，設計師巧妙的將卡片藏進了文字信息中，還特意將文字設計成了動態的效果。當用戶將鼠標放置在其中一段文字信息上時，那么卡片就會從中出現。

卡片用切斜的方式呈現，并且還會跟著文字一起移動，這樣一來在視覺上就不會顯得太平淡，并且卡片中還會帶有一些立體感。

從上面兩個案例中，我們都可以從中看到新奇的創意。卡片不在只能方方正正的放置在畫面中，然后在其中加入一些動效。我們也完全可以在這些創意的思路上，想出一些新的創意，來增加自己網頁的設計感和特點。

二、網頁中視頻播放設計

有些時候，為了更好的展示一些信息，我們需要在網頁中放置一段視頻來保證讓用戶看明白其中的意思。下面給大家分享一些網頁中視頻放置設計的優秀案例。

我們先來看下面這個案例，案例中當用戶從上方的畫面中往下滑動時，畫面的背景從淺色變換成了深色。紫色的背景和視頻中物體的顏色進行了呼應。用戶點擊畫面中的視頻開始播放，在播放時視頻周圍會出現一個圓形的進度條，來提示用戶視頻的時間長度。并且畫面中間的文字一直都在，在切換畫面時，視頻擋住了其中的一段文字，層次感了，畫面也不會太空。

上面的案例是因為視頻在畫面中占比太少，所以整體的小設計比較多。那如果我們的視頻占比比較大，是不是就不用在去增加一些其他的小設計了？下面這個案例就可以告訴我們答案。
?

下面的案例中，在視頻播放之前畫面中的吉祥物一直處于動態的效果。在吉祥物下面的按鈕設計成了文字的方式展示，用戶點擊播放之后，整個畫面就被視頻鋪滿了。整個網頁的畫面都被視頻鋪滿之后，自然就不需要其他的設計了。即使沒有鋪滿整個畫面，如果占比很大依舊不用去添加其他設計，否則只會是畫蛇添足。

三、畫面切換設計

設計網頁時，如果我們想在正式進入網頁前設計一個初始頁面用來展示網頁的品牌名稱或者Logo時，那么切換到主頁面時一定要有足夠的設計感，足夠的視覺沖擊力。

我們來看下面的設計案例，案例中的網頁在初始頁面除了展示了一些文字信息之外，還加入了一個籃球元素來作為切換時的載體。

下面這一個案例中，在網頁初始頁面，設計師將網頁logo以及網頁名稱放置在了初始頁面。隨后logo和名稱會出現變形和向上的一個移動的動效，緊接著帶出網頁主頁面。這樣來設計的目的，能夠更好的向用戶強調網頁，讓用戶加印象。畫面整體的切換過程也很不錯，通過logo和名稱的變換和消失來營造一種將頁面向上拉動出來的過程。

所以，我們在設計網頁時，如果也想要在其中加入一個初始頁面，那么一定要保證在切換過程中的流暢度和設計感。

四、差異風格植入設計

一個網頁的風格在設計之初就應該定型，以此來保證在設計途中不會出現跑題的問題。網頁的風格必須從頭到尾是聯通貫穿的，保證任何一個細節都不會出現不同的風格，否則就會顯得格格不入。下面給大家分享兩個網頁風格設計的案例。

整個網頁的設計是差異風格，設計風格定型之后，整個網頁在設計時都按照這個方向在設計。首先映入眼簾的是網頁logo展示設計，logo整體的配色還是動效都是差異化設計，從這里開始風格就已經不能隨便更改了。????????

經過主頁面之后，來到網頁中的內容展示，我們可以看到不管是網頁中的配色還是卡片以及畫面中的一些元素整體的風格都是在延續上面主頁面的風格，沒有絲毫偏差。

包括網頁最后的按鈕，當用戶將鼠標放置在上方的時候，圖標會出現和整體風格相匹配的動效。

我們在接著看一下下一個案例，案例中的網頁同樣是用的差異風格。和上面案例不同的是，這個案例中整體配色偏社重色一點，在視覺上所營造出來的氛圍不一樣。

網頁整體背景是動態的，加強了視覺沖擊力。

在主頁面之后的內容里，差異風格同樣深深的植入在了網頁中，卡片的調色和形狀都能看出來。整體的差異風格，延續的非常好。

從上面的案例中，我們可以看到網頁的風格從定型的那一刻起，后續所有的設計都要圍繞著進行。不管是按鈕還是元素或者卡片以及網頁整體配色，如果出現風格之外的其他風格，那么整個網頁就會出現不和諧的感覺，沒有那種氛圍感了。

總結

以上的內容就是今天分享的所有內容了，今天分享的內容涵蓋了卡片、視頻、畫面和風格方面的內容，整體看起來有些雜亂，不過每一個知識點都比較好理解。好了，今天的分享就到這里了，希望能夠對大家有所幫助。

文章轉載：菜心設計鋪，版權歸原作者所有

原文鏈接：https://mp.weixin.qq.com/s/L9eD6uT1lGgABGMjp_fabQ

版權聲明：“IXDC”所推送的文章，除非確實無法確認，我們都會注明作者和來源，本公眾號對轉載、分享的內容、陳述、觀點判斷保持中立，不對所包含內容的準確性、可靠性或完善性提供任何明或暗示的保證，僅供讀者參考。部分文章推送時未能與原作者取得聯系，若涉及內容或作品等版權問題，煩請原作者聯系我們，給出內容所在的網址并提供相關證明資料，我們會核查后立即更正或者刪除有關內容！本公眾號不承擔任何責任，并擁有對此聲明的最終解釋權。

聯系微信：18802086168

聯系電話：18802086168

編排 | 巫 歡

終審 | 蘇 菁

點這里，學習更多設計知識！