扁平化设计自2011年成为一种流行的界面设计风格。扁平化设计的核心意义是去除冗余和繁杂的装饰效果,具体表现为去掉了多余的阴影、纹理、渐变等3D效果,从而凸显核心信息本身。扁平化设计在界面简洁、快速高效,更迭快,适应性好,开发成本低等方面表现出比以往风格更多的优势。然而,扁平化设计的长期和过度使用,尤其是全盘弃用任何一种拟物效果的过度扁平化设计带来了一些可用性问题。交互元素定义了人机界面交互的行为方式。过度扁平化的网站交互元素在界面中不突出,可发现性差;元素的功能逻辑让人困惑,易产生功能迷航;所有元素均扁平,信息缺乏主次,界面缺乏深度。这些可用性问题导致用户不得不借助解读上下文语境线索、鼠标悬停和操作反馈等行为寻找和辨别交互元素,理解和操作界面,致使用户交互成本的提升。为了降低这种额外的交互成本,在界面中凸显交互元素,提高用户认知和操作的效率,构建信息层级和界面深度,本研究先将交互成本细分为感知成本、认知成本和操作成本,依次排查得知交互成本提升的主要原因是交互元素被去除了过多的视觉表现特征而缺乏清晰的可点击线索,感知性差;隐喻不足而功能可见性被弱化,认知负荷高;感知和认知障碍,浪费点击且出错率高。筛选出网页中最基础的过度扁平化交互元素:按钮、图标和文字链接。尝试添加微妙的视觉效果,如阴影、渐变、新形态设计等方式,丰富交互元素的视觉表现,从而赋予其明确的可点击信号并强化隐喻。借助眼动测试的量化研究,收集眼动数据验证优化的交互元素设计方案在视觉搜索和识别效率、准确度方面比过度的扁平化设计有显著的优势。眼动实验数据结合试后主观测评的结果显示,为过度扁平化的交互元素添加微妙的视觉效果可以提高用户视觉寻找和认知的效率,降低交互成本,优化界面的可用性。其中,按钮的阴影和圆形设计效果,文本链接的颜色、下划线和颜色加下划线效果均优势显著,按钮的渐变和图标的优化方案暂没有表现出明显的优越性。本研究为后扁平化时代的发展提供了一些可靠的设计思路。