如何評價 Google I/O 2013 上發布的新版 Google+ 的設計?

Google I/O 2013 發布了新版的Google+,新版界面採用了卡片式布局,與移動端設計更加貼近,同時支持響應式。此外,用戶發送的信息會被自動添加標籤,標籤的內容由Google 根據信息的內容自動提取,與搜索進一步整合。 https://plus.google.com


作為G+每日必上的用戶,斗膽稍稍地來說幾句。
著重說說以下幾點:

  • 信息呈現

Google+於此次改版中,進行了大幅度的界面布局修改,原本的直線式的信息流,變成了「卡片式」的瀑布流,直接把側邊欄的操作隱去,採用浮動方式,不同寬度的解析度都能找到比較適合的顯示方式,目前看到的是最多有三欄的卡片顯示:

可以看得出G+是想把重點放在信息流的呈現方式上,尤其是把圖片視頻類的信息流著重顯示了。

有時候,圖片與視頻會佔用整個寬度,而且這種狀況似乎是隨機的:

原先的自動刷新取消,變成了一個被G+上的朋友吐槽為「瀑布流的水閥」的點擊刷新載入頁面的控制項,它的位置在頁面的左上方。我覺得能夠控制自己哪個時候刷新看新信息是比較好的方式,不過也有很多用戶抱怨沒有自動刷新了,所謂有好有壞吧。
瀑布流的呈現方式也有很多人表示不適應,看著眼花,我個人倒是挺喜歡的。

  • 側邊欄

由原先的固定於左方顯示,變成了需要用戶滑鼠移至左上角才可以看到的呈現方式。其實用戶並沒有多一步的操作,只不過這個操作被隱形化了。
整體上,側邊欄更加簡潔。

右方側邊欄為hangouts界面,默認顯示,但可以點擊上方圖標收回。

  • 細節變化

這個可以列舉的太多了,我就稍微拋磚引玉下吧。
當用戶下拉到一定程度的時候,頂部界面高度變小,予以信息呈現更多的空間,
前:

後:

相冊功能更加多樣,並且強大。具體可以實際體會下:

進入他人個人頁面出現很明顯的hangout聯繫卡片,Google越發的突出交流的重要性,而不是把G+簡單的作為一個查看信息流的工具。

字體上,英文字體優先選擇了roboto

  • 過渡動畫

新版的過渡動畫更加多而且更加順滑了,讓體驗更加流暢。
尤其是發布信息這一操作上的過渡讓人眼前一亮,我都上癮了!真的是能夠激發起人發信息的慾望啊!

想看具體動畫效果的可以去看看此視頻:
視頻封面Meet the new Google A stream with style and smarts視頻

但據一些G友反饋,對於低端機,操作就沒有那麼流暢了。

總體上,這次的改版讓人眼前一亮,改的不僅非常大膽,不給用戶選擇緩衝的餘地。
Google勇氣可嘉。至於是否能夠成功,我相信Google不會滿足於此,G+還會不斷變革的,下定論還太早。


【多列Timeline】

  • 瀑布流式的Timeline不用擔心再被吐槽浪費空間了,但非常亂(平板上的G+也是雙排,但都是規則的正方形,不會顯得很亂)。這種參差不齊的瀑布更適合用戶在海量內容中快速瀏覽興趣點,但對於大部分人來說,SNS的Timeline是需要挨個看一遍的東西,Facebook也只是在Timeline(相當於G+的Profile頁)里採用了雙排瀑布流。
    (我看好Facebook新版News Feed的設計,不過這玩意兒啥時候能給人用上啊(╯‵□′)╯︵┻━┻)
  • 在豎向上參差不齊的另一個問題就是讓人分不清順序(請參考漫畫分格技法)。不知道是不是破罐子破摔,G+似乎連排序規則也一塊兒做了調整:我看不到自己或一些朋友的最新post,而朋友四月份的post排在我前兩天剛發的post上面。
  • 其實浪費空間並不是G+上個版本被吐槽的根本原因,關鍵還是Timeline沒有居中而是死貼著左邊。新版里Timeline是居中了,把Layout改成單排能夠得到類似推特微博的布局,但請將Compose框放在左側(像推特那樣)並始終顯示吧(示意圖如下)。點擊Compose框後向四周拉伸並把post擠開的效果估計也挺不招人待見的,放在左側,改成只向下拉伸會好很多。

