写给大忙人看的原型设计规范（送模板）

原型图为什么总是被打回，一改再改！咱们今天一起来看看规范的原型设计，看不会也不要紧，模板抱回家省事省力省心！

背景：由于后台原型没得规范，慢慢变成了垃圾桶，越来越难维护。所以计划重构后台，统一用一套设计规范。

过程：…省略繁琐的撕逼过程

结果：基于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商城等多个创业项目，目前在跨境电商行业做产品经理。闲暇之余，运营个人公众号“异世治人录”，分享自己对互联网产品及生活工作感悟的原创文章，关注我~