Beta版本在Alpha版本的基礎上,新增了一系列詞圖相關、使用者設定相關、社群相關的新功能,并且從使用者體驗、系統性能等方面大幅優化了Alpha版本的已有功能,以讓使用者獲得更絲滑舒适的使用體驗。
本項目的核心系統功能架構圖如下:

友人 A 最近為了準備出國考試,有了短時間内沖刺背單詞的需求。他從他的朋友口中聽說了『近取 Key』這款背單詞軟體,首先感受到了ui外觀。
首先,前端對軟體字型進行了美化設定,同級字型采用一緻的美觀字型。
另外,前端針對我的詞圖界面進行了着重ui優化,包括修改整體布局、過度動畫,新增極簡模式适應使用者的不同需求。
友人 A 覺得這個軟體的想法不錯,想要上手嘗試。但是卻不知道從何做起,于是開始根據教程一步一步學習,最終摸清了軟體的使用方法。
對于首次使用本軟體的使用者,我們提供了引導性教程,一步一步指導使用者完成第一張詞圖的建立。教程引導覆寫:
建立詞圖
編輯詞圖(加詞,工具欄)
測試詞圖
友人A使用了一段時間後感慨:”自己背單詞好孤獨,要是能看到其他人的詞圖,大家互相促進就好了”。于是,A點開了社群界面,驚喜地發現内含數個已經建立完成的美麗詞圖。A根據詞圖所屬詞書的資訊,選擇了和自己背誦目标一緻的詞圖,直接fork,不亦樂乎。
新增社群功能。使用者可以在社群中檢視其他使用者公開的已完成詞圖,檢視某使用者的詳細資訊(包括點贊數量、宏觀背詞狀态等)。
針對感興趣的詞圖,使用者可以進入預覽,檢視詞圖的全貌和自己對該詞圖中單詞的掌握狀态。
對于喜歡的詞圖,使用者可以将其克隆到自己的詞圖中,并且對齊進行加詞或編輯。
使用者在社群中的操作用例圖如下:
預設頭像好醜啊,友人A想把頭像換成自己常用的美圖,這樣背詞的心情都能好一些。
在個人設定中,使用者可以上傳大小不超過100KB的頭像,并可以對建立詞圖、測試詞圖子產品的預設設定進行設定。
有人A馬上就要考研了,需要時刻監控自己背了多少考研單詞,還剩多少沒有背,以此監控自己的學習進度。于是,他點開了統計資訊頁面。
統計資訊界面新增了使用者背誦的目前詞書的背詞進度(比例),以及使用者對已經背誦的單詞的總體狀态。
使用者通路統計資訊時的時序圖如下:
友人A在背誦推薦清單的單詞的過程中,突然想到一個單詞,想要臨時将其加入詞圖,于是打開了搜尋單詞框。
友人A有一天正在刷題,想要集中背誦閱讀題目中出現的生詞。于是,他又打開了搜尋單詞框。
在編輯詞圖時,使用者可以通過搜尋加入自己想要自定義加入的單詞。被選中的單詞講自動添加到待背誦清單的首位。
使用者在建立、編輯詞圖時的時序圖如下:
友人A要參加的托福、雅思、GRE等考試需要機考,熟悉單詞的拼寫和打字是很重要的,他希望能通過打字的方式鞏固自己的學習狀态,于是他打開了複習單詞測試。
在複習單詞時,我們集合了PC端擁有鍵盤的優越性,讓使用者可以通過敲入要複習的單詞來強化記憶,同時系統會根據使用者的敲入狀态更新使用者對本單詞的記憶狀态。
如果敲入單詞正确,按下回車後将顯示單詞的含義,再次按下回車将自動跳轉到下一個單詞。
如果敲入錯誤,按下回車後系統将對錯誤的字母進行提示(方框标紅),使用者可以通過backspace進行順滑的删除修改。如果使用者忘記單詞的拼寫,可以點選提示,将展示單詞的。
側邊欄将實時顯示已複習單詞的記憶狀态。
使用者對某一單詞的記憶狀态機如下:
友人A覺得純色的背景圖實在過于單調了,他很想選擇一張意義明确的背景圖來制作詞圖,正好可以更有效地發揮大腦的空間聯想記憶。于是,他在工具欄中開始選擇心儀的圖檔。
新增詞圖設定背景圖檔功能。使用者可以通過工具欄選擇心儀的背景圖檔,并在此之上完成詞圖的建構。每次重新進入編輯頁面,背景圖庫将更新。
對于由于zoom和拖拽導緻的詞圖位置偏移,使用者可以點選工具欄的複位按鈕回歸預設視覺中心位置。
友人把一個單詞加入詞圖後,發現該單詞和周圍的其他單詞格格不入,仿佛并不适合放在一起,于是開始到處詢問有沒有後悔藥,直到他看到工具欄上的小垃圾筒...
使用者可以選中詞圖中已有的單詞,點選工具欄中的删除按鈕移除單詞。
友人A比較懶,懶得每次加入單詞後自己拖動單詞位置,想要使用系統随機分布的位置直接背誦。
在使用者點選加入詞圖後,單詞在詞圖中出現的位置将以目前視覺中心為圓心進行擴散,随機分布在畫布較合适的位置上。
友人A在一個詞圖中添加了太多的詞,它們之間視覺距離非常遙遠。在複習時,無法被囊括在一個界面内。但是,友人A又非常懶,絕對不會自己去拖動詞圖尋找下一個單詞的...
在複習時,有些單詞之間的距離較遠,需要進行視覺中心的移動。我們采用速度适中的動畫效果進行視覺中心的切換。
問題描述:對于初次加入詞圖的某些單詞,使用者可能既不是“認識”,也不是完全“不認識”,而是存在一種不确定的中間态
潛在影響:影響使用者初次記憶的使用體驗
解決方案:增加“不确定”的按鈕供使用者選擇,并對按鈕布局進行重新排版
問題描述:初次加入詞圖時,單詞位置總是固定出現在詞圖的中央,需要使用者手動改變其位置,否則就可能與之前的單詞位置重疊
潛在影響:會讓部分使用者覺得有些麻煩,每次都要自己改單詞位置
解決方案:允許單詞加入詞圖時在一定範圍内随機出現,進而減少兩個單詞重疊的機率,減少使用者的操作次數
問題描述:在複習狀态時,alpha版本的單詞總是固定出現在螢幕中央,
潛在影響:無法充分展現空間場景的相對位置資訊對記憶的幫助
解決方案:修改出現位置的顯示邏輯,對于在螢幕内的單詞,直接在原位置出現;對于超出螢幕範圍的單詞,會将其拉入螢幕視野内,但仍保持其相對螢幕位置并顯示給使用者。
問題描述:alpha版本的軟體由于詞圖大小等問題,對于平闆端相對适配性不足
潛在影響:不利于平闆使用者的日常使用
解決方案:在beta開發過程中始終注意對平闆端的适配,目前已在客觀條件(浏覽器)允許的前提下實作所有功能的适配
問題描述:首頁按鈕某些使用者認為屬于移動端的滑塊設計
潛在影響:對個别使用者審美帶來挑戰
解決方案:修改了按鈕的實作方式
問題描述:IP位址采用點分十進制表示,不利于使用者記憶
潛在影響:對于進一步推廣造成阻礙
解決方案:Beta階段完成了域名備案申請,現已支援通過域名jqkey.xyz進行通路。
問題描述:後端原靜态資源需通過Django進行請求得到,
潛在影響:效率較低,且在生産模式下無法正常運作
解決方案:通過nginx實作動靜資源分離
問題描述:alpha階段通過http協定通路,易被截獲封包監聽資料
潛在影響:對産品的安全性造成不利影響
解決方案:實作https協定的重定向,并申請相應CA憑證
由于本軟體核心功能部分依托『詞圖』實作,是以現階段對于手機端的相容性相對不足,故而本産品暫主要面向 PC 與平闆端市場;另一方面,由于本産品為 Web 應用,故可直接通過浏覽器 IP 進行通路,使用者端無需額外下載下傳任何插件,即可自動支援多裝置資訊同步,這對于使用者使用比較友好。
具體而言,本軟體支援 Chrome、新版 Edge、火狐、Safari 等浏覽器運作,可跨Windows、iOS、Linux作業系統,支援平闆端操作;但由于縮略圖需要 svg 格式支援,是以對于IE、360浏覽器相容性相對較弱。
綜上,建議使用者使用以下浏覽器及相應版本通路:
Chrome(90或更高版本)
Edge(90或更高版本)
火狐(83或更高版本)
Safari(14或更高版本)
由于本産品基于 Web 應用實作,是以無需使用者額外在本地安裝任何軟體,可直接通過浏覽器通路。
目前注冊時僅需提供使用者郵箱、昵稱與密碼,可以很好地保護使用者隐私。且注冊使用者需要進行郵箱驗證,以保證注冊行為的合理性。
對于初次注冊的使用者,本軟體還會為其提供詳細的教程引導,覆寫本軟體的全部特色功能,確定使用者對整個軟體的使用流程有一個基本的全面了解。
此外,使用者還可以随時傳回首頁,通過下方的教程頁面,學習本軟體的正确使用姿勢。
目前軟體存在的限制條件如下:
浏覽器需要支援 svg
詞圖界面對于畫布的調整需要使用滑鼠或鍵盤:平闆無法進行縮放、移動畫布的操作,PC 端才可進行滑鼠滾輪縮放等操作。
螢幕不能過小:如手機螢幕過小,或者将頁面、視窗縮放,均不能夠舒适的使用本應用;滿屏或全屏使用效果更佳。
由于伺服器性能和預算等限制,對于使用者上傳頭像功能存在一定的次數限制,圖床請求api的速度有一定的時間延遲。
複習測試界面使用左、右鍵時偶爾會出現光标位置在字的左側的情況,需要使用delete删除字母。僅使用字母鍵和backspace不會有此問題。
目前本軟體已支援直接通過域名通路!
域名:jqkey.xyz
此外,歡迎感興趣的同學加入我們的内測群,讓我們一起努力,把軟體越做越好!
另外,本項目同時配備H5宣傳手冊及宣傳視訊:
H5宣傳冊
B站宣傳視訊