文章分享了對(duì)話框及模態(tài)窗口、注冊(cè)與登錄頁(yè)面、導(dǎo)航及菜單、滑動(dòng)條和切換開(kāi)關(guān)等UI設(shè)計(jì)實(shí)例，希望對(duì)大家有所啟發(fā)。

CodePen網(wǎng)站已成為開(kāi)發(fā)者的游樂(lè)場(chǎng)。那是一個(gè)你可以馳騁想象、開(kāi)發(fā)創(chuàng)造的沙盤(pán)。里面既有實(shí)踐的東西，也有實(shí)驗(yàn)性的概念——是個(gè)激發(fā)靈感的寶庫(kù)。我們?cè)谄渲凶隽艘恍┩诰?，發(fā)現(xiàn)了一些有趣的UI demo和概念圖，包括對(duì)話框和模態(tài)窗口、注冊(cè)與登錄頁(yè)面、導(dǎo)航及菜單、滑動(dòng)條和切換開(kāi)關(guān)，可供你欣賞和再設(shè)計(jì)。這些設(shè)計(jì)中的小驚喜讓用戶與網(wǎng)站或App的互動(dòng)更愉悅。

接下來(lái)，請(qǐng)欣賞！

一、對(duì)話框和模態(tài)窗口

1.1 Flappy對(duì)話框

Alex Wright制作的的Flappy對(duì)話框是基于Dribble網(wǎng)站上Peter Main設(shè)計(jì)的一款概念圖。這個(gè)對(duì)話框窗的特色是兩個(gè)門(mén)簾（flap），一旦用戶鼠標(biāo)懸停于其中一個(gè)上面，它就開(kāi)始移動(dòng)；而當(dāng)用戶點(diǎn)擊時(shí)，整個(gè)窗口彈到最前面，而后消失。這是一種讓窗口及內(nèi)容更突出的有趣的展現(xiàn)方式，尤其適用于像選擇“是”或“否”這種用戶不會(huì)過(guò)多關(guān)注的常規(guī)交互。

“Flappy對(duì)話框”制作：Alex Wright設(shè)計(jì)：Peter Main。

1.2 銷(xiāo)毀模態(tài)窗口

至于你是否想要在實(shí)際項(xiàng)目中運(yùn)用它，存在很大的探討空間，但來(lái)自LegoMushroom的銷(xiāo)毀模態(tài)窗口的創(chuàng)意，的確令人印象深刻。一旦用戶關(guān)閉模態(tài)窗口，它立即變成碎片。這一效果令人驚喜！

“銷(xiāo)毀模態(tài)窗口”制作：LegoMushroom

1.3 Material Design樣式

來(lái)自Ettrics的Material Design樣式的核心是用戶點(diǎn)擊按鈕時(shí)展開(kāi)的動(dòng)畫(huà)?？此剖前粹o本身在展開(kāi)，但實(shí)際上一個(gè)附加在按鈕上動(dòng)態(tài)加載的<div>，并會(huì)展開(kāi)為模態(tài)窗口的大小。在模態(tài)窗口顯現(xiàn)的瞬間，該<div>立即隱藏。很高明的做法！

“Material Design樣式”制作：Ettrics

二、注冊(cè)與登錄

2.1 交互式注冊(cè)表單

Riccardo Pasianotto的注冊(cè)表單非常具有創(chuàng)新性，絲毫不無(wú)聊沉悶。他沒(méi)有一下子就丟給用戶整個(gè)表單，而是通過(guò)小摘要式的條塊來(lái)詢問(wèn)用戶必須的信息。表單其實(shí)由疊起來(lái)的三張卡片組成，當(dāng)你開(kāi)始打字時(shí)，表單域的小圖標(biāo)立即就變成一個(gè)向上箭頭。點(diǎn)擊箭頭，卡片就向上翻開(kāi)，展示下一個(gè)卡片。一個(gè)優(yōu)美而令人興奮的交互效果！

“交互式登錄表單”制作：Riccardo Pasianotto設(shè)計(jì)：Denis Abdullin。

2.2 純CSS交互式表單

Emmanuel Pilande的交互式表單演示不僅在視覺(jué)上很時(shí)髦，在代碼上也是如此——它完全是由CSS實(shí)現(xiàn)的。每個(gè)表單域都獨(dú)立展示為一條紅色的長(zhǎng)線，并伴有一個(gè)域標(biāo)簽和占位文本。按下Tab鍵則跳到下一個(gè)表單域，非常優(yōu)雅。

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

2.3 Material注冊(cè)交互樣式

Sirkant Shetty的Material注冊(cè)交互樣式包含圍繞“注冊(cè)”按鈕來(lái)設(shè)計(jì)的的狀態(tài)，三者相互融合的非常和諧。注冊(cè)頁(yè)面的注冊(cè)按鈕展開(kāi)為注冊(cè)表單，當(dāng)用戶將表單填寫(xiě)完整，并點(diǎn)擊“完成”按鈕時(shí)，該按鈕將變成一個(gè)圓圈并浮動(dòng)至內(nèi)頁(yè)的右下角，并承擔(dān)了新的功能。Kyle Lavery的制作的這個(gè)無(wú)縫銜接的交互非常靈動(dòng)。

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

2.4 緊湊型登錄

