起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Z軸拆分法：故事還得從安卓應用圖標講起
寫這篇文章的初衷本來只是打算完成給讀者的一個承諾，講解一下Android 8.0后的應用圖標適配。可是寫著寫著，發現安卓現行的圖標適配法則和“Z軸拆分法”十分類似，便由適配法牽扯出了許多相關話題。希望通過本文，UI同行們能透過手法本身，進行更多的思考。
一、安卓應用圖標適配
眾所周知，安卓相較于iOS來說，“建立標準化”一路走來是非常波折的。因為安卓的原始設備制造商 (OEM) 很多，每一個OEM又希望打造自己獨立的產品特性，這些產品特性注入到硬件設備和系統軟件等諸多方面，造就了安卓的雜屏現象。
所以我們常說安卓“雜屏”，可不僅僅指安卓設備物理像素、倍率繁多等方面，還有軟件與各類系統適配的問題。這些問題在近幾年其實已經得到了諸多改善，國內小米的創始人雷布斯就為設備的標準化做出了不小的貢獻。而Google也一直在致力于解決軟件標準化的問題，應用圖標的適配就是其中一個方面。
Material Design 規范中倡導：對于安卓應用圖標，自Android O（Android 8.0）版本開始，應用程序設計者應提供一套標準化文件。
文件應包含：
- 前景層.svg文件：圖標主視覺區域 72dp*72dp ；最終輸出尺寸 108dp*108dp；
- 背景層.svg文件：最終輸出尺寸 108dp*108dp。
可能聽起來讓你有些一頭霧水，一個圖標還要拆分輸出前景層、背景層，什么鬼？下面我來講解一下原因。
前面我們說到，不同的OEM的系統視覺規范不同，對于桌面應用圖標，有些OEM出廠設備是顯示方形，有些OEM出廠設備是顯示圓形。如果不采用一套標準輸出應用圖標的規范，圖標很可能會被OEM所提供的形狀蒙層裁剪到主體部分。
并且從Android 8.1版本開始，安卓引入了圖標的視差和脈動效果。
如何讓設計者只需提供一套圖標文件，就自動適配解決前面的這些問題呢？
MD選擇將應用圖標的前景層與背景層分離。
UI需提供給安卓開發人員兩個圖層.svg文件：前景層尺寸為108dp*108dp，但主視覺區域為72dp*72dp；背景層尺寸為108dpx108dp，僅包含背景圖層。
最后根據各個不同OEM提供的蒙層遮罩，自由適配不同的圖標視覺樣式。
這樣也就可以調節控制前景層與背景層不同的偏移距離，形成視差效果。
看看MD官方展示的最終效果：
這就是MD規范為OEM安卓桌面圖標差異性提供的解決方案。盡管MD官方并沒有對這種制圖手法給出一個官方的名稱，但這種手法與“Z軸拆分法”十分類似，并且常被應用在設計體系當中。
二、Z軸拆分法——機器作圖的基本邏輯
記得阿里剛推出機器作圖AI產品“鹿班”的時候，設計師們紛紛表示感受到了人工智能帶來的威脅。
AI機器作圖的智能性不用多說，它可以根據產品分析、文案分析等手法，瞬間造出千萬張適用于不同應用場景中的圖片。并且它還能夠不斷學習，越來越符合主流審美，簡直不要太玄乎。
后期人工智能會強大到什么地步，我們不討論，但實際上此類機器作圖的基本邏輯就是運用的“Z軸拆分法”。
我們看一看京東的人工智能作圖產品“羚瓏”的設計規則：
實際上人工智能都是提前被錄入了一套設計公式，設計者將一張圖片的Z軸結構拆分為裝飾、背景、前景、文字、按鈕等，AI通過篩選、搭配每一層的元素的樣式，最終堆疊生成為合理的設計成品。
三、我們可以用Z軸拆分法做什么
Z軸拆分法法其實已經不算新鮮了，我在網上找了一些案例。
Z軸拆分法的優點就在于，它容易形成模塊規范，有助于模塊批量化生產。
我們知道，團隊里每一個設計師的審美與平面能力不同，同一個模塊的設計，按照不同的理解，大家可以做出五花八門的設計。就算是讓同一個設計師來做，也可能因為不同時間的不同想法，產生不同風格的作品，這個創作過程是非常消耗時間和精力的。
并且……作為UI，我必須承認，有時候錙銖必較一些視覺工作，可能對于業務和增長來說，并不能起到多少的作用。
而使用了Z軸拆分法后，會提升模塊作圖的統一規范性與效率。
所以Z軸拆分法可以被用于模塊批量化生產作圖的場景當中，也正是因為“模塊批量化”的特征，導致人工智能作圖鉆了UI設計師的空子。
四、Z軸拆分法讓你感到輕松還是焦慮？
Z軸拆分法簡單來說就是，將模塊批量化的作圖場景，在Z軸上拆分為多個結構，替換每一個結構的元素，可以搭配出各式各樣的規范化設計成品。讓設計師在作圖過程中，減少思考成本，提升作圖效率。
那么我有一個問題，學會了這個方法，你感到輕松還是焦慮呢？
有一些設計師可能覺得，掌握了這個方法，或多或少可以讓自己在美工的道路上減輕一些負擔；有一些設計師可能覺得，這是沒有靈魂的批量化生產過程，這樣的設計師以后一定會被人工智能淘汰吧…
借用京東“羚瓏”團隊的一段話：
如果把作圖工作給到機器學習，它會按照錄入的邏輯，搜索合適的素材和配色，按照規則進行組合。而我們的設計師，則回憶起場景中的聲音、景象、氣味、觸感和味道，并把這些感受進行視覺表達，使得每一個人在看到后都有所觸動。這是很長一段時間機器設計所無法做到的共情。
前面我說，正是因為“模塊批量化生產”，導致人工智能作圖鉆了UI設計師的空子。但沒有一個體系是完全沒有漏洞的，想要不被人工智能所取代，我們也要反鉆人工智能的空子，因為機器是無法像人一樣擁有共情能力的。
機器學習也許會讓設計行業受到一定沖擊，但更加加大了對優秀設計師的過濾。更加警醒我們做UI這一行的同學，不要只聚焦于視覺，我們應該更加關心設計背后的情感和邏輯，聚焦原理、用戶心理與業務這些機器無法解析的場景，才能夠不被智能時代所淘汰。
說了這么多，感覺越扯越遠了。還是一開始的那句話希望通過本文，UI同行們能透過手法本身，進行更多的思考。
作者：UCD耍家；公眾號：UCD耍家（ID：ucdplayer）
本文由 @UCD耍家 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
- 目前還沒評論，等你發揮！
