HomeStylesTemplates
←Back to Docs
The Distill Review · 设计科学评论
ArticlesArchiveSubmitISSN 2026-0705
cs.HCstat.AP设计科学Peer-Reviewed

界面风格的可测量性:从狩野曲线到情绪圆环

三个经典测量工具如何把「好看」翻译成坐标、曲线与折线。

Authors

Lin Qiao1, A. N. Reader2

Affiliations

1StyleKit Lab 2Open Web Inst.

Published

July 5, 2026

DOI

10.23915/sk.00042

摘要 · Abstract

设计讨论常被「感觉」一词终结。本文以三个经过时间检验的测量工具为线索——狩野模型的二维品质曲线[3]、Russell 的情感环形模型[2]与 Osgood 的语义差异法[1]——演示如何把界面风格的主观体验放进可讨论、可复现的坐标系。 全部图表由本文自绘,数据出处见参考文献与图注。

Keywords狩野模型情感环形语义差异法设计测量

目录 · Contents

  1. 1引言:把主观感受变成可测量对象§
  2. 2需求的三种品质:狩野模型§
  3. 3情绪的几何:Russell 情感环形模型§
  4. 4给风格画像:语义差异法§
  5. A附录:本刊视觉规范§
  6. B附录:审稿意见表§

1引言:把主观感受变成可测量对象Introduction

1957 年,Osgood 与同事出版《The Measurement of Meaning》[1], 提出用成对的双极形容词与七点量表测量概念的内涵意义。此后跨越二十三种文化的重复研究里, 因子分析一再浮现出同样的三大因子:评价(Evaluation)、力量(Potency)与活动性(Activity)。 主观感受第一次表现出跨文化的稳定结构。

注 1. EPA 三因子在 Atlas of Affective Meanings 收录的跨文化样本中反复出现;Heise(2014)再次确认 E 与 P 高度一致。

1980 年,Russell 用四种独立方法收敛出同一个结论:情绪不是一张离散标签清单, 而是效价(valence)与唤醒度(arousal)张成的二维平面上的一个环[2]。 1984 年,狩野纪昭把「满意度」拆成两个正交维度,画出了后来以他命名的三条品质曲线[3]。

注 2. Russell 同时使用 circular ordering、多维标度(MDS)与主成分分析(PCA),四法收敛才敢下结论。

这三个工具有一个共同点:它们都不否认主观性,而是给主观性一套坐标。对设计师而言, 这意味着「这个风格太吵了」可以被改写成「它落在高唤醒、负效价象限」——一个可以被复核、 被比较、被推翻的陈述。以下三节各演示一个工具,图表均可交互。

2需求的三种品质:狩野模型The Kano Model

狩野模型的坐标系里,横轴是功能的具备程度,纵轴是用户满意度。当然品质(Must-be)是一条凹线: 做得再好也只能到达中性,缺失则坠入深度不满;一元品质(One-dimensional)是一条 45 度直线, 投入与满意成正比;魅力品质(Attractive)是一条凸线——没有它无人抱怨,有了它便是惊喜。

功能充分功能缺失满意不满时间衰变:A 逐渐退化为 O,再退化为 M(电视遥控器:1983 A,1989 O,1998 M。Kano, 2001)AOM
魅力品质 Attractive(凸线)一元品质 One-dimensional(直线)当然品质 Must-be(凹线)
图 1:狩野模型的三类品质曲线与 Better-Worse 系数视图。横轴为功能具备程度,纵轴为满意度; 分类会随时间从 Attractive 衰变为 Must-be(O 到 M 平均 5-7 年)。数据与曲线形态依据 Kano et al.(1984)与 Berger et al.(1993)。

3情绪的几何:Russell 情感环形模型Circumplex of Affect

Russell 让被试对 28 个情绪形容词做环形排序,八个锚点词以 45 度的等间隔落在圆环上[2]。这个平面对界面设计的意义是直接的:明度主导愉悦感,饱和度主导唤醒度[5];网页视觉复杂度与唤醒度的相关高达 r = .74,与效价的相关是 r = -.61[6]。换句话说,风格的每一个色彩决策都在这个圆环上移动你的用户。

注 3. Valdez 与 Mehrabian(1994)的回归:Pleasure = .69B + .22S;Arousal = -.31B + .60S。B 为明度,S 为饱和度。
愉悦 0°兴奋 45°唤醒 90°苦恼 135°不悦 180°沮丧 225°困倦 270°放松 315°

兴奋 Excitement · 45°

高唤醒、正效价。Tsai 的研究表明欧美文化更偏好这类理想情绪。

点击锚点查看坐标

图 2:情感环形模型的八个锚点情绪词。横轴为效价(valence),纵轴为唤醒度(arousal), 锚点角度取自 Russell(1980):愉悦 0°、兴奋 45°、唤醒 90°、苦恼 135°、 不悦 180°、沮丧 225°、困倦 270°、放松 315°。

4给风格画像:语义差异法Semantic Differential

语义差异法的经典呈现是 profile 折线:把多个概念在同一组词对上的得分叠加对比[1]。 下图用八组双极词对(每因子至少两对)为两种界面风格画像——折线之间的水平距离, 就是两种设计语言在语义空间里的距离。感性工学(Kansei Engineering)正是沿这条路 把语义得分一路映射到具体设计要素。