Boris Borisov的緊湊型登錄聯(lián)合了登錄和注冊(cè)。登錄頁(yè)面的一個(gè)紅色“+”圓圈隱藏了注冊(cè)表單，點(diǎn)擊紅色“+”后，注冊(cè)頁(yè)面展開(kāi)并覆蓋登錄頁(yè)面。還有一個(gè)好看的動(dòng)效：“Go”按鈕的文本外觀，從白色背景上的微微淺灰色的，隨著用戶填寫(xiě)表單的進(jìn)度，逐漸變?yōu)榧哟旨t色的文本。Andy Tran和Yusuf Bakir編碼了這個(gè)概念圖的變體。

緊湊登錄概念圖：Boris Borisov。（來(lái)自MaterialUp）

2.5 Material Design文本輸入

這個(gè)輕量級(jí)的文本輸入demo來(lái)自Ben Mildren。當(dāng)用戶獲取焦點(diǎn)時(shí)，對(duì)應(yīng)表單域的占位符標(biāo)記在即向上移動(dòng)并改變顏色。當(dāng)用戶開(kāi)始打字時(shí)，它們就完全消失，清晰而簡(jiǎn)單。

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

三、導(dǎo)航及菜單

3.1 篩選菜單

與你預(yù)想的不同，篩選菜單將其篩選項(xiàng)隱藏在菜單按鈕后。點(diǎn)擊后，菜單按鈕會(huì)變成一個(gè)關(guān)閉按鈕，并從圓心擴(kuò)展出一個(gè)排列有篩選項(xiàng)的外環(huán)，順暢又優(yōu)美。

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

3.2 純CSS下拉菜單

這個(gè)Jamie Coulter做的很炫的純CSS下拉菜單是非JavaScript界面的良好補(bǔ)充。它利用菜單標(biāo)簽觸發(fā)顯示子菜單的動(dòng)畫(huà)。是用純CSS實(shí)現(xiàn)的。

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

3.3 CSS粘性菜單

Lucas Bebber的CSS粘性菜單通過(guò)CSS和SVG濾鏡來(lái)實(shí)現(xiàn)動(dòng)效，沒(méi)有用JavaScript。菜單隱藏在標(biāo)有漢堡圖標(biāo)的圓圈后面。點(diǎn)擊時(shí)，圓圈噴出一團(tuán)東東，而后分解成4個(gè)菜單圖標(biāo)，整齊地排列成一行。漢堡圖標(biāo)則變成一個(gè)“關(guān)閉”圖標(biāo)。這個(gè)動(dòng)效很有趣。

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

3.4 CSS收件箱用戶界面

另一個(gè)純CSS的優(yōu)秀例子是Jamie Coulter的CSS收件箱用戶界面。當(dāng)用戶點(diǎn)擊一則消息時(shí)，它向右滑開(kāi)，展示整封郵件；原先頁(yè)面上的預(yù)覽內(nèi)容則被替換為一個(gè)“正在閱讀”標(biāo)記。這一效果可以應(yīng)用于其他導(dǎo)航，比如一個(gè)全寬度的導(dǎo)航。

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

3.5 響應(yīng)式菜單應(yīng)用

這個(gè)響應(yīng)式菜單應(yīng)用是為在酒吧點(diǎn)單的真實(shí)菜單而設(shè)計(jì)的，但也提供了一些有趣的想法，可以遷移至應(yīng)用菜單或電商。在默認(rèn)狀態(tài)，所有菜單選項(xiàng)占據(jù)相同的空間。在某一菜單項(xiàng)上懸停時(shí)，該項(xiàng)會(huì)展開(kāi)來(lái)顯示更多與之相關(guān)的信息。被點(diǎn)擊時(shí)，它就再擴(kuò)展并填充整個(gè)屏幕，而后，提供購(gòu)買(mǎi)產(chǎn)品選項(xiàng)的頁(yè)腳從底部劃入視野。

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

四、滑塊&切換按鈕

4.1 預(yù)算滑塊

這個(gè) jQuery的預(yù)算滑塊在扁平化設(shè)計(jì)趨勢(shì)中是個(gè)很受歡迎選項(xiàng)。三維的進(jìn)度條會(huì)隨著你拖動(dòng)操作填充顏色。

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

4.2 純CSS扁平滑塊

Ana Tudor做的扁平滑塊全都使用的是CSS，模擬了一點(diǎn)溫度計(jì)的樣式。簡(jiǎn)約而時(shí)尚。Simon Goellner的響應(yīng)式滑塊也受她的demo啟發(fā)。這些滑塊在上劃的過(guò)程中會(huì)伴隨輕微增長(zhǎng)的滴答聲，并在指針上顯示對(duì)應(yīng)的數(shù)值。

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

4.3 純CSS 切換按鈕

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

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

4.4 流體式切換開(kāi)關(guān)

Leonardo Zakour的流體式切換開(kāi)關(guān)概念圖利用水滴動(dòng)畫(huà)在狀態(tài)之間滑動(dòng)切換。Codearmada在他們的Material Radio按鈕demo中實(shí)現(xiàn)了這種樣式。

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

4.5 純CSS日夜切換開(kāi)關(guān)

CSS日夜切換按鈕是將AM、PM視覺(jué)化的一次愉快嘗試。當(dāng)設(shè)置為AM時(shí)，切換開(kāi)關(guān)和它的背景展現(xiàn)了藍(lán)天和太陽(yáng)，而切換為下午時(shí)，則變?yōu)樵铝僚c和星空。

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

如果你最近也欣賞過(guò)很多激發(fā)靈感、極具創(chuàng)造力或令人愉悅的UI界面demo,請(qǐng)與我們分享吧！

作者：Cosima Mielke

譯者：Sherry

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

原文標(biāo)題：《inspiring ui demos logins menus toggles and more》

本文由 @UXRen 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。