8.2-丁香医生-孕育管家-精确到天的怀孕指导

孕育管家是丁香医生在首页金刚区开辟的一个快速入口。怀孕和育儿前半年宝宝生长迅速，需要更加细心的照顾。丁香医生在顶部导航栏上提供了贴心的实时管家服务。用户可以选择自己的怀孕阶段，并且可以精确到天。丁香医生可以显示不同阶段不同时间中妈妈/宝宝应有的状态而给宝妈们提供一个对照准则。

身份状态功能上可以输入多个宝宝信息，按照不同的成长阶段可以给出不同的建议。

设计反思：明确不同阶段的用户行为差异，从而精准的击中用户需求痛点。

8.3-丁香医生-孕育管家-第一人称/第三人称语气切换

在怀孕中阶段时丁香医生会模拟宝宝的身长，体重，并在宝宝变化一栏用宝宝的语气描述自身变化。由于父母无法在该阶段每天观察到宝宝，这种代入式模拟体验可以缓解孕妇焦虑。当孕期结束进入育儿期，宝宝变化一栏的描述变成第三人称，从专业医师建议的语气进行描述，从而增加建议的可信度。丁香医生很好的掌握了不同阶段宝妈的心理需求。

 设计反思：设计过程中考虑情感化设计，根据不同阶段用户的心理特征给与不同的心理暗示。

 

8.4-Yelp-个人社交影响因子板块

很多社交软件都把通知之类的藏在二级页面中。Yelp在个人页面留出一个板块，将一些社交互动数据直接平铺展示，更加方便用户看到最新消息。

 设计反思：尽量减少用户二次操作，将信息结构扁平化快速穿搭关键信息。

 

8.5-平安银行-下拉首页进入快速入口

银行App作为一个功能较多的平台进入时容易眼花缭乱。平安银行APP首页在短距离下拉时为刷新，长距离下拉时会出现“二楼“，即快速通道。用户可以快速选择常用应用。

设计反思：当App体量变大后通道变多容易让用户无从下手，这时更要考虑用户的使用习惯，让用户可以快速筛选信息。并且手势操作会比按钮通道更加便捷。

 

 

8.6-平安银行-快速通道改版

在新版的快速通道页面，平安银行弱化了”每日寄语“的视觉重量，由图片+黑色透明度模板转为渐变色浅色背景，使人的视觉重心更集中于图标。同时将图标格式与首页图标格式统一，并采用了卡片形式突出图标。我的应用被移去改为最近浏览（可能功能有点鸡肋，最近使用/浏览等同于我的应用，还不用用户二次操作）。回到首页的视觉重量增加，同是体积减小，方便沉浸式阅读。

设计反思：在设计时要区分信息层次，强化重要信息。

8.7-Airbnb-adventures 首页改版

新版的adventure板块一改原本的首页采用dark mode下滑变为light mode，将整体页面都改成了light mode,整体更为统一。 同时对信息的优先级进行了重新排序，标题排第一并且字体变小，随后是评分，地址并列排放，增加了首页的利用率。将天数，标签从首页中移除（天数移到第二页，单标签直接删除了，可能是因为标签的引导程度过低）。另外新增了地点和Adventure的引流入口。

设计思考：要考虑首页利用率和信息分级，最快速的传递最重要的信息，减少认知负荷。

 

8.8-淘宝-刷新与广告结合

淘宝在下拉刷新时如果一直往下拉会出现隐藏广告。

刷新之后才出现的广告可以激发人们的好奇心。因为平时是隐藏起来的，更容易让用户想要去探究。

设计思考：这个设计完整的包括了情感化设计中的三个层次：本能，行为和反思设计。下拉刷新已经不仅仅是一个单一的功能，需要最大化的利用好有限的空间。

8.9-Lemonade-贴合主题的动态Walkthrough

 

