小而美的过场-视觉设计

有些网站无论在内容,可用性,设计或者功能等方面胜人一筹,其取胜之道在于交互和动效的细节上。在这里通过各种模型和大家分享一些案例,并分析为什么这些简单的方式能产生让人难忘的效果。

 

我们常常会用Photoshop和Sketch这一类软件来设计数字产品。大多数在这个行业工作过几年的人都应该知道设计不仅仅是视觉传达而已。尽管如此,还是有许多人在进行静态的设计。对于设计,乔布斯就说过这样的话:

 

设计并非外观怎样,感觉如何。设计的是产品的工作原理。”

 

我们对产品的体验和印象是由综合因素影响的,其中交互起着根本性的作用。我们再也不能先从静态的角度考虑用户界面,然后再加入交互效果。相反,我们需要从一开始就考虑到互动,并把这个当作界面的天然属性。

 

让我们来看看一些小而美的交互实例,看看这些巧妙的动效是如何优雅地改善了用户体验

 

动态滚动

 

网页上的超链接既有好处又有缺点。当你点击一个链接,你无法预期会带你到怎样的页面,也许是一个产品的页面,也可能是一家令人毛骨悚然的沿街老木偶店面的网站。前后的关联是断开的。

 

阅读书籍的一个很棒的体验就是内容是线性的。书中每个章节是递进的。比如,你必须阅读第一章中的经济学入门来帮助你理解第二章。当你跳过一个章节,你很清楚你可能会遗漏一些信息,从而会缺乏对后续内容的理解。在网页上,尤其是在很长的网页上,这种现象常常无意识地发生。这时通过添加一个滚动的动效,就可以解决这个问题:
113838mvlaylyvlkm50eak
对比下这个效果:
113839h28dcmlbzboz8dxo
对比下锚定链接的默认方式和动态方式,快速下滑到内容处不再是一种无意识的动作,这是一种决策。在 Hope Lies at 24 Frames Per Second的手机视图上有一个菜单按钮,点击后能回到页面顶部,但是没有任何的过渡动效。我花了不止一分钟才弄明白究竟发生了什么。
谨记:界面上任何突兀的变化会让用户感觉很难进行,别把他们搞得晕头转向;清晰的显示发生了什么事。
状态切换
正如上个例子里我们所看到的,切换的过程能帮助用户了解界面的路径和指向。没有什么能比一个突发变化更让人感觉到不自然了,因为瞬变在现实世界中是不存在的。让我们来看看另一个例子:切换菜单。用户看到“+”这个符号,会联想到添加内容或扩展元素。旋转45°后,加号变为一个叉叉,这个元素被广泛地理解为“关闭”:
113839d9qtagmtmyqhngr4
这个简单的过渡,彻底改变了图标的含义。这样一个小小的细节意味着不必猜测接下来会发生什么,用户知道图标在两种状态下的含义。如果你问我,我觉得这样的切换是相当人性化的。此外,请注意加号的旋转和内容的出现是在同一方向,加强了信息的指向。

