产品学习笔记 | NOTION BLOG

需求项列表业务目标：该需求要达到什么效果，为什么要做功能性需求：如果该需求为功能性需求，进行具体描述使用场景：用户在何种场景中会涉及到该需求业务规则：该需求逻辑是什么，有没有前置条件或其他触发条件接口需求：接口有没有相关需求，接口提供以及联调数据要求：哪些字段需要返回数据，返回数据需要怎么样的抓取频率质量属性：该需求经测试后需要满足哪些质量规范要求约束：该需求的上线对现有业务运营是否有影响，对性能有没有影响

需求管理常见问题

一般原型设计规范：

产品的内容框架：产品功能的信息架构、流程判断的信息架构、带注解的线框图、过渡页面、带算法的页面、页面流程图（Axure8.0的页面快照）、多入口流程图、具体模块图、多方协作图、动画效果等。

页面流程图

定义：顾名思义，页面流程图是页面之间流转关系的示例图。

该图属于宏观层面的全局规划，不需要有每个页面的布局、细节要求。

部分产品页面的层级过深，采用信息架构的方式呈现。

优点：快速从框架上了解业务的流程关系；相关人员了解工作量情况；聚集业务的行为路径

产品信息架构图定义：有时也称为站点地图，强调内容、功能的结构、导航系统的设计、是产品的骨架。

该图展示产品的内容归类或功能集合，需要罗列每个页面的细节内容或功能点形成结构化（有层次、有类别性）。该图也是技术人员创建数据结构的辅助文件。

优点：快速全面的了解产品业务框架；相关人员了解工作量情况；相对Web产品，更适用于移动客户端产品。

产品交互设计

页面导航

结构性导航：全局导航、局部导航

关联性导航：内联、面包屑、步骤、辅助、页面、页码、快速、友情、锚点、标签云等导航

实用性导航：

网页宽度与首屏宽度

安全宽度：1002px，可建议最大的宽度：1258px 在Windows XP常见的分辩率1024768下，我们除掉任务栏，浏览器菜单栏及状态栏后剩下的网页首屏高度平均值是584。在Window 7常见分辩率1440900下我们除掉任务栏，浏览器菜单以及状态栏后剩下的网页首屏高度平均值是716。综合分辩率及浏览器下的统计数据： windowsXp首屏大小580px， windows7 首屏大小710px。

【人性营销玩法】

3、活动运营

【如何策划一个活动】

1、竞争对手的玩法？

2、我们过去是怎么玩的？

3、我们的用户特征？

4、我们的产品支持我们怎么玩？

5、我们有多少资源可以玩？

数据分析工具

2、分析工具与数据平台

渠道推广

灰度发布与AB测试恢度发布：对某一产品的发布逐步扩大（平滑过渡）使用群体范围，也叫灰度放量。一般在产品新版本正式发布前。灰度发布可以在初始灰度的时候发现、调整问题，以保证期影响度。 A/B测试：是灰度发布的一种。已在线上的产品也可以使用。让一部分用户继续用A，一部分用户使用B，如果用户对B没什么反对意见，那么逐步扩大范围，把所有用户都迁移到B上面来。

A/B测试侧重点在于方案及数据反馈，是为了测试多个方案这中哪一个方案更受用户的青睐。 Web端常见，移动端因前后台均需修改相对复杂。测试内容一般有：标题信息、展示图片、页面格局、销售话术（文案）、激励。

一、可视化平台

价值

快速搭建部署

立体数据动态呈现

灵活搭配提升费效比

支持移动端数据

可视化的意义

观察数据变化,指导决策

工作汇报更清晰

可视化有助于更好地发现问题

有哪些优势

管理工作更简单

自动化提取数据、分析数据、总结数据,多维度显示数据属性和变量,使数据管理工作更简单

快速掌握有效数据

数据可视化提供了一种非常便捷的沟通方式,使运维和管理者能够更快地掌握和理解有用的信息,快速把握到数据的本质特征

更有阅读性

了解业务运行状况

数据可视化提供的实时信息,帮助管理者对整个业务运行情况进行走向判断、风险评估,根据自动分析总计的数据,使工作更高效

展示运维和结果

通过大屏可以清洗地展示运行结果和运维管理工作,帮助用户去关注并理解运营和整体业务性能之间的连接,更利于管理者和领导者的沟通

