时常在思考我们在追求漂亮的动效,追求真实的弹性和运动状态时,我们不需要怎样的动效设计。从对现实世界材质的模仿(拟物化)到对现实世界规则的模仿(如Material Design,以下称MD)我们究竟是否有很大程度的进步,在MD刚刚发布的时候作为设计师的我们十分激动,直到现在都还有很多设计师十分推崇MD一套的设计规范,这样的做法在带来便利的同时可能会让我们忽略设计的初衷,还有作为一个设计师对产品的理解,最终可能给用户带来一个中庸的体验。 从动效设计上看: 设计所包含的方方面面在 MengTo 的《Design + Code》上有很好的归纳,我时常发现,经过一段时间的设计之后很容易在设计的过程中有所迷失,原因在于我们很容易专注于细节,保持阅读的习惯并试图用相对宏观的视角去看设计是不错的做法。动效设计让页面元素能够很自如的被操控而不仅仅是静态呈现时,我们会直觉的想到让其去模拟现实世界的规则,现实世界的运动规则因其载体不同其实有很多选择,在设计和模仿的同时还应该考虑更多。 IBM在前不久发布了 IBM Design: Machine in animation, 试图将机械运动的风格赋予给动效设计。 IBM因为其在100年以来就生产着专业的打字机,打字机可以作为一种符号来代表IBM,它的视觉呈现和运动轨迹都可以代表打字机的可靠和高效。运用在IBM自家的应用上时,真正的高级用户可能会真实的感觉其与IBM企业所想要传达符合的某种信号。机械运动相对于我们在动效设计中所常用的弹性动画有其独特的特点,页面元素坚硬有序而活动自如这一感觉通过设计师所定制的曲线而呈现。 回想90年代时网页设计的过度设计风格,大量的阴影、斜角、高光、不考虑留白的使用,这是一个设计师在面对新媒介和庆祝掌控像素后的失控,而这也是自然能够理解的结果。Stop Gratuitous UI Animation,现在的动效设计也是如此,它受新技术如CSS、JS的进步和硬件的更新换代影响。不必要的动效设计可能有以下几个特点: 1、过多的对现实世界的模拟。这样的模拟很可能不会让你的应用塑造出类IBM的视觉语言,而只会带来不必要的认知负担。另一方面,像素世界有许多与物理世界不一样的地方,如Loading,这样的处理才是更应该关注的。这个例子的列表就是对现实世界中某种机械装置的模拟,无论是运动曲线还是紧度都调的不错,可是它依旧是一个不好的例子。仔细来看,正因为它的列表在模拟机械装置所以每个卡片在拖动时必须固定像素定位,用户无法做出按住-上下滑动预览;滑动停止在任意位置浏览的手势。 2、在大的页面切换做过多动效。越是用户经常操作、变化越大的页面越不应做过多的动效处理,动效设计不应该只是对一个动效时间上的操纵,如不应该大于1s或者不应该大于0.5s,这和7±2原则一样十分具有玄学意味,这和网页设计早期发展时Loading时间一样,人心理的焦躁程度也会改变,谈论一个动效的具体时间没有太大意义,而更应该关注它在什么地方做了一件什么事,如果是Tab切换,笔者的意见是动效设计要尽量克制,一方面用户的操作频率十分高,如果要考虑到页面元素级的切换,程序无法对用户正在看当前Tab上下滚动的位置做出相应的动效定制化处理,这也涉及到另一个Tab的页面元素进场。另一方面过多的操作与动效时间相乘,将是一个很大的负担。 3、手势操作与系统全局操作冲突。因为手势可以更方便的被运用,最近更新的许多应用普遍采用手势操作,而不幸的是这样的方便带来了更大程度的误触,这也是动效设计和交互设计分割的后果,一般来说,从手机边缘的上滑和下滑都已经被系统手势占用,不能让原本应该带来便捷的手势给用户带来更多麻烦。下图就是一个和iOS唤出控制中心手势冲突的例子。 从版式设计上看: 每个设计师特别是交互动效设计师在刚刚接触动效的时候都很想创造一套动效的交互规则,能够掌握到每个运动的先后次序和精确到毫秒级的设计,会让设计师很有快感。动效设计是基于页面层级和页面元素,在交互与视觉设计上的改进,是当交互和视觉在解决问题不够高效时做的补充。MD和IBM的设计都很优秀,但当由动效或形式掌控过多的时候,可能会造成难以预料的低效率,这也不难理解为什么有人会说:the Floating Action Button (FAB)is bad UX design. 遵循平台规则会给应用加分这没错,这在iOS7发布的时候尤为适用,但当平台规范想要掌控你太多时就要多考虑一下了。单就FAB来说,从版式上来讲,上文作者就总结出这些问题: 1、它打破了沉浸式体验。试想我在一个图片浏览类应用中FAB充当的角色是重要的“搜索”,这样的使用自然没错,但它因为其浮起的样式不可避免的将用户拉出沉浸式体验。 2、它挡住了真正的内容。早年Scott Hurff已经提出过我们的可及区域与视觉遮挡,FAB的出现更是让原本应该显示内容的区域更大程度的牺牲。 3、它重要可能但它并不常用。由我们熟知的2/8原则,用户在20%的动作上花去80%的时间,作者以Google 邮件为例,FAB在这里充当的角色是撰写邮件这一动作,从直觉上来说它十分重要,而用户实则在手机上大部分时间是阅读邮件,FAB使用的频率并不那么高,相反它牺牲了更多的内容显示空间。在大屏幕内的使用时,因为FAB是相对精确的点击操作,它也会给用户带来更多的操作成本。 反观最基础的动效设计和它的原则方法。它应该可以 1、强化页面呈现的引导。通过动效可以更有加有次序规律的呈现页面层级, 2、解释交互动作的变化。通过动效来有效反馈用户操作,声明状态变化和暗示 3、并通过良好的设计来取悦用户。互联网产品的功能性设计可能会在未来越来越弱,就像有很多论调说the Web is dead一样,不仅仅是占有率上的,更多人为其创造版式化规则和工具,同样造成了功能性可以被多验过的满足。而取悦用户的设计如文化产品一样具备更长久的生命力。 原则上,动效设计做小不做大,即尽量做小的交互动态而不做大得页面切换动效,经常操作的页面切换动效会让人觉得设计太过,Ben Johnson认为一个App动效应该由三部分组成,即1个单元的欢迎动画,6个单元的告知性动画,1-2个令人愉悦的小细节。太过花哨的动效很可能会让它像FAB一样受人诟病,反馈符合用户的心理预期,而不单纯的追求每个动效时间上的控制,同样是动效设计师所应该注意的。 我们需要怎样的动效设计 现在看来,我们不需要怎样的动效设计?它应该是以特定的应用需求为导向的,它不需要模拟纸张也不需要模拟墨水,模拟机械或者其他什么东西。在动效设计上我们希望有一个解决问题的态度,亦或是如IBM一样传递自己的品牌文化,就如FAB一样,很多时候我们不需要它出现来阻碍我们浏览内容。 同时,产品、交互设计、视觉设计、动效设计的过分区分会让动效设计变得缺乏创意,相信交互设计师在接到需求之后,脑子中不可能不出现带有视觉风格的产品愿景,而现在的职位分割让设计师变得十分危险。 我们不需要规定过多的动效设计,也不需要为一个既定界面设计动效,这种内在能力应该如用户研究能力一样深化在每一个关心用户和体验的从业者中,从源头上思考动效,必要的时候做出相应交互与视觉上的调整,不沉迷于软件,将一个应用当成电影或者游戏整体来做,这其中的动效设计可能才是我们想要的。 它无关乎是用形变还是弹性动画,这种技法很难在没有上下文和语境的情况下来确定,就像3D电影的摄影师只能在CG未完成时,让演员在绿布上表演,这让摄影师的拍摄困难重重。只有从源头上重塑信息结构,用某种 “motion UI thinking” 的思考方法,或许才是提升一个应用品质的好的办法。 最后,交互动效设计师应该多看看游戏,他们已经走得很靠前,而且默默无闻。   Written by Scalegong infoier.com | 设计乘数   参考: IBM design: Machine in animation: Material Design: Why the Floating Action Button is bad UX design Make the right FAB “1+6+2”公式:App动画及动态效果之基本原则 Stop Gratuitous UI animation

