18个UI demo设计实例,深挖让用户愉悦的小惊喜

文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。


文章分享了对话框及模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关等UI设计实例,希望对大家有所启发。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

CodePen网站已成为开发者的游乐场。那是一个你可以驰骋想象、开发创造的沙盘。里面既有实践的东西,也有实验性的概念——是个激发灵感的宝库。我们在其中做了一些挖掘,发现了一些有趣的UI demo和概念图,包括对话框和模态窗口、注册与登录页面、导航及菜单、滑动条和切换开关,可供你欣赏和再设计。这些设计中的小惊喜让用户与网站或App的互动更愉悦。

接下来,请欣赏!

一、对话框和模态窗口

1.1 Flappy对话框

Alex Wright制作的的Flappy对话框是基于Dribble网站上Peter Main设计的一款概念图。这个对话框窗的特色是两个门帘(flap),一旦用户鼠标悬停于其中一个上面,它就开始移动;而当用户点击时,整个窗口弹到最前面,而后消失。这是一种让窗口及内容更突出的有趣的展现方式,尤其适用于像选择“是”或“否”这种用户不会过多关注的常规交互。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“Flappy对话框”制作:Alex Wright设计:Peter Main。

1.2 销毁模态窗口

至于你是否想要在实际项目中运用它,存在很大的探讨空间,但来自LegoMushroom的销毁模态窗口的创意,的确令人印象深刻。一旦用户关闭模态窗口,它立即变成碎片。这一效果令人惊喜!

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“销毁模态窗口”制作:LegoMushroom

1.3 Material Design样式

来自Ettrics的Material Design样式的核心是用户点击按钮时展开的动画。看似是按钮本身在展开,但实际上一个附加在按钮上动态加载的<div>,并会展开为模态窗口的大小。在模态窗口显现的瞬间,该<div>立即隐藏。很高明的做法!

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“Material Design样式”制作:Ettrics

二、注册与登录

2.1 交互式注册表单

Riccardo Pasianotto的注册表单非常具有创新性,丝毫不无聊沉闷。他没有一下子就丢给用户整个表单,而是通过小摘要式的条块来询问用户必须的信息。表单其实由叠起来的三张卡片组成,当你开始打字时,表单域的小图标立即就变成一个向上箭头。点击箭头,卡片就向上翻开,展示下一个卡片。一个优美而令人兴奋的交互效果!

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“交互式登录表单”制作:Riccardo Pasianotto设计:Denis Abdullin。

2.2 纯CSS交互式表单

Emmanuel Pilande的交互式表单演示不仅在视觉上很时髦,在代码上也是如此——它完全是由CSS实现的。每个表单域都独立展示为一条红色的长线,并伴有一个域标签和占位文本。按下Tab键则跳到下一个表单域,非常优雅。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“交互式表单”制作:Emmanuel Pilande

2.3 Material注册交互样式

Sirkant Shetty的Material注册交互样式包含围绕“注册”按钮来设计的的状态,三者相互融合的非常和谐。注册页面的注册按钮展开为注册表单,当用户将表单填写完整,并点击“完成”按钮时,该按钮将变成一个圆圈并浮动至内页的右下角,并承担了新的功能。Kyle Lavery的制作的这个无缝衔接的交互非常灵动。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“Material Design Signup Interaction”制作:Kyle Lavery概念图:Srikant Shetty。(来自MaterialUp)

2.4 紧凑型登录

Boris Borisov的紧凑型登录联合了登录和注册。登录页面的一个红色“+”圆圈隐藏了注册表单,点击红色“+”后,注册页面展开并覆盖登录页面。还有一个好看的动效:“Go”按钮的文本外观,从白色背景上的微微浅灰色的,随着用户填写表单的进度,逐渐变为加粗红色的文本。Andy Tran和Yusuf Bakir编码了这个概念图的变体。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

紧凑登录概念图:Boris Borisov。(来自MaterialUp)

2.5 Material Design文本输入

这个轻量级的文本输入demo来自Ben Mildren。当用户获取焦点时,对应表单域的占位符标记在即向上移动并改变颜色。当用户开始打字时,它们就完全消失,清晰而简单。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“Material Design文本输入” 制作:Ben Mildren

三、导航及菜单

3.1 筛选菜单

与你预想的不同,筛选菜单将其筛选项隐藏在菜单按钮后。点击后,菜单按钮会变成一个关闭按钮,并从圆心扩展出一个排列有筛选项的外环,顺畅又优美。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“筛选菜单”制作:Arjun Amgain概念图:Anton Aheichanka。(来自MaterialUp)

