本文选择专栏《产品成长指北》，文末可查看订阅方式，全文介绍了设计规范中的一些重要元素，包括色彩、字体、元素和交互规范等。

色彩的选择需要考虑到功能和用户心智中的用色类型；

字体的规范应该统一，不同字重的字体可以传达不同的信息权重和情绪；

元件和组件的规范可以提高团队的效率和一致性；

交互规范可以帮助团队更好地理解所需的交互样式。包括交互操作和交互样式的规范。

注释也是设计规范中的重要元素之一，可以用于和设计师及开发沟通，如何实现原型的设计和开发。

一、原型设计规范

1.页面尺寸

原型设计中的页面尺寸选择非常重要,它关系到产品的展示效果和交互体验。以下我尝试用通俗的语言对原型设计的页面尺寸选择进行解释:

原型页面尺寸指产品经理设计原型时页面的宽度和高度。常见的页面类型有网页、手机APP、ipad。顾名思义，这些尺寸的定义是受硬件设备，即屏幕大小和分辨率决定的。

web页面尺寸选择

一般我们绘制浏览器页面，只需要定义宽度就好，经常使用的浏览器宽度是1920px、1366px或1200px，这个宽度是由PC分辨率决定，常见的有1280*800、1600*900、1440*800、1366*768、1920*1080

那么在绘制原型时，该如何选择一个合适的宽度呢？

在设计网页时,页面尺寸的选择需要考虑目标用户使用的显示设备。如果设计的页面宽度大于用户显示器分辨率,网页内容就无法完整显示,这会严重影响用户体验。

所以网页尺寸设计要考虑目标用户群的主流显示设备,而不是设计师自己的显示器大小。

不同网站的目标用户群体不同,所需要支持的最小页面宽度也不同:

设计网站的用户显示器好,可以使用1366px起步的页面宽度

企业管理系统用户的显示器宽度均在1440px以上,可以使用1440px作为最小宽度

淘宝、京东等大众网站的页面宽度需要支持1024px,以适应用户群体跨度大的特点

在确定页面最小宽度后,还要通过留白确定内容区域的宽度。常见问题是两边没有留白,内容直接贴边。观察大多数网站,当页面缩小时左右会出现留白。所以设计时需要定义内容边距,通过留白确保页面在不同宽度下都能正常展示。

2.区分两个概念

自适应设计(Adaptive Design):

这是一种常采用的设计方式，指为不同设备做多个版本的设计,并根据设备特征选择展示不同设计版本的网页,实现针对性优化。

响应式网站设计

响应式网站是一种可以兼容多种设备的网站。它不需要为每个设备做一个专门的版本,而是一套代码可以在不同设备上自动适应和调整显示。这样可以节省设计成本,也可以给用户更好的浏览体验。

相比自适应网站,响应式网站的优势在于:

设计师只需设计一套界面,代码会自动适应不同设备

布局可以通过设置自动调整,更简单

但是,响应式网站也有自己的局限性:

只适合较简单的页面,复杂的框架结构难以实现

不能针对每个设备做详细 optimizations

3.移动端尺寸

根据设备类型选择主流设备，或目标用户使用的设备即可

iPhone 8 (375 x 667)

iPhone 8 Plus (414 x 736)

iPhone 11 Pro / X / XS (375 x 812)

iPhone 11 / XR / XS Max (414 × 896)

iPhone 13 / 13 Pro / 12 / 12 Pro (390 X 844)

iPhone 13 Pro Max / 12 Pro Max (428 X 926)

iPad mini 7.9" (768 x 1024)

iPad mini 8.3" (744 × 1133)

iPad 10.2" (810 x 1080)

iPad Pro 11" (834 X 1194

iPad Pro 12.9" (1024 x 1366)

尺寸的选择，在Axure原型图样式选择视图中可以直接调用

4.色彩规范

在原型图中使用颜色时，每种颜色都应该代表一种含义。一旦确定了产品的主色调，原则上所有页面都应该采用该颜色。主要文字、次要文字以及其他不同重点的文字应该使用不同的颜色进行显示。

