两只橘子产品交互体验日记

         01. 潮汐睡眠界面的小提示

   视觉： 黑色背景，视觉舒服 适合夜晚模式。

   交互：雷雨的外围有两条无规律转动的线条，动效小细节潜意识催眠用户，起到助眠作用 。

   情感化设计：界面上有一行灰色的小字“声音将会在你入睡后停止"，潜意识让用户不必担心入睡后又被助眠音乐吵醒，这  点从用户出发，用户体验极佳。

   手势设计：长按（Touch and hold ）通过长按结束睡眠 用户通过长按得到结束睡眠的反馈。

         02.新浪微博的弹窗提示和全部清理功能

   视觉：半透明蒙版弹窗，突出更新信息，圆角弹窗设计 ，视觉舒适友好，符合产品的社交调性。

   交互：a.在产品更新后通过弹窗友好的让用户熟悉新的功能以及位置的变更，信息引导处理清晰，产品了解用户在眼动测试  中视觉聚焦的中心位置 ，让用户更快地熟悉新功能而不用自己逐渐摸索，设计人性化。

 b. 消息界面新增了扫帚icon，可以一次清除所有繁杂消息，这是很多用户都需要的一个功能，可以看出微博注重用户反馈用户体验极佳.

          03.Arbnb 首页banner广告投放方式

   视觉: 通栏卡片设计大图模式 ， 图片清晰视觉易聚焦，界面设计很简洁 ，没有过多的干扰信息，整个首页视觉会直接聚焦    到广告投放的banner。

   交互: a. 选择首页banner投放广告 ，其中红色按钮提示领取礼券， 以福利banner的形式刺激用户，吸引用户自主点击广    告，植入方式温和，不会让用户反感。

b.轮播banner的形式可以增加更多的推广位，增加首屏利用率，同时也给用户更多主动选择的机会，每个界面都有优惠领    取的提示，隐去广告的特性更像是一种推荐，更容易让用户接受。

             04.美团更新的首页icon不同状态

   视觉: 界面banner和icon统一圆角设计，大面积美团品牌色。更新后底部tab栏在首屏状态下显示icon是美团的新logo，可视化识别度高。

   交互: 美团此次更新完全更换icon ，首页图标在不同状态下的显示，既能强化新的品牌记忆/传播新的品牌印象同时，在其他界面时首页依旧是原本的功能图标，不会给用户带来困惑。

   缺点：背景色纯度过高，看久容易视觉疲劳。

Ps:飞猪更新后也运用了品牌logo做首页 ，只是图标风格较为复杂

                05. Cytus‖ 游戏界面触碰反馈和透视选择界面

                        卡片界面/透视界面

   视觉：一级选择区域为平铺卡片设计，插画形式，和普通游戏界面设计差异化，让人眼前一亮，大图展现了游戏人物暗示情  节，视觉效果佳。

二级选择区域界面则设计成有透视效果的大屏幕，底部观众人群插画的衬托更让玩家有一种身处现场的感觉，新颖的界面给  游戏体验带来了新的吸引力。

   手势设计: 滑动（Swipe）用户通过左右滑动和反馈的音效来进行查操作，两者结合设计很有赛博朋克风格。

                         触碰反馈

   视觉：界面的点击按钮设计风格为充满科技感后现代风的Cyberpunk 按钮

   交互：在用户点击成功后会出现perfect或连续点击50/100次的动效提示，暗示用户累积的积分增高，增强用户操作的趣味  性，不容易产生审美疲劳。

   手势设计：单点触碰（Tap），快速拖拽（Flick），滑动（Swipe），长按（Touch and hold）复杂多样的手势设计给用    户   带来多样化的游戏方式和体验。

                 06. 爱奇艺积分领取提示和分享

   交互：观看视频的时候用户在页面操作截图完界面会出现一个点击分享框，节约用户操作成本，人性化设计，同时变相引流  更多目标用户。

