除了由美感來決定元素外
現代的設計師似乎還多了其他元素要考慮
當所有設計師都在討論Google商標如何更改設計
改了字體改了襯線外
似乎還有個重大的改動沒有被注意到
或者甚至說他們根本不在意
舉例2015年Google推出的新Logo
整個Logo幾乎可以單純由幾何圖形構成
# 10個圓形, 5個矩形, 額外7個錨點組成的形狀
這代表著我們可以用簡單的SVG來描述整個Google的Logo
# 可縮放向量圖形(英語:Scalable Vector Graphics,SVG)是一種基於可延伸標記式語言(XML)
反觀舊版的Logo總共有100個錨點

#這裡我稍微修改了一下namespace讓他可以在各個環境中正常執行
產生如圖

除了檔案大小差距之外
SVG只需要讀取這些字元就能產生出一個完整的商標
原來的點陣圖卻需要讀取完每一個像素後才能輸出
所以說
補充說
我認為這裡延伸出幾個議題
Reference:
How could Google's new logo be only 305 bytes, while its old logo is 14,000 bytes?
現代的設計師似乎還多了其他元素要考慮
當所有設計師都在討論Google商標如何更改設計
改了字體改了襯線外
似乎還有個重大的改動沒有被注意到
或者甚至說他們根本不在意
:檔案大小
舉例2015年Google推出的新Logo
整個Logo幾乎可以單純由幾何圖形構成
# 10個圓形, 5個矩形, 額外7個錨點組成的形狀
:檔案大小305 byte 大約0.3Kb

這代表著我們可以用簡單的SVG來描述整個Google的Logo
簡單來說就是我們可以用"文字"來描述一張圖案,
並非傳統方式, 經由記錄Pixel構成圖片
反觀舊版的Logo總共有100個錨點
:檔案大小14000 byte 大約14Kb

雖然14Kb的檔案容量在現代人來看根本不值得一提
但是Google這樣規模的公司一天會被存取上千億次甚至上兆次來看
光是一個小Logo的變動
就足以省下相當驚人的資料傳輸用電
設計師Ilya-Yakubovich的文章中也提供了一個簡單範例#這裡我稍微修改了一下namespace讓他可以在各個環境中正常執行
- <svg xmlns="http://www.w3.org/2000/svg" width="600" height="250"> <g stroke-width="16" fill="none"> <path d="M173 102a51 51 0 1 1-13-30m20 37h-53" stroke="#4a87ee"/> <circle cx="227" cy="128" r="32" stroke="#d83038"/> <circle cx="313" cy="128" r="32" stroke="#f4c022"/> <path d="M401 160a31 31 0 1 1 0-61m-4 0a24 29 0 1 1 0 61m26-67v79m-1-12a20 20 0 1 1-52 17" stroke="#4a87ee"/> <path stroke="#4ab95a" d="M449 51v115"/> <path d="M529 118a30 30 0 1 0-2 24m5-32l-62 28" stroke="#d83038"/> </g> </svg>
產生如圖
除了檔案大小差距之外
SVG只需要讀取這些字元就能產生出一個完整的商標
原來的點陣圖卻需要讀取完每一個像素後才能輸出
所以說
:現代的頂尖設計師不只讓世界更美
他們還考慮到許多我們看不到的小細節呢補充說
我認為這裡延伸出幾個議題
- 除了傳統的繪圖還有沒有更有效率的方法 e.g. 寫XML畫圖
- 各類設計、圖像都需要網路傳播,除了讓圖更美之外能多考慮到效能問題嗎?
- 如果圖形都能用簡單的矩形構成, AI可以輕易做到繪圖, 那AI是否能取代設計師呢?
Reference:
How could Google's new logo be only 305 bytes, while its old logo is 14,000 bytes?
留言
張貼留言