互動設計中的「同形異構」與「同構異形」

西紅柿炒雞蛋、番茄雞蛋湯，主食材完全相同；素雞是豆製品，口感味道匹敵雞肉；土豆和茄子的組合可以有：土豆絲炒茄絲、土豆片燴茄片、土豆丁燜茄丁、土豆塊燒茄塊、土豆泥拌茄泥……現實生活中的食材料理，就是一門

組合的藝術

。

與烹飪類似，互動設計也是一門組合的藝術。確定業務目標和範圍，相當於給定了規定食材；互動框架與模式選用，相當於處理食材的基本刀工；五味調和，相當於具體設計過程；菜品色香味呈現，相當於轉化率結果；滿漢全席，相當於多個轉化結果支撐的運營體系。

資訊架構與設計多樣性

外形與結構，表象與本質，幾千年來人類探究的問題，科學的意義就是研究事物本質。基於螢幕的互動設計，為了複用螢幕而生，為了呈現資訊而存在。

關於資訊架構的基礎知識，請參考Hozin的幾篇文章：

《不理解「資訊」莫再談「架構」》2016

《從HTML入手，學習資訊架構》2016

《從概念設計到資訊架構》2009

《如何理解產品設計中的概念設計、功能規劃？》2013

《［逆向工程］資訊架構推演<微信訊息列表>步驟細節+新手掃盲》2016

如果已經明確【資訊架構為何物】，必然會涉及另外一個問題【資訊架構為什麼如此重要？】

優秀的網際網路產品幾乎一定是

不斷迭代，打磨成型

；互動形式是否能被目標使用者接受，不是臆想出來的，而是要經過

實踐檢驗

；沒有最好的設計，只有

更好的設計

；為了更好的設計，產生了

A/B測試、資料分析

等一系列方法；【擁有足夠多的可能性】是優勝劣汰的前提。

一旦業務被確認，資訊架構就幾乎固定，基於近似的架構提供多樣互動方案，是資深互動設計師的必備技能；互動設計多樣性主要來自兩個方面

「同形異構」與「同構異形」

。

難於掌握的「同形異構」

如上圖所示，相同的卡片設計包含ABCD四個熱區，從資訊架構層面可能完全不同。圖左：樹狀（星形）資訊架構。

圖左：樹狀（星形）資訊架構

A=男［性別］

B=50歲以上 ［年齡］

C=10萬以下［年收入］

D=已婚［家庭狀況］

資訊節點相互排斥，實現模型是Category，即當前內容和分類具有一對一關係。

圖右：網狀資訊架構

A=英俊瀟灑

B=事業有成

C=風華正茂

C=財務自由

資訊節點自由關聯，實現模型是Tags，即當前內容和標籤具有一對多關係。

除了以上兩種特例，樹狀和網狀資訊架構可以

混搭存在

，變化多端。

識別同形異構（同形異質），需要【發散思維】；建立同形異構，需要【聚焦思維】。無奈，所謂【思維導圖】氾濫，很多從業者的【聚焦思維】逐步退化，建立

同形異構

越來越少見；因為比較少見，所以也便無人辨識，

用進廢退

。（參考《腦圖之困，為什麼你的思路打不開？》）

「同構異形」與等價設計

同構異形比較容易理解，就是所謂【等價設計】。如上圖所示，相同的資訊架構結合不同的互動模式，產生豐富多彩的外觀形態；

為一種結構提供多種檢視

，互動設計的

核心技能

。

熟練掌握等價設計，需要經歷兩個階段：第一，認識足夠多的【互動模式】；第二，歸納【互動模式】之間的等價關係

深入認知【互動模式】，依靠日常積累比較緩慢，捷徑是大量閱讀相關書籍（參考《

互動大廚的私房書單之模式篇》

），推薦訪問 @龍爪槐守望者 的知乎專欄【這個控制元件叫什麼】。

梳理【互動模式】等價關係，目前尚無完善文獻，這也是Hozin目前的研究方向，整理需要一定時間，請拭目以待。

狹義的互動多樣性，就是【等價設計】；如果能結合同形異構，那就錦上添花了。

一張圖小結

原創文章不容易，各位高抬貴手，

未經授權，謝絕轉載。

大家的支援，是內容更新的動力，讓我們科學治療懶癌吧。