Lemonade是一家提供公寓生活服务的APP。因此App的walkthrough选取了用户在小区一路走到家里后的景象。人物一直处于向前走动的动态，使人在想要快速往下滑的时候也会想要等一等看小人走到了哪里，从而增加用户停留在walkthrough的时间，更好的宣传APP。（用户必须付月费才能登入，因此越仔细看walkthrough才能更好的吸引用户）

设计思考：增加代入感，利用特殊的动效吸引用户去了解产品。

8.10-Airbnb-卡片内部设立table view

一般来说在同一个地点预定的民宿不会太多。因此Airbnb在行程信息中会将每个文件夹内部的咨询平铺在卡片中。这样的话用户不用二次操作就可以看到所有的行程。而收藏夹会有大量的房源信息并且用户对于每一个具体的地址信息需求并不是那么迫切，所以就并没有采取这种方式。

设计思考：增加页面的使用效率，突出重要信息。

 

8.11-流利说-轻量化提示向下点击

流利说在用户第一次使用朗读课程时会用小圆点来提示用户向下点击。既没有打断用户的操作流程又让用户了解了使用方式。

设计思考：在可能的情况下尽可能不要打断用户的使用流程。

 

8.12-Class Dojo- 利用表情包提示用户打开消息推送

Class Dojo在弹出是否授权消息推送的对话框时在允许下面是用了表情包，从而增加了“允许”选项的视觉比重，更加容易让用户选择开启消息推送。

设计思考：可以利用加入插画，表情等特殊场景来吸引用户注意力，从而提高用户的对于某个功能的点击率。

 

8.13-Eventbrite-用短句引导用户进行更详细的搜索

Eventbrite是专门进行活动报名的平台，所以在搜索的时候如果能让用户确定时间，地点，时间的话可以更精准的引导用户搜索到他们需要的内容。同时采用了第一人称并且使这些关键信息能够连成句子，更加拉近与用户的距离。

设计思考：精准定位，情感化设计，采用第一人称增加代入感。

 

8.14-美团1-进入人气榜显示评价详情

在美团中点击进入一家商铺，如果是进入人气榜单的话则会把原有的分段控件部分（点菜，评价，商家区域）改为展示评分内容，并着重展示好评数量，从而展示商家优点，驱动用户购买。

设计思考：精准定位，根据不同情况分类显示不同信息。

 

8.14-美团2-突出显示联系商家功能

用户在决定付钱的时候是最纠结的时候。这时如果能够向店家咨询的话可以增加用户下订单的决心。美团将联系商家的按钮与结算的浮动操作按钮放在同一层级上，从而鼓励用户与商家进行交流，避免对商品产生分歧。同时用颜色来表示商家的不同状态，包括在线，不在线，不支持线上沟通等。

设计思考：场景代入，通过分析场景来明确用户特定的需求。

 

8.14-美团3-选择将外卖放入不同口袋

用户可以选择是不是将商品分袋包装，这样可以更方便用户进行拼单，特别适用于办公室场景。

设计思考：同上，考虑用户在使用时所处的不同场景。多维度分析用户需求。

8.15-芒果TV-长按左边屏幕快进

芒果TV在播放视频时如果长按左边屏幕表示快进，右边屏幕表示后退。比较有特色的是长按左边屏幕后整个左边屏幕会一直不断的出现大面积不同透明度的白色蒙版和代表不断前进的箭头动效，能够让用户实时意识到自己正在长按快进，给予的反馈比较强烈。

设计反思：在采用手势控制的时候要给用户足够多足够明显的信息反馈，从而帮助用户快速上手。动效需要贴合用户使用场景和使用意图。

 

8.16-淘宝-底部标签栏多功能，浏览商品后可回到顶部

当点击淘宝首页标签时，首页按钮会变成logo形状，再次点击则会将页面带到推荐商品页面。下滑后logo会变成小火箭形状，点击可以返回顶部。相对于其他回到顶部的悬浮按钮，这种设计不遮挡用户实现，可以完整地展现整体界面。

