04
Wi-Fi Planner Pro
同一張 Wi-Fi 訊號熱點圖,要讓小辦公室和大工廠都看得懂。
這份簡報是當時的提案,日期是 2025 年 8 月 —— 比開發早三個月。它核心流程那一頁的「AI 自動辨識牆壁」,就是後來沒撐過時程的那一塊,而最後一章講的就是這件事。
30 秒看完
- 問題
- 工具什麼都算得出來,但畫圖像 CAD、一道牆要好幾個動作、做好的功能找不到。而且每道牆都手畫完之前,什麼都算不出來。
- 做了什麼
- 我是唯一的設計師。找內部 IT、RD 測試第一次使用的流程,把畫圖的摩擦一條條改掉,訂出「哪些資訊留在畫面上」的判準,並重選熱點圖色階。
- 結果
- 三個月內上線。身邊的使用者回報畫圖和換牆面材質變好用了。沒有改版前後的數據。
我負責的部分
- 資訊設計
- 介面設計
- 熱點圖視覺系統
平台
- Web
團隊
- 獨立完成 —— 產品走向、UX 與 UI
客戶與時間
- D-Link
- 2025.11 – 2026.01

背景
功能很強,但越來越難學
Wi-Fi Planner 是企業用的無線網路規劃工具:把空間建模、預測訊號覆蓋,在裝機前就決定 AP 要放哪裡。這是我在 D-Link 的最後一個專案,三個月,設計端只有我一個人。
需求裡寫了三個問題:
- 3
- 個月
- 1
- 位設計師,負責產品走向、UX 與 UI

- 1
繪圖操作像 CAD:對製圖員沒問題,對網路專業人員是一道牆。
- 2
畫一道牆要重複好幾個動作,而一張圖全是牆。
- 3
已經做好的功能,使用者找不到。
競品
差距不在算得準不準
我比了 NetSpot 和銳捷的規劃工具。它們算得出來的,我們也算得出來。真正的差距是「要多久才開始有結果」:熱點圖出來之前,得先放平面圖、畫每一道牆、設定牆面材質、擺好 AP。
所以比完得到的是一份摩擦清單,不是功能清單。鍵盤操作(刪除、復原、複製、貼上)則照 Microsoft 365 和 Adobe 的習慣,因為使用者上一次做這些動作,就是在那些軟體裡。
研究
大家都卡在畫圖
我找公司內部的 IT 和 RD 人員,模擬第一次使用:放平面圖、畫牆並設定材質、擺 AP。運算和看熱點圖沒有人卡,但每一場都慢在畫牆和改錯。
有一個限制要說清楚:受測者都懂網路。他們測得出工具會不會擋路,測不出新手看不看得懂。
Highlight #1
畫圖:每道牆少幾個動作
問題:每道牆都要重複好幾個動作,而牆沒畫完之前,工具什麼都算不出來。
改法:畫的當下就能直接換牆面材質,材質依一般、木作、門、窗分組,並標上衰減值(dB)。常用動作配上快速鍵,刪除、復原、複製、貼上沿用大家熟悉的習慣。

Highlight #2
畫面上只留會改變下一步的資訊
判準:這個資訊會不會改變使用者下一步?會,就留在畫面上;不會,就收進進階。預設畫面只有四樣:平面圖、熱點圖、AP 位置、圖例。原本印在地圖上的訊號數值直接拿掉。
跟工程端的分歧:工程希望參數全部攤開。我沒有去爭要不要顯示,而是問「主要使用者打開這頁的前 30 秒需要知道什麼」,再用原型跑任務測試。最後的結果:預設精簡,進階模式會記住你的設定。

Highlight #3
熱點圖色階:選使用者本來就看得懂的
問題:綠到紅最直覺,但紅綠色弱的人看起來,兩端幾乎是同一種顏色。
改法:跟 IT、RD 討論後,選了紅→橘→黃→綠→藍。這是網路軟體用了很多年的色階,專業使用者不看圖例也讀得懂。圖例兩端另外加上 Good、Poor 兩個字,因為訊號強的一端是紅色,對新手來說很反直覺。



Highlight #4
給工程的標註規格
每個畫面都附上標註稿交給工程:元件編號、每個編號的填色/描邊/文字色、四種按鈕狀態,需要圖檔的地方寫上檔名。這樣省掉了一整類「這裡到底是哪個灰」的來回。

回顧
好用了一點,但說不出多少
- 1
沒有做改版前後的量測。任務和受測者都有了,一支碼錶就能量,但我沒有再跑第二次。身邊的人回報畫圖變好用了,我能說的就只有這樣。
- 2
2025 年 8 月的提案裡有「AI 自動辨識牆壁」:先設比例尺,讓工具自己找出牆,人只負責修正。三個月塞不進去,現在牆還是要手畫,而那正是研究找到的瓶頸。
- 3
熱點圖的視覺規範只留在這個產品裡,我沒有把它推成共用的設計系統。