积分领取提示，不是以弹窗形式出现而是只在底部显示半透明状态栏，不影响用户观看视频的同时可以领取积分，人性化，  使用方便同时也提高了该功能的使用率。

                 07.Youtube 更多视频折叠显示

   手势设计：滑动（swipe）播放视频时底端会折叠显示一点推荐更多视频，上滑展示下滑折叠。

   交互：视频播放的同时半隐藏的界面会让用户看到一部分信息，让用户互感兴趣即上拉阅读隐藏界面，同时视频依旧在播    放，没有影响，不仅增强了操作趣味性，更大程度的节省界面利用率，可以展示更多不同板块信息，引导用户继续观看别的    视频，根据精准推送，延长用户使用时间。

                  08.Bilibili 录制GIF / 直接分享界面

   视觉：界面图标功能齐全，可视化识别度高，简洁易懂，新增功能截图、录制GIF、锁定屏幕

   交互; 用户截图后直接显示半透明分享界面，减少选择切换界面，增加新的社交属性，变相为软件引流，用户操作快捷，如  果不需要分享状态栏则会在几秒钟后消失，不影响用户操作，体验极佳。

   手势设计（GIF）：长按（touch and hold）长按录制GIF，界面提示让用户更快熟悉新功能。

             09.知乎沉浸式阅读与赞同按钮

   视觉：a.知乎在阅读回答界面时，会自动隐藏顶部的作者头像状态栏，跳转下一篇在界面的右边有一个按钮可以直接跳转，  不用在一直滑动，节省用户时间。 b. 回答底部有一个是否赞同的小按钮，上下键按后会显示赞同/不赞同的人数，更直观的感受到大家对答案的观点，并且可  以取消重新选择，很人性化。

   交互：a.跳转下一页按钮放在右边，未改版之前还会一直下滑进入动效才会跳转，时常操作不成功。考虑到大部分人用手机  都是右手单手操作，按钮正好在大拇指的活动范围内，不用太费劲就可跳转界面。让用户在阅读时，沉浸式体验佳。

b.邀请答题制度可提高用户粘性，增加产品趣味性。

          10. VLLO 付费功能推广方式

   视觉：整个视频编辑界面都是黑色底色，推广按钮放在右下角，颜色为亮红色，视觉对比原则，容易在整个深色背景界面中  引起用户的注意。

   交互：推广按钮文字没有直接写付费购买而是“试试吧”，这句话相对友好，人性化设计，更容易让用户自主愿意点击，推  广界面罗列所有的付费功能，大标题字体“一切”直接满足用户大部分功能需要的心理需求，还有打折按钮，激起用户购买    欲。

   不足：推广按钮没有图案或者转场动效，缺少趣味性，动画或图片能更友好的鼓励用户使用其功能而不是侵略性暗示。

   建议：推广按钮增加插画或文案，转场增加动效，按钮颜色改变稍微柔和一些，付费产品可以先让用户体验，参考 （facetune），用户试用后购买可能性增加。

          11.QQ音乐视频界面弹幕滚动

   视觉：全屏界面中增加半透明滚动弹幕，点击弹幕会出现右边的半透明状态栏，同时视屏不会暂停，不影响用户同时观看视  频和弹幕，还设有弹幕点赞功能。

   交互：观看视频时用户需要浏览大家的想法但又可以不暂停界面，qq音乐的MV功能做得更像一个社交板块了，社交板块离  不开良好的社交氛围和用户情感共鸣的内容输出，此功能的增加更增加了qq音乐社交板块的粘性。和网易云评论区有相似      作用，同时好的情感化交互更能传播品牌形象。

         12.快手精准推荐功能与暂停键

   视觉：界面简洁，卡片式设计，更符合视频社交软件主题，底部没有tab栏，采用左侧汉堡包形式，界面浏览更流畅，内容  区域展示更多，播放视频时候点击可显示全屏模式。

   交互：a.长按可选择减少类似作品，设有四种可能引起的选项，在精准推荐用户喜爱的视频同时后台收集信息更了解不同用  户喜爱的视频类型，用户不会因为长时间浏览不感兴趣的视频而流失，满足不同用户需求；没有底部tab栏增强首屏利用      率，用户操作更直观化。

   b.暂停按钮满足用户需要暂时停止的需求，没更新之前可能用户错过了某个片段而需要重新看所有视频，新的版本时长的视  频还设有进度条可以拖动。充分注重用户反馈，体验极佳。

   手势设计：长按（Touch and hold）长按减少类似作品 / 双击喜欢（推荐）

          13.贝壳租房提问提示内容

   视觉：界面色彩搭配清新，排版距离明确，界面稍显拥挤，右下角有提问弹窗。

   交互：在线咨询的辅助功能提问，以弹窗形式展现，点击会出现常问问题。减少了界面跳转和层级关系，并促进用户使用咨  询功能了解房源信息。黄色箭头图标在文字多的界面容易聚焦用户视线，便于用户了解和使用这个功能。

   不足：：界面信息过多，视觉容易分散，明暗亮灰对比不明显，文字颜色深浅类似。

   建议：应考虑在使用某一板块信息时，其他部分功能半透明或者隐藏，会是界面更加简洁，阅读方便。界面明暗对比增大，  视觉易聚焦在主要功能区域。

           14.躺平 界面调性/空界面处理

                空界面处理

   交互：空界面增加运营策略，加入插画和引起人们共鸣的贴心文案，并不强力引导用户关注而是安慰用户空的好处，让用户  体验温馨，更注重app与用户的情感交流，体验感极佳。同时插画也是为内容服务，信息处理清晰。

   情感化设计：属于反思水平的设计，深华产品自我形象的建设，增加品牌认同感。

                   界面调性

   视觉：首页卡片布局，圆角处理，界面精致自然，图片的选择和整个产品调性相符合，塑造清新舒适的家具风格，图标和背  景也是白灰色，没有重色，整体视觉柔和。

   发现界面留白多，界面呼吸舒畅，用户使用时可以避免太多的信息接收，发现界面轮播banner通过推送传达产品的服务与    理念，icon粗线性图标的设计与产品舒适自由的风格相符合。

   交互：首页直接显示精选内容更容易吸引新用户，节省用户筛选时间，推选内容与产品理念调性统一，提高用户体验。

            15. Skyscanner 时间段选择与推荐

   视觉：渐变色日历和悬浮按钮的设计分别开了两组不同的元素，排版上功能分类更加清晰，亲密疏密关系明确，文字大小对  比明显，层级关系明确，白色底色简洁大方，符合功能性app设计。

   交互：相对于别的竞品不同的是天巡可以选择某一时间段之间的机票筛选，也有任意时间和任何地点的推荐，符合时间自由  地点自由的用户筛选出性价比最高的旅行机票。设计人性化。右边的按钮显示的不同的即将到来的节日，不同的时间段有不  同的icon，有很好的情感带入，用户有情感共鸣，抓住用户心理，提升用户体验。

               16.into 功略首屏与城市剪影

   视觉：a.首屏就是只有一个功能的攻略，作为产品主打，排版简化，色彩清新多彩，沉浸式大图体验，与产品调性相符合，  精准推送主打攻略，排除别的功能干扰，让用户快速了解攻略功能。浏览更直观大方

  b.圆形剪影增加画面趣味性，对称重复美感。

   交互：城市的插画选用的都是代表性的建筑，更能引起用户的共鸣。

