玩轉iconfont-RELAAAY 4.0升級覆盤圖示篇

語言: CN / TW / HK
時間 2022-06-27 16:52:03
主題:

設計語言升級

尺寸規格

承襲RELAAAY原等量圖示的設計原則，在此基礎上進一步延展，統一平臺/外掛/移動端的設計標準。由此重新規定了三種圖示規格，根據使用場景分為（尺寸規格均為 [email protected]）：

  • 工具級：24 x 24px

  • 系統級：20 x 20px

  • 標識級：16 x 16px

我們在設計的過程多次觀察和調整，最終確定了三種規格的圖示視覺等量參考線和預留出血。根據實際使用的觀感略有差異，並不是等比縮放的關係。
針對圖示中最常見的基本形狀調整輪廓線，我們給出了以下建議，方便設計師快速呼叫或在此基礎上進行延展設計。

圖示韻律

線寬

線性圖示標準線寬 d：

  • 工具級：d=2.0px；

  • 系統級：d=1.5px；

  • 標識級：d=1.0px。

部分圖示依據圖形含義以及等量圖示原則可以0.2px為單位微調。對於圖形複雜度較高的圖形，可以將內部或整體的線寬減少到合適數值，以達到視覺平衡。

圓角

為避免圖形過於尖銳生硬，通常會給圖示新增圓角，圓角半徑 r 規則如下：

  • 一般工具級&系統級：r=d/2（圓頭）；

  • 特殊工具級（如幾何圖形）：r=0.2px；

  • 巢狀或分割型圖示：r=0。

圖示按鈕互動規則 為了簡化使用者和圖示的互動和系統體量，非特殊設計，常用圖示的互動效果如下圖示意，希望一套標準圖示即可以解決一套功能的問題。

在圖示狀態切換時，不再使用圖形變化來區分狀態，配合熱區背景色及圖示填充色的變化即可以完成以下5類常用狀態的展示。這種型別的圖示我們採用iconfont的形式來實現。

什麼是iconfont？

字型本質上來說也是一種向量圖檔案，其具備體積小、易呼叫、易修改、不失真等優點。

那iconfont=“icon” + “font”？簡單來說就是使用字型的方式來使用icon。當然這不同於輸入法敲出來的字，是指在程式碼實現層面可以以此方式更方便的完成呼叫和修改或變化。

為什麼要用iconfont？

  • 與傳統點陣圖切圖對比，其可以任意放大不會失真。

  • 與SVG檔案對比，其可以統一排程管理，直接修改顏色，體積佔比更小。

  • 使用iconfont，設計師可以更好的控制圖示的“大小”，為什麼是設計師控制呢？後面會展開。

  • 使用iconfont，研發可以更方便的修改圖示顏色，實現變色的互動效果。

  • 使用iconfont，設計師可以快速更新或替換圖示資源，而不用每次都尋求研發的幫助。

但是iconfont目前也有缺點，RELAAAY目前提供的iconfont只支援單色圖示，如果圖示設計中存在多個顏色或者樣式則不能通過CSS屬性快速修改顏色。
在系統中，簡單圖形的單色圖示往往是使用最廣泛的。基於現狀和我們確定的圖示按鈕互動規則，決定採用iconfont來實現我們產品中所有工具級和系統級圖示。

該如何使用？

1、分類

RELAAAY為設計師定義兩種圖示使用模式：SVG（設計稿）模式：允許使用多個圖層，允許新增圖層樣式，不能自動修改顏色和尺寸。Iconfont（圖示字型）模式：只允許單色填充，無圖層樣式，可以自動修改顏色和尺寸。

2、圖形路徑

RELAAAY Iconfont定義只識別填充屬性，不識別邊框，所有閉合路徑的填充在轉換過程中均會被設定為#000，邊框屬性則會被機器自動去除。

若要繪製標準規格iconfont，需要注意以下事項：

閉合：為保證製圖規範，請繪製封閉圖形。

輪廓化：如果圖形以描邊繪製，將描邊輪廓化轉化為閉合填充圖形，保證解析準確。

合併：為保證圖形結構簡單，如果有兩個或以上圖形，或者有布林關係的圖形，請對圖形合併並擴充套件。

大小：如果不增加背景層，iconfont預設擷取可見畫素邊緣，尺寸可能出現小數位。

3、填色

若需要研發正常呼叫並通過CSS 屬性修改顏色，填充請設定為#000000，如果設定其他顏色值，則不能整體修改圖示顏色。

如果圖示使用過程中沒有修改顏色的需求，可以按照設計正常設定顏色和樣式。

4、尺寸和位置

這裡就會解釋前文提到的設計師可以更好的控制圖示的“大小”。

RELAAAY支援通過背景圖層來控制圖示的大小和相對位置。如果需要製作等量圖示，需要按照如下方式設定：

1.前景icon圖層按照上述規則結合使用需求設計。

2.背景層設定好整體尺寸，樣式任意，將圖層可見關閉或圖層透明度調整為0%，兩者必須至少完成一項設定。

3.前景與背景按照需求擺放好相對位置，進行編組，將編組名稱改為需要上傳的icon名稱。注意前景不要超出背景區域。

4.上傳到RELAAAY Iconfont進行使用。
5.除了尺寸，通過這個方法還可以設定圖示的相對位置，根據實際需要靈活控制留白間隙的尺寸。

6.以此方式來進行設計，研發可以使用統一字號來批量控制圖示整體佔位，圖示大小的精細控制就可以交給設計來進行了。

5、更新替換

使用RELAAAY iconfont的另一個優勢僅有設計師的情況就可以對已上線的圖示進行迭代更新。替換時需要：

1. 在iconfont庫設定中開啟“固定CDN”。

2. 保持前後更替的圖示命名相同，通常做法先刪除原圖示，再上傳新圖示。

3. 重新生成地址即可更新線上圖示。

6、Q&A

Q：能不能設定為不可見？

A：可以，RELAAAY定義在圖層可見關閉或圖層透明度為0%的情況下均可以識別圖層的外框尺寸，但不會給此圖層新增屬性，也不會顯示此圖層。

Q：能不能設定為填充為空或者透明度為0？

A：不能，你要識別到圖層填充屬性為開啟狀態，無論填充的值如何，都會被自動新增上#000的顏色，會出現整塊黑色，導致icon形狀不對。

Q：能不能設定填充為其他顏色？

A：可以，不可見圖層解析時不儲存填充資訊，所以填充任意顏色不會產生影響。

Q：能不能上傳控制元件（symbol）？

A：可以。

Q：能不能上傳例項？

A：不能，RELAAAY目前無法解析例項作為iconfont。

7、呼叫與管理

外掛端呼叫iconfont可以根據實際需要快速設定顏色和尺寸。

更多相關文章

感性色彩——RELAAAY4.0升級覆盤-色彩篇

空間效率的理性之美——RELAAAY4.0升級覆盤-空間篇

「」