UI设计规范思维导图
UI设计规范的UI设计规范、制定UI设计规范、为什么要做设计规范、UI设计规范注意点
树图思维导图提供 UI设计规范 在线思维导图免费制作，点击“编辑”按钮，可对 UI设计规范 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：453d86975211d68a6bff3252b2f85822
思维导图大纲
UI设计规范思维导图模板大纲
为什么要做设计规范
统一产品风格
对于同一个产品的多个页面来说，统一的设计规范能够使得产品视觉风格保持一致。同时可以保障良好的用户体验
多个设计师共同合作，如果没有及时制定规范，每个人自由发挥，同一个控件便会出现不同的样式
提高开发效率、解决代码冗余问题
通过设计规范，程序员可以了解到哪些控件是可以一次性写好并能重复调用，同时在规范的辅助下，程序员在搭建全局共用元素时规则更会加清晰
帮助新人快速上手
新人刚加入团队时，对产品的风格和基调不太熟悉或理解不透，可能无法快速进入设计工作，设计规范可以帮助快速上手，提高工作效率，并且也能保持产品风格和控件的统一性
制定UI设计规范
明确设计原则
在 facebook 的设计语言原则里面，强调了他们的设计价值观：通用、人性、干净、统一、有用、快速、透明，在 facebook 所有设计中，都将这些要点作为他们设计的指导准则
苹果的设计规范包括：完整性、一致性、直接操作、反馈、隐喻、用户控制等
制定基础规范
栅格系统
建立横向栅格系统，常用的是12栅格，12栅格比较好的地方能够同时被2、3、4整除
色彩
色彩规范要标明色彩的色值和使用范围，包含 主色、辅助色、状态用色、文本色等
如果使用到渐变色，需要标注渐变色的色值和角度
字体
字体规范需要提取出各个场景下用到的字号，加以整理和说明，需要让其他设计师清晰的理解什么样的场景用什么样的字号
制定控件规范
图标
为保证不同形状的图标在视觉上保持大小一致，需要制作一个图标绘制模板和图标制作说明
说明中标明图标的圆角、描边的粗细等
按钮
按钮的颜色、字体字号都遵循该产品的色彩规范、字体规范
按钮通常有三种状态：常规状态、点击状态和 失效状态，部分情况下可能会存在加载状态， 需要标明按钮在这些状态下的样式
制定组件规范
导航
导航分为顶部导航栏、底部导航栏、分段器、楼层定位等
子主题 2
子主题 3
UI设计规范
设计规范是围绕在某种风格或者大型设计项目 下形成可视化、数据化的标准，针对相对独立 的体系建立的统一遵守条款
UI即User Interface（用户界面），UI设计规 范是基于用户界面产品而制定的一套可复用设 计库，为了方便设计师、开发和测试人员共同协作，而遵循的规律和法则
产品要有可遵循的标准来规范视觉呈现和元素 定义，保证日后的迭代可以延续产品所传递的 思想和价值，能最大限度保证产品的一致性
UI设计规范注意点
规范建立时机
规则从无到有的制定并非一日完成的，也并非先制定了设计规范再着手进行界面改动，两者应该同时进行
规范的尺度与范围
优秀的设计规范既能统一方向和基本参数，又能预留无数的可能性来保证扩展性
及时迭代规范
在产品迭代过程中需要对旧规范进行更新优化，不合适的、过时的规范需要及时同步归纳，并及时通知到项目相关人员
相关思维导图模板
树图思维导图提供 UI交互五大计划思维导图 在线思维导图免费制作，点击“编辑”按钮，可对 UI交互五大计划思维导图 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：bc88b739e0af08ee19f47310efa400cf
树图思维导图提供 书货app的UI结构 在线思维导图免费制作，点击“编辑”按钮，可对 书货app的UI结构 进行在线思维导图编辑，本思维导图属于思维导图模板主题，文件编号是：af89c90ca7047e4b5363a4d9adb7ab58
沪公网安备 31011502019485号
上海工商