內部教程！超詳細的支付寶設計規范之圖形圖案篇

一、概述

整理圖案圖形設計文檔有助于更好的傳遞支付寶品牌的視覺語言、保持平臺的統一性、提升團隊工作效率和打磨細節體驗。

圖案圖形是支付寶品牌 DNA 的重要部分，通過幾何圖形（矩形、圓形、三角形）的組合，造型鮮明，可以傳遞出支付寶品牌的安全感、信賴感和專業感；基礎的幾何圖形通過不同的靈活組合，可以創造出千變萬化的造型感，符合想象力的品牌調性；30° 角度給人以速度感，圖案圖形通過轉角位30°倍數的原則做視覺處理可以傳遞支付寶的便捷調性。通過以上描述打造出來的圖案圖形可以傳遞支付寶安全感、信賴感和專業感的品牌調性。

二、原則關鍵詞

幾何圖形、方正穩重、30°倍數、外圓內方。

1. 圖標

• 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。
• 出現轉角的地方必須為30°的倍數。
• 外圓內方。

2.卡片、底圖

卡片為矩形，轉角為圓角，圓角角度要小。

3. 插圖

• 必須符合集團螞蟻形象規范。
• 螞蟻的形體有3像素的描邊，色值為333333。
• 插圖中帶有光影明暗變化。

4. 圖標規范

規范一：icon 的尺寸

• 功能和宮格：48*48px
• 頭部：60*60px

規范二：icon 特征

• 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。
• 出現轉角的地方必須為30°的倍數。

規范三：端點的平行關系

• 圖形線條或塊面結束處要和圖標成平行關系。

• icon 邊緣外圓內方（圓角為2px）。

三、卡片/底圖

卡片樣式為矩形（包括按鈕圓角），圓角為4px。

1. 插圖規范

規范一：造型設計

• 頭部觸須更飽滿和圓潤。
• 嘴巴和嘴部結構要適當弱化。

規范二：色彩構成

色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。

規范三：漸變構成

色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。

規范四：在頁面中使用的比例規范示意

• 插圖在通用報錯頁的整體視覺范圍為400 x 400px。
• 插圖的尺寸范圍為290 x 290px。
• 考慮到螞蟻動作和形態的多樣性允許在290px的尺寸外有距上下或者距左右55px的出血。

「制作有效設計規范的實用方法」

• 《騰訊出品！從零開始制作設計規范的實用指南》
• 《中小團隊來收！如何快速制作有效的UI設計規范？》
• 《實戰案例！設計師怎樣和前端開發一起制定設計規范？》

================明星欄目推薦================

優優教程網： UiiiUiii.com 是優設旗下優質中文教程網站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎設計愛好者也準備了貼心的知識樹專欄。開啟免費自學新篇章，按照我們的專欄一步步學習，一定可以迅速上手并制作出酷炫的視覺效果。

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com