Bruce的博客 - 产品入门
type: channel
link: https://wanglin.blog/index.php/tag/%E4%BA%A7%E5%93%81%E5%85%A5%E9%97%A8/
items: 原型设计｜Figma基本操作
items: 转载｜什么样的人适合做产品经理？
items: 产品学习笔记｜草图、线框图、原型图、样机模型图

原型设计｜Figma基本操作
type: item
date: 2024-01-01T16:40:00+08:00
description: 一、基本视图操作移动画布：Space空格键缩放画布：Ctrl + 鼠标中键滚轮100%显示画布：Shift + 0快速显示所有画布：Shift + 1隐藏左右两侧面板：Ctrl + \帮助文档：查看键盘快捷键二、Figma工具栏移动工具复制：按照鼠标拖拽方向复制：option(alt) + 鼠标拖拽复制时保持方向：option(alt) + Shift + 鼠标拖拽重复复制：（1）option(alt) + Shift + 鼠标拖拽（2）command(ctrl) + D修改图形圆角按住图形四周的小圆圈按住option(alt)修改单独的某一角度/在工具栏修改整理选择所有图形对象，点击右上角的整理工具（水平/垂直居中/左对齐/右对齐......）鼠标移动到图形中央，点击小圆圈拖拽可以交换图形位置；点击图形之间的竖线可以调整间距二、缩放工具相较于使用移动工具进行缩放，使用缩放工具可进行等比例缩放三、Frame与组编组：ctrl + g取消编组：ctrl + shift + g批量给图形填充颜色：点击Fill右侧的+选择所有的图形，设置为画框：option(alt) + g此时，画框大小可以随意调整，超出画框外的部分可以进行裁剪。移动子集图形图形位置后，父集不随之变化；给Frame设置背景色、描边颜色需要弹性布局/自适应嵌套画框强制嵌套：按住Ctrl不嵌套：按住空格键四、Figma 形状工具应用形状类型：矩形、多边形、圆形、图片、线条、箭头、星形遮罩：上层为图像，下层为遮罩，创建蒙版快捷键Ctrl+Alt+M，再按一次是取消功能更像是对图像进行裁切，便捷操作为可以使用Frame或者放置图片功能Ctrl+Shift+K布尔运算：两个图形进行布尔运算后，点击Flatten Selection后才能真正将两个图形变成一个完整的形状。五、钢笔工具主要用来绘图ESC键：断线直线、曲线、折线平滑锚点和转折锚点之间的转换：点击锚点后按住Command(Ctrl)键减点：按住ALT（option）加点：鼠标直接放在路径线上即可拖动锚点：使用移动工具按住ALT（option）键，可以只调整一边的曲线弧度双击绘制完的路径线，可以使用颜料桶进行上色处理。六、文字工具文字快捷键TFigma属性栏数值调整区域都可以按Alt结合鼠标左键进行调整直接复制文字会把文字属性一并复制过去，通过复制为文本解决此问题复制属性快捷键Ctrl+Alt+C，黏贴属性快捷键Ctrl+Alt+V可通过保存文本样式进行复用或者推送给团队使用网页链接可以在文字上直接粘贴，就可以快速制作跳转链接七、Figma的属性栏功能对齐快捷键填充纯色填充线性渐变点击色块，调出色块面板保存样式：点击+旁的四个点，在颜色样式中点击+，然后保存样式。修改样式：右键选择编辑样式描边（stroke）操作同填充点击三个点（···），可进行高级设置修改描边的属性；效果内部模糊外部模糊图层模糊背景模糊：磨砂玻璃效果（需要将填充的透明度降低导出使用Slice工具，选择要导出的图，即可将所有图全部导出八、组件管理将初始组件设置为母版组件：选中组件后，点击上方的菱形按钮；或者选择多个组件，点击上方菱形按钮下拉选项复制模板组件生成实例组件，实例组件的logo是一个标准菱形，区别于模板组件；点击实例组件，鼠标右键单击，选择“go to mian componet”即可转到模板组件；修改初始组件会直接影响实例组件，如不需要影响，对实例组件进行分离实例即可Ctrl+Alt+B复杂组件管理——变体选择母版组件，选择不同状态组件，点击合并为变体，即可将多个组件组合为一个组件。当复制组件的时候，可以修改组件的状态设置变体组件前需要进行批量命名命名分为三部分：版本（ios, Android）、状态（默认、点击、禁用）、开关状态（true, false，涉及开关键必须用英文）选择不同组，Ctrl + R重命名命名后，要添加英文逗号第二个命名部分，要添加“当前名称”九、Figma布局约束和栅格当元素组合为画板后，可以通过使用约束工具对元素进行调整约束常用于适合弹性布局的界面中当父级画框进行大小拖动时，只会影响子级，不能跨级控制按Shift可以加选或减选约束控制栅格工具栅格工具可以应用在UI（4/6）以及网友设计中（12/24）需要弹性布局就选择“拉伸模式”，其余情况选择“左”、“右”，“居中”栅格支持保持样式十、自动布局选中元素后，按住Shift + A，然后点击填充，添加颜色/设置圆角即可需要有一个大图层管理里面的小图层适应内容：根据文字数量变化自动调节固定宽度：组件的宽度和高度固定填充容器：根据外轮廓的大小变化，内部元素大小也随之改变

