2018年優(yōu)秀動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)大賞【附教程】

時(shí)間：2023-09-28 02:18:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2023-09-28 02:18:01 來源：網(wǎng)站運(yùn)營

2018年優(yōu)秀動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)大賞【附教程】：隨著設(shè)計(jì)行業(yè)的的不斷進(jìn)步和發(fā)展，動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)已經(jīng)成為設(shè)計(jì)師必須掌握的重要技能之一。對(duì)于許多設(shè)計(jì)師來說，缺乏設(shè)計(jì)靈感和網(wǎng)頁設(shè)計(jì)是阻礙設(shè)計(jì)的主要問題。針對(duì)這些問題，小編在本文中為設(shè)計(jì)師精心準(zhǔn)備了優(yōu)秀網(wǎng)頁設(shè)計(jì)欣賞和網(wǎng)頁設(shè)計(jì)教程，對(duì)其交互設(shè)計(jì)步驟進(jìn)行了逐一講解。

優(yōu)秀網(wǎng)頁設(shè)計(jì)欣賞

1. Granny’s Secret

Granny's Secret 是一家關(guān)于食物的英國網(wǎng)站，該網(wǎng)站的食物色彩配色十分悅目。除此之外，該網(wǎng)站的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)自然、簡單、流暢，是不可多得的優(yōu)秀網(wǎng)頁設(shè)計(jì)。

2. Mira

Mira是一個(gè)關(guān)于冥想體驗(yàn)的網(wǎng)站，用戶觸摸屏幕后即可獲得讓人放松的聲音和粒子。根據(jù)自己的產(chǎn)品特點(diǎn)，該網(wǎng)站的動(dòng)態(tài)設(shè)計(jì)以粒子輕松游走在界面為主。除了主頁的動(dòng)畫，界面右側(cè)設(shè)置了點(diǎn)擊切換頁面的交互設(shè)計(jì)。

3. Kwok Yin Mak

Kwork Yin Mak 是一個(gè)設(shè)計(jì)師的個(gè)人網(wǎng)站，網(wǎng)站的上下滾動(dòng)切換頁面過程非常流暢，用戶效果體驗(yàn)極佳。此外，頁面的點(diǎn)擊放大的動(dòng)態(tài)設(shè)置讓人眼前一亮，長線條的載入條設(shè)計(jì)簡潔大氣。

4. Robin Mastromarino

Robin Mastromarino 是一位設(shè)計(jì)師的作品集網(wǎng)站，網(wǎng)站整體色彩分明，時(shí)尚感十足。除了主頁的進(jìn)度條，網(wǎng)站的頁面切換也是一大亮點(diǎn)。

5. StoryTrail

StiryTrail 是一個(gè)國外旅行服務(wù)性網(wǎng)站平臺(tái)，該網(wǎng)站的動(dòng)態(tài)效果極其豐富，整個(gè)導(dǎo)航流程流暢而不冗余，帶給用戶舒適的視覺體驗(yàn)。因此，小編挑選其作為一例優(yōu)秀網(wǎng)頁設(shè)計(jì)欣賞。

6. I Like Tofu

I Like Tofu 是一個(gè)關(guān)于健康飲食的網(wǎng)站平臺(tái)，主要產(chǎn)品和內(nèi)容圍繞"我愛豆腐"展開。網(wǎng)站的色彩搭配較為簡約不失時(shí)尚，亮點(diǎn)在于其主要點(diǎn)擊切換色彩的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)。

動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)教程

欣賞完以上6個(gè)優(yōu)秀的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)，各位是不是已經(jīng)躍躍欲試呢？不知道如何下手？沒關(guān)系，小編從各個(gè)動(dòng)態(tài)網(wǎng)站設(shè)計(jì)中挑選了1個(gè)交互設(shè)計(jì)進(jìn)行分布講解。

1.彈出面板

優(yōu)秀網(wǎng)頁設(shè)計(jì)欣賞中的 Granny's Secret 網(wǎng)站主頁下面設(shè)置了點(diǎn)擊“News”彈出信息面板的效果，許多網(wǎng)站都會(huì)設(shè)計(jì)此類交互效果用于更多的信息呈現(xiàn)。如何在動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)中實(shí)現(xiàn)類似的交互效果？

摹客iDoc，支持自動(dòng)標(biāo)注和切圖的設(shè)計(jì)神器！
點(diǎn)擊免費(fèi)領(lǐng)取協(xié)作版

看似復(fù)雜，其實(shí)很簡單，只需3個(gè)主要步驟就能搞定！

Step 1: 打開工具軟件，從組件庫的交互分類中直接拖出“彈出面板”放至工作區(qū)。

Step 2: 雙擊組件進(jìn)行編輯所需內(nèi)容。













Step 3: 從組件庫中挑選另一組件作為觸發(fā)組件，拖動(dòng)鏈接點(diǎn)設(shè)置交互。










設(shè)計(jì)師根據(jù)自己的需要設(shè)置觸發(fā)方式，這里包括點(diǎn)擊時(shí)，右鍵點(diǎn)擊時(shí)，雙擊時(shí)，或者網(wǎng)站頁面載入時(shí)。













Step 4：點(diǎn)擊預(yù)覽演示交互效果。

2. 圖片變大

