扁平化UI中的空间表达

◎人文科技◎　扁平化ＵＩ中的空间表达　张　剑　（四川美术学院，重庆４０１３３１）　摘要：结合扁平化界面设计中平面视觉要素、动态图形、　交互行为等层面，分析它们对界面空间深度表达的方式和特点，　论述了空间在界面设计中对交互及情感层面的影响和意义，以　此论证扁平ＵＩ中也需要对空间的表达和隐喻，其目的是为了更　高效的交互和更好的体验。　关键词：界面；交互；扁平化；空间　随着移动终端所提供的信息和服务的极速增长，信息直接　演变为界面主体，易用、高效才是界面的终极诉求。装饰性元素　成为界面的负担，因此必然会受到逐步减弱和剥离，扁平化ＵＩ　因其易用、高效、友好的特性使它广泛应用在移动终端。现在，　越来越多的ＵＩ都扁平化了，但是扁平并不完全意味着对空间属　性的抛弃，降低视觉效果的信息干扰才是目的，它可以通过平面　设计的语言和交互的隐喻来实现空间的表达，而用户在关注信　息的意识焦点之外能够自然的感受到界面中空间的存在。数字　界面中，承载空间是二维的，对空间的塑造主要是平面设计语　言，但是它对最终的实现空间没有任何限制，可以从二维到任何　更高维度。　１　色彩和形体对空间的塑造　ｕＩ视觉设计中对空间的探求，主要是形态和形态之间在视　觉上形成的框架关系，将这种框架关系设置在二维平面空间（指　高、宽二维）的状态之中。有时也能在二维平面的基础上表现出　带有纵深感的三维立体空间（指高、宽、深三维）的效果。它需　借助明暗、色彩、透视等多种表现手法才能达到，这样的空间效　果使界面中形态的构架关系显得更为复杂和丰富。　通过色彩表达空间感。在拟物化的ｕＩ设计中，可以模拟材　质和纹理来表现空间感，通过对不同的质感、纹理和颜色组合形　成丰富多彩的界面视觉空间。但是扁平化ｕＩ的典型特征就是　不使用材质和纹理，主要通过色彩对比来形成空间的深度。不　同的色彩具有不同的属性，我们可以利用色彩的明度、纯度和色　相对比来获取界面的空间感。一般情况下，暖色、纯色、高明度　色、集中色等具有前进的感觉；而冷色、浊色、低明度色、分散色　等则具有后退的趋向。冷色调给人以后退的心理感受，暖色调　给人以前进的心理感受。在黑背景上，亮色具有前进感，深色具　有后退感；在白背景上，亮色具有后退感，深色具有前进感。在　其他条件相同的情况下，纯度越高的色彩越具有前进感；纯度越　低的色彩越具有后退感。界面设计师可以利用色彩变化表现空　间感的技巧来营造界面中更为真实丰富的空间效果。　通过形体表达空间感。在拟物化ｕＩ设计中，界面框体和图　标造型会大量应用透视来表现空间感和其三维属性。而在扁平　化ｕＩ中则通过形体与形体之间的关系如大小的差别（近大远　小），表现出空间上的距离感；或者以形体的重叠和覆盖使之产　生前后和上下的空间感；放射状的阵列和疏密的利用也能营造　空间和深度；还可以利用面的转折来表现空间感，没有转折的面　在平面构成中只是二维空间的表现，一旦有了面的转折关系，就　使形体具有了高、宽、厚度的三维立体效果，自然就形成了带有　纵深感的三维立体空间关系；此外还可以利用图的关系　人的实　际视觉经验时刻都在体现图的关系，因为人的视觉无法对视域　中的所有对象进行聚焦，只有被人注视的部分在眼中才是清晰　的，而其余部分由于无法准确在视网膜上成像而呈现焦点之外　的模糊状态。　２明暗关系对空间的塑造　除了Ｗｉｎｄｏｗｓ　ＵＩ的绝对平面化，其他的扁平化ｕＩ都不完　全仅仅只有色块和轮廓。ｉＯＳ７和大多数扁平化安卓平台ｕＩ，以　其主界面为例，往往是多个图标（只有高度和宽度）并置于画面　中，与画面平行，图标之间无前后远近之分。如果图标的形象无　厚度，并且包围这些形象的空间没有深度，这样的空间形式就会　和Ｗｉｎｄｏｗｓ　ＵＩ一样是完全的平面性空间（二维平面空间）。但　是在ｉＯＳ７和大多数扁平化安卓平台ｕＩ中，在追求效率的工具　化和情感化之间，采用了偏向于扁平的较为折中的设计，即表现　少量细节处的明暗变化，它不依靠纹理，更多的利用色彩和形体　的细微变化来达到，多表现为投影和渐变。这样的明暗变化去　掉了拟物化ｕＩ中对质感和纹理精雕细刻的极致表现，也有别于　Ｗｉｎｄｏｗｓ　ＵＩ高度抽象化。　在界面设计的空间表现上，为了塑造出生动的空间感、层次　感，明暗表现有着不可替代的重要作用。物体接受了光源，会产　生投影＇投影可在形象的前面或后面，表现出形象的轮廓、体积。　投影的存在使形象更富于真实感，它是空间感的反映。例如谷　歌ｅｈｌ－ｏｌＴｌｅ网上应用商店的Ｇｍａｉｌ图标使用简洁的平面化的图形　风格，利用必要的符号传达含义，在细节处添加的那块投影，让　纵深的空间立刻显现出来。虽然去除投影并不影响其传达含　义，但是这样的图像失去了空问层次。而具备阴影的状态的图　形则更具有视觉“张力”，这种意味着它具有更多的审美趣味。　而时下流行的扁平化长阴影设计，更强化了界面中阴影对空间　的表现力和形式感，就像冬天傍晚时分，物体长长的投影一样，　格外引人注目。这种４５。比一般情况要长很多的投影效果在保　持扁平化的同时更强调了空间的表达。此外，在类似ＭＩＵＩ—Ｖ５　这样的扁平化界面的图标中，除了使用投影，也使用了细微的渐　变表现了形体的明暗关系，加上其圆形倒角的外轮廓和同样有　明度变化的桌面背景，恰当地表达了界面空间的三维属性。　当然，扁平化ｕＩ中阴影和渐变的应用需要遵循少量精炼的　原则，在合适和重要的区域添加才能起到画龙点睛的作用。　３界面动态图形对空间的表达　界面设计要求向用户传递信息过程中通过合理的空间表现　或隐喻来呈现界面的层级结构和相互关系，将空问深度变化为　能帮助传递一定信息的视觉表达元素，其存在意义的核心是“层　次”和“秩序”。界面设计可以有效地利用动态图形，通过有组　织，有目的的设计理念和设计手段，把时间与空间串联，结合现　实中的三维空间及时间，从而扩大界面视觉语言的表现力。　动态过渡对空间的表达。在界面中动态的转场过渡越来越　多的运用，常配合手势使界面对空间深度的隐喻更为深入和自　然，同时也倾向于将信息扁平化。渐隐渐现相对于变形和三维　翻转比较轻量；同样是移动，时间、速度、加速度、距离的不同组　合造成的心理感受也会大不一样。可以理解的是，在能够彰显　品牌特征或者特色的功能细节上，体现空间深度的动画可以用　一些更为个性和突出的效果；而在一些常见的转场过渡和频繁　的操作上，则采用一些基础和轻量的动画更为合理。一个应用　上如果动画的数量、幅度和频率不加以限制，则会类似静态界面　的视觉噪声而带来干扰。有空间表现的过渡动画要流畅和自　然、灵活，其动画幅度需要适度并有细节的表现。常见的例子是　类似几何体通过面转折的方式进行同级界面的转换，或者类似　于ｉＯＳ７中应用图标通过缩放展开应用程序界面。ＭＩＵＩ—Ｖ５主　界面中，图标组文件夹打开的过渡动画也使用这样缩放的形式，　将文件夹里的程序图标放大展开到前景的屏幕空间中或收缩合　拢到文件夹内，在展开后图标阵列并置在界面的前景，之前的界　面则通过降低色彩明度并高斯模糊而退后到远景的空问，通过　模拟景深或视觉焦点的效果来隐喻了空间的深度，呈现的效果　就像悬浮于桌面的磨砂玻璃，这样的动态过程和界面呈现方式　不仅让用户清楚当两个界面转换过程和相互关系，也避免了多　余信息的干扰。　界面中全新的动画，也为界面带来“深度”和“活力”。界面　的动态图形也通过创新表达空间的深度，这种创新不一定是颠　覆性的，或许仅仅是基于以前的一些微小细节（下转第６３页）　

