【产品经理从0到1】产品设计规范上

最新推荐文章于 2025-08-01 17:25:09 发布

小马哥编程

最新推荐文章于 2025-08-01 17:25:09 发布

阅读量1.1k

点赞数 28

CC 4.0 BY-SA版权

分类专栏：产品经理之路文章标签：产品经理

本文链接：https://blog.csdn.net/qq_41413652/article/details/147513348

产品经理之路专栏收录该内容

19 篇文章

订阅专栏

在这里插入图片描述

移动操作系统设计规范

在这里插入图片描述

思考

如何将已经确定好的信息架构，应用到移动端产品设计？
首先要确定什么？
答案：要确定导航方式；

扁平式导航

在这里插入图片描述

分层式导航

在这里插入图片描述

舵式导航

在这里插入图片描述

抽屉式导航

在这里插入图片描述

沉浸式导航

在这里插入图片描述

导航设计原则

根据产品的特性，导航可以混合使用，体现形式多样化；
不能为了追求多样化，滥用导航类型；

思考

已经确定导航架构，骨架有了，接下来做产品设计
该添加什么？
答案：页面具体内容 - 界面元素；

界面元素

• 栏：状态栏、导航栏、标签栏、工具栏（QQ聊天界面下方）、搜索栏、范围栏；
• 内容视图：列表视图、卡片视图、集合视图、图片视图、文本视图；
• 控制元素：分段选择控制、滑块、开关、选择器、按钮等；
– 产品行为或显示的信息对应的操作元素；
• 临时视图：模态视图、警告视图、操作列表、吐司提示；
– 临时向用户提供重要信息，或者提供额外的功能和选项；

栏

在这里插入图片描述

内容视图

什么是视图？
视图就是APP内信息主要的展现形式；
在这里插入图片描述

视图类型

在这里插入图片描述

视图使用注意事项：

在APP中，这些视图都会混合出现，很少会有单一的视图形式；
一个页面也不会只有视图一种表现形式；
有些视图类型没有完全的界线，比如列表视图、卡片视图、集合视图。

控件-元素

在这里插入图片描述

思考

有些内容不需要固定展现给用户，
怎么给用户做提示？
答案：临时视图；

临时视图

• 什么是临时视图？
让用户只有在完成当前的任务或关闭一个信息或页面之后，才能去做其它的事情；降低了交互层级；
• 临时视图的特征？
当屏幕上出现临时视图时，用户必须通过点击按钮或是其它特殊方式才能退出；
例如：临时视图可以占据整个屏幕，也可以是在上级视图之上（比如气泡弹出框），或者屏幕的一部分。但是这些
临时视图多数都会有 “完成” 和 “取消” 按钮来退出视图。
• 临时视图种类？
模态视图、警告视图、操作列表、吐司（Toast）

临时视图 -模态视图

在这里插入图片描述

临时视图 -警告视图（警告框）

在这里插入图片描述

• 只有在App确实需要获取私人信息时，再向用户发起请求
—— 否则有窃取隐私的嫌疑
• 当需求不明显时，向用户解释为什么你的 App 需要这些信息
—— 开诚布公地告诉用户许可的必要性
• 在 App 一启动时就请求授权那些对运行 App 至关重要的信息（通知）
—— 必要许可越早请求许可越容易让用户接受
• 不要随便请求位置信息
—— 这个数据很敏感

临时视图 -操作列表

在这里插入图片描述

临时视图 - Toast “吐司”

在这里插入图片描述

临时视图的使用规则

临时视图首先使用在用户使用频率相对低的页面；
临时视图永远浮于当前页面上，服务于当前任务；
使用临时视图可以减少交互层级，降低用户记忆成本；（用户不必考虑返回上一页是什么内容？）
破坏或崩溃性的提示以及授权等操作使用警告框，在当前页面要交互操作的，根据呈现操作内容多少使
用操作列表或模态视图，临时提示性内容使用toast。

使用临时视图时的注意事项

• 尽量减少临时视图的使用
——操作列表、警告视图或模态视图会中断用户操作，体验不佳
• 提供一个明显且安全的方式，退出模式
——体验不佳所以用户想走时要容易走
• 保持临时视图的简单、简短且集中
——体验不佳所以尽量简洁明确
• 请尽量使用能够明确说明任务的标题
——除非不得已，尽量不要玩文字游戏
• 只有在传达关键以及需要操作的信息时才使用警告视图
——因为体验更不佳
• 尊重用户的推送通知偏好设置
——警告视图也常用来做推送，如果用户明确不要就不要硬来
• 不要在弹出框上方再显示模态框
——弹窗之上再弹窗是产品经理无能的表现

数据键入的临时视图

