如何評價 V6 新版新浪微博 Web 端的卡片式設計？

01-15

先來看看 Google 是怎麼定義 Card 的

A card is a piece of paper that contains a unique data set of related, heterogeneous information, for example, a photo, text, and link all about a single subject. Cards typically are an entry point to more complex and detailed information.

卡片是包含各種信息（有關同一個主題的圖片、文本、鏈接等）的一種獨特的數據集合。通常是更複雜詳細信息的入口。

而新浪微博 V6 中存在大量不符合卡片設計初衷的「偽卡片」，或者說，卡片化得過頭了。大概就是凡有點關係的元素就統統扔進一個白框框里，沒有關的就單獨扔進一個白框框里，各種大大小小或高或矮的白框框，好像白框框不要錢似的~

微博分類缺一個三角的導航條（與卡片沒什麼關係，就算是導航條可缺個三角下面又斷片兒了是怎麼回事。。）
右側按鈕鏈接卡片四不像的「新版微博使用指南」入口
個人主頁左側生硬地被分割成獨立的「關注/粉絲/微博」數
淘寶廣告豆腐塊

這樣做的一個最明顯也是最糟糕的一個結果就是：當所有的東西都照一個樣子被框起來後，信息失去了重點，並且多了許多不必要的間隙造成視覺干擾，就成了下面大家吐槽的樣子：滿屏都是縫~

業界當紅炸子雞 Card

現在越來越多的網站開始使用卡片化的設計，這樣做也是配合響應式網站的大趨勢，實現跨平台的視覺、操作體驗的統一。

國外比較主流的社交網站，幾乎在 feed 展示上都採用了 Card 的設計，估計微博團隊也參考了很多案例。

Facebook

Google+

個人總結了微博 V6 的卡片受大家詬病的幾個原因：

1、自定義背景是硬傷

開放升級後很多用戶最直觀的感受評價就是兩個字「清爽」，但Card之間的間距設計也讓不少使用花色背景圖模板的用戶很不習慣。好吧，換膚模板功能是多年以來我們自己挖的坑，這個坑我們日後會儘力的填補，你知道首頁為什麼會有個底色遮罩的設計了吧
——《水器相形—新版微博設計錄》

自定義背景與老版微博的兼容性更大，不會透過卡片之間的縫來干擾視覺；新版卡片和花色背景的配搭簡直是無法忍受。首頁的底色遮罩這種權宜之計事實上起到的改善作用並不大：純色抽象背景上顯得很多餘，花色背景上依然很花。。

自己參考 G+ 把微博的背景換成了 #e5e5e5 純色平鋪，個人主頁看上去舒服多了。

2、feed 非圖片主導，注意力容易被「縫隙」干擾

Twitter、G+、Facebook 中包含圖片的卡片中，圖片都是以大圖展示，吸引力很容易就被拉到 feed 信息上去。而微博的圖片默認是小方塊顯示、九宮格，吸引力本來就弱，這時如果恰好碰上花色的背景從 feed 卡片間的縫隙漏過來，視覺噪音極大。

3、全是重點就是沒有重點

所有的東西都放在各種大小的白色框框里，沒有有效地組織起來，整個的「形」很零散。簡單來說，就是視線不知道放在哪裡好。。

這一點我比較喜歡 Twitter 的做法。滑鼠懸停每條 feed 時會有一個輕微的背景色變化，點擊後才展開獨立成一張卡片。有重點，有變化。

4、卡片+卡頓？？

看到不少反饋說 V6 卡得一「嗶」（我用 safari 沒有明顯感受），如果真是這樣的話，卡片和自定義背景本身造成的視覺不連貫+體驗上的卡頓，還能愉快地刷微博么？~

當然，新版也有一些比老版優化的地方。比如信息架構調整，不再看到以前老版的官方遊戲、應用入口了（從來沒用過，只覺得礙眼。。），整個界面看上去內容「瘦身」很多。

圍繞降噪，還有諸多細節的優化。其實每一個「幹掉」都意味著巨大的成本和壓力，有來自用戶習慣的，有來自合作方的，入口改變了，功能刪減了，數據必然會受到影響。但為用戶獲取內容減少干擾才是最迫在眉睫的。
——《水器相形—新版微博設計錄》