ipad QQ交互走查-1-发起音视频通话和讨论组交互改进

本文档仅针对ipadQQ-发起音视频通话与讨论组交互做出改进讨论。 社交类应用在iPad这一设备的上占有了很大的比重,iPad由于其屏幕大、续航长和常在稳定网络状况下使用这一特点,iPadQQ先对与手机QQ或者PC/mac端QQ有其特定的需求。由用研文档可以看出,iPad着重的使用场景集中在: 1、家庭成员音视频社交场景。用于与父母或者亲朋间通过 iPad QQ 图文/视频通话,或分享生活近照等。同时还观察到家庭成员间经常公用iPad使用。 2、办公会议场景。既有用户在多设备之间互传文件的需求,同时也由部分用户通过QQ进行远程会议,其中包含QQ文件传输、文件演示等需求。 3、家中休闲聊天场景。从用研文档体现,一般来说iPadQQ的的使用集中在夜晚,使用的主要原因是由好友/群新消息,或需要收文件,看下班级/单位群,以及兴趣群。顺带看下空间 pad用户应用习惯 发起音视频通话与讨论组 通过iPad QQ来进行音视频通话是iPad的一个典型应用场景,iPad由于其大屏优势十分适合家庭之间的视频交流,用户可与iPad保持一定距离,取景和通话质量相对更好,相对于手机QQ,iPad QQ把“通话”作为单独tab显示在应用左侧以方便用户操作。这是很直觉同样效率的做法。 用户现在可以通过以下几个方式发起和好友的音视频聊天: 1、消息-聊天框中得“+”-语音通话/视频通话 2、联系人-选择好友-语音通话/视频通话 3、通话-右侧选择已文字聊天好友-点击通话 4、通话-左侧选择已语音聊天好友的通话记录-点击通话 5、更多-多人通话-从好友分组选择-开始通话 用户可以通过一下几个方式发起和好友的讨论组: 1、联系人-从消息/联系人拖入聊天框-发起讨论组 2、更多-多人聊天-从好友分组选择-发起讨论组 3、联系人-联系人详情-加号-从好友分组选择-发起讨论组 iPadQQ通话tab使用流程 能够发现,在iPadQQ中对于发起通话这一功能提供了很多入口,用户可以通过许多方式来发起通话,伴随着会出现一些问题: · “更多”的功能可见性不足,用户难以养成通过“更多”来发起多人通话的习惯 · 通话tab的功能相对单一,只能提供一个相对简单的快捷音视频通话入口,无法达到快速建立多人通话的功能 · 通过联系人或者消息作为发起音视频入口,在流程上又由过多操作环节 发起讨论组方面,存在以下问题: · “更多”的功能不够效率,筛选层级多 · 通过消息tab,将联系人拖入聊天框发起聊天,若需要添加联系人列表中的联系人,只能通过搜索方式添加 如果能在iPadQQ上建立一种快捷的发起通话与群聊的交互方式将会使这一行为变的更加高效。笔者试从交互流程来思考应该如何提升发起群聊和电话的效率。 发起多人聊天和通话流程改进 改进后的设计在流程上有两个层面的考虑,一是希望它能够将发起讨论组与群聊方式整合,既然都是与单人或多人发生交互的形式,为何不将重复的“选择联系人”作为单一操作。另外还希望将选择联系人这一操作提前,这也是相对直觉的做法,用户可以先从最近联系的消息tab中将联系人拖入一个“容器”中,这个容器只要唤出将会的得到保留,用户也可以切换至联系人tab,拖动需要群聊或电话的联系人进入这一个容器。在容器已经纳入了需要联系的好友之后,用户可以选择建立讨论组或者发起群聊,这是对交互流程和操作的简化。 同时,笔者希望这个功能相对来说是一个高级操作,保留用户通过单一联系人发起群聊/电话的功能,因为根据用户使用习惯,用户会在与某人聊天的过程中来发起群聊或电话,这一个功能作为一个快捷整合入口,方便用户快速发起群聊和电话。 动效说明: 1、在消息/联系人中长按联系人头像,头像缩略图缩小浮起,跟随手指 2、搜索栏下方滑入群聊/电话联系人容器,提示用户拖入 3、用户在消息/联系人tab切换保留容器,可左右滑动查看或拖出以在容器中删除联系人 4、点击讨论组按钮以发起讨论组,或点击电话以发起群组电话 5、点击发起电话,icon变色弹出提示,容器颜色划出提示,加载电话 缺陷: 拖动要求手势操作精确性高,拖动距离长效率低。正在考虑: 1、用户通过长按-勾选-发起讨论组/通话/加入右边聊天 2、保留拖动操作,长按-点击头像头像进入容器-发起讨论组/通话/加入右边聊天。拖动右边则加入聊天,拖动进容器保留,该容器全局Tab可见 3、替换现有的下拉刷新手势,唤出建立讨论组/电话的容器