交互設計入門基礎：常見的設計模型全面解析

前沿：

本次的文章輸出主要有兩個目的：第一讓自己略顯浮躁的心沉淀下來；第二對于自己腦海中交互設計的「原則、定律、模型、法則、效應、注意事項等」進行一次整理和探索。

我對于交互設計師的概念更多的是來自于 UI 的理解，獨立的交互設計師必然不會是一名好的交互設計師。身邊也有很多朋友想從 UI 設計轉行交互設計師，其實我建議可以直接轉用戶體驗設計。

對于 UI 轉行，個人認為產品經理也是一個不錯的職業方向。見過很多產品都是純產品（非轉職），僅限于對于技術研發團隊有一定的技術了解。但是如果 UI 轉職產品，那么天然在競爭上就會有一定的優勢。

言歸正傳，入行以來從最初的外包積累項目到專注于做一款項目，項目中包含的產品運營、數據提升等。再到現在使用交互模型更加合理的去處理界面的設計，很開心一直在不斷的進步。

更多交互入門干貨：

什么是交互設計？如何解讀交互設計？

交互設計，又稱互動設計，英文 Interaction Design, 縮寫 IxD 或者 IaD，是定義、設計人造系統的行為的設計領域，側重在交互模式的設計。

人造物，即人工制成物品，例如，軟件、移動設備、人造環境、服務、可佩帶設備以及系統的組織結構。交互設計在于定義人造物的行為方式（the "interaction",即人工制品在特定場景下的反應方式）相關的界面。

交互設計師首先進行用戶研究相關領域，以及潛在用戶，設計人造物的行為，并從有用性，可用性和情感因素（usefulness, usability and emotional）等方面來評估設計質量。

交互設計中常用的設計模型

文中舉例僅為方便理解該模型

1. 福格行為模型

福格行為模型，以 BJ Fogg (斯坦福說服力科技實驗室主任) 命名。表明一個行為得以發生，行為者首先需要有進行此行 為的動機和操作此行為的能力。接著，如果他們有充足的動 機和能力來施行既定行為，他們就會在被誘導/觸發時進行。

福格行為模型可以表示為 B=MAT，即：B（Behavior）是行為，M（Motivation）是 動機，A（Ability）是能力，T（Triggers）是觸發。

圖表表示該行為原則

簡單舉例：當你在進入某 APP 時看到了 Mac 的宣傳廣告于是就點擊進去購買了新款的 Mac。

此處的動機就是你對于新款 Mac 的喜愛，能力就是有錢，而進入 App 看到的宣傳廣告則是對于你當下購買 Mac 的觸發。

實例說明（1）

當前標題《這事還沒完！房子開始反堿，全網喊話退錢，130 萬改造...》_____此處標題僅展示用戶所看到的標題部分

當前配圖：

提高點擊動機《130 萬改造的房屋，兩周后居然反堿。全網都在喊：退錢！退錢！...》提高用戶點擊動機（用戶好奇心/關注熱點等）

能力（點擊觀看用戶成本很低）

觸發（與動機類似去激發用戶的好奇心以及關注熱點的心理）

實例說明（2）百度網盤活動頁

1. 動機：文案吸引（限時優惠，抽獎贏 SVIP）——想要獲取利益
2. 觸發：產生點擊抽獎行為
3. 動機：抽獎完成后顯示文案突出本次抽獎產生的優惠信息——利益文案吸引
4. 動機：底部文案「僅此」做突出化處理——告知用戶（產生機會難得心理）
5. 動機：當點擊取消時進行提醒當獲取到 SVIP 時可以獲得的會員權益——功能吸引（實用性強調）
6. 能力：在用戶可承擔范圍內進行以上的操作，若不可承擔或者無意在此項目消費的用戶會通過「動機 1」篩選一部分
7. 觸發：產生消費行為

一款產品活動的需要提出到最終方案的形成，尤其是產品運營類方案。我么可以利用福格行為模型，在不激發用戶反感的前提下，去增加動機和觸發，推廣到有合適能力的用戶。

