無極五平台首頁_掏空家底!圖標設計落地全方位指南

如期而至,這是標籤欄控件總結的第二期。這一期真是掏空職業經驗,希望對你的工作有所幫助。

往期回顧:

用三期乾貨,全方位解析「標籤欄」控件設計

本系列將分三期全方位解析如何做好標籤欄設計,第一期先從 iOS 人機交互規範和 Google Material Design 平台規範切入,來系統梳理一下「標籤欄」。

閱讀文章 >>

這一期我們來聊一聊標籤欄中的關鍵元素——圖標。

圖標其實存在於界面中的許多地方,但因為這一期主要分析標籤欄,所以我會借標籤欄中較主流的圖標樣式,總結一套圖標製作與落地方法。這些方法在圖標製作過程中都是相通的,大家可以舉一反三。

標籤欄圖標規範

1. 圖標樣式

圖標具體樣式風格的定義是非常主觀的,網絡上也流傳着許多的教程教大家如何設計五花八門的圖標,所以在這裏我就不再贅述了。我主要來總結一下基礎的標籤欄圖標一般有哪些樣式變化。

我調研了諸多的應用程序,發現主流的 APP 標籤欄樣式變化,大致分為以下五種。其中佔比最多的是「由線型轉面型」。

調研的應用程序中,所有使用到線性圖標的應用程序,都將描邊粗細限制在 1pt-2pt 之間。

2. 圖標視覺大小

上一期我們講到,iOS 定義了一套標籤欄圖標的尺寸規範。

iOS 在這裏所定義的尺寸並不是圖標文件最後輸出的尺寸,而是給設計師作圖時,針對不同圖標形狀的參考尺寸,目的是為了讓圖標的視覺大小看上去一致。

那麼為什麼 iOS 會根據不同的圖標形狀給出不同的圖標尺寸呢?因為 50px×50px 的正方形比 50px×50px 的圓形面積更大,所以正方形的視覺大小也會大於圓形。為了統一圖標的視覺大小,正方形要做適當的面積收縮處理。(矩形同理)

於是我們看到許多平台都推出了圖標輔助網格規範 ¹。其實如果遵從「面積相等」原理,理論上所有的圖標網格都應該由下面這一套推理公式得出(以Material Design 標準圖標網格為例):

但實際情況是,不同平台的圖標輔助網格規範建議尺寸都有一定的差異。原因就在於,雖然有時候我們參考「面積相等」原則對圖標視覺尺寸進行了規範,但項目落地后發現視覺上可能還是有一些不協調,所以最終設計師還是會憑藉自己的主觀判斷再進行微調。

記住:好的設計作品是理性的設計理論與設計師本身感性的碰撞結果,二者缺一不可。

3. 圖標輸出尺寸

iOS 規定標籤欄圖標的輸出尺寸統一為 31pt×28pt;Material Design 規定標籤欄圖標的輸出尺寸統一為 24dp×24dp。

但我們發現,在藉助了圖標網格解決了圖標視覺大小的問題之後,每一個不同形狀的圖標,尺寸其實是不同的。為了方便前端落地,我們在輸出切圖文件時,要保持每一個圖標文件的輸出尺寸是相同的。該怎麼辦呢?

於是我們將一組圖標都放置在一個比圖標本身略大的相同尺寸容器中。而圖標與這個容器之間的空白像素,正好也幫助我們規避了圖標落地后,切圖邊緣像素可能被截斷的現象發生,所以我們稱這個區域為「安全邊距」。

對於安全邊距的規定:Material Design 全平台規定圖標的安全間距統一 2dp;iOS 則根據不同的圖標使用場景給出的不同的圖標網格和圖標安全間距 2。

靜態圖標

標籤欄的圖標一般分為靜態圖標和動態圖標兩種。

靜態圖標的實現方法相對容易,可以與前端溝通確定本次項目交付的標籤欄圖標文件是採用位圖還是矢量圖。如果是位圖建議交付 .png 格式文件;如果是矢量圖建議交付 .svg 格式文件。

