文章分享了對話框及模態窗口、注冊與登錄頁面、導航及菜單、滑動條和切換開關等UI設計實例，希望對大家有所啟發。

CodePen網站已成為開發者的游樂場。那是一個你可以馳騁想象、開發創造的沙盤。里面既有實踐的東西，也有實驗性的概念——是個激發靈感的寶庫。我們在其中做了一些挖掘，發現了一些有趣的UI demo和概念圖，包括對話框和模態窗口、注冊與登錄頁面、導航及菜單、滑動條和切換開關，可供你欣賞和再設計。這些設計中的小驚喜讓用戶與網站或App的互動更愉悅。

接下來，請欣賞！

一、對話框和模態窗口

1.1 Flappy對話框

Alex Wright制作的的Flappy對話框是基于Dribble網站上Peter Main設計的一款概念圖。這個對話框窗的特色是兩個門簾（flap），一旦用戶鼠標懸停于其中一個上面，它就開始移動；而當用戶點擊時，整個窗口彈到最前面，而后消失。這是一種讓窗口及內容更突出的有趣的展現方式，尤其適用于像選擇“是”或“否”這種用戶不會過多關注的常規交互。

“Flappy對話框”制作：Alex Wright設計：Peter Main。

1.2 銷毀模態窗口

至于你是否想要在實際項目中運用它，存在很大的探討空間，但來自LegoMushroom的銷毀模態窗口的創意，的確令人印象深刻。一旦用戶關閉模態窗口，它立即變成碎片。這一效果令人驚喜！

“銷毀模態窗口”制作：LegoMushroom

1.3 Material Design樣式

來自Ettrics的Material Design樣式的核心是用戶點擊按鈕時展開的動畫?？此剖前粹o本身在展開，但實際上一個附加在按鈕上動態加載的<div>，并會展開為模態窗口的大小。在模態窗口顯現的瞬間，該<div>立即隱藏。很高明的做法！

“Material Design樣式”制作：Ettrics

二、注冊與登錄

2.1 交互式注冊表單

Riccardo Pasianotto的注冊表單非常具有創新性，絲毫不無聊沉悶。他沒有一下子就丟給用戶整個表單，而是通過小摘要式的條塊來詢問用戶必須的信息。表單其實由疊起來的三張卡片組成，當你開始打字時，表單域的小圖標立即就變成一個向上箭頭。點擊箭頭，卡片就向上翻開，展示下一個卡片。一個優美而令人興奮的交互效果！

“交互式登錄表單”制作：Riccardo Pasianotto設計：Denis Abdullin。

2.2 純CSS交互式表單

Emmanuel Pilande的交互式表單演示不僅在視覺上很時髦，在代碼上也是如此——它完全是由CSS實現的。每個表單域都獨立展示為一條紅色的長線，并伴有一個域標簽和占位文本。按下Tab鍵則跳到下一個表單域，非常優雅。

“交互式表單”制作：Emmanuel Pilande

2.3 Material注冊交互樣式

Sirkant Shetty的Material注冊交互樣式包含圍繞“注冊”按鈕來設計的的狀態，三者相互融合的非常和諧。注冊頁面的注冊按鈕展開為注冊表單，當用戶將表單填寫完整，并點擊“完成”按鈕時，該按鈕將變成一個圓圈并浮動至內頁的右下角，并承擔了新的功能。Kyle Lavery的制作的這個無縫銜接的交互非常靈動。

“Material Design Signup Interaction”制作：Kyle Lavery概念圖：Srikant Shetty。（來自MaterialUp）

2.4 緊湊型登錄

Boris Borisov的緊湊型登錄聯合了登錄和注冊。登錄頁面的一個紅色“+”圓圈隱藏了注冊表單，點擊紅色“+”后，注冊頁面展開并覆蓋登錄頁面。還有一個好看的動效：“Go”按鈕的文本外觀，從白色背景上的微微淺灰色的，隨著用戶填寫表單的進度，逐漸變為加粗紅色的文本。Andy Tran和Yusuf Bakir編碼了這個概念圖的變體。

緊湊登錄概念圖：Boris Borisov。（來自MaterialUp）

2.5 Material Design文本輸入

這個輕量級的文本輸入demo來自Ben Mildren。當用戶獲取焦點時，對應表單域的占位符標記在即向上移動并改變顏色。當用戶開始打字時，它們就完全消失，清晰而簡單。

“Material Design文本輸入” 制作：Ben Mildren

三、導航及菜單

