如何評價安卓知乎3.0新版UI？

01-09

下載地址http://beta.zhihu.com/
由於是測試版會有許多bug

用了幾天，終於採用了Material Design風格，贊一個。

不過還是要吐槽一下首頁信息流展示使用的CardView，和MD的設計理念有些不符之處。

首先看看CardView的使用說明：

When to use
Use a card layout when displaying content that:

As a collection, comprises multiple data types, such as images, movies, and text

Does not require direct comparison (a user is not directly comparing images or text)

Supports content of highly variable length, such as comments

Contains interactive content, such as +1 buttons or comments

Would otherwise be in a grid list but needs to display more content to supplement the image。

下面是Google官方給的CardView使用場景說明：

Do.
A quickly scannable list, instead of cards, is an appropriate way to represent homogeneous content that doesn"t have many actions.

(相比於卡片，此處採用列表更為合理，因為展示的內容種類相同，且無需太多交互操作。)

Don"t.

The use of cards here distracts the user from being able to quickly scan. These list items are also not dismissable, so having them on separate cards is confusing.

(卡片在此處的使用會分散用戶在快速瀏覽信息時的注意力。而且這些列表項並不可以消除，所以將列表項放在分隔開的卡片中會令人困惑。)

新版知乎App採用的是第二種風格，也就是官方不推薦的風格。知乎App首頁信息流內容屬於homogeneous content, 使用List展示效果更好。使用CardView的話，滑動過程中padding和background有點分散注意力。

CardView更多應用於展示heterogenous content，以下是官方給出的正確示例:

以上部分內容摘自:

Material Design - Components - Cards google.com 的頁面

PS:

App圓形圖標好醜。Fab按鈕的顏色設置為白色，有點奇怪。
極客學院的wiki中有MD設計中文版，卡片 - Material Design 中文版和上面鏈接內容一致。

昨天下載的，玩了幾下，先簡單說一下，遇到了其他的問題就補充上。

不說廢話，直接就事論事。

在體驗的過程中，我發現了幾點問題（及時補充）：

（1）大面積的使用卡片設計是否合適？

（2）層次關係在這是否合理，是否泛濫？

（3）某些細節方面的問題。

（1）知乎3.0最大的亮點就是卡片設計：首頁的feed流是卡片，話題頁面是卡片，回答頁面是卡片，問題的具體描述是卡片，搜索頁面是卡片，評論頁面是卡片，個人關注收藏等頁面也是卡片，甚至個人詳細信息，包括個人成就（多少贊，被收藏，被分享），所在行業，居住地等信息的展示也是卡片…我認為，卡片適中是簡單高效；如果過多，那是浪費，雜亂和分離。

卡片是一種信息的入口，承載著多種操作，但它並不適合任何場景。如果展示的信息過多，用卡片設計，不利用快速瀏覽，分散注意力。我同意@Alpha Beta的觀點。知乎3.0的首頁的卡片設計我覺著不合理，突兀，尤其是突出背景層，對視覺的干擾很明顯——雖然操作（上下滑動卡片）很流暢。好的卡片設計如豌豆莢一覽，如medium，簡單幹凈。我個人還是傾向於列表設計（可以看一下quora）。

誠然，在知乎3.0中，首頁的卡片設計是可操作的：左滑卡片，不敢興趣某話題（這樣設計還是挺不錯的）。如果採用列表設計，可能就不具有很好的識別性和暗示性。但是如果通過合理的引導的話，這個問題可以解決（3.0沒有任何引導，我是自己發現的）。

其他的一些次要頁面（如點擊頭像進入的個人頁面），我認為就沒有必要用卡片設計了。

（2）MD中Z層的關係通過陰影來體現。知乎3.0中由於採用來了大面積的卡片設計，為了區分不同的卡片，體現出它們之間的關係，陰影的設計顯的尤其重要。但是我發現一些地方，如圖中塗鴉所示1，2，3處

界面亂是因為這層次關係太重太繁。3處的設計是合理的，符合規範的，但是其他兩處呢？

先不說1處的按鈕陰影是否合理，設計上完全沒有必要，完全可以去掉，或者和前幾個按鈕一樣，裡頭換成「…」（一個摺疊按鈕，點擊後展開其他的分類關鍵詞）

2處設計成懸浮按鈕是否合理呢？在邏輯上說，「關注」是問題描述卡片的內在組成部分，應該追隨本卡片嵌在上面，而不是浮在本卡片上面。可能在設計上考慮的是突出和引導，但是我個人認為設計成扁平的按鈕要好點，在那樣的場景下，話題本身的趣味性和價值性是驅動人關注的動力，而不是突出的按鈕和鮮艷的色彩。

