互動工程 · 5 / 10

習慣用法:別讓 AI 發明新互動

流程砍利索了,還有一種病藏得更深:AI 有時會發明看著新穎、沒人會用的互動。這一節講兩個詞,習慣用法(idiom)和能供性(affordance),學完你能一眼認出哪個控制項在裝創新,還能說清為什麼使用者學不會。

習慣用法能供性找茬演練創新刀刃
你會用的互動,沒有一個是天生就會的

《About Face 4》第 13 章把介面分成三種路數:按程式內部結構長的(實現中心),靠畫得像現實物件的(隱喻),還有靠學的(習慣用法)。Cooper 的立場很乾脆:現代圖形介面基本靠第三種撐著。視窗、捲軸、下拉選單、超連結,沒有一個靠直覺,全是使用者一個個學來的。

他舉的例子是滑鼠:沒有人看一眼滑鼠就知道它控制螢幕上的游標,得有人教,或者自己摸索半分鐘。但學會之後一輩子忘不掉。滾動、雙擊、拖放、下拉重新整理、左滑刪除,都是這樣:學一次,到處用。

「所有的習慣用法都需要學習,好的習慣用法只需要學習一次。」
Alan Cooper,《About Face 4》第 13 章。

這條對做產品的人來說是天大的便宜:全世界的產品已經替你把使用者教好了,你直接用現成的習慣用法,學習成本為零。麻煩在於 AI 有時不領這個情,它把訓練資料裡的花樣拼一拼,就能發明出一個誰也沒學過的控制項。

隱喻這條路走不遠

順手把第二條路數也埋了。圖形介面剛火起來那幾年,功勞被記在「畫得像」頭上:桌面畫成桌面、資料夾畫成資料夾,使用者看圖識意。Cooper 在第 13 章不買帳:隱喻介面讓使用者在圖示和功能之間連線猜謎,簡單功能還能猜,稍微抽象一點就畫不出來了。「批次重新命名 50 個檔案」,你打算畫成什麼?

更麻煩的是隱喻會賴著不走。使用者學會基本操作之後,那些擬真的皮革紋理、翻頁動畫就從幫手變成拖累,佔地方、限制互動,還把機械時代的規矩帶進來。蘋果自己也認了:iOS 6 上那本皮質日曆,到 iOS 7 被清得乾乾淨淨。

所以習慣用法贏在輕裝:它沒打算讓你猜,直接讓你學,學起來還快。下面看看這套詞彙是怎麼搭起來的。

三層詞彙:圖形介面為什麼好學

第 13 章裡有一張倒金字塔,解釋習慣用法為什麼容易學:整套圖形介面的互動詞彙分三層,越往下越少、越簡單。點每一層看它裝著什麼。

互動詞彙的倒金字塔 看過 0 / 3
從底往上,詞彙越壘越豐富,但地基只有幾個動作
點左邊的任意一層倒金字塔從底往上看:地基極小,樓卻能蓋很高,這就是圖形介面好學的結構性原因。

使用者能把這套詞彙從別的產品搬進你的產品,靠的是心智模型:他預設你的介面和他用過的一萬個介面遵守同一套規則。模型對不上時使用者有多懵,心理學篇講過了,放跳轉卡,不重教。

跨章引用 · 心智模型:使用者腦子裡那張圖使用者拿著舊產品的模型來套你的介面,錯配一次就迷路一次。模型從哪來、錯配怎麼修,心理學篇第 7 節講透了,點這裡跳過去。
動手 · 這個設定頁裡藏著三個發明

下面是 AI 生成的雲盤設定頁,功能都能跑,介面也不醜,但裡面藏著三個自作聰明的發明,每一個都打破了一條學好的習慣用法。把它們逐個點出來,點中會給判詞。