在许多UI设计规范中，色彩部分通常包含三种类型：

主色：应用的核心色彩，代表品牌色。

辅色：丰富页面的视觉效果，传达次要信息的颜色。

中性色：用于文字和背景的无色调颜色。

主色

是应用程序最核心的颜色，也是品牌的象征色。例如，饿了么的蓝色、微信的绿色、京东的红色、淘宝的橙色都是主色的例子。

确定主色并不像大家想象的那么复杂，关键在于确定你希望用户感受到的情绪，然后将情绪与大致的颜色范围关联，并进行微调。

辅助色

是应用程序中丰富的次要颜色，除了传达品牌信息外，它们还具有更强的实用性。前面提到的色环就可以派上用场了。色环是一个首尾相连的环形模型，其中两个颜色的角度差越大，视觉差异越大，对比度越强。辅助色的选择取决于实际场景的功能。

例如，通知、提醒、取消可以使用鲜红色，确认、同意可以使用绿色或蓝色，收藏、打分、评价可以使用橙黄色。这些颜色已经在用户心智中建立了标准的用色类型，按照常规方法选择辅助色是最简单、最安全的方式，没有其他思路的情况下可以采用。

在没有标准元素用色的情况下，可以考虑应用色环的"角度原则"，即需要突出的颜色可以远离主色，在色环中角度较大的位置，而不需要突出的颜色则可以靠近主色，角度较小的位置。

中性色

用于页面中的文字和背景，它们承担着最基本的层次表现和便于阅读的任务。许多新手认为中性色不重要，但实际情况恰恰相反。

主色和辅助色决定了界面的视觉效果是否出色，而中性色的应用直接影响页面是否能够正常使用。如果你看过很多原型案例，就会明白即使只有黑白灰的状态，我们仍然可以理解这些页面并进行使用，没有任何障碍。

虽然中性色指的是无个性的颜色，但并不意味着只能使用纯灰色。常见的做法是为中性色添加适量的蓝色饱和度，以提升观看体验（满足RGB的某种特性）。

5.字体规范

不同文字显示的字号、字体也应该有统一的规范设计。不然,在同一个产品中,同样的主标题会产生多种不同的显示方式。容易使人产生其他误解。

字号

64px 用于阿拉伯数字如金额的输入

40px 运营Banner内主标题和特殊用途的大字体

36px 主按钮文本，页面顶部主标题

34px 列表控件的主文本

32px 页面顶部的导航，主要的文本信息

28px 辅助说明，次要文本信息，次要按钮文本

26px 应用图标下的文字标题

24px 常规文本信息，链接文本，图标说明文本

20px 底部tab文本

字重

不同字重的同一字体可以传达不同的信息权重和情绪。细字体给人以细腻、轻快的感觉，而粗体则强调重要性和严肃性。因此，在适当的场景中使用合适的字重非常重要。

6.元件规范

请参考之后的文章，常用Axure元件

7.组件规范

组件规范是定义各种组件的规范，包括弹窗、表单、提示等。这些规范旨在详细描述组件的功能、使用方式和设计规范，以确保一致性和用户体验的提升。

弹窗设计

弹窗交互最多三层：为了避免用户在使用过程中迷失在过多的弹窗中，规范限制了弹窗的层级，通常不超过三层。这有助于保持界面的清晰度和用户的流畅体验。

提供背景遮罩、边框阴影等视觉效果：为了突出弹窗的层级和与背景的区分，规范建议在弹窗周围添加背景遮罩和边框阴影等视觉效果。这样可以使弹窗更加突出，并且与其他内容有明确的界限。

保证交互响应和完整性：弹窗应该具备良好的交互响应，包括正确的按钮反馈、输入验证和错误提示等。此外，弹窗的内容应该完整、明确地传达给用户所需的信息，避免模糊或不完整的内容。

表单设计

使用表格设计表单：为了统一表单的布局和样式，规范建议使用表格来设计表单。表格可以将不同的表单字段和标签组织在一起，使其更易于阅读和理解。

