手機版的選單與導覽該怎麼設計？
手機的操作邏輯與電腦不同
電腦有滑鼠，可以精準點擊、可以「移過去」觸發效果、螢幕夠寬可以把選單全部攤開。手機這三件事都沒有。
把電腦版的導覽邏輯直接搬到手機，最常見的結果是：選單能打開，但很難用。
漢堡選單的正確用法
三條橫線的圖示已經是手機選單的通用符號，多數使用者認得。但有幾個常見的錯誤：
把重要動作藏進選單
「聯絡我們」「立即詢價」「電話」這類行動按鈕，不應該只存在於選單裡。訪客要先點開選單、再找到項目、再點擊，中間每一步都會流失人。
建議做法：重要的行動按鈕常駐在畫面上——固定在頂部、或固定在底部。服務業尤其建議把電話常駐，這一項直接影響來電量。
選單打開後沒有明顯的關閉方式
使用者打開選單後改變主意，需要一個明確的關閉按鈕。只靠「點旁邊空白處」不夠，因為不是每個人都知道。
選單項目太多，需要捲動
如果選單打開後還要往下捲才看得完，代表主選單項目過多。應該精簡，或改用分組呈現。
下拉選單在手機上的問題
電腦上的下拉選單依賴「滑鼠移過去」觸發。手機沒有這個動作——手指只有點擊，沒有停留。
直接沿用的結果是：點一下父項目，可能直接跳頁而看不到子項目；或是要點兩次才展開，但沒有任何提示。
正確做法是改成點擊展開的收合式選單，並且父項目旁要有明確的展開圖示（箭頭或加號），讓使用者知道這裡還有下一層。
層級要更淺
電腦上三層選單勉強可用，手機上超過兩層就很難操作。這也是為什麼網站架構規劃階段就要控制層級深度，見網站選單怎麼設計。
點擊區域要夠大
手指的接觸面積遠大於滑鼠游標。點擊目標太小或太密集，就會點錯。
業界的建議大致是每個可點擊元素至少 44 到 48 像素見方，且元素之間要有足夠間距。
常見的違反情況：
- 頁尾的連結一行排五個，全部擠在一起
- 文章內文中的連結，前後行距太密
- 關閉按鈕做得很小，放在角落
- 分頁的數字按鈕排得太緊
常駐元素要小心
固定在畫面上的元素（頂部選單列、底部行動按鈕、右下角的客服圖示）很實用，但也會吃掉本來就不多的螢幕空間。
建議原則：
- 固定元素合計不要超過螢幕高度的兩成
- 頂部選單列可以做成「向下捲動時收起、向上捲動時出現」
- 注意常駐元素會不會遮住內容——尤其是頁面最底部的內容，容易被固定的底部按鈕蓋住
- 彈出視窗要有明顯且好按的關閉按鈕
手機上的搜尋功能
如果網站內容量大，手機上的搜尋比選單更常被使用——因為捲動找東西太累。
建議把搜尋圖示放在容易點到的位置，而不是藏在選單最下方。
麵包屑在手機上的處理
麵包屑對從搜尋結果直接進入內頁的訪客很重要——他們沒經過首頁，對網站結構毫無概念。
但完整的麵包屑在手機上容易斷行或超出螢幕。常見的處理方式是只顯示上一層，或把中間層級收合。重點是至少要能往上一層。
驗收時該測的五件事
- 用實機測試，至少 iPhone 與 Android 各一支。模擬器測不出所有問題
- 單手操作——重要按鈕是否在拇指容易觸及的範圍
- 選單的每一層都點過——包含最深的那一層
- 檢查固定元素有沒有遮住內容——特別是頁面最下方
- 請沒看過這個網站的人試用——最有效的測試方法
完整的驗收項目見網站驗收怎麼做。