这是一篇关于产品界面设计思想的文章，想法源自于一直以来在设计方向上的困惑——如何才能设计出优秀的产品界面？以前我一直以为除了必要的基本功以外界面设计还需要表达出足够多的细节。可是在日常工作中我有刻意的添加细节，结果却不尽人意。直到最近又一次思考这个问题的时候我才发现是自己思考的方式不对，“细节”仅仅是在设计产品界面过程当中产生的附属品，重要的是我们如何才能将产品打造的更有亲和力？让他成为不仅仅是停留在一个2维的平面上没有生命冰冷的代码和程序。

一些需要提前知道的事情

关于人类的眼睛

人类的眼睛是为了适应3维世界所进化过来的，在数学层面上就是所谓的x轴，y轴，z轴构成的世界。

3维.jpg

我们简单的讨论一下眼睛的进化问题，眼睛最开始作为动物接触这个世界的感官系统只能简单的感受到这个世界有光辐射的存在，后来随着时间推移我们慢慢可以区分光线的强弱，这时候我们已经可以看到一些简单的2维图像了，但是眼睛远远没有这么简单后来我们的眼睛进化出了瞳孔，可以控制光线进入眼睛的强弱，这个时候我们就能区分明亮度，再后来眼睛慢慢的可以感知不同的颜色，由此大脑就可以将眼睛接受到的“光信息”转译成3维的感受，这样我们就可以感知到3维世界了。

瞳孔

以上也可以发现一些关于美术绘画上的技巧，比如绘制图像的阴影，可以增加物体的立体感，近大远小等等这些美术上的原理和眼睛的差不多。都是通过2维的手段去感知3维世界。这个部分是由眼睛，大脑两个组织器官来完成的。

关于我们设备的屏幕

是的你一定已经发现了，在2维屏幕上绘制的界面或者图形和在纸上绘画的原理一样。和眼睛接受“光信息”的原理一样。屏幕作为传递“光信息”的光源，为了让人容易辨识上面的图像，我们就需要使用一些技术手段展现3维的感觉，比如添加阴影，设置前后对比，近大远小这样美术绘画上的技术。

产品设计的4维思考法

上面讲了3维的事情，那么关于我提出的这个产品设计的4维思考方法都包括那4维呢？
他们分别是x轴，y轴，z轴以及时间。
之前在设计产品的时候没有考虑过时间问题，当我想到用物理上的4维思想去思考设计的时候我意识到，我们如何才能感受到身边的物品是有生命的？我们又是如何给那些没有生命的物体赋予情感的？我的答案是“时间”任何生命体，非生命体，之所以产生感情意义我认为是由这个物体的过去，现在，以及未来所经历的时间来决定。

时间

我们之所以和一个朋友关系十分好，是我们过去经历了很多事情，现在也彼此熟悉，未来还有无限的可能，无论发生什么，这些事情都会存放在时间的长河当中。就好比我们中华民族，是经历了5000多年的兴衰才是现如今的我们。

人类通过过去，现在，将来发生的事情感受到一个人的情感意义，一个物品的纪念意义。对于产品界面的设计来说我认为可以有相同的效果。

如果我们可以观察4维空间，我们就能了解这个产品的过去，虽然我们不能观察4维空间，但是我们可以以4维空间的视角来描述我们熟悉的3维空间，让人和界面之间产生共情。当用户熟悉一个软件像熟悉一个人一样知道它过去的习惯，知道它现在能做的事情，以及它未来会不断的带来惊喜，那么我们就认为软件本身被赋予的情感和生命。

理解与应用

上面用大量的篇幅交代了一些概念是为了让我们统一认知。
我们从x轴和y轴组成的2维世界说起。

2维

屏幕就是由x轴和y轴组成的。我们先来看看最早的网页
http://info.cern.ch/

最早的网页
上面的图片就是传说中最早的网页，内容十分简单，浏览器只是将文字内容以点的形式在x轴y轴组成的直角坐标系上绘制出来。这样我们就看到了最基本的网页界面。如果页面只是如此简单倒也还好可是现代界面充满了各种各样的组件元素，有按钮，有菜单，有导航等等组件，如何让人类更好的理解和接受这些组件元素呢？

进入3维的世界

是的，让界面表现的更像3维世界我们见过的东西，更加容易让我们理解和识别。
还记得iphone4上ios操作系统的拟物化风格吗?在扁平化大潮之前，这种你拟物化的设计很容易被人所接受。

ios拟物化设计

