評論區設計(三):如何做好直線分枝式評論?

5 評論 3332 瀏覽 27 收藏 5 分鐘

文章以網易云音樂評論區為例,給大家講解一下如何做好直線分枝式評論?

網易云音樂的評論區排版,分三部分:近期熱評——精彩評論——最新評論。本文只探討最新評論區,最新評論區是直線分枝式評論設計。

左圖是網易云音樂截圖,右圖是更改的樣式

  1. 頂部導航欄,“評論總數”換成歌曲的名字,點擊名字,回到音樂播放界面;轉發的三角形圖標改成小十字架圖標,功能也有變化,新增“最新評論”的順序調整,用戶可以選擇順序看,也可以選擇倒序看(很多APP評論區只能倒序)。
  2. 中間評論區,用戶名字下移,時間移至右上角,“點贊”移至評論文本下方,“點贊”左邊是“回復”,右邊是“復制”。
  3. 中間評論區,跟帖部分,被回復的評論和回復的評論位置上下互換,被回復的評論前面的“@”去掉,同時用戶姓名采用和評論文本一樣的樣色,兩條評論之間采用細線隔開。

理由:

(1)“評論總數改成歌曲的名字”,評論區是通過點擊音樂播放界面的評論小圖標進入的,進入的時候,小圖標會標明“評論總數”。出現在導航欄上的字,應該是評論區的主題,“評論總數”做不了主題,歌曲名字可以做主題。

“轉發的三角形圖標改成小十字架圖標”,左邊小箭頭是三條小線段組成,右邊的三角形除了線段,還有圓,感覺不對稱,換成小十字對稱些,而且小十字圖標也可以清晰表達三角形圖標的含義。

“用戶可以選擇順序看,也可以選擇倒序看”,增加的兩個功能,有利于用戶閱讀,如下圖:

(2)“用戶名字下移,時間移至右上角,“點贊”移至評論文本下方”,這里就不解釋了,第一篇文章解釋過。

“點贊”左邊是“回復”,右邊是“復制”,“點贊”是數字+小圖標,“回復”和“復制”都是漢字。所以“點贊”在中間,兩邊是漢字,這樣對稱。網易云評論區,評論底下是沒有這三者的,那樣做更美觀。只是要回復某條評論,得兩步操作,點擊評論,然后出現一個彈框,在彈框里選擇“回復評論”,如下圖:

把“回復”和“復制”兩個功能放到評論下方,可以減少操作步驟。

(3)“被回復的評論和回復的評論位置上下互換”,我們習慣性從上往下看,這樣變更利于閱讀。

“被回復的評論前的“@”去掉,同時用戶姓名采用和評論文本一樣的樣色,兩條評論之間采用細線隔開”。去掉“@”,是為了使評論左側都是文字,看起來統一。用戶名和評論文本采用同一種顏色,為了使評論區看起來統一。

“@”和名字的色差,是用來定位新一段評論的開始,這里用下劃線來替代,下劃線可以有效起到區分不同評論的作用。名字的色彩,還可以用來標明評論文本的開頭,可以讓讀者快速聚焦文本,把色差去掉,就難以做到快速聚焦文本,會影響讀者閱讀效率。所以這種模式,謹慎采用。

聲明:寫“評論區設計”,是臨時起意,突然就開寫,沒有深思熟慮,前兩篇文章出現過一些錯誤,有的設計相互沖突了,所以你參考的時候,還望謹慎。

 

本文由 @?言吉 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 有點丑……

    來自廣東 回復
  2. 點贊是最低成本互動行為,不覺得放在最右側更符合用戶使用預期嗎?而且你這設計與市面上大部分產品使用習慣不同啊

    來自北京 回復
  3. 欠妥

    來自廣東 回復
  4. 你可以思考一下為什么沒有app把點贊放中間

    來自湖北 回復
  5. 你是不是覺得對稱很好看2333333

    來自湖北 回復