3.2 纯CSS下拉菜单

这个Jamie Coulter做的很炫的纯CSS下拉菜单是非JavaScript界面的良好补充。它利用菜单标签触发显示子菜单的动画。是用纯CSS实现的。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“炫酷纯CSS下拉菜单”制作:Jamie Coulter

3.3 CSS粘性菜单

Lucas Bebber的CSS粘性菜单通过CSS和SVG滤镜来实现动效,没有用JavaScript。菜单隐藏在标有汉堡图标的圆圈后面。点击时,圆圈喷出一团东东,而后分解成4个菜单图标,整齐地排列成一行。汉堡图标则变成一个“关闭”图标。这个动效很有趣。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“CSS粘性菜单”制作:Lucas Bebber

3.4 CSS收件箱用户界面

另一个纯CSS的优秀例子是Jamie Coulter的CSS收件箱用户界面。当用户点击一则消息时,它向右滑开,展示整封邮件;原先页面上的预览内容则被替换为一个“正在阅读”标记。这一效果可以应用于其他导航,比如一个全宽度的导航。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“CSS收件箱用户界面”制作:Jamie Coulter

3.5 响应式菜单应用

这个响应式菜单应用是为在酒吧点单的真实菜单而设计的,但也提供了一些有趣的想法,可以迁移至应用菜单或电商。在默认状态,所有菜单选项占据相同的空间。在某一菜单项上悬停时,该项会展开来显示更多与之相关的信息。被点击时,它就再扩展并填充整个屏幕,而后,提供购买产品选项的页脚从底部划入视野。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“响应式菜单应用”制作:Woodrow Barlow编码概念图:Gal Shir

四、滑块&切换按钮

4.1 预算滑块

这个 jQuery的预算滑块在扁平化设计趋势中是个很受欢迎选项。三维的进度条会随着你拖动操作填充颜色。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“预算滑块”制作:Hornebom概念图:Erik Deiner。

4.2 纯CSS扁平滑块

Ana Tudor做的扁平滑块全都使用的是CSS,模拟了一点温度计的样式。简约而时尚。Simon Goellner的响应式滑块也受她的demo启发。这些滑块在上划的过程中会伴随轻微增长的滴答声,并在指针上显示对应的数值。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

纯CSS扁平滑块”制作:Ada Tudor

4.3 纯CSS 切换按钮

Rafael González的纯CSS 切换按钮不同于我们平时惯用的那些。他的切换按钮包含2个正方形,而不是用用户熟知的一边划向另一边的那种“开关”滑动动画。这种按钮的状态切换像翻书页一样180°翻转,或者像履带一样滑动切换。同样值得关注的是,Rafael是如何用颜色来辅助动画的:一个设定是蓝色,另一个是红色,当你在两者之间切换时,颜色会逐渐过渡改变。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“纯CSS切换按钮”制作:Rafael González

4.4 流体式切换开关

Leonardo Zakour的流体式切换开关概念图利用水滴动画在状态之间滑动切换。Codearmada在他们的Material Radio按钮demo中实现了这种样式。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

“Material Radio按钮”制作:Codearmada概念图:Leonardo Zakour。(来自MaterialUp)

4.5 纯CSS日夜切换开关

CSS日夜切换按钮是将AM、PM视觉化的一次愉快尝试。当设置为AM时,切换开关和它的背景展现了蓝天和太阳,而切换为下午时,则变为月亮与和星空。

18个UI demo设计实例,深挖让用户愉悦的小惊喜

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 原创发布于人人都是产品经理。未经许可,禁止转载。

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/25364/

(0)
CatherineCatherine
上一篇 2017-05-11 10:50
下一篇 2017-05-11 12:58

