Hey there,

我是 Taony~ 歡迎來到今天的私房菜

今天的內容會包括兩方面：

1. 導航設計避雷清單（Checklist）

2. 優秀 Landing page 設計分析

導航 Navigation 設計避雷

這份完整的「導航設計避雷清單」綜合了四大類別的基礎要求與進階優化建議。

無論你是在初步規劃還是持續優化產品階段，都可以依據這份清單迅速定位問題並提升使用者體驗。

一：核心導航 & 搜尋功能

• 關鍵元素展示

  • 是否始終顯示主頁、購物車、設定等關鍵導航？

  • 行動裝置與桌機裝置的 CTA 按鈕是否分別特別優化（例如：行動裝置浮動於底部、桌機置於右上角）？
    

• 搜尋與基本導航

  • 搜尋框（或搜尋圖標）是否始終可見並具備良好的互動性？

  • 是否固定展示基本導航信息來提升用戶互動？（例如：熱門分類、篩選、標籤）

二. 導航結構 & 層級管理

• 多層級與擴展選單

  • 是否採用了「顯示更多 / 更少」模式、麵包屑導航、手風琴式展開等方式來管理導航層級？

  • 是否需有考慮到深層嵌套（超過3層）的必要性？也許可以使用搜尋功能來替代？
    

• 下拉選單與選單按鈕

  • 下拉選單的出現 / 消失行為（懸停、點擊、延遲或自動消失）是否符合使用習慣？

  • 「選單」按鈕最佳位置是頂部還是底部？是否有助於單手操作與整體操作便利性？

  • 行動裝置上是否採用了垂直分割導航，保障子選單的清晰呈現？

三. 視覺呈現 & 互動體驗

• 導航樣式與強調

  • 導航呈現方式是否合理（全頁、部分覆蓋、滑入等）

  • 是否有運用圖標、標籤來區分不同功能？

  • 是否有突出熱門 / 重要的導航項目？
    

• 使用者互動與動態反饋

  • 點擊或滑過導航欄元素時是否有提供微互動與即時反饋？

  • 使用者是否能從同一位置快速開啟 / 關閉導航？

四. 無障礙體驗 & 優化

• 無障礙支援

  • 所有導航選項是否均可透過鍵盤操作？

  • 是否確保了所有導航選項皆可被螢幕閱讀器順利讀取？

  • 導航是否具備足夠的色彩對比、字型大小？
    

• 導航效率與路徑最短化

  • 是否有盡量縮短用戶從一個步驟到下一步驟所需的距離與時間？
    

• 優化策略與未來規劃

  • 定期進行使用者測試與數據分析，確保導航設計隨使用情境不斷優化。

  • 確保在各種裝置（手機、平板、桌面）和不同瀏覽器中均保持一致、流暢的體驗。

  • 根據使用者行為和偏好，考慮動態調整導航選項或推薦內容，以提供個性化體驗。

  • 設計一套可擴展的導航架構，便於未來內容和功能的增長，減少調整所需工作量。

優秀設計推薦

SaaS 產品網站 Homepage 設計：

「 雲端安全的革新之道 」

先介紹一下公司背景：

Wiz 成立於五年前，專注於提供雲端基礎設施的安全解決方案，幫助企業識別和管理雲端環境中的安全風險。

就在昨天，Wiz 宣布與 Google 簽署收購協議，正式加入 Google。此舉凸顯了科技行業對網絡安全日益增長的重視。（新聞連結）

Google 也通過此次收購，進一步強化了其在雲端安全領域的競爭力。

接下來一起看看，這次的 SaaS 網站設計有哪些地方值得我們學習吧。

👇

鮮明的品牌特色

首先產品用「Wizard 巫師」縮寫 [Wiz] 為品牌名稱，就非常具有記憶點。

基於「Wizard 魔法」的概念，延伸應用到諸如：企業 Logo、右下角 Online chat 的圖標、Hero section 揮舞魔法棒的動畫。

為了突出「雲端」 ，背景、圖標、插圖等也處處可見雲朵的元素。

顏色方面，雖然大面積採用了科技業常用的「藍色」作為品牌色，但是搭配適當「粉色、白色」後馬上形成差異化和自己的風格。（CTA 行動按鈕、產品卡片、icon、動畫）

巧妙的動畫設計

首頁 Hero section 部分的動畫展示，細節設定很巧妙。一隻手拿著巫師的魔法棒點擊「bug」形狀的小圖標，讓人聯想到「識別+消滅威脅」，這正是產品的核心功能。

下方的另外一隻手，會被一道閃電擊中，又可以讓人聯想到「保護安全」的概念。

往下的中間部分，「SHIFT HAPPENS」板塊採用了非常有意思的「夾核桃」動畫。

當用戶點擊夾子的時候，堅硬的核桃會被打開，並且對應一句雲端網路存在的風險。

透過「夾核桃」的方式，暗示著過去傳統的安全方案看似堅固（核桃殼），但其實打開發現，

雲端技術的出現已經打破了傳統安全程序的限制。

獨特的敘事方式

Wiz 的主頁並沒有直接展示自己的產品，而是透過前面提到的「夾核桃」進行過渡引導。

先讓客戶知道 “雲端環境會帶來哪些安全隱患”，然後接著標題 “A new set of problems  requires a new set of solutions” 直接帶出 Wiz 就是你需要的 Solutions。

再下面才是介紹 Wiz 的部分，例如產品功能、產品特色、真實客戶反饋、介紹影片、網路評價等。

使用這種講故事的漸進方式，更容易和客戶建立起連結，刺激想要進一步瞭解的慾望（ 配合無處不在的 ‘Get a demo’ CTA 按鈕）。

精緻的細節呈現

頂部導航欄中的 icon 部分，當滑鼠觸碰時會觸發一個微動畫，讓圖標「活」起來。

Hero section 的合作企業 Logo 展示區，有別於其他網站。並不是左右滑動或者固定不動，而是會在一定時間後自動進行翻轉。這樣既可以顯示更多內容，又更容易吸引瀏覽者的注意力。

夾核桃的動畫也細節滿滿，從夾子的按壓到核桃的打開，讓人忍不住多看幾眼。

網頁底部 footer 部分哭哭的動畫也非常傳神，使人忍不住好奇 “為什麼會哭？發生了什麼” 進而引發更多互動。

設計洞察 Insights

作為 UIUX 設計師，我們可以從 Wiz 的 Landing Page 中學習到：

• 數位品牌想要脫穎而出，必須具備明確的主題和差異化的視覺語言。

• 動畫和互動設計是將抽象概念具象化的最佳方式，讓網站顯得更加活潑且具有趣味性。

• 故事化的敘事能拉近與客戶的距離，讓客戶感受到產品背後的理念和情感，增強產品說服力。

• 精緻的細節可以大幅提升整體體驗，讓客戶留下深刻印象，提升購買意願。

這些設計方法不僅適用於科技行業，也適用於其他領域的網站設計。想要進階 UIUX 設計，要站在更廣的維度去思考如何結合視覺、互動及敘事等多方面進行創新，打造出讓人「動情」的產品體驗。

而這，恰恰也是 AI 只能作為輔助工具，無法替代我們的原因。

Thanks for reading!

很高興你能看到這裡，希望今天的分享對你有所啟發和幫助。

期待下次見面！

Taony