【緊湊感】

  • 我喜歡照片列表和卡片(如下述)里透出的鮮明的緊湊感。相比之下之前版本的設計有些平庸,特別指出一下,相冊封面hover時像撲克牌一樣旋轉展開的效果我一直覺得特別中二且不協調…
  • 包含圖片的各種卡片廣泛使用了無邊框(padding)設計。

    這與在各種App里新推的Google Now風格是一致的。

  • 照片列表的間距縮小至2px(左圖),多照片post裡間距甚至只有1px(右圖)。舊版的間距相對保守一些(搜不到舊版截圖作對比)。

【新Hangouts】

  • 之前提了一個問題(如何評價新版 Google Hangouts App 的界面設計?),不過使用後發現新Hangouts在多平台的體驗都高度一致,因此嘗試在這個問題里總結一下。
  • 新Hangouts目前有手機app、Google+、Gmail(需要選擇「Try the new Hangouts」)以及可以直接在桌面使用的Chrome擴展(安裝Chrome擴展後,Google+和Gmail的Hangouts都會被其接管)。後三者界面基本相同;手機app有更多內容,不過聊天界面與桌面基本一致。
  • 新Hangouts、Whatsapp(Android)、微信(反正iOS Android都一樣)的聊天界面對比如下:

  • 消息時間:圖中微信未顯示,但諸君應該印象深刻,微信會每聊幾分鐘就在屏幕中央顯示單獨的消息時間,加上消息的間距較大,非常影響同屏顯示的消息數量。
    Whatsapp在每條消息右下角顯示時分,屏幕中央單獨顯示的是日期,即每天只出現一次。(Whatsapp我使用不多,以上根據截圖分析。如有誤請指正)
    新Hangouts只在每條消息左下角顯示距現在時間,缺點是舊消息看不到具體時分,相對時間感覺也不如絕對時間直觀。
  • 頭像和名字:UC
  • Balloon:UC
  • 消息間距:UC
  • 表情:UC
  • 誰看到哪裡:UC

【其他】

  • Profile頁里的默認Cover比以前好看多了。上圖是舊版的泡泡,下圖是新版的Google色調彩紙(大概有8種)。

  • 今年愚人節新增的Emoticons功能不知被丟到哪兒去了…

類似迅雷方舟那個,覺得只適合展示圖片,對文字類容完全是災難,看起來非常混亂

可能因為卡片要適應窗口排列的原因,使用時有卡頓,缺乏之前的流暢感

左上角那個大紅方塊的g+異常礙眼

左邊來個大紅方塊,右邊又是個還不錯的Hangouts,頁面也扁平了,還有各種方框,難道Google想嘗試把metro和傳統界面結合起來?
(剛發現home樣圖標和大紅G+其實是一個按鈕 ……)

點hangouts的時候頁面則很驚悚的往左一
我勒個擦 這樣很有意思? (真的被嚇到了)第一張圖裡的留白就夠了好不好,還有PC上我要那麼大圖標列表幹啥,一整個屏幕上下寬不夠顯示10個好友,是要讓人去摸么,Google你是看上win8了么?

兩個首條異常的討厭,往上滑就彈窗一樣跳出來第一種,往下滑又彈第二種,不堪其
加上左側右側彈窗、一直自動重排,太多會動來動去的東西,瀏覽信息被徹徹底底的干擾了

當打開一個hangouts時,因為太大,滑鼠划過去就激活好友卡片,也容易造成干擾

允許這麼大的那啥也不知道有什麼意義

左邊變彈出的那個列表還有一個奇怪的地方,我在這列滑動右邊的那些卡片也會上下滑動,這個設計是幹嗎的?
不知道Settings在這裡佔個坑干毛,沒這個左邊就不用滑動條了…
還有大家都習慣頭像下拉是settings,Google其他服務都在頭像,我還以為G+ 沒settings了找了一下

很多事情變得繁瑣步驟增加
例如之前
滑鼠移到Comunities靠右的位置就直接顯示最常去的Comunities,點一下就過去了
現在 移到右上紅色G+讓這些顯示出來 → 往下移點Comunities → 在Comunities的頁面里點想進的群

這裡還有一個奇怪的地方,主頁設置成一張張往下排,到其他頁面又回到亂圖模式了,左邊留一塊空白,可是……只有主頁有一張張排和混亂排的選項…… 希望這只是個bug
(答案的圖裡混亂排的都是自動變的,明明設置的一張張往下 = =)

