• 本文僅針對于“有我”App Feed頁面進(jìn)行分析，其他頁面不涉及。
• 本文僅針對于iOS版本進(jìn)行分析，Android版本不涉及。
• 本文包含邏輯分析與部分UI分析。

1.“報名”按鈕在Feed頁面直接顯示的必要性

1.png

點擊“報名”會直接進(jìn)入到支付狀態(tài)，直接在Feed頁面就進(jìn)行支付的用戶，數(shù)量應(yīng)該不多，理由如下：

• 用戶此刻會比較珍惜自己的財產(chǎn)(現(xiàn)金、鉆石)，在未了解PO主的情況下，直接使用此按鈕的幾率較少

• 右上角已經(jīng)存在懸賞數(shù)額(此處為1000鉆石)，沒有理由通過點擊“報名”來查看懸賞數(shù)額

綜上，我覺得實際情況是，當(dāng)其他用戶看到這樣一條PO時，要么會點擊PO主頭像去查看PO主的詳細(xì)資料(照片、單身與否等)；要么會點擊本PO進(jìn)入詳情頁面，查看本PO下面的評論及已報名的其他用戶數(shù)量來權(quán)衡是否要報名；更多的是兩者兼而有之。這樣一來，使用詳情頁面的底欄的報名按鈕就可以了，不必在寶貴的Feed頁面空間上直接顯示“報名”按鈕。

2. 可見不可點擊的圖標(biāo)

2.png

大多數(shù)用戶是有在用微博客戶端的，微博卡片式頁面可直接點贊的用戶習(xí)慣很可能會延續(xù)到本App上面。除開第四個圖標(biāo)，新用戶可能不知道這是報名人數(shù)，紅框中的3個圖標(biāo)都會讓人產(chǎn)生直接點擊并生效的沖動 ，特別是第一個“贊”。然而當(dāng)用戶發(fā)現(xiàn)這些圖標(biāo)是無法點擊的，會一定程度上減少本PO被贊、被收藏、被評論的機會，這樣其實不不太利于打造一個很火爆的PO。用戶很懶，此刻他們或許在想：還要點進(jìn)詳情頁面才能贊、收藏、評論，那索性直接滑過算了。

3. 已閱本PO用戶頭像的顯示

以例2中的圖片為例，當(dāng)PO被其他用戶閱讀之后，會有一排閱讀過的用戶頭像。問題在于：

• 這排頭像是不可點擊進(jìn)行交互的，進(jìn)入詳情頁面之后也沒有

• 對普通關(guān)系的用戶來說，誰看了誰的PO而沒有評論、收藏或者打賞，是無關(guān)緊要的；在較親密的朋友之間，才會產(chǎn)生一絲影響：比如“我這么好看的照片你居然不看？”“我這么好看的照片你居然看了不評論？(不打賞？)”

• 當(dāng)本PO確實沒什么有價值的內(nèi)容，導(dǎo)致本PO只在Feed頁面滑過而沒有用戶愿意點擊進(jìn)入詳情頁面查看的時候，會導(dǎo)致下面這種情況 ：

  3.png
  
  用戶發(fā)現(xiàn)只有他本人查看本PO，會讓用戶心里有點尷尬 。

綜上，這一排用戶頭像是否應(yīng)該存在我覺得還有待討論。

4. PO中單張圖片顯示問題

4.png

這里可以看到，包含單張圖片的PO的高度遠(yuǎn)大于多張圖片的PO，從實際體驗上來說，多張圖片的PO的高度更合適，因為Feed頁面的圖片框架是無法完整顯示整張圖片的 ，本App的圖片又有眾多的自拍照，而自拍照的構(gòu)圖中，大部分臉部圖像都位于照片的上半部分 ，這樣就會導(dǎo)致如圖女生臉部顯示不全的情況出現(xiàn)。

因此，與其放一張大圖顯示不完全且模糊，不如按照多圖PO高度處理，反正都是要點進(jìn)去看的，節(jié)省Feed頁面的空間以便在同一屏內(nèi)顯示更多數(shù)量的PO或許更好一點。

5. PO文頭像下方的文字、空白區(qū)域及對稱性

5.png

• 頭像下方文字
  “更多新人”不應(yīng)該帶有下劃線，通過下劃線來暗示用戶這是鏈接可以點擊的做法是早期互聯(lián)網(wǎng)Web網(wǎng)站設(shè)計時采用的做法，在App上不太適用；并且“更多新人”語義上已經(jīng)表明了這是可以點擊的，沒必要再加上下劃線。

• 空白區(qū)域
  這種留空白的方式的確是可以起到分割PO與PO的作用，但是分割作用其實已經(jīng)由頭像這排內(nèi)容 與贊、收藏、評論 這一行內(nèi)容繼承了，除此之外，還有灰色的分割線也起到相同的作用，所以此處留空白的做法值得商榷。另外它還引出了下一個問題：

• 對稱性
  由于上述空白區(qū)域的留出，導(dǎo)致PO文實際上并不處于整個App的正中央，而是偏右的位置，從美觀度上來說會有影響。

6. 底部工具欄高度不統(tǒng)一

6.png

如上圖，F(xiàn)eed頁面底部工具欄高度(不考慮圓形按鈕)和詳情頁面的底部工具欄高度是不統(tǒng)一，此外背景配色也不統(tǒng)一。

7. 頂部標(biāo)簽頁有Bug

7.png

• 標(biāo)簽左側(cè)的空白
  當(dāng)手指在Feed頁面左右滑動導(dǎo)致標(biāo)簽頁切換的時候，大概在切換到第四、第五項的時候，會出現(xiàn)上圖左側(cè)所示的Bug，參照此處同類布局的“網(wǎng)易新聞”，這個地方不應(yīng)該出現(xiàn)空白。

• 標(biāo)簽下方的紅色橫線
  肉眼其實能看出來這條橫線并沒有采用“居中”，而是采用了“左對齊”，導(dǎo)致橫線并不是處在標(biāo)簽文字的正中。實際上可以去掉這條橫線節(jié)省一點空間，其功能由標(biāo)簽文字本身的變色(變大)來繼承，可參照“網(wǎng)易新聞”：

  
  
  8.png

感謝您花時間閱讀本文！