数据可视化过程

处理图表的常见错误

坐标轴处理不当

一种是为了夸大数据差异而对坐标轴起点不当截取
对坐标轴使用对数处理,从而减小了数据差异

图表拉升

当图表横纵坐标轴的比例异常也会影响数据信息表达,横坐标和纵坐标的比例在1:1到2:1之间会比较合适

取值间隔

在数据波动比较大的情况下,一旦间隔取值就会隐藏掉原来的趋势,从而得到完全不同的结果

数据过载问题

过多的信息图表、不必要的插图、阴影、字体和其他装饰会让数据看上去更加分散,大多数情况下,少即是多

访问轴数值设置不当

在处理定量数据时,对于较大的Y轴值来说,如果初始值设定到大于零,那么可能会截断某些条形值,影响数值的准确性

数值比例不清晰

饼图展示时,所有区域都要添加标签

混乱的交叉线

在图表上有大量的交换线会很快变得混乱,最好不要使用超过4个系列

热图颜色问题

使用具有不同阴影的单一颜色来显示突出级别更加合适

遵守的基本原则

知道数据可视化的目的

注重数据的比较

建立数据指标

建立数据指标才会有对比性

展示形式从总体到局部

先从总体看变化,再从局部看变化

注重听觉上的描述

增加图形的可读性和生动性

注意事项

数据图表主要作用是传递信息,不要用它们选技巧,不要追求过分漂亮,以反映业务问题为主

不要试图在一张图中表达所有的信息,不要让图表台沉重,适得其反

数据可视化是以业务逻辑为主线串联,不要随意堆砌图表

避免过度开发,什么数据都想展现 ,数据太多就选择最核心的数据指标、和正常偏差大的、能支持分析结论的

不要试图掩盖问题,回避“不良结论”,真实反映业务,暴露问题

避免过度设计,一半不适用3D、阴影,合理运用色彩同样能让图表显示的很高级

如何让你的信息图被记住

颜色是关键

包含6种颜色的可视化作品更令人难忘

复杂的图表更容易给人留下深刻印象

人类大脑钟爱曲线,圆形是记忆指数的另一项标志

基本柱形图与图表很容易被遗忘

图标、照片与人类可识别对象能够立即提高可视化作品的记忆指数

如何让数据可视化更有优势

明确需呈现的业务指标

首先,确认需求,重点介绍主要指标、次要指标和辅助指标

主要指标:反映核心业务,位于屏幕中央
次要指标:用于进一步阐述分析,位于屏幕两侧
辅助指标:是主要指标的补充信息,可不现实或显示在屏幕两侧或鼠标经过时显示

为指标选择合适的图表

柱状图:常用于类别间的比较,反映数据的差异
折线图:常用于反映数据随着时间变化而变化的趋势
饼图:常用于表示比例关系

排版设计,突出关键信息

主要指标位于中间
次要指标按优先级依次在主要指标周围展开,位于屏幕两侧
配色上,整体背景深色系,深蓝色系是百搭

提升数据可视化的技巧

避免使用饼图

条形图能使受众更容易理解和比较数据的相对大小

避免数据噪音

图表上的每一点信息都应该有存在的理由

使用简单易读的字体

无衬线字体即是那些文字边缘没有小脚的字体(Excel中默认的)

使用表格数字字体

使用相同细节和精度的数字

使用基础图形

直方图、条形图、维恩图、散点图和线形图

提升可视化图形的可读性

条件格式

可以根据分配好的数据界限,为数据展示提供精确的快速指示标

按规则过滤

指为数据添加快速筛选选项

添加层次结构

趋势线

格式化数据

可以相应的调整数据格式,如小数位数、货币缩写等

对数据排序

数据对比

图表标题

标题应该与图表有高度关联

一、项目规划

产品落地工作流程

项目启动

项目背景

项目目标

项目范伟

里程碑计划

主要风险

风险
影响程度
备注

组织架构

人员
职责

责任分工

交付物
负责人
审批人
审核者
参与者

流程机制

工具支持

任务跟踪：JIRA
文档共享：Confluence
代码管理：git

产品设计

工作流程

产品设计五要素

产品蓝图及框架示例