实现数据排版和展示：规范要求表单能够适应不同的数据排版和展示需求。这可以包括灵活的布局选项、字段的宽度调整和合理的数据展示方式，以确保表单在各种情况下都能有效地呈现数据。

提示设计

精细设计各类交互提示：规范鼓励对各种交互提示进行精细设计，包括成功提示、错误提示、警告提示等。这些提示应该具有明确的信息内容和适当的视觉呈现，以引导用户的行为和提供帮助。

使用表格跟踪提示语的页面、触发条件、类型：为了更好地管理和维护提示语的使用，规范要求记录提示语的相关信息，如所属页面、触发条件和类型等。通过使用表格或其他适当的方式，可以方便地跟踪和管理提示语的使用情况，以确保一致性和准确性。

通过制定这些组件规范，团队可以在设计和开发过程中更加高效和一致地创建组件，提升产品的整体质量和用户体验。同时，规范也为新成员提供了指导，帮助他们更快地融入团队并理解组件的设计和使用方式。

下面是一个提示语设计的表格案例

所属页面触发条件操作提示语类型备注登录页面用户名为空提交请输入用户名错误登录页面密码错误提交密码错误，请重新输入错误注册页面密码不匹配提交两次输入的密码不一致错误注册页面邮箱格式错误提交请输入有效的邮箱地址错误订单页面订单已取消查看该订单已被取消提示订单页面订单已完成查看该订单已完成提示设置页面保存成功保存设置已成功保存成功设置页面数据未保存保存有未保存的修改，请确认警告

二、交互规范

1.常见的交互操作

点击或轻触（Click or Tap）：在触摸屏或鼠标上单击或轻触某个元素。通常用于触发元素的默认操作或状态改变。

双击时（Double Click or Double Tap）：在鼠标上快速进行两次连续的点击操作，或在触摸屏上快速进行两次连续的轻触操作。通常用于触发特定的操作，如放大图片或打开文件。

菜单（鼠标右键单击）（Right Click）：在鼠标上点击右键，触发显示上下文菜单，其中包含与所点击元素相关的操作选项。通常用于提供更多操作选项或自定义功能。

鼠标按下时（Mouse Button Down）：在鼠标上按下但尚未释放鼠标按钮。通常用于捕捉开始拖动或启动其他连续交互的事件。

鼠标松开时（Mouse Button Up）：在鼠标上释放之前按下的鼠标按钮。通常用于捕捉拖动结束或完成其他连续交互的事件。

鼠标移动时（Mouse Move）：在鼠标上移动时，不论是否按下鼠标按钮。通常用于跟踪鼠标位置的变化，以便在需要时更新元素的状态或提供实时反馈。

鼠标移入时（Mouse Enter）：将鼠标光标移动到元素上时触发的事件。通常用于在鼠标进入元素时改变元素的外观或触发特定的操作。

鼠标移出时（Mouse Exit）：将鼠标光标移出元素时触发的事件。通常用于在鼠标离开元素时恢复元素的外观或触发其他操作。

鼠标停放时（Mouse hover）：将鼠标光标悬停在元素上时触发的事件。通常用于在鼠标悬停时显示额外的信息或提供进一步的交互选项。

长击或长按时（Long Click or Long Press）：在触摸屏上长时间按住某个元素或在鼠标上长时间按住鼠标按钮。通常用于触发特定的操作，如呼出上下文菜单或启动连续拖动操作。

2.常见交互样式

交互样式的注释包括描述所需实现的交互效果和需要特别注意的交互要点。常见的交互样式有很多种，

标签式（类似微信的底部导航）

卡片式（像商城列表页的展示方式）

抽屉（类似小红书我的页面的右上角汉堡按钮）

下拉式（类似微信添加+按钮）

列表式（类似微信的通讯录）

宫格式（类似美团外卖）

轮播图（类似苹果手机界面或者轮播广告）

主题式和混合式（像淘宝、京东等综合展示方式）

在注释中，可以提供具体示例或说明，以帮助团队理解所需的交互样式。

举例