谨记:保证你的网站元素在每个状态下都易于理解。
收缩表单和评论
许多博客和新闻网站的评论表单不是一个让人看着愉悦的组件。为什么呢?好吧,大部分还是不够友好的,对吧?当你准备发表评论时,你只是想开始输入评论。然而,一个典型的表单却要求你先提供其他的各种信息,这样多烦人。
为了激励人们参与评论,我们可以把表单折叠,并只显示最关键的元素:评论框。当用户点击了评论框,你可以相应地扩大表单。这种逐步披露的方式可以在纽约时报的测试版网站上找到一个实例:
113839wkywdkdudwuwktns
当表格扩展时,有种更好的方式是可以设置光标的焦点在评论框上。不过会有一个问题:交互设计的一个重要原则是,反馈动作应该发生在交互产生的附近(或者是在关注点的轨迹上)。我们再优化一下,给评论框的展开加上过渡的动画来帮助用户定位:
113839ch337isv91329h0h
你甚至可以把评论框放在区域的顶部,相应地扩大框的大小并把其他字段展示在评论框下方。
正如你所见,这样能减少干扰,让评论表单更加引人注意。但是把评论内容也全部折叠起来会怎么样呢?
通过折叠评论,我们可以凭借滚动条得知正文的长度而不是整个页面。通常的做法是,当用户到达页面底部会自动加载评论。我们应该避免强迫用户点击,除非有很好的理由。
谨记:逐步披露信息的方式是为了减少UI上的干扰从而突出用户需要的功能。
下拉刷新
在iPhone面世后不久出现的一个最令人兴奋的交互操作就是“下拉刷新”(开发者:Loren Brichter)。用户下拉后内容会根据发布时间倒序更新。你可以在Twitter的app里看到这样的应用了。只要你在推文的顶部稍微向下拉动就能刷新所有内容。
Twitter
为什么这个设计如此受欢迎?在下拉刷新存在之前,用户不得不点击浏览器的“刷新”按钮去加载更多内容。通过下拉的方式满足了用户的探索欲,从而让进行明确操作的需要逐渐被淘汰。
谨记:当操作符合了意图,体验会变得更加无缝。
黏性标签
黏性标签是另一个微妙又实用的用户界面组件,并且也很有意思。来看看 Edenspiekermann’s use of this technique 的介绍页面
113839ow6604ck54kmmcdz
项目标签会跟随内容滚动,从而为右侧图片提供了目录,直到出现下一个项目。这种行为和iOS里的地址簿很类似,特别是对长内容的索引非常有帮助。这种过渡既提升了定位也让基于上下文的描述更流畅。
谨记:在很长的内容视图里不适合用描述或者标题的方式来添加有价值的信息,这时可以考虑用黏性标签。
预示性过渡
预示性的概念源自认知心理学,意指通过特定的对象的特征来引导观众。
用户界面设计的背景下,欧盟网站的可用性术语表(PDF下载)中给出了如下定义:

“预示性是用户界面(软件)中的一个理想属性 ,能很自然的引导人们采取正确的步骤,来完成目标。”

凸起经常被用来增强预示。按钮周围的凸起就暗示了这个按钮可以操作。这个用户体验技术在iOS的相机应用程序里被广泛推广。
113839muszne6essdxc82r
iOS 6锁屏里的相机图标周围就有起伏的纹理暗示用户可以拖动。在iOS7里,这个设计被删除了,使图标看起来更像是一个独立的按钮,这是因为用户的习惯已经建立起来了。显然,会发生什么事仍然是一样的:当你拖动按钮,锁屏弹起,露出摄像头下方。这是一个伟大的技术,向用户指示出界面的功能。

 

谨记:在界面里给控件提高预示来帮助用户学习。

 

隐藏索引

 

谷歌Chrome的iOS版本有个隐藏索引的设计,就像这样:
113840m7k9jy25bjttudy2
其基本思路是,一旦用户向下拖动,Chrome浏览器的导航控件自动隐藏。只要用户再次向上拖动,导航重新出现。这种方法既提升了浏览上下文的体验(聚焦内容本身),也增加了屏幕空间。当然,后者在移动设备上特别重要。
一个毋庸置疑的说法是,用户会一直浏览他们非常感兴趣的内容。一旦他们停止继续浏览,极有可能是要更换浏览内容了,因此,这时导航条需要出现。虽然这项技术节省了屏幕空间,但请确认这种场景是否会出现在你的产品里。
iOS更进了一步。当你到达一个页面的底部,控制栏会再次扩大。这是动态地根据场景满足用户需求的一个很好的例子。
谨记:使用隐藏索引的方式让用户更聚焦内容,并节省屏幕空间。
总结
这些仅是大量案例的其中几个。本文的主旨不是显示最新奇的交互技术,而是突出小交互细节如何显著提高用户的体验。
如果我们要设计出更好的数字产品,那么我们就需要挑战我们目前的信念和探索交互模式可以如何缓解用户的生活。我不是说我们应该推倒重来,但如果停止探索那就太目光短浅了。所以,走出你的安乐窝,继续探索和试验。
 本文转自TaobaoUED,原作者-正少

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

(0)
iouedioued
上一篇 2014-09-19 20:58
下一篇 2014-09-21

