主要观点总结
本文主要介绍了产品设计师在做原型设计时需要关注的几个方面，包括原型设计的重要性、原型的基本构成、原型设计的不同环节以及原型认知的常见误区。文章详细阐述了原型设计在产品设计流程中的作用，以及原型设计师与产品经理在原型设计上的不同职责和关注点。
关键观点总结
关键观点1: 原型设计的重要性
原型设计是产品设计流程中非常重要的一个环节，能够将抽象的解决策略和前期思考转化为具象的产品界面，有助于产品团队理解、评估和测试产品设计方案。
关键观点2: 原型的构成
原型一般由系统层、基础框架层、内容层、遮罩层和反馈层构成。这些组成部分共同构成了产品的用户界面和交互流程。
关键观点3: 原型设计的不同环节
原型设计包括设计策略、低保真原型、中保真原型和高保真原型等阶段。设计策略是指导原型设计的方向和思路，低保真原型是初步的产品概念展示，中保真和高保真原型则越来越接近最终产品，能够更准确地展示产品的功能和用户体验。
关键观点4: 原型认知的常见误区
职场人士对原型设计的认知存在一些误区，如将设计策略等同于原型设计方案、将原型设计与原型制作混为一谈、将原型视为单一静态页面等。了解这些误区有助于产品设计师更好地进行原型设计和沟通。
正文
图 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/
