编辑导语：设计成长在于日常的学习积累，多看多想多写是最基础的一种方式，体验产品的一些设计点，思考并记录能让自己学习理解的更深。除了可以丰富自己的设计体系之外，也能从优秀的设计中吸收更多的东西赋能在自己的日常工作当中。
产品体验其实是一个很好的培养自己阅读习惯的方法。简单便捷易获取，但阅读并把自己理解的东西写出来呈现给别人确是一个很艰难的过程。因为大家对于设计理解的也会千差万别，所以内容的表达理解若有不恰当或站友不认同之处，欢迎指摘和交流讨论。
内容不求有多出彩，只希望能彼此共勉，设计总结均由自己思考编写，体验中注明使用机型和产品版本、设计点类型，便于大家了解，文章篇幅过长，多达1w+字，阅读时间会比较久，感谢你的细心阅读，如你有建议可反馈留言！
2021产品体验思考第2弹目录：
- 支付宝—转账付款中的支付方式和流程
- 高德地图—路线查询中的一些设计惊喜
- Soul—新颖的3d星球交友方式
- QQ邮箱—它竟然能够帮助我翻译英文
- 途家民宿—这样的日期设计，有点赞啊
- 小红书—原来你是这样“窥测”用户的
- 喜马拉雅—信息收纳能力真的很强
- 豆瓣—1个小页面这么多效果，好厉害
- QQ音乐—这些设计小细节真的不错
- 知乎—浅谈首页改版和内容按钮切换设计
1. 设计描述
（1）支付方式
支付宝的支付方式新增“银联卡+余额宝/余额”组合支付方式，目前仅支持两种支付方式的组合，支付宝至支付设置中可设置扣款顺序，当转帐时，按「付款」按钮时，底部弹窗弹出首先会选择默认选取设置的第一个付款方式，且付款方式文字下方有一个Tips提醒选择另外一种方式直接支付，当点击付款方式列表时，底部弹窗左滑推出更多扣款方式选择，支付宝读取用户“余额宝/余额”的余额信息，进行判断组合，且在对应“余额宝/余额”列表中有提示“可组合付款”的文案。
（2）支付流程
流程主要有两个，支付方式的选取和确认支付方式，支付方式可以选择单一或组合方式，确认支付方式中可以选择面容/指纹或者输入密码。
2. 设计思考
（1）支付方式
单个支付方式，第一个弹窗的支付方式下的Tips可直接一键使用另外方式就行扣款，增加扣款方式的选择，扣款方式选择比较多样性。
组合支付方式不管在c端还是b端产品中算是一个比较复杂的逻辑算法。支付宝中的组合目前也是针对“余额宝/余额”的两种支付方式组合支付或是两者其一和银联卡进行组合支付。这个功能确实能够帮助用户在支付选择上更加灵活和方便。当转账支付大额的数目，单一的任一扣款方式里面不足以支付时，就可以选择组合的方式来解决这个问题。
支付作为一个用户日活上亿的工具类产品。覆盖的支付场景很多，在稳定期阶段的产品，每一个支付场景中衍生出来的问题，解决问题的背后付出的代价都将变的很大。
这个功能让我联想到几年前做的B端产品，那时候也是在做一个混合支付的功能，用户希望产品能够提供一个多种方式组合的扣款方式，被技术人员一口否定，当时直接坦言这个功能的开发成本高，算法复杂。其实回头想想有些问题真的还是需要结合实际情况和资源来考量。
（2）支付流程
转账体验过程中发现支付宝真的强大，首先是支付方式的选择，可以支持组合支付或单个支付扣款，比如单个支付扣款（以使用两张银行卡扣款为例），当你进行转账时，如果转账金额过大，比如第一个绑定的银行不足以支付时，支付确认后会提示你。你可以重新进行操作，此时用户对于自己账户的数目金额不太了解会再次确认支付并还是选同一张卡。
确认支付后，系统已经读取了第一张卡的信息，会选择再读取第二张卡，判断是否能够完成支付，若第一张卡不足额，会发现最终完成扣款的是第二张卡。其次就是支付确认这个流程，支付宝会根据你经常使用的支付方式选择让你操作。但基本同时支持两种支付方式。比如ios系统的面容支付识别，当面部识别连续尝试失败后，会直接跳到密码输入，即使密码输入错误，也会立马提示直接可以更改密码。
所以在流程中不管是选择支付方式还是确认支付的方式，支付宝都会及时帮用户解决问题或给明确的告诉你如何操作，让用户对流程中体验很流畅。这两个用户行为是贯穿了整个支付流程。既能让用户有超越预期的感受又能保留方便地操作着实不容易。
二、高德地图—路线查询中的一些设计惊喜
1. 设计描述
（1）路线查询
当输入目的地进行路线查询时，平台会记忆你上一次离开app后选择的交通方式，并默认选择上一次的交通方式，同时推送相匹配的多条路线，当选择某一条线后，进入到路线明细页面，页面分为上中下，上方显示地图和路程的起始点和用户目前位置，中间部分为路线选择，可左右滑动切换推荐路线，下方为换乘路线具体的信息说明。可上滑查看更多换乘信息。
（2）班次查询
在已选择的路线中可查看「实时公交」的班次信息，点击之后，进入公交班次信息展示页面，页面分为上下部分，上方地图显示公交行驶的轨迹路程和用户起始点和目的地。下方展示公交车的具体信息包括公交班次、最近的两班车的到达用户位置的时间、公交的行驶路线信息。
当下拉公交班次信息区域，在地图中会显示一个提示框，可以进行点赞或者吐槽的操作，点击“准时或不准时”文字之后，在页面中间会有对应的特效展示效果。
2. 设计思考
（1）路线查询
在生活中，地图导航的使用场景非常多，我平时对于高德使用也是很频繁。页面中间模块为路线方式选择，可以切换其他路线进行查看。
这个功能确实最近才发现到，也不知道说自己什么好，可能自己的洞察没有那么仔细或自己的产品使用习惯有问题，例如平时在查选路线的时候，输入地点之后会有很多路线选择，经常会点一个路线进去之后，了解具体信息后想去查看其他路线，就会返回上一级页面再去选择，这样频繁的切换操作确实让自己多花很多时间。而且在路线查询的时候，需要了解的信息又多又杂，频繁返回偶尔也会让自己对信息的记忆下降和误判。同时路线切换时，上方地图中也会重新刷新并有路线引导。
但对于这个功能，有一些个人设计想法，因为路线也会根据用户的需求（步行少、换乘少、时间短等）来分类。所以在选择路线模块可以加个信息分类提示，让用户可以更有效率的抉择。
（2）班次查询
作为常用交通工具之一的公交车，很多时候用户在换乘的时候十分关注乘坐班次的实时信息，因为这样用户可以更放松的的安排自己的行程。
下方有一块区域是公交的行驶路线信息图，可以看到有个公交车小图标在行进中的位置，这种环境贴切原则设计在一定程度上缓解用户焦虑，实际场景中每一站的距离间隔其实还是比较远的，不管是在地图中还是路线图中都有类似的这种设计手法，在一定程度上确实让用户减少距离感，会给用户心理暗示“没多远了，快到了”。
（3）情感化设计
当等待过程中，班次经常会有不准时的情况，不准时的原因可能有很多，比如路况问题，车抛锚等。在实际等车过程中，很多人其实不会那么理智和抱着理解的心态。觉得不准时，不排除会将情绪发泄在产品上，此时点击不准时进行吐槽，页面中间会弹出一只鸡发出愤怒的火焰，并配上文案“不准！垃圾”。
这种情感化的设计也是平台对用户的反馈表示认同，能降低用户对产品的不满，所以高德地图除了在技术上做到定位信息精准之外，这些俘获用户情感的细节是做的也很极致。
三、Soul—新颖的3d星球交友方式
1. 设计描述
（1）Soul的星球板块，以“星球”为模型的设计样式呈现给用户，将Soul友作为一个个点汇聚成为了动态的三维立体星球。每个点代表了一个人，均可以点击进入对应的他的个人主页，进行关注或者聊天。无操作干预过程中，星球中的每个点都按照对应的轨迹移动，用户使用手势进行操作时，可以改变星球的转向和轨迹。
（2）3d星球下方是用户可以社交认识Soul的各种方式，有灵魂匹配、群聊派对、语音、视频、游戏（目前内测）、恋爱铃等交友方式。而且每个对应的交友方式中的设计元素都增加了小动效。
（3）恋爱铃玩法：首先开启恋爱铃模式底部会弹出提示框引导用户填写相关信息，并完成交友的目的。爱心按钮上会有爱心迸发而出的小特效。点击爱心打开开启模式，下方的恋爱铃小卡片位置直接落到灵魂匹配方式旁边。
2. 设计思考
（1）Soul作为一款年轻化的社交产品。首先通过“星球”的概念把交友聊天这样一件事紧密绑定起来。以前也有朋友和我聊过它的3d设计样式，这款产品最让他觉的有意思的设计就是这个3d星球，他觉得想法很有创意，很新颖。星球作为一个互动的地方，容纳趣味相投的这样一群人。
这个设计想法就已经能吸引很多小青年了，设计样式的差异化也让Soul在社交领域独领风骚，能够更快被年轻用户接受。Soul的定位是年轻化，旨在建立一个年轻人可以表达自己，并分享生活和交流，寻找好友或知己的社群。但年轻人的爱好和想法有时候太过多元化。所以设计形式上需要有更有意思，能有契合年轻人想法的设计，显然Soul成功的激活了一大批年轻用户。
（2）交友形式的差异化和趣味性也是很多社交产品着重考虑的点，Soul通过增加交友方式来提高产品竞争力，平台通过帮用户匹配和自己默契的朋友，也能自己去寻找，可以通过在平台展示自己声音、视频连接的方式去匹配好友、参加群聊寻找好友。目前Soul交友形式也在逐步结合游戏化的方式，交流场景的覆盖也越来越广泛，譬如校园吧。
（3）恋爱铃玩法开启时，会提示直接引导用户描述自己的交友目的和自己想对别人说的话。平台会根据用户需求可以直接帮助用户精准匹配志趣相投的好友。当用户重启app后，页面会弹出帮你匹配到的人直接进行交流沟通。首先这个可以帮用户筛选人群，提高用户寻找高质量Soul友的效率。其次可以吸引用户注意力并更高频的使用产品，增加用户粘性。
四、QQ邮箱—它竟然能够帮助我翻译英文
1. 设计描述
（1）显示翻译：打开邮件，若邮件内容为全英文时，邮件详情页面右下角有一个“翻译邮件”的文字按钮，也可以直接点击关闭按钮关闭翻译，点击“翻译邮件”，进行内容识别，文字按钮变成提示文字“翻译中”，同时按钮框向左延展，原来最右边的的文案变为「显示原文」文字按钮，最左边变为选择翻译语种（翻译语种支持12种主流语言），点击语言文字，吊起Actionbar语言选择列表。点击最右边“显示原文”文字按钮，按钮框收起，最右边展示“显示翻译”文字按钮。关闭按钮消失。
邮件详情页面上方tab栏上右上角有两个按钮，对应的是点击可切换查看“上下篇”邮件的功能。拖动内容下滑可以进行邮件撰写。
2. 设计思考
（1）“显示翻译”这种功能对于语言能力相对薄弱的用户真的是太方便了。QQ邮箱发展已经有很长一段时间了。使用人群已经非常的广泛。而且很多人在进行国外业务付费的时候，经常会使用邮箱工具作为一个联系方式。当国外网站给你发送邮件的时候，很多信息阅览和使用操作都要通过邮箱。
比如作为设计师的我，之前在国外网站想要查找下载一些样机源文件时，当时网站的样机资源来源于不同的供应方，最后找到那个合适的样机之后，想去下载，但是需要提供邮箱地址，关于下载的一些重要信息就会通过邮件方式发送到你提供的邮箱。当一顿操作完之后，登录邮箱去操作时，如果看到满屏的英文你是否会一脸茫然呢？。
如果没有显示翻译的功能，你就要像英语考试中阅读理解那样，去理解每一个单词的意思去进行翻译。但这个译文的准确度也是因人而异。这样的操作确实让用户很花时间。在线下信息发达的互联网时代，大家接触国外业务信息的场景有很多。而我们大多数都是通过注册邮箱。所以邮箱是一个很重要的沟通媒介，很多重要信息和通知，国外网站都要通过邮箱传递给你。
同时也QQ邮箱支持多种主流语言的翻译，方便不用国家的人进行工作交流和信息获取。“翻译”场景其实只是这个小功能的其中应用场景，当你使用信用卡时留下邮箱的联系方式。你查看一份信用看还款的邮件时，右下方的按钮会显示「还款提醒」等文案。随着功能的开发应用，之后应该也会针对不同的内容考虑不同的提示场景。能帮助解决实际问题的功能都是值得称赞的！
QQ邮箱是一个在覆盖多领域场景的工具。除了是正常的日常工作，个人，交流传递信息的工具，邮箱也可以对接更多的商业业务，我之前看到一篇文章，故事是说企业高管通过邮件工具，挽救了一个公司。随着邮箱的发展越来越成熟，给用户带来的影响也会越来越大。
tab上方右上角对应的邮件切换功能帮用户较少操作路径，节省用户时间。但是上下两个按钮的示意性容易让用户误读，第一感觉有点像「收起」和「展开」的意思。当前邮件页面下可以直接向下拖动内容进入写邮件页面。很多产品的交互操作都是比较隐蔽的。当你发现并反复使用思考之后，才能知道这个体验感是不是很好，值不值得让你养成习惯去使用！
五、途家民宿—这样的日期设计，有点赞啊
1. 设计描述
（1）日期样式
日期显示格式使用了日历国内节气和国外节日的规则，日期选择主要分为可选和不可选，对应具体的节日使用节日名字而不是数字，如不可选日期，使用灰色文字样式提示不可选（如“11月1日”显示灰色“万圣节”字样），可选日期，使用黑色文字样式提示可选（如“12月7日”显示亮橙色“大雪”字样），且对应日期下方会显示当天价格。当选中初始和结束日期时，初始和结束日期使用深橙色底部色块，并分别对应增加“入住”和“离店”字段。
结束时日期下方显示具体“多少晚”，这个字段契合时间逻辑，设计也是充分的利用页面空间。
（2）可用性原则
通过上方截图观察到“不可选日期”除了使用灰色文字样式提示不可用之外，在页面不可选日期字体上，有斜向135度的斜线将日期划掉，这样不可选提示更加强烈。
2. 设计思考
（1）对于日期的选择设计样式，市面上同类产品的样式设计很相似，基本是使用不同颜色或颜色深浅来区分用是否可用是一种比较常见的设计方式，途家的日期处理更加细节，增加日历的节气和国外节日形式，让用户了解具体节日，更合理的安排和选择，这样的文字设计让信息更丰富，初始日期和中间时间使用色块颜色深浅来区分，并结束日期使用“共多少晚”文字进行提示，页面利用率很高。
（2）操作选择日期时，第一次点击默认时选择初始日期，第二次点击选择结束时间，当第二选择时间在初始时间前面，选择机制刷新，默认选择早于的结束时间重新为初始时间。当第二选择时间在初始时间后面，即成功选择时间段，底部固定的“确认”按钮高亮可点击。日期选择功能的业务逻辑很清晰。
（3）不可选日期中，通过斜向135度的斜线，将日期划掉的方式，符合「尼尔森十大可用性原则」之环境贴切原则 ，所以这一点设计也是「途家」日期设计中的一个很赞的点。
人们经常会画横线或者斜线的方式去记录完成的一些事情，代表它已经被完成或已经成为过去。针对环境贴切原则的定义：利用用户熟悉的概念让产品中的信息应该尽量贴近真实世界，让信息更自然，逻辑上也更容易被用户理解。途家通过斜线划掉日期的设计样式也是提示用户这些时间已经过去，不可以再被选择。
其实在爱必迎上也有这样相同的设计。但是对于斜线的方向有一点区分。爱彼迎中的斜线角度为180度，途家中的斜线角度为135度。但大部分用户划横线的操作习惯是斜向45度。
所以根据环境贴切原则的定义，设计也应该更趋近于真实生活中的大部分用户行为。对于产品中这样的设计能够使结合设计一些相关原则去考虑，产品思考的很深，在用户体验方面做的也很细腻。
六、小红书—原来你是这样“窥测”用户的
1. 设计描述
（1）首页
在「发现」和「当前城市」模块的内容列表中，长按列表中的内容（图片或者视频）,会出现一个弹出框提示用户选择对该内容不感兴趣的原因和对内容进行反馈，在「关注」模块时，若是图片内容，长按底部弹出弹窗可以直接保存到相册，若是视频，长按不能进行保存。
（2）大图详情页
「发现」和「当前城市」模块的列表内容可点击进入大图详情页，若内容为图片，长按大图内容，底部弹出Action Sheets选择列表，选择选项分别为“不感兴趣”、“不喜欢该作者”、“不喜欢的类型”、“举报”、“保存到本地相册”。若内容为视频，点击可进入全屏浏览，长按视频，底部弹窗的列表多一个选项为视频倍数选择，从0.75x-2.0x，一共5个倍数，每个倍数相差0.25x。在「关注」模块时，若是图片内容，点击图片不能进入大图详情页。若为视频内容，点击可直接全屏浏览，长按弹出选择列表。
2. 设计思考
热门跟贴