编辑导语:产品体验是培养自己阅读习惯和设计思维的好方法，但是把自己理解的东西读出来，写出来，呈现给别人，是一个非常艰难的过程。本文作者向我们分享了自己在产品体验中培养和运用设计思维的过程。从产品设计到对设计的思考，作者思考和分析了自己对设计的理解和体会。我们一起来看看。

设计的成长在于日常的学习和积累。多读书，多思考，多写作是最基本的方法。体验产品的一些设计点，思考和记录可以帮助你更深入的学习和理解。除了丰富自己的设计体系，还可以从优秀的设计中吸收更多的东西，赋能到日常工作中。体验其实是培养自己阅读习惯和设计思维的好方法。

很简单，也很容易得到，但是把自己理解的东西读出来，呈现给别人，真的是一个很难的过程。因为每个人对设计的理解会千差万别，如果对内容有不恰当的表述和理解或者站友不认同，请批评指正，交流讨论。

内容不需要出彩，我们只是想互相鼓励。设计总结是我们自己思考写出来的。体验中注明了使用的型号和产品版本，以及设计点的类型，让大家都能看懂。文章太长，近1w字，看完会很久。感谢您的认真阅读。如有任何问题或建议，请留言反馈！

2022产品体验思维第四弹目录:

01 飞书—好“特别”的首页底部导航栏02 钉钉—这个日历功能设计细节满满03 飞猪—好用的“始发-终点”站点筛选条件04 掌上英雄联盟—真的完全被你套路到了05 鲨鱼记账—账单内容竟然可以这样修改06 滴滴出行—多方式触达打车出行页面07 微博—不同维度的用户评论内容查看08 极客时间—浏览和专注两种学习模式09 自如—Banner设计的无限可能性10 招商银行—主题的丰富程度的快赶上QQ了

01飞行书——首页底部多么“特别”的导航栏。

1.设计描述

(1)舒菲底部的标签导航栏框架主要由“业务功能”按钮和“更多”按钮组成，最多只能显示五个功能按钮。总共七大功能:消息、日历、工作台、云文档、视频会议、任务、通讯录；点击“更多”会在底部弹出动作栏，显示其他功能。单击任意功能，显示“更多”模块下的相应页面。同时在弹出窗口的右上方有一个文字“编辑”按钮，可以编辑七个主要功能(显示、隐藏、调整功能顺序)。

(2)功能编辑页面分为“底部导航”和“更多”模块。在底部导航模块中，可以点击“减号”按钮，相应的功能会自动落入更多模块。在底部导航模块中，可以点击“加号”按钮，相应的功能会自动添加到底部导航模块中。点击按钮可以控制业务功能的实际隐藏。手势拖动可以调整两个模块之间功能的顺序和隐藏显示。在操作过程中，

2.设计思维

(1)在工具应用中，舒菲底部标签导航栏中的功能按钮的设计具有独特性和创新性。在正常的产品应用中，底部标签栏下最多显示五个按钮，这在交互设计原理中有描述。“4+/-1”这个数字更符合人的记忆习惯。在书的底部，最多有五个功能，但增加了一个“更多”模块，使模块分成六个部分，用于编辑业务功能。

编辑内容包括功能显示、隐藏和顺序的调整。用户在使用产品的过程中，可以根据自己的高频应用场景选择功能。某种程度上，灵活的功能编辑确实可以让用户的选择更加方便。

(2)对于舒菲底部标签栏的交互设计，类似于工具应用的金刚区的编辑方式，舒菲将这种可编辑的交互设计嫁接到了底部标签上。虽然创新的设计有其可取之处，但难免会打破很多用户的操作习惯。

底部导航栏中的每个模块都是产品中相对独立的功能，主要功能比次要功能更重要。“更多”用作其他功能的编辑辅助。当你点击更多按钮时，会弹出动作栏，还会有其他功能。当你点击一个函数时，这个函数的内容仍然会在更多的模块中。比如，当你点击“消息”模块时，消息仍然会在更多的模块中，但这会使内容和标题模块不对应。虽然页面标题也会显示在页面的左上方，但它在意识形态上与内容相关。