攻略界面向下滑动切换时图片会顺势变大缩小，在用户操作时给予反馈。同时卡片有了层次感和空间感，操作体验提升。

               17.vart  顶部导航栏与创建话题浮动图标

   视觉：顶部横向导航栏模式，方便在不同模块上快速切换，层级分明。

   交互：话题界面底部浮动的创建话题按钮点击后，按照用户习惯应该是从底部向上滑动展现新页面或者底部半透明状态栏，  但是vart的跳转方式是左转入，与平常方式不同，改变用户习惯认知，同时全页面很容易让用户突然忘记创建什么话题，没  有参考。用户体验差。

   视觉不足：界面信息过多没有归纳，图标少，小元素过多，稍显拥挤，视觉聚焦点不清晰，不知道该看哪里，用户浏览体验  不好。

   建议：多以icon形式代替文字，元素归纳到一两个图标里，明暗灰度对比增强，界面留白足够，有呼吸感。

              18.大众点评 上传界面与地图美食功能

   视觉：上传界面底部增加滚动功能条，一个界面包含所有需要上传图片的功能，设计简洁，方便用户使用，地图美食界面商 家标有刀叉的icon，清晰明了，图标的增加给界面带来了更多的趣味性。

   交互：a.同时包含所有功能的上传界面，省去用户使用不同功能转场寻找时间，提升功能的使用率，增加用户有趣的内容输 出率；

   b.地图美食功能考虑想根据地区直接寻找商家的需求，同时点击可以查看商家距离和评价，比起界面排列浏览形式操作更直 观化，了解用户需求，刀叉icon人性化设计，表明是餐厅，界面信息引导处理清晰。

            19.Netfilx 首页精选内容与排版方式

   视觉：首页精选推荐视频大图，不规则banner形式，视觉直接聚焦，界面功能齐全，内容不复杂，视频选择以卡片浏览形    式，一目了然，深色背景衬托不同视频剧照。

   交互：大图形式吸引用户眼球，让用户更直接的关注今日推荐。界面功能简单快捷，内容丰富，用户学习成本低，使用率    高。

   不足：顶部横向导航栏左右滑动时没有反馈。体验不好

   建议：滑动时改变字体大小，增加颜色明暗变化，或在底部加状态条，给用户操作更好的

  

                    20.美团/百度贴吧 记忆上次内容

   视觉：提示条按照浏览顺序插在当中，不显眼，但也能注意到，排版方式自然不突兀，颜色不鲜艳，视觉舒适。

   交互：记忆上次内容减少了用户的寻找时间，设计从用户角度出发，增加了用户的体验 。（哔哩哔哩界面也有同样的功能）

总结：

文章参考黑马青年及很多厉害设计师的观点文章和专业交互语言

体验了这么多产品以后，我发现优秀的产品在设计时一定都是从用户出发的，我明白在设计产品时应该站在使用者的角度去考虑，很多时候一点人性化的设计角落就能为这个产品/品牌带来更好的印象和加分。在我设计的时候总是主观带入我作为设计者的想法，时常忽略了用户的反馈和方便，我的老师郗鉴的文章里说过：“用户体验是用户使用产品的心理和感受”我也确实体会到了产品设计是以人为本的。只有用户喜欢的产品才是成功的反思性产品。

最后，希望大家都做出被喜爱的产品~