8 从扁平化设计到VR——从User Interface到User Intercube
未来的设计将是传统工业设计和虚拟“界体设计”相互融合渗透的设计。...
1
扁平化设计的始末与精髓
设计不在设计，当扁平化发生时，先抛开扁平化，看一下世界同时还发生了什么？
1.1 变小的积木
摩尔定律，集成电路上可容纳元器件数目，每经过一个周期，芯片上集成的元件数提高2倍，这个周期一般为18个月。越多的元器件（晶体管），意味着更好的计算性能，实现摩尔定律的方法就是制造晶体管的技术可以把晶体管的大小做的越来越小。先看些参数，英特尔i7从45纳米工艺到22纳米，"Ivy Bridge"(22nm工艺)系列，核心面积：159.8平方毫米；"Lynnfield"(45nm工艺)系列，核心面积：296平方毫米。衡量制造工艺的是二维的线性距离，从45nm工艺到22纳米工艺。如果从真实的三维世界来看，把摩尔定律中的晶体管模拟成积木会是什么样子？尺寸下降一半的同时，积木体积只有原来的八分之一，或者说原来八块积木堆在一起能做的事，过了18个月一块积木就可以完成，而这个不断变小的过程从计算机开始到现在已经连续进行了几十年，CPU（中央处理器）的计算能力变得越来越强。
1.2 从线性到立体的UI界面
记录一个物体的位置，如果是在一条线上，那么从0到1，只有两个可能，如果是在一个平面上，会有四个可能（0，0），（0，1），（1，0），（1，1），如果是在一个长度为1的积木上，则会有八个可能（不列举），所以如果要进行空间位置的计算需要更强大的计算能力。
我们把立体几何的视角带入到UI界面的演化中，以时间轴先后为顺序观察UI设计演变。早期的如Symbian系统，操作系统的icon像在一个点上，只有选中和未选中两个状态，无法移动。
之后iphone的iOS系统出现了，在初代iphone上被乔布斯成为“MAC OS X”，操作系统的icon可以在平面上移动。
而在2013年，诞生了iOS7，一个富有争议，但是却最为与众不同的iOS系统，首次明确出现Z轴的iOS系统。
操作系统的icon文件夹（注意是icon形状的文件夹）可以在空间上移动（沿着与界面垂直的z轴缩放），而非之前的向下展开的形式，同时出现了依靠惯性陀螺仪实现的视差动效。对比下iOS系统的iphone4和iphone6对文件夹的处理方式，右侧为文件夹展开。
就像记录一个物体的位置变化，从塞班系统，早期iOS系统，到iOS7似乎就是线性，平面，到立体转变的一个过程，这需要越来越多的数据处理和运算，变得越来越小，越来越强大的摩尔定律演化下的CPU为这个转变过程提供了基础和可能。
除了UI界面从线性到立体的变化，再看看都是扁平化思想为主导的三个平台的差异。扁平化设计的开始是微软的移动端，从2006年Zegoe UI起源的被称为Metro Design，然后是2013年苹果推出的ios7，紧随其后的2014年谷歌的Material Design。在三维效果上，似乎windows phone的三维效果最简单，只有简单的平移和旋转，没有阴影，没有高斯模糊，没有视差滚动。
而Material Design的最为丰富，不光阴影有明确的规范的差异，而且点击会有水波般的点击效果。
可以说，是时间与摩尔定律使得后来的智能手机越来越强大，让UI界面从线性走向立体，从单调走向丰富。
1.3 折叠的信息
扁平化设计有一个极为重要的特点就是大量的对空间关系的使用，比如旋转，缩放，这样的原因是什么？首先看下面张图，一个24寸显示器用iphone6铺满需要的大致数量。
界面设计需要呈现有层次的信息，当移动端遇到海量的信息时，这是其面对的问题也是答案，那就是层次本身。再回顾一下格式塔的临近原则，临近的被看成是一组图形，如果平面范围不足以展示信息，那么如何展示分组又相关的信息呢？这就是空间上的格式塔，图形深度线索的应用。
通过遮挡，在最前的页面表示最近，再通过其他图形线索，如阴影，高斯模糊，还有最为常用的空间缩放表达的动效，共同构成了具有层次的信息和界面。狭小的手机UI界面大量的使用空间关系是一种必然，摩尔定律为这种必然准备了技术的可能性。
狭窄的展示空间要求使用空间关系表示层次，如果空间不狭窄是不是就不会那么扁平，变得立体？先看下两图展示空间的差异，注意icon之间的间距，Mac OS的icon的间距要远大于iOSD的icon间距。
所以答案是肯定的，桌面端并不需要折叠信息，也就可以继续通过拟物的阴影和材质的过度表达界面。根据研究显示，人的合适阅读宽度大概是72dpi下的960像素的宽度（网页阅读宽度的适中值），而现在2K4k甚至1K显示器的分辨率和尺寸都大大超过了这个宽度，曾有计算能力的不足的说辞，但2005年之后双核CPU的普及否定了这一说辞，所以扁平化没有像无线端一样广为使用在桌面端的原因不是计算能力不足，而只是其拥有更多的展示空间，并没有折叠信息的迫切需求。在第三章《3.4 icon与环境》中预留了一个问题“桌面端icon相对于无线端的icon更加立体···这一问题将在第七章···中详细阐述。”
答案就在这里。
1.4 扁平化不扁
1.扁平化设计去掉的是冗余或冲突的信息。扁平化设计通过降低信息冗余来提升信息传递的效率。三维动效构成的空间结构已经表达了界面本身的三维信息，二维平面上的“三维信息”造成了与这个空间结构的冲突和冗余，扁平化设计就是去掉冗余。从信息的角度看，拟物化设计要在平面上传递“三维信息”，一个精致的icon或者界面，需要表达相应的图形深度线索，比如阴影，渐变，透视，于是出现了漂亮的高光，拉丝效果，水晶效果，而在使用中这种信息有时并不是必要的。
好比把真实的照片放在三维空间中移动，会造成违和感，反倒不如一个虚拟的icon自然，如下图，已经处在透视状态的真实照片看上去依旧是“正面的”，而平面化的阴影则保持正常的透视状态。
在扁平化设计中，只在必要的时候出现三维空间信息，比如层级缩放，比如水波般的点击效果，这样界面在运动之前就是“扁平”的。其次，它实现的是根据计算模拟的真实的三维空间感觉，因此才有高斯模糊的景深，旋转，缩放等自然真实的效果，扁平化其实并不扁平。
2.扁平化设计在实质上是从标量向矢量的变更。我们对照的思考扁平化设计的界面和与拟物化的界面，扁平化的界面在缩放的时候可以以矢量的方式随意放大，而PNG格式的拟物化界面需要准备不同尺寸，标量形式的icon无法平滑的过渡和缩放，这会增加开发和设计的难度，并使程序安装包变大，对于碎片化的安卓系统这个问题就更为严重。。
3.真正促使扁平化设计实现的是智能手机计算能力的提升。可以假设苹果公司的设计师并非不想在初代iphone使用更多的3D效果，更多的高斯模糊，或者视差动效，而是当时的硬件没有能力（iphone4运行ios7会出现严重的卡顿）去实现现在的效果。
扁平化并不反对立体，如果手机的算力允许渲染更为复杂的三维图标，给予更真实的三维效果，扁平化设计就可以转为“立体化设计”，这在一些游戏的界面中已有所体现，如游戏Shadowmatic的界面，代表关卡的立方体选项根据手机空间状态调整展示姿态，模拟俯视、平视、或者仰视视角，同时给予灯光、阴影和材质效果。
技术是革新的原因，新服务和新价值是革新的目的，设计是革新的手段路径，颠覆式的创新三者缺一不可，这才是iphone代表的智能手机以及之后的扁平化设计成为趋势和必然的精髓。
那么，当技术进一步发展，会有什么样的新的趋势出现？我们又要准备什么？
2 从User Interface到User Intercube—— VR与AR
User Interface缩写为UI，从基本的用户互动界面的含义，也逐渐演化成界面设计师的含义，其中“face”代表界面，二维，或者一块或大或小的屏幕。Virtual Reality缩写为VR，虚拟现实。从字面意思可以理解这是用遮蔽眼前世界的方式构建一个虚拟的世界。VR技术实现的方式和3D电影类似，在左右眼分别呈现出不同的图像，保证视差，这样就形成了非图形立体深度知觉，而远远要优于3D电影的是3D电影的视线是固定的一个方向，而VR则可以自由变换视线的方向。具体的实现方式需要四点，屏幕，实时渲染，电子陀螺仪，光学镜片（特制的凸透镜）。简易的VR由手机和承载光学镜片的设备组成，如谷歌公司的Cardboard，只要把手机放入一个简易的带有光学镜片的纸壳就可以获得最基本的VR体验。更为专业化的设备则是由两块独立的屏幕构成，实时渲染通过高性能的电脑或游戏主机完成，相应的各项技术指标，如刷新频率，视角都获得极大提升。（如下，分别为HTC Vive，Oculus Rift，PS VR）
Augmented Reality，缩写为AR，增强现实。AR相对于VR是更为复杂的技术，除了要做到实时渲染和视线的自由变换，AR并非遮蔽视野，而是将渲染出的图像叠加在人的视野里并保证虚拟与真实的匹配和衔接。要将渲染出的虚拟物叠加在现实中就要求显示屏幕不是遮蔽的，而是高度透明的，同时渲染物体要与真实环境匹配还需要相应的空间定位技术，保证渲染的物体与真实环境的融合，这可以通过独立的摄像头和相应的软件技术完成。2015年1月22日，微软公司推出了的HoloLens，宣告AR时代的开启。
电影的发展并非一帆风顺，观看的眼镜从早期简陋的红蓝镜过渡到现在成熟的偏振镜历经了几十年，VR技术和AR技术也是如此。（下两图分别为红蓝镜和偏振镜）
最早的VR电子消费设备Vortual Boy在上世纪90年代就已经推出，但是由于种种技术障碍并未获得成功。
VR技术的转机出现在2014年，Facebook公司收购Oculus，再度点燃了人们对VR技术的热情，而2015年的HoloLens则“震惊”了科技界。2016年三大公司同时开始批量销售消费者版的VR设备，2016年也被称为“VR元年”。
2.1 更真实的体验
左眼和右眼由于视角不同形成的视差促使我们形成了非图形的深度知觉，利用这个视觉特性的3D电影已经证明了其的价值，那么VR和AR技术有什么更为突出的优势？
新技术带来的驱动力。3D电影并不需要实时渲染，没有特效的3D电影拍摄过程中只是多使用了一个角度的摄像头，从结果上只是存储的数据比原有数据大了一倍（两个摄像头拍摄），而VR和AR则要依赖很多技术条件的进步。得益于手机的不断发展，显示屏的分辨率和色彩都更加丰富和细腻，这是实现VR和AR的第一步。其次，是渲染技术的进步，VR为了避免人的不良体验要求每秒90帧以上的渲染速度，摩尔定律不但促使CPU变得更快，也使GPU（Graphics ProcessingUnit）图形处理器变得更快，这样就保证了快速的实时渲染。第三，惯性测量单元（电子陀螺仪和电子加速计等）也极为重要，这保证VR设备可以即刻侦测到头部和身体，包括手持交互设备的运动数据，并传递给电脑主机或者游戏主机，渲染出新的画面到头部显示器上。而AR设备在此基础上还有加上摄像头，用来捕捉真实世界的三维空间，使渲染出的虚拟世界与现实世界达成统一。
新技术转化为设计之后带来了完全不同的体验。3D电影的三维感是固定的，当人们把视线从屏幕中心移动到其它地方的时候就越过了屏幕的边界，因此最佳的观影区域只有影院的中后部。VR设备的视角可以达到110度，并且人们可以随意旋转头部，这是传统的3D电影远远无法做到的。实时渲染和惯性测量单元，高分辨率的显示器彻底解放了视觉。
无论鼠标的点击还是触摸屏缩放，我们能使用的交互方式都是“二维”的。VR通过手持具有空间定位功能的手持设备与虚拟世界进行交互，因此人的动作可以部分回归到三维空间，而如果是通过摄像头捕捉人的精确动作，那么就可以彻底解放人的交互行为。更为强大的AR抹平了虚拟和现实的界限，人们可以凭空进行创造，验证设计的直观的效果和思路的可行性。更为深刻的是，VR和AR彻底解放了交互方式。下图为Meta Vision的CTORaymood Lo用他们的最新AR产品Meta 2 AR头盔所做演示。
回到UI的基础概念，如果我们面前显示的不再是一个没有视差的屏幕，而是虚拟的或者虚拟与真实世界融合的三维世界，我们操控的不仅仅是界面中虚拟的button，而是三维的控件，那么“Interface”中的“face”就可以被“cube”取代，UserInterface Design就可以变为更为广义的User Intercube Design，在本书中称之为“界体设计”。
2.2 UI设计与工业设计的合一
概念的合一。国际工业设计协会理事会（ICSID）对工业设计的定义：就批量生产的工业产品而言，凭借训练、技术知识、经验、视觉及心理感受，而赋予产品材料、结构、构造、形态、色彩、表面加工、装饰以新的品质和规格。这段定义包含三个方面，第一，工业设计的内容“工业产品”，第二，从业人员的要求“凭借”之后的内容，第三，工业设计对工业设计内容的设计提升，“赋予产品、结构、构造、形态···新的品质和规格”。对照UI设计，第一点“工业产品”，在UserInterface阶段，“工业产品”的内涵就是可以批量化生产的产品，虚拟的软件设计产品是符合该定义的；第二点从业人员，现在很多互联网公司的交互设计师原来学习的就是工业设计（笔者本人即是如此）；第三点，是工业设计与交互设计在工作内容上的根本差异，“结构、构造、形态”是虚拟界面所欠缺的。在User Intercube阶段，VR和AR技术的变革下，虚拟界面也将出现“结构、构造、形态、色彩、表面加工、装饰”。有人反驳说现在的渲染技术合显示技术还不够“真实”，那么有人推算在不远的2020年左右，计算机即时渲染的分辨率将达到20k（现在显示器仅为2k），已经达到人眼无法区分“真实”和“虚拟”的程度，那么虚拟的界面设计和实体的工业设计的展示结果的区别，只剩下是否可以触及。广义的工业设计向左即“界体设计”（UserIntercube Design），向右即是传统的工业设计。
设计流程的合一。传统的工业设计流程相对用户体验设计的流程更为缓慢，但是大致的几个步骤与用户体验设计的流程是一致的：1.需求调研与用户研究，2.草图创意，3.模型生产和实验（内测），4.产品上市（上线），5.宣发与销售，6.反馈（Bug反馈），7.修正和迭代设计。在VR合AR概念下，设计师可以极其逼真直观的看到设计结果，传统工业设计在前三个阶段的速度将会加快。相反虚拟的“界体设计”将被延长，原有的界面设计应对的复杂程度是二维的，程式化的，而一旦空前的将设计自由度放开，设计的复杂程度将会上升，界面设计走向绚丽的同时也意味着设计的工作变得更加复杂，对相关从业者的资质要求不是降低，而是提高。
设计工具的合一。在User Interface阶段，设计工具出现在四个阶段。1.草图，工业设计与UI设计都倾向于通过草图拓展创意思维。2.建模，工业设计使用的是三维建模软件，侧重于模型的精确，而UI的交互设计则是二维软件，强调互动与回馈，如Axure。3.渲染和表达，工业设计使用相应的渲染插件或软件，UI设计进入视觉设计阶段，使用PS等平面软件。4.动画，如果需要二者都会制作相应的动画表达效果。（下两图为Axure官网图片）
在User Intercube阶段，UI设计一方面走向三维，另一方面依旧要保持高度的互动性。在现阶段的设计工具中，暂时还没有一个完美的工具同时达到这两种要求，但是设计师不能等待工具成熟了再思考设计，现在在分属两个领域的设计师需要同时思考另一领域的设计工具和方法才是紧迫的事情。（下图中的《钢铁侠》界面由CINEMA 4D和Adobe Illustrator两个软件完成，Cantina公司制作，http://www.cantinacreative.com/。）
设计理念的合一。人的视觉特性，心理学特性，生理特性并不会变化，因此服务于人的设计的至高理念本身就是合一的，现代主义设计将从现实走向虚拟。在工业设计领域，因为产品需要直接和人接触，设计必须符合人的身心特点，人机工程学是其必须思考的范畴。在UI设计领域，需要引导人的注意力完成目标任务，需要降低信息的冗余，认知心理学和视觉特性是其侧重。新的设计阶段，二者都将成为设计师必须考虑的事情。
现在的VR和AR设备还不够完美，如算力不足导致的眩晕，模型的精致程度有限，设备价格依旧偏高，但是正如电话发展的历史一样，技术的不断进步将一步步改变我们的生活，改善我们的生活。
2.3 扁平化设计的终点在User Intercube
暂且从相对“未来”的VR回到扁平化设计，如果说扁平化是镣铐下的舞蹈，那么VR就是去掉镣铐的艺术。手机界面的设计更迭经历了三个阶段，从早期的单色屏，到彩色屏，再到智能手机，而在智能手机阶段又可以分成拟物阶段和扁平化阶段。在拟物化阶段，由于手机性能的局限，需要通过各种拟物的三维效果弥补三维空间信息表达上的空白；在扁平化阶段，真实三维空间的效果实现后，去掉了拟物的三维效果，所以扁平化设计是在现有手机性能下的最优选择，然而并不是最好选择，如果技术可以给设计师更大的空间，那么界面将变成什么样子？
在已经上市的HTC Vive中有一款应用，名为《Tilt Brush》，是一款创意工具，被称为VR版的PS，使用者可以在虚拟的三维空间中进行三维的艺术创意。
Tilt Brush本身的操作工具箱“界面”实际就是四方形的“界体”，可以通过左手上的传感器进行不同“面”的切换。
从这个应用的例子中可以窥见，在VR中，界面设计并非只是扁平化的一个平面，而是可以变成抽象的三维立体的存在，这一方面是因为技术进步的支撑，另一方面是因为界面的局限几乎彻底的消除了，界面设计的范围从狭小的手机屏幕突然扩展成整个带有纵深的真实的视野。
扁平化设计必然不是设计的终点，这种风格是不断演进的界面设计的必然过程的一个节点，这段必然过程我们可以称之为User Interface，它的下一段的就是User Intercube，VR的“界体设计”就是这段的开始。
3 小结
UI设计的诞生在信息技术出现之后，从最早的施乐公司的图形界面（Graphic User Interface）的出现，到乔布斯的麦金塔（Macintosh）第一代，直到现在的VR与AR设计都在处理着基本的问题：如何有效的展示信息？计算机语言诞生之初并非为普通人所设计，互联网的雏形诞生于美国的军队。而当硬件不断升级迭代，成本不断下降之后，如何让复杂的程序语言与信息变成易于理解的形式成为一个急迫的重要的需求。微软和苹果公司的成功就是成功的将图形界面应用到其产品之中，诞生了如Office办公软件，windows操作系统，iphone手机等产品。
在信息的两端一端是信息技术，是专家领域，是引领变革的起始端，另一端是信息产品及产品的界面，是用户，是跟随变革享受变革带来便利的末端。在起始端，一切都是按部就班沿着科学的发展，经过可证伪的科学实验一步一步按照摩尔定律规律的演化，而在末端却是模糊的渐进性的步履蹒跚的迭代。如果开端是可以科学解决的，那么末端为什么如此之难？因为开端所指向的是客观规律，是外物，而末端指向的是人类的内心，是人本身。
UI设计需要做的就是了解人类的认知规律，把错综复杂的信息有效的展示给普通用户，并设计良好的互动机制处理人机之间的信息交流。
（未完，请待下篇）
说明：
章节调整：根据内容相关性和设计热点，将第8章修改为《8 从扁平化设计到VR —— 从User Interface到User Intercube》，将原第8章修改为外篇。第9章与第11章位置调换。
错误更正：在周六发布的本章内容中，视差的效果图片左右位置错误，现已更改。
词汇更正：cubic为形容词，对应face应为cube。
认知与UI设计 公众号将会对以下主题进行深入讨论，欢迎大家关注：
1 事物看上去为什么是那个样子—— 临近与捆绑（回复“1”，“场”）
2 为什么要使用栅格系统？—— 简化（回复“1”,“2”，"栅格系统“）
3 icon与logo设计的基本原理是什么？——轮廓（回复“3”，”轮廓“）
4 如何在设计中表达层次？—— 图形与背景（回复“4”，“图形”，“背景”）
5 如何合理的使用色彩？—— 色彩恒常性（回复“5”，“色彩”）
6 导航为什么在左上角？—— 古腾堡定律与自动化（回复“6”，“古腾堡”）
7 动效如何使用？—— 三维空间和运动（回复“7”，“动效”）
8 从扁平化设计到VR——从User Interface到User Intercube（回复“8”，“VR”）
9 规律背后是什么？—— 神经网络与认知 记忆与注意力对设计有何影响？
10 创造力是什么？设计师是什么？ —— 模因的有效迁移迁移
11 规律背后是什么？—— 神经网络与认知
12 格式塔设计法
外篇-中国设计和西方设计的根本区别源自哪里？ —— 自我认知的边界
长按识别二维码
关注 认知与UI设计
：
关注 认知与UI设计
微信扫一扫关注公众号