相关推荐

  • SketchOSM - 从现在开始丰富三维建筑地理信息吧

    SketchOSM是由出品PlaceMaker(一键三维城市)的团队最新出的一个插件,它可以让你在你设计场地的周边地区创建3D参数建筑模型。通过 SketchOSM 创建的模型数据可以直接发布到 OpenStreetMap 网站上,这是一个庞大的可自由存取和编辑的地理信息数据库,可以算是地理信息界的维基百科。之前紫天在使用 PlaceMaker 插件的时候所遇到的一个最大问题就是国内的三维建筑信息太少,有的话也非常不准确。现在有了Ske...

    2018-03-15
  • 交互设计 | 这到底是交互设计还是黑科技?

    Create Your Difference.           by CYD01能看透你的灯光今天创艺典与你分享的交互装置不再是学习你、跟随你的灯光装置了无论你怎么装高冷当面瘫今天的它能把你扒光把你一览无余地看透我觉得你必需服Aura这是Aura,一个视听和互动装置它解读和翻译人类的情感,然后将其转化成发光窗帘光的强度、形状和颜色会随着人情绪的变化而精确地改变这样的绿,或许代表了平静而这位哥们儿的绿,恕我直言,或许是一种失恋的绿这样...

    2018-04-30
  • 移动端文字与排版设计的六个原则

    .space-betw {
    -webkit-box-pack: justify;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    }

    - (NSDictionary *)demoTextAttributes {
    NSMutableParagraphStyle *ps = [NSMutableParagraphStyle new];
    ps.alignment = NSTextAlignmentJustified;
    // here, NSBaselineOffsetAttributeName must be set though the default value is 0 to make the justified work.
    return @{NSParagraphStyleAttributeName :ps, NSBaselineOffsetAttributeName : @0.0f};
    }

    2017-05-31
  • 腾讯干货!从四个方面帮你做好移动页面性能优化

    随着移动互联网的发展,我们越发要关注移动页面的性能优化,今天跟大家谈谈这方面的事情。

    2017-05-27
  • IxD交互设计工作中的关注重点

    一、IxD交互设计工作中的关注重点 1. 情景(Context) 皮特•杨•斯塔皮尔斯(Pieter Jan Stappers)认为情景指人与产品交互的环境。情景具体包括的内容取决于设计要解决的问题、设计目标和设计产出。 为什么要研究情…

    交互设计 2015-06-13
  • Axure RP 8.0 抽奖大转盘实例教程附.RP下载与视频演示

    原标题:【AxureRP8实现真正抽奖大转盘】 效果图: Demo地址:http://www.iaxure.com/share/luck/ (有广告) 视频: 实现过程: 1、生成一个0-360之间的随机数,保存至变量; 2、旋转转盘到达指定角度,案例中为3-…

    2015-08-24
  • 写给想要从事交互或者刚从事交互的盆友们

    本文作者是从一个工业设计毕业的学生,走过平面设计,做过UI设计,一步步转行到现在所喜爱的UX设计,并且一直处在努力开心地进步着的状态中。在本文中,也只想通过结合自己的经历和周围同学、同行的状况给大家一些实在的帮助。

    2017-05-08
  • 【用户体验.春节特辑】我的家史馆,我的“义务”馆(总第267期)

    亦可访问www.koushutianxia.com了解详情编家谱   修家史   留视频建祠堂   亲互动   传万代总第267期使用我的家史馆APP以来,起初家谱树状图深深吸引了我,在不断完善添加家族成员的同时,越来越觉得只是单纯的成员图像和姓名显得很单薄,已不能满足我对家族每个成员的情感。想到我的后代、我的子孙后代将来看到的只是家族长辈的照片、姓名,这和见到一些陌生的照片姓名难道不一样吗?越想越觉得应该让家族人物更丰富起来。之后就仔...

    2018-02-21
  • 掌握这10招,再也不愁公众号涨粉了!

    都说现在运营公众号非常难涨粉非常难别担心今天介绍10种强大的运营工具/技巧给你帮你解决下面这些问题帐号涨粉、爆文技巧、文章排版图片设计、数据监测、海报营销1运营公举小磊磊免费学习新媒体运营知识年收入上百万的全栈新媒体运营,全平台有10万新媒体运营关注,成百上千个自媒体大佬都是他的粉丝。公众号上有180万字的原创运营知识,教你写文章、涨粉、赚钱、提升运营能力。并且把新媒体知识梳理成了标准化的知识体系,让所有人都能免费学会公众号运营。长按识...

    2018-04-03
  • 四个帮你提高UI设计效率的工作技巧

    业界 NG 率:接近 100%许多人认为创造力和逻辑是左右半脑分开管辖的、设计师和工程师使用的是不同部分的能力,所以大家各安其份做好自己的工作就好——我负责光鲜亮丽地画图,工程师就负责用超大声的同刻键盘在黑色的屏幕上编写外星文。

    2017-05-20