同樣的問題也出現在這（用戶頭像都快飛出來了）

還有一點，看下圖兩處塗鴉標記的陰影大小關係

我可能看錯了，或者是一個bug：上面卡片的陰影是小於下面卡片的。MD中，陰影的大小柔軟是區別不同卡片z層depth的，即，陰影越大越柔，說明本元素在z層更靠前。看上圖右下角圓形的FAB（懸浮動作按鈕）的陰影就明白了，它的陰影最大最柔，所以它可以浮在卡片上，在頁面的最靠前。

但是知乎3.0中，問題描述卡片是可以浮在答案的卡片上，如下圖，

（問題卡片的陰影好像變了？）這個問題，可能是我理解錯了，或者我眼瞎了…

（3）某些細節的問題（原諒我有些強迫症，摳細節）

1處看著很亂，主要是對齊方式不統一；

2處應該是個bug，違背了格式塔的親近性原則；

3處的分割線（此處仁者見仁智者見智，不展開）。

拋去這些問題，我感覺知乎3.0還不錯，總體思路是清晰，沒問題的，畢竟現在只是beta版。我只是一個學生，所以說錯的地方請輕噴。說知乎差，垃圾的人還不如安靜下來具體指出讓你不爽的地方，做產品難，做負責的用戶也難。

補充————————————————————————————

手機端的編輯器還是一如既往的不友好。

其他問題，再體驗幾天再說。

更新到最新的beta版，發現問題若干

1.主界面的FAB雖然改成藍色了，但發現界面的「隨機閱讀」FAB仍然是白色。

2.答案閱讀界面，載入答案或者刷新答案的時候出現的刷新控制項一半被問題內容的卡片遮擋，一半遮擋了答案內容的卡片。雖然我理解這個層級設定是正確的，但是這個表現仍然很蠢。建議把控制項位置下調，改成全部遮擋答案內容卡片就行了。

3.點擊贊同數後出現的贊同/反對么卡片不夠Matierial話，而且大小跟新UI有點不太協調。

4.搜索框里文字輸入的起始位置跟up button之間的迷之距離。

滑動返回沒有了好不方便。

下拉刷新之後列表bling bling閃兩下是什麼鬼？

用了這麼多年的Mac，感謝你讓我想起兒時右鍵刷新的場景。

看起來比原來好看了，更加符合Material Design規範了。符合MD規範這一點在一些常用的應用上是千呼萬喚都求之不得的。

狀態欄和導航欄都能變色了，在安卓5.x以後的機器上用起來更舒服，更有一體感。希望以後添加個主題設定吧，就是自定義Action Bar（或者說全局）的顏色的。

（用酷市場做個例子）

吐沒有滑動返回效率也變低了。好看不完全代表好用。

通知圖標真的好不醒目啊！以前的紅點還顯眼，雖然也是沒什麼人點贊的小透明，可是還是覺得看到那點紅色有種裝逼的快感。

讓我們知道了2.4效率其實很高

（其實現在的樣子很不錯了，5月19更新）

界面和動畫比以前舒服了。但是有一個很不爽的地方，每次看回答，快要看完的時候，一不小心拉到最底部，就會彈出來作者信息的那個卡片，把上面大部分的信息都遮蓋上了，很不爽啊！因為我是習慣從上面看答案的，看完一行拉一行。

另外，卡片彈出來之後，還要用手往上劃一下才會消失。而我希望的是它不出現，或者是隨便點一下頁面就會消失的。

剛剛通過另外一個提問的第二名答案換回舊版，頓時神清氣爽！

【知乎最新改版是否令你不舒服？】自渡鵬鵬：上一個版本知乎下載地址，記得先刪了知乎再安裝【知乎下載】知乎官方下載 … http://www.zhihu.com/question/39857957/answer/83464531 （分享自知乎網）

不是不喜歡新的UI，但感覺設計的人理解錯了這個UI的特點，過於的繁複，顯得格外的冗雜，內容顯示變的混亂。

原本清新質樸的風格蕩然無存，取而代之的是各種視覺干擾，讓人變得煩躁，尤其是遇到大段的文字，會讓人失去閱讀的興趣。

而這些問題，在老版本是不會出現的，他給了文字最大的權利，讓文字的面積最大化。會讓人變的安靜，去靜靜的閱讀每一個答案。

知乎是知識分享社區，如果它的app設計，讓大家失去了閱讀知識的興趣，即便這個UI再美，再炫，也是無用的，是不恰當的創意和創新。

UI看起來很小清新然而並沒有什麼卵用，用了一會發現幾個問題。。。