可以看出來，微博設計團隊也是做了一些割捨的吧，還是想通過整合信息做減法來把更好的體驗呈現給用戶。

最後，雖然新版微博有那麼那麼多的槽點，可我還是傾向於贊同這次微博改版的嘗試。

總是要先開始改變了，才知道怎麼做會更好不是嗎？

我司切圖工 @陳希 Chris 老師點評，一針見血。

1.卡片使用過於泛濫。

中間內容區和右邊欄都用卡片，整個界面過於散亂，容易造成視覺干擾，信息層級不夠清晰。其實內容區使用分割線設計會好一些。移動端使用卡片是為了解決用戶在較小屏幕設備上的碎片化時間瀏覽體驗問題，減輕用戶視覺負擔。PC端由於用戶使用時間較長，屏幕較大，對於微博這種輕量型信息，在單列情況下，使用卡片反而會降低瀏覽效率。個人認為在PC端，卡片應該更多的起到分割功能區域的作用，這點twitter做的比較好。

2.微博操作按鈕過大，影響瀏覽效率。

3.個人主頁微博列表移到了右側，不明白為什麼。這應該是對用戶來說優先順序最高的信息，是用戶第一眼想看到的，感覺還是原來的左側比較好。

4.加入了timeline，這個功能不錯，方便回顧歷史微博（雖然一點看的慾望都沒有 ─.─||| ）。

5.視覺風格整體泛白，標題，內容，操作等視覺區分不夠明顯，個人不太喜歡。

6.左下角微音樂按鈕真有必要一直顯示嗎？

暫時發現這麼多，等有新的問題後再更新。

——————————————————————————————————

剛用了插件極簡微6 https://chrome.google.com/webstore/detail/%E6%9E%81%E7%AE%80%E5%BE%AE6/kedimpgoojmheehnejdlhalogkaoppga，又修改了部分css代碼，感覺好多了。可以對比下。

正如有朋友評論的那樣，微博裡面元素較多，操作較多，卡片更方便操作。微博置於卡片內不會顯得支離破碎，因為卡片間相關性本就不大，因而，並不會影響整體閱讀體驗。

v______話說一半可能有誤導，還望見諒_______v

作為一名開發者，我也疑惑過。如圖，無需過多解釋。

首先發個福利，如果你不喜歡卡片化過重的V6，那麼趕緊去下個微博急簡試試（ChromeWebStore搜索)，網盤下載：http://pan.baidu.com/s/1bn2F9SV；

如果你不知道微博急簡是什麼，看這裡：新浪微博越來越「重」，可能帶來的負面效果有哪些？為什麼？ - diff 的回答

---

回歸設計討論：

明顯的，微博V6就是 Facebook與Twitter的雜交。

卡片化，就是學FB，但是，忽略了一個細節，FB的首頁背景是淺灰色的，所以，卡片分割，比較含蓄；而微博信息流首頁，用戶可以自定義背景，所以當背景較深時，卡片較強的分割，感覺很重。對比一下：

卡片化過重，是我覺得V6最大的問題。對於設計師來說，這個比較不能忍，因為卡片過重，刷微博真的會感覺視覺疲勞～～～

所以，我再次自己動手了：去掉多餘的元素（包括廣告），隱藏非常用元素。效果圖如下：

看到這裡，如果你也想用極簡的V6，戳 http://weibo.com/1670140372/BskOYjc0N---

話說回來，V6還是進步不少。如果這裡有微博設計部門的童鞋，給你們三個建議：

卡片形式，可能太重；
不常用信息、功能，優雅的隱藏起來；
視覺設計不要用力過猛～

V6新版新浪微博的版面其實是對平板操作跟簡約卡片風進行優化的，並且給我感覺有點抄輕博客的一個模板樣式。總的來說我個人是偏向喜歡舊版的。

新版優點

