本文以“微信首頁(yè)”為例，用三個(gè)維度系統(tǒng)地解析一個(gè)產(chǎn)品的交互設(shè)計(jì)的方方面面。

　　首先我們來(lái)做個(gè)互動(dòng)，請(qǐng)各位看官打開(kāi)自己的微信，然后看到你的微信首頁(yè)：

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

　　大概整理一下：

　　未讀消息數(shù)、消息紅點(diǎn)、頭像、聯(lián)系人名稱、最新消息、消息列表、底部標(biāo)簽欄、搜索框、添加、頭部導(dǎo)航欄、等等……感覺(jué)基本上沒(méi)有什么遺漏的，但是感覺(jué)很雜亂的樣子，讓我們重新看一下這個(gè)頁(yè)面：

　　現(xiàn)在讓我們重新用下面3個(gè)維度重新解析這個(gè)頁(yè)面：

　　1、框架與布局

　　框架是一個(gè)產(chǎn)品的筋和骨，它是整個(gè)產(chǎn)品的基礎(chǔ)，我們現(xiàn)在把整個(gè)頁(yè)面全部拆解下來(lái)，這里拆解開(kāi)就可以很清晰了，整個(gè)頁(yè)面由4個(gè)區(qū)域組成，從上到下依次為導(dǎo)航欄區(qū)-搜索操作區(qū)-內(nèi)容區(qū)（消息列表區(qū)）-底部導(dǎo)航欄區(qū)；依此繼續(xù)拆解，導(dǎo)航欄區(qū)依舊可以拆解為狀態(tài)欄-標(biāo)題-添加；消息列表可以拆解為頭像-紅點(diǎn)（數(shù)字）-聯(lián)系人名稱-最新消息-時(shí)間；將整個(gè)頁(yè)面不停地拆解，直到最小拆解單位。

　　當(dāng)你把所有元素都拆解開(kāi)來(lái)之后，就可以開(kāi)始更加深入的思考：每個(gè)元素存在這里的意義，比如為什么搜索區(qū)會(huì)在內(nèi)容區(qū)的頂部？為什么搜索區(qū)在默認(rèn)狀態(tài)下是不展示的，而是需要用戶手動(dòng)向下滑出？為什么在導(dǎo)航欄的右上角放個(gè)添加圖標(biāo)？消息列表為什么頭像都放左邊？頭像為何不像QQ那樣用圓形？不停地問(wèn)為什么，你會(huì)發(fā)現(xiàn)很多細(xì)節(jié)都值得琢磨。

　　2、流程與邏輯

　　當(dāng)我們拆解完所有的元素后，我們需要開(kāi)始思考元素與元素之間的關(guān)系，將其串聯(lián)起來(lái)就是流程，流程和邏輯就像是產(chǎn)品的心臟和血液，使得每個(gè)元素之間完美連接起來(lái)。

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

      3、狀態(tài)與規(guī)則

　　狀態(tài)代表了一個(gè)產(chǎn)品的心情和情緒，這里的狀態(tài)指的是各個(gè)元素在不同狀態(tài)所呈現(xiàn)出來(lái)不同的樣式。可以大致歸納為：角色、時(shí)間、場(chǎng)景

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

     時(shí)間是指在不同的時(shí)期，頁(yè)面的展示并不是一層不變的，最常見(jiàn)的就是電商類應(yīng)用里面，商品詳情頁(yè)里面，當(dāng)前可以購(gòu)買的商品當(dāng)一段時(shí)間后由于某種原因（比如下架了）就不能購(gòu)買了，所以在這個(gè)地方按鈕的狀態(tài)會(huì)發(fā)生變化，從可點(diǎn)擊變?yōu)椴豢牲c(diǎn)擊狀態(tài)；

    場(chǎng)景相對(duì)會(huì)比較多，比如沒(méi)有網(wǎng)絡(luò)，網(wǎng)絡(luò)中斷，內(nèi)容被清空，夜間模式與白天模式，手機(jī)橫屏等等……

    微信首頁(yè)的未讀消息展示也跟場(chǎng)景有關(guān)，當(dāng)有未讀消息時(shí)候展示未讀消息數(shù)并該條消息置頂，當(dāng)看過(guò)后數(shù)字消失，新的消息置頂；這里就需要思考消息列表置頂規(guī)則是什么；還有訂閱號(hào)為何只展示紅點(diǎn)不展示數(shù)字；未讀消息大于99條怎么展示；大于1000又怎么展示；等等這些不同場(chǎng)景下的狀態(tài)都是交互需要考慮的。

　　最后，總結(jié)一下交互分析的3個(gè)維度

　　框架與布局：一個(gè)產(chǎn)品的筋與骨，只有了解其框架，才能真正明白其核心與本質(zhì)；

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

　　狀態(tài)與規(guī)則：代表產(chǎn)品的心情與情緒，好的狀態(tài)展示能讓你的產(chǎn)品真正的“活”起來(lái)；

　　通過(guò)上面3個(gè)維度，我們可以系統(tǒng)全面地分析一個(gè)產(chǎn)品的交互設(shè)計(jì)，以及我們自己在做交互設(shè)計(jì)的時(shí)候可以作為思考的方向。