设计反思：充分利用页面空间，尽量让同一布局能够适应不同的使用场景从而避免功能过多页面杂乱。

 

8.17-饿了么-tooltip提示用户再次确认地址

在饿了么下订单前APP会在地址栏再次利用tooltip跳出常用地址来提醒用户再次确认地址是否正确。跳出常用地址也可以方便用户跳转收货地址。另外如果是经常下单的餐厅类别会自动填充常用地址，但如果这个类别之前点的很少会要求选择收货地址来确保不会送错地址。

设计反思：考虑使用场景。同一功能在不同场景不同类别里呈现的方式不同，要进行筛选。

 

8.18-淘宝-店铺微淘-进入页面两三秒后出现评论气泡 

店铺微淘作为商品种草和讨论区域，更需要提高用户的参与感。一旦用户在某一详情页面浏览超过两三秒后说明对此感兴趣，会弹出最新的评论气泡，好像其他用户在身边讨论一般。如果打开评论窗口在退出，则会弹出时间顺位第二的评论。从而提高用户对该商品的兴趣程度。

设计反思：注重情感化设计和沉浸式体验，营造场景氛围。

 

8.19-AllSet-商品加入购物车后会显示缩略图

AllSet 是一款提供提前点餐打包服务的APP。当用户将餐点加入到购物车之后，选择的餐点会以缩略图的形式出现在悬浮的购物车一栏。同时这个悬浮栏在其他页面也会显示，但是如果用户想要点另外一家的餐点，就需要清空购物车。这个方式可以提醒用户在浏览其他店家时也能记得之前自己点了什么餐点。

设计反思：确保用户在进行中的思考和行为不会被其他操作打断。

 

8.20-豆瓣-自动隐藏已经操作过的不重要信息

在豆瓣想要给某个影视作品打分时分三个步骤： 评分类别，评分标签，评价内容。在某个步骤点选完后，豆瓣都会隐藏上一步不重要的信息从而优化信噪比。在选择完评分类别后（比如想看），这个控件就会被隐藏。然后选择完标签后则只会显示已选择的部分，从而增加评价内容的页面占比，使用户更加聚焦在写评价上。

设计反思：控制信噪比，突出用户现阶段的需求。不要给用户的操作产生过多的干扰。

 

8.21-喜马拉雅-音频右上角share功能二次进入时用微信icon提示

喜马拉雅右上角两个按键都有包含分享的功能。但是在第一次进入页面时显示的是分享的图标，但是跳出喜马拉雅界面后再次进入就可以看到其用跳动的微信icon代替了分享图标的位置。

原因应该是用户在二次进入页面时应该已经了解过了音频的大致内容是什么，用户对该音频有兴趣的可能性相比第一次进入更大。这时候就要鼓励用户分享这个音频，而微信应该是分享的频率最高的icon。

设计反思：考虑使用场景。明确用户在不同时间段的使用目的是什么。

8.22-Airbnb-同时显示地图模式和列表模式

很多旅游软件会将搜索分为两种模式-地图和列表，通常是以用icon来进行模式切换来实现，比如去哪儿。但这种方式其实弱化了地图模式。用户需要二次操作才能进入。而Airbnb则将地图和列表同时呈现在一个页面中，用户很难忽略掉这两个选择，避免了多次操作降低用户操作成本。

设计反思：首先要确定重要性，其次要考虑用户操作便捷性，呈现方式是否能快速传达信息

8.23-美团-民宿地图显示周边详细信息

在预定民宿时，房源的地理位置相对来说是一个重要的参考标准。美团将地图和地理位置优势结合了起来，更有利于用户筛选位置信息，同时也是对房源的地理优势进行了宣传。另外地址方便还有复制功能，可以快速的让用户复制地址信息。

设计反思：如何减少用户的二次操作，可以快速的看到产品优势信息。同时考虑用户使用流程，对产品的功能层级进行划分。

8.24-自如-Banner将背景与图片区分