当用户只选择一个功能时，底部只有两个模块，显示的底部导航是空。舒菲的设计可能会及时考虑到用户的使用场景，让用户灵活选择，但是是否可以限制最小显示次数，让更多的功能可以使用，合理利用空。

02钉钉——这个日历功能充满了设计细节。

1.设计描述

(1)美甲日历默认显示一周。勾选其他时间，选择今天以外的日期时，今天和选择的日期会有明显的风格差异。如右图所示，16日在深蓝色背景上用白色书写，农历时间用蓝色，今天的日期用浅蓝色背景区分。在日历中增加查看未来7天天气情况的功能。对于今天到下周的天气，在日期和时间下面会有一个天气状况的图标样式。

左右滑动查看即将到来的一周的时间信息时，中间只会显示本周起止日期的文字(比如右边的上图向左滑动，中间显示“12月19日-25日”字段，停顿几秒后显示下周的具体时间)。

手动向下滑动日期时，会显示更多的时间内容，背景下方会显示当前月份的数字。在这种状态下，还可以左右滑动查看相邻月份的时间信息。

如果选择今天以外的时间，右下角会有一个后退按钮。点击直接回到今天。选定时间:今天，后退按钮向左。同时，日历视图可以根据日、3日、月和列表进行设置和显示。

2.设计思维

(1)钉钉日历可以作为用户日常活动和事件的记录功能。日历视图可以根据分类，相关日期的天气情况，切换中的数字时间段提示，以及下方返回按钮的设计，以多种形式显示。

(2)日历视图可以上下划分页面或者根据分类平铺整个页面。用户可以根据自己的时间或者阅读习惯选择自己需要的显示方式。用户可以按照“日、3日”分类，从上到下选择内容的显示方式，浏览时间和日程。同时，他们还可以使用“月”显示模式，让内容平铺整个页面，并读取当月日程的更多信息。用户也可以直接点击已有的日期来修改或创建新的日期。根据“列表”格式，用户可以从上到下在文本列表中浏览日程安排。

丰富的日历形式可以满足不同类型用户的需求。日历中对应的日期会显示未来一周的天气情况，可以帮助用户进行出行安排。在切换每周时间段的过程中有几个细节。首先，在切换期间增加了时间周期的显示。用户在工作中更关注相应的工作日期，每天的工作安排都是以具体时间为准。时间段的增加可以帮助用户记住一周的开始和结束时间。

其次，对文本字段的处理，如“12月19日-25日”，将月份和“日时间段”分开，将原来的整个时间段拆分成两部分。一系列的单词需要用户花费更多的时间去记忆，所以这样的设计更方便用户理解和记忆。

03飞猪-好用的“始发地-目的地”站点筛选条件

1.设计描述

(1)飞猪使用火车的交通方式时，选择“始发地-目的地”位置并开始搜索火车票后，火车的列表页面可以显示当天所有的列表班次，标题栏中间会显示始发地和目的地的信息以及当天的班次。

如右图所示，在进入页面之前，我在选择出发地的时候，自动定位选择了上海。进入页面后，我会显示所有从车站到航站楼的以“上海”开头的航班。页面下方提示信息。是有条件的选择始末站。

如果在进入页面之前选择了(始发地/城市-目的地/车站)，则在该页面的筛选条件中的目的地车站会有一个选中标记。再次点击这个标记，终端搜索就会变成全市所有的站。如果在进入页面前选择(上海-铜陵站)，则进入车次页面，会标注“铜陵站”，标题栏文字会改为“上海-铜陵市”。如果再次点击“上海站”和“铜陵站”，选择始发站后，列车列表信息会再次刷新，始发站和目的地成为唯一的地点。

2.设计思维

(1)在购买飞猪火车票的过程中，重要的、频繁的筛选条件(“始发地-目的地”车站)在车次列表页面中单独放出来。这种筛选设计也满足了用户特定的场景使用需求:如何高效地选择合适的站点并进行搜索。

在市场购票的应用中，所有的车票信息显示都是按照时间排序的。时间选择确实是用户购票的第一需求。相比地点，车次的选择更方便用户合理安排。但是在平时购买火车票的过程中，我们有时候并不会第一时间锁定车次信息，进行购买。