2. 雙鉆模型

雙鉆設計模型由英國設計協會提出，其核心是：發現正確的問題、發現正確的解決方案。雙鉆設計模型把設計過程分成 4 個階段：發現問題、定義問題、構思方案和交付方案。

細分擴展雙磚模型

雙鉆模型主要分為四個時期：

①發現階段—發散性對問題的洞察；

發現問題對產品現狀進行深入研究。包括了解用戶特征、產品當前狀況、用戶如何使用產品以及用戶對于產品的態度等。

②定義階段—收攏性的聚焦問題；

對產品進行實質性的評估，根據發現階段總結發現的問題，然后進行發散性的思考，總結問題歸納想法。

③發展階段—發散性的尋找可能方案；

當我么對于產品進行了問題的總結和歸納，并且發現了痛點問題后我么就可以根據問題產出解決方案，進行初步的設計。

④交付階段—收攏性的尋找解決方案

在發展階段中所歸納總結的所有解決方案，進行分析整理，選擇出一個或者多個最合適的。

實例說明（1）

文中舉例僅為方便理解該模型，本案例為個練（百度網盤會員服務模塊改版，此處僅展示部分頁面，后續會上傳完整改版思路和改版后頁面）

①案例介紹

百度網盤（原百度云）是百度推出的一項云存儲服務，已覆蓋主流 PC 和手機操作系統，包含 Web 版、Windows 版、Mac 版、Android 版、iPhone 版和 Windows Phone 版。

用戶將可以輕松將自己的文件上傳到網盤上，并可跨終端隨時隨地查看和分享。2016 年，百度網盤總用戶數突破 4 億。2016 年 10 月 11 日，百度云改名為百度網盤，此后會更加專注發展個人存儲、備份功能。

2021 年 5 月 18 日，百度網盤 TV 版正式上線。

發現階段

1. 已經是會員的用戶對于升級會員的點擊轉化率低
2. 網盤為工具類產品，社交屬性較低不需要使用很強烈的會員和非會員標識去區分
3. 用戶點擊我的頁面更多的是想查看自己的總儲存量和剩余儲存量
4. 我的頁面的活動（活動中心、分享賺錢、積分領取）參與度低于預期

定義階段

1. 調動已是會員的用戶進行升級（可組合套用福格模型）
2. 降低非會員的感知度，把會員和非會員差異化拉低
3. 增加查看儲存量的空間占比
4. 重設計入口，變動頁面布局占比

發展階段（提出多種方案）

進行設計方案探索，多種不同方案去解決定義階段給出的解決方案。

交付階段

未開通會員基礎對比

已開通會員基礎對比

會員已過期基礎對比

添加動效設計

解決問題

1. 通過加大會員版快設計，提示升級會員、開通會員、續費會員點擊轉化率
2. 將空間管理層級提高，剛點擊進入我的頁面后空間管理處增加動效設計。使剩余儲存/總儲存/已占用儲存更加可視化。
3. 積分領取、活動中心、分享賺錢等運營功能位于第一屏頁面中屏，Icon 進行 3D 化設計，解決參與度低于預期
4. 未開通、已過期、開通會員后頁面感知感和差異化降低。

以上分析和解決方案僅為展示和理解模型，不做為實際應用情況下的解決方案和最優解。

3. 漏斗模型

全稱為"搜索營銷效果轉化漏斗"，漏斗的五層對應了企業搜索營銷的各個環節，反映了從展現、點擊、訪問、咨詢，直到生成訂單過程中的客戶數量及流失。從最大的展現量到最小的訂單量，這個一層層縮小的過程表示不斷有客戶因為各種原因離開，對企業失去興趣或放棄購買

漏斗模型的概念最早由 St. Elmo Lewis （美國知名廣告人）在 1898 年提出的，叫做消費者購買漏斗（the purchase funnel），也叫消費者漏斗（customer funnel）、營銷漏斗（sales/marketing funnel）等，是一種品牌廣告的營銷策略，準確的概括出了顧客關于產品或者服務的流程。

