图形学与人机交互2019researchgate.net
扁平化设计与传统设计的对比实验研究 (2015)
Flat Design vs. Traditional Design: Comparative Experimental Study (2015)
进阶 · 约 30 分钟读完前置知识：可用性测试基础、实验设计与统计分析、界面设计基础
导读
这篇 2015 年的论文通过实验比较扁平化设计与传统（拟物、有立体感）设计在界面元素识别上的表现：让被试在屏幕上寻找图标和控件，并测量反应时间、正确率和主观感受。根据评论转述的结果，传统设计在识别速度和把握度上优于扁平化设计。不过该实验样本很小（约 20 名俄罗斯大学生，几乎全为男性），且图标尺寸、留白等变量可能混入影响，因此结论的推广余地有限。
HN 关注点：HN 读者长期争论扁平化设计是否牺牲了控件的可识别性与可用性，这篇论文的负面结论及其方法可靠性成了讨论焦点。
HN 评论精选
这几条评论里：质疑 1 补充 2 亲历 1
质疑差异可能源于图标尺寸与留白等混杂变量，且样本仅 20 名同质学生、年代偏早，结论不宜过度推广。
一种能解释这些结果、但比作者结论无趣得多的可能性是：更大的元素配更小的边距，比更小的图标配更大的边距更好。图标结果的差异尤其大且更有说服力，但看他们的示例刺激材料，扁平图标明显更简单（符合预期），周围留白也更多（或许同样是扁平设计的预期），可这也意味着要在屏幕上放同样多的图标，图标就得做得更小。我觉得至少值得考虑这是否能解释大部分差异。另一个局限是样本量小、不够多样，而且研究已有些年头：只有 20 名学生，几乎全是男性、俄罗斯大学生年龄——样本不大也不多样；实验在 2014 年进行，如今人们对扁平设计的预期又多了几年。结果看起来还不错，但仅凭这一项研究就下确凿结论，我觉得为时尚早。
emn13查看英文原文
One possibly explanation for these results which would be less interesting that their suggested conclusion: bigger items with smaller margins are better than smaller icons with larger margins. The difference on the icon results were particularly large and convincing, and if you look at their example icon stimuli, clearly the flat icons are simpler (as expected) and presented with more margins (perhaps also as expected in flat design), but that also means to get the same number of icons on screen, the icons were smaller. I think it's at least worth considering whether that might explain a large part of the difference. Another limitation is that tiny and non-diverse sample size, and the fact that it's a few years old. They had just 20 students, almost all male, Russian university-student-aged - it's just not a huge or diverse sample; and the experiment was run in 2014; people have a few more years of flat design expectations under their belts now. Looks pretty decent, those results, but I still think it's a little early to draw solid conclusions based on this alone.
补充NN/g 有方法更贴近真实任务的同类研究，结论同样不利于扁平化设计，并指出 Material Design 部分回归了伪 3D 的可识别性。
Nielsen Norman Group 也做过研究，结果同样不利于扁平化设计：https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/（这可能不是他们关于该话题的唯一研究）。值得注意的是，NNG 的方法更贴近现实：测试浏览网站时的真实用户任务。给不熟悉的人补充一下：Nielsen 就是 Jakob Nielsen，可用性领域的权威，从事并写作这方面二十多年，是设计流程中可用性测试的坚定倡导者。（顺带说，他的《Designing Web Usability: The Practice of Simplicity》很好地阐述了网站该怎么运作——我敢打赌它今天依然和 2000 年代中期对我一样有价值，因为人的运作方式不会变。）他们还指出，扁平化设计已经朝旧式伪 3D 界面的即时可识别性回退了几步，尤其是 Material Design：https://www.nngroup.com/articles/flat-design/ 但回退的步子不大。
aasasd查看英文原文
Nielsen Norman Group have also ran a study, with results similarly unfavorable for flat design: https://www.nngroup.com/articles/flat-ui-less-attention-cause-uncertainty/ (Possibly it's not the only study of theirs on the topic.) Notably, NNG uses a more 'real world' methodology, testing realistic user tasks in browsing websites. For the unfamiliar, 'Nielsen' is Jakob Nielsen, an authority on usability, working and writing on it for two decades now, and he's a big advocate of usability testing in design process. (BTW, “Designing Web Usability: The Practice of Simplicity” of his is an excellent writeup on how websites should function—I'd bet it's as valuable today as it was in mid-2000s for me, because the functioning of humans doesn't change.) They also noted that flat design has made some steps back to the immediate recognition of the olde pseudo-3d interfaces, notably with 'Material design': https://www.nngroup.com/articles/flat-design/ But not many steps.
亲历立体、标准化的控件符合人的直觉识别（连幼儿都能认出按钮），扁平色块则缺乏可识别性。
说个个人观察：我花了不少时间看幼儿如何与周围世界互动。按我的经验，一个东西看起来像按钮，幼儿就能认出它是按钮，还会想去按（甚至会说“按钮”！）。看起来像开关，幼儿就想去拨。触屏上如果看着像按钮，幼儿可能仍当它是按钮。但如果它只是一个扁平色块，和这位设计师做的其他扁平色块一模一样（却跟别的设计师的扁平色块毫不相似！），幼儿就不会把它认作按钮。真是令人震惊。显然大多数电脑用户不是幼儿，但我觉得这里面有教训。我真的很怀念 Windows 3.1/95/98 那会儿，控件大体是标准化的，你能可靠地分辨哪些是按钮、哪些是单选按钮、哪些是确定按钮。
amluto查看英文原文
As a personal anecdote, I've spent quite a bit of time watching toddlers interact with the world. In my experience, if it looks like a button, a toddler can tell it's a button and will be interested in pushing it. (And might even say "button"!) If it looks like a switch, a toddler will be interested in switching it. If it looks like a button on a touch screen, a toddler might still think it's a button. If it's a flat blob that looks like every other flat blob designed by that designer (but looks nothing like a flat blob by other designers!), toddlers don't recognize it as a button. Shocker, I know. Obviously, the majority of computer users aren't toddlers, but I think there's a lesson here. I really miss the old Windows 3.1 / 95 / 98 days when controls were more or less standardized and you could reliably tell which were buttons, which were radio buttons, which were okay buttons, etc.
补充扁平化如同现代主义/粗野主义建筑，为纯粹形式牺牲了人体工学与人的舒适。
有意思的是，UI 设计跟着建筑学走进了同一条黑巷——两者都发起运动，靠清除“多余装饰”来暴露事物的内在本质，结果都在追求非人化理想的过程中碾过了人体工学与人的舒适。今天我看网页（以及 Electron 应用）时看到的是这些：[现代建筑][粗野主义建筑] 而我更希望看到的是：[维多利亚建筑]。
DenisM查看英文原文
It's remarkable how UI design followed architecture (as in: buildings) down the dark alley - both went on a crusade to expose inner substance of things by cleansing it from "redundant ornamentation", both ended up steamrolling over the ergonomics, the human comfort, in the fight for the inhuman ideal. This is what I see when I look at the web (+Electron) today: https://www.google.com/search?q=modern+architecture&tbm=isch https://www.google.com/search?q=brutalist+architecture&tbm=isch This is what I would prefer to see: https://www.google.com/search?q=victorian+architecture&tbm=isch
相关资源
从这篇论文所有 HN 讨论帖的全部评论里整理出来的链接。
历次讨论
- 2019Hacker News 讨论帖207 分 · 137 评
同领域还值得读
像素不是小方块 (1995)
A Pixel Is Not A Little Square (1995)
这篇 1995 年的经典备忘录讨论数字图像中像素应如何理解：像素不是有面积的小方块，而是对连续图像的采样点，重建连续图像需要合适的重建滤波器。
图形学与人机交互2014 · 372 分 · 241 评进阶 · 约 20 分钟编辑精选自动化的讽刺（Ironies of Automation，1983）
Ironies of Automation (1983)
这篇 1983 年的经典论文讨论自动化（尤其过程控制）中的悖论：自动化越先进，人类操作员在异常处理和人工接管中的作用可能越关键；自动化常把常规任务拿走，留下监控、诊断和罕见故障处…
图形学与人机交互2019 · 147 分 · 38 评入门 · 约 30 分钟编辑精选GDPR 同意框中的暗黑模式
Dark patterns in GDPR consent boxes
研究 GDPR 同意框中的暗黑模式，即网站如何通过界面设计引导用户同意 Cookie 与追踪。
图形学与人机交互2020 · 328 分 · 122 评 · 引用 6进阶 · 约 30 分钟用稀疏条带在 CPU 上实现高性能 2D 图形渲染（硕士论文）
High-performance 2D graphics rendering on the CPU using sparse strips
这篇硕士论文研究如何在 CPU 上实现高性能的 2D 图形渲染，核心思路是用“稀疏条带（sparse strips）”结构来表示和光栅化路径，以降低内存占用并提升渲染速度。
图形学与人机交互2025 · 281 分 · 35 评专业 · 约 90 分钟GDPR 后的暗模式：同意弹窗及其影响
Dark patterns after the GDPR: consent pop-ups and their influence
研究 GDPR 生效后网站 consent pop-ups 中的 dark patterns，以及这些弹窗如何影响用户的同意选择。
图形学与人机交互2021 · 251 分 · 228 评进阶 · 约 60 分钟