转载｜什么样的人适合做产品经理？
type: item
date: 2023-12-31T00:02:00+08:00
description: “真是360行，行行转产品！”"群主最好写一下哪些人不适合做产品，免得入行坑人不倦，害人害己。"原本按照分享计划，这篇文章应该是<如何零基础准备产品实习生面试？>，差不多已经完成文章大纲时，《产品经理成长训练营》群一个产品经理的抱怨。细问之下，发现他入职新公司不久，接手前产品经理工作，发现原产品逻辑混乱，BUG一堆。而匆忙交接时需求文档又很多缺失，整一个大烂摊子，产品进展缓慢，焦头烂额。对于他这份无奈，曾经有过在无任何说明文档的基础上，做百万级用户量的产品大改版的经历，我感同深受！遂临时改写这篇文章。You got a dream, you gotta protect it. People can't do something themselves,they wanna tell you you can't do it.If you want something, go get it. Period.（如果你有梦想，就要去捍卫它。那些一事无成的人，只会告诉你，你也成不了大器。如果你想要什么，就要去努力实现。就这样！）很喜欢上面这段话，也一直告诫自己不要轻易的给年轻朋友下结论，尤其是重要的人生选择。所以，我今天依然不会也不愿写哪些人不适合做产品这样的文章。学过数学的都熟悉一个经典的证明疑难问题的方法—反证法。所以我会依据经验和观察，写一写优秀的产品人一般需要具备什么样的素质和能力，诸位产品新人可以作为参照。我把它归纳为：五能力，四颗心，三种爱，二钻研，一初心。五能力：沟通能力、逻辑能力、学习能力、抗压能力、协调能力四颗心：责任心、耐心、同理心、好奇心三种爱：兴趣、思考、成就二钻研：懂行业、精业务一初心：坚持自己做产品的初心一、为什么需要具备五种能力？看过苏杰老师《人人都是产品经理》这本入门书的，都应该大体上了解产品工作主要涉及哪些方面。相对于设计师或者程序员专业硬实力，产品经理的专业技能门槛比较低，这个岗位更多的是考查软实力。在这些软实力中， 沟通能力 是排在第一位的！做产品立项，分析需求，设计原型，需求评审，设计改图，程序员改BUG，产品宣讲，用户调研，竞品分析，进度管控，争取资源等等，统统需要沟通。在这里我只是想强调一点，沟通能力不是说扯淡能力，忽悠能力，而是指有效的信息交换。简言之，很明确的把你的问题描述清楚，很快速准确的理解别人的谈话重点，善于分析谈话背后的本质，能在多人谈话中始终引导话题走向，这才是真正的沟通能力。如果沟通能力不佳，又想做产品，兼职做一段时间的老师是一个有效的训练方式。不过切记不要勾搭女(男)学生，也不要误人子弟。逻辑能力 是排在第二位的。很多产品经理被人调侃或自嘲是产品汪，主要就是逻辑能力不过关，考虑问题不够全面，经常需求评审时，被程序员揪住逻辑错误，问的哑口无言，焦头烂额，从而威信荡然无存，试问这样的人，大家还怎么会相信他能指望带领大家走向人生巅峰？关于自我逻辑能力的判断，推荐看看<批判性思维>、<金字塔原理>、<清醒思考的艺术>、<博弈论>，如果你能很快进入这些书的阅读状态，那说明逻辑能力尚可。摩尔定律提到芯片性能翻倍的周期是18个月，互联网新技术的产生和迭代周期更短，而互联网产品迭代速度尤甚。在这个快节奏的行业里，你想不被淘汰，就需要快速更新你的知识结构，就必须具备 快速学习能力 。它包含自学能力、搜索能力、信息整合能力、数据分析能力等等。抗压能力和协调能力 ，对于产品经理也显得十分重要！做产品经常会遇到资源不足，市场变化快，运营数据不及预期，产品改版被吐槽，用户量忽然暴跌，一夜间产品归零（参考自媒体被微信封号，AppStore下架、手游等），这些都需要产品经理具备远超常人的抗压和协调能力。做产品5年来，我从自信，到怀疑，到悲观，无时无刻不缺乏安全感。作者：风舟说链接：https://www.jianshu.com/p/ada6838e5aff来源：简书