假设在原型图中有一个商品列表，产品经理可以在注释中解释说："商品列表采用卡片式交互样式，每个商品以卡片的形式展示，用户可以通过左右滑动浏览不同的商品，点击某个商品卡片可以查看商品详情。"这样设计和开发团队就能明白商品列表的交互样式和用户的操作方式。

三、注释规范

在绘制原型图时，不可能做到百分百的高保真，因此注释就非常重要了，这些注释用于和设计师及开发沟通，如何实现原型的设计和开发。

注释可以直接写在原型图内，也可以写在PRD里，以下是一些常见的注释类型及举例

1.概念

在撰写PRD和设计原型图时，应尽量使用通俗易懂的词语和语言。如果实在找不到合适的专业术语，就需要提供注释例如，假设在原型图中有一个名为"快捷入口"的按钮，产品经理可以在注释中解释说："快捷入口是一个用于快速访问常用功能的按钮，点击它可以直接跳转到指定页面。"

2.设备信息

由于iOS和Android操作系统具有不同的设计语言、设计规范等特点，设计移动应用时需要考虑并注释在这两个平台上布局的差异或展示效果的不同。在注释中可以指出在不同平台上需要进行的适配或调整，以确保用户在两个平台上都能获得一致的体验。

例如

假设在原型图中有一个底部导航栏，产品经理可以在注释中指出："底部导航栏在iOS上采用固定标签式样式，而在Android上采用滑动标签式样式，以符合各自操作系统的设计规范和用户习惯。

3.字符限制：

在原型图中，除了文章详情内容外，任何地方涉及到字符（包括字母、数字、文字和特殊符号）的限制都需要注释字符的范围。即使字符数量较少时，也不要忽视注释，因为未注释字符范围可能导致误解和沟通成本的增加。

例子

假设在原型图中有一个用户昵称输入框，产品经理可以在注释中说明："用户昵称输入框限制在10个字符以内，只能包含字母、数字和下划线。"这样设计和开发团队就清楚了用户昵称输入框的字符限制和允许的字符类型。

4.元件类型及优先级：

所有页面都由内容组成，视觉和交互设计是根据内容来考虑表现形式的，开发则根据表现形式选择合适的控件。因此，在原型图中，需要注释内容的类型，特别是那些容易引起歧义的内容，比如文本是单行还是多行、矩形框是输入框还是搜索框等。此外，如果需要突出显示某些内容或隐藏某些内容，应该对内容进行优先级划分并进行注释。

举个例子

假设在原型图中有一个评论列表，产品经理可以在注释中解释说："评论列表中的每条评论包含用户头像、评论内容和点赞按钮。评论内容应该是多行文本，并且优先级较高，需要突出显示。

5.操作结果：

对于涉及到操作的交互，比如点击、滑动等，需要注释操作的结果，以便设计师考虑操作的形式、过程和结果等具体的人机交互方法。

举个例子

假设在原型图中有一个点赞按钮，产品经理可以在注释中说明："当用户点击点赞按钮时，按钮的状态会改变为已点赞，并且相应的点赞数会增加。"

6.状态注释：

当页面在不同状态下展示不同内容时，需要对页面状态进行注释，例如初始状态、未登录状态/登录后状态、未编辑状态/已编辑状态、默认状态和异常状态等。通过注释状态，可以确保设计和开发团队对页面状态的理解一致，减少沟通和解释的成本。

举个例子

假设在原型图中有一个购物车页面，产品经理可以在注释中指明："购物车页面有三种状态：空购物车状态、有商品状态和异常状态。初始状态应该是空购物车，当用户添加商品后切换到有商品状态，如果出现网络异常等问题则切换到异常状态。"这样设计和开发团队就能清楚地了解购物车页面的状态变化和对应展示。

7.必填必选：

当原型图中存在需要用户必填或必选才能进行下一步操作的情况时，应对必填或必选项进行注释，以便设计和开发团队考虑相应的表现形式。

举个例子

假设在原型图中有一个注册页面，产品经理可以在注释中解释说："注册页面中的用户名、密码和邮箱为必填项，用户必须填写这些信息才能进行下一步操作。"

​