“网易云音乐”-右上角头“与你我很配”

 产品体验

网易云音乐打开单曲播放的时，界面右上角头像下会提示该用户以你的“匹配度”、“默契度”、“耳机分ta一半”的提示。点击进去，则是头像客户直播间，同时会出现“免费领取黑胶5天体验卡”。

设计思考

1. 降低品牌色的饱和度的浮标提示，头像的波纹放射动效，无疑会吸引用户的注意力。

 

2. 简单文案：匹配度、默契度、耳机分ta一半，就会引起用户的好奇心，从而提高界面的点击率和停留时间。

 

3. 点击提示按钮就会跳转到该用户的直播界面，黑与红的经典配色，黑胶VIP5天免费体验优惠券，成功了吸引了用户的注意力，从而提高的用户的点击率和转换率。

“乐刻运动”-“记运动”的形象简图 

产品体验

打开乐刻，进入到运动界面，“运动日历”模块运用了设计艺术字体，使得此模块更具运动气质，点击“记运动”按钮跳转到“记运动”界面，训练主题是身体不同部位的简图，形象生动。

设计思考

1. “选择训练主题"的简图形象的展示了人体不同部位，可以让用户对身体的肌肉群有大致了解。

 

2. 根据“主题简图”用户可以很好对自己的锻炼进行一个合理的规划，这样对初级的训练者无疑是一大好处。同时加大了用户对产品的沉浸式体验，和对产品的依懒性。

“云闪付”-会循环的金刚区图标

 产品体验

“云闪付”的金刚区图标无论向左还是向右滑动，两版图标来回循环的。点击更多进入全部图标列表。

设计思考

1. 首页金刚区的icon与其他类似的产品交互截然不同，在体验的过程中给用户新鲜感和惊喜，更能让用户沉浸其中。

 

2. 很多的金刚区icon交互只能滑动到第二屏或是第三屏就不能往下了，只能往回滑动到首屏icon。而“云闪付”的金刚区icon虽然只有两屏，但是可以左右循环滑动。这样的交互设计，打破了常规的金刚区icon的交互，给用户新颖的体验。同时也减少了用户的操作步骤，大大提高了用户的工作效率。

“云闪付”-我的隐藏功能“小程序”

产品体验

“云闪付”的首页整个页面往下滑动，会跳转“我的小程序”界面。“我的小程序”界面在原有的基本程序中，还可以通过搜索添加其他的应用小程序。

 

设计思考

1. 其他许多类似的APP产品中，首页整个界面往下滑动，基本都是更新界面或是品牌形象动效的展示，来加强品牌效应。

 

2. 而“云闪付”的top动效却是直接跳转的到“我的小程序”，变向的吸引了用户的注意力，同时提升了用户对界面的点击率，并且也提升了各个业务产品的转换率。

“淘票票”-tab会员华丽“三变”

产品体验

“淘票票”tab会员在不同状态下的变化，在其他界面加载状态下的会员icon是线性的，在会员界面的会员icon是面性的，在网速好的情况下会员界面的会员icon是IP图片式的。

设计思考

1. 许多的tab图标的交互动效，基本都是线性转面性，在网络加载中也不会出现第三种模式。tab图标的设计中或多或少都会融入品牌的元素比如：IP形象或logo元素等等。然后加上交互动效，使得整个APP的tab栏更加的生动，再加上结合品牌元素之后大大的加强了品牌效益。

 

2. “淘票票”的tab栏的三种状态，充分说明的交互设计考虑到了用户在网络不同状态下的体验感受。还有就是会员icon在不同状态下由线性-面性-IP图形的转变，在转变的同时icon的颜色变化，其中重点突显会员icon与众不同和重要性。让用户能更好的沉浸其中，从而提升了普通用户向会员用户的转化率。

“微信”-tab栏的透明磨砂效果（iOS）

产品体验

打开微信，下拉看到tab栏左边的透明磨砂效果，无论是下滑，还是消息通知，左下角的透明磨砂状态对用户的视觉冲击都要强烈一些。

 