Lewis 提出的這個策略，后來被稱為 AIDA 模型，即意識 – 興趣 – 欲望 – 行動。在接下來的100年里，隨著漏斗模型的推廣，為了適應新的媒體平臺，以及用戶行為路徑的改變，它經過多次的修改和擴展，產生了各種衍生版本，比如 AIDMA、AISDALSLove、AISAS、AARRR等。

①AIDMA 模型

AIDMA 模型是在 AIDA 模型（Attention、Interest、Desire、Action）的基礎上，增加了 Memory，形成的注意 – 興趣 – 欲望 – 記憶 – 行動（購買）的模型。

AIDMA 模型主要適用于品牌營銷方面，從我記事起一直對于“恰恰瓜子”都一直記憶猶新總感覺好像瓜子除了恰恰之外其余也沒有什么品牌，恰恰瓜子就是利用 AIDMA 模型一遍一遍的進行記憶點的回流。

當然現在很多互聯網產品也開始把自己作為品牌去打造，比如抖音上的得物廣告，博主還沒有開始打廣告我就可以猜到是“得物”了，都是從引起用戶的興趣，強化品牌記憶，從而吸引潛在用戶不過，AIDMA 的用戶流程并不是即時轉化的，且缺乏購買后的用戶反饋信息。

②AARRR 模型

模型更多應用于互聯網用戶增長，AARRR”轉化漏斗，也即：acquisition（獲取用戶）、activation（激發活躍）、retention（提高留存）、revenue（增加收入）、referral（傳播推薦）。

AARRR 模型因其掠奪式的增長方式也被稱為海盜模型，該模型是 2007 年由 Dave McClure（500 Startups 創始人）提出的一 種業務增長模式’對應客戶生命周期幫助大家更好地理解獲客和維護客戶的原理。

AARRR 分別代表了五個單詞，對應了產品生命周期中的五個 階段：

獲取用戶：指讓潛在的用戶首次接觸到產品，或者可以更寬泛地理解為”吸引流量”。其途徑多樣，如投放各大門戶網站廣告、SEO 搜索引擎優化、ASO 應用市場引流等。

激發活躍：獲取到用戶后下一步是引導用戶完成某些”指定動作”，使之成為長期活躍的忠誠用戶。”指定動作”可以是瀏覽一篇文章，觀看一節課程，又或是寫下自己的評論與網友互動，任何促使他們正確而高效體驗產品核心價值的行為，都是這一步的關鍵策略。

提高留存：用戶來也匆匆，去也匆匆。如果產品缺乏黏度，導致的結果就是用戶一個管子進，另外一個管出，池子里面永遠水量都蓄不起來。通常開發一個新用戶是維護老用戶的十倍成本。因此提高用戶留存，是維持產品價值、延長生命周期的重要手段。

增加收入：產品要能持續發展，必須是盈利，在有限的用戶生命周期中，盡可能去完成商業價值的開發和轉化。在互聯網時代的產品中也有很多種盈利模式，包括 360 殺毒的免費軟件+增值服務模式，騰訊優酷愛奇藝的會員模式，淘寶天貓開店的服務抽成模式等。

傳播推薦：社交網絡的興起促成了基于用戶關系的病毒傳播，這是低成本通過用戶口碑傳播，推廣產品的全新方式，近年來也不斷有新的社區平臺崛起，微信、微博、小紅書、抖音、淘寶直播等，運用妥當就可以產生指數級的用戶增長。

它被廣泛接受為公司關注的五個最重要的指標，因為這些指標有效地衡量了公司的增長，同時又簡單且可操作。

③AISAS 模型

因為 AIDMA 模型缺少用戶反饋的環節，且隨著互聯網用戶教育的完成，消費者行為模式發生了改變，隨之衍生出了 AISAS 模型（Attention、Interest. Search. Actions Share）,也 就是注意、興趣、搜索、行動、分享。

最近被百度網盤的周年慶活動“理性”消費了一波然后我帶動了好友也消費：

本次運營也可以對應福格行為模型，福格行為模型目前幾乎已經應用在絕大多數產品運營。此處僅說明 AISAS 模型的應用。

