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

大概整理一下：

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

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

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

1、框架與布局

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

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

2、流程與邏輯

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

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

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

狀態(tài)代表了一個產(chǎn)品的表情和情緒，這里的狀態(tài)指的是各個元素在差別狀態(tài)所呈現(xiàn)出來差別的樣式?？梢源笾職w納為：角色、時間、場景

角色可以包孕用戶身份的不同，主要有登錄用戶與游客、男性與女性、會員用戶與普通用戶。好比電商類app未登錄前會給你保舉一些當前的熱門，而當你登錄后就會按照你的瀏覽記錄保舉符合你口味的產(chǎn)品；再好比微信的搖一搖界面就按照了男性和女性做了區(qū)別；

時間是指在差別的時期，頁面的展示并不是一層不亂的，最常見的就是電商類應(yīng)用里面，商品詳情頁里面，當前可以購買的商品當一段時間后由于某種原因（好比下架了）就不能購買了，所以在這個地方按鈕的狀態(tài)會發(fā)生變革，從可點擊變?yōu)椴怀牲c擊狀態(tài)；

場景相對會比較多，好比沒有網(wǎng)絡(luò)，網(wǎng)絡(luò)中斷，內(nèi)容被清空，夜間模式與白日模式，手機橫屏等等……

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

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

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

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

標簽：鹽城 烏魯木齊 林芝 東營 九江