用户会考虑自己的出发和到达位置，选择最近的车站乘车，并考虑选择离最终目的地更近的终点站。不具备筛查条件时，也会出现始发站不同但时间点相邻的列车。这对用户的选择有很强的干扰。

其实在购票的过程中，因为这个问题，我已经不止一次错误地完成了购买车次，很容易增加误操作的概率。车站条件的筛选不会影响列车信息在时间维度上的显示。无论在什么筛选条件下，车次都是按正序排列显示的。

经过这样的筛选，我们可以选择的列车信息会更加准确，但是任何设计都不能完全避免错误，但是合理的设计可以在一定程度上有效避免错误，尽可能的解决用户操作中的问题。

站点筛选条件的位置在车次上方，不干扰页面上的车次信息，更容易点击。点击站点后，可以实时查看列表中的车次信息。猪购票的设计也不完善。比如他不买往返火车，火车信息显示没有携程的完整。

04掌中英雄联盟——你真的拿到了。

1.设计描述

(1)打开英雄联盟app，首页会弹出一个异性的弹窗。弹出窗口将显示一些关于操作活动的信息，并将用户引导至相关的活动页面。弹出的内容主要有关闭按钮、操作活动图、页面进入按钮以及“不再显示”复选框。弹出窗口时，默认勾选“不再显示”。当“不再显示”弹出窗口未被选中时，单击关闭按钮，弹出窗口将消失。当页面中的内容被点击查看然后退出时，会引导用户再次点击通过弹出窗口。直到用户勾选“不再显示”并点击关闭按钮，弹出窗口才会消失，否则在点击页面中的内容退出后弹出窗口。

PS场景:第一次进入app时，勾选“不再提示”，点击关闭按钮。弹出窗口短暂消失后，会再次弹出，第二次重复操作。当您再次单击关闭按钮时，弹出窗口会消失，并且不会再次出现。

2.设计思维

(1)掌中英雄联盟的弹窗设计在设计体验上比较奇怪，甚至有点被逼和“骗”的味道，但在引导用户操作活动转化率上应该是很有效的。下面复选框的作用主要是控制弹出窗口的出现，但默认设计是勾选“不再提示”，用户点击关闭按钮时不会再出现，但它根据用户的心意和操作习惯做了一些细微的调整。

在使用app的过程中，我们经常会有一些操作提示弹出，但是这个默认勾选，如果我们没有注意到旁边的文案，会让人下意识的认为这个勾选会不会对我有什么影响，下一步就会选择取消，会让用户觉得我回避了什么麻烦的事情。

取消了就掉进了产品设计的坑，这样弹窗又会弹出来，增加了用户点击的几率。正常的用户操作习惯，比如替换电脑中一个文件夹中多个同名文件，弹出窗口中的复选框默认不勾选，用户选择再次确认，所以掌机上的英雄联盟弹出窗口是非常“反常识”的设计。

(2)设计产品的弹窗机制时，目标是提高弹窗的转化率。如果用户勾选“不再提示”，用户在进入其他内容页面后仍然会退出弹出窗口，弹出窗口会被强制显示给用户。首先，产品设计了这样的弹出机制。考虑到用户体验，如果一直弹出，用户会反感，所以在弹出的底部增加了取消弹出提示的操作。这让用户有地方取消烦人的弹出提示。不会太影响用户体验。

05鲨鱼记账——账单内容可以这样修改。

1.设计描述

在鲨鱼记账首页的账单列表中，每张列表支出账单都由支出图标类型、支出备注、支出费用三部分组成，每部分都可以单独点击修改。

点击图标进入支出类型页面，选择类型图标进行替换，点击支出备注，支出备注内容区域外的部分会有黑色遮罩效果。修改备注时，键盘上方有一个常用备注选项(系统会将每个修改的备注记录为常用备注)。点击支出费用和修改支出备注的效果是一样的，会有一个蒙版效果。shark bookkeeping自带的数字键盘中会有日期选择。您可以选择支出日期。如果您选择了非当天的日期，此列表的内容将从当天的记账列表中提取，并自动落在当天的记账内容之下。修改当天记账清单中的一项内容。修改后，当前列表将自动置于列表顶部。

