今天25學(xué)堂從移動產(chǎn)品經(jīng)理的角度來談?wù)凙PP產(chǎn)品列表UI設(shè)計方法和思維。

回顧一下慣性的移動產(chǎn)品設(shè)計思維：

移動APP產(chǎn)品設(shè)計沒有表面上那么簡單。我們需要對移動智能設(shè)備非常了解，甚至要改變思考問題的方式，這意味著丟掉我們從Web設(shè)計中學(xué)到的很多東西。

移動APP內(nèi)容型產(chǎn)品的核心競爭力一定是內(nèi)容，比如我們普遍認(rèn)為QQ音樂的播放體驗優(yōu)于網(wǎng)易云音樂，但網(wǎng)易云音樂勝在歌曲豐富，所以體驗上的瑕疵也是可以接受的。但是作為需要消耗大量時間的app來說，好的體驗確實能夠增加舒適度，讓你不會覺得特別“累”，從而增加消費(fèi)時長。

APP產(chǎn)品列表之問題發(fā)現(xiàn)

首先我們發(fā)現(xiàn)的是微信，同一個app不同層級的產(chǎn)品設(shè)計存在差異，聊天主界面→訂閱列表，均是圖片+文字的形式，而到了內(nèi)容展示頁面，變成了文字+圖片，為什么會這樣？

然后我們又找了內(nèi)容型app的兩個同類產(chǎn)品，網(wǎng)易新聞和今日頭條，發(fā)現(xiàn)是兩種相反的設(shè)計，那么那種方式更好呢？

APP產(chǎn)品列表之問題分析

從元素和用戶兩個角度分析：

1、元素的感知程度

可視化元素的感知程度排序：動畫>圖片>文字，這也是PC上很多小網(wǎng)站放滿動畫廣告的原因，它太能吸引大家的注意力了。具體到手機(jī)上，圖片比文字更能吸引大家的眼球。

同時，圖片包含的信息量更大，易讀性更高，當(dāng)你看到普京的照片，你可以迅速意識到這大概是一篇國際政治相關(guān)的新聞。

從這個角度來說，圖片應(yīng)該至于文字前方，主要目的是快速獲取你的注意力，并傳遞宏觀信息，關(guān)注繼續(xù)閱讀，否則直接跳過。

2、人類的閱讀習(xí)慣

正常情況下，人類的閱讀習(xí)慣是從左到右，從上往下（為何古書從右到左？有興趣的看官可以自行了解）。所以在網(wǎng)頁時代，人類的眼球熱力圖是“F”型。

在小屏終端時代，個人覺得“F型”不太實用，我個人更傾向于優(yōu)先關(guān)注屏幕中央。未找到移動端的相關(guān)分析報告，但這不影響我們分析問題。

（圖片來源于網(wǎng)絡(luò)）

同時，要注意的是，眼睛的閱讀速度快于大腦的分析速度，也就是當(dāng)你在閱讀內(nèi)容的時候，眼睛（余光）要提前去看下文才能保證閱讀的快速性和內(nèi)容的連貫性。

當(dāng)你在快速閱讀文字的時候，你肯定不希望突然出現(xiàn)了一張圖片，你需要停下來，大腦從“文字解析方式”切換到“圖片解析方式“”，造成閱讀的卡殼。這樣看來，文字應(yīng)該在圖片后方，你可以略過圖片，一馬平川的閱讀文字。

APP產(chǎn)品列表之優(yōu)化方案

綜上，圖片+文字似乎是更合理的排版方式，以新聞類產(chǎn)品為例，可以嘗試從以下角度優(yōu)化：

1、框架=圖片+標(biāo)題+摘要

圖片盡量貼近內(nèi)容，標(biāo)題清晰，一句話說明問題，摘要簡潔，對標(biāo)題合理補(bǔ)充。

2、合理展示相關(guān)信息

網(wǎng)易通過評論來吸引用戶，今日頭條需要在列表說明內(nèi)容來源，新聞講究時效性，合理的時間說明能夠幫助用戶快速篩選信息。來源、時間和評論數(shù)可能是需要在列表中標(biāo)明的元素，可以合理排版展示。

那么微信公眾賬號內(nèi)容頁為何會以文字+圖片的形式展示呢？我的猜測是微信公眾賬號的編輯者是個人，在配圖方面并不專業(yè)，比如我有時配圖特別意識流，僅從圖片很難揣摩出作者的真正意思，因此微信優(yōu)先展示了文字。

所以，我們常犯的錯誤：當(dāng)一個產(chǎn)品成功之后，無論它的功能或設(shè)計是否合理，我們總是會不由自主的給它找一個合理的理由來證明他的偉大。或許，它這里的設(shè)計確實不合理。

同時上述也告訴我們一個道理，需要不停的去分析和研究用戶量比較大的一些APP，因為他們也同時在改變用戶的使用行為?；蛘呤且I(lǐng)一些移動APP使用行為。

文章來源：http://www.yixieshi.com/ucd/21098.html