原型图为什么总是被打回，一改再改！咱们今天一起来看看规范的原型设计，看不会也不要紧，模板抱回家省事省力省心！
背景：由于后台原型没得规范，慢慢变成了垃圾桶，越来越难维护。所以计划重构后台，统一用一套设计规范。
过程：...省略繁琐的撕逼过程
结果：基于element框架，设计后台原型，重构后台。
1 element-ui介绍
- Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的开发快速成型。由饿了么公司前端团队开源。
2 Design-设计原则
2.1 一致性 Consistency
- 与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；
- 在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。
2.2 反馈 Feedback
- 控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；
- 页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。
2.3 效率 Efficiency
- 简化流程：设计简洁直观的操作流程；
- 清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
- 帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
2.4 可控 Controllability
- 用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；
- 结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
3 举几个栗子
3.1 Color 色彩规范
为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。
- 主色
- Element 主要品牌颜色是鲜艳、友好的蓝色。
- 辅助色
- 除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。
- 中性色
- 中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。
3.2 Typography 字体规范
我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。
- 字体
- 字号
- 行高
4 获取模板
想要获取Element原型模板的同学
请 点个在看 然后在公众号回复：
模板快出来
更多省时省力省心的分享，关注我咯~
作者简介：“木深”，PMcaff、产品壹佰等社区专栏作者。热爱新鲜事物，负责过机器人、3D打印、VR商城等多个创业项目，目前在跨境电商行业做产品经理。闲暇之余，运营个人公众号“异世治人录”，分享自己对互联网产品及生活工作感悟的原创文章，关注我~