全面系统解析产品交互原型设计

无论何时、何地，无论是谁，无论在什么地方，都可以用画图解决问题。

——《餐巾纸的背面》丹 · 罗姆

产品设计师最有价值的是思考分析和解决问题的能力。丹 · 罗姆 在《餐巾纸的背面》一书提出，画图是一种解决问题的视觉化思考方法。同样，在互联网数字产品领域，产品设计师也可以通过画草图，洞察需求、思考设计策略、探索设计方案，或用于设计表达与沟通。但是，原型设计又并不是简单地画草图，而是将产品需求还原为用户易理解易使用的界面设计方案，更严谨规范，可以体现产品设计师产出设计解决方案的能力，以及设计价值的强有力产出物。

一、原型设计

原型设计，是整个产品设计思考过程最后的关键步骤，将抽象的产品需求和设计策略转化为具象的产品交互原型。本阶段对应的是用户体验五要素模型中的结构层、框架层和表现层，包括用户任务流程、信息架构、交互设计、信息设计、导航设计和界面设计等元素细节。

图 1 用户体验五要素模型

设计师做项目，并不是一上来就先画原型图，而是要先进行需求分析和设计思考。原型制作，通常只占据设计排期时间的三分之一，更多的时间是用于理解业务需求，洞察分析用户场景下的痛点 、痒点、爽点，判断需求真伪，评估需求价值，研究产品和设计策略，寻找产品设计切入点，思考原型方案设计。比如在头脑风暴阶段，用一支笔和一张纸就能把自己的设计策略想法轻松表达出来。一般而言，设计师在对接产品需求时，产品经理会给到一份产品需求文档（PRD），用于产品需求表达，产品需求文档中也会提供产品经理出的原型图，相对比较粗糙，主要是辅助设计师理解产品的功能解决方案。

既然产品经理已经出了原型图，那么设计师还需要做什么呢？仅仅是帮助产品经理细化场景和优化界面吗？设计师和产品经理出的原型有什么不同吗？原型设计方案和设计策略是一回事儿吗？如何将产品需求和设计策略转化成简单易用的界面呢？原型设计如何对齐商业目标、产品目标和用户目标？设计如何平衡商业价值和用户体验？原型应该包含哪些元素？原型设计究竟具体如何体现设计价值？

针对以上问题，本文将重点拆解原型，由浅入深解析原型设计。

二、原型

原型，是我们将抽象的解决策略和前期思考过程，落地转化为具象界面的结果。具体而言，使产品的原型设计无限接近用户的心理模型，让用户更加有效地完成其操作目的，通过改善用户体验的方式提升产品的价值。

整个项目的产品研发团队，可以通过原型全面了解产品的交互流程和实现的逻辑细节，快速推进项目落地；同时，原型设计方案也是以用户体验为基础，以解决业务问题和用户问题为核心，以商业目标为终极目标导向的设计，助力业务和产品目标的达成。

三、解构原型

设计师在做原型设计时，首先要明确价值目标以及需要解决目标用户什么问题，其次是明确设计项目所属的终端平台，遵循平台规范和系统差异。

原型，一般包含结构、框架布局、交互控件、内容和功能信息层次。以 PC 端原型为例，从界面 Z 轴视角看，原型图自下而上包括系统层、基础框架层、内容层、遮罩层和反馈层。

图 2 原型框架和结构拆解（以 PC 端原型为例）

A. 系统层

一般指原型所属终端系统或平台规范的结构。例如手机端顶部状态栏、iOS 端全面屏顶部的灵动岛功能和底部 Home 横线（Home Indicator）、Android 手机端底部物理按键，以及微信小程序端标题栏右侧固定区域，常驻显示关闭和更多图标按钮等。

图 3 iPhone 14 Pro 灵动岛功能 （图片来源苹果官网）

不同平台，用户使用习惯也会有细微差异。比如，iOS 端用户习惯通过左滑列表唤起更多操作，而 Android 端用户则习惯长按列表唤起操作。使用 macOS 系统苹果电脑设备的用户，习惯确认按钮在右侧，取消按钮在左侧，而 Windows 系统用户却完全与之相反。