1234567简洁复杂平静刺激理性感性轻盈厚重传统新潮柔和强烈精致粗犷克制奔放学术科普风新野兽派
图 3:两种界面风格在八组双极词对上的语义差异画像(七点量表,作者自评示例,n = 1,仅作方法演示)。 方法与量表结构依据 Osgood et al.(1957);分析前需对反向词对重编码。

“These terms fall in a circle: pleasure, excitement, arousal, distress, displeasure, depression, sleepiness, and relaxation.”

Russell, J. A.(1980)Journal of Personality and Social Psychology, 39(6)

§

A.1本刊视觉规范:色板Palette

六个颜色,各司其职。色彩在本刊只服务于信息:蓝指向可点击与被引用之物,橙只属于数据。

纸面

#FFFFFF

页面底色,一切论证的画布

墨灰

#1F2933

正文与标题,booktabs 表格横线

学术蓝

#2A7AE2

仅用于链接、编号引用与关键强调

图表橙

#E4572E

仅用于图表中的数据强调

注释灰

#6B7280

边注、图注、元信息

浅灰面

#F3F4F6

页脚、批注框与代码块的次级表面

A.2字体样张Type Specimen

标题一 · Serif Semibold

学术排版的网页化

标题二 · Serif Semibold

窄列、边注与突破版心的图

正文 · Serif 17/1.75,带编号引用

正文列宽锁定约 42rem,这是眼睛完成一次换行扫视的舒适极限[2]。

边注 · Sans 13/1.6 注释灰

边注承载旁白与出处,大屏悬浮右缘,小屏内联折叠。

元信息 · Mono

doi:10.23915/sk.00042 · arXiv:2607.00042

A.3操作组件Actions

主按钮用墨灰而非学术蓝——蓝色保留给链接与引用,避免语义混淆。圆角不超过 rounded-md,hover 只改变颜色。

A.4卡片Cards

Abstract

Why Momentum Really Works

A closed-form view of momentum[4] and its damping behavior across the eigenspace of the loss surface.

Distill, 2017 · doi:10.23915/distill.00006

Finding

r = .74

网页视觉复杂度与唤醒度的相关系数

Tuch et al.(2009),n = 36 网站截图

Margin Note

带批注的卡片继承边注语言:浅灰面、蓝色左缘、小号注释灰文字。用于编辑旁白与阅读提示,不用于正文论证。

Editorial sidenote card

A.5批注框Annotations

编者注 · Editorial Note

图 2 支持点击交互;打印版读者请参考锚点角度表。

复现确认 · Replication Verified

环形结构已在四种语言样本中复现(Russell, 1989)。

方法学警示 · Methodological Caution

Kano 问卷样本量 n < 200 时分类不可靠;措辞变化会改变分类结果(Chapman & Callegaro, 2022; Song, 2016)。

勘误 · Erratum

初版图 3 中「柔和-强烈」词对方向标反,本版已重编码修正。

B审稿意见表Review Form

当前推荐:小修后录用(Minor Revision)

双盲评审 · 意见将匿名转交作者

C设计规则摘要Design Rules

Do

  • +serif 正文窄列 max-w-[42rem],行高 1.75
  • +边注大屏悬浮右缘,小屏内联折叠
  • +编号引用上标 [n],页脚参考文献对应
  • +figure 突破版心 max-w-4xl,图注以「图 N:」开头
  • +hairline 分割 border-[#E5E7EB],不超过 1px
  • +学术蓝仅用于链接与关键强调

Don't

  • ×渐变(bg-gradient-*)
  • ×重阴影(shadow-lg 及以上)
  • ×大圆角(rounded-md 以上)
  • ×正文全宽铺满
  • ×多彩装饰与大面积色块
  • ×sans-serif 正文(sans 只用于 UI 标签)

参考文献 · References

  1. [1]Osgood, C. E., Suci, G. J., & Tannenbaum, P. H. (1957). The Measurement of Meaning. University of Illinois Press.
  2. [2]Russell, J. A. (1980). A circumplex model of affect. Journal of Personality and Social Psychology, 39(6), 1161-1178.
  3. [3]Kano, N., Seraku, N., Takahashi, F., & Tsuji, S. (1984). Attractive quality and must-be quality. Quality, 14(2), 147-156.
  4. [4]Berger, C., et al. (1993). Kano's methods for understanding customer-defined quality. Center for Quality Management Journal, 2(4).
  5. [5]Valdez, P., & Mehrabian, A. (1994). Effects of color on emotions. Journal of Experimental Psychology: General, 123(4), 394-409.
  6. [6]Tuch, A. N., et al. (2009). Visual complexity of websites: Effects on users' experience. International Journal of Human-Computer Studies, 67(9), 703-715.

引用本文 · Cite this article

@article{qiao2026measurable,
  title  = {The Measurability of Interface Styles},
  author = {Qiao, Lin and Reader, A. N.},
  journal= {The Distill Review},
  year   = {2026},
  doi    = {10.23915/sk.00042}
}

The Distill Review · 设计科学评论 · ISSN 2026-0705 · CC BY 4.0

← Back to Distill Style Docs