自如首页的Carousel很好的跟导航栏的背景层相结合。在移动的时候Carousel的内容主体会随着手势移动，但是背景通过透明度变化进行变动，从而增加了Carousel的面积来吸引用户的注意力，同时也丰富了Navigation bar的层次。

设计反思：设计时要解构层次，模块化设计。同时考虑相邻模块的关联性，寻求效果利益最大化。

8.25-自如-导航栏文字随滑动区域变化

在自如房源的详情页滑动时，顶部导航栏的显示文字会随着经过区域变化。在经过价格/面积/朝向这些关键房源信息前标题文字显示的是房源状态和房源地址。在经过这些关键信息后提炼了价格/面积/朝向这三个关键信息显示在顶部导航栏上。

从用户使用步骤出发，一般遇到中意的房源可能采取的行动是收藏，预定和沟通。这三个按键将底部控制栏的空间占据了，导致不能像很多购物页面一样将重点信息和按键同时放置在底部控制栏上。因此通过筛选，自如将顶部相对来说不那么重要的房源地址替换用来展示更重要的关键信息。

设计反思：充分思考空间利用率，将层级低的信息位置让给层级高的信息。

8.26-蛋卷基金-长文字登录/注册按钮

一般我们在用户界面登录或者注册时，按钮文字为登入或者注册，很少看到长文字按钮，但是蛋卷基金一反常态采用了详细说明文字在按钮中。作为投资类App，蛋卷基金会更加注重传递给用户一种安全的信号。通过反复强调蛋卷基金和安全这些信息，可以增加用户的信任感，让人感觉更为严谨和可靠。

8.27-Fabulous-步骤提示预览

在Fabulous上播放冥想音乐需要经过三个步骤-下载，准备耳机，播放。在等待下载的时候用户就可以在下方看到接下里两个步骤将会出现的页面提示，告知步骤次序和所需时间，让用户了解整个流程。

设计思考：如果步骤较多，让用户可以预判接下来的操作可以提高用户完成整个步骤的几率。

8.28-雪球-讨论区弹窗置顶

讨论区域由于体量大，信息杂，很多情况下位置会放在页面靠后的位置。然而证券的相关信息较多，用户如果想要去到讨论区需要下滑很久。而讨论区作为一个自主交流分析的空间会对用户的对证券走向的判断也会造成一定的影响，用户可能会多次查看这个板块。因此需要有一个快速通道可以随时查看讨论。

雪球将讨论弹窗放在页面下端，可以跟评论按钮处同一区块，很好的体现了接近法则，将功能接近的组件靠近放置。同时当用户将页面下滑到讨论区时这个弹窗也可以跟页面无缝连接，不影响用户的阅读体验。

设计思考：将相近功能归类放置；设立快速入口时要考虑如何提高用户阅读的流畅性。

8.29-微博-个人主页显示切换

微博最近将部分个人主界面进行了改版（目前是两个版本都有出现。个人账号可能因为用户太少怎么都无法切换到新版页面）。可以看到新版的个人信息主页布局更为清晰,并且对信息层级重新进行了排列。

比较突出的几点是 1.避免了文字直接出现在图片上而导致的清晰度降低。2.将基本信息栏和个人认证等分散的信息归为一类，并把普通用户不需要了解的一些信息折叠到了抽屉里，帮助一般用户快速过滤信息，从而提高了首页利用率。3.用色彩标签展示人气类数据，帮助用户快速了解流量情况。

设计反思：对于用户需求进行梳理，明确页面层级。同时优化信噪比，合理利用有限空间。

 

 

8.30-Drop-手势记忆单词

Drop作为一款语言学习类软件，在用户学习过程中加入了了大量的手势操作。这种操作方式留给了用户足够的思考时间，而不是莽撞的做决定。同时手势也可以增加互动性，从而加强单词的记忆点，提高记单词的趣味性。

设计反思：在设计过程中可以考虑通过手势来提高交互体验。