Attention：在進入百度網盤后會在首頁和我的頁面均有 9 周年活動年 SVIP 會員活動的入口，App 也換成了 9 周年的標志。

Interest：活動優惠價確實會相比較平時低很多，對于經常使用百度網盤的用戶來說肯定會引起興趣。

Search：當 Banner 或者標題引起用戶興趣后，用戶會進行相關檢索進入或者直接點擊入口進入。

Action：進入詳情頁后，用戶會滑動查看本次活動的內容，進行決定是否要付費。

Share：用戶付費后對于本次活動的力度很滿意，之后會進行朋友的分享，避免錯過本次活動。

4. 5W1H 模型

5W1H 是一個幫助我們完成任務的分析工具，由美國政治學 家拉斯維爾于 1932 年提出’并經過不斷的優化和更新。廣泛應用在企業管理、學術研究、生產管控、日常生活中。

5W1H 模型，就是提出下列 5 個問題，通過收集、定義這 5 個 問題，找出解決方案的做事方法：

WHAT：要做的產品、需求是什么

WHY：為什么要做這個，原因是什么

WHO：設計給誰用的，對象是誰

WHERE：產品使用的場景、環境是什么

WHEN：什么時候開始做，時間節點呢

實例說明：一款電商產品詳情頁（H5）的改版

說明：該產品為產品啟動期產品，是一款跨境電商平臺。前期主要利用H5鏈接去推廣，推廣平臺多為：谷歌、臉書等。其他推廣方式此處只說兩種：獨立站引流、郵件營銷引流。

郵件營銷頁面：

詳情頁頁面：

①Who：哪類用戶為產品主要用戶？

（1）因為產品是起步階段，所以產品的流量來源更多的是以各個不同的社交平臺進行引流。

（2）除社交平臺引流之外，還會來自于獨立站的引流，獨立站做不同的垂直電商，主產品為全品類產品。電子郵件引流主要是因為國外用戶的習慣添加的一種引流方式。國外用戶查看電子郵箱的頻率會高于國內很多，很多通知、文件等都是通過電子郵箱去接收發送。

（3）還有少部分的老用戶

引流用戶路徑：點擊 Banne（商品圖、鏈接）—商品詳情頁—下滑展示商品詳情—點擊購買—填寫訂單信息—下單支付

老用戶：點開 App—挑選商品（搜索、瀏覽等）—商品詳情頁—下滑展示商品詳情—點擊購買—下單支付

由于產品生命周期原因，更多的會是引流新用戶，所以在進行重新設計時，需要對頁面、功能、布局進行仔細考慮更加注重新用戶的體驗，同時優化現有用戶的體驗。

②Why：用戶為什么要點擊進來產品詳情頁？

后期會推出社區板塊可以利用起來用戶的碎片化時間，而不僅僅是當用戶想購物的時候打開App進行瀏覽。

用戶會處于好奇或者覺得商品宣傳圖不錯，好奇心驅使用戶點開推廣鏈接進入商品詳情頁。

③When：用戶會在什么情況下點擊鏈接進入本產品？

閑暇時間打開電子郵件后進行瀏覽、在平臺刷動態時進入本產品、在獨立站點購買后感覺不錯，選擇進入主站點

④Where：鏈接入口在哪里？

社交平臺上的產品應用場景/產品優惠活動等/電子郵件內部產品鏈接/手機App

⑤What：本次商品詳情頁內應該有哪些板塊？

商品主圖/商品詳情板塊/用戶評價板塊/更多商品板塊/用戶保證板塊

⑥How：怎么設計本次商品詳情頁？

• 功能上對比競品詳情頁，列出優劣進行功能對比
• 視覺上由于推廣平臺的因素，平臺更多的是年輕化用戶，所以頁面設計偏向于干凈簡約
• 對于新的產品應給予用戶更多的安全保障，所以可以把保障類信息板塊提高層級

以上就是本次的全部內容，有點肝不動了。之后還有三到四篇，感謝觀看！