此外，macOS 和 Windows 系统的快捷键也存在不同。macOS 存在专属的 Command 键⌘和 option 键⌥，Command 键又称苹果键（Apple key），一般情况下，Command 键等同于 Windows 下的 Ctrl 按键，Option 键对应的是 Windows 的 Alt 键。在 Mac 电脑上按 Option 键点击左上角的系统图标，原来最上面的“关于本机”命令会切换为“系统信息”，进入后可以查看更详细的 Mac 信息。Option 选项键还可以帮助用户绕开一些不想要的对话框提示。

Web 端网页以浏览器为载体，用不同的浏览器打开网页，网页首屏可视高度均不同。根据调研结果显示，Windows 系统，显示器在 1024*768 分辨率下，浏览器 Chrome 头部高度是 70px，IE10 是 80px，Firefox 头部高度是 100px，任务栏高度为 50px，其中 chrome、IE 浏览器占比最大，所以网页首屏可视高度至少为 600px（Chrome：648px，IE：638px，Firefox：608px）。无论是 web 端还是移动端，设计师在设计原型界面时，都需要关注首屏高度，因为需要结合产品目标和用户体验，综合考虑首屏信息的透出。

B. 基础框架层

框架布局设计，需要综合考虑产品信息结构的逻辑性、可拓展性和一致性交互体验，既能满足业务需求，又能为目标用户提供良好的用户体验，界面容易理解使用，符合用户使用习惯。

PC 端页面基础框架布局，通常有五种布局方案，分别是上下布局、左右布局、T 字布局、响应式布局和自适应布局。也可以根据实际业务的产品特性，基于以上基础布局延伸出其他的布局方式，通常基础框架会包括顶部导航、左侧导航、页眉、面包屑（页面访问路径）、页脚、主内容模块。

图 4 Web 框架布局 （从左到右分别是 左右布局、上下布局、T 字布局）

1）上下布局

上下布局是最基础的布局方式之一，通常用于信息展示类的网站。上面是页眉和顶部导航模块，下面是主体内容模块，自上而下，简洁明快。

但是，由于屏幕尺寸和设备的不同，又可以细分为固定宽度和跟随屏幕宽度两种布局。一般而言，固定宽度的布局方式，页面两侧有足够的留白，用户可以更加聚焦于内容。而且，用户自左向右横向浏览的视觉距离更短，用户消费内容的效率更高，用户扫视内容浏览体验更佳，所以更适合信息展示类型的网站。比如知乎、新浪微博、中国四大门户网、百度搜索等内容展示型的网站，都采用的是固定宽度的上下结构布局方式。

图 5 上下布局 （固定宽度布局 vs 跟随屏幕宽度布局）

早期的网页设计，一般使用的是固定宽度 960 网格系统（960 Grid System）作为设计框架。然而，随着电脑屏幕尺寸和分辨率逐渐变大，页面固定宽度的数值也在变化。无论是 macOS 还是 Windows 系统，一般都是以 1440*1024 px 为原型设计画布尺寸。

根据 gs.statcounter 网站数据表明：2022.5-2023.5，国内桌面端屏幕分辨率尺寸使用情况，排列前五的分别是 1920*1080、1536*864、1366*768、2560*1440、1440*900，为了更好的向上和向下适配，所以通常选择正好位于中间的尺寸 1440*900 作为通用宽屏网页设计的画布尺寸，而 figma 和 sketch 软件中已经为设计师内置好原型画布尺寸 1440*1024。

图 6 2022 年 5 月～2023 年 5 月全球桌面屏幕分辨率统计 数据来源 http://gs.statcounter.com

而跟随屏幕宽度的布局，使用的场景更适合需要向用户透传更多信息和内容曝光，对屏幕宽度的利用率有更高的要求，为大屏设计，打造沉浸式网站体验。比如，协同办公等工具类型的产品。

例如，阿里云和金山云等云厂商的官网首页，即采用了上下布局宽屏设计。界面跟随屏幕浏览器窗口宽度拉伸显示，可以充分利用电脑横向宽屏特性展示更多信息，避免纵向页面过长，导致首屏以下的信息很少被用户消费到。

图 7 云厂商首页

一般而言，用户在页面首屏的浏览量和停留时长最高，上滑页面，二屏和三屏以下的浏览量会呈现递减趋势，所以产品设计师在具体的原型设计时，会更加注重首屏高度，基于产品目标进行设计。例如，淘宝、京东、拼多多等电商产品 App 首页的界面设计，首页不像早期那样有三四屏以上，现在首页的页面长度越来越短，而且各业务线为了争夺首屏的资源位置也更加激烈。归根究底，还是用户流量的因素。因为首页首屏的用户流量是最高的，越往下，用户流量相对越少，像漏斗一样。也正因如此，产品设计师在设计原型方案时，会利用二屏以下的长尾流量展开设计，防止用户流失，充分利用页面存量用户的流量价值。比如，利益点弹框挽留、底部商品 feeds 信息流千人千面推荐、上滑页面时商品分类固定在顶部等策略。

