输入#号交互,还能变出什么花儿来?

起点学院产品经理365成长计划,2天线下闭门集训+1年在线学习,全面掌握BAT产品经理体系。了解详情

jiaohu#

最近做了动态话题功能,发现小小一个“输入#号”的动作也有很多细节。

在手动输入#号创建一个话题的时候,需要一边输入一边给出话题实时搜索建议。PC上常见的交互是在输入的位置再叠加一个小浮层,这样既不影响用户继续打字,也方便查看点选。

640-17

但到了手机上,键盘的弹出已经占据了大半壁江山,此时若在输入的位置再贴一块膏药,输入空间就更显局促,感觉不够优雅。

所以在手机上的常见交互是,输入#号的同时就跳转到一个新页面,在新页面上你可以继续输入或者选择下面的搜索结果。

weibo#

这种输入体验显然没有PC端那么自然,因为它属于没有预期的跳转——#号看上去和键盘上的其他符号没有区别,可偏偏点击它的时候就跳到了一个新界面,有种被迫停一下的感觉。

发现还是有一些敢于吃螃蟹的设计,果断地将PC端的交互沿用到了手机端,比如twitter:

输入#号后,在键盘之上即刻出现一个半浮层。你可以在当前界面继续打字,或者选择半浮层中的搜索结果。当你想查看更多向上滚动时,才会推入一个新页面。

twitter#

虽然输入空间看上去变得更局促,但能明显体验到这种减少跳转的设计所带来的输入流畅度提升!

移动设备由于屏幕较小,当一屏内无法同时承载多种任务的交互界面时,出于“本能”设计师通常会将一些任务新开一个界面去完成,好让单个页面“看上去更简单”。

然而看上去简单和用起来简单并不能划等号。

 

俞静(微信公众号:听音乐做设计),现任网易云音乐交互负责人。

本文由 @俞静 原创发布于人人都是产品经理 ,未经许可,禁止转载。

您的赞赏,是对我创作的最大鼓励。

评论( 4

登录后参与评论
  1. 微信和QQ的@不也类似吗?

    回复
  2. 其实我更关注的是,手机打字的动态图是如何实现的?用的什么软件?

    回复
    1. 回复

      部分手机(据我所知有锤子和华为)自带录制屏幕的功能,APP的话拍大师就可以用。

  3. 完全不知道还有#键这个功能 :arrow:

    回复
加载中