找出裝創新的控制項 找到 0 / 3
直接在介面上點你覺得有問題的控制項,點到正經控制項也有話說
pan.example.com/settings
帳戶設定雲盤會員版
基本資料
發明 ①
山霧觀測員
mist@example.com
未填寫
未設定
未命名
第 1 / 3 頁 · 向左滑填寫更多
通用
訊息通知
發明 ② 查看會員權益雙擊開啟 年費會員 · 剩 208 天
發明 ③ 儲存 點選後環走滿一圈即儲存成功
退出登入
發明 ① · 橫著滑的表單:使用者學不會。表單的習慣用法是從上往下:滾動、填寫、提交,三十年沒變過。橫滑分頁等於把必填項裝進暗格,使用者以為填完了,一點儲存全是報錯。想省高度,用摺疊或分組都行,方向別動。
發明 ② · 要雙擊的連結:使用者學不會。帶下劃線的藍字,Web 的契約是單擊就走。雙擊屬於桌面圖示那套習慣用法,兩套規則混著用,沒人猜得到,只好靠一行小字來教。要配說明書才能用的控制項,等於宣佈自己失敗。
發明 ③ · 進度環儲存按鈕:使用者學不會。儲存有全世界最爛大街的寫法:一個寫著「儲存」的實心按鈕。做成環以後,使用者第一反應是「它在載入什麼」,第二反應是「這東西能點嗎」。控制項不再自我說明,創新反而把能供性丟了。
三個發明都揪出來了。注意它們的共同點:單看都還滿有想法,敗在打破了使用者學好的規則。給 AI 的驗收話術就一句:「導航、表單、基礎按鈕一律用最常見的標準模式,別發明新互動。」創新往哪放,本頁最後一節講。

順便解釋一下 AI 為什麼會幹這種事。它的訓練資料裡什麼都有:正經產品、獲獎概念稿、設計社群裡炫技的作品集。讓它「做個有設計感的設定頁」,它就把幾種來源的花樣攪在一起端出來,語法上都通,規則上互相打架。

它還有一樣東西永遠學不到:你的使用者學過什麼。習慣用法長在使用者的經驗裡,AI 看得見控制項長什麼樣,看不見三十年的教學史。所以這道關只能你來把:凡是需要配一行小字解釋怎麼用的控制項,都值得懷疑。

能供性:控制項要自己說明自己

第二個詞來自諾曼的《設計心理學》:能供性(affordance),東西的樣子透露它怎麼用。Cooper 在第 13 章把定義修得更鋒利:能供性管的是你以為它能幹什麼,和它實際能幹什麼分開算。門旁邊裝個小圓鈕,人人都當它是門鈴,哪怕按下去觸發的是別的,它的能供性仍然是門鈴。

經典例子是門把手:門上橫著裝一根金屬桿,形狀高度都在喊「拉我」,結果這扇門要推。於是店家貼上「推」的標字,沒用,人們照拉。手能讀懂的訊號,比字大聲。

在螢幕上,這件事變成一紙契約:你畫一個按鈕,就是向使用者承諾它能點、點了有反應、乾的是標籤上寫的事。毀約的控制項,Cooper 叫它誘餌式能供性(bait-and-switch)。

他還點了扁平化的名:早年的介面靠陰影和立體感喊「來按我」,扁平風把這些全刮掉了,視覺上是清爽,能供性跟著受了傷。所以扁平介面裡可點的元素更要守紀律:同一種顏色、同一種形狀,專門留給能點的東西,誰都別客串。

下面兩個會員中心,同一塊升級卡片兩種畫法,點你認為守約的那個。

長得像按鈕的,必須能點 A/B 對決
點卡片投票,投完揭曉判詞
方案 A
vip.example.com
桌面客戶端檢查更新
當前版本 v3.2.0,上次檢查於今天 09:41
已是最新版本
藍色大膠囊看著最像按鈕,點了沒反應;真動作「檢查更新」縮成右上角小字
方案 B
vip.example.com
桌面客戶端
當前版本 v3.2.0,上次檢查於今天 09:41
已是最新版本
檢查更新
狀態用灰字加圓點老實待著,動作用一個正經按鈕

