公众号改版后，推送通知将不再按顺序显示，如果你想第一时间阅读精选的设计文章，别忘了给公众号设为星标，这样就不会错过每一期有用的资讯。

今天我们就从产品风格、图标、插画、动效等维度来分析一下各大厂商产品中被遗漏的设计亮点。

先前声明 / 。

1.强烈建议使用电脑进行观看，这将提供更好的用户体验。

2. 该动图较大，请耐心观看。

3.为了让设计细节更容易看到，使用GIF来呈现。

以下是我在 App 中发现的几款“宝藏”，之所以称之为“宝藏”，是因为产品中可以借鉴的东西实在太多了，每款产品在视觉 UI、动效上都有自己独特的风格（当然网上也有别人总结过的产品，这里就不重复了）。我只会对没有总结过的各大厂商产品的设计细节进行分析，看看优秀的产品设计到底好在哪，请大家细细欣赏。

（淘宝-物研-一站式潮流家居平台）

（字节-抖音盒子-时尚电商平台）

（腾讯-doX-生活片段社交视频分享）

（淘宝-美食笔记-记录美味与美好生活）

（95分-德屋旗下豪华二手平台）

（腾讯-PODO漫画-独一无二的漫画互动阅读平台）

（荔枝-皮玩-语音社交平台）

(陌陌-咔咔-实时互动交友平台)

排名不分先后，从以上产品标识不难看出，图形设计趋向具象化，传递积极情绪，荧光黄、绿色、渐变粉等色彩凸显年轻、大胆、活力。

1. 房屋外观

初见这个名字，就被惊艳到了。首先“屋颜”是“屋延”的斜译，“延”变成“颜”，汉字寓意深刻，读起来通俗易懂，也直接呈现了产品的定位属性。该logo采用字体设计手法，将“屋”字设计成线条呈现立体空间感，也间接体现了产品与房屋软装相关，同时为房屋增添了“色彩”（软装）相关产品。一个具有两层含义的logo，通过字体设计和谐音表达，巧妙融入其中。

从直观上看，页面留白较多，图片品质较高且风格统一，采用纯色背景作为产品首图，大大提升了产品整体色调。

图形全部为直角，包括图片、按钮、图标等，细线风格的设计让产品看上去很有质感，很有无印良品的现代简约风格，也被称为无印良品风格。

磁贴区域内的图片采用了线性+2.5D的风格，让图片具有丰富的空间层次，能够支撑起页眉的重要位置，也再次凸显了产品的极简风格。当然，空屏状态下的图片和离线环境下的图片也非常统一。

最值得关注的动效莫过于下拉刷新，采用吊灯作为下拉效果，下滑时线被拉长，但不会断掉，给人安全可靠的产品透明度，也是通过创意设计提升产品体验的手段之一。在释放刷新时，不同的首页图标会轮播，进一步强化产品属性的定位，刷新也不乏味。

加载状态用旋转的+号线来表达，最后变成正方形，如此极简的设计之前在其他产品中从未出现过，同时也符合房子的产品调性（新家应该会加入软装，这只是我个人的理解），也算是一个设计亮点。

最为新颖的，莫过于产品独有的【3D实景导览店】功能，进一步强化了家具与室内设计的强关联性。为什么这么说呢？线上购买家具时，购买后只能靠照片间接联想到家里的情况，无法按照自己的习惯多角度查看家具。或者因为忙，没时间去线下家具店，又怕白去了，【3D实景导览店】可以快速解决这些用户需求。同时也为线下家具店增加了更多曝光的可能性。

到此房屋设计细节讲解结束，希望产品体验越来越好。

2. 抖音盒子

抖音旗下电商平台整体风格清爽直观，绿色与紫色的搭配也是时尚的风格。相比于其他电商产品，抖音盒子没有金刚区图标设计和营销占位，而是金刚区只展示奢侈品的图片，产品图片大小统一，视觉呈现非常高级。同时，后续瀑布流产品首图不受促销等信息干扰，只展示产品图片，凸显其时尚潮流品牌的特质，也符合当下清爽、高级的设计风格。

有几个设计细节值得参考，首先是底部Tab栏的点击特效，搭载了抖音logo的故障特效，黑色+紫色的故障特效，不仅表明它与抖音相关，是该公司的电商产品；其次，黑色的Tab图标可以很好地抑制“紫绿主色”的跳跃感，不至于太过俏皮，偏离电商属性。

而且图标的整体性和统一性做得不错，“小红点”的设计采用了品牌色“小紫点”（小色变），进一步加强了产品风格和色调的统一性（小红点不局限于红色），这点很值得借鉴。

