布局設(shè)計(jì)

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

UE 設(shè)計(jì)

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

  

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

  

• 查看課程簡(jiǎn)介后，可直接添加課程，添加完了不用離開(kāi)當(dāng)前頁(yè)面就可以繼續(xù)打開(kāi)課程

  

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

  

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

  

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

  

可能完善的地方：

• 左側(cè)的信封按鈕作為觸發(fā)率最低的按鈕，放在左上角比較合理，符合單手操作原則的，因?yàn)樽笊辖鞘鞘种笩岫茸畹偷膮^(qū)域，但作為消息提醒中心，這個(gè) icon 改成鈴鐺是否會(huì)更好？因?yàn)樾欧飧啻淼氖切畔?lái)往收發(fā)的意思，而且容易誤解成了功能建議反饋中心（發(fā)送端）
• “添加課程”和“我的帖子”的字體，從放大后的圖片來(lái)看，顯然“添加課程”的字體略小一些

  

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

  

• 可以嘗試通過(guò)把這兩個(gè)文字加上邊框（如下圖），給予用戶心理暗示這是一個(gè)按鈕，而不是用鮮艷的綠色來(lái)?yè)屟矍?

  

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

  

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

  

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

  

• 在步驟 1 添加完課程，步驟 2 返回上一層級(jí)后，課程縮略圖依然處于未添加狀態(tài)，只有當(dāng)步驟 3 返回再上一層級(jí)，再?gòu)男逻M(jìn)來(lái)，才會(huì)出現(xiàn)右圖中所顯示的“已添加”文字

  

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

  

體驗(yàn)綜述

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