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

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

功能導(dǎo)圖

UED 簡評

布局設(shè)計

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

UE 設(shè)計

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

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

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

  • 可以玩一樣地闖關(guān)學(xué)習(xí),不會那么無聊。以星星代表掌握的程度,一星表示整體達(dá)到60到70分,二星表示整體達(dá)到70到80分,三星表示80分以上。

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

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


可能完善的地方:

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

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

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

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

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

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

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

  • 無法理解 Touch “詳情”后彈窗的內(nèi)容與“詳情”有什么關(guān)聯(lián)

體驗綜述

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

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

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

    回復(fù)