产品学习笔记｜草图、线框图、原型图、样机模型图
type: item
date: 2023-11-12T00:18:00+08:00
description: 线框与原型的关系，就像建筑蓝图（建筑的详细方案）和样板房一样。你可以尝试居住在样板房中，但不能指望在蓝图中舒适地呆着——因为蓝图只是一张纸。样板间和设计蓝图是建筑中不同的设计沟通表达方式：蓝图用作建筑计划，并应指定应如何建造建筑样板间为未来的住户提供了居住体验可以将这样的区别应用于草图、线框图，原型和模型。他们外形不同，沟通方式不同，目的也不同。选择的原则明确你要解决问题了解目标用户群体竞争对手所做工作设定整体产品需求横向对比草图草图（Sketch）是在一张纸上或用数字工具徒手画的，提供一个基本概念表现。在设计过程的概念化和初始可视化阶段可能会非常有用。草图只需要粗略绘制，无需细节化，能帮助传达中心思想即可。线框图线框图（Wireframe）是一种低保真度的设计产物，就像是城市地图，每条街道都显示在地图上，你可以在地图上感觉到城市的建筑，但无法感知城市的美丽。线框图应该清楚展示：主要内容组成（是什么？）信息主要结构（在哪里？）用户描述和基本可视化绘制线框图时应当注意：不要给线框图添加太多的细节。线框图是 产品的骨架结构，目的是评估设计而不是修饰细节，因此只添加在页面/屏幕上显示的基本元素；线框图通常是用黑色和白色创建的，但也可以使用有限数量的颜色（一种或两种对比色）来体现视觉重心；添加简短的“指向重点”注释。向团队展示线框时应当包含注释，辅助理解交互逻辑和设计意图；原型图原型图（Prototype）是产品中、高保真度的展示，是一个应用程序/网页的工作模型，旨在模拟用户与界面的交互，与最终的体验非常相似。原型图应该允许用户：体验内容以及与界面的交互以类似于最终产品的方式测试主要交互原型在设计过程的功能设计阶段非常有用，有助于：评估用户旅程。 帮助产品团队识别交互流中的潜在问题；可用性测试。 通过在用户中测试设计，在开发前建立信心；制作原型图时应当注意：为原型图选择合适的颗粒度；原型逼真程度与思维逼真程度匹配，可以是低、中、高逼真度。设计越类似于真实产品，从测试者得到的反馈越详细；样机模型样机模型（Mock up）是设计的中高保真可视化，模型提供了产品设计的视觉外观，并且对于评估设计的外观和感觉非常有用。样机模型的主要作用是：评估视觉设计决策：确认颜色、排版和图像是如何协同工作的；尝试不同类型风格：设计师可以尝试不同的颜色组合，确认用户满意的配色方案；评估设计视觉一致性：确保产品中所有页面具有整体性，而不是单个屏幕的集合；评估设计的可访问性：设计应该便于用户理解和使用产品；关注色彩对比。总结类型使用阶段用途特点草图（Sketch）设计过程的概念化和初始可视化阶段脑暴手写、简约线框图（Wireframe）项目的初始阶段文档、快速沟通黑白灰、界面初始描述原型图（Prototype）用户测试阶段，开发之前用户测试可交互模型（Mockup）收集反馈阶段收集反馈、拉取投资静态、视觉化个人理解草图 绘制是设计团队在脑暴环节、沟通交流设计的过程中，使用纸、笔将构想快速呈现时使用的一种方法；线框图 是在草图基础上加工整理，按照一定的逻辑将交互设计的全部内容、整体逻辑，以线框形式尽可能全面、简要呈现；原型图 是产品经理根据线框图绘制的详细的图示，更注重于页面内和页面间的交互性；是在需求评审阶段向用户、相关方尽可能详尽得展现产品设计的一种手段样机模型 主要是 UI 设计师根据原型图、需求文档等设计的图示，更专注于视觉设计和产品风格；主要参考来源https://www.woshipm.com/pd/4185329.html "详解草图、线框、模型和原型"https://mp.weixin.qq.com/s/j56WE0fW1u9sHy-JAJKyBQ "线框图、原型和Mockup——区别是什么？"https://www.sketch.com/blog/wireframe-vs-mockup-vs-prototype/ "Wireframe vs mockup vs prototype: What’s the difference?"