2.设计思维

(1)鲨鱼记账的清单数据修改更简单、更独立、更详细。支出账单的核心三项内容主要是消费支持类型、消费备注和消费金额。简单点说，用户在修改备注和支出金额时，可以直接在当前页面放下键盘来编辑文本。点击消费支出类型图标，进入支出类型选择。精心设计的是，在操作和使用中，点击和进入是两种完全不同的用户行为。消费类型时，通过点击图标进行修改和选择，备注和金额以文字显示。

这是与“袖珍簿记”相比较的。口袋记账的票据内容在同一个页面修改。实际操作中，进入页面时会出现数字小键盘，所有类型的图标都显示在顶部，但键盘会占据页面空并遮挡底部显示的图标。这个面积和操作的灵活性就不那么容易控制了。

(2)简单独立的设计将使用户的账单内容修改更加高效。在记账过程中，整个账单都要修改的问题应该是比较少见的，因为如果金额信息非常准确，频繁修改可能是比较混乱的描述或者类型选择。

比如我只是想修改备注描述，可以直接点击当前页面的备注文字区进行修改，这样修改时间非常快，也非常准确。修改可以直接输入页面，进入页面就能看到图标，没有多余的操作和信息干扰。鲨鱼记账也是秉承了工具产品的原则:风格简洁，操作简单。有记账习惯的朋友还是可以试试的！

06滴滴出行-多路访问打车出行页面

1.设计描述

(1)在滴滴出行首页，可以通过三种方式进入打车页面。点击功能按钮，位置信息输入模块下拉，地图触摸，即可进入出租车页面。在默认情况下，折叠之上的主页主要显示地图、位置选择和其他业务功能。点击按钮，整个页面从右向左滑动，首页的位置信息输入区被下拉，地图显示区增大，信息位置选择模块消失后从底部再次弹出，完成出租车页面切换过渡。地图触摸操作的过渡过程与“位置选择模块”下拉一致。

(2)在出租车页面中，地图上会显示很多标记的设计样式。进入页面会自动定位，之前的位置图标会摇成一个标志，上面会显示该位置的位置名称。可以点击进入位置选择页面，地图还包括驾驶模拟车，用户当前位置，以及提供附近两栋楼的上车点。

2.设计思维

(1)打车是滴滴出行的主营业务。从首页的整个页面布局可以看到，打车功能占据了首页空房间的一半以上。由于新业务的渗透和新功能的增加，滴滴的首页也为这些内容留出了一些空的空间。不过主营业务的打车出行功能还是主推的。基础功能第一位是“打车”。

页面空之间打车功能的收缩，也让滴滴在交互形式上做了很多补充。打车到达页面的方式和路径有很多，包括点击、下拉、触摸。首页的地图和位置信息的输入在视觉设计上是独立统一的。输入的信息叠加在地图上，整个模块的外边框加入了粗糙的笔画效果，将两部分包裹在一起，区别于其他内容。

(2)在打车页面，用户定位时，提示附近的楼栋可以上车。让这个用户方便直接的去合适的地方等车。打车软件的定位功能已经越来越精准了。用户可以在移动中随时切换位置，司机也能找到你。但对于路况复杂的城市，用户和司机都双向努力。

设计用户可以上车的点的小技巧，不仅可以让自己的乘车更有效率，还可以帮助司机规避违规停车的风险。相比同类打车软件，高德地图基本涵盖了滴滴出行的功能。唯一的变化是，在地点后的文字显示中，除了地点名称之外，还有到达时间的提示。哈单车的滑行过程基本没有什么好的体验，操作起来很不舒服。需要点击图片中的全屏按钮才能进入完整的打车页面。

07微博—不同维度查看用户评论。

1.设计描述