3.1 篩選菜單

與你預想的不同，篩選菜單將其篩選項隱藏在菜單按鈕后。點擊后，菜單按鈕會變成一個關閉按鈕，并從圓心擴展出一個排列有篩選項的外環，順暢又優美。

“篩選菜單”制作：Arjun Amgain概念圖：Anton Aheichanka。（來自MaterialUp）

3.2 純CSS下拉菜單

這個Jamie Coulter做的很炫的純CSS下拉菜單是非JavaScript界面的良好補充。它利用菜單標簽觸發顯示子菜單的動畫。是用純CSS實現的。

“炫酷純CSS下拉菜單”制作：Jamie Coulter

3.3 CSS粘性菜單

Lucas Bebber的CSS粘性菜單通過CSS和SVG濾鏡來實現動效，沒有用JavaScript。菜單隱藏在標有漢堡圖標的圓圈后面。點擊時，圓圈噴出一團東東，而后分解成4個菜單圖標，整齊地排列成一行。漢堡圖標則變成一個“關閉”圖標。這個動效很有趣。

“CSS粘性菜單”制作：Lucas Bebber

3.4 CSS收件箱用戶界面

另一個純CSS的優秀例子是Jamie Coulter的CSS收件箱用戶界面。當用戶點擊一則消息時，它向右滑開，展示整封郵件；原先頁面上的預覽內容則被替換為一個“正在閱讀”標記。這一效果可以應用于其他導航，比如一個全寬度的導航。

“CSS收件箱用戶界面”制作：Jamie Coulter

3.5 響應式菜單應用

這個響應式菜單應用是為在酒吧點單的真實菜單而設計的，但也提供了一些有趣的想法，可以遷移至應用菜單或電商。在默認狀態，所有菜單選項占據相同的空間。在某一菜單項上懸停時，該項會展開來顯示更多與之相關的信息。被點擊時，它就再擴展并填充整個屏幕，而后，提供購買產品選項的頁腳從底部劃入視野。

“響應式菜單應用”制作：Woodrow Barlow編碼概念圖：Gal Shir

四、滑塊&切換按鈕

4.1 預算滑塊

這個 jQuery的預算滑塊在扁平化設計趨勢中是個很受歡迎選項。三維的進度條會隨著你拖動操作填充顏色。

“預算滑塊”制作：Hornebom概念圖：Erik Deiner。

4.2 純CSS扁平滑塊

Ana Tudor做的扁平滑塊全都使用的是CSS，模擬了一點溫度計的樣式。簡約而時尚。Simon Goellner的響應式滑塊也受她的demo啟發。這些滑塊在上劃的過程中會伴隨輕微增長的滴答聲，并在指針上顯示對應的數值。

純CSS扁平滑塊”制作：Ada Tudor

4.3 純CSS 切換按鈕

Rafael González的純CSS 切換按鈕不同于我們平時慣用的那些。他的切換按鈕包含2個正方形，而不是用用戶熟知的一邊劃向另一邊的那種“開關”滑動動畫。這種按鈕的狀態切換像翻書頁一樣180°翻轉，或者像履帶一樣滑動切換。同樣值得關注的是，Rafael是如何用顏色來輔助動畫的：一個設定是藍色，另一個是紅色，當你在兩者之間切換時，顏色會逐漸過渡改變。

“純CSS切換按鈕”制作：Rafael González

4.4 流體式切換開關

Leonardo Zakour的流體式切換開關概念圖利用水滴動畫在狀態之間滑動切換。Codearmada在他們的Material Radio按鈕demo中實現了這種樣式。

“Material Radio按鈕”制作：Codearmada概念圖：Leonardo Zakour。（來自MaterialUp）

4.5 純CSS日夜切換開關

CSS日夜切換按鈕是將AM、PM視覺化的一次愉快嘗試。當設置為AM時，切換開關和它的背景展現了藍天和太陽，而切換為下午時，則變為月亮與和星空。

Rappora的“純CSS日夜切換按鈕”制作：Benjamin Réthoré概念。

如果你最近也欣賞過很多激發靈感、極具創造力或令人愉悅的UI界面demo,請與我們分享吧！

作者：Cosima Mielke

譯者：Sherry

原文鏈接：https://www.smashingmagazine.com/2016/04/inspiring-ui-demos-logins-menus-toggles-and-more/

原文標題：《inspiring ui demos logins menus toggles and more》

本文由 @UXRen 原創發布于人人都是產品經理。未經許可，禁止轉載。