萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 卡片式設計 新版微博學到的是皮毛還是精髓

卡片式設計 新版微博學到的是皮毛還是精髓

卡片式設計 新版微博學到的是皮毛還是精髓 三聯

  新浪微博3.6.0 版昨天正式在App Store 上線了,和之前傳言的一樣,新版微博除了增加了掃一掃搖一搖等別有用心的功能之外,主要的變化就是對信息顯示形式進行了重新的設計,其中最大的特點就是之前已在多款應用中見到的卡片式設計。

  微博新版的設計,以卡片為內容載體,讓每條微博都形成一個完整而又獨立的信息單體。微博內容和圖片被突出出來,用戶更方便浏覽微博,信息干擾也更少了。另外對於每條微博,你可以方便的留言、互動、收藏、取消關注等。每個卡片上都有完整的信息顯示,並且同類信息或icon 被放在了一起,這種設計確實優化了信息流的內容呈現方式,能夠有序的組織各種信息。

  從之前的新版截圖洩露,到現在的3.6.0上線,網友和用戶的評論與反饋都不錯。而且新版UI 雖然沒有之前傳言的那麼漂亮,但整體上效果還是好了很多。雖然新浪微博官方客戶端在很多方面還是不如一些優秀的客戶端,但這對於用戶來說,已經算不錯的了。

  對於卡片式設計的信息承載方式,很多人會想到幾個月前的Facebook 6.0 設計。當時Facebook iOS 版除了增加吸引眼球的Chat Head 和表情包之外,在內容上最大的變化就是采用了卡片式的設計。盡管當時我們並不清楚Facebook 為什麼會采用這種設計,不過在Facebook 一直變換信息流呈現方式的情況下,我們或許可以理解卡片式設計是Facebook 在探尋更好的信息流展現方式上的另一種嘗試。

Google-Now

  但或許很多人都知道,卡片式設計最初應用在移動互聯網產品中,是Google Now,然而Google 采用卡片式設計的邏輯和Facebook 完全不同。Google Now 上的卡片式設計,可以很好的對不同類型的信息以時間流邏輯進行分隔。不管是天氣、航班信息還是郵件,其內容的組織方式都有很大的不同,卡片式設計可以很好的對每一類信息進行優化呈現,讓用戶能夠更容易接收不同的信息,而不會產生混亂感。後來,Google 的很多服務都應用到了卡片式設計,如Google Keep、Google +、Google Glass 等。

  卡片式設計並不是UI 扁平化的設計,而是內容扁平化的設計,而且卡片這種形式本身可以說是一種擬物。但如果你僅僅把卡片式設計作為一種流行的利於內容呈現的設計風格,你就錯了,卡片式設計對於Google 一系列服務布局有著重要的意義。或許很多人可以看出,從Google Glass 開始,Google 放出了Mirror API 開發規則和文檔,並詳細闡述了Google Glass 應用在開發過程中需要遵守的一些設計原則和內容邏輯。

Google Glass Mirror API

  這時候你就會發現,卡片式設計簡直就是為Google Glass 而生的。不管是Google Now 上的各種通知信息,還是Google + 上的好友時間流,在Google Glass 上都有很好的展現。Google 的卡片式設計,不僅改變了手機或平板上這種豎形內容呈現方式,同時解決了Android 手機屏幕碎片化問題和多終端界面內容展示的問題(比如Google +上會根據分辨率調整單欄、雙欄和三欄卡片信息流,Google Keep 也是)。

  Google 本身是一家互聯網公司,其硬件類型復雜、屏幕尺寸眾多(從眼鏡到手機到7寸10寸平板再到Chromebook),所以這種卡片式的設計形式能夠揚長避短,減少Google 服務在多終端上不統一的問題。

  說到這裡,大家可以理解,Google 的卡片式設計和Facebook、微博的時間流設計的邏輯並不相同(雖然Google + 也是基於時間信息流)。Facebook、微博 對時間信息流的優化,實際上是一種單一或者說初級的內容呈現方式,而Google 將其服務內容卡片化則是在整合互聯網中所有服務的表現形式,就像房屋是一塊磚一塊磚壘起來的一樣,卡片上承載的內容也是互聯網數據中的一塊塊磚。圖片、視頻、郵件、地圖、機票、日歷、知識圖譜…… 都能夠在卡片上有很好的表現。

copyright © 萬盛學電腦網 all rights reserved