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

01-30

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

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

信息架構與設計多樣性

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

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

《不理解「信息」莫再談「架構」》2016

《從HTML入手，學習信息架構》2016

《從概念設計到信息架構》2009

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

《[逆向工程]信息架構推演<微信消息列表>步驟細節+新手掃盲》2016

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

優秀的互聯網產品幾乎一定是不斷迭代，打磨成型；交互形式是否能被目標用戶接受，不是臆想出來的，而是要經過實踐檢驗；沒有最好的設計，只有更好的設計；為了更好的設計，產生了A/B測試、數據分析等一系列方法；【擁有足夠多的可能性】是優勝劣汰的前提。

一旦業務被確認，信息架構就幾乎固定，基於近似的架構提供多樣交互方案，是資深交互設計師的必備技能；交互設計多樣性主要來自兩個方面「同形異構」與「同構異形」。

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

圖左：樹狀（星形）信息架構
nn
A=男[性別]
nn
B=50歲以上 [年齡]

nn
C=10萬以下[年收入]
nn
D=已婚[家庭狀況]
nn
信息節點相互排斥，實現模型是Category，即當前內容和分類具有一對一關係。
nn

圖右：網狀信息架構
nn
A=英俊瀟洒
nn
B=事業有成
nn
C=風華正茂
nn
C=財務自由
nn
信息節點自由關聯，實現模型是Tags，即當前內容和標籤具有一對多關係。
nn

除了以上兩種特例，樹狀和網狀信息架構可以混搭存在，變化多端。

nn識別同形異構（同形異質），需要【發散思維】；創建同形異構，需要【聚焦思維】。無奈，所謂【思維導圖】泛濫，很多從業者的【聚焦思維】逐步退化，創建同形異構越來越少見；因為比較少見，所以也便無人辨識，用進廢退。（參考《腦圖之困，為什麼你的思路打不開？》）

同構異形比較容易理解，就是所謂【等價設計】。如上圖所示，相同的信息架構結合不同的交互模式，產生豐富多彩的外觀形態；為一種結構提供多種視圖，交互設計的核心技能。

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

nnnn深入認知【交互模式】，依靠日常積累比較緩慢，捷徑是大量閱讀相關書籍（參考《交互大廚的私房書單之模式篇》），推薦訪問 @龍爪槐守望者的知乎專欄【這個控制項叫什麼】。

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

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

原創文章不容易，各位高抬貴手，未經授權，謝絕轉載。

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