能供性有個零成本的檢驗法:把介面截圖發給一個沒用過它的人,只給 5 秒,讓他指出哪裡能點。他指錯的每一處,都是一起能供性事故。這個測試對 AI 生成的介面尤其管用,因為 AI 畫介面時根本沒想過這個問題。

創新要花在刀刃上

講到這裡容易得出一個錯誤結論:互動永遠抄現成的,誰創新誰死。Cooper 給的尺子精確得多:

「重大改變必須顯著優秀。」
Alan Cooper,《About Face 4》:讓使用者重學一遍的改動,收益必須大到肉眼可見。

導航、儲存、表單這些基礎操作,使用者每天在別的產品裡練幾百遍,你換花樣等於逼人重新學走路,而且給不出像樣的回報,這裡就該用最爛大街的模式。創新預算留給核心差異點:你的產品獨有的那個能力,那裡沒有現成習慣用法可抄,做好了輪到別人抄你。

用這把尺子量一道題。AI 給一個批次檔案管理工具加了四個「亮點設計」,哪個創新花對了地方?

四個亮點設計,哪個值得留? 單選
選錯也有解釋,選到對的為止
A底部導航換成按住撥出的放射狀圓盤選單
B上傳進度做成擬物水杯,水位漲滿即完成
C核心功能批次重新命名:改一處規則,五十個檔名即時預覽
D雙擊檔案卡片加收藏,介面上不放收藏按鈕
爛大街清單:這些直接抄,別客氣

最後備一張速查表。下面這些習慣用法,使用者早在別的產品裡學到滾瓜爛熟,你的產品照抄就是白得的易用性。驗收 AI 產出時對著查,右列的話術可以整段抄進提示詞。

習慣用法使用者在哪學的給 AI 的預設要求
下拉重新整理每一個資訊流 App列表重新整理用下拉,別自創重新整理浮層
左滑刪除系統郵件、微信聊天列表列表項刪除用左滑或明確按鈕,別藏進長按選單
底部導航欄手機 App 的標配位主導航用底部標籤欄,圖示配文字,3 到 5 個
購物車電商三十年的教學成果多選加結算沿用購物車模型,別發明新比喻
拖放上傳網盤和信箱附件上傳區域支援拖放,同時保留「點選選擇檔案」
Ctrl / Cmd + Z桌面軟體的老規矩編輯類功能必須支援撤銷快捷鍵
藍字下劃線連結Web 的第一課連結保持可識別樣式,單擊直達
放大鏡搜尋框瀏覽器和每個內容 App搜尋入口用放大鏡圖示加佔位提示文字
紅點角標手機通知系統未讀提醒用角標數字,別自創閃爍標記

表裡沒有一項需要使用者學,這正是它們的價值。省下來的學習預算,按上一節的尺子,投給你的核心差異點。

本節要點
✓

介面靠習慣用法運轉:滾動、雙擊、拖放沒有一個靠直覺,全是學來的。好的習慣用法學一次用一輩子,全世界的產品已經替你把使用者教好了(Cooper,《About Face 4》第 13 章)。

✓

能供性是契約:控制項長什麼樣,就得幹什麼事。畫一個按鈕等於承諾能點、點了有反應;長得像按鈕的東西點不動,賠上的是整頁控制項的信用。

✓

創新要花在刀刃上:導航和基礎操作用最爛大街的模式,創新預算留給核心差異點。重大改變必須顯著優秀,給不出回報的新花樣就是負擔。

✓

給 AI 的話術:「導航、表單、基礎按鈕一律用最常見的標準模式,不要發明新互動;可點的元素必須長得可點。」判斷要點講完四個,下一節進細節:控制項本身怎麼選。

內容來源:小山學堂「互動工程」專題原創;部分互動原則整理自《About Face 4:互動設計精髓》,能供性概念出自唐納德·諾曼《設計心理學》。