一、😣 面臨資訊太多我總是不知如何設計
在 UI/UX 設計中，我經常面對一個挑戰：網站上有大量資訊需要呈現，我該如何安排，才能讓使用者既不感到壓力，又能快速理解？
有一陣子，這問題令我常常陷入一種設計焦慮 — —
當我試著把所有資訊放進頁面時，同時不確定自己是否設計出「使用者真正想看的頁面」，或只是機械地把內容全部攤開，變得雜亂無章。我發現自己很難說清楚「為什麼我要這樣設計」，然而根本的原因是我根本不清楚「使用者真正需要什麼」。
帶著這個問題，我開始反思：資訊要怎麼分類？使用者怎麼閱讀？我有沒有依據可依循？我試著總結出幾個常見困擾：
1. 資訊該如何分類？
2. 資訊的閱讀順序與擺放位置？
3. 我的設計有沒有符合使用性與認知流程？
為了找到解法，我試著從「使用者閱讀流程」出發，透過「設定使用任務」的方式來推導整體資訊架構與設計原則。
1. 設定使用任務（Task）：釐清使用者的目標與路徑，搭配 NN/g 原則（如 Visibility of System Status, User Control and Freedom 等）
2. 建立閱讀流程（Flow）：運用視覺層級（Visual Hierarchy）與資訊架構（IA）來安排優先順序
二、🏋️ 進入實戰演練
以我當時設計的【黃金產品頁】為例，設計需求有很多產品資訊，我先設定可能典型的使用者任務流程（Task Flow），在進行分類最後再設計。
👉 💡 使用者典型閱讀流程（Task Flow）
進站 → 查看商品 → 評估市場（開市、金額）→ 評估產品(是否想購買) → 評估風險細節 → 採取動作
👉 📄 資訊需求（Information Architecture）
再依據這個任務流程拆解資訊分類：
- 先分成四類：市場狀態、產品資訊、互動、產品詳細規格
① 市場狀態（狀態列）
② 產品基本資訊（商品圖、名稱、價格、標籤）
③ 使用者操作（Contact Us、CTA）
④ 詳細規格（表格或卡片呈現）
- 同時思考放置這些資訊要符合的原則：
NN/g 原則：每個區塊都對應到 NN/g 的設計原則，從「使用者可見性」、「系統即實世界」、「使用者控制」到「文件輔助」等，都有清楚的設計依據。
👉 🔢 視覺排序與閱讀（Reading Flow）
（由上到下、由左至右）
- ⭡ 最上：我將市場狀態、倒數、返回設計成一個 StatusBar/ActionBar
- ⭢ 中間：放置產品資訊圖片，主要商品資訊、價格、購買聯繫按鈕
- ⭣ 下面：才是更多細節補充，方便使用者查看
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
| 🔄 市場狀態（右上角 or 上欄） |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
| 📦 商品圖 ｜ 商品標題 + 價格 ｜ CTA |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
| 📝 小字說明（可摺疊） |
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
| 📊 PRODUCT SPECIFICATION |
這樣的設計可以引導使用者在查看產品時，在上方清楚看到市場狀態可不可以買賣，中間可以看到價格，評估完成就有透過「Contact Us」聯繫購買，最後再進一步看其他細部規格。
三、👋 結論
這次的經驗不只讓我解決複雜資訊的問題，更讓我體會到，設計不只是排版與美觀，更需要建立「資訊秩序」。
在我思考「要放哪些資訊」我會改反問自己：「使用者為什麼來到這裡，他想完成什麼？」近一步設計「使用者任務操作流程」
透過設定「使用者任務」可以有理論去說為何我想要這樣設計，以及為何這些資訊的位置、大小、顏色會這樣安排。更可以讓原本雜亂無序的資訊，透過分類、視覺排序，呈現出有序的閱讀層次。
未來若能取得真正使用者的使用流程或反饋，亦可以迭代優化任務流程，同步調整資訊部局設計，讓整體網站體驗貼近接近使用者。
四、🤗 延伸討論
以下是我當時設計，針對客戶提供資訊，分析的易用性原則
①【市場狀態區塊】:
- Market Status（Market Open / Closed）(市場狀態)
- Price Expiry Countdown（價格倒數）
- Last Update（最後更新時間）
👆 📌 NN/g 原則：Visibility of System Status
使用者需要知道目前市場是否開放、價格資訊是否最新。這是讓使用者感到「資訊透明」的關鍵。
②【產品基本資訊】📦
- 產品名稱 + Fineness
- Tag：Classic Retail / From LBMA Good Delivery Listed Refinery
- 價格（ELIZ SELL / ELIZ BUY）
- 小字：所有顯示匯率僅供參考、實際請聯繫…
👆 📌 NN/g 原則：Recognition rather than recall + Match between system and the real world
使用者應該能直接看到產品名稱與價格，不用去記得其他名詞。標籤分類提供輔助記憶。
③【互動動作區】🟡
- CTA：Contact Us- 產品須知
👆 📌 NN/g 原則：User control and freedom
使用者應該明確知道下一步可以怎麼做，而不是猜測「我可以買嗎？」
④【詳細規格資訊區】📊
- Product Specification
👆 📌 NN/g 原則：Help and documentation
在使用者可能有疑問時，提供補充而不打擾主流程。
📌 NN/g 參考設計理論來源：
- Nielsen Norman Group: 10 Usability Heuristics for UI Design 🔗
→ 基礎易用性 - F Pattern 🔗
→ 左上至右、上至下，重要資訊應放左上與第一眼可見區域 - Progressive Disclosure🔗
→ 讓複雜資訊逐層展開、不干擾主流程
💖 喜歡我的內容嗎？
如果你喜歡我的文章、設計觀點，覺得有收穫、有共鳴，或只是剛好想請我喝杯咖啡☕️， 歡迎透過這個連結小額贊助我一點點能量 ✨
你的小小支持，是我繼續創作的巨大動力，真的非常感謝！🙏