・６１・　◎人文科技◎　不错的选择，它的发光效率是普通荧光灯的１．４倍，显色性是普　通荧光灯的１．２倍，其光源更明亮、真实，而且能自然地展现色　彩，比普通光源更有利于儿童的学习，并且能保护视力。　书房是家庭成员学习、工作的场所，是用眼最集中的地方，　灯光设计要求明亮柔和，应安静有充足的亮度强调照明的部位，　比如在书桌表面上，可以采用长的吊灯来进行重点的强调，为了　有效防止产生眩光，我们可以用台灯并加上灯罩，然后仍然用吸　顶灯来提升整体的照度。钨丝卤素桌灯因为其所投射的光线非　常接近日光，所以是最佳的阅读光源。在满足使用要求的同时，　还可形成室内丰富的灯光层次。在书橱部位为了更方便地找　书，可以安装小型的射灯，让光线和颜色更加均匀柔和。避免强　烈的光照对比，给人们创造舒适的学习环境。　厨房空间较小并且主要是为了满足烹饪操作，灯光设计要　求明亮无阴影。主要照明可以选择顶灯，比如吸顶灯或厨房专　用灯。操作台上方安装橱柜灯。厨房灯光对食物的外观也很重　要。厨房光源一般选择有较高的显色性，以保持水果、蔬菜的原　色，以荧光灯为佳。厨房不宜有过多的灯光设计，以免影响视　觉，给烹调带来不便。　餐厅是家人一起吃饭的空间，餐厅的灯光运用应具有热烈、　温馨的感觉，以突出家庭的温暖气息，一般选择吊灯作为餐厅的　主要光源，要结合餐厅的形状、家具的款式及室内的风格、色调　等进行吊灯的选择，并决定吊灯单独或成组利用。餐厅灯光设　计不仅要营造氛围同时还要能够表现美味佳肴的本身颜色。我　们一般选用显色性高的光源。如三基色灯管，采用红、绿、蓝为　基调的“光学调色板”，能为餐厅带来最接近阳光的色彩。　卫生问灯光设计可分主要照明、沐浴区照明及镜前照明三　部分。最重要的灯光就是洗脸池的灯光，强度要够。如果空间　足够的话，最好在洗脸池上方的镜子两侧都装壁灯，空间不够的　话，也要在镜子的顶部尽量拉长灯光，不要用一个射灯打发，那　样就像正午阳光一样，把你照出个骷髅头出来，老了十岁，也可　在镜子的背面置灯，利用反射光提供镜前照明。镜前灯作为主　要照明，在沐浴区安装浴霸作为局部照明，若面积相对较大，可　以选择卫生间专用吸顶灯或防水筒灯作为主灯，再单独配置镜　前灯及浴霸。　４结语　家居室内应是一个温馨而美好的地方，家居室内各个空间　的灯光用到恰到好处会给我们的家居室内锦上添花，一个沁人　心脾的家居空间需要人的精心呵护与用心营造。家居灯光与人　和人的活动紧密相连，它不仅仅是给人们提供光明，也影响着人　们的生理和心理。家居室内灯光能营造出各个不同空间自己独　特的气氛，每个单独的空间得到充分灯光渲染的同时，还要让整　体空间感觉和谐优美。家居室内灯光的运用不仅会给家居室内　环境的气氛带来问接或者直接的影响，还会给人们心理带来影　响，光照本身也是一种特殊的装饰，这种装饰效果是没有其他物　体可以代替得了的，创造出较高质量的家居灯光，才能积极的表　达空间和营造渲染空间，满足人们的需求，继续推动行业的　发展。　

参考文献：　［１］斐俊超．灯具与环境照明设计［Ｍ］．西安交通大学出版社，　２００７．　［２］谢浩．现代家居照明设计［Ｍ］．机械工业出版社，２００４．　［３］来增祥，陆震纬．室内设计原理［Ｍ］．中国建筑工业出版社，　２ｏｏ１．　［４］张景然，孙少江．灯光照明设计资料集［Ｍ］．北京：中国大百　科全书出版社，２０００．　［５］田鲁．居室光环境，光环境设计［Ｍ］．长沙湖南大学出版社，　２ｏ０６．　［６］何方文，朱斌．建筑装饰照明设计［Ｍ］．广东科技出版社，　２０ｏ１．　［７］陈一才．装饰与艺术照明设计安装手册［Ｍ］．中国建筑工业　出版社，１９９１．