最后想告诉大家，产品的设计在每个阶段都会有变化。比如1.0.1-1.0.2可能是小幅调整，1.0.0-2.0.0则是视觉上的大升级。产品设计风格可能会因为产品开发或者用户变化而改变，但要知道，每个上线的版本一定是针对当前方案的最优方案。就如大家看到的，“抖音盒子”现在是1.9.0版本，不久的将来可能会全面升级，这个是未知数。

3.doX

它是一个短视频社交平台。与其他社交产品不同，doX专注于短视频内容社交。用户可以通过拍摄和上传有趣的短视频内容来结识志同道合的朋友。虽然是像抖音这样的短视频平台，但抖音更注重视频分发，而doX则专注于通过视频与用户建立联系。一个视频下可以关注多个视频，有点像之前QQ的漂流瓶，只是呈现方式不同。这种陌生人视频约会，有点“探探”的味道。

单看logo设计，我以为会走类似手绘线描的风格。整体上只用在我页面的顶部背景，其余部分都采用破碎像素风格的图标设计。绿色+白色的设计风格可能也是为了营造一种陌生人交朋友的科幻感。

当开始拍摄时，背景中会出现噪点效果，营造出一种拍摄前没有相机的感觉，引导用户随意拍摄。

最后，产品的做法很新颖，但能否在短视频潮流中分得一杯羹还不得而知。不过就目前而言，整体的设计风格框架已经搭建完成，剩下的就是不断填充和完善设计，让其更加统一。希望 doX 能越来越好。

4. 美食笔记

初次接触《吃货笔记》，就被页面整体的设计风格所吸引。加粗图标+拟物化图标的形式，前所未有的潮流感，给人眼前一亮的感觉。与“大众点评”类似，是一个宝藏店铺探索和美食分享平台。通过线上店铺探索，选择注册-亲自去店里-发布动态-上传小票-领取餐券，可以获得优惠消费的同时，也增加了平台UGC内容的产出。可惜的是，目前只支持【广州】店铺（可能是先小范围本地化尝试，再逐步拓展区域），国外用户只能看看界面，无法实际使用，比较可惜。

动图的排版也很有创意，第一张图为大图，其他图则以小尺寸呈现，五格的排版风格统一了排版，也更好的凸显了第一张图的主视觉层次。

如今本土餐饮服务平台已经做得很好了，「吃货笔记」正在从优化福利流程、视觉表现、设计手法等多个维度尝试探索新的运营形态，这种以身作则的精神值得尊敬，光是设计表现的细致程度就超过了大部分产品。当然，每一个好的产品都离不开设计，更离不开产品功能是否能真正满足用户需求，让用户用起来顺手，解决需求后带来满足感。

图标色彩鲜艳，全部使用3D纹理，看得出在设计上花了不少功夫。底部Tab栏的精选图标也使用了3D纹理，与金刚区和空状态图标相呼应，增强了产品风格记忆点。目前产品的评论和下载量似乎没有得到推广，或许是产品分享不多，所以很多人不知道。因此增加了徽章模块，评价、签到可以获得奖励，用这个成就来满足用户的期待，从而增加使用粘性和传播分享。

最后，这款产品的设计尤为出众，通过空状态的文案等内容也可以看出产品的个性特征。比如“没有其他的了，看看其他的”，还有很多其他的小设计细节，这里就不一一赘述了，大家可以自己下载体验一下。

5.95 分

95分是从得物分离出来的新APP，主打潮流放置交易平台，而得物则定位为新一代潮流网购电商。两者还是有些区别的。但从UI设计上看，还是能看到走在时尚前沿的得物的影子，整体风格时尚统一。这里很多细节都值得探讨。

整个设计清爽直观，没有任何多余的装饰元素，这就需要图标完美无缺，才能支撑起整个页面。我把可能用到的图标都罗列出来，轻质感的磨砂玻璃效果，结合统一的渐变元素，让每个图标都精致耐看，值得好好研究。线性图标也是如此，堪称一套完整的作品。这套图标一定花了不少功夫。

在二手平台抢库存的时代，很少看到一款产品尝试新的设计风格，融入近几年流行的毛玻璃风格，这种走在设计前沿的风格，与95分产品走在时尚前沿的调性是一致的，单从设计上的尝试，就已经超越了大部分产品。

6.PODO漫画

毫不夸张地说，这款产品让我对交互表现和实现的理解有了全新的认识。我看了一下最早的发布日期，是去年 9 月 27 日。到目前为止，短短 8 个月的时间，PODO 的交互设计已经如此优秀，背靠腾讯，又带点游戏元素，一点都不奇怪。

