3个设计细节带你看看大厂产品有多精彩「工厂设计」

作者通过生活观察，介绍了QQ音乐、美团外卖和大众点评三款APP产品中的设计细节并分析了设计动机，与大家分享。
01 QQ音乐中的场景化设计今天我们的分享内容是QQ音乐中的一项设

作者通过生活观察，介绍了QQ音乐、美团外卖和大众点评三款APP产品中的设计细节并分析了设计动机，与大家分享。

01 QQ音乐中的场景化设计

今天我们的分享内容是QQ音乐中的一项设计细节：当用户网络畅通的时候，打开APP进入的页面为【推荐】页面；当用户无网络的时候，打开APP进入的页面为【我的页面】。

这个设计细节无疑是考虑到了当用户没有网络的时候进入【推荐】页面也无法播放音频的场景，所以进行了区别化设计，在用户打开APP时判断用户的网络情况，再决定进入哪个页面。

无网络时进入我的页面，可以播放已经下载到本地的音乐。说实话，这个设计细节真的是作者完全没有想到的，听闻之后真是赞叹不已！

随后作者又体验了虾米音乐和网易云音乐，这两款产品在此处的设计如下：

虾米音乐在此处做了同样的设计，有网进入推荐页面，没网进入我的页面。看起来和QQ音乐的做法完全一样，只是不知道是哪个产品中先出现的这个功能。

看到这里的时候作者在感叹两者的场景化设计之妙的同时，也产生了担心，即用户是否能理解为什么我打开了APP却没有进入首页，而是进入了我的页面呢？这里是否要给用户一个说明，为什么进入的是我的页面？

就在作者自鸣得意的时候，马上就被下面网易云音乐的设计教育了一番~

网易云音乐的做法

网易云音乐在做了和以上两款产品类似设计的同时，在进入我的页面这种情况下，同时给出了一个toast提示【无可用网络，你可以播放已下载的音乐】，通过一句话把用户进入此页面的原因，和用户可以进行的操作都进行了说明。

看到网易云音乐的设计，作者又返回去删除了虾米音乐和QQ音乐APP重新下载，再次体验这种场景（某些提示只有第一次进入那个场景的时候才会出现，就像APP的引导页只有第一次打开APP才会出现），发现QQ音乐在无网络进入我的页面时同样有一个提示，但只是说明了网络状态，并没有说明为什么进入了这个页面，以及用户此时可以做什么操作。

大家千万不要小看这几个字的差别。当用户进入页面时，如果只提示用户【无网络】那么用户的第一反应很可能是：哦，没网啊，听不了歌了那我退出吧。

这样对产品方来说【用户使用时长】和【用户日均打开次数】两个关键指标就会下降。而像网易云音乐那样，直接说明用户此时可以进行的操作则就可以在一定程度上避免这个问题。

在美团外卖APP中，我们在对订单评价时，如果选择了1星和2星评价则匿名评价选项会自动勾选，以保护用户在进行差评时的信息安全（和人身安全）。

在体验过美团外卖的这项功能后，有查看了我们最常用的几个带有评价功能的产品，即淘宝和京东(饿了么APP中的设计与美团外卖基本相同，就不再重复举例了)，它们的匿名评价功能如下：

淘宝

淘宝的做法是，进入评价页面自动勾起匿名评价选项，在这之后即使你取消勾选，并选择了差评，匿名勾选按钮也不会自动勾选。

看起来这里的设计好像已经比较长时间没有被注意过了，我觉得至少可以在取消勾选并选择差评之后再自动勾选匿名评价，并给用户一个状态变更提示。

京东

京东的做法则是进入评价页面后没有自动勾起匿名评价选项，并且将评价修改为1星或2星时匿名评价选择也没有被自动勾起，这里面貌似有比较大的优化空间。

在我看来，像阿里这样的巨无霸如果说在设计团队中没有人想到这个问题的话应该是不太可能的，那我们就以产品方已经想到了，但依然决定这么做之后进行一番胡乱猜测，猜想一下为什么美团外卖和淘宝在存在这样的不同设计。

以下是大胆的、随便的、胡乱的、不负责任的猜测：

（1） 在进行差评时，产品方最重要的事情是考虑给出差评的用户的人身安全问题。虽然这有些夸张，但大家想一下滴滴的乘客遇害事件，可能数十亿个打车订单中只有一个乘客遇害了，但这一个乘客，就给滴滴造成了巨大的损失，顺风车业务下线、公司形象危机、用户信任感、安全感骤降。

就像那句话一样：不怕一万、就怕万一。如果真的有丧心病狂的卖家按照收货地址找到了给差评的买家，在纠纷的过程中如果真的造成了人员伤亡，那对于产品方也是巨大的不可估量的损失，所以淘宝在这里就进行了一刀切的设计，只要评价那就默认匿名。

（2） 美团外卖为什么没有默认匿名呢？可能是因为不匿名评价对他的价值。

试想一下如果你在购买外卖时看到了同事、朋友的好评，那么是不是你就有较大的可能性去购买商品，达成成交？并且由于外卖的距离性，我们看到同事朋友的评价的概率还是比较大的。所以美团外卖没有选择默认匿名评价。

当然还有重要的一点，美团外卖是默认会隐藏用户的手机号码的，商家和骑手只能通过一个虚拟号码联系到买家。

