UI信息架构扁平化设计研究

吴海棠

（东莞职业技术学院，广东 东莞 523808）

0 引 言

随着移动互联网和信息技术的蓬勃发展，用户界面（User Interface，UI）从主要以电脑为载体延伸到各类移动、智能设备。承载界面的屏幕越来越小，导致传统以苹果公司为首的拟物化（skeuomorphism）UI设计方式开始出现各种问题。比如小屏幕界面无法清晰呈现拟物化设计的细节；在不同屏幕尺寸下，拟物化设计很难解决兼容性问题，甚至拟物设计会增加系统计算的复杂度，让加载更慢等。自2012年微软推出Windows 8，到2013苹果公司iOS7问世，再到2014年谷歌发布的新的设计语言——Material Design UI，UI设计开始摒弃拟物化设计，转向扁平化设计（Flat Design）风格。扁平化设计主张去除元素中的阴影、透视、纹理、质感，用简单的线条、色块塑造界面，给人一种轻盈、时尚的美学体验。由于元素简单，很好地解决了跨平台界面的适配问题、元素在移动设备屏幕中的显示问题，经过近10年的发展，设计形式主要还停留在视觉元素的扁平化处理上，从内在的结构设计上通过扁平化设计解决用户体验问题的研究较少，本文提出从信息架构扁平化层面探索UI设计形式，是一种创新性的扁平化设计方法，为扁平化开拓了一个新的窗口，将扁平化设计理念从视觉元素转移到整个信息架构上，让扁平化设计摆脱纯粹的视觉因素束缚，更关注UI设计的交互和用户体验本身。

1 UI扁平化设计的现状

扁平化设计在视觉上给人一种全新的视觉体验，迎合现代人的审美趣味，这种化繁为简的设计形式满足了移动设备对界面的需求，是成本较低的多平台解决方案，这点在引言中已经指出。但是，扁平化设计也存在一些弊端。如过度去除元素细节和装饰，让界面设计过于单调，缺乏层次感；简单的设计元素影响用户对功能的识别度，减低用户体验。IOS系统最初的拟物化界面设计（skeuomorphism）直观地指引用户使用触摸屏移动设备，拟物化的按钮可以直观地指明该按钮的功能和用处，而扁平的设计形式往往需要更多的学习时间成本才能了解界面的使用方式。这也是为什么锤子手机一反流行趋势，坚持使用拟物化设计的原因。史蒂夫·乔布斯说过一句名言：“设计不只是看上去的样子和感觉，设计的关键在于它如何发挥作用。”设计的本质应该关注的是产品功能，而不仅仅考虑视觉表现。扁平化兴起的主要原因最开始也不是视觉层面的，而是形式符合移动设备适配要求、下载速度需求、显示需求等。在UI设计中，设计形式服务于产品的功能是首要原则。如何用简单的界面和交互展示出产品的功能，本文将从信息架构的层面进行分析和研究。

2 信息架构扁平化的设计方法

信息架构指APP或网站中全部信息的组成结构，决定了一个产品的布局和用户对产品的最初印象。信息架构扁平化设计是界面设计过程中减少信息层级的理念，是一种交互体验的扁平化，是产品系列的逻辑和思路。如果将单个页面承载的内容看成页面的广度（breadth），页面链接的层数成为页面的深度（depth），传统PC端的界面可以兼顾广度和深度，而移动端的界面由于屏幕限制，界面的广度大大缩减，如果通过增加深度来弥补广度的信息，用户则需要跳转多次才能找到对应的信息，而每一次跳转，都会损失用户的流量，而且手机客户端没有“面包屑”功能，用户在跳转中容易迷失。如何让用户用最少的跳转、甚至不用跳转就浏览到内容，是信息架构扁平化思考的方向，这种信息架构扁平化处理实际上是减少界面中的信息层级，让用户以最快速度找到信息的入口，从而提升用户体验。

2.1 磁贴式、卡片式信息架构方式

扁平化的信息架构思路是减少页面跳转，快速锁定信息内容。Window 8的磁贴式和Material Design推出的卡片式设计，将信息平铺到各个模块中，同个界面中可以了解不同模块的信息变化，缩短用户访问路径。Window 8应用程序以磁贴（Tile）的形式呈现在页面上，每个磁贴可以实时显示应用程序的最新更新。例如天气的程序以磁贴的形式呈现出来，用户通过界面上的磁贴可以获取天气的最新信息，不需要启动程序或跳转页面。在APP设计中，设计师常常将二级页面的入口以磁贴的形式全部集合在一起，用户可以在同一个界面中快速浏览多个磁贴中的动态信息变化，实现多重数据查看，提升用户数据获取速度。Material Design推出的卡片化设计，利用一个个扁平的矩形框承载图像、按钮、文本、链接等，卡片视图可以展开或折叠信息，并以多窗口的形式呈现，用户可以通过上下或左右滑动屏幕切换不同的卡片，查看动态内容。不管是磁贴式设计方式，还是卡片式设计方法，本质上都是通过压扁信息层级、减少页面的跳转次数来实现扁平化的设计理念。

