主選單

星期三, 9月 27, 2023

Google's Material Design vs. Apple SF Symbol

兩大系統很早就針對數位的UX or UI 自行定義了需多新的應用與相關知識

關於質感設計(material design) 在維基百科的解釋

我猜Google 大膽引用改過的包浩斯 的知名材質與攝影工作坊老師Moholy Nagy那基當時設計的符號(現在已經變成基金會的logo)然後轉一個九十度 在變化一下 變成自己的質感設計知識的網站代表 頗有要跟apple 在字型與使用者介面設計上較勁

是差很多沒有錯啦 但這也是我個人知識的聯想


紅色框內的logo

質感設計(英語:Material Design,又譯為材質設計材料設計),研發代號:量子紙(英語:Quantum Paper[4],是由Google開發的設計語言 。擴充於Google即時的「卡片」設計,材質設計基於網格的布局、回應動畫與過渡、填充、深度效果(如光線和陰影)。設計師馬蒂亞斯·杜爾特解釋說:「與真正的紙張不同,我們的數位材質可以智慧型地擴大和變形。材質具有實體的表面和邊緣。接縫和陰影表明組件的含義。「Google指出他們的新設計語言基於紙張和油墨。」[5][6][7]

質感設計於2014年6月25日的Google I/O大會上宣布。質感設計可藉助v7 appcompat庫用於Android 2.1及以上版本,支援幾乎所有2009年以後製造的Android裝置。材質設計將逐步擴充到Google的網路和行動產品陣列,提供一致的跨平台和應用程式體驗。Google還為第三方開發人員發布了API,開發人員可將質感設計應用到他們的應用程式中。[8][9][10]

網路應用程式的質感設計介面的規範實現被稱為「Polymer紙張元素」。[11]它包括Polymer庫、一個墊片,為不原生支援網路成分Web Components標準的瀏覽器提供了API,以及「紙張元素集合」。[12]

中文名稱[编辑源代码]

Google於2014年11月6日推出iOS版Google地圖程式4.0版時於程式更新敘述中稱呼Material Design為質感設計,在1.3.1版中的YouTube創作工作室iOS版程式更新敘述中也採用此名詞。[13]

但是,Google在developer.android.com的官方文件(簡體中文和繁體中文譯本)中,均稱之為材料設計[14][15]。現簡體中文譯本稱之為素材設計

最新的版本已經到 Material Design3 了 https://m2.material.io/

Google fonts 在 Google 裡已經成為一個專屬的服務了(有它自己的logo)

更是引用Erik Spiekermann的書

實際應用範例來讓設計者有個參考的依據 
我覺得這是許多設計創作者需要的
https://fonts.google.com/knowledge/stop_stealing_sheep.pdf

免費下載 CC BY-ND 4.0

Google用知識的概念 把所有設計跟自行有關的項目放在起

我們來看一下 apple 眾多系統的字型方面的資源

蘋果在開發者的系統裡
有個大主題https://developer.apple.com/design/resources/

整理的所有關於字型的解釋都非常清楚

但是蘋果更是把不同的自己開發設計的Device 載具分類的不同對應的元素與基本功能都有些不同
希望創作開發者要細心留意

SF (是 San Franciso的縮寫) Symbols 是蘋果公司推出的一套圖標資源,首次亮相於 2019 年的 WWDC。它是為瞭解決 iOSmacOSwatchOS  tvOS 等平台上應用app圖標一致性和可擴展性問題而設計的。目前已經出到最新的 5.0 版本,總共包含超過 5000 個圖標可用。可以通過官方下載最新的 macOS 客戶端來查看全套圖標。

https://developer.apple.com/sf-symbols/


在項目中使用這些圖標的好處主要是以下幾點:

一致性:與 Apple 設計的系統元素保持一致,提高用戶體驗。

可擴展性:可輕鬆調整 Size Weight,適應不同界面需求。

多樣性:目前提供超過 4400 個預設圖標,涵蓋場景多。

易於集成:與 UIKit SwiftUI 緊密集成,方便開發者使用。

支持多語言和可訪問性:自動適應不同語言環境和輔助功能設置。

高質量且穩定:都是矢量圖,不需要擔心圖標失真或變形的問題。


關於用法的細節已有人解釋

https://zhuanlan.zhihu.com/p/159653303


創作者可以自行下載應用不過要注意 apple有版權的聲明


沒有留言:

張貼留言