Kwork Yin Mak 這個(gè)網(wǎng)站中除了包含彈出信息面板的動(dòng)態(tài)設(shè)計(jì)，還有一個(gè)圖片變大的交互效果。這是如何實(shí)現(xiàn)的呢？小編利用自己使用的產(chǎn)品原型設(shè)計(jì)工具，三步就輕松搞定了！





Step 1: 從左側(cè)組件庫中拖出“圖片”組件放至工作區(qū)。

Step 2: 導(dǎo)入設(shè)計(jì)所需圖片后，拖動(dòng)右上角對(duì)自己做交互，觸發(fā)方式根據(jù)需要選擇，交互方式為“縮放”。













Step 3: 在右側(cè)屬性面板中設(shè)置詳細(xì)的交互，例如圖標(biāo)縮放比例，圖片縮放方向等。













Step 4: 點(diǎn)擊預(yù)覽交互效果。

3. 進(jìn)度條

進(jìn)度條無論對(duì)于APP設(shè)計(jì)還是動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)，都是不可或缺的一部分。Robin Mastromarino 就閃過一個(gè)進(jìn)度條的畫面。這個(gè)看似簡單的交互設(shè)計(jì)，許多設(shè)計(jì)師卻苦于無從下手。下面小編將為您詳細(xì)分析進(jìn)度條的制作步驟。




Step 1: 從左側(cè)組件庫中選擇1個(gè)圓形組件和1和線段組件，按照進(jìn)度條的樣式放至工作區(qū)。

Step 2: 點(diǎn)擊圓，將連接點(diǎn)拖至圓本身進(jìn)行交互，選擇觸發(fā)方式為“載入中”，選擇交互方式為“移動(dòng)”。













Step 3: 在右側(cè)交互屬性面板中做詳細(xì)設(shè)置，將執(zhí)行時(shí)長設(shè)為2000ms。













掌握了進(jìn)度條的設(shè)計(jì)方法，不妨趕緊動(dòng)手試試吧？許多設(shè)計(jì)師對(duì)于進(jìn)度條的樣式?jīng)]有設(shè)計(jì)靈感，小編在這里為您準(zhǔn)了24個(gè)最新創(chuàng)意進(jìn)度條設(shè)計(jì)，分分鐘讓你靈感爆表！

4.頁面切換

除了進(jìn)度條，Robin Mastromarino 和 StoryTrail網(wǎng)站還包含了頁面切換的動(dòng)效設(shè)計(jì)。對(duì)于新手來說，拋開代碼，如何實(shí)現(xiàn)這個(gè)常見的動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)？今天小編分享給您一個(gè)最簡單的設(shè)計(jì)方法。

使用分頁器

Step 1 : 打開網(wǎng)頁項(xiàng)目，新建多個(gè)頁面，并編輯頁面內(nèi)容。

Step 2: 從組件庫中選擇分頁器放至首頁。

Step 3：將分頁器的鏈接點(diǎn)一次鏈接至跳轉(zhuǎn)的頁面。













Step 4: 克隆首頁的分頁器，粘貼至每個(gè)需要設(shè)置切換效果的頁面。

Step 5: 點(diǎn)擊預(yù)覽查看交互效果。

5. 顏色切換

優(yōu)秀網(wǎng)頁設(shè)計(jì)欣賞中最后一個(gè)網(wǎng)站中，它的顏色切換效果不禁令人眼前一亮。原本素凈的網(wǎng)站，因?yàn)樵O(shè)計(jì)師這個(gè)巧妙的交互設(shè)計(jì)，變得活力滿滿。接著跟小編一起揭秘這個(gè)交互設(shè)計(jì)步驟吧！這應(yīng)該是網(wǎng)頁設(shè)計(jì)教程中最為簡單的一個(gè)交互效果了！





Step 1: 從左側(cè)組件庫中選取1個(gè)形狀組件和1個(gè)按鈕組件，放至工作區(qū)內(nèi)。

Step 2: 根據(jù)需要設(shè)置形狀組件的顏色。

Step 3: 選擇按鈕組件，拖拽鏈接點(diǎn)至形狀做交互，觸發(fā)方式為“點(diǎn)擊時(shí)”，交互方式為“設(shè)置顏色”。
















并在右側(cè)交互屬性面板中，設(shè)置交互后的顏色和交互是否延遲（根據(jù)自己需要）。













Step 4：點(diǎn)擊預(yù)覽查看交互效果。




以上就是小編為大家挑選的優(yōu)秀動(dòng)態(tài)網(wǎng)頁設(shè)計(jì)和網(wǎng)頁設(shè)計(jì)教程分享，希望能夠?yàn)樵O(shè)計(jì)師的工作和學(xué)習(xí)提供一些幫助。

【主頁菌福利】領(lǐng)取Mockplus個(gè)人版限時(shí)體驗(yàn)！

Mockplus目前已支持發(fā)布到iDoc，原型接入產(chǎn)品工作流，增加了原型標(biāo)注、評(píng)論、對(duì)比設(shè)計(jì)稿、全貌呈現(xiàn)等功能，誠邀體驗(yàn)！贈(zèng)送Mockplus個(gè)人版！數(shù)量有限，先到先得！
專屬激活碼：Mock2019；
激活數(shù)量：限量150個(gè)；
有效期：2019年9月30日

激活地址：https://www.mockplus.cn/user/upgrade （登錄/注冊(cè)后輸入激活碼即可）

Plus，發(fā)布Mockplus原型到iDoc，還有更多驚喜等你抱走！