导图社区 设计规范
设计师需知的设计规范总结，包括设计风格、好的规范的标准、规范优先级、框架布局、组件、场景和控件等。
多种思维模型：多元思维模型、整合思维模型、系统思维模型、POA行动模型、TOPIC模型、管理4C模型、GROW教练模型、英雄之旅模型、STORY模型、冰山模型、五大圈层模型、头脑风暴、六顶思考帽、5W1H分析、SWOT分析、金字塔模型、费曼技巧。
竞品分析思维导图，竞品分析小到对个人发展，大到对公司发展规划，是一种必不可少的分析思维，这里对其进行了讲解。
本图是关于产品生命周期分析，描述了一种产品从研发到衰退的一个具体全过程，分析得十分到位，内容实用学习性强。
社区模板帮助中心，点此进入>>
互联网9大思维
产品立项报告
产品经理如何做好项目管理
经验分享：产品经理必懂的产品思维
产品诞生过程
产品周期图
开门红的思考
招创智搜
网易星球
教学教务系统
设计规范
设计风格
色彩规范
颜色是设计中最重要的元素，颜色的运用与搭配决定设计的品质感。在 UI 设计中，颜色的使用规范主要在于：品牌主色、文本颜色、界面颜色（背景色、线框色）等。
字体
不同的字体气质不一样，并且不同场景下带给人的感受也不一样。所以需要在设计的时候考虑到字体的设计效果，然后在设计规范中注明。
图标
在 UI 界面中，具有标识性质的图形就是图标。
应用图标：各种应用程序的识别标志，在应用商店里下载的一些应用程序的标志。
功能图标：规范中最好标明图标格式与使用方式。比如 Web 设计，图片可以使用 iconfont 管理，可生成代码交付给前端开发；如果是原生 APP，那么需要标注图标导出格式与尺寸。
图片尺寸
图片作为界面设计的重要组成部分，需要标明尺寸规范，分为不同用途的种类。
好的规范的标准
一个好的规范应该是高效的、简单易懂的。具体执行时，我们应该确保分类合理、规范本身保持一致、布局排版易读，来提升设计师查阅的效率；确保定义清晰、描述准确、场景完备，来帮助设计师理解和使用。但值得注意的是，设计规范并不是「圣经」，不要因为规范而限制了自己的思维，当发现规范有问题的时候，要及时去修正，而不是做了一次之后，一直沿用，永不修改。
规范优先级
基础规范
设计尺寸
栅格系统
系统导航
临时规范
图标风格
弹窗样式
默认图
复杂规范
目录规范
版式统一
组件控件
框架布局
设计尺寸，是指进行设计时，选择的画板尺寸。例如是 750*1334，还是 375*667，每个公司设计的基准都不一样，所以设计尺寸并没有规定只能用某一个尺寸，我们在设计时，使用的 1 倍图为基准进行设计的，基准尺寸为 375*667。
栅格系统，是运用固定的格子设计版面布局，在 UI 设计和前端开发中被广泛应用的一套体系。在设计尺寸中提到栅格系统，是因为现在的设计基本都是一稿适配多端，而栅格系统能很好的解决这个问题。
布局
基本布局
卡片布局
导航
列表
组件
表格
对话框
提示条
气泡提示
日期选择器
多级选择器
标签输入框
组合框
上传
场景
分步骤页面
帮助指引页
空白页
空状态页面：显示对应的页面空状态的图标，增加相应的引导按钮。
无网络状态：在没有连接到网络时的提示页面。
404&505页面：发生未知错误时的页面。
控件
按钮
状态
正常
点击
悬停
加载
禁用
需要在规范中分别罗列出这五个状态，标注上对应的按钮填充色、边框色、圆角值、按钮宽度和高度，按钮文本大小、颜色值。如果是图标按钮的话，除了上述参数值以外，还需要标注 icon 和按钮文本之间的间距，icon 图标的大小。
输入框
用于单行信息录入文字上下居中显示，支持键盘录入和剪切板输入文本，对特定格式的文本进行处理：密码隐藏显示、身份证、卡号分段显示，标注宽高。
下拉列表
下拉菜单
切换按钮
单选框
未选择
已选中
未选悬停
已选失效
未选失效
复选框
选项卡
用于让用户在不同的视图中进行切换。标签数量，一般是 2-5 个；其中，标签中的文案需要精简，一般是 2-4 个字。每个标签所占的宽度可适当调整。
搜索框
分页
开关
滑块
滑动开关有两个互斥的选项（例如开/关、是/否、启动/禁止），它是用来打开或者关闭选项的控件。选择其中一个选项会立即执行操作
步进器
进度条
用于向用户展示步骤的步数以及当前所处的进程。
角标
用于聚合型的消息提示，一般出现在通知图标或头像的右上角，通过醒目的视觉形式吸引用户眼球。
