文档章节

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

王尘宇
 王尘宇
发布于 2017/09/07 00:04
字数 2058
阅读 5
收藏 0
一些网站不仅在内容,可用性,设计,功能等方面,让人耳目一新;交互设计细节和动画更是与众不同。我们将分享一些模型的经验,分析一下这些简单的模式为什么效果很好。 当我们设计数码产品时,我们一般使用 Photoshop 和 Sketch 此类软件。大多数有数年行业经验的人显然明白设计不仅仅是视觉传达。尽管如此,有些人还是继续做静态设计。Steve Jobs 如此描述设计:
“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 键,常常搞不清焦点移动到哪里了。通过动画指引他们到达页面指定位置。过渡是微妙的,但在指引用户方面影响巨大。 要点:为用户指明方向,不管他们如何导航。

总之

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

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
为 iOS 7 设计用户界面

iOS7 体现了以下主题: 尊重。UI帮助用户理解内容,并与之交互,但是不会喧宾夺主。 清晰。所有尺寸的文字都能轻松识别,图标精确清楚,装饰巧妙而适当,促使设计更为注重功能。 深度。视觉层...

oschina
2013/12/18
7.1K
33
功能性转场动画效果设计

功能性转场动画是用户体验设计的重要一环,它一般出现在页面衔接、命令执行或对象编辑的过程中,同时也有类似错误提示、操作提示中涌现出来的。它使人机交互更加友好,更人性化。 通过排列组...

博为峰教研组
2016/12/25
4
0
Martias Duarte: 游戏以及 Android 的再设计

Martias Duarte 的职业生涯开始于为 PlayStation 设计游戏,他曾担任旧金山游戏工作组 MagicArts 的设计副总裁。加入 Danger 后,他开始专职移动界面设计。现在,他在 Google 担任 Android ...

红薯
2011/11/09
1K
3
看康奈可如何成功实施云办公系统,玩转性能优化大法

Gartner发布的预测报告显示,到2018年底,云办公系统的市场渗透率将高达60%。企业向云办公解决方案过渡步伐正大幅加快,其背后的原因是:比起传统本地部署应用,以Office 365为代表的云托管方...

玄学酱
2018/03/29
0
0
[翻译] 2014年最佳iOS UI动画

本文由 戴仓薯(也就是我!) 翻译,赖信涛 校稿。首发于伯乐在线。 英文出处:beautifulpixels.com。 本文实例视频均在 youtube 上,需翻墙 在 The Highlight 2014 的第三天,我们为您带来这...

戴仓薯
2017/11/29
0
0

没有更多内容

加载失败,请刷新页面

加载更多

IDE 插件新版本发布,开发效率 “biu” 起来了

近日,Cloud Toolkit正式推出了面向 IntelliJ 和 Eclipse 两个平台的新款插件,本文挑选了其中三个重大特性进行解读,点击文末官网跳转链接,可查看详细的版本说明。 本地应用一键部署到任何...

阿里云云栖社区
23分钟前
6
0
金丝雀发布、滚动发布、蓝绿发布到底有什么差别?关键点是什么?

根据 2017 年的 DevOps 发展报告,高效能组织和低效能组织在软件交付的效率上有数量级上的差异。技术组织的软件交付能力是一种综合能力,涉及众多环节,其中发布是尤为重要的环节。 作为技术...

问题终结者
51分钟前
3
0
Kubernetes Client-go Informer 源码分析

几乎所有的Controller manager 和CRD Controller 都会使用Client-go 的Informer 函数,这样通过Watch 或者Get List 可以获取对应的Object,下面我们从源码分析角度来看一下Client go Informe...

阿里云官方博客
今天
4
0
传统IDC部署网站(三)

11. 重置密码 密钥和密码都支持远程登陆, 二选一 两个都可以登陆, 密钥相对于密码来说,相对安全一点 本地登陆无法是用密钥 修改密码 root 用户 passwd root 修改普通用户 passwd usernam...

miko0089
今天
6
0
bash特性

1.支持别名 alias 2.命令替换 $(COMMANS) 或者 `COMMAND` 3. bash支持的引号: `` :命令替换 "":弱引用,可以实现变量替换 '':强引用,不实现变量替换 4.文件名通配 globbing:(man 7 glo...

忙碌的小蜜蜂
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部