我们看到日历的图标和现实生活中的图标很像，电话本的也和现实中的一样。这不仅仅是在视觉上让我们快速识别了这些app更是在情感上为这些图标赋予了意义。让我深刻的意识到，我们可以点击这个图标查看日历，点击那个图标管理我们的联系人。

我们是如何感受到拟物的？

通过3维世界里的z轴，我们通过给图标添加阴影，添加颜色的对比让人们感受到z轴的存在。从而构建出3维的感觉。
即便是到了现在的扁平化风格依然用很多界面组件添加阴影来构建立体感。

阴影

比如material design，为按钮组件添加适当的阴影，这时我们就能感受到这个按钮是可以按下的了。以及下面撕纸的效果，让我们感受到这个卡片背后还有东西。2维世界是不应该存在层次感的，但是我们添加了一些阴影效果以后，层次感在2维世界呈现出来以后，就让我们有了3维世界的感觉。当然除此之外，material为了让界面元素更接近物理世界的真是情况，还为界面组件定义了一些物理属性比如重量和质量
但是这还不够，缺在什么地方呢？
我们使用电子设备的时候一定遇到过死机或者卡死的情况，或者卡一会就又好了的情况。这一点和我们的现实生活很不一样。其实他们并没有卡死只是计算机没有完成数据处理。这个时候我们需要一个新的东西——“动画”真的只是添加动画那么简单吗？

进入4维的世界

我想给界面组件添加动画没有什么好讨论的。我们要讨论的是关于时间在设计上会涉及到的一些问题。我们知道物理世界时间是不可逆的，就是流失掉的时间是无法回来的。但是在我们使用物理世界构建的虚拟世界当中这就是可以实现的。为什么这么说呢？比如视频，游戏的存档ob，以及编写好的代码应用程序。他们都被我们固定在计算机的虚拟世界里，每次我们重新读取这部分数据的时候，就可以在2维的世界里面，使用4维的视角来观察这些数据和世界。（因为我们可以观察和感受时间部分了）以下我们着重讨论“流程”和“微交互”两个部分。

如何用4维的思想去设计呢？

我们需要站在时间的角度上来思考这个问题，下面是一个邮件应用的流程图。

邮件流程图来自于网易uedc

我们需要让用户明确的是，用户需要在什么时间点输入账号密码？
用户读信的时候会消耗多少时间？
发送信件的时候又会消耗多少时间？
什么时候提醒用户有新邮件？
以4维的角度去设计界面，我们就要考虑到用户使用时候的流程，通过对流程的分析，为界面添加一些过渡，或者艺术效果让用户觉得他们在和一个有情感的物品在交流。当用户看到登陆表单的时候就知道登陆后的情况，就好像碰见一个好久未见的人一样，知道他想跟我们说什么一样。我们通过这样固定时间的方法来增加软件程序的情感，我想上面的流程图或多或少给了你些许的答案。
每一个信息的呈现的进场时机和离场时机都决定着，这个应用的样子是否切实的贴近我们的物理世界，能更好的被人类的大脑接受。

微交互loading的例子

2016年的设计流行风尚应该是微交互，就是为界面组件添加一些微小的交互。

loading

比如我们常见的loading界面，在载入数据的时候经常使用，添加这种过渡感不会让用户觉得我们的app死掉或者不能用了。
我认为如果在x，y，z的基础上让产品更加容易被人接受和贴近现实的关键就是在什么时间点上触发这些微交互？注意，动画仅仅是产品界面设计当中的一部分，更多时候我们在意的是如何传达给用户的信息，它们以什么样的形式在什么时间点上正确的展现出来，而不会让用户产生陌生感？

微信撒花的例子

微信撒花

当我们使用微信发送“新年快乐”，或者“我想你了”字样的时候，就会出发一些撒花，飘星星的动画，当动画出现的时候是不是觉得心里暖暖的？是不是有一种惊喜感？这是人对未来未知的一种情感。通过这种方式只对人和实物才会有的感情被转移到了2维的界面上。

material design当中的例子

真实的动作

在物理世界当中一个物体移动时候是有摩擦力的，上图当中，蓝色有缓动，这个过程就就更加贴近物理世界。除了在合适的时机添加合适的动画之外我们还要让动画看起来和物理世界当中发生的一样。

最后

这个思想受到网易udec一篇文章的影响和启发所写http://uedc.163.com/12677.html
参见上面的链接。
本片文章通过2维3维4维等物理概念联系到UI设计和交互设计希望可以为设计开辟一个新的视角，“产品设计的4维思考发”的思路和想法解决了我一些工作的时候遇到的问题。尚不成熟之处还望指正。