其他地方還有一些增加步驟的,比如more里就一個Download、一個report,為啥還要多一步點擊 ?
點下面按鈕出來的all里不能直接跳轉相冊了(之前一直直接跳轉Down all下妹子圖),現在得自己到帖主的主頁里找相冊,相冊還換了地方弄得我昨天一直沒找到可是又有一大波妹子圖想下……

聯繫到那個奇怪的紅色G+ 、扁的界面、使用時故意增多的步驟、兩種最頂端的樣式……我猜Google請了微軟的設計師

之前的界面很好看,雖然大塊留白但是很清新,不懂英文也能立刻上手(豆瓣也是這樣留白)

現在的使用難度被人為增加,頁面凌亂,左邊右邊都彈出窗口,圖標大得容易觸屏到有餘,可能是為平板設計的。PC上看異常討厭,用滑鼠鍵盤操作的感受更是奇怪。干擾瀏覽信息的東西太多

沒用過G+上個版本的可以想像下豆瓣從小清新變左邊右邊都加個能彈出的窗口,一篇篇排列變成圖裡的雜亂排,首行會動來彈去干擾閱讀


卡片式的設計加強了用戶體驗的一致性
類似於烏班圖
搜索本來就是谷歌的主心骨,所以所有的東西都會盡量跟搜索扯上關係,就跟國內的微博搜索一樣.
只是谷歌更傾向於技術性.
可以換做理解為search是血管,g+是血紅蛋白,頁面設計是血管流通度.


Google 走在了正確的道路上


馬克


我覺得,雙列在總體上給人的感覺還是不錯的,畢竟之前在Google+的平板客戶端上已經採用了這一設計,我個人非常喜歡的iPad微博客戶端vcard也使用了這一設計,這下桌面網頁端,iOS以及Android客戶端就都統一了。比起Twitter,Google+在內容上的側重點不一樣,圖片在後者上占的地位重要的多。當然Twiiter有比較開放的API,注重圖片瀏覽體驗的Twitter用戶大可使用第三方客戶端,而Google+用戶沒有這樣的選擇。

我觀察到的另外一點是,當你的瀏覽器窗口在橫向上足夠寬的時候雙列顯示會變成三列顯示,這樣確實就因為橫向的閱讀距離過長而給視覺造成了很大的壓力。我自從用了Mac以後就再也沒有把瀏覽器拉的那麼寬過(一般都保持在1024左右,只有XDA-Deverloper比較反人類,需要1280的寬度才能完整顯示,我又測試了下,Google+在1280這個絕對可以應付所有網頁的寬度上也還是只有兩列),我估計Google的網頁設計師和我在瀏覽網頁方面的習慣也差不多,之所以做了這麼一個三列模式純粹是因為之前有太多人吐槽Google+的上一版設計在高解析度顯示器上留白太多。

要說缺點的話,那就是Google+的網頁越做越華麗,在有些電腦/瀏覽器上那是相當的不流暢。


我一直很喜歡G+移動端的設計,拿手機看那是相當的舒服!上一個版本的網頁版被批浪費空間,沒想到這個版本更浪費!!更新第一天我打開G+第一感覺就是為了適應移動設備而強迫web用戶在PC上看Wap網頁的感覺。。。。。

還有前面看有人說最多有三欄,我為什麼只有兩欄啊~~三欄的話至少看上去不那麼浪費啊。。。。


Wil Wheaton 就是那個讓某個情景喜劇男主角又愛又恨的大名人,是這樣看待google+的新變化的:

So it only took me about 30 hours to get used to the new layout. Initially, I was overwhelmed by the data, but now I find that I can scan it quickly and efficiently, which is pretty nice. I think I"ll end up making more circles focused on pure information, because filling a screen with six or so posts at once makes it easy for me to page down and get to posts from my actual friends.
Not bad, Google. [Not Bad Obama] Not bad at all.


谷歌的設計真的頂YY呀


與搜索更加緊密的結合在一起,但是採用雙欄模式閱讀起初不是特別習慣啊;不過個人覺得g+的UI設計是新浪微博,twitter和facebook無法相比的


推薦閱讀:

做設計一定要有強迫症嗎?
為什麼設計師不願意被稱為美工?
著名互聯網公司最早的登入界面(首頁)是怎樣的?
知乎上,值得推薦的「交互設計」系列問答有哪些?
為什麼專業相機的操作界面 (UI/UX) 一直沒有顛覆性改變?

TAG:用戶界面設計 | 用戶體驗設計 | Google+ | 如何看待/評價X | GoogleI/O2013 |