前言說明

在開始使用 FigJam 製作前，我們先來釐清一個非常重要的觀念！
「設計的本質，不只是要讓畫面變得漂亮，而是要讓使用者感覺自然、順暢，甚至在無意識中愛上這個體驗。」

要做到這一點，就需要先了解 UI 與 UX 的核心任務，以及它們各自關注的重點。這樣在設計過程中，就能更有意識地掌握關鍵要點。以下簡單分享！

使用者介面（UI, User Interface） — 著重於網站或應用程式在視覺層面的設計，例如：字體樣式、版面排版、顏色搭配與整體美感，並會運用到許多平面設計的原則。UI 是使用者接觸產品的第一印象，也是塑造視覺識別元素與風格呈現的關鍵。

使用者體驗（UX, User Experience） — 專注於使用者在網站或應用程式互動過程中的整體感受，例如：操作流程、互動流暢度、體驗的感受、使用者是否願意持續使用。這些看似抽象卻極為關鍵的要素，會很主觀地直接影響網站或應用程式的使用者參與度、活躍度或是否持續回流，以及對產品使用的整體滿意度。

發揮你的想像力 🌟！

將網站或應用程式比喻為一台精心設計的進化版智能購物車，不是只能裝東西的購物車，而是具備導航、任務引導、互動提示的智能夥伴，它的任務是載著使用者從「需求」出發，直到「達成目標」。

目前使用者的需求是，需要買「蔬菜與冰淇淋」。
如果要完成上述需求，我們應該怎麼做？有沒有先後順序呢？

進化版智能購物車的啟程：穩定性與核心功能缺一不可

在出發前，第一步是確保購物車處於良好狀態，這對應到網站或應用程式運行的穩定性，這是維持基礎運作的必備條件。如果在使用者前往目標的過程中，一直遇到預期外的 Bug或突發狀況，那就無法為使用者帶來良好的 UX 體驗，甚至讓他們對整體系統失去信任。

接下來，購物車需要具備核心功能，例如導航賣場位置與操作指引和回饋，需要確保功能完整，還要提供流暢、直覺且高效的駕駛體驗，當使用者明確表示要處理什麼任務時，購物車的導航系統應該要能引導使用者順利達成任務，這樣的清晰指引能有效降低使用者的學習成本，提升操作效率，就如同網站或應用程式中的頁面導引、功能提示與操作指引，讓使用者清楚知道下一步該怎麼做，並在未來有需求時，會有意願再次回到網站或應用程式，完成下一個「達成目標」。若能達成這樣的效果，就能稱得上是讓人願意再次回訪的高黏著度產品。

接著到達賣場後，購物車會根據使用者需求自動轉換為賣場智能購物車，就像網站或應用程式中的不同操作模組之間能夠靈活轉換，不會讓使用者在功能切換時感到綁手綁腳。好的操作體驗應該自然且流暢，確保在不同情境下都能快速切換功能，而不是中斷或卡住。

分析需求與操作路徑

當賣場智能購物車閱讀完使用者的購物清單後，會顯示購物清單，並根據物品特性和保存需求來安排合適的採購順序。

例如，由於冰淇淋容易融化，賣場智能購物車會先引領使用者前往蔬果區採買蔬菜，最後才前往冷凍區購買冰淇淋，這樣能確保商品品質不受影響，引導使用者依照適當順序前往不同區域。

對應到網站或應用程式的設計，這就像當使用者在下訂單時，系統會先跳出登入提醒，確認使用者是否要登入累積購物點數，登入完成後，再自動回到下單結帳畫面，而不是在使用者完成下單後才跳出登入提示，避免錯過登入而影響到使用者權益。

這種合理順暢的操作規劃能有效降低操作成本與錯誤引導，同時也提升整體體驗的流暢性與便捷性，確保使用者能快速完成任務而無需思考過多操作細節。

靈活操作與清晰介面：提升購物體驗的雙重保障

賣場智能購物車除了需要具備靈活的操作功能，還要有清晰且一致的介面設計，讓使用者在每個操作步驟中，都能夠快速辨識按鈕、圖標與操作提示，減少視覺混亂與困惑。
為了讓系統或應用程式在視覺上具備一致性與品牌識別，通常會使用與企業識別系統（CIS, Corporate Identity System） 一致的配色與設計風格。
這樣能夠讓使用者一看到就自然聯想到是哪家企業的網站或應用程式，達到品牌強化的效果。

在賣場中，賣場智能購物車的首要任務就是管理與確認購物清單，讓使用者能夠快速標記已購買或尚未購買的商品，避免遺漏。

依賣場智能購物車 「購物清單」舉例

• 購物清單的勾選設計

  清單應該設計成一目了然的列表樣式，例如 搭配可勾選的方框或按鈕。當使用者購買完成後，點擊勾選即可將該項目呈現灰階，並移動至已完成頁籤，讓清單更加簡潔。

  舉例：就像待辦清單功能的每個清單項目，採用顯示勾選與淡化文字，顯示已完成項目，而未購買項目保持醒目的顏色。如此一來，使用者能夠快速核對清單，確保所有項目都沒有遺漏。
  
  （已完成的清單項目顯示勾選與淡化文字　圖片來源 To Do List）

• 即時視覺回饋與動畫效果
  在勾選商品或標記完成時，透過小幅度動畫或按鈕變色，提供即時的視覺反饋，讓使用者能夠快速感知操作是否成功。
  舉例：當使用者點擊勾選按鈕時，對勾圖示由灰色變為綠色，綠色在介面設計中常象徵成功與完成，同時按鈕輕微放大縮放，搭配淡入淡出的色彩過渡效果，不僅強化操作手感，還提升整體介面的精緻度與互動性。
  
  （每個顏色在介面設計都有象徵與代表的意義　圖片來源 Element Plus）

UI 與 UX 的緊密結合，都一樣重要！

好的網頁設計不僅僅是單純的美觀與品牌一致性，更是提升介面美觀性、互動性和易用性，從而改善使用者的整體體驗。然而，僅有好看的使用者介面（UI）設計還不夠，還必須能夠支援操作流暢性與操作指引，才能為使用者帶來優秀的使用者體驗（UX）。

如果說 UX 是車子的駕駛體驗，那 UI 就是車內的操控介面與儀表板，兩者缺一不可。唯有當兩者無縫協作時，才能帶來舒適、直觀且令人愉悅的使用感受。

透過 企業識別系統（CIS） 與操作指引融入介面設計，讓使用者在操作時能直覺聯想到網站或應用程式屬於哪個品牌，同時享有流暢的操作體驗。才能在視覺與體驗之間取得平衡，達到品牌識別與使用者體驗的雙重提升。

結語

透過這些基礎分享，相信大家已經對 UI 與 UX 有了初步的了解。接下來，會分享如何用 FigJam 製作使用者流程圖，敬請期待哦！🤩

參考資料與延伸閱讀

⑴ UX Design Fundamentals
⑵ 舉例圖片來源： To Do List
⑶ 舉例圖片來源：Element Plus