對于ui初學者來說，ui界面設計規范有著非常正確和重要的指導意義。而當我們要接一個新的設計項目時，如能拿到該產品的同行老大來做研究那是最好不過。設計風格可以根據自己的品牌調性來做，但基本的設計尺寸規范等最好還是有優質產品來做參考。今天有幸拿到支付寶內部設計文件跟大家分享，這一套支付寶app移動端ui界面設計規范，相信對大家有幫助。 01 \- 了解支付寶品牌在ui設計的延伸性 整理圖案圖形設計文檔有助于更好的傳遞支付寶品牌的視覺語言、保持平臺的統一性、提升團隊工作效率和打磨細節體驗。 圖案圖形是支付寶品牌 DNA 的重要部分，通過幾何圖形（矩形、圓形、三角形）的組合，造型鮮明，可以傳遞出支付寶品牌的安全感、信賴感和專業感；基礎的幾何圖形通過不同的靈活組合，可以創造出千變萬化的造型感，符合想象力的品牌調性；30° 角度給人以速度感，圖案圖形通過轉角位30°倍數的原則做視覺處理可以傳遞支付寶的便捷調性。通過以上描述打造出來的圖案圖形可以傳遞支付寶安全感、信賴感和專業感的品牌調性。 02 \- 支付寶app ui界面設計有哪些需要牢記的關鍵詞 幾何圖形、方正穩重、30°倍數、外圓內方。 1\. 圖標 \- 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。 \- 出現轉角的地方必須為30°的倍數。 \- 外圓內方。 2.卡片、底圖 卡片為矩形，轉角為圓角，圓角角度要小。 3\. 插圖 必須符合集團螞蟻形象規范。 螞蟻的形體有3像素的描邊，色值為333333。 插圖中帶有光影明暗變化。 4\. 圖標規范 規范一：icon 的尺寸 \- 功能和宮格：48\*48px \- 頭部：60\*60px  規范二：icon 特征 \- 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。 \- 出現轉角的地方必須為30°的倍數。   規范三：端點的平行關系 \- 圖形線條或塊面結束處要和圖標成平行關系。   \- icon 邊緣外圓內方（圓角為2px）。  03 \- 卡片/底圖 卡片樣式為矩形（包括按鈕圓角），圓角為4px。  1\. 插圖規范 規范一：造型設計 \- 頭部觸須更飽滿和圓潤。 \- 嘴巴和嘴部結構要適當弱化。  規范二：色彩構成 \- 色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。  規范三：漸變構成 \- 色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。  規范四：在頁面中使用的比例規范示意 \- 插圖在通用報錯頁的整體視覺范圍為400 x 400px。 \- 插圖的尺寸范圍為290 x 290px。 \- 考慮到螞蟻動作和形態的多樣性允許在290px的尺寸外有距上下或者距左右55px的出血。  04 \- 看看一個做練習稿及概念設計的ui設計師作品 支付寶顏色規范  支付寶文字規范  支付寶控件規范  支付寶布局規范  05 \- 小結 快速掌握一個產品設計的基本思路和流程，尤其是設計方面的規范，最好是好好研究該行業里做的比較優秀的產品案例。掌握他們在設計規范中的色彩、文字、控件及布局規范后，對于做新的產品項目設計有著極大的指導意義。對于ui初學者來說，ui界面設計規范有著非常正確和重要的指導意義。而當我們要接一個新的設計項目時，如能拿到該產品的同行老大來做研究那是最好不過。設計風格可以根據自己的品牌調性來做，但基本的設計尺寸規范等最好還是有優質產品來做參考。今天有幸拿到支付寶內部設計文件跟大家分享，這一套支付寶app移動端ui界面設計規范，相信對大家有幫助。 01 \- 了解支付寶品牌在ui設計的延伸性 整理圖案圖形設計文檔有助于更好的傳遞支付寶品牌的視覺語言、保持平臺的統一性、提升團隊工作效率和打磨細節體驗。 圖案圖形是支付寶品牌 DNA 的重要部分，通過幾何圖形（矩形、圓形、三角形）的組合，造型鮮明，可以傳遞出支付寶品牌的安全感、信賴感和專業感；基礎的幾何圖形通過不同的靈活組合，可以創造出千變萬化的造型感，符合想象力的品牌調性；30° 角度給人以速度感，圖案圖形通過轉角位30°倍數的原則做視覺處理可以傳遞支付寶的便捷調性。通過以上描述打造出來的圖案圖形可以傳遞支付寶安全感、信賴感和專業感的品牌調性。 02 \- 支付寶app ui界面設計有哪些需要牢記的關鍵詞 幾何圖形、方正穩重、30°倍數、外圓內方。 1\. 圖標 \- 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。 \- 出現轉角的地方必須為30°的倍數。 \- 外圓內方。 2.卡片、底圖 卡片為矩形，轉角為圓角，圓角角度要小。 3\. 插圖 必須符合集團螞蟻形象規范。 螞蟻的形體有3像素的描邊，色值為333333。 插圖中帶有光影明暗變化。 4\. 圖標規范 規范一：icon 的尺寸 \- 功能和宮格：48\*48px \- 頭部：60\*60px  規范二：icon 特征 \- 必須由幾何圖形所組成，形狀鮮明、方正穩重感、對稱且一致。 \- 出現轉角的地方必須為30°的倍數。   規范三：端點的平行關系 \- 圖形線條或塊面結束處要和圖標成平行關系。   \- icon 邊緣外圓內方（圓角為2px）。  03 \- 卡片/底圖 卡片樣式為矩形（包括按鈕圓角），圓角為4px。  1\. 插圖規范 規范一：造型設計 \- 頭部觸須更飽滿和圓潤。 \- 嘴巴和嘴部結構要適當弱化。  規范二：色彩構成 \- 色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。  規范三：漸變構成 \- 色彩構成需要遵守 ALIPAY DESING DNA 輔助色系規范。  規范四：在頁面中使用的比例規范示意 \- 插圖在通用報錯頁的整體視覺范圍為400 x 400px。 \- 插圖的尺寸范圍為290 x 290px。 \- 考慮到螞蟻動作和形態的多樣性允許在290px的尺寸外有距上下或者距左右55px的出血。  04 \- 看看一個做練習稿及概念設計的ui設計師作品 支付寶顏色規范  支付寶文字規范  支付寶控件規范  支付寶布局規范  05 \- 小結 快速掌握一個產品設計的基本思路和流程，尤其是設計方面的規范，最好是好好研究該行業里做的比較優秀的產品案例。掌握他們在設計規范中的色彩、文字、控件及布局規范后，對于做新的產品項目設計有著極大的指導意義。