专栏名称: 微交互
分享交互经验,提升产品用户体验。帮助您打造优秀产品。细节设计成就卓越产品。
目录
相关文章推荐
龙爪槐守望者  ·  有时候觉得AI发展慢一点也是好事,太真实了容 ... ·  17 小时前  
字体设计  ·  这些品牌儿童节海报的“小心机”藏不住了 ·  3 天前  
设计上海  ·  PSA新展预告|阿尔瓦罗·西扎的档案 ·  昨天  
51好读  ›  专栏  ›  微交互

迪士尼中的UX(下篇)

微交互  · 公众号  · 设计  · 2017-11-30 08:00

正文

请到「今天看啥」查看全文




Feedback的例示(上图从左到右)。

IOS中输入密码错误的时候,上端的四个提示点会产生振动。虽然只是单纯的振动,确实在与我们的现实生活相互作用,产生直接关联。Dots(游戏):虽然很简单,真的是一个使人愉悦的交互。很多的要素都融合在了一个动作里面。Yahoo News:各个等距点顺时针逐渐填满,数字依次增加,之后是一个大的俯冲,所有点往中心集聚,加载结束时候在整个屏幕铺满扩散。Beats:点击类型标签的时候,可以看到进程加载的进度条。



2) Feedforward 前馈

视觉一致性对于使用者来说,是相互作用的可能,是他们 期待 的暗示,可以帮助他们理解各个动作怎么样可以成功运用。前馈(feedforward)可以引导用户以正确的顺序操作,使得他们在复杂的情况也可以成功达到目标。《Duet》中另一个画面,男主与女主刚刚见面,可是不识时务的小狗一直拖着男主往画面左边移动,给予观众男主要离开的暗示。



之后无论什么情况发生,有着什么样的对比,用户也会收到提示,“请到这里来!”,“请拖拽到这里”,或者可以给出“再多下拉一点”这样类似的提示。因为这些提示太过于微小,以至于人们很多时候甚至不会意识到它们的存在。尽管很微小,效果是很显著的。前馈被正确使用的话,效果可以是很大的。

迪士尼的 期待 原则 里面也有类似的目的:在即将发生的事件中创立联系与动因。


图画中是米奇张开的手,之后这只手会慢慢展开去抓住球,形成了动作的提示。




为了说明这个原则,Glen先生举了一个非常简单的例子,那便是米奇去抓住桌子另外一边的球。


在之前的场面里,米奇的手离身体很近,眼睛紧盯着桌子的另外一边。在这个场面里米奇的手已经在球的上方了。这两个场面好像已经很充分地说明这个原则了,难道不是吗?问题是,这里其实还是有观众不能意识的点,那便是可以愉悦观众的趣味要素。观众还没意识到的时候,前一个动作已经结束了。这场面里的画面虽然已经全部展示给观众了,可是观众对于即将发生的时候还是没有准备。


为了形成观众的 期待 感,(设计中)米奇外面那只手张开的那几帧就先忍痛割爱,粗略用线框表示,越过桌子的那只手则详细地画出来,这样便对接下来发生的事情起到了暗示的作用。




“观众只是(随着剧情)反应,而不用担心接下来发生的事情。”

——Glen先生




前馈的例子。

Clear:下拉画面时,可以创建新的项,这呈现了微小的提示。Moldiv:Home后面稍微藏着菜单,给使用者提示。Yummly:顶端栏,白板上的“Yummly”文字根据进入的模块变化。Snapchat:下拉刷新的时候,会出现颜色变化的动画,给予了提示。



3)Spatial awareness 空间认识

空间认识在使用者的环境认知,还有明确把握各个要素间关系的时候起到帮助的作用。仔细想想,我们假想出来的数字媒体环境里,本质上是存在着无限可能性的。Duet动画里面,Mia跑到池里,在水中到处游动,再从水中出来翻跟斗,形成了美丽的场面。







请到「今天看啥」查看全文