微博首页“推荐”模块，点击列表中博主或各大官方机构发布的内容，进入内容详情页。在评论查看区的右上角，有一个条件过滤控件，用户可以选择不同的纬度查看别人的评论。默认情况下，它们按热度排序。点击控件，文本底部会出现一个弹出框。在弹出框中有几个过滤条件选择，分别是“按时间、按正序、按正序”点击过滤条件后，评论标题栏会直接置顶，用户可以上下滑动查看评论内容。同时，页面底部会弹出一个博主可以关注的浮动层。

点按“关闭”按钮以浮动出来。当您向上滑动页面以查看更多信息时，当评论区的内容在页面中间滑动时，浮动层将在底部弹出。

2.设计思维

(1)微博中的博主评论区一直是粉丝讨论吃瓜的重要区域。评论区有很多复杂的消息。不是所有的精彩评论都会看到。随着评论数量的增加，很多有价值的评论都会被覆盖。增加评论条件的选择，将时间维度分为逆序和正序来调整评论区的显示。根据热度，可以说有些讨论更激烈，更有价值的内容被释放出来。

事实上，评论的内容在任何终端页面展示中都是一个相当令人讨厌的存在，因为大学不可能在承载空页面之间将庞大的内容信息完整地展示给用户。有很多评论我们还是抓不住。但是筛选条件的存在可以让一些有趣的评论被用户知道。虽然我还是不能最大化讨论吃瓜的机会！当用户浏览自己感兴趣的讨论内容时，博主注意力的浮动引导可以让用户更接近博主。

(2)还可以在筛选功能中做一些交互优化。现在的交互效果是点击后出现一个下拉框，下拉框显示选择条件。评论条件的选择其实可以参考旁边“喜欢”的筛选控件来设计，将选择条件平铺，左右滑动点击。目前评论展示的筛选条件很少，对于博主不允许的内容，筛选条件会有所不同。但如果以后增加筛选条件，在交互操作的易用性方面:滑动>:点击>输入，左右滑动也更方便查看，并且可以和产品其他功能的交互控件设计统一。

08极客时间——浏览和聚焦是两种学习模式。

1.设计描述

《时代》的学习模块里有两种极客的学习模式，分别是“专注模式”和“浏览模式”。默认模式为浏览模式，显示学习历史、学习轨迹、学习、易坚持、热标等模块。切换到另一个焦点模式，主要显示当前正在学习的一些课程。

所有信息只显示在一个屏幕上，不支持上下滑动。页面的标题栏顶部有一个按钮。在两种模式下，点击都会进入音频播放详情页面。退出页面后，音频播放按钮消失，底部会出现音频播放详情页面的浮动楼层入口。关闭浮动地板，右上方按钮恢复。

页面上有书籍般的设计转盘展示风格，可以左右滑动查看其他讲师的课程。当您滑动到最后一门课程时，查看更多课程按钮将出现在最右侧。书的封面显示课程的信息，包括讲师头像、课程名称、课程数量、学习过程等。，底部显示用户的学习轨迹。

2.设计思维

(1)针对用户学习目的的强弱，极客时间将学习板块分为两种模式，帮助用户在学习过程中进行状态切换。“浏览模式”和“聚焦模式”的主要区别在于，浏览模式在页面内容上显示更多的信息。聚焦模式可以让用户专注于课程学习，缩小信息量，更有针对性地向用户推送课程。

在任何模式下，页面底部浮动入口的隐藏或显示都与右上角的按钮相联系。听说音频已经越来越被用户改编了。在同样的时间内，有声阅读的成本要比纯文字阅读低，所以这也是极客们想要保留并尽力推动用户使用的功能。但是，用于音频播放的入口和按钮的联动会存在于其他模块中，但联动的主要目的是显示或隐藏该功能。

如果这个功能真的很重要，其实也可以考虑删除浮层入口的关闭按钮，采用其他的设计方式。每个模块都要加一个按钮进行联动，真的很浪费。见空。因为如果不关闭，需要一直显示，不会影响用户的使用和浏览。

(2)模式切换入口最上面的文案，语义理解也很复杂。例如，焦点模式显示在顶部，所以现在这是焦点模式或浏览模式。如果是“焦点模式”，那么多信息符合“焦点”的语义表达吗？