1. 位圖圖標

使用位圖時請注意以下兩點:

不同項目環境輸出的切圖套數不同

  • 交付 iOS 原生的標籤欄圖標切圖需要 @1x/@2x/@3x 三種倍率的切圖文件;
  • 交付 Android 原生的標籤欄圖標切圖需要 @1.5x/@2x/@3x/@4x 四種倍率的切圖文件(@0.75x 和 @1x 切圖層分別用於 ldpi 和 mdpi 分辨率設備,但這些設備現在幾乎已退出市場,所以可不考慮,但最終視項目真實需求確定。);
  • 交付 web 項目的切圖需要試情況而定,一般常用 @2x 切圖,因為 @2x 向下適配 @1x、向上適配 @3x,都不會產生太大的圖片失真。但有時候前端小哥會要求用到其他倍率切圖,所以最終以具體需求而定。

請注意:這裏我所提到的倍率全都是「絕對倍率」,這個概念非常關鍵。

「絕對倍率」指的是:以上所有的倍率都是針對 @1x 設計稿下的輸出倍率尺寸。而當你使用 @2x 作圖時,為了保證「絕對倍率」不變,你的切圖輸出倍率就應該設置為 @0.5x/@1x/@1.5x 。

如果你在 @2x下作圖,卻依然保持輸出 @1x/@2x/@3x 的切圖,那你輸出的文件尺寸最終其實是 @2x/@4x/@6x。

有一點繞的話,我們以 Sketch 導出位圖切圖為例:

所以如果你日常使用的是 Sketch,也是用 Sketch 原生導出工具,那你的切圖預設應該根據你的作圖尺寸而定,見下錶:

如果你日常使用的是 PS,用 Cutterman 切圖,那麼 Cutterman 會自動識別你當前的畫板,然後根據它的寬(橫屏情況下是高)來設定它的基準分辨率。那麼你在任何情況下輸出 @1x/@2x/@3x 的切圖,其實都是「絕對倍率」,不用像 Sketch 當中一樣換算。前提是「設置當前畫布為:Auto(自動識別)」。

假設你在 @2x 下作圖,執意不管不顧「絕對倍率」,又忘了交代前端人員手動處理切圖尺寸的話,那你所有的切圖尺寸實際都是設計稿所需圖標尺寸的2倍。就算前端小哥幫你手動處理了切圖尺寸,每一張切圖所包含的像素信息,都比項目真實所需的要多很多,完全就是在徒增所需切圖文件的大小。

注意切圖文件大小

切記,公司的線上項目中,用戶從服務器下載的每一單位的流量都是要公司花錢的,所以許多項目管理者都是很在意控制線上文件大小的。於是壓縮切圖是 UI 必備的技能之一。

雖然圖標的文件大小一般只有幾 KB,但是項目大了難免積少成多,所以在真實項目中,不管任何切圖我都會手動壓縮一次。

這裏推薦一個壓縮 .png 文件大小,但幾乎不會產生失真的免費網站 tinypng³(是我曾經深愛的一位前端小哥推薦給我的,在此表示感謝)。

用好這個在線圖片壓縮神器TinyPNG !能幫你的老闆省錢

這篇文章仔細看,聰明的你說不定會在年底有漲薪的機會! 今天要推薦的站點對於很多設計老手已經不陌生了, 正是大名鼎鼎的Tinypng, 想再次推薦給剛入行的新人朋友們, 特別是要和程序…

閱讀文章 >>

2. 矢量圖

位圖切圖會面臨交付的倍率圖過多、容易失真、文件大小難控制等問題,但對於矢量圖,這些問題都得到了解決。目前.svg矢量圖落地也在項目中越來越流行了。UI 可以在 Sketch 或 Ai 中製作。

一般與前端人員對接有在線圖標庫對接與本地文件對接兩種。

在線矢量圖標庫有很多,國內比較流行的是阿里巴巴矢量圖標庫-iconfont⁴;本地對接就是直接將文件發送給前端人員,他們會自行進行項目文件的管理與調用。