提升用戶獲取內容的效率：推出「發現」頻道，在首頁導航欄設置入口，更方便用戶獲取其他賬號的（你沒有關注那些賬號，但你可能感興趣的）內容。這建立在微博前期的數據和關係沉澱的基礎上，並且將提供多組標籤供用戶進一步篩選。
提高閱讀體驗：風格更為簡潔，PC 端的微博信息流和移動端一致——以卡片的方式出現。
內容生產、傳播和變現工具：這是針對不同垂直領域的認證用戶推出的。以唱片業為例，音樂人通過專屬功能模塊發布的歌曲，將以卡片形式呈現在其微博首頁的顯著區域，方便粉絲試聽和分享，以提升內容生產和傳播效率。在新歌上線時，音樂人可以通過該模塊開通了音樂付費下載功能，用戶可通過付費的方式下載了音樂，也可以買演唱會門票。
首頁左邊的一堆繁瑣應用全清掉
對觸屏平板點擊進行了優化。

缺點：

背景圖如果不是純色抽象的話，就覺得不怎麼好看。

模塊的間隔過大，分類可控性低，順序不能自定義。

之前一些朋友頭像是匹配邊角的那種換了新版頭像變圓形框得換頭像。

個人主頁相冊界面沒舊版匹配雜圖。

剛看到升級信息時蠻期待，今天下午回來群里有人在用了，本來打算主號升級的，但聽群友說升級沒法退回，於是拿別的號測試做對比。

新版微博個人名片吧頭像跟各種資料都居中設計了，連白底色也是居中對稱的。

頭像從原先的中等大小正方形改成小圖的圓形，並且把原本地下的各種繁雜鏈接去除，在名片下方突出關注跟私信的按鈕。

（我的小鳥游眼睛被頭像擋住了T A T）

新版微博首頁默認樣式背景模板

舊版微博首頁自定義背景

微博logo也因此上下方多出點空間做一個上下的居中設計。

原本的橘黃色間隔線移到頂端，有黑灰色漸變的頁頭底色改為純白色並且比原版改長了點。

四大板塊吧[熱門]改名[發現]，並刪除[應用]欄。

左側縮小了，上攔辨識圖標跟繁雜的應用全部去除確實看著乾淨很多。

字體變粗。

左下角增加一個微音樂的應用，可以不另外打開音樂播放器就能邊聽音樂邊刷微博。

私信模塊去掉了是否在線跟數量提示。

覺得這個不好，去掉了顯示在線我怎麼知道對方是不是在線？

發布微博的模塊方面，文字框邊框從圓角矩形改正長方形並且縮小了文字框。上方那排居中的字下移。表情、圖片這些選項圖案改成線條型的並放大了點圖標，[更多]里的選項邊框從正長方形改圓角矩形並加大。也是方便了觸屏點擊。

[發布微博]按鈕從默認的灰色跟有文字錄入的紅色改為默認的淡粉紅色跟有文字錄入變橙色。

右上角去除了會員的鏈接。

從舊版的加個紅點標示新提醒改為提示信封數量數字。

把寫新微博的按鈕從昵稱ID旁邊放到最右並橙色醒目標示。

微博提醒邊框從正長方形改圓角矩形並加大。字型大小沒什麼改變。

個人主頁整體改成卡片模塊化，並且每個模塊間是有間隔的。背景純色跟有規律的幾何類圖形倒沒什麼，像我這樣插個具體圖像做背景的就感覺這個設計讓主頁變醜了。

個人簡介從單獨的一個模塊移到封面圖中間居中，頭像也跟個人名片那樣從原先的中等大小正方形改成小圖的圓形，並且把原本地下的各種繁雜鏈接去除，在名片下方突出關注跟私信的按鈕。

新版版面更突出個人信息。

文章開頭也說了這個新版個人主頁整體樣式給我感覺有點抄輕博客模板。只不過左邊多了各種雜信息。

新版把微博跟雜模塊的位置反轉並每個分割開，這個需要點時間適應。

微博關係用戶的頭像也從正方形全部變成圓形。

取消了橫線分割用間距拉開使得底色佔用率更大，微博的邊框配色則減少。

每篇微博都變成獨立的一個卡片形式。

新版吧舊版單獨微博右邊的四個信息單獨一排間開並重新排列順序使得視覺看起來整體更卡片。這樣的樣式也是方便了小屏幕（手機端、平板端）使用瀏覽器的電腦端頁面觀看微博時執行觸屏點擊操作。

右上角增加了年份查詢。

返回頂部改簡潔了。

恩，很像知乎這個呢。

下移到一定位置後左上角出現一個固定的博主信息。

