本文以“微信首頁”為例，用三個維度系統地解析一個產品的交互設計的方方面面。

　　首先我們來做個互動，請各位看官打開自己的微信，然后看到你的微信首頁：

　　然后仔細觀察看到了什么，越詳細越好。

　　大概整理一下：

　　未讀消息數、消息紅點、頭像、聯系人名稱、最新消息、消息列表、底部標簽欄、搜索框、添加、頭部導航欄、等等……感覺基本上沒有什么遺漏的，但是感覺很雜亂的樣子，讓我們重新看一下這個頁面：

　　現在讓我們重新用下面3個維度重新解析這個頁面：

　　1、框架與布局

　　框架是一個產品的筋和骨，它是整個產品的基礎，我們現在把整個頁面全部拆解下來，這里拆解開就可以很清晰了，整個頁面由4個區域組成，從上到下依次為導航欄區-搜索操作區-內容區（消息列表區）-底部導航欄區；依此繼續拆解，導航欄區依舊可以拆解為狀態欄-標題-添加；消息列表可以拆解為頭像-紅點（數字）-聯系人名稱-最新消息-時間；將整個頁面不停地拆解，直到最小拆解單位。

　　當你把所有元素都拆解開來之后，就可以開始更加深入的思考：每個元素存在這里的意義，比如為什么搜索區會在內容區的頂部？為什么搜索區在默認狀態下是不展示的，而是需要用戶手動向下滑出？為什么在導航欄的右上角放個添加圖標？消息列表為什么頭像都放左邊？頭像為何不像QQ那樣用圓形？不停地問為什么，你會發現很多細節都值得琢磨。

　　2、流程與邏輯

　　當我們拆解完所有的元素后，我們需要開始思考元素與元素之間的關系，將其串聯起來就是流程，流程和邏輯就像是產品的心臟和血液，使得每個元素之間完美連接起來。

　　比如這里我看到有一個搜索框，你所需要思考的不僅僅單純這個控件的樣式而已，你真正需要考慮的是用戶在使用這個功能的時候需要操作的整個流程有哪些，假如此刻我想搜索一個公眾號，那么我就會考慮怎么一步步引導用戶完成目標：點擊搜索框-跳轉搜索界面-輸入搜索結果-點擊確定-展示搜索結果-選擇想要的公眾號-點擊進入完成；在這一系列的過程中可能就需要思考怎么優化體驗，比如是否可以縮短操作流程、是否可以減少用戶的輸入內容、怎樣能夠快速讓用戶找到搜索結果等等……

      3、狀態與規則

　　狀態代表了一個產品的心情和情緒，這里的狀態指的是各個元素在不同狀態所呈現出來不同的樣式。可以大致歸納為：角色、時間、場景

     角色可以包括用戶身份的差別，主要有登錄用戶與游客、男性與女性、會員用戶與普通用戶。比如電商類app未登錄前會給你推薦一些當前的熱門，而當你登錄后就會根據你的瀏覽記錄推薦符合你口味的產品；再比如微信的搖一搖界面就根據了男性和女性做了區別；

     時間是指在不同的時期，頁面的展示并不是一層不變的，最常見的就是電商類應用里面，商品詳情頁里面，當前可以購買的商品當一段時間后由于某種原因（比如下架了）就不能購買了，所以在這個地方按鈕的狀態會發生變化，從可點擊變為不可點擊狀態；

    場景相對會比較多，比如沒有網絡，網絡中斷，內容被清空，夜間模式與白天模式，手機橫屏等等……

    微信首頁的未讀消息展示也跟場景有關，當有未讀消息時候展示未讀消息數并該條消息置頂，當看過后數字消失，新的消息置頂；這里就需要思考消息列表置頂規則是什么；還有訂閱號為何只展示紅點不展示數字；未讀消息大于99條怎么展示；大于1000又怎么展示；等等這些不同場景下的狀態都是交互需要考慮的。

　　最后，總結一下交互分析的3個維度

　　框架與布局：一個產品的筋與骨，只有了解其框架，才能真正明白其核心與本質；

　　流程與邏輯：一個產品的心臟與血液，流程好壞決定用戶是否用你的產品最重要的原因；

　　狀態與規則：代表產品的心情與情緒，好的狀態展示能讓你的產品真正的“活”起來；

　　通過上面3個維度，我們可以系統全面地分析一個產品的交互設計，以及我們自己在做交互設計的時候可以作為思考的方向。