PM进阶之路 | 产品设计规范
七大定律：
概念：
Alan Cooper（交互设计之父）：除非有更好的选择，否则就遵从标准。
许多设计准则都基于人类心理学（人们如何感知、学习、推理、记忆，以及把意图转换为行动）。
菲茨（Paul Fitt）定律：
菲茨定律所提出的人机界面设计法则，主页定义了游标移动到目标之间的距离，目标的大小和所花费的时间之间的关系。
T：完成移动所需的平均时间；
a：光标开始/停止时间；
b：光标移动速度；
D：从起点到目标中心的距离；
W：目标的宽度。
分析：
在页面中，大而近的目标区域意味着用户不需要做太精细的调整就可以轻易地到达目标。
反之，小而远的目标区域则意味着使用者需要将鼠标移动较长一段距离，并在光标正确地对准目标前做一系列精细的调整动作。这将耗费很多时间，并给人以难用的印象。
总而言之，距离越近，初始动作因为幅度太大而超出目标区域的风险就越小。
启示：
1.按钮等可点击对象需要合理的大小尺寸。按钮加大一些，点击更容易一些；
2.根据用户使用习惯合理设计按钮的相对和绝对距离。让相关的内容更靠近彼此。这样做不仅可以在视觉上增强用户对它们相关性的认知，还可以减少光标在它们之间移动所需的距离和时间；
3.屏幕的边和角很适合放置项菜单栏和按钮这样的元素，因为边角是巨大的目标，你不可能用鼠标超过它们。不管你移动了多远，鼠标最终会停在屏幕的边缘，并定位到按钮或菜单的上面；
4.对于权重高的信息和功能，尽量放置在页面靠上的中间核心区域；
5.对于不重要的信息和功能，则放置在角落或者页面下方的区域。
应用：
1.可点击对象（按钮）需要合理的大小尺寸。
2.参考用户使用手机习惯。
3.减少绝对距离：
距离目标越近，用户点击越快；所以我们通常会缩短当前交互元素和目标元素的距离，来提高用户的使用效率和交互体验。
通常会把按钮和常用操作元素放在页面下方的易操作区域。
4.减少相对距离：
在两个或多个操作中，通过缩短可交互元素之间的距离来提高用户的使用效率。
5.屏幕的边缘和角落无限大：
所以屏幕的边角适合放置菜单栏、按钮这样的元素，不管箭头移动多远，最终会停在屏幕的边缘并定位到菜单上；这个方法在Windows和Mac系统中都得到应用，Windows的关机键在屏幕左下角，两大系统都把dock栏放在屏幕的底端，菜单放在屏幕的顶部。
移动端也同样适合，边角一般会放置菜单相关的元素。
席克定律：
一个人面临的选择（n）越多，所需要作出决定的时间（T）就越长。
在人机交互中界面中选项越多，意味着用户做出决定的时间越长。
用数学公式表达为：RT=a+b·log2(n)
RT：反应所需时间；
a：与做决定无关的花费时间（阅读，操纵花费的时间）；
b：根据对选项认识的处理时间；
n：具有可能性的相似答案总数。
当选择增加时，我们做决定的时间就会相应增加。
产品在服务于用户时“时间就是关键”，所以我们要将做决定的选项减少到最少，以减少所需反应的时间，降低犯错的概率。
也可以对选项进行同类分类和多层次分布，提高用户的使用效果。
分析：
看到上面对于席克定律的说明，我们可以知道，用户在某一场景下对选项的反应时间取决于三个因素：
1.前期的认知和观察时间；
2.根据认知后，处理的时间；
3.选项的数量。
启示：
所以我们在产品设计时可以使用如下几种方法：
1.分类选择；
2.限制选择数量；
3.分布解决；
4.隐藏/删减很少使用的选项。
应用：
1.分类选择提高用户效率。
2.限制选择数量，减少用户决策时间。
3.分步解决，提升用户操作体验。
4.隐藏/删减很少使用的选项，降低错误点击率。
总结：
席克定律：
1.让用户更快地找到他想要的信息；
2.信息的显示（文字、图片）能让用户很快地理解；
3.选项尽量少，但是要做到全覆盖。
奥卡姆剃刀原理：
“如无必要，勿增实体”，即如有两个功能相等的设计，那么选择最简单的。
奥卡姆剃刀原理也被称为：“简单有效原理”，它是由14世纪逻辑学家、圣方济各会修士奥卡姆威廉（William of Occam，约1285年至1349年）提出。
这个原理告诫人们“不要浪费较多东西去做用较少东西也可以做好的事情。”
“less is more - 少就是多。”
分析：
我们可以从以下四种方式运用奥卡姆剃刀原理，进行产品设计：
1.只放必要的东西；
2.减少不必要段落；
3.减少多余弹框设计；
4.小白规则。
应用：
1.只放必要的东西：
一个简洁的网站能让用户快速找到他们所找到的东西，如果你的网站充斥着很多无关紧要的东西，比如小弹窗，无用链接，用户会因为不能快速找到自己想要的东西而关闭网站。
2.减少不必要的段落：
雅虎首页的内容过多，干扰用户搜索；
最大片的内容区域给了各种新闻和广告，最重要的搜索框在顶部所占的位置却很小，干扰了用户的正常操作。
3.减少多余弹框的设计：
①不要在用户第一次登录时就立马出来：别人都没用你的产品，你就要别人评价，是想怎么样？
②注意弹框的频率，别一会儿就弹一会儿就弹的，弹出鱼尾纹怎么办？
③专门定个入口，有些用户确实人品不错，他会在使用之后去给产品评价，所以留个这样的入口，层级可以深一点，让用户自己去操作，会更好。
4.小白规则：降低用户的学习成本。
总结：
1.产品要简洁，能不做的功能就别做，能少做就少做；
2.把用户当小白。
泰斯勒定律：
泰斯勒定律又被称为：“复杂守恒定律”。
中心思想是：“每一个程序都有必然无法缩减的复杂度，唯一的问题，就是谁来处理它。”
分析：
1.复杂总是存在，唯一需要确定的是让用户复杂还是系统复杂；
2.从体验感的角度，应该让系统复杂，但是需要考虑技术层面能否实现系统复杂。
总结：
泰斯勒定律，复杂守恒定律，每一个程序有必然有其与生俱来、无法缩减的复杂度，唯一的问题，就是谁来处理它。
要想提高用户体验，让用户操作简单，我们背后的程序复杂程度就要增强。
神奇数字7±2法则：
1956年，乔治米勒对短时间记忆能力进行了定量研究，他发现人类大脑最好的状态能记忆含有7（±2）项信息块，在记忆里5-9项信息后人的大脑开始出错。
应用：
1.移动端底部标签栏一般不会超过5个。
2.银行卡上的分段数字。
总结：
1.用户的记忆上限是9项，超过这个就不容易记住；
2.结合席克定律，如果要让用户快速记住选项，那么选项尽量不要太多，最好别超过5个。
接近法则：
接近法则是格式塔心理学理论中我们最熟悉的，也最常运用的一项法则：当对象离得太近的时候，意识会觉得它们是相关的。
应用：
1.用空间间隙来做出区分，让人在移动的场景更能快速地寻找想要的信息。
总结：
1.形似的信息和功能，互相更为靠近；
2.接近法则也就是所谓的分类原则，包括信息分类和功能分类。
防错原则：
防错原则是通过设计来将过失降低到最小化，该原则及时地告诉用户哪里操作错了。比如在填写表单时，系统及时给出报错提示。
重要、谨慎的操作，系统通常会有二次确认。
为用户提供撤销的机会，为用户提供纠错的机会。
分析：
1.在关键操作上，给用户提供容错的空间，提供缓冲空间；
2.防错设计要考虑到用户体验感，不要为了缓冲而缓冲。
总结：
1.向用户提醒犯错的可能，并提供给用户挽回错误的方法；
2.当某个操作能够产生重大影响时，增加该操作的复杂性。
市面上两大移动操作系统：
iOS系统：
1.Apple（苹果）公司
2.iOS系统是封闭的，只在苹果公司自家的iPhone、iPad、iPod等产品上使用。
Android系统：
1.Google（谷歌）公司
2.开源系统，各家移动设备厂商都可以使用并且进行自行定制。
官方设计规范
导航：
如何将已经确认好的产品结构，应用到移动端产品设计？首先要确定什么？
答案：要确定导航方式。
舵式导航：
在扁平式导航的基础上增加一个更扁平的入口，方便用户在不同模块之间跳转时，随时可以进入这个舵式模块，并完成使用流程后还能回到刚才的位置。
总结：
1.用一个多功能键，把同等级的操作收纳到一起；
2.适用于社区发布类的产品。
抽屉式导航：
一般采用将导航主体隐藏在App侧边的方式，以一个按钮来呼出导航，在使用完成之后再使用相同的按钮隐藏起来。
总结：
1.使用产品功能不多，且用户使用频次不高的场景。
沉浸式导航：
又叫“内容驱动式导航”或“体验驱动式导航”，是沉浸式设计的一种表现。
在内容中自由地切换，或是内容本身定义导航。
游戏、阅读以及其他沉浸式App一般都采用这种导航结构。
总结：
1.屏蔽一切的外界干扰，比如遮挡状态栏，用户看不到时间、电量等信息；
2.适用于阅读类的内容详情页、电商类的商品详情页。
导航设计原则：
1.根据产品的特性，导航可以混合使用，体现形式多样化；
2.不能为了追求多样化，滥用导航类型。
界面元素：
已经确定导航架构，骨架有了，接下来做产品设计该添加什么？
答案：页面具体内容-界面元素。
界面元素的类别：
1.栏：状态栏、导航栏、标签栏、工具栏（QQ聊天界面下方）、搜索栏、范围栏；
2.内容视图：列表视图、卡片视图、集合视图、图片视图、文本视图；
3.控制元素：分段选择控制、滑块、开关、选择器、按钮等，产品行为或显示的信息对应的操作元素；
4.临时视图：模态视图、警告视图、操作列表、吐司提示、临时向用户提供重要的信息，或者提供额外的功能和选项。
栏：
内容视图：
视图就是App内信息的主要的展现形式。
关于内容列表的文字和图片的权重分配：
1.在列表中，信息的传递方式决定文字和图片的权重：如果信息依赖于文字传递，则文字权重更高；如果信息依赖于图片传递，则图片的权重更高。
视图使用注意事项：
1.在App中，这些视图都会混合出现，很少会有单一的视图形式；
2.一个页面也不会只有一种视图的表现形式；
3.有些视图类型没有完全的界限，比如列表视图、卡片视图、集合视图。
控件元素：
在页面起到某种作用的，都可以叫控制元素。比如一个可点击的按钮，一条用于区分界限的线条等。
分段控件通常用来作为不同视图的入口。
范围栏和搜索栏一起出现，它让用户可以进一步筛选搜索结果的范围。当类目数量较多时，且一行宽度不够排列时，可通过左右滑动范围栏里面的类目可查看更多的类目。
临时视图：
有些内容不需要固定展现给用户，怎么给用户做提示？
答案：临时视图。
什么是临时视图？
让用户只有在完成当前的任务或关闭一个信息或页面之后，才能去做其他的事情；降低了交互层级。
临时视图的特征：
当屏幕上出现临时视图时，用户必须通过点击按钮或是其他特殊方式才能退出；
例如：临时视图可以占据整个屏幕，也可以是在上级视图之上（比如气泡弹出框），或者屏幕的一部分。但是这些临时视图多数都会有“完成”和“取消”按钮来退出视图。
临时视图种类：
模态视图、警告视图、操作列表、吐司（Toast）。
模态视图：
1.模态视图会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其他操作；
2.非模态视图则不会影响用户的操作，用户可以不对其进行回应。
警告视图（警告框）：
用户在操作APP时，有时候会出现误删等敏感操作，或者APP想要获取用户的位置，调用相册、相机时，就需要一个视图弹框来警告自己操作是否继续进行，这时候用到的临时框就是由标题、正文、按钮等组成的警告视图。
只有用户授权，APP才能获取用户的私人信息，比如：当前位置、日历、联系人、提醒事项以及照片。
图为APP自身根据用户操作弹出的警告框，根据APP整体UI设计的自定义控件样式。
注意事项：
1.只有在APP确实需要获取私人信息时，再向用户发起请求。
否则有窃取隐私的嫌疑。
2.当需求不明显时，向用户解释为什么你的APP需要这些信息。
开诚布公地告诉用户许可的必要性。
3.在APP一启动时就请求授权那些对运行APP至关重要的信息（通知）。
必要许可越早请求许可，越容易让用户接收。
4.不要随便请求位置信息。
这个数据很敏感。
操作列表：
比如用户在发布朋友圈的时候需要弹出是拍摄还是选择相册已有照片，这时弹出的内容就是操作列表。
用户在使用APP时，听到好的音乐、看到好的文章、视频或者看到喜欢的商品时会产生分享、收藏的欲望；而当前的页面是无法满足这么多的操作的，需要加一个临时视图将这些操作都放出来，这时候用到的临时框也是操作列表。
吐司：
概念：不用点确定与取消就会自动取消的、用来提示网络不好或者更新内容的临时框。
Toast不需要用户操作，一般维持的时间是1秒到1.5秒后自动消失；时间太短用户没办法感知，时间过长又没有必要。
由于移动端的使用场景很复杂，用户执行了某一个操作时，很多时候APP并不能立即反馈给用户操作结果，这个时候弹出一个Toast提示用户已经执行了该操作，会显得很人性化，这就是用户体验。
提示用户操作错误或者正确，例如经常会提示用户：登录成功、下载失败、密码输入错误。
Toast大量应用在“聚合资讯类应用”、“微博类社区平台”和“电商类UGC入口”有效地通过数字通知用户内容更新数，引导用户浏览以增加产品粘性和用户停留时长。
关于弹框和Toast的区别：
1.弹框需要用户做操作才能小时，Toast会自动消失；
2.当需要用户对信息做抉择时，用弹框提示；当仅仅是告知用户某个信息，用Toast；
3.Toast可以称为吐司、弱文案。
临时视图的使用规则：
1.临时视图首先使用在用户使用频率相对低的页面；
2.临时视图永远浮于当前页面上，服务于当前任务；
3.使用临时视图可以减少交互层级，降低用户记忆成本（用户不必考虑返回上一页是什么内容）；
4.破坏或崩溃性的提示以及授权等操作使用警告框，在当前页面要交互操作的，根据呈现操作内容多少使用操作列表或模态视图，临时提示性内容使用Toast。
使用临时视图的注意事项：
1.尽量减少临时视图的使用；
操作列表、警告视图或模态视图会中断用户操作，体验不佳。
2.提供一个明显且安全的方式，退出模式；
体验不佳，所以用户想走时要容易走；
3.保持临时视图的简单、简单且集中；
体验不佳所以尽量简洁明确；
4.请尽量使用能够明确说明任务的标题；
除非不得已，尽量不要玩文字游戏。
5.只有在传达关键以及需要操作的信息时才使用警告视图；
因为体验更不佳。
6.尊重用户的推送通知偏好设置；
警告视图也常用来做推送，如果用户明确不要就不要硬来。
7.不要再弹出框上方再显示模态框；
弹窗之上再弹窗时产品经理无能的表现。
数据键入的临时视图：
无论是点击界面元素还是使用键盘，键入信息都是一个乏味的过程。
当一款产品还没有提供实际的功能，就要求用户大量地键入内容，会导致用户体验与参与的进程变慢，用户就可能会很快失去耐心，甚至完全放弃这个产品。
注意事项：
1.尽量显示选项；
能选择不填，降低操作频次与复杂度。
2.尽可能地从系统中获取信息；
有已知数据可用最好不要用户重新输入。
3.提供合理的默认值。
有默认值可用最好也不要用户重新输入；
4.只有在收集完必要的信息之后才能进行下一步。
要键入一次搞定不要反复为难用户；
5.立刻验证填写信息-实时纠错。
能实时验证的不要等到最后再告诉用户错了；
6.只有在必要时使用文本信息；
输入文本操作太多了。
7.将信息列表化以高效预览；
追求一目了然。
总结：
1.临时视图使用的注意事项：体验不佳，所以尽量简洁明了；
2.数据键入时的注意事项：减少用户操作。
小程序：
概念：
一种不需要下载安装，即可使用的应用。
优势：
1.开发成本低；
2.流畅的使用体验；
3.庞大的流量池可供使用；
4.用完即走，不占用手机内存，但是有使用记录供用户可方便地再次找回产品。
微信小程序接入流程：
注册：
在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。
小程序信息完善：
填写小程序基本信息，包括名称、头像、介绍及服务范围等。
开发小程序：
完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。
提交审核和发布：
完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。
微信小程序注意事项：
1.选择账号类型以后不可更改；
2.每个邮箱仅能申请一个小程序。
小程序设计规范：
重点突出：
反例示意1：此页面的主题是查询，却添加了诸多与查询不相关的业务入口，与用户的目标无关，易造成用户的迷失。
纠正示意1：去掉任何与用户目标不相关的内容，明确页面主题，在技术和页面控件允许的前提下提供有助于用户决策和操作的帮助内容，比如最近搜索词等。
反例示意2：操作没有主次，缺乏引导，让用户无从选择。
纠正示意：首先要避免并列过多操作让用户选择，在不得不并列多个操作时，需区分操作主次，减轻用户的选择难度。
总结：
页面元素突出考虑的因素：
1.位置：是否在中间的核心位置，还是在屏幕边缘；
2.尺寸：尺寸大小对比；
3.视觉效果：颜色深度区分，更深的颜色，视觉效果更突出。
流程明确：
为了让用户顺畅地使用页面，在用户进行某一个操作流程时，应避免出现用户目标流程之外的内容而打断用户。
小程序菜单：
1.小程序的所有页面，都在右上角放置官方菜单；
2.样式不可修改，但可选择深浅两种配色；
3.小程序菜单位置固定，设计时预留出该位置；
4.若需要在此区域附近放置交互元素，要特别注意交互事件是否会冲突，不要产生误操作。
开发者可在满足可用性的前提下，从微信提供的深浅两套配色的小程序菜单中选择合适的方案，以适应小程序页面设计风格。
页面内导航：
1.可在页面内添加自有导航；
2.保持不同页面间导航一致，指向清晰，有路可退；
3.受限于手机屏幕尺寸的限制，小程序页面的导航应尽量简单；
4.建议自有导航样式与微信官方小程序菜单样式保持一定差异，以便区分。
注意事项：
1.小程序内可以添加标签分页（Tab）导航；
2.标签分页栏可固定在页面顶部或者底部；
3.标签数量不得少于2个，最多不得超过5个，建议标签数量不超过4项；
4.一个页面也不应出现一组以上的标签分页栏；
5.小程序首页可选择微信提供的原生底部标签分页样式，该样式仅供小程序首页使用；
6.标签的图标样式、文案以及文案颜色可以自定义。
导航颜色定义规则：
小程序导航栏支持基本的背景颜色自定义功能，选择的颜色需要在满足可用性前提下，和谐搭配微信提供的两套主导航栏图标。
顶部标签栏：
页面加载：
结果反馈：
特殊功能：
PM进阶之路 | 产品设计规范相关推荐
- PM进阶之路 | 用户端产品设计
MVP设计: 硅谷创业家Eric Rise在其著作<精益创业>一书中提出了"精益创业"(Lean Startup)的理念,其核心思想是,开发产品时先做出一个简单的原型- ...
- PM进阶之路 | 初识产品经理
前言 前段时间,萌生了加深产品学习的想法,因此上网找了一些课程.书籍查看. 为了加深学习的印象,近期准备将学习过程中的知识点整理到简书里,希望也能够帮助到有同样想学习产品知识的小伙伴~ 产品经理岗位要 ...
- 产品创新案例分析｜大疆如何从初创到无人机帝国的进阶之路
与智能手机.个人电脑和互联网的发展类似,无人机也迅速从一种DIY爱好发展成为风靡全球的主流技术.如今的无人机产品一代比一代更小巧.安全.便宜,其飞行功能和拍摄质量也在快速地提高.而在无人机这个规模达百 ...
- 数据产品经理进阶之路
这周三(8月12号)晚上8点半,邀请JOJO老师给大家免费分享数据产品经理进阶之路,可长按识别二维码直接进入听课.(也可以直接点击阅读原文听课)
- 黎想深度访谈腾讯顶级产品经理的进阶之路——第五篇《匠心》
16个月精心打磨,9位顶级产品专家研讨提炼,凝聚腾讯产品经验的八集八分钟产品课分别从用户.定位.需求.时机.匠心.危机.合作.商业角度出发,还原产品背后的故事,分享给你腾讯产品的心法.艺形艺意工作室创 ...
- 恭喜你！在28岁前看见了腾讯顶级产品经理的进阶之路——第一篇《用户》
随着我国新媒体网络技术的飞速发展,许多新兴产业也随之诞生,增加了许多的就业机会,例如新媒体推广运营工作.在纷繁复杂的网络环境下,如何通过平台的推荐机制,如何使其精准的抵达至你的目标用户群体呢?艺形艺意 ...
- 黎想深度访谈腾讯顶级产品经理的进阶之路——第四篇《时机》
16个月精心打磨,9位顶级产品专家研讨提炼,凝聚腾讯产品经验的八集八分钟产品课分别从用户.定位.需求.时机.匠心.危机.合作.商业角度出发,还原产品背后的故事,分享给你腾讯产品的心法.艺形艺意工作室创 ...
- 黎想深度访谈腾讯顶级产品经理的进阶之路——第三篇《需求》
16个月精心打磨,9位顶级产品专家研讨提炼,凝聚腾讯产品经验的八集八分钟产品课分别从用户.定位.需求.时机.匠心.危机.合作.商业角度出发,还原产品背后的故事,分享给你腾讯产品的心法.艺形艺意工作室创 ...
- 黎想深度访谈腾讯顶级产品经理的进阶之路——第二篇《定位》
16个月精心打磨,9位顶级产品专家研讨提炼,凝聚腾讯产品经验的八集八分钟产品课分别从用户.定位.需求.时机.匠心.危机.合作.商业角度出发,还原产品背后的故事,分享给你腾讯产品的心法.艺形艺意工作室创 ...
最新文章
- 《VMware、Citrix和Microsoft虚拟化技术详解与应用实践》一1.1 虚拟化概述
- tf.train.ExponentialMovingAverage
- 编写 Servlet 2.3 Filter
- 视图添加字段_Odoo开发教程2-为模型添加字段
- 【精心总结】java内存模型和多线程必会知识
- tp5命令行基础介绍
- Linux的重要子目录
- ssh 远程连接失败 PTY报错
- linux下卸载之前安装的qt4和qt5
- 大数据之项目需求及架构设计
- jQuery WeUI 组件下拉刷新和滚动加载的实现(复制就可以使用)
- mysql能上传程序吗_利用mysql上传和执行文件
- CTF新手抓包找flag
- win10如何删除计算机用户,win10如何取消账户登录_win10怎么删除登录账户
- HDU 操作系统实验二 -设计一个系统调用，返回指定进程的相关时间信息
- 【ITool】js多个页面传值
- Python 分批次处理数据示例
- Linux系统修复网络,Linux系统无法上网解决方案教程
- 移动端页面键盘弹出后导致body高度变低背景图片被挤上去解决方法
- Java获取某年某周的第一天