評論定位的問題還是沒有解決→_→

1.右滑變成了進入個人中心。。。吐血，誰沒事去自己主頁看啊

2.問題首頁可以直接看到簽名是挺好但字體要不要和id一樣大啊？注意力都到簽名去了，導致在問題首頁答案能看的部分少了並且字體很小，經常把簽名當做答案：這回答怎麼和問題毫無關係？啊尼瑪這是答主簽名，回答是下面一小行需要完全點進去才知道到底說了什麼，每次都要告訴自己這是簽名不是答案好痛苦

3.不知道是bug還是故意這麼設計。。。滑到下面問題會攔在中間，擋住三分之一的頁面，而且頂端是空著的可以看到部分字。。。強迫症表示看的好痛苦

懸浮界面的想法挺好但能不能不要做的這麼傻逼

話說這是測試版嗎？為什麼我手機自動更新了？

球告知怎麼改回去_(:з」∠)_

贊同和反對能直接點嗎？這樣很浪費時間

收藏也不方便要多劃一下(收藏夾多)！

置頂也不方便好嘛？

不僅右劃沒了，返回鍵也用不了！

進別人的首頁能不能直接像以前一樣，現在的首頁信息量太少了(信息量少啊)！

這個卡片化真的是華而不實！

滾動條是怎麼了？

太多了，說不過來，做這個軟體的難道不用這個軟體嗎？我還是用老版好了。

新版的知乎客戶端UI變化比較大，反正暫時我還是不能適應，看問題的界面上，明顯突出了回答問題的答主的信息和頭像，贊數放到了最右邊，我覺得對瀏覽問題內容造成了干擾，很不適應，不太喜歡

為了遷就知乎，把其他圖標強行弄成了圓的。

倡導多年的扁平化設計概念瞬間餵了狗。

頁面瀏覽效率變低了。

最重要的是

還我滑動返回

設計的目標就是解決問題，服務於上一層的決策。所以不僅僅是改變風格的問題，而是為了目標而改變

1.從首頁來看，知乎里的資源在向專欄，圓桌傾斜。（如果這不是本意的話，那麼我無話可說）

專欄，文章的曝光度比起2.44版本有了無比巨大的增加。

2.因為首頁里的內容不僅僅是問答模塊，還有文章，圓桌的顯示，還有一些動作（對卡片左劃標記為不感興趣，好評），從Nova的視頻來看，應該還有卡片右劃的動作（猜測為鎖定該卡片），這是倆個動作。所以這張圖放這不合適，後面回放一張適合這個圖的地方，那才真的是槽點。

下圖這樣看是不是還挺舒服的？

現在的問題是文章的量還沒起來，且右划動作沒有上線，單動作單卡片大量顯示在用戶的首頁。

專欄文章的配圖要走點心了，如果圖片太差那就只能畫面太美不敢想像。

但如同程序員的BUG一樣，解決一個BUG會引入新的BUG，卡片式設計會打斷遊覽的體驗。相應的單個問題（卡片）的權重上升。對比於原來的版本，會要求出現在時間線上的卡片質量增加，而不再是通過遊覽來主動獲取。至於如何提高時間線上卡片質量，那就是關注高質量產出的人，低質量的只能說再見了。（不知道此舉是否會改善知乎水化），畢竟你關注的人的質量，決定你時間線里的信息質量。

下面來說說單個卡片里的問題。

1.文章專欄的配圖要求更高了。（但是我很困惑，這些的根本不應該是文字輸出么？配圖奪取了眼球，但與文章的本質發生衝突）

2.文字卡片

視覺部分：知乎2.44版本的點睛色分別位於左上（用戶名藍色，可點擊），左側中偏下（藍色的點贊數，且為深色塊白色數字），用戶頭像偏小且為正方處在右上（視覺干擾很小）。僅問題標題為深色塊，視覺焦點基本處於左側且問題的辨識度高。

舊版視線路徑如下

3.0版本取消了左上角用戶名藍色，且不可點擊，左下居中的點贊數右移至頭像下發，且變化為淺色方塊，深色數字，更加吸引注意力。頭像放大，且變圓，與卡片內其他造成明顯區別，更加吸引注意力。回答內容的文字也加深，感覺比標題就淺一點點，視線路徑如下

經過對比，新版完跪。

版型排版部分，上圖對比

3.0版本明顯頭像和點贊數增加了頭像的曝光，但是頭像和點贊都是和哪對齊啊，逼死強迫症寶寶了

文字排版部分

