今天要碼的，是上周遇到的2個工作中的交互問題。
1.邏輯上的死循環
先來看看下面這張圖
從選課首頁點擊“全部” => 進入到課程目錄（目錄下為全部課程，同時，全部課程我們依然提供搜索功能，于是如圖2所示）=> 輸入關鍵字，點擊搜索 => 進入圖3 or 為空進入圖4。乍一看似乎非常完美，整個流程相當順利，而且在幾輪的評審中，大家都木有發現這里的問題。
然而當開發大大細讀文檔時，才發現了中間原來暗藏了一個死循環。請看圖2和圖3，當我點擊搜索框，搜索頁從右側飛入，正常情況下，我會輸入我想要搜索的關鍵字，但是如果我點擊“全部”呢？于是又回到了上一頁，再點擊搜索框，繼續回到搜索頁...... 如果再加上左上角的“返回”，這里的問題就嚴重辣~ 因為我們的邏輯定義是每進入下一個層級，再返回，都是返回到上一個層級，于是很可能這個用戶要返回很多個相同的頁面才能回到課程主頁，死循環的惡作劇就四醬！
于是這個頁面的最終稿是這樣：
這里錯就錯在，搜索頁還加了一個進入全部課程的入口。這種盲區現在回頭來看，似乎都不應該有，而且有些滑稽可笑。然而工作中常會遇到這樣類似的邏輯問題，當然也不是不可避免。如果你跟我一樣邏輯能力相對薄弱，可以考慮在整理交互的過程中借助第三方交互工具做一下 prototype ，比如 invison 或者 騰訊的 demo ，然后自己或者找幾個身邊的同事用一用，順著流程來，逆著也來一遍，用著用著問題自然浮出水面了。
邏輯能力確實是產品交互工作中極其重要的，若是欠缺可以通過后天訓練或者借助工具，當然我也親眼見過某做后端開發的前同事，在一次拓展玩青蛙過河的游戲如何展示了他過人的邏輯能力，“心算”指揮我們如何完成游戲。每個人都有自己擅長和不擅長的，了解自己，用正確的方式去補拙就好。
2.一個交互難題
這是在整個 app 注冊流程中的最后一步，用戶需要填寫自己的學校信息來完成賬號注冊。我們這里其實分為了2小步，用戶先通過省份篩選掉一部分學校，再選擇該省份下的學校。由于全國的高校有數千所，為了節約用戶的時間成本，我們希望用戶即可通過輸入搜索，亦可從搜索匹配的結果中快速找到自己的學校。于是，第一版交互如上圖。但其實細細琢磨，這種交互簡直就是偽命題，我在設計的過程中也有發現完全走不通，但由于出這一稿的時候只是為了展現出我們想要的效果，以及當時沒有更好的想法，于是先出了這一版。
后來，我們先是參考了某寶的學歷認證，業務需求與我們類似，發現這種既要滿足輸入、又要滿足點選的，在一個頁面完成幾乎是不太可能（或許在座的交互大神會有更炫酷更性感的 idea ），但是某寶的處理是，把這種搜索和選擇放到了下一個層級的頁面，這與我們想要“提高用戶操作效率，簡約的設計想法是相違背的，于是最終的效果變成了這樣，有點像某團的某個優惠說明頁面：
點擊“選擇...”，則彈出一個毛玻璃的搜索選擇頁面，動效是從中心放大彈出。點擊“關閉”回到上一級頁面。其實這里的邏輯基本與進入下一個層級頁面相同，但好處在于，從交互上，沒有繁瑣的“進入下一級”和“返回上一級”；視覺上，中心放大彈出以及毛玻璃的透視效果都讓用戶感覺所有操作都是在當前頁面完成，簡潔了許多。當然這里確實也不算什么創新，最多是參考了現有很多不錯的交互視覺案例。但是這種遇到難題又跟小伙伴一起全力解決的過程真心值得為自己 mark 下。
好了，以上就是今天的筆記了。
