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

18个UIdemo设计实例，深挖让用户愉悦的小惊喜 　　文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等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样式的核心是用户点击按钮时展开的动画。看似是按钮本身在展开，但实际上一个附加在按钮上动态加载的，并会展开为模态窗口的大小。在模态窗口显现的瞬间，该立即隐藏。很高明的做法！　　　　 　　“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概