英語流利說 APP 簡單 UE 分析建議

1 評論 32134 瀏覽 41 收藏 8 分鐘

功能導圖

UED 簡評

布局設計

「英語流利說」采用了分欄式設計,將屏幕分成了上中下三個欄目,底部用的是選項卡導航,這種設計比起漢堡包(三道杠形式)菜單導航來說節省了用戶進入功能菜單的成本,這也是目前很多 APP 產品所使用的設計方式。

UE 設計

  • 打開 APP 首頁出現引導課程「歡迎使用英語流利說」,并用“開始”按鈕引導用戶進行點擊,這樣的好處是能以較低的學習成本教會用戶怎么使用這個 APP,而核心功能「添加課程」也放在也顯眼的位置,但這個綠色文字實在值得詬病

  • 課程選擇頁面通過“難度”“分類”“排序”三大維度為用戶提供了個性化的課程篩選,能有效幫助用戶找到自己感興趣的課程內容

  • 查看課程簡介后,可直接添加課程,添加完了不用離開當前頁面就可以繼續打開課程

  • 可以玩一樣地闖關學習,不會那么無聊。以星星代表掌握的程度,一星表示整體達到60到70分,二星表示整體達到70到80分,三星表示80分以上。

  • 通過不同競爭形式的排行榜,激發用戶使用 APP 的頻率,提高活躍度,但是這里存在一個交互感知不順暢的地方,當 Touch 底部切換榜單選項卡時(中圖),選項卡的交互式沿 X 軸移動的,但是榜單列表的切換方式卻又是沿 Y 軸移動的,這產生了一種疑似斷層的交互,建議榜單列表的切換方式統一也沿 X 軸移動

  • 當你復讀一句英語時,會根據你的讀音標準與否做出評級,黑色表示還不錯,綠色表示發音很贊,紅色表示不夠標準或不夠清晰,而針對小部分紅綠色識別困難的用戶,在設置中提供了其他顏色方案


可能完善的地方:

  • 左側的信封按鈕作為觸發率最低的按鈕,放在左上角比較合理,符合單手操作原則的,因為左上角是手指熱度最低的區域,但作為消息提醒中心,這個 icon 改成鈴鐺是否會更好?因為信封更多代表的是信息來往收發的意思,而且容易誤解成了功能建議反饋中心(發送端)
  • “添加課程”和“我的帖子”的字體,從放大后的圖片來看,顯然“添加課程”的字體略小一些

  • 底部選項卡式的導航,以綠色高亮代表該選項卡被選中,但是“添加課程”和“我的帖子”的文字也是綠色的,代表的卻又是可點擊卻未點擊的按鈕,存在信息噪音誤導用戶

  • 可以嘗試通過把這兩個文字加上邊框(如下圖),給予用戶心理暗示這是一個按鈕,而不是用鮮艷的綠色來搶眼球

  • 首頁課程列表中,有一個隱藏的操作(向左滑動刪除課程),當用戶不知道怎么刪除課程,就會去摸索可能的操作,除了向左/右滑動,還有長按不放的動作,目前,長按課程除了會變暗之外沒任何作用(左圖),個人建議當用戶長按課程時,除了變暗還會沿 x 軸方向漂移一下(中圖),作用是暗示用戶可以向左繼續滑動(右圖)

  • 課程離線緩存不夠人性化
    1、下載過程中無法暫停
    2、下載完成后如果想要刪除緩存,需要經過 4 個步驟才能到達清除緩存的頁面,而且這個頁面隱藏的也比較深,

  • 封面更換時,應該默認提供數張封面壁紙供選擇,而不是只有“拍照”和“從相冊選擇”,并不是誰的手機里都會存一些好看的“壁紙”
  • 頭像、封面、昵稱等 title 文字改成深色顯示會更好,和編輯框內的提示語形成對比

  • 在步驟 1 添加完課程,步驟 2 返回上一層級后,課程縮略圖依然處于未添加狀態,只有當步驟 3 返回再上一層級,再從新進來,才會出現右圖中所顯示的“已添加”文字

  • 無法理解 Touch “詳情”后彈窗的內容與“詳情”有什么關聯

體驗綜述

整體操作流程還是比較順暢的,但是 UI 設計不夠精美,視覺觀感上相對粗糙,大量使用了綠色元素,想突出一些重點功能可以理解,但是卻沒有駕馭好,起到了適合其反得效果,同時人性化的地方也還有提升的空間。

作者:雪人Ricky;來源:簡書

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 這應該是比較老的版本了,可能是浙工大的實習生做的ui,老板說他們當時連切個圓角都切不圓??

    回復