今天要码的，是上周遇到的2个工作中的交互问题。
1.逻辑上的死循环
先来看看下面这张图
搜索交互 1稿
从选课首页点击“全部” => 进入到课程目录（目录下为全部课程，同时，全部课程我们依然提供搜索功能，于是如图2所示）=> 输入关键字，点击搜索 => 进入图3 or 为空进入图4。乍一看似乎非常完美，整个流程相当顺利，而且在几轮的评审中，大家都木有发现这里的问题。
然而当开发大大细读文档时，才发现了中间原来暗藏了一个死循环。请看图2和图3，当我点击搜索框，搜索页从右侧飞入，正常情况下，我会输入我想要搜索的关键字，但是如果我点击“全部”呢？于是又回到了上一页，再点击搜索框，继续回到搜索页...... 如果再加上左上角的“返回”，这里的问题就严重辣~ 因为我们的逻辑定义是每进入下一个层级，再返回，都是返回到上一个层级，于是很可能这个用户要返回很多个相同的页面才能回到课程主页，死循环的恶作剧就四酱！
于是这个页面的最终稿是这样：
搜索交互 2稿
这里错就错在，搜索页还加了一个进入全部课程的入口。这种盲区现在回头来看，似乎都不应该有，而且有些滑稽可笑。然而工作中常会遇到这样类似的逻辑问题，当然也不是不可避免。如果你跟我一样逻辑能力相对薄弱，可以考虑在整理交互的过程中借助第三方交互工具做一下 prototype ，比如 invison 或者 腾讯的 demo ，然后自己或者找几个身边的同事用一用，顺着流程来，逆着也来一遍，用着用着问题自然浮出水面了。
逻辑能力确实是产品交互工作中极其重要的，若是欠缺可以通过后天训练或者借助工具，当然我也亲眼见过某做后端开发的前同事，在一次拓展玩青蛙过河的游戏如何展示了他过人的逻辑能力，“心算”指挥我们如何完成游戏。每个人都有自己擅长和不擅长的，了解自己，用正确的方式去补拙就好。
2.一个交互难题
注册流程 选择学校
这是在整个 app 注册流程中的最后一步，用户需要填写自己的学校信息来完成账号注册。我们这里其实分为了2小步，用户先通过省份筛选掉一部分学校，再选择该省份下的学校。由于全国的高校有数千所，为了节约用户的时间成本，我们希望用户即可通过输入搜索，亦可从搜索匹配的结果中快速找到自己的学校。于是，第一版交互如上图。但其实细细琢磨，这种交互简直就是伪命题，我在设计的过程中也有发现完全走不通，但由于出这一稿的时候只是为了展现出我们想要的效果，以及当时没有更好的想法，于是先出了这一版。
后来，我们先是参考了某宝的学历认证，业务需求与我们类似，发现这种既要满足输入、又要满足点选的，在一个页面完成几乎是不太可能（或许在座的交互大神会有更炫酷更性感的 idea ），但是某宝的处理是，把这种搜索和选择放到了下一个层级的页面，这与我们想要“提高用户操作效率，简约的设计想法是相违背的，于是最终的效果变成了这样，有点像某团的某个优惠说明页面：
选择学校最终稿
点击“选择...”，则弹出一个毛玻璃的搜索选择页面，动效是从中心放大弹出。点击“关闭”回到上一级页面。其实这里的逻辑基本与进入下一个层级页面相同，但好处在于，从交互上，没有繁琐的“进入下一级”和“返回上一级”；视觉上，中心放大弹出以及毛玻璃的透视效果都让用户感觉所有操作都是在当前页面完成，简洁了许多。当然这里确实也不算什么创新，最多是参考了现有很多不错的交互视觉案例。但是这种遇到难题又跟小伙伴一起全力解决的过程真心值得为自己 mark 下。
好了，以上就是今天的笔记了。
网友评论