問題標題部分：因為新版的卡片式設計和頭像佔用了一定位置，導致問題標題位置變小，知乎團隊做出的改變為更改字型大小大小（或許還更改了字間距），但加重了問題的重要性下降，且對比於2.44版本，更易出現倆行，更加加重了卡片擠占屏幕大小問題。

答題內容部分：

（1）字體顏色明顯加深，懷疑是跟卡片背景底色做區別，但是與問題標題的區別沒有以前那麼大，再一次降低了問題標題的識別。

（2）因頭像和點贊位置佔用，答題部分字體變小，間距變小。（與原版本相比每行字數區別不大，但字間距太小，造成閱讀時感覺局促問題）

（3）與原版本對比，答題部分由3行增加至4行，提升了用戶對答案的預判，但增加了卡片大小問題。

新版卡片里的問題在於，哪裡都是重點=沒有重點

關於回答頁面，沉浸式做的不錯，閱讀起來沒有其他因素干擾。說閱讀時看不到問題的，我很困惑。難道不是將問題帶到心裡然後去看回答么？回答看一半然後看問題的都是什麼情況？

新版讓我困惑的地方在於有的答案太長，如果需要上劃看前面的內容時，低欄會出現，然後會有這樣的

這個部分讓我很困惑，因為沒有幫助那欄的陰影很輕，這麼大的空間漏著字，在它出現滑動時，感覺就是底下漏著洞。。。望做出改變。從規範來說，倆個材料的有相對高度是沒有問題的，但是倆個材料的Z軸高度不同，那麼相應的材料陰影應該有變化。

私信頁面簡直不能再丑

這是我第一個發現有app私信內容居然能頂到邊的，邊框圓角要圓不圓的樣，還有長的信息讓我困惑，乍一看之下都不知道是別人發給我還是我發給別人。

最不遵守design規範的莫過於這個位置

明明是一樣的信息流，卻要用卡片設計！！！Don『t！！！

總體來說，如果是要增加專欄和圓桌的比重，那麼這次的設計我是認可的，大方向沒有問題，但是很多的細節需要優化。

如果不是，那麼只能說這是為了design而design的設計。

不能右滑返回上一頁，不爽

總體感覺：新穎

但是華麗的ui不一定就能得高分。知乎主打內容，用戶估計不會太在意版面如何華麗！他們只看文字。所以希望不會影響體驗，體驗兩三天再來答。

講下兩個讓我比較不解的地方：

1.就不要有什麼點擊效果了吧----錯覺是我手機屏幕出現問題，毫無美感的設計。。

2.是不是漏掉了「回到頂部」這個點擊按鈕？

丑！強行遵循標準還不是不要的好，一個屏幕能看的內容也不多，效率略低

我剛更新，簡直曰了狗了，這兩邊空出這麼大塊地方幹嘛用的？我不管你有什麼狗屁高深的理論，我就跟你講，我看著不爽！

你問我是誰？誒，也是哈，我有什麼資格說三道四的？我不過是區區戶而已。

知乎更新之後我馬上打開編輯功能，沒想到仍不支持富文本編輯，富文本仍需要去使用電腦編輯，感覺本次更新意義不大，非常失望。

編輯內容字體變小很好，編輯不比閱覽，字體大時審閱不直觀，耽誤編輯效率。但插入圖片直接在稿件中全屏預覽，相較此前縮略圖顯得臃腫，沒什麼必要。

卡片風格運視覺觀感很好，但運用過於牽強。卡片分割內容關係，更適合併列顯示同類內容，如諮詢條目等，所以用在問答具體內容界面則產生無必要割裂感，還佔用篇幅，稍顯凌亂。

回答預覽中用戶名和用戶簡介強化過度，字體太大，所搶佔視覺空間本該重點留給回答內容。這種版式多用於顯示標題，可是知乎提問命題其實就是傳統意義標題，下方答案不再需要存在所謂標題，把用戶信息放置於此實在不應該。

當翻一個提問所有答案直至底部，屏幕頂部會彈出提問框佔據約三分之一屏幕空間；即使再向上翻閱往回看也不會消失，非常流氓。除非向上劃後再向下劃，它才會消失。我不明白這樣設計是何理由，除非有人能翻閱答案時忘記命題；堪稱反人類。

淘寶android客戶端也有相似失誤，毫無意義地遮擋正常內容。

另外，軟體有個漏洞，當插入圖片後，無法翻閱之前編輯內容，滑動後會彈出虛擬鍵盤並立即彈回至文章底部。

方才發現，原來再次編輯問題，插入圖片就會呈現縮略圖。期待知乎進一步優化功能，改進設計，考慮android兼容性。

手機：魅族mx3