個人主頁相冊界面對比感覺舊版比較匹配各種雜圖。

間距加大、邊框從正長方形改圓角矩形。

翻頁按鈕從右下角改成居中，按鈕也加大間距，方便了平板及手機點擊。

展開屏蔽微博的選項也增加了。

目前就這麼多發現。想要升級新版感覺還看得過去的話我建議大家選擇默認樣式背景模板或者純色的、幾何重複圖案、抽象畫類型的背景做底色。要是想用角色人物或具體圖像啥的還是不要升級先吧，因為暫時沒法改回舊版。

——————————————————————————————————————

2014.10.28 22時22分補充

新浪微博已採取強制性更換新版。

再發一次對比。

並且果然官方的建議指南也是跟我說的差不多。

http://weibo.com/p/1001603771841666792976

參考資料

【1】新版微博設計錄

http://card.weibo.com/article/h5/s#cid=1001603771091800720344vid=extparam=

用css把卡片之間的空隙刪去了, 瞬間比原來高大上了先裝stylish

火狐:Stylish :: Add-ons for Firefox

chrome: https://chrome.google.com/webstore/detail/stylish/fjnbnpbmkenffdnngjfgmeleoegfcffe?hl=en

然後安裝插件

新浪v6 卡片hack

新版微博的卡片化設計應該是參考了twitter，但是設計的很失敗。

問題包括：

1、層次太多，背景層和卡片層之間又增加了透明層（twitter背景亮度比較高，且沒有透明層）。

2、卡片和背景之間的對比太過強烈，視線受干擾，不容易把注意力集中在內容上。

3、卡片設置過多，所有東西都卡片化只能增加混亂程度，最基本的排版原理之一就是要把相似的東西放在一起；

4、排版過於網格化，頁面結構就像是簡單的矩形堆砌，缺乏優雅的感覺。

還有，卡片的border radius（圓角）太小了，這樣卡片的特徵不明顯，更不容易和中框（間隙）區分，會把過多的注意力吸引到中框上。

總而言之，新版微博你首先看到的是卡片之間的間隙，而不是內容。

先佔個坑……

1、卡片式設計一直被稱為移動設計的未來，在有限的手機平板屏幕上上，以卡片為內容載體，可以讓每條微博都形成一個完整而又獨立的信息單體，減少了信息干擾，對微博來說是一種信息流的內容優化，很贊。

現在問題來了：卡片式設計是否適合PC閱讀？

2、渣浪微博的老毛病又來了：為神馬要強制改掉大家這麼多年的習慣，最左邊的是按鈕不是轉發嗎？為什麼突然變成收藏了？這樣子渣浪微博活躍度數據又要下降有木有？PM乃們的KPI呢？

原諒我剛好刷到這麼一條內容出現在我的時間軸上……

微博有進步，但是我完全不覺得這裡需要什麼卡片

今天我吃著火鍋唱著歌，打開新浪微薄，然後看著前端攻城濕秀了半天技術，我的頭像在網頁上飛來飛去，回顧了諸如我的第一條中二病發作微博等黑歷史後，然後藍光一閃（惹！），

結果它現在是這樣的：

一些隨意的吐槽：

整體風格由暗轉明：大趨勢、大潮流。
跟風的圓形頭像，據說對用戶「更有親和力」……誰知道呢……
跟風的 iOS 風格的細線勾勒 icon……（究竟是誰開創了這麼噁心的 icon 風格啊！！！
卡片：還不錯吧，跟連續時間線相比各有優劣。
左邊欄整個都跟著屏幕滾動了，比原來強。但是……消息居然要兩步點擊了！進「所有評論」的話整個頁面要重新載入兩次！喪病！
加了一堆動畫，評論見下圖

"試試 N 鍵發微博吧~？"：怎麼說呢，似乎這個需求是有的，但是總覺得這樣的方式有點 annoying……想起了某數字公司的連擊 Ctrl 隨時搜索。
說起 annoying，看來新浪真是要打算才用這個「annoying 橙」作為主題色了（在移動端已經夠 annoying 了）……連選中文字都變成橙色（咦？我換了 Ubuntu？），已經喪病了……

插張圖，你在微博頁面 Ctrl+A 全選~即可看到以下的大姨媽血崩圖：