2）左右布局

左右布局通常左侧是全局一级导航菜单，右侧为内容主体区域。当页面横向空间有限时，左侧导航可以收起固定，内容区根据浏览器窗口大小进行自适应，可以有效提高界面横向空间的使用率。

另外，左右布局的优点是左侧导航的扩展性更好，导航菜单可以扩展至三级以上，信息层级更加扁平，用户也可以快速通过侧导航定位和切换当前位置，操作效率高。而上下布局，顶部导航一级菜单的拓展性不强，通常会遵循 7 加减 2 法则（不需要绝对遵循，根据具体业务实际场景而定），尽量控制一级菜单数量，尽量缩短并平衡导航菜单的长度数量和菜单分类层级深度，减少用户选择，提高导航菜单使用效率。

缺点是导航横向页面内容的空间会被侧边栏挤压一部分，但是可以通过收起侧边导航来解决。左右布局方式，常用于功能层级相对不复杂的应用场景，比如网站后台系统等等。

例如，微信、QQ 音乐客户端等，采用的是左右布局方式。左侧为全局侧边导航，右侧为内容区。左侧导航菜单一目了然，有良好的可拓展性，用户可以更加聚焦音乐内容本身，通过侧边导航菜单切换位置也比较便捷。一般侧边导航操作频率相对比较高。

图 8 QQ 音乐客户端（Mac）

3）T 字布局

“T”型布局是网页设计中使用最广泛的一种布局方式，是指同时拥有顶部全局一级导航及侧边二级导航栏的结构，左下方为主菜单，右面显示内容。优点是页面结构清晰，主次分明，更适合功能更为复杂的应用型网站，如各国内各云厂商的控制台。

例如，金山文档的首页，属于 T 字布局方式。页面顶部结构是全局导航，左下方侧边栏为文件管理器导航类目，右侧是文件管理内容区。用户进入金山文档首页，找文档是刚需之一，也是高频需求，所以侧边文件目录导航菜单常驻显示，便于用户通过目录索引方式快速找到文档。

图 9 金山文档首页-个人账号

4）响应式布局

图 10 响应式 vs 自适应

响应式布局可以动态实时适配不同界面尺寸。设计师只要设计一套界面，开发通过一套代码可以实现不同断点（指页面宽度）的界面布局，也因此加载速度比自适应的方式要慢，需要加载一整套的网站代码。响应式布局具体通常又包含拉伸布局、等比缩放、扩展布局和固定布局四种。可以根据页面复杂程度，混合使用以上四种布局方式。

图 11 响应式布局

响应式布局，主要是容器适配浏览器窗口变化，一般用于内容展示类型的网站。所有设备数据同步，无需单独维护某个终端网站数据，网站内容维护成本低。通过 JS 及 CSS 的控制，借助 rem、百分比等相对度量单位，在不同尺寸的设备上呈现相同的网页。

例如 TED 官网，使用了响应式布局。向内缩放浏览器窗口，先使用拉伸布局和扩展布局。在达到 pad 端断点时，顶部导航收起。继续向内拉伸到手机端断点时，列表布局由左文本右图改为单行显示一个信息卡片。

图 12 TED 响应式布局

一般网页断点数值是 640px、1008px，针对不同设备屏幕大小，设计不同的界面布局。如下图所示：

图 13 Windows 不同设备大小和断点

5）自适应布局

自适应设计是基于断点使用静态布局。依据产品对应的用户群体使用设备分辨率占比情况，设计师需要根据不同终端设备的断点，设计不同的界面布局和内容呈现方式。一般需同时设计手机端、平板电脑和 PC 端界面，开发要用多套代码实现不同断点的界面布局，一般加载速度比响应式布局要快。

比如淘宝网页版有 PC 端和 m 站，是针对 PC 和手机端采用不同的界面布局设计，写的是多套代码，数据是不同步的，网站维护成本高。PC 端采用的是自适应设计，向内缩放窗口达到某断点后，隐藏左侧分类模块，“猜你喜欢”由原来的一行三列调整为一行二列。