还有一种模式，不同的模式需要用不同的按钮来表示。其实这个功能主要是为了模式切换。所以我觉得可以在按键和文案上做一些改变。按钮统一使用具有“切换”语义的按钮。文案可以修改如下。在默认模式浏览模式下，文本表示为“切换到焦点模式”。虽然文案略长，但是可以让用户通过点击按钮了解我现在处于什么模式，正在切换什么模式。

09自由——横幅设计的无限可能

1.设计描述

(1)免费主页轮播的Banner上有两种非常创新的交互方式。一种是正常的左右滑动操作，轮播图中会出现元素拆分关闭的场景。另一种是设备在不同角度晃动时，页面Banner区域的相关元素对用户的感应反馈。

横幅由图片背景和文字或小元素组成。当用户左右滑动时，前一个轮播背景图像在当前位置消失，第二个轮播背景图像逐渐出现。原本拆分在背景中的文本内容和元素也随着滑动操作出现，并与背景图像融合。在每次切换过程中，轮播图像将在水平方向上按顺序进行分割和闭合。

当用户三维空晃动手机时，背景图像、文字、小元素会沿着要理解的方向移动，背景图像会移动到屏幕，小元素会移动到轮播区域之外，形成错位运动的视觉感。

2.设计思维

免费的旋转木马设计真正刷新了用户的认知，让设计充满了无限可能。这种错位联动和晃动感应的操作为产品增加了很多亮点。用户对轮播设计的认知还处于全图倒计时切换阶段。

轮播地图切换让元素通过交互的左右滑动进行拆解拼接，同时进行链接，形成错位感。晃动时，利用传感器获取当前手机的倾斜方向和角度，计算出元素需要移动的距离，产生倾斜移动的错位效果。一个简单的banner模块，也可以通过设计思维，结合技术手段，呈现出创新的玩法。

在免费轮播中拥有差异化的设计方法也支持我们的产品在用户体验方面的竞争力。这个有趣的设计值得思考:当技术壁垒被打破，设计就不会那么受限，可以创造出更多有趣的东西，赋予产品更多价值。

10招商银行——主题的丰富程度正在赶超QQ。

1.设计描述

在招商银行我的模块设置功能中，点击主题中心进入主题库。有丰富的主题供用户选择，主题库会为用户提供免费主题。其余话题需要用户通过积分兑换、活动收藏等用户行为获取。

当用户点击免费主题，它可以被设置或预览。点击预览，会进入主题应用预览页面，使用“我的模块”页面作为预览效果的呈现。单击设置将直接返回到我的页面。该主题的主要应用领域是解锁页面、底部导航栏中的图标和my page。

在底部导航栏中，每个模块都会成为相应主题的图标设计。我的模块和账户概览模块的顶部区域也相应添加了主题元素和相应的颜色，用户的头像也会有丰富的主题设计；退出后，点击再次进入。切换到我的模块，页面会解锁，会有相应的主题元素。

2.设计思维

这种功能在银行的软件中很少见到，主题皮肤设置是和银行业务绑定的。现在银行会发行IP联名卡，通过不同的IP形象吸引客户办卡，提升银行业务。

招商银行的题材种类繁多。在主题设置的选择上，也插入了联名卡业务。有基础主题供用户选择，也有申请联名卡获得的相应主题。海量皮肤选择可以增加用户粘性，主题设置更像是一种娱乐功能。

设置后，用户可以实时查看页面中该主题的效果。用户可以尝试一次又一次地装扮自己的页面，以获得趣味性。选项卡底部的所有图标都被替换为主题元素。这种设计使得页面非常场景化，充满变化。联名卡申请获得相应的主题也使得卡业务得到很好的衔接。网通的登录、兑换积分、办理联名卡等方式，使得获取主题的方式极其丰富。

摘要

体验思维用于你的日常积累和学习，帮助你养成勤于写作和思考的习惯。提高你的写作和表达能力！

对案件内容的表述和理解不恰当或者站友不认同。欢迎批评交流讨论。码字不容易。谢谢大家的支持！

这个时期结束了。不断学习，助力成长！

本文由@Q石屋原创发布。每个人都是产品经理。未经作者允许，禁止转载。

题目来自Unsplash，基于CC0协议。