功能列表

业务流程图

功能结构图

信息结构图

页面流程图

常见的导航布局及组件

BRD/MRD/PRD

行业/竞品/产品分析报告

二、B端提示词工程

‼️前端UI提示词

https://www.youware.com/project/7hy2h9842l?enter_from=home

前端专业术语

各控件

按钮

输入框

导航栏

卡片

标签

背景

字体

分割线

通知/气泡

图标

进度条

侧边栏

页脚

加载动画

案例

PC端(极简主义-蓝色-Ant)

功能需求：

做一个提示词分类存放管理工具，PC端

页面样式：

主题色：蓝色

弹窗：极简白底

按钮：扁平色块

输入框：极简描边

导航栏：极简线条

卡片：渐变背景

标签：圆角填充

背景：纯色

字体：无衬线

分割线：极简细线

通知/气泡：极简描边

图标：扁平填充

进度条：极简细线

侧边栏：极简线条

页脚：扁平色块

加载动画：极简线条

文字段落字间距和行间距是常规的120%

技术选型

Ant Design

使用Google Fonts或其他CDN加载适合的现代字体

可引用在线图标资源（如Font Awesome）

采用响应式布局，适配不同屏幕尺寸和设备

支持深色模式（Dark Mode）和浅色模式切换

请生成完整代码，确保界面美观、功能完整、用户体验流畅，交互完整。

编写提示词

📢

要让Cursor从0生成原型稿,Cursor需要充当三个角色:

角色一:作为产品经理梳理需求,设计功能;

角色二:作为UI设计师根据产品经理提出的需求完成页面UI设计

角色三:作为前端工程师,代码实现UI页面

案例

B端页面

访销排程(自写)

企业信息管理系统

通用

app

通用

我想开发一个【】现在需要输出高保真的原型图，主要功能包括【】请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：

1、用户体验分析：先分析这个App的主要功能和用户需求，确定核心交互逻辑。2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理，用户流程顺畅。

3、高保真UI设计：作为UI设计师，严格遵循iOS设计规范(Human Interface Guidelines)，设计贴近iOS系统风格的界面，使用卡片式布局、圆角元素和适当的投影效果，确保视觉体验现代简洁。

4、HTML原型实现：使用HTML + Tailwind CSS生成所有原型界面，使用JavaScript实现基本交互功能，包括页面跳转、表单操作和数据模拟。代码文件应清晰分离为HTML、CSS和JS。

5、每个界面应作为独立的HTML文件存放，例如home.html、profile.html、settings.html, 使用index.html作为主入口，使用iframe方式嵌入这些HTML片段，并将所有页面平铺展示，方便整体预览, 每个独立页面之间应支持相互跳转，确保单独打开也能完整体验

真实感增强： - 界面尺寸应模拟iPhone 15 Pro（393×852px），并应用圆角边框（20px）。 - 选择与应用主题相关的图片，避免使用明显的占位图（如灰色块或标有"image"的框） - 图标和UI元素可使用Font Awesome或Material Icons等专业图标库 (通过CDN引用) - 背景和内容图片可从Unsplash、Pexels等免费图库选取，确保风格统一 - 添加iOS标准状态栏和底部导航栏，包含主页、小组件和设置三个选项卡。 - 使用符合iOS风格的日期选择器、开关组件和列表样式。请按照以上要求生成完整的代码，并添加必要的注释说明界面逻辑和交互设计考虑。

app提示词

带有社交功能的netflix中文app

高保真UI设计:作为UI设计师,设计贴近真实iOS/Android设计规范的界面,使用现代化的UI元素,使其具有良好的视觉体验

HTML原型实现,使用HTML+Tailwind CSS(或Boostrap)生成所有原型界面,并使用FontAwesome(或者其他开源UI组件)让界面更加精美、接近真实的App设计

添加顶部状态栏(模拟iOS状态栏),并包含App导航栏(类似iOS底部Tab Bar)

待办app

