目录

​​第一层：战略层——为什么要做这个系统？（盖房子的目标）​​

​​第二层：范围层——系统里要提供哪些功能？（房子里放什么）​​

​​第三层：结构层——功能之间如何连接？（房子的布局）​​

​​第四层：框架层——界面具体长什么样？（房间的家具摆设）​​

​​第五层：表现层——看起来舒服吗？（房子的装修风格）​​

​​总结：五层模型就像盖房子，缺一不可​​

---

你有没有想过，为什么有些App用起来特别顺手——点几下就能找到想买的东西，界面清爽不刺眼，操作流程像“下楼梯”一样自然？而有些系统却让人烦躁——找功能像“捉迷藏”，页面花里胡哨看不清重点，操作步骤多到想放弃？这背后的秘密，就藏在信息系统人机交互设计的​​五层模型​​里。

这个模型由用户体验专家杰西·詹姆斯·加勒特提出，它把设计过程拆解成五个层层递进的“楼层”，从最底层的“为什么做”到最顶层的“看起来如何”，就像盖一栋房子，每一层都决定了最终的用户体验。接下来，我们结合日常生活中的例子，带你轻松理解这五层模型。

​​第一层：战略层——为什么要做这个系统？（盖房子的目标）​​

这是整个设计的“地基”，回答两个核心问题：

• ​​用户想要什么？​​（他们的真实需求是什么？）
• ​​我们想通过这个系统达成什么目标？​​（商业目标、社会价值等）

举个例子：如果你要设计一个​​社区买菜App​​，用户的需求可能是“下班回家前快速买到新鲜菜，不用去菜市场挤”，而你的目标可能是“覆盖周边3公里小区，让用户每周下单3次以上”。只有明确这两点，后续的设计才不会跑偏——比如不能只顾着展示高端进口水果（不符合普通用户日常需求），也不能只追求低价而忽略配送速度（影响用户体验）。

​​第二层：范围层——系统里要提供哪些功能？（房子里放什么）​​

明确了目标和需求后，接下来要决定​​“具体做什么功能”​​，以及​​“包含哪些内容”​​。这一层就像装修前列清单：厨房要放冰箱、灶台，卧室要放床、衣柜；对应到系统里，就是确定核心功能模块和基础内容。

继续以买菜App为例：

• ​​功能​​：搜索菜品、查看附近菜摊、加入购物车、下单支付、查看配送进度。
• ​​内容​​：蔬菜/肉类的分类列表、每款菜品的图片和价格、用户评价（比如“这家的土豆很新鲜”）。

注意，范围层要避免“贪大求全”——比如初期不用急着上线“预售有机蔬菜”功能，先确保基础买菜流程顺畅更重要。

​​第三层：结构层——功能之间如何连接？（房子的布局）​​

这一层关注的是​​“用户操作的路径是否合理”​​，就像设计房子时，要考虑“从客厅到厨房要不要绕过阳台”“卫生间离卧室近不近”。在系统设计中，它决定了功能的组织逻辑和用户的操作流程。

买菜App的结构层设计示例：

• 用户打开App后，首先看到的是​​“首页推荐”​​（附近热门菜摊/常买菜品），点击进入某个菜摊；
• 接着看到​​“分类菜单”​​（蔬菜/肉类/水产），选中“西红柿”后进入详情页；
• 点击“加入购物车”，然后跳转至​​“结算页”​​（填写地址、选择配送时间），最后支付。

如果流程设计不合理（比如先让用户填地址才能选菜），用户可能直接退出——这就是结构层没做好。

​​第四层：框架层——界面具体长什么样？（房间的家具摆设）​​

到了这一层，设计开始“看得见摸得着”了：按钮放在哪里？菜单怎么展开？文字和图片如何排版？框架层关注的是​​“交互元素的具体设计”​​，目标是让操作更直观、更高效。

买菜App的框架层细节：

• ​​首页​​：顶部是搜索栏（方便用户快速找菜），中间是“常买清单”（比如“上周买的排骨”），下方是菜摊推荐（配高清实拍图）。
• ​​菜品页​​：图片占大块区域（让用户看清新鲜度），价格用大字号标出，下方紧挨着“加入购物车”按钮（避免用户找半天）。
• ​​支付页​​：支付方式（微信/支付宝）放在最显眼位置，配送时间选项用下拉菜单（减少输入）。

好的框架层设计，能让用户“不用思考”就能完成操作——比如手指一滑就能看到更多菜品，点击按钮立刻有反馈（比如“已加入购物车”的提示）。

​​第五层：表现层——看起来舒服吗？（房子的装修风格）​​

这是用户最直接感知的一层，涉及​​视觉设计​​：颜色搭配、字体选择、动效运用等。表现层的目标是让用户“看着舒服、用着愉悦”，甚至产生情感共鸣。

买菜App的表现层设计建议：

• ​​配色​​：用绿色（代表新鲜）和橙色（温暖活力）为主色调，避免暗沉的灰色系；
• ​​图片​​：菜品照片要高清、自然光拍摄（让用户有“实物就在眼前”的感觉），避免过度修图；
• ​​动效​​：加载时用“小蔬菜旋转”的动画（比枯燥的转圈更有趣），支付成功后弹出“番茄表情包”提示（增加趣味性）。

注意，表现层不能只追求“好看”——比如文字颜色和背景太接近会导致看不清，按钮太小会让老年人误触，这些都会破坏体验。

​​总结：五层模型就像盖房子，缺一不可​​

信息系统的人机交互设计，本质上就是一层层“盖房子”的过程：.

1. ​​战略层​​（目标）→ 解决“为什么做”的问题（用户需求+商业目标）；
2. ​​范围层​​（功能）→ 解决“做什么”的问题（核心功能+内容清单）；
3. ​​结构层​​（流程）→ 解决“怎么连接”的问题（操作路径是否合理）；
4. ​​框架层​​（界面）→ 解决“怎么操作”的问题（按钮、菜单等交互设计）；
5. ​​表现层​​（视觉）→ 解决“看起来如何”的问题（颜色、动效等感官体验）。

​​关键点​​：每一层都依赖下一层的基础，且直接影响上一层的效果。比如结构层流程混乱，再好看的界面（表现层）也没用；战略层目标模糊，功能范围（范围层）可能偏离用户需求。

下次当你用一个顺手的系统时，不妨想想：它的每一层设计是不是都“刚刚好”？而当我们自己设计信息系统时，也可以用这五层模型做“检查清单”，确保用户体验从内到外都经得起推敲。

毕竟，好的交互设计，本质上就是“站在用户的角度，盖一栋他们愿意天天住的房子”。