B2.02.2Flat design设计研究

扁平化设计削弱感知线索

别名: 扁平化 · 弱化操作线索 · 视觉可供性

概念解释

扁平化设计以简化形状、减少阴影、边框和材质暗示来获得轻量、统一的视觉风格。问题不在于平面本身,而在于当按钮、链接、输入区域与普通文本或装饰元素过于相似时,原先帮助用户区分“能操作”和“仅供阅读”的感知线索会被削弱。

机制

人们会用轮廓、对比、留白、位置、文字和状态变化来推断界面元素的角色。立体外观曾是其中一种线索,但不是唯一线索。扁平处理去除多种冗余差异后,用户须更多依靠平台经验或试探;当页面的信息层级本来就复杂时,这会提高辨识成本,并使误触和遗漏同时增加。

怎么研究

比较不同线索强度的版本,测量用户对可操作对象的发现率、首次行动时间、误把静态内容当控件的比例,以及任务完成情况。让参与者标出他们认为可点击、可输入或可展开的区域,可直接揭示其心理模型。应分别覆盖初次使用者和熟练用户,避免后者的约定知识掩盖问题。

边界

强烈的立体拟物不必然更清楚,也可能造成视觉噪声或虚假的可操作期待。视觉样式只是线索系统的一部分:明确标签、邻近关系、交互后反馈和一致行为都可补足。密集的专业工具与极简的单任务页面,对线索冗余的需求也不同。

怎么落地

  • 为主要交互对象保留至少两类可区分线索,例如文字标签加对比,或容器形态加悬停与按下状态。
  • 不要仅用颜色表达可点击或选中;在触屏、键盘和读屏场景中都提供可识别的状态。
  • 用真实任务测试“哪些东西能点”的判断,而不是只在视觉评审中评价风格一致性。

延伸

  • 同组B2.02.1 用户只能利用被察觉到的可供性 · B2.02.3 感知线索缺失时用户靠试探发现功能
  • 相邻B2.03 意符 · B2.04 映射
  • 站内检索flat design · visual cue · discoverability

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/B2.02.2