在这里插入图片描述

数据键入时的注意事项

• 尽量显示选项
——能选择不填，降低操作频次与复杂度
• 尽可能的从系统中获取信息
——有已知数据可用最好不要用户重新输入
• 提供合理的默认值
——有默认值可用最好也不要用户重新输入
• 只有在收集完必要的信息之后才能进行下一步
——要键入一次搞定不要反复为难用户
• 立刻验证填写信息 - 实时纠错
——能实时验证的不要等到最后再告诉用户错了
• 只有在必要时使用文本信息
——输入文本操作太多了
• 将信息列表化以高效预览
——追求一目了然

原型的价值

对于产品经理来讲在工作中原型的价值主要体现以下三个部分：
1、在原型设计阶段花费的时间，可以避免额外的工作，节省总体时间、精力和成本；
2、原型是展示、讲述、体验之源，常用于做早期评审，以确保你的想法符合目标市场；
3、相对于文档，产品原型更加有效，观感更直接。

提升工作效率，传递信息；

原型的基本布局方法

在这里插入图片描述

在绘制原型时要注意的事项

注意事项前置条件
• 结合信息架构确定导航架构，进而设计合理的产品结构图；
• 确认核心用户的使用流程；
• 确认原型默认状态（没有经过任何操作）；

需要注意哪些方面？
在这里插入图片描述
功能注意事项
• 功能是否必须；
• 第一期该如何取舍功能；
• 技术实现成本是否能接受；
• 针对当前版本的优先级考虑，设计合理的功能；
• 功能图标的位置放置；
• 图片是否能查看大图，大图的展示形式；
• …

内容注意事项
• 内容谁来更新，是否牵扯到运营端的职责，是的话如何配合；
• 如何让用户最快看到想要的，最快去掉不想要的内容，页面层级不要太深；
• 上线第一版如何让用户不感到内容过少；
• 内容该如何分类，分类是否具有可持续扩展性，合理；
• 内容的排序逻辑；
• 列表页为空时的显示效果；
• 列表页图片在文字左边还是右边；

细节注意事项
• 第一版冷启动，各种功能的引导功能和文案；
• 每个地方的引导文案，如何让用户无感觉自动被引导其他页面；
• 载入过慢时、断网时载入过程中的提示；
• 由WiFi切换4G时的是否下载消耗流量提醒；
• 按钮，图标，链接不可用时，如何呈现；
• 文本长度超过标准被截断时该如何显示；
• 确认button是在左边还是右边；
• 下拉框，列表框的默认定位；
• 时间的展现方式：YYYY-MM-DD 或YY-MM-DD；
• 选中与被选中的状态；
• …

案例

在这里插入图片描述

交互说明及规则撰写

基本交互形式

在这里插入图片描述

交互规则

交互规则 - 单位格式

在这里插入图片描述

交互规则 - 字符限制

在这里插入图片描述

交互规则 - 动态规则

在这里插入图片描述

交互说明

• 交互说明，可以看做交互设计师或产品经理输出的最核心的“产品”;
• 交互说明面向的“用户”是下游的同事 - 视觉设计师、开发工程师和测试工程师；
交互说明主要包括以下3个维度：
在这里插入图片描述

示例

在这里插入图片描述

原型&交互说明

在这里插入图片描述

常见的交互说明撰写方法

纯文字式描述的交互说明

在这里插入图片描述

单页逐一介绍式交互说明

在这里插入图片描述

线框式原型

在这里插入图片描述

线框式原型优缺点

在这里插入图片描述

总分模块式交互说明

在这里插入图片描述

案例

在这里插入图片描述

交互注意事项

• 原型要先画默认状态（没有任何操作之前的状态），然后再绘制交互后的效果；
• 产品经理在设计交互逻辑时，为了避免让用户陷入更深层级中，一般要求单流程最多跳三次（特殊情况除
外），常见的临时视图不占次数；
• 在设计强制执行页面时（如强制注册）一般不提供其他跳转出口，让用户保持高度专注，形成逻辑闭环，减
少错误发生；（慎用）
• 弱执行流程（比如浏览、查看详情等）可提供跳转出口（如分享），增加流量；
• 完成阶段一般可以设置快速返回，让用户更快从深层返回。

《用户体验的要素》 - 你们都懂的
《就这么简单》 - 用户体验科普
《锦绣蓝图》 - Web信息架构必读
《Web信息架构》 - Web信息架构必读
《创造突破性产品》 - PM启蒙读物
《写给大家看的设计书》 - UI设计必读
《应需而变，设计的力量》 - 培养同理心
《简单法则》 - 设计思想
《启示录》 - 团队
《掌握需求过程》 - 偏重于需求挖掘