From archon in bbs.meizu.com
地球人都知道，对于电子产品来说，界面是非常重要的。M8的界面主要问题就是卡，但即便解决了流畅性问题，M8的界面就真的没什么问题吗？我相信各位在使用M8的时候，总会觉得界面“缺”了些什么，但又说不出来。而与之形成鲜明对比的，是某公司的某产品（大家都知道），在用氖焙颍芑嵊幸恢质娣母芯酢５降渍庵溆惺裁床罹啵康比唬乙菜挡怀隼矗欢问奔涞乃伎迹菜闶怯辛艘坏愕阆敕ǎ荡薓9出现之前写出来，也希望能给MZ一些的思路。
在此并不讨论界面的功能性，主要偏重于界面的用户体验方面。
想法是很多的，但比较零散，不过如果要写文章那肯定不能随不安乱写，所以我把它们分为了三个部分，分别是呈现、动态和交互。先说呈现。
一、呈现部分
所谓呈现部分，就是静态的界面设计，应该也可以理解为美工。M8的界面，从老UI到新UI，呈现方面已经有了很大的提升，但在我看来还是存在一些欠缺的。具体而言，呈现这块，我想到的主要是立体感、实体感、质感和层次感这几个方面。首先说说立体感。
其实如果对比一下老UI和新UI，是可以看出立体感的提升的，但这儿用一些图片可以有更生动的表现。
什么是立体感呢？立体感就是一个物体非平面的感觉（废话），具体而言看下面这张图。按钮1，是完全没有立体感的，按钮2则有了一定的立体感，按钮3的立体感就更强烈了，因为文字也拥有了立体感。
1.png (6.77 KB)
2010-5-25 21:34
除了按钮本身的立体感，按钮和背景之间也存在立体感的关系，也就是说你这个按钮是怎样“放置”在背景上的。上图的3个按钮，虽然本身的立体感一个比一个好，但它们和背景的关系依然是很粗略的，如果把这些都加上，效果会更好一些，不论是按钮4的浮置，还是按钮5的嵌入。在与背景间的立体感方面，M8老UI做的是相当差的，新UI虽然有一定的改进，但依然还存在比较严重的“脱离感”，既一个“对象”中的各个“元素”（比如按钮是“对象”，按钮的本体、文字和图标就是按钮的“元素”）之间的结合并不紧密。这样就会让界面的立体感有所欠缺。
2.png (4.87 KB)
2010-5-25 21:34
立体感有了以后，下面一步追求的就是实体感。这个可能比较难以解释，所谓立体感和实体感有什么区别呢？打个比方，立体感就是一张纸上飘着另一张纸，而实体感就是一张纸上飘着一块砖头。换句话说，就是在美工设计的时候，很多元素不应该看起来像“一张纸”，而是要看起来像“一块”东西，一块实实在在的东西。具体可以看下图。按钮7和按钮6比，就更有“实体感”。
3.png (4.73 KB)
2010-5-25 21:34
可以看到，随着立体感、实体感的不断加入，按钮显得越来越好看（窃以为）。但这些按钮还是缺乏一些东西，因为他们看起来缺乏细节，过于模型化，缺乏“真实感”，也没有材质感。而赋予它们这些东西的，就是质感了。在平面设计上，这个叫做材质的“肌理”，比如是镜面的还是磨砂的，是皮革的还是纸质的。为了表现这些，就需要加入诸如高光、反射、纹理等等东西。如果我们给按钮加入一些“肌理”或者说质感，看起来又会是什么样子呢？
4.png (18.28 KB)
2010-5-25 21:34
当然，这个要和界面风格搭配才好看，这里只是举例。另外因为风格问题，没有加高光。
最后是层次感，这个就不用图片来举例了，大家对比一下系统自带的“时间”、“QQ”和“MSN”，对比一下就能感觉出来哪个好哪个不好了。
PrtScn20100526001035.png (55.78 KB)
2010-5-26 00:20
PrtScn20100526001118.png (41.96 KB)
2010-5-26 00:20
PrtScn20100526001200.png (76.23 KB)
2010-5-26 00:20
说了这么多，联系一下实际。如下图，在MZ的界面里（新UI），对话框虽然突出了层次感，但本身缺乏立体感，看起来像一张纸做的一样；弹出对话框的按钮只有最初级的立体感，并没有与背景的立体感，也没有文字立体感。而很多按钮图标，也没有与按钮本身结合的感觉，像是“浮在”按钮上方的一个游离物体，因此在美工角度，并不能算是很美观的设计。
1.png (38.2 KB)
2010-5-26 00:20
而系统的工具栏也存在这样的问题，就不细说了。最严重的是从工具栏上弹出的菜单（“文档”里按一下“更多”）弹出的那个菜单，那简直是什么效果都没有，看起来非常缺乏设计。
2.png (45.01 KB)
2010-5-26 00:20
与此对应的，我们看看其他产品在同样位置的设计呢？
某产品的界面：层次分明，立体感丰富。
对话框呢？虽然并没有追求实体感，但立体感和质感做的非常好，尤其是文字的立体感。
3.png (50.77 KB)
2010-5-26 00:22 4.png (101.37 KB)
2010-5-26 00:22
android的界面，同样也有比较明确的层次关系。
虽然关于刚才说到的那些特性，具体选择哪些来表现，都只是界面设计风格问题，但不论如何，界面中各个元素之间的视觉结合关系、层次关系和立体感，都是不可或缺的，如果在这些方面偷懒，最后的结果就是刚才那些截图中体现出来的——单薄，简单，缺乏细节，不够生动。这样的界面是无法深深打动用户的。归根到底，不论采用哪种风格，都需要精心的设计，简约不等于简单，元素少不等于好看。
最后还有一点很重要的，因为M8的屏幕点距要远远小于一般电脑的，所以在电脑上看的很舒服的设计，放到M8（M9）上就未必好看了，比如在电脑上用1像素描边效果不错，但到了M8上，也许就需要2～3像素了，诸如此类。
二、动态部分
静态界面设计的再好看，如果缺乏良好的过渡，一样不会起到很好的效果。而在过渡方式的设计上，主要有三点想法。
第一点是物理模型的应用。
当然，所谓物理模型的应用并不是说要引入物理引擎或者说要精确模拟物理过程，我的意思只是，在设计动画的过程中，如果可以引入更多真实世界中的物理模型，那么动画过程会显得更加自然，更加流畅。为什么有些动画会显得“生硬”，有些动画又显得“细腻”？帧速度是一方面，而动画本身的呈现方式则是另一方面。对于用户来说，看到真实世界中存在，而又实现地非常不“真实”的动态，感觉会是很不好的。举个例子，比如模拟一个动态减速过程，在真实世界中这个减速是渐进发生的，如果实现成瞬间减速到低速再慢慢减速到零，无疑会给人一种很不真实的感觉。
结合到M8的新UI中，哪里存在这样的问题呢？第一个就是主界面的滑动。在某厂家的某产品中，主界面的滑动是有到位回弹效果的，而在android和htc sense中这样的设计也存在。第二个就是界面切换的推移动画。我们可以注意到，在某产品和android系统上，这个动态都是匀速的，而在M8上，它被设计成了一个初速度极大、加速度（减速的）极大的动态过程。这样的过程，在真实世界中都是不存在的，即便勉强认为它存在，带来的后果就导致在用户潜意识中，你的界面缺乏“重量”，因而才会产生这种大范围的速度变换，再进一步，就是你的界面没有质感，操作起来不细腻。而其他系统之所以采用它们目前采用的设计，我想最大的优点是给界面操作赋予了“物理性”，也就是说，由于界面运动接近于物理方式，用户在操作的时候就会下意识的对主界面产生一个“物理实体”的感觉，而能在虚拟设备上操作真实的物理对象，这对于用户体验来说是一个非常好的提升。
第二点是动画属性的设计。
除去物理性，动画的其他属性也会影响用户使用产品时的感受，包括动画的长度、力度和范围。
首先说说长度。就我个人的体会与理解，对于用户来说，如果一个动画短于0.2秒，那么会导致“突兀”的感觉，就像闪光灯一样让人觉得不适应。而如果一个动画长度大于1秒，则又会导致拖泥带水的感觉。而在这之中，把一个动态过度效果的时间长度控制在0.4～0.6秒，是最合适的，既不会产生突兀的感觉，也不至于影响用户操作的连贯性。
其次是动画的力度。所谓力度，就是一个动画给你带来的冲击感。比如一个界面花0.5秒的时间，以匀速将当前界面推出屏幕，这会给人一种舒适典雅的感觉。而如果让这个动画变为从0加速再减速到0，同样花0.5秒，那么会让人觉得动感十足，充满了活力。而如果这个过程是以一个极高速开始，在0.3秒以内快速减速到0，那这样的动画就会令人觉得很激动，很不适，而M8的界面，用的正式这样的动画。
最后是范围。这个就不用多说了，对于用户来说动画的范围最好是无处不在，任何一个操作都可以导致动画的产生，而屏幕上绝对不会（至少不会经常）突然出现大范围的显示内容更改。举个例子，某公司的某产品的输入法面板在出现的时候是滑出的，android则是平移+渐显，在M8身上，则是直接显示出来，仿佛一块板砖突然出现在用户眼前。
第三点是动画的叠加和非同步性。
所谓的动画叠加，是指在一个动画产生的同时，另一个动画的同时发生。在M8上，最明显的一个例子就是解锁界面。当你按下解锁界面的任何一个按钮时，就开始了解锁动画（拖动把手）。但此时屏幕上的时间，是突然消失的；解锁提示，是突然出现的，包括工具栏的布局变化，也是突然发生的。这些叠加动画的缺失，导致原本非常好的解锁动态设计变得乏味。与之相比的，是列表横滑删除。在新UI中，在原本的删除按钮动态中，又引入了类表收拢的动态，这种组合，导致删除列表项目时的用户体验大大提升了。而在这个方面做的最典型的，则是某公司某产品的桌面图标删除动画——图标的晃动，结合用户拖动时的位置自动重拍，的确是极佳的用户体验。
而动画的非同步性，指的是一个动画中包含的各个动态元素，不要同时出现、同时变化、同时停止。如果可以让一个动画中的各个元素独立变化，那么整个界面就会多一些“自动机”的感觉，少一些“预定义”的意味。并且非同步的动画，可以避免动态过程显得过于简单，导致用户缺乏新意。例如，在某产品和android中，对话框的弹出与弹出时的背景变暗，都是异步的，而在M8上这个过程是同步的。因此和它们比起来，M8的动画就显得比较简单粗糙。
三、交互部分
由于交互部分是我想的比较多的部分，所以想法也会比较多。首先来聊一下界面焦点和用户心理状态转换问题。
什么是界面焦点呢？所谓界面焦点，就是当用户看到一个界面的时候，注意力集中在什么地方。例如，当屏幕上弹出一个对话框的时候，用户的焦点就自然而然会转移到对话框上。对于不同的窗体，有不同的焦点，有些窗体甚至根本不存在明确的焦点，例如主界面。但不论如何，不存在焦点的界面是不存在的，而如果想让用户在使用产品时可以得到愉悦感与舒畅感（仿佛产品是为我设计的一样），那么具有鲜明焦点的界面就是必不可少的。
有哪些方法可以让用户形成焦点呢？这里分为静态的焦点和动态的焦点。
所谓静态的焦点，就是在用户不操作的时候产生的焦点。这个焦点如何制造，主要是依靠突出颜色、细微动画、提示符、附加修饰类界面元素等组成的。举两个例子，一是锁屏界面以黑白为主体的元素（不包括背景图片）中突然出现了橙色的提示区域，这个区域就构成了一个焦点；二是当主界面上的图标右上角出现一个数字时，这也构成了一个焦点。同理，输入时的光标也是静态焦点。而动态焦点，则是在运动过程中产生的焦点，比如对话框弹出时背景变暗，自然而然就让用户的焦点转移到了对话框身上。那现在M8的UI设计有什么我个人觉得可以在这方面进行改进的地方呢？那就是交互过程中制造的焦点过少。除了对话框弹出的时候有焦点制造效果以外，其他的界面并没有明确的用户焦点，也就是说，用户看到界面以后不会觉得这个界面有什么特别需要去注意的地方。例如解锁界面，是一个纯静态的界面，在用户这个界面以后，并不会立刻就明白我应该去干什么，而只会看着界面发呆。对比一下某产品和android手机的解锁界面，你就会发现那些界面上的焦点都非常明确。我相信没有谁在看到某产品闪闪发光的“滑动此按钮解锁”后还不知道应该怎样才可以解锁。这是M8的界面交互在静态时的焦点缺失。而动态界面中的焦点缺失就更严重了。我们都知道，在动态过程中，用户的注意力会集中在变化的物体上，例如一个按钮突然动了一下，我们会立刻注意到它。这个焦点的强烈程度，是和变化物体的大小成正比的，但这个焦点到底有多清晰，却是成反比的。也就是说，变化的物体范围越大，用户的注意力就会越模糊。于此同时，如果在一个大运动中夹杂着一个小运动，那么这个小运动会比没有那个大运动的时候更加鲜明，更加强烈。
说了这么多，联系到M8的界面上是怎样呢？我们可以看出，M8的界面动态，绝大多数都是整个窗体的整体动画，这样只会给用户带来一个非常模糊而大范围的焦点，等动画结束以后，用户还需要花时间去新的界面上重新寻找新的焦点。我们再来看一下某产品，它的窗体动画同时，会伴随着一个标题栏的按钮渐变，这样用户在这个过程中，焦点就自然而然的被吸引到了上方，不会等到窗体动画结束以后再去花时间寻找。
因此个人认为，在交互设计的时候，不论如何都要尽量让用户在操作过程中拥有明确的焦点，要利用动画、效果，去引导用户产生新的焦点或者从一个焦点转移到另一个焦点，而不要缺乏。具体而言，对于M8来说，对于静态界面，可以让希望用户去按的按钮产生细微的变化，比如呼吸效果、闪烁效果，对于动态的界面，可以把动态分割为几个部分，例如窗体平移的同时伴随着工具栏的退出、进入，这样对用户体验的提升会有一定的帮助。
焦点说完了，那什么是用户心理状态转换呢？我们可以这样理解，就是说，用户在每一类界面，都有一个特定的心理状态。比如，手机休眠的时候，面对黑暗的屏幕，是一个状态；解锁屏幕，是一个状态，而手机的主界面，则又是一个状态。在叙述状态转换应该怎么设计之前，我想先解释一下不同的转换方式对用户的心理会造成什么样的影响。
假设把用户的两种心理状态用黑色和白色来表示，那么存在下面三种不同的转换方式：
5.png (22.67 KB)
2010-5-26 01:07
相信对于图的解释是不需要了，而这三种变化模式的优缺点，也是非常明显的。
第三种，是早期系统的设计，用户的心理状态是硬转换，例如Symbian系统和Windows Mobile系统。但随着某产品的出现，整个业界已经基本上抛弃了第三种方式，开始转为前两种。但前两种有什么区别呢？
我们可以想象一下，如果你现在在听音乐，节奏鲜明的摇滚乐和没有节奏的宗教音乐，哪个更能让你想睡觉？无疑是没有节奏的宗教音乐，因为它实在是没有刺激性。在操作时的用户心理状态转换时，也是一样的道理。如果用户的心理状态是从一个状态平滑转移到另外一个状态，用户就不会受到足够的刺激，就不会对这个转换过程产生足够强的回应，结果就是体验感的下降。所以第二个模式是最合适的模式，就是既有鲜明的模式转换，又有足够的转换过渡。下面让我们来结合实际分析一下。
M8的老UI，在解锁状态和使用状态中，采用的是第三种方式，给人带来的感觉就是过于枯燥。而M8的新UI，则采用了第一种方式，从锁定状态到系统状态，中间几乎完全是过渡状态，导致两个状态都不明确，无法给用户足够的刺激。再来看看某产品的解锁过程呢？当你滑动滑块的时候，你的心理状态依然是“白色”的，而在滑动结束以后，界面退出，同时图标飞入，这就是一个很快的过渡过程，然后直接就进入了“黑色”的状态。这样的转换，既不显得生硬，又不会导致用户缺乏心理刺激，相对于M8新UI的解锁方案来说，的确是要更好一些。所以至今为止，某公司和几乎所有的android手机，在解锁设计上都是这样的模式，不是没有道理的。这一点，我希望M9可以修改一下，因为M8新UI的解锁方式太过于平淡乏味，无法让人有“眼前一亮”的感觉。
其次是交互设计中的拟人化元素。
一个产品要得到高的用户粘着度，就需要在用户使用的方方面面、时时刻刻都能给用户带来愉悦的感受。换句话说，你如果想要用户对你的产品倾注以情感（喜爱），你首先必须要让这个产品拥有可以倾注情感的属性。人可以把感情倾注到宠物上，但没听说过有人会对猪肉投入强烈的感情，这是同样的道理。为什么用户可以喜欢一款手机，但绝对不会去喜欢一块芯片？归根到底是因为手机拥有了很多芯片所不具备的属性，而在这些属性里，拟人化是不可或缺的一部分。
当然，这里的拟人化并不是说一定要像一个人，但不可否认，人对非人类对象所投入的感情，归根到底都是对人类感情的异化，既物体一定要可以对你的举动产生反馈。如果物体对你的的所作所为不会产生任何回馈，那么是很难成为精神寄托的（当然也不是不可能）。这个回馈可以很小，比如你按了一个按钮它会弹出一个界面，也可以很大，比如电子宠物。不过这“拟人化”的程度高低，决定了用户可以多喜爱你的产品。换句话说，在产品交互设计的时候，你可以把你所设计的产品当作一个有生命的东西，去思考它在这个前提下对用户的操作会有什么反应，并且给它赋予一定的“性格”，这样用户在使用产品时，相对于使用别的冷冰冰的科技产品，就可以获得完全不一样的体验，而这可以让用户彻底“爱上”你的产品。
让我们依旧结合实际。试想一下，你按下手机的电源键以后，手机并不是待机了，而是“休息”了，那么当你再按下电源键将它唤醒的时候，会是怎样一个情况呢？你可以想象，当你刚刚让它休息的时候，它还是活跃的，但休息一段时间以后就会睡去。针对这个，就可以设计一些动画过程，例如锁机的时候，制作一个仿佛是闭上眼睛的动画，而短期后解锁的时候是迅速恢复，长期后解锁，则动画会显得稍微懒散一点。当然这只是举例，而且设计动画的时候还是要考虑到之前在动态部分说过的动画设计原则，但类似于这样的思路，无疑还是值得考虑一下的。
除此以外，我们也可以让手机在用户长时间不操作的时候，产生一些比较“调皮”的小动作，来增加手机的拟人化程度。这儿可以结合上面说过的用户焦点问题，例如用户长期在设置界面中不操作，“返回”按钮会“跳动”一下；用户长期在主界面不操作，某个图标会摇晃一下、跳动一下、闪烁一下，这种比较调皮的小设计，也可以让用户获得极大的满足感，而且如果可以和你希望用户执行的操作结合起来，那就能起到更好的效果。总而言之，让手机变得不再是一部冷酷的科技产品，可以为你赢得更多用户喜爱。
在刚刚关于拟人化的讨论中，我们提到了一个概念，那就是UI对于用户输入的响应程度问题。关于这个问题，我想在这里专门详细阐述一下，并把它叫做用户对界面的掌控度。
为什么用这个词语呢，因为我觉得，对于用户来说，一个“顺手”的电子产品，它的界面必然会对用户的输入作出清晰且丰富的反应，并且还会针对用户的使用习惯作出特殊设计（当然界面易用性设计不在这个帖子的讨论范围之内）。而这个反应，分为三个方面。
第一个方面，是有没有反应。这个当然是不需要详细讨论的。
第二个方面，是有怎样的反应。这个其实也不需要特别丰富的讨论，就好比你按下一个按钮，会弹出一个对话框，这就是一种反应。
第三个方面，是有多大程度的反应，反应有多细腻。这个才是我想着重讨论的问题。
我们可以试着想象一下，当你从事一项体育运动的时候，比如打篮球，你很喜欢打篮球，但篮球是如何对你的行为作出反应的？首先，当你作出投篮动作的时候，篮球会飞出去。其次，它飞行的方向，是根据你出手方向的变化而变化的。最后，你不同的投篮方式，会导致篮球不同的飞行轨迹（带不带旋转之类）。你可以随心所欲控制篮球的行为，或者说篮球会对你的动作作出细致入微的反应，所以你喜欢打篮球。
如果再想象一下，如果不论你用什么姿势，什么力度，什么方式来投篮，篮球的飞行路径都是固定的，那打篮球还有意思吗？所以真的去打篮球，是比打篮球游戏更有意思的。
让我们回到界面交互上。刚才说的打篮球的例子，正好可以解释我想要表达的观点，那就是当你可以更好的掌控一个东西的时候，这个东西就会显得顺手，用它的时候也会显得更舒服。换一个方式来说，就是当一个东西可以对你不同的行动作出丰富而精确的响应时，这个东西就肯定会是愉悦和顺手的。
也许说到这儿你还不是特别明白，没事，继续结合实际。
很多人都承认，M8在锁机状态下充电时的冒泡泡效果让人非常喜欢，但不知道各位有没有想过，为什么唯独那个界面让人特别喜欢？如果说它是动态的，那为什么关机充电那个动画不会让你产生这样的感觉？其实秘密就在，充电动画模拟了手机对你充电行为的响应。我不知道魅族当初设计的时候有没有思考过这个问题，当你插入插头的时候，会有一个动画，这个动画是让很多小光点从USB接口的位置飞出，然后飞进电池，而这个动画并不会出现在你按键、插耳机的时候，也就是说，这个动画是M8对你“充电”这个操作作出的单独而专一的的反应。这样的反应，就好比M8“知道”你正在给它充电一样，会给用户带来一种“掌控”界面的感觉，或者说，手机可以“理解”用户不同的操作。我认为这才是充电动画之所以会那么让人记忆犹新并深深喜爱的原因，因为它对用户的输入作出了专门的反应。
但可惜的是，M8的界面中这样的地方就只有这一处。在其他地方，系统对用户操作行为的响应都是非常单一，非常模式化的，比如无论你怎么去点一个按钮，都会弹出一个对话框，而这个对话框和点其他按钮产生的并没有任何差距（文字除外）。但我们完全可以让这个对话框从用户按的那个按钮之上放大渐显出来，让用户有一个明确的感觉，这个对话框是因为我按了这个按钮而产生的。此外，当用户按下M按钮的时候，程序会渐隐缩小被桌面覆盖，但这个动画完全可以制作成程序界面缩小渐隐，并最终消失在M键上方，这样用户会有一个更强烈的感觉，那就是这个程序的退出，是因为我按了M键而导致的结果，这样就可以大大提升用户对界面的控制性。再例如，不论用户按的是音量向上，还是音量向下，弹出的都是一个一样的音量调整窗口，但如果把这个窗口上加入一个三角形箭头，指向用户所按的那个按钮，会不会有更好的用户体验呢？
再让我们来看看那些非常舒适的用户界面之所以舒适的原因。为什么某产品的滚动列表用起来那么舒服，而Windows的滚动条却那么不爽？归根到底，是因为滚动列表可以对用户不同的操作作出不同的响应，不论是点击，还是拉拽，甚至是横滑删除。再比如科幻电影（比如《钢铁侠》）中的虚拟操作界面，为什么大家会觉得那么好，那么期待，那么向往，其根本原因还是在于那些虚拟出来的界面并不是一成不变的响应用户的操作，而是根据用户的不同操作作出了完全不同的响应。你不再需要去刻意按屏幕上的某些虚拟按键，而可以随意地在屏幕上操作，这就是丰富的响应。再看看真实世界中已经存在的，比如多点触控，为什么多点触控会给用户带来那么大的体验提升？其归根到底还是因为开辟了一种新的响应方式，让界面可以多响应一种用户操作。以往用户必须配合界面用一根手指头去操作（比如去按放大和缩小按钮），而现在界面可以单独去响应非一根手指的操作，这才是在我看来多点操作提升用户体验的原因所在，因为它提高了用户对界面的掌控度。
说到这里相信大家都明白了。当用户操作一个界面的时候，如果界面能根据用户所做的不同操作（单击还是双击，按下的位置是哪里，按下的是哪个键，键在哪儿）作出单独而不同的响应，无疑是大大提升用户对界面的掌控性的，也就是能大大提升用户的使用体验，通俗了说，就是让虚拟的操作界面变得真实，因为真实的东西不会一成不变，而用户会喜欢更接近真实物体的操作方式。
今天就写到这里，还有更多的想法，以后慢慢追加，当然这只是我自己的胡思乱想，不代表一定是对的，如果各位有不同的想法，大家一起讨论那会是一件让人非常愉悦的事情。毕竟想法越多，就越可以给人以启发，甚至产生新的创意，而这些都有助于我们得到一台更加完美的M9.
No comments:
Post a Comment