相关推荐

  • 交互设计工作坊探秘 | WTM 2018 实录

    重构购票流程的信息架构假期将至,你打开再熟悉不过的订票网页,輸入出发日期、目的地、人数,选择了最合适时段的火车票,预定、付款,整个过程不超过 3 分钟。关闭网页后,你甚至不会记得支付后的画面到底显示了什么,因为这一切流畅的就像呼吸般的自然。4 月 14 日,我们邀请到了春秋航空的高级交互设计师——程琳琳,带领一群对交互设计有热情的伙伴们,以欧洲铁路局的项目为范本,一起重现购票流程的信息架构,让大家了解这流畅的购票交互设计是通过什么方法一...

    2018-04-28
  • 2019工业设计/交互设计考研课程全国招生

    2019考研大军将会是一支更庞大的队伍,唯有先见意识和过人的战术才能庸中佼佼。初次踏上考研队列的童鞋们难免会遇到一些问题。专业问题、复习计划、院校选择、分数线和招生指标可私信客服。[ 长按加客服好友 ]工业设计x交互设计- - - - -相信大部分同学考研担心最多的是专业科目,500分中占了300分,在工业设计考研中,快题手绘和设计理论就是你的专业考试内容,快题考察你的设计表现能力,所以,手绘很重要。说到手绘,ICAMP创意坊有着教学多...

    2018-04-10
  • 帮你梳理:卡片式UI的设计最佳实践

    卡片式设计依然是目前UI设计的热门,虽然我们在前几天的文章《不是万能!卡片式设计并不能支撑所有的设计需求》当中探讨了卡片式设计为数不多的“局限”。今天我们从基本的规则入手,为你展示卡片式设计的最佳实践。小贴士:Material Design 中常常会让卡片拥有微妙的阴影,这种设计是非常有道理的,阴影和深度会给予用户以视觉感知力,强化它的可见性,以及知觉上的“可点击性”。小贴士:卡片中的正文部分只需要一个Normal 字重的非衬线体就行了。

    2017-05-13
  • 【优秀作业展示】交互设计基础(二)

    《交互设计基础》是学习交互设计的重要课程,在大三上学期开课。任课教师是工业设计系的华梅立老师,通过老师的认真指导和对该课程的学习,大家对交互设计有了进一步的了解,在老师的引导下,同学们对高铁取订票界面设计进行了深入的分析和再设计,并选取了感兴趣的小方向进一步拓展。接下来就看看学完本课程后同学们的优秀作业。优秀学生作业第二期申婉彤产品设计15101高铁购票界面设计地点选择日期选择车次车座选择身份认证界面支付界面支付宝支付银行卡支付01Te...

    2018-04-22
  • 瑞昌2018年3.31-4.6一周企业招聘信息及待遇......

    【招聘信息】客服招聘企业:精彩网络科技详细地址:江西省瑞昌市摩恩大厦8楼801岗位要求:女性/中专/技校/1-3年工作经验 /30岁以下职位要求:会办公软件,联系人:范联系电话:18079284619【招聘信息】美容师,学徒招聘企业:汉娜尚妃美容中心详细地址:阳光国际,大唐岗位要求:女性/学历不限/经验不限 /35岁以下职位要求:汉娜尚妃美容中心高薪招聘一、店长2名,底薪2000+提成+业绩+奖金,总工资5000一7000左右二、美容师...

    2018-04-08
  • 提高交互设计技能的五个方法

     设计师 交互设计师  现在,所有基于Web进行设计的人都需要对交互设计原则有一个基本的了解。即使你没有在人机交互、用户体验设计或人性因素等方向的正式学习训练,但只要你了解这些学科的基本原理,依…

    2017-08-01
  • 总结七大设计原则,打造高素质的UI界面

    虽然好设计的原则是老生常谈,但是我们还是要经常总结,结合自己的设计,三省吾身。

    2017-05-11
  • BAT名师访谈,阿里交互设计专家的成长之路

    编者按:优设访谈第四期!今天这位设计师也是老朋友了,作为网易电子商务部UED团队的创建者,阿里现任交互设计专家,以及业内人士鼎力推荐的《破茧成蝶:用户体验设计师的成长之路》联合出版人,@刘津legene 老师的…

    2015-11-19
  • 谈谈怎样的设计能给人留下深刻印象?

    什么是设计? 关于“设计”的含义有着许多种解释,每个人对设计都有自己的理解和体会,甚至具体到一个点,一个色块。百度说,设计是一种计划、规划、设想通过视觉的形式传达出来的活动过程。也有人说设计是把自己的想…

    2014-10-27
  • 华景招聘用户体验分析师啦!

    作为华景员工,除了能体验旅游之外,还能体验华景食堂的凉皮儿和拉面,包子和油条,腊牛肉和酱猪肘,狮子头和卤肉饭,肉夹馍和艇仔粥,老婆饼和豆沙酥,酸辣汤和叉烧饭,泰式河粉和肉酱意面,干煸四季豆和蒜蓉蒸茄子……华景集团招聘1. 用户体验部    用户体验分析师岗位职责:*负责产品的用户研究,分析用户的使用习惯、情感和体验需求*负责原型/产品用户体验评估工作,参与产品的交互界面的设计,分析影响产品用户体验的因素*定期开展用户测试,观察用户使用产...

    2018-05-04