今天要碼的吩跋，是上周遇到的2個(gè)工作中的交互問題撇叁。
1.邏輯上的死循環(huán)
先來看看下面這張圖
從選課首頁(yè)點(diǎn)擊“全部” => 進(jìn)入到課程目錄（目錄下為全部課程，同時(shí)劲藐，全部課程我們依然提供搜索功能八堡，于是如圖2所示）=> 輸入關(guān)鍵字，點(diǎn)擊搜索 => 進(jìn)入圖3 or 為空進(jìn)入圖4聘芜。乍一看似乎非常完美兄渺，整個(gè)流程相當(dāng)順利，而且在幾輪的評(píng)審中汰现，大家都木有發(fā)現(xiàn)這里的問題挂谍。
然而當(dāng)開發(fā)大大細(xì)讀文檔時(shí)，才發(fā)現(xiàn)了中間原來暗藏了一個(gè)死循環(huán)瞎饲。請(qǐng)看圖2和圖3口叙，當(dāng)我點(diǎn)擊搜索框，搜索頁(yè)從右側(cè)飛入嗅战，正常情況下妄田，我會(huì)輸入我想要搜索的關(guān)鍵字，但是如果我點(diǎn)擊“全部”呢驮捍？于是又回到了上一頁(yè)疟呐，再點(diǎn)擊搜索框，繼續(xù)回到搜索頁(yè)...... 如果再加上左上角的“返回”厌漂，這里的問題就嚴(yán)重辣~ 因?yàn)槲覀兊倪壿嫸x是每進(jìn)入下一個(gè)層級(jí)，再返回斟珊，都是返回到上一個(gè)層級(jí)苇倡，于是很可能這個(gè)用戶要返回很多個(gè)相同的頁(yè)面才能回到課程主頁(yè)富纸，死循環(huán)的惡作劇就四醬！
于是這個(gè)頁(yè)面的最終稿是這樣：
這里錯(cuò)就錯(cuò)在旨椒，搜索頁(yè)還加了一個(gè)進(jìn)入全部課程的入口晓褪。這種盲區(qū)現(xiàn)在回頭來看，似乎都不應(yīng)該有综慎，而且有些滑稽可笑涣仿。然而工作中常會(huì)遇到這樣類似的邏輯問題，當(dāng)然也不是不可避免示惊。如果你跟我一樣邏輯能力相對(duì)薄弱好港，可以考慮在整理交互的過程中借助第三方交互工具做一下 prototype ，比如 invison 或者 騰訊的 demo 米罚，然后自己或者找?guī)讉€(gè)身邊的同事用一用钧汹，順著流程來，逆著也來一遍录择，用著用著問題自然浮出水面了拔莱。
邏輯能力確實(shí)是產(chǎn)品交互工作中極其重要的，若是欠缺可以通過后天訓(xùn)練或者借助工具隘竭，當(dāng)然我也親眼見過某做后端開發(fā)的前同事塘秦，在一次拓展玩青蛙過河的游戲如何展示了他過人的邏輯能力，“心算”指揮我們?nèi)绾瓮瓿捎螒蚨础Ｃ總€(gè)人都有自己擅長(zhǎng)和不擅長(zhǎng)的尊剔，了解自己，用正確的方式去補(bǔ)拙就好弧圆。
2.一個(gè)交互難題
這是在整個(gè) app 注冊(cè)流程中的最后一步赋兵，用戶需要填寫自己的學(xué)校信息來完成賬號(hào)注冊(cè)。我們這里其實(shí)分為了2小步搔预，用戶先通過省份篩選掉一部分學(xué)校霹期，再選擇該省份下的學(xué)校。由于全國(guó)的高校有數(shù)千所拯田，為了節(jié)約用戶的時(shí)間成本历造，我們希望用戶即可通過輸入搜索，亦可從搜索匹配的結(jié)果中快速找到自己的學(xué)校船庇。于是吭产，第一版交互如上圖。但其實(shí)細(xì)細(xì)琢磨鸭轮，這種交互簡(jiǎn)直就是偽命題臣淤，我在設(shè)計(jì)的過程中也有發(fā)現(xiàn)完全走不通，但由于出這一稿的時(shí)候只是為了展現(xiàn)出我們想要的效果窃爷，以及當(dāng)時(shí)沒有更好的想法邑蒋，于是先出了這一版姓蜂。
后來，我們先是參考了某寶的學(xué)歷認(rèn)證医吊，業(yè)務(wù)需求與我們類似钱慢，發(fā)現(xiàn)這種既要滿足輸入、又要滿足點(diǎn)選的卿堂，在一個(gè)頁(yè)面完成幾乎是不太可能（或許在座的交互大神會(huì)有更炫酷更性感的 idea ）束莫，但是某寶的處理是，把這種搜索和選擇放到了下一個(gè)層級(jí)的頁(yè)面草描，這與我們想要“提高用戶操作效率览绿，簡(jiǎn)約的設(shè)計(jì)想法是相違背的，于是最終的效果變成了這樣陶珠，有點(diǎn)像某團(tuán)的某個(gè)優(yōu)惠說明頁(yè)面：
點(diǎn)擊“選擇...”挟裂，則彈出一個(gè)毛玻璃的搜索選擇頁(yè)面，動(dòng)效是從中心放大彈出揍诽。點(diǎn)擊“關(guān)閉”回到上一級(jí)頁(yè)面诀蓉。其實(shí)這里的邏輯基本與進(jìn)入下一個(gè)層級(jí)頁(yè)面相同，但好處在于暑脆，從交互上渠啤，沒有繁瑣的“進(jìn)入下一級(jí)”和“返回上一級(jí)”；視覺上添吗，中心放大彈出以及毛玻璃的透視效果都讓用戶感覺所有操作都是在當(dāng)前頁(yè)面完成沥曹，簡(jiǎn)潔了許多。當(dāng)然這里確實(shí)也不算什么創(chuàng)新碟联，最多是參考了現(xiàn)有很多不錯(cuò)的交互視覺案例妓美。但是這種遇到難題又跟小伙伴一起全力解決的過程真心值得為自己 mark 下。
好了鲤孵，以上就是今天的筆記了壶栋。
