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

大概整理一下：

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

感覺基本上沒有什么遺漏的，但是感覺很雜亂的樣子，讓我們重新看一下這個(gè)頁(yè)面：

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

1、框架與布局

框架是一個(gè)產(chǎn)品的筋和骨，它是整個(gè)產(chǎn)品的基礎(chǔ)，我們現(xiàn)在把整個(gè)頁(yè)面全部拆解下來(lá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)你把所有元素都拆解開來(lái)之后，就可以開始更加深入的思考：每個(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)起來(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)入完成；在這一系列的過程中可能就需要思考怎么優(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ì)按照你的瀏覽記錄保舉符合你口味的產(chǎn)品；再好比微信的搖一搖界面就按照了男性和女性做了區(qū)別；

時(shí)間是指在差別的時(shí)期，頁(yè)面的展示并不是一層不亂的，最常見的就是電商類應(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ì)比較多，好比沒有網(wǎng)絡(luò)，網(wǎng)絡(luò)中斷，內(nèi)容被清空，夜間模式與白日模式，手機(jī)橫屏等等……

微信首頁(yè)的未讀消息展示也跟場(chǎng)景有關(guān)，當(dāng)有未讀消息時(shí)候展示未讀消息數(shù)并該條消息置頂，當(dāng)看過后數(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)；

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

標(biāo)簽：鹽城 烏魯木齊 林芝 東營(yíng) 九江