大众点评应该是我们比较熟悉的产品了，周末偶尔不知道吃什么的时候一般我会在上面看看附近美食店的评价来选择一家店，其中的店铺详情页内置了导航功能，让我们不必切换地图APP就能直接查看路线，昨天在寻找美食的时候竟然发现了一个体验好到爆的设计，就是【实景图】功能。

在大众店铺详情页点击地址一栏后自动进入导航页面，此时页面上目的地附近会出现【实景图】按钮，点击后进入下图3的页面，页面中会显示你要去的地方的实景图。

实景图功能，对于第一次去陌生环境、方向感很差的伙伴们非常友好；因为我们经常会遇到跟着地图导航已经到了目的地，但是又因为店铺不在十分显眼的位置所以找不到的情况，实景图功能可以方便用户快速的找到店铺，愉快的进店用餐，避免因为用户因为找不到店铺而导致用户流失。

实景图页面包括商户正门图和网友为你指路，商户正门图有利于用户更快速的找到店铺；

网友为你指路也是非常友好的功能，从用户的角度出发，以第三方的角色再次对店铺的位置进行描述，与商户正门图行程互补，这样就在用户的脑海中形成了目的地以及周围环境的认知。

两者结合后基本解决了用户到达目的地后找不到店铺的问题，使用起来体验很好。

作者：杜昭，微信：duzhao55，微信公众号：设计的威严

本文由@杜昭原创发布于人人都是产品经理，未经许可，禁止转载。

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

产品设计的细节有哪些

一、人机工程设计：

人机工程设计即是人性化设计，是一种基于情感化的设计。产品的情感化设计是产品与用户之间情感传 递的桥梁，这种传递不仅可以增加用户对产品的好感度，更可以让产品更加深入人心，与产品产生情感上的 共鸣，利于产品口碑的传播。如何优化人机工程设计：

1、从产品的角度出发对在设计过程中影响用户情感的设计要素进行研究。产品的形态、材质、色彩及 其所处的环境都能给受众带来一种甚至是多种体验，将抽象的情感体验物化成具象的设计元素和其它各种感 官体验要素。

2、把握个体或某个群体的深层次感官经验，因为个人的生活背景、经历等各不相同。

二、色彩设计优化：

1、强调产品功能和色彩作用相结合。如消防车都采用红色为主色调，因为红色不仅可以让人联想到火 还有很好的注目性，可提高消防车通行效率。

2、协调使用环境与用户体验。色彩设计要满足产品的自然环境及工业环境，还应该保证用户在使用时 有良好的体验，如安全感、亲近感，这样用户不易产生疲劳，能有效完成工作。

3、符合美学原则，紧随时代审美要求。保证在体现产品整体感的同时有效的吸引消费者。

三、结构设计优化：

这里的结构设计不是指产品的内部结构设计，而是产品的细部设计。

1、从小处着眼，以微小需求为出发点。从一个小的视角、人们容易忽视的小地方去理解产品的每个细 节对产品设计产生的影响，融合用户使用习惯，逐步完善产品的细部设计。

2、遵循简洁观，符合技术要求。产品的价值是由产品的技术与造型共同决定的，通过产品细部设计突 出产品特征、增强用户的产品识别能力，是避免产品同质化和强化产品品牌的捷径。

产品造型设计的基础要素主要有哪几个方面

产品造型设计的三个基本要素：

物质功能： 产品的用途和使用价值，是产品存在的根本。物质功能对产品的结构和造型起着主导的决定性作用。

产品造型艺术：利用产品物质技术条件，对产品的物质功能进行特定的艺术表现。

物质技术条件：是工业产品得以成为现实的物质基础，包括材料和制造技术手段。随着科学技术和工艺水平的不断发展而提高和完善。

扩展资料

产品造型设计基本流程

1、构思创意草图

工作将决定产品设计的成本和产品设计的效果。所以这一阶段是整个产品设计最为重要的阶段。通过思考形成创意，并加以快速的记录。这一设计初期阶段的想法常表现为一种即时闪现的灵感，缺少精确尺寸信息和几何信息。基于设计人员的构思，通过草图勾画方式记录，绘制各种形态或者标注记录下设计信息，确定三至四个方向，再由设计师进行深入设计。

2、平面效果图

2D效果图将草图中模糊的设计结果确定化精确化。通过这个环节生成精确的产品外观平面设计图。既可以清晰地向客户展示产品的尺寸和大致的体量感，表达产品的材质和光影关系，是设计草图后的更加直观和完善的表达。

3、多角度效果图

多角度效果图，给人更为直观的方式从多个视觉角度去感受产品的空间体量。全面的评估产品设计，减少设计的不确定性。

4、产品色彩设计

产品色彩设计是用来解决客户对产品色彩系列的要求，通过计算机调配出色彩的初步方案，来满足同一产品的不同的色彩需求，扩充客户产品线。

5、产品标志设计

产品表面标志设计将成为面板的亮点，给人带来全新的生活体验。VI在产品上的导入使产品风格更加统一,简洁明晰的LOGO，提供亲切直观的识别感受，同时也成为精致的细节。

6、产品结构草图

设计产品内部结构。产品装配结构以及装配关系，评估产品结构的合理性，按设计尺寸，精确地完成产品的各个零件的结构细节和零件之间的装配关系。

参考资料来源：百度百科-产品造型设计