我想开发一个【待办】iOS App现在需要输出高保真的原型图，主要功能包括【1、创建待办：支持分类、优先级、子待办、截止日期、干系人2、展示待办支持基于分类、截止日期、优先级、干系人分类展示】请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：1、用户体验分析：先分析这个App的主要功能和用户需求，确定核心交互逻辑。2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理，用户流程顺畅。3、高保真UI设计：作为UI设计师，严格遵循iOS设计规范(Human Interface Guidelines)，设计贴近iOS系统风格的界面，使用卡片式布局、圆角元素和适当的投影效果，确保视觉体验现代简洁。4、HTML原型实现：使用HTML + Tailwind CSS生成所有原型界面，使用JavaScript实现基本交互功能，包括页面跳转、表单操作和数据模拟。代码文件应清晰分离为HTML、CSS和JS。5、每个界面应作为独立的HTML文件存放，例如home.html、profile.html、settings.html, 使用index.html作为主入口，使用iframe方式嵌入这些HTML片段，并将所有页面平铺展示，方便整体预览, 每个独立页面之间应支持相互跳转，确保单独打开也能完整体验

真实感增强： - 界面尺寸应模拟iPhone 15 Pro（393×852px），并应用圆角边框（20px）。 - 选择与应用主题相关的图片，避免使用明显的占位图（如灰色块或标有"image"的框） - 图标和UI元素可使用Font Awesome或Material Icons等专业图标库 (通过CDN引用) - 背景和内容图片可从Unsplash、Pexels等免费图库选取，确保风格统一 - 添加iOS标准状态栏和底部导航栏，包含主页、小组件和设置三个选项卡。 - 使用符合iOS风格的日期选择器、开关组件和列表样式。请按照以上要求生成完整的代码，并添加必要的注释说明界面逻辑和交互设计考虑。

三、产品生命周期管理流程

想清楚

需求调研
用户调研
需求分析
竞品分析
产品立项
可行性研究报告
产品规划

做出来

功能架构
信息架构
原型设计
UI设计
产品开发
产品测试
产品验收
产品上线

推出去

产品发布
销售工具制作

产品档案
演示PPT
操作手册
功能参数
宣传软文
宣传画册
宣传网页

产品宣讲
产品培训
实施服务
产品迭代

四、常用资料

行业报告数据源

AI制作PPT资料

一键生成PPT的常用AI工具介绍

AiPPT 美图AI PPT 必优ChatPPT 讯飞智文 GPT-PPT 百度文库AI助手 ChatBA 比格AI PPT iSlide AI 轻竹办公

PPT内容生成的常用AI工具介绍

文心一言 AiPPT 讯飞智文 KimiChat iSlide AI ChatGPT 通义千问必优ChatPPT 腾讯元宝轻竹办公

举例

举例工具：文心一言。比如输入“帮忙生成一份技术部的年终总结报告PPT的内容，列个大纲，并进行内容填充”

视觉设计的常用AI工具介绍

稿定AI 即时AI 创客贴设计美间AI Looka 美图设计室 Magic Design Pixso AI MasterGo AI Creatie

多媒体处理的常用AI工具介绍

常用AI图像工具介绍

Midjourney Stable Diffusion 文心一格通义万相稿定AI Remove.bg 千图设计室AI助手 Bigjpg 美图设计室 Upscayl

常用AI视频工具介绍

Sora Stable Video 文心一言4.0 ChatGPT4.0 Runway 度加创作视频腾讯智影 PixVerse Story.com 艺映AI

常用AI音频工具介绍

讯飞智作 Stable Audio GPT-SoVITS 大饼AI变声快转字幕腾讯智影魔音工坊悦音配音 Speechify ElevenLabs

可视化图表的常用AI工具介绍

E言易图 Tableau 图表GPT 亿图脑图 Excelly-AI Graph Maker TreeMind树图 Looker 办公小浣熊 Flourish

相关AI工具推荐-内容创建与优化

ChatGPT

文心一言

KimiChat

通义千问

腾讯元宝

AiPPT

必优ChatPPT

百度文库AI助手

比格AI PPT

轻竹办公

目录渲染

零碎整理数据分析工具渠道推广一、可视化平台价值数据可视化过程一、项目规划产品落地工作流程项目启动产品设计常见的导航布局及组件 BRD/MRD/PRD 行业/竞品/产品分析报告二、B端提示词工程 ‼️前端UI提示词编写提示词案例三、产品生命周期管理流程四、常用资料目录渲染

🧃产品学习笔记

图标资源库

B端组件库/规范

零碎整理