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

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

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

大概整理一下：

未讀消息數(shù)、消息紅點(diǎn)、頭像、聯(lián)系人名稱、最新消息、消息列表、底部標(biāo)簽欄、搜索框、添加、頭部導(dǎo)航欄、等等……

表面上似乎所有的元素都包含了，事實(shí)上這些只不過就是冰山上面的一角，真正隱藏在下面的部分才是其最核心和本質(zhì)的東西。而作為產(chǎn)品和交互，你需要看到更多更深層次的內(nèi)容，下面讓我們重新看一下這個(gè)頁面：

現(xiàn)在讓我們用交互分析3維度重新對其進(jìn)行深度解析：

1、框架與布局

框架是一個(gè)產(chǎn)品的筋和骨，它是整個(gè)產(chǎn)品的基礎(chǔ)，我們現(xiàn)在把整個(gè)頁面全部拆解下來，這里拆解開就可以很清晰了，整個(gè)頁面由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è)頁面不停地拆解，直到最小拆解單位。

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

2、流程與邏輯

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

比如這里我看到有一個(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)入完成；在這一系列的過程中可能就需要思考怎么優(yōu)化體驗(yàn)，比如是否可以縮短操作流程、是否可以減少用戶的輸入內(nèi)容、怎樣能夠快速讓用戶找到搜索結(jié)果等等……

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

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

角色狀態(tài)是指不同的用戶身份所呈現(xiàn)的不同的頁面狀態(tài)，主要的維度有登錄用戶與游客、男性與女性、會(huì)員用戶與普通用戶等等。比如電商類app未登錄前會(huì)給你推薦一些當(dāng)前的熱門，而當(dāng)你登錄后就會(huì)根據(jù)你的瀏覽記錄推薦符合你口味的產(chǎn)品；再比如微信的搖一搖界面就根據(jù)了男性和女性做了區(qū)別；

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

場景狀態(tài)即在不同的場景下，頁面狀態(tài)也會(huì)呈現(xiàn)符合當(dāng)前場景下的展示規(guī)則，其類型相對較多，比如沒有網(wǎng)絡(luò)，網(wǎng)絡(luò)中斷，內(nèi)容被清空，夜間模式與白天模式，手機(jī)橫屏等等……

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

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

1. 框架與布局：一個(gè)產(chǎn)品的筋與骨，只有了解其框架，才能真正明白其核心與本質(zhì)；
2. 流程與邏輯：一個(gè)產(chǎn)品的心臟與血液，流程好壞決定用戶是否用你的產(chǎn)品最重要的原因；
3. 狀態(tài)與規(guī)則：代表產(chǎn)品的心情與情緒，好的狀態(tài)展示能讓你的產(chǎn)品真正的“活”起來；

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

（待續(xù)……）

本文由 @小米渣和大冬瓜 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。