美文网首页推送Mark产品设计
知乎客户端 for iOS 中搜索框交互的几种改进

知乎客户端 for iOS 中搜索框交互的几种改进

作者: 镇雷 | 来源:发表于2015-04-12 17:47 被阅读8548次

    知乎几乎是我现在用的最多的 App 了,而当在各种不同的场景中对其观察、体验后,发现知乎客户端 for iOS 中的搜索环节依然有一些不适(对我个人而言),因此利用几天时间思考了能否对其进行一定的交互简单改进,提升这个流程的体验。

    1.搜索逆向路径中返回方式不连贯,模态视图打断了原本连续的手势返回操作。

    小标题看起来可能比较拗口,我特意制作了几个 GIF 帮助理解问题。

    目前主流的一些 iOS App(包括系统自带 App)中,搜索框都是采用了模态视图,即它不是一个新的独立页面,而是从属于某个页面的视图,专门用来解决某类独立的任务(搜索)。一般来说,对于一个独立页面,设计时会允许其手势滑动返回(从中间或边缘向右滑动),但是由于模态视图并不是一个页面,所以在 iOS 中经常被设计为禁止手势滑动返回,并且在右上角设置一个「取消」按钮用以结束模态视图。

    首先,先来看一下知乎上搜索的正向路径。即:主页—侧边栏—搜索框—输入关键字—搜索结果列表—话题/问题—答案。

    搜索正向路径演示

    下面一张 GIF 则是上述操作的逆操作,从答案返回到主界面。 

    搜索逆向路径演示

    知乎的页面手势返回采用的是全屏手势向右滑动,即不需要从左侧边缘发起滑动操作。因此当我从最后一个答案出发,经过三到四次手势滑动后回到了搜索结果页面,此时若想要进一步回到主页/侧边栏,就会发现在当前的模态视图上禁用了手势操作,必须点击右上角的「取消」按钮结束搜索视图。而在目前主流的大屏手机上,右上角往往不是单手操作的触摸范围,而我个人也是尽可能地在单手操作时使用手势操作进行页面的跳转。

    一种可能的改进方式,就是将搜索也改为新页面,而非模态视图,并且允许手势滑动返回到主页,如下图所示。

    改进后(左),改进前(右)

    我特意留意了一下手机中几个常用 App 的做法,发现有美团、天猫、去哪儿等应用也采用了新视图的做法,也许这个设计并没有遵从 iOS 的设计规范,但是我个人觉得从体验出发,这样更加连贯、自然。

    2.搜索框的位置摆放。

    目前,知乎的搜索框是摆放在侧边栏的顶部。值得注意的是,「提问」功能则是安放在了主页的右上角,并且即便点击了提问,也会对输入的问题先进行搜索,可以避免对已有答案的问题重复提问。示例如下图所示:

    现有搜索框摆放

    从交互设计上来说,知乎的搜索框摆放是比较少见的,大多数的 App 会在顶部使用一个控件常驻搜索框(电商类、 贴吧等),或者将搜索做成按钮合并到主导航当中(App store、tumblr等)。反过来思考,也许知乎的产品经理更希望用户进行浏览、发现、提问,而不是强针对性地去发掘一个问题。

    来看看知乎的同类 Quora 是怎么摆放搜索框的,如果把知乎的搜索框挪动到标题栏取代现有的那个并没有太大用处的「首页」字样,会不会更好?(产品层面而言,未必更好)

    quora(左)、知乎改进后(中)、知乎改进前(后)

    3.现有的搜索动画改进

    既然现有的搜索是希望按照 iOS 规范来设计模态视图,那我们不妨将目前不太自然的动效修改为更适合 iOS 的样式吧。将搜索框点击后自然延展为模态视图中的搜索框,然后将「取消」和键盘延迟出现,原本的界面则伴随 scale 变化淡出。而改动前的设计可以参考本文的第一个 GIF 图。

    改进后的搜索框延展动效

    其实这篇文章很简单,但是却整整思考了两天,中间也咨询、访谈了很多的普通用户、产品/设计朋友,我的这些改进应该也是浅薄的,但是这个过程却帮助我加深了对模态视图、搜索流程以及搜索框动效的理解,学习总没有坏处。对了,最近使用 Pixate(制作简单动效)+ QuickPlayer(高清录制)+PicGIF(转换格式)可以很方便地做出本文中这样简单的演示效果。

    希望大家多多指导,我也会继续努力。

    相关文章

      网友评论

      • 4e99c1a97bd1:技术懂得少,不知道采用新页面和模态视图两种方案对比,在加载速度和内存占用是否有区别。
        如果是我,可能会在页面下方加一个不影响其他内容正常展示的取消/返回按钮(考虑到键盘,按钮在键盘显示时应位于键盘上方,键盘隐藏时位于整个屏幕的下方)。
      • MitchellMi:赞!
      • shi3013:好奇问下,你的GIF怎么录得?
      • 白鱼:1. 由知乎新版可知,知乎的产品经理不希望用户发掘问题的观点是错的。其实提问的心里预期和搜索的心理预期是不一样的。
        2. 把搜索按钮放在导航栏里,这个主页面每天都看,拥挤的顶部不是一个好的处理方式。可以放在导航栏下面,上滑时候缩起,下拉时展开。
      • SuerB:赞一个,没有最好,最重要是过程,加油哈
      • iHTCboy:嗯,这些都可以做,但当前开发者做不到的话,就。。要不技术没到家,要不实现太麻烦,懒得做…
      • 镇雷:@老中医张小红 同感...其实就是 iOS 的有些设计规范并不能完全套用吧
      • 红二:@意外 我反而觉得知乎的android客户端比iOS客户端易用性高很多哎
      • 镇雷:@意外 因为平台规范不同,并不是因为版本落后,确实界面布局和交互会有差异。
      • d7acf364ce22:没用过iOS,我用的魅族,发现知乎安卓版和iOS版很大不同哎(是安卓开发落后iOSn个版本了吗→_→),我在微信号回复你了,发了几副图,你在哪里回复我都能看到,哈哈😄
      • 6583f8b9eaf8:可以学习学习。
      • 镇雷:@Zander 哈哈 你看这篇文章就是有一些考虑不周的地方 不过犯错也是进步的一个环节 多思考没坏处 一起学习!
      • Zander:@镇雷 你还浅薄啊 我刚写文章的第一天就把你所有文章读了个遍,哈哈 不过能把这种小小细节的思考写出来大家分享,真的很感谢~
      • 镇雷:@Zander 嗯嗯 继续学习继续体会 我现在还是太浅薄了......
      • Zander:恩,是深度结合,但是这两个功能承担需求的比重不一样的,是,Quora导航下的输入框和搜索左边的提问按钮确实有点重复了
      • 镇雷:@Zander 不过我确实觉得知乎把搜索提出来不是特别恰当...
      • 镇雷:@Zander 提问和搜索框是深度结合的...那如果你说那个是提问按钮,右上角同时还有一个提问按钮呢...
      • Zander:@镇雷 额 ,Quora导航栏下的输入框等同于知乎的提问按钮,不是搜索框
      • 镇雷:@Zander 恩你说的很有道理,我也是觉得可能这种设计在产品层面上不一定合适,又还是觉得这么放置在交互层面上比较合理......不过 Quora 很奇怪,既在顶部设置了一个条状搜索框,右在右上角设置了一个搜索的 Icon。
      • Zander:小技能get,可以插入GIF. 但是GIF帧速率太快,闪的有点看不太清逻辑。关于搜索框的位置,知乎为什么是放在一个二级导航里,从产品本身的属性来说,是为了创造一个更加沉浸式的体验,用户打开知乎的首要任务就是浏览当前热门的文章,搜索对用户来说是一个二级需求。其实看Quora、36kr等搜索即使搬到了首页,也放在右上角这样一个不会影响内容摄取的位置。通常把搜索放在首页中间(你改后的位置)的app大多数为平台型的产品,电商居多,那是因为搜索是这个页面重中之重的功能,作为用户主要的任务入口(典型的淘宝)。我个人的一点看法哈。

      本文标题:知乎客户端 for iOS 中搜索框交互的几种改进

      本文链接:https://www.haomeiwen.com/subject/kcqxfttx.html