18个UIdemo设计实例，深挖让用户愉悦的小惊喜

　　文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例，希望对大家有所启发。
　　CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西，也有实验性的概念是个激发灵感的宝库。我们在其中做了一些挖掘，发现了一些有趣的UIdemo和概念图，包括对话框和模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关，可供你欣赏和再设计。这些设计中的小惊喜让用户与网站或App的互动更愉悦。
　　接下来，请欣赏！
　　一、对话框和模态窗口
　　1。1Flappy对话框
　　AlexWright制作的的Flappy对话框是基于Dribble网站上PeterMain设计的一款概念图。这个对话框窗的特色是两个门帘（flap），一旦用户鼠标悬停于其中一个上面，它就开始移动；而当用户点击时，整个窗口弹到最前面，而后消失。这是一种让窗口及内容更突出的有趣的展现方式，尤其适用于像选择“是”或“否”这种用户不会过多关注的常规交互。
　　“Flappy对话框”制作：AlexWright设计：PeterMain。
　　1。2销毁模态窗口
　　至于你是否想要在实际项目中运用它，存在很大的探讨空间，但来自LegoMushroom的销毁模态窗口的创意，的确令人印象深刻。一旦用户关闭模态窗口，它立即变成碎片。这一效果令人惊喜！
　　“销毁模态窗口”制作：LegoMushroom
　　1。3MaterialDesign样式
　　来自Ettrics的MaterialDesign样式的核心是用户点击按钮时展开的动画。看似是按钮本身在展开，但实际上一个附加在按钮上动态加载的
　　，并会展开为模态窗口的大小。在模态窗口显现的瞬间，该立即隐藏。很高明的做法！
　　“MaterialDesign样式”制作：Ettrics
　　二、注册与登录
　　2。1交互式注册表单
　　RiccardoPasianotto的注册表单非常具有创新性，丝毫不无聊沉闷。他没有一下子就丢给用户整个表单，而是通过小摘要式的条块来询问用户必须的信息。表单其实由叠起来的三张卡片组成，当你开始打字时，表单域的小图标立即就变成一个向上箭头。点击箭头，卡片就向上翻开，展示下一个卡片。一个优美而令人兴奋的交互效果！
　　“交互式登录表单”制作：RiccardoPasianotto设计：DenisAbdullin。
　　2。2纯CSS交互式表单
　　EmmanuelPilande的交互式表单演示不仅在视觉上很时髦，在代码上也是如此它完全是由CSS实现的。每个表单域都独立展示为一条红色的长线，并伴有一个域标签和占位文本。按下Tab键则跳到下一个表单域，非常优雅。
　　“交互式表单”制作：EmmanuelPilande
　　2。3Material注册交互样式
　　SirkantShetty的Material注册交互样式包含围绕“注册”按钮来设计的的状态，三者相互融合的非常和谐。注册页面的注册按钮展开为注册表单，当用户将表单填写完整，并点击“完成”按钮时，该按钮将变成一个圆圈并浮动至内页的右下角，并承担了新的功能。KyleLavery的制作的这个无缝衔接的交互非常灵动。
　　“MaterialDesignSignupInteraction”制作：KyleLavery概念图：SrikantShetty。（来自MaterialUp）
　　2。4紧凑型登录
　　BorisBorisov的紧凑型登录联合了登录和注册。登录页面的一个红色“”圆圈隐藏了注册表单，点击红色“”后，注册页面展开并覆盖登录页面。还有一个好看的动效：“Go”按钮的文本外观，从白色背景上的微微浅灰色的，随着用户填写表单的进度，逐渐变为加粗红色的文本。AndyTran和YusufBakir编码了这个概念图的变体。
　　紧凑登录概念图：BorisBorisov。（来自MaterialUp）
　　2。5MaterialDesign文本输入
　　这个轻量级的文本输入demo来自BenMildren。当用户获取焦点时，对应表单域的占位符标记在即向上移动并改变颜色。当用户开始打字时，它们就完全消失，清晰而简单。
　　“MaterialDesign文本输入”制作：BenMildren
　　三、导航及菜单
　　3。1筛选菜单
　　与你预想的不同，筛选菜单将其筛选项隐藏在菜单按钮后。点击后，菜单按钮会变成一个关闭按钮，并从圆心扩展出一个排列有筛选项的外环，顺畅又优美。
　　“筛选菜单”制作：ArjunAmgain概念图：AntonAheichanka。（来自MaterialUp）
　　3。2纯CSS下拉菜单
　　这个JamieCoulter做的很炫的纯CSS下拉菜单是非JavaScript界面的良好补充。它利用菜单标签触发显示子菜单的动画。是用纯CSS实现的。
　　“炫酷纯CSS下拉菜单”制作：JamieCoulter
　　3。3CSS粘性菜单
　　LucasBebber的CSS粘性菜单通过CSS和SVG滤镜来实现动效，没有用JavaScript。菜单隐藏在标有汉堡图标的圆圈后面。点击时，圆圈喷出一团东东，而后分解成4个菜单图标，整齐地排列成一行。汉堡图标则变成一个“关闭”图标。这个动效很有趣。
　　“CSS粘性菜单”制作：LucasBebber
　　3。4CSS收件箱用户界面
　　另一个纯CSS的优秀例子是JamieCoulter的CSS收件箱用户界面。当用户点击一则消息时，它向右滑开，展示整封邮件；原先页面上的预览内容则被替换为一个“正在阅读”标记。这一效果可以应用于其他导航，比如一个全宽度的导航。
　　“CSS收件箱用户界面”制作：JamieCoulter
　　3。5响应式菜单应用
　　这个响应式菜单应用是为在酒吧点单的真实菜单而设计的，但也提供了一些有趣的想法，可以迁移至应用菜单或电商。在默认状态，所有菜单选项占据相同的空间。在某一菜单项上悬停时，该项会展开来显示更多与之相关的信息。被点击时，它就再扩展并填充整个屏幕，而后，提供购买产品选项的页脚从底部划入视野。
　　“响应式菜单应用”制作：WoodrowBarlow编码概念图：GalShir
　　四、滑块切换按钮
　　4。1预算滑块
　　这个jQuery的预算滑块在扁平化设计趋势中是个很受欢迎选项。三维的进度条会随着你拖动操作填充颜色。
　　“预算滑块”制作：Hornebom概念图：ErikDeiner。
　　4。2纯CSS扁平滑块
　　AnaTudor做的扁平滑块全都使用的是CSS，模拟了一点温度计的样式。简约而时尚。SimonGoellner的响应式滑块也受她的demo启发。这些滑块在上划的过程中会伴随轻微增长的滴答声，并在指针上显示对应的数值。
　　纯CSS扁平滑块”制作：AdaTudor
　　4。3纯CSS切换按钮
　　RafaelGonzlez的纯CSS切换按钮不同于我们平时惯用的那些。他的切换按钮包含2个正方形，而不是用用户熟知的一边划向另一边的那种“开关”滑动动画。这种按钮的状态切换像翻书页一样180翻转，或者像履带一样滑动切换。同样值得关注的是，Rafael是如何用颜色来辅助动画的：一个设定是蓝色，另一个是红色，当你在两者之间切换时，颜色会逐渐过渡改变。
　　“纯CSS切换按钮”制作：RafaelGonzlez
　　4。4流体式切换开关
　　LeonardoZakour的流体式切换开关概念图利用水滴动画在状态之间滑动切换。Codearmada在他们的MaterialRadio按钮demo中实现了这种样式。
　　“MaterialRadio按钮”制作：Codearmada概念图：LeonardoZakour。（来自MaterialUp）
　　4。5纯CSS日夜切换开关
　　CSS日夜切换按钮是将AM、PM视觉化的一次愉快尝试。当设置为AM时，切换开关和它的背景展现了蓝天和太阳，而切换为下午时，则变为月亮与和星空。
　　Rappora的“纯CSS日夜切换按钮”制作：BenjaminRthor概念。
　　如果你最近也欣赏过很多激发灵感、极具创造力或令人愉悦的UI界面demo，请与我们分享吧！
　　
　　作者：CosimaMielke