01、分类导航筛选

关键词

#导航分类 #主题

产品体验

爱奇艺：头部切换不同分类的时候，底部颜色跟着切换，气氛跟专题搭配

腾讯视频：头部切换的时候，不同专题选中状态个性化，有点突然

设计思考

爱奇艺：导航切换视觉上统一，专题颜色有带入感，视觉上给用户暗示视频风格

腾讯视频：感觉每个分类都是一个独立的页面，风格上都各自的排版布局

02、表单输入框

关键词

#表单文本输入  #选择输入

产品体验

贝壳：直接选中符合自己条件的选项，按钮直接确定筛选。

钉钉：请假页面，类型、时间选择，选中之后右侧有一键清除按钮，时长自动计算。

花借：授权的时候输入联系人信息两种属性表单都靠右对齐。

设计思考

贝壳：视觉上阅读左对齐，但单位离较远，缺少亲密性。

钉钉：使用大间距留白，同类型文案归类清晰，页面内容不多采用上下结构，合理减少页面留白

花借：统一右对齐，分割线半开半闭，给用户可点击，可编辑的感受。

03、筛选结果

关键词

#筛选数据

产品体验

拉勾网：直接选中符合自己条件的选项，按钮直接确定筛选。

饿了么：筛选选项之后，文案提示“查看XXX商家”。

美团：筛选选项之后，按钮显示“完成X”个选项。

设计思考

拉勾网：求职者目标明确，知道自己的目标，所以文案不需要提示。

饿了么：服务用户角度，帮用户筛选适合的商家，增加用户留存，更加有温度，较好的体验

美团：用户视角，完成多个条件筛选，只提供几个数字，缺少点温度。

04、标签的使用场景

关键词

#标签

产品体验

B站视频：通过标签可以引导用户点击感兴趣的视频。

支付宝口碑金刚位：展览休闲突出卖点广告位：有个光影艺术馆。

爱奇艺：视频封面标签，视频来源，是否付费。

设计思考

b站：视频封面因为是用户自己上传，风格不同意，在封面上打标签识别性较差。

支付宝口碑：金刚位根据卖点，广告位推送。

爱奇艺：标签在视频封面上，视频的标签商业属性强，给用户直接感受，根据自己的会员身份筛选。同时提醒用户可以开通会员获取观看权力。

05、商品标签

关键词

#商品卖点

产品体验

视觉层级，帮助用户快速筛选对自己有用的信息，品牌元素用色块，卖点满减信息用描边标签

淘宝：品牌标签在商品名称前面，卖点跟在价格后面。

贝壳找房：卖点跟在楼盘名称后面。

京东：品牌跟卖点标签都在价格后面。

苏宁：品牌标签在商品名称前面，卖点标签再价格下方。

 

设计思考

一个商品有很多信息，如何快速抓取用户有用的信息，帮用户快速进行筛选，提升产品使用效率，增加转化率。

品牌标签根据用户对品牌对依赖性程度，公司对业务需求来定。

06、qq选择图片松手发送

关键词

#拖动

产品体验

发送图片的时候，长按一张图片 可以拖动发送，有小字提醒“松手发送”。

 

设计思考

长按相册拖动到对话框里，随着手指移动，完成操作，让用户互动有参与感。

07、贝壳找房周边配套多了附近楼盘

关键词

#推荐更多  #全景

产品体验

之前地图只有一些周边配套，现在还给用户提供了更多出口：附近楼盘，咨询窗口，可以查看全景。

 

设计思考

给了用户更多选择，让用户置身于楼盘场景中，身临其境，同时直接抓住用户心里，相同地段其他楼盘推荐，减少用户跳出率，同时提供咨询服务，拉新。

08、喜马拉雅会员

关键词

#付费  #会员

产品体验

会员等级，没开通会员的时候会送几天会员体验，往右边滑动，不同等级会员卡片通过图标、光感动效体现不一样的尊贵感。

 

设计思考

会员的本质就是产品根据用户的投入而给予的特权，满足受众的自我肯定，提升认可感和价值感，刺激用户开会员享受服务。

09、贝壳找房户型提问

关键词

#客户拉新

产品体验

未登入状态的时候，点击户型详情的提问入口，会以气泡的形式展开部分提问问题，再点击就触发注册登录弹窗。

 

设计思考

对未注册的用户提供部分展示信息，以气泡发送的形式展示，刺激引导用户点击欲望，想要知道问答详情，就需要登录注册，一个引导用户留存的交互设计。

10、顺丰速运保存地址

关键词

#快捷保存

 

产品体验

在填写收件人地址的时候，底部有一个“保存到地址薄”的快捷操作按钮。

 

设计思考

因为很多淘宝供应商，公司寄到合作方的合同等等情况，物流市场件多，工作量大。为提高工作效率，减少容错率，用户在第一次书写地址的时候就可以选择保存到常用地址。

11、顺丰速运预计送达时间

关键词

#预估价格  #送达时间

 

产品体验

预计送达时间选择的时候，用图标的形式对应展示，很直观的把物品的重量，价格、时间放在一个盒子展示。

 

设计思考

寄快递最关心的就是时间跟价格，根据发货物件重量对应邮费，不同时间纬度下的价格变化，给用户一个心理价位，上面的时候预留好费用。

12、数字故宫在线逛展滑动

关键词

#切换 

 

产品体验

左右大卡片滑动切换展会入口，正中央的卡片默认放大，视觉上离用户更近一步，带入用户一个看展的感受。

 

设计思考

看展是体验艺术文化的过程，需要用户有带入感，不像电商那种快速浏览，所以更深入的互动性，大卡片的那种banner 展示效果会让用户有点击欲望。

13、小来打卡早起鼓励

关键词

#用户留存  #排名文案

 

产品体验

早起排名，超过50%（一定比例）文案鼓励：比XX%的人起的早；起的晚低于50%之后：比760万人起得早。

 

设计思考

打卡之后根据大数据分析你的排名，通过不一样的数据单位展示。无论早起与否，满足用户自我满足，自我安慰。从数字上鼓励用户早起，并能进一步刺激用户转发分享。

14、微信读书-首页卡片

关键词

#社交  #拉新

产品体验

首页是大卡片切换区别于其他读书类平台的没有设置金刚位分类，微信读书基于社交功能，提供一些跟好友的互动每日一答活动，集赞得联名卡

设计思考

把读书这件事情做成社交属性，变相让用户主动去读书，增加用户活跃度，增加了用户粘性跟用户拉新。

15、惠择网-便捷的客服顾问

关键词

#信任感  #便捷

产品体验

惠择网App在首页右侧悬浮展示了客服咨询入口，提供客服咨询或者专业咨询，降低用户学习成本。

设计思考

为了降低浏览页面时的干扰，上滑页面会隐藏显示1/3左右。以吉祥物小牛为客服形象代言，情感化的表现带来更好的品牌传播和亲和力。带给用户信赖感，建立信任。