带你领略那些APP中的优秀细节设计app进度条banner

导语：平时生活中，我们会使用各种各样的APP，不论是打个车、买个菜还是看个电影都可以用互联网产品完成。在使用这些APP产品的时候，我们会感受到这个好，那个不好，但是要问到底为啥这个好那个不好，就说不上来了。下面为大家浅析一下这些好到底好在哪里？

一、爱奇艺绿镜功能

然后搜索一番，得出结论：跳过的人或者高倍速观看越多的地方曲线频率就越低，观众集中观看热度高的片段曲线频率就高。观众可以根据该曲线预判哪一段倍速略过，哪一段正常速度观看，不会错过精彩片段。

二、叮咚买菜找相似功能

叮咚买菜APP首页底部模块产品列表，第一次到达这里，会有一个长按[找相似]的图文提示，当用户长按该产品展示区域，就会出现“找相似”按钮，虽说这个组件起到一个按钮的作用，但是造型设计为搜索框样式，暗示用户这就相当于搜索该款产品相似的其他产品。

其实这个功能几乎是在所有的电商类购物平台都有，只是有些是通过长按，有些是直接展示出来，有些不仅包括长相似，还会有其他不感兴趣、引起不适等屏蔽图片的选项。

三、Airbnb首屏banner轮播下方圆点展示设计

Airbnb顶部banner轮播区的一个细节设计，共三张图轮播，但不能循环播放。

底部的小圆点设计与一般的有所区别，一般都是三个小圆点，当前banner的小圆点高亮，其余弱化，这里是将当前播放的banner的圆点设计为圆角矩形，有”播放“功能，就是当切换到当前banner以后，圆角矩形会变成一个进度条，从弱化的颜色逐渐变成全白的一个过程，当圆角矩形完全变白以后这张图片就播放结束，轮播下一张，依次继续。

Airbnb的顶部banner轮播

四、哔哩哔哩进度条设计

bilibili的进度条采用吉祥物小电视，将品牌元素融入细节，很赞。

体验很舒服，对于新手入门来说，照着步骤操作的成功体验，会增强对这款软件使用的信心，从而增强用户对这款软件的喜好度。

引导弹窗位于界面中央

选择继续之后引导弹窗自动转移到右下角

按照指示步骤完成后，弹窗界面自动上滑

同上

点击左图中的书籍封面，就会跳转到右侧，跳转小动画就是封面由小到大，翻页

七、自如APP顶部banner轮播效果

一般banner是一整张图，轮播的时候整体左右滑动展示，但是自如的banner轮播有些与众不同，是将banner分成两部分，一部分是背景信息A，一部分是文案等重要前景信息B。背景与前景的轮播方式不一致，背景采用淡隐淡出的切换效果，前景采用左滑的切换。

这样设计的好处一方面新颖，让人眼前一亮；另一方面信息层次更鲜明，因为背景渐变效果的“静变”与前景左滑的“动变”形成了鲜明的对比，再加上人容易被动态的东西吸引，所以更加凸显了重要的前景信息。

灵动的banner设计

八、美团单车用车界面展示设计

点击美团APP首页“骑车”，首先展示的是缓慢收缩展示当前市区可骑行区域的整体范围，还可以一目了然的看出自己是否在可骑行区域内，停顿1s，切换到用户当前地点区域，微观展示周边单车情况，再停顿1s,正式来个微小又利落的收缩，指针再微微跳起来重新定位一次。短短3s，界面变化了3、4次，灵动、有节奏，用户体验舒适。

美团骑行

九、墨迹天气的启动页面设计

墨迹天气使用有几年了，能感受到墨迹设计团队很有设计追求。启动页的设计，是将品牌logo与节气元素融合的设计，再增加一点点微动效，让人赏心悦目，百看不厌。

墨迹天气部分启动页

通过以上的案例分析可以给我们带来如下启示：

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