漫谈人机交互

l 什么是Material Design？

Material Design是谷歌推出的全新的设计语言。这种设计语言旨在为手机、平板电脑、台式机和“其他平台”提供更一致、更广泛的“外观和感觉”。

Material Design语言的一些重要功能包括系统字体Roboto的升级版本 ，同时颜色更鲜艳，动画效果更突出。杜拉特还简要谈到了新框架的一些变化——这个新框架也于今天在 google.com/design 公开发布。谷歌的想法是让谷歌平台上的开发者掌握这个新框架，从而让所有应用就有统一的外观，就像是苹果向开发者提出的设计原则一样。谷歌还基于这种新的设计语言对本公司旗舰应用进行了重新设计，包括安卓和网页端的Gmail和Calendar。大家可能还会记得，看到过有关这些变动的文章，有些博客 已经掌握了外泄截屏，显示经过了重新设计的Gmail，界面更干净、更简约。在安卓平台上，这种新界面被称为Material，支持各种新动画效果，具有内置的实时UI阴影，以及可在不同屏幕之间切换的hero元素。

l  特点是什么？

1.    对扁平化的升级

借用Material Design层的概念，使用阴影，将数不清的图像进行编辑和分离；斜面和动画，它利用自然交互关联深度与重要性。它提出了平面像素的Z轴概念。事实上，它在扁平化设计上面增加了一些拟物化，创造 了一种一群二维平面飞机浮动在对方指定的海拔印象。

 

2.    贴近真实世界的动画

Material强调动画要贴近真实物理世界，所有的动画都与现实生活有关联，具体形象指示性强（但过多的动画难免会显得繁琐低效）。例如，点击任意的元素，都应伴随着水波涟漪的动画效果；界面切换的过渡动画中，对象会放大缩小变形折叠（Material的材质特性），或者发生Z轴的变化（例如进入二级页面时，二级页面沿Z轴上升浮起伴随有投影效果）。

3.     强烈的配色

Material提倡在大片区域使用醒目、高饱和度的色彩以表达应用的张力，尤其是主要操作按钮以及组件（如开关），特别需要用到对比度强烈的强调色。Material建议基础色的饱和度为500（use the 500 color of the primary color of your app），其他元素以此为基准调整饱和度，而主操作则配以强调色反（或作补色）。

4.     触摸波纹

Google认为构件从点击中心扩展圆形半透明的形式来自于纸张油墨涂层的隐喻，而波纹的样式则为触摸的时间和压力做出图形反馈。

我们看到，按钮的变暗和下沉被Google替换为更加“扁平”的动画，按钮不再是一个下沉的“实体”，而仅仅是一个“表面”，其后的上升并不符合常见逻辑。纸张的触摸被赋予了全新的物理性质。

l  有什么经典成功的好的设计？

1.    inbox.google.com

 

2.   design.google.com  

 

3.   Facebook

 

l  移动端人机交互应该注意什么？

原则一：美学完整性

　　美学完整性并不是用来衡量一个应用程序的界面有多好看，而是用来衡量应用程序的界面与功能是否匹配。例如，对于一个应用来说，会用比较微妙的修饰元素和背景来体现生产性的任务，对于突出的任务则会使用标准的控件和操作行为。这样的应用程序会传达一个清晰和统一的信息给用户，让用户懂得应用程序的目的。但要是应用程序在生产性任务上使用了异想天开的元素，用户就会被这些相互矛盾的信号所困扰。

　　同样的，在一个仿真任务的应用程序里，例如游戏应用，用户希望一个漂亮的界面来提供更多的乐趣从而鼓励他们继续游戏。尽管用户不期待能够在一个游戏中完成一个艰难或者是生产性的任务，但他们仍然希望游戏的界面能带来完整的体验。

 

原则二：一致性

　　应用程序界面的一致性允许用户利用他们自身的知识和技能完成应用程序的过渡。当然，保持界面的一致性，并不是让你盲目的复制其他的应用程序，相反的，作为开发者应该懂得利用同类型应用程序大众接受的标准和范式来设计自己的应用。

 

原则三：直接操作

　　当用户操作屏幕上的对象而不是单独的控件进行操作时，用户更能理解自己的任务和操作的结果。iOS用户更喜欢直接的操作行为，因为多点触控的设备特点。当看到屏幕的对象，直接用手势进行操作给人一种更为亲切的感觉，而且很有控制感，因为没有了媒介的干预，更多指的是对鼠标的依赖。

