`
wx1569225609
  • 浏览: 14385 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

用户体验设计中的巧妙过渡

 
阅读更多
“It’s not just what it looks like and feels like. Design is how it works.” “设计不仅仅是看起来和感受到的样子。设计是如何工作。”
我们对于产品的体验和印象来源于诸多因素的集合,交互扮演一个根基的角色。我们无法想象用户界面是静态设计,随后再添加交互魔法。相反,我们需要在早期加入交互特性,把它当成天然的组成部分。 让我们看看一些巧妙的交互,它们是一些微妙的动画,优雅地改善了用户体验。

动画滚动

超链接总是褒贬不一,当点击一个链接时,可以生硬地跳转,结果是 丢失上下文。 对网站而言,特别是长网站,加一个线性滚动动画,可以改善用户体验: 对比下面看看: 对比下默认行为和动画行为,跳过内容不再是无意识的行为;它是一个决定。实际上,《Hope Lies at 24 Frames Per Second》此文中的菜单按钮没有任何动画,它花了我1分多钟才明白确切发生了什么。 要点:界面的突然变化用户很难适应,总是告知他们发生了什么。

有状态的切换

让我们看看另一个例子:切换菜单。用户点击“+”号增加内容或展开元素。通过旋转 45 度,加号变成了叉号,叉号大家广泛理解为“关闭”: 简单的变换完全改变了图标的意义。这个小细节比让用户猜测接下来发生什么,以及理解图标是什么意思容易多了。这个切换对用户非常友好。此外,加号旋转总是跟内容保持一个方向,加强了信息的流动。 要点:让网站元素的每个状态都可理解。

渐进呈现表单和评论

许多博客和新闻网站的评论表单不是很友好,当你准备发表评论时,你只想输入评论而不是干别的,典型的问题是,它会询问你各种其它的事情,好烦人呐。 为了激发用户的评论热情,我们可以 仅显示最重要的元素:评论框。当用户点击输入区域时,展开相应的表单。真实世界渐进展现的例子,可以看纽约时报的 beta 网站: 你可以更进一步,当评论框获得焦点时展开表单。这么做有个问题,交互设计的基本原则提到: an action should always happen close to where the interaction occurs (一个行为总是发生在离交互点最近的地方)(关注焦点附近)。我们可以再进一步,给评论框添加动画引导用户: 你还可以把评论框固定在顶部,在下面展开相应内容,显示附加字段。 如你所见,这么做减少了混乱,令评论表单更吸引人。 更好的做法是,当用户到达页面底部时自动加载评论。我们应该避免强迫用户去点击,除非有更好的理由。 要点:渐进展现为了减少 UI 组件的呈现,用户需要它们时再显示出来。

Pull To Refresh (拉动刷新)

最令人激动的交互之一是伴随着 iPhone 出现, Loren Brichter 倡导的 “拉动刷新”。用户可以更新可卷动的时序型内容。你可以在 Twitter 的应用中看到此效果。 为什么效果这么好?在拉动刷新出现之前,用户必须点击浏览器的刷新按钮加载更多内容。把用户发现更多内容的愿望和刷新行为联系起来,明确的点击行为变得好古板。 要点:连接意图和行为,体验变得更加无缝。

Sticky Labels (粘性标签)

粘性标签是另一个微妙而实用的组合,它把用户界面与有意义的过渡结合起来。看看Edenspiekermann’s use of this technique 的运用。 项目标签一直固定在内容的左侧,直到下一个项目出现。这个效果类似 iOS 地址本,它为较长区域提供了上下文。过渡效果不仅增加了方向感,而且提供了基于上下文的描述。 要点:长区域中添加了有价值信息的摘要或者标题可以使用粘性标签。

Affordance Transition (自解释的过渡效果)

自解释的概念源于认知心理学,指一个对象的特征,它用于引导用户。 在用户界面设计的上下文,EU 网站的可用性词汇 (PDF)中如此定义自解释性:
“An affordance is a desirable property of a user interface — software which naturally leads people to take the correct steps to accomplish their goals.” “自解释性是用户界面令人满意的特性 —— 软件很自然地引导用户,通过正确的步骤达到预期的目标。”
Ridges(棱线)常常用于提高自解释性。按钮周围的棱线暗示按钮是可操作的。这种用户体验技术被 iOS 上的相机应用广泛推广。 iOS 6 的锁屏旁边的相机图标,暗示可以拖动。Apple 在 iOS 7里移除了它,显然是因为用户习惯让它看起来更像一个独立的图标。后来是怎么做的:当你拖动按钮,锁屏弹起,相机出现在下面。这是一项将用户指向功能的很好的技术。 要点:在界面上,给予元素高度自解释性,它会把用户指向功能。

Context-Based Hiding(基于上下文隐藏)

iOS 上的 Google Chrome 启动后有个基于上下文隐藏功能,见下图: 基本理念是当用户向下滚动页面,浏览器导航面板自动隐藏。当用户再次向上滚动页面,控制面板出现。这种方法不仅改善了上下文体验(专注于内容本身),而且增加了屏幕可用空间。屏幕空间在移动设备尤为重要。 首先假设 用户将一直浏览关注的内容。当他们停止浏览,上下文可能改变;因此,导航面板需要重新出现。这一技术节省屏幕空间的同时,检查某种假设是否超出了你的测试用例。 iOS 处理的更好,当到达页面的底部时,控制面板再次出现。这是一个动态整合用户需求的绝佳的例子。 要点:使用基于上下文的隐藏功能提高用户关注度,节省屏幕空间。

Focus Transition(焦点过渡)

当通过键盘导航时,用户按下 Tab 键,常常搞不清焦点移动到哪里了。通过动画指引他们到达页面指定位置。过渡是微妙的,但在指引用户方面影响巨大。 要点:为用户指明方向,不管他们如何导航。

总之

这几个例子仅仅是九牛一毛罢了,本文要点不是秀一些最新最酷的交互技术,而是强调如何通过轻微的交互细节大大提高用户体验。 如果我们想设计出更好的数字产品,我们需要挑战当前的信念,看看何种交互模式更能方便用户的使用。我没说要重复造轮子,但是不要停止探索。因此,走出你的安乐窝,保持探索,勇于尝试。

转载于:https://my.oschina.net/wangchenyu/blog/1530755

分享到:
评论

相关推荐

    软件用户界面设计(UI)

    再者,界面设计技巧涵盖了如何通过创新的方式解决问题,提升用户体验。例如,使用微交互来增加反馈,让用户明确知道他们的操作已被系统接收;采用清晰的导航结构,帮助用户快速找到所需信息;利用动效设计,使过渡...

    三色风格loading加载过渡页ppt特效模板.rar

    在IT行业中,设计和用户体验是至关重要的元素,特别是在制作演示文稿时。"三色风格loading加载过渡页ppt特效模板"是一种创新的设计解决方案,旨在提升观众的观看体验,尤其是在数据加载或页面转换过程中。该模板将...

    CSS对用户体验的影响.pdf

    在某些情况下,即使存在明显的bug,如背景定位错误,如果设计巧妙,也可能被用户视为一种独特的“彩蛋”,增加乐趣,提高用户体验。例如,设计师可以通过快速制作新图片来临时解决开发同事无法及时修复的问题。这种...

    行业分类-设备装置-虚拟与现实景观体验交相过渡的伸缩平台及其建构方法.zip

    3. **交互设计**:为了提供良好的用户体验,交互方式的设计至关重要。这可能包括手部追踪、头部动作识别、语音命令等多种方式,让用户能够自然地在虚拟与现实间切换。 4. **内容创建**:平台的价值在于其承载的内容...

    PageLoadingEffects页面过渡效果

    在网页设计中,页面过渡效果(PageLoading Effects)是一种增强用户体验的重要手段,它使得用户在浏览网站时,从一个页面到另一个页面的切换更加流畅、自然。这些效果不仅仅是视觉上的小把戏,而是有助于减少用户的...

    基于SVG clip-path的弹性过渡幻灯片特效

    总之,"基于SVG clip-path的弹性过渡幻灯片特效"是HTML5技术在网页交互设计中的巧妙运用,它结合了SVG的强大功能和Snap.svg库的动画处理能力,创造出一种独特的、富有动感的幻灯片切换效果。对于追求创新和用户体验...

    移动用户体验设计新要素

    这种非常巧妙的动效和动画,正在慢慢成为一种新的、有意思的移动体验设计要素。并值得用户体验从业者去学习,最终学会如何有效率和优雅的使用在自己的设计中。好的动效和过场动画可以传达给用户更加清晰的当前所处...

    纯CSS3带过渡动画特效的分页条ui设计效果

    在分页条的设计中,巧妙运用box-shadow可以制造出立体感和深度,增强用户体验。 此外,我们还需要关注到分页条的布局和结构。在HTML5中,我们可以使用 Semantic Elements(语义化标签)如和来构建分页条的基本框架...

    css3用户体验注册表单.zip

    在现代网页设计中,用户体验是至关重要的一个环节,而注册表单作为用户与网站互动的第一步,其设计直接影响到用户的留存率。CSS3作为最新的CSS版本,提供了丰富的样式和动画效果,极大地提升了表单的美观性和交互性...

    翻转式用户登录注册界面设计

    翻转式用户登录注册界面设计是一种创新且引人注目的网页UI设计技术,它通过动态效果将登录和注册两个功能巧妙地结合在一起,为用户提供了一种流畅且有趣的交互体验。这种设计模式通常应用于HTML5页面,利用其强大的...

    创意过渡页选图扁平化蓝色商务ppt模板.rar

    在这款模板中,扁平化设计体现在图表、图标以及页面元素上,呈现出清晰、直观的视觉体验。同时,蓝色作为主色调,通常给人以专业、稳重的感觉,非常适合商务场合。 创意过渡页是PPT中的一个重要组成部分,它们位于...

    图片自动切换(带过渡效果)

    在IT领域,图片自动切换是一种常见的网页或应用功能,它允许用户无需手动操作就能自动浏览一系列图片,通常配合过渡效果以提升用户体验。这种技术广泛应用于幻灯片展示、产品展示、轮播图等场景。本项目名为“图片...

    jQuery CSS3动画过渡效果特效.zip

    在网页设计和开发中,动态效果的运用可以提升用户体验,增加互动性。"jQuery CSS3动画过渡效果特效.zip" 提供了两种不同的jQuery特效,它们巧妙地结合了jQuery的强大功能和CSS3的丰富动画特性,为网页增添活力。本文...

    浅议动效设计在APP中的交互应用方式.pdf

    《浅议动效设计在APP中的交互应用方式》一文主要探讨了动效设计...在互联网时代,动效设计已经成为了UI和网页设计的趋势,而如何巧妙地运用动效,使之成为提升用户体验的有效工具,是每个设计师都需要深入思考的问题。

    5款自定义登录表单样式,用户体验良好,外观优美,兼容主流浏览器

    在IT行业中,用户界面(UI)和用户体验(UX)是至关重要的元素,特别是对于登录表单这样的关键交互点。本文将深入探讨5款设计精良、用户体验优秀且兼容主流浏览器的自定义登录表单样式,旨在提升网站或应用的吸引力...

    500套精美网页设计背景

    网页设计是数字时代的一种艺术形式,它涉及到网站的视觉呈现、用户体验和交互设计。...在实际应用中,设计师需要结合色彩理论、用户体验原则以及当前的设计趋势,灵活运用这些背景,以提升网站的整体质量和用户体验。

    jQuery css3鼠标悬停图片切换文字过渡动画特效

    综上所述,"jQuery css3鼠标悬停图片切换文字过渡动画特效"是网页设计中一种常见的增强用户体验的方法,通过巧妙运用jQuery和CSS3,可以轻松创建出富有动感和互动性的网页元素。在实际开发过程中,可以灵活调整动画...

    WpfEffect.图片切换3D过渡效果.rar

    在本文中,我们将深入探讨如何在WPF(Windows Presentation Foundation)中实现炫酷的3D图片切换效果。WPF是Microsoft开发的一种强大的UI框架,它提供了丰富...图片切换3D过渡效果”所示的炫彩动态界面,提升用户体验。

    ios系统式体验苹果风格ppt模板.rar

    在制作关于iOS应用介绍、产品演示或苹果设备用户体验分享的报告时,此模板能提供专业且引人入胜的视觉效果。 首先,我们来详细探讨一下“毛玻璃”效果。这是iOS设计中的一种独特美学,源自于iOS 7的引入,它通过...

Global site tag (gtag.js) - Google Analytics