admin 管理员组文章数量: 1086019
2024年3月21日发(作者：crontabshell带参数)
18个UI demo设计实例，深挖让用户愉悦的小惊喜
文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等
UI设计实例，希望对大家有所启发。
CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。
里面既有实践的东西，也有实验性的概念——是个激发灵感的宝库。我们在其中做了一些
挖掘，发现了一些有趣的UI demo和概念图，包括对话框和模态窗口、注册与登录页面、
导航及菜单、滑动条和切换开关，可供你欣赏和再设计。这些设计中的小惊喜让用户与网
站或App的互动更愉悦。
接下来，请欣赏！
一、对话框和模态窗口
1.1 Flappy对话框
Alex Wright制作的的Flappy对话框是基于Dribble网站上Peter Main设计的一款
概念图。这个对话框窗的特色是两个门帘（flap），一旦用户鼠标悬停于其中一个上面，它
就开始移动；而当用户点击时，整个窗口弹到最前面，而后消失。这是一种让窗口及内容
更突出的有趣的展现方式，尤其适用于像选择“是”或“否”这种用户不会过多关注的常
规交互。
“Flappy对话框”制作：Alex Wright设计：Peter Main。
1 / 7
1.2 销毁模态窗口
至于你是否想要在实际项目中运用它，存在很大的探讨空间，但来自LegoMushroom
的销毁模态窗口的创意，的确令人印象深刻。一旦用户关闭模态窗口，它立即变成碎片。
这一效果令人惊喜！
“销毁模态窗口”制作：LegoMushroom
1.3 Material Design样式
来自Ettrics的Material Design样式的核心是用户点击按钮时展开的动画。看似是按
钮本身在展开，但实际上一个附加在按钮上动态加载的 div ，并会展开为模态窗口的大小。
在模态窗口显现的瞬间，该 div 立即隐藏。很高明的做法！
“Material Design样式”制作：Ettrics
二、注册与登录
2.1 交互式注册表单
Riccardo Pasianotto的注册表单非常具有创新性，丝毫不无聊沉闷。他没有一下子
就丢给用户整个表单，而是通过小摘要式的条块来询问用户必须的信息。表单其实由叠起
来的三张卡片组成，当你开始打字时，表单域的小图标立即就变成一个向上箭头。点击箭
头，卡片就向上翻开，展示下一个卡片。一个优美而令人兴奋的交互效果！
“交互式登录表单”制作：Riccardo Pasianotto设计：Denis Abdullin。
2 / 7
版权声明：本文标题：18个UI demo设计实例,深挖让用户愉悦的小惊喜 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.roclinux.cn/p/1710962207a581610.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论