如果 .svg 切圖輸出后,與設計稿中樣式不符,請注意排查以下三點:

svg 不支持漸變顏色填充;

  • svg 不支持描邊,請將所有的描邊輪廓化。Sketch 中可通過「圖層-輪廓化」;AI 中可通過「對象-路徑-輪廓化描邊」;
  • 要確保一組圖標的文件尺寸一致,需在圖標下方增加一個透明方形,和圖標一同導出。

動態圖標

為了提升用戶體驗和產品趣味性,動效微交互的標籤欄圖標也越來越流行了。

動效在前端落地的方法其實有很多:

  • 前端代碼直接實現:代碼是很強大的,但通常用代碼直接寫複雜動效會很浪費項目時間。簡單維度的動效如位移、透明度、大小變化等可以藉助代碼,但複雜動效就不要去打擾前端小哥了;
  • 直接剛 gif:這已經是老舊技術時代的動畫解決方案了,文件大且請求文件也需要時間,有時候無法給用戶及時的觸控反饋。再者它是位圖的原因,在高分辨率屏幕上縮放容易失真。
  • png 序列幀:我們知道,動畫是一張一張的靜態圖交替變化形成的。如果將每一幀動畫都拆分成一張圖片,就有了 png 序列幀。所以一套動畫的 png 序列幀往往非常多,文件大小自然就變大了。所以後來也有團隊引進了雪碧圖的方式,但文件大小依然不樂觀。並且同樣是位圖的原因,高分辨率屏幕容易失真。
  • Facebook Pop/Rebound/Keyframes/Facebook Pop/Rebound 是 Facebook 給 iOS 和 Android 提供的常用動畫預設,是較早將動效代碼化的開源技術方案,但動畫效果預設只有彈簧/衰減等一些簡單樣式。後來 Facebook 又推出了 Keyframes,允許設計師自己在 Ae 中自定義動畫並導出,然後交付給前端人員。
  • Lottie 動畫:和 Facebook Keyframes 相同,都是結合 Ae 輸出動畫代碼。但是 Lottie 更厲害的地方在於,它比起 Facebook Keyframes 來支持的 Ae 樣式更多,例如蒙版、遮罩、修剪路徑等等。

所以綜上所述,落地標籤欄動態圖標,目前最高效可行的還是 Lottie 動畫。

比阿里獁良還強大!Lottie動效設計完全指南

之前的文章已經介紹了 Lottie 是什麼,以及如何導入設計文件,那麼今天就為大家講解如何根據我們的需要導出 Lottie 文件。

閱讀文章 >>

1. Lottie的背景

Lottie 是 Airbnb 開源的一個跨平台動畫庫。表現層面它是一張圖片,但實現的方式是通過代碼,所以它是矢量的。很花式的動畫也可以把文件大小做到非常小。

UI 與前端對接是通過交付一個 json 代碼文件。

如果這是你第一次接觸 Lottie,再好不過的體驗方法就是玩一玩阿里提供的一站式動畫平台:獁良動畫 5。它最底層採用的技術就是 Lottie,只是被阿里二次封裝了許多預設的動畫效果,你可以自定義其中的元素與參數,然後試着導出你的第一個 json 文件。

2. Lottie如何上手

接下來是簡單粗暴的 UI 與前端對接實現 Lottie 動畫落地的全步驟參考。在此之前,想要全方位了解 Lottie 的相關信息,請參閱 Lottie 官方說明文檔 6。

步驟一:安裝 Ae 和 bodymovin

製作 Lottie 動畫,首先你必需兩個工具:Ae 和 bodymovin 插件。

Ae 最低版本要求為 Ae CC2014。又因為據很多設計師反饋,目前 bodymovin 在漢化后的 Ae 中使用會出現諸多問題,所以後面的教程都是基於 Ae 英文版。如果你漢化了Ae,最好在需要製作 Lottie 動畫時取消漢化。

