UI设计师的产品体验日记

第02篇分享目录（15~30）

15、【instagram】搜索时的名片交换

16、【instagram】自己名片的趣味生成

17、【凯叔讲故事】趣味的故事选择

18、【凯叔讲故事】贴心的守护模式

19、【知乎】会员页面页签的设计

20、【知乎】会员页下拉进入书架

21、【知乎】会员读书会栏目详情页的磨砂玻璃风背景设计

22、【自如】下拉刷新的趣味性动效

23、【自如】金刚区根据城市定位推送自定义内容

24、【自如】我的页面模拟白天黑夜的插画设计

25、【有道词典】听力栏目中的卡片设计

26、【京东】待收货物流的堆叠式卡片设计

27、【招商银行】银行卡号复制粘贴后的自动识别

28、【知乎】页签栏的滑动出现

29、【闲鱼】的精炼评价

30、【闲鱼】精致的闲鱼family

15、【instagram】搜索时的名片交换

点开instagram搜索页面后，页面顶部的右侧有个扫描图标，点开即可扫描他人账户名片，成功关注他人。同时还可在页面下方轻松点击“前往你的名片页面”，直接打开自己的名片页面，让他人关注，整个交换过程简洁高效。

16、【instagram】自己名片的趣味生成

instagram进入到自己的名片页面，默认是“表情”名片，点击屏幕即可选择并更换表情，生成自己的特色名片。同时，点击“表情”按钮，还可切换到自拍名片、颜色名片模式，点击屏幕同样可更换自拍贴纸，背景颜色，给特色名片的生成更多选择，充满趣味性。

17、【凯叔讲故事】趣味的故事选择

凯叔讲故事首⻚右上角设置了类似于宇宙探索的小图标，点击后就像进入浩瀚的宇宙一样，浮现出故事的选择。让用户可以自由的选择喜欢的故事，趣味性的交互形式带给用户全新的体验。

18、【凯叔讲故事】贴心的守护模式

凯叔讲故事我的-设置中，家长可以通过解答数学计算题的方式开启守护模式，设置使用时长，十分贴心，而且验证弹窗中使用 IP 形象融入，情感化的设计增强了与用户之间的亲和力，也强化了该体验的贴心度。

19、【知乎】会员页面页签的设计

进入“知乎”的会员页面，榜单的分类采用页签的形式。选中的页签用设计字体、颜色，外加文字下方小短线来表示，并且选中的页签永远位于首位，其余页签则排队进入后面，使整个页签很独特，识别性很高。

较传统的页签选中状态仅通过颜色和增加下方短线的方式表示，这种方式的选中状态更明显，滑动的效果、字体设计加上首位位置的加持，视觉引导更高效，用户更轻易了解到目前浏览内容属于哪个榜单。

20、【知乎】会员页下拉进入书架

进入“知乎”会员页，当下拉时会出现“松开刷新，继续下拉进入二楼书架”的提示，这时继续下拉便可以很迅速的进入到书架页面，选择自己书架中的书进行阅读，十分方便。省去了浏览页面、选择一些内容加入书架后又要到“我的”—“书架”中查看的麻烦，缩短了操作路径和步骤，帮用户节约了时间。

21、【知乎】会员读书会栏目详情页的磨砂玻璃风背景设计

进入“知乎”会员的读书会栏目，点选一本书籍封面进入该书籍的详情页。封面、作者、评分以及购买价格聚焦到一块卡片上，卡片底部则将书籍封面进行高斯模糊化，形成磨砂玻璃风格的背景，衬于下方。配合卡片的投影一起打造出有空间感的页面，信息聚焦的同时又有沉浸的代入感，让人舒心。

22、【自如】下拉刷新的趣味性动效

进入“自如”首页，下拉刷新时，会出现小熊开门和你打招呼的动效，仿佛在说“欢迎回家”，“欢迎你来”，配合橙色的品牌色给人特别温暖的感觉，十分契合产品。

而当切换到其余栏目时，下拉刷新则是字母“Z”的从二维视角转换到三维视角并进行旋转。整个过程给人一种看房的感觉，先进门然后360度全方位的把房屋了解一遍，特别有趣。

从欢迎回来，到看房展示，两个动效结合在一起，在刷新这个动作进行时将产品很好的诠释，让人对产品留下印象深刻。

23、【自如】金刚区根据城市定位推送自定义内容

