這本書關於什麼？
● 電子商務網站的規劃。
● 電子商務網站的行銷。
● 電子商務網站的介麵設計。
● 電子商務網站的錶單設計。
這本書寫給誰／誰需要閱讀這本書
● 統籌電子商務網站前端規劃的企劃師。
● 需要堆疊網頁骨架的介麵設計師。
● 專門替電子商務網站外觀拉皮的視覺設計師。
● 常常充當設計救火員的網頁開發工程師。
● 有建置電子商務網站的公司。
本書特色
如何開啟UX Design最大化，創造極上電商力
本書指導您，深入消費者角度，剖析消費者在電子商務網站上的目的和行為。
本書啟發您，管理和運用使用者互動資訊的思維。
本書引領您，瞭解電商產業中使用者的特性和商品/服務需求。
本書訓練您，利用透過與使用者交流，來改進平颱/介麵設計與管理流程。
具體描述
《數位時代互動介麵設計準則：以使用者為中心的跨平颱體驗建構指南》 本書簡介 在資訊爆炸與數位工具無所不在的當代，介麵設計已遠遠超越瞭單純的美學呈現，它直接關乎產品的可用性、使用者的滿意度，乃至於企業的最終商業成敗。本書《數位時代互動介麵設計準則：以使用者為中心的跨平颱體驗建構指南》，旨在為設計師、產品經理、開發人員，以及所有關心數位產品體驗的專業人士，提供一套係統化、實務導嚮的設計方法論與深度技術探討。 本書摒棄瞭僅關注單一技術或風格趨勢的淺層探討，而是聚焦於「使用者中心設計」（UCD）的核心哲學，並將其無縫接軌至當前多樣化的數位生態係統——從傳統的桌麵應用、響應式網站，到行動裝置App，乃至於新興的穿戴裝置和語音介麵。我們深信，成功的介麵設計是理性分析、同理心洞察與精湛技術執行的完美結閤。 第一部：設計思維的重塑與基礎理論建構 (Foundational Framework) 本部分將帶領讀者從根本上理解現代介麵設計的本質，確立一套穩健的設計哲學。 第一章：從「看見」到「理解」：人機互動（HCI）的核心定律 深入探討人類的認知心理學如何在介麵互動中體現。內容涵蓋蓋斯塔爾完形法則在視覺層級劃分中的應用、米勒魔術數字（Miller's Law）對資訊塊管理的指導，以及希剋定律（Hick's Law）如何影響決策路徑的設計。我們將詳細分析知覺負荷（Perceptual Load）如何影響使用者的操作效率，並提供量化工具來評估介麵的認知負荷指數。此外，本章會詳述設計中的心智模型（Mental Models）與係統模型（System Models）之間的落差如何導緻錯誤，並探討如何透過預期一緻性（Predictive Consistency）來彌閤此差距。 第二章：使用者研究的深度探掘：超越錶象的洞察 有效的設計始於深刻的同理心。本章側重於如何執行高質量的使用者研究，而不僅僅是收集數據。我們將剖析質化研究（如深度訪談、人種誌研究）與量化研究（如A/B測試的進階統計分析、熱圖追蹤的深度解讀）的有效整閤策略。內容包括：建立精準的行為使用者畫像（Behavioral Personas），區分需求（Needs）與慾望（Wants）的關鍵技巧，以及情境化使用案例（Contextual Scenarios）的建立流程，確保設計決策始終基於真實的用戶行為而非設計師的主觀臆測。 第三章：資訊架構與導航設計的藝術 在資訊過載的環境中，清晰的結構是體驗的骨幹。本章將深入探討如何運用樹狀圖、卡片分類法（Card Sorting）來規劃內容層級。重點解析瞭不同導航模式（如全局導航、局部導航、麵包屑、抽屜式選單）在不同複雜度網站上的優缺點與適用場景。特別針對大型內容驅動平颱，我們將提齣「動態資訊架構」（Adaptive IA）的概念，使其能依據使用者的歷史行為和當前任務調整資訊的呈現順序。 第二部：跨平颱體驗的實務構建與元件設計 (Practical Implementation) 本部分聚焦於如何將理論轉化為在不同載體上一緻且優化的互動實踐。 第四章：響應式設計的精確控製與斷點策略 響應式設計不再是「縮小與重排」的簡單過程。本章探討瞭「容器優先」（Container-First）的設計思維，強調介麵元素應根據其承載空間的限製來調整，而非反嚮操作。我們將詳細解析流式佈局（Fluid Grids）的數學基礎，並提供一套科學的「斷點決策矩陣」（Breakpoint Decision Matrix），幫助設計師判斷何時應進行佈局的實質性重構（Reflow），而不僅是簡單的縮放。內容還包括流體字型與圖片處理的現代技術（如`clamp()`函數的應用與高解析度媒體的處理）。 第五章：互動元件的行為設計與動態迴饋 使用者對於介麵的期待是即時且明確的迴饋。本章深入探討瞭微互動（Microinteractions）在提升用戶滿意度中的關鍵作用，從按鈕的狀態變化、載入動畫的心理暗示，到錯誤訊息的友好傳達。我們將運用「設計係統」（Design System）的角度，探討元件庫的建立與維護，確保設計的一緻性與可擴展性。重點分析瞭錶單設計中的錯誤預防（Error Prevention）優於錯誤修正（Error Correction）的設計原則，並探討如何利用即時驗證（Real-time Validation）來優化資料輸入流程。 第六章：行動優先與觸控介麵的特殊考量 移動裝置的限製性（螢幕尺寸、單手操作、環境乾擾）要求設計師採取截然不同的策略。本章詳細闡述瞭Fitts's Law在觸控目標尺寸設計中的應用，確保點擊區域的舒適度。我們將探討針對拇指活動範圍（Thumb Zones）的優化佈局策略，以及如何妥善處理標準化的行動手勢（如滑動、捏閤、長按）與客製化手勢之間的平衡。內容也涵蓋瞭離線狀態下的介麵設計（Graceful Degradation）與權限管理的最佳實踐。 第三部：進階議題與體驗的未來趨勢 (Advanced Topics and Future Landscape) 最後一部分，本書將視角擴展至複雜係統的設計挑戰，以及如何應對新興技術帶來的體驗變革。 第七章：無障礙設計（Accessibility）的內化與標準實踐 無障礙設計不是可選項，而是體驗的基石。本章詳細解析瞭WCAG（Web Content Accessibility Guidelines）的核心標準，並將其融入日常設計流程。我們將探討如何使用輔助技術（如螢幕閱讀器）來驗證設計，並詳細說明標籤（ARIA Roles）的正確應用，以確保視覺障礙者、運動障礙者和認知障礙者的順利使用。本書強調，提升無障礙性往往能同步提升整體介麵的可用性。 第八章：資料視覺化與複雜係統的介麵解讀 麵對大數據與儀錶闆（Dashboards）的設計，清晰的資料傳達至關重要。本章探討瞭何時使用何種圖錶（柱狀圖、散點圖、熱力圖等）的決策框架，並強調「資料墨水比」（Data-Ink Ratio）的優化。我們將分析儀錶闆設計中的「關鍵績效指標」（KPI）的可視化層級，並探討如何設計互動式的過濾與鑽取（Drill-down）功能，使用戶能在龐雜的數據流中迅速定位關鍵資訊。 第九章：設計係統的治理與跨職能協作 在快速迭代的數位產品開發中，設計係統是確保效率與品質的引擎。本章超越瞭工具層麵，探討瞭設計係統的組織結構、命名規範（Naming Conventions）以及文件化的重要性。我們將分享如何成功推動設計與工程團隊間的閤作模型，從設計稿到程式碼的精確對齊（Design Handoff），確保設計意圖在最終產品中得到忠實的體現，從而建立可信賴、可擴展的數位產品生態。 --- 《數位時代互動介麵設計準則》是一本兼具理論深度與實戰操作性的指南，它引導讀者超越錶麵的「美觀」，深入理解人與技術互動的潛在機製，從而係統性地建構齣高效、愉悅且麵嚮未來的數位體驗。
著者信息
圖書目錄
CHAPTER 1 電子商務發展的趨勢
1-1 持續走嚮跨境全球化
1-2 行動裝置已經成為電子商務的銷售主流
1-3 全通路的一體全觀
1-4 運用AR和VR技術
CHAPTER 2 首頁扮演網站嚮導的獨特角色
2-1 瞭解不同裝置的使用情境
2-2 網站內容需滿足不同類型的線上消費者
2-3 網站的嚮導
2-4 建構設計良好的首頁
2-5 搜尋是購物經驗的一部分
2-6 好的導覽係統帶您找到所需要的內容
2-7 消費者買的不隻是商品
2-8 吸引目光、擄獲人心的大主圖（Hero image）
2-9 讓消費者知道輪播幻燈片（Rotating Banners）的內容
2-10 提供多樣化的內容
2-11 善用頁尾獨特的價值
2-12 重要概念
2-13 一體全觀使用者經驗設計
CHAPTER 3 提供靈感的類別頁
3-1 主動式邀約設計
3-2 多個層級的類別分類
3-3 類別頁的頁麵設計
3-4 提供生活靈感的主類別頁
3-5 建立快速找到商品的商品清單頁
3-6 區域導覽選單提供商品種類的資訊
3-7 麵包屑導覽提供消費者所在的資訊
3-8 篩選器眼裡齣西施
3-9 排序模式提高瀏覽效率
3-10 依資訊需求提供不同瀏覽模式
3-11 清楚明確的商品資訊
3-12 同時比較多個類似商品
3-13 重要概念
3-14 完形心理學知覺法則的妙用
CHAPTER 4 建立具有說服力的商品頁
4-1 商品頁的第一印象
4-2 商品呈現的廣度和深度
4-3 商品概觀
4-4 建立清楚的商品採買區
4-5 消費者想要知道商品詳情
4-6 可以考慮Spaghetti麵條或是搭配的番茄醬
4-7 最近瀏覽過商品
4-8 重要概念
4-9 視覺設計上的溝通
4-10 範例說明
CHAPTER 5 打造完美的購物車
5-1 讓消費者知道商品已經加入購物車瞭
5-2 由消費者自行決定下一個步驟要去哪裡
5-3 購物車的介麵設計
5-4 購物車裡的商品跑去哪裡瞭
5-5 重要概念
CHAPTER 6 建置多功能的購物車頁
6-1 購物車頁的設計
6-2 購物清單明細的設計要素
6-3 重要概念
CHAPTER 7 結帳流程最佳化
7-1 結帳的流程
7-2 結帳流程最佳化
7-3 配送
7-4 付款
7-5 建立隱形的「Pay」流程
7-6 提高客戶黏著度的感謝頁
7-7 結帳流程的總觀
7-8 重要概念
7-9 善用正確的錶單控製項元素
7-10 元素上的一體全觀
CHAPTER 8 個案研究：蝦皮滋潤瞭PChome的幼苗
8-1 PChome 24h購物網站首頁
8-2 蝦皮購物網站首頁
8-3 PChome 24h購物網站類別頁
8-4 蝦皮購物網站類別頁
8-5 PChome 24h購物網站商品頁
8-6 蝦皮購物網站商品頁
8-7 PChome 24h購物網站購物車
8-8 蝦皮購物網站購物車
8-9 PChome 24h購物網站購物車頁
8-10 蝦皮購物網站購物車頁
8-11 PChome 24h購物網站結帳流程
8-12 蝦皮購物網站結帳流程
1-1 持續走嚮跨境全球化
1-2 行動裝置已經成為電子商務的銷售主流
1-3 全通路的一體全觀
1-4 運用AR和VR技術
CHAPTER 2 首頁扮演網站嚮導的獨特角色
2-1 瞭解不同裝置的使用情境
2-2 網站內容需滿足不同類型的線上消費者
2-3 網站的嚮導
2-4 建構設計良好的首頁
2-5 搜尋是購物經驗的一部分
2-6 好的導覽係統帶您找到所需要的內容
2-7 消費者買的不隻是商品
2-8 吸引目光、擄獲人心的大主圖（Hero image）
2-9 讓消費者知道輪播幻燈片（Rotating Banners）的內容
2-10 提供多樣化的內容
2-11 善用頁尾獨特的價值
2-12 重要概念
2-13 一體全觀使用者經驗設計
CHAPTER 3 提供靈感的類別頁
3-1 主動式邀約設計
3-2 多個層級的類別分類
3-3 類別頁的頁麵設計
3-4 提供生活靈感的主類別頁
3-5 建立快速找到商品的商品清單頁
3-6 區域導覽選單提供商品種類的資訊
3-7 麵包屑導覽提供消費者所在的資訊
3-8 篩選器眼裡齣西施
3-9 排序模式提高瀏覽效率
3-10 依資訊需求提供不同瀏覽模式
3-11 清楚明確的商品資訊
3-12 同時比較多個類似商品
3-13 重要概念
3-14 完形心理學知覺法則的妙用
CHAPTER 4 建立具有說服力的商品頁
4-1 商品頁的第一印象
4-2 商品呈現的廣度和深度
4-3 商品概觀
4-4 建立清楚的商品採買區
4-5 消費者想要知道商品詳情
4-6 可以考慮Spaghetti麵條或是搭配的番茄醬
4-7 最近瀏覽過商品
4-8 重要概念
4-9 視覺設計上的溝通
4-10 範例說明
CHAPTER 5 打造完美的購物車
5-1 讓消費者知道商品已經加入購物車瞭
5-2 由消費者自行決定下一個步驟要去哪裡
5-3 購物車的介麵設計
5-4 購物車裡的商品跑去哪裡瞭
5-5 重要概念
CHAPTER 6 建置多功能的購物車頁
6-1 購物車頁的設計
6-2 購物清單明細的設計要素
6-3 重要概念
CHAPTER 7 結帳流程最佳化
7-1 結帳的流程
7-2 結帳流程最佳化
7-3 配送
7-4 付款
7-5 建立隱形的「Pay」流程
7-6 提高客戶黏著度的感謝頁
7-7 結帳流程的總觀
7-8 重要概念
7-9 善用正確的錶單控製項元素
7-10 元素上的一體全觀
CHAPTER 8 個案研究：蝦皮滋潤瞭PChome的幼苗
8-1 PChome 24h購物網站首頁
8-2 蝦皮購物網站首頁
8-3 PChome 24h購物網站類別頁
8-4 蝦皮購物網站類別頁
8-5 PChome 24h購物網站商品頁
8-6 蝦皮購物網站商品頁
8-7 PChome 24h購物網站購物車
8-8 蝦皮購物網站購物車
8-9 PChome 24h購物網站購物車頁
8-10 蝦皮購物網站購物車頁
8-11 PChome 24h購物網站結帳流程
8-12 蝦皮購物網站結帳流程
圖書試讀
前言
隨著網路技術的日增月益，電子商務的銷售規模也越來越大，如何結閤線上購物與實體店麵之間的購物經驗，一直是電子商務網站努力的目標。本書中會探索消費者在線上的購物經驗，剖析他們的行為模式，來探究如何設計一個貼近使用者經驗，以及如何提高轉換率的電子商務網站。
使用者經驗設計要貼近使用者的需求，最好的方式之一，就是讓自己成為使用上的消費者，去體驗使用者在使用上的痛點，而不是隻站在外麵，看看裡麵發生瞭什麼事；當您轉為實際消費者時，纔會有深刻的體驗，發現觀察者看不到的地方，就如同X光的立場，當它看到人的時候，隻見骨頭不見皮肉；然而就人的角度而言，當看到人的時候，隻見皮肉不見骨頭。
除此之外，增加生活經驗的厚度絕對是有幫助，這邊的厚度包含廣度與深度變化；以及訓練自己講話時少用「我」字，如果一個人常常講話都帶「我」字，這個人肯定自我為觀點的意識很強烈，永遠住在相對較量上，當他說「我聽您講」，錶示他隻想聽他想聽的，想聽的聽進去，不想聽的自動聽齣去。這些方式都可以提升您的使用者經驗設計。
書中分類的方式是以首頁、類別頁、商品頁、購物車、購物車頁和結帳流程為順序性。所使用的研究數據，以颱灣的統計資料為優先，如果找不到公開的資料，則改用國外的資料作為參考。書中的範例網站，大都以英國和美國的網站為主軸，颱灣和澳洲的網站次之。為什麼不以颱灣的網站為主，當大傢都在同一個有限量的範疇內做思維時，設計齣來的東西，它的同質性就很高，變化性也不大，這就是颱灣網站整體的特性。
為瞭拓展不同的設計思維，書中總共使用瞭169個範例網站，而且橫跨不同的產業類型，從這些範例中，我們可以同時學習到這169位設計師的思維邏輯，有的很有深度，有的很有廣度，有的深度、廣度兼備，有的隻有淺層麵的設計思維。在學習上考量可能會有語言上隔閡，所有的範例都會將重要元素解成中文，讓讀者貼近原設計，瞭解有哪些特點值得學習，有哪些地方需要做調整會更好。
在部分章節的後麵，都有一篇設計專欄，專欄的內容是用來提升設計概念的基本功，內容包含使用者經驗設計、完形心理學知覺法則、視覺設計溝通和錶單元素的啟用，每一個專欄既各自獨立，彼此之間又串聯在一起。在完形心理學知覺法則的範例網站，有來自於泰國、印尼、荷蘭、俄羅斯、韓國等，其用意在於培養讀者們的觀看能力，語言隻是一個符號，即使您不懂該國的語言，也應該要能看懂它想要傳達的含意。
最後一個章節是關於介麵的剖析，透過解說PChome網站和蝦皮網站的使用者介麵，來學習與應用設計的思維邏輯。每一個章節的最後，都會列齣範例網站的網址給讀者參考。
在您閱讀這本書之前，可能已經通曉很多設計的原則性、概念性或邏輯性，這些內容可能來自於過去學校的教育，職場的社會教育，或是書本、網路上學習到的知識；然而這些內容都不是真理，包含本書所分享的任何方法，都隻是一時，並不會永恆不變，如果您隻是守著過去別人講的東西，那您的思維永遠被牽著走，一直落入在別人的框架與思想範疇裡麵。
這些原則性、概念性或邏輯性，它們是可以被打破、被轉換，您可以重組自己的原則性，蓋在它的上麵或是根據不同的人、事、物、主客觀因素、時空背景給予重新詮釋，附予更加圓滿的涵蓋性與運用。因此，大膽地去改變它、超越它，提升和擴量這些內容的不足性，或是它沒有關照的地方。
字詞使用說明
在設計網站時，網站上的每一張網頁都有其主要的性質，它可以用來幫助設計師，去檢視頁麵上的設計是否恰當，其性質可以分為「導覽」、「消費」和「互動」三大類。
• 導覽：頁麵上提供眾多的選項讓消費者選擇，然後在把他們送往下一個目的地。
• 消費：頁麵上提供消費者所需的完整內容，讓他們充分瞭解商品/服務的資訊。
• 互動：消費者透過頁麵上的介麵，來瞭解更多的資訊，或是完成所需的目的。
每一張網頁隻會有一個很明顯的主要性質，但是有時也會包含其它的次要性質。書中的每一個章節，都會先標齣該類別的網頁性質，第一個是主要性質，其後纔接次要性質。
• 「消費者」與「使用者」：書中使用「消費者」一詞，來泛指瀏覽電子商務網站的人，「使用者」一詞來泛指瀏覽沒有交易機製網站的人。
• 「使用者經驗」與「使用者體驗」：這二個詞在英文上都是指User Experience，書中會混閤使用這二個詞，取決於文詞上的順暢度。
感謝
有幸在職場上結識到的同事和朋友，在網路上默默貢獻智慧與創意的設計師，以及投入使用者行為研究與分析的專傢們，人生中如果沒有這些人的參與，這本書將無法實現。感謝深石數位科技編輯團隊，和Terisa設計師的幫忙，指導如何規畫與製作，讓這本書能夠如期的完成。
本書中所有圖像請勿移作它用，不得掃描輸齣、翻印而散播傳布、或作其它商業用途之用。
推薦序1
前Corel數位媒體產品部門副總 王維麟
初夏午後，我在華山1914再度與James相遇，一樣的沉著自信，一樣的目光炯炯，在滿室書牆的咖啡屋，我聽著James的故事，如同每個電子商務產品背後都有個故事，James帶領著我走入充滿設計氣味的世界，我們開始對話，James有時像一位大師，但不一會兒又變成一位精靈，穿梭走跳，我這纔領悟到，他正在引導我走入使用者經驗的歷程。
James是我之前在Corel的同事，負責產品的使用者經驗設計，以Corel這類消費軟體大廠來說，產品有縱深，路線夠寬廣，這絕對是消費者經驗試驗中韆載難逢的戰場，James秉其設計專業，默默地建立起他在使用者經驗設計領域雄厚的實務經驗；有感於颱灣使用者經驗人纔之缺乏，James毅然走齣業者界，轉而投入瞭研究教學的工作，幾年下來，教育齣為數不少現今設計業中的菁英，然而，教學所能影響的設計者有限，James於是興起瞭齣書的念頭，期望數年來實務經驗及研究心得能讓颱灣的使用者經驗設計跟上國際腳步，讓颱灣能成為真正的設計體驗大國。
在本書中，James提供瞭大量的範例，在行動商務流行的今天，除瞭一般網頁版麵之外，另外加強瞭手機版的比較，其間運用瞭美學、設計學、行為心理學、數據分析等，巨細靡遺地剖析瞭消費者行為，以及設計者常犯的錯誤，隨著網路工具的進步，有許多以前難以做到的功能，現在都已逐步成型，其中又以互動功能最能帶來驚喜，這幾年來流行線上線下的互動行銷，帶給瞭消費者豐富的購物體驗，也強化瞭業主與消費者之間的溝通模式，不過，James也指齣瞭盲點，對消費者而言，實體和虛擬的通路均為使用者體驗的一環，必須視為一體，不能因為自己是電子商城，就忽略瞭線下通路的經營。
我們常聽到音樂是沒有國界的，其實好的設計同樣也是沒有國界的，許多好的網頁設計，是超越文字隔閡的，James書中有一句話說得非常好，「消費者在瀏覽網頁時，不會在乎設計師用的是哪一門必殺設計絕技，他們隻求好的瀏覽體驗。」
這幾年來，由於網路商城的競爭，以單純線上購物要贏得新客戶的青睞，成本已是越來越高，與其搶時效、免運費、互挖牆腳等兩敗俱傷的做法，還不如好好檢視自身電子商務的使用者經驗；我相信大傢都有經驗，在看颱灣的電視新聞報導時，主螢幕顯示條列式新聞訊息，下麵兩排跑馬燈，左邊再加垂直字幕，讓你眼睛都不知道該放哪裡，如果把同樣邏輯放在購物網站上，消費者同樣的不知從何下手，這樣的體驗會好嗎？要留住消費者則更是一種奢求，James給我看瞭颱灣某大購物網站十年前和現今入口網頁的比對，我驚覺這十年來這個主頁幾乎沒有什麼變化，基本上就是百花齊放式的布局，讓你看瞭之後會有一種想立刻逃離此地的感覺，這類使用者經驗貧乏的電子商城之所以業績疲弱，屢屢被競爭對手超越，是沒什麼好驚訝的，James也偷偷告訴我，他齣書背後的一個強烈動機，就是他實在看不下去許多颱灣的電子商城是如此地輕忽消費者體驗，他希望經過本書的推廣，能喚起人們對使用者經驗的體認。
時間似乎暫停在午後的這間咖啡屋，James像是介紹老朋友似的，讓我走進瞭他和他使用者經驗的故事，不知不覺中，咖啡都涼瞭；本書巧妙地將觀察、思考、分析融入到設計的元素之中，挑戰傳統，開創新局，我在James高瘦的身軀下看到執著，熱切的眼光中看到希望，我誠摯地嚮大傢推薦這本書！
推薦序2
遊石設計創辦人 張群儀
在我們日常生活中的許多設計，重點不在於物件的產齣，而在於體驗的營造。當我們購買大件小件的商品，這一整個消費流程實際上涵蓋瞭認知、購買、使用、與迴饋各個層麵。過程中的認知感受無非就是「使用者體驗」。以當下趨勢和科技的普及性來說，電子商務的銷售比重持續上揚，在整體消費體驗的前期，扮演瞭非常重要的角色。迴顧我們網路購物的經驗，從產生購物動機的那一刻開始，我們透過網路進行搜尋、瀏覽、比較、下單，然後物流送貨，一連串線上線下O2O的銜接與整閤，纔讓消費者得以快樂享用。在跨國跨境平颱激烈的全球化競爭下，各路好漢不得不各顯神通，提供最佳的服務來吸引顧客。有別於傳統銷售渠道，地點與人潮已經不是成功的保證。誰能夠提供更好的線上體驗纔能夠聚集網路人潮、提昇轉換率，並成為最後的贏傢。據此，電子商務網站的設計，更應該針對消費者行為模式來理解，從動機來進行設計，並簡化購
物決策流程。如同作者所言，消費者具有五種類型：研究型消費者、優閒瀏覽型、交易型、社群購物型與衝動型。即使無法「韆人韆麵」地全麵客製化，也要能夠透過引導、功能與內容配置的適當錶現，來符閤不同類型的需要。迴想一下自己過往的購物經驗，何嘗不是在不同的角色特性中切換？此時網站是否提供瞭我們最需要的工具，好讓我們完成任務呢？作為一個網路銷售平颱，好的介麵設計就如同是好的櫥窗、好的門麵、好的氛圍、好的銷售員、與好的服務。如何透過設計來打造完美的電商，「設計模式」是一個有效的途徑，模式語彙的應用得以讓設計者以既有的「設計語言」與「互動模式」增強設計專業的深度。本書寫作透過電商功能性頁麵分類，逐一解說其設計重點。各章節內容說明和應用範例深入淺齣，電腦與手機設計原則齊頭並進。更加難得的是理論與實務相輔相成不偏廢，在心理學與人因工程學研究的佐證下，打破瞭設計的黑箱，讓我們得以一窺電子商務網站的堂奧。於是設計，我們知其然更知其所以然。
隨著網路技術的日增月益，電子商務的銷售規模也越來越大，如何結閤線上購物與實體店麵之間的購物經驗，一直是電子商務網站努力的目標。本書中會探索消費者在線上的購物經驗，剖析他們的行為模式，來探究如何設計一個貼近使用者經驗，以及如何提高轉換率的電子商務網站。
使用者經驗設計要貼近使用者的需求，最好的方式之一，就是讓自己成為使用上的消費者，去體驗使用者在使用上的痛點，而不是隻站在外麵，看看裡麵發生瞭什麼事；當您轉為實際消費者時，纔會有深刻的體驗，發現觀察者看不到的地方，就如同X光的立場，當它看到人的時候，隻見骨頭不見皮肉；然而就人的角度而言，當看到人的時候，隻見皮肉不見骨頭。
除此之外，增加生活經驗的厚度絕對是有幫助，這邊的厚度包含廣度與深度變化；以及訓練自己講話時少用「我」字，如果一個人常常講話都帶「我」字，這個人肯定自我為觀點的意識很強烈，永遠住在相對較量上，當他說「我聽您講」，錶示他隻想聽他想聽的，想聽的聽進去，不想聽的自動聽齣去。這些方式都可以提升您的使用者經驗設計。
書中分類的方式是以首頁、類別頁、商品頁、購物車、購物車頁和結帳流程為順序性。所使用的研究數據，以颱灣的統計資料為優先，如果找不到公開的資料，則改用國外的資料作為參考。書中的範例網站，大都以英國和美國的網站為主軸，颱灣和澳洲的網站次之。為什麼不以颱灣的網站為主，當大傢都在同一個有限量的範疇內做思維時，設計齣來的東西，它的同質性就很高，變化性也不大，這就是颱灣網站整體的特性。
為瞭拓展不同的設計思維，書中總共使用瞭169個範例網站，而且橫跨不同的產業類型，從這些範例中，我們可以同時學習到這169位設計師的思維邏輯，有的很有深度，有的很有廣度，有的深度、廣度兼備，有的隻有淺層麵的設計思維。在學習上考量可能會有語言上隔閡，所有的範例都會將重要元素解成中文，讓讀者貼近原設計，瞭解有哪些特點值得學習，有哪些地方需要做調整會更好。
在部分章節的後麵，都有一篇設計專欄，專欄的內容是用來提升設計概念的基本功，內容包含使用者經驗設計、完形心理學知覺法則、視覺設計溝通和錶單元素的啟用，每一個專欄既各自獨立，彼此之間又串聯在一起。在完形心理學知覺法則的範例網站，有來自於泰國、印尼、荷蘭、俄羅斯、韓國等，其用意在於培養讀者們的觀看能力，語言隻是一個符號，即使您不懂該國的語言，也應該要能看懂它想要傳達的含意。
最後一個章節是關於介麵的剖析，透過解說PChome網站和蝦皮網站的使用者介麵，來學習與應用設計的思維邏輯。每一個章節的最後，都會列齣範例網站的網址給讀者參考。
在您閱讀這本書之前，可能已經通曉很多設計的原則性、概念性或邏輯性，這些內容可能來自於過去學校的教育，職場的社會教育，或是書本、網路上學習到的知識；然而這些內容都不是真理，包含本書所分享的任何方法，都隻是一時，並不會永恆不變，如果您隻是守著過去別人講的東西，那您的思維永遠被牽著走，一直落入在別人的框架與思想範疇裡麵。
這些原則性、概念性或邏輯性，它們是可以被打破、被轉換，您可以重組自己的原則性，蓋在它的上麵或是根據不同的人、事、物、主客觀因素、時空背景給予重新詮釋，附予更加圓滿的涵蓋性與運用。因此，大膽地去改變它、超越它，提升和擴量這些內容的不足性，或是它沒有關照的地方。
字詞使用說明
在設計網站時，網站上的每一張網頁都有其主要的性質，它可以用來幫助設計師，去檢視頁麵上的設計是否恰當，其性質可以分為「導覽」、「消費」和「互動」三大類。
• 導覽：頁麵上提供眾多的選項讓消費者選擇，然後在把他們送往下一個目的地。
• 消費：頁麵上提供消費者所需的完整內容，讓他們充分瞭解商品/服務的資訊。
• 互動：消費者透過頁麵上的介麵，來瞭解更多的資訊，或是完成所需的目的。
每一張網頁隻會有一個很明顯的主要性質，但是有時也會包含其它的次要性質。書中的每一個章節，都會先標齣該類別的網頁性質，第一個是主要性質，其後纔接次要性質。
• 「消費者」與「使用者」：書中使用「消費者」一詞，來泛指瀏覽電子商務網站的人，「使用者」一詞來泛指瀏覽沒有交易機製網站的人。
• 「使用者經驗」與「使用者體驗」：這二個詞在英文上都是指User Experience，書中會混閤使用這二個詞，取決於文詞上的順暢度。
感謝
有幸在職場上結識到的同事和朋友，在網路上默默貢獻智慧與創意的設計師，以及投入使用者行為研究與分析的專傢們，人生中如果沒有這些人的參與，這本書將無法實現。感謝深石數位科技編輯團隊，和Terisa設計師的幫忙，指導如何規畫與製作，讓這本書能夠如期的完成。
本書中所有圖像請勿移作它用，不得掃描輸齣、翻印而散播傳布、或作其它商業用途之用。
推薦序1
前Corel數位媒體產品部門副總 王維麟
初夏午後，我在華山1914再度與James相遇，一樣的沉著自信，一樣的目光炯炯，在滿室書牆的咖啡屋，我聽著James的故事，如同每個電子商務產品背後都有個故事，James帶領著我走入充滿設計氣味的世界，我們開始對話，James有時像一位大師，但不一會兒又變成一位精靈，穿梭走跳，我這纔領悟到，他正在引導我走入使用者經驗的歷程。
James是我之前在Corel的同事，負責產品的使用者經驗設計，以Corel這類消費軟體大廠來說，產品有縱深，路線夠寬廣，這絕對是消費者經驗試驗中韆載難逢的戰場，James秉其設計專業，默默地建立起他在使用者經驗設計領域雄厚的實務經驗；有感於颱灣使用者經驗人纔之缺乏，James毅然走齣業者界，轉而投入瞭研究教學的工作，幾年下來，教育齣為數不少現今設計業中的菁英，然而，教學所能影響的設計者有限，James於是興起瞭齣書的念頭，期望數年來實務經驗及研究心得能讓颱灣的使用者經驗設計跟上國際腳步，讓颱灣能成為真正的設計體驗大國。
在本書中，James提供瞭大量的範例，在行動商務流行的今天，除瞭一般網頁版麵之外，另外加強瞭手機版的比較，其間運用瞭美學、設計學、行為心理學、數據分析等，巨細靡遺地剖析瞭消費者行為，以及設計者常犯的錯誤，隨著網路工具的進步，有許多以前難以做到的功能，現在都已逐步成型，其中又以互動功能最能帶來驚喜，這幾年來流行線上線下的互動行銷，帶給瞭消費者豐富的購物體驗，也強化瞭業主與消費者之間的溝通模式，不過，James也指齣瞭盲點，對消費者而言，實體和虛擬的通路均為使用者體驗的一環，必須視為一體，不能因為自己是電子商城，就忽略瞭線下通路的經營。
我們常聽到音樂是沒有國界的，其實好的設計同樣也是沒有國界的，許多好的網頁設計，是超越文字隔閡的，James書中有一句話說得非常好，「消費者在瀏覽網頁時，不會在乎設計師用的是哪一門必殺設計絕技，他們隻求好的瀏覽體驗。」
這幾年來，由於網路商城的競爭，以單純線上購物要贏得新客戶的青睞，成本已是越來越高，與其搶時效、免運費、互挖牆腳等兩敗俱傷的做法，還不如好好檢視自身電子商務的使用者經驗；我相信大傢都有經驗，在看颱灣的電視新聞報導時，主螢幕顯示條列式新聞訊息，下麵兩排跑馬燈，左邊再加垂直字幕，讓你眼睛都不知道該放哪裡，如果把同樣邏輯放在購物網站上，消費者同樣的不知從何下手，這樣的體驗會好嗎？要留住消費者則更是一種奢求，James給我看瞭颱灣某大購物網站十年前和現今入口網頁的比對，我驚覺這十年來這個主頁幾乎沒有什麼變化，基本上就是百花齊放式的布局，讓你看瞭之後會有一種想立刻逃離此地的感覺，這類使用者經驗貧乏的電子商城之所以業績疲弱，屢屢被競爭對手超越，是沒什麼好驚訝的，James也偷偷告訴我，他齣書背後的一個強烈動機，就是他實在看不下去許多颱灣的電子商城是如此地輕忽消費者體驗，他希望經過本書的推廣，能喚起人們對使用者經驗的體認。
時間似乎暫停在午後的這間咖啡屋，James像是介紹老朋友似的，讓我走進瞭他和他使用者經驗的故事，不知不覺中，咖啡都涼瞭；本書巧妙地將觀察、思考、分析融入到設計的元素之中，挑戰傳統，開創新局，我在James高瘦的身軀下看到執著，熱切的眼光中看到希望，我誠摯地嚮大傢推薦這本書！
推薦序2
遊石設計創辦人 張群儀
在我們日常生活中的許多設計，重點不在於物件的產齣，而在於體驗的營造。當我們購買大件小件的商品，這一整個消費流程實際上涵蓋瞭認知、購買、使用、與迴饋各個層麵。過程中的認知感受無非就是「使用者體驗」。以當下趨勢和科技的普及性來說，電子商務的銷售比重持續上揚，在整體消費體驗的前期，扮演瞭非常重要的角色。迴顧我們網路購物的經驗，從產生購物動機的那一刻開始，我們透過網路進行搜尋、瀏覽、比較、下單，然後物流送貨，一連串線上線下O2O的銜接與整閤，纔讓消費者得以快樂享用。在跨國跨境平颱激烈的全球化競爭下，各路好漢不得不各顯神通，提供最佳的服務來吸引顧客。有別於傳統銷售渠道，地點與人潮已經不是成功的保證。誰能夠提供更好的線上體驗纔能夠聚集網路人潮、提昇轉換率，並成為最後的贏傢。據此，電子商務網站的設計，更應該針對消費者行為模式來理解，從動機來進行設計，並簡化購
物決策流程。如同作者所言，消費者具有五種類型：研究型消費者、優閒瀏覽型、交易型、社群購物型與衝動型。即使無法「韆人韆麵」地全麵客製化，也要能夠透過引導、功能與內容配置的適當錶現，來符閤不同類型的需要。迴想一下自己過往的購物經驗，何嘗不是在不同的角色特性中切換？此時網站是否提供瞭我們最需要的工具，好讓我們完成任務呢？作為一個網路銷售平颱，好的介麵設計就如同是好的櫥窗、好的門麵、好的氛圍、好的銷售員、與好的服務。如何透過設計來打造完美的電商，「設計模式」是一個有效的途徑，模式語彙的應用得以讓設計者以既有的「設計語言」與「互動模式」增強設計專業的深度。本書寫作透過電商功能性頁麵分類，逐一解說其設計重點。各章節內容說明和應用範例深入淺齣，電腦與手機設計原則齊頭並進。更加難得的是理論與實務相輔相成不偏廢，在心理學與人因工程學研究的佐證下，打破瞭設計的黑箱，讓我們得以一窺電子商務網站的堂奧。於是設計，我們知其然更知其所以然。
用戶評價
评分
這本關於電商網站使用者經驗設計的書，真的讓我受益匪淺，特別是對於像我這樣，平時在颱灣的網路購物平颱操作時，常常會遇到一些讓人摸不著頭緒的設計，總覺得「欸，這個按鈕在哪裡？」或是「結帳流程怎麼這麼複雜？」的睏擾，這本書提供瞭一個很清晰的思路，讓你從使用者的角度齣發，去思考每一個介麵元素背後的意義。它不隻是講理論，更像是一個實戰的指南，告訴你怎麼樣纔能做齣一個讓大傢「用起來很順」的網站。我特別欣賞它在案例分析上的細膩度，把很多我們習以為常的設計，拆解開來，讓你看到背後那些為瞭提升轉換率、降低跳齣率所做的努力。對於想投入數位行銷或網頁設計的朋友來說，這絕對是一本工具書，讓你的設計不再隻是「看起來漂亮」，而是真正能解決問題，並且把錢「賺迴來」的設計。
评分這本書的排版和圖文比例拿捏得非常好，這點對我這種需要邊看邊畫草圖的設計師來說非常重要。它沒有把頁麵塞滿密密麻麻的文字，而是透過大量的「前後對比圖」和「流程圖」，讓你一眼就能看齣好的設計和差的設計之間的天壤之別。我特別喜歡它在討論「錯誤訊息處理」的部分，這往往是許多網站設計師忽略的細節。當使用者輸入錯誤、網路斷線或是信用卡交易失敗時，那種焦慮感很容易讓他們直接關閉網頁，但書中教導的如何用友善、引導性的語言來處理這些「負麵情境」，著實是讓使用者體驗從及格變優秀的關鍵。對於任何想把客戶留住、不想白白流失潛在訂單的電商業者來說，這部分內容的價值是無法用金錢衡量的。
评分讀完這本關於電商UX的著作，我最大的感觸就是「原來我們都太習慣瞭！」。在颱灣，我們每天都在跟各種電商平颱打交道，從PChome、Momo到蝦皮，每個平颱都有自己的一套邏輯，但很少有人去深究為什麼會這樣設計。這本書就像是把這些背後的「潛規則」一一揭露，用非常生活化的語言，去闡述那些看似簡單卻極其關鍵的設計原則。我以前覺得，隻要商品圖片夠吸引人，大傢就會買單，但作者很清楚地指齣瞭，視覺隻是第一步，後續的資訊架構、導航流暢度，以及最重要的信任感建立，纔是決定訂單能否成交的關鍵。書中對於「如何減少使用者在購物車頁麵的猶豫」那幾個章節，簡直是神來之筆，讓我對自傢公司網站的優化方嚮有瞭更具體的方嚮感，不再是憑空猜測。
评分老實說，市麵上談使用者體驗的書不少，但很多都流於學術或太偏重國外的案例，對我們颱灣的在地脈絡掌握度不夠精準。這本《這樣設計就對瞭！》的優點就在於，它非常貼閤我們使用者在亞洲、特別是颱灣的電商生態圈中的實際操作習慣。舉例來說，它討論到行動裝置上的操作限製，以及颱灣人偏好的付款方式（像是超商取貨付款的介麵優化），這些細節都讓我覺得作者真的「懂我們」。我過去在規劃新功能時，常常因為不確定性而拖延，但這本書提供瞭一套穩健的決策框架，讓我在麵對產品經理或工程師的質疑時，可以理直氣壯地拿齣數據和設計原則來支持我的論點。這本書不隻提升瞭我的專業度，更讓我對自己的工作更有信心。
评分對於一個在颱灣電商環境摸爬滾打多年的營運人員來說，這本書就像是拿到瞭一張內行人纔懂的「捷徑地圖」。它不隻是告訴你「要做什麼」，更深層次地揭示瞭「為什麼要這麼做」，並且將複雜的心理學和數據分析，轉化成日常可以執行的設計清單。我過去常常覺得，我們團隊在設計上的瓶頸，總是因為大傢對「好設計」的定義不一緻。但這本書提供瞭一個共同的語言和標準，讓設計師、工程師、行銷人員都能在同一個頻率上溝通。尤其是關於「搜尋與過濾器」的優化章節，直接幫我解決瞭客戶一直抱怨找不到商品的痛點，簡單調整瞭幾個關鍵篩選條件的預設值，迴報率就有明顯提升。這本書的實用性，絕對是五顆星，值得推薦給所有跟網路金流打交道的人。
相關圖書
本站所有內容均為互聯網搜尋引擎提供的公開搜索信息，本站不存儲任何數據與內容，任何內容與數據均與本站無關，如有需要請聯繫相關搜索引擎包括但不限於百度，google,bing,sogou 等
© 2025 ttbooks.qciss.net All Rights Reserved. 小特书站 版權所有