[圖]採用設計語言Material Design的Chrome會是什麼樣子

2020-11-25 cnBeta

早在1年前,谷歌就曾計劃將Material Design引入至Chrome,最近谷歌的頻繁動作表明已經開始加速推進瀏覽器整合該跨平臺設計語言。根據Google Code上文件顯示,有望在Chrome OS v50版本中看到Material Design的任務管理器首次亮相。今天我們能夠率先看到這些未完成但是非常接近於完成的改變,不仔細觀察幾乎很難發現。

瀏覽器在標籤上使用的更矩形的邊緣,而並非像現在邊緣更加圓潤;頂部右上角的「漢堡」菜單按鈕已經改成豎向排列的「...」按鈕,而這些按鈕在滑鼠點擊之後都會有按鈕動畫 。信息條、安全圖標和書籤按鈕都進行了重新設計。

來自Google Code的設計規格顯示了新的全黑匿名模式預覽圖片:

另一份設計規格顯示已經更新的多媒體播放器:

瀏覽器在細節方面也會進行改善,包括滾動條、按鈕、新圖標等等。

由Chrome團隊重新設計的其他頁面,包括下載、擴展程序、設置和歷史。

相關焦點

  • 採用Material Design 的 Chrome 會是什麼樣子
    早在1年前,谷歌就曾計劃將Material Design引入至Chrome,最近谷歌的頻繁動作表明已經開始加速推進瀏覽器整合該跨平臺設計語言
  • Material Design風格的Chrome會是什麼樣子
    (原標題:Material Design風格的Chrome會是什麼樣子)
  • Material design與iOS Human Interface Guidelines對比分析
    規範目標與原則Material Design(以下簡稱MD)是谷歌設計的一套視覺語言設計規範,也是Android Design演進的一種設計規範。在MD開篇,谷歌公司就表達了自己的期望:創造一種視覺語言,能夠將經典的設計原則與創新的科學技術結合起來;開發一個能夠跨平臺使用的底層系統,保證用戶在不同平臺上都能夠擁有統一的體驗。
  • 關於在iOS當中實踐Material Design的訪談
    平時,我會試著在其他一些知名的iOS app當中通過Material Design的設計語言來提升交互和視覺體驗,另外也在設計一款自己的旅行社交app。這些對我來說都是絕佳的實踐機會。使用Material Design設計的iOS app當中,你最喜歡哪一個?這個問題蠻難回答的。
  • Material Design設計語言-數據可視化
    NBA前9名球員得分情況)補充:條形圖可以叫柱狀圖,但直方圖與條形圖有很大不同,條形圖通常關聯兩個變量,但直方圖只涉及一個。關係關係圖用於表示多個項目是如何相互關聯的。在上圖中,每個類別由特定的形狀(圓形、正方形和三角形)表示,這樣可以輕鬆比較特定範圍內的數據或其他類別的數據。1. 形狀圖表可以使用形狀以多種方式顯示數據。一個形狀可以被設計成有趣的曲線形狀、或者精確和逼真的形狀。形狀細節水平圖表可以以不同的精度表示數據。
  • material2 發布 7.1.0,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.1.0 版本,這主要是一個 bug 修復版本,當然也提供了新特性和改進性能。
  • 【NEXT Collections】關於實踐 Material Design 的三個問題
    這是 Google 自去年 Android 5.0 開始推廣的全新設計語言,而整個設計語言的暗喻基於 material——材料和質感。隨著 Android 5.0 的普及、國內第三方 ROM 的更新和跟進,相信 Material Design 會真正成為國內開發者們所面臨的產品抉擇——我們的應用要不要採用 Material Design?
  • material2 發布 7.0.1,Angular 的 Material Design 風格框架
    Angular 的 Material Design 風格框架 material2 發布了 7.0.1 版本,這主要是一個 bug
  • Material Design 有什麼缺點?
    答|百度派 @雙馬尾蘿莉醬谷歌推出了全新的設計語言Material Design。谷歌表示,這種設計語言旨在為行動電話、平板電腦、臺式機和其他平臺提供更為一致和更廣泛的「外觀和感覺」。成功的視覺效果FAB 對 Google design 是個很好的視覺突破。平面設計中的「點線排列」概念,是一個非常靈活和突出的「點」元素,而這種強大元素的界面設計在很難出現之前。
  • 谷歌Material Design設計語言將用於汽車和電視
    更新的Material Design規範談到了如何將這一設計語言用於新的平臺,例如電視機、汽車中控臺,甚至谷歌Cardboard虛擬實境設備。 一年前,Android首席設計師馬提亞斯·杜亞特(Matias Duarte)發布了全新的設計語言Material Design。
  • 「Material Design」的九大設計原則
    Material Design,它的設計美學將會融入到谷歌所有的平臺之中,包括Chrome OS和網頁,它也將形成一個統一的外觀,將所有的產品捆綁在一起。除了在Google+社交媒體上發布了相關內容之外,谷歌還給與會者發送了一些藝術印刷套件,其中就包括一些極具特色的明信片,這些明信片很漂亮,也向人們展示了新設計語言的設計原則。谷歌是這樣介紹的:「設計是創造的藝術,我們的目標就是要滿足不同的人類需要。人們的需要會隨著時間發展,我們的設計,實踐,以及理念也要隨之提升。
  • 解讀Material Design引領的UI設計趨勢
    顧名思義,這是一種考慮事物本質的設計,將電子屏幕裡的UI元素看成是一種不存在於現實世界的新的材質,並賦予它物理特性。因此Material Design並不是去擬物化的設計。許多設計師把扁平化與擬物化對立起來,其實兩者並不是對立關係。但我更願意稱Google新的設計語言為抽象化。
  • 設計即功能:淺析谷歌MaterialDesign特性
    在2014年的Google I/O大會上,谷歌發布了Android L即Android 5.0,並推出Material Design,重新統一了谷歌的設計語言,確立了谷歌設計的未來發展方向。IT之家時至今日,Android系統已更迭到7.1版本,再提起Material Design似乎有些過時了,但是我們不妨重新溫習一下這種設計語言,再回看谷歌利用這種設計理念所創造出的後代系統,似乎會品嘗到不一樣的滋味。Material Design的特點主要體現在以下幾個方面。
  • 扁平化設計與Material Design區別在哪裡?
    實際上,一些人想知道它們之間的差別有多大,讓我們從最基本的開始:擬物化設計的身影出現在每一個身上。擬物化設計擬物化設計, 在這個背景下,設計是為了模擬真實的物理世界。通常,這需要設計的在線應用的形式看起來像他們的真實世界的變體,比如像電子合成器軟體,做的像鍵盤。這種界面的設計方式,在大部分的時間裡佔據了主導的地位。
  • 分析Google、微軟、蘋果設計規範的異同點
    可以看出material design是旨在解決跨設備界面和體驗的統一,讓Android設備的界面設計不在是割裂、碎片化。material design 介紹google是這樣介紹的material design的:它是一種將優秀設計的經典原則與科技創新相結合的視覺語言;開發一個統一跨平臺,設備和輸入方法的用戶體驗的單一底層系統;可擴展Material的視覺語言,為創新和品牌調性提供靈活的基礎
  • 谷歌Material Design UI 真正美在哪裡?設計即功能
    Google I/O 2014發布了全新的設計語言Material Design(卡片式材料設計),它是迄今為止最受歡迎的視覺設計語言之一,利用了分層的卡片式設計、使用更多的空白和層次排版結構,經歷了幾年的迭代和提煉,來為手機
  • 谷歌將給 Chrome 做一次全新的 Material Design
    2月份,有消息稱,谷歌將對 Chrome 動一次大手術,使用全新的「Material Design 2」UI設計語言。
  • Vuetify - 廣受歡迎的 Material Design 風格的開源 UI 框架
    Material Design 風格 UI 框架Vuetify 是一個基於 Vue.js 精心打造 UI 組件庫,整套 UI 設計為 Material 風格。能夠讓沒有任何設計技能的開發者創造出時尚的 Material 風格界面。
  • 【史上最幹】Material Design複雜響應式設計
    如果說產品的核心邏輯或者技術的實現難易會成為設計展現的限制,那麼UX和UI應是在各種限制下所權衡出的最優解。而Material Design則像是架橋說明或者權衡出的通用解,對於眾多產品做以參考。既然是通用大綱,那麼拋開產品僅談設計,難免會停留於「通用」層面,而利用Material Design進行實戰的案例,網上也多是app的一些設計嘗試。
  • 谷歌推出AllWhite視覺風格,這是MaterialDesign語言的新變化嗎?
    繼上次谷歌發布新版的Material Design設計規範後,近期又流出一個關於Material Design改版的視頻,且視頻裡採用了一種稱為"All-White"的設計語言,展示的原型包括了Gmail, Google Photos, Google Trips、Google Drive等。