我的主頁終於不再只是個綜述而是我的微博本身了，以後看個什麼人的所有微博終於不用跳轉兩次了……（另外我的主頁真的長得好像移動端哦……
微音樂：Damn it！不僅右下角的私信懸浮窗沒消失！左下角又多出了微音樂懸浮窗！還一個白一個黑！不對稱！你只是個微博啊！而且還只是個網頁端啊！怎麼不搞個清理內存一鍵修復 Windows 漏洞懸浮窗啊！
彈出式消息提醒：曖昧又娘娘噠的配色……
打開主頁時，頭像的背景圖片會有一個緩緩的緩緩的收攏的動畫，還挺好看的~
頂級導航只剩下了遊戲，其餘的都裝進了「發現」……自從微信發現了之後，互聯網界就你也發現我也發現大家一起發現（斜眼看右上角），發現個毛線啊……把雜七雜八都裝進發現純屬是懶惰的做法。

於是問題就來了：

V6 版眼不見心不煩啥時候出啊？

卡片本身來說沒啥問題，硬要挑點問題，我覺得互動按鈕採用「兩端對齊」，導致評論、贊、轉發、收藏每個功能之間拉得太寬，用戶在橫向滑動時會感覺特別慢，不如以前功能聚合時方便。

但是一個月大家就適應了，也就不成問題了。

來自：http://weibo.com/3624125415/BrnQVFomy

Google+動畫是用來平滑載入時間的
新浪微博的動畫是用來增加卡頓程度的

1. 不論從卡片化還是「轉發評論收藏點贊」等按鈕的新布局來看，微博V6的設計都努力與移動端統一。

2. 那些截圖一截就是兩屏的，放出來肯定是滿眼大量卡片，讓大家看起來似乎的確是很亂。這和王自如用更斜的角度拍鎚子手機有什麼區別？而實際效果上，一屏的時候真的有那麼亂嗎？我覺得可以接受。

3. V6的卡片化有濫用嗎？至少對於主體的信息流來說，我認為是沒有的。順便來看看微博競品twitter的設計，twitter的信息流一般情況不會一條推就是一張卡片，只有展開某條推的時候才會獨立變成獨立的卡片。效果如下：

#展開前（咦混進了奇怪的東西）

#展開後

而相比twitter，微博微博的轉發功能會帶上原微博和自己的評論，信息結構相對更複雜。卡片化的設計方便用戶更好地捕捉到某一條微博並更沉浸地閱讀。而且在熱門微博的展示上，卡片式設計結合相關微博的功能可見奇效。如圖：

4.但對於界面右側信息，確有卡片化濫用的嫌疑。因為對於很多比較高端的用戶來說，右側的信息就等同於垃圾信息。卡片化這些信息無疑增強了它們的存在感。甚至在不久的將來，我們應該會看到卡片化的廣告= =

----------------以上是對原問題的回答，下面說下我對微博V6的其他感受------------------------

1.更強調搜索：網上看到好幾種V6的導航設計（在做AB？），我就說下自己看到的吧

主導航的搜索框變得更明顯，從我對微博的使用經驗來看，這的確是個非常重要的功能。但我覺得上圖這個設計中的搜索框有點偏，而且和整體界面形成強烈的不對齊感。2.個人主頁的導航簡化了

上一版個人頁面簡直可以用臃腫來形容，導航上後面幾項我基本不會去點。更詭異的是「X的主頁」上只顯示部分的微博信息（僅僅顯示五條），但在導航還有另外「微博」一欄。所以查看該用戶的微博需要點擊多一次。現在好了，在個人主頁的首頁就可以查看所有的微博，「微博」一欄也取消了。
另外一點有意思的設計是：按理說信息流作為最重要的信息應該擺在更容易吸引注意力的左側（舊版就是這樣設計的）。然而新版中個人頁面的信息流擺在右側，個人信息、微關係、贊過的東西、公開分組等則以卡片式的方式擺在界面左側。這應該是個很有目的性的設計。用戶百分百會主動瀏覽主頁的信息流；而其他信息（微關係，贊過的東西等）有利於進一步組織微博的用戶關係，這些功能對於處於衰落期的微博來說應該是比較重要的。

3.點贊、轉發、收藏、評論等操作變得更分散