萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

歐路詞典 iPhone 端重設計實戰:搜索、釋義、翻譯三大核心流程的交互優化

Weekly Design Challenge (4/20) 首發簡書:https://www.jianshu.com/p/25a8fe45df63

歐路詞典(Eudic)以實用著稱:跨軟體取詞、跨平台同步生詞功能強大。但在 UI/交互層面,視覺與操作仍有巨大提升空間。

現狀痛點分析

搜索 Tab:高頻入口被過度佔用

Tab Bar 首位默認喚鍵盤。關鍵詞搜索、攝像頭取詞、歷史記錄屬並列搜索形式,本地/在線檢索是關鍵詞搜索的子分類。默認喚鍵盤雖方便高頻操作,卻徒增其他形式使用路徑(需滑動/點擊取消收鍵盤)。

釋義頁:Bottom Bar 功能實用但交互低效

  • 目錄切換需跳新頁,無直觀方式。
  • 發音高頻但英/美音無法切換,單一按鈕令人困惑。
  • 主題字體調整無即時預覽。
  • 翻頁圖標語義錯誤且隱藏,功能被忽略。
  • 加入生詞本藏在 Menu Bar,不夠顯眼。
  • 內容排版可進一步優化資訊獲取效率。

翻譯頁:語言選擇邏輯與橫屏模式待優化

自動檢測語言卻需手動選兩個選項。日常多為雙語互譯,何不同時選中兩語言讓 App 自動判斷?

橫屏翻譯板犧牲輸入切換便捷性,實用場景需快速交流,豎屏模式更實用。另:面對完全陌生語言(如日文/繁中/簡中),無本地語言文字輔助無法辨識,系統語言選擇頁有此輔助,翻譯語言選擇同樣需要。

重設計方案

搜索頁:同層級並列入口,扁平化選項

本地/在線檢索分類、攝像頭取詞、關鍵詞輸入同層級並列。打開 App 即可:輸入搜索、滑動看歷史、點按鈕開攝像頭、直接切換檢索分類。次級選項消失,功能更清晰。

釋義頁:列表化內容 + 手勢交互 + 即時預覽

  • 詞義採列表呈現,快速掃視獲取資訊。
  • 收藏按鈕點擊 → 頂部彈出 Toast 提示,不插入內容干擾閱讀。
  • 長按發音鍵 → 系統原生選單切換英/美音。
  • 顯示設定移入 Menu Bar,點擊頂部彈出面板,即時預覽調整效果。
  • 長按右側目錄鍵 → 詞典列表展開可拖動定位,無需跳頁。
  • 下拉頁面 → Search Bar 出現,遵循系統邏輯站內搜索。

翻譯頁:雙語言自動判斷 + 豎屏模式 + 陌生語言輔助

  • 同時選中源/目標語言,App 自動判斷翻譯方向,用戶只管輸入/貼上。
  • 改豎屏顯示,保留輸入切換便捷性。
  • 語言選擇器提供本地語言文字輔助,解決陌生語言辨識難題。

核心原則:一切為了查單詞更清晰、更直觀

從資訊架構扁平化、交互路徑最短化、視覺呈現列表化、反饋即時化、輔助資訊情境化五個維度,重構歐路詞典核心體驗,還原工具本質。

copyright © 萬盛學電腦網 all rights reserved