1. 【小宇宙】发现页的创意交互

     播客是互联网时代的电台，小宇宙是一个专注播客的APP。其中「第0期广场」中可上下左右任意滑动收听试播节目 停下滑动时自动吸附在页面中央。这种交互方式如其名，形成了在热闹广场散步的氛围，看着了感兴趣的话题，就能加入听到他们的对话。这种方式有助于激发用户的好奇心理, 为发现页提供了有趣的交互方式。

 

2. 【掌阅精选】优雅的书籍二级分类

     读书类应用会涉及到书籍的多层分类，如何清晰优雅地呈现二级分类呢? 掌阅精选提供了有趣的方案: 将分类标签设计为书的比例依次排列，点击即向右滑动展开二级分类，为了更加直观，将该类书籍的代表作作为图示，减少了用户的认知成本，提高产品后期内容推荐效率和准确度。

 

 

3. 【哔哩哔哩】评论区的暖心细节

     在影音应用中, 除观看视频之外，还有一大乐趣就是翻看评论，良好的内容质量和社区氛围让用户更愿意停留。在bilibili 的评论输入框和弹幕发送框里，用占位符加上了贴心的文字提示“发一条友善的评论”“发个友善的弹幕见证当下”, 引导用户发言的时候注意符合社区规则。

4. 【网易云音乐】歌词背景随专辑封面变化

 

    在网易云的歌曲播放页, 背景色调跟随当前播放曲目专辑颜色变化,  当音乐切换到下一首, 背景色也会随之变化.  歌曲背景由专辑封面高斯模糊生成 , 每首歌都有自己独一无二的背景色，形成了柔和沉浸的氛围 ,丰富了音乐播放的体验. 

 

5. 【猫耳FM】根据兴趣划分专属内容

     猫耳FM上的作品以广播剧等声音作品为主，有风格鲜明的男性向与女性向之分，于是案例在顶部导航与左上角设置切换按钮(男性向or女性向)，配合小动画和弹窗提示用户切换状态，给不同类型的用户展现专属的内容推荐。

     Icon的状态也很有意思，展现为两个方块的部分重叠，男生版是蓝色在上，女生版则粉色在上，配合小动效展示切换动作, 清晰易懂. 

 

6. 【幕布】缺省页指引用户操作

     思维导图工具的操作不同于普通软件，一些捷径和特殊功能有一定的学习过程。因此，除了新用户的引导之外，案例中在「我的模版」的缺省页，合理利用缺省页的空白部分展示对应的功能指引，直接引导用户进行功能体验。此外, 左上角的功能引导，也采用渐变过渡式的方式聚焦，形成柔和细腻的指引氛围。

 

  

7. 【Instagram】无边距-打造沉浸式体验

     在界面的内容区图片展示模块，左右贴边不设边距，多图展示时使用极窄的边框设计,  可最大程度放大图片, 提升阅览效率, 带来沉浸式的体验.

  

 

8. 【Instagram】趣味二维码定制,  引导分享突出品牌

可选择三种模式(表情/自拍/颜色)展现自己的专属二维码，可操作性和趣味性较强

• 表情模式：可自定义emoji作为背景图，二维码的颜色随着emoji的颜色而改变。可反映本人的心情、状态或兴趣，为社交提供切入点

• 自拍模式：可拍大头照作为平铺背景, 自拍时可切换眼镜、胡子等装饰

• 颜色模式：选择纯色作为背景

 

     二维码的处理也有特色, 利用了二维码中间的空白区域放置产品LOGO，强化了品牌整体感，且与三个识别点做了统一的圆角处理, 视觉效果非常和谐。

9. 【盒马】卡片式设计“抽屉”新玩法

     盒马的「盒区生活」板块，是生鲜商城的配套美食社区，用户在观看视频菜谱的同时，可以选购下方的相应食材。此处将下方选购区做成小型卡片，无需跳转页面就可以将商品添加到购物车，简化了操作路径，也是卡片式设计的延伸应用案例。

 

10. 【盒马&每日优鲜】分类导航对比

     在最新的改版中的首页，盒马没有按照常规做法，将分类导航置于左侧一列（图1），而是改为了可滑动的顶部标签导航，以品类缩略图作为标识（图2）。腾出左侧空间，使商品列表有了更大展示空间，同时图片导航可减少理解成本，一目了然，使用户能更快地挑选到目标商品。

  

11. 【盒马】图片流的错位布局

     盒马的在商品浏览页中，利用首行中banner和商品卡片的高度差，形成图中的错位布局。和常规田字格式的布局相比，纵向的结构能更好的引导用户向下滑动，且能丰富页面的视觉层次。

     值得注意的是, 盒马的图片流不仅仅用于展示商品, 也穿插了一些推荐搭配、菜谱等内容, 以卡片的形式穿插在商品中, 营造商品丰富、食欲大开的氛围, 引导用户下单购买.