图 14 淘宝网页版首页 – 自适应布局

C. 内容层

内容层，主要是承载核心内容信息、交互控件和信息层次。对应的是用户体验五要素中的信息设计、交互设计和视觉表现层设计。例如，列表、表单等。

D. 遮罩层

当用户浏览或操作页面时，页面有临时分支任务，为了减少页面跳转，通常会在当前页面出现模态弹框，用户更聚焦弹框内容，这时候弹框之下会展示遮罩层。遮罩层显示与否，需遵循平台差异和特定业务场景。

比如金山文档 App，打开轻文档查看目录场景设计。用户通过目录索引的方式查找文档内容，目录和内容是强相关的信息，而且用户点击目录时需要定位核对内容，所以此处隐去了遮罩层，便于用户在索引目录的同时，定位查看对应内容。而抖音的提醒发货场景是一个相对独立的分支流程，所以底部弹框之下增加了遮罩层，便于用户聚焦提示信息。

图 15 金山文档 &抖音 App （图片来源产品截图）

E. 反馈层

当用户操作页面时，若有隶属于该页面的临时态任务时，通常会在当前页面出现模态或非模态的弹出框。一般反馈层包括加载中状态、全局提示、对话框、底部弹框等。

• 反馈类型，一般包括行为反馈和流程反馈。具体有四种反馈方式，分别是对话框反馈（模态）、全局 toast（非模态）、状态反馈和页面反馈。
• 行为反馈，指的是对用户交互行为的即时性反馈。用户可以立即看到反馈结果，常用状态反馈方式提示，比如微信朋友圈点赞和取消点赞的状态反馈。
• 流程反馈，指的是对用户的交互操作提供结果反馈。顾名思义，系统需要一定的时间处理用户交互操作请求，用户一般不能立即看到反馈结果，通常使用全局反馈 toast 和页面反馈方式。

对话框反馈，是一种阻断式提示，用户可立即看到反馈结果。一般涉及用户数据丢失，不可撤销的场景下，需使用模态对话框提示，明确让用户进行二次确认。全局 toast 反馈，是一种非阻断式、轻量化的反馈，反馈主体是操作行为或流程处理，如操作成功、失败等全局反馈。状态反馈，是一种轻量化提示，用户可立即看到反馈结果。页面反馈，用户需要对操作的结果进行确认。

图 16 反馈方式示例

综上所述，原型一般由系统层、基础框架层、内容层、遮罩层和反馈层构成。产品经理设计的原型图（低保真），侧重将用户需求转化为产品需求（即产品解决方案，包括功能规格和内容需求），具有全局观，更多思考产品的商业价值和满足业务需求，不太会纠结于交互方式和体验细节。而产品设计师产出的原型图，更接近最终的产品，更侧重于产品的结构层和框架层。重点是用户行为设计和交互逻辑层面，平衡用户体验和商业价值，提出更有效的产品策略以及设计解决方案。这是产品经理和产品设计师进行原型设计的不同点。

产品设计师可以根据受众群体，选择不同保真程度的原型图。产品设计师通常面向的受众群体是产品经理、UI 设计师和研发测试人员，所以一般只要产出中保真交互原型图即可，以黑白灰的设计稿呈现，但是需要明确体现出功能和信息层级关系。

四、原型认知误区

很多职场人士认为做设计就是画原型，这是对产品设计师最大的偏见和误解。以下是原型认知的常见误区：

• 设计策略≠原型设计方案。设计策略不是原型设计方案，两者不能混为一谈。前者是想法，后者是用原型图的方式去实现设计策略和想法。
• 原型设计≠原型制作。原型设计将抽象的设计策略和想法转化为具象界面的过程和结果，侧重于行为设计和信息设计，聚焦的是设计层面。而原型制作，更侧重使用具体的设计工具如何绘制出原型。
• 原型不是单一静态的页面。原型是动态的流程界面，包括用户获取信息或任务的交互路径设计。
• 原型有低保真、中保真和高保真之分。需要根据受众群体不同，选择不同的保真程度原型图。

原型是交流和表达的工具，在需求沟通环节起到至关重要的作用。产品需求文档里的低保真原型图，可以方便产品表达产品需求，减少和设计师之间的沟通和理解成本，但是也会限制设计师做设计。所以，产品设计师在做设计时，需要先进行需求分析和用户分析，通过一步步拆解去思考设计或产品的解决方案。

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！