　　举个例子，用户可以使用两指的缩小或放大所要控制的面积就可完成点击缩放的操作。游戏中，玩家还可以直接与物体互动，直接移动他们。例如，在显示密码锁的游戏中，玩家可以直接通过旋转操作打开锁。

 

原则四：隐喻

　　当虚拟的物品和操作行为是对现实生活中的物品和操作进行模仿的时候，玩家能够很快的掌握应用程序的规则和操作。一个简单的软件隐喻是文件夹：在现实生活中，人们把物品放入文件夹中，所以在计算机中，用户能够很快的理解这个操作的意思，很快的理解将文档等文件放入文件夹的意思。

　　最合适的隐喻应该是不受现实生活的限制。例如，用户可以将很多内容放入文件夹中，包括音乐、文档、视频等，但现实生活中显然无法做到。

 

原则五：用户控制

　　注意，应用程序中，是用来控制操作行为的，而不是应用程序。尽管应用程序能够建议用户做哪些操作或者警告用户有危险，但是这显然对于应用本身是个错误，因为这会将玩家推得更远。成功的应用程序应该在一味的提示和关键时刻做提示之间进行平衡。

　　当对操作行为和控制感到熟悉和可预见的时候，用户将会明显感觉到自己对于应用程序的控制。操作行为越是简单直接，玩家就能更容易的理解和记住。

通常，玩家都希望在游戏开始有充分的机会能够取消操作，因为他们希望能够对操作进行确认。于此同时，玩家还希望能够正常的停止操作。

 

原则六：尽量少的让用户输入，输入时尽量多给出参考

移动端的虚拟键盘一直是科技界无法解决的一个难题，虚拟键盘的主要缺点：1.输入定位无法反馈，所以无法形成高效的盲打；2.虚拟键盘的空间限制，手指的点击经常造成误按。光是上面这两点就让虚拟键盘在输入上大打折扣，所以我们在设计应用程序时，只要遇到Input Box的控件时，首先就要想到尽量让用户少输入，或者智能的给出参考。

 

原则七：全局导航需要一直存在

全局导航在Web交互设计中比较容易做到，在手机移动端全局导航要看产品设计的需求，什么功能需要全局导航，社交应用通常是：消息，通知，请求；音乐视频应用通常是：下载，搜索；工具类产品经常是核心工具条（tool bar) 比如浏览器，语音助理，音乐识别应用等等。

全局导航的价值在于可以让用户在使用过程中不会丢失信息，减少主页面和次级页面之间的跳转次数，当然全局导航中的info-task要能在当前页面完成，如果需要跳转到新界面，就会失去全局导航的意义，因为当出现多个info-task的时候，就需要用户不停的进入全局导航页面来完成。

 

原则八：自动保存用户的输入成果

在移动端，由于输入面板的复杂性，而且触摸输入没有物理按键的反馈自然，特别是手机上去输入一段文字或者信息，对用户而言本身就是一件很痛苦的事情；对产品而言，用户的在你的产品中输入是一个很值得庆幸的事情，所以设计人员需要让你的apps自动保存用户的输入成果。

微博官方的手机客户端在用户输入信息后，点击左上角的叉时会弹出Action sheet来询问，确认是否要放弃，或者保存为草稿；path的处理则更为人性化，在处于断网的情景下，用户依然可以发布照片和文字，当然后面联网成功后，系统会自动上传，只是发表时间是连网后发布的时间点；Instagram的评论也很友好，在断网或者网络情况不稳定的情景，用户输入的评论依然可以发布，后面会有一个叹号提醒用户稍后发布或者重试，提升了用户参与的积极行，同时活跃了社区。

 

原则九：为了程序响应的速度，设计有时候需要担任掩护的作用

科技并不是万能的， 技术依然是移动互联网应用程序最需要优化和完善的，作为技术的盟友我们设计人员也需要辅佐他们，让用户觉得程序原本就应该是这么运行的。特别是程序响应的速度很多时候不光是技术的问题，与网络环境也有很大的关系，这时候设计人员需要考虑这些客观存在的情况，帮助程序来掩护这些瑕疵，让用户感觉到在使用时是流畅的。

 

参考资料：

http://www.uisdc.com/flat-vs-material-design

https://www.zhihu.com/question/19812118