进入“自如”，当切换不同城市时，金刚区的图标内容会发生变化，推送不同类型的户型。例如，北京推送豪宅，武汉推送7折安居房。推送不同的背后是对整个城市租房市场需求的深挖和细分，是对城市人口结构的深度解析。

我们在做产品时，会细分目标用户，针对不同目标用户设计不同功能，推送不同内容，从而实现以用户为中心的设计，提升用户体验。而这个目标用户有可能不是具象的某个或者某类使用者，也有可能是容纳使用者的地域，文化等。

24、【自如】我的页面模拟白天黑夜的插画设计

进入“自如”我的页面，白天时插画会展示阳光透过窗户照进家里的感觉，咖啡壶和热气腾腾的咖啡搭配橙色的色调，预示着元气满满的新的一天。到了晚上则是窗外的繁星点点，一弯新月，以及一只可爱的猫咪，静谧的深蓝色提醒你夜已深，早点休息。

模拟时间的插画设计结合温馨的文案，让用户联想到自己的现实：天亮了，我们收拾好自己，元气满满的外出上班；天黑了，我们回到温馨的住所，放松身心。代入感很强，让用户觉得十分熟悉，拉近了与用户的关系。同时，在潜意识中强化了对品牌的认知。

自如客时光计划的卡片设计，配合插画中的咖啡壶，茶杯和猫，像一张桌子一样，融合在插画中。十分巧妙的将购买会员的推送和场景插画结合在一起，既满足了营销的需要，又让整体的页面独特和有空间感，值得借鉴和学习。

25、【有道词典】听力栏目中的卡片设计

进入“有道词典”的听力栏目，听力完全指南中的卡片底部叠加了一层浅灰色圆角矩形，利用扁平化的形式让卡片更有空间感，同时保持整个界面的清爽干净。

26、【京东】待收货物流的堆叠式卡片设计

进入“京东”我的页面，可以看到待收货的商品物流信息，点击后弹出物流详情弹窗。弹窗通过卡片的堆叠设计引导用户左右滑动，查看下一个、上一个商品的物流详情。点击一次，通过滑动即可查看若干商品的物流详情，省去了返回再查看另一个的步骤，操作简便，帮助用户节省了时间，对用户更友好。

27、【招商银行】银行卡号复制粘贴后的自动识别

当在聊天软件中复制粘贴了银行卡号，打开“招商银行”，会弹出“您是否要向银行卡”转账的弹窗提示，点击立即前往即可进行转账。

自动识别省去了用户填写卡号的麻烦，智能的行为预判缩短了操作的路径，简化了操作步骤，十分人性化，大大提升了用户体验。

28、【知乎】页签栏的滑动出现

进入“知乎”我的会员，选定排行榜中的一本书进入详情页，当上滑查看内容介绍时，顶部会出现页签，清晰的告诉你内容简介的类目，以及目前正在浏览的内容属于哪个类目。同时，你可以直接点击页签查看你关心的内容。

滑动出现的页签，配合内容封面、标题以及评价的缩小，让空间利用更合理，展示的信息内容更多。有效减少滑动次数，并且让用户更聚焦于查看的内容，不受抢眼的封面配图影响，专注而高效。

29、【闲鱼】的精炼评价

在“闲鱼”上购买商品进行评价时，只需要做一个十分简单的选择，“赏好评”还是“不赏”，配合生动的表情，简洁明确，无需过多思考。同时，评价中给出一些关键字，直接点选即可，省心，契合用户评价时懒于输入文字的心理。配合“评价一但发表不能修改和删除”的提示，让评价在方便用户的同时，又倍显客观真实。

闲鱼的评价虽是通过购买的商品进行评价，但其评价更多的是针对交易的过程以及出售商品的人。闲鱼是为了让用户自有的闲置物品流动起来，既然是闲置，数量都不多，所以评价的定位便主要是针对卖家本身。比起打分，直接给出好与不好更为直观，更契合交易场景。

30、【闲鱼】精致的闲鱼family

进入“闲鱼”我的，在更多里面点击“闲鱼family”，进入便看到月历壁纸，出品精致，十分养眼，打开即可下载和分享。壁纸专题中间会穿插一些活动、专访和推广。图片设计精美，让人根本意识不到“广告”的存在。

壁纸的推出不仅可以让用户下载、使用个性化精美的壁纸，心情愉悦，强化了对品牌的印象，提升对平台的好感度。通过分享功能更可以帮助产品推广，帮平台赢得用户。