2.2 快捷窗口的信息架构方式

设置快捷窗口是让页面快速跳转到内容页面。假设一个信息需要通过A-B-C的流程才能到达，增设A-C的快捷窗口，可以让信息直接通过A到达C，或者在A页面就可以得知C页面的重要信息，从而压扁信息深度。例如，网上预约挂号的流程是：选择科室（A）—选择医院（B）—选择专家（C），如果在A界面中显示热门的医院专科主任的信息，用户点击之后便可以直接跳转到专家页面（C），即从A跳转到C，减少了页面的一次跳转，压缩了信息结构。iOS系统常常通过滑动屏幕弹出快捷窗口。当用户从屏幕顶端向下滑动手指，可以直接调出iOS系统中的通知菜单，在同一个界面中了解每一个程序的通知，而不需要运行程序进行信息浏览。假设用户需要更改屏幕的亮度和设置WiFi链接，常规的操作流程是先打开“设置”程序，找到“显示与亮度”按钮，进行亮度设置，再返回设置界面，找到“WiFi”进行设置。但是，实际上，iOS系统从屏幕底端向上滑动便可调出控制中心的快捷窗口，实现同时调整屏幕亮度、音量、锁屏模式、网络模式等，大大简化了页面的跳转层级。有效利用快捷窗口，可以大大减少页面的跳转次数，实现界面内部结构的扁平化处理，优化信息结构，最终到达提升用户体验的目的。

3 信息架构扁平化在医疗信息类UI产品中的适用性

移动医疗类UI产品针对的用户是病人和中老年人，这类群体的身心素质较差，界面设计上应该以减轻用户记忆负担和学习成本为原则，扁平化的信息架构形式是医疗类UI产品的首选。首先，移动医疗类的界面信息要精简，过多的信息量会给病人带来心理压力，不利于用户体验。界面信息的精简，实际上就是降低界面的广度信息，一个页面中只保留最重要的信息，删减次要信息，提升用户筛选信息的速度。其次，由于用户群体的特殊性，移动医疗类界面要尽量减少信息跳转的次数，最好控制在3次以下，以免造成跳转紊乱，增加用户心理焦虑情绪。总之，移动医疗类产品UI设计应该秉承页面信息简单化、信息层级扁平化的理念，用最简单的操作流程、用最少的屏幕切换和最简单的工具帮助用户获取信息。最初大多数的UI设计形式主要以拟物化为标准，在电脑操作平台Windows系统中，大量的图标都是以实物的模型进行设计。例如回收站就设计为一个垃圾桶的样式，通过这样的方法可以帮助用户在第一时间了解该软件的功能，有效降低学习成本。此外，以拟物化的设计整体造型、细节质感都符合人们对审美的追求。

随着现代移动互联网的快速发展，移动UI迅速普及与推广，如果在移动界面中出现大量的拟物化图标，则很难对细节进行完美呈现，尤其是手机、平板甚至智能手表等设备的界面比较小，如果图标太小则很难准确地呈现细节，为此通过去除多余的线条，能够让整个图标更加精简，符合现代人对极简主义的追求。在进行扁平化处理的过程中，必须保证图标的基本元素，只保留线条和色块，而对渐变阴影透视等相关的设计元素，应该完全摒弃，这样才能确保图标回归最初的功能。伴随着UI设计的快速发展，传统的拟物化已经无法适应现阶段的发展趋势，但是过度扁平化的视觉设计会存在画面单调的问题，所以许多设计师会在扁平化的基础上，增加微质感的设计元素，增强整个图标的显示效果。直接通过扁平的圆形按钮，体现出设计的细节，而通过对圆形的投影，将图形与背景相区分，既符合扁平化的视觉设计理念，又能够增强图标设计的整体层次感，确保图标设计更加完美。由于跳转页面的次数增加，很容易引起用户的反感，为此通过并列的显示方式，能够让整个设计平面更加简单，避免出现操作过于烦琐的问题，例如在Windows 8系统中，许多天气邮件等应用软件必须点击进入才能对信息内容进行分析。在现代信息互联网时代，想要在最短的时间内获得自己所需要的信息，就必须尽可能减少复杂的交互界面，保证信息内容更加直观，为此必须增加图标信息分类的设计，通过分类不仅能够降低产品使用的简便性，而且也能够让用户在最短的时间内掌握同类产品的设计思路。对色彩进行扁平化处理，也是UI设计的重要思路，通过选择大胆的颜色让整个图标更加饱满。

4 结 语

UI信息架构扁平化设计的最大特点是优化信息层级，减少页面跳转次数，这样设计的形式更重视UI设计的用户体验和交互的合理性。扁平化设计不再只限制于表面形式，也扁平风格设计提供了新的理念和思路。相对于视觉元素扁平化设计思维，信息架构扁平化思维不仅更能合理进行页面布局，而且还能通过与各个扁平和视觉要素形成新的、统一的艺术风格与设计形式。