然後獲取 bodymovin7。bodymovin 插件更新至今,版本已非常多,並不一定最新版就適用於你當前的項目,因為前端使用的 bodymovin 解析包可能無法解析你用最新版 bodymovin 插件輸出的 json 文件。

一旦確定使用 Lottie,前端人員會在 GitHub 查詢 Lottie 相關文檔的,所以 UI 只需要配合前端確定一下合適的 bodymovin 插件版本就可以了。最終走查時,一定要確保當前 bodymovin 輸出的動畫在項目所需要運行的所有環境中可運行,才說明 UI 使用的 bodymovin 插件和前端使用的 bodymovin 解析包版本是兼容的。

獲取了 bodymovin 后,將 bodymovin 拖入到 ZXP Installer8 中,ZXP Installer 會自動識別插件安裝到 Ae。

安裝完成后,就可以在 AE 的「窗口-擴展」中看到 bodymovin 啦。

步驟二:將 Sketch 或 Ai 中的文件導入 Ae

如果你技術嫻熟,當然也可以直接在 Ae 中繪製圖案動畫。但如果你還是習慣先在其他軟件中繪製好基礎圖案,再到 Ae 中製作動畫,那你需要了解如何將圖案導入 Ae。

Ai 和 Ae 都是 Adobe 旗下的工具,所以 Ae 是可以完美解析 .ai 文件的,如果你是使用 Ai 作圖,可直接存儲為 .ai 文件,再在 Ae 中打開。

如果你使用的是 Sketch,可以先導出為 .svg,再用 Ai 打開該 .svg 文件,轉換存儲格式為 .ai,最後到 Ae 中打開。

當然,Sketch 還有直接和 Ae 對接的插件,AEUX(前身 Sketch2AE)9。需要在 Sketch 和 Ae 中同時安裝 AEUX 插件,Sketch 負責傳送,Ae 負責接收。具體的使用方法可以在官網教程中查看,我就不再贅述了。

步驟三:製作動效並輸出

和靜態圖標同理,為了保證落地時圖標視覺大小一致,一組動效圖標輸出的文件尺寸應該是相同的。所以在你製作動畫之前需要確定合成文件的尺寸。Lottie 官方建議:因為 Lottie 輸出的是矢量動畫,所以建議以 @1x 輸出動效,前端人員在任何屏幕上放大並不會失真。

在製作之前請務必詳細閱讀 Lottie 所支持的 Ae 參數文檔10,以免辛苦做出的動效,前端無法解析。特別提醒:原生環境中 bodymovin 是不支持解析 Ae 表達式的。

完成製作動效后,就可以通過 bodymovin 導出動效了。

步驟四:預覽與交付

導出完成后在你的目的地文件夾中將存在一個 .json 文檔,如果你的動效中還使用了位圖,系統還會自動生成一個 images 文件夾。這些都是你需要交付給與你對接的前端開發人員的文件。

.json 文件中記錄的動效代碼 UI 不需要過多關心,但是其中兩個信息你是一定要了解的。它們是你與前端對接溝通和獲悉文件信息的一些關鍵參數。

UI 自檢動效或其他相關人員需要預覽動效的時候,可以用 LottieFiles11,拖入 .json 文件即可預覽。iOS 和 Android 還可以下載 LottieFiles APP,掃描預覽頁中的二維碼即可在移動端預覽。

總結

整個製作圖標的流程我已經全部整理出來了。首先要注意圖標的規範,然後製作位圖、矢量、動效圖標時的注意點,我幾乎把我在真實項目中踩過的坑都告訴大家了。剩下的創造性的環節就交給你了。

所有在文中涉及到的文檔地址和插件下載鏈接:https://pan.baidu.com/s/1xJGXB14dOm32PAJxu_4_0g 提取碼: sfpj

備用下載鏈接:https://share.weiyun.com/5wBV1Nt

歡迎大家關注作者微信公眾號:「UCD耍家」

未经-摩登3注册-摩登3测速官网-允许不得转载:摩登3注册-摩登3测速官网 » 無極五平台首頁_掏空家底!圖標設計落地全方位指南

赞 (0)