图标元素的使用基本没有过多，更多的屏幕空间分配给了动漫封面。三部动画并排排列，背景与主角分离。滑动时，二者在空间层次上发生位移，营造出一种交错的空间感，让原本平面的图像瞬间变得立体起来，十分新颖。

点击动画细节，图文信息从上至下展开，引导用户的视觉享受。页头图片中的动画人物也进行了动画处理，非常有细节感。此外，还有三个明显的交互细节，分别是：设置页展开交互、阅读页底部导航交互、目录页交互样式，都以新的形式呈现。作为设计师，我们再也不能说：“设计已经用尽新招数了。”

互动效果太多，无法在此一一列出，所以赶快收集它们吧！

7. 皮革游戏

我们了解到，《皮玩》是荔枝App的一款持股产品，也是进军陌生人社交领域。但值得注意的是，产品上线一个月，内部框架和UI界面已经比较齐全。卡片、插画、动画、图标，以及一些有趣的设计都已经上线，应该是成熟团队孵化的项目。产品前期能做到这么完美，上线前的测试肯定是下足了功夫。Logo采用了渐变黄底色+吐舌头的表情，给人的感觉要用嘴巴说话才好笑有趣。定位：比较好玩的语音社交尚可。

初体验给人的第一印象就是贴纸式的设计元素，无论是图标还是元素都具有很强的设计感，低饱和度配色搭配白色轮廓，呼应了产品的“玩一点，玩一点”。产品整体配色采用渐变黄、渐变绿，配色非常大胆，体现出这款产品的用户代表着一个兴趣爱好多元化、喜欢尝试新鲜事物的群体，同时产品也想通过这样的设计来吸引用户。

产品中随处可见微动效果，让静态的画面显得生动活泼，这样的做法也是为了给用户营造活跃的氛围，增加平台活跃度。

8. 点击

咔咔是陌陌孵化的社交产品，最近发现一些大公司旗下的产品在独立运营，目的是为了和主打产品分离，防止激烈竞争导致产品停止运营。年前非常火爆的“果冻”肯定在这方面吃过亏。回归正题，首页以视频为主，图片为辅的瀑布流呈现，停在某个位置时直接循环播放视频，布局方式很新颖，体验的时候眼球的左右移动总打断我获取信息的节奏，感觉有点像逼着用户看大图视频内容。点击后可以和对方互动，点赞评论。

看模块，它采用了类似《探探》的卡片交互来让用户操作，但和《探探》不同的是，这种交互是开放的。用户选择自己满意的动态内容添加到卡片后，陌生人就可以看到展示的内容，还会显示点赞她的人数，相当于个人名片，有点抖音+探探的味道。它没有一对一的个人隐私，这是和探探最直接的区别。

在看看模块中，“Say Hi”是与对方建立私聊的唯一方式。如果用户已经关注但还未打招呼，就刷卡走了，就无法再与对方建立私聊，除非对方通过“看看”模块向你打招呼。这个产品细节很容易导致用户因为误解或者手滑而无法给上一个用户发送“Say Hi”私信，而且私信功能需要触发“Say Hi”后才能沟通。入口少，不容易理解，不知道是产品经理故意为之，还是疏忽了。

增加的消息页入口以折叠的方式展示，减少频繁页面跳转带来的断层感，折叠时也不会占用消息列表。

消息列表就是“Say ”保存的私信，聊天格式很独特，黑色背景搭配红紫渐变列表，给人一种欢乐夜店的视觉感受，这里就不做过多评论了，大家自己看懂就可以了。

设计中值得注意的另外一点就是个人主页上的个性化标签，我列出了其中的22个，当用户发布3条类似的动态时，就会亮起一个标签，这个标签同样会代替文字描述承载动态内容，当用户选择亮起的图标时，就会展示对应的标签内容，相当于动态中的标签分类。不过前提是发布动态时要选择对应的标签，否则发布后动态无法再次修改。这个通过标签亮起的功能也是为了让用户的UGC内容更加多样化，同时也是想通过标签吸引用户发布更多的动态。创意是好的，但能否达到好的效果还有待观察。

相对于其他产品来说，咔咔是我一直关注的产品，也是我最喜欢的产品之一，所以分享给大家。

9. 结论

设计师需要有一双发现美的眼睛，美不只是视觉上的，更是一种良好的体验过程，不要让用户去思考，这是每个设计师的追求。

认真记录产品细节，了解其背后的思考，也是不断提升逻辑思维和表达能力的一种方式。

本期的产品细节解析就到此结束，我们下期再见！

首页 个人微信

添加主页主人个人微信即可获得：各大厂商设计规范及元件库、免费中文字体、原型图、作品集等。