内部教程!超详细的支付宝设计规范之图形图案篇 - 优设-UISDC

内部教程!超详细的支付宝设计规范之图形图案篇

2018/04/06 19508评论区

一、概述

整理图案图形设计文档有助于更好的传递支付宝品牌的视觉语言、保持平台的统一性、提升团队工作效率和打磨细节体验。

图案图形是支付宝品牌 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的出血。

「制作有效设计规范的实用方法」

================明星栏目推荐================

优优教程网 UiiiUiii.com 是优设旗下优质中文教程网站,分享了大量PS、AE、AI、C4D等中文教程,为零基础设计爱好者也准备了贴心的知识树专栏。开启免费自学新篇章,按照我们的专栏一步步学习,一定可以迅速上手并制作出酷炫的视觉效果。

设计导航:国内人气最高的设计网址导航,设计师必备: http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/alipay-design-specification-graphic-pattern

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 设计师 扁平化设计 交互设计师 界面设计 排版布局 职场 平面设计 设计师专访 素材下载 视觉设计 设计流程 配色 web前端开发 用户体验设计 AI教程 海报设计 设计理论 神器下载 字体下载 设计规范 设计趋势 psd下载 动效设计 图标设计 产品设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里