最美交互：微信边写边译功能；小米输入法也可以做计算

乔布斯说过“设计除了表面的交互和视觉，更多的是设计它的使用感受。”

设计日记星球第五期全新推出「每日交互」栏目，汇集最新最快的设计细节信息，用直观的案例，表达核心的玩法，记录着真实商业世界正在发生的设计细节。

01

  小米输入法  

@Redamancy

聊天时输入一些数值时，输入法会自动给出当前数值的计算结果。这个设计可以很清晰的直接列出账单明细，不用通过计算器算好再切回聊天或工作文档，但是需要考虑先乘除后加减和括号问题。 

弊端：有时候并不是想要计算数值，只是想表达一个长宽高比等，很容易误触。

02

 全民K歌 

@xiaoguo

在底部导航栏中，K歌的图标样式与其他截然不同，用户很容易就被吸引，这是相似性原理的一种逆向应用方法。并且当用户点击K歌图标时，图标由斜着拿话筒变成正着，贴近现实中用户K歌行为，即使没有文字辅助，用户也能很容易就理解到图标的含义。

03

  网 易 邮 箱  

@🌞Sunshine

收件箱已发送列表中都是把发件人头像和发件人及主题内容作为组件，相同的组件保持样式的高度统一，在已发送页面中也沿用这种高度统一相似性原则，让用户清晰的感知自己在同一个应用或网站中，让应用内页面达到风格统一。但是相似性也不等于过度重复，也存在一定差异性，比如说在发送中附件图片的展示方式，给人视觉的新鲜感。

04

 sleep cycle

@Holly

随着动画播放引导你开启“麦克风”权限；告知你不会通知垃圾消息；更重要的是告诉用户app通过呼吸/声音/说话记录你的睡眠。通过“动画场景”的方式让用户学习新功能并开启权限，更有趣易接受。有效的引导页可以提高留存率，常见的引导类型有：轮播图片/卡片式/蒙层引导…

05

   微 信    

@西米露

在输入框输入文字后，可在输入框上方的编写编译小功能中选择翻译的语言，点击使用，即可将输入框中的文字切换为其他语言。其中，开启和关闭边译边写都使用的是微信常用的长按操作来呼出，非常方便地就能进行再次操作。

06

 Instagram 

@klv

ins在浏览照片的时候，页面停留3秒，底部会自动增加一行快速点评的入口，并附带两个高频使用的emoji表情。

为了增加社交产品的互动率，在页面停留时可以预测用户下一步会进行评论操作。自动增加评论入口，可以引导用户进行评论，附带两个高频使用的emoji表情有效减少了用户操作路径。另外，增加的入口只有一行，不会造成视觉负担，也不会打扰用户继续浏览动作。

07

  淘 宝 

@Q

进入淘宝逛一逛，相机图标下会出现提示，让你发布作品，在加载页面的时候也能看到可爱的动画，下滑页面会出现逛逛小人和有吸引力的文字。

淘宝设计了逛逛小人，并针对年轻内容创作者定义了彩虹光感的设计和动效来引导用户操作，文案也很巧妙契合用户内心需求，设计和文案都增添了社区的氛围感，在增加品牌的好感度的同时也提高用户黏性。

↓ ↓ ↓ 交互合集 ↓ ↓ ↓

B站高德 | 企业微信菜鸟 | 腾讯视频菜鸟 | 淘宝QQ | 哔哩哔哩盒马