设计思考

1. 微信的tab栏透明磨砂状态，似乎是iOS系统的特殊以待。针对这个效果对比了安卓系统的微信，都没有这样的效果。iOS微信的透明的磨砂效果给单调的tab栏添了一抹喜色，让视觉焦点停留在了左下角的消息icon上。

 

2. 磨砂玻璃效果是最近一两年来比较火的设计，无论是在B端还是在C端，这样的设计无疑起到了点睛的作用。iOS系统的微信设计，及突出了微信本身社交软件的定位，也跟进时代的设计潮流，让用户能更好的沉浸式体验产品。

“腾讯视频”-选择你喜欢的角色

产品体验

在没有全屏的是时候观看电视剧，界面会有发电站的浮层图标，点击进去会有角色的头像，点击头像会进入送礼物的界面。

“翻咔”-人物卡片的“喜欢”与“跳过”提示

产品体验

打开“翻咔”软件，首页就是用户个人展示照。人物卡片上方有照片张数的提示，点击照片跳到下一张。按住照片向右滑动会提示“喜欢”，向左滑动会提示“跳过”。

设计思考

1. 在没有互动人物卡片时，卡片下方就有“×”和“红心”点击图标。产品一开始就给用户了判断的预设。

 

2. 左右滑动人物卡片给用户带来不一样的体验，“喜欢”和“跳过”的提示给用户了考虑和判断的时间。设计考虑到了用户的心理，同时也是尊重每一位用户——滑动卡片用了“跳过”而不是“不喜欢”。

 

3. 间接的增加用户使用体验产品跟用户之间的粘性。

“淘票票”-瀑布流中的反复强调

产品体验

打开“淘票票”软件，首页霓虹玻璃背景设计感很强，首页的精选内容瀑布流中滑动一屏到两屏就会反复出现“淘票票片单”、“淘票票榜单”重点突出信息。

设计思考

1. 在瀑布流的设计中运用了：梵雷斯托夫效应，在间隔一到两屏的时候反复出现“淘票票片单”、“淘票票榜单”的卡片。这是为了突出重点信息，提升用户的点击率。

 

2. 重复出现的信息也会运用不同的背景，从而给用户不用的吸引力，并且加深了用户的关注度。这样间接的增加了用户体验产品时界面停留的时间。

“京东”-待收货的温馨地图

产品体验

打开“京东”软件，查看我的待收货，点击查看物流会进到物流地图，地图上可以看到货物的当前位置和距离终点的公里数。当静止界面不动时，运货车会沿着公路移动。手动还能缩小地图，可以看见收获地址和配送站，还能可以看到出货自提柜的位置。

设计思考

1. 货物当前位置和货物距离终点的详细距离，这样的设计维护了用户的知情权益。同时物流车沿着公路移动的效果，成功的缓解了用户焦急的等待心理，并且间接的增加了用户在界面的停留时间。

 

2. 全景地图详细的标出了揽货地点、物流车当前位置、配送站、收货地址。这样的温馨提示，让用户清晰的知道货物的位置，终点距离。这样间接的加深了用户信任，同时也给了用户安全感。

“云闪付”-首页底部的温馨提示

产品体验

“云闪付”底部的温馨提示是“继续上滑进入生活”，如果不想滑至底部也可以直接点击tab上的“生活”进行交互跳转至生活界面。

设计思考

1. 在不同的金融APP或是其他的一些APP产品中，首页滑至底部之后都会有不同的提示，比如：slogan、品牌信息、或是h5活动，这些都是增强品牌效应的一种表现手法。

 

2. 而“云闪付”底部的提示：继续上滑进入生活，这样的交互设计无缝衔接了两个界面。用户在沉浸式的体验产品的时候，不会因为首页至底后的错愕，反而可以直接滑至到生活界面，让用户在界面上的停留时间大大加长了，并且加大了用户转换，产品的变现率。

“网易云音乐”-弱化的横屏icon

 

产品体验

“网易云音乐mv”手机端竖屏的时候，视频中间的横屏icon，不仔细去看就会忽略掉。这样的设计主要是让用户沉浸视频体验。

设计思考

1. 许多的影视App里都会有手机横放全屏的icon提示，只是他们的位置大致都会在右上角或是在右下角。这样的设计主要是为了保证与其他的icon提示和排版设计能保持统一性。

 

2. 然而“网易云音乐MV”里的横放icon提示确是在视频右边的中间位置，位置虽然十分的显著，但是设计弱化了icon的存在感。用户只有在沉浸视频体验中，才会发现icon的存在。还有就是现在的视频只要你把手机横过来，视频就会自适应。设计师也有可能是因为掌握了现在用户对操作习惯和用户的心理，故意这样弱化横屏icon，达到让用户更好的沉浸式体验的效果。

“豆瓣”-自适应的小视频

产品体验

浏览豆瓣推荐，点击分享视频。可以看到视频播放模块和评论区，下滑看评论区信息，播放视频就会自适应缩小。

设计思考

1. 许多的视频都会自适应，看视频的时候突出视频内容，评论区的占比就会小。看评论的时候突出评论，视频播放占比范围就会缩小。豆瓣的播放不仅区域缩小了，就连视频也跟着变小了，这样的交互动效一开始的时候挺有意思，但是会影响到视觉效果。

 

2. 不过这样的设计，缩小视频跟视频区域，极端的弱化视频内容，高强度突显评论区域的内容。两极划分明显，给用户的不同的体验感受。

“豆瓣”-启动广告的小动效

 

产品体验

每次打开“豆瓣”应用图标，都会出现不同的公告启动界面，广告有动态也有静态的。主要还是点击按钮的动效，由灰色变到豆瓣主题色。

设计思考

1.APP启动页有很多的不形式，有情景化、活动性质、还有就是广告类型进入第三方的应用的。而广告类的既可以跟不同的单位合作，提高自身的收益。同时也可以提高用户的互动，加大应用关系。

 

2. 豆瓣广告启动页的跳转按钮，5秒内由黑色透明，动效到了豆瓣主题色同时蒙版出现一个小手指作为指引。按钮运用主题色，及没有因为广告视觉而影响品牌效应，趣味的五秒动效，反而给用户一点趣味，提升了用户的兴趣从而提高用户点击率。

“星巴克”-微信小程序的广告条

产品体验

打开星巴克微信程序，进入点餐界面。可以清晰的看到美食上面的黄色广告轮播条，点开向下的按钮就可以看见所有的轮播广告文案。

设计思考

1.广告位的展示，在APP中也是各形各异，表现的形式也是不同。星巴克的文字广告轮播，所在的位子面积不大，但是很醒目。浅色的黄色色块，既没有挣艳下面的美食广告，配上深色的文字反而使得界面统一和谐，并且还能引起用户的注意，从而提高界面点击率和用户在界面停留。

 

2.简单的文字遮罩轮播，让纯文字向上轮播。这样轮播广告使得界面更加的生动、具有活力，打破了纯文字广告的呆板。

“星巴克”-微信小程序的购物车

产品体验

打开星巴克微信程序，进入点餐界面。底部左边是一个购物袋，右边是置灰按钮（无点击状态）。当选择好商品后，购物袋出现数量、金额和幸运星数，右边按钮呈现品牌色（可点击状态）。

设计思考

1.购物车的表现形式都是不同的，主要还是针对自己的产品做出最适合的且具个性的购物车形式。简单品牌的购物单装载这自己的商品， 品牌效益满分。有无商品的表现形式也别具特色，数量、金额、优惠、积分全部都呈现出来。

 

2.置灰的按钮，呈现无商品不可点击的状态。转而品牌色有商品可点击的状态。明显的交互转变使得界面由初始态到购物态的转变，让界面变得生动，也让用户得以更好的体验产品在不同状态下的转变。